From 65ce62adc1077a0fd36d2a7e49df567e43ca2595 Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Tue, 9 Nov 2021 13:29:41 +0200
Subject: [PATCH] use $('video') srcChanged event instead of
 loadeddata/metadata

---
 plugins/disable-autoplay/front.js |  2 +-
 plugins/playback-speed/front.js   |  2 +-
 plugins/video-toggle/front.js     |  6 +++---
 providers/song-info-front.js      | 24 ++++++++++++++++++------
 4 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/plugins/disable-autoplay/front.js b/plugins/disable-autoplay/front.js
index 532405de..615b978a 100644
--- a/plugins/disable-autoplay/front.js
+++ b/plugins/disable-autoplay/front.js
@@ -1,6 +1,6 @@
 module.exports = () => {
 	document.addEventListener('apiLoaded', () => {
-		document.querySelector('video').addEventListener('loadeddata', e => {
+		document.querySelector('video').addEventListener('srcChanged', e => {
 			e.target.pause();
 		})
 	}, { once: true, passive: true })
diff --git a/plugins/playback-speed/front.js b/plugins/playback-speed/front.js
index f1ea78e8..c5e43064 100644
--- a/plugins/playback-speed/front.js
+++ b/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 = () => {
diff --git a/plugins/video-toggle/front.js b/plugins/video-toggle/front.js
index 588642a0..2fff595f 100644
--- a/plugins/video-toggle/front.js
+++ b/plugins/video-toggle/front.js
@@ -35,13 +35,13 @@ function setup() {
         setOptions("video-toggle", options);
     })
 
-    $('video').addEventListener('loadedmetadata', videoStarted);
+    $('video').addEventListener('srcChanged', videoStarted);
 }
 
 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");
     }
 
diff --git a/providers/song-info-front.js b/providers/song-info-front.js
index 4ff6041d..bbbd981e 100644
--- a/providers/song-info-front.js
+++ b/providers/song-info-front.js
@@ -10,10 +10,22 @@ ipcRenderer.on("update-song-info", async (_, extractedSongInfo) => {
 });
 
 module.exports = () => {
-	document.addEventListener('apiLoaded', e => {
-		document.querySelector('video').addEventListener('loadedmetadata', () => {
-			const data = e.detail.getPlayerResponse();
-			ipcRenderer.send("song-info-request", JSON.stringify(data));
-		});
-	}, { once: true, passive: true })
+	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 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()));
+			}
+		})
+	});
+	playbackModeObserver.observe(video, { attributeFilter: ["src"] })
+}