From 3ba076f93e2aa182698a229b381a77765f11213e Mon Sep 17 00:00:00 2001
From: mehekj <mehek.jethani@gmail.com>
Date: Thu, 28 Oct 2021 15:58:38 -0400
Subject: fixed marker drag and drop in scrolled zoomed timeline

---
 src/client/views/AudioWaveform.tsx                   | 20 +++++++++++++++++---
 .../views/collections/CollectionStackedTimeline.tsx  | 10 ++++++----
 src/client/views/nodes/AudioBox.tsx                  |  7 +++----
 3 files changed, 26 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/client/views/AudioWaveform.tsx b/src/client/views/AudioWaveform.tsx
index 58384792e..4d9c039c4 100644
--- a/src/client/views/AudioWaveform.tsx
+++ b/src/client/views/AudioWaveform.tsx
@@ -20,6 +20,7 @@ export interface AudioWaveformProps {
     clipEnd: number;
     zoomFactor: number;
     PanelHeight: () => number;
+    PanelWidth: () => number;
 }
 
 @observer
@@ -88,15 +89,28 @@ export class AudioWaveform extends React.Component<AudioWaveformProps> {
         return (
             <div className="audioWaveform">
                 <Waveform
-                    color={Colors.MEDIUM_BLUE}
+                    color={Colors.MEDIUM_BLUE_ALT}
                     height={this.waveHeight}
-                    barWidth={200.0 / this.audioBuckets.length}
+                    barWidth={2}
                     pos={this.props.duration}
                     duration={this.props.duration}
                     peaks={this.audioBuckets}
-                    progressColor={Colors.MEDIUM_BLUE}
+                    progressColor={Colors.MEDIUM_BLUE_ALT}
                 />
             </div>
         );
     }
 }
+
+
+// export interface WaveformProps {
+//     barWidth: number;
+//     width: () => number;
+//     height: () => number;
+//     peaks: number[];
+//     color: string;
+// }
+
+// export class Waveform extends React.Component<WaveformProps> {
+
+// }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index 37fd42bc1..b63835b00 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -357,7 +357,7 @@ export class CollectionStackedTimeline extends CollectionSubView<
         // determine x coordinate of drop and assign it to the documents being dragged  --- see internalDocDrop of collectionFreeFormView.tsx for how it's done when dropping onto a 2D freeform view
         const localPt = this.props.ScreenToLocalTransform().transformPoint(de.x, de.y);
         const x = localPt[0] - docDragData.offset[0];
-        const timelinePt = this.toTimeline(x, this.props.PanelWidth());
+        const timelinePt = this.toTimeline(x + this._scroll, this.timelineContentWidth());
         docDragData.droppedDocuments.forEach(drop => {
             const anchorEnd = this.anchorEnd(drop);
             if (anchorEnd !== undefined) {
@@ -466,7 +466,7 @@ export class CollectionStackedTimeline extends CollectionSubView<
         m: Doc,
         placed: { anchorStartTime: number; anchorEndTime: number; level: number }[]
     ) => {
-        const timelineContentWidth = this.props.PanelWidth();
+        const timelineContentWidth = this.timelineContentWidth();
         const x1 = this.anchorStart(m);
         const x2 = this.anchorEnd(
             m,
@@ -498,6 +498,7 @@ export class CollectionStackedTimeline extends CollectionSubView<
     dictationHeightPercent = 50;
     dictationHeight = () => (this.props.PanelHeight() * (100 - this.dictationHeightPercent)) / 100;
     timelineContentHeight = () => (this.props.PanelHeight() * this.dictationHeightPercent) / 100;
+    timelineContentWidth = () => (this.props.PanelWidth() * this.zoomFactor - 4);  // subtract size of container border
     dictationScreenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(0, -this.timelineContentHeight());
     isContentActive = () => this.props.isSelected() || this.props.isContentActive();
     currentTimecode = () => this.currentTime;
@@ -548,8 +549,9 @@ export class CollectionStackedTimeline extends CollectionSubView<
                     layoutDoc={this.layoutDoc}
                     clipStart={this.clipStart}
                     clipEnd={this.clipEnd}
-                    PanelHeight={this.timelineContentHeight}
                     zoomFactor={this.zoomFactor}
+                    PanelHeight={this.timelineContentHeight}
+                    PanelWidth={this.timelineContentWidth}
                 />
             </div>
         );
@@ -568,7 +570,7 @@ export class CollectionStackedTimeline extends CollectionSubView<
     }
 
     render() {
-        const timelineContentWidth = this.props.PanelWidth() * this.zoomFactor - 4; // subtract size of container border
+        const timelineContentWidth = this.timelineContentWidth();
         const overlaps: {
             anchorStartTime: number;
             anchorEndTime: number;
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 3a3eb78e1..a896c7d90 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -158,8 +158,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 this.mediaState = media_state.Playing;
                 this._play = setTimeout(
                     () => {
-                        this.Pause();
-                        if (fullPlay) this.setPlayheadTime(this.timeline!.trimStart);
+                        this.setPlayheadTime(this.timeline!.trimStart);
                     },
                     (end - start) * 1000);
             } else {
@@ -254,7 +253,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     Play = (e?: any) => {
         const eleTime = this._ele?.currentTime || 0;
         const start = eleTime === this.timeline?.trimEnd ? this.timeline.trimStart : eleTime;
-        this.playFrom(start, undefined, true);
+        this.playFrom(start, undefined);
         e?.stopPropagation?.();
     }
 
@@ -263,7 +262,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     Pause = () => {
         this._ele?.pause();
         this.mediaState = media_state.Paused;
-        // clearTimeout(this._play); // stops clip from jumping back to beginning
+        clearTimeout(this._play); // stops clip from jumping back to beginning
     }
 
     // creates a text document for dictation
-- 
cgit v1.2.3-70-g09d2