feat(immersive): full-screen visualizer with multiple modes

- Rewrite VisualizerPanel for full-screen display with 3 modes:
  - Bars: vertical audio bars with rounded corners
  - Wave: smooth waveform with mirrored reflection
  - Circular: radial bars emanating from center
- Extract colors from album artwork for dynamic coloring
- Add performance optimizations: 32 bars, 20fps throttling
- Pass artwork prop to enable color extraction
- Add mode switcher button to cycle through visualizations
This commit is contained in:
vicrodh committed 2026-01-30 17:30:33 -06:00
1 parent 34b172d83a
commit d13278785d
2 files changed
+235 -79

No files matched your search

@@ -284,7 +284,7 @@
<!-- Visualizer Focus: Full screen visualizer -->
<div class="focus-panel">
<div class="focus-panel-content visualizer-content">
<VisualizerPanel {isPlaying} />
<VisualizerPanel {isPlaying} {artwork} />
</div>
</div>
{:else}
@@ -311,7 +311,7 @@
{:else if activeTab === 'suggestions'}
<SuggestionsPanel {trackId} {artistId} />
{:else if activeTab === 'visualizer'}
<VisualizerPanel {isPlaying} />
<VisualizerPanel {isPlaying} {artwork} />
{:else if activeTab === 'queue'}
<QueuePanel
tracks={queueTracks}