@waveform-playlist/browser 13.0.0 → 13.1.1

package/dist/index.d.mts

@@ -6,11 +6,11 @@ export { EffectsFunction, TrackEffectsFunction } from '@waveform-playlist/playou
 import * as React$1 from 'react';
 import React__default, { ReactNode, RefObject } from 'react';
 import { PlaylistEngine, EngineState } from '@waveform-playlist/engine';
-import { ClipTrack, AnnotationData, AnnotationAction, PeakData, Fade, MidiNoteData, WaveformDataObject, TrackEffectsFunction as TrackEffectsFunction$2, RenderMode, SpectrogramConfig, ColorMapValue, KeyboardShortcut, AnnotationActionOptions, RenderAnnotationItemProps, TrackSpectrogramOverrides } from '@waveform-playlist/core';
+import { PeakData, Fade, MidiNoteData, ClipTrack, AnnotationData, AnnotationAction, WaveformDataObject, TrackEffectsFunction as TrackEffectsFunction$2, RenderMode, SpectrogramConfig, ColorMapValue, KeyboardShortcut, AnnotationActionOptions, RenderAnnotationItemProps, TrackSpectrogramOverrides } from '@waveform-playlist/core';
 export { AnnotationData, AudioClip, ClipTrack, Fade, getShortcutLabel } from '@waveform-playlist/core';
 import { WaveformPlaylistTheme, TimeFormat, RenderPlayheadFunction, TrackMenuItem, SnapTo } from '@waveform-playlist/ui-components';
 export { TimeFormat } from '@waveform-playlist/ui-components';
-import { FadeConfig, MediaElementPlayout } from '@waveform-playlist/media-element-playout';
+import { MediaElementPlayout, FadeConfig } from '@waveform-playlist/media-element-playout';
 import * as _dnd_kit_abstract from '@dnd-kit/abstract';
 import { DragStartEvent, DragMoveEvent, DragEndEvent, PluginDescriptor, Modifier, DragDropManager, DragOperation, Plugins } from '@dnd-kit/abstract';
 import { PointerSensor } from '@dnd-kit/dom';
