Simplify immersive player to use single compact controls

- Remove PlayerControlsMedium variant (unused)
- Keep only PlayerControlsCompact as the single player style
- Add QualityBadge above player controls
- Center play/pause button with balanced left/right groups
- Remove expand/compact toggle (no longer needed)
- Pass quality, bitDepth, samplingRate props from parent

src/lib/components/immersive/ImmersivePlayer.svelte

@@ -3,7 +3,7 @@
   import ImmersiveBackground from './ImmersiveBackground.svelte';
   import ImmersiveArtwork from './ImmersiveArtwork.svelte';
   import ImmersiveHeader, { type ImmersiveTab, type DisplayMode } from './ImmersiveHeader.svelte';
-  import ImmersiveControls from './ImmersiveControls.svelte';
+  import PlayerControlsCompact from './PlayerControlsCompact.svelte';
   import LyricsPanel from './panels/LyricsPanel.svelte';
   import TrackInfoPanel from './panels/TrackInfoPanel.svelte';
   import SuggestionsPanel from './panels/SuggestionsPanel.svelte';
@@ -315,15 +315,15 @@
     {/if}
 
     <!-- Bottom Controls -->
-    <ImmersiveControls
+    <PlayerControlsCompact
       visible={showUI}
       {isPlaying}
       {currentTime}
       {duration}
+      {volume}
       {isShuffle}
       {repeatMode}
       {isFavorite}
-      {volume}
       {quality}
       {bitDepth}
       {samplingRate}

src/lib/components/immersive/PlayerControlsCompact.svelte

