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 ( +
+ {children} +
{ + e.preventDefault(); + e.stopPropagation(); + states.showMediaAlt = { + alt: description, + lang, + }; + }} + title={ + description.length > MEDIA_CAPTION_LIMIT + ? description + : undefined + } + > + {description} +
+
+ ); + }; + if (isImage) { // Note: type: unknown might not have width/height quickPinchZoomProps.containerProps.style.display = 'inherit'; @@ -187,83 +230,85 @@ function Media({ }, [mediaURL]); return ( - - {showOriginal ? ( - - {description} { - 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; +
+ - - ) : ( - <> - {description} { - 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; - } - }} - /> - - - )} - + : mediaStyles + } + > + {showOriginal ? ( + + {description} { + 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; + } + }} + /> + + ) : ( + <> + {showInlineDesc { + 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 && } + + )} + +
); } else if (type === 'gifv' || type === 'video' || isVideoMaybe) { const shortDuration = original.duration < 31; @@ -291,11 +336,8 @@ function Media({ > `; - const showInlineDesc = !showOriginal && !isGIF && !!description; - const Container = showInlineDesc ? 'figure' : Fragment; - return ( - +
+ {!showInlineDesc && } )} {!showOriginal && !showInlineDesc && ( )} - {showInlineDesc && ( -
{ - e.preventDefault(); - e.stopPropagation(); - states.showMediaAlt = { - alt: description, - lang, - }; - }} - title={ - description.length > MEDIA_CAPTION_LIMIT ? description : undefined - } - > - {description} -
- )} - +
); } else if (type === 'audio') { const formattedDuration = formatDuration(original.duration); return ( - - {showOriginal ? ( - +
+ + {showOriginal ? ( + +
); } } 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'