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.
This commit is contained in:
Frank Stellmacher
2026-05-01 12:57:34 +02:00
committed by GitHub
parent 9cef3da1bb
commit 20a083a9a6
18 changed files with 204 additions and 32 deletions
+23 -5
View File
@@ -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 });
},
}));