@waveform-playlist/browser 11.1.0 → 11.3.0

package/dist/index.mjs

@@ -65,6 +65,7 @@ import {
 } from "react";
 import { ThemeProvider } from "styled-components";
 import {
+  configureGlobalContext,
   createToneAdapter,
   getGlobalAudioContext as getGlobalAudioContext4
 } from "@waveform-playlist/playout";
@@ -78,11 +79,13 @@ import { getContext as getContext2 } from "tone";
 import WaveformData from "waveform-data";
 function loadWaveformData(src) {
   return __async(this, null, function* () {
+    var _a, _b;
     const response = yield fetch(src);
     if (!response.ok) {
       throw new Error(`Failed to fetch waveform data: ${response.statusText}`);
     }
-    const isBinary = src.endsWith(".dat");
+    const { pathname } = new URL(src, (_b = (_a = globalThis.location) == null ? void 0 : _a.href) != null ? _b : "http://localhost");
+    const isBinary = pathname.toLowerCase().endsWith(".dat");
     if (isBinary) {
       const arrayBuffer = yield response.arrayBuffer();
       return WaveformData.create(arrayBuffer);
@@ -3700,6 +3703,7 @@ var WaveformPlaylistProvider = ({
   soundFontCache,
   deferEngineRebuild = false,
   indefinitePlayback = false,
+  sampleRate: sampleRateProp,
   children
 }) => {
   var _a, _b, _c, _d;
@@ -3755,6 +3759,7 @@ var WaveformPlaylistProvider = ({
   const playbackEndTimeRef = useRef15(null);
   const scrollContainerRef = useRef15(null);
   const isAutomaticScrollRef = useRef15(false);
+  const frameCallbacksRef = useRef15(/* @__PURE__ */ new Map());
   const continuousPlayRef = useRef15((_d = annotationList == null ? void 0 : annotationList.isContinuousPlay) != null ? _d : false);
   const activeAnnotationIdRef = useRef15(null);
   const engineTracksRef = useRef15(null);
@@ -3763,9 +3768,21 @@ var WaveformPlaylistProvider = ({
   const isDraggingRef = useRef15(false);
   const prevTracksRef = useRef15([]);
   const samplesPerPixelRef = useRef15(initialSamplesPerPixel);
-  const sampleRateRef = useRef15(
-    typeof AudioContext !== "undefined" ? getGlobalAudioContext4().sampleRate : 48e3
-  );
+  const [initialSampleRate] = useState15(() => {
+    if (typeof AudioContext === "undefined") return sampleRateProp != null ? sampleRateProp : 48e3;
+    try {
+      if (sampleRateProp !== void 0) {
+        return configureGlobalContext({ sampleRate: sampleRateProp });
+      }
+      return getGlobalAudioContext4().sampleRate;
+    } catch (err) {
+      console.warn(
+        "[waveform-playlist] Failed to configure AudioContext: " + String(err) + " \u2014 falling back to " + (sampleRateProp != null ? sampleRateProp : 48e3) + " Hz"
+      );
+      return sampleRateProp != null ? sampleRateProp : 48e3;
+    }
+  });
+  const sampleRateRef = useRef15(initialSampleRate);
   const { timeFormat, setTimeFormat, formatTime: formatTime2 } = useTimeFormat();
   const zoom = useZoomControls({ engineRef, initialSamplesPerPixel });
   const { samplesPerPixel, onEngineState: onZoomEngineState } = zoom;
@@ -4115,15 +4132,28 @@ var WaveformPlaylistProvider = ({
         let peaks;
         if (clip.waveformData) {
           try {
+            const wdRate = clip.waveformData.sample_rate;
+            const clipRate = clip.sampleRate;
+            let peakOffset = clip.offsetSamples;
+            let peakDuration = clip.durationSamples;
+            let peakSpp = samplesPerPixel;
+            if (wdRate !== clipRate && clipRate > 0 && wdRate > 0) {
+              const ratio = wdRate / clipRate;
+              peakOffset = Math.round(clip.offsetSamples * ratio);
+              peakDuration = Math.round(clip.durationSamples * ratio);
+              peakSpp = Math.max(1, Math.round(samplesPerPixel * ratio));
+            }
             peaks = extractPeaksFromWaveformDataFull(
               clip.waveformData,
-              samplesPerPixel,
+              peakSpp,
               mono,
-              clip.offsetSamples,
-              clip.durationSamples
+              peakOffset,
+              peakDuration
             );
           } catch (err) {
-            console.warn("[waveform-playlist] Failed to extract peaks from waveformData:", err);
+            console.warn(
+              "[waveform-playlist] Failed to extract peaks from waveformData: " + String(err)
+            );
           }
         }
         if (!peaks) {
@@ -4138,7 +4168,9 @@ var WaveformPlaylistProvider = ({
                 clip.durationSamples
               );
             } catch (err) {
-              console.warn("[waveform-playlist] Failed to extract peaks from cache:", err);
+              console.warn(
+                "[waveform-playlist] Failed to extract peaks from cache: " + String(err)
+              );
             }
           }
         }
@@ -4188,10 +4220,30 @@ var WaveformPlaylistProvider = ({
     const elapsed = getContext2().currentTime - ((_a2 = playbackStartTimeRef.current) != null ? _a2 : 0);
     return ((_b2 = audioStartPositionRef.current) != null ? _b2 : 0) + elapsed;
   }, []);
+  const registerFrameCallback = useCallback19((id, cb) => {
+    frameCallbacksRef.current.set(id, cb);
+  }, []);
+  const unregisterFrameCallback = useCallback19((id) => {
+    frameCallbacksRef.current.delete(id);
+  }, []);
   const startAnimationLoop = useCallback19(() => {
+    const audioCtx = getGlobalAudioContext4();
     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(
@@ -4226,10 +4278,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) {
@@ -4465,7 +4516,9 @@ var WaveformPlaylistProvider = ({
       currentTimeRef,
       playbackStartTimeRef,
       audioStartPositionRef,
-      getPlaybackTime
+      getPlaybackTime,
+      registerFrameCallback,
+      unregisterFrameCallback
     }),
     [
       isPlaying,
@@ -4473,7 +4526,9 @@ var WaveformPlaylistProvider = ({
       currentTimeRef,
       playbackStartTimeRef,
       audioStartPositionRef,
-      getPlaybackTime
+      getPlaybackTime,
+      registerFrameCallback,
+      unregisterFrameCallback
     ]
   );
   const stateValue = useMemo4(
@@ -5268,32 +5323,19 @@ var PositionDisplay = styled.span`
 var AudioPosition = ({ className }) => {
   var _a;
   const timeRef = useRef17(null);
-  const animationFrameRef = useRef17(null);
-  const { isPlaying, currentTimeRef, getPlaybackTime } = usePlaybackAnimation();
+  const { isPlaying, currentTimeRef, registerFrameCallback, unregisterFrameCallback } = usePlaybackAnimation();
   const { timeFormat: format } = usePlaylistData();
   useEffect12(() => {
-    const updateTime = () => {
-      var _a2;
-      if (timeRef.current) {
-        const time = isPlaying ? getPlaybackTime() : (_a2 = currentTimeRef.current) != null ? _a2 : 0;
-        timeRef.current.textContent = 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 = formatTime(time, format);
+        }
+      });
     }
-    return () => {
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
-        animationFrameRef.current = null;
-      }
-    };
-  }, [isPlaying, format, currentTimeRef, getPlaybackTime]);
+    return () => unregisterFrameCallback(id);
+  }, [isPlaying, format, registerFrameCallback, unregisterFrameCallback]);
   useEffect12(() => {
     var _a2;
     if (!isPlaying && timeRef.current) {
@@ -5476,33 +5518,20 @@ var PlayheadLine = styled2.div.attrs((props) => ({
 `;
 var AnimatedPlayhead = ({ color = "#ff0000" }) => {
   const playheadRef = useRef18(null);
-  const animationFrameRef = useRef18(null);
-  const { isPlaying, currentTimeRef, getPlaybackTime } = usePlaybackAnimation();
+  const { isPlaying, currentTimeRef, registerFrameCallback, unregisterFrameCallback } = usePlaybackAnimation();
   const { samplesPerPixel, sampleRate, progressBarWidth } = usePlaylistData();
   useEffect13(() => {
-    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]);
   useEffect13(() => {
     var _a;
     if (!isPlaying && playheadRef.current) {
@@ -5515,7 +5544,7 @@ var AnimatedPlayhead = ({ color = "#ff0000" }) => {
 };
 
 // src/components/ChannelWithProgress.tsx
-import { useRef as useRef19, useEffect as useEffect14 } from "react";
+import { useId, useRef as useRef19, useEffect as useEffect14 } from "react";
 import styled3 from "styled-components";
 import {
   clipPixelWidth as computeClipPixelWidth
@@ -5581,10 +5610,10 @@ var ChannelWithProgress = (_a) => {
     "clipOffsetSeconds"
   ]);
   const progressRef = useRef19(null);
-  const animationFrameRef = useRef19(null);
+  const callbackId = useId();
   const theme = useTheme();
   const { waveHeight } = 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 = computeClipPixelWidth(
@@ -5593,46 +5622,32 @@ var ChannelWithProgress = (_a) => {
     samplesPerPixel
   );
   useEffect14(() => {
-    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
   ]);
   useEffect14(() => {
     var _a2;