feat(post): add support for static GIFs

2026-08-03 07:41:04 +02:00 · 2024-07-20 16:25:20 +02:00
parent b3f0b04e43
commit 7253e4d1a0
39 changed files with 134 additions and 41 deletions
@@ -219,5 +219,7 @@
  "token_id": "تعريف الرمز",
  "nsfw_boards": "المجالس المخلة بالأدب",
  "hide_gore_boards": "إخفاء لوحات الجور",
-  "hide_adult_boards": "إخفاء لوحات الكبار"
+  "hide_adult_boards": "إخفاء لوحات الكبار",
+  "static_gif": "GIF ثابت",
+  "animated_gif": "GIF متحرك"
 }
@@ -219,5 +219,7 @@
  "token_id": "টোকেন আইডি",
  "nsfw_boards": "এনএসএফডব্লিউ বোর্ডস",
  "hide_gore_boards": "গর বোর্ডস লুকান",
-  "hide_adult_boards": "পুরুষ বোর্ডস লুকান"
+  "hide_adult_boards": "পুরুষ বোর্ডস লুকান",
+  "static_gif": "স্ট্যাটিক GIF",
+  "animated_gif": "অ্যানিমেটেড GIF"
 }
@@ -219,5 +219,7 @@
  "token_id": "Token ID",
  "nsfw_boards": "NSFW desky",
  "hide_gore_boards": "Skrýt gore desky",
-  "hide_adult_boards": "Skrýt dospělé desky"
+  "hide_adult_boards": "Skrýt dospělé desky",
+  "static_gif": "Statický GIF",
+  "animated_gif": "Animovaný GIF"
 }
@@ -219,5 +219,7 @@
  "token_id": "Token ID",
  "nsfw_boards": "NSFW boards",
  "hide_gore_boards": "Skjul Gore Boards",
-  "hide_adult_boards": "Skjul Voksne Boards"
+  "hide_adult_boards": "Skjul Voksne Boards",
+  "static_gif": "Statisk GIF",
+  "animated_gif": "Animeret GIF"
 }
@@ -219,5 +219,7 @@
  "token_id": "Token-ID",
  "nsfw_boards": "NSFW-Boards",
  "hide_gore_boards": "Gore-Boards ausblenden",
-  "hide_adult_boards": "Erwachsenen-Boards ausblenden"
+  "hide_adult_boards": "Erwachsenen-Boards ausblenden",
+  "static_gif": "Statisches GIF",
+  "animated_gif": "Animiertes GIF"
 }
@@ -219,5 +219,7 @@
  "token_id": "Token ID",
  "nsfw_boards": "Πινακίδες NSFW",
  "hide_gore_boards": "Απόκρυψη των Gore Boards",
-  "hide_adult_boards": "Απόκρυψη των Adult Boards"
+  "hide_adult_boards": "Απόκρυψη των Adult Boards",
+  "static_gif": "Στατικό GIF",
+  "animated_gif": "Κινούμενο GIF"
 }
@@ -219,5 +219,7 @@
  "token_id": "token id",
  "nsfw_boards": "NSFW Boards",
  "hide_gore_boards": "Hide Gore Boards",
-  "hide_adult_boards": "Hide Adult Boards"
+  "hide_adult_boards": "Hide Adult Boards",
+  "static_gif": "Static GIF",
+  "animated_gif": "Animated GIF"
 }
@@ -219,5 +219,7 @@
  "token_id": "ID de token",
  "nsfw_boards": "Tableros NSFW",
  "hide_gore_boards": "Ocultar tableros de gore",
-  "hide_adult_boards": "Ocultar tableros para adultos"
+  "hide_adult_boards": "Ocultar tableros para adultos",
+  "static_gif": "GIF Estático",
+  "animated_gif": "GIF Animado"
 }
@@ -219,5 +219,7 @@
  "token_id": "شناسه توکن",
  "nsfw_boards": "بوردهای NSFW",
  "hide_gore_boards": "پنهان کردن تخته های گور",
