made waveform resizable (still have progress bar bug)

3 files changed, 91 insertions, 7 deletions

diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index 9065966d7..306062ced 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -148,6 +148,7 @@
                 border: gray solid 1px;
                 border-radius: 3px;
                 z-index: 1000;
+                overflow: hidden;
 
                 .audiobox-current {
                     width: 1px;
@@ -162,7 +163,8 @@
                     width: 100%;
                     height: 100%;
                     overflow: hidden;
-                    z-index: 0;
+                    z-index: -1000;
+                    bottom: -30%;
                 }
 
                 .audiobox-linker,
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 0f142261d..682aaaeed 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -80,6 +80,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
     private _isPointerDown = false;
     private _currMarker: any;
 
+    @observable private _height: number = NumCast(this.layoutDoc.height);
+    @observable private _finish: boolean = false;
     @observable private _dragging: boolean = false;
     @observable private _duration = 0;
     @observable private _rect: Array<any> = [];
@@ -686,14 +688,92 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
     @computed get height() {
         console.log(this.layoutDoc._height);
         if (this.layoutDoc._height) {
-            return 0.8 * this.layoutDoc._height
+            return 0.8 * NumCast(this.layoutDoc._height)
         }
     }
 
+    // waveform() {
+    //     let wavesurfer: any;
+    //     if (WaveSurfer) {
+    //         this.path ?
+    //             wavesurfer = WaveSurfer.create({
+    //                 container: 'waveform',
+    //                 waveColor: "grey",
+    //                 progressColor: "blue"
+    //             })
+    //             :
+    //             wavesurfer = (null);
+    //     } else {
+    //         console.log("hi");
+    //     }
+
+    //     if (wavesurfer) {
+    //         wavesurfer.on('ready', function () {
+    //             wavesurfer.play();
+    //         });
+
+    //         wavesurfer.load(this.path);
+    //         console.log("hi");
+    //     }
+    // }
+
+    @computed get waveform() {
+        return <Waveform
+            color={"blue"}
+            height={this._height}
+            barWidth={0.1}
+            pos={this.layoutDoc.currentTimecode}
+            duration={this.dataDoc.duration}
+            peaks={this._buckets.length === 100 ? this._buckets : undefined}
+            progressColor={"blue"} />;
+    }
+
+    @action
+    update = () => {
+        if (this.layoutDoc._height) {
+            this._height = 0.8 * NumCast(this.layoutDoc._height);
+            console.log(document.getElementById("timeline")?.clientWidth);
+            let width = document.getElementById("timeline")?.clientWidth;
+            let canvas2 = document.getElementsByTagName("canvas")[0];
+            if (canvas2) {
+                let oldWidth = canvas2.width;
+                let oldHeight = canvas2.height;
+                canvas2.style.height = `${this._height}`;
+                canvas2.style.width = `${width}`;
+
+                let ratio1 = oldWidth / window.innerWidth;
+                let ratio2 = oldHeight / window.innerHeight;
+                let context = canvas2.getContext('2d');
+                if (context) {
+                    context.scale(ratio1, ratio2)
+                }
+            }
+
+            let canvas1 = document.getElementsByTagName("canvas")[1];
+            if (canvas1) {
+                let oldWidth = canvas1.width;
+                let oldHeight = canvas1.height;
+                canvas1.style.height = `${this._height}`;
+                canvas1.style.width = `${width}`;
+
+                let ratio1 = oldWidth / window.innerWidth;
+                let ratio2 = oldHeight / window.innerHeight;
+                let context = canvas1.getContext('2d');
+                if (context) {
+                    context.scale(ratio1, ratio2)
+
+                }
+            }
+        }
+    }
+
+
     render() {
         //trace();
         const interactive = this.active() ? "-interactive" : "";
         this.reset();
+        this.update();
+        // this.waveform();
         return <div className={`audiobox-container`} onContextMenu={this.specificContextMenu} onClick={!this.path ? this.recordClick : undefined}>
             {!this.path ?
                 <div className="audiobox-buttons">
@@ -755,15 +835,17 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
                             }}>
                             <div className="waveform" id="waveform" style={{ height: `${100}%`, width: "100%", bottom: "0px" }}>
                                 {console.log(this.peaks)}
-                                <Waveform
+                                {/* <Waveform
                                     color={"#000000"}
-                                    height={this.height}
+                                    height={this._height}
                                     barWidth={0.1}
                                     pos={this.layoutDoc.currentTimecode}
                                     duration={this.dataDoc.duration}
                                     peaks={this._buckets.length === 100 ? this._buckets : undefined}
 
-                                    progressColor={"#0000ff"} />
+                                    progressColor={"#0000ff"} /> */}
+                                {this.waveform}
+                                {/* {this.waveform} */}
                             </div>
                             {DocListCast(this.dataDoc[this.annotationKey]).map((m, i) => {
                                 // let text = Docs.Create.TextDocument("hello", { title: "label", _showSidebar: false, _autoHeight: false });
diff --git a/src/typings/index.d.ts b/src/typings/index.d.ts
index ee2c25f8a..728dd51d3 100644
--- a/src/typings/index.d.ts
+++ b/src/typings/index.d.ts
@@ -6,8 +6,8 @@ declare module 'cors';
 
 declare module 'webrtc-adapter';
 declare module 'bezier-curve';
-declare module 'fit-curve'
-declare module 'react-audio-waveform'
+declare module 'fit-curve';
+declare module 'react-audio-waveform';
 
 
 declare module '@react-pdf/renderer' {