Merge branch 'master' into parker

1 files changed, 134 insertions, 25 deletions

diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss
index f0d7bd2f3..aa51714da 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;
@@ -13,23 +15,24 @@
     width: 100%;
     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,26 +46,33 @@
     }
 }
 
-.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;
+
     video {
         width: auto;
-        height: 100%; 
-        display: flex; 
+        height: 100%;
+        display: flex;
         margin: auto;
     }
 }
 
-.videoBox-content, .videoBox-content-interactive, .videoBox-content-fullScreen {
+.videoBox-content,
+.videoBox-content-interactive,
+.videoBox-content-fullScreen {
     width: 100%;
-    height: 100%; 
+    height: 100%;
     left: 0px;
 }
 
-.videoBox-content-YouTube, .videoBox-content-YouTube-fullScreen  {
+.videoBox-content-YouTube,
+.videoBox-content-YouTube-fullScreen {
     height: 100%;
 }
 
@@ -70,28 +80,127 @@
 //     pointer-events: all;
 // }
 
+.videoBox-ui-wrapper {
+    width: 0;
+    height: 0;
+}
+
 .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;
+    background-color: $dark-gray;
+    color: white;
+    border-radius: 100px;
+    height: 40px;
+    padding: 0 10px 0 7px;
+    transition: opacity 0.3s;
+    z-index: 100001;
+
+    .timecode-controls {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        margin: 0 2px;
+        flex-grow: 2;
+        font-size: 14px;
+
+        .timeline-slider {
+            margin: 5px;
+            flex-grow: 2;
+        }
+    }
+
+    .toolbar-slider.volume, .toolbar-slider.zoom {
+        width: 50px;
+    }
+
+    .videobox-button {
+        margin: 2px;
+        cursor: pointer;
+        width: 25px;
+        height: 25px;
+        border-radius: 50%;
+        background: $dark-gray;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &:hover {
+            background: $black;
+        }
+
+        svg {
+            width: 15px;
+            height: 15px;
+        }
+    }
 }
-.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-content-fullScreen, .videoBox-content-fullScreen-interactive {
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+
     .videoBox-ui {
-        display: flex;
+        left: 50%;
+        top: 90%;
+        transform: translate(-50%, -50%);
+        width: 80%;
+        transition: top 0s, width 0s, opacity 0.3s, visibility 0.3s;
     }
+}
+
+video::-webkit-media-controls {
+    display: none !important;
+}
+
+input[type="range"] {
+    -webkit-appearance: none;
+    background: none;
+}
+
+input[type="range"]:focus {
+    outline: none;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 10px;
+    cursor: pointer;
+    box-shadow: 0;
+    background: $light-gray;
+    border-radius: 10px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    box-shadow: 0;
+    border: 0;
+    height: 12px;
+    width: 12px;
+    border-radius: 10px;
+    background: $medium-blue;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -1px;
 }
\ No newline at end of file