@@ -0,0 +1,517 @@
+<script lang="ts">
+  import {
+    Play,
+    Pause,
+    SkipBack,
+    SkipForward,
+    Shuffle,
+    Repeat,
+    Heart,
+    Volume2,
+    VolumeX,
+    MoreHorizontal
+  } from 'lucide-svelte';
+  import QualityBadge from '$lib/components/QualityBadge.svelte';
+
+  interface Props {
+    visible?: boolean;
+    isPlaying: boolean;
+    currentTime: number;
+    duration: number;
+    volume: number;
+    isShuffle: boolean;
+    repeatMode: 'off' | 'all' | 'one';
+    isFavorite: boolean;
+    quality?: string;
+    bitDepth?: number;
+    samplingRate?: number;
+    onTogglePlay: () => void;
+    onSkipBack?: () => void;
+    onSkipForward?: () => void;
+    onSeek: (time: number) => void;
+    onToggleShuffle: () => void;
+    onToggleRepeat: () => void;
+    onToggleFavorite: () => void;
+    onVolumeChange: (volume: number) => void;
+    onContextMenu?: () => void;
+  }
+
+  let {
+    visible = true,
+    isPlaying,
+    currentTime,
+    duration,
+    volume,
+    isShuffle,
+    repeatMode,
+    isFavorite,
+    quality,
+    bitDepth,
+    samplingRate,
+    onTogglePlay,
+    onSkipBack,
+    onSkipForward,
+    onSeek,
+    onToggleShuffle,
+    onToggleRepeat,
+    onToggleFavorite,
+    onVolumeChange,
+    onContextMenu
+  }: Props = $props();
+
+  let progressRef: HTMLDivElement | null = $state(null);
+  let volumeRef: HTMLDivElement | null = $state(null);
+  let isDraggingProgress = $state(false);
+  let isDraggingVolume = $state(false);
+  let isMuted = $state(false);
+  let previousVolume = $state(75);
+
+  const progress = $derived((currentTime / duration) * 100 || 0);
+  const displayVolume = $derived(isMuted ? 0 : volume);
+
+  function formatTime(seconds: number): string {
+    if (!seconds || !isFinite(seconds)) return '0:00';
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  }
+
+  function handleProgressMouseDown(e: MouseEvent) {
+    isDraggingProgress = true;
+    updateProgress(e);
+  }
+
+  function updateProgress(e: MouseEvent) {
+    if (progressRef) {
+      const rect = progressRef.getBoundingClientRect();
+      const percentage = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));
+      onSeek(Math.round((percentage / 100) * duration));
+    }
+  }
+
+  function handleVolumeMouseDown(e: MouseEvent) {
+    isDraggingVolume = true;
+    updateVolume(e);
+  }
+
+  function updateVolume(e: MouseEvent) {
+    if (volumeRef) {
+      const rect = volumeRef.getBoundingClientRect();
+      const percentage = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));
+      const newVolume = Math.round(percentage);
+      onVolumeChange(newVolume);
+      if (newVolume > 0) isMuted = false;
+    }
+  }
+
+  function toggleMute() {
+    if (isMuted) {
+      isMuted = false;
+      onVolumeChange(previousVolume || 75);
+    } else {
+      previousVolume = volume;
+      isMuted = true;
+      onVolumeChange(0);
+    }
+  }
+
+  function handleMouseMove(e: MouseEvent) {
+    if (isDraggingProgress) updateProgress(e);
+    if (isDraggingVolume) updateVolume(e);
+  }
+
+  function handleMouseUp() {
+    isDraggingProgress = false;
+    isDraggingVolume = false;
+  }
+
+  $effect(() => {
+    if (isDraggingProgress || isDraggingVolume) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      return () => {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+      };
+    }
+  });
+</script>
+
+<div class="controls-wrapper" class:visible>
+  <!-- Quality Badge above player -->
+  <div class="quality-row">
+    <QualityBadge {quality} {bitDepth} {samplingRate} />
+  </div>
+
+  <div class="player-bar">
+    <!-- All Controls in Single Row -->
+    <div class="controls-row">
+      <!-- Left: Shuffle + Heart -->
+      <div class="controls-group left">
+        <button
+          class="control-btn"
+          class:active={isShuffle}
+          onclick={onToggleShuffle}
+          title="Shuffle"
+        >
+          <Shuffle size={12} />
+        </button>
+        <button
+          class="control-btn"
+          class:active={isFavorite}
+          onclick={onToggleFavorite}
+          title={isFavorite ? 'Remove from Favorites' : 'Add to Favorites'}
+        >
+          <Heart size={12} fill={isFavorite ? 'currentColor' : 'none'} />
+        </button>
+      </div>
+
+      <!-- Center: Time + Playback + Time -->
+      <div class="playback-group">
+        <span class="time-text">{formatTime(currentTime)}</span>
+
+        <button
+          class="control-btn nav"
+          onclick={onSkipBack}
+          disabled={!onSkipBack}
+          title="Previous"
+        >
+          <SkipBack size={14} fill="currentColor" />
+        </button>
+
+        <button
+          class="control-btn play-btn"
+          onclick={onTogglePlay}
+          title={isPlaying ? 'Pause' : 'Play'}
+        >
+          {#if isPlaying}
+            <Pause size={20} fill="currentColor" />
+          {:else}
+            <Play size={20} fill="currentColor" class="play-icon" />
+          {/if}
+        </button>
+
+        <button
+          class="control-btn nav"
+          onclick={onSkipForward}
+          disabled={!onSkipForward}
+          title="Next"
+        >
+          <SkipForward size={14} fill="currentColor" />
+        </button>
+
+        <span class="time-text">{formatTime(duration)}</span>
+      </div>
+
+      <!-- Right: Repeat + Volume + Menu + Expand -->
+      <div class="controls-group right">
+        <button
+          class="control-btn"
+          class:active={repeatMode !== 'off'}
+          onclick={onToggleRepeat}
+          title={repeatMode === 'off' ? 'Repeat' : repeatMode === 'all' ? 'Repeat All' : 'Repeat One'}
+        >
+          <Repeat size={12} />
+          {#if repeatMode === 'one'}
+            <span class="repeat-one">1</span>
+          {/if}
+        </button>
+
+        <div class="volume-group">
+          <button
+            class="control-btn"
+            onclick={toggleMute}
+            title={isMuted ? 'Unmute' : 'Mute'}
+          >
+            {#if isMuted || displayVolume === 0}
+              <VolumeX size={12} />
+            {:else}
+              <Volume2 size={12} />
+            {/if}
+          </button>
+          <div
+            class="volume-bar"
+            bind:this={volumeRef}
+            onmousedown={handleVolumeMouseDown}
+            role="slider"
+            tabindex="0"
+            aria-valuenow={displayVolume}
+            aria-valuemin={0}
+            aria-valuemax={100}
+          >
+            <div class="volume-track">
+              <div class="volume-fill" style="width: {displayVolume}%"></div>
+            </div>
+          </div>
+        </div>
+
+        <button
+          class="control-btn"
+          onclick={onContextMenu}
+          title="More options"
+        >
+          <MoreHorizontal size={12} />
+        </button>
+      </div>
+    </div>
+
+    <!-- Progress Bar Below -->
+    <div
+      class="progress-bar"
+      bind:this={progressRef}
+      onmousedown={handleProgressMouseDown}
+      role="slider"
+      tabindex="0"
+      aria-valuenow={currentTime}
+      aria-valuemin={0}
+      aria-valuemax={duration}
+    >
+      <div class="progress-track">
+        <div class="progress-fill" style="width: {progress}%"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .controls-wrapper {
+    position: absolute;
+    bottom: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 40;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 300ms ease, transform 300ms ease;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .controls-wrapper.visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .quality-row {
+    display: flex;
+    justify-content: center;
+  }
+
+  .player-bar {
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(40px);
+    -webkit-backdrop-filter: blur(40px);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 16px;
+    padding: 12px 24px;
+    min-width: 700px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  }
+
+  .controls-row {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .controls-group {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  /* Equal width for left and right groups to center playback */
+  .controls-group.left,
+  .controls-group.right {
+    min-width: 140px;
+  }
+
+  .controls-group.left {
+    justify-content: flex-start;
+  }
+
+  .controls-group.right {
+    gap: 8px;
+    justify-content: flex-end;
+  }
+
+  .playback-group {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+  }
+
+  .time-text {
+    font-size: 11px;
+    color: rgba(255, 255, 255, 0.6);
+    font-variant-numeric: tabular-nums;
+    min-width: 36px;
+  }
+
+  .time-text:first-of-type {
+    text-align: right;
+  }
+
+  .control-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    background: none;
+    border: none;
+    border-radius: 50%;
+    color: rgba(255, 255, 255, 0.5);
+    cursor: pointer;
+    transition: all 150ms ease;
+    position: relative;
+  }
+
+  .control-btn:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+
+  .control-btn:not(:disabled):hover {
+    color: white;
+  }
+
+  .control-btn.active {
+    background: rgba(255, 255, 255, 0.2);
+    color: white;
+  }
+
+  .control-btn.nav {
+    width: 28px;
+    height: 28px;
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+  }
+
+  .control-btn.nav:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  .control-btn.play-btn {
+    width: 48px;
+    height: 48px;
+    background: white;
+    color: black;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  }
+
+  .control-btn.play-btn:hover {
+    background: rgba(255, 255, 255, 0.9);
+    transform: scale(1.05);
+  }
+
+  .control-btn.play-btn :global(.play-icon) {
+    margin-left: 2px;
+  }
+
+  .repeat-one {
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    font-size: 7px;
+    font-weight: 700;
+    color: white;
+  }
+
+  /* Volume Group */
+  .volume-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .volume-bar {
+    width: 64px;
+    position: relative;
+    cursor: pointer;
+    padding: 4px 0;
+  }
+
+  .volume-track {
+    height: 2px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 1px;
+    overflow: hidden;
+  }
+
+  .volume-fill {
+    height: 100%;
+    background: white;
+    border-radius: 1px;
+  }
+
+  /* Progress Bar */
+  .progress-bar {
+    margin-top: 8px;
+    margin-left: -8px;
+    margin-right: -8px;
+    position: relative;
+    cursor: pointer;
+    padding: 4px 0;
+  }
+
+  .progress-track {
+    height: 2px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 1px;
+    overflow: hidden;
+  }
+
+  .progress-fill {
+    height: 100%;
+    background: white;
+    border-radius: 1px;
+    transition: width 100ms linear;
+  }
+
+  /* Responsive */
+  @media (max-width: 800px) {
+    .player-bar {
+      min-width: auto;
+      width: calc(100vw - 32px);
+      max-width: 700px;
+      padding: 10px 16px;
+    }
+
+    .controls-row {
+      gap: 8px;
+    }
+
+    .volume-bar {
+      width: 48px;
+    }
+
+    .control-btn.play-btn {
+      width: 44px;
+      height: 44px;
+    }
+  }
+
+  @media (max-width: 600px) {
+    .controls-wrapper {
+      bottom: 16px;
+    }
+
+    .player-bar {
+      border-radius: 12px;
+      padding: 8px 12px;
+    }
+
+    .volume-group {
+      display: none;
+    }
+
+    .playback-group {
+      gap: 8px;
+    }
+  }
+</style>

src/lib/components/immersive/index.ts

@@ -4,6 +4,7 @@ export { default as ImmersiveBackground } from './ImmersiveBackground.svelte';
 export { default as ImmersiveArtwork } from './ImmersiveArtwork.svelte';
 export { default as ImmersiveHeader } from './ImmersiveHeader.svelte';
 export { default as ImmersiveControls } from './ImmersiveControls.svelte';
+export { default as PlayerControlsCompact } from './PlayerControlsCompact.svelte';
 
 // Panels
 export { default as LyricsPanel } from './panels/LyricsPanel.svelte';