removing decorations on recording box

1 files changed, 12 insertions, 8 deletions

diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 87716e9cc..5826abd65 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -9,6 +9,7 @@ import { Networking } from '../../../Network';
 import { Upload } from '../../../../server/SharedMediaTypes';
 
 import { RecordingApi } from '../../../util/RecordingApi';
+import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../../../Utils';
 
 interface MediaSegment {
       videoChunks: any[],
@@ -193,12 +194,15 @@ export function RecordingView(props: IRecordingViewProps) {
             }
       }
 
-      const startOrResume = () => {
-            if (!videoRecorder.current || videoRecorder.current.state === "inactive") {
-                  record();
-            } else if (videoRecorder.current.state === "paused") {
-                  videoRecorder.current.resume();
-            }
+      const startOrResume = (e: React.PointerEvent) => {
+            // the code to start or resume does not get triggered if we start dragging the button
+            setupMoveUpEvents({}, e, returnFalse, returnFalse, () => {
+                  if (!videoRecorder.current || videoRecorder.current.state === "inactive") {
+                        record();
+                  } else if (videoRecorder.current.state === "paused") {
+                        videoRecorder.current.resume();
+                  }
+            })
       }
 
       const clearPrevious = () => {
@@ -240,8 +244,8 @@ export function RecordingView(props: IRecordingViewProps) {
                               <div className="controls-inner-container">
                                     <div className="record-button-wrapper">
                                           {recording ?
-                                                <button className="stop-button" onClick={pause} /> :
-                                                <button className="record-button" onClick={startOrResume} />
+                                                <button className="stop-button" onPointerDown={pause} /> :
+                                                <button className="record-button" onPointerDown={startOrResume} />
                                           }
                                     </div>