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 (
+
+ );
+ };
+
if (isImage) {
// Note: type: unknown might not have width/height
quickPinchZoomProps.containerProps.style.display = 'inherit';
@@ -187,83 +230,85 @@ function Media({
}, [mediaURL]);
return (
-
- {showOriginal ? (
-
- {
- 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;
+
- ) : (
- <>
- {
- 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 ? (
+
+ {
+ 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;
+ }
+ }}
+ />
+
+ ) : (
+ <>
+ {
+ 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 (
-
+
+
);
} else if (type === 'audio') {
const formattedDuration = formatDuration(original.duration);
return (
-
- {showOriginal ? (
-
- ) : previewUrl ? (
-
- ) : null}
- {!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'