From 77119dc1719af955e162248e5747bd9ef8921b4c Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Tue, 22 Oct 2019 20:43:24 -0400 Subject: added ink audio scrubbing --- src/client/views/InkingStroke.tsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) (limited to 'src/client/views/InkingStroke.tsx') diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index b8d428d31..7bbf71482 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -1,9 +1,10 @@ import { observer } from "mobx-react"; -import { observable, trace } from "mobx"; +import { observable, trace, runInAction } from "mobx"; import { InkingControl } from "./InkingControl"; import React = require("react"); import { InkTool } from "../../new_fields/InkField"; import "./InkingStroke.scss"; +import { AudioBox } from "./nodes/AudioBox"; interface StrokeProps { @@ -15,6 +16,7 @@ interface StrokeProps { color: string; width: string; tool: InkTool; + creationTime: number; deleteCallback: (index: string) => void; } @@ -31,6 +33,11 @@ export class InkingStroke extends React.Component { e.stopPropagation(); e.preventDefault(); } + if (InkingControl.Instance.selectedTool === InkTool.Scrubber && e.buttons === 1) { + runInAction(() => AudioBox.ScrubTime = this.props.creationTime); + e.stopPropagation(); + e.preventDefault(); + } } parseData = (line: Array<{ x: number, y: number }>): string => { @@ -55,10 +62,9 @@ export class InkingStroke extends React.Component { let pathlength = this.props.count; // bcz: this is needed to force reactions to the line's data changes let marker = this.props.tool === InkTool.Highlighter ? "-marker" : ""; - let pointerEvents: any = InkingControl.Instance.selectedTool === InkTool.Eraser ? "all" : "none"; - return ( - - ); + let pointerEvents: any = InkingControl.Instance.selectedTool === InkTool.Eraser || + InkingControl.Instance.selectedTool === InkTool.Scrubber ? "all" : "none"; + return (); } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 86e985ef3a96d9849799e436d2158fef0b2b7f94 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 23 Oct 2019 11:45:08 -0400 Subject: added scrubbing from text notes --- src/client/views/InkingStroke.tsx | 2 +- src/client/views/nodes/AudioBox.tsx | 5 +++-- src/client/views/nodes/FormattedTextBox.tsx | 3 +++ 3 files changed, 7 insertions(+), 3 deletions(-) (limited to 'src/client/views/InkingStroke.tsx') diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 7bbf71482..332c22512 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -34,7 +34,7 @@ export class InkingStroke extends React.Component { e.preventDefault(); } if (InkingControl.Instance.selectedTool === InkTool.Scrubber && e.buttons === 1) { - runInAction(() => AudioBox.ScrubTime = this.props.creationTime); + AudioBox.SetScrubTime(this.props.creationTime); e.stopPropagation(); e.preventDefault(); } diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 135874400..e9a11c9b6 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -45,7 +45,8 @@ export class AudioBox extends DocExtendableComponent AudioBox._scrubTime = timeInMillisFrom1970); public static ActiveRecordings: Doc[] = []; componentDidMount() { @@ -64,7 +65,7 @@ export class AudioBox extends DocExtendableComponent AudioBox.ScrubTime, timeInMillisecondsFrom1970 => { + this._scrubbingDisposer = reaction(() => AudioBox._scrubTime, timeInMillisecondsFrom1970 => { let start = this.extensionDoc && DateCast(this.extensionDoc.recordingStart); start && this.playFrom((timeInMillisecondsFrom1970 - start.date.getTime()) / 1000); }); diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 5588bb4c9..566b698bd 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -45,6 +45,7 @@ import { ContextMenuProps } from '../ContextMenuItem'; import { ContextMenu } from '../ContextMenu'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { documentSchema } from '../../../new_fields/documentSchemas'; +import { AudioBox } from './AudioBox'; library.add(faEdit); library.add(faSmile, faTextHeight, faUpload); @@ -190,6 +191,8 @@ export class FormattedTextBox extends DocExtendableComponent<(FieldViewProps & F FormattedTextBox._toolTipTextMenu.mark_key_pressed(tx.storedMarks); } + let tsel = this._editorView.state.selection.$from; + tsel.marks().filter(m => m.type === this._editorView!.state.schema.marks.user_mark).map(m => AudioBox.SetScrubTime(Math.max(0, m.attrs.modified * 5000 - 5000))); this._applyingChange = true; this.extensionDoc && (this.extensionDoc.text = state.doc.textBetween(0, state.doc.content.size, "\n\n")); this.extensionDoc && (this.extensionDoc.lastModified = new DateField(new Date(Date.now()))); -- cgit v1.2.3-70-g09d2