Infer unavailable thumbnail theme from background color

Author: aditya0155

src/renderer/helpers/colors.js

@@ -99,10 +99,27 @@ export function getRandomColor() {
 }
 
 export function calculateColorLuminance(colorValue) {
-  const cutHex = colorValue.substring(1, 7)
-  const colorValueR = parseInt(cutHex.substring(0, 2), 16)
-  const colorValueG = parseInt(cutHex.substring(2, 4), 16)
-  const colorValueB = parseInt(cutHex.substring(4, 6), 16)
+  let colorValues
+
+  if (colorValue.startsWith('#')) {
+    const cutHex = colorValue.length === 4
+      ? colorValue.slice(1).split('').map(value => value + value).join('')
+      : colorValue.substring(1, 7)
+
+    colorValues = [
+      parseInt(cutHex.substring(0, 2), 16),
+      parseInt(cutHex.substring(2, 4), 16),
+      parseInt(cutHex.substring(4, 6), 16)
+    ]
+  } else {
+    colorValues = colorValue.match(/\d+(\.\d+)?/g)?.slice(0, 3).map(Number)
+  }
+
+  if (!colorValues || colorValues.some(value => isNaN(value))) {
+    return '#FFFFFF'
+  }
+
+  const [colorValueR, colorValueG, colorValueB] = colorValues
 
   const luminance = (0.299 * colorValueR + 0.587 * colorValueG + 0.114 * colorValueB) / 255
 

src/renderer/views/Watch/Watch.js

@@ -14,6 +14,7 @@ import WatchVideoPlaylist from '../../components/WatchVideoPlaylist/WatchVideoPl
 import WatchVideoRecommendations from '../../components/WatchVideoRecommendations/WatchVideoRecommendations.vue'
 import FtAgeRestricted from '../../components/FtAgeRestricted/FtAgeRestricted.vue'
 import packageDetails from '../../../../package.json'
+import { calculateColorLuminance } from '../../helpers/colors'
 import {
   buildVTTFileLocally,
   copyToClipboard,
@@ -60,16 +61,6 @@ const UNAVAILABLE_VIDEO_THUMBNAILS = {
   light: 'https://www.youtube.com/img/desktop/unavailable/unavailable_video.png',
   dark: 'https://www.youtube.com/img/desktop/unavailable/unavailable_video_dark_theme.png'
 }
-const LIGHT_BASE_THEMES = new Set([
-  'light',
-  'pastelPink',
-  'catppuccinLatte',
-  'solarizedLight',
-  'gruvboxLight',
-  'everforestLightHard',
-  'everforestLightMedium',
-  'everforestLightLow'
-])
 
 export default defineComponent({
   name: 'Watch',
@@ -206,9 +197,6 @@ export default defineComponent({
     backendFallback: function () {
       return this.$store.getters.getBackendFallback
     },
-    baseTheme: function () {
-      return this.$store.getters.getBaseTheme
-    },
     currentInvidiousInstanceUrl: function () {
       return this.$store.getters.getCurrentInvidiousInstanceUrl
     },
@@ -1094,9 +1082,8 @@ export default defineComponent({
     },
 
     getUnavailableVideoThumbnail: function () {
-      const baseTheme = this.baseTheme || 'system'
-      const isLightTheme = LIGHT_BASE_THEMES.has(baseTheme) ||
-        (baseTheme === 'system' && !window.matchMedia('(prefers-color-scheme: dark)').matches)
+      const backgroundColor = window.getComputedStyle(document.body).backgroundColor
+      const isLightTheme = calculateColorLuminance(backgroundColor) === '#000000'
 
       return isLightTheme
         ? UNAVAILABLE_VIDEO_THUMBNAILS.light