fixed up audio annotation to add dictation to sidebar note.

2 files changed, 50 insertions, 26 deletions

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index ab99f3c6d..dcb2d9d51 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -4,7 +4,7 @@ import { observer } from 'mobx-react';
 import { computedFn } from 'mobx-utils';
 import { Bounce, Fade, Flip, LightSpeed, Roll, Rotate, Zoom } from 'react-reveal';
 import { Doc, DocListCast, Field, Opt, StrListCast } from '../../../fields/Doc';
-import { AclPrivate, Animation, DocData, Width } from '../../../fields/DocSymbols';
+import { AclPrivate, Animation, AudioPlay, DocData, Width } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
 import { InkTool } from '../../../fields/InkField';
 import { List } from '../../../fields/List';
@@ -52,6 +52,7 @@ import { LinkAnchorBox } from './LinkAnchorBox';
 import { PresEffect, PresEffectDirection } from './trails';
 import { PinProps, PresBox } from './trails/PresBox';
 import React = require('react');
+import { isThisTypeNode } from 'typescript';
 const { Howl } = require('howler');
 
 interface Window {
@@ -1054,7 +1055,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                         }
                     }
                 };
-                runInAction(() => (dataDoc.audioAnnoState = 'recording'));
+                //runInAction(() => (dataDoc.audioAnnoState = 'recording'));
                 recorder.start();
                 const stopFunc = () => {
                     recorder.stop();
@@ -1071,16 +1072,24 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
         const audioAnnoState = this.dataDoc.audioAnnoState ?? 'stopped';
         const audioAnnos = Cast(this.dataDoc[this.LayoutFieldKey + '_audioAnnotations'], listSpec(AudioField), null);
         const anno = audioAnnos?.lastElement();
-        if (anno instanceof AudioField && audioAnnoState === 'stopped') {
-            new Howl({
-                src: [anno.url.href],
-                format: ['mp3'],
-                autoplay: true,
-                loop: false,
-                volume: 0.5,
-                onend: action(() => (self.dataDoc.audioAnnoState = 'stopped')),
-            });
-            this.dataDoc.audioAnnoState = 'playing';
+        if (anno instanceof AudioField) {
+            switch (audioAnnoState) {
+                case 'stopped':
+                    this.dataDoc[AudioPlay] = new Howl({
+                        src: [anno.url.href],
+                        format: ['mp3'],
+                        autoplay: true,
+                        loop: false,
+                        volume: 0.5,
+                        onend: action(() => (self.dataDoc.audioAnnoState = 'stopped')),
+                    });
+                    this.dataDoc.audioAnnoState = 'playing';
+                    break;
+                case 'playing':
+                    this.dataDoc[AudioPlay]?.stop();
+                    this.dataDoc.audioAnnoState = 'stopped';
+                    break;
+            }
         }
     };
 
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index c9481482f..58b824159 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -153,10 +153,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
     @computed get layout_autoHeightMargins() {
         return this.titleHeight + NumCast(this.layoutDoc._layout_autoHeightMargins);
     }
-    @computed get _recording() {
+    @computed get _recordingDictation() {
         return this.dataDoc?.mediaState === 'recording';
     }
-    set _recording(value) {
+    set _recordingDictation(value) {
         !this.dataDoc[`${this.fieldKey}_recordingSource`] && (this.dataDoc.mediaState = value ? 'recording' : undefined);
     }
     @computed get config() {
@@ -265,11 +265,25 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         AnchorMenu.Instance.OnAudio = (e: PointerEvent) => {
             !this.layoutDoc.layout_showSidebar && this.toggleSidebar();
             const anchor = this.makeLinkAnchor(undefined, OpenWhere.addRight, undefined, 'Anchored Selection', true, true);
+
             setTimeout(() => {
                 const target = this._sidebarRef.current?.anchorMenuClick(anchor);
                 if (target) {
                     anchor.followLinkAudio = true;
-                    DocumentViewInternal.recordAudioAnnotation(Doc.GetProto(target), Doc.LayoutFieldKey(target));
+                    let stopFunc: any;
+                    Doc.GetProto(target).mediaState = 'recording';
+                    Doc.GetProto(target).audioAnnoState = 'recording';
+                    DocumentViewInternal.recordAudioAnnotation(Doc.GetProto(target), Doc.LayoutFieldKey(target), stop => (stopFunc = stop));
+                    let reactionDisposer = reaction(
+                        () => target.mediaState,
+                        action(dictation => {
+                            if (!dictation) {
+                                Doc.GetProto(target).audioAnnoState = 'stopped';
+                                stopFunc();
+                                reactionDisposer();
+                            }
+                        })
+                    );
                     target.title = ComputedField.MakeFunction(`self["text_audioAnnotations_text"].lastElement()`);
                 }
             });
@@ -948,14 +962,14 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
     };
 
     breakupDictation = () => {
-        if (this._editorView && this._recording) {
+        if (this._editorView && this._recordingDictation) {
             this.stopDictation(true);
             this._break = true;
             const state = this._editorView.state;
             const to = state.selection.to;
             const updated = TextSelection.create(state.doc, to, to);
             this._editorView.dispatch(state.tr.setSelection(updated).insertText('\n', to));
-            if (this._recording) {
+            if (this._recordingDictation) {
                 this.recordDictation();
             }
         }
@@ -1245,13 +1259,14 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
 
         if (!this.props.dontRegisterView) {
             this._disposers.record = reaction(
-                () => this._recording,
+                () => this._recordingDictation,
                 () => {
                     this.stopDictation(true);
-                    this._recording && this.recordDictation();
-                }
+                    this._recordingDictation && this.recordDictation();
+                },
+                { fireImmediately: true }
             );
-            if (this._recording) setTimeout(this.recordDictation);
+            if (this._recordingDictation) setTimeout(this.recordDictation);
         }
         var quickScroll: string | undefined = '';
         this._disposers.scroll = reaction(
@@ -1549,8 +1564,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
 
     @action
     componentWillUnmount() {
-        if (this._recording) {
-            this._recording = !this._recording;
+        if (this._recordingDictation) {
+            this._recordingDictation = !this._recordingDictation;
         }
         Object.values(this._disposers).forEach(disposer => disposer?.());
         this.endUndoTypingBatch();
@@ -1588,7 +1603,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                 }
             });
         }
-        if (this._recording && !e.ctrlKey && e.button === 0) {
+        if (this._recordingDictation && !e.ctrlKey && e.button === 0) {
             this.breakupDictation();
         }
         this._downX = e.clientX;
@@ -1890,7 +1905,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
             .scale(1 / NumCast(this.layoutDoc._freeform_scale, 1) / (this.props.NativeDimScaling?.() || 1));
 
     @computed get audioHandle() {
-        return !this._recording ? null : (
+        return !this._recordingDictation ? null : (
             <div
                 className="formattedTextBox-dictation"
                 onPointerDown={e =>
@@ -1899,7 +1914,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                         e,
                         returnFalse,
                         emptyFunction,
-                        action(e => (this._recording = !this._recording))
+                        action(e => (this._recordingDictation = !this._recordingDictation))
                     )
                 }>
                 <FontAwesomeIcon className="formattedTextBox-audioFont" style={{ color: 'red' }} icon={'microphone'} size="sm" />