add media on mobile

src/components/media/media.module.css

@@ -1,23 +1,29 @@
-.thumbnail {
+.thumbnailBig {
+  width: var(--width);
+  height: var(--height);
   float: left;
   padding: 3px 20px 5px 0;
-  width: var(--width, 250px);
-  height: var(--height, 250px);
 }
 
-.thumbnailHidden {
+.thumbnailSmall {
-  display: none;
+  width: var(--width);
+  height: var(--height);
+  float: left;
+  padding: 3px 10px 5px 5px;
 }
 
-.thumbnailVisible {
+.thumbnailWrapperBig {
-  display: block;
+  background-color: var(--post-thumbnail-background-color);
-}
+  display: inline-block;
-
-.thumbnailWrapper {
-  background-color: var(--background-thumbnail);
   height: 250px;
   width: 250px;
+}
+
+.thumbnailWrapperSmall {
+  background-color: var(--post-thumbnail-background-color);
   display: inline-block;
+  height: 150px;
+  width: 150px;
 }
 
 .transparentThumbnailWrapper {
@@ -26,6 +32,7 @@
 }
 
 .thumbnail img, .thumbnail video {
+  object-fit: contain;
   width: 100%;
   height: 100%;
 }

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 = ({
+export const Thumbnail = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth }: ThumbnailProps) => {
-  cid,
-  commentMediaInfo,
-  expanded = false,
-  isReply = false,
-  link,
-  linkHeight,
-  linkWidth,
-  subplebbitAddress,
-  toggleExpanded,
-}: ThumbnailProps) => {
   const iframeThumbnail = commentMediaInfo?.patternThumbnailUrl || commentMediaInfo?.thumbnail;
   let displayWidth, displayHeight, hasLinkDimensions;
-  const routeOrLink = isReply ? link : `/p/${subplebbitAddress}/c/${cid}`;
+  const maxThumbnailSize = isMobile || isReply ? 125 : 250;
-  const thumbnailClass = expanded ? styles.thumbnailHidden : styles.thumbnailVisible;
 
   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={styles.thumbnail} style={thumbnailStyle}>
-      <span className={hasLinkDimensions ? styles.transparentThumbnailWrapper : styles.thumbnailWrapper}>
+      <span className={isMobile || isReply ? styles.thumbnailSmall : styles.thumbnailBig}>
-        <Link
+        <span className={thumbnailWrapperClass}>{mediaComponent}</span>
-          to={routeOrLink}
-          onClick={(e) => {
-            if (e.button === 0 && isReply) {
-              e.preventDefault();
-              toggleExpanded && toggleExpanded();
-            }
-          }}
-        >
-          {mediaComponent}
-        </Link>
       </span>
     </span>
   );

src/components/post/post.tsx

@@ -40,15 +40,7 @@ const PostDesktop = ({ post }: Comment) => {
           </div>
           {hasThumbnail && (
             <span className={styles.fileThumb}>
-              <Thumbnail
+              <Thumbnail commentMediaInfo={commentMediaInfo} isMobile={false} isReply={false} linkHeight={linkHeight} linkWidth={linkWidth} />
-                cid={cid}
-                commentMediaInfo={commentMediaInfo}
-                isReply={false}
-                link={link}
-                linkHeight={linkHeight}
-                linkWidth={linkWidth}
-                subplebbitAddress={subplebbitAddress}
-              />
             </span>
           )}
         </div>
@@ -101,12 +93,15 @@ const PostDesktop = ({ post }: Comment) => {
 };
 
 const PostMobile = ({ post }: Comment) => {
-  const { author, cid, content, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {};
+  const { author, cid, content, link, linkHeight, linkWidth, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {};
   const { address, displayName, shortAddress } = author || {};
   const linkCount = countLinksInCommentReplies(post);
   const displayTitle = title && title.length > 30 ? title.slice(0, 30) + '(...)' : title;
   const displayContent = content && content.length > 1000 ? content.slice(0, 1000) : content;
 
+  const commentMediaInfo = getCommentMediaInfoMemoized(post);
+  const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
+
   return (
     <div className={styles.postMobile}>
       <div className={styles.hrWrapper}>
@@ -134,6 +129,11 @@ const PostMobile = ({ post }: Comment) => {
                 <span className={styles.replyToPost}>{shortCid}</span>
               </span>
             </div>
+            {hasThumbnail && (
+              <span className={styles.fileThumb}>
+                <Thumbnail commentMediaInfo={commentMediaInfo} isMobile={true} isReply={false} linkHeight={linkHeight} linkWidth={linkWidth} />
+              </span>
+            )}
             {content && (
               <blockquote className={`${styles.postMessage} ${styles.clampLines}`}>
                 <Markdown content={displayContent} />

src/themes.css

@@ -92,6 +92,7 @@
   --post-mobile-abbr-text-color: #707070;
   --post-mobile-abbr-font-size: 10pt;
   --post-mobile-content-font-size: 11pt;
+  --post-thumbnail-background-color: rgba(0, 0, 0, 0.05);
 
   /* post form */
   --post-form-toggle-font-size: 22px;
@@ -193,6 +194,7 @@
   --post-mobile-abbr-text-color: #707070;
   --post-mobile-abbr-font-size: 10pt;
   --post-mobile-content-font-size: 11pt;
+  --post-thumbnail-background-color: rgba(0, 0, 0, 0.05);
 
   /* post form */
   --post-form-toggle-font-size: 22px;
@@ -272,6 +274,7 @@
   --post-mobile-abbr-text-color: #707070;
   --post-mobile-abbr-font-size: 12pt;
   --post-mobile-content-font-size: 13pt;
+  --post-thumbnail-background-color: rgba(0, 0, 0, 0.05);
 
   /* post form */
   --post-form-toggle-font-size: 22px;
@@ -350,6 +353,7 @@
   --post-menu-button-color: #34345c;
   --post-menu-button-color-hover: #d00;
   --post-greentext-color: #789922;
+  --post-thumbnail-background-color: rgba(0, 0, 0, 0.05);
   
   /* post form */
   --post-form-toggle-font-size: 22px;
@@ -424,6 +428,7 @@
   --post-menu-button-color: #5F89AC;
   --post-menu-button-color-hover: #81a2be;
   --post-greentext-color: #b5bd68;
+  --post-thumbnail-background-color: rgba(255, 255, 255, 0.01);
 
   /* post form */
   --post-form-toggle-font-size: 22px;
@@ -493,6 +498,7 @@
   --post-menu-button-color: #FF6600;
   --post-menu-button-color-hover: #FF3300;
   --post-greentext-color: #789922;
+  --post-thumbnail-background-color: rgba(0, 0, 0, 0.05);
 
   /* post form */
   --post-form-toggle-font-size: 22px;

src/views/subplebbit/subplebbit.tsx

@@ -60,7 +60,7 @@ const Subplebbit = ({ subplebbits }: SubplebbitProps) => {
   return (
     <div className={styles.content}>
       <Virtuoso
-        increaseViewportBy={{ bottom: 1200, top: 600 }}
+        increaseViewportBy={{ bottom: 1200, top: 1200 }}
         totalCount={feed?.length || 0}
         data={feed}
         itemContent={(index, post) => <Post index={index} post={post} />}