@waveform-playlist/browser 15.2.0 → 15.3.0

package/dist/index.mjs

@@ -1799,14 +1799,13 @@ var WaveformPlaylistProvider = ({
   soundFontCache,
   deferEngineRebuild = false,
   indefinitePlayback = false,
+  fillViewport = false,
   sampleRate: sampleRateProp,
   createAdapter,
   children
 }) => {
   var _a, _b, _c, _d;
   const progressBarWidth = progressBarWidthProp != null ? progressBarWidthProp : barWidth + barGap;
-  const indefinitePlaybackRef = useRef9(indefinitePlayback);
-  indefinitePlaybackRef.current = indefinitePlayback;
   const stableZoomLevels = useMemo3(
     () => zoomLevels,
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -1844,6 +1843,28 @@ var WaveformPlaylistProvider = ({
   const engineRef = useRef9(null);
   const adapterRef = useRef9(null);
   const audioInitializedRef = useRef9(false);
+  const indefinitePlaybackRef = useRef9(indefinitePlayback);
+  indefinitePlaybackRef.current = indefinitePlayback;
+  const recordingActiveRef = useRef9(false);
+  const armedTrackMuteRef = useRef9(null);
+  const setRecordingActive = useCallback13((active, armedTrackId) => {
+    var _a2, _b2, _c2;
+    recordingActiveRef.current = active;
+    const engine = engineRef.current;
+    if (!engine) return;
+    if (active && armedTrackId) {
+      if (((_a2 = armedTrackMuteRef.current) == null ? void 0 : _a2.trackId) === armedTrackId) return;
+      if (armedTrackMuteRef.current) {
+        engine.setTrackMute(armedTrackMuteRef.current.trackId, armedTrackMuteRef.current.prevMuted);
+      }
+      const prevMuted = (_c2 = (_b2 = engine.getState().tracks.find((t) => t.id === armedTrackId)) == null ? void 0 : _b2.muted) != null ? _c2 : false;
+      armedTrackMuteRef.current = { trackId: armedTrackId, prevMuted };
+      engine.setTrackMute(armedTrackId, true);
+    } else if (!active && armedTrackMuteRef.current) {
+      engine.setTrackMute(armedTrackMuteRef.current.trackId, armedTrackMuteRef.current.prevMuted);
+      armedTrackMuteRef.current = null;
+    }
+  }, []);
   const isPlayingRef = useRef9(false);
   isPlayingRef.current = isPlaying;
   const playStartPositionRef = useRef9(0);
@@ -2435,7 +2456,7 @@ var WaveformPlaylistProvider = ({
         playbackEndTimeRef.current = null;
         return;
       }
-      if (time >= duration && !indefinitePlaybackRef.current) {
+      if (time >= duration && !indefinitePlaybackRef.current && !recordingActiveRef.current) {
         if (engineRef.current) {
           engineRef.current.stop();
         }
@@ -2706,6 +2727,7 @@ var WaveformPlaylistProvider = ({
       loopStart,
       loopEnd,
       indefinitePlayback,
+      fillViewport,
       canUndo,
       canRedo
     }),
@@ -2723,6 +2745,7 @@ var WaveformPlaylistProvider = ({
       loopStart,
       loopEnd,
       indefinitePlayback,
+      fillViewport,
       canUndo,
       canRedo
     ]
@@ -2778,7 +2801,9 @@ var WaveformPlaylistProvider = ({
       clearLoopRegion,
       // Undo/redo
       undo,
-      redo
+      redo,
+      // Recording
+      setRecordingActive
     }),
     [
       play,
@@ -2810,7 +2835,8 @@ var WaveformPlaylistProvider = ({
       setLoopRegionFromSelection,
       clearLoopRegion,
       undo,
-      redo
+      redo,
+      setRecordingActive
     ]
   );
   const dataValue = useMemo3(
@@ -3635,7 +3661,14 @@ function useClipInteractionEnabled() {
 }
 
 // src/components/PlaylistVisualization.tsx
-import { useContext as useContext6, useRef as useRef14, useState as useState11, useMemo as useMemo5, useCallback as useCallback16 } from "react";
+import {
+  useContext as useContext6,
+  useEffect as useEffect10,
+  useRef as useRef14,
+  useState as useState11,
+  useMemo as useMemo5,
+  useCallback as useCallback16
+} from "react";
 import { createPortal } from "react-dom";
 import styled4 from "styled-components";
 import {
@@ -3983,7 +4016,7 @@ var PlaylistVisualization = ({
   onRemoveTrack,
   recordingState
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
   const theme = useTheme2();
   const { isPlaying, getLookAhead, getOutputLatency } = usePlaybackAnimation();
   const {
@@ -3998,7 +4031,8 @@ var PlaylistVisualization = ({
     loopStart,
     loopEnd,
     isLoopEnabled,
-    indefinitePlayback
+    indefinitePlayback,
+    fillViewport
   } = usePlaylistState();
   const annotationIntegration = useContext6(AnnotationIntegrationContext);
   const {
@@ -4013,7 +4047,8 @@ var PlaylistVisualization = ({
     setScrollContainer,
     setSelectedTrackId,
     setCurrentTime,
-    setLoopRegion
+    setLoopRegion,
+    setRecordingActive
   } = usePlaylistControls();
   const {
     peaksDataArray,
@@ -4032,6 +4067,13 @@ var PlaylistVisualization = ({
     mono
   } = usePlaylistData();
   const spectrogram = useContext6(SpectrogramIntegrationContext);
+  const recordingActive = !!(recordingState == null ? void 0 : recordingState.isRecording);
+  const armedTrackId = (_a = recordingState == null ? void 0 : recordingState.trackId) != null ? _a : null;
+  useEffect10(() => {
+    if (!recordingActive) return void 0;
+    setRecordingActive(true, armedTrackId);
+    return () => setRecordingActive(false);
+  }, [recordingActive, armedTrackId, setRecordingActive]);
   const perTrackSpectrogramHelpers = useMemo5(() => {
     if (!spectrogram)
       return /* @__PURE__ */ new Map();
@@ -4069,8 +4111,8 @@ var PlaylistVisualization = ({
     }, max);
   }, 0);
   let displayDuration = tracksMaxDuration > 0 ? tracksMaxDuration : duration > 0 ? duration : DEFAULT_EMPTY_TRACK_DURATION;
-  if (indefinitePlayback) {
-    const containerWidth = (_b = (_a = scrollContainerRef.current) == null ? void 0 : _a.clientWidth) != null ? _b : 0;
+  if (indefinitePlayback || fillViewport) {
+    const containerWidth = (_c = (_b = scrollContainerRef.current) == null ? void 0 : _b.clientWidth) != null ? _c : 0;
     const minContainerDuration = containerWidth * samplesPerPixel / sampleRate;
     displayDuration = Math.max(displayDuration, minContainerDuration);
   }
@@ -4528,8 +4570,8 @@ var PlaylistVisualization = ({
         {
           open: settingsModalTrackId !== null,
           onClose: () => setSettingsModalTrackId(null),
-          config: settingsModalTrackId !== null ? (_g = (_f = (_e = (_c = spectrogram.trackSpectrogramOverrides.get(settingsModalTrackId)) == null ? void 0 : _c.config) != null ? _e : (_d = tracks.find((t) => t.id === settingsModalTrackId)) == null ? void 0 : _d.spectrogramConfig) != null ? _f : spectrogram.spectrogramConfig) != null ? _g : {} : {},
-          colorMap: settingsModalTrackId !== null ? (_l = (_k = (_j = (_h = spectrogram.trackSpectrogramOverrides.get(settingsModalTrackId)) == null ? void 0 : _h.colorMap) != null ? _j : (_i = tracks.find((t) => t.id === settingsModalTrackId)) == null ? void 0 : _i.spectrogramColorMap) != null ? _k : spectrogram.spectrogramColorMap) != null ? _l : "viridis" : "viridis",
+          config: settingsModalTrackId !== null ? (_h = (_g = (_f = (_d = spectrogram.trackSpectrogramOverrides.get(settingsModalTrackId)) == null ? void 0 : _d.config) != null ? _f : (_e = tracks.find((t) => t.id === settingsModalTrackId)) == null ? void 0 : _e.spectrogramConfig) != null ? _g : spectrogram.spectrogramConfig) != null ? _h : {} : {},
+          colorMap: settingsModalTrackId !== null ? (_m = (_l = (_k = (_i = spectrogram.trackSpectrogramOverrides.get(settingsModalTrackId)) == null ? void 0 : _i.colorMap) != null ? _k : (_j = tracks.find((t) => t.id === settingsModalTrackId)) == null ? void 0 : _j.spectrogramColorMap) != null ? _l : spectrogram.spectrogramColorMap) != null ? _m : "viridis" : "viridis",
           onApply: (newConfig, newColorMap) => {
             if (settingsModalTrackId !== null) {
               spectrogram.setTrackSpectrogramConfig(settingsModalTrackId, newConfig, newColorMap);
@@ -4678,7 +4720,7 @@ var noDropAnimationPlugins = (defaults) => {
 };
 
 // src/components/AnimatedMediaElementPlayhead.tsx
-import { useRef as useRef15, useEffect as useEffect10 } from "react";
+import { useRef as useRef15, useEffect as useEffect11 } from "react";
 import styled5 from "styled-components";
 import { jsx as jsx12 } from "react/jsx-runtime";
 var PlayheadLine2 = styled5.div`
@@ -4699,7 +4741,7 @@ var AnimatedMediaElementPlayhead = ({
   const animationFrameRef = useRef15(null);
   const { isPlaying, currentTimeRef } = useMediaElementAnimation();
   const { samplesPerPixel, sampleRate, progressBarWidth } = useMediaElementData();
-  useEffect10(() => {
+  useEffect11(() => {
     const updatePosition = () => {
       var _a;
       if (playheadRef.current) {
@@ -4723,7 +4765,7 @@ var AnimatedMediaElementPlayhead = ({
       }
     };
   }, [isPlaying, sampleRate, samplesPerPixel, currentTimeRef]);
-  useEffect10(() => {
+  useEffect11(() => {
     var _a;
     if (!isPlaying && playheadRef.current) {
       const time = (_a = currentTimeRef.current) != null ? _a : 0;
@@ -4735,7 +4777,7 @@ var AnimatedMediaElementPlayhead = ({
 };
 
 // src/components/ChannelWithMediaElementProgress.tsx
-import { useRef as useRef16, useEffect as useEffect11 } from "react";
+import { useRef as useRef16, useEffect as useEffect12 } from "react";
 import styled6 from "styled-components";
 import {
   SmartChannel as SmartChannel2,
@@ -4787,7 +4829,7 @@ var ChannelWithMediaElementProgress = (_a) => {
   const { isPlaying, currentTimeRef } = useMediaElementAnimation();
   const { samplesPerPixel, sampleRate } = useMediaElementData();
   const progressColor = (theme == null ? void 0 : theme.waveProgressColor) || "rgba(0, 0, 0, 0.1)";
-  useEffect11(() => {
+  useEffect12(() => {
     const updateProgress = () => {
       var _a2;
       if (progressRef.current) {
@@ -4829,7 +4871,7 @@ var ChannelWithMediaElementProgress = (_a) => {
     smartChannelProps.length,
     currentTimeRef
   ]);
-  useEffect11(() => {
+  useEffect12(() => {
     var _a2;
     if (!isPlaying && progressRef.current) {
       const currentTime = (_a2 = currentTimeRef.current) != null ? _a2 : 0;
@@ -5322,7 +5364,7 @@ var KeyboardShortcuts = ({
 };
 
 // src/components/ClipInteractionProvider.tsx
-import React16, { useEffect as useEffect12, useMemo as useMemo6 } from "react";
+import React16, { useEffect as useEffect13, useMemo as useMemo6 } from "react";
 import { DragDropProvider as DragDropProvider2 } from "@dnd-kit/react";
 import { RestrictToHorizontalAxis as RestrictToHorizontalAxis2 } from "@dnd-kit/abstract/modifiers";
 import {
@@ -5425,7 +5467,7 @@ var ClipInteractionProvider = ({
   const beatsAndBars = useBeatsAndBars();
   const useBeatsSnap = snap && beatsAndBars != null && beatsAndBars.scaleMode === "beats" && beatsAndBars.snapTo !== "off";
   const useTimescaleSnap = snap && !useBeatsSnap;
-  useEffect12(() => {
+  useEffect13(() => {
     if (onTracksChange == null) {
       console.warn(
         "[waveform-playlist] ClipInteractionProvider: onTracksChange is not set on WaveformPlaylistProvider. Drag and trim edits will not be persisted."