fixed bugs and added waveform (need fix)

6 files changed, 139 insertions, 3 deletions

diff --git a/package-lock.json b/package-lock.json
index 698bd60cc..31369f427 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2198,6 +2198,37 @@
             "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz",
             "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug=="
         },
+        "axios": {
+            "version": "0.19.2",
+            "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+            "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+            "requires": {
+                "follow-redirects": "1.5.10"
+            },
+            "dependencies": {
+                "debug": {
+                    "version": "3.1.0",
+                    "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+                    "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+                    "requires": {
+                        "ms": "2.0.0"
+                    }
+                },
+                "follow-redirects": {
+                    "version": "1.5.10",
+                    "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+                    "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+                    "requires": {
+                        "debug": "=3.1.0"
+                    }
+                },
+                "ms": {
+                    "version": "2.0.0",
+                    "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+                    "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+                }
+            }
+        },
         "babel-code-frame": {
             "version": "6.26.0",
             "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -14119,6 +14150,11 @@
                 "prop-types": "^15.6.2"
             }
         },
+        "react-audio-waveform": {
+            "version": "0.0.5",
+            "resolved": "https://registry.npmjs.org/react-audio-waveform/-/react-audio-waveform-0.0.5.tgz",
+            "integrity": "sha512-4dJwhl+LQRuywzmmjuhWT5GueT3Ai2ZhB+loVxg0sRdhplyDp96xAu10/V/+J25Cl7YqNtl2DWSxvSoI/i6l6w=="
+        },
         "react-autosuggest": {
             "version": "9.4.3",
             "resolved": "https://registry.npmjs.org/react-autosuggest/-/react-autosuggest-9.4.3.tgz",
diff --git a/package.json b/package.json
index 6c466825e..44304ce87 100644
--- a/package.json
+++ b/package.json
@@ -131,6 +131,7 @@
         "archiver": "^3.1.1",
         "array-batcher": "^1.2.3",
         "async": "^2.6.2",
+        "axios": "^0.19.2",
         "babel-runtime": "^6.26.0",
         "bcrypt-nodejs": "0.0.3",
         "bezier-curve": "^1.0.0",
@@ -216,6 +217,7 @@
         "raw-loader": "^1.0.0",
         "rc-switch": "^1.9.0",
         "react": "^16.12.0",
+        "react-audio-waveform": "0.0.5",
         "react-autosuggest": "^9.4.3",
         "react-color": "^2.18.1",
         "react-compound-slider": "^2.5.0",
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 122383744..88f470576 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -628,7 +628,7 @@ export namespace Docs {
         }
 
         export function AudioDocument(url: string, options: DocumentOptions = {}) {
-            const instance = InstanceFromProto(Prototypes.get(DocumentType.AUDIO), new AudioField(new URL(url)), { hideLinkButton: true, useLinkSmallAnchor: true, ...options });
+            const instance = InstanceFromProto(Prototypes.get(DocumentType.AUDIO), new AudioField(new URL(url)), { ...options }); // hideLinkButton: false, useLinkSmallAnchor: false,
             Doc.GetProto(instance).backgroundColor = ComputedField.MakeFunction("this._audioState === 'playing' ? 'green':'gray'");
             return instance;
         }
diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index 6d52988bb..35ab5da8b 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -140,6 +140,14 @@
                     height: 100%;
                     background-color: red;
                     position: absolute;
+                    top: 0px;
+                }
+
+                .waveform {
+                    position: relative;
+                    width: 100%;
+                    height: 100%;
+                    overflow: hidden;
                 }
 
                 .audiobox-linker,
@@ -259,7 +267,7 @@
 
                 .audiobox-marker-container1:hover,
                 .audiobox-marker-minicontainer:hover {
-                    opacity: 1;
+                    opacity: 0.8;
                 }
 
                 .audiobox-marker-minicontainer {
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 34f87fc10..3d1932883 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -29,7 +29,8 @@ import { LabelBox } from "./LabelBox";
 import { Transform } from "../../util/Transform";
 import { Scripting } from "../../util/Scripting";
 import { ColorBox } from "./ColorBox";
-
+import Waveform from "react-audio-waveform"
+import axios from "axios"
 
 // testing testing 
 
@@ -73,6 +74,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
     _amount: number = 1;
     _markers: Array<any> = [];
     _first: boolean = false;
+    _buckets: Array<number> = new Array();
 
     private _isPointerDown = false;
     private _currMarker: any;
@@ -80,6 +82,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
     @observable private _dragging: boolean = false;
     @observable private _duration = 0;
     @observable private _rect: Array<any> = [];
+    // @observable private _buckets: Array<number> = new Array();
 
     @observable private _paused: boolean = false;
     @observable private static _scrubTime = 0;
@@ -299,6 +302,81 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
         return path === nullAudio ? "" : path;
     }
 
+    @action
+    buckets = async () => {
+        let audioCtx = new (window.AudioContext)();
+        const buckets: number[] = [];
+
+        axios({ url: this.path, responseType: "arraybuffer" })
+            .then(async response => {
+                let audioData = response.data;
+
+                await 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);
+                        this._buckets.push(size / 2);
+                    }
+
+                });
+                return buckets;
+            });
+    }
+
+    @computed get peaks() {
+        // let audioCtx = new (window.AudioContext)();
+        // let buckets: number[] = [];
+
+        // return (async () => {
+        //     await axios({ url: this.path, responseType: "arraybuffer" })
+        //         .then(response => {
+        //             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);
+        //                     console.log(size);
+        //                     buckets.push(size / 2);
+        //                     console.log(buckets);
+        //                 }
+        //             });
+        //             console.log(buckets);
+        //             return buckets;
+        //         });
+        //     console.log(buckets.length);
+        //     return buckets;
+        // })();
+
+
+        return this.buckets();
+    }
+
     @computed get audio() {
         const interactive = this.active() ? "-interactive" : "";
         return <audio ref={this.setRef} className={`audiobox-control${interactive}`}>
@@ -595,6 +673,17 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
                                     this._hold ? this.end(this._ele!.currentTime) : this.start(this._ele!.currentTime);
                                 }
                             }}>
+                            <div className="waveform" style={{ height: `${100}%`, width: "100%", bottom: "0px" }}>
+                                {console.log(this.peaks)}
+                                <Waveform
+                                    color={"#000000"}
+                                    height={20}
+                                    barWidth={0.1}
+                                    pos={this.layoutDoc.currentTimecode}
+                                    duration={this.layoutDoc.duration}
+                                    peaks={this._buckets.length === 100 ? this._buckets : undefined}
+                                    progressColor={"#0000ff"} />
+                            </div>
                             {DocListCast(this.dataDoc[this.annotationKey]).map((m, i) => {
                                 // let text = Docs.Create.TextDocument("hello", { title: "label", _showSidebar: false, _autoHeight: false });
                                 let rect;
diff --git a/src/typings/index.d.ts b/src/typings/index.d.ts
index 452882e09..ee2c25f8a 100644
--- a/src/typings/index.d.ts
+++ b/src/typings/index.d.ts
@@ -7,6 +7,7 @@ declare module 'cors';
 declare module 'webrtc-adapter';
 declare module 'bezier-curve';
 declare module 'fit-curve'
+declare module 'react-audio-waveform'
 
 
 declare module '@react-pdf/renderer' {