Add text color based off luminance for full video label

src/components/CategoryPillComponent.tsx

@@ -35,8 +35,7 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
         const style: React.CSSProperties = {
             backgroundColor: this.getColor(),
             display: this.state.show ? "flex" : "none",
-            color: this.state.segment?.category === "sponsor" 
-                || this.state.segment?.category === "exclusive_access" ? "white" : "black",
+            color: this.getTextColor(),
         }
 
         return (
@@ -116,6 +115,26 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
         return configObject?.color;
     }
 
+    private getTextColor(): string {
+        const color = this.getColor();
+        if (!color) return null;
+
+        const existingCalculatedColor = Config.config.categoryPillColors[this.state.segment?.category];
+        if (existingCalculatedColor && existingCalculatedColor.lastColor === color) {
+            return existingCalculatedColor.textColor;
+        } else {
+            const luminance = GenericUtils.getLuminance(color);
+            console.log(luminance)
+            const textColor = luminance > 128 ? "black" : "white";
+            Config.config.categoryPillColors[this.state.segment?.category] = {
+                lastColor: color,
+                textColor
+            };
+
+            return textColor;
+        }
+    }
+
     getTitleText(): string {
         const shortDescription = chrome.i18n.getMessage(`category_${this.state.segment?.category}_pill`);
         return (shortDescription ? shortDescription + ". ": "") + chrome.i18n.getMessage("categoryPillTitleText");

src/config.ts

@@ -54,6 +54,14 @@ interface SBConfig {
     categoryPillUpdate: boolean,
     darkMode: boolean,
 
+    // Used to cache calculated text color info
+    categoryPillColors: {
+        [key in Category]: {
+            lastColor: string,
+            textColor: string
+        }
+    }
+
     skipKeybind: Keybind,
     startSponsorKeybind: Keybind,
     submitKeybind: Keybind,
@@ -210,6 +218,8 @@ const Config: SBObject = {
         categoryPillUpdate: false,
         darkMode: true,
 
+        categoryPillColors: {},
+
         /**
          * Default keybinds should not set "code" as that's gonna be different based on the user's locale. They should also only use EITHER ctrl OR alt modifiers (or none).
          * Using ctrl+alt, or shift may produce a different character that we will not be able to recognize in different locales.

src/utils/genericUtils.ts

@@ -44,7 +44,30 @@ function getErrorMessage(statusCode: number, responseText: string): string {
     return errorMessage + postFix;
 }
 
+/* Gets percieved luminance of a color */
+function getLuminance(color: string): number {
+    const {r, g, b} = hexToRgb(color);
+    return Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b));
+}
+
+/* From https://stackoverflow.com/a/5624139 */
+function hexToRgb(hex: string): {r: number, g: number, b: number} {
+    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+    const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+      return r + r + g + g + b + b;
+    });
+  
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16)
+    } : null;
+  }
+
 export const GenericUtils = {
     wait,
-    getErrorMessage
+    getErrorMessage,
+    getLuminance
 }