pre-redesign changes (zoom but no scroll)

2 files changed, 118 insertions, 95 deletions

diff --git a/src/client/views/collections/CollectionStackedTimeline.scss b/src/client/views/collections/CollectionStackedTimeline.scss
index 7a957ae5c..0ec5f9aef 100644
--- a/src/client/views/collections/CollectionStackedTimeline.scss
+++ b/src/client/views/collections/CollectionStackedTimeline.scss
@@ -1,94 +1,109 @@
 @import "../global/globalCssVariables.scss";
 
 .collectionStackedTimeline {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: 1000;
-  top: 0px;
-
-  .collectionStackedTimeline-trim-shade {
     position: absolute;
+    width: 100%;
     height: 100%;
-    background-color: $dark-gray;
-    opacity: 0.3;
-  }
+    z-index: 1000;
+    top: 0px;
+    // overflow-x: scroll;
 
-  .collectionStackedTimeline-trim-controls {
-    height: 100%;
-    position: absolute;
-    box-sizing: border-box;
-    border: 2px solid $medium-blue;
-    display: flex;
-    justify-content: space-between;
-    max-width: 100%;
+    ::-webkit-scrollbar {
+        position: relative;
+        -webkit-appearance: none;
+        height: 5px;
+        background-color: white;
+    }
 
-    .collectionStackedTimeline-trim-handle {
-      background-color: $medium-blue;
-      height: 100%;
-      width: 5px;
-      cursor: ew-resize;
+    ::-webkit-scrollbar-thumb {
+        position: relative;
+        -webkit-appearance: none;
+        height: 5px;
+        background-color: $medium-gray;
     }
-  }
 
-  .collectionStackedTimeline-selector {
-    position: absolute;
-    width: 10px;
-    top: 2.5%;
-    height: 95%;
-    background: $light-blue;
-    border-radius: 3px;
-    opacity: 0.3;
-    z-index: 500;
-    border-style: solid;
-    border-color: $medium-blue;
-    border-width: 1px;
-  }
+    .collectionStackedTimeline-trim-shade {
+        position: absolute;
+        height: 100%;
+        background-color: $dark-gray;
+        opacity: 0.3;
+    }
 
-  .collectionStackedTimeline-current {
-    width: 1px;
-    height: 100%;
-    background-color: $pink;
-    position: absolute;
-    top: 0px;
-    pointer-events: none;
-  }
+    .collectionStackedTimeline-trim-controls {
+        height: 100%;
+        position: absolute;
+        box-sizing: border-box;
+        border: 2px solid $medium-blue;
+        display: flex;
+        justify-content: space-between;
+        max-width: 100%;
 
-  .collectionStackedTimeline-marker-timeline {
-    position: absolute;
-    top: 2.5%;
-    height: 95%;
-    border-radius: 4px;
-    background: $light-gray;
-    &:hover {
-      opacity: 1;
+        .collectionStackedTimeline-trim-handle {
+            background-color: $medium-blue;
+            height: 100%;
+            width: 5px;
+            cursor: ew-resize;
+        }
     }
 
-    .collectionStackedTimeline-left-resizer,
-    .collectionStackedTimeline-resizer {
-      background: $medium-gray;
-      position: absolute;
-      top: 0;
-      height: 100%;
-      width: 10px;
-      pointer-events: all;
-      cursor: ew-resize;
-      z-index: 100;
+    .collectionStackedTimeline-selector {
+        position: absolute;
+        width: 10px;
+        top: 2.5%;
+        height: 95%;
+        background: $light-blue;
+        border-radius: 3px;
+        opacity: 0.3;
+        z-index: 500;
+        border-style: solid;
+        border-color: $medium-blue;
+        border-width: 1px;
     }
-    .collectionStackedTimeline-resizer {
-      right: 0;
+
+    .collectionStackedTimeline-current {
+        width: 1px;
+        height: 100%;
+        background-color: $pink;
+        position: absolute;
+        top: 0px;
+        pointer-events: none;
     }
-    .collectionStackedTimeline-left-resizer {
-      left: 0;
+
+    .collectionStackedTimeline-marker-timeline {
+        position: absolute;
+        top: 2.5%;
+        height: 95%;
+        border-radius: 4px;
+        background: $light-gray;
+        &:hover {
+            opacity: 1;
+        }
+
+        .collectionStackedTimeline-left-resizer,
+        .collectionStackedTimeline-resizer {
+            background: $medium-gray;
+            position: absolute;
+            top: 0;
+            height: 100%;
+            width: 10px;
+            pointer-events: all;
+            cursor: ew-resize;
+            z-index: 100;
+        }
+        .collectionStackedTimeline-resizer {
+            right: 0;
+        }
+        .collectionStackedTimeline-left-resizer {
+            left: 0;
+        }
     }
-  }
 
-  .collectionStackedTimeline-waveform {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    pointer-events: none;
-  }
+    .collectionStackedTimeline-waveform {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        pointer-events: none;
+    }
 }
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index b5c266526..5c02611bb 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -100,6 +100,8 @@ export class CollectionStackedTimeline extends CollectionSubView<
 
     @computed get currentTime() { return NumCast(this.layoutDoc._currentTimecode); }
 
+    @computed get zoomFactor() { return this._zoomFactor }
+
     constructor(props: any) {
         super(props);
         // onClick play scripts
@@ -120,6 +122,8 @@ export class CollectionStackedTimeline extends CollectionSubView<
     }
 
     componentDidMount() {
+        this.layoutDoc.clipStart = 0;
+        this.layoutDoc.clipEnd = this.props.rawDuration;
         document.addEventListener("keydown", this.keyEvents, true);
     }
 
@@ -135,7 +139,6 @@ export class CollectionStackedTimeline extends CollectionSubView<
 
     @action
     public StartTrimming(scope: TrimScope) {
-        console.log(this.minTrimLength);
         this._trimStart = this.clipStart;
         this._trimEnd = this.clipEnd;
         this._trimming = scope;
@@ -148,8 +151,9 @@ export class CollectionStackedTimeline extends CollectionSubView<
     }
 
     @action
-    public setZoom(change: number) {
-        this._zoomFactor = Math.max(1, this._zoomFactor + change);
+    public setZoom(zoom: number) {
+        this._zoomFactor = zoom;
+        // console.log(this._timeline?.scrollWidth);
     }
 
     anchorStart = (anchor: Doc) => NumCast(anchor._timecodeToShow, NumCast(anchor[this.props.startTag]));
@@ -216,7 +220,9 @@ export class CollectionStackedTimeline extends CollectionSubView<
     @action
     onPointerDownTimeline = (e: React.PointerEvent): void => {
         const rect = this._timeline?.getBoundingClientRect();
+        const scrollLeft = this._timeline?.scrollLeft;
         const clientX = e.clientX;
+        const diff = rect ? clientX - rect?.x : null;
         const shiftKey = e.shiftKey;
         if (rect && this.props.isContentActive()) {
             const wasPlaying = this.props.playing();
@@ -529,7 +535,7 @@ export class CollectionStackedTimeline extends CollectionSubView<
     }
     @computed get renderAudioWaveform() {
         return !this.props.mediaPath ? null : (
-            <div className="collectionStackedTimeline-waveform">
+            <div className="collectionStackedTimeline-waveform" style={{ width: `${this.zoomFactor * 100}%`, overflowX: "scroll" }}>
                 <AudioWaveform
                     rawDuration={this.props.rawDuration}
                     duration={this.clipDuration}
@@ -538,6 +544,7 @@ export class CollectionStackedTimeline extends CollectionSubView<
                     clipStart={this.clipStart}
                     clipEnd={this.clipEnd}
                     PanelHeight={this.timelineContentHeight}
+                    zoomFactor={this.zoomFactor}
                 />
             </div>
         );
@@ -556,7 +563,7 @@ export class CollectionStackedTimeline extends CollectionSubView<
     }
 
     render() {
-        const timelineContentWidth = this.props.PanelWidth();
+        const timelineContentWidth = this.props.PanelWidth() * this.zoomFactor;
         const overlaps: {
             anchorStartTime: number;
             anchorEndTime: number;
@@ -573,8 +580,9 @@ export class CollectionStackedTimeline extends CollectionSubView<
                 ref={(timeline: HTMLDivElement | null) => (this._timeline = timeline)}
                 onClick={(e) => this.isContentActive() && StopEvent(e)}
                 onPointerDown={(e) => this.isContentActive() && this.onPointerDownTimeline(e)}
-                style={{ width: `${this._zoomFactor * 100}%` }}
+                onPointerEnter={(e) => { console.log("scroll"); e.preventDefault(); e.stopPropagation(); }}
             >
+
                 {drawAnchors.map((d) => {
                     const start = this.anchorStart(d.anchor);
                     const end = this.anchorEnd(
@@ -868,19 +876,19 @@ class StackedTimelineAnchor extends React.Component<StackedTimelineAnchorProps>
                 {inner.view}
                 {!inner.anchor.view ||
                     !SelectionManager.IsSelected(inner.anchor.view) ? null : (
-                        <>
-                            <div
-                                key="left"
-                                className="collectionStackedTimeline-left-resizer"
-                                onPointerDown={(e) => this.onAnchorDown(e, this.props.mark, true)}
-                            />
-                            <div
-                                key="right"
-                                className="collectionStackedTimeline-resizer"
-                                onPointerDown={(e) => this.onAnchorDown(e, this.props.mark, false)}
-                            />
-                        </>
-                    )}
+                    <>
+                        <div
+                            key="left"
+                            className="collectionStackedTimeline-left-resizer"
+                            onPointerDown={(e) => this.onAnchorDown(e, this.props.mark, true)}
+                        />
+                        <div
+                            key="right"
+                            className="collectionStackedTimeline-resizer"
+                            onPointerDown={(e) => this.onAnchorDown(e, this.props.mark, false)}
+                        />
+                    </>
+                )}
             </>
         );
     }