fixed vertical height of timeline for video. fixed initial display of timeline by not assigning clipEnd in DidMount

1 files changed, 18 insertions, 15 deletions

diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index ced8a68e8..f5c3676e8 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -127,8 +127,11 @@ export class CollectionStackedTimeline extends CollectionSubView<
     }
 
     componentDidMount() {
-        this.layoutDoc.clipStart = 0;
-        this.layoutDoc.clipEnd = this.props.rawDuration;
+        // 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);
     }
 
@@ -915,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)}
+                            />
+                        </>
+                    )}
             </>
         );
     }