From cf37d926332a0db12eabd4753f7ece141d9852b8 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Mon, 23 Mar 2026 10:52:10 +0100
Subject: [PATCH] feat(mukke): redesign FullPlayer as immersive fullscreen
 experience

Replace popup overlay with fullscreen page where the visualizer fills
the entire background. Controls overlay at bottom with gradient for
readability. Visualizer switcher in top-right corner.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../web/src/lib/components/FullPlayer.svelte  | 423 +++++++++++-------
 1 file changed, 255 insertions(+), 168 deletions(-)

diff --git a/apps/mukke/apps/web/src/lib/components/FullPlayer.svelte b/apps/mukke/apps/web/src/lib/components/FullPlayer.svelte
index 96ecfc68a..652bef728 100644
--- a/apps/mukke/apps/web/src/lib/components/FullPlayer.svelte
+++ b/apps/mukke/apps/web/src/lib/components/FullPlayer.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
 	import { playerStore } from '$lib/stores/player.svelte';
 	import VisualizerRenderer from '$lib/visualizer/VisualizerRenderer.svelte';
+	import { visualizerStore } from '$lib/visualizer/registry.svelte';
+
+	let innerHeight = $state(typeof window !== 'undefined' ? window.innerHeight : 800);
 
 	let progress = $derived(
 		playerStore.duration > 0 ? (playerStore.currentTime / playerStore.duration) * 100 : 0
@@ -23,173 +26,177 @@
 		const input = e.target as HTMLInputElement;
 		playerStore.setVolume(parseFloat(input.value));
 	}
-
-	function repeatIcon(mode: string): string {
-		if (mode === 'one') return '1';
-		return '';
-	}
 </script>
 
