Little adjustments, show more captions

src/components/media.jsx

@@ -59,6 +59,7 @@ function Media({
   lang,
   showOriginal,
   autoAnimate,
+  showCaption,
   onClick = () => {},
 }) {
   const {
@@ -169,6 +170,48 @@ function Media({
     aspectRatio: `${width} / ${height}`,
   };
 
+  const multilineDesc =
+    !!description && description.trim().split('\n').length > 2;
+  const longDesc = description?.length > MEDIA_CAPTION_LIMIT || multilineDesc;
+  const showInlineDesc =
+    !!showCaption &&
+    !showOriginal &&
+    !!description &&
+    !longDesc &&
+    !multilineDesc;
+  const Figure = !showInlineDesc
+    ? Fragment
+    : (props) => {
+        const { children, ...restProps } = props;
+        return (
+          <figure {...restProps}>
+            {children}
+            <figcaption
+              class={`media-caption media-caption-${
+                longDesc ? 'long' : 'short'
+              }`}
+              lang={lang}
+              dir="auto"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                states.showMediaAlt = {
+                  alt: description,
+                  lang,
+                };
+              }}
+              title={
+                description.length > MEDIA_CAPTION_LIMIT
+                  ? description
+                  : undefined
+              }
+            >
+              {description}
+            </figcaption>
+          </figure>
+        );
+      };
+
   if (isImage) {
     // Note: type: unknown might not have width/height
     quickPinchZoomProps.containerProps.style.display = 'inherit';
@@ -187,12 +230,13 @@ function Media({
     }, [mediaURL]);
 
     return (
+      <Figure>
         <Parent
           ref={parentRef}
           class={`media media-image`}
           onClick={onClick}
           data-orientation={orientation}
-        data-has-alt={!!description || undefined}
+          data-has-alt={!showInlineDesc}
           style={
             showOriginal
               ? {
@@ -232,7 +276,7 @@ function Media({
             <>
               <img
                 src={mediaURL}
-              alt={description}
+                alt={showInlineDesc ? '' : description}
                 width={width}
                 height={height}
                 data-orientation={orientation}
@@ -260,10 +304,11 @@ function Media({
                   }
                 }}
               />
-            <AltBadge alt={description} lang={lang} />
+              {!showInlineDesc && <AltBadge alt={description} lang={lang} />}
             </>
           )}
         </Parent>
+      </Figure>
     );
   } else if (type === 'gifv' || type === 'video' || isVideoMaybe) {
     const shortDuration = original.duration < 31;
@@ -291,11 +336,8 @@ function Media({
     ></video>
   `;
 
-    const showInlineDesc = !showOriginal && !isGIF && !!description;
-    const Container = showInlineDesc ? 'figure' : Fragment;
-
     return (
-      <Container>
+      <Figure>
         <Parent
           class={`media media-${isGIF ? 'gif' : 'video'} ${
             autoGIFAnimate ? 'media-contain' : ''
@@ -303,7 +345,7 @@ function Media({
           data-orientation={orientation}
           data-formatted-duration={formattedDuration}
           data-label={isGIF && !showOriginal && !autoGIFAnimate ? 'GIF' : ''}
-          data-has-alt={!!description || undefined}
+          data-has-alt={!showInlineDesc}
           // style={{
           //   backgroundColor:
           //     rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
@@ -391,43 +433,23 @@ function Media({
               <div class="media-play">
                 <Icon icon="play" size="xl" />
               </div>
+              {!showInlineDesc && <AltBadge alt={description} lang={lang} />}
             </>
           )}
           {!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 = {
-                alt: description,
-                lang,
-              };
-            }}
-            title={
-              description.length > MEDIA_CAPTION_LIMIT ? description : undefined
-            }
-          >
-            {description}
-          </figcaption>
-        )}
-      </Container>
+      </Figure>
     );
   } else if (type === 'audio') {
     const formattedDuration = formatDuration(original.duration);
     return (
+      <Figure>
         <Parent
           class="media media-audio"
           data-formatted-duration={formattedDuration}
-        data-has-alt={!!description || undefined}
+          data-has-alt={!showInlineDesc}
           onClick={onClick}
           style={!showOriginal && mediaStyles}
         >
@@ -436,7 +458,7 @@ function Media({
           ) : previewUrl ? (
             <img
               src={previewUrl}
-            alt={description}
+              alt={showInlineDesc ? '' : description}
               width={width}
               height={height}
               data-orientation={orientation}
@@ -448,10 +470,11 @@ function Media({
               <div class="media-play">
                 <Icon icon="play" size="xl" />
               </div>
-            <AltBadge alt={description} lang={lang} />
+              {!showInlineDesc && <AltBadge alt={description} lang={lang} />}
             </>
           )}
         </Parent>
+      </Figure>
     );
   }
 }

src/components/status.css

@@ -719,6 +719,7 @@
       color: var(--text-insignificant-color);
       line-height: 1.2;
       cursor: pointer;
+      white-space: pre-line;
 
       &.media-caption-long {
         overflow: hidden;
@@ -1027,6 +1028,11 @@ body:has(#modal-container .carousel) .status .media img:hover {
   z-index: 1;
   text-shadow: 0 var(--hairline-width) var(--bg-color);
   mix-blend-mode: luminosity;
+  white-space: pre-line;
+
+  &:is(:hover, :focus) {
+    mix-blend-mode: normal;
+  }
 }
 .carousel-item button.media-alt .media-alt-desc {
   overflow: hidden;
@@ -1684,7 +1690,7 @@ a.card:is(:hover, :focus):visited {
       transition: 0.15s ease-out;
       transition-property: transform, opacity, mix-blend-mode;
       transform: scale(1.15);
-      opacity: 0.8;
+      opacity: 0.9;
       mix-blend-mode: normal;
     }
   }

src/components/status.jsx

@@ -1269,6 +1269,7 @@ function Status({
                     key={media.id}
                     media={media}
                     autoAnimate={isSizeLarge}
+                    showCaption={mediaAttachments.length === 1}
                     lang={language}
                     to={`/${instance}/s/${id}?${
                       withinContext ? 'media' : 'media-only'