feat(post): add support for static GIFs

src/components/catalog-row/catalog-row.tsx

@@ -79,8 +79,8 @@ export const CatalogPostMedia = ({ commentMediaInfo, isOutOfFeed, linkWidth, lin
     thumbnailComponent = <img src={thumbnail} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} />;
   } else if (type === 'iframe' && iframeThumbnail && !hasError) {
     thumbnailComponent = <img src={iframeThumbnail} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} />;
-  } else if (type === 'gif' && gifFrameUrl && !hasError) {
-    thumbnailComponent = <img src={gifFrameUrl} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} />;
+  } else if (type === 'gif' && !hasError) {
+    thumbnailComponent = <img src={gifFrameUrl || url} alt='' onLoad={handleLoad} onError={handleError} style={loadingStyle} />;
   } else if (type === 'audio') {
     thumbnailComponent = <audio src={url} controls />;
   }

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

@@ -68,6 +68,8 @@ const Thumbnail = ({ commentMediaInfo, isFloatingEmbed, post, setShowThumbnail }
     thumbnailComponent = iframeThumbnail ? <img src={iframeThumbnail} alt='' onClick={() => setShowThumbnail(false)} /> : null;
   } else if (type === 'gif' && gifFrameUrl) {
     thumbnailComponent = <img src={gifFrameUrl} alt='' onClick={() => setShowThumbnail(false)} />;
+  } else if (type === 'gif' && !gifFrameUrl) {
+    thumbnailComponent = <img src={url} alt='' onClick={() => setShowThumbnail(false)} />;
   } else if (type === 'audio') {
     thumbnailComponent = <audio src={url} controls />;
   }
@@ -145,7 +147,15 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
 const CommentMedia = ({ commentMediaInfo, isFloatingEmbed, post, showThumbnail, setShowThumbnail }: MediaProps) => {
   const { t } = useTranslation();
   const isMobile = useIsMobile();
-  const { type, url } = commentMediaInfo || {};
+  const { url } = commentMediaInfo || {};
+  let type = commentMediaInfo?.type;
+  const gifFrameUrl = useFetchGifFirstFrame(url);
+
+  if (type === 'gif' && gifFrameUrl) {
+    type = 'animated gif';
+  } else if (type === 'gif' && !gifFrameUrl) {
+    type = 'static gif';
+  }
 
   return (
     <span className={styles.content}>

src/components/post-desktop/post-desktop.tsx

@@ -25,6 +25,7 @@ import Tooltip from '../tooltip';
 import { PostProps } from '../../views/post/post';
 import { create } from 'zustand';
 import _ from 'lodash';
+import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
 
 interface ShowOmittedRepliesState {
   showOmittedReplies: Record<string, boolean>;
@@ -184,7 +185,17 @@ const PostMedia = ({ post }: PostProps) => {
   const { t } = useTranslation();
   const { link, spoiler } = post || {};
   const commentMediaInfo = getCommentMediaInfo(post);
-  const { type, url } = commentMediaInfo || {};
+
+  const { url } = commentMediaInfo || {};
+  let type = commentMediaInfo?.type;
+  const gifFrameUrl = useFetchGifFirstFrame(url);
+
+  if (type === 'gif' && gifFrameUrl !== null) {
+    type = 'animated gif';
+  } else if (type === 'gif' && gifFrameUrl === null) {
+    type = 'static gif';
+  }
+
   const embedUrl = url && new URL(url);
   const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
   const [showThumbnail, setShowThumbnail] = useState(true);

src/lib/utils/media-utils.ts

@@ -15,8 +15,10 @@ export const getDisplayMediaInfoType = (type: string, t: any) => {
   switch (type) {
     case 'image':
       return t('image');
-    case 'gif':
-      return t('gif');
+    case 'animated gif':
+      return t('animated_gif');
+    case 'static gif':
+      return t('static_gif');
     case 'iframe':
       return t('iframe');
     case 'video':