From 4103fabb12c2b7f57c6c07808af4b7c213408852 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Sat, 3 Aug 2024 22:41:40 +0200
Subject: [PATCH] feat(post form): add link media info for static or animated
 gifs

---
 src/components/post-form/post-form.module.css |  1 +
 src/components/post-form/post-form.tsx        | 12 +++++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/post-form/post-form.module.css b/src/components/post-form/post-form.module.css
index 822084b7..82373d42 100644
--- a/src/components/post-form/post-form.module.css
+++ b/src/components/post-form/post-form.module.css
@@ -89,6 +89,7 @@
 
 .linkType {
   font-weight: normal;
+  text-transform: lowercase;
 }
 
 .linkField input[type="text"] {
diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx
index 2da9cd37..67291a5d 100644
--- a/src/components/post-form/post-form.tsx
+++ b/src/components/post-form/post-form.tsx
@@ -23,6 +23,7 @@ import useChallengesStore from '../../stores/use-challenges-store';
 import styles from './post-form.module.css';
 import _ from 'lodash';
 import useIsSubplebbitOffline from '../../hooks/use-is-subplebbit-offline';
+import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
 
 type SubmitState = {
   subplebbitAddress: string | undefined;
@@ -71,7 +72,16 @@ const useSubmitStore = create<SubmitState>((set) => ({
 export const LinkTypePreviewer = ({ link }: { link: string }) => {
   const { t } = useTranslation();
   const mediaInfo = getLinkMediaInfo(link);
-  return isValidURL(link) ? mediaInfo?.type : t('invalid_url');
+  let type = mediaInfo?.type;
+  const gifFrameUrl = useFetchGifFirstFrame(mediaInfo?.url);
+
+  if (type === 'gif' && gifFrameUrl !== null) {
+    type = t('animated_gif');
+  } else if (type === 'gif' && gifFrameUrl === null) {
+    type = t('static_gif');
+  }
+
+  return isValidURL(link) ? type : t('invalid_url');
 };
 
 const PostFormTable = ({ closeForm }: { closeForm: () => void }) => {