fix(deps): update dependency virtua to v0.48.1

package.json

@@ -131,7 +131,7 @@
     "solid-transition-group": "0.3.0",
     "tiny-pinyin": "1.3.2",
     "tinyld": "1.3.4",
-    "virtua": "0.48.2",
+    "virtua": "0.48.1",
     "vudio": "2.1.1",
     "x11": "2.3.0",
     "youtubei.js": "^16.0.1",

pnpm-lock.yaml

@@ -241,8 +241,8 @@ importers:
         specifier: 1.3.4
         version: 1.3.4
       virtua:
-        specifier: 0.48.2
-        version: 0.48.2(solid-js@1.9.9)
+        specifier: 0.48.1
+        version: 0.48.1(solid-js@1.9.9)
       vudio:
         specifier: 2.1.1
         version: 2.1.1(patch_hash=0e06c2ed11c02bdc490c209fa80070e98517c2735c641f5738b6e15d7dc1959d)
@@ -4637,8 +4637,8 @@ packages:
     resolution: {integrity: sha512-veufcmxri4e3XSrT0xwfUR7kguIkaxBeosDg00yDWhk49wdwkSUrvvsm7nc75e1PUyvIeZj6nS8VQRYz2/S4Xg==}
     engines: {node: '>=0.6.0'}
 
-  virtua@0.48.2:
-    resolution: {integrity: sha512-z8zko7BRnSruf3pYMjhfKIdz138quGVRxSNSZJ7rcrhnxd03mRhGIWNZULE1Dz0VMdRVVaBeT6Ow8ynayHW3Jg==}
+  virtua@0.48.1:
+    resolution: {integrity: sha512-bjVdaIIc/V1XLjWg17DNRNDO919+9caYdMHTNFaQ9GGSpCv2/b6uH9/IR5BfAQnxBcKpH0kQysZXdLLWN1VULw==}
     peerDependencies:
       react: '>=16.14.0'
       react-dom: '>=16.14.0'
@@ -9615,7 +9615,7 @@ snapshots:
       extsprintf: 1.4.1
     optional: true
 
-  virtua@0.48.2(solid-js@1.9.9):
+  virtua@0.48.1(solid-js@1.9.9):
     optionalDependencies:
       solid-js: 1.9.9
 

src/i18n/resources/en.json

@@ -237,8 +237,7 @@
           "submenu": {
             "percent": "{{ratio}}%"
           }
-        },
-        "enable-seekbar": "Enable seekbar theming"
+        }
       },
       "name": "Album Color Theme"
     },

src/i18n/resources/ko.json

@@ -237,8 +237,7 @@
           "submenu": {
             "percent": "{{ratio}}%"
           }
-        },
-        "enable-seekbar": "재생바 색조 변경 활성화"
+        }
       },
       "name": "앨범 컬러 기반 테마"
     },

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

@@ -10,32 +10,41 @@ const COLOR_KEY = '--ytmusic-album-color';
 const DARK_COLOR_KEY = '--ytmusic-album-color-dark';
 const RATIO_KEY = '--ytmusic-album-color-ratio';
 
-type Config = {
-  enabled: boolean;
-  ratio: number;
-  enableSeekbar: boolean;
-};
+export default createPlugin<
+  unknown,
+  unknown,
+  {
+    color?: ColorInstance;
+    darkColor?: ColorInstance;
 
-type Renderer = {
-  getMixedColor(
-    color: string,
-    key: string,
-    alpha?: number,
-    ratioMultiply?: number,
-  ): string;
-  updateColor(alpha: number): void;
-  onConfigChange(newConfig: Config): void;
-};
+    playerPage: HTMLElement | null;
+    navBarBackground: HTMLElement | null;
+    ytmusicPlayerBar: HTMLElement | null;
+    playerBarBackground: HTMLElement | null;
+    sidebarBig: HTMLElement | null;
+    sidebarSmall: HTMLElement | null;
+    ytmusicAppLayout: HTMLElement | null;
 
-export default createPlugin({
+    getMixedColor(
+      color: string,
+      key: string,
+      alpha?: number,
+      ratioMultiply?: number,
+    ): string;
+    updateColor(alpha: number): void;
+  },
+  {
+    enabled: boolean;
+    ratio: number;
+  }
+>({
   name: () => t('plugins.album-color-theme.name'),
   description: () => t('plugins.album-color-theme.description'),
   restartNeeded: false,
   config: {
     enabled: false,
     ratio: 0.5,
-    enableSeekbar: true,
-  } satisfies Config as Config,
+  },
   stylesheets: [style],
   menu: async ({ getConfig, setConfig }) => {
     const ratioList = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1];
@@ -59,28 +68,18 @@ export default createPlugin({
           },
         })),
       },
