thumbnail preview of video when hovering over timeline

1 files changed, 28 insertions, 2 deletions

diff --git a/src/client/views/collections/CollectionStackedTimeline.scss b/src/client/views/collections/CollectionStackedTimeline.scss
index e8b6817b4..580cbccda 100644
--- a/src/client/views/collections/CollectionStackedTimeline.scss
+++ b/src/client/views/collections/CollectionStackedTimeline.scss
@@ -8,6 +8,16 @@
     background-color: $white;
     border: 2px solid $dark-gray;
     border-width: 0 2px 0 2px;
+
+    &:hover {
+        .collectionStackedTimeline-hover {
+            display: block;
+        }
+    }
+}
+
+.timeline-container:hover + .videoBox-thumbnail {
+    display: block;
 }
 
 ::-webkit-scrollbar {
@@ -61,15 +71,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 +126,11 @@
         pointer-events: none;
     }
 }
+
+.videoBox-thumbnail {
+    position: absolute;
+    z-index: 10000;
+    transform: translate(-50%, 100%);
+    height: 100%;
+    display: none;
+}
\ No newline at end of file