From 4dd706ff96c34f53904b0dd609d0097f8d71ae6d Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 30 Sep 2023 23:23:34 +0800
Subject: [PATCH] Pass lang into media description

- Assume status lang applies to media description
- Allow RTL for media description
---
 src/components/media-alt-modal.jsx |  4 ++--
 src/components/media-modal.jsx     | 15 +++++++++++----
 src/components/media.jsx           | 31 +++++++++++++++++++++++-------
 src/components/modals.jsx          |  3 ++-
 src/components/status.jsx          |  1 +
 src/pages/status.jsx               |  1 +
 6 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/src/components/media-alt-modal.jsx b/src/components/media-alt-modal.jsx
index 95745764..09f94db4 100644
--- a/src/components/media-alt-modal.jsx
+++ b/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',
diff --git a/src/components/media-modal.jsx b/src/components/media-modal.jsx
index 7e520da4..c16f0779 100644
--- a/src/components/media-modal.jsx
+++ b/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>
diff --git a/src/components/media.jsx b/src/components/media.jsx
index 37c4b7fc..2ba4985c 100644
--- a/src/components/media.jsx
+++ b/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>
diff --git a/src/components/modals.jsx b/src/components/modals.jsx
index 70b56eb9..4403cbe5 100644
--- a/src/components/modals.jsx
+++ b/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;
             }}
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 9b2ae16e..a27c2672 100644
--- a/src/components/status.jsx
+++ b/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}`}
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index 3c4df0ea..3ef50d56 100644
--- a/src/pages/status.jsx
+++ b/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}
           />