-      {
-        label: t('plugins.album-color-theme.menu.enable-seekbar'),
-        type: 'checkbox',
-        checked: config.enableSeekbar,
-        click(item) {
-          setConfig({ enableSeekbar: item.checked });
-        },
-      },
     ];
   },
   renderer: {
-    playerPage: null as HTMLElement | null,
-    navBarBackground: null as HTMLElement | null,
-    ytmusicPlayerBar: null as HTMLElement | null,
-    playerBarBackground: null as HTMLElement | null,
-    sidebarBig: null as HTMLElement | null,
-    sidebarSmall: null as HTMLElement | null,
-    ytmusicAppLayout: null as HTMLElement | null,
-    color: null as ColorInstance | null,
-    darkColor: null as ColorInstance | null,
+    playerPage: null,
+    navBarBackground: null,
+    ytmusicPlayerBar: null,
+    playerBarBackground: null,
+    sidebarBig: null,
+    sidebarSmall: null,
+    ytmusicAppLayout: null,
 
-    start() {
+    async start({ getConfig }) {
       this.playerPage = document.querySelector<HTMLElement>('#player-page');
       this.navBarBackground = document.querySelector<HTMLElement>(
         '#nav-bar-background',
@@ -95,11 +94,14 @@ export default createPlugin({
         '#mini-guide-background',
       );
       this.ytmusicAppLayout = document.querySelector<HTMLElement>('#layout');
-    },
-    async onPlayerApiReady(playerApi, { getConfig }) {
-      const config = await getConfig();
-      (this as Renderer).onConfigChange(config);
 
+      const config = await getConfig();
+      document.documentElement.style.setProperty(
+        RATIO_KEY,
+        `${~~(config.ratio * 100)}%`,
+      );
+    },
+    onPlayerApiReady(playerApi) {
       const fastAverageColor = new FastAverageColor();
 
       document.addEventListener('videodatachange', async (event) => {
@@ -150,7 +152,7 @@ export default createPlugin({
             alpha = value;
           }
         }
-        (this as Renderer).updateColor(alpha ?? 1);
+        this.updateColor(alpha ?? 1);
       });
     },
     onConfigChange(config) {
@@ -158,15 +160,8 @@ export default createPlugin({
         RATIO_KEY,
         `${~~(config.ratio * 100)}%`,
       );
-      if (config.enableSeekbar) document.body.classList.add('seekbar-theme');
-      else document.body.classList.remove('seekbar-theme');
     },
-    getMixedColor(
-      color: string,
-      key: string,
-      alpha = 1,
-      ratioMultiply?: number,
-    ) {
+    getMixedColor(color: string, key: string, alpha = 1, ratioMultiply) {
       const keyColor = `rgba(var(${key}), ${alpha})`;
 
       let colorRatio = `var(${RATIO_KEY}, 50%)`;
@@ -212,39 +207,26 @@ export default createPlugin({
         '--yt-spec-black-pure-alpha-80': 'rgba(0,0,0,0.8)',
         '--yt-spec-black-1-alpha-98': 'rgba(40,40,40,0.98)',
         '--yt-spec-black-1-alpha-95': 'rgba(40,40,40,0.95)',
-        '--paper-toast-background-color': '#323232',
-        '--ytmusic-search-background': '#030303',
-        '--paper-slider-knob-color': '#f03',
-        '--paper-dialog-background-color': '#212121',
-        '--paper-progress-active-color-1': '#f03',
-        '--paper-progress-active-color-2': '#ff2791',
-        '--yt-spec-inverted-background': '#f3f3f3',
-        'background': 'rgba(3, 3, 3)',
-        '--ytmusic-background': 'rgba(3, 3, 3)',
       };
-
-      const colorKeyMap: Record<string, string> = {
-        'background': DARK_COLOR_KEY,
-        '--ytmusic-background': DARK_COLOR_KEY,
-      };
-
-      const ratioMap: Record<string, number> = {
-        '--paper-progress-active-color-1': 1.75,
-        '--paper-progress-active-color-2': 1.75,
-        '--yt-spec-inverted-background': 1.75,
-      };
-
-      const getMixedColor = (this as Renderer).getMixedColor.bind(this);
       Object.entries(variableMap).map(([variable, color]) => {
-        const key = colorKeyMap[variable] ?? COLOR_KEY;
-        const ratio = ratioMap[variable] ?? undefined;
-
         document.documentElement.style.setProperty(
           variable,
-          getMixedColor(color, key, alpha, ratio),
+          this.getMixedColor(color, COLOR_KEY, alpha),
           'important',
         );
       });
+
+      document.body.style.setProperty(
+        'background',
+        this.getMixedColor('rgba(3, 3, 3)', DARK_COLOR_KEY, alpha),
+        'important',
+      );
+      document.documentElement.style.setProperty(
+        '--ytmusic-background',
+        // #030303
+        this.getMixedColor('rgba(3, 3, 3)', DARK_COLOR_KEY, alpha),
+        'important',
+      );
     },
   },
 });

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

@@ -81,14 +81,3 @@ ytmusic-browse-response[has-background]:not([disable-gradient]) .background-grad
 #background.immersive-background.style-scope.ytmusic-browse-response {
   opacity: 0.6;
 }
-
-ytmusic-search-box[is-bauhaus-sidenav-enabled] {
-  --ytmusic-search-background: var(--ytmusic-color-black3) !important;
-}
-
-.seekbar-theme #progress-bar.ytmusic-player-bar {
-  --paper-slider-active-color: linear-gradient(to right, var(--paper-progress-active-color-1) 80%, var(--paper-progress-active-color-2) 100%) !important;
-  --paper-slider-knob-color: var(--paper-progress-active-color-1) !important;
-  --paper-slider-knob-start-color: var(--paper-progress-active-color-2) !important;
-}
-