feat: LEAP-1900: Add setting to disable autoplaying of new audio regions

HumanSignal · Mar 5, 2025 · 71b0433 · 71b0433
1 parent 0d09166
commit 71b0433
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 8 deletions.
diff --git a/web/libs/editor/src/components/Timeline/Controls/ConfigControl.tsx b/web/libs/editor/src/components/Timeline/Controls/ConfigControl.tsx
@@ -115,6 +115,13 @@ export const ConfigControl: FC<ConfigControlProps> = ({
             label="Loop Regions"
           />
         </Elem>
+        <Elem name="toggle">
+          <Toggle
+            checked={settings?.autoPlayNewSegments}
+            onChange={(e) => changeSetting?.("autoPlayNewSegments", e.target.checked)}
+            label="Auto-play New Regions"
+          />
+        </Elem>
         {renderLayerToggles()}
       </Elem>
     );

diff --git a/web/libs/editor/src/components/Timeline/Types.ts b/web/libs/editor/src/components/Timeline/Types.ts
@@ -133,6 +133,7 @@ export type TimelineSettings = {
   stepSize?: TimelineStepFunction;
   leftOffset?: number;
   loopRegion?: boolean;
+  autoPlayNewSegments?: boolean;
 };
 
 export type TimelineStepFunction = (

diff --git a/web/libs/editor/src/lib/AudioUltra/Regions/Regions.ts b/web/libs/editor/src/lib/AudioUltra/Regions/Regions.ts
@@ -309,7 +309,7 @@ export class Regions {
 
     const addRegion = () => {
       const { container, zoomedWidth, fullWidth } = this.visualizer;
-      const { autoPlayNewSegments, duration } = this.waveform;
+      const { settings: { autoPlayNewSegments }, duration } = this.waveform;
       const scrollLeft = this.visualizer.getScrollLeftPx();
 
       startX = clamp(getCursorPositionX(e, container) + scrollLeft, 0, fullWidth);
@@ -352,7 +352,7 @@ export class Regions {
     };
 
     const handleMouseUp = () => {
-      const { player, autoPlayNewSegments } = this.waveform;
+      const { player, settings: { autoPlayNewSegments } } = this.waveform;
 
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);

diff --git a/web/libs/editor/src/lib/AudioUltra/Waveform.ts b/web/libs/editor/src/lib/AudioUltra/Waveform.ts
@@ -139,8 +139,6 @@ export interface WaveformOptions {
 
   padding?: Padding;
 
-  autoPlayNewSegments?: boolean;
-
   // Cursor options
   cursor?: CursorOptions;
 
@@ -202,7 +200,6 @@ export class Waveform extends Events<WaveformEventTypes> {
   regions!: Regions;
   loaded = false;
   renderedChannels = false;
-  autoPlayNewSegments = false;
   // for now that's just an object to store setting and access them when needed;
   // but if we need to react on changes we can convert it into getter/setter.
   settings: TimelineSettings = {};
@@ -258,8 +255,6 @@ export class Waveform extends Events<WaveformEventTypes> {
       this.visualizer,
     );
 
-    this.autoPlayNewSegments = this.params.autoPlayNewSegments ?? this.autoPlayNewSegments;
-
     this.player = this.params.playerType === "html5" ? new Html5Player(this) : new WebAudioPlayer(this);
 
     this.initEvents();

diff --git a/web/libs/editor/src/tags/object/AudioUltra/view.tsx b/web/libs/editor/src/tags/object/AudioUltra/view.tsx
@@ -58,7 +58,6 @@ const AudioUltraView: FC<AudioUltraProps> = ({ item }) => {
       backgroundCompute: true,
       denoize: true,
     },
-    autoPlayNewSegments: true,
     onFrameChanged: (frameState) => {
       item.setWFFrame(frameState);
     },
@@ -211,6 +210,7 @@ const AudioUltraWithSettings: FC<AudioUltraProps> = ({ item }) => {
   const [settings, setSettings] = useState({
     playpauseHotkey: "audio:playpause",
     loopRegion: false,
+    autoPlayNewSegments: true,
   });
   const changeSetting = useCallback((key: string, value: any) => {
     setSettings((prev) => ({ ...prev, [key]: value }));