this repo has no description
Pass lang into media description
- Assume status lang applies to media description
- Allow RTL for media description
+41
-14
+2
-2
src/components/media-alt-modal.jsx
+2
-2
src/components/media-alt-modal.jsx
···
4
4
import Icon from './icon';
5
5
import TranslationBlock from './translation-block';
6
6
7
-
export default function MediaAltModal({ alt, onClose }) {
7
+
export default function MediaAltModal({ alt, lang, onClose }) {
8
8
const [forceTranslate, setForceTranslate] = useState(false);
9
9
return (
10
10
<div class="sheet">
···
36
36
</Menu>
37
37
</div>
38
38
</header>
39
-
<main>
39
+
<main lang={lang} dir="auto">
40
40
<p
41
41
style={{
42
42
whiteSpace: 'pre-wrap',
+11
-4
src/components/media-modal.jsx
+11
-4
src/components/media-modal.jsx
···
14
14
mediaAttachments,
15
15
statusID,
16
16
instance,
17
+
lang,
17
18
index = 0,
18
19
onClose = () => {},
19
20
}) {
···
138
139
class="media-alt"
139
140
hidden={!showControls}
140
141
onClick={() => {
141
-
setShowMediaAlt(media.description);
142
+
setShowMediaAlt({
143
+
alt: media.description,
144
+
lang,
145
+
});
142
146
}}
143
147
>
144
148
<span class="alt-badge">ALT</span>
145
-
<span class="media-alt-desc">{media.description}</span>
149
+
<span class="media-alt-desc" lang={lang} dir="auto">
150
+
{media.description}
151
+
</span>
146
152
</button>
147
153
)}
148
-
<Media media={media} showOriginal />
154
+
<Media media={media} showOriginal lang={lang} />
149
155
</div>
150
156
);
151
157
})}
···
279
285
}}
280
286
>
281
287
<MediaAltModal
282
-
alt={showMediaAlt}
288
+
alt={showMediaAlt.alt || showMediaAlt}
289
+
lang={showMediaAlt?.lang}
283
290
onClose={() => setShowMediaAlt(false)}
284
291
/>
285
292
</Modal>
+24
-7
src/components/media.jsx
+24
-7
src/components/media.jsx
···
29
29
30
30
const dataAltLabel = 'ALT';
31
31
const AltBadge = (props) => {
32
-
const { alt, ...rest } = props;
32
+
const { alt, lang, ...rest } = props;
33
33
if (!alt || !alt.trim()) return null;
34
34
return (
35
35
<button
···
39
39
onClick={(e) => {
40
40
e.stopPropagation();
41
41
e.preventDefault();
42
-
states.showMediaAlt = alt;
42
+
states.showMediaAlt = {
43
+
alt,
44
+
lang,
45
+
};
43
46
}}
44
47
title="Media description"
45
48
>
···
50
53
51
54
const MEDIA_CAPTION_LIMIT = 140;
52
55
53
-
function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
56
+
function Media({
57
+
media,
58
+
to,
59
+
lang,
60
+
showOriginal,
61
+
autoAnimate,
62
+
onClick = () => {},
63
+
}) {
54
64
const {
55
65
blurhash,
56
66
description,
···
250
260
}
251
261
}}
252
262
/>
253
-
<AltBadge alt={description} />
263
+
<AltBadge alt={description} lang={lang} />
254
264
</>
255
265
)}
256
266
</Parent>
···
383
393
</div>
384
394
</>
385
395
)}
386
-
{!showOriginal && !showInlineDesc && <AltBadge alt={description} />}
396
+
{!showOriginal && !showInlineDesc && (
397
+
<AltBadge alt={description} lang={lang} />
398
+
)}
387
399
</Parent>
388
400
{showInlineDesc && (
389
401
<figcaption
390
402
class={`media-caption media-caption-${
391
403
description.length <= MEDIA_CAPTION_LIMIT ? 'short' : 'long'
392
404
}`}
405
+
lang={lang}
406
+
dir="auto"
393
407
onClick={(e) => {
394
408
e.preventDefault();
395
409
e.stopPropagation();
396
-
states.showMediaAlt = description;
410
+
states.showMediaAlt = {
411
+
alt: description,
412
+
lang,
413
+
};
397
414
}}
398
415
title={
399
416
description.length > MEDIA_CAPTION_LIMIT ? description : undefined
···
431
448
<div class="media-play">
432
449
<Icon icon="play" size="xl" />
433
450
</div>
434
-
<AltBadge alt={description} />
451
+
<AltBadge alt={description} lang={lang} />
435
452
</>
436
453
)}
437
454
</Parent>
+2
-1
src/components/modals.jsx
+2
-1
src/components/modals.jsx
+1
src/components/status.jsx
+1
src/components/status.jsx