🐛 fix: lyrics cinema background

extension/src/app.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import Main from '@/components/Main';
 import { showError } from '@/components/error/ErrorBoundary';
 import { checkForCustomControls } from '@/utils/windowControls';
-import { logToConsole } from './utils/logUtils';
+import { logToConsole } from '@/utils/logUtils';
+import { manageBackgroundZIndex } from '@/utils/backgroundUtils';
 
 async function main() {
   try {
@@ -48,6 +49,8 @@ async function main() {
       document.querySelector('.Root__globalNav')
     );
 
+    manageBackgroundZIndex();
+
     // check for custom controls
     checkForCustomControls();
 

extension/src/components/Main.tsx

@@ -96,6 +96,7 @@ const Main = () => {
     React.useEffect(() => {
       window.pageCategory = pageCategory;
       document.body.classList.add(pageCategory);
+
       return () => {
         document.body.classList.remove(pageCategory);
       };

extension/src/utils/backgroundUtils.ts

@@ -0,0 +1,58 @@
+export const manageBackgroundZIndex = () => {
+  type BackgroundContainer = HTMLDivElement | null;
+
+  function applyBackgroundStyles() {
+    const lyricsCinemaContainer: BackgroundContainer = document.querySelector(
+      '#lyrics-cinema:has(.lyrics-lyrics-contentContainer)'
+    );
+
+    if (lyricsCinemaContainer) {
+      const backgroundContainer: BackgroundContainer = document.querySelector(
+        '#lucid-main .background-container .background-wrapper div'
+      );
+
+      if (backgroundContainer) {
+        backgroundContainer.style.zIndex =
+          'calc(var(--above-everything-except-now-playing-bar-z-index, 6) - 1)';
+      } else {
+        removeBackgroundZIndex();
+      }
+    } else {
+      removeBackgroundZIndex();
+    }
+  }
+
+  function removeBackgroundZIndex() {
+    const backgroundContainer: BackgroundContainer = document.querySelector(
+      '#lucid-main .background-container .background-wrapper div'
+    );
+
+    if (backgroundContainer) {
+      backgroundContainer.style.zIndex = '';
+    }
+  }
+
+  const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      if (
+        mutation.target instanceof HTMLElement &&
+        mutation.target.id === 'lyrics-cinema'
+      ) {
+        applyBackgroundStyles();
+      } else {
+        if (
+          mutation.target instanceof HTMLElement &&
+          mutation.target.classList.contains('lyrics-lyrics-contentContainer')
+        ) {
+          applyBackgroundStyles();
+        }
+      }
+    }
+  });
+
+  const config = { childList: true, attributes: true, subtree: true };
+
+  observer.observe(document.body, config);
+
+  applyBackgroundStyles();
+};