ui fixes and thumbnails upload in parallel

1 files changed, 11 insertions, 8 deletions

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