Merge remote-tracking branch 'upstream/master' into fix-playback-speed-plugin

plugins/audio-compressor/front.js

@@ -1,14 +1,6 @@
 const applyCompressor = () => {
-	const videoElement = document.querySelector("video");
-
-	// If video element is not loaded yet try again
-	if(videoElement === null) {
-		setTimeout(applyCompressor, 500);
-		return;
-	}
-
 	const audioContext = new AudioContext();
-	
+
 	let compressor = audioContext.createDynamicsCompressor();
 	compressor.threshold.value = -50;
 	compressor.ratio.value = 12;
@@ -16,10 +8,12 @@ const applyCompressor = () => {
 	compressor.attack.value = 0;
 	compressor.release.value = 0.25;
 
-	const source = audioContext.createMediaElementSource(videoElement);
+	const source = audioContext.createMediaElementSource(document.querySelector("video"));
 
 	source.connect(compressor);
 	compressor.connect(audioContext.destination);
 };
 
-module.exports = applyCompressor;
+module.exports = () => document.addEventListener('apiLoaded', () => {
+	applyCompressor();
+})

plugins/blur-nav-bar/style.css

@@ -1,4 +1,4 @@
-#nav-bar-background {
+#nav-bar-background, #header.ytmusic-item-section-renderer {
     background: rgba(0, 0, 0, 0.3) !important;
     backdrop-filter: blur(18px) !important;
 }

plugins/disable-autoplay/front.js

@@ -1,10 +1,7 @@
-const { ontimeupdate } = require("../../providers/video-element");
-
 module.exports = () => {
-	ontimeupdate((videoElement) => {
-		if (videoElement.currentTime === 0 && videoElement.duration !== NaN) {
-			// auto-confirm-when-paused plugin can interfere here if not disabled!
-			videoElement.pause();
-		}
-	});
+	document.addEventListener('apiLoaded', () => {
+		document.querySelector('video').addEventListener('loadeddata', e => {
+			e.target.pause();
+		})
+	}, { once: true, passive: true })
 };

plugins/in-app-menu/front.js

@@ -1,6 +1,7 @@
 const { remote, ipcRenderer } = require("electron");
 
 const customTitlebar = require("custom-electron-titlebar");
+function $(selector) { return document.querySelector(selector); }
 
 module.exports = () => {
 	const bar = new customTitlebar.Titlebar({
@@ -13,4 +14,19 @@ module.exports = () => {
 	ipcRenderer.on("updateMenu", function (_event, showMenu) {
 		bar.updateMenu(showMenu ? remote.Menu.getApplicationMenu() : null);
 	});
+
+	// Increases the right margin of Navbar background when the scrollbar is visible to avoid blocking it (z-index doesn't affect it)
+	document.addEventListener('apiLoaded', () => {
+		setNavbarMargin()
+		const playPageObserver = new MutationObserver(() => {
+			setNavbarMargin();
+		});
+		playPageObserver.observe($('ytmusic-app-layout'), { attributeFilter: ['player-page-open_', 'playerPageOpen_'] })
+	})
 };
+
+function setNavbarMargin() {
+	$('ytmusic-app-layout').playerPageOpen_ ?
+		$('#nav-bar-background').style.right = '0px' :
+		$('#nav-bar-background').style.right = '12px';
+}

plugins/in-app-menu/style.css

@@ -4,9 +4,10 @@
 	font-size: 14px !important;
 }
 
-/* fixes scrollbar positioning relative to nav bar  */
-#nav-bar-background.ytmusic-app-layout {
-	right: 15px !important;
+/* fixes nav-bar-background opacity bug and allows clicking scrollbar through it */
+#nav-bar-background {
+	opacity: 1 !important;
+	pointer-events: none;
 }
 
 /* remove window dragging for nav bar (conflict with titlebar drag) */
@@ -16,14 +17,9 @@ ytmusic-pivot-bar-item-renderer {
 	-webkit-app-region: unset !important;
 }
 
-/* navbar background black */
-.center-content.ytmusic-nav-bar {
-	background: #030303;
-}
-
-/* move up item selectrion renderer by 15 px */
-ytmusic-item-section-renderer[has-item-section-tabbed-header-renderer_] #header.ytmusic-item-section-renderer {
-	top: 75 !important;
+/* move up item selection renderer by 13 px */
+ytmusic-item-section-renderer.stuck #header.ytmusic-item-section-renderer {
+    top: calc(var(--ytmusic-nav-bar-height) - 13px) !important;
 }
 
 /* fix weird positioning in search screen*/
