Merge branch 'master' into mpris+tuna-fix

plugins/blur-nav-bar/style.css

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

plugins/disable-autoplay/front.js

@@ -1,7 +1,14 @@
 module.exports = () => {
-	document.addEventListener('apiLoaded', () => {
-		document.querySelector('video').addEventListener('loadeddata', e => {
-			e.target.pause();
+	document.addEventListener('apiLoaded', apiEvent => {
+		apiEvent.detail.addEventListener('videodatachange', name => {
+			if (name === 'dataloaded') {
+				apiEvent.detail.pauseVideo();
+				document.querySelector('video').ontimeupdate = e => {
+					e.target.pause();
+				}
+			} else {
+				document.querySelector('video').ontimeupdate = null;
+		   }
 		})
 	}, { once: true, passive: true })
 };

plugins/downloader/menu.js

@@ -1,25 +1,23 @@
 const { existsSync, mkdirSync } = require("fs");
 const { join } = require("path");
-const { URL } = require("url");
 
-const { dialog } = require("electron");
+const { dialog, ipcMain } = require("electron");
 const is = require("electron-is");
 const ytpl = require("ytpl");
 const chokidar = require('chokidar');
 
 const { setOptions } = require("../../config/plugins");
-const registerCallback = require("../../providers/song-info");
 const { sendError } = require("./back");
 const { defaultMenuDownloadLabel, getFolder } = require("./utils");
 
 let downloadLabel = defaultMenuDownloadLabel;
-let metadataURL = undefined;
+let playingPlaylistId = undefined;
 let callbackIsRegistered = false;
 
 module.exports = (win, options) => {
 	if (!callbackIsRegistered) {
-		registerCallback((info) => {
-			metadataURL = info.url;
+		ipcMain.on("video-src-changed", async (_, data) => {
+			playingPlaylistId = JSON.parse(data)?.videoDetails?.playlistId;
 		});
 		callbackIsRegistered = true;
 	}
@@ -28,17 +26,17 @@ module.exports = (win, options) => {
 		{
 			label: downloadLabel,
 			click: async () => {
-				const currentURL = metadataURL || win.webContents.getURL();
-				const playlistID = new URL(currentURL).searchParams.get("list");
-				if (!playlistID) {
+				const currentPagePlaylistId = new URL(win.webContents.getURL()).searchParams.get("list");
+				const playlistId = currentPagePlaylistId || playingPlaylistId;
+				if (!playlistId) {
 					sendError(win, new Error("No playlist ID found"));
 					return;
 				}
 
-				console.log(`trying to get playlist ID: '${playlistID}'`);
+				console.log(`trying to get playlist ID: '${playlistId}'`);
 				let playlist;
 				try {
-					playlist = await ytpl(playlistID, {
+					playlist = await ytpl(playlistId, {
 						limit: options.playlistMaxItems || Infinity,
 					});
 				} catch (e) {

plugins/exponential-volume/front.js

@@ -0,0 +1,47 @@
+// "Youtube Music fix volume ratio 0.4" by Marco Pfeiffer
+// https://greasyfork.org/en/scripts/397686-youtube-music-fix-volume-ratio/
+
+const exponentialVolume = () => {
+	// manipulation exponent, higher value = lower volume
+	// 3 is the value used by pulseaudio, which Barteks2x figured out this gist here: https://gist.github.com/Barteks2x/a4e189a36a10c159bb1644ffca21c02a
+	// 0.05 (or 5%) is the lowest you can select in the UI which with an exponent of 3 becomes 0.000125 or 0.0125%
+	const EXPONENT = 3;
+
+	const storedOriginalVolumes = new WeakMap();
+	const { get, set } = Object.getOwnPropertyDescriptor(
+		HTMLMediaElement.prototype,
+		"volume"
+	);
+	Object.defineProperty(HTMLMediaElement.prototype, "volume", {
+		get() {
+			const lowVolume = get.call(this);
+			const calculatedOriginalVolume = lowVolume ** (1 / EXPONENT);
+
+			// The calculated value has some accuracy issues which can lead to problems for implementations that expect exact values.
+			// To avoid this, I'll store the unmodified volume to return it when read here.
+			// This mostly solves the issue, but the initial read has no stored value and the volume can also change though external influences.
+			// To avoid ill effects, I check if the stored volume is somewhere in the same range as the calculated volume.
+			const storedOriginalVolume = storedOriginalVolumes.get(this);
+			const storedDeviation = Math.abs(
+				storedOriginalVolume - calculatedOriginalVolume
+			);
+
+			const originalVolume =
+				storedDeviation < 0.01
+					? storedOriginalVolume
+					: calculatedOriginalVolume;
+			return originalVolume;
+		},
+		set(originalVolume) {
+			const lowVolume = originalVolume ** EXPONENT;
+			storedOriginalVolumes.set(this, originalVolume);
+			set.call(this, lowVolume);
+		},
+	});
+};
+
+module.exports = () =>
+	document.addEventListener("apiLoaded", exponentialVolume, {
+		once: true,
+		passive: true,
+	});

plugins/in-app-menu/style.css

@@ -4,10 +4,13 @@
 	font-size: 14px !important;
 }
 
-/* fixes nav-bar-background opacity bug and allows clicking scrollbar through it */
+/* fixes nav-bar-background opacity bug, reposition it, and allows clicking scrollbar through it */
 #nav-bar-background {
 	opacity: 1 !important;
-	pointer-events: none;
+	pointer-events: none !important;
+	position: sticky !important;
+	top: 0 !important;
+	height: 75px !important;
 }
 
 /* remove window dragging for nav bar (conflict with titlebar drag) */
@@ -17,9 +20,10 @@ ytmusic-pivot-bar-item-renderer {
 	-webkit-app-region: unset !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;
+/* 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;
 }
 
 /* fix weird positioning in search screen*/
@@ -28,8 +32,7 @@ ytmusic-header-renderer.ytmusic-search-page {
 }
 
 /* Move navBar downwards */
-ytmusic-nav-bar[slot="nav-bar"],
-#nav-bar-background {
+ytmusic-nav-bar[slot="nav-bar"] {
 	top: 17px !important;
 }
 

plugins/playback-speed/front.js

@@ -49,7 +49,7 @@ const observePopupContainer = () => {
 
 const observeVideo = () => {
 	$('video').addEventListener('ratechange', forcePlaybackRate)
-	$('video').addEventListener('loadeddata', forcePlaybackRate)
+	$('video').addEventListener('srcChanged', forcePlaybackRate)
 }
 
 const setupWheelListener = () => {

plugins/sponsorblock/back.js

@@ -1,8 +1,8 @@
 const fetch = require("node-fetch");
 const is = require("electron-is");
+const { ipcMain } = require("electron");
 
 const defaultConfig = require("../../config/defaults");
-const registerCallback = require("../../providers/song-info");
 const { sortSegments } = require("./segments");
 
 let videoID;
@@ -13,15 +13,10 @@ module.exports = (win, options) => {
 		...options,
 	};
 
-	registerCallback(async (info) => {
-		const newURL = info.url || win.webContents.getURL();
-		const newVideoID = new URL(newURL).searchParams.get("v");
-
-		if (videoID !== newVideoID) {
-			videoID = newVideoID;
-			const segments = await fetchSegments(apiURL, categories);
-			win.webContents.send("sponsorblock-skip", segments);
-		}
+	ipcMain.on("video-src-changed", async (_, data) => {
+		videoID = JSON.parse(data)?.videoDetails?.videoId;
+		const segments = await fetchSegments(apiURL, categories);
+		win.webContents.send("sponsorblock-skip", segments);
 	});
 };
 

plugins/video-toggle/front.js

@@ -6,6 +6,8 @@ function $(selector) { return document.querySelector(selector); }
 
 let options;
 
+let api;
+
 const switchButtonDiv = ElementFromFile(
     templatePath(__dirname, "button_template.html")
 );
@@ -17,7 +19,9 @@ module.exports = (_options) => {
     document.addEventListener('apiLoaded', setup, { once: true, passive: true });
 }
 
-function setup() {
+function setup(e) {
+    api = e.detail;
+
     $('ytmusic-player-page').prepend(switchButtonDiv);
 
     $('#song-image.ytmusic-player').style.display = "block"
@@ -35,13 +39,15 @@ function setup() {
         setOptions("video-toggle", options);
     })
 
-    $('video').addEventListener('loadedmetadata', videoStarted);
+    $('video').addEventListener('srcChanged', videoStarted);
+
+    observeThumbnail();
 }
 
 function changeDisplay(showVideo) {
-    if (!showVideo && $('ytmusic-player').getAttribute('playback-mode') !== "ATV_PREFERRED") {
+    if (!showVideo) {
         $('video').style.top = "0";
-        $('ytmusic-player').style.margin = "auto 21.5px";
+        $('ytmusic-player').style.margin = "auto 0px";
         $('ytmusic-player').setAttribute('playback-mode', "ATV_PREFERRED");
     }
 
@@ -51,11 +57,8 @@ function changeDisplay(showVideo) {
 }
 
 function videoStarted() {
-    if (videoExist()) {
-        const thumbnails = $('#movie_player').getPlayerResponse()?.videoDetails?.thumbnail?.thumbnails;
-        if (thumbnails && thumbnails.length > 0) {
-            $('#song-image img').src = thumbnails[thumbnails.length-1].url;
-        }
+    if (api.getPlayerResponse().videoDetails.musicVideoType === 'MUSIC_VIDEO_TYPE_OMV') { // or `$('#player').videoMode_`
+        forceThumbnail($('#song-image img'));
         switchButtonDiv.style.display = "initial";
         if (!options.hideVideo && $('#song-video.ytmusic-player').style.display === "none") {
             changeDisplay(true);
@@ -66,10 +69,6 @@ function videoStarted() {
     }
 }
 
-function videoExist() {
-    return $('#player').videoMode_;
-}
-
 // on load, after a delay, the page overrides the playback-mode to 'OMV_PREFERRED' which causes weird aspect ratio in the image container
 // this function fix the problem by overriding that override :)
 function forcePlaybackMode() {
@@ -83,3 +82,22 @@ function forcePlaybackMode() {
     });
     playbackModeObserver.observe($('ytmusic-player'), { attributeFilter: ["playback-mode"] })
 }
+
+function observeThumbnail() {
+    const playbackModeObserver = new MutationObserver(mutations => {
+        if (!$('#player').videoMode_) return;
+
+        mutations.forEach(mutation => {
+            if (!mutation.target.src.startsWith('data:')) return;
+            forceThumbnail(mutation.target)
+        });
+    });
+    playbackModeObserver.observe($('#song-image img'), { attributeFilter: ["src"] })
+}
+
+function forceThumbnail(img) {
+    const thumbnails = $('#movie_player').getPlayerResponse()?.videoDetails?.thumbnail?.thumbnails;
+    if (thumbnails && thumbnails.length > 0) {
+        img.src = thumbnails[thumbnails.length - 1].url.split("?")[0];
+    }
+}