fix(comment media): rename, refactor, fix performance

src/components/comment-media/comment-media.module.css

@@ -2,6 +2,8 @@
   background-color: var(--media-thumbnail-background-color);
   width: var(--width);
   height: var(--height);
+  max-width: 250px;
+  max-height: 250px;
   margin: 3px 20px 5px 0;
   display: flex;
   justify-content: center;
@@ -12,6 +14,8 @@
   background-color: var(--media-thumbnail-background-color);
   width: var(--width);
   height: var(--height);
+  max-width: 125px;
+  max-height: 125px;
   margin: 3px 10px 5px 5px;
   display: flex;
   justify-content: center;
@@ -22,16 +26,6 @@
   float: left;
 }
 
-.thumbnailBig img, .thumbnailBig video {
-  max-width: 250px;
-  max-height: 250px;
-}
-
-.thumbnailSmall img, .thumbnailSmall video {
-  max-width: 125px;
-  max-height: 125px;
-}
-
 .hide {
   display: none !important;
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './media.module.css';
+import styles from './comment-media.module.css';
 import { CommentMediaInfo } from '../../lib/utils/media-utils';
 import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
 import Embed from '../embed';
@@ -8,10 +8,11 @@ import { useTranslation } from 'react-i18next';
 interface MediaProps {
   commentMediaInfo?: CommentMediaInfo;
   isMobile: boolean;
+  isOutOfFeed?: boolean; // virtuoso wrapper unneeded
   isReply: boolean;
   linkHeight?: number;
   linkWidth?: number;
-  showThumbnail: boolean;
+  showThumbnail?: boolean;
   setShowThumbnail: (showThumbnail: boolean) => void;
   toggleExpanded?: () => void;
 }
@@ -34,7 +35,7 @@ const ThumbnailSmall = ({ style, children, thumbnailSmallPadding }: ThumbnailPro
   </span>
 );
 
-const Thumbnail = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth, setShowThumbnail }: MediaProps) => {
+const Thumbnail = ({ commentMediaInfo, isMobile, isOutOfFeed, isReply, linkHeight, linkWidth, setShowThumbnail }: MediaProps) => {
   let displayWidth, displayHeight;
   const maxThumbnailSize = isMobile || isReply ? 125 : 250;
   if (linkWidth && linkHeight) {
@@ -51,25 +52,30 @@ const Thumbnail = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth,
     displayHeight = '75px';
   }
 
-  let mediaComponent: React.ReactNode = null;
+  if (isOutOfFeed) {
+    displayWidth = 'unset';
+    displayHeight = 'unset';
+  }
+
+  let thumbnailComponent: React.ReactNode = null;
   const iframeThumbnail = commentMediaInfo?.patternThumbnailUrl || commentMediaInfo?.thumbnail;
   const gifFrameUrl = useFetchGifFirstFrame(commentMediaInfo?.type === 'gif' ? commentMediaInfo.url : undefined);
   if (commentMediaInfo?.type === 'image') {
-    mediaComponent = <img src={commentMediaInfo.url} alt='' onClick={() => setShowThumbnail(false)} />;
+    thumbnailComponent = <img src={commentMediaInfo.url} alt='' onClick={() => setShowThumbnail(false)} />;
   } else if (commentMediaInfo?.type === 'video') {
-    mediaComponent = commentMediaInfo.thumbnail ? (
+    thumbnailComponent = commentMediaInfo.thumbnail ? (
       <img src={commentMediaInfo.thumbnail} alt='' />
     ) : (
       <video src={`${commentMediaInfo.url}#t=0.001`} onClick={() => setShowThumbnail(false)} />
     );
   } else if (commentMediaInfo?.type === 'webpage') {
-    mediaComponent = <img src={commentMediaInfo.thumbnail} alt='' onClick={() => setShowThumbnail(false)} />;
+    thumbnailComponent = <img src={commentMediaInfo.thumbnail} alt='' onClick={() => setShowThumbnail(false)} />;
   } else if (commentMediaInfo?.type === 'iframe') {
-    mediaComponent = iframeThumbnail ? <img src={iframeThumbnail} alt='' onClick={() => setShowThumbnail(false)} /> : null;
+    thumbnailComponent = iframeThumbnail ? <img src={iframeThumbnail} alt='' onClick={() => setShowThumbnail(false)} /> : null;
   } else if (commentMediaInfo?.type === 'gif' && gifFrameUrl) {
-    mediaComponent = <img src={gifFrameUrl} alt='' onClick={() => setShowThumbnail(false)} />;
+    thumbnailComponent = <img src={gifFrameUrl} alt='' onClick={() => setShowThumbnail(false)} />;
   } else if (commentMediaInfo?.type === 'audio') {
-    mediaComponent = <audio src={commentMediaInfo.url} controls />;
+    thumbnailComponent = <audio src={commentMediaInfo.url} controls />;
   }
 
   const thumbnailSmallPadding = isMobile ? styles.thumbnailMobile : styles.thumbnailReplyDesktop;
@@ -77,23 +83,57 @@ const Thumbnail = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth,
 
   return isMobile || isReply ? (
     <ThumbnailSmall style={thumbnailDimensions} thumbnailSmallPadding={thumbnailSmallPadding}>
-      {mediaComponent}
+      {thumbnailComponent}
     </ThumbnailSmall>
   ) : (
-    <ThumbnailBig style={thumbnailDimensions}>{mediaComponent}</ThumbnailBig>
+    <ThumbnailBig style={thumbnailDimensions}>{thumbnailComponent}</ThumbnailBig>
   );
 };
 
-const Media = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth, showThumbnail, setShowThumbnail }: MediaProps) => {
+const Media = ({ commentMediaInfo, isMobile, isReply, setShowThumbnail }: MediaProps) => {
   const { t } = useTranslation();
   const mediaClass = isMobile ? styles.mediaMobile : isReply ? styles.mediaDesktopReply : styles.mediaDesktopOp;
 
+  return (
+    <span className={mediaClass}>
+      {commentMediaInfo?.type === 'iframe' ? (
+        <Embed url={commentMediaInfo.url} />
+      ) : commentMediaInfo?.type === 'gif' ? (
+        <img src={commentMediaInfo.url} alt='' onClick={() => setShowThumbnail(true)} />
+      ) : commentMediaInfo?.type === 'video' ? (
+        <video src={commentMediaInfo.url} controls autoPlay loop muted />
+      ) : commentMediaInfo?.type === 'image' ? (
+        <img src={commentMediaInfo.url} alt='' onClick={() => setShowThumbnail(true)} />
+      ) : commentMediaInfo?.type === 'webpage' ? (
+        <img src={commentMediaInfo.thumbnail} alt='' onClick={() => setShowThumbnail(true)} />
+      ) : null}
+      {isMobile && commentMediaInfo?.type && (
+        <div className={styles.fileInfo}>
+          <a href={commentMediaInfo.url} target='_blank' rel='noopener noreferrer'>
+            {commentMediaInfo.url.length > 30 ? commentMediaInfo?.url.slice(0, 30) + '...' : commentMediaInfo?.url}
+          </a>{' '}
+          ({commentMediaInfo?.type})
+        </div>
+      )}
+      {isMobile && (commentMediaInfo?.type === 'iframe' || commentMediaInfo?.type === 'video' || commentMediaInfo?.type === 'audio') && (
+        <div className={styles.closeButton}>
+          <span className='button' onClick={() => setShowThumbnail(true)}>
+            {t('close')}
+          </span>
+        </div>
+      )}
+    </span>
+  );
+};
+
+const CommentMedia = ({ commentMediaInfo, isMobile, isOutOfFeed, isReply, linkHeight, linkWidth, showThumbnail, setShowThumbnail }: MediaProps) => {
   return (
     <span className={styles.content}>
       <span className={`${showThumbnail ? styles.show : styles.hide} ${styles.thumbnail}`}>
         <Thumbnail
           commentMediaInfo={commentMediaInfo}
           isMobile={isMobile}
+          isOutOfFeed={isOutOfFeed}
           isReply={isReply}
           linkHeight={linkHeight}
           linkWidth={linkWidth}
@@ -102,36 +142,9 @@ const Media = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth, sho
         />
         {isMobile && commentMediaInfo?.type && <div className={styles.fileInfo}>{commentMediaInfo.type}</div>}
       </span>
-      <span className={`${showThumbnail ? styles.hide : styles.show} ${mediaClass}`}>
+      {!showThumbnail && <Media commentMediaInfo={commentMediaInfo} isMobile={isMobile} isReply={isReply} setShowThumbnail={setShowThumbnail} />}
-        {commentMediaInfo?.type === 'iframe' ? (
-          <Embed url={commentMediaInfo.url} />
-        ) : commentMediaInfo?.type === 'gif' ? (
-          <img src={commentMediaInfo.url} alt='' onClick={() => setShowThumbnail(true)} />
-        ) : commentMediaInfo?.type === 'video' ? (
-          <video src={commentMediaInfo.url} controls autoPlay loop muted />
-        ) : commentMediaInfo?.type === 'image' ? (
-          <img src={commentMediaInfo.url} alt='' onClick={() => setShowThumbnail(true)} />
-        ) : commentMediaInfo?.type === 'webpage' ? (
-          <img src={commentMediaInfo.thumbnail} alt='' onClick={() => setShowThumbnail(true)} />
-        ) : null}
-        {isMobile && commentMediaInfo?.type && (
-          <div className={styles.fileInfo}>
-            <a href={commentMediaInfo.url} target='_blank' rel='noopener noreferrer'>
-              {commentMediaInfo.url.length > 30 ? commentMediaInfo?.url.slice(0, 30) + '...' : commentMediaInfo?.url}
-            </a>{' '}
-            ({commentMediaInfo?.type})
-          </div>
-        )}
-        {isMobile && (commentMediaInfo?.type === 'iframe' || commentMediaInfo?.type === 'video' || commentMediaInfo?.type === 'audio') && (
-          <div className={styles.closeButton}>
-            <span className='button' onClick={() => setShowThumbnail(true)}>
-              {t('close')}
-            </span>
-          </div>
-        )}
-      </span>
     </span>
   );
 };
 
-export default Media;
+export default CommentMedia;

src/components/comment-media/index.ts

@@ -0,0 +1 @@
+export { default } from './comment-media';

src/components/media/index.ts

@@ -1 +0,0 @@
-export { default } from './media';

src/components/post/post.tsx

@@ -10,7 +10,7 @@ import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
 import useReplies from '../../hooks/use-replies';
 import styles from './post.module.css';
 import Markdown from '../markdown';
-import Media from '../media';
+import CommentMedia from '../comment-media';
 
 interface PostProps {
   index?: number;
@@ -73,9 +73,10 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => {
             )}
           </div>
           {hasThumbnail && (
-            <Media
+            <CommentMedia
               commentMediaInfo={commentMediaInfo}
               isMobile={false}
+              isOutOfFeed={isDescription || isRules} // virtuoso wrapper unneeded
               isReply={false}
               linkHeight={linkHeight}
               linkWidth={linkWidth}
@@ -223,7 +224,7 @@ const ReplyDesktop = ({ reply, roles }: PostProps) => {
               )}
             </div>
             {hasThumbnail && (
-              <Media
+              <CommentMedia
                 commentMediaInfo={commentMediaInfo}
                 isMobile={false}
                 isReply={true}
@@ -308,9 +309,10 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => {
               </span>
             </div>
             {hasThumbnail && (
-              <Media
+              <CommentMedia
                 commentMediaInfo={commentMediaInfo}
                 isMobile={true}
+                isOutOfFeed={isDescription || isRules} // virtuoso wrapper unneeded
                 isReply={false}
                 linkHeight={linkHeight}
                 linkWidth={linkWidth}
@@ -384,7 +386,7 @@ const ReplyMobile = ({ reply, roles }: PostProps) => {
             </span>
           </div>
           {hasThumbnail && (
-            <Media
+            <CommentMedia
               commentMediaInfo={commentMediaInfo}
               isMobile={true}
               isReply={false}