alice.mosphere.at / phanpy
this repo has no description
0
fork

Configure Feed

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

Experiment figcaption for *multiple* media's

Lim Chee Aun 348efe00 9f623676

+132 -35
+13 -5
src/components/media.jsx
··· 29 29 30 30 const dataAltLabel = 'ALT'; 31 31 const AltBadge = (props) => { 32 - const { alt, lang, ...rest } = props; 32 + const { alt, lang, index, ...rest } = props; 33 33 if (!alt || !alt.trim()) return null; 34 34 return ( 35 35 <button ··· 47 47 title="Media description" 48 48 > 49 49 {dataAltLabel} 50 + {!!index && <sup>{index}</sup>} 50 51 </button> 51 52 ); 52 53 }; ··· 60 61 showOriginal, 61 62 autoAnimate, 62 63 showCaption, 64 + altIndex, 63 65 onClick = () => {}, 64 66 }) { 65 67 const { ··· 304 306 } 305 307 }} 306 308 /> 307 - {!showInlineDesc && <AltBadge alt={description} lang={lang} />} 309 + {!showInlineDesc && ( 310 + <AltBadge alt={description} lang={lang} index={altIndex} /> 311 + )} 308 312 </> 309 313 )} 310 314 </Parent> ··· 433 437 <div class="media-play"> 434 438 <Icon icon="play" size="xl" /> 435 439 </div> 436 - {!showInlineDesc && <AltBadge alt={description} lang={lang} />} 440 + {!showInlineDesc && ( 441 + <AltBadge alt={description} lang={lang} index={altIndex} /> 442 + )} 437 443 </> 438 444 )} 439 445 {!showOriginal && !showInlineDesc && ( 440 - <AltBadge alt={description} lang={lang} /> 446 + <AltBadge alt={description} lang={lang} index={altIndex} /> 441 447 )} 442 448 </Parent> 443 449 </Figure> ··· 470 476 <div class="media-play"> 471 477 <Icon icon="play" size="xl" /> 472 478 </div> 473 - {!showInlineDesc && <AltBadge alt={description} lang={lang} />} 479 + {!showInlineDesc && ( 480 + <AltBadge alt={description} lang={lang} index={altIndex} /> 481 + )} 474 482 </> 475 483 )} 476 484 </Parent>
+41 -3
src/components/status.css
··· 460 460 .status 461 461 .content-container.has-spoiler:not(.show-spoiler) 462 462 .spoiler 463 - ~ *:not(.media-container, .card), 463 + ~ *:not(.media-container, .card, .media-figure-multiple), 464 464 .status 465 465 .content-container.has-spoiler:not(.show-spoiler) 466 466 .spoiler ··· 469 469 .status 470 470 .content-container.has-spoiler:not(.show-spoiler) 471 471 .spoiler 472 - ~ .media-container 472 + ~ :is(.media-container, .media-figure-multiple) 473 473 figcaption { 474 474 filter: blur(5px) invert(0.5); 475 475 image-rendering: crisp-edges; ··· 483 483 .status 484 484 .content-container.has-spoiler:not(.show-spoiler) 485 485 .spoiler 486 - ~ .media-container 486 + ~ :is(.media-container, .media-figure-multiple) 487 487 .media 488 488 > *, 489 489 .status ··· 1006 1006 -webkit-line-clamp: 3; 1007 1007 -webkit-box-orient: vertical; 1008 1008 white-space: normal; 1009 + } 1010 + 1011 + .media-figure-multiple { 1012 + margin: 0; 1013 + padding: 0; 1014 + 1015 + figcaption { 1016 + padding: 4px; 1017 + font-size: 90%; 1018 + color: var(--text-insignificant-color); 1019 + line-height: 1.2; 1020 + white-space: nowrap; 1021 + overflow: hidden; 1022 + text-overflow: ellipsis; 1023 + 1024 + & > * { 1025 + white-space: nowrap; 1026 + overflow: hidden; 1027 + text-overflow: ellipsis; 1028 + 1029 + &:hover { 1030 + color: var(--text-color); 1031 + cursor: pointer; 1032 + } 1033 + } 1034 + 1035 + sup { 1036 + opacity: 0.75; 1037 + font-variant-numeric: tabular-nums; 1038 + } 1039 + } 1009 1040 } 1010 1041 1011 1042 .carousel-item { ··· 1686 1717 border-radius: 4px; 1687 1718 padding: 4px; 1688 1719 opacity: 0.65; 1720 + 1721 + sup { 1722 + vertical-align: super; 1723 + font-weight: normal; 1724 + line-height: 0; 1725 + padding-left: 2px; 1726 + } 1689 1727 1690 1728 &.clickable { 1691 1729 opacity: 0.75;
+78 -27
src/components/status.jsx
··· 1265 1265 </button> 1266 1266 )} 1267 1267 {!!mediaAttachments.length && ( 1268 - <div 1269 - ref={mediaContainerRef} 1270 - class={`media-container media-eq${mediaAttachments.length} ${ 1271 - mediaAttachments.length > 2 ? 'media-gt2' : '' 1272 - } ${mediaAttachments.length > 4 ? 'media-gt4' : ''}`} 1268 + <MultipleMediaFigure 1269 + lang={language} 1270 + enabled={ 1271 + mediaAttachments.length > 1 && 1272 + mediaAttachments.some((media) => !!media.description) 1273 + } 1274 + captionChildren={() => { 1275 + return mediaAttachments.map( 1276 + (media, i) => 1277 + !!media.description && ( 1278 + <div 1279 + key={media.id} 1280 + onClick={(e) => { 1281 + e.preventDefault(); 1282 + e.stopPropagation(); 1283 + states.showMediaAlt = { 1284 + alt: media.description, 1285 + lang: language, 1286 + }; 1287 + }} 1288 + title={ 1289 + media.description 1290 + ? `Media ${i + 1}: ${media.description}` 1291 + : undefined 1292 + } 1293 + > 1294 + <sup>{i + 1}</sup> {media.description} 1295 + </div> 1296 + ), 1297 + ); 1298 + }} 1273 1299 > 1274 - {mediaAttachments 1275 - .slice(0, isSizeLarge ? undefined : 4) 1276 - .map((media, i) => ( 1277 - <Media 1278 - key={media.id} 1279 - media={media} 1280 - autoAnimate={isSizeLarge} 1281 - showCaption={mediaAttachments.length === 1} 1282 - lang={language} 1283 - to={`/${instance}/s/${id}?${ 1284 - withinContext ? 'media' : 'media-only' 1285 - }=${i + 1}`} 1286 - onClick={ 1287 - onMediaClick 1288 - ? (e) => { 1289 - onMediaClick(e, i, media, status); 1290 - } 1291 - : undefined 1292 - } 1293 - /> 1294 - ))} 1295 - </div> 1300 + <div 1301 + ref={mediaContainerRef} 1302 + class={`media-container media-eq${mediaAttachments.length} ${ 1303 + mediaAttachments.length > 2 ? 'media-gt2' : '' 1304 + } ${mediaAttachments.length > 4 ? 'media-gt4' : ''}`} 1305 + > 1306 + {mediaAttachments 1307 + .slice(0, isSizeLarge ? undefined : 4) 1308 + .map((media, i) => ( 1309 + <Media 1310 + key={media.id} 1311 + media={media} 1312 + autoAnimate={isSizeLarge} 1313 + showCaption={mediaAttachments.length === 1} 1314 + lang={language} 1315 + altIndex={ 1316 + mediaAttachments.length > 1 && 1317 + !!media.description && 1318 + i + 1 1319 + } 1320 + to={`/${instance}/s/${id}?${ 1321 + withinContext ? 'media' : 'media-only' 1322 + }=${i + 1}`} 1323 + onClick={ 1324 + onMediaClick 1325 + ? (e) => { 1326 + onMediaClick(e, i, media, status); 1327 + } 1328 + : undefined 1329 + } 1330 + /> 1331 + ))} 1332 + </div> 1333 + </MultipleMediaFigure> 1296 1334 )} 1297 1335 {!!card && 1298 1336 card?.url !== status.url && ··· 1486 1524 </Modal> 1487 1525 )} 1488 1526 </article> 1527 + ); 1528 + } 1529 + 1530 + function MultipleMediaFigure(props) { 1531 + const { enabled, children, lang, captionChildren } = props; 1532 + if (!enabled || !captionChildren) return children; 1533 + return ( 1534 + <figure class="media-figure-multiple"> 1535 + {children} 1536 + <figcaption lang={lang} dir="auto"> 1537 + {captionChildren?.()} 1538 + </figcaption> 1539 + </figure> 1489 1540 ); 1490 1541 } 1491 1542