change css

2 files changed, 95 insertions, 29 deletions

diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index 0ea4b37cb..9065966d7 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -90,6 +90,16 @@
         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;
@@ -108,11 +118,15 @@
                 height: 25px;
                 padding: 2px;
                 border-radius: 50%;
-                background-color: dimgrey;
+                background-color: black;
+                color: white;
             }
 
             .audiobox-playhead:hover {
-                background-color: white;
+                // background-color:  black;
+                // border-radius: 5px;
+                background-color: grey;
+                color: lightgrey;
             }
 
             .audiobox-dictation {
@@ -285,16 +299,16 @@
 
             .current-time {
                 position: absolute;
-                font-size: 12;
-                top: calc(100% - 10px);
+                font-size: 8;
+                top: calc(100% - 8px);
                 left: 30px;
                 color: white;
             }
 
             .total-time {
                 position: absolute;
-                top: calc(100% - 10px);
-                font-size: 12;
+                top: calc(100% - 8px);
+                font-size: 8;
                 right: 2px;
                 color: white;
             }
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 7c90547ef..0f142261d 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -74,7 +74,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
     _amount: number = 1;
     _markers: Array<any> = [];
     _first: boolean = false;
-    _buckets: Array<number> = new Array();
+    _buckets: Array<number> = new Array<number>();
     _count: Array<any> = [];
 
     private _isPointerDown = false;
@@ -133,24 +133,45 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
         this._reactionDisposer = reaction(() => SelectionManager.SelectedDocuments(),
             selected => {
                 const sel = selected.length ? selected[0].props.Document : undefined;
-                // if (sel) {
-                //     DocListCast(sel.links).map((l, i) => {
-                //         let la1 = l.anchor1 as Doc;
-                //         let la2 = l.anchor2 as Doc;
-                //         let linkTime = NumCast(l.anchor2_timecode);
-                //         if (Doc.AreProtosEqual(la1, this.dataDoc)) {
-                //             la1 = l.anchor2 as Doc;
-                //             la2 = l.anchor1 as Doc;
-                //             linkTime = NumCast(l.anchor1_timecode);
-                //         }
-                //         console.log(linkTime);
-                //         if (linkTime) {
-                //             this.layoutDoc.playOnSelect && this.recordingStart && sel && sel.creationDate && !Doc.AreProtosEqual(sel, this.props.Document) && this.playFrom(linkTime);
-                //         }
-                //     });
-                // }
-                this.layoutDoc.playOnSelect && this.recordingStart && sel && sel.creationDate && !Doc.AreProtosEqual(sel, this.props.Document) && this.playFromTime(DateCast(sel.creationDate).date.getTime());
-                this.layoutDoc.playOnSelect && this.recordingStart && !sel && this.pause();
+                let link;
+                if (sel) {
+                    DocListCast(sel.links).map((l, i) => {
+                        let la1 = l.anchor1 as Doc;
+                        let la2 = l.anchor2 as Doc;
+                        let linkTime = NumCast(l.anchor2_timecode);
+                        let endTime;
+                        if (Doc.AreProtosEqual(la1, this.dataDoc)) {
+                            la1 = l.anchor2 as Doc;
+                            la2 = l.anchor1 as Doc;
+                            linkTime = NumCast(l.anchor1_timecode);
+                        }
+                        if (la2.audioStart) {
+                            linkTime = NumCast(la2.audioStart);
+                        }
+
+                        if (la1.audioStart) {
+                            linkTime = NumCast(la1.audioStart);
+                        }
+
+                        if (la1.audioEnd) {
+                            endTime = NumCast(la1.audioEnd);
+                        }
+
+                        if (la2.audioEnd) {
+                            endTime = NumCast(la2.audioEnd);
+                        }
+
+                        console.log(linkTime);
+                        if (linkTime) {
+                            link = true;
+                            this.layoutDoc.playOnSelect && this.recordingStart && sel && !Doc.AreProtosEqual(sel, this.props.Document) && endTime ? this.playFrom(linkTime, endTime) : this.playFrom(linkTime);
+                        }
+                    });
+                }
+                if (!link) {
+                    this.layoutDoc.playOnSelect && this.recordingStart && sel && sel.creationDate && !Doc.AreProtosEqual(sel, this.props.Document) && this.playFromTime(DateCast(sel.creationDate).date.getTime());
+                    this.layoutDoc.playOnSelect && this.recordingStart && !sel && this.pause();
+                }
             });
         this._scrubbingDisposer = reaction(() => AudioBox._scrubTime, (time) => this.layoutDoc.playOnSelect && this.playFromTime(AudioBox._scrubTime));
     }
