Merge pull request #506 from browngraphicslab/new_audio

New audio

1 files changed, 149 insertions, 5 deletions

diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index e9420a072..306062ced 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -46,6 +46,40 @@
         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 {
@@ -54,6 +88,17 @@
         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;
@@ -64,16 +109,32 @@
             padding-right: 5px;
             display: flex;
 
-            .audiobox-playhead,
-            .audiobox-dictation {
+            .audiobox-playhead {
                 position: relative;
                 margin-top: auto;
                 margin-bottom: auto;
-                width: 25px;
+                margin-right: 2px;
+                width: 30px;
+                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;
@@ -81,17 +142,29 @@
 
             .audiobox-timeline {
                 position: relative;
-                height: 100%;
+                height: 80%;
                 width: 100%;
                 background: white;
                 border: gray solid 1px;
                 border-radius: 3px;
+                z-index: 1000;
+                overflow: hidden;
 
                 .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: -30%;
                 }
 
                 .audiobox-linker,
@@ -104,7 +177,6 @@
                     background: gray;
                     border-radius: 100%;
                     opacity: 0.9;
-                    background-color: transparent;
                     box-shadow: black 2px 2px 1px;
 
                     .linkAnchorBox-cont {
@@ -142,11 +214,37 @@
                 .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-container1,
+                .audiobox-marker-minicontainer {
+                    position: absolute;
+                    width: 10px;
                     height: 90%;
                     top: 2.5%;
                     background: gray;
                     border-radius: 5px;
                     box-shadow: black 2px 2px 1px;
+                    opacity: 0.3;
 
                     .audiobox-marker {
                         position: relative;
@@ -157,6 +255,36 @@
                     .audio-marker:hover {
                         border: orange 2px solid;
                     }
+
+                    .resizer {
+                        position: absolute;
+                        right: 0;
+                        cursor: ew-resize;
+                        height: 100%;
+                        width: 2px;
+                        z-index: 100;
+                    }
+
+                    .click {
+                        position: relative;
+                        height: 100%;
+                        width: 100%;
+                        z-index: 100;
+                    }
+
+                    .left-resizer {
+                        position: absolute;
+                        left: 0;
+                        cursor: ew-resize;
+                        height: 100%;
+                        width: 2px;
+                        z-index: 100;
+                    }
+                }
+
+                .audiobox-marker-container1:hover,
+                .audiobox-marker-minicontainer:hover {
+                    opacity: 0.8;
                 }
 
                 .audiobox-marker-minicontainer {
@@ -170,6 +298,22 @@
                     }
                 }
             }
+
+            .current-time {
+                position: absolute;
+                font-size: 8;
+                top: calc(100% - 8px);
+                left: 30px;
+                color: white;
+            }
+
+            .total-time {
+                position: absolute;
+                top: calc(100% - 8px);
+                font-size: 8;
+                right: 2px;
+                color: white;
+            }
         }
     }
 }