Merge pull request #625 from FixTweet/discord-native-multi-image

Implement Discord native multi-image

.env.example

@@ -4,6 +4,7 @@ DIRECT_MEDIA_DOMAINS = "d.fxtwitter.com,dl.fxtwitter.com,d.twittpr.com,dl.twittp
 TEXT_ONLY_DOMAINS = "t.fxtwitter.com,t.twittpr.com,t.fixupx.com"
 INSTANT_VIEW_DOMAINS = "i.fxtwitter.com,i.twittpr.com,i.fixupx.com"
 GALLERY_DOMAINS = "g.fxtwitter.com,g.twittpr.com,g.fixupx.com"
+FORCE_MOSAIC_DOMAINS = "m.fxtwitter.com,m.twittpr.com,m.fixupx.com"
 MOSAIC_DOMAIN_LIST = "mosaic.fxtwitter.com"
 API_HOST_LIST = "api.fxtwitter.com,api-canary.fxtwitter.com"
 HOST_URL = "https://fxtwitter.com"

esbuild.config.mjs

@@ -38,6 +38,7 @@ let envVariables = [
   'TEXT_ONLY_DOMAINS',
   'INSTANT_VIEW_DOMAINS',
   'GALLERY_DOMAINS',
+  'FORCE_MOSAIC_DOMAINS',
   'HOST_URL',
   'REDIRECT_URL',
   'EMBED_URL',

jestconfig.json

@@ -8,6 +8,7 @@
     "TEXT_ONLY_DOMAINS": "t.fxtwitter.com,t.twittpr.com,t.fixupx.com",
     "INSTANT_VIEW_DOMAINS": "i.fxtwitter.com,i.twittpr.com,i.fixupx.com",
     "GALLERY_DOMAINS": "g.fxtwitter.com,g.twittpr.com,g.fixupx.com",
+    "FORCE_MOSAIC_DOMAINS": "m.fxtwitter.com,m.twittpr.com,m.fixupx.com",
     "STANDARD_DOMAIN_LIST": "fxtwitter.com,fixupx.com,twittpr.com",
     "DIRECT_MEDIA_DOMAINS": "d.fxtwitter.com,dl.fxtwitter.com,d.fixupx.com,dl.fixupx.com",
     "MOSAIC_DOMAIN_LIST": "mosaic.fxtwitter.com",

src/constants.ts

@@ -6,6 +6,7 @@ export const Constants = {
   TEXT_ONLY_DOMAINS: TEXT_ONLY_DOMAINS.split(','),
   INSTANT_VIEW_DOMAINS: INSTANT_VIEW_DOMAINS.split(','),
   GALLERY_DOMAINS: GALLERY_DOMAINS.split(','),
+  FORCE_MOSAIC_DOMAINS: FORCE_MOSAIC_DOMAINS.split(','),
   MOSAIC_DOMAIN_LIST: MOSAIC_DOMAIN_LIST.split(','),
   API_HOST_LIST: API_HOST_LIST.split(','),
   HOST_URL: HOST_URL,

src/embed/status.ts

@@ -8,6 +8,7 @@ import { renderPhoto } from '../render/photo';
 import { renderVideo } from '../render/video';
 import { renderInstantView } from '../render/instantview';
 import { constructTwitterThread } from '../providers/twitter/conversation';
+import { Experiment, experimentCheck } from '../experiments';
 
 export const returnError = (c: Context, error: string): Response => {
   return c.html(
@@ -98,6 +99,7 @@ export const handleStatus = async (
   }
 
   const isTelegram = (userAgent || '').indexOf('Telegram') > -1;
+  const isDiscord = (userAgent || '').indexOf('Discord') > -1;
   /* Should sensitive statuses be allowed Instant View? */
   let useIV =
     isTelegram /*&& !status.possibly_sensitive*/ &&
@@ -289,6 +291,22 @@ export const handleStatus = async (
         siteName = instructions.siteName;
       }
     } else if (media?.mosaic) {
+      if (experimentCheck(Experiment.DISCORD_NATIVE_MULTI_IMAGE, isDiscord) && !flags.forceMosaic) {
+        const photos = status.media?.photos || [];
+
+        photos.forEach(photo => {
+          const instructions = renderPhoto(
+            {
+              status: status,
+              authorText: authorText,
+              engagementText: engagementText,
+              userAgent: userAgent
+            },
+            photo
+          );
+          headers.push(...instructions.addHeaders);
+        });
+      } else {
         const instructions = renderPhoto(
           {
             status: status,
@@ -299,6 +317,7 @@ export const handleStatus = async (
           media.mosaic
         );
         headers.push(...instructions.addHeaders);
+      }
     } else if (media?.photos) {
       const instructions = renderPhoto(
         {

src/experiments.ts

@@ -1,7 +1,8 @@
 export enum Experiment {
   ELONGATOR_BY_DEFAULT = 'ELONGATOR_BY_DEFAULT',
   ELONGATOR_PROFILE_API = 'ELONGATOR_PROFILE_API',
-  TWEET_DETAIL_API = 'TWEET_DETAIL_API'
+  TWEET_DETAIL_API = 'TWEET_DETAIL_API',
+  DISCORD_NATIVE_MULTI_IMAGE = 'DISCORD_NATIVE_MULTI_IMAGE'
 }
 
 type ExperimentConfig = {
@@ -25,6 +26,11 @@ const Experiments: { [key in Experiment]: ExperimentConfig } = {
     name: 'Tweet detail API',
     description: 'Use Tweet Detail API (where available with elongator)',
     percentage: 0.75
+  },
+  [Experiment.DISCORD_NATIVE_MULTI_IMAGE]: {
+    name: 'Discord native multi-image',
+    description: 'Use Discord native multi-image',
+    percentage: 0.5
   }
 };
 

src/realms/twitter/routes/status.ts

@@ -58,6 +58,9 @@ export const statusRequest = async (c: Context) => {
   } else if (Constants.GALLERY_DOMAINS.includes(url.hostname)) {
     console.log('Gallery embed request');
     flags.gallery = true;
+  }  else if (Constants.FORCE_MOSAIC_DOMAINS.includes(url.hostname)) {
+    console.log('Force mosaic request');
+    flags.forceMosaic = true;
   } else if (prefix === 'dl' || prefix === 'dir') {
     console.log('Direct media request by path prefix');
     flags.direct = true;

src/types/env.d.ts

@@ -4,6 +4,7 @@ declare const DIRECT_MEDIA_DOMAINS: string;
 declare const TEXT_ONLY_DOMAINS: string;
 declare const INSTANT_VIEW_DOMAINS: string;
 declare const GALLERY_DOMAINS: string;
+declare const FORCE_MOSAIC_DOMAINS: string;
 declare const HOST_URL: string;
 declare const EMBED_URL: string;
 declare const REDIRECT_URL: string;

src/types/types.d.ts

@@ -10,6 +10,7 @@ type InputFlags = {
   forceInstantView?: boolean;
   archive?: boolean;
   gallery?: boolean;
+  forceMosaic?: boolean;
 };
 
 interface StatusResponse {