add logic for tenor and giphy embeds

src/lib/strings/embed-player.ts

@@ -16,6 +16,8 @@ export type EmbedPlayerParams =
   | {type: 'apple_music_album'; albumId: string; playerUri: string}
   | {type: 'apple_music_song'; songId: string; playerUri: string}
   | {type: 'vimeo_video'; videoId: string; playerUri: string}
+  | {type: 'giphy_gif'; imageUri: string}
+  | {type: 'tenor_gif'; imageUri: string}
 
 export function parseEmbedPlayerFromUrl(
   url: string,
@@ -170,6 +172,111 @@ export function parseEmbedPlayerFromUrl(
       }
     }
   }
+
+  if (urlp.hostname === 'giphy.com' || urlp.hostname === 'www.giphy.com') {
+    const [_, gifs, nameAndId] = urlp.pathname.split('/')
+
+    /*
+     * nameAndId is a string that consists of the name (dash separated) and the id of the gif (the last part of the name)
+     * We want to get the id of the gif, then direct to media.giphy.com/media/{id}/giphy.gif so we can
+     * use it in an <Image> component
+     */
+
+    if (gifs === 'gifs' && nameAndId) {
+      const id = nameAndId.split('-').pop()
+
+      if (id) {
+        return {
+          type: 'giphy_gif',
+          imageUri: `https://i.giphy.com/media/${id}/giphy.gif`,
+        }
+      }
+    }
+  }
+
+  // There are five possible hostnames that also can be giphy urls: media.giphy.com and media0-4.giphy.com
+  // These can include (presumably) a tracking id in the path name, so we have to check for that as well
+  if (/media(?:[0-4]\.giphy\.com|\.giphy\.com)/gm.test(urlp.hostname)) {
+    // We can link directly to the gif, if its a proper link
+    const [_, media, trackingOrId, idOrFilename, filename] =
+      urlp.pathname.split('/')
+
+    if (media === 'media') {
+      if (idOrFilename === 'giphy.gif' || idOrFilename === 'giphy.gif') {
+        return {
+          type: 'giphy_gif',
+          imageUri: `https://i.giphy.com/media/${trackingOrId}/giphy.gif`,
+        }
+      } else if (filename === 'giphy.gif' || filename === 'giphy.gif') {
+        return {
+          type: 'giphy_gif',
+          imageUri: `https://i.giphy.com/media/${idOrFilename}/giphy.gif`,
+        }
+      }
+    }
+  }
+
+  // Finally, we should see if it is a link to i.giphy.com. These links don't necessarily end in .gif but can also
+  // be .webp
+  if (urlp.hostname === 'i.giphy.com' || urlp.hostname === 'www.i.giphy.com') {
+    const [_, mediaOrFilename, filename] = urlp.pathname.split('/')
+
+    if (mediaOrFilename === 'media' && filename) {
+      return {
+        type: 'giphy_gif',
+        imageUri: `https://i.giphy.com/media/${
+          filename.split('.')[0]
+        }/giphy.gif`,
+      }
+    } else if (mediaOrFilename) {
+      return {
+        type: 'giphy_gif',
+        imageUri: `https://i.giphy.com/media/${
+          mediaOrFilename.split('.')[0]
+        }/giphy.gif`,
+      }
+    }
+  }
+
+  if (urlp.hostname === 'media1.tenor.com') {
+    const parts = urlp.pathname.split('/')
+    const filename = parts[3]
+
+    if (parts.length === 4 && filename?.split('.').pop() === 'gif') {
+      return {
+        type: 'tenor_gif',
+        imageUri: url,
+      }
+    }
+  }
+
+  if (urlp.hostname === 'tenor.com' || urlp.hostname === 'www.tenor.com') {
+    const [_, path, filename] = urlp.pathname.split('/')
+
+    if (path === 'view' && filename) {
+      const includesExt = filename.split('.').pop() === 'gif'
+
+      return {
+        type: 'tenor_gif',
+        imageUri: `${url}${!includesExt ? '.gif' : ''}`,
+      }
+    }
+  }
+
+  if (urlp.host === 'c.tenor.com') {
+    const [_, id, filename] = urlp.pathname.split('/')
+
+    if (id && filename) {
+      const ext = filename.split('.').pop()
+
+      if (ext === 'gif' || ext === 'webp') {
+        return {
+          type: 'tenor_gif',
+          imageUri: url,
+        }
+      }
+    }
+  }
 }
 
 export function getPlayerHeight({

src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx

@@ -201,7 +201,9 @@ export function ExternalPlayer({
             },
             styles.topRadius,
           ]}
-          source={{uri: link.thumb}}
+          source={{
+            uri: 'https://media1.tenor.com/m/UNTqMDwqh1gAAAAC/hello-hi.gif',
+          }}
           accessibilityIgnoresInvertColors
         />
       )}