feat(player): preview indicator in player bar + smart stop semantics (#394)

* feat(player): preview-active state on play button (ring + stop icon)

Checkpoint: play button mirrors the inline preview button from tracklists
during preview playback — hollow circle, accent ring depleting over the
preview duration, Square (stop) icon. Click still resumes main playback,
which the Rust audio engine cancels the preview for.

i18n key player.previewActive in all 8 locales for tooltip + aria-label.


* feat(player): show preview track in player bar + smart stop semantics

The player-bar info cell (cover, title, artist) now mirrors the previewing
track during preview playback, with a small accent "Preview" pill above
the title and an accent top-border on the bar. Rating, fullscreen hint
and album/artist link clicks are suppressed while previewing — they
target the queued track, not the preview.

Stop semantics for the two transport buttons during preview:
- Big play button (Square+ring visual): stops preview, main auto-resumes
  if it was playing before. Matches the tracklist preview-button behaviour.
- Small Stop button: new audio_preview_stop_silent Rust command — stops
  preview AND leaves main paused, so "Stop = silence" actually goes silent.

previewStore now stores the full PreviewingTrack (id, title, artist,
coverArt) — the seven startPreview call sites pass it through.
i18n key player.previewLabel in all 8 locales.

src/components/AlbumTrackList.tsx

@@ -160,7 +160,7 @@ const TrackRow = React.memo(function TrackRow({
               className={`playlist-suggestion-preview-btn${isPreviewing ? ' is-previewing' : ''}`}
               onClick={e => {
                 e.stopPropagation();
-                usePreviewStore.getState().startPreview({ id: song.id, duration: song.duration }, 'albums');
+                usePreviewStore.getState().startPreview({ id: song.id, title: song.title, artist: song.artist, coverArt: song.coverArt, duration: song.duration }, 'albums');
               }}
               data-tooltip={isPreviewing ? t('playlists.previewStop') : t('playlists.preview')}
               aria-label={isPreviewing ? t('playlists.previewStop') : t('playlists.preview')}

src/components/PlayerBar.tsx

@@ -25,6 +25,7 @@ import { usePlaybackDelayPress } from '../hooks/usePlaybackDelayPress';
 import PlaybackDelayModal from './PlaybackDelayModal';
 import PlaybackScheduleBadge from './PlaybackScheduleBadge';
 import { usePlaybackScheduleRemaining } from '../utils/playbackScheduleFormat';
+import { usePreviewStore } from '../store/previewStore';
 
 function formatTime(seconds: number): string {
   if (!seconds || isNaN(seconds)) return '0:00';
@@ -144,6 +145,8 @@ export default function PlayerBar() {
   const transportAnchorRef = useRef<HTMLDivElement>(null);
   const playSlotRef = useRef<HTMLSpanElement>(null);
   const scheduleRemaining = usePlaybackScheduleRemaining();
+  const isPreviewing = usePreviewStore(s => s.previewingId !== null);
+  const previewingTrack = usePreviewStore(s => s.previewingTrack);
 
   const isRadio = !!currentRadio;
 
@@ -176,8 +179,15 @@ export default function PlayerBar() {
     [currentRadio?.coverArt, currentRadio?.id]
   );
   const radioCoverKey = currentRadio?.coverArt ? coverArtCacheKey(`ra-${currentRadio.id}`, 128) : '';
-  const coverSrc = useMemo(() => currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 128) : '', [currentTrack?.coverArt]);
-  const coverKey = currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 128) : '';
+  // Preview takes visual priority over the queued track in the player-bar info
+  // cell, but only when not in radio mode (radio has its own meta layout).
+  const showPreviewMeta = isPreviewing && !isRadio && previewingTrack !== null;
+  const displayCoverArt = showPreviewMeta ? previewingTrack!.coverArt : currentTrack?.coverArt;
+  const displayTitle = showPreviewMeta ? previewingTrack!.title : (currentTrack?.title ?? t('player.noTitle'));
+  const displayArtist = showPreviewMeta ? previewingTrack!.artist : (currentTrack?.artist ?? '—');
+
+  const coverSrc = useMemo(() => displayCoverArt ? buildCoverArtUrl(displayCoverArt, 128) : '', [displayCoverArt]);
+  const coverKey = displayCoverArt ? coverArtCacheKey(displayCoverArt, 128) : '';
 
   const handleVolume = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     setVolume(parseFloat(e.target.value));
@@ -196,7 +206,7 @@ export default function PlayerBar() {
   const playerBarContent = (
     <>
     <footer
-      className={`player-bar ${floatingPlayerBar ? 'floating' : ''}`}
+      className={`player-bar ${floatingPlayerBar ? 'floating' : ''}${showPreviewMeta ? ' is-previewing' : ''}`}
       style={floatingPlayerBar ? floatingStyle : undefined}
       role="region"
       aria-label={t('player.regionLabel')}
@@ -205,9 +215,9 @@ export default function PlayerBar() {
       {/* Track Info */}
       <div className="player-track-info">
         <div
-          className={`player-album-art-wrap ${currentTrack && !isRadio ? 'clickable' : ''}`}
-          onClick={() => !isRadio && currentTrack && toggleFullscreen()}
-          data-tooltip={!isRadio && currentTrack ? t('player.openFullscreen') : undefined}
+          className={`player-album-art-wrap ${currentTrack && !isRadio && !showPreviewMeta ? 'clickable' : ''}`}
+          onClick={() => !isRadio && !showPreviewMeta && currentTrack && toggleFullscreen()}
+          data-tooltip={!isRadio && !showPreviewMeta && currentTrack ? t('player.openFullscreen') : undefined}
         >
           {isRadio ? (
             currentRadio?.coverArt ? (
@@ -222,25 +232,30 @@ export default function PlayerBar() {
                 <Cast size={20} />
               </div>
             )
-          ) : currentTrack?.coverArt ? (
+          ) : displayCoverArt ? (
             <CachedImage
               className="player-album-art"
               src={coverSrc}
               cacheKey={coverKey}
-              alt={`${currentTrack.album} Cover`}
+              alt={showPreviewMeta ? `${previewingTrack!.title} Cover` : `${currentTrack?.album ?? ''} Cover`}
             />
           ) : (
             <div className="player-album-art-placeholder">
               <Music size={22} />
             </div>
           )}
-          {currentTrack && !isRadio && (
+          {currentTrack && !isRadio && !showPreviewMeta && (
             <div className="player-art-expand-hint" aria-hidden="true">
               <Maximize2 size={16} />
             </div>
           )}
         </div>
         <div className="player-track-meta">
+          {showPreviewMeta && (
+            <span className="player-preview-label" aria-label={t('player.previewActive')}>
+              {t('player.previewLabel')}
+            </span>
+          )}
           <MarqueeText
             text={isRadio
               ? (radioMeta.currentTitle
@@ -248,22 +263,22 @@ export default function PlayerBar() {
                       ? `${radioMeta.currentArtist} — ${radioMeta.currentTitle}`
                       : radioMeta.currentTitle)
                   : (currentRadio?.name ?? '—'))
-              : (currentTrack?.title ?? t('player.noTitle'))}
+              : displayTitle}
             className="player-track-name"
-            style={{ cursor: !isRadio && currentTrack?.albumId ? 'pointer' : 'default' }}
-            onClick={() => !isRadio && currentTrack?.albumId && navigate(`/album/${currentTrack.albumId}`)}
+            style={{ cursor: !isRadio && !showPreviewMeta && currentTrack?.albumId ? 'pointer' : 'default' }}
+            onClick={() => !isRadio && !showPreviewMeta && currentTrack?.albumId && navigate(`/album/${currentTrack.albumId}`)}
           />
           <MarqueeText
             text={isRadio
               ? (radioMeta.currentTitle && currentRadio?.name
                   ? currentRadio.name
                   : t('radio.liveStream'))
-              : (currentTrack?.artist ?? '—')}
+              : displayArtist}
             className="player-track-artist"
-            style={{ cursor: !isRadio && currentTrack?.artistId ? 'pointer' : 'default' }}
-            onClick={() => !isRadio && currentTrack?.artistId && navigate(`/artist/${currentTrack.artistId}`)}
+            style={{ cursor: !isRadio && !showPreviewMeta && currentTrack?.artistId ? 'pointer' : 'default' }}
+            onClick={() => !isRadio && !showPreviewMeta && currentTrack?.artistId && navigate(`/artist/${currentTrack.artistId}`)}
           />
-          {currentTrack && !isRadio && (
+          {currentTrack && !isRadio && !showPreviewMeta && (
             <StarRating
               value={userRatingOverrides[currentTrack.id] ?? currentTrack.userRating ?? 0}
               onChange={r => { setUserRatingOverride(currentTrack.id, r); setRating(currentTrack.id, r).catch(() => {}); }}
@@ -303,7 +318,19 @@ export default function PlayerBar() {
 
       {/* Transport Controls */}
       <div className="player-buttons" ref={transportAnchorRef}>
-        <button className="player-btn player-btn-sm" onClick={stop} aria-label={t('player.stop')} data-tooltip={t('player.stop')}>
+        <button
+          className="player-btn player-btn-sm"
+          onClick={() => {
+            if (isPreviewing) {
+              usePreviewStore.setState({ previewingId: null, previewingTrack: null, elapsed: 0 });
+              invoke('audio_preview_stop_silent').catch(() => {});
+            } else {
+              stop();
+            }
+          }}
+          aria-label={isPreviewing ? t('playlists.previewStop') : t('player.stop')}
+          data-tooltip={isPreviewing ? t('playlists.previewStop') : t('player.stop')}
+        >
           <Square size={14} fill="currentColor" />
         </button>
         <button className="player-btn" onClick={() => previous()} aria-label={t('player.prev')} data-tooltip={t('player.prev')} disabled={isRadio} style={isRadio ? { opacity: 0.3, pointerEvents: 'none' } : undefined}>
@@ -311,12 +338,27 @@ export default function PlayerBar() {
         </button>
         <span className="playback-transport-play-wrap" ref={playSlotRef}>
           <PlaybackScheduleBadge layoutAnchorRef={playSlotRef} />
+          {isPreviewing && (
+            <svg className="player-btn-preview-ring" viewBox="0 0 100 100" aria-hidden="true">
+              <circle cx="50" cy="50" r="47" pathLength="100" className="player-btn-preview-ring-track" />
+              <circle cx="50" cy="50" r="47" pathLength="100" className="player-btn-preview-ring-progress" />
+            </svg>
+          )}
           <button
-            className="player-btn player-btn-primary"
+            className={`player-btn player-btn-primary${isPreviewing ? ' is-previewing' : ''}`}
             type="button"
             {...playPauseBind}
-            aria-label={isPlaying ? t('player.pause') : t('player.play')}
-            data-tooltip={isPlaying ? t('player.pause') : t('player.play')}
+            onClick={isPreviewing
+              ? (() => {
+                  // Visual is "stop preview"; semantics match the tracklist preview
+                  // button — preview ends, main playback auto-resumes if it was
+                  // playing before. Use regular audio_preview_stop (not _silent).
+                  usePreviewStore.setState({ previewingId: null, previewingTrack: null, elapsed: 0 });
+                  invoke('audio_preview_stop').catch(() => {});
+                })
+              : playPauseBind.onClick}
+            aria-label={isPreviewing ? t('playlists.previewStop') : isPlaying ? t('player.pause') : t('player.play')}
+            data-tooltip={isPreviewing ? t('playlists.previewStop') : isPlaying ? t('player.pause') : t('player.play')}
           >
             {scheduleRemaining != null ? (
               <span className={`player-btn-schedule-stack player-btn-schedule-stack--${scheduleRemaining.mode}`}>
@@ -325,6 +367,8 @@ export default function PlayerBar() {
                   : <Sunrise size={10} strokeWidth={2.5} />}
                 <span className="player-btn-schedule-time">{scheduleRemaining.remaining}</span>
               </span>
+            ) : isPreviewing ? (
+              <Square size={16} fill="currentColor" strokeWidth={0} />
             ) : isPlaying ? <Pause size={22} fill="currentColor" /> : <Play size={22} fill="currentColor" />}
           </button>
         </span>

src/locales/de.ts

@@ -1190,6 +1190,8 @@ export const deTranslation = {
     prev: 'Vorheriger Titel',
     play: 'Play',
     pause: 'Pause',
+    previewActive: 'Vorschau läuft',
+    previewLabel: 'Vorschau',
     delayModalTitle: 'Timer',
     delayPauseSection: 'Pause nach',
     delayStartSection: 'Start nach',

src/locales/en.ts

@@ -1196,6 +1196,8 @@ export const enTranslation = {
     prev: 'Previous Track',
     play: 'Play',
     pause: 'Pause',
+    previewActive: 'Preview playing',
+    previewLabel: 'Preview',
     delayModalTitle: 'Timer',
     delayPauseSection: 'Pause after',
     delayStartSection: 'Start after',

src/locales/es.ts

@@ -1183,6 +1183,8 @@ export const esTranslation = {
     prev: 'Pista Anterior',
     play: 'Reproducir',
     pause: 'Pausa',
+    previewActive: 'Vista previa activa',
+    previewLabel: 'Vista previa',
     delayModalTitle: 'Temporizador',
     delayPauseSection: 'Pausar después de',
     delayStartSection: 'Iniciar después de',

src/locales/fr.ts

@@ -1178,6 +1178,8 @@ export const frTranslation = {
     prev: 'Piste précédente',
     play: 'Lecture',
     pause: 'Pause',
+    previewActive: 'Aperçu en cours',
+    previewLabel: 'Aperçu',
     delayModalTitle: 'Minuteur',
     delayPauseSection: 'Pause après',
     delayStartSection: 'Démarrage après',

src/locales/nb.ts

@@ -1177,6 +1177,8 @@ export const nbTranslation = {
     prev: 'Forrige spor',
     play: 'Spill av',
     pause: 'Pause',
+    previewActive: 'Forhåndsvisning spilles av',
+    previewLabel: 'Forhåndsvisning',
     delayModalTitle: 'Tidsur',
     delayPauseSection: 'Pause etter',
     delayStartSection: 'Start etter',

src/locales/nl.ts

@@ -1177,6 +1177,8 @@ export const nlTranslation = {
     prev: 'Vorig nummer',
     play: 'Afspelen',
     pause: 'Pauzeren',
+    previewActive: 'Voorbeeld speelt af',
+    previewLabel: 'Voorbeeld',
     delayModalTitle: 'Timer',
     delayPauseSection: 'Pauzeren na',
     delayStartSection: 'Starten na',

src/locales/ru.ts

@@ -1263,6 +1263,8 @@ export const ruTranslation = {
     prev: 'Предыдущий трек',
     play: 'Играть',
     pause: 'Пауза',
+    previewActive: 'Превью воспроизводится',
+    previewLabel: 'Превью',
     delayModalTitle: 'Таймер',
     delayPauseSection: 'Пауза через',
     delayStartSection: 'Старт через',

src/locales/zh.ts

@@ -1172,6 +1172,8 @@ export const zhTranslation = {
     prev: '上一首',
     play: '播放',
     pause: '暂停',
+    previewActive: '正在试听',
+    previewLabel: '试听',
     delayModalTitle: '定时',
     delayPauseSection: '多久后暂停',
     delayStartSection: '多久后开始',

src/pages/ArtistDetail.tsx

@@ -738,7 +738,7 @@ export default function ArtistDetail() {
                   <button
                     type="button"
                     className={`playlist-suggestion-preview-btn${previewingId === song.id ? ' is-previewing' : ''}`}
-                    onClick={e => { e.stopPropagation(); usePreviewStore.getState().startPreview({ id: song.id, duration: song.duration }, 'artist'); }}
+                    onClick={e => { e.stopPropagation(); usePreviewStore.getState().startPreview({ id: song.id, title: song.title, artist: song.artist, coverArt: song.coverArt, duration: song.duration }, 'artist'); }}
                     data-tooltip={previewingId === song.id ? t('playlists.previewStop') : t('playlists.preview')}
                     aria-label={previewingId === song.id ? t('playlists.previewStop') : t('playlists.preview')}
                   >

src/pages/Favorites.tsx

@@ -694,7 +694,7 @@ export default function Favorites() {
                               <button
                                 type="button"
                                 className={`playlist-suggestion-preview-btn${previewingId === song.id ? ' is-previewing' : ''}`}
-                                onClick={e => { e.stopPropagation(); usePreviewStore.getState().startPreview({ id: song.id, duration: song.duration }, 'favorites'); }}
+                                onClick={e => { e.stopPropagation(); usePreviewStore.getState().startPreview({ id: song.id, title: song.title, artist: song.artist, coverArt: song.coverArt, duration: song.duration }, 'favorites'); }}
                                 data-tooltip={previewingId === song.id ? t('playlists.previewStop') : t('playlists.preview')}
                                 aria-label={previewingId === song.id ? t('playlists.previewStop') : t('playlists.preview')}
                               >

src/pages/PlaylistDetail.tsx

@@ -938,6 +938,9 @@ export default function PlaylistDetail() {
   const startPreview = useCallback((song: SubsonicSong) => {
     usePreviewStore.getState().startPreview({
       id: song.id,
+      title: song.title,
+      artist: song.artist,
+      coverArt: song.coverArt,
       duration: song.duration,
     }, 'suggestions').catch(() => { /* engine errored — store already rolled back */ });
   }, []);
@@ -1709,7 +1712,7 @@ export default function PlaylistDetail() {
                         className={`playlist-suggestion-preview-btn${previewingId === song.id ? ' is-previewing' : ''}`}
                         onClick={e => {
                           e.stopPropagation();
-                          usePreviewStore.getState().startPreview({ id: song.id, duration: song.duration }, 'playlists');
+                          usePreviewStore.getState().startPreview({ id: song.id, title: song.title, artist: song.artist, coverArt: song.coverArt, duration: song.duration }, 'playlists');
                         }}
                         data-tooltip={previewingId === song.id ? t('playlists.previewStop') : t('playlists.preview')}
                         aria-label={previewingId === song.id ? t('playlists.previewStop') : t('playlists.preview')}

src/pages/RandomMix.tsx

@@ -471,7 +471,7 @@ export default function RandomMix() {
                       <button
                         type="button"
                         className={`playlist-suggestion-preview-btn${previewingId === song.id ? ' is-previewing' : ''}`}
-                        onClick={e => { e.stopPropagation(); usePreviewStore.getState().startPreview({ id: song.id, duration: song.duration }, 'randomMix'); }}
+                        onClick={e => { e.stopPropagation(); usePreviewStore.getState().startPreview({ id: song.id, title: song.title, artist: song.artist, coverArt: song.coverArt, duration: song.duration }, 'randomMix'); }}
                         data-tooltip={previewingId === song.id ? t('playlists.previewStop') : t('playlists.preview')}
                         aria-label={previewingId === song.id ? t('playlists.previewStop') : t('playlists.preview')}
                       >
@@ -604,7 +604,7 @@ export default function RandomMix() {
                   <button
                     type="button"
                     className={`playlist-suggestion-preview-btn${previewingId === song.id ? ' is-previewing' : ''}`}
-                    onClick={e => { e.stopPropagation(); usePreviewStore.getState().startPreview({ id: song.id, duration: song.duration }, 'randomMix'); }}
+                    onClick={e => { e.stopPropagation(); usePreviewStore.getState().startPreview({ id: song.id, title: song.title, artist: song.artist, coverArt: song.coverArt, duration: song.duration }, 'randomMix'); }}
                     data-tooltip={previewingId === song.id ? t('playlists.previewStop') : t('playlists.preview')}
                     aria-label={previewingId === song.id ? t('playlists.previewStop') : t('playlists.preview')}
                   >

src/store/previewStore.ts

@@ -4,15 +4,25 @@ import { buildStreamUrl } from '../api/subsonic';
 import { usePlayerStore } from './playerStore';
 import { useAuthStore, type TrackPreviewLocation } from './authStore';
 
+/** Minimal track info needed to surface the preview in the player bar UI. */
+export interface PreviewingTrack {
+  id: string;
+  title: string;
+  artist: string;
+  coverArt?: string;
+}
+
 interface PreviewState {
   /** Subsonic song id of the active preview, or null when nothing previews. */
   previewingId: string | null;
+  /** Currently previewing track with the metadata the player-bar UI needs. */
+  previewingTrack: PreviewingTrack | null;
   /** Seconds elapsed in the current preview window. */
   elapsed: number;
   /** Total preview window in seconds (echoes the duration_sec arg). */
   duration: number;
 
-  startPreview: (song: { id: string; duration?: number }, location: TrackPreviewLocation) => Promise<void>;
+  startPreview: (song: { id: string; title: string; artist: string; coverArt?: string; duration?: number }, location: TrackPreviewLocation) => Promise<void>;
   stopPreview: () => Promise<void>;
 
   /** Internal — called from the TauriEventBridge on `audio:preview-start`. */
@@ -27,6 +37,7 @@ const PREVIEW_VOLUME_MATCH = true;
 
 export const usePreviewStore = create<PreviewState>((set, get) => ({
   previewingId: null,
+  previewingTrack: null,
   elapsed: 0,
   duration: 30,
 
@@ -61,7 +72,12 @@ export const usePreviewStore = create<PreviewState>((set, get) => ({
       }
     }
 
-    set({ previewingId: song.id, elapsed: 0, duration: previewDuration });
+    set({
+      previewingId: song.id,
+      previewingTrack: { id: song.id, title: song.title, artist: song.artist, coverArt: song.coverArt },
+      elapsed: 0,
+      duration: previewDuration,
+    });
 
     try {
       await invoke('audio_preview_play', {
@@ -74,7 +90,7 @@ export const usePreviewStore = create<PreviewState>((set, get) => ({
     } catch (e) {
       // Roll back optimistic state on failure.
       if (get().previewingId === song.id) {
-        set({ previewingId: null, elapsed: 0 });
+        set({ previewingId: null, previewingTrack: null, elapsed: 0 });
       }
       throw e;
     }
@@ -86,12 +102,14 @@ export const usePreviewStore = create<PreviewState>((set, get) => ({
       await invoke('audio_preview_stop');
     } catch {
       /* engine will emit preview-end anyway; clear locally as fallback */
-      set({ previewingId: null, elapsed: 0 });
+      set({ previewingId: null, previewingTrack: null, elapsed: 0 });
     }
   },
 
   _onStart: (id) => {
     if (get().previewingId !== id) {
+      // Engine fired start for an id we didn't track locally — keep id but
+      // leave previewingTrack as-is (the caller's startPreview() set it).
       set({ previewingId: id, elapsed: 0 });
     }
   },
@@ -103,6 +121,6 @@ export const usePreviewStore = create<PreviewState>((set, get) => ({
 
   _onEnd: (id) => {
     if (get().previewingId !== id) return;
-    set({ previewingId: null, elapsed: 0 });
+    set({ previewingId: null, previewingTrack: null, elapsed: 0 });
   },
 }));

src/styles/components.css

@@ -2321,6 +2321,78 @@ html[data-track-previews-randommix="off"]   [data-preview-loc="randomMix"]   .pl
   vertical-align: middle;
 }
 
+/* ── Preview-active state on the player bar ─────────────────────────
+   Combo of two cues so it's unmistakable that a preview is sounding:
+   1) accent top-border on the bar itself
+   2) tiny "Preview" pill above the title in the track-info cell */
+.player-bar.is-previewing {
+  box-shadow: inset 0 2px 0 0 var(--accent), 0 -1px 0 0 var(--bg-border);
+}
+
+.player-preview-label {
+  display: inline-block;
+  align-self: flex-start;
+  font-size: 0.625rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ctp-crust);
+  background: var(--accent);
+  padding: 1px 6px;
+  border-radius: 4px;
+  margin-bottom: 3px;
+  line-height: 1.3;
+  user-select: none;
+}
+
+/* ── Preview-active state on the play button ────────────────────────
+   While a track preview is sounding, the player-bar play button mirrors
+   the inline preview button used in tracklists: hollow circle + chevron
+   icon + countdown ring. Click still resumes main playback (which the
+   Rust audio engine cancels the preview for, see audio.rs). */
+.player-btn-primary.is-previewing {
+  background: transparent;
+  color: var(--accent);
+  box-shadow: none;
+}
+
+.player-btn-primary.is-previewing:hover {
+  background: var(--bg-hover, transparent);
+  color: var(--accent);
+  box-shadow: none;
+}
+
+.player-btn-preview-ring {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  transform: rotate(-90deg);
+  z-index: 1;
+}
+
+.player-btn-preview-ring-track {
+  fill: none;
+  stroke: var(--ctp-overlay0);
+  stroke-width: 4;
+}
+
+.player-btn-preview-ring-progress {
+  fill: none;
+  stroke: var(--accent);
+  stroke-width: 4;
+  stroke-linecap: round;
+  stroke-dasharray: 100;
+  stroke-dashoffset: 100;
+  animation: player-preview-progress var(--preview-duration, 30s) linear forwards;
+}
+
+@keyframes player-preview-progress {
+  from { stroke-dashoffset: 100; }
+  to { stroke-dashoffset: 0; }
+}
+
 /* ── Custom-minutes input with inline "min" suffix ──────────────────── */
 .playback-delay-custom__field {
   position: relative;