add media on mobile

src/components/media/media.tsx

@@ -1,48 +1,34 @@
 import styles from './media.module.css';
-import { Link } from 'react-router-dom';
 import { CommentMediaInfo } from '../../lib/utils/media-utils';
 import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
 
 interface ThumbnailProps {
-  cid?: string;
   commentMediaInfo?: CommentMediaInfo;
-  expanded?: boolean;
+  isMobile: boolean;
   isReply: boolean;
-  link: string;
   linkHeight?: number;
   linkWidth?: number;
-  subplebbitAddress?: string;
   toggleExpanded?: () => void;
 }
 
-export const Thumbnail = ({
-  cid,
-  commentMediaInfo,
-  expanded = false,
-  isReply = false,
-  link,
-  linkHeight,
-  linkWidth,
-  subplebbitAddress,
-  toggleExpanded,
-}: ThumbnailProps) => {
+export const Thumbnail = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth }: ThumbnailProps) => {
   const iframeThumbnail = commentMediaInfo?.patternThumbnailUrl || commentMediaInfo?.thumbnail;
   let displayWidth, displayHeight, hasLinkDimensions;
-  const routeOrLink = isReply ? link : `/p/${subplebbitAddress}/c/${cid}`;
-  const thumbnailClass = expanded ? styles.thumbnailHidden : styles.thumbnailVisible;
+  const maxThumbnailSize = isMobile || isReply ? 125 : 250;
 
   if (linkWidth && linkHeight) {
-    let scale = Math.min(1, 250 / Math.max(linkWidth, linkHeight));
+    hasLinkDimensions = true;
+    let scale = Math.min(1, maxThumbnailSize / Math.max(linkWidth, linkHeight));
     displayWidth = `${linkWidth * scale}px`;
     displayHeight = `${linkHeight * scale}px`;
-    hasLinkDimensions = true;
   } else {
-    displayWidth = '250px';
-    displayHeight = '250px';
     hasLinkDimensions = false;
+    displayWidth = `${maxThumbnailSize}px`;
+    displayHeight = `${maxThumbnailSize}px`;
   }
 
-  const style = hasLinkDimensions ? ({ '--width': displayWidth, '--height': displayHeight } as React.CSSProperties) : {};
+  const thumbnailStyle = hasLinkDimensions ? ({ '--width': displayWidth, '--height': displayHeight } as React.CSSProperties) : {};
+  const thumbnailWrapperClass = hasLinkDimensions ? styles.transparentThumbnailWrapper : isMobile ? styles.thumbnailWrapperSmall : styles.thumbnailWrapperBig;
 
   let mediaComponent = null;
   const gifFrameUrl = useFetchGifFirstFrame(commentMediaInfo?.type === 'gif' ? commentMediaInfo.url : undefined);
@@ -60,19 +46,9 @@ export const Thumbnail = ({
   }
 
   return (
-    <span className={`${styles.thumbnail} ${thumbnailClass}`} style={style}>
-      <span className={hasLinkDimensions ? styles.transparentThumbnailWrapper : styles.thumbnailWrapper}>
-        <Link
-          to={routeOrLink}
-          onClick={(e) => {
-            if (e.button === 0 && isReply) {
-              e.preventDefault();
-              toggleExpanded && toggleExpanded();
-            }
-          }}
-        >
-          {mediaComponent}
-        </Link>
+    <span className={styles.thumbnail} style={thumbnailStyle}>
+      <span className={isMobile || isReply ? styles.thumbnailSmall : styles.thumbnailBig}>
+        <span className={thumbnailWrapperClass}>{mediaComponent}</span>
       </span>
     </span>
   );