@waveform-playlist/browser 11.2.0 → 11.3.1

package/dist/index.js

@@ -2741,6 +2741,7 @@ function useTrackDynamicEffects() {
 
 // src/hooks/useExportWav.ts
 var import_react19 = require("react");
+var import_core4 = require("@waveform-playlist/core");
 var import_playout2 = require("@waveform-playlist/playout");
 
 // src/utils/wavEncoder.ts
@@ -2851,47 +2852,24 @@ function useExportWav() {
         totalDurationSamples += Math.round(sampleRate * 0.1);
         const duration = totalDurationSamples / sampleRate;
         const tracksToRender = mode === "individual" ? [{ track: tracks[trackIndex], state: trackStates[trackIndex], index: trackIndex }] : tracks.map((track, index) => ({ track, state: trackStates[index], index }));
-        const hasSolo = trackStates.some((state) => state.soloed);
-        const hasOfflineTrackEffects = !!createOfflineTrackEffects;
-        let renderedBuffer;
-        if ((effectsFunction || hasOfflineTrackEffects) && applyEffects) {
-          renderedBuffer = yield renderWithToneEffects(
-            tracksToRender,
-            trackStates,
-            hasSolo,
-            duration,
-            sampleRate,
-            effectsFunction,
-            createOfflineTrackEffects,
-            (p) => {
-              setProgress(p);
-              onProgress == null ? void 0 : onProgress(p);
-            }
-          );
-        } else {
-          const offlineCtx = new OfflineAudioContext(2, totalDurationSamples, sampleRate);
-          let scheduledClips = 0;
-          const totalClips = tracksToRender.reduce((sum, { track }) => sum + track.clips.length, 0);
-          for (const { track, state } of tracksToRender) {
-            if (state.muted && !state.soloed) continue;
-            if (hasSolo && !state.soloed) continue;
-            for (const clip of track.clips) {
-              yield scheduleClip(offlineCtx, clip, state, sampleRate, applyEffects);
-              scheduledClips++;
-              const currentProgress = scheduledClips / totalClips * 0.5;
-              setProgress(currentProgress);
-              onProgress == null ? void 0 : onProgress(currentProgress);
-            }
-          }
-          setProgress(0.5);
-          onProgress == null ? void 0 : onProgress(0.5);
-          renderedBuffer = yield offlineCtx.startRendering();
-        }
-        setProgress(0.9);
-        onProgress == null ? void 0 : onProgress(0.9);
+        const hasSolo = mode === "master" && trackStates.some((state) => state.soloed);
+        const reportProgress = (p) => {
+          setProgress(p);
+          onProgress == null ? void 0 : onProgress(p);
+        };
+        const renderedBuffer = yield renderOffline(
+          tracksToRender,
+          hasSolo,
+          duration,
+          sampleRate,
+          applyEffects,
+          effectsFunction,
+          createOfflineTrackEffects,
+          reportProgress
+        );
+        reportProgress(0.9);
         const blob = encodeWav(renderedBuffer, { bitDepth });
-        setProgress(1);
-        onProgress == null ? void 0 : onProgress(1);
+        reportProgress(1);
         if (autoDownload) {
           const exportFilename = mode === "individual" ? `${filename}_${tracks[trackIndex].name}` : filename;
           downloadBlob(blob, `${exportFilename}.wav`);
@@ -2918,29 +2896,35 @@ function useExportWav() {
     error
   };
 }
-function renderWithToneEffects(tracksToRender, _trackStates, hasSolo, duration, sampleRate, effectsFunction, createOfflineTrackEffects, onProgress) {
+function renderOffline(tracksToRender, hasSolo, duration, sampleRate, applyEffects, effectsFunction, createOfflineTrackEffects, onProgress) {
   return __async(this, null, function* () {
     const { Offline, Volume: Volume2, Gain, Panner, Player, ToneAudioBuffer } = yield import("tone");
     onProgress(0.1);
+    const audibleTracks = tracksToRender.filter(({ state }) => {
+      if (state.muted && !state.soloed) return false;
+      if (hasSolo && !state.soloed) return false;
+      return true;
+    });
+    const outputChannels = audibleTracks.reduce(
+      (max, { track }) => Math.max(max, (0, import_core4.trackChannelCount)(track)),
+      1
+    );
     let buffer;
     try {
       buffer = yield Offline(
         (_0) => __async(null, [_0], function* ({ transport, destination }) {
           const masterVolume = new Volume2(0);
-          let cleanup = void 0;
-          if (effectsFunction) {
-            cleanup = effectsFunction(masterVolume, destination, true);
+          if (effectsFunction && applyEffects) {
+            effectsFunction(masterVolume, destination, true);
           } else {
             masterVolume.connect(destination);
           }
-          for (const { track, state } of tracksToRender) {
-            if (state.muted && !state.soloed) continue;
-            if (hasSolo && !state.soloed) continue;
-            const trackVolume = new Volume2(gainToDb(state.volume));
-            const trackPan = new Panner(state.pan);
+          for (const { track, state } of audibleTracks) {
+            const trackVolume = new Volume2((0, import_core4.gainToDb)(state.volume));
+            const trackPan = new Panner({ pan: state.pan, channelCount: (0, import_core4.trackChannelCount)(track) });
             const trackMute = new Gain(state.muted ? 0 : 1);
             const trackEffects = createOfflineTrackEffects == null ? void 0 : createOfflineTrackEffects(track.id);
-            if (trackEffects) {
+            if (trackEffects && applyEffects) {
               trackEffects(trackMute, masterVolume, true);
             } else {
               trackMute.connect(masterVolume);
@@ -2957,6 +2941,12 @@ function renderWithToneEffects(tracksToRender, _trackStates, hasSolo, duration,
                 fadeIn,
                 fadeOut
               } = clip;
+              if (!audioBuffer) {
+                console.warn(
+                  '[waveform-playlist] Skipping clip "' + (clip.name || clip.id) + '" - no audioBuffer for export'
+                );
+                continue;
+              }
               const startTime = startSample / sampleRate;
               const clipDuration = durationSamples / sampleRate;
               const offset = offsetSamples / sampleRate;
@@ -2965,167 +2955,56 @@ function renderWithToneEffects(tracksToRender, _trackStates, hasSolo, duration,
               const fadeGain = new Gain(clipGain);
               player.connect(fadeGain);
               fadeGain.connect(trackVolume);
-              if (fadeIn) {
-                const fadeInStart = startTime;
-                const fadeInEnd = startTime + fadeIn.duration;
+              if (applyEffects) {
                 const audioParam = (0, import_playout2.getUnderlyingAudioParam)(fadeGain.gain);
                 if (audioParam) {
-                  audioParam.setValueAtTime(0, fadeInStart);
-                  audioParam.linearRampToValueAtTime(clipGain, fadeInEnd);
-                }
-              }
-              if (fadeOut) {
-                const fadeOutStart = startTime + clipDuration - fadeOut.duration;
-                const fadeOutEnd = startTime + clipDuration;
-                const audioParam = (0, import_playout2.getUnderlyingAudioParam)(fadeGain.gain);
-                if (audioParam) {
-                  audioParam.setValueAtTime(clipGain, fadeOutStart);
-                  audioParam.linearRampToValueAtTime(0, fadeOutEnd);
+                  applyClipFades(audioParam, clipGain, startTime, clipDuration, fadeIn, fadeOut);
+                } else if (fadeIn || fadeOut) {
+                  console.warn(
+                    '[waveform-playlist] Cannot apply fades for clip "' + (clip.name || clip.id) + '" - AudioParam not accessible'
+                  );
                 }
               }
               player.start(startTime, offset, clipDuration);
             }
           }
           transport.start(0);
-          if (cleanup) {
-          }
         }),
         duration,
-        2,
-        // stereo
+        outputChannels,
         sampleRate
       );
     } catch (err) {
       if (err instanceof Error) {
         throw err;
       } else {
-        throw new Error(`Tone.Offline rendering failed: ${String(err)}`);
+        throw new Error("Tone.Offline rendering failed: " + String(err));
       }
     }
     onProgress(0.9);
-    return buffer.get();
-  });
-}
-function gainToDb(gain) {
-  return 20 * Math.log10(Math.max(gain, 1e-4));
-}
-function scheduleClip(ctx, clip, trackState, sampleRate, applyEffects) {
-  return __async(this, null, function* () {
-    const {
-      audioBuffer,
-      startSample,
-      durationSamples,
-      offsetSamples,
-      gain: clipGain,
-      fadeIn,
-      fadeOut
-    } = clip;
-    if (!audioBuffer) {
-      console.warn(`Skipping clip "${clip.name || clip.id}" - no audioBuffer for export`);
-      return;
+    const result = buffer.get();
+    if (!result) {
+      throw new Error("Offline rendering produced no audio buffer");
     }
-    const startTime = startSample / sampleRate;
-    const duration = durationSamples / sampleRate;
-    const offset = offsetSamples / sampleRate;
-    const source = ctx.createBufferSource();
-    source.buffer = audioBuffer;
-    const gainNode = ctx.createGain();
-    const baseGain = clipGain * trackState.volume;
-    const pannerNode = ctx.createStereoPanner();
-    pannerNode.pan.value = trackState.pan;
-    source.connect(gainNode);
-    gainNode.connect(pannerNode);
-    pannerNode.connect(ctx.destination);
-    if (applyEffects) {
-      if (fadeIn) {
-        gainNode.gain.setValueAtTime(0, startTime);
-      } else {
-        gainNode.gain.setValueAtTime(baseGain, startTime);
-      }
-      if (fadeIn) {
-        const fadeInStart = startTime;
-        const fadeInEnd = startTime + fadeIn.duration;
-        applyFadeEnvelope(
-          gainNode.gain,
-          fadeInStart,
-          fadeInEnd,
-          0,
-          baseGain,
-          fadeIn.type || "linear"
-        );
-      }
-      if (fadeOut) {
-        const fadeOutStart = startTime + duration - fadeOut.duration;
-        const fadeOutEnd = startTime + duration;
-        if (!fadeIn || fadeIn.duration < duration - fadeOut.duration) {
-          gainNode.gain.setValueAtTime(baseGain, fadeOutStart);
-        }
-        applyFadeEnvelope(
-          gainNode.gain,
-          fadeOutStart,
-          fadeOutEnd,
-          baseGain,
-          0,
-          fadeOut.type || "linear"
-        );
-      }
-    } else {
-      gainNode.gain.setValueAtTime(baseGain, startTime);
-    }
-    source.start(startTime, offset, duration);
+    return result;
   });
 }
-function applyFadeEnvelope(gainParam, startTime, endTime, startValue, endValue, fadeType) {
-  const duration = endTime - startTime;
-  if (duration <= 0) return;
-  switch (fadeType) {
-    case "linear":
-      gainParam.setValueAtTime(startValue, startTime);
-      gainParam.linearRampToValueAtTime(endValue, endTime);
-      break;
-    case "exponential": {
-      const expStart = Math.max(startValue, 1e-4);
-      const expEnd = Math.max(endValue, 1e-4);
-      gainParam.setValueAtTime(expStart, startTime);
-      gainParam.exponentialRampToValueAtTime(expEnd, endTime);
-      if (endValue === 0) {
-        gainParam.setValueAtTime(0, endTime);
-      }
-      break;
-    }
-    case "logarithmic": {
-      const logCurve = generateFadeCurve(startValue, endValue, 256, "logarithmic");
-      gainParam.setValueCurveAtTime(logCurve, startTime, duration);
-      break;
-    }
-    case "sCurve": {
-      const sCurve = generateFadeCurve(startValue, endValue, 256, "sCurve");
-      gainParam.setValueCurveAtTime(sCurve, startTime, duration);
-      break;
-    }
-    default:
-      gainParam.setValueAtTime(startValue, startTime);
-      gainParam.linearRampToValueAtTime(endValue, endTime);
+function applyClipFades(gainParam, clipGain, startTime, clipDuration, fadeIn, fadeOut) {
+  if (fadeIn) {
+    gainParam.setValueAtTime(0, startTime);
+  } else {
+    gainParam.setValueAtTime(clipGain, startTime);
   }
-}
-function generateFadeCurve(startValue, endValue, numPoints, curveType) {
-  const curve = new Float32Array(numPoints);
-  const range = endValue - startValue;
-  for (let i = 0; i < numPoints; i++) {
-    const t = i / (numPoints - 1);
-    let curveValue;
-    if (curveType === "logarithmic") {
-      if (range > 0) {
-        curveValue = Math.log10(1 + t * 9) / Math.log10(10);
-      } else {
-        curveValue = 1 - Math.log10(1 + (1 - t) * 9) / Math.log10(10);
-      }
-    } else {
-      curveValue = t * t * (3 - 2 * t);
+  if (fadeIn) {
+    (0, import_core4.applyFadeIn)(gainParam, startTime, fadeIn.duration, fadeIn.type || "linear", 0, clipGain);
+  }
+  if (fadeOut) {
+    const fadeOutStart = startTime + clipDuration - fadeOut.duration;
+    if (!fadeIn || fadeIn.duration < clipDuration - fadeOut.duration) {
+      gainParam.setValueAtTime(clipGain, fadeOutStart);
     }
-    curve[i] = startValue + range * curveValue;
+    (0, import_core4.applyFadeOut)(gainParam, fadeOutStart, fadeOut.duration, fadeOut.type || "linear", clipGain, 0);
   }
-  return curve;
 }
 
 // src/hooks/useAnimationFrameLoop.ts
@@ -3520,7 +3399,7 @@ function useWaveformDataCache(tracks, baseScale) {
 
 // src/hooks/useDynamicTracks.ts
 var import_react22 = require("react");
-var import_core4 = require("@waveform-playlist/core");
+var import_core5 = require("@waveform-playlist/core");
 var import_playout3 = require("@waveform-playlist/playout");
 function getSourceName(source) {
   var _a, _b, _c, _d, _e;
@@ -3574,7 +3453,7 @@ function useDynamicTracks() {
     if (sources.length === 0) return;
     const audioContext = (0, import_playout3.getGlobalAudioContext)();
     const placeholders = sources.map((source) => ({
-      track: (0, import_core4.createTrack)({ name: `${getSourceName(source)} (loading...)`, clips: [] }),
+      track: (0, import_core5.createTrack)({ name: `${getSourceName(source)} (loading...)`, clips: [] }),
       source
     }));
     setTracks((prev) => [...prev, ...placeholders.map((p) => p.track)]);
@@ -3586,7 +3465,7 @@ function useDynamicTracks() {
       (() => __async(null, null, function* () {
         try {
           const { audioBuffer, name } = yield decodeSource(source, audioContext, controller.signal);
-          const clip = (0, import_core4.createClipFromSeconds)({
+          const clip = (0, import_core5.createClipFromSeconds)({
             audioBuffer,
             startTime: 0,
             duration: audioBuffer.duration,
@@ -3644,7 +3523,7 @@ function useDynamicTracks() {
 // src/hooks/useOutputMeter.ts
 var import_react23 = require("react");
 var import_playout4 = require("@waveform-playlist/playout");
-var import_core5 = require("@waveform-playlist/core");
+var import_core6 = require("@waveform-playlist/core");
 var import_worklets = require("@waveform-playlist/worklets");
 var PEAK_DECAY = 0.98;
 function useOutputMeter(options = {}) {
@@ -3699,8 +3578,8 @@ function useOutputMeter(options = {}) {
         const rmsValues = [];
         for (let ch = 0; ch < peak.length; ch++) {
           smoothed[ch] = Math.max(peak[ch], ((_a = smoothed[ch]) != null ? _a : 0) * PEAK_DECAY);
-          peakValues.push((0, import_core5.gainToNormalized)(smoothed[ch]));
-          rmsValues.push((0, import_core5.gainToNormalized)(rms[ch]));
+          peakValues.push((0, import_core6.gainToNormalized)(smoothed[ch]));
+          rmsValues.push((0, import_core6.gainToNormalized)(rms[ch]));
         }
         setLevels(peakValues);
         setRmsLevels(rmsValues);
@@ -3822,6 +3701,7 @@ var WaveformPlaylistProvider = ({
   const playbackEndTimeRef = (0, import_react24.useRef)(null);
   const scrollContainerRef = (0, import_react24.useRef)(null);
   const isAutomaticScrollRef = (0, import_react24.useRef)(false);
+  const frameCallbacksRef = (0, import_react24.useRef)(/* @__PURE__ */ new Map());
   const continuousPlayRef = (0, import_react24.useRef)((_d = annotationList == null ? void 0 : annotationList.isContinuousPlay) != null ? _d : false);
   const activeAnnotationIdRef = (0, import_react24.useRef)(null);
   const engineTracksRef = (0, import_react24.useRef)(null);
@@ -4282,10 +4162,30 @@ var WaveformPlaylistProvider = ({
     const elapsed = (0, import_tone4.getContext)().currentTime - ((_a2 = playbackStartTimeRef.current) != null ? _a2 : 0);
     return ((_b2 = audioStartPositionRef.current) != null ? _b2 : 0) + elapsed;
   }, []);
+  const registerFrameCallback = (0, import_react24.useCallback)((id, cb) => {
+    frameCallbacksRef.current.set(id, cb);
+  }, []);
+  const unregisterFrameCallback = (0, import_react24.useCallback)((id) => {
+    frameCallbacksRef.current.delete(id);
+  }, []);
   const startAnimationLoop = (0, import_react24.useCallback)(() => {
+    const audioCtx = (0, import_playout5.getGlobalAudioContext)();
     const updateTime = () => {
       const time = getPlaybackTime();
       currentTimeRef.current = time;
+      const latency = "outputLatency" in audioCtx ? audioCtx.outputLatency : 0;
+      const visualTime = Math.max(0, time - latency);
+      const sr = sampleRateRef.current;
+      const spp = samplesPerPixelRef.current;
+      const frameData = {
+        time,
+        visualTime,
+        sampleRate: sr,
+        samplesPerPixel: spp
+      };
+      for (const cb of frameCallbacksRef.current.values()) {
+        cb(frameData);
+      }
       const currentAnnotations = annotationsRef.current;
       if (currentAnnotations.length > 0) {
         const currentAnnotation = currentAnnotations.find(
@@ -4320,10 +4220,9 @@ var WaveformPlaylistProvider = ({
       }
       if (isAutomaticScrollRef.current && scrollContainerRef.current && duration > 0) {
         const container = scrollContainerRef.current;
-        const sr = sampleRateRef.current;
-        const pixelPosition = time * sr / samplesPerPixelRef.current;
+        const pixelPosition = visualTime * sr / spp;
         const containerWidth = container.clientWidth;
-        const targetScrollLeft = Math.max(0, pixelPosition - containerWidth / 2);
+        const targetScrollLeft = Math.round(Math.max(0, pixelPosition - containerWidth / 2));
         container.scrollLeft = targetScrollLeft;
       }
       if (playbackEndTimeRef.current !== null && time >= playbackEndTimeRef.current) {
@@ -4559,7 +4458,9 @@ var WaveformPlaylistProvider = ({
       currentTimeRef,
       playbackStartTimeRef,
       audioStartPositionRef,
-      getPlaybackTime
+      getPlaybackTime,
+      registerFrameCallback,
+      unregisterFrameCallback
     }),
     [
       isPlaying,
@@ -4567,7 +4468,9 @@ var WaveformPlaylistProvider = ({
       currentTimeRef,
       playbackStartTimeRef,
       audioStartPositionRef,
-      getPlaybackTime
+      getPlaybackTime,
+      registerFrameCallback,
+      unregisterFrameCallback
     ]
   );
   const stateValue = (0, import_react24.useMemo)(
@@ -5348,32 +5251,19 @@ var PositionDisplay = import_styled_components3.default.span`
 var AudioPosition = ({ className }) => {
   var _a;
   const timeRef = (0, import_react27.useRef)(null);
-  const animationFrameRef = (0, import_react27.useRef)(null);
-  const { isPlaying, currentTimeRef, getPlaybackTime } = usePlaybackAnimation();
+  const { isPlaying, currentTimeRef, registerFrameCallback, unregisterFrameCallback } = usePlaybackAnimation();
   const { timeFormat: format } = usePlaylistData();
   (0, import_react27.useEffect)(() => {
-    const updateTime = () => {
-      var _a2;
-      if (timeRef.current) {
-        const time = isPlaying ? getPlaybackTime() : (_a2 = currentTimeRef.current) != null ? _a2 : 0;
-        timeRef.current.textContent = (0, import_ui_components6.formatTime)(time, format);
-      }
-      if (isPlaying) {
-        animationFrameRef.current = requestAnimationFrame(updateTime);
-      }
-    };
+    const id = "audio-position";
     if (isPlaying) {
-      animationFrameRef.current = requestAnimationFrame(updateTime);
-    } else {
-      updateTime();
+      registerFrameCallback(id, ({ time }) => {
+        if (timeRef.current) {
+          timeRef.current.textContent = (0, import_ui_components6.formatTime)(time, format);
+        }
+      });
     }
-    return () => {
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
-        animationFrameRef.current = null;
-      }
-    };
-  }, [isPlaying, format, currentTimeRef, getPlaybackTime]);
+    return () => unregisterFrameCallback(id);
+  }, [isPlaying, format, registerFrameCallback, unregisterFrameCallback]);
   (0, import_react27.useEffect)(() => {
     var _a2;
     if (!isPlaying && timeRef.current) {
@@ -5533,33 +5423,20 @@ var PlayheadLine = import_styled_components4.default.div.attrs((props) => ({
 `;
 var AnimatedPlayhead = ({ color = "#ff0000" }) => {
   const playheadRef = (0, import_react30.useRef)(null);
-  const animationFrameRef = (0, import_react30.useRef)(null);
-  const { isPlaying, currentTimeRef, getPlaybackTime } = usePlaybackAnimation();
+  const { isPlaying, currentTimeRef, registerFrameCallback, unregisterFrameCallback } = usePlaybackAnimation();
   const { samplesPerPixel, sampleRate, progressBarWidth } = usePlaylistData();
   (0, import_react30.useEffect)(() => {
-    const updatePosition = () => {
-      var _a;
-      if (playheadRef.current) {
-        const time = isPlaying ? getPlaybackTime() : (_a = currentTimeRef.current) != null ? _a : 0;
-        const position = time * sampleRate / samplesPerPixel;
-        playheadRef.current.style.transform = `translate3d(${position}px, 0, 0)`;
-      }
-      if (isPlaying) {
-        animationFrameRef.current = requestAnimationFrame(updatePosition);
-      }
-    };
+    const id = "playhead";
     if (isPlaying) {
-      animationFrameRef.current = requestAnimationFrame(updatePosition);
-    } else {
-      updatePosition();
+      registerFrameCallback(id, ({ visualTime, sampleRate: sr, samplesPerPixel: spp }) => {
+        if (playheadRef.current) {
+          const px = visualTime * sr / spp;
+          playheadRef.current.style.transform = `translate3d(${px}px, 0, 0)`;
+        }
+      });
     }
-    return () => {
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
-        animationFrameRef.current = null;
-      }
-    };
-  }, [isPlaying, sampleRate, samplesPerPixel, currentTimeRef, getPlaybackTime]);
+    return () => unregisterFrameCallback(id);
+  }, [isPlaying, registerFrameCallback, unregisterFrameCallback]);
   (0, import_react30.useEffect)(() => {
     var _a;
     if (!isPlaying && playheadRef.current) {
@@ -5574,7 +5451,7 @@ var AnimatedPlayhead = ({ color = "#ff0000" }) => {
 // src/components/ChannelWithProgress.tsx
 var import_react31 = require("react");
 var import_styled_components5 = __toESM(require("styled-components"));
-var import_core6 = require("@waveform-playlist/core");
+var import_core7 = require("@waveform-playlist/core");
 var import_ui_components8 = require("@waveform-playlist/ui-components");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var ChannelWrapper = import_styled_components5.default.div`
@@ -5631,58 +5508,44 @@ var ChannelWithProgress = (_a) => {
     "clipOffsetSeconds"
   ]);
   const progressRef = (0, import_react31.useRef)(null);
-  const animationFrameRef = (0, import_react31.useRef)(null);
+  const callbackId = (0, import_react31.useId)();
   const theme = (0, import_ui_components8.useTheme)();
   const { waveHeight } = (0, import_ui_components8.usePlaylistInfo)();
-  const { isPlaying, currentTimeRef, getPlaybackTime } = usePlaybackAnimation();
+  const { isPlaying, currentTimeRef, registerFrameCallback, unregisterFrameCallback } = usePlaybackAnimation();
   const { samplesPerPixel, sampleRate } = usePlaylistData();
   const progressColor = (theme == null ? void 0 : theme.waveProgressColor) || "rgba(0, 0, 0, 0.1)";
-  const clipPixelWidth = (0, import_core6.clipPixelWidth)(
+  const clipPixelWidth = (0, import_core7.clipPixelWidth)(
     clipStartSample,
     clipDurationSamples,
     samplesPerPixel
   );
   (0, import_react31.useEffect)(() => {
-    const updateProgress = () => {
-      var _a2;
-      if (progressRef.current) {
-        const currentTime = isPlaying ? getPlaybackTime() : (_a2 = currentTimeRef.current) != null ? _a2 : 0;
-        const currentSample = currentTime * sampleRate;
-        const clipEndSample = clipStartSample + clipDurationSamples;
-        let ratio = 0;
-        if (currentSample <= clipStartSample) {
-          ratio = 0;
-        } else if (currentSample >= clipEndSample) {
-          ratio = 1;
-        } else {
-          const playedSamples = currentSample - clipStartSample;
-          ratio = playedSamples / clipDurationSamples;
-        }
-        progressRef.current.style.transform = `scaleX(${ratio})`;
-      }
-      if (isPlaying) {
-        animationFrameRef.current = requestAnimationFrame(updateProgress);
-      }
-    };
     if (isPlaying) {
-      animationFrameRef.current = requestAnimationFrame(updateProgress);
-    } else {
-      updateProgress();
+      registerFrameCallback(callbackId, ({ visualTime, sampleRate: sr }) => {
+        if (progressRef.current) {
+          const currentSample = visualTime * sr;
+          const clipEndSample = clipStartSample + clipDurationSamples;
+          let ratio = 0;
+          if (currentSample <= clipStartSample) {
+            ratio = 0;
+          } else if (currentSample >= clipEndSample) {
+            ratio = 1;
+          } else {
+            const playedSamples = currentSample - clipStartSample;
+            ratio = playedSamples / clipDurationSamples;
+          }
+          progressRef.current.style.transform = `scaleX(${ratio})`;
+        }
+      });
     }
-    return () => {
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
-        animationFrameRef.current = null;
-      }
-    };
+    return () => unregisterFrameCallback(callbackId);
   }, [
     isPlaying,
-    sampleRate,
     clipStartSample,
     clipDurationSamples,
-    clipPixelWidth,
-    currentTimeRef,
-    getPlaybackTime
+    callbackId,
+    registerFrameCallback,
+    unregisterFrameCallback
   ]);
   (0, import_react31.useEffect)(() => {
     var _a2;
@@ -7161,7 +7024,7 @@ var KeyboardShortcuts = ({
 var import_react40 = __toESM(require("react"));
 var import_react41 = require("@dnd-kit/react");
 var import_modifiers2 = require("@dnd-kit/abstract/modifiers");
-var import_core8 = require("@waveform-playlist/core");
+var import_core9 = require("@waveform-playlist/core");
 var import_ui_components12 = require("@waveform-playlist/ui-components");
 
 // src/modifiers/ClipCollisionModifier.ts
@@ -7190,7 +7053,7 @@ var ClipCollisionModifier = _ClipCollisionModifier;
 
 // src/modifiers/SnapToGridModifier.ts
 var import_abstract2 = require("@dnd-kit/abstract");
-var import_core7 = require("@waveform-playlist/core");
+var import_core8 = require("@waveform-playlist/core");
 var _SnapToGridModifier = class _SnapToGridModifier extends import_abstract2.Modifier {
   apply(operation) {
     const { transform, source } = operation;
@@ -7211,18 +7074,18 @@ var _SnapToGridModifier = class _SnapToGridModifier extends import_abstract2.Mod
     }
     const { snapTo, bpm, timeSignature, sampleRate } = this.options;
     if (snapTo === "off") return transform;
-    const gridTicks = snapTo === "bar" ? (0, import_core7.ticksPerBar)(timeSignature) : (0, import_core7.ticksPerBeat)(timeSignature);
+    const gridTicks = snapTo === "bar" ? (0, import_core8.ticksPerBar)(timeSignature) : (0, import_core8.ticksPerBeat)(timeSignature);
     if (startSample !== void 0) {
       const proposedSamples = startSample + transform.x * samplesPerPixel;
-      const proposedTicks = (0, import_core7.samplesToTicks)(proposedSamples, bpm, sampleRate);
-      const snappedTicks2 = (0, import_core7.snapToGrid)(proposedTicks, gridTicks);
-      const snappedSamples2 = (0, import_core7.ticksToSamples)(snappedTicks2, bpm, sampleRate);
+      const proposedTicks = (0, import_core8.samplesToTicks)(proposedSamples, bpm, sampleRate);
+      const snappedTicks2 = (0, import_core8.snapToGrid)(proposedTicks, gridTicks);
+      const snappedSamples2 = (0, import_core8.ticksToSamples)(snappedTicks2, bpm, sampleRate);
       return { x: (snappedSamples2 - startSample) / samplesPerPixel, y: 0 };
     }
     const deltaSamples = transform.x * samplesPerPixel;
-    const deltaTicks = (0, import_core7.samplesToTicks)(deltaSamples, bpm, sampleRate);
-    const snappedTicks = (0, import_core7.snapToGrid)(deltaTicks, gridTicks);
-    const snappedSamples = (0, import_core7.ticksToSamples)(snappedTicks, bpm, sampleRate);
+    const deltaTicks = (0, import_core8.samplesToTicks)(deltaSamples, bpm, sampleRate);
+    const snappedTicks = (0, import_core8.snapToGrid)(deltaTicks, gridTicks);
+    const snappedSamples = (0, import_core8.ticksToSamples)(snappedTicks, bpm, sampleRate);
     return { x: snappedSamples / samplesPerPixel, y: 0 };
   }
 };
@@ -7253,11 +7116,11 @@ var ClipInteractionProvider = ({
   const snapSamplePosition = (0, import_react40.useMemo)(() => {
     if (useBeatsSnap && beatsAndBars) {
       const { bpm, timeSignature, snapTo } = beatsAndBars;
-      const gridTicks = snapTo === "bar" ? (0, import_core8.ticksPerBar)(timeSignature) : (0, import_core8.ticksPerBeat)(timeSignature);
+      const gridTicks = snapTo === "bar" ? (0, import_core9.ticksPerBar)(timeSignature) : (0, import_core9.ticksPerBeat)(timeSignature);
       return (samplePos) => {
-        const ticks = (0, import_core8.samplesToTicks)(samplePos, bpm, sampleRate);
-        const snapped = (0, import_core8.snapToGrid)(ticks, gridTicks);
-        return (0, import_core8.ticksToSamples)(snapped, bpm, sampleRate);
+        const ticks = (0, import_core9.samplesToTicks)(samplePos, bpm, sampleRate);
+        const snapped = (0, import_core9.snapToGrid)(ticks, gridTicks);
+        return (0, import_core9.ticksToSamples)(snapped, bpm, sampleRate);
       };
     }
     if (useTimescaleSnap) {