@waveform-playlist/browser 11.2.0 → 11.3.1

package/dist/index.mjs

@@ -2675,6 +2675,12 @@ function useTrackDynamicEffects() {
 
 // src/hooks/useExportWav.ts
 import { useState as useState11, useCallback as useCallback14 } from "react";
+import {
+  gainToDb,
+  trackChannelCount,
+  applyFadeIn,
+  applyFadeOut
+} from "@waveform-playlist/core";
 import {
   getUnderlyingAudioParam,
   getGlobalAudioContext as getGlobalAudioContext2
@@ -2788,47 +2794,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`);
@@ -2855,29 +2838,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, 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;
+          for (const { track, state } of audibleTracks) {
             const trackVolume = new Volume2(gainToDb(state.volume));
-            const trackPan = new Panner(state.pan);
+            const trackPan = new Panner({ pan: state.pan, channelCount: 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);
@@ -2894,6 +2883,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;
@@ -2902,167 +2897,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;
-                const audioParam = 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;
+              if (applyEffects) {
                 const audioParam = 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) {
+    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;
+    applyFadeOut(gainParam, fadeOutStart, fadeOut.duration, fadeOut.type || "linear", clipGain, 0);
   }
-  return curve;
 }
 
 // src/hooks/useAnimationFrameLoop.ts
@@ -3759,6 +3643,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);
@@ -4219,10 +4104,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(
@@ -4257,10 +4162,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) {
@@ -4496,7 +4400,9 @@ var WaveformPlaylistProvider = ({
       currentTimeRef,
       playbackStartTimeRef,
       audioStartPositionRef,
-      getPlaybackTime
+      getPlaybackTime,
+      registerFrameCallback,
+      unregisterFrameCallback
     }),
     [
       isPlaying,
@@ -4504,7 +4410,9 @@ var WaveformPlaylistProvider = ({
       currentTimeRef,
       playbackStartTimeRef,
       audioStartPositionRef,
-      getPlaybackTime
+      getPlaybackTime,
+      registerFrameCallback,
+      unregisterFrameCallback
     ]
   );
   const stateValue = useMemo4(
@@ -5299,32 +5207,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) {
@@ -5507,33 +5402,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) {
@@ -5546,7 +5428,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
@@ -5612,10 +5494,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(
@@ -5624,46 +5506,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;