From 359fd92ae0557b8ec63fa572117da55618f66233 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 1 Oct 2023 13:18:31 +0800
Subject: [PATCH] Little adjustments, show more captions

---
 src/components/media.jsx  | 287 ++++++++++++++++++++------------------
 src/components/status.css |   8 +-
 src/components/status.jsx |   1 +
 3 files changed, 163 insertions(+), 133 deletions(-)

diff --git a/src/components/media.jsx b/src/components/media.jsx
index 2ba4985c..d7d67f63 100644
--- a/src/components/media.jsx
+++ b/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,83 +230,85 @@ function Media({
     }, [mediaURL]);
 
     return (
-      <Parent
-        ref={parentRef}
-        class={`media media-image`}
-        onClick={onClick}
-        data-orientation={orientation}
-        data-has-alt={!!description || undefined}
-        style={
-          showOriginal
-            ? {
-                backgroundImage: `url(${previewUrl})`,
-                backgroundSize: imageSmallerThanParent
-                  ? `${width}px ${height}px`
-                  : undefined,
-              }
-            : mediaStyles
-        }
-      >
-        {showOriginal ? (
-          <QuickPinchZoom {...quickPinchZoomProps}>
-            <img
-              ref={mediaRef}
-              src={mediaURL}
-              alt={description}
-              width={width}
-              height={height}
-              data-orientation={orientation}
-              loading="eager"
-              decoding="sync"
-              onLoad={(e) => {
-                e.target.closest('.media-image').style.backgroundImage = '';
-                e.target.closest('.media-zoom').style.display = '';
-                setPinchZoomEnabled(true);
-              }}
-              onError={(e) => {
-                const { src } = e.target;
-                if (src === mediaURL) {
-                  e.target.src = remoteMediaURL;
+      <Figure>
+        <Parent
+          ref={parentRef}
+          class={`media media-image`}
+          onClick={onClick}
+          data-orientation={orientation}
+          data-has-alt={!showInlineDesc}
+          style={
+            showOriginal
+              ? {
+                  backgroundImage: `url(${previewUrl})`,
+                  backgroundSize: imageSmallerThanParent
+                    ? `${width}px ${height}px`
+                    : undefined,
                 }
-              }}
-            />
-          </QuickPinchZoom>
-        ) : (
-          <>
-            <img
-              src={mediaURL}
-              alt={description}
-              width={width}
-              height={height}
-              data-orientation={orientation}
-              loading="lazy"
-              style={{
-                backgroundColor:
-                  rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
-                backgroundPosition: focalBackgroundPosition || 'center',
-                // Duration based on width or height in pixels
-                // 100px per second (rough estimate)
-                // Clamp between 5s and 120s
-                '--anim-duration': `${Math.min(
-                  Math.max(Math.max(width, height) / 100, 5),
-                  120,
-                )}s`,
-              }}
-              onLoad={(e) => {
-                e.target.closest('.media-image').style.backgroundImage = '';
-                e.target.dataset.loaded = true;
-              }}
-              onError={(e) => {
-                const { src } = e.target;
-                if (src === mediaURL) {
-                  e.target.src = remoteMediaURL;
-                }
-              }}
-            />
-            <AltBadge alt={description} lang={lang} />
-          </>
-        )}
-      </Parent>
+              : mediaStyles
+          }
+        >
+          {showOriginal ? (
+            <QuickPinchZoom {...quickPinchZoomProps}>
+              <img
+                ref={mediaRef}
+                src={mediaURL}
+                alt={description}
+                width={width}
+                height={height}
+                data-orientation={orientation}
+                loading="eager"
+                decoding="sync"
+                onLoad={(e) => {
+                  e.target.closest('.media-image').style.backgroundImage = '';
+                  e.target.closest('.media-zoom').style.display = '';
+                  setPinchZoomEnabled(true);
+                }}
+                onError={(e) => {
+                  const { src } = e.target;
+                  if (src === mediaURL) {
+                    e.target.src = remoteMediaURL;
+                  }
+                }}
+              />
+            </QuickPinchZoom>
+          ) : (
+            <>
+              <img
+                src={mediaURL}
+                alt={showInlineDesc ? '' : description}
+                width={width}
+                height={height}
+                data-orientation={orientation}
+                loading="lazy"
+                style={{
+                  backgroundColor:
+                    rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
+                  backgroundPosition: focalBackgroundPosition || 'center',
+                  // Duration based on width or height in pixels
+                  // 100px per second (rough estimate)
+                  // Clamp between 5s and 120s
+                  '--anim-duration': `${Math.min(
+                    Math.max(Math.max(width, height) / 100, 5),
+                    120,
+                  )}s`,
+                }}
+                onLoad={(e) => {
+                  e.target.closest('.media-image').style.backgroundImage = '';
+                  e.target.dataset.loaded = true;
+                }}
+                onError={(e) => {
+                  const { src } = e.target;
+                  if (src === mediaURL) {
+                    e.target.src = remoteMediaURL;
+                  }
+                }}
+              />
+              {!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,67 +433,48 @@ 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 (
-      <Parent
-        class="media media-audio"
-        data-formatted-duration={formattedDuration}
-        data-has-alt={!!description || undefined}
-        onClick={onClick}
-        style={!showOriginal && mediaStyles}
-      >
-        {showOriginal ? (
-          <audio src={remoteUrl || url} preload="none" controls autoplay />
-        ) : previewUrl ? (
-          <img
-            src={previewUrl}
-            alt={description}
-            width={width}
-            height={height}
-            data-orientation={orientation}
-            loading="lazy"
-          />
-        ) : null}
-        {!showOriginal && (
-          <>
-            <div class="media-play">
-              <Icon icon="play" size="xl" />
-            </div>
-            <AltBadge alt={description} lang={lang} />
-          </>
-        )}
-      </Parent>
+      <Figure>
+        <Parent
+          class="media media-audio"
+          data-formatted-duration={formattedDuration}
+          data-has-alt={!showInlineDesc}
+          onClick={onClick}
+          style={!showOriginal && mediaStyles}
+        >
+          {showOriginal ? (
+            <audio src={remoteUrl || url} preload="none" controls autoplay />
+          ) : previewUrl ? (
+            <img
+              src={previewUrl}
+              alt={showInlineDesc ? '' : description}
+              width={width}
+              height={height}
+              data-orientation={orientation}
+              loading="lazy"
+            />
+          ) : null}
+          {!showOriginal && (
+            <>
+              <div class="media-play">
+                <Icon icon="play" size="xl" />
+              </div>
+              {!showInlineDesc && <AltBadge alt={description} lang={lang} />}
+            </>
+          )}
+        </Parent>
+      </Figure>
     );
   }
 }
diff --git a/src/components/status.css b/src/components/status.css
index db880b91..0558223d 100644
--- a/src/components/status.css
+++ b/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;
     }
   }
diff --git a/src/components/status.jsx b/src/components/status.jsx
index a27c2672..61d737eb 100644
--- a/src/components/status.jsx
+++ b/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'