diff --git a/src/renderer/src/crud/useWaveSurfer.tsx b/src/renderer/src/crud/useWaveSurfer.tsx index 90a933ea..519c9452 100644 --- a/src/renderer/src/crud/useWaveSurfer.tsx +++ b/src/renderer/src/crud/useWaveSurfer.tsx @@ -21,6 +21,9 @@ import { NamedRegions, useMobile } from '../utils'; const noop = () => {}; +/** Nudge playhead slightly before true duration so the custom cursor (CSS) stays visible at end. */ +const FINISH_END_EPSILON_SEC = 0.005; + export interface IMarker { time: number; label?: string; @@ -169,9 +172,15 @@ export function useWaveSurfer( if (loadingRef.current) return; const ws = wavesurferRef.current; - const t = + let t = ws != null ? roundTime(ws.getCurrentTime()) : roundTime(currentTime); + const duration = durationRef.current || 0; + if (duration > 0) { + if (t < 0) t = 0; + else if (t > duration) t = duration; + } + setProgress(t); // eslint-disable-next-line react-hooks/exhaustive-deps @@ -339,7 +348,17 @@ export function useWaveSurfer( }); wavesurfer.on('finish', function () { - if (playingRef.current && !loopingRef.current) setPlaying(false); + if (playingRef.current && !loopingRef.current) { + const duration = durationRef.current || 0; + if (duration > 0) { + const safeEnd = Math.max( + 0, + roundTime(duration - FINISH_END_EPSILON_SEC) + ); + void wsGoto(safeEnd); + } + setPlaying(false); + } }); wavesurfer.on('interaction', function (/*newTime: number*/) { onInteraction();