Add gif transcoding

.env.example

@@ -13,4 +13,5 @@ EMBED_URL = "https://github.com/FixTweet/FxTwitter"
 SENTRY_DSN = ""
 SENTRY_AUTH_TOKEN = ""
 SENTRY_ORG = ""
-SENTRY_PROJECT = ""
+SENTRY_PROJECT = ""
+GIF_TRANSCODE_DOMAIN = "gif.fxtwitter.com"

esbuild.config.mjs

@@ -44,7 +44,8 @@ let envVariables = [
   'EMBED_URL',
   'MOSAIC_DOMAIN_LIST',
   'API_HOST_LIST',
-  'SENTRY_DSN'
+  'SENTRY_DSN',
+  'GIF_TRANSCODE_DOMAIN'
 ];
 
 // Create defines for all environment variables

src/constants.ts

@@ -13,10 +13,12 @@ export const Constants = {
   EMBED_URL: EMBED_URL,
   REDIRECT_URL: REDIRECT_URL,
   RELEASE_NAME: RELEASE_NAME,
+  GIF_TRANSCODE_DOMAIN: GIF_TRANSCODE_DOMAIN,
   API_DOCS_URL: `https://github.com/dangeredwolf/FixTweet/wiki/API-Home`,
   TWITTER_ROOT: 'https://twitter.com',
   TWITTER_GLOBAL_NAME_ROOT: 'twitter.com',
   TWITTER_API_ROOT: 'https://api.twitter.com',
+  TWITTER_VIDEO_BASE: 'https://video.twimg.com',
   BOT_UA_REGEX:
     /bot|facebook|embed|got|firefox\/92|firefox\/38|curl|wget|go-http|yahoo|generator|whatsapp|revoltchat|preview|link|proxy|vkshare|images|analyzer|index|crawl|spider|python|cfnetwork|node|mastodon|http\.rb|ruby|bun\/|fiddler|iframely/gi,
   /* 3 hours */

src/embed/status.ts

@@ -473,9 +473,12 @@ export const handleStatus = async (
     const mediaType = overrideMedia ?? status.media.videos?.[0]?.type;
 
     if (mediaType === 'gif') {
-        provider = `GIF - ${Constants.BRANDING_NAME}`;
-    } else if (status.embed_card === 'player' && providerEngagementText !== Strings.DEFAULT_AUTHOR_TEXT) {
-        provider = providerEngagementText
+      provider = `GIF - ${Constants.BRANDING_NAME}`;
+    } else if (
+      status.embed_card === 'player' &&
+      providerEngagementText !== Strings.DEFAULT_AUTHOR_TEXT
+    ) {
+      provider = providerEngagementText;
     }
 
     // Now you can use the 'provider' variable

src/experiments.ts

@@ -2,7 +2,8 @@ export enum Experiment {
   ELONGATOR_BY_DEFAULT = 'ELONGATOR_BY_DEFAULT',
   ELONGATOR_PROFILE_API = 'ELONGATOR_PROFILE_API',
   TWEET_DETAIL_API = 'TWEET_DETAIL_API',
-  DISCORD_NATIVE_MULTI_IMAGE = 'DISCORD_NATIVE_MULTI_IMAGE'
+  DISCORD_NATIVE_MULTI_IMAGE = 'DISCORD_NATIVE_MULTI_IMAGE',
+  TRANSCODE_GIFS = 'TRANSCODE_GIFS'
 }
 
 type ExperimentConfig = {
@@ -31,6 +32,11 @@ const Experiments: { [key in Experiment]: ExperimentConfig } = {
     name: 'Discord native multi-image',
     description: 'Use Discord native multi-image',
     percentage: 1
+  },
+  [Experiment.TRANSCODE_GIFS]: {
+    name: 'Transcode GIFs',
+    description: 'Transcode GIFs for Discord, etc.',
+    percentage: 0.25
   }
 };
 

src/render/video.ts

@@ -1,4 +1,5 @@
 import { Constants } from '../constants';
+import { Experiment, experimentCheck } from '../experiments';
 import { handleQuote } from '../helpers/quote';
 import { Strings } from '../strings';
 
@@ -47,14 +48,27 @@ export const renderVideo = (
     instructions.authorText += `\n${handleQuote(status.quote)}`;
   }
 
+  let url = video.url;
+
+  if (
+    experimentCheck(Experiment.TRANSCODE_GIFS, !!Constants.GIF_TRANSCODE_DOMAIN) &&
+    !userAgent?.includes('TelegramBot') &&
+    video.type === 'gif'
+  ) {
+    url = video.url.replace(
+      Constants.TWITTER_VIDEO_BASE,
+      `https://${Constants.GIF_TRANSCODE_DOMAIN}`
+    );
+  }
+
   /* Push the raw video-related headers */
   instructions.addHeaders = [
     `<meta property="twitter:player:height" content="${video.height * sizeMultiplier}"/>`,
     `<meta property="twitter:player:width" content="${video.width * sizeMultiplier}"/>`,
-    `<meta property="twitter:player:stream" content="${video.url}"/>`,
+    `<meta property="twitter:player:stream" content="${url}"/>`,
     `<meta property="twitter:player:stream:content_type" content="${video.format}"/>`,
-    `<meta property="og:video" content="${video.url}"/>`,
-    `<meta property="og:video:secure_url" content="${video.url}"/>`,
+    `<meta property="og:video" content="${url}"/>`,
+    `<meta property="og:video:secure_url" content="${url}"/>`,
     `<meta property="og:video:height" content="${video.height * sizeMultiplier}"/>`,
     `<meta property="og:video:width" content="${video.width * sizeMultiplier}"/>`,
     `<meta property="og:video:type" content="${video.format}"/>`,

src/types/env.d.ts

@@ -10,6 +10,7 @@ declare const EMBED_URL: string;
 declare const REDIRECT_URL: string;
 declare const MOSAIC_DOMAIN_LIST: string;
 declare const API_HOST_LIST: string;
+declare const GIF_TRANSCODE_DOMAIN: string;
 
 declare const SENTRY_DSN: string;
 declare const RELEASE_NAME: string;