Album Color Theme plugin

package.json

@@ -123,6 +123,7 @@
 		"electron-store": "^8.1.0",
 		"electron-unhandled": "^4.0.1",
 		"electron-updater": "^5.3.0",
+		"fast-average-color-node": "^2.6.0",
 		"filenamify": "^4.3.0",
 		"howler": "^2.2.3",
 		"html-to-text": "^9.0.5",

plugins/album-color-theme/back.js

@@ -0,0 +1,47 @@
+const path = require("path");
+const { injectCSS } = require("../utils");
+
+const getAverageColor = require('fast-average-color-node').getAverageColor;
+
+const registerCallback = require("../../providers/song-info");
+
+
+//var randomColor = "#A020F0";
+//module.exports.randomColor = randomColor;
+
+
+module.exports = (win) => {
+	injectCSS(win.webContents, path.join(__dirname, "style.css"));
+
+	registerCallback((songInfo) => {
+		if (!songInfo.title && !songInfo.artist) {
+			return;
+		}
+		songTitle = songInfo.title;
+		songImage = songInfo.imageSrc;
+
+		if(songTitle){
+			getAverageColor(songImage, {algorithm: "simple"})
+			.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;
+				  }
+				const albumColor = color;
+				console.log(albumColor.hex);
+				win.webContents.send("album-color-changed", albumColor);
+			})
+			.catch(e => {
+				console.log(e);
+			});
+		}
+	})
+
+};

plugins/album-color-theme/front.js

@@ -0,0 +1,125 @@
+//const { albumColor } = require('./back');
+const { ipcRenderer } = require("electron");
+//const { ElementFromFile, templatePath } = require("../utils");
+
+
+var songTitle;
+var songImage;
+
+function hexToHSL(H) {
+	// Convert hex to RGB first
+	let r = 0, g = 0, b = 0;
+	if (H.length == 4) {
+	  r = "0x" + H[1] + H[1];
+	  g = "0x" + H[2] + H[2];
+	  b = "0x" + H[3] + H[3];
+	} else if (H.length == 7) {
+	  r = "0x" + H[1] + H[2];
+	  g = "0x" + H[3] + H[4];
+	  b = "0x" + H[5] + H[6];
+	}
+	// Then to HSL
+	r /= 255;
+	g /= 255;
+	b /= 255;
+	let cmin = Math.min(r,g,b),
+		cmax = Math.max(r,g,b),
+		delta = cmax - cmin,
+		h = 0,
+		s = 0,
+		l = 0;
+
+	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];
+  }
+
+  //updated elements
+const playerPage = document.querySelector("#player-page");
+const navBarBackground = document.querySelector("#nav-bar-background");
+const ytmusicPlayerBar = document.querySelector("ytmusic-player-bar");
+//const ytmusicAvToggle1 = document.querySelector(".song-button.ytmusic-av-toggle");
+//const ytmusicAvToggle2 = document.querySelector(".video-button.ytmusic-av-toggle");
+//const ytmusicAvToggleBg = document.querySelector(".av-toggle.ytmusic-av-toggle");
+const playerBarBackground = document.querySelector("#player-bar-background");
+const songImageElement = document.querySelector("#song-image");
+const sidebarBig = document.querySelector("#guide-wrapper");
+const sidebarSmall = document.querySelector("#mini-guide-background");
+const ytmusicAppLayout = document.querySelector("#layout");
+
+var [hue, saturation, lightness] = [0,0,0];
+
+//songImageElement.style.filter = "drop-shadow(0 0 3rem black)";
+
+function changeElementColor(element, hue, saturation, lightness){
+	element.style.backgroundColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+	//element.style.color = albumColor.isDark ? '#ffffff' : '#000000';
+}
+
+function changeColor() {
+
+	const observer = new MutationObserver((mutationsList) => {
+		for (const mutation of mutationsList) {
+		  /*if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+			const visibility = window.getComputedStyle(playerPage).getPropertyValue('visibility');
+			if (visibility === 'visible') {
+				changeElementColor(sidebarSmall, hue, saturation, 30);
+			} else {
+				sidebarSmall.style.backgroundColor = 'black';
+			}
+		  }*/
+		  if (mutation.type === 'attributes') {
+			const isPageOpen = ytmusicAppLayout.hasAttribute('player-page-open');
+			if(isPageOpen) {
+				changeElementColor(sidebarSmall, hue, saturation, 30);
+				//sidebarSmall.style.backgroundColor = 'blue';
+			}
+			else{
+				sidebarSmall.style.backgroundColor = 'black';
+			}
+		  }
+		}
+	  });
+
+	  observer.observe(playerPage, { attributes: true });
+
+	ipcRenderer.on("album-color-changed", (_, albumColor) => {
+		if (albumColor) {
+			[hue, saturation, lightness] = hexToHSL(albumColor.hex);
+			changeElementColor(playerPage, hue, saturation, 30);
+			changeElementColor(navBarBackground, hue, saturation, 15);
+			changeElementColor(ytmusicPlayerBar, hue, saturation, 15);
+			changeElementColor(playerBarBackground, hue, saturation, 15);
+			changeElementColor(sidebarBig, hue, saturation, 15);
+			if (ytmusicAppLayout.hasAttribute('player-page-open'))
+				changeElementColor(sidebarSmall, hue, saturation, 30);
+			const ytRightClickList = document.querySelector("tp-yt-paper-listbox");
+			changeElementColor(ytRightClickList, hue, saturation, 15);
+
+		} else {
+			playerPage.style.backgroundColor = "#000000";
+		}
+	});
+}
+
+
+
+module.exports = changeColor;

