made StackedTimeline a collectionview and renamed CollectionStackedTimeline. Now timeline anchors will observe filters.

1 files changed, 373 insertions, 0 deletions

diff --git a/src/client/views/collections/CollectionStackedTimeline.scss b/src/client/views/collections/CollectionStackedTimeline.scss
new file mode 100644
index 000000000..1bb5bc720
--- /dev/null
+++ b/src/client/views/collections/CollectionStackedTimeline.scss
@@ -0,0 +1,373 @@
+.audiobox-container,
+.audiobox-container-interactive {
+    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%;
+        height: 100%;
+        position: relative;
+        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;
+        }
+    }
+
+    .audiobox-controls {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        display: flex;
+        padding-left: 2px;
+        background: black;
+
+        .audiobox-dictation {
+            position: absolute;
+            width: 30px;
+            height: 100%;
+            align-items: center;
+            display: inherit;
+            background: dimgray;
+            left: 0px;
+        }
+
+        .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;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@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