this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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
··· 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
··· 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
··· 189 189 }} 190 190 > 191 191 <MediaAltModal 192 - alt={snapStates.showMediaAlt} 192 + alt={snapStates.showMediaAlt.alt || snapStates.showMediaAlt} 193 + lang={snapStates.showMediaAlt?.lang} 193 194 onClose={() => { 194 195 states.showMediaAlt = false; 195 196 }}
+1
src/components/status.jsx
··· 1269 1269 key={media.id} 1270 1270 media={media} 1271 1271 autoAnimate={isSizeLarge} 1272 + lang={language} 1272 1273 to={`/${instance}/s/${id}?${ 1273 1274 withinContext ? 'media' : 'media-only' 1274 1275 }=${i + 1}`}
+1
src/pages/status.jsx
··· 135 135 mediaAttachments={mediaAttachments} 136 136 statusID={mediaStatusID || id} 137 137 instance={instance} 138 + lang={heroStatus?.language} 138 139 index={mediaIndex - 1} 139 140 onClose={handleMediaClose} 140 141 />