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

3 files changed, 21 insertions, 18 deletions

diff --git a/src/client/views/collections/CollectionStackedTimeline.scss b/src/client/views/collections/CollectionStackedTimeline.scss
index fce105a44..36aa36978 100644
--- a/src/client/views/collections/CollectionStackedTimeline.scss
+++ b/src/client/views/collections/CollectionStackedTimeline.scss
@@ -1,7 +1,7 @@
 @import "../global/globalCssVariables.scss";
 
 .timeline-container {
-    height: calc(100% - 50px);
+    height: 100%;
     overflow-x: auto;
     overflow-y: hidden;
     border: none;
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)}
+                            />
+                        </>
+                    )}
             </>
         );
     }
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 9f24d60d8..6e1d9b067 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -220,8 +220,8 @@ export class TabDocView extends React.Component<TabDocViewProps> {
             if (!pinProps?.audioRange && duration !== undefined) {
                 pinDoc.mediaStart = "manual";
                 pinDoc.mediaStop = "manual";
-                pinDoc.presStartTime = doc.clipStart;
-                pinDoc.presEndTime = doc.clipEnd;
+                pinDoc.presStartTime = NumCast(doc.clipStart);
+                pinDoc.presEndTime = NumCast(doc.clipEnd, duration);
             }
             //save position
             if (pinProps?.setPosition || pinDoc.isInkMask) {