cleaned up video/audio/stackedTimeline css. restored SpaceKey trigger to start/stop creating an anchor.

1 files changed, 48 insertions, 359 deletions

diff --git a/src/client/views/collections/CollectionStackedTimeline.scss b/src/client/views/collections/CollectionStackedTimeline.scss
index 1bb5bc720..9d1b46f27 100644
--- a/src/client/views/collections/CollectionStackedTimeline.scss
+++ b/src/client/views/collections/CollectionStackedTimeline.scss
@@ -1,373 +1,62 @@
-.audiobox-container,
-.audiobox-container-interactive {
+.collectionStackedTimeline {
+    position: absolute;
     width: 100%;
     height: 100%;
-    position: inherit;
-    display: flex;
-    position: relative;
-    cursor: default;
-
-    .audiobox-inner {
-        width:100%;
-        height: 100%;
-    }
-
-    .audiobox-buttons {
-        display: flex;
-        width: 100%;
-        align-items: center;
-        height: 100%;
-
-        .audiobox-dictation {
-            position: relative;
-            width: 30px;
-            height: 100%;
-            align-items: center;
-            display: inherit;
-            background: dimgray;
-            left: 0px;
-        }
-
-        .audiobox-dictation:hover {
-            color: white;
-            cursor: pointer;
-        }
-    }
-
-    .audiobox-handle {
-        width: 20px;
-        height: 100%;
-        display: inline-block;
-    }
-
-    .audiobox-control,
-    .audiobox-control-interactive {
-        top: 0;
-        max-height: 32px;
-        width: 100%;
-        display: inline-block;
-        pointer-events: none;
-    }
-
-    .audiobox-control-interactive {
-        pointer-events: all;
-    }
-
-    .audiobox-record {
-        pointer-events: all;
-        width: 100%;
+    border: gray solid 1px;
+    border-radius: 3px;
+    z-index: 1000;
+    overflow: hidden;
+    top: 0px;
+
+    .collectionStackedTimeline-selector  {
+        position: absolute;
+        width: 10px;
+        top: 2.5%;
+        height: 95%;
+        background: lightblue;
+        border-radius: 5px;
+        opacity: 0.3;
+        z-index: 500;
+        border-style: solid;
+        border-color: darkblue;
+        border-width: 1px;
+    }
+
+    .collectionStackedTimeline-current {
+        width: 1px;
         height: 100%;
-        position: relative;
+        background-color: red;
+        position: absolute;
+        top: 0px;
         pointer-events: none;
     }
 
-    .audiobox-record-interactive {
-        pointer-events: all;
-        width: 100%;
-        height: 100%;
-        position: relative;
-
-        
-    }
-
-    .recording {
-        margin-top: auto;
-        margin-bottom: auto;
-        width: 100%;
-        height: 100%;
-        position: relative;
-        padding-right: 5px;
-        display: flex;
-        background-color: red;      
-
-        .time {
-            position: relative;
-            height: 100%;
-            width: 100%;
-            font-size: 20;
-            text-align: center;
-            top: 5;
-        }
-
-        .buttons {
-            position: relative;
-            margin-top: auto;
-            margin-bottom: auto;
-            width: 25px;
-            padding: 5px;
-        }
-
-        .buttons:hover {
-            background-color: crimson;
+    .collectionStackedTimeline-marker-timeline {
+        position: absolute;
+        top: 2.5%;
+        height: 95%;
+        border-radius: 4px;
+        opacity: 0.3;
+        &:hover {
+            opacity: 1;
         }
-    }
-
-    .audiobox-controls {
-        width: 100%;
-        height: 100%;
-        position: relative;
-        display: flex;
-        padding-left: 2px;
-        background: black;
 
-        .audiobox-dictation {
+        .collectionStackedTimeline-left-resizer,
+        .collectionStackedTimeline-resizer {
+            background: dimgrey;
             position: absolute;
-            width: 30px;
+            top: 0;
             height: 100%;
-            align-items: center;
-            display: inherit;
-            background: dimgray;
-            left: 0px;
+            width: 10px;
+            pointer-events: all;
+            cursor: ew-resize;
+            z-index: 100;
         }
-
-        .audiobox-player {
-            margin-top: auto;
-            margin-bottom: auto;
-            width: 100%;
-            position: relative;
-            padding-right: 5px;
-            display: flex;
-
-            .audiobox-playhead {
-                position: relative;
-                margin-top: auto;
-                margin-bottom: auto;
-                margin-right: 2px;
-                height: 25px;
-                padding: 2px;
-                border-radius: 50%;
-                background-color: black;
-                color: white;
-            }
-
-            .audiobox-playhead:hover {
-                // background-color:  black;
-                // border-radius: 5px;
-                background-color: grey;
-                color: lightgrey;
-            }
-
-            .audiobox-dictation {
-                position: relative;
-                margin-top: auto;
-                margin-bottom: auto;
-                width: 25px;
-                padding: 2px;
-                align-items: center;
-                display: inherit;
-                background: dimgray;
-            }
-
-            .audiobox-timeline {
-                position: absolute;
-                width: 100%;
-                border: gray solid 1px;
-                border-radius: 3px;
-                z-index: 1000;
-                overflow: hidden;
-
-                .audiobox-container {
-                    position: absolute;
-                    width: 10px;
-                    top: 2.5%;
-                    height: 0px;
-                    background: lightblue;
-                    border-radius: 5px;
-                    // box-shadow: black 2px 2px 1px;
-                    opacity: 0.3;
-                    z-index: 500;
-                    border-style: solid;
-                    border-color: darkblue;
-                    border-width: 1px;
-                }
-
-                .audiobox-current {
-                    width: 1px;
-                    height: 100%;
-                    background-color: red;
-                    position: absolute;
-                    top: 0px;
-                }
-
-                .waveform {
-                    position: relative;
-                    width: 100%;
-                    height: 100%;
-                    overflow: hidden;
-                    z-index: -1000;
-                    bottom: 0;
-                    pointer-events: none;
-                    div {
-                        height: 100% !important;
-                        width: 100%  !important;
-                    }
-                    canvas { 
-                        height: 100% !important;
-                        width: 100%  !important;
-                    }
-                }
-
-                .audiobox-linker,
-                .audiobox-linker-mini {
-                    position: absolute;
-                    width: 15px;
-                    min-height: 10px;
-                    height: 15px;
-                    margin-left: -2.55px;
-                    background: gray;
-                    border-radius: 100%;
-                    opacity: 0.9;
-                    box-shadow: black 2px 2px 1px;
-
-                    .linkAnchorBox-cont {
-                        position: relative !important;
-                        height: 100% !important;
-                        width: 100% !important;
-                        left: unset !important;
-                        top: unset !important;
-                    }
-                }
-
-                .audiobox-linker-mini {
-                    width: 8px;
-                    min-height: 8px;
-                    height: 8px;
-                    box-shadow: black 1px 1px 1px;
-                    margin-left: -1;
-                    margin-top: -2;
-
-                    .linkAnchorBox-cont {
-                        position: relative !important;
-                        height: 100% !important;
-                        width: 100% !important;
-                        left: unset !important;
-                        top: unset !important;
-                    }
-                }
-
-                .audiobox-linker:hover,
-                .audiobox-linker-mini:hover {
-                    opacity: 1;
-                }
-
-                .audiobox-marker-container,
-                .audiobox-marker-minicontainer {
-                    position: absolute;
-                    width: 10px;
-                    height: 10px;
-                    top: 2.5%;
-                    background: gray;
-                    border-radius: 50%;
-                    box-shadow: black 2px 2px 1px;
-                    overflow: visible;
-                    cursor: pointer;
-
-                    .audiobox-marker {
-                        position: relative;
-                        height: 100%;
-                        // height: calc(100% - 15px);
-                        width: 100%;
-                        //margin-top: 15px;
-                    }
-
-                    .audio-marker:hover {
-                        border: orange 2px solid;
-                    }
-                }
-
-                .audiobox-marker-timeline,
-                .audiobox-marker-minicontainer {
-                    position: absolute;
-                    width: 10px;
-                    height: 90%;
-                    top: 2.5%;
-                    border-radius: 5px;
-
-                    .left-resizer {
-                        background: dimgrey;     
-                    }
-                    .resizer {
-                        background: dimgrey;
-                    }
-
-                    .audiobox-marker {
-                        position: relative;
-                        height: calc(100% - 15px);
-                        margin-top: 15px;
-                    }
-
-                    .audio-marker:hover {
-                        border: orange 2px solid;
-                    }
-
-                    .resizer {
-                        position: absolute;
-                        top: 0;
-                        right: 0;
-                        pointer-events: all;
-                        cursor: ew-resize;
-                        height: 100%;
-                        width: 10px;
-                        z-index: 100;
-                    }
-
-                    .click {
-                        position: relative;
-                        height: 100%;
-                        width: 100%;
-                        z-index: 100;
-                    }
-
-                    .left-resizer {
-                        position: absolute;
-                        left: 0;
-                        top : 0;
-                        pointer-events: all;
-                        cursor: ew-resize;
-                        height: 100%;
-                        width: 10px;
-                        z-index: 100;
-                    }
-                }
-
-                .audiobox-marker-timeline:hover,
-                .audiobox-marker-minicontainer:hover {
-                    opacity: 0.8;
-                }
-
-                .audiobox-marker-minicontainer {
-                    width: 5px;
-                    border-radius: 1px;
-
-                    .audiobox-marker {
-                        position: relative;
-                        height: calc(100% - 8px);
-                        margin-top: 8px;
-                    }
-                }
-            }
+        .collectionStackedTimeline-resizer {
+            right: 0;
+        }
+        .collectionStackedTimeline-left-resizer {
+            left: 0;
         }
-    }
-}
-
-@media only screen and (max-device-width: 480px) {
-    .audiobox-dictation {
-        font-size: 5em;
-        display: flex;
-        width: 100;
-        justify-content: center;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    .audiobox-container .audiobox-record,
-    .audiobox-container-interactive .audiobox-record {
-        font-size: 3em;
-    }
-
-    .audiobox-container .audiobox-controls .audiobox-player .audiobox-playhead,
-    .audiobox-container .audiobox-controls .audiobox-player .audiobox-dictation,
-    .audiobox-container-interactive .audiobox-controls .audiobox-player .audiobox-playhead {
-        width: 70px;
     }
 }
\ No newline at end of file