+<svelte:window bind:innerHeight />
+
 {#if playerStore.showFullPlayer && playerStore.currentSong}
-	<div class="fixed inset-0 z-50 bg-background flex flex-col">
-		<!-- Header -->
-		<div class="flex items-center justify-between p-4">
-			<button
-				onclick={() => playerStore.toggleFullPlayer()}
-				class="p-2 rounded-lg hover:bg-surface-hover transition-colors text-foreground-secondary"
-				aria-label="Close player"
-			>
-				<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M19 9l-7 7-7-7"
-					/>
-				</svg>
-			</button>
-			<div class="text-sm text-foreground-secondary">Now Playing</div>
-			<div class="w-10"></div>
+	<div class="full-player">
+		<!-- Visualizer as full background -->
+		<div class="viz-background">
+			<VisualizerRenderer height={innerHeight} showSwitcher={false} />
 		</div>
 
-		<!-- Content -->
-		<div class="flex-1 flex flex-col items-center justify-center px-8 gap-8">
-			<!-- Cover art -->
-			<div class="w-64 h-64 rounded-2xl bg-surface flex items-center justify-center shadow-lg">
-				<svg class="w-24 h-24 text-foreground-secondary" fill="currentColor" viewBox="0 0 24 24">
-					<path
-						d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"
-					/>
-				</svg>
-			</div>
+		<!-- Dark overlay for readability -->
+		<div class="viz-overlay"></div>
 
-			<!-- Visualizer -->
-			<div class="w-full max-w-md">
-				<VisualizerRenderer height={200} showSwitcher={true} />
-			</div>
-
-			<!-- Song info -->
-			<div class="text-center w-full max-w-md">
-				<div class="text-xl font-bold text-foreground truncate">
-					{playerStore.currentSong.title}
-				</div>
-				<div class="text-foreground-secondary mt-1 truncate">
-					{playerStore.currentSong.artist || 'Unknown Artist'}
-				</div>
-				{#if playerStore.currentSong.album}
-					<div class="text-sm text-foreground-secondary mt-0.5 truncate">
-						{playerStore.currentSong.album}
-					</div>
-				{/if}
-			</div>
-
-			<!-- Progress bar -->
-			<div class="w-full max-w-md">
+		<!-- Content layer -->
+		<div class="content-layer">
+			<!-- Top bar -->
+			<div class="flex items-center justify-between p-4">
 				<button
-					class="w-full h-2 bg-border rounded-full cursor-pointer relative block"
-					onclick={handleProgressClick}
-					aria-label="Seek"
+					onclick={() => playerStore.toggleFullPlayer()}
+					class="p-2 rounded-lg bg-white/10 hover:bg-white/20 backdrop-blur-sm transition-colors text-white"
+					aria-label="Close player"
 				>
-					<div
-						class="h-full bg-primary rounded-full transition-all duration-100"
-						style="width: {progress}%"
-					></div>
-					<div
-						class="absolute top-1/2 -translate-y-1/2 w-4 h-4 bg-primary rounded-full shadow"
-						style="left: {progress}%"
-					></div>
-				</button>
-				<div class="flex justify-between mt-2 text-xs text-foreground-secondary">
-					<span>{formatTime(playerStore.currentTime)}</span>
-					<span>{formatTime(playerStore.duration)}</span>
-				</div>
-			</div>
-
-			<!-- Transport controls -->
-			<div class="flex items-center gap-6">
-				<!-- Previous -->
-				<button
-					onclick={() => playerStore.previousSong()}
-					class="p-3 rounded-full hover:bg-surface-hover transition-colors text-foreground"
-					aria-label="Previous track"
-				>
-					<svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24">
-						<path d="M6 6h2v12H6zm3.5 6l8.5 6V6z" />
-					</svg>
-				</button>
-
-				<!-- Play/Pause -->
-				<button
-					onclick={() => playerStore.togglePlay()}
-					class="p-4 rounded-full bg-primary text-white hover:bg-primary-hover transition-colors"
-					aria-label={playerStore.isPlaying ? 'Pause' : 'Play'}
-				>
-					{#if playerStore.isPlaying}
-						<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
-							<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
-						</svg>
-					{:else}
-						<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
-							<path d="M8 5v14l11-7z" />
-						</svg>
-					{/if}
-				</button>
-
-				<!-- Next -->
-				<button
-					onclick={() => playerStore.nextSong()}
-					class="p-3 rounded-full hover:bg-surface-hover transition-colors text-foreground"
-					aria-label="Next track"
-				>
-					<svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24">
-						<path d="M6 18l8.5-6L6 6v12zm2-8.14L11.03 12 8 14.14V9.86zM16 6h2v12h-2z" />
-					</svg>
-				</button>
-			</div>
-
-			<!-- Bottom row: Shuffle, Repeat, Volume, Queue -->
-			<div class="flex items-center gap-6 w-full max-w-md justify-center">
-				<!-- Shuffle -->
-				<button
-					onclick={() => playerStore.toggleShuffle()}
-					class="p-2 rounded-lg transition-colors {playerStore.shuffleOn
-						? 'text-primary'
-						: 'text-foreground-secondary hover:text-foreground'}"
-					aria-label="Toggle shuffle"
-				>
-					<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+					<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 						<path
-							d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M19 9l-7 7-7-7"
 						/>
 					</svg>
 				</button>
-
-				<!-- Repeat -->
-				<button
-					onclick={() => playerStore.toggleRepeat()}
-					class="p-2 rounded-lg transition-colors relative {playerStore.repeatMode !== 'off'
-						? 'text-primary'
-						: 'text-foreground-secondary hover:text-foreground'}"
-					aria-label="Toggle repeat ({playerStore.repeatMode})"
-				>
-					<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-						<path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" />
-					</svg>
-					{#if playerStore.repeatMode === 'one'}
-						<span
-							class="absolute -top-1 -right-1 text-[10px] font-bold bg-primary text-white rounded-full w-4 h-4 flex items-center justify-center"
-							>1</span
+				<div class="text-sm text-white/70">Now Playing</div>
+				<!-- Visualizer switcher -->
+				<div class="flex gap-1">
+					{#each visualizerStore.all as viz}
+						<button
+							onclick={() => visualizerStore.setActive(viz.id)}
+							class="px-2 py-1 text-xs rounded-md transition-colors {visualizerStore.active ===
+							viz.id
+								? 'bg-white/30 text-white'
+								: 'bg-white/10 text-white/50 hover:bg-white/20 hover:text-white/80'}"
+							title={viz.description}
 						>
-					{/if}
-				</button>
+							{viz.name}
+						</button>
+					{/each}
+				</div>
+			</div>
 
-				<!-- Volume -->
-				<div class="flex items-center gap-2">
-					<svg
-						class="w-5 h-5 text-foreground-secondary shrink-0"
-						fill="currentColor"
-						viewBox="0 0 24 24"
+			<!-- Spacer to push controls to bottom -->
+			<div class="flex-1"></div>
+
+			<!-- Song info + controls at bottom -->
+			<div class="p-6 pb-8 flex flex-col gap-5 max-w-lg mx-auto w-full">
+				<!-- Song info -->
+				<div class="text-center">
+					<div class="text-2xl font-bold text-white truncate">
+						{playerStore.currentSong.title}
+					</div>
+					<div class="text-white/70 mt-1 truncate">
+						{playerStore.currentSong.artist || 'Unknown Artist'}
+					</div>
+					{#if playerStore.currentSong.album}
+						<div class="text-sm text-white/50 mt-0.5 truncate">
+							{playerStore.currentSong.album}
+						</div>
+					{/if}
+				</div>
+
+				<!-- Progress bar -->
+				<div class="w-full">
+					<button
+						class="w-full h-1.5 bg-white/20 rounded-full cursor-pointer relative block"
+						onclick={handleProgressClick}
+						aria-label="Seek"
 					>
+						<div
+							class="h-full bg-white rounded-full transition-all duration-100"
+							style="width: {progress}%"
+						></div>
+						<div
+							class="absolute top-1/2 -translate-y-1/2 w-3 h-3 bg-white rounded-full shadow-lg"
+							style="left: {progress}%"
+						></div>
+					</button>
+					<div class="flex justify-between mt-1.5 text-xs text-white/50">
+						<span>{formatTime(playerStore.currentTime)}</span>
+						<span>{formatTime(playerStore.duration)}</span>
+					</div>
+				</div>
+
+				<!-- Transport controls -->
+				<div class="flex items-center justify-center gap-8">
+					<!-- Shuffle -->
+					<button
+						onclick={() => playerStore.toggleShuffle()}
+						class="p-2 rounded-lg transition-colors {playerStore.shuffleOn
+							? 'text-white'
+							: 'text-white/40 hover:text-white/70'}"
+						aria-label="Toggle shuffle"
+					>
+						<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+							<path
+								d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"
+							/>
+						</svg>
+					</button>
+
+					<!-- Previous -->
+					<button
+						onclick={() => playerStore.previousSong()}
+						class="p-2 rounded-full hover:bg-white/10 transition-colors text-white"
+						aria-label="Previous track"
+					>
+						<svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24">
+							<path d="M6 6h2v12H6zm3.5 6l8.5 6V6z" />
+						</svg>
+					</button>
+
+					<!-- Play/Pause -->
+					<button
+						onclick={() => playerStore.togglePlay()}
+						class="p-4 rounded-full bg-white text-black hover:bg-white/90 transition-colors"
+						aria-label={playerStore.isPlaying ? 'Pause' : 'Play'}
+					>
+						{#if playerStore.isPlaying}
+							<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
+								<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
+							</svg>
+						{:else}
+							<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
+								<path d="M8 5v14l11-7z" />
+							</svg>
+						{/if}
+					</button>
+
+					<!-- Next -->
+					<button
+						onclick={() => playerStore.nextSong()}
+						class="p-2 rounded-full hover:bg-white/10 transition-colors text-white"
+						aria-label="Next track"
+					>
+						<svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24">
+							<path d="M6 18l8.5-6L6 6v12zm2-8.14L11.03 12 8 14.14V9.86zM16 6h2v12h-2z" />
+						</svg>
+					</button>
+
+					<!-- Repeat -->
+					<button
+						onclick={() => playerStore.toggleRepeat()}
+						class="p-2 rounded-lg transition-colors relative {playerStore.repeatMode !== 'off'
+							? 'text-white'
+							: 'text-white/40 hover:text-white/70'}"
+						aria-label="Toggle repeat ({playerStore.repeatMode})"
+					>
+						<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+							<path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" />
+						</svg>
+						{#if playerStore.repeatMode === 'one'}
+							<span
+								class="absolute -top-1 -right-1 text-[10px] font-bold bg-white text-black rounded-full w-4 h-4 flex items-center justify-center"
+								>1</span
+							>
+						{/if}
+					</button>
+				</div>
+
+				<!-- Volume + Queue row -->
+				<div class="flex items-center justify-center gap-4">
+					<svg class="w-4 h-4 text-white/50 shrink-0" fill="currentColor" viewBox="0 0 24 24">
 						<path
 							d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"
 						/>
@@ -201,25 +208,105 @@
 						step="0.01"
 						value={playerStore.volume}
 						oninput={handleVolumeInput}
-						class="w-20 h-1.5 bg-border rounded-lg appearance-none cursor-pointer"
+						class="volume-slider"
 					/>
+					<button
+						onclick={() => playerStore.toggleQueue()}
+						class="p-2 rounded-lg transition-colors {playerStore.showQueue
+							? 'text-white'
+							: 'text-white/40 hover:text-white/70'}"
+						aria-label="Toggle queue"
+					>
+						<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+							<path
+								d="M15 6H3v2h12V6zm0 4H3v2h12v-2zM3 16h8v-2H3v2zM17 6v8.18c-.31-.11-.65-.18-1-.18-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3V8h3V6h-5z"
+							/>
+						</svg>
+					</button>
 				</div>
-
-				<!-- Queue -->
-				<button
-					onclick={() => playerStore.toggleQueue()}
-					class="p-2 rounded-lg transition-colors {playerStore.showQueue
-						? 'text-primary'
-						: 'text-foreground-secondary hover:text-foreground'}"
-					aria-label="Toggle queue"
-				>
-					<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-						<path
-							d="M15 6H3v2h12V6zm0 4H3v2h12v-2zM3 16h8v-2H3v2zM17 6v8.18c-.31-.11-.65-.18-1-.18-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3V8h3V6h-5z"
-						/>
-					</svg>
-				</button>
 			</div>
 		</div>
 	</div>
 {/if}
+
+<style>
+	.full-player {
+		position: fixed;
+		inset: 0;
+		z-index: 50;
+		background: #000;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.viz-background {
+		position: absolute;
+		inset: 0;
+		z-index: 0;
+	}
+
+	/* Make the visualizer fill the entire background */
+	.viz-background :global(.relative.w-full) {
+		height: 100% !important;
+		width: 100% !important;
+	}
+
+	.viz-background :global(canvas) {
+		height: 100% !important;
+		width: 100% !important;
+		border-radius: 0 !important;
+	}
+
+	.viz-background :global(div[aria-hidden='true']) {
+		height: 100% !important;
+	}
+
+	.viz-overlay {
+		position: absolute;
+		inset: 0;
+		z-index: 1;
+		background: linear-gradient(
+			to bottom,
+			rgba(0, 0, 0, 0.3) 0%,
+			rgba(0, 0, 0, 0.1) 40%,
+			rgba(0, 0, 0, 0.4) 70%,
+			rgba(0, 0, 0, 0.85) 100%
+		);
+		pointer-events: none;
+	}
+
+	.content-layer {
+		position: relative;
+		z-index: 2;
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+
+	.volume-slider {
+		width: 5rem;
+		height: 4px;
+		border-radius: 2px;
+		appearance: none;
+		background: rgba(255, 255, 255, 0.2);
+		cursor: pointer;
+	}
+
+	.volume-slider::-webkit-slider-thumb {
+		appearance: none;
+		width: 12px;
+		height: 12px;
+		border-radius: 50%;
+		background: white;
+		cursor: pointer;
+	}
+
+	.volume-slider::-moz-range-thumb {
+		width: 12px;
+		height: 12px;
+		border-radius: 50%;
+		background: white;
+		cursor: pointer;
+		border: none;
+	}
+</style>