1 files changed, 19 insertions, 17 deletions
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 3f12c7c9d..a110bf51a 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -6,7 +6,7 @@ import { observer } from 'mobx-react';
 import { Doc } from '../../fields/Doc';
 import { RichTextField } from '../../fields/RichTextField';
 import { Cast, NumCast } from '../../fields/Types';
-import { emptyFunction, setupMoveUpEvents, simulateMouseClick } from '../../Utils';
+import { emptyFunction, returnFalse, setupMoveUpEvents, simulateMouseClick } from '../../Utils';
 import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager';
 import { Pulls, Pushes } from '../apis/google_docs/GoogleApiClientUtils';
 import { Docs } from '../documents/Documents';
@@ -14,7 +14,7 @@ import { DragManager } from '../util/DragManager';
 import { SelectionManager } from '../util/SelectionManager';
 import { SettingsManager } from '../util/SettingsManager';
 import { SharingManager } from '../util/SharingManager';
-import { undoBatch } from '../util/UndoManager';
+import { undoBatch, UndoManager } from '../util/UndoManager';
 import { CollectionDockingView } from './collections/CollectionDockingView';
 import { TabDocView } from './collections/TabDocView';
 import './DocumentButtonBar.scss';
@@ -349,28 +349,30 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
     }
 
     @observable _isRecording = false;
+    _stopFunc: () => void = emptyFunction;
     @computed
     get recordButton() {
         const targetDoc = this.view0?.props.Document;
         return !targetDoc ? null : (
-            <Tooltip title={<div className="dash-tooltip">{'Click to record 5 second annotation'}</div>}>
+            <Tooltip title={<div className="dash-tooltip">Press to record audio annotation</div>}>
                 <div
                     className="documentButtonBar-icon"
                     style={{ backgroundColor: this._isRecording ? Colors.ERROR_RED : Colors.DARK_GRAY, color: Colors.WHITE }}
-                    onClick={undoBatch(
-                        action(e => {
-                            this._isRecording = true;
-                            this.props.views().map(
-                                view =>
-                                    view &&
-                                    DocumentViewInternal.recordAudioAnnotation(
-                                        view.dataDoc,
-                                        view.LayoutFieldKey,
-                                        action(() => (this._isRecording = false))
-                                    )
-                            );
-                        })
-                    )}>
+                    onPointerDown={action((e: React.PointerEvent) => {
+                        this._isRecording = true;
+                        this.props.views().map(
+                            view =>
+                                view &&
+                                DocumentViewInternal.recordAudioAnnotation(
+                                    view.dataDoc,
+                                    view.LayoutFieldKey,
+                                    stopFunc => (this._stopFunc = stopFunc),
+                                    action(() => (this._isRecording = false))
+                                )
+                        );
+                        const b = UndoManager.StartBatch('Recording');
+                        setupMoveUpEvents(this, e, returnFalse, () => this._stopFunc(), emptyFunction);
+                    })}>
                     <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="microphone" />
                 </div>
             </Tooltip>