@@ -45,7 +45,8 @@ interface TrackState$1 {
 interface FrameData {
     /** Raw engine time (for state/logic — NOT for visual positioning). */
     readonly time: number;
-    /** time - outputLatency (for DOM positioning — matches speaker output). */
+    /** Visually-aligned time for DOM positioning: engine.getAudibleTime() while
+     *  playing (matches speaker output), raw time when resting. */
     readonly visualTime: number;
     readonly sampleRate: number;
     readonly samplesPerPixel: number;
@@ -55,8 +56,8 @@ interface PlaybackAnimationContextValue {
     currentTime: number;
     currentTimeRef: React__default.RefObject<number>;
     /**
-     * Visually-aligned playback time (raw engine time minus `outputLatency` and
-     * `engine.lookAhead`). Kept current by the animation loop during playback
+     * Visually-aligned playback time (engine.getAudibleTime() while playing;
+     * raw resting time otherwise). Kept current by the animation loop during playback
      * and by pause/seek/stop paths when stopped. Read from this for any visual
      * positioning that should match the audible output.
      */

package/dist/index.d.ts

@@ -6,11 +6,11 @@ export { EffectsFunction, TrackEffectsFunction } from '@waveform-playlist/playou
 import * as React$1 from 'react';
 import React__default, { ReactNode, RefObject } from 'react';
 import { PlaylistEngine, EngineState } from '@waveform-playlist/engine';
-import { ClipTrack, AnnotationData, AnnotationAction, PeakData, Fade, MidiNoteData, WaveformDataObject, TrackEffectsFunction as TrackEffectsFunction$2, RenderMode, SpectrogramConfig, ColorMapValue, KeyboardShortcut, AnnotationActionOptions, RenderAnnotationItemProps, TrackSpectrogramOverrides } from '@waveform-playlist/core';
+import { PeakData, Fade, MidiNoteData, ClipTrack, AnnotationData, AnnotationAction, WaveformDataObject, TrackEffectsFunction as TrackEffectsFunction$2, RenderMode, SpectrogramConfig, ColorMapValue, KeyboardShortcut, AnnotationActionOptions, RenderAnnotationItemProps, TrackSpectrogramOverrides } from '@waveform-playlist/core';
 export { AnnotationData, AudioClip, ClipTrack, Fade, getShortcutLabel } from '@waveform-playlist/core';
 import { WaveformPlaylistTheme, TimeFormat, RenderPlayheadFunction, TrackMenuItem, SnapTo } from '@waveform-playlist/ui-components';
 export { TimeFormat } from '@waveform-playlist/ui-components';
-import { FadeConfig, MediaElementPlayout } from '@waveform-playlist/media-element-playout';
+import { MediaElementPlayout, FadeConfig } from '@waveform-playlist/media-element-playout';
 import * as _dnd_kit_abstract from '@dnd-kit/abstract';
 import { DragStartEvent, DragMoveEvent, DragEndEvent, PluginDescriptor, Modifier, DragDropManager, DragOperation, Plugins } from '@dnd-kit/abstract';
 import { PointerSensor } from '@dnd-kit/dom';
@@ -45,7 +45,8 @@ interface TrackState$1 {
 interface FrameData {
     /** Raw engine time (for state/logic — NOT for visual positioning). */
     readonly time: number;
-    /** time - outputLatency (for DOM positioning — matches speaker output). */
+    /** Visually-aligned time for DOM positioning: engine.getAudibleTime() while
+     *  playing (matches speaker output), raw time when resting. */
     readonly visualTime: number;
     readonly sampleRate: number;
     readonly samplesPerPixel: number;
@@ -55,8 +56,8 @@ interface PlaybackAnimationContextValue {
     currentTime: number;
     currentTimeRef: React__default.RefObject<number>;
     /**
-     * Visually-aligned playback time (raw engine time minus `outputLatency` and
-     * `engine.lookAhead`). Kept current by the animation loop during playback
+     * Visually-aligned playback time (engine.getAudibleTime() while playing;
+     * raw resting time otherwise). Kept current by the animation loop during playback
      * and by pause/seek/stop paths when stopped. Read from this for any visual
      * positioning that should match the audible output.
      */

package/dist/index.js

@@ -163,7 +163,7 @@ var Tone2 = __toESM(require("tone"));
 // src/WaveformPlaylistContext.tsx
 var import_react24 = require("react");
 var import_styled_components = require("styled-components");
-var import_playout5 = require("@waveform-playlist/playout");
+var import_playout6 = require("@waveform-playlist/playout");
 var import_engine3 = require("@waveform-playlist/engine");
 var import_ui_components2 = require("@waveform-playlist/ui-components");
 var import_tone4 = require("tone");
@@ -331,6 +331,13 @@ function extractPeaksFromWaveformDataFull(waveformData, samplesPerPixel, isMono,
   };
 }
 
+// src/soundFontSync.ts
+var import_playout = require("@waveform-playlist/playout");
+function syncSoundFontCacheToAdapter(adapter, cache) {
+  if (!(0, import_playout.isToneAdapter)(adapter)) return;
+  adapter.setSoundFontCache(cache);
+}
+
 // src/hooks/useTimeFormat.ts
 var import_react = require("react");
 var import_ui_components = require("@waveform-playlist/ui-components");
@@ -1035,13 +1042,13 @@ function useClipDragHandlers({
 
 // src/hooks/useAnnotationDragHandlers.ts
 var import_react11 = __toESM(require("react"));
-var import_playout = require("@waveform-playlist/playout");
+var import_playout2 = require("@waveform-playlist/playout");
 var LINK_THRESHOLD = 0.01;
 function useAnnotationDragHandlers({
   annotations,
   onAnnotationsChange,
   samplesPerPixel,
-  sampleRate = (0, import_playout.getGlobalAudioContext)().sampleRate,
+  sampleRate = (0, import_playout2.getGlobalAudioContext)().sampleRate,
   duration,
   linkEndpoints
 }) {
@@ -2742,7 +2749,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");
+var import_playout3 = require("@waveform-playlist/playout");
 
 // src/utils/wavEncoder.ts
 function encodeWav(audioBuffer, options = {}) {
@@ -2841,7 +2848,7 @@ function useExportWav() {
         if (mode === "individual" && (trackIndex === void 0 || trackIndex < 0 || trackIndex >= tracks.length)) {
           throw new Error("Invalid track index for individual export");
         }
-        const sampleRate = (0, import_playout2.getGlobalAudioContext)().sampleRate;
+        const sampleRate = (0, import_playout3.getGlobalAudioContext)().sampleRate;
         let totalDurationSamples = 0;
         for (const track of tracks) {
           for (const clip of track.clips) {
@@ -2956,7 +2963,7 @@ function renderOffline(tracksToRender, hasSolo, duration, sampleRate, applyEffec
               player.connect(fadeGain);
               fadeGain.connect(trackVolume);
               if (applyEffects) {
-                const audioParam = (0, import_playout2.getUnderlyingAudioParam)(fadeGain.gain);
+                const audioParam = (0, import_playout3.getUnderlyingAudioParam)(fadeGain.gain);
                 if (audioParam) {
                   applyClipFades(audioParam, clipGain, startTime, clipDuration, fadeIn, fadeOut);
                 } else if (fadeIn || fadeOut) {
@@ -3400,7 +3407,7 @@ function useWaveformDataCache(tracks, baseScale) {
 // src/hooks/useDynamicTracks.ts
 var import_react22 = require("react");
 var import_core5 = require("@waveform-playlist/core");
-var import_playout3 = require("@waveform-playlist/playout");
+var import_playout4 = require("@waveform-playlist/playout");
 function getSourceName(source) {
   var _a, _b, _c, _d, _e;
   if (source instanceof File) {
@@ -3451,7 +3458,7 @@ function useDynamicTracks() {
   }, []);
   const addTracks = (0, import_react22.useCallback)((sources) => {
     if (sources.length === 0) return;
-    const audioContext = (0, import_playout3.getGlobalAudioContext)();
+    const audioContext = (0, import_playout4.getGlobalAudioContext)();
     const placeholders = sources.map((source) => ({
       track: (0, import_core5.createTrack)({ name: `${getSourceName(source)} (loading...)`, clips: [] }),
       source
@@ -3522,7 +3529,7 @@ function useDynamicTracks() {
 
 // src/hooks/useOutputMeter.ts
 var import_react23 = require("react");
-var import_playout4 = require("@waveform-playlist/playout");
+var import_playout5 = require("@waveform-playlist/playout");
 var import_core6 = require("@waveform-playlist/core");
 var import_worklets = require("@waveform-playlist/worklets");
 var PEAK_DECAY = 0.98;
@@ -3550,7 +3557,7 @@ function useOutputMeter(options = {}) {
   (0, import_react23.useEffect)(() => {
     let isMounted = true;
     const setup = () => __async(null, null, function* () {
-      const context = (0, import_playout4.getGlobalContext)();
+      const context = (0, import_playout5.getGlobalContext)();
       const rawCtx = context.rawContext;
       yield rawCtx.audioWorklet.addModule(import_worklets.meterProcessorUrl);
       if (!isMounted) return;
@@ -3599,7 +3606,7 @@ function useOutputMeter(options = {}) {
       isMounted = false;
       if (workletNodeRef.current) {
         try {
-          const context = (0, import_playout4.getGlobalContext)();
+          const context = (0, import_playout5.getGlobalContext)();
           context.destination.chain();
         } catch (err) {
           console.warn("[waveform-playlist] Failed to restore destination chain:", String(err));
@@ -3687,6 +3694,7 @@ var WaveformPlaylistProvider = ({
   const [annotationsEditable, setAnnotationsEditable] = (0, import_react24.useState)((_c = annotationList == null ? void 0 : annotationList.editable) != null ? _c : false);
   const [isReady, setIsReady] = (0, import_react24.useState)(false);
   const engineRef = (0, import_react24.useRef)(null);
+  const adapterRef = (0, import_react24.useRef)(null);
   const audioInitializedRef = (0, import_react24.useRef)(false);
   const isPlayingRef = (0, import_react24.useRef)(false);
   isPlayingRef.current = isPlaying;
@@ -3715,9 +3723,9 @@ var WaveformPlaylistProvider = ({
     if (typeof AudioContext === "undefined") return sampleRateProp != null ? sampleRateProp : 48e3;
     try {
       if (sampleRateProp !== void 0) {
-        return (0, import_playout5.configureGlobalContext)({ sampleRate: sampleRateProp });
+        return (0, import_playout6.configureGlobalContext)({ sampleRate: sampleRateProp });
       }
-      return (0, import_playout5.getGlobalAudioContext)().sampleRate;
+      return (0, import_playout6.getGlobalAudioContext)().sampleRate;
     } catch (err) {
       console.warn(
         "[waveform-playlist] Failed to configure AudioContext: " + String(err) + " \u2014 falling back to " + (sampleRateProp != null ? sampleRateProp : 48e3) + " Hz"
@@ -3915,6 +3923,7 @@ var WaveformPlaylistProvider = ({
       if (engineRef.current) {
         engineRef.current.dispose();
         engineRef.current = null;
+        adapterRef.current = null;
       }
       prevTracksRef.current = tracks;
       return;
@@ -3968,7 +3977,8 @@ var WaveformPlaylistProvider = ({
         lastTracksVersionRef.current = 0;
         engineTracksRef.current = null;
         audioInitializedRef.current = false;
-        const adapter = (0, import_playout5.createToneAdapter)({ effects, soundFontCache: soundFontCacheRef.current });
+        const adapter = (0, import_playout6.createToneAdapter)({ effects, soundFontCache: soundFontCacheRef.current });
+        adapterRef.current = adapter;
         const engine = new import_engine3.PlaylistEngine({
           adapter,
           samplesPerPixel: samplesPerPixelRef.current,
@@ -4037,6 +4047,7 @@ var WaveformPlaylistProvider = ({
       stopAnimationFrameLoop();
       if (engineRef.current) {
         engineRef.current.dispose();
+        adapterRef.current = null;
       }
     };
   }, [
@@ -4047,6 +4058,9 @@ var WaveformPlaylistProvider = ({
     // isPlaying is intentionally excluded — read from isPlayingRef inside the
     // effect body. Including it causes a full engine+playout rebuild on every
     // play/pause/stop, destroying and recreating all audio Players.
+    // soundFontCache is deliberately excluded — late cache changes are forwarded
+    // to the live adapter by the sync effect below; only adapter creation reads it
+    // (via soundFontCacheRef).
     onReady,
     effects,
     stopAnimationFrameLoop,
@@ -4064,9 +4078,11 @@ var WaveformPlaylistProvider = ({
     loopEndRef,
     isLoopEnabledRef,
     stableZoomLevels,
-    soundFontCache,
     deferEngineRebuild
   ]);
+  (0, import_react24.useEffect)(() => {
+    syncSoundFontCacheToAdapter(adapterRef.current, soundFontCache);
+  }, [soundFontCache]);
   (0, import_react24.useEffect)(() => {
     if (tracks.length === 0) return;
     const allTrackPeaks = tracks.map((track) => {
@@ -4164,12 +4180,7 @@ var WaveformPlaylistProvider = ({
     return ((_b2 = audioStartPositionRef.current) != null ? _b2 : 0) + elapsed;
   }, []);
   const toVisualTime = (0, import_react24.useCallback)((rawTime) => {
-    var _a2, _b2;
-    const audioCtx = (0, import_playout5.getGlobalAudioContext)();
-    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;
+    return Number.isFinite(rawTime) ? Math.max(0, rawTime) : 0;
   }, []);
   const setCurrentTimeRefs = (0, import_react24.useCallback)(
     (rawTime) => {
@@ -4189,14 +4200,10 @@ var WaveformPlaylistProvider = ({
     frameCallbacksRef.current.delete(id);
   }, []);
   const startAnimationLoop = (0, import_react24.useCallback)(() => {
-    const audioCtx = (0, import_playout5.getGlobalAudioContext)();
     const updateTime = () => {
-      var _a2, _b2;
       const time = getPlaybackTime();
       currentTimeRef.current = time;
-      const latency = "outputLatency" in audioCtx ? audioCtx.outputLatency : 0;
-      const lookAhead = (_b2 = (_a2 = engineRef.current) == null ? void 0 : _a2.lookAhead) != null ? _b2 : 0;
-      const visualRaw = time - latency - lookAhead;
+      const visualRaw = engineRef.current ? engineRef.current.getAudibleTime() : time;
       const visualTime = Number.isFinite(visualRaw) ? Math.max(0, visualRaw) : 0;
       visualTimeRef.current = visualTime;
       const sr = sampleRateRef.current;
@@ -5434,7 +5441,7 @@ function useClipInteractionEnabled() {
 var import_react33 = require("react");
 var import_react_dom = require("react-dom");
 var import_styled_components6 = __toESM(require("styled-components"));
-var import_playout6 = require("@waveform-playlist/playout");
+var import_playout7 = require("@waveform-playlist/playout");
 var import_ui_components9 = require("@waveform-playlist/ui-components");
 var import_core8 = require("@waveform-playlist/core");
 
@@ -5726,7 +5733,7 @@ var CustomPlayhead = ({ renderPlayhead, color, samplesPerPixel, sampleRate }) =>
     samplesPerPixel,
     sampleRate,
     controlsOffset: 0,
-    getAudioContextTime: () => (0, import_playout6.getGlobalAudioContext)().currentTime,
+    getAudioContextTime: () => (0, import_playout7.getGlobalAudioContext)().currentTime,
     getPlaybackTime
   });
 };
@@ -6193,7 +6200,7 @@ var PlaylistVisualization = ({
                         );
                       }),
                       (recordingState == null ? void 0 : recordingState.isRecording) && recordingState.trackId === track.id && ((_d2 = recordingState.peaks[0]) == null ? void 0 : _d2.length) > 0 && (() => {
-                        const audioCtx = (0, import_playout6.getGlobalAudioContext)();
+                        const audioCtx = (0, import_playout7.getGlobalAudioContext)();
                         const outputLatency = "outputLatency" in audioCtx ? audioCtx.outputLatency : 0;
                         const lookAhead = getLookAhead();
                         const latencyOffsetSamples = (0, import_core8.audibleLatencySamples)(