feat(album-color-theme): improve Album Color Theme style (#1571)

src/plugins/album-color-theme/index.ts

@@ -1,11 +1,13 @@
 import { FastAverageColor } from 'fast-average-color';
+import Color from 'color';
 
 import style from './style.css?inline';
 
 import { createPlugin } from '@/utils';
 import { t } from '@/i18n';
 
-import type { VideoDataChanged } from '@/types/video-data-changed';
+const COLOR_KEY = '--ytmusic-album-color';
+const DARK_COLOR_KEY = '--ytmusic-album-color-dark';
 
 export default createPlugin({
   name: () => t('plugins.album-color-theme.name'),
@@ -16,69 +18,8 @@ export default createPlugin({
   },
   stylesheets: [style],
   renderer: {
-    hexToHSL: (H: string) => {
-      // Convert hex to RGB first
-      let r = 0;
-      let g = 0;
-      let b = 0;
-      if (H.length == 4) {
-        r = Number('0x' + H[1] + H[1]);
-        g = Number('0x' + H[2] + H[2]);
-        b = Number('0x' + H[3] + H[3]);
-      } else if (H.length == 7) {
-        r = Number('0x' + H[1] + H[2]);
-        g = Number('0x' + H[3] + H[4]);
-        b = Number('0x' + H[5] + H[6]);
-      }
-      // Then to HSL
-      r /= 255;
-      g /= 255;
-      b /= 255;
-      const cmin = Math.min(r, g, b);
-      const cmax = Math.max(r, g, b);
-      const delta = cmax - cmin;
-      let h: number;
-      let s: number;
-      let l: number;
-
-      if (delta == 0) {
-        h = 0;
-      } else if (cmax == r) {
-        h = ((g - b) / delta) % 6;
-      } else if (cmax == g) {
-        h = ((b - r) / delta) + 2;
-      } else {
-        h = ((r - g) / delta) + 4;
-      }
-
-      h = Math.round(h * 60);
-
-      if (h < 0) {
-        h += 360;
-      }
-
-      l = (cmax + cmin) / 2;
-      s = delta == 0 ? 0 : delta / (1 - Math.abs((2 * l) - 1));
-      s = +(s * 100).toFixed(1);
-      l = +(l * 100).toFixed(1);
-
-      //return "hsl(" + h + "," + s + "%," + l + "%)";
-      return [h, s, l];
-    },
-    hue: 0,
-    saturation: 0,
-    lightness: 0,
-
-    changeElementColor: (
-      element: HTMLElement | null,
-      hue: number,
-      saturation: number,
-      lightness: number,
-    ) => {
-      if (element) {
-        element.style.backgroundColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
-      }
-    },
+    color: null as Color | null,
+    darkColor: null as Color | null,
 
     playerPage: null as HTMLElement | null,
     navBarBackground: null as HTMLElement | null,
@@ -103,113 +44,66 @@ export default createPlugin({
         '#mini-guide-background',
       );
       this.ytmusicAppLayout = document.querySelector<HTMLElement>('#layout');
-
-      const observer = new MutationObserver((mutationsList) => {
-        for (const mutation of mutationsList) {
-          if (mutation.type === 'attributes') {
-            const isPageOpen =
-              this.ytmusicAppLayout?.hasAttribute('player-page-open');
-            if (isPageOpen) {
-              this.changeElementColor(
-                this.sidebarSmall,
-                this.hue,
-                this.saturation,
-                this.lightness - 30,
-              );
-            } else {
-              if (this.sidebarSmall) {
-                this.sidebarSmall.style.backgroundColor = 'black';
-              }
-            }
-          }
-        }
-      });
-
-      if (this.playerPage) {
-        observer.observe(this.playerPage, { attributes: true });
-      }
     },
     onPlayerApiReady(playerApi) {
       const fastAverageColor = new FastAverageColor();
 
-      document.addEventListener(
-        'videodatachange',
-        (event: CustomEvent<VideoDataChanged>) => {
-          if (event.detail.name === 'dataloaded') {
-            const playerResponse = playerApi.getPlayerResponse();
-            const thumbnail =
-              playerResponse?.videoDetails?.thumbnail?.thumbnails?.at(0);
-            if (thumbnail) {
-              fastAverageColor
-                .getColorAsync(thumbnail.url)
-                .then((albumColor) => {
-                  if (albumColor) {
-                    const [hue, saturation, lightness] = ([
-                      this.hue,
-                      this.saturation,
-                      this.lightness,
-                    ] = this.hexToHSL(albumColor.hex));
-                    this.changeElementColor(
-                      this.playerPage,
-                      hue,
-                      saturation,
-                      lightness - 30,
-                    );
-                    this.changeElementColor(
-                      this.navBarBackground,
-                      hue,
-                      saturation,
-                      lightness - 15,
-                    );
-                    this.changeElementColor(
-                      this.ytmusicPlayerBar,
-                      hue,
-                      saturation,
-                      lightness - 15,
-                    );
-                    this.changeElementColor(
-                      this.playerBarBackground,
-                      hue,
-                      saturation,
-                      lightness - 15,
-                    );
-                    this.changeElementColor(
-                      this.sidebarBig,
-                      hue,
-                      saturation,
-                      lightness - 15,
-                    );
-                    if (
-                      this.ytmusicAppLayout?.hasAttribute('player-page-open')
-                    ) {
-                      this.changeElementColor(
-                        this.sidebarSmall,
-                        hue,
-                        saturation,
-                        lightness - 30,
-                      );
-                    }
-                    const ytRightClickList =
-                      document.querySelector<HTMLElement>(
-                        'tp-yt-paper-listbox',
-                      );
-                    this.changeElementColor(
-                      ytRightClickList,
-                      hue,
-                      saturation,
-                      lightness - 15,
-                    );
-                  } else {
-                    if (this.playerPage) {
-                      this.playerPage.style.backgroundColor = '#000000';
-                    }
-                  }
-                })
-                .catch((e) => console.error(e));
-            }
+      document.addEventListener('videodatachange', async (event) => {
+        if (event.detail.name !== 'dataloaded') return;
+
+        const playerResponse = playerApi.getPlayerResponse();
+        const thumbnail = playerResponse?.videoDetails?.thumbnail?.thumbnails?.at(0);
+        if (!thumbnail) return;
+
+        const albumColor = await fastAverageColor.getColorAsync(thumbnail.url)
+          .catch((err) => {
+            console.error(err);
+            return null;
+          });
+
+        if (albumColor) {
+          const target = Color(albumColor.hex);
+
+          this.darkColor = target.darken(0.3).rgb();
+          this.color = target.darken(0.15).rgb();
+
+          while (this.color.luminosity() > 0.5) {
+            this.color = this.color?.darken(0.05);
+            this.darkColor = this.darkColor?.darken(0.05);
           }
-        },
-      );
+
+          document.documentElement.style.setProperty(COLOR_KEY, `${~~this.color.red()}, ${~~this.color.green()}, ${~~this.color.blue()}`);
+          document.documentElement.style.setProperty(DARK_COLOR_KEY, `${~~this.darkColor.red()}, ${~~this.darkColor.green()}, ${~~this.darkColor.blue()}`);
+        } else {
+          document.documentElement.style.setProperty(COLOR_KEY, '0, 0, 0');
+          document.documentElement.style.setProperty(DARK_COLOR_KEY, '0, 0, 0');
+        }
+
+        this.updateColor();
+      });
+    },
+    getColor(key: string, alpha = 1) {
+      return `rgba(var(${key}), ${alpha})`;
+    },
+    updateColor() {
+      const change = (element: HTMLElement | null, color: string) => {
+        if (element) {
+          element.style.backgroundColor = color;
+        }
+      };
+
+      change(this.playerPage, this.getColor(DARK_COLOR_KEY));
+      change(this.navBarBackground, this.getColor(COLOR_KEY));
+      change(this.ytmusicPlayerBar, this.getColor(COLOR_KEY));
+      change(this.playerBarBackground, this.getColor(COLOR_KEY));
+      change(this.sidebarBig, this.getColor(COLOR_KEY));
+
+      if (this.ytmusicAppLayout?.hasAttribute('player-page-open')) {
+        change(this.sidebarSmall, this.getColor(DARK_COLOR_KEY));
+      }
+
+      const ytRightClickList = document.querySelector<HTMLElement>('tp-yt-paper-listbox');
+      change(ytRightClickList, this.getColor(COLOR_KEY));
     },
   },
 });

src/plugins/album-color-theme/style.css

@@ -4,28 +4,24 @@ yt-page-navigation-progress {
 }
 
 #player-page {
-  transition:
-    transform 300ms,
-    background-color 300ms cubic-bezier(0.2, 0, 0.6, 1) !important;
+  transition: transform 300ms,
+  background-color 300ms cubic-bezier(0.2, 0, 0.6, 1) !important;
 }
 
 #nav-bar-background {
-  transition:
-    opacity 200ms,
-    background-color 300ms cubic-bezier(0.2, 0, 0.6, 1) !important;
+  transition: opacity 200ms,
+  background-color 300ms cubic-bezier(0.2, 0, 0.6, 1) !important;
 }
 
 #mini-guide-background {
-  transition:
-    opacity 200ms,
-    background-color 300ms cubic-bezier(0.2, 0, 0.6, 1) !important;
+  transition: opacity 200ms,
+  background-color 300ms cubic-bezier(0.2, 0, 0.6, 1) !important;
   border-right: 0px !important;
 }
 
 #guide-wrapper {
