+13 -4

src/components/status.css

reviewed

··· 1015 1015 white-space: nowrap; 1016 1016 overflow: hidden; 1017 1017 text-overflow: ellipsis; 1018 1018 + display: inline-flex; 1019 1019 + gap: 4px; 1018 1020 1019 1021 &:hover { 1020 1022 color: var(--text-color); 1021 1023 cursor: pointer; 1022 1024 } 1025 1025 + 1026 1026 + &:only-child { 1027 1027 + white-space: pre-line; 1028 1028 + overflow: auto; 1029 1029 + text-overflow: unset; 1030 1030 + } 1023 1031 } 1024 1032 1025 1033 sup { 1026 1034 opacity: 0.75; 1027 1035 font-variant-numeric: tabular-nums; 1036 1036 + flex-shrink: 0; 1028 1037 } 1029 1038 } 1030 1039 1031 1040 /* Only 4, for now. Would be better if this is a for loop */ 1032 1041 &:has(.media[data-has-alt]:nth-child(1):is(:hover, :focus)) 1033 1042 figcaption 1034 1034 - > div[data-caption-index='1'], 1043 1043 + > div[data-caption-index~='1'], 1035 1044 &:has(.media[data-has-alt]:nth-child(2):is(:hover, :focus)) 1036 1045 figcaption 1037 1037 - > div[data-caption-index='2'], 1046 1046 + > div[data-caption-index~='2'], 1038 1047 &:has(.media[data-has-alt]:nth-child(3):is(:hover, :focus)) 1039 1048 figcaption 1040 1040 - > div[data-caption-index='3'], 1049 1049 + > div[data-caption-index~='3'], 1041 1050 &:has(.media[data-has-alt]:nth-child(4):is(:hover, :focus)) 1042 1051 figcaption 1043 1043 - > div[data-caption-index='4'] { 1052 1052 + > div[data-caption-index~='4'] { 1044 1053 color: var(--text-color); 1045 1054 } 1046 1055 }

+58 -23

src/components/status.jsx

reviewed

··· 877 877 displayedMediaAttachments.some( 878 878 (media) => !!media.description && !isMediaCaptionLong(media.description), 879 879 ); 880 880 + const captionChildren = useMemo(() => { 881 881 + if (!showMultipleMediaCaptions) return null; 882 882 + const attachments = []; 883 883 + displayedMediaAttachments.forEach((media, i) => { 884 884 + if (!media.description) return; 885 885 + const index = attachments.findIndex( 886 886 + (attachment) => attachment.media.description === media.description, 887 887 + ); 888 888 + if (index === -1) { 889 889 + attachments.push({ 890 890 + media, 891 891 + indices: [i], 892 892 + }); 893 893 + } else { 894 894 + attachments[index].indices.push(i); 895 895 + } 896 896 + }); 897 897 + return attachments.map(({ media, indices }) => ( 898 898 + <div 899 899 + key={media.id} 900 900 + data-caption-index={indices.map((i) => i + 1).join(' ')} 901 901 + onClick={(e) => { 902 902 + e.preventDefault(); 903 903 + e.stopPropagation(); 904 904 + states.showMediaAlt = { 905 905 + alt: media.description, 906 906 + lang: language, 907 907 + }; 908 908 + }} 909 909 + title={media.description} 910 910 + > 911 911 + ^{{indices.map((i) => i + 1).join(' ')}} {media.description} 912 912 + </div> 913 913 + )); 914 914 + 915 915 + // return displayedMediaAttachments.map( 916 916 + // (media, i) => 917 917 + // !!media.description && ( 918 918 + // <div 919 919 + // key={media.id} 920 920 + // data-caption-index={i + 1} 921 921 + // onClick={(e) => { 922 922 + // e.preventDefault(); 923 923 + // e.stopPropagation(); 924 924 + // states.showMediaAlt = { 925 925 + // alt: media.description, 926 926 + // lang: language, 927 927 + // }; 928 928 + // }} 929 929 + // title={media.description} 930 930 + // > 931 931 + // ^{{i + 1}} {media.description} 932 932 + // </div> 933 933 + // ), 934 934 + // ); 935 935 + }, [showMultipleMediaCaptions, displayedMediaAttachments, language]); 880 936 881 937 return ( 882 938 <article ··· 1277 1333 <MultipleMediaFigure 1278 1334 lang={language} 1279 1335 enabled={showMultipleMediaCaptions} 1280 1280 - captionChildren={() => { 1281 1281 - return displayedMediaAttachments.map( 1282 1282 - (media, i) => 1283 1283 - !!media.description && ( 1284 1284 - <div 1285 1285 - key={media.id} 1286 1286 - data-caption-index={i + 1} 1287 1287 - onClick={(e) => { 1288 1288 - e.preventDefault(); 1289 1289 - e.stopPropagation(); 1290 1290 - states.showMediaAlt = { 1291 1291 - alt: media.description, 1292 1292 - lang: language, 1293 1293 - }; 1294 1294 - }} 1295 1295 - title={media.description} 1296 1296 - > 1297 1297 - ^{{i + 1}} {media.description} 1298 1298 - </div> 1299 1299 - ), 1300 1300 - ); 1301 1301 - }} 1336 1336 + captionChildren={captionChildren} 1302 1337 > 1303 1338 <div 1304 1339 ref={mediaContainerRef} ··· 1533 1568 <figure class="media-figure-multiple"> 1534 1569 {children} 1535 1570 <figcaption lang={lang} dir="auto"> 1536 1536 - {captionChildren?.()} 1571 1571 + {captionChildren} 1537 1572 </figcaption> 1538 1573 </figure> 1539 1574 );