From ede36695cd4cc42bdd2f8253c80ac675909c6066 Mon Sep 17 00:00:00 2001
From: John Livingston <git@john-livingston.fr>
Date: Mon, 22 Nov 2021 13:30:55 +0100
Subject: [PATCH] Simplier colors detection (using css vars).

---
 client/videowatch-client-plugin.ts | 48 ++++++++----------------------
 shared/lib/autocolors.ts           |  3 +-
 2 files changed, 15 insertions(+), 36 deletions(-)

diff --git a/client/videowatch-client-plugin.ts b/client/videowatch-client-plugin.ts
index ef0be018..8cc3424f 100644
--- a/client/videowatch-client-plugin.ts
+++ b/client/videowatch-client-plugin.ts
@@ -86,44 +86,22 @@ function register ({ registerHook, peertubeHelpers }: RegisterOptions): void {
       logger.warn('[AutoColors] getComputedStyle is not available, aborting.')
       return null
     }
-    // Searching for one of these button:
-    const button = document.querySelector('.publish-button, .peertube-button-link')
-    if (!button) {
-      logger.warn('[AutoColors] Cant find a button, aborting.')
-      return null
-    }
-    const buttonStyles = window.getComputedStyle(button)
-    logger.info('[AutoColors] found button styles')
 
-    const main = document.querySelector('#content')
-    if (!main) {
-      logger.warn('[AutoColors] Cant find main, aborting.')
-      return null
-    }
-    const mainStyles = window.getComputedStyle(main)
-    logger.info('[AutoColors] found main styles')
-
-    const menu = document.querySelector('.menu-link')
-    if (!menu) {
-      logger.warn('[AutoColors] Cant find menu, aborting.')
-      return null
-    }
-    const menuStyles = window.getComputedStyle(menu)
-    logger.info('[AutoColors] found menu styles')
+    const styles = window.getComputedStyle(document.body)
 
     const autocolors: AutoColors = {
-      mainForeground: mainStyles.color,
-      mainBackground: mainStyles.backgroundColor,
-      greyForeground: '#000',
-      greyBackground: '#000',
-      menuForeground: menuStyles.color,
-      menuBackground: menuStyles.backgroundColor,
-      inputForeground: '#000',
-      inputBackground: '#000',
-      buttonForeground: buttonStyles.color,
-      buttonBackground: buttonStyles.backgroundColor,
-      link: '#000',
-      linkHover: '#000'
+      mainForeground: styles.getPropertyValue('--mainColor'),
+      mainBackground: styles.getPropertyValue('--mainBackgroundColor'),
+      greyForeground: styles.getPropertyValue('--greyForegroundColor'),
+      greyBackground: styles.getPropertyValue('--greyBackgroundColor'),
+      menuForeground: styles.getPropertyValue('--menuForegroundColor'),
+      menuBackground: styles.getPropertyValue('--menuBackgroundColor'),
+      inputForeground: styles.getPropertyValue('--inputForegroundColor'),
+      inputBackground: styles.getPropertyValue('--inputBackgroundColor'),
+      buttonForeground: styles.getPropertyValue('--mainColor'),
+      buttonBackground: styles.getPropertyValue('--mainBackgroundColor'),
+      link: styles.getPropertyValue('--mainForegroundColor'),
+      linkHover: styles.getPropertyValue('--mainForegroundColor')
     }
     const autoColorsTest = areAutoColorsValid(autocolors)
     if (autoColorsTest !== true) {
diff --git a/shared/lib/autocolors.ts b/shared/lib/autocolors.ts
index c0877744..d4552a96 100644
--- a/shared/lib/autocolors.ts
+++ b/shared/lib/autocolors.ts
@@ -41,7 +41,8 @@ function areAutoColorsValid (autocolors: AutoColors): true | string[] {
     if (
       !/^rgb\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\)$/.test(color) &&
       !/^rgba\(\d{1,3},\s*\d{1,3},\s*\d{1,3},\s*(1|0|0?.\d+)\)$/.test(color) &&
-      !/^#[0-9a-fA-F]{3,6}$/.test(color)
+      !/^#[0-9a-fA-F]{3,6}$/.test(color) &&
+      !/^[a-z]+$/
     ) {
       errors.push(color)
     }