feat: v1.14.0 — Critical Buffer Fix, Gapless/Crossfade stable, UX polish

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

src/components/AlbumHeader.tsx

@@ -103,6 +103,7 @@ export default function AlbumHeader({
 
   const totalDuration = songs.reduce((acc, s) => acc + s.duration, 0);
   const totalSize = songs.reduce((acc, s) => acc + (s.size ?? 0), 0);
+  const formatLabel = [...new Set(songs.map(s => s.suffix).filter((f): f is string => !!f))].map(f => f.toUpperCase()).join(' / ');
 
   return (
     <>
@@ -159,6 +160,7 @@ export default function AlbumHeader({
                 {info.genre && <span>· {info.genre}</span>}
                 <span>· {songs.length} Tracks</span>
                 <span>· {formatDuration(totalDuration)}</span>
+                {formatLabel && <span>· {formatLabel}</span>}
                 {info.recordLabel && (
                   <>
                     <span className="album-info-dot">·</span>

src/components/Hero.tsx

@@ -80,6 +80,18 @@ export default function Hero({ albums: albumsProp }: HeroProps = {}) {
 
   const album = albums[activeIdx] ?? null;
 
+  // Lazily fetch format label for the currently-visible album (cached by id)
+  const [albumFormats, setAlbumFormats] = useState<Record<string, string>>({});
+  useEffect(() => {
+    if (!album || albumFormats[album.id] !== undefined) return;
+    getAlbum(album.id).then(data => {
+      const fmts = [...new Set(data.songs.map(s => s.suffix).filter((f): f is string => !!f))];
+      setAlbumFormats(prev => ({ ...prev, [album.id]: fmts.map(f => f.toUpperCase()).join(' / ') }));
+    }).catch(() => {
+      setAlbumFormats(prev => ({ ...prev, [album.id]: '' }));
+    });
+  }, [album?.id]);
+
   // Resolve background URL via cache
   const bgRawUrl = album?.coverArt ? buildCoverArtUrl(album.coverArt, 800) : '';
   const bgCacheKey = album?.coverArt ? coverArtCacheKey(album.coverArt, 800) : '';
@@ -120,6 +132,7 @@ export default function Hero({ albums: albumsProp }: HeroProps = {}) {
             {album.year && <span className="badge">{album.year}</span>}
             {album.genre && <span className="badge">{album.genre}</span>}
             {album.songCount && <span className="badge">{album.songCount} Tracks</span>}
+            {albumFormats[album.id] && <span className="badge">{albumFormats[album.id]}</span>}
           </div>
           <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
             <button

src/components/QueuePanel.tsx

@@ -318,20 +318,19 @@ export default function QueuePanel() {
       </div>
 
       {currentTrack && (
-        <div className="queue-current-track">
+        <div className="queue-current-track" style={{ position: 'relative' }}>
+          {(currentTrack.bitRate || currentTrack.suffix) && (
+            <div className="queue-current-tech">
+              {currentTrack.suffix?.toUpperCase() ?? ''}
+              {currentTrack.bitRate ? ` · ${currentTrack.bitRate}` : ''}
+            </div>
+          )}
           <div className="queue-current-cover">
             {currentTrack.coverArt ? (
               <img src={buildCoverArtUrl(currentTrack.coverArt, 128)} alt="" loading="eager" />
             ) : (
               <div className="fallback"><Music size={32} /></div>
             )}
-            {(currentTrack.bitRate || currentTrack.suffix) && (
-              <div className="queue-current-tech">
-                {currentTrack.bitRate && currentTrack.suffix
-                  ? `${currentTrack.bitRate} · ${currentTrack.suffix.toUpperCase()}`
-                  : currentTrack.suffix?.toUpperCase() ?? ''}
-              </div>
-            )}
           </div>
           <div className="queue-current-info">
             <h3 className="truncate">{currentTrack.title}</h3>
@@ -370,7 +369,7 @@ export default function QueuePanel() {
         <div className="queue-toolbar-sep" />
         <button
           className={`queue-round-btn${gaplessEnabled ? ' active' : ''}`}
-          onClick={() => setGaplessEnabled(!gaplessEnabled)}
+          onClick={() => { setCrossfadeEnabled(false); setShowCrossfadePopover(false); setGaplessEnabled(!gaplessEnabled); }}
           data-tooltip={t('queue.gapless')}
           aria-label={t('queue.gapless')}
         >
@@ -385,6 +384,7 @@ export default function QueuePanel() {
                 setCrossfadeEnabled(false);
                 setShowCrossfadePopover(false);
               } else {
+                setGaplessEnabled(false);
                 setCrossfadeEnabled(true);
                 setShowCrossfadePopover(true);
               }

src/components/WaveformSeek.tsx

@@ -1,6 +1,11 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { usePlayerStore } from '../store/playerStore';
 
+function fmt(s: number): string {
+  if (!s || isNaN(s)) return '0:00';
+  return `${Math.floor(s / 60)}:${Math.floor(s % 60).toString().padStart(2, '0')}`;
+}
+
 const BAR_COUNT = 500;
 
 function hashStr(str: string): number {
@@ -125,9 +130,12 @@ export default function WaveformSeek({ trackId }: Props) {
   const bufferedRef = useRef(0);
   const isDragging  = useRef(false);
 
+  const [hoverPct, setHoverPct] = useState<number | null>(null);
+
   const progress = usePlayerStore(s => s.progress);
   const buffered = usePlayerStore(s => s.buffered);
   const seek     = usePlayerStore(s => s.seek);
+  const duration = usePlayerStore(s => s.currentTrack?.duration ?? 0);
 
   progressRef.current = progress;
   bufferedRef.current = buffered;
@@ -175,14 +183,30 @@ export default function WaveformSeek({ trackId }: Props) {
   }, []);
 
   return (
-    <canvas
-      ref={canvasRef}
-      style={{ width: '100%', height: '24px', cursor: trackId ? 'pointer' : 'default', display: 'block' }}
-      onMouseDown={e => {
-        isDragging.current = true;
-        const rect = e.currentTarget.getBoundingClientRect();
-        seekRef.current(Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width)));
-      }}
-    />
+    <div style={{ position: 'relative', width: '100%' }}>
+      {hoverPct !== null && duration > 0 && (
+        <span
+          className="player-volume-pct"
+          style={{ left: `${hoverPct * 100}%` }}
+        >
+          {fmt(hoverPct * duration)}
+        </span>
+      )}
+      <canvas
+        ref={canvasRef}
+        style={{ width: '100%', height: '24px', cursor: trackId ? 'pointer' : 'default', display: 'block' }}
+        onMouseDown={e => {
+          isDragging.current = true;
+          const rect = e.currentTarget.getBoundingClientRect();
+          seekRef.current(Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width)));
+        }}
+        onMouseMove={e => {
+          if (!trackId) return;
+          const rect = e.currentTarget.getBoundingClientRect();
+          setHoverPct(Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width)));
+        }}
+        onMouseLeave={() => setHoverPct(null)}
+      />
+    </div>
   );
 }