diff options
| -rw-r--r-- | src/client/util/DocumentManager.ts | 17 | ||||
| -rw-r--r-- | src/client/views/linking/LinkEditor.tsx | 32 |
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>}> |