@waveform-playlist/ui-components 12.0.0 → 13.0.0

package/dist/index.mjs

@@ -1487,6 +1487,7 @@ var PlayheadWithMarker = ({
   color = "#ff0000",
   isPlaying,
   currentTimeRef,
+  visualTimeRef,
   playbackStartTimeRef,
   audioStartPositionRef,
   samplesPerPixel,
@@ -1501,7 +1502,9 @@ var PlayheadWithMarker = ({
     const updatePosition = () => {
       if (containerRef.current) {
         let time;
-        if (isPlaying) {
+        if (visualTimeRef?.current !== void 0 && visualTimeRef.current !== null) {
+          time = visualTimeRef.current;
+        } else if (isPlaying) {
           if (getPlaybackTime) {
             time = getPlaybackTime();
           } else if (getAudioContextTime) {
@@ -1537,6 +1540,7 @@ var PlayheadWithMarker = ({
     samplesPerPixel,
     controlsOffset,
     currentTimeRef,
+    visualTimeRef,
     playbackStartTimeRef,
     audioStartPositionRef,
     getAudioContextTime,
@@ -1544,7 +1548,7 @@ var PlayheadWithMarker = ({
   ]);
   useEffect3(() => {
     if (!isPlaying && containerRef.current) {
-      const time = currentTimeRef.current ?? 0;
+      const time = visualTimeRef?.current ?? currentTimeRef.current ?? 0;
       const pos = time * sampleRate / samplesPerPixel + controlsOffset;
       containerRef.current.style.transform = `translate3d(${pos}px, 0, 0)`;
     }
@@ -2346,28 +2350,28 @@ var SpectrogramChannel = ({
   waveHeight,
   devicePixelRatio = 1,
   samplesPerPixel: _samplesPerPixel,
-  workerApi,
   clipId,
-  onCanvasesReady
+  onCanvasRegister,
+  onCanvasUnregister
 }) => {
   const channelIndex = channelIndexProp ?? index;
   const { canvasRef, canvasMapRef } = useChunkedCanvasRefs();
   const registeredIdsRef = useRef7([]);
   const transferredCanvasesRef = useRef7(/* @__PURE__ */ new WeakSet());
-  const workerApiRef = useRef7(workerApi);
-  const onCanvasesReadyRef = useRef7(onCanvasesReady);
+  const onCanvasRegisterRef = useRef7(onCanvasRegister);
+  const onCanvasUnregisterRef = useRef7(onCanvasUnregister);
   const clipOriginX = useClipViewportOrigin();
   const visibleChunkIndices = useVisibleChunkIndices(length, MAX_CANVAS_WIDTH3, clipOriginX);
   useEffect6(() => {
-    workerApiRef.current = workerApi;
-  }, [workerApi]);
+    onCanvasRegisterRef.current = onCanvasRegister;
+  }, [onCanvasRegister]);
   useEffect6(() => {
-    onCanvasesReadyRef.current = onCanvasesReady;
-  }, [onCanvasesReady]);
+    onCanvasUnregisterRef.current = onCanvasUnregister;
+  }, [onCanvasUnregister]);
   useEffect6(() => {
-    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+)$/);
@@ -2381,14 +2385,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}`;
@@ -2400,41 +2403,31 @@ var SpectrogramChannel = ({
         continue;
       }
       transferredCanvasesRef.current.add(canvas);
+      const widthPx = Math.min(length - canvasIdx * MAX_CANVAS_WIDTH3, MAX_CANVAS_WIDTH3);
       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 MAX_CANVAS_WIDTH3;
-        }
-        const chunkIdx = parseInt(match[1], 10);
-        return Math.min(length - chunkIdx * MAX_CANVAS_WIDTH3, MAX_CANVAS_WIDTH3);
-      });
-      onCanvasesReadyRef.current?.(allIds, allWidths);
-    }
-  }, [canvasMapRef, clipId, channelIndex, length, visibleChunkIndices]);
+  }, [canvasMapRef, clipId, channelIndex, length, waveHeight, visibleChunkIndices]);
   useEffect6(() => {
     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 = [];
@@ -2467,9 +2460,9 @@ var SmartChannel = ({
   transparentBackground,
   renderMode = "waveform",
   samplesPerPixel: sppProp,
-  spectrogramWorkerApi,
   spectrogramClipId,
-  spectrogramOnCanvasesReady,
+  spectrogramOnCanvasRegister,
+  spectrogramOnCanvasUnregister,
   midiNotes,
   sampleRate: sampleRateProp,
   clipOffsetSeconds,
@@ -2488,7 +2481,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__ */ jsx24(
       SpectrogramChannel,
@@ -2498,9 +2491,9 @@ var SmartChannel = ({
         waveHeight,
         devicePixelRatio,
         samplesPerPixel,
-        workerApi: spectrogramWorkerApi,
         clipId: spectrogramClipId,
-        onCanvasesReady: spectrogramOnCanvasesReady
+        onCanvasRegister: spectrogramOnCanvasRegister,
+        onCanvasUnregister: spectrogramOnCanvasUnregister
       }
     );
   }
@@ -2516,9 +2509,9 @@ var SmartChannel = ({
           waveHeight: halfHeight,
           devicePixelRatio,
           samplesPerPixel,
-          workerApi: spectrogramWorkerApi,
           clipId: spectrogramClipId,
-          onCanvasesReady: spectrogramOnCanvasesReady
+          onCanvasRegister: spectrogramOnCanvasRegister,
+          onCanvasUnregister: spectrogramOnCanvasUnregister
         }
       ),
       /* @__PURE__ */ jsx24(