@waveform-playlist/browser 12.0.0 → 12.1.0

package/dist/index.mjs

@@ -3634,6 +3634,7 @@ var WaveformPlaylistProvider = ({
   isPlayingRef.current = isPlaying;
   const playStartPositionRef = useRef15(0);
   const currentTimeRef = useRef15(0);
+  const visualTimeRef = useRef15(0);
   const tracksRef = useRef15(tracks);
   const soundFontCacheRef = useRef15(soundFontCache);
   soundFontCacheRef.current = soundFontCache;
@@ -4104,6 +4105,25 @@ var WaveformPlaylistProvider = ({
     const elapsed = getContext2().currentTime - ((_a2 = playbackStartTimeRef.current) != null ? _a2 : 0);
     return ((_b2 = audioStartPositionRef.current) != null ? _b2 : 0) + elapsed;
   }, []);
+  const toVisualTime = useCallback19((rawTime) => {
+    var _a2, _b2;
+    const audioCtx = getGlobalAudioContext4();
+    const latency = "outputLatency" in audioCtx ? audioCtx.outputLatency : 0;
+    const lookAhead = (_b2 = (_a2 = engineRef.current) == null ? void 0 : _a2.lookAhead) != null ? _b2 : 0;
+    const visual = rawTime - latency - lookAhead;
+    return Number.isFinite(visual) ? Math.max(0, visual) : 0;
+  }, []);
+  const setCurrentTimeRefs = useCallback19(
+    (rawTime) => {
+      currentTimeRef.current = rawTime;
+      visualTimeRef.current = toVisualTime(rawTime);
+    },
+    [toVisualTime]
+  );
+  const getLookAhead = useCallback19(() => {
+    var _a2, _b2;
+    return (_b2 = (_a2 = engineRef.current) == null ? void 0 : _a2.lookAhead) != null ? _b2 : 0;
+  }, []);
   const registerFrameCallback = useCallback19((id, cb) => {
     frameCallbacksRef.current.set(id, cb);
   }, []);
@@ -4113,10 +4133,14 @@ var WaveformPlaylistProvider = ({
   const startAnimationLoop = useCallback19(() => {
     const audioCtx = getGlobalAudioContext4();
     const updateTime = () => {
+      var _a2, _b2;
       const time = getPlaybackTime();
       currentTimeRef.current = time;
       const latency = "outputLatency" in audioCtx ? audioCtx.outputLatency : 0;
-      const visualTime = Math.max(0, time - latency);
+      const lookAhead = (_b2 = (_a2 = engineRef.current) == null ? void 0 : _a2.lookAhead) != null ? _b2 : 0;
+      const visualRaw = time - latency - lookAhead;
+      const visualTime = Number.isFinite(visualRaw) ? Math.max(0, visualRaw) : 0;
+      visualTimeRef.current = visualTime;
       const sr = sampleRateRef.current;
       const spp = samplesPerPixelRef.current;
       const frameData = {
@@ -4149,7 +4173,7 @@ var WaveformPlaylistProvider = ({
                 engineRef.current.stop();
               }
               setIsPlaying(false);
-              currentTimeRef.current = playStartPositionRef.current;
+              setCurrentTimeRefs(playStartPositionRef.current);
               setCurrentTime(playStartPositionRef.current);
               return;
             }
@@ -4172,7 +4196,7 @@ var WaveformPlaylistProvider = ({
           engineRef.current.stop();
         }
         setIsPlaying(false);
-        currentTimeRef.current = playbackEndTimeRef.current;
+        setCurrentTimeRefs(playbackEndTimeRef.current);
         setCurrentTime(playbackEndTimeRef.current);
         playbackEndTimeRef.current = null;
         return;
@@ -4182,7 +4206,7 @@ var WaveformPlaylistProvider = ({
           engineRef.current.stop();
         }
         setIsPlaying(false);
-        currentTimeRef.current = playStartPositionRef.current;
+        setCurrentTimeRefs(playStartPositionRef.current);
         setCurrentTime(playStartPositionRef.current);
         setActiveAnnotationId(null);
         return;
@@ -4190,7 +4214,13 @@ var WaveformPlaylistProvider = ({
       startAnimationFrameLoop(updateTime);
     };
     startAnimationFrameLoop(updateTime);
-  }, [duration, setActiveAnnotationId, startAnimationFrameLoop, getPlaybackTime]);
+  }, [
+    duration,
+    setActiveAnnotationId,
+    startAnimationFrameLoop,
+    getPlaybackTime,
+    setCurrentTimeRefs
+  ]);
   const stopAnimationLoop = stopAnimationFrameLoop;
   useEffect10(() => {
     const reschedulePlayback = () => __async(null, null, function* () {
@@ -4246,7 +4276,7 @@ var WaveformPlaylistProvider = ({
       if (!engineRef.current) return;
       const actualStartTime = startTime != null ? startTime : currentTimeRef.current;
       playStartPositionRef.current = actualStartTime;
-      currentTimeRef.current = actualStartTime;
+      setCurrentTimeRefs(actualStartTime);
       engineRef.current.stop();
       engineRef.current.seek(actualStartTime);
       stopAnimationLoop();
@@ -4270,7 +4300,7 @@ var WaveformPlaylistProvider = ({
       setIsPlaying(true);
       startAnimationLoop();
     }),
-    [startAnimationLoop, stopAnimationLoop]
+    [startAnimationLoop, stopAnimationLoop, setCurrentTimeRefs]
   );
   const pause = useCallback19(() => {
     if (!engineRef.current) return;
@@ -4278,28 +4308,28 @@ var WaveformPlaylistProvider = ({
     engineRef.current.pause();
     setIsPlaying(false);
     stopAnimationLoop();
-    currentTimeRef.current = pauseTime;
+    setCurrentTimeRefs(pauseTime);
     setCurrentTime(pauseTime);
-  }, [stopAnimationLoop, getPlaybackTime]);
+  }, [stopAnimationLoop, getPlaybackTime, setCurrentTimeRefs]);
   const stop = useCallback19(() => {
     if (!engineRef.current) return;
     engineRef.current.stop();
     setIsPlaying(false);
     stopAnimationLoop();
-    currentTimeRef.current = playStartPositionRef.current;
+    setCurrentTimeRefs(playStartPositionRef.current);
     setCurrentTime(playStartPositionRef.current);
     setActiveAnnotationId(null);
-  }, [stopAnimationLoop, setActiveAnnotationId]);
+  }, [stopAnimationLoop, setActiveAnnotationId, setCurrentTimeRefs]);
   const seekTo = useCallback19(
     (time) => {
       const clampedTime = Math.max(0, Math.min(time, duration));
-      currentTimeRef.current = clampedTime;
+      setCurrentTimeRefs(clampedTime);
       setCurrentTime(clampedTime);
       if (isPlaying && engineRef.current) {
         play(clampedTime);
       }
     },
-    [duration, isPlaying, play]
+    [duration, isPlaying, play, setCurrentTimeRefs]
   );
   const setTrackMute = useCallback19(
     (trackIndex, muted) => {
@@ -4360,7 +4390,7 @@ var WaveformPlaylistProvider = ({
   const setSelection = useCallback19(
     (start, end) => {
       setSelectionEngine(start, end);
-      currentTimeRef.current = start;
+      setCurrentTimeRefs(start);
       setCurrentTime(start);
       if (isPlaying && engineRef.current) {
         engineRef.current.stop();
@@ -4368,7 +4398,7 @@ var WaveformPlaylistProvider = ({
         engineRef.current.play(start);
       }
     },
-    [isPlaying, setSelectionEngine]
+    [isPlaying, setSelectionEngine, setCurrentTimeRefs]
   );
   const setScrollContainer = useCallback19((element) => {
     scrollContainerRef.current = element;
@@ -4398,9 +4428,11 @@ var WaveformPlaylistProvider = ({
       isPlaying,
       currentTime,
       currentTimeRef,
+      visualTimeRef,
       playbackStartTimeRef,
       audioStartPositionRef,
       getPlaybackTime,
+      getLookAhead,
       registerFrameCallback,
       unregisterFrameCallback
     }),
@@ -4408,9 +4440,11 @@ var WaveformPlaylistProvider = ({
       isPlaying,
       currentTime,
       currentTimeRef,
+      visualTimeRef,
       playbackStartTimeRef,
       audioStartPositionRef,
       getPlaybackTime,
+      getLookAhead,
       registerFrameCallback,
       unregisterFrameCallback
     ]
@@ -4453,10 +4487,10 @@ var WaveformPlaylistProvider = ({
   );
   const setCurrentTimeControl = useCallback19(
     (time) => {
-      currentTimeRef.current = time;
+      setCurrentTimeRefs(time);
       setCurrentTime(time);
     },
-    [currentTimeRef]
+    [setCurrentTimeRefs]
   );
   const setAutomaticScrollControl = useCallback19((enabled) => {
     setIsAutomaticScroll(enabled);
@@ -5356,7 +5390,7 @@ function useClipInteractionEnabled() {
 import { useContext as useContext6, useRef as useRef20, useState as useState17, useMemo as useMemo6, useCallback as useCallback22 } from "react";
 import { createPortal } from "react-dom";
 import styled4 from "styled-components";
-import { getGlobalContext as getGlobalContext2 } from "@waveform-playlist/playout";
+import { getGlobalAudioContext as getGlobalAudioContext5 } from "@waveform-playlist/playout";
 import {
   Playlist,
   Track as TrackComponent,
@@ -5381,6 +5415,7 @@ import {
   SpectrogramLabels,
   CLIP_HEADER_HEIGHT
 } from "@waveform-playlist/ui-components";
+import { audibleLatencySamples } from "@waveform-playlist/core";
 
 // src/components/AnimatedPlayhead.tsx
 import { useRef as useRef18, useEffect as useEffect13 } from "react";
@@ -5402,7 +5437,13 @@ var PlayheadLine = styled2.div.attrs((props) => ({
 `;
 var AnimatedPlayhead = ({ color = "#ff0000" }) => {
   const playheadRef = useRef18(null);
-  const { isPlaying, currentTimeRef, registerFrameCallback, unregisterFrameCallback } = usePlaybackAnimation();
+  const {
+    isPlaying,
+    currentTimeRef,
+    visualTimeRef,
+    registerFrameCallback,
+    unregisterFrameCallback
+  } = usePlaybackAnimation();
   const { samplesPerPixel, sampleRate, progressBarWidth } = usePlaylistData();
   useEffect13(() => {
     const id = "playhead";
@@ -5417,9 +5458,9 @@ var AnimatedPlayhead = ({ color = "#ff0000" }) => {
     return () => unregisterFrameCallback(id);
   }, [isPlaying, registerFrameCallback, unregisterFrameCallback]);
   useEffect13(() => {
-    var _a;
+    var _a, _b;
     if (!isPlaying && playheadRef.current) {
-      const time = (_a = currentTimeRef.current) != null ? _a : 0;
+      const time = (_b = (_a = visualTimeRef.current) != null ? _a : currentTimeRef.current) != null ? _b : 0;
       const position = time * sampleRate / samplesPerPixel;
       playheadRef.current.style.transform = `translate3d(${position}px, 0, 0)`;
     }
@@ -5497,7 +5538,13 @@ var ChannelWithProgress = (_a) => {
   const callbackId = useId();
   const theme = useTheme();
   const { waveHeight } = usePlaylistInfo();
-  const { isPlaying, currentTimeRef, registerFrameCallback, unregisterFrameCallback } = usePlaybackAnimation();
+  const {
+    isPlaying,
+    currentTimeRef,
+    visualTimeRef,
+    registerFrameCallback,
+    unregisterFrameCallback
+  } = usePlaybackAnimation();
   const { samplesPerPixel, sampleRate } = usePlaylistData();
   const progressColor = (theme == null ? void 0 : theme.waveProgressColor) || "rgba(0, 0, 0, 0.1)";
   const clipPixelWidth = computeClipPixelWidth(
@@ -5534,9 +5581,9 @@ var ChannelWithProgress = (_a) => {
     unregisterFrameCallback
   ]);
   useEffect14(() => {
-    var _a2;
+    var _a2, _b2;
     if (!isPlaying && progressRef.current) {
-      const currentTime = (_a2 = currentTimeRef.current) != null ? _a2 : 0;
+      const currentTime = (_b2 = (_a2 = visualTimeRef.current) != null ? _a2 : currentTimeRef.current) != null ? _b2 : 0;
       const currentSample = currentTime * sampleRate;
       const clipEndSample = clipStartSample + clipDurationSamples;
       let ratio = 0;
@@ -5644,25 +5691,28 @@ var ControlSlot = styled4.div.attrs((props) => ({
   ${(props) => props.$isSelected && `background: ${props.theme.selectedTrackControlsBackground};`}
 `;
 var CustomPlayhead = ({ renderPlayhead, color, samplesPerPixel, sampleRate }) => {
-  var _a;
+  var _a, _b;
   const {
     isPlaying,
     currentTimeRef,
+    visualTimeRef,
     playbackStartTimeRef,
     audioStartPositionRef,
     getPlaybackTime
   } = usePlaybackAnimation();
+  const visualTime = (_b = (_a = visualTimeRef.current) != null ? _a : currentTimeRef.current) != null ? _b : 0;
   return renderPlayhead({
-    position: ((_a = currentTimeRef.current) != null ? _a : 0) * sampleRate / samplesPerPixel,
+    position: visualTime * sampleRate / samplesPerPixel,
     color,
     isPlaying,
     currentTimeRef,
+    visualTimeRef,
     playbackStartTimeRef,
     audioStartPositionRef,
     samplesPerPixel,
     sampleRate,
     controlsOffset: 0,
-    getAudioContextTime: () => getGlobalContext2().rawContext.currentTime,
+    getAudioContextTime: () => getGlobalAudioContext5().currentTime,
     getPlaybackTime
   });
 };
@@ -5687,7 +5737,7 @@ var PlaylistVisualization = ({
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
   const theme = useTheme2();
-  const { isPlaying } = usePlaybackAnimation();
+  const { isPlaying, getLookAhead } = usePlaybackAnimation();
   const {
     selectionStart,
     selectionEnd,
@@ -6146,22 +6196,39 @@ var PlaylistVisualization = ({
                           clip.clipId
                         );
                       }),
-                      (recordingState == null ? void 0 : recordingState.isRecording) && recordingState.trackId === track.id && ((_d2 = recordingState.peaks[0]) == null ? void 0 : _d2.length) > 0 && /* @__PURE__ */ jsx10(
-                        Clip,
-                        {
-                          clipId: "recording-preview",
-                          trackIndex,
-                          clipIndex: trackClipPeaks.length,
-                          trackName: "Recording...",
-                          startSample: recordingState.startSample,
-                          durationSamples: recordingState.durationSamples,
-                          samplesPerPixel,
-                          showHeader: showClipHeaders,
-                          disableHeaderDrag: true,
-                          isSelected: track.id === selectedTrackId,
-                          trackId: track.id,
-                          children: (mono ? recordingState.peaks.slice(0, 1) : recordingState.peaks).map(
-                            (channelPeaks, chIdx) => /* @__PURE__ */ jsx10(
+                      (recordingState == null ? void 0 : recordingState.isRecording) && recordingState.trackId === track.id && ((_d2 = recordingState.peaks[0]) == null ? void 0 : _d2.length) > 0 && (() => {
+                        const audioCtx = getGlobalAudioContext5();
+                        const outputLatency = "outputLatency" in audioCtx ? audioCtx.outputLatency : 0;
+                        const lookAhead = getLookAhead();
+                        const latencyOffsetSamples = audibleLatencySamples(
+                          outputLatency,
+                          lookAhead,
+                          sampleRate
+                        );
+                        const latencyPixels = Math.floor(latencyOffsetSamples / samplesPerPixel);
+                        const skipPeakElements = latencyPixels * 2;
+                        const previewDuration = Math.max(
+                          0,
+                          recordingState.durationSamples - latencyOffsetSamples
+                        );
+                        const previewChannels = (mono ? recordingState.peaks.slice(0, 1) : recordingState.peaks).map(
+                          (channelPeaks) => skipPeakElements > 0 && skipPeakElements < channelPeaks.length ? channelPeaks.subarray(skipPeakElements) : channelPeaks
+                        );
+                        return /* @__PURE__ */ jsx10(
+                          Clip,
+                          {
+                            clipId: "recording-preview",
+                            trackIndex,
+                            clipIndex: trackClipPeaks.length,
+                            trackName: "Recording...",
+                            startSample: recordingState.startSample,
+                            durationSamples: previewDuration,
+                            samplesPerPixel,
+                            showHeader: showClipHeaders,
+                            disableHeaderDrag: true,
+                            isSelected: track.id === selectedTrackId,
+                            trackId: track.id,
+                            children: previewChannels.map((channelPeaks, chIdx) => /* @__PURE__ */ jsx10(
                               ChannelWithProgress,
                               {
                                 index: chIdx,
@@ -6170,14 +6237,14 @@ var PlaylistVisualization = ({
                                 length: Math.floor(channelPeaks.length / 2),
                                 isSelected: track.id === selectedTrackId,
                                 clipStartSample: recordingState.startSample,
-                                clipDurationSamples: recordingState.durationSamples
+                                clipDurationSamples: previewDuration
                               },
                               `${track.id}-recording-${chIdx}`
-                            )
-                          )
-                        },
-                        `${track.id}-recording`
-                      )
+                            ))
+                          },
+                          `${track.id}-recording`
+                        );
+                      })()
                     ]
                   },
                   track.id