Merge pull request #43 from brown-dash/temporalmedia-mehek

Temporalmedia mehek - audio and video UI updates. adds trimming, zooming, and volume controls. replaces native video controls with dash UI

1 files changed, 94 insertions, 78 deletions

diff --git a/src/client/views/collections/CollectionStackedTimeline.scss b/src/client/views/collections/CollectionStackedTimeline.scss
index 59c21210a..e8b6817b4 100644
--- a/src/client/views/collections/CollectionStackedTimeline.scss
+++ b/src/client/views/collections/CollectionStackedTimeline.scss
@@ -1,94 +1,110 @@
 @import "../global/globalCssVariables.scss";
 
-.collectionStackedTimeline {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: 1000;
-  overflow: hidden;
-  top: 0px;
-
-  .collectionStackedTimeline-trim-shade {
-    position: absolute;
+.timeline-container {
     height: 100%;
-    background-color: $dark-gray;
-    opacity: 0.3;
-  }
+    overflow-x: auto;
+    overflow-y: hidden;
+    border: none;
+    background-color: $white;
+    border: 2px solid $dark-gray;
+    border-width: 0 2px 0 2px;
+}
 
-  .collectionStackedTimeline-trim-controls {
-    height: 100%;
+::-webkit-scrollbar {
+    height: 5px;
+}
+
+.collectionStackedTimeline {
     position: absolute;
-    box-sizing: border-box;
-    border: 2px solid $medium-blue;
-    display: flex;
-    justify-content: space-between;
-    max-width: 100%;
+    background: $off-white;
+    z-index: 1000;
+    height: 100%;
 
-    .collectionStackedTimeline-trim-handle {
-      background-color: $medium-blue;
-      height: 100%;
-      width: 5px;
-      cursor: ew-resize;
+    .collectionStackedTimeline-trim-shade {
+        position: absolute;
+        height: 100%;
+        background-color: $dark-gray;
+        opacity: 0.3;
+        top: 0;
     }
-  }
-
-  .collectionStackedTimeline-selector {
-    position: absolute;
-    width: 10px;
-    top: 2.5%;
-    height: 95%;
-    background: $light-blue;
-    border-radius: 3px;
-    opacity: 0.3;
-    z-index: 500;
-    border-style: solid;
-    border-color: $medium-blue;
-    border-width: 1px;
-  }
 
-  .collectionStackedTimeline-current {
-    width: 1px;
-    height: 100%;
-    background-color: $pink;
-    position: absolute;
-    top: 0px;
-    pointer-events: none;
-  }
+    .collectionStackedTimeline-trim-controls {
+        height: 100%;
+        position: absolute;
+        box-sizing: border-box;
+        border: 2px solid $medium-blue;
+        display: flex;
+        justify-content: space-between;
+        max-width: 100%;
+        top: 0;
+        left: 0;
 
-  .collectionStackedTimeline-marker-timeline {
-    position: absolute;
-    top: 2.5%;
-    height: 95%;
-    border-radius: 4px;
-    &:hover {
-      opacity: 1;
+        .collectionStackedTimeline-trim-handle {
+            background-color: $medium-blue;
+            height: 100%;
+            width: 5px;
+            cursor: ew-resize;
+        }
     }
 
-    .collectionStackedTimeline-left-resizer,
-    .collectionStackedTimeline-resizer {
-      background: $medium-gray;
-      position: absolute;
-      top: 0;
-      height: 100%;
-      width: 10px;
-      pointer-events: all;
-      cursor: ew-resize;
-      z-index: 100;
+    .collectionStackedTimeline-selector {
+        position: absolute;
+        width: 10px;
+        top: 2.5%;
+        height: 95%;
+        background: $light-blue;
+        border-radius: 3px;
+        opacity: 0.3;
+        z-index: 500;
+        border-style: solid;
+        border-color: $medium-blue;
+        border-width: 1px;
     }
-    .collectionStackedTimeline-resizer {
-      right: 0;
+
+    .collectionStackedTimeline-current {
+        width: 1px;
+        height: 100%;
+        background-color: $pink;
+        position: absolute;
+        top: 0px;
+        pointer-events: none;
     }
-    .collectionStackedTimeline-left-resizer {
-      left: 0;
+
+    .collectionStackedTimeline-marker-timeline {
+        position: absolute;
+        top: 2.5%;
+        height: 95%;
+        border-radius: 4px;
+        background: $light-gray;
+        &:hover {
+            opacity: 1;
+        }
+
+        .collectionStackedTimeline-left-resizer,
+        .collectionStackedTimeline-resizer {
+            background: $medium-gray;
+            position: absolute;
+            top: 0;
+            height: 100%;
+            width: 10px;
+            pointer-events: all;
+            cursor: ew-resize;
+            z-index: 100;
+        }
+        .collectionStackedTimeline-resizer {
+            right: 0;
+        }
+        .collectionStackedTimeline-left-resizer {
+            left: 0;
+        }
     }
-  }
 
-  .collectionStackedTimeline-waveform {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    pointer-events: none;
-  }
+    .collectionStackedTimeline-waveform {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        pointer-events: none;
+    }
 }