diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/nodes/AudioBox.scss | 4 | ||||
| -rw-r--r-- | src/client/views/nodes/AudioBox.tsx | 90 | ||||
| -rw-r--r-- | src/typings/index.d.ts | 4 |
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' { |