Pass lang into media description

- Assume status lang applies to media description
- Allow RTL for media description

src/components/media-alt-modal.jsx

@@ -4,7 +4,7 @@ import { useState } from 'preact/hooks';
 import Icon from './icon';
 import TranslationBlock from './translation-block';
 
-export default function MediaAltModal({ alt, onClose }) {
+export default function MediaAltModal({ alt, lang, onClose }) {
   const [forceTranslate, setForceTranslate] = useState(false);
   return (
     <div class="sheet">
@@ -36,7 +36,7 @@ export default function MediaAltModal({ alt, onClose }) {
           </Menu>
         </div>
       </header>
-      <main>
+      <main lang={lang} dir="auto">
         <p
           style={{
             whiteSpace: 'pre-wrap',

src/components/media-modal.jsx

@@ -14,6 +14,7 @@ function MediaModal({
   mediaAttachments,
   statusID,
   instance,
+  lang,
   index = 0,
   onClose = () => {},
 }) {
@@ -138,14 +139,19 @@ function MediaModal({
                   class="media-alt"
                   hidden={!showControls}
                   onClick={() => {
-                    setShowMediaAlt(media.description);
+                    setShowMediaAlt({
+                      alt: media.description,
+                      lang,
+                    });
                   }}
                 >
                   <span class="alt-badge">ALT</span>
-                  <span class="media-alt-desc">{media.description}</span>
+                  <span class="media-alt-desc" lang={lang} dir="auto">
+                    {media.description}
+                  </span>
                 </button>
               )}
-              <Media media={media} showOriginal />
+              <Media media={media} showOriginal lang={lang} />
             </div>
           );
         })}
@@ -279,7 +285,8 @@ function MediaModal({
           }}
         >
           <MediaAltModal
-            alt={showMediaAlt}
+            alt={showMediaAlt.alt || showMediaAlt}
+            lang={showMediaAlt?.lang}
             onClose={() => setShowMediaAlt(false)}
           />
         </Modal>

src/components/media.jsx

@@ -29,7 +29,7 @@ audio = Audio track
 
 const dataAltLabel = 'ALT';
 const AltBadge = (props) => {
-  const { alt, ...rest } = props;
+  const { alt, lang, ...rest } = props;
   if (!alt || !alt.trim()) return null;
   return (
     <button
@@ -39,7 +39,10 @@ const AltBadge = (props) => {
       onClick={(e) => {
         e.stopPropagation();
         e.preventDefault();
-        states.showMediaAlt = alt;
+        states.showMediaAlt = {
+          alt,
+          lang,
+        };
       }}
       title="Media description"
     >
@@ -50,7 +53,14 @@ const AltBadge = (props) => {
 
 const MEDIA_CAPTION_LIMIT = 140;
 
-function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
+function Media({
+  media,
+  to,
+  lang,
+  showOriginal,
+  autoAnimate,
+  onClick = () => {},
+}) {
   const {
     blurhash,
     description,
@@ -250,7 +260,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
                 }
               }}
             />
-            <AltBadge alt={description} />
+            <AltBadge alt={description} lang={lang} />
           </>
         )}
       </Parent>
@@ -383,17 +393,24 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
               </div>
             </>
           )}
-          {!showOriginal && !showInlineDesc && <AltBadge alt={description} />}
+          {!showOriginal && !showInlineDesc && (
+            <AltBadge alt={description} lang={lang} />
+          )}
         </Parent>
         {showInlineDesc && (
           <figcaption
             class={`media-caption media-caption-${
               description.length <= MEDIA_CAPTION_LIMIT ? 'short' : 'long'
             }`}
+            lang={lang}
+            dir="auto"
             onClick={(e) => {
               e.preventDefault();
               e.stopPropagation();
-              states.showMediaAlt = description;
+              states.showMediaAlt = {
+                alt: description,
+                lang,
+              };
             }}
             title={
               description.length > MEDIA_CAPTION_LIMIT ? description : undefined
@@ -431,7 +448,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
             <div class="media-play">
               <Icon icon="play" size="xl" />
             </div>
-            <AltBadge alt={description} />
+            <AltBadge alt={description} lang={lang} />
           </>
         )}
       </Parent>

src/components/modals.jsx

@@ -189,7 +189,8 @@ export default function Modals() {
           }}
         >
           <MediaAltModal
-            alt={snapStates.showMediaAlt}
+            alt={snapStates.showMediaAlt.alt || snapStates.showMediaAlt}
+            lang={snapStates.showMediaAlt?.lang}
             onClose={() => {
               states.showMediaAlt = false;
             }}

src/components/status.jsx

@@ -1269,6 +1269,7 @@ function Status({
                     key={media.id}
                     media={media}
                     autoAnimate={isSizeLarge}
+                    lang={language}
                     to={`/${instance}/s/${id}?${
                       withinContext ? 'media' : 'media-only'
                     }=${i + 1}`}

src/pages/status.jsx

@@ -135,6 +135,7 @@ function StatusPage(params) {
             mediaAttachments={mediaAttachments}
             statusID={mediaStatusID || id}
             instance={instance}
+            lang={heroStatus?.language}
             index={mediaIndex - 1}
             onClose={handleMediaClose}
           />