1 files changed, 138 insertions, 20 deletions

diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss
index f0d7bd2f3..3cf10a033 100644
--- a/src/client/views/nodes/VideoBox.scss
+++ b/src/client/views/nodes/VideoBox.scss
@@ -1,4 +1,6 @@
-.mini-viewer{
+@import "../global/globalCssVariables.scss";
+
+.mini-viewer {
     cursor: grab;
     position: absolute;
     right: 10;
@@ -14,22 +16,21 @@
     height: 100%;
     position: relative;
     .videoBox-viewer {
-        display:flex;
+        display: flex;
         flex-direction: column;
         height: 100%;
         border-radius: inherit;
-        opacity: 0.99;  // hack!  overcomes some kind of Chrome weirdness where buttons (e.g., snapshot) disappear at some point as the video is resized larger
+        opacity: 0.99; // hack!  overcomes some kind of Chrome weirdness where buttons (e.g., snapshot) disappear at some point as the video is resized larger
+        background: $dark-gray;
     }
     .inkingCanvas-paths-markers {
-        opacity : 0.4; // we shouldn't have to do this, but since chrome crawls to a halt with z-index unset in videoBox-content, this is a workaround
-    }
-    .collectionStackedTimeline {
-        background: beige;
+        opacity: 0.4; // we shouldn't have to do this, but since chrome crawls to a halt with z-index unset in videoBox-content, this is a workaround
     }
+
     .videoBox-stackPanel {
         z-index: -1;
         width: 100%;
-        position: relative; 
+        position: relative;
     }
 
     .videoBox-annotationLayer {
@@ -43,8 +44,11 @@
     }
 }
 
-.videoBox-content-YouTube, .videoBox-content-YouTube-fullScreen,
-.videoBox-content, .videoBox-content-interactive, .videoBox-cont-fullScreen {
+.videoBox-content-YouTube,
+.videoBox-content-YouTube-fullScreen,
+.videoBox-content,
+.videoBox-content-interactive,
+.videoBox-cont-fullScreen {
     width: 100%;
     z-index: -1; // 0;  // logically this should be 0 (or unset) which would give us transparent brush strokes over videos.  However, this makes Chrome crawl to a halt
     position: absolute;
@@ -62,7 +66,8 @@
     left: 0px;
 }
 
-.videoBox-content-YouTube, .videoBox-content-YouTube-fullScreen  {
+.videoBox-content-YouTube,
+.videoBox-content-YouTube-fullScreen {
     height: 100%;
 }
 
@@ -73,25 +78,138 @@
 .videoBox-ui {
     position: absolute;
     flex-direction: row;
-    right: 5px;
-    top: 5px;
-    display: none;
-    background-color: rgba(0, 0, 0, 0.6);
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    visibility: none;
+    opacity: 0;
+    background-color: $dark-gray;
+    color: white;
+    border-radius: 100px;
+    top: calc(100% - 20px);
+    left: 50%;
+    transform: translate(-50%, -100%);
+    
+    transition: top 0.5s, width 0.5s, opacity 0.2s, visibility 0s;
+    height: 120px;
+    padding: 0 20px;
+
+    .timecode-controls {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        margin: 0 5px;
+        flex-grow: 2;
+        font-size: 32px;
+
+        .timecode {
+            margin: 0 5px;
+        }
+
+        .timeline-slider {
+            margin: 0 20px 0 20px;
+            flex-grow: 2;
+        }
+    }
+
+    .toolbar-slider.volume, .toolbar-slider.zoom {
+        width: 100px;
+    }
+
+    .videobox-button {
+        margin: 5px;
+        cursor: pointer;
+        width: 70px;
+        height: 70px;
+        border-radius: 50%;
+        background: $dark-gray;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &:hover {
+            background: $black;
+        }
+
+        svg {
+            width: 40px;
+            height: 40px;
+        }
+    }
 }
-.videoBox-time, .videoBox-snapshot, .videoBox-timelineButton, .videoBox-play, .videoBox-full {
-    color : white;
+
+.videoBox-time,
+.videoBox-snapshot,
+.videoBox-timelineButton,
+.videoBox-play,
+.videoBox-full {
+    color: white;
     position: relative;
     transform-origin: left top;
-    pointer-events:all;
+    pointer-events: all;
     padding-right: 5px;
     cursor: pointer;
     &:hover {
-        background-color: gray;
+        background-color: $medium-gray;
     }
 }
 
 .videoBox:hover {
     .videoBox-ui {
-        display: flex;
+        visibility: visible;
+        opacity: 1;
+        z-index: 10000;
     }
+}
+
+.videoBox-content-fullScreen, .videoBox-content-fullScreen-interactive {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+        .videoBox-ui {
+            opacity: 0;
+        }
+    }
+
+    .videoBox-ui:hover {
+        opacity: 1;
+    }
+}
+
+video::-webkit-media-controls {
+    display: none !important;
+}
+
+input[type="range"] {
+    -webkit-appearance: none;
+    background: none;
+    margin: 10px;
+}
+
+input[type="range"]:focus {
+    outline: none;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 20px;
+    cursor: pointer;
+    box-shadow: 0;
+    background: $light-gray;
+    border-radius: 20px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    box-shadow: 0;
+    border: 0;
+    height: 26px;
+    width: 26px;
+    border-radius: 20px;
+    background: $medium-blue;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -3px;
 }
\ No newline at end of file