From 66a2b4c2250a64f0887606d10b1a81c8c5627095 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Thu, 15 Jan 2026 21:35:45 -0800
Subject: [PATCH] fix sidebar visualizer/lyrics combined behavior (#1529)

---
 .../components/sidebar-play-queue.tsx         | 38 +++++++++++--------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/renderer/features/now-playing/components/sidebar-play-queue.tsx b/src/renderer/features/now-playing/components/sidebar-play-queue.tsx
index cbdd624b0..2df00405f 100644
--- a/src/renderer/features/now-playing/components/sidebar-play-queue.tsx
+++ b/src/renderer/features/now-playing/components/sidebar-play-queue.tsx
@@ -367,12 +367,16 @@ const VisualizerPanel = () => {
 const CombinedLyricsAndVisualizerPanel = () => {
     const currentSong = usePlayerSong();
     const visualizerType = useSettingsStore((store) => store.visualizer.type);
+    const showLyricsInSidebar = useShowLyricsInSidebar();
+    const showVisualizerInSidebar = useShowVisualizerInSidebar();
+    const { type, webAudio } = usePlaybackSettings();
+    const showVisualizer = showVisualizerInSidebar && type === PlayerType.WEB && webAudio;
 
     const { data: lyricsData } = useQuery(
         lyricsQueries.songLyrics(
             {
                 options: {
-                    enabled: !!currentSong?.id,
+                    enabled: !!currentSong?.id && showLyricsInSidebar,
                 },
                 query: { songId: currentSong?.id || '' },
                 serverId: currentSong?._serverId || '',
@@ -402,21 +406,23 @@ const CombinedLyricsAndVisualizerPanel = () => {
     return (
         <div className={styles.lyricsSection}>
             <PanelReorderControls panelType="lyrics" />
-            <Lyrics fadeOutNoLyricsMessage={true} settingsKey="sidebar" />
-            <div
-                className={styles.visualizerOverlay}
-                style={{
-                    opacity: hasLyrics ? 0.2 : 1,
-                }}
-            >
-                <Suspense fallback={<></>}>
-                    {visualizerType === 'butterchurn' ? (
-                        <ButterchurnVisualizer />
-                    ) : (
-                        <AudioMotionAnalyzerVisualizer />
-                    )}
-                </Suspense>
-            </div>
+            {showLyricsInSidebar && <Lyrics fadeOutNoLyricsMessage={true} settingsKey="sidebar" />}
+            {showVisualizer && (
+                <div
+                    className={styles.visualizerOverlay}
+                    style={{
+                        opacity: hasLyrics && showLyricsInSidebar ? 0.2 : 1,
+                    }}
+                >
+                    <Suspense fallback={<></>}>
+                        {visualizerType === 'butterchurn' ? (
+                            <ButterchurnVisualizer />
+                        ) : (
+                            <AudioMotionAnalyzerVisualizer />
+                        )}
+                    </Suspense>
+                </div>
+            )}
         </div>
     );
 };