@waveform-playlist/ui-components 12.1.0 → 13.0.0

package/dist/index.d.mts

@@ -480,9 +480,14 @@ interface SelectionTimeInputsProps {
 }
 declare const SelectionTimeInputs: react__default.FC<SelectionTimeInputsProps>;
 
-interface SpectrogramWorkerCanvasApi {
-    registerCanvas(canvasId: string, canvas: OffscreenCanvas): void;
-    unregisterCanvas(canvasId: string): void;
+interface SpectrogramCanvasRegistration {
+    canvasId: string;
+    canvas: OffscreenCanvas;
+    clipId: string;
+    channelIndex: number;
+    chunkIndex: number;
+    widthPx: number;
+    heightPx: number;
 }
 interface SpectrogramChannelProps {
     /** Visual position index — used for CSS positioning (top offset). */
@@ -497,12 +502,12 @@ interface SpectrogramChannelProps {
     devicePixelRatio?: number;
     /** Samples per pixel at current zoom level */
     samplesPerPixel: number;
-    /** Worker API for transferring canvas ownership. Rendering is done in the worker. */
-    workerApi: SpectrogramWorkerCanvasApi;
-    /** Clip ID used to construct unique canvas IDs for worker registration */
+    /** Clip ID used to construct unique canvas IDs */
     clipId: string;
-    /** Callback when canvases are registered with the worker, providing canvas IDs and widths */
-    onCanvasesReady?: (canvasIds: string[], canvasWidths: number[]) => void;
+    /** Single-call canvas registration. Receives the transferred OffscreenCanvas + metadata. */
+    onCanvasRegister: (reg: SpectrogramCanvasRegistration) => void;
+    /** Counterpart for chunk unmount / component unmount. */
+    onCanvasUnregister: (canvasId: string) => void;
 }
 declare const SpectrogramChannel: FunctionComponent<SpectrogramChannelProps>;
 
@@ -519,12 +524,12 @@ interface SmartChannelProps {
     renderMode?: RenderMode;
     /** Samples per pixel at current zoom level */
     samplesPerPixel?: number;
-    /** Worker API for OffscreenCanvas transfer */
-    spectrogramWorkerApi?: SpectrogramWorkerCanvasApi;
-    /** Clip ID for worker canvas registration */
+    /** Clip ID for spectrogram canvas registration */
     spectrogramClipId?: string;
-    /** Callback when canvases are registered with the worker */
-    spectrogramOnCanvasesReady?: (canvasIds: string[], canvasWidths: number[]) => void;
+    /** Single-call registration for spectrogram canvases (from SpectrogramIntegration). */
+    spectrogramOnCanvasRegister?: (reg: SpectrogramCanvasRegistration) => void;
+    /** Counterpart for chunk unmount / unmount. */
+    spectrogramOnCanvasUnregister?: (canvasId: string) => void;
     /** MIDI note data for piano-roll rendering */
     midiNotes?: MidiNoteData[];
     /** Sample rate for MIDI note time → pixel conversion */
@@ -933,4 +938,4 @@ declare const BaseSlider: styled_components_dist_types.IStyledComponentBase<"web
     ref?: ((instance: HTMLInputElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLInputElement> | null | undefined;
 }>, never>, never>> & string;
 
-export { AudioPosition, type AudioPositionProps, AutomaticScrollCheckbox, type AutomaticScrollCheckboxProps, BaseButton, BaseCheckbox, BaseCheckboxLabel, BaseCheckboxWrapper, BaseControlButton, BaseInput, BaseInputSmall, BaseLabel, BaseSelect, BaseSelectSmall, BaseSlider, type BeatsAndBarsContextValue, BeatsAndBarsProvider, type BeatsAndBarsProviderProps, Button, ButtonGroup, CLIP_BOUNDARY_WIDTH, CLIP_BOUNDARY_WIDTH_TOUCH, CLIP_HEADER_HEIGHT, Channel, type ChannelProps, Clip, ClipBoundary, type ClipBoundaryProps, ClipHeader, ClipHeaderPresentational, type ClipHeaderPresentationalProps, type ClipHeaderProps, type ClipProps, ClipViewportOriginProvider, CloseButton, type ColorStop, Controls$1 as Controls, DevicePixelRatioProvider, DotsIcon, type DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, LoopRegion, LoopRegionMarkers, type LoopRegionMarkersProps, type LoopRegionProps, MasterVolumeControl, type MasterVolumeControlProps, PianoRollChannel, type PianoRollChannelProps, Playhead, type PlayheadProps, PlayheadWithMarker, Playlist, PlaylistErrorBoundary, type PlaylistErrorBoundaryProps, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type PrecomputedTickData, type RenderPlayheadFunction, type ScaleMode, ScreenReaderOnly, type ScrollViewport, ScrollViewportProvider, SegmentedVUMeter, type SegmentedVUMeterProps, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, type SmartScaleProps, type SnapTo, SpectrogramChannel, type SpectrogramChannelProps, SpectrogramLabels, type SpectrogramLabelsProps, type SpectrogramWorkerCanvasApi, StyledPlaylist, StyledTimeScale, type TimeFormat, TimeFormatSelect, type TimeFormatSelectProps, TimeInput, type TimeInputProps, TimeScale, type TimeScaleProps, TimescaleLoopRegion, type TimescaleLoopRegionProps, Track, TrackControlsContext, TrackMenu, type TrackMenuItem, type TrackMenuProps, type TrackProps, TrashIcon, VolumeDownIcon, VolumeUpIcon, type WaveformColor, type WaveformDrawMode, type WaveformGradient, type WaveformPlaylistTheme, darkTheme, defaultTheme, formatTime, getScaleInfo, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useBeatsAndBars, useClipViewportOrigin, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useScrollViewport, useScrollViewportSelector, useTheme, useTrackControls, useVisibleChunkIndices, waveformColorToCss };
+export { AudioPosition, type AudioPositionProps, AutomaticScrollCheckbox, type AutomaticScrollCheckboxProps, BaseButton, BaseCheckbox, BaseCheckboxLabel, BaseCheckboxWrapper, BaseControlButton, BaseInput, BaseInputSmall, BaseLabel, BaseSelect, BaseSelectSmall, BaseSlider, type BeatsAndBarsContextValue, BeatsAndBarsProvider, type BeatsAndBarsProviderProps, Button, ButtonGroup, CLIP_BOUNDARY_WIDTH, CLIP_BOUNDARY_WIDTH_TOUCH, CLIP_HEADER_HEIGHT, Channel, type ChannelProps, Clip, ClipBoundary, type ClipBoundaryProps, ClipHeader, ClipHeaderPresentational, type ClipHeaderPresentationalProps, type ClipHeaderProps, type ClipProps, ClipViewportOriginProvider, CloseButton, type ColorStop, Controls$1 as Controls, DevicePixelRatioProvider, DotsIcon, type DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, LoopRegion, LoopRegionMarkers, type LoopRegionMarkersProps, type LoopRegionProps, MasterVolumeControl, type MasterVolumeControlProps, PianoRollChannel, type PianoRollChannelProps, Playhead, type PlayheadProps, PlayheadWithMarker, Playlist, PlaylistErrorBoundary, type PlaylistErrorBoundaryProps, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type PrecomputedTickData, type RenderPlayheadFunction, type ScaleMode, ScreenReaderOnly, type ScrollViewport, ScrollViewportProvider, SegmentedVUMeter, type SegmentedVUMeterProps, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, type SmartScaleProps, type SnapTo, type SpectrogramCanvasRegistration, SpectrogramChannel, type SpectrogramChannelProps, SpectrogramLabels, type SpectrogramLabelsProps, StyledPlaylist, StyledTimeScale, type TimeFormat, TimeFormatSelect, type TimeFormatSelectProps, TimeInput, type TimeInputProps, TimeScale, type TimeScaleProps, TimescaleLoopRegion, type TimescaleLoopRegionProps, Track, TrackControlsContext, TrackMenu, type TrackMenuItem, type TrackMenuProps, type TrackProps, TrashIcon, VolumeDownIcon, VolumeUpIcon, type WaveformColor, type WaveformDrawMode, type WaveformGradient, type WaveformPlaylistTheme, darkTheme, defaultTheme, formatTime, getScaleInfo, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useBeatsAndBars, useClipViewportOrigin, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useScrollViewport, useScrollViewportSelector, useTheme, useTrackControls, useVisibleChunkIndices, waveformColorToCss };

package/dist/index.d.ts

@@ -480,9 +480,14 @@ interface SelectionTimeInputsProps {
 }
 declare const SelectionTimeInputs: react__default.FC<SelectionTimeInputsProps>;
 
-interface SpectrogramWorkerCanvasApi {
-    registerCanvas(canvasId: string, canvas: OffscreenCanvas): void;
-    unregisterCanvas(canvasId: string): void;
+interface SpectrogramCanvasRegistration {
+    canvasId: string;
+    canvas: OffscreenCanvas;
+    clipId: string;
+    channelIndex: number;
+    chunkIndex: number;
+    widthPx: number;
+    heightPx: number;
 }
 interface SpectrogramChannelProps {
     /** Visual position index — used for CSS positioning (top offset). */
@@ -497,12 +502,12 @@ interface SpectrogramChannelProps {
     devicePixelRatio?: number;
     /** Samples per pixel at current zoom level */
     samplesPerPixel: number;
-    /** Worker API for transferring canvas ownership. Rendering is done in the worker. */
-    workerApi: SpectrogramWorkerCanvasApi;
-    /** Clip ID used to construct unique canvas IDs for worker registration */
+    /** Clip ID used to construct unique canvas IDs */
     clipId: string;
-    /** Callback when canvases are registered with the worker, providing canvas IDs and widths */
-    onCanvasesReady?: (canvasIds: string[], canvasWidths: number[]) => void;
+    /** Single-call canvas registration. Receives the transferred OffscreenCanvas + metadata. */
+    onCanvasRegister: (reg: SpectrogramCanvasRegistration) => void;
+    /** Counterpart for chunk unmount / component unmount. */
+    onCanvasUnregister: (canvasId: string) => void;
 }
 declare const SpectrogramChannel: FunctionComponent<SpectrogramChannelProps>;
 
@@ -519,12 +524,12 @@ interface SmartChannelProps {
     renderMode?: RenderMode;
     /** Samples per pixel at current zoom level */
     samplesPerPixel?: number;
-    /** Worker API for OffscreenCanvas transfer */
-    spectrogramWorkerApi?: SpectrogramWorkerCanvasApi;
-    /** Clip ID for worker canvas registration */
+    /** Clip ID for spectrogram canvas registration */
     spectrogramClipId?: string;
-    /** Callback when canvases are registered with the worker */
-    spectrogramOnCanvasesReady?: (canvasIds: string[], canvasWidths: number[]) => void;
+    /** Single-call registration for spectrogram canvases (from SpectrogramIntegration). */
+    spectrogramOnCanvasRegister?: (reg: SpectrogramCanvasRegistration) => void;
+    /** Counterpart for chunk unmount / unmount. */
+    spectrogramOnCanvasUnregister?: (canvasId: string) => void;
     /** MIDI note data for piano-roll rendering */
     midiNotes?: MidiNoteData[];
     /** Sample rate for MIDI note time → pixel conversion */
@@ -933,4 +938,4 @@ declare const BaseSlider: styled_components_dist_types.IStyledComponentBase<"web
     ref?: ((instance: HTMLInputElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLInputElement> | null | undefined;
 }>, never>, never>> & string;
 
-export { AudioPosition, type AudioPositionProps, AutomaticScrollCheckbox, type AutomaticScrollCheckboxProps, BaseButton, BaseCheckbox, BaseCheckboxLabel, BaseCheckboxWrapper, BaseControlButton, BaseInput, BaseInputSmall, BaseLabel, BaseSelect, BaseSelectSmall, BaseSlider, type BeatsAndBarsContextValue, BeatsAndBarsProvider, type BeatsAndBarsProviderProps, Button, ButtonGroup, CLIP_BOUNDARY_WIDTH, CLIP_BOUNDARY_WIDTH_TOUCH, CLIP_HEADER_HEIGHT, Channel, type ChannelProps, Clip, ClipBoundary, type ClipBoundaryProps, ClipHeader, ClipHeaderPresentational, type ClipHeaderPresentationalProps, type ClipHeaderProps, type ClipProps, ClipViewportOriginProvider, CloseButton, type ColorStop, Controls$1 as Controls, DevicePixelRatioProvider, DotsIcon, type DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, LoopRegion, LoopRegionMarkers, type LoopRegionMarkersProps, type LoopRegionProps, MasterVolumeControl, type MasterVolumeControlProps, PianoRollChannel, type PianoRollChannelProps, Playhead, type PlayheadProps, PlayheadWithMarker, Playlist, PlaylistErrorBoundary, type PlaylistErrorBoundaryProps, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type PrecomputedTickData, type RenderPlayheadFunction, type ScaleMode, ScreenReaderOnly, type ScrollViewport, ScrollViewportProvider, SegmentedVUMeter, type SegmentedVUMeterProps, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, type SmartScaleProps, type SnapTo, SpectrogramChannel, type SpectrogramChannelProps, SpectrogramLabels, type SpectrogramLabelsProps, type SpectrogramWorkerCanvasApi, StyledPlaylist, StyledTimeScale, type TimeFormat, TimeFormatSelect, type TimeFormatSelectProps, TimeInput, type TimeInputProps, TimeScale, type TimeScaleProps, TimescaleLoopRegion, type TimescaleLoopRegionProps, Track, TrackControlsContext, TrackMenu, type TrackMenuItem, type TrackMenuProps, type TrackProps, TrashIcon, VolumeDownIcon, VolumeUpIcon, type WaveformColor, type WaveformDrawMode, type WaveformGradient, type WaveformPlaylistTheme, darkTheme, defaultTheme, formatTime, getScaleInfo, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useBeatsAndBars, useClipViewportOrigin, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useScrollViewport, useScrollViewportSelector, useTheme, useTrackControls, useVisibleChunkIndices, waveformColorToCss };
+export { AudioPosition, type AudioPositionProps, AutomaticScrollCheckbox, type AutomaticScrollCheckboxProps, BaseButton, BaseCheckbox, BaseCheckboxLabel, BaseCheckboxWrapper, BaseControlButton, BaseInput, BaseInputSmall, BaseLabel, BaseSelect, BaseSelectSmall, BaseSlider, type BeatsAndBarsContextValue, BeatsAndBarsProvider, type BeatsAndBarsProviderProps, Button, ButtonGroup, CLIP_BOUNDARY_WIDTH, CLIP_BOUNDARY_WIDTH_TOUCH, CLIP_HEADER_HEIGHT, Channel, type ChannelProps, Clip, ClipBoundary, type ClipBoundaryProps, ClipHeader, ClipHeaderPresentational, type ClipHeaderPresentationalProps, type ClipHeaderProps, type ClipProps, ClipViewportOriginProvider, CloseButton, type ColorStop, Controls$1 as Controls, DevicePixelRatioProvider, DotsIcon, type DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, LoopRegion, LoopRegionMarkers, type LoopRegionMarkersProps, type LoopRegionProps, MasterVolumeControl, type MasterVolumeControlProps, PianoRollChannel, type PianoRollChannelProps, Playhead, type PlayheadProps, PlayheadWithMarker, Playlist, PlaylistErrorBoundary, type PlaylistErrorBoundaryProps, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type PrecomputedTickData, type RenderPlayheadFunction, type ScaleMode, ScreenReaderOnly, type ScrollViewport, ScrollViewportProvider, SegmentedVUMeter, type SegmentedVUMeterProps, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, type SmartScaleProps, type SnapTo, type SpectrogramCanvasRegistration, SpectrogramChannel, type SpectrogramChannelProps, SpectrogramLabels, type SpectrogramLabelsProps, StyledPlaylist, StyledTimeScale, type TimeFormat, TimeFormatSelect, type TimeFormatSelectProps, TimeInput, type TimeInputProps, TimeScale, type TimeScaleProps, TimescaleLoopRegion, type TimescaleLoopRegionProps, Track, TrackControlsContext, TrackMenu, type TrackMenuItem, type TrackMenuProps, type TrackProps, TrashIcon, VolumeDownIcon, VolumeUpIcon, type WaveformColor, type WaveformDrawMode, type WaveformGradient, type WaveformPlaylistTheme, darkTheme, defaultTheme, formatTime, getScaleInfo, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useBeatsAndBars, useClipViewportOrigin, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useScrollViewport, useScrollViewportSelector, useTheme, useTrackControls, useVisibleChunkIndices, waveformColorToCss };

package/dist/index.js

@@ -2461,28 +2461,28 @@ var SpectrogramChannel = ({
   waveHeight,
   devicePixelRatio = 1,
   samplesPerPixel: _samplesPerPixel,
-  workerApi,
   clipId,
-  onCanvasesReady
+  onCanvasRegister,
+  onCanvasUnregister
 }) => {
   const channelIndex = channelIndexProp ?? index;
   const { canvasRef, canvasMapRef } = useChunkedCanvasRefs();
   const registeredIdsRef = (0, import_react20.useRef)([]);
   const transferredCanvasesRef = (0, import_react20.useRef)(/* @__PURE__ */ new WeakSet());
-  const workerApiRef = (0, import_react20.useRef)(workerApi);
-  const onCanvasesReadyRef = (0, import_react20.useRef)(onCanvasesReady);
+  const onCanvasRegisterRef = (0, import_react20.useRef)(onCanvasRegister);
+  const onCanvasUnregisterRef = (0, import_react20.useRef)(onCanvasUnregister);
   const clipOriginX = useClipViewportOrigin();
   const visibleChunkIndices = useVisibleChunkIndices(length, import_core5.MAX_CANVAS_WIDTH, clipOriginX);
   (0, import_react20.useEffect)(() => {
-    workerApiRef.current = workerApi;
-  }, [workerApi]);
+    onCanvasRegisterRef.current = onCanvasRegister;
+  }, [onCanvasRegister]);
   (0, import_react20.useEffect)(() => {
-    onCanvasesReadyRef.current = onCanvasesReady;
-  }, [onCanvasesReady]);
+    onCanvasUnregisterRef.current = onCanvasUnregister;
+  }, [onCanvasUnregister]);
   (0, import_react20.useEffect)(() => {
-    const currentWorkerApi = workerApiRef.current;
-    if (!currentWorkerApi || !clipId) return;
-    const previousCount = registeredIdsRef.current.length;
+    if (!clipId) return;
+    const unregister = onCanvasUnregisterRef.current;
+    const register = onCanvasRegisterRef.current;
     const remaining = [];
     for (const id of registeredIdsRef.current) {
       const match = id.match(/chunk(\d+)$/);
@@ -2496,14 +2496,13 @@ var SpectrogramChannel = ({
         remaining.push(id);
       } else {
         try {
-          currentWorkerApi.unregisterCanvas(id);
+          unregister(id);
         } catch (err) {
-          console.warn(`[spectrogram] unregisterCanvas failed for ${id}:`, err);
+          console.warn(`[spectrogram] unregister failed for ${id}:`, err);
         }
       }
     }
     registeredIdsRef.current = remaining;
-    const newIds = [];
     for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
       if (transferredCanvasesRef.current.has(canvas)) continue;
       const canvasId = `${clipId}-ch${channelIndex}-chunk${canvasIdx}`;
@@ -2515,41 +2514,31 @@ var SpectrogramChannel = ({
         continue;
       }
       transferredCanvasesRef.current.add(canvas);
+      const widthPx = Math.min(length - canvasIdx * import_core5.MAX_CANVAS_WIDTH, import_core5.MAX_CANVAS_WIDTH);
       try {
-        currentWorkerApi.registerCanvas(canvasId, offscreen);
-        newIds.push(canvasId);
+        register({
+          canvasId,
+          canvas: offscreen,
+          clipId,
+          channelIndex,
+          chunkIndex: canvasIdx,
+          widthPx,
+          heightPx: waveHeight
+        });
+        registeredIdsRef.current.push(canvasId);
       } catch (err) {
-        console.warn(`[spectrogram] registerCanvas failed for ${canvasId}:`, err);
-        continue;
+        console.warn(`[spectrogram] register failed for ${canvasId}:`, err);
       }
     }
-    if (newIds.length > 0) {
-      registeredIdsRef.current = [...registeredIdsRef.current, ...newIds];
-    }
-    const canvasSetChanged = newIds.length > 0 || remaining.length < previousCount;
-    if (canvasSetChanged) {
-      const allIds = registeredIdsRef.current;
-      const allWidths = allIds.map((id) => {
-        const match = id.match(/chunk(\d+)$/);
-        if (!match) {
-          console.warn(`[spectrogram] Unexpected canvas ID format: ${id}`);
-          return import_core5.MAX_CANVAS_WIDTH;
-        }
-        const chunkIdx = parseInt(match[1], 10);
-        return Math.min(length - chunkIdx * import_core5.MAX_CANVAS_WIDTH, import_core5.MAX_CANVAS_WIDTH);
-      });
-      onCanvasesReadyRef.current?.(allIds, allWidths);
-    }
-  }, [canvasMapRef, clipId, channelIndex, length, visibleChunkIndices]);
+  }, [canvasMapRef, clipId, channelIndex, length, waveHeight, visibleChunkIndices]);
   (0, import_react20.useEffect)(() => {
     return () => {
-      const api = workerApiRef.current;
-      if (!api) return;
+      const unregister = onCanvasUnregisterRef.current;
       for (const id of registeredIdsRef.current) {
         try {
-          api.unregisterCanvas(id);
+          unregister(id);
         } catch (err) {
-          console.warn(`[spectrogram] unregisterCanvas failed for ${id}:`, err);
+          console.warn(`[spectrogram] unregister failed for ${id}:`, err);
         }
       }
       registeredIdsRef.current = [];
@@ -2582,9 +2571,9 @@ var SmartChannel = ({
   transparentBackground,
   renderMode = "waveform",
   samplesPerPixel: sppProp,
-  spectrogramWorkerApi,
   spectrogramClipId,
-  spectrogramOnCanvasesReady,
+  spectrogramOnCanvasRegister,
+  spectrogramOnCanvasUnregister,
   midiNotes,
   sampleRate: sampleRateProp,
   clipOffsetSeconds,
@@ -2603,7 +2592,7 @@ var SmartChannel = ({
   const waveOutlineColor = isSelected && theme ? theme.selectedWaveOutlineColor : theme?.waveOutlineColor;
   const waveFillColor = isSelected && theme ? theme.selectedWaveFillColor : theme?.waveFillColor;
   const drawMode = theme?.waveformDrawMode || "inverted";
-  const hasSpectrogram = spectrogramWorkerApi && spectrogramClipId;
+  const hasSpectrogram = spectrogramClipId && spectrogramOnCanvasRegister && spectrogramOnCanvasUnregister;
   if (renderMode === "spectrogram" && hasSpectrogram) {
     return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       SpectrogramChannel,
@@ -2613,9 +2602,9 @@ var SmartChannel = ({
         waveHeight,
         devicePixelRatio,
         samplesPerPixel,
-        workerApi: spectrogramWorkerApi,
         clipId: spectrogramClipId,
-        onCanvasesReady: spectrogramOnCanvasesReady
+        onCanvasRegister: spectrogramOnCanvasRegister,
+        onCanvasUnregister: spectrogramOnCanvasUnregister
       }
     );
   }
@@ -2631,9 +2620,9 @@ var SmartChannel = ({
           waveHeight: halfHeight,
           devicePixelRatio,
           samplesPerPixel,
-          workerApi: spectrogramWorkerApi,
           clipId: spectrogramClipId,
-          onCanvasesReady: spectrogramOnCanvasesReady
+          onCanvasRegister: spectrogramOnCanvasRegister,
+          onCanvasUnregister: spectrogramOnCanvasUnregister
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(