From bf3f88f5236a6ebda4ca3b6dc246f98ff404a360 Mon Sep 17 00:00:00 2001
From: mehekj <mehek.jethani@gmail.com>
Date: Wed, 15 Jun 2022 13:11:16 -0400
Subject: ui fixes and thumbnails upload in parallel

---
 .../views/collections/CollectionStackedTimeline.scss  | 13 ++++++++++---
 .../views/collections/CollectionStackedTimeline.tsx   | 19 +++++++++++--------
 2 files changed, 21 insertions(+), 11 deletions(-)

(limited to 'src/client/views/collections')

diff --git a/src/client/views/collections/CollectionStackedTimeline.scss b/src/client/views/collections/CollectionStackedTimeline.scss
index 580cbccda..f9cf5cd4e 100644
--- a/src/client/views/collections/CollectionStackedTimeline.scss
+++ b/src/client/views/collections/CollectionStackedTimeline.scss
@@ -6,7 +6,6 @@
     overflow-y: hidden;
     border: none;
     background-color: $white;
-    border: 2px solid $dark-gray;
     border-width: 0 2px 0 2px;
 
     &:hover {
@@ -16,7 +15,7 @@
     }
 }
 
-.timeline-container:hover + .videoBox-thumbnail {
+.timeline-container:hover + .timeline-hoverUI {
     display: block;
 }
 
@@ -29,6 +28,7 @@
     background: $off-white;
     z-index: 1000;
     height: 100%;
+    overflow: hidden;
 
     .collectionStackedTimeline-trim-shade {
         position: absolute;
@@ -127,10 +127,17 @@
     }
 }
 
-.videoBox-thumbnail {
+.timeline-hoverUI {
     position: absolute;
     z-index: 10000;
     transform: translate(-50%, 100%);
     height: 100%;
     display: none;
+
+    .hoverTime {
+        color: $dark-gray;
+        text-align: center;
+        transform: translate(0, -17px);
+        font-weight: bold;
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index 2b78f5764..850aa5dbe 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -326,13 +326,13 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
         const rect = this._timeline?.getBoundingClientRect();
         const clientX = e.clientX;
         if (rect) {
-            this._hoverTime = Math.min(this.toTimeline(clientX - rect.x, rect.width), this.clipEnd);
+            this._hoverTime = this.toTimeline(clientX - rect.x, rect.width);
             if (this.dataDoc.thumbnails) {
                 const nearest = Math.floor(this._hoverTime / this.props.rawDuration * VideoBox.numThumbnails);
                 const thumbnails = Cast(this.dataDoc.thumbnails, listSpec("string"), []);
-                const src = new ImageField(thumbnails[nearest]).url.href.replace(".png", "_s.png");
-                this._thumbnail = src;
-                console.log(src);
+                const imgField = thumbnails && thumbnails.length > 0 ? new ImageField(thumbnails[nearest]) : new ImageField("");
+                const src = imgField && imgField.url.href ? imgField.url.href.replace(".png", "_s.png") : "";
+                this._thumbnail = src ? src : undefined;
             }
         }
     }
@@ -576,7 +576,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
     dictationHeight = () => (this.props.PanelHeight() * (100 - this.dictationHeightPercent)) / 100;
 
     @computed get timelineContentHeight() { return this.props.PanelHeight() * this.dictationHeightPercent / 100; }
-    @computed get timelineContentWidth() { return this.props.PanelWidth() * this.zoomFactor - 4; }  // subtract size of container border
+    @computed get timelineContentWidth() { return this.props.PanelWidth() * this.zoomFactor; }  // subtract size of container border
 
     dictationScreenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(0, -this.timelineContentHeight);
 
@@ -723,12 +723,12 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
                     />
                     {/* {this.renderDictation} */}
 
-                    <div
+                    { /* check time to prevent weird div overflow */ this._hoverTime < this.clipDuration && <div
                         className="collectionStackedTimeline-hover"
                         style={{
                             left: `${((this._hoverTime - this.clipStart) / this.clipDuration) * 100}%`,
                         }}
-                    />
+                    />}
 
                     <div
                         className="collectionStackedTimeline-current"
@@ -772,7 +772,10 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
                     )}
                 </div>
             </div>
-            {this._thumbnail && <img className="videoBox-thumbnail" style={{ left: `calc(${((this._hoverTime - this.clipStart) / this.clipDuration) * 100}%` }} src={this._thumbnail} />}
+            <div className="timeline-hoverUI" style={{ left: `calc(${((this._hoverTime - this.clipStart) / this.clipDuration) * 100}%` }}>
+                {this._thumbnail && <img className="videoBox-thumbnail" src={this._thumbnail} />}
+                <div className="hoverTime">{formatTime(this._hoverTime)}</div>
+            </div>
         </div >);
     }
 }
-- 
cgit v1.2.3-70-g09d2