More conditions for show/hide captions

- Remove unused code
- Refactor and memoize the long/short calculation too

src/components/media.jsx

@@ -1,4 +1,5 @@
 import { getBlurHashAverageColor } from 'fast-blurhash';
+import mem from 'mem';
 import { Fragment } from 'preact';
 import {
   useCallback,
@@ -53,6 +54,12 @@ const AltBadge = (props) => {
 };
 
 const MEDIA_CAPTION_LIMIT = 140;
+export const isMediaCaptionLong = mem((caption) =>
+  caption?.length
+    ? caption.length > MEDIA_CAPTION_LIMIT ||
+      /[\n\r].*[\n\r]/.test(caption.trim())
+    : false,
+);
 
 function Media({
   media,
@@ -172,15 +179,9 @@ function Media({
     aspectRatio: `${width} / ${height}`,
   };
 
-  const multilineDesc =
-    !!description && description.trim().split('\n').length > 2;
-  const longDesc = description?.length > MEDIA_CAPTION_LIMIT || multilineDesc;
+  const longDesc = isMediaCaptionLong(description);
   const showInlineDesc =
-    !!showCaption &&
-    !showOriginal &&
-    !!description &&
-    !longDesc &&
-    !multilineDesc;
+    !!showCaption && !showOriginal && !!description && !longDesc;
   const Figure = !showInlineDesc
     ? Fragment
     : (props) => {
@@ -189,9 +190,7 @@ function Media({
           <figure {...restProps}>
             {children}
             <figcaption
-              class={`media-caption media-caption-${
-                longDesc ? 'long' : 'short'
-              }`}
+              class="media-caption"
               lang={lang}
               dir="auto"
               onClick={(e) => {
@@ -202,11 +201,6 @@ function Media({
                   lang,
                 };
               }}
-              title={
-                description.length > MEDIA_CAPTION_LIMIT
-                  ? description
-                  : undefined
-              }
             >
               {description}
             </figcaption>

src/components/status.css

@@ -725,17 +725,6 @@
       white-space: pre-line;
       flex-basis: 15em;
       flex-grow: 1;
-
-      &.media-caption-long {
-        overflow: hidden;
-        white-space: normal;
-        display: -webkit-box;
-        display: box;
-        -webkit-box-orient: vertical;
-        box-orient: vertical;
-        -webkit-line-clamp: 3;
-        line-clamp: 3;
-      }
     }
   }
 

src/components/status.jsx

@@ -55,6 +55,7 @@ import Avatar from './avatar';
 import Icon from './icon';
 import Link from './link';
 import Media from './media';
+import { isMediaCaptionLong } from './media';
 import MenuLink from './menu-link';
 import RelativeTime from './relative-time';
 import TranslationBlock from './translation-block';
@@ -1269,12 +1270,17 @@ function Status({
               lang={language}
               enabled={
                 mediaAttachments.length > 1 &&
-                mediaAttachments.some((media) => !!media.description)
+                mediaAttachments.some(
+                  (media) =>
+                    !!media.description &&
+                    !isMediaCaptionLong(media.description),
+                )
               }
               captionChildren={() => {
                 return mediaAttachments.map(
                   (media, i) =>
-                    !!media.description && (
+                    !!media.description &&
+                    !isMediaCaptionLong(media.description) && (
                       <div
                         key={media.id}
                         onClick={(e) => {
@@ -1315,6 +1321,7 @@ function Status({
                       altIndex={
                         mediaAttachments.length > 1 &&
                         !!media.description &&
+                        !isMediaCaptionLong(media.description) &&
                         i + 1
                       }
                       to={`/${instance}/s/${id}?${