chore(deps): update dependency discord-api-types to v0.38.35

package.json

@@ -153,7 +153,7 @@
     "builtin-modules": "5.0.0",
     "cross-env": "10.0.0",
     "del-cli": "6.0.0",
-    "discord-api-types": "0.38.36",
+    "discord-api-types": "0.38.35",
     "electron": "38.2.0",
     "electron-builder": "26.0.12",
     "electron-builder-squirrel-windows": "26.0.12",

pnpm-lock.yaml

@@ -299,8 +299,8 @@ importers:
         specifier: 6.0.0
         version: 6.0.0
       discord-api-types:
-        specifier: 0.38.36
-        version: 0.38.36
+        specifier: 0.38.35
+        version: 0.38.35
       electron:
         specifier: 38.2.0
         version: 38.2.0
@@ -2154,8 +2154,8 @@ packages:
   dir-compare@4.2.0:
     resolution: {integrity: sha512-2xMCmOoMrdQIPHdsTawECdNPwlVFB9zGcz3kuhmBO6U3oU+UQjsue0i8ayLKpgBcm+hcXPMVSGUN9d+pvJ6+VQ==}
 
-  discord-api-types@0.38.36:
-    resolution: {integrity: sha512-qrbUbjjwtyeBg5HsAlm1C859epfOyiLjPqAOzkdWlCNsZCWJrertnETF/NwM8H+waMFU58xGSc5eXUfXah+WTQ==}
+  discord-api-types@0.38.35:
+    resolution: {integrity: sha512-pI6FKJmkyIhToiDK5f8iok7acugSJDFnr3D2a0m+r91EMSFWCzAAEgUro9Km0AUYQPAUluS6iJaXVKt6+wBF7w==}
 
   dmg-builder@26.0.12:
     resolution: {integrity: sha512-59CAAjAhTaIMCN8y9kD573vDkxbs1uhDcrFLHSgutYdPcGOU35Rf95725snvzEOy4BFB7+eLJ8djCNPmGwG67w==}
@@ -4999,7 +4999,7 @@ snapshots:
       '@sapphire/async-queue': 1.5.5
       '@sapphire/snowflake': 3.5.5
       '@vladfrangu/async_event_emitter': 2.4.6
-      discord-api-types: 0.38.36
+      discord-api-types: 0.38.35
       magic-bytes.js: 1.12.1
       tslib: 2.8.1
       undici: 6.21.3
@@ -6102,7 +6102,7 @@ snapshots:
     dependencies:
       '@discordjs/rest': 2.5.1
       '@vladfrangu/async_event_emitter': 2.4.6
-      discord-api-types: 0.38.36
+      discord-api-types: 0.38.35
       ws: 8.18.3(bufferutil@4.0.9)(utf-8-validate@6.0.5)
     transitivePeerDependencies:
       - bufferutil
@@ -6839,7 +6839,7 @@ snapshots:
       minimatch: 3.1.2
       p-limit: 3.1.0
 
-  discord-api-types@0.38.36: {}
+  discord-api-types@0.38.35: {}
 
   dmg-builder@26.0.12(electron-builder-squirrel-windows@26.0.12):
     dependencies:

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;
-}
-