Merge pull request #2 from meowarex/dev

Fix BG Cover Art being Stuck on First Render

plugins/clean-view-luna/src/index.ts

@@ -60,6 +60,7 @@ async function HttpGet(url: string): Promise<string | null> {
 
 var isCleanView = false;
 var appliedStyle: HTMLStyleElement | null = null;
+var currentTrackSrc: string | null = null; // Track current album art to prevent unnecessary updates
 
 const toggleCleanButton = function(callback: () => void, icon: string, customIndex: number = 2): void {
     setTimeout(() => {
@@ -89,21 +90,48 @@ const toggleCleanButton = function(callback: () => void, icon: string, customInd
 };
 
 function observeTrackTitle(): void {
+    // Observe track title changes
     const trackTitleElement = document.querySelector('[class^="_trackTitleContainer"]');
     if (trackTitleElement) {
-        const observer = new MutationObserver(() => {
+        const titleObserver = new MutationObserver(() => {
             setTimeout(() => {
                 onTrackChanged();
             }, 300);
         });
         
-        observer.observe(trackTitleElement, {
+        titleObserver.observe(trackTitleElement, {
             childList: true,
             subtree: true
         });
         
-        unloads.add(() => observer.disconnect());
+        unloads.add(() => titleObserver.disconnect());
     }
+
+    // Also observe the album image container for changes
+    const albumImageContainer = document.querySelector('figure[class*="_albumImage"]');
+    if (albumImageContainer) {
+        const imageObserver = new MutationObserver(() => {
+            setTimeout(() => {
+                onTrackChanged();
+            }, 100); // Slightly longer delay for image loading
+        });
+        
+        imageObserver.observe(albumImageContainer, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['src', 'poster']
+        });
+        
+        unloads.add(() => imageObserver.disconnect());
+    }
+
+    // Set up a periodic check as fallback
+    const periodicCheck = setInterval(() => {
+        onTrackChanged();
+    }, 100); // Check every 3 seconds
+    
+    unloads.add(() => clearInterval(periodicCheck));
 }
 
 const onTrackChanged = function (method: number = 0): void {
@@ -132,14 +160,19 @@ const onTrackChanged = function (method: number = 0): void {
             }
         } else {
             cleanUpDynamicArt();
-            console.log("Couldn't get album art");
+            trace.msg.log("Couldn't get album art");
             return;
         }
     }
 
+    // Only update if the image source has actually changed
+    if (albumImageSrc && albumImageSrc !== currentTrackSrc) {
+        currentTrackSrc = albumImageSrc;
+        trace.msg.log(`Track changed, updating background: ${albumImageSrc}`);
+        
         // Setting background to the *="nowPlayingContainer" element
         const nowPlayingContainerElement = document.querySelector('[class*="_nowPlayingContainer"]') as HTMLElement;
-    if (nowPlayingContainerElement && albumImageSrc) {
+        if (nowPlayingContainerElement) {
             // Remove existing corner images if they exist
             const existingImages = nowPlayingContainerElement.querySelectorAll('.corner-image');
             existingImages.forEach(img => img.remove());
@@ -189,6 +222,7 @@ const onTrackChanged = function (method: number = 0): void {
                 document.head.appendChild(styleSheet);
             }
         }
+    }
 };
 
 const cleanUpDynamicArt = function (): void {
@@ -196,6 +230,7 @@ const cleanUpDynamicArt = function (): void {
     Array.from(cornerImages).forEach((element) => {
         element.remove();
     });
+    currentTrackSrc = null; // Reset current track source
 };
 
 // STYLES FOR THE LYRICS - Added Top-level async since Luna plugins are modules <3