added audio annotation play option for following links

2 files changed, 44 insertions, 5 deletions

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index d3ac2f03f..52b643c04 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -12,6 +12,9 @@ import { CollectionFreeFormView } from '../views/collections/collectionFreeForm'
 import { CollectionView } from '../views/collections/CollectionView';
 import { ScriptingGlobals } from './ScriptingGlobals';
 import { SelectionManager } from './SelectionManager';
+import { listSpec } from '../../fields/Schema';
+import { AudioField } from '../../fields/URLField';
+const { Howl } = require('howler');
 
 export class DocumentManager {
     //global holds all of the nodes (regardless of which collection they're in)
@@ -186,6 +189,20 @@ export class DocumentManager {
             } else {
                 finalTargetDoc.hidden && (finalTargetDoc.hidden = undefined);
                 !noSelect && docView?.select(false);
+                if (originatingDoc?.followLinkAudio) {
+                    const anno = Cast(finalTargetDoc[Doc.LayoutFieldKey(finalTargetDoc) + '-audioAnnotations'], listSpec(AudioField), null).lastElement();
+                    if (anno) {
+                        if (anno instanceof AudioField) {
+                            new Howl({
+                                src: [anno.url.href],
+                                format: ['mp3'],
+                                autoplay: true,
+                                loop: false,
+                                volume: 0.5,
+                            });
+                        }
+                    }
+                }
             }
             finished?.();
         };
diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index d23d38854..1697062f4 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -3,7 +3,7 @@ import { Tooltip } from '@material-ui/core';
 import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc, NumListCast, StrListCast, Field } from '../../../fields/Doc';
-import { DateCast, StrCast, Cast } from '../../../fields/Types';
+import { DateCast, StrCast, Cast, BoolCast } from '../../../fields/Types';
 import { LinkManager } from '../../util/LinkManager';
 import { undoBatch } from '../../util/UndoManager';
 import './LinkEditor.scss';
@@ -21,7 +21,8 @@ interface LinkEditorProps {
 export class LinkEditor extends React.Component<LinkEditorProps> {
     @observable description = Field.toString(LinkManager.currentLink?.description as any as Field);
     @observable relationship = StrCast(LinkManager.currentLink?.linkRelationship);
-    @observable zoomFollow = StrCast(this.props.sourceDoc.followLinkZoom);
+    @observable zoomFollow = BoolCast(this.props.sourceDoc.followLinkZoom);
+    @observable audioFollow = BoolCast(this.props.sourceDoc.followLinkAudio);
     @observable openDropdown: boolean = false;
     @observable private buttonColor: string = '';
     @observable private relationshipButtonColor: string = '';
@@ -147,8 +148,12 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
         this.relationship = e.target.value;
     };
     @action
-    handleZoomFollowChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        this.props.sourceDoc.followLinkZoom = e.target.checked;
+    handleZoomFollowChange = () => {
+        this.props.sourceDoc.followLinkZoom = !this.props.sourceDoc.followLinkZoom;
+    };
+    @action
+    handleAudioFollowChange = () => {
+        this.props.sourceDoc.followLinkAudio = !this.props.sourceDoc.followLinkAudio;
     };
     @action
     handleRelationshipSearchChange = (result: string) => {
@@ -191,7 +196,23 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                 <div className="linkEditor-zoomFollow-label">Zoom To Link Target:</div>
                 <div className="linkEditor-zoomFollow-input">
                     <div className="linkEditor-zoomFollow-editing">
-                        <input style={{ width: '100%' }} type="checkbox" value={this.zoomFollow} onChange={this.handleZoomFollowChange} />
+                        <input type="checkbox" onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, this.handleZoomFollowChange)} defaultChecked={this.zoomFollow} />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    @computed
+    get editAudioFollow() {
+        //NOTE: confusingly, the classnames for the following relationship JSX elements are the same as the for the description elements for shared CSS
+        console.log('AudioFollow:' + this.audioFollow);
+        return (
+            <div className="linkEditor-zoomFollow">
+                <div className="linkEditor-zoomFollow-label">Play Target Audio:</div>
+                <div className="linkEditor-zoomFollow-input">
+                    <div className="linkEditor-zoomFollow-editing">
+                        <input type="checkbox" onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, this.handleAudioFollowChange)} defaultChecked={this.audioFollow} />
                     </div>
                 </div>
             </div>
@@ -329,6 +350,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                 {this.editDescription}
                 {this.editRelationship}
                 {this.editZoomFollow}
+                {this.editAudioFollow}
                 <div className="linkEditor-description">
                     Show Anchor:
                     <Tooltip title={<div className="dash-tooltip">{this.props.linkDoc.hidden ? 'Show Link Anchor' : 'Hide Link Anchor'}</div>}>