From 895136af0ad1f4423c7a9bfab11c4d8ac523fcf7 Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Tue, 9 Nov 2021 16:08:40 +0200
Subject: [PATCH] used youtube's videodatachange event

---
 plugins/disable-autoplay/front.js |  6 ++---
 plugins/video-toggle/front.js     | 38 +++++++++++++++++++++++--------
 providers/song-info-front.js      | 29 ++++++++++-------------
 3 files changed, 43 insertions(+), 30 deletions(-)

diff --git a/plugins/disable-autoplay/front.js b/plugins/disable-autoplay/front.js
index 615b978a..11e78ebc 100644
--- a/plugins/disable-autoplay/front.js
+++ b/plugins/disable-autoplay/front.js
@@ -1,7 +1,7 @@
 module.exports = () => {
-	document.addEventListener('apiLoaded', () => {
-		document.querySelector('video').addEventListener('srcChanged', e => {
-			e.target.pause();
+	document.addEventListener('apiLoaded', e => {
+		document.querySelector('video').addEventListener('srcChanged', () => {
+			e.detail.pauseVideo();
 		})
 	}, { once: true, passive: true })
 };
diff --git a/plugins/video-toggle/front.js b/plugins/video-toggle/front.js
index 2fff595f..5adb7ab0 100644
--- a/plugins/video-toggle/front.js
+++ b/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"
@@ -36,6 +40,8 @@ function setup() {
     })
 
     $('video').addEventListener('srcChanged', videoStarted);
+
+    observeThumbnail();
 }
 
 function changeDisplay(showVideo) {
@@ -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;
+    }
+}
diff --git a/providers/song-info-front.js b/providers/song-info-front.js
index bbbd981e..072d7a53 100644
--- a/providers/song-info-front.js
+++ b/providers/song-info-front.js
@@ -9,23 +9,18 @@ ipcRenderer.on("update-song-info", async (_, extractedSongInfo) => {
 	global.songInfo.image = await getImage(global.songInfo.imageSrc);
 });
 
-module.exports = () => {
-	document.addEventListener('apiLoaded', e => observeSrcChange(e.detail), { once: true, passive: true });
-};
-
 // used because 'loadeddata' or 'loadedmetadata' weren't firing on song start for some users (https://github.com/th-ch/youtube-music/issues/473)
-function observeSrcChange(api) {
-	const srcChangedEvent = new CustomEvent('srcChanged');
+const srcChangedEvent = new CustomEvent('srcChanged');
 
-	const video = document.querySelector('video');
-
-	const playbackModeObserver = new MutationObserver((mutations) => {
-		mutations.forEach(mutation => {
-			if (mutation.target.src) { // in first mutation src is usually an empty string (loading)
-				video.dispatchEvent(srcChangedEvent);
-				ipcRenderer.send("song-info-request", JSON.stringify(api.getPlayerResponse()));
-			}
+module.exports = () => {
+	document.addEventListener('apiLoaded', apiEvent => {
+		const video = document.querySelector('video');
+		// name = "dataloaded" and abit later "dataupdated"
+		apiEvent.detail.addEventListener('videodatachange', (name, dataEvent) => {
+			if (name !== 'dataloaded') return;
+			ipcRenderer.send("song-info-request", JSON.stringify(dataEvent.playerResponse));
+			video.dispatchEvent(srcChangedEvent);
 		})
-	});
-	playbackModeObserver.observe(video, { attributeFilter: ["src"] })
-}
+
+	}, { once: true, passive: true });
+};