Responsive design

web-player/src/lib/components/player/PlayerBar.svelte

@@ -6,11 +6,22 @@
 </script>
 
 <div
-	class="animate-enter fixed right-0 bottom-0 z-50 h-[92px] border-t border-line bg-bg"
-	style="left:var(--mf-sidebar-w)"
+	class="animate-enter fixed right-0 left-0 z-40 h-[var(--mf-player-h)] border-t border-line bg-bg md:left-[var(--mf-sidebar-w)] md:z-50"
+	style="bottom:calc(var(--mf-nav-h) + var(--mf-safe-b))"
 >
+	<div class="absolute inset-x-0 top-0 md:hidden">
+		<SeekBar compact />
+	</div>
+
+	<div class="flex h-full items-center gap-3 page-x md:hidden">
+		<div class="min-w-0 flex-1">
+			<TrackInfo />
+		</div>
+		<TransportControls compact />
+	</div>
+
 	<div
-		class="grid h-full items-center gap-5 px-8"
+		class="hidden h-full items-center gap-5 px-8 md:grid"
 		style="grid-template-columns:minmax(200px,1fr) minmax(0,3fr) minmax(200px,1fr)"
 	>
 		<TrackInfo />

web-player/src/lib/components/player/SeekBar.svelte

@@ -2,32 +2,52 @@
 	import { player } from '$lib/player/player.svelte';
 	import { fmtTime } from '$lib/format';
 
+	interface Props {
+		compact?: boolean;
+	}
+
+	let { compact = false }: Props = $props();
+
 	function seek(event: MouseEvent) {
 		const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
 		player.seekFraction((event.clientX - rect.left) / rect.width);
 	}
 </script>
 
-<div class="flex w-full max-w-172 items-center gap-3">
-	<span class="text-right text-xs text-muted tabular-nums">
-		{fmtTime(player.progress)}
-	</span>
+{#if compact}
 	<button
 		type="button"
 		onclick={seek}
 		aria-label="Barra de progreso"
-		class="group relative h-1.5 flex-1 cursor-pointer rounded-full bg-track transition-[height] hover:h-2"
+		class="relative block h-1 w-full cursor-pointer bg-track"
 	>
 		<div
-			class="absolute inset-y-0 left-0 rounded-full bg-accent/60 group-hover:brightness-110"
+			class="absolute inset-y-0 left-0 bg-accent/70"
 			style="width:{player.progressPercent}%"
 		></div>
-		<span
-			class="pointer-events-none absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-on-art opacity-0 shadow-[0_1px_4px_rgba(0,0,0,0.5)] transition-opacity duration-75 group-hover:opacity-100"
-			style="left:{player.progressPercent}%"
-		></span>
 	</button>
-	<span class="text-xs text-muted tabular-nums">
-		{fmtTime(player.current.duration)}
-	</span>
-</div>
+{:else}
+	<div class="flex w-full max-w-172 items-center gap-3">
+		<span class="text-right text-xs text-muted tabular-nums">
+			{fmtTime(player.progress)}
+		</span>
+		<button
+			type="button"
+			onclick={seek}
+			aria-label="Barra de progreso"
+			class="group relative h-1.5 flex-1 cursor-pointer rounded-full bg-track transition-[height] hover:h-2"
+		>
+			<div
+				class="absolute inset-y-0 left-0 rounded-full bg-accent/60 group-hover:brightness-110"
+				style="width:{player.progressPercent}%"
+			></div>
+			<span
+				class="pointer-events-none absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-on-art opacity-0 shadow-[0_1px_4px_rgba(0,0,0,0.5)] transition-opacity duration-75 group-hover:opacity-100"
+				style="left:{player.progressPercent}%"
+			></span>
+		</button>
+		<span class="text-xs text-muted tabular-nums">
+			{fmtTime(player.current.duration)}
+		</span>
+	</div>
+{/if}

web-player/src/lib/components/player/TrackInfo.svelte

@@ -4,7 +4,7 @@
 	import ExplicitBadge from '$lib/components/ui/ExplicitBadge.svelte';
 </script>
 
-<div class="flex min-w-0 items-center gap-3">
+<div class="flex min-w-0 items-center gap-2.5 md:gap-3">
 	{#if player.current.id}
 		<Cover
 			trackId={player.current.id}
@@ -12,11 +12,11 @@
 			hue={player.current.hue}
 			size="small"
 			alt={player.current.title}
-			class="h-13 w-13 shrink-0 rounded-lg shadow-[0_6px_16px_-6px_rgba(0,0,0,0.6)]"
+			class="h-11 w-11 shrink-0 rounded-lg shadow-[0_6px_16px_-6px_rgba(0,0,0,0.6)] md:h-13 md:w-13"
 		/>
 	{:else}
 		<div
-			class="h-13 w-13 shrink-0 rounded-lg shadow-[0_6px_16px_-6px_rgba(0,0,0,0.6)]"
+			class="h-11 w-11 shrink-0 rounded-lg shadow-[0_6px_16px_-6px_rgba(0,0,0,0.6)] md:h-13 md:w-13"
 			style="background:{player.artGradient}"
 		></div>
 	{/if}

web-player/src/lib/components/player/TransportControls.svelte

@@ -1,14 +1,21 @@
 <script lang="ts">
 	import { player } from '$lib/player/player.svelte';
+
+	interface Props {
+		compact?: boolean;
+	}
+
+	let { compact = false }: Props = $props();
+
+	const sideClass = $derived(
+		compact
+			? 'grid h-10 w-10 place-items-center text-fg opacity-70 transition active:scale-90'
+			: 'flex text-fg opacity-70 transition hover:opacity-100 active:scale-90'
+	);
 </script>
 
-<div class="flex items-center gap-5">
-	<button
-		type="button"
-		onclick={() => player.previous()}
-		aria-label="Anterior"
-		class="flex text-fg opacity-70 transition hover:opacity-100 active:scale-90"
-	>
+<div class="flex shrink-0 items-center {compact ? 'gap-0.5' : 'gap-5'}">
+	<button type="button" onclick={() => player.previous()} aria-label="Anterior" class={sideClass}>
 		<svg width="16" height="14" viewBox="0 0 16 14" fill="currentColor">
 			<rect x="0" y="0" width="2.5" height="14" rx="1" />
 			<path d="M15 0 5 7l10 7z" />
@@ -19,7 +26,7 @@
 		type="button"
 		onclick={() => player.toggle()}
 		aria-label={player.playing ? 'Pausar' : 'Reproducir'}
-		class="grid h-[36px] w-[36px] place-items-center rounded-full bg-fg text-bg shadow-lg transition duration-100 active:scale-95"
+		class="grid h-[36px] w-[36px] shrink-0 place-items-center rounded-full bg-fg text-bg shadow-lg transition duration-100 active:scale-95"
 	>
 		{#if player.playing}
 			<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
@@ -33,12 +40,7 @@
 		{/if}
 	</button>
 
-	<button
-		type="button"
-		onclick={() => player.next()}
-		aria-label="Siguiente"
-		class="flex text-fg opacity-70 transition hover:opacity-100 active:scale-90"
-	>
+	<button type="button" onclick={() => player.next()} aria-label="Siguiente" class={sideClass}>
 		<svg width="16" height="14" viewBox="0 0 16 14" fill="currentColor">
 			<path d="M1 0 11 7 1 14z" />
 			<rect x="13.5" y="0" width="2.5" height="14" rx="1" />