diff --git a/src/components/media.jsx b/src/components/media.jsx index d58b0d59..ecabcb29 100644 --- a/src/components/media.jsx +++ b/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({
{children}
{ @@ -202,11 +201,6 @@ function Media({ lang, }; }} - title={ - description.length > MEDIA_CAPTION_LIMIT - ? description - : undefined - } > {description}
diff --git a/src/components/status.css b/src/components/status.css index fc59d46d..2ba55e76 100644 --- a/src/components/status.css +++ b/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; - } } } diff --git a/src/components/status.jsx b/src/components/status.jsx index bcb1f122..30137d66 100644 --- a/src/components/status.jsx +++ b/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) && (
{ @@ -1315,6 +1321,7 @@ function Status({ altIndex={ mediaAttachments.length > 1 && !!media.description && + !isMediaCaptionLong(media.description) && i + 1 } to={`/${instance}/s/${id}?${