-  "hide_adult_boards": "پنهان کردن تخته های بزرگسالان"
+  "hide_adult_boards": "پنهان کردن تخته های بزرگسالان",
+  "static_gif": "GIF ثابت",
+  "animated_gif": "GIF متحرک"
 }
@@ -219,5 +219,7 @@
  "token_id": "Token-id",
  "nsfw_boards": "NSFW-laudat",
  "hide_gore_boards": "Piilota Gore-laudat",
-  "hide_adult_boards": "Piilota Aikuisten lautat"
+  "hide_adult_boards": "Piilota Aikuisten lautat",
+  "static_gif": "Staattinen GIF",
+  "animated_gif": "Animoitu GIF"
 }
@@ -219,5 +219,7 @@
  "token_id": "Token ID",
  "nsfw_boards": "Mga NSFW Boards",
  "hide_gore_boards": "Itago ang mga Gore Boards",
-  "hide_adult_boards": "Itago ang mga Adult Boards"
+  "hide_adult_boards": "Itago ang mga Adult Boards",
+  "static_gif": "Static GIF",
+  "animated_gif": "Animated GIF"
 }
@@ -219,5 +219,7 @@
  "token_id": "Identifiant de jeton",
  "nsfw_boards": "Planches NSFW",
  "hide_gore_boards": "Masquer les tableaux Gore",
-  "hide_adult_boards": "Masquer les tableaux pour adultes"
+  "hide_adult_boards": "Masquer les tableaux pour adultes",
+  "static_gif": "GIF Statique",
+  "animated_gif": "GIF Animé"
 }
@@ -219,5 +219,7 @@
  "token_id": "מזהה טוקן",
  "nsfw_boards": "גלריות NSFW",
  "hide_gore_boards": "הסתר לוחות Gore",
-  "hide_adult_boards": "הסתר לוחות המבוגרים"
+  "hide_adult_boards": "הסתר לוחות המבוגרים",
+  "static_gif": "GIF סטטי",
+  "animated_gif": "GIF מונפש"
 }
@@ -219,5 +219,7 @@
  "token_id": "टोकन आईडी",
  "nsfw_boards": "एनएसएफडब्ल्यू बोर्ड्स",
  "hide_gore_boards": "गोर बोर्ड्स छिपाएं",
-  "hide_adult_boards": "वयस्क बोर्ड्स छिपाएं"
+  "hide_adult_boards": "वयस्क बोर्ड्स छिपाएं",
+  "static_gif": "स्थिर GIF",
+  "animated_gif": "एनिमेटेड GIF"
 }
@@ -219,5 +219,7 @@
  "token_id": "Token azonosító",
  "nsfw_boards": "NSFW táblák",
  "hide_gore_boards": "Gore táblák elrejtése",
-  "hide_adult_boards": "Felnőtt táblák elrejtése"
+  "hide_adult_boards": "Felnőtt táblák elrejtése",
+  "static_gif": "Statikus GIF",
+  "animated_gif": "Animált GIF"
 }
@@ -219,5 +219,7 @@
  "token_id": "ID token",
  "nsfw_boards": "Papan NSFW",
  "hide_gore_boards": "Sembunyikan Papan Gore",
-  "hide_adult_boards": "Sembunyikan Papan Dewasa"
+  "hide_adult_boards": "Sembunyikan Papan Dewasa",
+  "static_gif": "GIF Statis",
+  "animated_gif": "GIF Animasi"
 }
@@ -219,5 +219,7 @@
  "token_id": "token id",
  "nsfw_boards": "Bache NSFW",
  "hide_gore_boards": "Nascondi tavole Gore",
-  "hide_adult_boards": "Nascondi tavole per adulti"
+  "hide_adult_boards": "Nascondi tavole per adulti",
+  "static_gif": "GIF Statica",
+  "animated_gif": "GIF Animata"
 }
@@ -219,5 +219,7 @@
  "token_id": "トークンID",
  "nsfw_boards": "NSFWボード",
  "hide_gore_boards": "ゴアボードを非表示にする",