@@ -32,8 +28,8 @@ ytmusic-header-renderer.ytmusic-search-page {
 }
 
 /* Move navBar downwards */
-ytmusic-app-layout > [slot="nav-bar"],
-#nav-bar-background.ytmusic-app-layout {
+ytmusic-nav-bar[slot="nav-bar"],
+#nav-bar-background {
 	top: 17px !important;
 }
 

plugins/lyrics-genius/front.js

@@ -1,4 +1,5 @@
 const { ipcRenderer } = require("electron");
+const is = require("electron-is");
 
 module.exports = () => {
 	ipcRenderer.on("update-song-info", (_, extractedSongInfo) => {
@@ -15,6 +16,8 @@ module.exports = () => {
 		);
 		if (!html) {
 			return;
+		} else if (is.dev()) {
+			console.log("Fetched lyrics from Genius");
 		}
 
 		const wrapper = document.createElement("div");
@@ -41,7 +44,6 @@ module.exports = () => {
 
 		lyricsTab.onclick = () => {
 			const tabContainer = document.querySelector("ytmusic-tab-renderer");
-			console.log("tabContainer", tabContainer);
 			const observer = new MutationObserver((_, observer) => {
 				const lyricsContainer = document.querySelector(
 					'[page-type="MUSIC_PAGE_TYPE_TRACK_LYRICS"] > ytmusic-message-renderer'

plugins/precise-volume/front.js

@@ -9,7 +9,7 @@ module.exports = (options) => {
 	document.addEventListener('apiLoaded', e => {
 		api = e.detail;
 		firstRun(options);
-	})
+	}, { once: true, passive: true })
 };
 
 /** Restore saved volume and setup tooltip */

plugins/quality-changer/front.js

@@ -9,7 +9,7 @@ const qualitySettingsButton = ElementFromFile(
 
 
 module.exports = () => {
-    document.addEventListener('apiLoaded', setup);
+    document.addEventListener('apiLoaded', setup, { once: true, passive: true });
 }
 
 function setup(event) {

plugins/sponsorblock/back.js

@@ -1,4 +1,5 @@
 const fetch = require("node-fetch");
+const is = require("electron-is");
 
 const defaultConfig = require("../../config/defaults");
 const registerCallback = require("../../providers/song-info");
@@ -24,6 +25,7 @@ module.exports = (win, options) => {
 	});
 };
 
+
 const fetchSegments = async (apiURL, categories) => {
 	const sponsorBlockURL = `${apiURL}/api/skipSegments?videoID=${videoID}&categories=${JSON.stringify(
 		categories
@@ -45,7 +47,10 @@ const fetchSegments = async (apiURL, categories) => {
 		);
 
 		return sortedSegments;
-	} catch {
+	} catch (e) {
+		if (is.dev()) {
+			console.log('error on sponsorblock request:', e);
+		}
 		return [];
 	}
 };

plugins/sponsorblock/front.js

@@ -2,8 +2,6 @@ const { ipcRenderer } = require("electron");
 
 const is = require("electron-is");
 
-const { ontimeupdate } = require("../../providers/video-element");
-
 let currentSegments = [];
 
 module.exports = () => {
@@ -11,17 +9,19 @@ module.exports = () => {
 		currentSegments = segments;
 	});
 
-	ontimeupdate((videoElement) => {
-		currentSegments.forEach((segment) => {
-			if (
-				videoElement.currentTime >= segment[0] &&
-				videoElement.currentTime <= segment[1]
-			) {
-				videoElement.currentTime = segment[1];
-				if (is.dev()) {
-					console.log("SponsorBlock: skipping segment", segment);
+	document.addEventListener('apiLoaded', () => {
+		document.querySelector('video').addEventListener('timeupdate', e => {
+			currentSegments.forEach((segment) => {
+				if (
+					e.target.currentTime >= segment[0] &&
+					e.target.currentTime < segment[1]
+				) {
+					e.target.currentTime = segment[1];
+					if (is.dev()) {
+						console.log("SponsorBlock: skipping segment", segment);
+					}
 				}
-			}
-		});
-	});
+			});
+		})
+	}, { once: true, passive: true })
 };