ui fixes and thumbnails upload in parallel

2 files changed, 21 insertions, 11 deletions

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 >);
     }
 }