From 9b2c1a320beedb92fc5e146277ab8aca26e19fa5 Mon Sep 17 00:00:00 2001
From: FrostyBiscuit <128132341+frostybiscuit@users.noreply.github.com>
Date: Sun, 17 Mar 2024 03:52:46 +0100
Subject: [PATCH] fix: Ambient Mode intialization improvement (#1857)

---
 src/plugins/ambient-mode/index.ts  | 25 ++++++-------------------
 src/plugins/ambient-mode/style.css |  5 +++--
 2 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/src/plugins/ambient-mode/index.ts b/src/plugins/ambient-mode/index.ts
index 296b3f47..a7ed6a07 100644
--- a/src/plugins/ambient-mode/index.ts
+++ b/src/plugins/ambient-mode/index.ts
@@ -179,19 +179,14 @@ export default createPlugin({
 
         const observer = new MutationObserver((mutations) => {
           mutations.forEach((mutation) => {
-            if (mutation.type === 'attributes') {
+            if (mutation.type === 'attributes' || mutation.type === 'childList') {
               applyImageAttribute();
             }
           });
         });
-        const resizeObserver = new ResizeObserver(() => {
-          applyImageAttribute();
-        });
 
         applyImageAttribute();
-        observer.observe(songImage, { attributes: true });
-        resizeObserver.observe(songImage);
-        window.addEventListener('resize', applyImageAttribute);
+        observer.observe(songImage, { attributes: true, subtree: true });
 
         /* injecting */
         songImage.prepend(blurImage);
@@ -199,7 +194,6 @@ export default createPlugin({
         /* cleanup */
         return () => {
           observer.disconnect();
-          resizeObserver.disconnect();
           window.removeEventListener('resize', applyImageAttribute);
 
           if (blurImage.isConnected) blurImage.remove();
@@ -284,14 +278,11 @@ export default createPlugin({
 
         const observer = new MutationObserver((mutations) => {
           mutations.forEach((mutation) => {
-            if (mutation.type === 'attributes') {
+            if (mutation.type === 'attributes' || mutation.type === 'childList') {
               applyVideoAttributes();
             }
           });
         });
-        const resizeObserver = new ResizeObserver(() => {
-          applyVideoAttributes();
-        });
 
         /* hooking */
         let canvasInterval: NodeJS.Timeout | null = null;
@@ -300,9 +291,7 @@ export default createPlugin({
           Math.max(1, Math.ceil(1000 / this.buffer)),
         );
         applyVideoAttributes();
-        observer.observe(songVideo, { attributes: true });
-        resizeObserver.observe(songVideo);
-        window.addEventListener('resize', applyVideoAttributes);
+        observer.observe(songVideo, { attributes: true, subtree: true });
 
         const onPause = () => {
           if (canvasInterval) clearInterval(canvasInterval);
@@ -329,8 +318,6 @@ export default createPlugin({
           songVideo.removeEventListener('play', onPlay);
 
           observer.disconnect();
-          resizeObserver.disconnect();
-          window.removeEventListener('resize', applyVideoAttributes);
 
           if (blurCanvas.isConnected) blurCanvas.remove();
         };
@@ -354,7 +341,7 @@ export default createPlugin({
 
       const observer = new MutationObserver((mutationsList) => {
         for (const mutation of mutationsList) {
-          if (mutation.type === 'attributes') {
+          if (mutation.type === 'attributes' || mutation.type === 'childList') {
             const isPageOpen =
               ytmusicAppLayout?.hasAttribute('player-page-open');
             if (isPageOpen) {
@@ -369,7 +356,7 @@ export default createPlugin({
       });
 
       if (playerPage) {
-        observer.observe(playerPage, { attributes: true });
+        observer.observe(playerPage, { attributes: true, subtree: true });
       }
     },
     onConfigChange(newConfig) {
diff --git a/src/plugins/ambient-mode/style.css b/src/plugins/ambient-mode/style.css
index e0f332b1..5c5bf1f2 100644
--- a/src/plugins/ambient-mode/style.css
+++ b/src/plugins/ambient-mode/style.css
@@ -25,11 +25,12 @@
   height: 100%;
 }
 
-#song-video .html5-video-container > video {
-  top: 0 !important;
+#song-video .html5-video-container {
+  height: 100%;
 }
 
 #player:not([video-mode]):not(.video-mode) {
+  width: 100%;
   margin: 0 auto !important;
   overflow: visible;
 }