2 files changed, 75 insertions, 7 deletions

diff --git a/src/client/views/collections/CollectionStackedTimeline.scss b/src/client/views/collections/CollectionStackedTimeline.scss
index e8b6817b4..bb98e1c99 100644
--- a/src/client/views/collections/CollectionStackedTimeline.scss
+++ b/src/client/views/collections/CollectionStackedTimeline.scss
@@ -6,8 +6,18 @@
     overflow-y: hidden;
     border: none;
     background-color: $white;
-    border: 2px solid $dark-gray;
     border-width: 0 2px 0 2px;
+
+    &:hover {
+        .collectionStackedTimeline-hover {
+            display: block;
+        }
+    }
+}
+
+.timeline-container:hover + .timeline-hoverUI {
+    display: flex;
+    justify-content: center;
 }
 
 ::-webkit-scrollbar {
@@ -19,6 +29,7 @@
     background: $off-white;
     z-index: 1000;
     height: 100%;
+    overflow: hidden;
 
     .collectionStackedTimeline-trim-shade {
         position: absolute;
@@ -61,15 +72,23 @@
         border-width: 1px;
     }
 
-    .collectionStackedTimeline-current {
+    .collectionStackedTimeline-current, .collectionStackedTimeline-hover {
         width: 1px;
         height: 100%;
-        background-color: $pink;
         position: absolute;
         top: 0px;
         pointer-events: none;
     }
 
+    .collectionStackedTimeline-current {
+        background-color: $pink;
+    }
+
+    .collectionStackedTimeline-hover {
+        display: none;
+        background-color: $medium-blue;
+    }
+
     .collectionStackedTimeline-marker-timeline {
         position: absolute;
         top: 2.5%;
@@ -108,3 +127,19 @@
         pointer-events: none;
     }
 }
+
+.timeline-hoverUI {
+    position: absolute;
+    z-index: 10000;
+    transform: translate(-50%, 100%);
+    height: 100%;
+    display: none;
+
+    .hoverTime {
+        position: absolute;
+        color: $dark-gray;
+        transform: translate(0, -100%);
+
+        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 ebdea9aaf..372629ddf 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -43,6 +43,8 @@ import {
 } from "../nodes/DocumentView";
 import { LabelBox } from "../nodes/LabelBox";
 import "./CollectionStackedTimeline.scss";
+import { VideoBox } from "../nodes/VideoBox";
+import { ImageField } from "../../../fields/URLField";
 
 export type CollectionStackedTimelineProps = {
     Play: () => void;
@@ -86,9 +88,12 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
     @observable _trimEnd: number = 0; // trim controls end pos
 
     @observable _zoomFactor: number = 1;
-
     @observable _scroll: number = 0;
 
+    @observable _hoverTime: number = 0;
+
+    @observable _thumbnail: string | undefined;
+
     // ensures that clip doesn't get trimmed so small that controls cannot be adjusted anymore 
     get minTrimLength() { return Math.max(this._timeline?.getBoundingClientRect() ? 0.05 * this.clipDuration : 0, 0.5); }
 
@@ -315,11 +320,28 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
     }
 
 
+    @action
+    onHover = (e: React.MouseEvent): void => {
+        e.stopPropagation();
+        const rect = this._timeline?.getBoundingClientRect();
+        const clientX = e.clientX;
+        if (rect) {
+            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 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;
+            }
+        }
+    }
+
+
     // for dragging trim start handle
     @action
     trimLeft = (e: React.PointerEvent): void => {
         const rect = this._timeline?.getBoundingClientRect();
-        const clientX = e.movementX;
         setupMoveUpEvents(
             this,
             e,
@@ -346,7 +368,6 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
     @action
     trimRight = (e: React.PointerEvent): void => {
         const rect = this._timeline?.getBoundingClientRect();
-        const clientX = e.movementX;
         setupMoveUpEvents(
             this,
             e,
@@ -556,7 +577,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);
 
@@ -632,6 +653,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
                 style={{ width: this.props.PanelWidth() }}
                 onWheel={e => e.stopPropagation()}
                 onScroll={this.setScroll}
+                onMouseMove={(e) => this.isContentActive() && this.onHover(e)}
                 ref={wrapper => this._timelineWrapper = wrapper}>
                 <div
                     className="collectionStackedTimeline"
@@ -702,6 +724,13 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
                     />
                     {/* {this.renderDictation} */}
 
+                    { /* 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"
                         style={{
@@ -744,6 +773,10 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
                     )}
                 </div>
             </div>
+            <div className="timeline-hoverUI" style={{ left: `calc(${((this._hoverTime - this.clipStart) / this.clipDuration) * 100}%` }}>
+                <div className="hoverTime">{formatTime(this._hoverTime)}</div>
+                {this._thumbnail && <img className="videoBox-thumbnail" src={this._thumbnail} />}
+            </div>
         </div >);
     }
 }