Merge pull request #102 from varun7654/misc-patches

Fix issues with the album art in background not changing
boidushya · Nov 27, 2024 · bd87708 · bd87708
2 parents e6d66fa + 4c30f76
commit bd87708
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 12 deletions.
diff --git a/src/core/constants.js b/src/core/constants.js
@@ -108,6 +108,7 @@ BetterLyrics.Constants = {
   LYRICS_TAB_NOT_DISABLED_LOG: "[BetterLyrics] (Safe to ignore) Lyrics tab is not disabled, unable to enable it",
   SONG_SWITCHED_LOG: "[BetterLyrics] Song has been switched",
   ALBUM_ART_ADDED_LOG: "[BetterLyrics] Album art added to the layout",
+  ALBUM_ART_ADDED_FROM_MUTATION_LOG: "[BetterLyrics] Album art added to the layout from mutation event",
   ALBUM_ART_REMOVED_LOG: "[BetterLyrics] Album art removed from the layout",
   LOADING_WITHOUT_SONG_META: "[BetterLyrics] Trying to load without Song/Artist info",
   SKIPPING_LOAD_WITH_META: "[BetterLyrics] Skipping Reload From Metadata Available: Already Loaded",

diff --git a/src/core/utils.js b/src/core/utils.js
@@ -26,11 +26,6 @@ BetterLyrics.Utils = {
   unEntity: function (str) {
     return str.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">");
   },
-
-  generateAlbumArt: function (videoId) {
-    return `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
-  },
-
   applyCustomCSS: function (css) {
     let styleTag = document.getElementById("blyrics-custom-style");
     if (styleTag) {

diff --git a/src/modules/ui/dom.js b/src/modules/ui/dom.js
@@ -207,16 +207,42 @@ BetterLyrics.DOM = {
       BetterLyrics.Utils.log(err);
     }
   },
-  addAlbumArtToLayout: function (videoId) {
-    let albumArt = document.querySelector(BetterLyrics.Constants.SONG_IMAGE_SELECTOR).src;
-    if (albumArt === BetterLyrics.Constants.EMPTY_THUMBNAIL_SRC) {
-      albumArt = BetterLyrics.Utils.generateAlbumArt(videoId);
+  /** @type {MutationObserver | null} */
+  backgroundChangeObserver: null,
+  addAlbumArtToLayout: function () {
+    if (BetterLyrics.DOM.backgroundChangeObserver) {
+      BetterLyrics.DOM.backgroundChangeObserver.disconnect();
+    }
+
+    let albumArt = document.querySelector(BetterLyrics.Constants.SONG_IMAGE_SELECTOR);
+    const observer = new MutationObserver(() => {
+      BetterLyrics.DOM.injectAlbumArt(albumArt.src);
+      BetterLyrics.Utils.log(BetterLyrics.Constants.ALBUM_ART_ADDED_FROM_MUTATION_LOG);
+    });
+
+    observer.observe(albumArt, { attributes: true });
+    BetterLyrics.DOM.backgroundChangeObserver = observer;
+
+    if (!albumArt.src !== BetterLyrics.Constants.EMPTY_THUMBNAIL_SRC) {
+      BetterLyrics.DOM.injectAlbumArt(albumArt.src);
+      BetterLyrics.Utils.log(BetterLyrics.Constants.ALBUM_ART_ADDED_LOG);
     }
-    document.getElementById("layout").style = `--blyrics-background-img: url('${albumArt}')`;
-    BetterLyrics.Utils.log(BetterLyrics.Constants.ALBUM_ART_ADDED_LOG);
+  },
+
+  injectAlbumArt: function (src) {
+    let img = new Image();
+    img.src = src;
+
+    img.onload = () => {
+      document.getElementById("layout").style = `--blyrics-background-img: url('${src}')`;
+    };
   },
 
   removeAlbumArtFromLayout: function () {
+    if (BetterLyrics.DOM.backgroundChangeObserver) {
+      BetterLyrics.DOM.backgroundChangeObserver.disconnect();
+      BetterLyrics.DOM.backgroundChangeObserver = null;
+    }
     const layout = document.getElementById("layout");
     if (layout) {
       layout.style.removeProperty("--blyrics-background-img");

diff --git a/src/modules/ui/observer.js b/src/modules/ui/observer.js
@@ -90,7 +90,7 @@ BetterLyrics.Observer = {
 
       if (BetterLyrics.App.queueAlbumArtInjection === true && BetterLyrics.App.shouldInjectAlbumArt === true) {
         BetterLyrics.App.queueAlbumArtInjection = false;
-        BetterLyrics.DOM.addAlbumArtToLayout(detail.videoId);
+        BetterLyrics.DOM.addAlbumArtToLayout();
       }
 
       if (BetterLyrics.App.queueLyricInjection) {