pre-redesign changes (zoom but no scroll)

1 files changed, 14 insertions, 0 deletions

diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 2eb34d27a..f2001adcd 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -45,6 +45,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     public static Enabled = false;
     static playheadWidth = 40; // width of playhead
     static heightPercent = 75; // height of timeline in percent of height of audioBox.
+    static zoomInterval = 0.1;
     @observable static _scrubTime = 0;
 
     _dropDisposer?: DragManager.DragDropDisposer;
@@ -374,6 +375,10 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         }));
     }
 
+    zoom = (zoom: number) => {
+        this.timeline?.setZoom(zoom);
+    }
+
     setupTimelineDrop = (r: HTMLDivElement | null) => {
         if (r && this.timeline) {
             this._dropDisposer?.();
@@ -437,6 +442,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                         icon={this.mediaState === media_state.Paused ? "play" : "pause"}
                         size={"1x"} />
                 </div>
+
                 <div className="audiobox-buttons"
                     title={this.timeline?.IsTrimming !== TrimScope.None ? "finish" : "trim"}
                     onPointerDown={this.onClipPointerDown}
@@ -445,6 +451,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                         icon={this.timeline?.IsTrimming !== TrimScope.None ? "check" : "cut"}
                         size={"1x"} />
                 </div>
+
                 <div className="audiobox-timeline"
                     style={{
                         left: AudioBox.playheadWidth,
@@ -457,6 +464,13 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 <div className="audioBox-current-time">
                     {this.timeline && formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode) - NumCast(this.timeline.clipStart)))}
                 </div>
+
+                {/* <input type="range" step="0.1" min="1" max="5" value={this.timeline?._zoomFactor}
+                    className="toolbar-slider" id="zoom-slider"
+                    onPointerDown={(e: React.PointerEvent) => { e.stopPropagation(); }}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => { this.zoom(e.target.value); }}
+                /> */}
+
                 <div className="audioBox-total-time">
                     {this.timeline && formatTime(Math.round(NumCast(this.timeline?.clipDuration)))}
                 </div>