From 6cec290f98103827727905874c5a9c5ced0bcca8 Mon Sep 17 00:00:00 2001
From: mehekj <mehek.jethani@gmail.com>
Date: Thu, 14 Oct 2021 16:21:03 -0400
Subject: pre-redesign changes (zoom but no scroll)

---
 src/client/views/nodes/AudioBox.scss | 178 +++++++++++++++++++++--------------
 src/client/views/nodes/AudioBox.tsx  |  14 +++
 2 files changed, 122 insertions(+), 70 deletions(-)

(limited to 'src/client/views/nodes')

diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index b33c7f506..a2fdd38e5 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -1,51 +1,50 @@
 @import "../global/globalCssVariables.scss";
 
-
 .audiobox-container,
 .audiobox-container-interactive {
-  width: 100%;
-  height: 100%;
-  position: inherit;
-  display: flex;
-  position: relative;
-  cursor: default;
-
-  .audiobox-buttons {
-    display: flex;
     width: 100%;
-    align-items: center;
+    height: 100%;
+    position: inherit;
+    display: flex;
+    position: relative;
+    cursor: default;
 
-    .audiobox-dictation {
-      position: relative;
-      width: 30px;
-      height: 100%;
-      align-items: center;
-      display: inherit;
-      background: $medium-gray;
-      left: 0px;
-      color: $dark-gray;
-      &:hover {
-        color: $black;
-        cursor: pointer;
-      }
+    .audiobox-buttons {
+        display: flex;
+        width: 100%;
+        align-items: center;
+
+        .audiobox-dictation {
+            position: relative;
+            width: 30px;
+            height: 100%;
+            align-items: center;
+            display: inherit;
+            background: $medium-gray;
+            left: 0px;
+            color: $dark-gray;
+            &:hover {
+                color: $black;
+                cursor: pointer;
+            }
+        }
     }
-  }
 
-  .audiobox-control,
-  .audiobox-control-interactive {
-    top: 0;
-    max-height: 32px;
-    width: 100%;
-    display: inline-block;
-    pointer-events: none;
-  }
+    .audiobox-control,
+    .audiobox-control-interactive {
+        top: 0;
+        max-height: 32px;
+        width: 100%;
+        display: inline-block;
+        pointer-events: none;
+    }
 
-  .audiobox-control-interactive {
-       pointer-events: all;
-  }
+    .audiobox-control-interactive {
+        pointer-events: all;
+    }
 
-  .audiobox-record-interactive,
-  .audiobox-record {
+    .audiobox-record-interactive,
+    .audiobox-record {
         pointer-events: all;
         cursor: pointer;
         width: 100%;
@@ -59,45 +58,46 @@
         color: white;
         font-weight: bold;
         background-color: $dark-gray;
-   }
+    }
 
-   .audiobox-record {
+    .audiobox-record {
         pointer-events: none;
-   }
+    }
 
-  .recording {
-    margin-top: auto;
-    margin-bottom: auto;
-    width: 100%;
-    height: 100%;
-    position: relative;
-    padding-right: 5px;
-    display: flex;
-    background-color: $medium-blue;
+    .recording {
+        margin-top: auto;
+        margin-bottom: auto;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        padding-right: 5px;
+        display: flex;
+        background-color: $medium-blue;
 
-    .time {
-      position: relative;
-      width: 100%;
-      font-size: $large-header;
-      text-align: center;
-    }
+        .time {
+            position: relative;
+            width: 100%;
+            font-size: $large-header;
+            text-align: center;
+        }
 
-    .recording-buttons {
-      position: relative;
-      margin-top: auto;
-      margin-bottom: auto;
-      color: $dark-gray;
-      &:hover {
-        color: $black;
-      }
-    }
+        .recording-buttons {
+            position: relative;
+            margin-top: auto;
+            margin-bottom: auto;
+            color: $dark-gray;
+            &:hover {
+                color: $black;
+            }
+        }
 
-    .time, .recording-buttons {
-        display: flex;
-        align-items: center;
-        padding: 5px;
+        .time,
+        .recording-buttons {
+            display: flex;
+            align-items: center;
+            padding: 5px;
+        }
     }
-  }
     .audiobox-buttons {
         display: flex;
         width: 100%;
@@ -267,6 +267,44 @@
                 right: 2px;
             }
 
+            .toolbar-slider {
+                position: absolute;
+                top: 75px;
+                left: 70px;
+            }
+
+            input[type="range"] {
+                width: calc(100% - 100px);
+                height: 16px;
+                -webkit-appearance: none;
+                background: none;
+            }
+
+            input[type="range"]:focus {
+                outline: none;
+            }
+
+            input[type="range"]::-webkit-slider-runnable-track {
+                width: 100%;
+                height: 5px;
+                cursor: pointer;
+                box-shadow: 0;
+                background: #dfdfdf;
+                border-radius: 3px;
+            }
+
+            input[type="range"]::-webkit-slider-thumb {
+                box-shadow: 0;
+                border: 0;
+                height: 7px;
+                width: 7px;
+                border-radius: 10px;
+                background: #4476f7;
+                cursor: pointer;
+                -webkit-appearance: none;
+                margin: -1px;
+            }
+
             .audiobox-zoom {
                 bottom: 0;
                 left: 30px;
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>
-- 
cgit v1.2.3-70-g09d2