-  "hide_adult_boards": "アダルトボードを非表示にする"
+  "hide_adult_boards": "アダルトボードを非表示にする",
+  "static_gif": "静的GIF",
+  "animated_gif": "アニメーションGIF"
 }
@@ -219,5 +219,7 @@
  "token_id": "토큰 ID",
  "nsfw_boards": "NSFW 게시판",
  "hide_gore_boards": "고어 게시판 숨기기",
-  "hide_adult_boards": "성인 게시판 숨기기"
+  "hide_adult_boards": "성인 게시판 숨기기",
+  "static_gif": "정적 GIF",
+  "animated_gif": "애니메이션 GIF"
 }
@@ -219,5 +219,7 @@
  "token_id": "टोकन आयडी",
  "nsfw_boards": "NSFW बोर्ड्स",
  "hide_gore_boards": "गोर बोर्ड्स लपवा",
-  "hide_adult_boards": "वयस्क बोर्ड्स लपवा"
+  "hide_adult_boards": "वयस्क बोर्ड्स लपवा",
+  "static_gif": "स्थिर GIF",
+  "animated_gif": "एनिमेटेड GIF"
 }
@@ -219,5 +219,7 @@
  "token_id": "Token-ID",
  "nsfw_boards": "NSFW-boards",
  "hide_gore_boards": "Gore Boards verbergen",
-  "hide_adult_boards": "Volwassenen Boards verbergen"
+  "hide_adult_boards": "Volwassenen Boards verbergen",
+  "static_gif": "Statische GIF",
+  "animated_gif": "Geanimeerde GIF"
 }
@@ -219,5 +219,7 @@
  "token_id": "Token ID",
  "nsfw_boards": "NSFW-boards",
  "hide_gore_boards": "Skjul Gore Boards",
-  "hide_adult_boards": "Skjul voksne Boards"
+  "hide_adult_boards": "Skjul voksne Boards",
+  "static_gif": "Statisk GIF",
+  "animated_gif": "Animasjons GIF"
 }
@@ -219,5 +219,7 @@
  "token_id": "Identyfikator tokena",
  "nsfw_boards": "Deski NSFW",
  "hide_gore_boards": "Ukryj Gore Boards",
-  "hide_adult_boards": "Ukryj Adult Boards"
+  "hide_adult_boards": "Ukryj Adult Boards",
+  "static_gif": "Statyczny GIF",
+  "animated_gif": "Animowany GIF"
 }
@@ -219,5 +219,7 @@
  "token_id": "ID do token",
  "nsfw_boards": "Quadros NSFW",
  "hide_gore_boards": "Ocultar Quadros Gore",
-  "hide_adult_boards": "Ocultar Quadros para Adultos"
+  "hide_adult_boards": "Ocultar Quadros para Adultos",
+  "static_gif": "GIF Estático",
+  "animated_gif": "GIF Animado"
 }
@@ -219,5 +219,7 @@
  "token_id": "ID token",
  "nsfw_boards": "Plăci NSFW",
  "hide_gore_boards": "Ascundeți tablourile Gore",
-  "hide_adult_boards": "Ascundeți tablourile pentru adulți"
+  "hide_adult_boards": "Ascundeți tablourile pentru adulți",
+  "static_gif": "GIF Static",
+  "animated_gif": "GIF Animat"
 }
@@ -219,5 +219,7 @@
  "token_id": "Идентификатор токена",
  "nsfw_boards": "NSFW доски",
  "hide_gore_boards": "Скрыть доски Gore",
-  "hide_adult_boards": "Скрыть доски для взрослых"
+  "hide_adult_boards": "Скрыть доски для взрослых",
+  "static_gif": "Статичный GIF",
+  "animated_gif": "Анимированный GIF"
 }
@@ -219,5 +219,7 @@
  "token_id": "ID e tokenit",
  "nsfw_boards": "Bordet NSFW",
  "hide_gore_boards": "Fshihet Gore Boards",
