) : spoiler ? (
setShowThumbnail(false)} />
@@ -149,6 +132,8 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
};
const CommentMedia = ({ commentMediaInfo, isFloatingEmbed, post, showThumbnail, setShowThumbnail }: MediaProps) => {
+ const { deleted, linkHeight, linkWidth, parentCid, removed, spoiler } = post || {};
+ const isReply = parentCid;
const { t } = useTranslation();
const isMobile = useIsMobile();
const { url } = commentMediaInfo || {};
@@ -161,13 +146,85 @@ const CommentMedia = ({ commentMediaInfo, isFloatingEmbed, post, showThumbnail,
type = 'static gif';
}
+ let displayWidth, displayHeight;
+ const maxThumbnailSize = isMobile || isReply ? 125 : 250;
+
+ if (linkWidth && linkHeight) {
+ let scale = Math.min(1, maxThumbnailSize / Math.max(linkWidth, linkHeight));
+ displayWidth = `${linkWidth * scale}px`;
+ displayHeight = `${linkHeight * scale}px`;
+ } else {
+ displayWidth = `${maxThumbnailSize}px`;
+ displayHeight = `${maxThumbnailSize}px`;
+ }
+
+ if (type === 'audio') {
+ displayWidth = '100%';
+ displayHeight = '100%';
+ }
+ const { isDescription, isRules } = post || {}; // custom properties, not from api
+ const isOutOfFeed = isDescription || isRules || isFloatingEmbed; // virtuoso wrapper unneeded
+
+ const [isImageExpanded, setIsImageExpanded] = useState(false);
+ const { fitExpandedImagesToScreen } = useExpandedMediaStore();
+ const mediaDimensions = getMediaDimensions(commentMediaInfo);
+ const mediaClass = `${isMobile ? styles.mediaMobile : isReply ? styles.mediaDesktopReply : styles.mediaDesktopOp} ${
+ fitExpandedImagesToScreen ? styles.fitToScreen : ''
+ }`;
+ const thumbnailSmallPadding = isMobile ? styles.thumbnailMobile : styles.thumbnailReplyDesktop;
+ const thumbnailDimensions = { '--width': displayWidth, '--height': displayHeight } as React.CSSProperties;
+
return (
-
- {url &&