-  transition:
-    opacity 200ms,
-    background-color 300ms cubic-bezier(0.2, 0, 0.6, 1) !important;
+  transition: opacity 200ms,
+  background-color 300ms cubic-bezier(0.2, 0, 0.6, 1) !important;
 }
 
 #img,
@@ -37,3 +33,35 @@ yt-page-navigation-progress {
 #items {
   border-radius: 10px !important;
 }
+
+/* fix blur navigation bar */
+
+ytmusic-app-layout > [slot='player-page'] {
+  padding-top: 90px;
+  margin-top: calc(-90px + var(--menu-bar-height, 0px)) !important;
+}
+
+/* fix icon color */
+
+.duration.ytmusic-player-queue-item, .byline.ytmusic-player-queue-item {
+  color: rgba(255, 255, 255, 0.5) !important;
+  --yt-endpoint-color: rgba(255, 255, 255, 0.5) !important;
+  --yt-endpoint-hover-color: rgba(255, 255, 255, 0.5) !important;
+  --yt-endpoint-visited-color: rgba(255, 255, 255, 0.5) !important;
+}
+
+.icon.ytmusic-menu-navigation-item-renderer {
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+.menu.ytmusic-player-bar {
+  --iron-icon-fill-color: rgba(255, 255, 255, 0.5) !important;
+}
+ytmusic-player-bar {
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+.time-info.ytmusic-player-bar {
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+.volume-slider.ytmusic-player-bar, .expand-volume-slider.ytmusic-player-bar {
+  --paper-slider-container-color: rgba(255, 255, 255, 0.5) !important;
+}

src/plugins/in-app-menu/titlebar.css

@@ -233,7 +233,10 @@ ytmusic-app-layout > [slot='nav-bar'],
     var(--ytmusic-nav-bar-height) + var(--menu-bar-height, 36px)
   ) !important;
 }
-ytmusic-app[is-bauhaus-sidenav-enabled] #guide-spacer.ytmusic-app,
+ytmusic-app[is-bauhaus-sidenav-enabled] #guide-spacer.ytmusic-app {
+  margin-top: calc(var(--menu-bar-height, 36px)) !important;
+}
+
 ytmusic-app[is-bauhaus-sidenav-enabled] #mini-guide-spacer.ytmusic-app {
   margin-top: calc(
     var(--ytmusic-nav-bar-height) + var(--menu-bar-height, 36px)