smueller/youtube-music
1
0
Fork 0
mirror of https://github.com/th-ch/youtube-music.git synced 2026-01-11 18:41:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: remove sharp, fast-average-color-node deps

Browse Source
This commit is contained in:
JellyBrick
2023-10-05 19:01:54 +09:00
parent bcc7397f26
commit 09ce665df1
6 changed files with 49 additions and 445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
plugins/album-color-theme/back.ts
View File

@ -1,38 +1,9 @@
import { getAverageColor } from 'fast-average-color-node';
import { BrowserWindow } from 'electron';
import style from './style.css';
import { injectCSS } from '../utils';
import registerCallback from '../../providers/song-info';
export default (win: BrowserWindow) => {
injectCSS(win.webContents, style);
registerCallback((songInfo) => {
const songTitle = songInfo.title;
const songImage = songInfo.imageSrc;
if (songImage && songTitle) {
getAverageColor(songImage)
.then((color) => {
//div.style.backgroundColor = color.rgba;
//console.log('Average color', color);
if (color.hex === '#000000') {
color.rgb = 'rgb(238,238,238)';
color.isDark = false;
color.isLight = true;
} else if (color.hex === '#ffffff') {
color.rgb = 'rgb(0,0,0)';
color.isDark = true;
color.isLight = false;
}
win.webContents.send('album-color-changed', color);
})
.catch((e) => {
console.error(e);
});
}
});
};

54
plugins/album-color-theme/front.ts
View File

@ -1,9 +1,7 @@
import { ipcRenderer } from 'electron';
import { FastAverageColor } from 'fast-average-color';
import { ConfigType } from '../../config/dynamic';
import type { FastAverageColorResult } from 'fast-average-color';
function hexToHSL(H: string) {
// Convert hex to RGB first
let r = 0;
@ -73,7 +71,7 @@ export default (_: ConfigType<'album-color-theme'>) => {
const sidebarBig = document.querySelector<HTMLElement>('#guide-wrapper');
const sidebarSmall = document.querySelector<HTMLElement>('#mini-guide-background');
const ytmusicAppLayout = document.querySelector<HTMLElement>('#layout');
const observer = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === 'attributes') {
@ -93,23 +91,37 @@ export default (_: ConfigType<'album-color-theme'>) => {
observer.observe(playerPage, { attributes: true });
}
ipcRenderer.on('album-color-changed', (_, albumColor: FastAverageColorResult) => {
if (albumColor) {
[hue, saturation, lightness] = hexToHSL(albumColor.hex);
changeElementColor(playerPage, hue, saturation, lightness - 30);
changeElementColor(navBarBackground, hue, saturation, lightness - 15);
changeElementColor(ytmusicPlayerBar, hue, saturation, lightness - 15);
changeElementColor(playerBarBackground, hue, saturation, lightness - 15);
changeElementColor(sidebarBig, hue, saturation, lightness - 15);
if (ytmusicAppLayout?.hasAttribute('player-page-open')) {
changeElementColor(sidebarSmall, hue, saturation, lightness - 30);
document.addEventListener('apiLoaded', (apiEvent) => {
const fastAverageColor = new FastAverageColor();
apiEvent.detail.addEventListener('videodatachange', (name: string) => {
if (name === 'dataloaded') {
const playerResponse = apiEvent.detail.getPlayerResponse();
const thumbnail = playerResponse?.videoDetails?.thumbnail?.thumbnails?.at(0);
if (thumbnail) {
fastAverageColor.getColorAsync(thumbnail.url)
.then((albumColor) => {
if (albumColor) {
[hue, saturation, lightness] = hexToHSL(albumColor.hex);
changeElementColor(playerPage, hue, saturation, lightness - 30);
changeElementColor(navBarBackground, hue, saturation, lightness - 15);
changeElementColor(ytmusicPlayerBar, hue, saturation, lightness - 15);
changeElementColor(playerBarBackground, hue, saturation, lightness - 15);
changeElementColor(sidebarBig, hue, saturation, lightness - 15);
if (ytmusicAppLayout?.hasAttribute('player-page-open')) {
changeElementColor(sidebarSmall, hue, saturation, lightness - 30);
}
const ytRightClickList = document.querySelector<HTMLElement>('tp-yt-paper-listbox');
changeElementColor(ytRightClickList, hue, saturation, lightness - 15);
} else {
if (playerPage) {
playerPage.style.backgroundColor = '#000000';
}
}
})
.catch((e) => console.error(e));
}
}
const ytRightClickList = document.querySelector<HTMLElement>('tp-yt-paper-listbox');
changeElementColor(ytRightClickList, hue, saturation, lightness - 15);
} else {
if (playerPage) {
playerPage.style.backgroundColor = '#000000';
}
}
});
});
};