Joren/qbz
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
This reverts commit d13278785d.
This commit is contained in:
vicrodh committed 2026-01-30 22:29:27 -06:00
1 parent d495c43c39
commit 14ed60bb94
2 files changed
+77 -233
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/lib/components/immersive/ImmersivePlayer.svelte
+2 -2
View File
@@ -284,7 +284,7 @@
<!-- Visualizer Focus: Full screen visualizer --> <!-- Visualizer Focus: Full screen visualizer -->
<div class="focus-panel"> <div class="focus-panel">
<div class="focus-panel-content visualizer-content"> <div class="focus-panel-content visualizer-content">
<VisualizerPanel {isPlaying} {artwork} /> <VisualizerPanel {isPlaying} />
</div> </div>
</div> </div>
{:else} {:else}
@@ -311,7 +311,7 @@
{:else if activeTab === 'suggestions'} {:else if activeTab === 'suggestions'}
<SuggestionsPanel {trackId} {artistId} /> <SuggestionsPanel {trackId} {artistId} />
{:else if activeTab === 'visualizer'} {:else if activeTab === 'visualizer'}
<VisualizerPanel {isPlaying} {artwork} /> <VisualizerPanel {isPlaying} />
{:else if activeTab === 'queue'} {:else if activeTab === 'queue'}
<QueuePanel <QueuePanel
tracks={queueTracks} tracks={queueTracks}
src/lib/components/immersive/panels/VisualizerPanel.svelte
+75 -231
View File
@@ -1,257 +1,102 @@
<script lang="ts"> <script lang="ts">
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { Settings } from 'lucide-svelte';
type VisualizerMode = 'bars' | 'wave' | 'circular';
interface Props { interface Props {
isPlaying?: boolean; isPlaying?: boolean;
artwork?: string;
} }
let { isPlaying = false, artwork }: Props = $props(); let { isPlaying = false }: Props = $props();
let canvas: HTMLCanvasElement | null = $state(null); let canvas: HTMLCanvasElement | null = $state(null);
let animationId: number | null = null; let animationId: number | null = null;
let mode: VisualizerMode = $state('bars');
let showSettings = $state(false);
// Extracted colors from artwork
let colors = $state(['#7c3aed', '#a78bfa', '#c4b5fd']);
// Optimized: fewer bars, throttled updates
const BAR_COUNT = 32;
let bars: number[] = []; let bars: number[] = [];
let lastUpdate = 0; const BAR_COUNT = 64;
const UPDATE_INTERVAL = 50; // ms between visual updates (20fps) const BAR_WIDTH = 4;
const BAR_GAP = 2;
// Extract colors from artwork
async function extractColors(imageUrl: string) {
try {
const img = new Image();
img.crossOrigin = 'anonymous';
await new Promise<void>((resolve, reject) => {
img.onload = () => resolve();
img.onerror = reject;
img.src = imageUrl;
});
const tempCanvas = document.createElement('canvas');
tempCanvas.width = 10;
tempCanvas.height = 10;
const ctx = tempCanvas.getContext('2d');
if (!ctx) return;
ctx.drawImage(img, 0, 0, 10, 10);
const data = ctx.getImageData(0, 0, 10, 10).data;
// Sample a few pixels
const samples = [[0, 0], [9, 0], [0, 9], [4, 4], [9, 9]];
const extractedColors: string[] = [];
for (const [x, y] of samples) {
const idx = (y * 10 + x) * 4;
const r = data[idx];
const g = data[idx + 1];
const b = data[idx + 2];
// Slightly brighten for visibility
const br = Math.min(255, Math.round(r * 1.2));
const bg = Math.min(255, Math.round(g * 1.2));
const bb = Math.min(255, Math.round(b * 1.2));
extractedColors.push(`rgb(${br}, ${bg}, ${bb})`);
}
colors = [...new Set(extractedColors)].slice(0, 3);
if (colors.length < 3) {
colors = ['#7c3aed', '#a78bfa', '#c4b5fd'];
}
} catch {
// Use default colors on error
colors = ['#7c3aed', '#a78bfa', '#c4b5fd'];
}
}
// Watch artwork changes
$effect(() => {
if (artwork) {
extractColors(artwork);
}
});
// Initialize bars with random heights
function initBars() { function initBars() {
bars = Array(BAR_COUNT).fill(0).map(() => Math.random() * 0.2 + 0.1); bars = Array(BAR_COUNT).fill(0).map(() => Math.random() * 0.3 + 0.1);
} }
function animate(timestamp: number) { // Animate bars
function animate() {
if (!canvas) return; if (!canvas) return;
// Throttle updates for performance
if (timestamp - lastUpdate < UPDATE_INTERVAL) {
animationId = requestAnimationFrame(animate);
return;
}
lastUpdate = timestamp;
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
if (!ctx) return; if (!ctx) return;
const width = canvas.width / window.devicePixelRatio; const width = canvas.width;
const height = canvas.height / window.devicePixelRatio; const height = canvas.height;
const centerX = width / 2;
const totalWidth = BAR_COUNT * (BAR_WIDTH + BAR_GAP) - BAR_GAP;
const startX = centerX - totalWidth / 2;
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas
ctx.save(); ctx.clearRect(0, 0, width, height);
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
// Update bars with smooth animation // Update bar heights with smooth animation
bars = bars.map((bar, i) => { bars = bars.map((bar, i) => {
if (isPlaying) { if (isPlaying) {
const target = Math.random() * 0.85 + 0.15; // Random movement when playing
return bar + (target - bar) * 0.2; const target = Math.random() * 0.8 + 0.2;
return bar + (target - bar) * 0.15;
} else { } else {
const idle = Math.sin(Date.now() / 2000 + i * 0.3) * 0.08 + 0.12; // Slowly decay to idle state
return bar + (idle - bar) * 0.08; const idle = Math.sin(Date.now() / 1000 + i * 0.2) * 0.1 + 0.15;
return bar + (idle - bar) * 0.05;
} }
}); });
// Create gradient // Draw bars
const gradient = ctx.createLinearGradient(0, height, 0, 0); const gradient = ctx.createLinearGradient(0, height, 0, 0);
gradient.addColorStop(0, colors[0]); gradient.addColorStop(0, 'rgba(124, 58, 237, 0.8)'); // Purple
gradient.addColorStop(0.5, colors[1] || colors[0]); gradient.addColorStop(0.5, 'rgba(139, 92, 246, 0.6)');
gradient.addColorStop(1, colors[2] || colors[0]); gradient.addColorStop(1, 'rgba(167, 139, 250, 0.4)');
if (mode === 'bars') {
drawBars(ctx, width, height, gradient);
} else if (mode === 'wave') {
drawWave(ctx, width, height, gradient);
} else if (mode === 'circular') {
drawCircular(ctx, width, height, gradient);
}
ctx.restore();
animationId = requestAnimationFrame(animate);
}
function drawBars(ctx: CanvasRenderingContext2D, width: number, height: number, gradient: CanvasGradient) {
const barWidth = width / BAR_COUNT * 0.7;
const gap = width / BAR_COUNT * 0.3;
const maxHeight = height * 0.7;
ctx.fillStyle = gradient; ctx.fillStyle = gradient;
bars.forEach((bar, i) => { bars.forEach((bar, i) => {
const x = i * (barWidth + gap) + gap / 2; const x = startX + i * (BAR_WIDTH + BAR_GAP);
const barHeight = bar * maxHeight; const barHeight = bar * height * 0.7;
const y = (height - barHeight) / 2; const y = (height - barHeight) / 2;
const radius = barWidth / 2;
// Rounded rectangle // Rounded rectangle
const radius = BAR_WIDTH / 2;
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(x + radius, y); ctx.moveTo(x + radius, y);
ctx.lineTo(x + barWidth - radius, y); ctx.lineTo(x + BAR_WIDTH - radius, y);
ctx.quadraticCurveTo(x + barWidth, y, x + barWidth, y + radius); ctx.quadraticCurveTo(x + BAR_WIDTH, y, x + BAR_WIDTH, y + radius);
ctx.lineTo(x + barWidth, y + barHeight - radius); ctx.lineTo(x + BAR_WIDTH, y + barHeight - radius);
ctx.quadraticCurveTo(x + barWidth, y + barHeight, x + barWidth - radius, y + barHeight); ctx.quadraticCurveTo(x + BAR_WIDTH, y + barHeight, x + BAR_WIDTH - radius, y + barHeight);
ctx.lineTo(x + radius, y + barHeight); ctx.lineTo(x + radius, y + barHeight);
ctx.quadraticCurveTo(x, y + barHeight, x, y + barHeight - radius); ctx.quadraticCurveTo(x, y + barHeight, x, y + barHeight - radius);
ctx.lineTo(x, y + radius); ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y); ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
ctx.fill(); ctx.fill();
}); });
animationId = requestAnimationFrame(animate);
} }
function drawWave(ctx: CanvasRenderingContext2D, width: number, height: number, gradient: CanvasGradient) { // Handle canvas resize
const centerY = height / 2;
const amplitude = height * 0.35;
ctx.strokeStyle = gradient;
ctx.lineWidth = 3;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.beginPath();
bars.forEach((bar, i) => {
const x = (i / (bars.length - 1)) * width;
const y = centerY + (bar - 0.5) * amplitude * 2;
if (i === 0) {
ctx.moveTo(x, y);
} else {
const prevX = ((i - 1) / (bars.length - 1)) * width;
const cpX = (prevX + x) / 2;
ctx.quadraticCurveTo(cpX, centerY + (bars[i - 1] - 0.5) * amplitude * 2, x, y);
}
});
ctx.stroke();
// Mirror wave
ctx.globalAlpha = 0.3;
ctx.beginPath();
bars.forEach((bar, i) => {
const x = (i / (bars.length - 1)) * width;
const y = centerY - (bar - 0.5) * amplitude * 2;
if (i === 0) {
ctx.moveTo(x, y);
} else {
const prevX = ((i - 1) / (bars.length - 1)) * width;
const cpX = (prevX + x) / 2;
ctx.quadraticCurveTo(cpX, centerY - (bars[i - 1] - 0.5) * amplitude * 2, x, y);
}
});
ctx.stroke();
ctx.globalAlpha = 1;
}
function drawCircular(ctx: CanvasRenderingContext2D, width: number, height: number, gradient: CanvasGradient) {
const centerX = width / 2;
const centerY = height / 2;
const baseRadius = Math.min(width, height) * 0.2;
const maxRadius = Math.min(width, height) * 0.4;
ctx.strokeStyle = gradient;
ctx.lineWidth = 4;
ctx.lineCap = 'round';
bars.forEach((bar, i) => {
const angle = (i / bars.length) * Math.PI * 2 - Math.PI / 2;
const innerRadius = baseRadius;
const outerRadius = baseRadius + bar * (maxRadius - baseRadius);
const x1 = centerX + Math.cos(angle) * innerRadius;
const y1 = centerY + Math.sin(angle) * innerRadius;
const x2 = centerX + Math.cos(angle) * outerRadius;
const y2 = centerY + Math.sin(angle) * outerRadius;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
});
// Center circle
ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
ctx.beginPath();
ctx.arc(centerX, centerY, baseRadius * 0.8, 0, Math.PI * 2);
ctx.fill();
}
function resizeCanvas() { function resizeCanvas() {
if (!canvas) return; if (!canvas) return;
const rect = canvas.getBoundingClientRect(); const rect = canvas.getBoundingClientRect();
canvas.width = rect.width * window.devicePixelRatio; canvas.width = rect.width * window.devicePixelRatio;
canvas.height = rect.height * window.devicePixelRatio; canvas.height = rect.height * window.devicePixelRatio;
} const ctx = canvas.getContext('2d');
if (ctx) {
function cycleMode() { ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
const modes: VisualizerMode[] = ['bars', 'wave', 'circular']; }
const currentIndex = modes.indexOf(mode);
mode = modes[(currentIndex + 1) % modes.length];
} }
onMount(() => { onMount(() => {
initBars(); initBars();
resizeCanvas(); resizeCanvas();
window.addEventListener('resize', resizeCanvas); window.addEventListener('resize', resizeCanvas);
animationId = requestAnimationFrame(animate); animate();
return () => { return () => {
window.removeEventListener('resize', resizeCanvas); window.removeEventListener('resize', resizeCanvas);
@@ -264,58 +109,57 @@
<div class="visualizer-panel"> <div class="visualizer-panel">
<canvas bind:this={canvas} class="visualizer-canvas"></canvas> <canvas bind:this={canvas} class="visualizer-canvas"></canvas>
<div class="visualizer-label">
<!-- Mode indicator --> <span class="label-text">Audio Visualizer</span>
<button class="mode-btn" onclick={cycleMode} title="Change visualizer style"> {#if !isPlaying}
<Settings size={18} /> <span class="label-hint">Play a track to see the visualization</span>
<span class="mode-label">{mode}</span> {/if}
</button> </div>
</div> </div>
<style> <style>
.visualizer-panel { .visualizer-panel {
position: absolute; flex: 1;
inset: 0; min-height: 0;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
/* Account for header and controls */ overflow: hidden;
padding: 70px 20px 120px; position: relative;
z-index: 5;
} }
.visualizer-canvas { .visualizer-canvas {
width: 100%; width: 100%;
height: 100%; height: 200px;
max-width: 100%; max-width: 500px;
max-height: 100%;
} }
.mode-btn { .visualizer-label {
position: absolute; position: absolute;
bottom: 140px; bottom: 20px;
right: 30px;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
gap: 6px; gap: 4px;
padding: 8px 14px; opacity: 0.5;
background: rgba(0, 0, 0, 0.4); transition: opacity 200ms ease;
backdrop-filter: blur(12px); }
border: 1px solid var(--alpha-15, rgba(255, 255, 255, 0.15));
border-radius: 20px; .visualizer-panel:hover .visualizer-label {
color: var(--alpha-60, rgba(255, 255, 255, 0.6)); opacity: 0.3;
}
.label-text {
font-size: 12px; font-size: 12px;
cursor: pointer; font-weight: 600;
transition: all 150ms ease; text-transform: uppercase;
text-transform: capitalize; letter-spacing: 0.1em;
color: var(--alpha-40, rgba(255, 255, 255, 0.4));
} }
.mode-btn:hover { .label-hint {
background: rgba(0, 0, 0, 0.5); font-size: 11px;
color: var(--text-primary, white); color: var(--alpha-30, rgba(255, 255, 255, 0.3));
}
.mode-label {
font-weight: 500;
} }
</style> </style>