plugins/album-color-theme/style.css

@@ -0,0 +1,43 @@
+/*:root {
+    --blue: #1e90ff;
+    --albumColor: #095e00;
+  }
+
+  .left-content.ytmusic-nav-bar{
+    filter: hue-rotate(-100deg) !important;
+}*/
+
+#progress-bar {
+    --paper-slider-active-color: white !important;
+    --paper-slider-knob-color: transparent !important;
+  }
+
+yt-page-navigation-progress{
+    --yt-page-navigation-container-color: #00000046 !important;
+    --yt-page-navigation-progress-color: white !important;
+  }
+
+  #player-page {
+    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;
+  }
+
+  #mini-guide-background {
+    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;
+  }
+
+  #img, #player, .song-media-controls.style-scope.ytmusic-player {
+    border-radius: 2% !important;
+  }
+
+  #items {
+    border-radius: 10px !important;
+  }

plugins/in-app-menu/front.js

@@ -33,6 +33,19 @@ module.exports = (options) => {
 		}
 	});
 
+	/*if (isEnabled("album-color-theme")) {
+		ipcRenderer.on("album-color-changed", (_, albumColor) => {
+			if (albumColor) {
+				//const [hue, saturation, lightness] = hexToHSL(albumColor.hex);
+				//changeElementColor(playerPage, hue, saturation, 30);
+				//changeElementColor(navBarBackground, hue, saturation, 30);
+				bar.updateBackground(Color.fromHex(albumColor.hex + "00"));
+			} else {
+				bar.updateBackground(Color.fromHex("#050505"));
+			}
+		});
+	}*/
+
 	if (isEnabled("picture-in-picture")) {
 		ipcRenderer.on("pip-toggle", (_, pipEnabled) => {
 			bar.refreshMenu();

plugins/in-app-menu/style.css

@@ -9,7 +9,7 @@
 	opacity: 1 !important;
 	pointer-events: none !important;
 	top: 30px !important;
-	height: 75px !important;
+	height: 60px !important;
 }
 
 /* fix top gap between nav-bar and browse-page */
@@ -34,7 +34,7 @@ ytmusic-pivot-bar-item-renderer {
 /* move up item selection renderers */
 ytmusic-item-section-renderer.stuck #header.ytmusic-item-section-renderer,
 ytmusic-tabs.stuck {
-	top: calc(var(--ytmusic-nav-bar-height) - 15px) !important;
+	top: calc(var(--ytmusic-nav-bar-height) - 30px) !important;
 }
 
 /* fix weird positioning in search screen*/
@@ -56,14 +56,14 @@ yt-page-navigation-progress,
 /* custom scrollbar */
 ::-webkit-scrollbar {
 	width: 12px;
-	background-color: #030303;
+	background-color: #03030300;
 	border-radius: 100px;
 	-moz-border-radius: 100px;
 	-webkit-border-radius: 100px;
 }
 /* hover effect for both scrollbar area, and scrollbar 'thumb' */
 ::-webkit-scrollbar:hover {
-	background-color: rgba(15, 15, 15, 0.699);
+	background-color: rgba(15, 15, 15, 0);
 }
 
 /* the scrollbar 'thumb' ...that marque oval shape in a scrollbar */
@@ -109,3 +109,7 @@ ytmusic-nav-bar yt-icon,
 tp-yt-iron-dropdown {
     -webkit-app-region: no-drag;
 }
+
+ytmusic-search-box.style-scope.ytmusic-nav-bar {
+	margin-top: 0px !important;
+}