merged with master and added transcription icon view for recognized ink

1 files changed, 31 insertions, 22 deletions

diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss
index 3cf10a033..d4cddd65e 100644
--- a/src/client/views/nodes/VideoBox.scss
+++ b/src/client/views/nodes/VideoBox.scss
@@ -15,6 +15,7 @@
     width: 100%;
     height: 100%;
     position: relative;
+
     .videoBox-viewer {
         display: flex;
         flex-direction: column;
@@ -23,6 +24,7 @@
         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
     }
@@ -52,17 +54,20 @@
     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;
 }
 
@@ -81,17 +86,18 @@
     align-items: center;
     justify-content: center;
     display: flex;
+    width: 100%;
     visibility: none;
     opacity: 0;
     background-color: $dark-gray;
     color: white;
     border-radius: 100px;
-    top: calc(100% - 20px);
-    left: 50%;
-    transform: translate(-50%, -100%);
-    
+    transform-origin: bottom left;
+    left: 0;
+    bottom: 0;
+
     transition: top 0.5s, width 0.5s, opacity 0.2s, visibility 0s;
-    height: 120px;
+    height: 24px;
     padding: 0 20px;
 
     .timecode-controls {
@@ -101,27 +107,28 @@
         justify-content: center;
         margin: 0 5px;
         flex-grow: 2;
-        font-size: 32px;
+        font-size: 12px;
 
         .timecode {
             margin: 0 5px;
         }
 
         .timeline-slider {
-            margin: 0 20px 0 20px;
+            margin: 0 10px 0 10px;
             flex-grow: 2;
         }
     }
 
-    .toolbar-slider.volume, .toolbar-slider.zoom {
+    .toolbar-slider.volume,
+    .toolbar-slider.zoom {
         width: 100px;
     }
 
     .videobox-button {
         margin: 5px;
         cursor: pointer;
-        width: 70px;
-        height: 70px;
+        width: 24px;
+        height: 24px;
         border-radius: 50%;
         background: $dark-gray;
         display: flex;
@@ -133,8 +140,8 @@
         }
 
         svg {
-            width: 40px;
-            height: 40px;
+            width: 18px;
+            height: 18px;
         }
     }
 }
@@ -150,6 +157,7 @@
     pointer-events: all;
     padding-right: 5px;
     cursor: pointer;
+
     &:hover {
         background-color: $medium-gray;
     }
@@ -163,7 +171,8 @@
     }
 }
 
-.videoBox-content-fullScreen, .videoBox-content-fullScreen-interactive {
+.videoBox-content-fullScreen,
+.videoBox-content-fullScreen-interactive {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -195,21 +204,21 @@ input[type="range"]:focus {
 
 input[type="range"]::-webkit-slider-runnable-track {
     width: 100%;
-    height: 20px;
+    height: 18px;
     cursor: pointer;
     box-shadow: 0;
     background: $light-gray;
-    border-radius: 20px;
+    border-radius: 18px;
 }
 
 input[type="range"]::-webkit-slider-thumb {
     box-shadow: 0;
     border: 0;
-    height: 26px;
-    width: 26px;
+    height: 20px;
+    width: 20px;
     border-radius: 20px;
     background: $medium-blue;
     cursor: pointer;
     -webkit-appearance: none;
-    margin-top: -3px;
+    margin-top: -1px;
 }
\ No newline at end of file