-  "hide_adult_boards": "Fshihet Adult Boards"
+  "hide_adult_boards": "Fshihet Adult Boards",
+  "static_gif": "GIF Statik",
+  "animated_gif": "GIF i Animuar"
 }
@@ -219,5 +219,7 @@
  "token_id": "Token ID",
  "nsfw_boards": "NSFW-boards",
  "hide_gore_boards": "Dölj Gore Boards",
-  "hide_adult_boards": "Dölj vuxna Boards"
+  "hide_adult_boards": "Dölj vuxna Boards",
+  "static_gif": "Statisk GIF",
+  "animated_gif": "Animerad GIF"
 }
@@ -219,5 +219,7 @@
  "token_id": "టోకెన్ ఐడి",
  "nsfw_boards": "NSFW బోర్డ్లు",
  "hide_gore_boards": "గోర్ బోర్డ్స్ దాచు",
-  "hide_adult_boards": "పురుషులు బోర్డ్లు దాచు"
+  "hide_adult_boards": "పురుషులు బోర్డ్లు దాచు",
+  "static_gif": "స్టాటిక్ GIF",
+  "animated_gif": "అనిమేటెడ్ GIF"
 }
@@ -219,5 +219,7 @@
  "token_id": "รหัสโทเค็น",
  "nsfw_boards": "กระดาน NSFW",
  "hide_gore_boards": "ซ่อนกระดาน Gore",
-  "hide_adult_boards": "ซ่อนกระดานสำหรับผู้ใหญ่"
+  "hide_adult_boards": "ซ่อนกระดานสำหรับผู้ใหญ่",
+  "static_gif": "GIF แบบคงที่",
+  "animated_gif": "GIF ที่เคลื่อนไหว"
 }
@@ -219,5 +219,7 @@
  "token_id": "Token kimliği",
  "nsfw_boards": "NSFW Panoları",
  "hide_gore_boards": "Gore Panolarını Gizle",
-  "hide_adult_boards": "Yetişkin Panolarını Gizle"
+  "hide_adult_boards": "Yetişkin Panolarını Gizle",
+  "static_gif": "Statik GIF",
+  "animated_gif": "Animasyonlu GIF"
 }
@@ -219,5 +219,7 @@
  "token_id": "Ідентифікатор токена",
  "nsfw_boards": "NSFW дошки",
  "hide_gore_boards": "Сховати дошки Gore",
-  "hide_adult_boards": "Сховати дошки для дорослих"
+  "hide_adult_boards": "Сховати дошки для дорослих",
+  "static_gif": "Статичний GIF",
+  "animated_gif": "Анімований GIF"
 }
@@ -219,5 +219,7 @@
  "token_id": "ٹوکن شناخت",
  "nsfw_boards": "این ایس ایف ڈبلیو بورڈس",
  "hide_gore_boards": "گور بورڈز چھپائیں",
-  "hide_adult_boards": "بالغ بورڈز چھپائیں"
+  "hide_adult_boards": "بالغ بورڈز چھپائیں",
+  "static_gif": "اسٹیٹک GIF",
+  "animated_gif": "اینیمیٹڈ GIF"
 }
@@ -219,5 +219,7 @@
  "token_id": "ID token",
  "nsfw_boards": "Các bảng NSFW",
  "hide_gore_boards": "Ẩn Gore Boards",
-  "hide_adult_boards": "Ẩn Adult Boards"
+  "hide_adult_boards": "Ẩn Adult Boards",
+  "static_gif": "GIF Tĩnh",
+  "animated_gif": "GIF Hoạt Hình"
 }
@@ -219,5 +219,7 @@
  "token_id": "令牌ID",
  "nsfw_boards": "NSFW板块",
  "hide_gore_boards": "隐藏Gore板块",
-  "hide_adult_boards": "隐藏成人板块"
+  "hide_adult_boards": "隐藏成人板块",
+  "static_gif": "静态GIF",
+  "animated_gif": "动画GIF"
 }
@@ -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 />;
  }
@@ -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}>
@@ -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);
@@ -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':