fix(post): image could flicker when clicking it to expand it

src/components/comment-media/comment-media.tsx

@@ -11,44 +11,27 @@ import Embed, { canEmbed } from '../embed';
 
 interface MediaProps {
   commentMediaInfo?: CommentMediaInfo;
-  post?: Comment;
+  deleted?: boolean;
+  displayHeight?: string;
+  displayWidth?: string;
   isFloatingEmbed?: boolean;
+  isOutOfFeed?: boolean;
   isReply?: boolean;
   linkHeight?: number;
   linkWidth?: number;
+  post?: Comment;
+  removed?: boolean;
+  spoiler?: boolean;
   showThumbnail?: boolean;
   setShowThumbnail: (showThumbnail: boolean) => void;
 }
 
-const Thumbnail = ({ commentMediaInfo, isFloatingEmbed, post, setShowThumbnail }: MediaProps) => {
+const Thumbnail = ({ commentMediaInfo, deleted, displayHeight, displayWidth, isFloatingEmbed, isOutOfFeed, isReply, removed, spoiler, setShowThumbnail }: MediaProps) => {
-  const { deleted, linkHeight, linkWidth, parentCid, removed, spoiler } = post || {};
+  const isMobile = useIsMobile();
-  const { isDescription, isRules } = post || {}; // custom properties, not from api
-  const isOutOfFeed = isDescription || isRules || isFloatingEmbed; // virtuoso wrapper unneeded
-  const isReply = parentCid;
-  const isDeleted = deleted || removed;
-
   const { patternThumbnailUrl, thumbnail, type, url } = commentMediaInfo || {};
   const [hasError, setHasError] = useState(false);
   const handleError = () => setHasError(true);
 
-  let displayWidth, displayHeight;
-  const isMobile = useIsMobile();
-  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%';
-  }
-
   let thumbnailComponent: React.ReactNode = null;
   const iframeThumbnail = patternThumbnailUrl || thumbnail;
   const gifFrameUrl = useFetchGifFirstFrame(type === 'gif' ? url : undefined);
@@ -78,7 +61,7 @@ const Thumbnail = ({ commentMediaInfo, isFloatingEmbed, post, setShowThumbnail }
 
   const linkWithoutThumbnail = url && new URL(url);
 
-  return hasError || isDeleted ? (
+  return hasError || deleted || removed ? (
     <img className={styles.fileDeleted} src='assets/filedeleted-res.gif' alt='File deleted' />
   ) : spoiler ? (
     <img className={styles.spoiler} src='assets/spoiler.png' alt='' onClick={() => 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,79 @@ 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 (
     <span className={styles.content}>
-      <span className={`${showThumbnail ? styles.show : styles.hide} ${styles.thumbnail}`}>
+      {commentMediaInfo?.type === 'image' ? (
-        {url && <Thumbnail commentMediaInfo={commentMediaInfo} isFloatingEmbed={isFloatingEmbed} post={post} setShowThumbnail={setShowThumbnail} />}
+        isMobile ? (
-        {isMobile && type && <div className={styles.fileInfo}>{`${post?.spoiler ? `${t('spoiler')} - ` : ''} ${getDisplayMediaInfoType(type, t)}`}</div>}
+          <span className={styles.thumbnail}>
-      </span>
+            <span className={isImageExpanded ? mediaClass : `${styles.thumbnailSmall} ${thumbnailSmallPadding}`} style={isImageExpanded ? {} : thumbnailDimensions}>
-      {!showThumbnail && <Media commentMediaInfo={commentMediaInfo} isReply={post?.parentCid} setShowThumbnail={setShowThumbnail} />}
+              <img src={url} alt='' onClick={() => setIsImageExpanded(!isImageExpanded)} />
+            </span>
+            {isImageExpanded && type && (
+              <div className={styles.fileInfo}>
+                <a href={url} target='_blank' rel='noopener noreferrer'>
+                  {url && url.length > 30 ? url.slice(0, 30) + '...' : url}
+                </a>{' '}
+                ({getDisplayMediaInfoType(type, t)}
+                {mediaDimensions && `, ${mediaDimensions}`})
+              </div>
+            )}
+            {type && !isImageExpanded && <div className={styles.fileInfo}>{`${post?.spoiler ? `${t('spoiler')} - ` : ''} ${getDisplayMediaInfoType(type, t)}`}</div>}
+          </span>
+        ) : (
+          <span className={isImageExpanded ? mediaClass : `${styles.thumbnailBig}  ${styles.thumbnail}`} style={isImageExpanded ? {} : thumbnailDimensions}>
+            <img src={url} alt='' onClick={() => setIsImageExpanded(!isImageExpanded)} />
+          </span>
+        )
+      ) : (
+        <>
+          <span className={`${showThumbnail ? styles.show : styles.hide} ${styles.thumbnail}`}>
+            {url && (
+              <Thumbnail
+                commentMediaInfo={commentMediaInfo}
+                displayHeight={displayHeight}
+                displayWidth={displayWidth}
+                isFloatingEmbed={isFloatingEmbed}
+                isOutOfFeed={isOutOfFeed}
+                deleted={deleted}
+                removed={removed}
+                spoiler={spoiler}
+                setShowThumbnail={setShowThumbnail}
+              />
+            )}
+            {isMobile && type && <div className={styles.fileInfo}>{`${post?.spoiler ? `${t('spoiler')} - ` : ''} ${getDisplayMediaInfoType(type, t)}`}</div>}
+          </span>
+          {!showThumbnail && <Media commentMediaInfo={commentMediaInfo} isReply={post?.parentCid} setShowThumbnail={setShowThumbnail} />}
+        </>
+      )}
     </span>
   );
 };