add click to enlarge media on mobile with close button

src/components/media/media.module.css

@@ -3,7 +3,6 @@
   width: var(--width);
   height: var(--height);
   margin: 3px 20px 5px 0;
-  float: left;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -14,12 +13,15 @@
   width: var(--width);
   height: var(--height);
   margin: 3px 10px 5px 5px;
-  float: left;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
+.thumbnail {
+  float: left;
+}
+
 .thumbnailBig img, .thumbnailBig video {
   max-width: 250px;
   max-height: 250px;
@@ -48,6 +50,27 @@
   border: none;
 }
 
+.fileInfo {
+  padding-bottom: 5px;
+  text-align: center;
+  color: var(--post-mobile-file-info-text-color); 
+  font-size: 9pt;
+}
+
+.fileInfo a {
+  color: var(--post-link-text-color);
+  text-decoration: var(--post-link-text-decoration);
+}
+
+.fileInfo a:hover {
+  color: var(--post-link-text-color-hover);
+}
+
+.closeButton {
+  text-align: center;
+  padding: 5px 0 10px 0;
+}
+
 @media (min-width: 640px) {
   .media img, .media iframe, .media video, .media audio {
     margin: 3px 20px 5px 0;
@@ -56,6 +79,6 @@
 
 @media (max-width: 640px) {
   .media img, .media iframe, .media video, .media audio {
-    margin: 3px 10px 5px 5px;
+    padding: 3px 0 5px 0;
   }
 }

src/components/media/media.tsx

@@ -3,6 +3,7 @@ import styles from './media.module.css';
 import { CommentMediaInfo } from '../../lib/utils/media-utils';
 import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
 import Embed from '../embed';
+import { useTranslation } from 'react-i18next';
 
 interface MediaProps {
   commentMediaInfo?: CommentMediaInfo;
@@ -15,13 +16,19 @@ interface MediaProps {
   toggleExpanded?: () => void;
 }
 
-const ThumbnailBig = ({ style, children }: { style: React.CSSProperties; children: React.ReactNode }) => (
+interface ThumbnailProps {
+  style: React.CSSProperties;
+  children: React.ReactNode;
+  type?: string;
+}
+
+const ThumbnailBig = ({ style, children }: ThumbnailProps) => (
   <span className={styles.thumbnailBig} style={style}>
     {children}
   </span>
 );
 
-const ThumbnailSmall = ({ style, children }: { style: React.CSSProperties; children: React.ReactNode }) => (
+const ThumbnailSmall = ({ style, children, type }: ThumbnailProps) => (
   <span className={styles.thumbnailSmall} style={style}>
     {children}
   </span>
@@ -57,13 +64,16 @@ const Thumbnail = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth
   const thumbnailStyle = { '--width': displayWidth, '--height': displayHeight } as React.CSSProperties;
 
   return isMobile || isReply ? (
-    <ThumbnailSmall style={thumbnailStyle}>{mediaComponent}</ThumbnailSmall>
+    <ThumbnailSmall style={thumbnailStyle} type={commentMediaInfo?.type}>
+      {mediaComponent}
+    </ThumbnailSmall>
   ) : (
     <ThumbnailBig style={thumbnailStyle}>{mediaComponent}</ThumbnailBig>
   );
 };
 
 const Media = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth, showThumbnail, setShowThumbnail }: MediaProps) => {
+  const { t } = useTranslation();
   return (
     <span className={styles.content}>
       <span className={`${showThumbnail ? styles.show : styles.hide} ${styles.thumbnail}`} onClick={() => setShowThumbnail(false)}>
@@ -76,6 +86,7 @@ const Media = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth, sho
           showThumbnail={showThumbnail}
           setShowThumbnail={setShowThumbnail}
         />
+        {isMobile && commentMediaInfo?.type && <div className={styles.fileInfo}>{commentMediaInfo.type}</div>}
       </span>
       <span className={`${showThumbnail ? styles.hide : styles.show} ${styles.media}`}>
         {commentMediaInfo?.type === 'iframe' ? (
@@ -89,6 +100,21 @@ const Media = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth, sho
         ) : commentMediaInfo?.type === 'webpage' ? (
           <img src={commentMediaInfo.url} alt='' />
         ) : 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') && (
+          <div className={styles.closeButton}>
+            <span className='button' onClick={() => setShowThumbnail(true)}>
+              {t('close')}
+            </span>
+          </div>
+        )}
       </span>
     </span>
   );

src/components/post/post.module.css

@@ -217,14 +217,6 @@
   text-align: right;
 }
 
-.postMobile .fileThumb .fileInfo {
-  padding-bottom: 5px;
-  text-align: center;
-  color: var(--post-mobile-file-info-text-color); 
-  font-size: 9pt;
-  display: block;
-}
-
 .postMobile .postMessage {
   padding: 10px;
   font-size: var(--post-mobile-content-font-size);

src/components/post/post.tsx

@@ -249,7 +249,6 @@ const PostMobile = ({ post }: Comment) => {
                   showThumbnail={showThumbnail}
                   setShowThumbnail={setShowThumbnail}
                 />
-                {commentMediaInfo?.type && <div className={styles.fileInfo}>{commentMediaInfo.type}</div>}
               </>
             )}
             {content && (