1 files changed, 32 insertions, 33 deletions

diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index d689d7970..5352b5220 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -52,7 +52,7 @@ type PanZoomDocument = makeInterface<[]>;
 const PanZoomDocument = makeInterface();
 export type CollectionStackedTimelineProps = {
     Play: () => void;
-    Pause: () => void;
+    Pause: (timeoutClear: boolean) => void;
     playLink: (linkDoc: Doc) => void;
     playFrom: (seekTimeInSeconds: number, endTime?: number) => void;
     playing: () => boolean;
@@ -127,11 +127,6 @@ export class CollectionStackedTimeline extends CollectionSubView<
     }
 
     componentDidMount() {
-        // bcz: setting these shouldn't be necessary since they are the default values of this.clipStart and this.clipEnd.
-        //      also, setting anything on the Document in DidMount or the constructor is not good form since it means that
-        //      someone who has viewing but not edit permissions would not be able to do the assignment.
-        // this.layoutDoc.clipStart = 0;
-        // this.layoutDoc.clipEnd = this.props.rawDuration;
         document.addEventListener("keydown", this.keyEvents, true);
     }
 
@@ -232,7 +227,7 @@ export class CollectionStackedTimeline extends CollectionSubView<
         const shiftKey = e.shiftKey;
         if (rect && this.props.isContentActive()) {
             const wasPlaying = this.props.playing();
-            if (wasPlaying) this.props.Pause();
+            if (wasPlaying) this.props.Pause(true);
             var wasSelecting = this._markerEnd !== undefined;
             setupMoveUpEvents(
                 this,
@@ -358,15 +353,15 @@ export class CollectionStackedTimeline extends CollectionSubView<
 
     @action
     scrollToTime = (time: number) => {
-        console.log("rightmost visible time: " + this.toTimeline(this._scroll + this.props.PanelWidth(), this.timelineContentWidth));
-        if (this._timelineWrapper && time > this.toTimeline(this._scroll + this.props.PanelWidth(), this.timelineContentWidth)) {
-            console.log("scrolled");
-            this._scroll = Math.min(this._scroll + this.props.PanelWidth(), this.timelineContentWidth - this.props.PanelWidth());
-            smoothScrollHorizontal(100, this._timelineWrapper, this._scroll);
-        }
-        else if (this._timelineWrapper && time < this.toTimeline(this._scroll, this.timelineContentWidth)) {
-            this._scroll = time / this.timelineContentWidth * this.clipDuration;
-            smoothScrollHorizontal(100, this._timelineWrapper, this._scroll);
+        if (this._timelineWrapper) {
+            if (time > this.toTimeline(this._scroll + this.props.PanelWidth(), this.timelineContentWidth)) {
+                this._scroll = Math.min(this._scroll + this.props.PanelWidth(), this.timelineContentWidth - this.props.PanelWidth());
+                smoothScrollHorizontal(200, this._timelineWrapper, this._scroll);
+            }
+            else if (time < this.toTimeline(this._scroll, this.timelineContentWidth)) {
+                this._scroll = time / this.timelineContentWidth * this.clipDuration;
+                smoothScrollHorizontal(200, this._timelineWrapper, this._scroll);
+            }
         }
     }
 
@@ -434,20 +429,24 @@ export class CollectionStackedTimeline extends CollectionSubView<
         const seekTimeInSeconds = this.anchorStart(anchorDoc) - 0.25;
         const endTime = this.anchorEnd(anchorDoc);
         if (this.layoutDoc.autoPlayAnchors) {
-            if (this.props.playing()) this.props.Pause();
-            else this.props.playFrom(seekTimeInSeconds, endTime);
+            if (this.props.playing()) this.props.Pause(true);
+            else {
+                this.props.playFrom(seekTimeInSeconds, endTime);
+                this.scrollToTime(seekTimeInSeconds);
+            }
         } else {
             if (
                 seekTimeInSeconds < NumCast(this.layoutDoc._currentTimecode) &&
                 endTime > NumCast(this.layoutDoc._currentTimecode)
             ) {
                 if (!this.layoutDoc.autoPlayAnchors && this.props.playing()) {
-                    this.props.Pause();
+                    this.props.Pause(true);
                 } else {
                     this.props.Play();
                 }
             } else {
                 this.props.playFrom(seekTimeInSeconds, endTime);
+                this.scrollToTime(seekTimeInSeconds);
             }
         }
         return { select: true };
@@ -464,7 +463,7 @@ export class CollectionStackedTimeline extends CollectionSubView<
             seekTimeInSeconds < NumCast(this.layoutDoc._currentTimecode) + 1e-4 &&
             endTime > NumCast(this.layoutDoc._currentTimecode) - 1e-4
         ) {
-            if (this.props.playing()) this.props.Pause();
+            if (this.props.playing()) this.props.Pause(true);
             else if (this.layoutDoc.autoPlayAnchors) this.props.Play();
             else if (!this.layoutDoc.autoPlayAnchors) {
                 const rect = this._timeline?.getBoundingClientRect();
@@ -919,19 +918,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)}
+                        />
+                    </>
+                )}
             </>
         );
     }