1 files changed, 27 insertions, 5 deletions
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>}>