fixed dragging of audioBox not to trigger clicking of buttons

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}