feat: Gapless playback, seek recovery, buffered indicator, and UI polish (v1.0.9)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

CHANGELOG.md

@@ -5,6 +5,26 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.9] - 2026-03-13
+
+### Added
+- **Gapless Playback**: The next track's audio pipeline is silently pre-warmed before the current track ends, eliminating the gap between songs — especially noticeable on live albums and concept records.
+- **Pre-caching**: Prefetched Howl instances are now actually reused for playback, giving near-instant track transitions instead of a new HTTP connection each time.
+- **Buffered Progress Indicator**: The seek bar now shows a secondary fill indicating how much of the current track has been buffered by the browser — visible in both the Player Bar and Fullscreen Player.
+- **Resume on Startup**: Pressing Play after launching the app now resumes the last track at the saved playback position instead of doing nothing.
+- **Album Track Hover Play Button**: Hovering over a track number in Album Detail reveals a play button for quick single-click playback.
+- **Ken Burns Background**: The Fullscreen Player background now slowly drifts and zooms (Ken Burns effect) for a more cinematic feel.
+- **F11 Fullscreen**: Toggle native borderless fullscreen with F11.
+- **Compact Queue Now-Playing**: The current track block in the Queue Panel is now a slim horizontal strip (72 px thumbnail) instead of a full-width cover, freeing up significantly more space for the queue list on smaller screens.
+
+### Fixed
+- **GStreamer Seek Stability**: Implemented a three-layer recovery system for Linux/GStreamer seek hangs: (1) seek queuing to prevent overlapping GStreamer seeks, (2) a 2-second watchdog that triggers automatic recovery if a seek never completes, (3) an 8-second hang detector that silently recreates the audio pipeline and resumes from the last known position if playback freezes entirely.
+- **Fullscreen Player**: Removed drop shadow from cover art — looks cleaner on lighter artist backgrounds.
+
+### Changed
+- **Hero Section**: Increased height (300 → 360 px) and cover art size (180 → 220 px) to prevent long album titles from clipping.
+- **Player Bar**: Controls and progress bar moved closer together for a more balanced layout.
+
 ## [1.0.8] - 2026-03-13
 
 ### Added

README.md

@@ -16,9 +16,6 @@ Psysonic is a beautiful desktop music player built completely from the ground up
 
 Designed specifically for users hosting their own music via Navidrome or other Subsonic API servers, Psysonic aims to be the best way to interact with your personal library.
 
-Known Limitations
-
-Linux (drag & drop cursor feedback): Due to a WebKitGTK limitation, the drag cursor does not reflect the drop operation type — it may appear as a "forbidden" symbol or show no indicator at all, depending on the desktop environment. Drag and drop itself works correctly.
 
 ![Psysonic Screenshot](public/screenshot.png)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "psysonic",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "private": true,
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.lock

@@ -2732,7 +2732,7 @@ dependencies = [
 
 [[package]]
 name = "psysonic"
-version = "1.0.8"
+version = "1.0.9"
 dependencies = [
  "serde",
  "serde_json",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "psysonic"
-version = "1.0.8"
+version = "1.0.9"
 description = "Psysonic Desktop Music Player"
 authors = []
 license = ""

src-tauri/capabilities/default.json

@@ -25,6 +25,8 @@
     "core:window:allow-set-title",
     "core:window:allow-close",
     "core:window:allow-hide",
-    "core:window:allow-show"
+    "core:window:allow-show",
+    "core:window:allow-set-fullscreen",
+    "core:window:allow-is-fullscreen"
   ]
 }

src-tauri/gen/schemas/capabilities.json

