diff options
| -rw-r--r-- | src/client/views/nodes/AudioBox.tsx | 84 |
1 files changed, 42 insertions, 42 deletions
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 787ad939d..70d730ad1 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -296,11 +296,10 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp // button for starting and stopping the recording - Record = (e: React.MouseEvent) => { - if (e.button === 0 && !e.ctrlKey) { + Record = (e: React.PointerEvent) => { + e.button === 0 && !e.ctrlKey && setupMoveUpEvents(this, e, returnFalse, returnFalse, action(() => { this._recorder ? this.stopRecording() : this.recordAudioAnnotation(); - e.stopPropagation(); - } + }), false); } // for play button @@ -338,27 +337,28 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp // for dictation button, creates a text document for dictation onFile = (e: any) => { - const newDoc = CurrentUserUtils.GetNewTextDoc( - "", - NumCast(this.rootDoc.x), - NumCast(this.rootDoc.y) + - NumCast(this.layoutDoc._height) + - 10, - NumCast(this.layoutDoc._width), - 2 * NumCast(this.layoutDoc._height) - ); - Doc.GetProto(newDoc).recordingSource = this.dataDoc; - Doc.GetProto(newDoc).recordingStart = ComputedField.MakeFunction(`self.recordingSource["${this.fieldKey}-recordingStart"]`); - Doc.GetProto(newDoc).mediaState = ComputedField.MakeFunction("self.recordingSource.mediaState"); - const overlayDoc = Doc.UserDoc().myOverlayDocs as Doc; - if (DocListCast(overlayDoc[Doc.LayoutFieldKey(overlayDoc)]).includes(this.rootDoc)) { - newDoc.x = this.rootDoc.x; - newDoc.y = NumCast(this.rootDoc.y) + NumCast(this.rootDoc._height); - Doc.AddDocToList(overlayDoc, undefined, newDoc); - } else { - this.props.addDocument?.(newDoc); - } - e.stopPropagation(); + setupMoveUpEvents(this, e, returnFalse, returnFalse, action(() => { + const newDoc = CurrentUserUtils.GetNewTextDoc( + "", + NumCast(this.rootDoc.x), + NumCast(this.rootDoc.y) + + NumCast(this.layoutDoc._height) + + 10, + NumCast(this.layoutDoc._width), + 2 * NumCast(this.layoutDoc._height) + ); + Doc.GetProto(newDoc).recordingSource = this.dataDoc; + Doc.GetProto(newDoc).recordingStart = ComputedField.MakeFunction(`self.recordingSource["${this.fieldKey}-recordingStart"]`); + Doc.GetProto(newDoc).mediaState = ComputedField.MakeFunction("self.recordingSource.mediaState"); + const overlayDoc = Doc.UserDoc().myOverlayDocs as Doc; + if (DocListCast(overlayDoc[Doc.LayoutFieldKey(overlayDoc)]).includes(this.rootDoc)) { + newDoc.x = this.rootDoc.x; + newDoc.y = NumCast(this.rootDoc.y) + NumCast(this.rootDoc._height); + Doc.AddDocToList(overlayDoc, undefined, newDoc); + } else { + this.props.addDocument?.(newDoc); + } + }), false); } @@ -371,21 +371,21 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp // pause the time during recording phase - @action - recordPause = (e: React.MouseEvent) => { - this._pauseStart = new Date().getTime(); - this._paused = true; - this._recorder.pause(); - e.stopPropagation(); + recordPause = (e: React.PointerEvent) => { + setupMoveUpEvents(this, e, returnFalse, returnFalse, action(() => { + this._pauseStart = new Date().getTime(); + this._paused = true; + this._recorder.pause(); + }), false); } // continue the recording - @action - recordPlay = (e: React.MouseEvent) => { - this._pauseEnd = new Date().getTime(); - this._paused = false; - this._recorder.resume(); - e.stopPropagation(); + recordPlay = (e: React.PointerEvent) => { + setupMoveUpEvents(this, e, returnFalse, returnFalse, action(() => { + this._pauseEnd = new Date().getTime(); + this._paused = false; + this._recorder.resume(); + }), false); } @@ -504,19 +504,19 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp // UI for recording, initially displayed when new audio created in Dash @computed get recordingControls() { return <div className="audiobox-recorder"> - <div className="audiobox-dictation" onClick={this.onFile}> + <div className="audiobox-dictation" onPointerDown={this.onFile}> <FontAwesomeIcon size="2x" icon="file-alt" /> </div> {[media_state.Recording, media_state.Playing].includes(this.mediaState) ? <div className="recording-controls" onClick={e => e.stopPropagation()}> - <div className="record-button" onClick={this.Record}> + <div className="record-button" onPointerDown={this.Record}> <FontAwesomeIcon size="2x" icon="stop" /> </div> - <div className="record-button" onClick={this._paused ? this.recordPlay : this.recordPause}> + <div className="record-button" onPointerDown={this._paused ? this.recordPlay : this.recordPause}> <FontAwesomeIcon size="2x" icon={this._paused ? "play" : "pause"} /> @@ -526,7 +526,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp </div> </div> : - <div className="audiobox-start-record"> + <div className="audiobox-start-record" onPointerDown={this.Record}> <FontAwesomeIcon icon="microphone" /> RECORD </div>} @@ -653,7 +653,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp ref={this.setupTimelineDrop} className="audiobox-container" onContextMenu={this.specificContextMenu} - onClick={!this.path && !this._recorder ? this.recordAudioAnnotation : undefined} + onPointerDown={!this.path && !this._recorder ? this.Record : undefined} style={{ pointerEvents: this.layoutDoc._lockedPosition ? "none" : undefined }} > {!this.path ? this.recordingControls : this.playbackControls} |