diff --git a/src/i18n/resources/en.json b/src/i18n/resources/en.json index 4cf482aa..74a4dc8a 100644 --- a/src/i18n/resources/en.json +++ b/src/i18n/resources/en.json @@ -237,7 +237,8 @@ "submenu": { "percent": "{{ratio}}%" } - } + }, + "enable-seekbar": "Enable seekbar theming" }, "name": "Album Color Theme" }, diff --git a/src/i18n/resources/ko.json b/src/i18n/resources/ko.json index eb5e3f98..0cc6b2d6 100644 --- a/src/i18n/resources/ko.json +++ b/src/i18n/resources/ko.json @@ -237,7 +237,8 @@ "submenu": { "percent": "{{ratio}}%" } - } + }, + "enable-seekbar": "재생바 색조 변경 활성화" }, "name": "앨범 컬러 기반 테마" }, diff --git a/src/plugins/album-color-theme/index.ts b/src/plugins/album-color-theme/index.ts index e8a78945..08048b9b 100644 --- a/src/plugins/album-color-theme/index.ts +++ b/src/plugins/album-color-theme/index.ts @@ -10,41 +10,32 @@ const COLOR_KEY = '--ytmusic-album-color'; const DARK_COLOR_KEY = '--ytmusic-album-color-dark'; const RATIO_KEY = '--ytmusic-album-color-ratio'; -export default createPlugin< - unknown, - unknown, - { - color?: ColorInstance; - darkColor?: ColorInstance; +type Config = { + enabled: boolean; + ratio: number; + enableSeekbar: boolean; +}; - playerPage: HTMLElement | null; - navBarBackground: HTMLElement | null; - ytmusicPlayerBar: HTMLElement | null; - playerBarBackground: HTMLElement | null; - sidebarBig: HTMLElement | null; - sidebarSmall: HTMLElement | null; - ytmusicAppLayout: HTMLElement | null; +type Renderer = { + getMixedColor( + color: string, + key: string, + alpha?: number, + ratioMultiply?: number, + ): string; + updateColor(alpha: number): void; + onConfigChange(newConfig: Config): void; +}; - getMixedColor( - color: string, - key: string, - alpha?: number, - ratioMultiply?: number, - ): string; - updateColor(alpha: number): void; - }, - { - enabled: boolean; - ratio: number; - } ->({ +export default createPlugin({ 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]; @@ -68,18 +59,28 @@ 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, - navBarBackground: null, - ytmusicPlayerBar: null, - playerBarBackground: null, - sidebarBig: null, - sidebarSmall: null, - ytmusicAppLayout: null, + 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, - async start({ getConfig }) { + start() { this.playerPage = document.querySelector('#player-page'); this.navBarBackground = document.querySelector( '#nav-bar-background', @@ -94,14 +95,11 @@ export default createPlugin< '#mini-guide-background', ); this.ytmusicAppLayout = document.querySelector('#layout'); - - const config = await getConfig(); - document.documentElement.style.setProperty( - RATIO_KEY, - `${~~(config.ratio * 100)}%`, - ); }, - onPlayerApiReady(playerApi) { + async onPlayerApiReady(playerApi, { getConfig }) { + const config = await getConfig(); + (this as Renderer).onConfigChange(config); + const fastAverageColor = new FastAverageColor(); document.addEventListener('videodatachange', async (event) => { @@ -152,7 +150,7 @@ export default createPlugin< alpha = value; } } - this.updateColor(alpha ?? 1); + (this as Renderer).updateColor(alpha ?? 1); }); }, onConfigChange(config) { @@ -160,8 +158,15 @@ 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) { + getMixedColor( + color: string, + key: string, + alpha = 1, + ratioMultiply?: number, + ) { const keyColor = `rgba(var(${key}), ${alpha})`; let colorRatio = `var(${RATIO_KEY}, 50%)`; @@ -207,26 +212,39 @@ 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 = { + 'background': DARK_COLOR_KEY, + '--ytmusic-background': DARK_COLOR_KEY, + }; + + const ratioMap: Record = { + '--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, - this.getMixedColor(color, COLOR_KEY, alpha), + getMixedColor(color, key, alpha, ratio), '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', - ); }, }, }); diff --git a/src/plugins/album-color-theme/style.css b/src/plugins/album-color-theme/style.css index 8d82160e..ec36c097 100644 --- a/src/plugins/album-color-theme/style.css +++ b/src/plugins/album-color-theme/style.css @@ -81,3 +81,14 @@ 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; +} +