From afde8f2f2e09c7fdb7a2b7957867511afa14cbc0 Mon Sep 17 00:00:00 2001
From: dangered wolf <d@ngeredwolf.me>
Date: Thu, 14 Jul 2022 12:46:59 -0400
Subject: [PATCH] improved lang, move palette code

---
 src/palette.ts | 28 +++++++++++++++++++++++++++
 src/status.ts  | 51 +++++++++++++++++++++++++-------------------------
 2 files changed, 54 insertions(+), 25 deletions(-)
 create mode 100644 src/palette.ts

diff --git a/src/palette.ts b/src/palette.ts
new file mode 100644
index 0000000..8e95825
--- /dev/null
+++ b/src/palette.ts
@@ -0,0 +1,28 @@
+
+
+import { Constants } from "./constants";
+
+// https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
+const componentToHex = (component: number) => {
+    let hex = component.toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  }
+    
+const rgbToHex = (r: number, g: number, b: number) => 
+`#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
+
+
+export const colorFromPalette = (palette: MediaPlaceholderColor[]) => {
+  for (let i = 0; i < palette.length; i++) {
+    const rgb = palette[i].rgb;
+
+    // We need vibrant colors, grey backgrounds won't do!
+    if (rgb.red + rgb.green + rgb.blue < 120) {
+      continue;
+    }
+
+    return rgbToHex(rgb.red, rgb.green, rgb.blue);
+  }
+
+  return Constants.DEFAULT_COLOR;
+}
\ No newline at end of file
diff --git a/src/status.ts b/src/status.ts
index a90b918..3d9678a 100644
--- a/src/status.ts
+++ b/src/status.ts
@@ -1,29 +1,15 @@
 import { Constants } from "./constants";
 import { fetchUsingGuest } from "./fetch";
 import { Html } from "./html";
+import { colorFromPalette } from "./palette";
 import { renderPoll } from "./poll";
-import { rgbToHex } from "./utils";
-
-const colorFromPalette = (palette: MediaPlaceholderColor[]) => {
-  for (let i = 0; i < palette.length; i++) {
-    const rgb = palette[i].rgb;
-
-    // We need vibrant colors, grey backgrounds won't do!
-    if (rgb.red + rgb.green + rgb.blue < 120) {
-      continue;
-    }
-
-    return rgbToHex(rgb.red, rgb.green, rgb.blue);
-  }
-
-  return Constants.DEFAULT_COLOR;
-}
 
 export const handleStatus = async (handle: string, id: string, mediaNumber?: number): Promise<string> => {
   const tweet = await fetchUsingGuest(id);
   console.log(tweet);
 
-  // Try to deep link to mobile apps, just like Twitter does
+  /* Try to deep link to mobile apps, just like Twitter does.
+     No idea if this actually works.*/
   let headers: string[] = [
     `<meta property="og:site_name" content="Twitter"/>`,
     `<meta property="fb:app_id" content="2231777543"/>`,
@@ -54,6 +40,8 @@ export const handleStatus = async (handle: string, id: string, mediaNumber?: num
   const screenName = user?.screen_name || '';
   const name = user?.name || '';
 
+  const mediaList = tweet.extended_entities?.media || tweet.entities?.media || [];
+
   let authorText = 'Twitter';
 
   // This is used to chop off the end if it's like pic.twitter.com or something
@@ -94,9 +82,7 @@ export const handleStatus = async (handle: string, id: string, mediaNumber?: num
       `<meta content="${text}" property="og:description"/>`
     );
   } else {
-    let media = tweet.extended_entities?.media || tweet.entities?.media || [];
-
-    let firstMedia = media[0];
+    let firstMedia = mediaList[0];
 
     let palette = firstMedia?.ext_media_color?.palette;
     let colorOverride: string = Constants.DEFAULT_COLOR;
@@ -145,31 +131,46 @@ export const handleStatus = async (handle: string, id: string, mediaNumber?: num
       }
     }
 
-    // You can specify a specific photo in the URL
-    if (typeof mediaNumber === "number" && media[mediaNumber]) {
-      processMedia(media[mediaNumber]);
+    let actualMediaNumber = 1;
+
+    /* You can specify a specific photo in the URL and we'll pull the correct one,
+       otherwise it falls back to first */
+    if (typeof mediaNumber === "number" && mediaList[mediaNumber]) {
+      actualMediaNumber = mediaNumber;
+      processMedia(mediaList[mediaNumber]);
     } else {
-      // I wish Telegram respected multiple photos in a tweet
+      /* I wish Telegram respected multiple photos in a tweet,
+         and that Discord could do the same for 3rd party providers like us */
       // media.forEach(media => processMedia(media));
       processMedia(firstMedia);
     }
 
+    if (mediaList.length > 1) {
+      authorText = `Photo ${actualMediaNumber} of ${mediaList.length}`;
+    }
+
     headers.push(
       `<meta content="${name} (@${screenName})" property="og:title"/>`,
       `<meta content="${text}" property="og:description"/>`
     );
   }
 
+  /* */
   if (tweet.in_reply_to_screen_name) {
     authorText = `↪ Replying to @${tweet.in_reply_to_screen_name}`;
   }
 
+  /* The additional oembed is pulled by Discord to enable improved embeds.
+     Telegram does not use this. */
   headers.push(`<link rel="alternate" href="https://pxtwitter.com/owoembed?text=${encodeURIComponent(authorText)}&status=${encodeURIComponent(id)}&author=${encodeURIComponent(user?.screen_name || '')}" type="application/json+oembed" title="${name}">`)
 
   console.log(JSON.stringify(tweet))
 
+  /* When dealing with a Tweet of unknown lang, fall back to en  */
+  let lang = tweet.lang === 'unk' ? 'en' : tweet.lang || 'en';
+
   return Html.BASE_HTML.format({
-    lang: `lang="${tweet.lang || 'en'}"`,
+    lang: `lang="${lang}"`,
     headers: headers.join('')
   });
 };