video ui in progress, basic functions show up

1 files changed, 85 insertions, 5 deletions

diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss
index 8a3261c7d..35f5a7e65 100644
--- a/src/client/views/nodes/VideoBox.scss
+++ b/src/client/views/nodes/VideoBox.scss
@@ -78,10 +78,49 @@
 .videoBox-ui {
     position: absolute;
     flex-direction: row;
-    right: 5px;
-    top: 5px;
-    display: none;
-    background-color: rgba($dark-gray, 0.6);
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    visibility: none;
+    opacity: 0;
+    background-color: $dark-gray;
+    color: white;
+    border-radius: 100px;
+    left: 50%;
+    transform: translate(-50%, -150%);
+    transition: top 0.5s, opacity 0.2s, visibility 0s;
+    height: 5%;
+    width: 80%;
+
+    .timecode-controls {
+        display: flex;
+        flex-direction: row;
+        margin: 0 5px;
+
+        .timecode {
+            margin: 0 5px;
+        }
+    }
+
+    .videobox-button {
+        margin: 5px;
+        cursor: pointer;
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        background: $dark-gray;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &:hover {
+            background: $black;
+        }
+
+        svg {
+            width: 20px;
+        }
+    }
 }
 .videoBox-time,
 .videoBox-snapshot,
@@ -101,6 +140,47 @@
 
 .videoBox:hover {
     .videoBox-ui {
-        display: flex;
+        visibility: visible;
+        opacity: 1;
+        z-index: 10000;
     }
 }
+
+video::-webkit-media-controls {
+    display: none !important;
+}
+
+input[type="range"] {
+    -webkit-appearance: none;
+    background: none;
+    margin: 5px;
+}
+
+input[type="range"]:focus {
+    outline: none;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 6px;
+    cursor: pointer;
+    box-shadow: 0;
+    background: $light-gray;
+    border-radius: 3px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    box-shadow: 0;
+    border: 0;
+    height: 10px;
+    width: 10px;
+    border-radius: 10px;
+    background: $medium-blue;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -2px;
+}
+
+.toolbar-slider.volume {
+    width: 50px;
+}
\ No newline at end of file