@@ -1 +1 @@
-{"default":{"identifier":"default","description":"Default capabilities for Psysonic","local":true,"windows":["main"],"permissions":["core:default","shell:default","shell:allow-open","notification:default","global-shortcut:allow-register","global-shortcut:allow-unregister","store:default","store:allow-load","store:allow-set","store:allow-get","store:allow-save","dialog:default","dialog:allow-open","fs:default","fs:allow-write-file","fs:allow-mkdir","fs:scope-download-recursive","core:window:allow-set-title","core:window:allow-close","core:window:allow-hide","core:window:allow-show"],"platforms":["linux","macOS","windows"]}}
+{"default":{"identifier":"default","description":"Default capabilities for Psysonic","local":true,"windows":["main"],"permissions":["core:default","shell:default","shell:allow-open","notification:default","global-shortcut:allow-register","global-shortcut:allow-unregister","store:default","store:allow-load","store:allow-set","store:allow-get","store:allow-save","dialog:default","dialog:allow-open","fs:default","fs:allow-write-file","fs:allow-mkdir","fs:scope-download-recursive","core:window:allow-set-title","core:window:allow-close","core:window:allow-hide","core:window:allow-show","core:window:allow-set-fullscreen","core:window:allow-is-fullscreen"],"platforms":["linux","macOS","windows"]}}

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Psysonic",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "identifier": "dev.psysonic.app",
   "build": {
     "beforeDevCommand": "npm run dev",

src/App.tsx

@@ -184,9 +184,15 @@ function TauriEventBridge() {
   const previous = usePlayerStore(s => s.previous);
   const { minimizeToTray } = useAuthStore();
 
-  // Spacebar → play/pause (ignore when focus is in an input)
+  // Spacebar → play/pause, F11 → window fullscreen
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
+      if (e.code === 'F11') {
+        e.preventDefault();
+        const win = getCurrentWindow();
+        win.isFullscreen().then(fs => win.setFullscreen(!fs));
+        return;
+      }
       if (e.code !== 'Space') return;
       const tag = (e.target as HTMLElement)?.tagName;
       if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;

src/components/FullscreenPlayer.tsx

@@ -52,6 +52,7 @@ const FsBg = memo(function FsBg({ url }: { url: string }) {
 // ─── Progress bar (isolated — re-renders every tick) ──────────────────────────
 const FsProgress = memo(function FsProgress({ duration }: { duration: number }) {
   const progress    = usePlayerStore(s => s.progress);
+  const buffered    = usePlayerStore(s => s.buffered);
   const currentTime = usePlayerStore(s => s.currentTime);
   const seek        = usePlayerStore(s => s.seek);
 
@@ -60,6 +61,9 @@ const FsProgress = memo(function FsProgress({ duration }: { duration: number })
     [seek]
   );
 
+  const pct = progress * 100;
+  const buf = Math.max(pct, buffered * 100);
+
   return (
     <div className="fs-progress-wrap">
       <span className="fs-time">{formatTime(currentTime)}</span>
@@ -68,7 +72,10 @@ const FsProgress = memo(function FsProgress({ duration }: { duration: number })
           type="range" min={0} max={1} step={0.001}
           value={progress}
           onChange={handleSeek}
-          style={{ '--pct': `${progress * 100}%` } as React.CSSProperties}
+          style={{
+            '--pct': `${pct}%`,
+            '--buf': `${buf}%`,
+          } as React.CSSProperties}
           aria-label="progress"
         />
       </div>

src/components/PlayerBar.tsx

@@ -16,7 +16,7 @@ function formatTime(seconds: number): string {
 
 export default function PlayerBar() {
   const { t } = useTranslation();
-  const { currentTrack, isPlaying, progress, currentTime, volume, togglePlay, next, previous, seek, setVolume, isQueueVisible, toggleQueue, stop, toggleRepeat, repeatMode, toggleFullscreen } = usePlayerStore();
+  const { currentTrack, isPlaying, progress, buffered, currentTime, volume, togglePlay, next, previous, seek, setVolume, isQueueVisible, toggleQueue, stop, toggleRepeat, repeatMode, toggleFullscreen } = usePlayerStore();
 
   const duration = currentTrack?.duration ?? 0;
   const coverSrc = useMemo(() => currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 128) : '', [currentTrack?.coverArt]);
@@ -30,8 +30,10 @@ export default function PlayerBar() {
     setVolume(parseFloat(e.target.value));
   }, [setVolume]);
 
+  const pct = progress * 100;
+  const buf = Math.max(pct, buffered * 100);
   const progressStyle = {
-    background: `linear-gradient(to right, var(--ctp-mauve) ${progress * 100}%, var(--ctp-surface2) ${progress * 100}%)`,
+    background: `linear-gradient(to right, var(--ctp-mauve) ${pct}%, var(--ctp-overlay0) ${pct}%, var(--ctp-overlay0) ${buf}%, var(--ctp-surface2) ${buf}%)`,
   };
 
   const volumeStyle = {

src/components/QueuePanel.tsx

@@ -253,7 +253,7 @@ export default function QueuePanel() {
         <div className="queue-current-track">
           <div className="queue-current-cover">
             {currentTrack.coverArt ? (
-              <img src={buildCoverArtUrl(currentTrack.coverArt, 400)} alt="" loading="eager" />
+              <img src={buildCoverArtUrl(currentTrack.coverArt, 128)} alt="" loading="eager" />
             ) : (
               <div className="fallback"><Music size={32} /></div>
             )}

src/components/Sidebar.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { version as appVersion } from '../../package.json';
 import { NavLink } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
@@ -74,17 +75,15 @@ export default function Sidebar({
     let cancelled = false;
     const timer = setTimeout(async () => {
       try {
-        const { getVersion } = await import('@tauri-apps/api/app');
-        const current = await getVersion();
         const res = await fetch('https://api.github.com/repos/Psychotoxical/psysonic/releases/latest');
         if (!res.ok) return;
         const data = await res.json();
         const tag: string = data.tag_name ?? '';
-        if (!cancelled && tag && isNewer(tag, current)) {
+        if (!cancelled && tag && isNewer(tag, appVersion)) {
           setLatestVersion(tag.startsWith('v') ? tag : `v${tag}`);
         }
       } catch {
-        // network unavailable or not running in Tauri — silently skip
+        // network unavailable — silently skip
       }
     }, 1500);
     return () => { cancelled = true; clearTimeout(timer); };

src/pages/AlbumDetail.tsx

@@ -110,6 +110,7 @@ export default function AlbumDetail() {
   const [downloadProgress, setDownloadProgress] = useState<number | null>(null);
   const [isStarred, setIsStarred] = useState(false);
   const [starredSongs, setStarredSongs] = useState<Set<string>>(new Set());
+  const [hoveredSongId, setHoveredSongId] = useState<string | null>(null);
 
   useEffect(() => {
     if (!id) return;
@@ -405,6 +406,8 @@ export default function AlbumDetail() {
                 <div
                   key={song.id}
                   className={`track-row${hasVariousArtists ? ' track-row-va' : ''}`}
+                  onMouseEnter={() => setHoveredSongId(song.id)}
+                  onMouseLeave={() => setHoveredSongId(null)}
                   onDoubleClick={() => handlePlaySong(song)}
                   onContextMenu={(e) => {
                     e.preventDefault();
@@ -427,7 +430,15 @@ export default function AlbumDetail() {
                     e.dataTransfer.setData('text/plain', JSON.stringify({ type: 'song', track }));
                   }}
                 >
-                  <div className="track-num" style={{ textAlign: 'center' }}>{song.track ?? i + 1}</div>
+                  <div
+                    className="track-num"
+                    style={{ textAlign: 'center', cursor: hoveredSongId === song.id ? 'pointer' : 'default', color: hoveredSongId === song.id ? 'var(--accent)' : undefined }}
+                    onClick={() => handlePlaySong(song)}
+                  >
+                    {hoveredSongId === song.id
+                      ? <Play size={13} fill="currentColor" />
+                      : (song.track ?? i + 1)}
+                  </div>
                   <div className="track-info">
                     <span className="track-title" data-tooltip={song.title}>{song.title}</span>
                   </div>

src/pages/Settings.tsx

@@ -374,7 +374,7 @@ export default function Settings() {
                 Psysonic
               </div>
               <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>
-                {t('settings.aboutVersion')} 1.0.8
+                {t('settings.aboutVersion')} 1.0.9
               </div>
             </div>
           </div>

src/store/playerStore.ts

@@ -26,6 +26,7 @@ interface PlayerState {
   queueIndex: number;
   isPlaying: boolean;
   progress: number; // 0–1
+  buffered: number; // 0–1
   currentTime: number;
   volume: number;
   howl: Howl | null;
@@ -76,9 +77,13 @@ interface PlayerState {
 
 let progressInterval: ReturnType<typeof setInterval> | null = null;
 let seekDebounce: ReturnType<typeof setTimeout> | null = null;
-// Blocks progress interval from overwriting the UI position while GStreamer
-// processes a seek on the HTTP pipeline (can take several hundred ms on Linux).
-let isSeeking = false;
+let gstSeeking = false;           // true while GStreamer is processing a seek
+let pendingSeekTime: number | null = null; // queue at most one seek
+let gstSeekWatchdog: ReturnType<typeof setTimeout> | null = null; // safety release if onseek never fires
+let hangRecoveryPos: number | null = null; // set before a recovery playTrack call so onplay seeks here
+let gaplessPrewarmedId: string | null = null; // track id whose prefetched Howl has been silently pre-started
+let hangLastTime = -1;            // last observed currentTime for hang detection
+let hangStallTime = 0;            // Date.now() when currentTime last moved
 
 function clearProgress() {
   if (progressInterval) {
@@ -87,6 +92,18 @@ function clearProgress() {
   }
 }
 
+function armGstWatchdog(cb: () => void) {
+  if (gstSeekWatchdog) clearTimeout(gstSeekWatchdog);
+  gstSeekWatchdog = setTimeout(() => {
+    gstSeekWatchdog = null;
+    cb();
+  }, 2000);
+}
+
+function disarmGstWatchdog() {
+  if (gstSeekWatchdog) { clearTimeout(gstSeekWatchdog); gstSeekWatchdog = null; }
+}
+
 // Helper to debounce or fire queue syncs
 let syncTimeout: ReturnType<typeof setTimeout> | null = null;
 function syncQueueToServer(queue: Track[], currentTrack: Track | null, currentTime: number) {
@@ -110,6 +127,7 @@ export const usePlayerStore = create<PlayerState>()(
       queueIndex: 0,
       isPlaying: false,
       progress: 0,
+      buffered: 0,
       currentTime: 0,
       volume: 0.8,
       howl: null,
@@ -140,7 +158,7 @@ export const usePlayerStore = create<PlayerState>()(
     get().howl?.stop();
     get().howl?.seek(0);
     clearProgress();
-    set({ isPlaying: false, progress: 0, currentTime: 0 });
+    set({ isPlaying: false, progress: 0, buffered: 0, currentTime: 0 });
   },
 
   playTrack: (track, queue) => {
@@ -149,64 +167,147 @@ export const usePlayerStore = create<PlayerState>()(
     state.howl?.unload();
     clearProgress();
     if (seekDebounce) { clearTimeout(seekDebounce); seekDebounce = null; }
-    isSeeking = false;
+    disarmGstWatchdog();
+    gstSeeking = false;
+    pendingSeekTime = null;
+    hangLastTime = -1;
+    hangStallTime = 0;
+    gaplessPrewarmedId = null;
 
     const newQueue = queue ?? state.queue;
     const idx = newQueue.findIndex(t => t.id === track.id);
 
-    const url = buildStreamUrl(track.id);
-    const howl = new Howl({
-      src: [url],
-      html5: true,
-      volume: state.volume,
-      onplay: () => {
-        set({ isPlaying: true });
-        // Subsonic / Navidrome Now Playing
-        reportNowPlaying(track.id);
+    // Reuse a prefetched Howl if available — it's already connected and buffering
+    const prefetchMap = state.prefetched;
+    let howl: Howl;
+    let gaplessHandoff = false;
+    if (prefetchMap.has(track.id)) {
+      howl = prefetchMap.get(track.id)!;
+      prefetchMap.delete(track.id);
+      set({ prefetched: new Map(prefetchMap) });
+      if (howl.playing()) {
+        // Gapless: pipeline already running — pause, seek to 0, then play
+        gaplessHandoff = true;
+        howl.pause();
+        hangRecoveryPos = 0; // onplay will seek to position 0
+      }
+      howl.volume(state.volume);
+    } else {
+      howl = new Howl({ src: [buildStreamUrl(track.id)], html5: true, volume: state.volume });
+    }
 
-        set({ scrobbled: false });
-        progressInterval = setInterval(() => {
-          const h = get().howl;
-          if (!h) return;
-          // Skip position updates while a seek is in flight — GStreamer may
-          // still report the old position and would overwrite the UI value.
-          if (isSeeking) return;
-          const cur = typeof h.seek() === 'number' ? h.seek() as number : 0;
-          const dur = h.duration() || 1;
-          const prog = cur / dur;
+    howl.on('play', () => {
+      set({ isPlaying: true });
+      reportNowPlaying(track.id);
+
+      // If recovering from a pipeline hang, seek to the saved position
+      if (hangRecoveryPos !== null) {
+        const pos = hangRecoveryPos;
+        hangRecoveryPos = null;
+        gstSeeking = true;
+        armGstWatchdog(() => { gstSeeking = false; pendingSeekTime = null; });
+        setTimeout(() => { howl.seek(pos); }, 50);
+      }
+
+      set({ scrobbled: false });
+      hangStallTime = Date.now();
+      hangLastTime = -1;
+
+      progressInterval = setInterval(() => {
+        const h = get().howl;
+        if (!h) return;
+        const s = h.seek();
+        const cur = typeof s === 'number' ? s : 0;
+        const dur = h.duration() || 1;
+        const prog = cur / dur;
+
+        // Read buffered ranges from the underlying <audio> element
+        const audioNode = (h as any)._sounds?.[0]?._node as HTMLAudioElement | undefined;
+        if (audioNode?.buffered && audioNode.duration > 0) {
+          let totalBuf = 0;
+          for (let i = 0; i < audioNode.buffered.length; i++) {
+            totalBuf += audioNode.buffered.end(i) - audioNode.buffered.start(i);
+          }
+          set({ currentTime: cur, progress: prog, buffered: Math.min(1, totalBuf / audioNode.duration) });
+        } else {
           set({ currentTime: cur, progress: prog });
+        }
 
-          // Scrobble at 50%
-          if (prog >= 0.5 && !get().scrobbled) {
-            set({ scrobbled: true });
-            const { scrobblingEnabled } = useAuthStore.getState();
-            if (scrobblingEnabled) {
-              scrobbleSong(track.id, Date.now());
+        // Hang detection: if playing but currentTime hasn't moved in 5s, recover
+        if (Math.abs(cur - hangLastTime) > 0.05) {
+          hangLastTime = cur;
+          hangStallTime = Date.now();
+        } else if (get().isPlaying && Date.now() - hangStallTime > 5000) {
+          const { currentTrack: ct, queue: q } = get();
+          if (ct) {
+            hangRecoveryPos = cur;
+            hangStallTime = Date.now(); // prevent re-trigger while recovering
+            get().playTrack(ct, q);
+          }
+          return;
+        }
+
+          // Gapless pre-warm: start next track's Howl silently ~1s before end
+          if (!gaplessPrewarmedId && dur > 2 && dur - cur < 1.0) {
+            const { queue: q, queueIndex: qi, repeatMode: rm, prefetched: pf } = get();
+            const nextIdx = qi + 1;
+            const nextTrack = nextIdx < q.length ? q[nextIdx]
+              : (rm === 'all' && q.length > 0 ? q[0] : null);
+            if (nextTrack && pf.has(nextTrack.id)) {
+              const nh = pf.get(nextTrack.id)!;
+              if (!nh.playing()) { nh.volume(0); nh.play(); gaplessPrewarmedId = nextTrack.id; }
             }
           }
-        }, 500);
 
-        // Prefetch next 3
-        get().prefetchUpcoming(idx + 1, newQueue);
-      },
-      onend: () => {
-        clearProgress();
-        set({ isPlaying: false, progress: 0, currentTime: 0 });
-        const { repeatMode, currentTrack, queue } = get();
-        if (repeatMode === 'one' && currentTrack) {
-          get().playTrack(currentTrack, queue);
-        } else {
-          get().next();
+        // Scrobble at 50%
+        if (prog >= 0.5 && !get().scrobbled) {
+          set({ scrobbled: true });
+          const { scrobblingEnabled } = useAuthStore.getState();
+          if (scrobblingEnabled) scrobbleSong(track.id, Date.now());
         }
-      },
-      onstop: () => {
-        clearProgress();
-        set({ isPlaying: false });
-      },
+      }, 500);
+
+      // Prefetch next 3
+      get().prefetchUpcoming(idx + 1, newQueue);
     });
 
-    howl.play();
-    set({ currentTrack: track, queue: newQueue, queueIndex: idx >= 0 ? idx : 0, howl, progress: 0, currentTime: 0 });
+    howl.on('end', () => {
+      clearProgress();
+      set({ isPlaying: false, progress: 0, buffered: 0, currentTime: 0 });
+      const { repeatMode, currentTrack, queue } = get();
+      if (repeatMode === 'one' && currentTrack) {
+        get().playTrack(currentTrack, queue);
+      } else {
+        get().next();
+      }
+    });
+
+    howl.on('stop', () => {
+      clearProgress();
+      set({ isPlaying: false });
+    });
+
+    howl.on('seek', () => {
+      disarmGstWatchdog();
+      gstSeeking = false;
+      hangLastTime = -1;
+      hangStallTime = Date.now();
+      if (pendingSeekTime !== null) {
+        const t = pendingSeekTime;
+        pendingSeekTime = null;
+        gstSeeking = true;
+        armGstWatchdog(() => {
+          gstSeeking = false;
+          pendingSeekTime = null;
+          const { currentTrack: ct, queue: q } = get();
+          if (ct) { hangRecoveryPos = t; get().playTrack(ct, q); }
+        });
+        get().howl?.seek(t);
+      }
+    });
+
+    howl.play(); // for gapless: resumes from paused state, onplay fires and seeks to 0 via hangRecoveryPos
+    set({ currentTrack: track, queue: newQueue, queueIndex: idx >= 0 ? idx : 0, howl, progress: 0, buffered: 0, currentTime: 0 });
     syncQueueToServer(newQueue, track, 0);
   },
 
@@ -217,8 +318,14 @@ export const usePlayerStore = create<PlayerState>()(
   },
 
   resume: () => {
-    const { howl, currentTrack } = get();
-    if (!howl || !currentTrack) return;
+    const { howl, currentTrack, queue, currentTime } = get();
+    if (!currentTrack) return;
+    if (!howl) {
+      // Cold start from restored state (e.g. app relaunch) — resume from saved position
+      if (currentTime > 0) hangRecoveryPos = currentTime;
+      get().playTrack(currentTrack, queue);
+      return;
+    }
     howl.play();
     set({ isPlaying: true });
   },
@@ -253,28 +360,24 @@ export const usePlayerStore = create<PlayerState>()(
     const { howl, currentTrack } = get();
     if (!howl || !currentTrack) return;
     const time = progress * (howl.duration() || currentTrack.duration);
-    // Update UI immediately and block interval from overwriting it.
     set({ progress, currentTime: time });
-    isSeeking = true;
-    // Debounce so rapid slider drags collapse into one seek.
     if (seekDebounce) clearTimeout(seekDebounce);
     seekDebounce = setTimeout(() => {
-      const h = get().howl;
-      if (!h) { isSeeking = false; seekDebounce = null; return; }
-      // GStreamer HTTP pipelines require the element to be paused before a
-      // seek is accepted reliably. Seek while playing can silently fail on
-      // Linux (tested on Mint + CachyOS), leaving the pipeline at the old
-      // position on the next seek.
-      const wasPlaying = h.playing();
-      if (wasPlaying) h.pause();
-      h.seek(time);
-      // Resume after GStreamer has had time to flush and re-buffer.
-      seekDebounce = setTimeout(() => {
-        const h2 = get().howl;
-        if (h2 && wasPlaying) h2.play();
-        isSeeking = false;
-        seekDebounce = null;
-      }, 300);
+      seekDebounce = null;
+      if (gstSeeking) {
+        // GStreamer busy — queue this position; onseek will send it when ready
+        pendingSeekTime = time;
+        return;
+      }
+      gstSeeking = true;
+      const seekTarget = time;
+      armGstWatchdog(() => {
+        gstSeeking = false;
+        pendingSeekTime = null;
+        const { currentTrack: ct, queue: q } = get();
+        if (ct) { hangRecoveryPos = seekTarget; get().playTrack(ct, q); }
+      });
+      get().howl?.seek(time);
     }, 100);
   },
 
@@ -299,7 +402,7 @@ export const usePlayerStore = create<PlayerState>()(
   clearQueue: () => {
     get().howl?.unload();
     clearProgress();
-    set({ queue: [], queueIndex: 0, currentTrack: null, isPlaying: false, progress: 0, currentTime: 0, howl: null });
+    set({ queue: [], queueIndex: 0, currentTrack: null, isPlaying: false, progress: 0, buffered: 0, currentTime: 0, howl: null });
     syncQueueToServer([], null, 0);
   },
 

src/styles/components.css

@@ -4,14 +4,14 @@
 .hero {
   position: relative;
   width: 100%;
-  height: 300px;
+  height: 360px;
   overflow: hidden;
   flex-shrink: 0;
 }
 
 .hero-placeholder {
   width: 100%;
-  height: 300px;
+  height: 360px;
   background: linear-gradient(135deg, var(--ctp-surface0), var(--ctp-mantle));
   flex-shrink: 0;
 }
@@ -74,8 +74,8 @@
 }
 
 .hero-cover {
-  width: 180px;
-  height: 180px;
+  width: 220px;
+  height: 220px;
   border-radius: var(--radius-md);
   box-shadow: 0 4px 20px rgba(0,0,0,0.6);
   object-fit: cover;
@@ -930,13 +930,22 @@
   50%       { transform: scale(1.018); }
 }
 
+@keyframes ken-burns {
+  0%   { transform: scale(1.08) translate(0%, 0%); }
+  25%  { transform: scale(1.12) translate(-1.5%, 1%); }
+  50%  { transform: scale(1.10) translate(1%, -1.5%); }
+  75%  { transform: scale(1.13) translate(1.5%, 0.5%); }
+  100% { transform: scale(1.08) translate(0%, 0%); }
+}
+
 /* ── Blurred background ── */
 .fs-bg {
   position: absolute;
-  inset: -10%;
+  inset: -15%;
   background-size: cover;
   background-position: center;
   filter: blur(6px) brightness(0.25) saturate(1.6);
+  animation: ken-burns 40s ease-in-out infinite;
   transform: scale(1.2);
   z-index: 0;
   will-change: opacity;
@@ -1036,10 +1045,7 @@
   aspect-ratio: 1 / 1;
   border-radius: var(--radius-xl);
   overflow: hidden;
-  box-shadow:
-    0 30px 90px rgba(0, 0, 0, 0.75),
-    0 0 0 1px rgba(255, 255, 255, 0.07),
-    0 0 80px rgba(0, 0, 0, 0.4);
+  box-shadow: none;
   flex-shrink: 0;
   animation: cover-breathe 9s ease-in-out infinite;
 }
@@ -1119,8 +1125,10 @@
   height: 3px;
   background: linear-gradient(
     to right,
-    rgba(255,255,255,0.85) var(--pct),
-    rgba(255,255,255,0.15) var(--pct)
+    rgba(255,255,255,0.85) var(--pct, 0%),
+    rgba(255,255,255,0.32) var(--pct, 0%),
+    rgba(255,255,255,0.32) var(--buf, 0%),
+    rgba(255,255,255,0.15) var(--buf, 0%)
   );
   border-radius: 2px;
   cursor: pointer;

src/styles/layout.css

@@ -370,7 +370,8 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--space-2);
+  gap: 2px;
+  padding: 12px 0;
 }
 
 .player-buttons {
@@ -507,23 +508,26 @@
 }
 
 .queue-current-track {
-  padding: var(--space-4);
+  padding: var(--space-3) var(--space-4);
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  align-items: center;
   gap: var(--space-3);
   flex-shrink: 0;
+  border-bottom: 1px solid var(--border-subtle);
 }
 
 .queue-current-cover {
-  width: 100%;
-  aspect-ratio: 1 / 1;
+  width: 72px;
+  height: 72px;
+  flex-shrink: 0;
   border-radius: var(--radius-md);
   overflow: hidden;
   background: var(--bg-surface);
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
 }
 
 .queue-current-cover img {
@@ -540,10 +544,12 @@
   display: flex;
   flex-direction: column;
   gap: 2px;
+  min-width: 0;
+  flex: 1;
 }
 
 .queue-current-info h3 {
-  font-size: 16px;
+  font-size: 13px;
   font-weight: 700;
   margin: 0;
   color: var(--text-primary);
@@ -567,7 +573,7 @@
 }
 
 .queue-divider {
-  padding: var(--space-4) var(--space-5) 0;
+  padding: var(--space-3) var(--space-4) 0;
   flex-shrink: 0;
 }