From 7ad0953d8719324264d29f38d89a6cd4e55017e2 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sat, 23 Mar 2024 11:07:18 +0100
Subject: [PATCH] feat(media utils): detect GIFs as separate type from image

---
 src/lib/utils/media-utils.ts          | 25 +++++++------------------
 src/views/submit-page/submit-page.tsx |  2 +-
 2 files changed, 8 insertions(+), 19 deletions(-)

diff --git a/src/lib/utils/media-utils.ts b/src/lib/utils/media-utils.ts
index 7e009105..35bae4b1 100644
--- a/src/lib/utils/media-utils.ts
+++ b/src/lib/utils/media-utils.ts
@@ -16,6 +16,7 @@ export const getHasThumbnail = (commentMediaInfo: CommentMediaInfo | undefined,
     commentMediaInfo &&
     (commentMediaInfo.type === 'image' ||
       commentMediaInfo.type === 'video' ||
+      commentMediaInfo.type === 'gif' ||
       (commentMediaInfo.type === 'webpage' && commentMediaInfo.thumbnail) ||
       (commentMediaInfo.type === 'iframe' && iframeThumbnail))
     ? true
@@ -56,6 +57,10 @@ const getCommentMediaInfo = (comment: Comment) => {
       };
     }
 
+    if (mime === 'image/gif') {
+      return { url: comment.link, type: 'gif' };
+    }
+
     if (mime?.startsWith('image')) {
       return { url: comment.link, type: 'image' };
     }
@@ -86,24 +91,8 @@ const getLinkMediaInfo = (link: string) => {
     return;
   }
 
-  const url = new URL(link);
-  const host = url.hostname;
-  let patternThumbnailUrl;
-
-  if (['youtube.com', 'www.youtube.com', 'youtu.be', 'www.youtu.be', 'm.youtube.com'].includes(host)) {
-    const videoId = host === 'youtu.be' ? url.pathname.slice(1) : url.searchParams.get('v');
-    patternThumbnailUrl = `https://img.youtube.com/vi/${videoId}/0.jpg`;
-  } else if (host.includes('streamable.com')) {
-    const videoId = url.pathname.split('/')[1];
-    patternThumbnailUrl = `https://cdn-cf-east.streamable.com/image/${videoId}.jpg`;
-  }
-
-  if (canEmbed(url)) {
-    return {
-      url: link,
-      type: 'iframe',
-      patternThumbnailUrl,
-    };
+  if (mime === 'image/gif') {
+    return { url: link, type: 'gif' };
   }
 
   if (mime?.startsWith('image')) {
diff --git a/src/views/submit-page/submit-page.tsx b/src/views/submit-page/submit-page.tsx
index 3e9c9b0a..c92207a9 100644
--- a/src/views/submit-page/submit-page.tsx
+++ b/src/views/submit-page/submit-page.tsx
@@ -66,7 +66,7 @@ const UrlField = () => {
 
   let mediaComponent;
 
-  if (mediaType === 'image') {
+  if (mediaType === 'image' || mediaType === 'gif') {
     mediaComponent = <img src={url} alt='' onError={() => setMediaError(true)} />;
   } else if (mediaType === 'video') {
     mediaComponent = <video src={url} controls />;