@@ -303,6 +324,38 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
         return path === nullAudio ? "" : path;
     }
 
+    // @action
+    // buckets = () => {
+    //     let audioCtx = new (window.AudioContext)();
+    //     const buckets: number[] = [];
+
+    //     axios({ url: this.path, responseType: "arraybuffer" })
+    //         .then(response => runInAction(() => {
+    //             let audioData = response.data;
+
+    //             audioCtx.decodeAudioData(audioData, buffer => {
+    //                 let decodedAudioData = buffer.getChannelData(0);
+    //                 const NUMBER_OF_BUCKETS = 100;
+    //                 let bucketDataSize = Math.floor(decodedAudioData.length / NUMBER_OF_BUCKETS);
+
+    //                 for (let i = 0; i < NUMBER_OF_BUCKETS; i++) {
+    //                     let startingPoint = i * bucketDataSize;
+    //                     let endingPoint = i * bucketDataSize + bucketDataSize;
+    //                     let max = 0;
+    //                     for (let j = startingPoint; j < endingPoint; j++) {
+    //                         if (decodedAudioData[j] > max) {
+    //                             max = decodedAudioData[j];
+    //                         }
+    //                     }
+    //                     let size = Math.abs(max);
+    //                     buckets.push(size / 2);
+    //                 }
+
+    //             });
+    //             return buckets
+    //         }));
+    // }
+
     @action
     buckets = async () => {
         let audioCtx = new (window.AudioContext)();
@@ -555,7 +608,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
         if (this._first) {
             this._first = false;
             this.markers();
-            console.log(this._count);
         }
 
 
@@ -672,10 +724,9 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
                             </button>}
                 </div> :
                 <div className="audiobox-controls" onClick={this.layoutDoc.playOnSelect ? this.onPlay : undefined}>
-                    <div className="background">
-                    </div>
+                    <div className="audiobox-dictation"></div>
                     <div className="audiobox-player" >
-                        <div className="audiobox-playhead" title={this.audioState === "paused" ? "play" : "pause"} onClick={this.onPlay}> <FontAwesomeIcon style={{ width: "100%", position: "absolute", left: "0px", top: "5px" }} icon={this.audioState === "paused" ? "play" : "pause"} size={"1x"} /></div>
+                        <div className="audiobox-playhead" title={this.audioState === "paused" ? "play" : "pause"} onClick={this.onPlay}> <FontAwesomeIcon style={{ width: "100%", position: "absolute", left: "0px", top: "5px", borderWidth: "thin", borderColor: "white" }} icon={this.audioState === "paused" ? "play" : "pause"} size={"1x"} /></div>
                         {/* <div className="audiobox-playhead" onClick={this.onStop}><FontAwesomeIcon style={{ width: "100%", background: this.layoutDoc.playOnSelect ? "darkgrey" : "" }} icon="hand-point-left" size={this.props.PanelHeight() < 36 ? "1x" : "2x"} /></div>
                         <div className="audiobox-playhead" onClick={this.onRepeat}><FontAwesomeIcon style={{ width: "100%", background: this._repeat ? "darkgrey" : "" }} icon="redo-alt" size={this.props.PanelHeight() < 36 ? "1x" : "2x"} /></div> */}
                         <div className="audiobox-timeline" id="timeline" onClick={e => { e.stopPropagation(); e.preventDefault(); }} onDoubleClick={e => this.change}
@@ -711,6 +762,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
                                     pos={this.layoutDoc.currentTimecode}
                                     duration={this.dataDoc.duration}
                                     peaks={this._buckets.length === 100 ? this._buckets : undefined}
+
                                     progressColor={"#0000ff"} />
                             </div>
                             {DocListCast(this.dataDoc[this.annotationKey]).map((m, i) => {