diff options
Diffstat (limited to 'src/client/views/nodes/AudioBox.tsx')
| -rw-r--r-- | src/client/views/nodes/AudioBox.tsx | 199 |
1 files changed, 98 insertions, 101 deletions
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index a3f03fc4b..f5a7e61aa 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -163,7 +163,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent< : undefined) ) || this.rootDoc ); - }; + } componentWillUnmount() { Object.values(this._disposers).forEach((disposer) => disposer?.()); @@ -240,7 +240,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent< this.layoutDoc._currentTimecode = htmlEle.currentTime; } - }; + } // pause play back Pause = action(() => { @@ -252,7 +252,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent< playFromTime = (absoluteTime: number) => { this.recordingStart && this.playFrom((absoluteTime - this.recordingStart) / 1000); - }; + } // play back the audio from time @action @@ -277,7 +277,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent< this._play = setTimeout( () => { this._ended = fullPlay ? true : this._ended; - this.Pause() + this.Pause(); }, (end - start) * 1000 ); // use setTimeout to play a specific duration @@ -286,7 +286,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent< this.Pause(); } } - }; + } // update the recording time updateRecordTime = () => { @@ -299,7 +299,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent< (new Date().getTime() - this._recordStart - this.pauseTime) / 1000; } } - }; + } // starts recording recordAudioAnnotation = async () => { @@ -320,7 +320,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent< setTimeout(this.updateRecordTime, 0); this._recorder.start(); setTimeout(() => this._recorder && this.stopRecording(), 60 * 60 * 1000); // stop after an hour - }; + } // context menu specificContextMenu = (e: React.MouseEvent): void => { @@ -336,8 +336,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent< (this.layoutDoc.dontAutoPlayFollowedLinks ? "" : "Don't") + " play when link is selected", event: () => - (this.layoutDoc.dontAutoPlayFollowedLinks = - !this.layoutDoc.dontAutoPlayFollowedLinks), + (this.layoutDoc.dontAutoPlayFollowedLinks = + !this.layoutDoc.dontAutoPlayFollowedLinks), icon: "expand-arrows-alt", }); funcs.push({ @@ -353,7 +353,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent< subitems: funcs, icon: "asterisk", }); - }; + } // stops the recording stopRecording = action(() => { @@ -376,12 +376,12 @@ export class AudioBox extends ViewBoxAnnotatableComponent< this._recorder ? this.stopRecording() : this.recordAudioAnnotation(); e.stopPropagation(); } - }; + } // for play button Play = (e?: any) => { let start; - if (this._ended || this._ele!.currentTime == this.duration) { + if (this._ended || this._ele!.currentTime === this.duration) { start = this._trimStart; this._ended = false; } @@ -391,7 +391,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent< this.playFrom(start, this._trimEnd, true); e?.stopPropagation?.(); - }; + } // creates a text document for dictation onFile = (e: any) => { @@ -413,14 +413,14 @@ export class AudioBox extends ViewBoxAnnotatableComponent< ); this.props.addDocument?.(newDoc); e.stopPropagation(); - }; + } // ref for updating time setRef = (e: HTMLAudioElement | null) => { e?.addEventListener("timeupdate", this.timecodeChanged); e?.addEventListener("ended", this.Pause); this._ele = e; - }; + } // returns the path of the audio file @computed get path() { @@ -431,16 +431,10 @@ export class AudioBox extends ViewBoxAnnotatableComponent< // returns the html audio element @computed get audio() { - return ( - <audio - ref={this.setRef} - className={`audiobox-control${this.isContentActive() ? "-interactive" : "" - }`} - > - <source src={this.path} type="audio/mpeg" /> - Not supported. - </audio> - ); + return <audio ref={this.setRef} className={`audiobox-control${this.props.isContentActive() ? "-interactive" : ""}`}> + <source src={this.path} type="audio/mpeg" /> + Not supported. + </audio>; } // pause the time during recording phase @@ -450,7 +444,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent< this._paused = true; this._recorder.pause(); e.stopPropagation(); - }; + } // continue the recording @action @@ -459,17 +453,18 @@ export class AudioBox extends ViewBoxAnnotatableComponent< this._paused = false; this._recorder.resume(); e.stopPropagation(); - }; + } playing = () => this.mediaState === "playing"; playLink = (link: Doc) => { const stack = this._stackedTimeline.current; if (link.annotationOn === this.rootDoc) { - if (!this.layoutDoc.dontAutoPlayFollowedLinks) + if (!this.layoutDoc.dontAutoPlayFollowedLinks) { this.playFrom(stack?.anchorStart(link) || 0, stack?.anchorEnd(link)); - else + } else { this._ele!.currentTime = this.layoutDoc._currentTimecode = stack?.anchorStart(link) || 0; + } } else { this.links .filter((l) => l.anchor1 === link || l.anchor2 === link) @@ -478,17 +473,18 @@ export class AudioBox extends ViewBoxAnnotatableComponent< const startTime = stack?.anchorStart(la1) || stack?.anchorStart(la2); const endTime = stack?.anchorEnd(la1) || stack?.anchorEnd(la2); if (startTime !== undefined) { - if (!this.layoutDoc.dontAutoPlayFollowedLinks) + if (!this.layoutDoc.dontAutoPlayFollowedLinks) { endTime ? this.playFrom(startTime, endTime) : this.playFrom(startTime); - else + } else { this._ele!.currentTime = this.layoutDoc._currentTimecode = startTime; + } } }); } - }; + } // shows trim controls @action @@ -500,7 +496,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent< this.Pause(); } this._trimming = true; - }; + } // hides trim controls and displays new clip @action @@ -512,7 +508,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent< this.layoutDoc.clipEnd = this._trimEnd; this._trimming = false; this.setAnchorTime(Math.max(Math.min(this._trimEnd, this._ele!.currentTime), this._trimStart)); - }; + } @action setStartTrim = (newStart: number) => { @@ -528,14 +524,14 @@ export class AudioBox extends ViewBoxAnnotatableComponent< timelineWhenChildContentsActiveChanged = (isActive: boolean) => this.props.whenChildContentsActiveChanged( runInAction(() => (this._isAnyChildContentActive = isActive)) - ); + ) timelineScreenToLocal = () => this.props .ScreenToLocalTransform() .translate( -AudioBox.playheadWidth, (-(100 - this.heightPercent) / 200) * this.props.PanelHeight() - ); + ) setAnchorTime = (time: number) => { (this._ele!.currentTime = this.layoutDoc._currentTimecode = time); } @@ -543,7 +539,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent< timelineHeight = () => (((this.props.PanelHeight() * this.heightPercent) / 100) * this.heightPercent) / - 100; // panelHeight * heightPercent is player height. * heightPercent is timeline height (as per css inline) + 100 // panelHeight * heightPercent is player height. * heightPercent is timeline height (as per css inline) timelineWidth = () => this.props.PanelWidth() - AudioBox.playheadWidth; @computed get renderTimeline() { return ( @@ -570,7 +566,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent< ScreenToLocalTransform={this.timelineScreenToLocal} Play={this.Play} Pause={this.Pause} - isContentActive={this.isContentActive} + isContentActive={this.props.isContentActive} + isAnyChildContentActive={this.isAnyChildContentActive} playLink={this.playLink} PanelWidth={this.timelineWidth} PanelHeight={this.timelineHeight} @@ -586,7 +583,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent< render() { const interactive = - SnappingManager.GetIsDragging() || this.isContentActive() + SnappingManager.GetIsDragging() || this.props.isContentActive() ? "-interactive" : ""; return ( @@ -641,76 +638,76 @@ export class AudioBox extends ViewBoxAnnotatableComponent< </div> </div> ) : ( - <button - className={`audiobox-record${interactive}`} - style={{ backgroundColor: Colors.DARK_GRAY }} - > - RECORD - </button> - )} + <button + className={`audiobox-record${interactive}`} + style={{ backgroundColor: Colors.DARK_GRAY }} + > + RECORD + </button> + )} </div> ) : ( - <div - className="audiobox-controls" - style={{ - pointerEvents: - this._isAnyChildContentActive || this.isContentActive() - ? "all" - : "none", - }} - > - <div className="audiobox-dictation" /> <div - className="audiobox-player" - style={{ height: `${AudioBox.heightPercent}%` }} + className="audiobox-controls" + style={{ + pointerEvents: + this._isAnyChildContentActive || this.props.isContentActive() + ? "all" + : "none", + }} > + <div className="audiobox-dictation" /> <div - className="audiobox-buttons" - title={this.mediaState === "paused" ? "play" : "pause"} - onClick={this.mediaState === "paused" ? this.Play : this.Pause} + className="audiobox-player" + style={{ height: `${AudioBox.heightPercent}%` }} > - {" "} - <FontAwesomeIcon - icon={this.mediaState === "paused" ? "play" : "pause"} - size={"1x"} - /> - </div> - <div - className="audiobox-buttons" - title={this._trimming ? "finish" : "trim"} - onClick={this._trimming ? this.finishTrim : this.startTrim} - > - <FontAwesomeIcon - icon={this._trimming ? "check" : "cut"} - size={"1x"} - /> - </div> - <div - className="audiobox-timeline" - style={{ - top: 0, - height: `100%`, - left: AudioBox.playheadWidth, - width: `calc(100% - ${AudioBox.playheadWidth}px)`, - background: "white", - }} - > - {this.renderTimeline} - </div> - {this.audio} - <div className="audioBox-current-time"> - {this._trimming ? - formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode))) - : formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode) - NumCast(this._trimStart)))} - </div> - <div className="audioBox-total-time"> - {this._trimming || !this._trimEnd ? - formatTime(Math.round(NumCast(this.duration))) - : formatTime(Math.round(NumCast(this.trimDuration)))} + <div + className="audiobox-buttons" + title={this.mediaState === "paused" ? "play" : "pause"} + onClick={this.mediaState === "paused" ? this.Play : this.Pause} + > + {" "} + <FontAwesomeIcon + icon={this.mediaState === "paused" ? "play" : "pause"} + size={"1x"} + /> + </div> + <div + className="audiobox-buttons" + title={this._trimming ? "finish" : "trim"} + onClick={this._trimming ? this.finishTrim : this.startTrim} + > + <FontAwesomeIcon + icon={this._trimming ? "check" : "cut"} + size={"1x"} + /> + </div> + <div + className="audiobox-timeline" + style={{ + top: 0, + height: `100%`, + left: AudioBox.playheadWidth, + width: `calc(100% - ${AudioBox.playheadWidth}px)`, + background: "white", + }} + > + {this.renderTimeline} + </div> + {this.audio} + <div className="audioBox-current-time"> + {this._trimming ? + formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode))) + : formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode) - NumCast(this._trimStart)))} + </div> + <div className="audioBox-total-time"> + {this._trimming || !this._trimEnd ? + formatTime(Math.round(NumCast(this.duration))) + : formatTime(Math.round(NumCast(this.trimDuration)))} + </div> </div> </div> - </div> - )} + )} </div> ); } |