Fix PiP side-line colors and popup-close/reopen lyric update behavior

Agent-Logs-Url: https://github.com/Myst1cX/spotify-web-lyrics-plus/sessions/6434c9e5-c521-4dff-8fa6-e16a7c487fe9

Co-authored-by: Myst1cX <97919309+Myst1cX@users.noreply.github.com>

Author: Copilot

pip-gui-stable.user.js

@@ -358,6 +358,7 @@
   let pipIgnoreMediaControlEvent = false;
   let pipLastFrameAt = 0;
   let pipWindowResizeFallbackActive = false;
+  let pipNeedsPopupForLyrics = false;
 
   // ------------------------
   // Constants & Configuration
@@ -1647,7 +1648,7 @@
           if (activeIndex > 0) {
             blocks.push({
               texts: prevTexts.length ? prevTexts : (fallbackPrev ? [fallbackPrev] : []),
-              color: 'rgba(255, 255, 255, 0.45)',
+              color: 'white',
               primaryFont: `${contextFontSize}px sans-serif`,
               primaryLineHeight: contextLineHeight,
               kind: 'context'
@@ -1663,7 +1664,7 @@
           if (activeIndex < currentSyncedLyrics.length - 1) {
             blocks.push({
               texts: nextTexts.length ? nextTexts : (fallbackNext ? [fallbackNext] : []),
-              color: 'rgba(255, 255, 255, 0.45)',
+              color: 'white',
               primaryFont: `${contextFontSize}px sans-serif`,
               primaryLineHeight: contextLineHeight,
               kind: 'context'
@@ -1710,6 +1711,13 @@
         pipCtx.font = `${Math.round(activeFontSize * 0.6)}px sans-serif`;
         pipCtx.fillStyle = 'rgba(255, 255, 255, 0.6)';
         pipCtx.fillText('Open popup for full lyrics', centerX, centerY + Math.round(activeFontSize * 0.6), textMaxWidth);
+      } else if (pipNeedsPopupForLyrics) {
+        pipCtx.font = `bold ${activeFontSize}px sans-serif`;
+        pipCtx.fillStyle = 'white';
+        pipCtx.fillText('Open Lyrics+ popup', centerX, centerY - Math.round(activeFontSize * 0.8), textMaxWidth);
+        pipCtx.font = `${Math.round(activeFontSize * 0.6)}px sans-serif`;
+        pipCtx.fillStyle = 'rgba(255, 255, 255, 0.6)';
+        pipCtx.fillText('to resume lyric updates', centerX, centerY + Math.round(activeFontSize * 0.6), textMaxWidth);
       } else {
         pipCtx.font = `bold ${activeFontSize}px sans-serif`;
         pipCtx.fillStyle = 'rgba(255, 255, 255, 0.7)';
@@ -4336,6 +4344,7 @@ const Providers = {
 
   function removePopup() {
     DEBUG.ui.popupRemoved();
+    const wasPipActive = isPipActive || isPagePipActive;
 
     if (isPagePipActive && pipVideo) {
       closePagePipFallback();
@@ -4353,6 +4362,11 @@ const Providers = {
       DEBUG.debug('Cleanup', 'pollingInterval cleared');
     }
 
+    if (wasPipActive) {
+      currentLyricsContainer = null;
+      pipNeedsPopupForLyrics = true;
+    }
+
     if (pipVideo && !isPipActive && !isPagePipActive) {
       pipVideo.removeEventListener('play', handlePipVideoPlay);
       pipVideo.removeEventListener('pause', handlePipVideoPause);
@@ -4491,9 +4505,10 @@ const Providers = {
     popup._playPauseObserver = ResourceManager.registerObserver(observer, 'Play/pause button state');
   }
 
-  function createPopup() {
-    DEBUG.ui.popupCreated();
-    removePopup();
+  function createPopup() {
+    DEBUG.ui.popupCreated();
+    removePopup();
+    pipNeedsPopupForLyrics = false;
 
     // Clear current provider so no provider is highlighted while searching for lyrics
     Providers.current = null;
@@ -7216,10 +7231,11 @@ const Providers = {
     console.log(`   📦 Source: ${providerDisplay} (previously fetched)`);
     DEBUG.log('Cache', `Loading lyrics from cache for: ${info.title} - ${info.artist}`);
 
-    currentLyricsContainer = lyricsContainer;
-    currentSyncedLyrics = cachedData.synced;
-    currentUnsyncedLyrics = cachedData.unsynced;
-    currentLyricsMetadata = cachedData.metadata || null; // Restore metadata from cache
+    currentLyricsContainer = lyricsContainer;
+    currentSyncedLyrics = cachedData.synced;
+    currentUnsyncedLyrics = cachedData.unsynced;
+    pipNeedsPopupForLyrics = false;
+    currentLyricsMetadata = cachedData.metadata || null; // Restore metadata from cache
 
     // Reset translation state
     translationPresent = false;
@@ -7344,13 +7360,14 @@ const Providers = {
     return true;
   }
 
-  async function updateLyricsContent(popup, info, cachedResult = null) {
+  async function updateLyricsContent(popup, info, cachedResult = null) {
     if (!info) return;
     const lyricsContainer = popup.querySelector("#lyrics-plus-content");
     if (!lyricsContainer) return;
-    currentLyricsContainer = lyricsContainer;
-    currentSyncedLyrics = null;
-    currentUnsyncedLyrics = null;
+    currentLyricsContainer = lyricsContainer;
+    pipNeedsPopupForLyrics = false;
+    currentSyncedLyrics = null;
+    currentUnsyncedLyrics = null;
     // Reset translation state when loading new lyrics
     translationPresent = false;
     transliterationPresent = false;
@@ -7794,10 +7811,11 @@ const Providers = {
     Providers.current = null;
     if (popup._lyricsTabs) updateTabs(popup._lyricsTabs, true);
 
-    const lyricsContainer = popup.querySelector("#lyrics-plus-content");
-    if (lyricsContainer) lyricsContainer.textContent = "No lyrics found from any provider";
-    currentSyncedLyrics = null;
-    currentLyricsContainer = lyricsContainer;
+    const lyricsContainer = popup.querySelector("#lyrics-plus-content");
+    if (lyricsContainer) lyricsContainer.textContent = "No lyrics found from any provider";
+    currentSyncedLyrics = null;
+    currentLyricsContainer = lyricsContainer;
+    pipNeedsPopupForLyrics = false;
     // Reset translation state when no lyrics are found
     translationPresent = false;
     transliterationPresent = false;
@@ -7807,11 +7825,24 @@ const Providers = {
     DEBUG.warn('Autodetect', `No lyrics found after checking all providers (${totalDuration.toFixed(2)}ms)`);
   }
 
-  function startPollingForTrackChange(popup) {
-    if (pollingInterval) clearInterval(pollingInterval);
-    pollingInterval = setInterval(() => {
-      const info = getCurrentTrackInfo();
-      if (!info) return;
+  function startPollingForTrackChange(popup) {
+    if (pollingInterval) clearInterval(pollingInterval);
+    pollingInterval = setInterval(() => {
+      const livePopup = document.getElementById("lyrics-plus-popup");
+      const activePopup = (popup && popup.isConnected) ? popup : livePopup;
+      if (isPipActive && !activePopup) {
+        currentLyricsContainer = null;
+        pipNeedsPopupForLyrics = true;
+      } else if (activePopup) {
+        const activeContainer = activePopup.querySelector("#lyrics-plus-content");
+        if (activeContainer) {
+          currentLyricsContainer = activeContainer;
+          pipNeedsPopupForLyrics = false;
+        }
+      }
+
+      const info = getCurrentTrackInfo();
+      if (!info) return;
 
       // Get current playback position
       const posEl = document.querySelector('[data-testid="playback-position"]');
@@ -7843,14 +7874,16 @@ const Providers = {
       }
 
       // Track changed to a different song
-      if (info.id !== currentTrackId) {
-        DEBUG.track.changed(currentTrackId, info.id, info);
-        currentTrackId = info.id;
-        lastPlaybackPosition = 0;
-        lastTrackDuration = info.duration || 0;
-        const lyricsContainer = popup.querySelector("#lyrics-plus-content");
-        if (lyricsContainer) lyricsContainer.textContent = "Loading lyrics...";
-        autodetectProviderAndLoad(popup, info);
+      if (info.id !== currentTrackId) {
+        DEBUG.track.changed(currentTrackId, info.id, info);
+        currentTrackId = info.id;
+        lastPlaybackPosition = 0;
+        lastTrackDuration = info.duration || 0;
+        const lyricsContainer = activePopup ? activePopup.querySelector("#lyrics-plus-content") : null;
+        if (lyricsContainer) lyricsContainer.textContent = "Loading lyrics...";
+        if (activePopup) {
+          autodetectProviderAndLoad(activePopup, info);
+        }
       }
 
       if (isPipActive) {
@@ -7861,22 +7894,22 @@ const Providers = {
       lastPlaybackPosition = currentPosition;
 
       // Update all button states using DOM-cloned icons from Spotify's visible buttons
-      if (popup && popup._playPauseBtn) {
-        updatePlayPauseButton(popup._playPauseBtn.button, popup._playPauseBtn.iconWrapper);
-      }
-      if (popup && popup._shuffleBtn) {
-        updateShuffleButton(popup._shuffleBtn.button, popup._shuffleBtn.iconWrapper);
-      }
-      if (popup && popup._repeatBtn) {
-        updateRepeatButton(popup._repeatBtn.button, popup._repeatBtn.iconWrapper);
-      }
-      // Update prev/next button icons from Spotify's DOM
-      if (popup && popup._prevBtn) {
-        updatePreviousButtonIcon(popup._prevBtn.iconWrapper);
-      }
-      if (popup && popup._nextBtn) {
-        updateNextButtonIcon(popup._nextBtn.iconWrapper);
-      }
+      if (activePopup && activePopup._playPauseBtn) {
+        updatePlayPauseButton(activePopup._playPauseBtn.button, activePopup._playPauseBtn.iconWrapper);
+      }
+      if (activePopup && activePopup._shuffleBtn) {
+        updateShuffleButton(activePopup._shuffleBtn.button, activePopup._shuffleBtn.iconWrapper);
+      }
+      if (activePopup && activePopup._repeatBtn) {
+        updateRepeatButton(activePopup._repeatBtn.button, activePopup._repeatBtn.iconWrapper);
+      }
+      // Update prev/next button icons from Spotify's DOM
+      if (activePopup && activePopup._prevBtn) {
+        updatePreviousButtonIcon(activePopup._prevBtn.iconWrapper);
+      }
+      if (activePopup && activePopup._nextBtn) {
+        updateNextButtonIcon(activePopup._nextBtn.iconWrapper);
+      }
     }, TIMING.POLLING_INTERVAL_MS);
   }