diff options
Diffstat (limited to 'src/client/views/nodes/formattedText')
4 files changed, 92 insertions, 39 deletions
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss index b04f60500..81bca4c00 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.scss +++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss @@ -10,6 +10,21 @@ outline: none !important; } +audiotag { + left: 0; + position: absolute; + cursor: pointer; + border-radius: 10px; + width: 10px; + margin-top: -2px; + font-size: 4px; + background: lightblue; +} +audiotag:hover { + transform: scale(2); + transform-origin: bottom center; +} + .formattedTextBox-cont { touch-action: none; background: inherit; diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index e06a324d2..d24ccd9ad 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -66,6 +66,7 @@ import { SubCollectionViewProps } from '../../collections/CollectionSubView'; import { StyleProp } from '../../StyleProvider'; import { AnchorMenu } from '../../pdf/AnchorMenu'; import { CurrentUserUtils } from '../../../util/CurrentUserUtils'; +import { DocumentManager } from '../../../util/DocumentManager'; export interface FormattedTextBoxProps { makeLink?: () => Opt<Doc>; // bcz: hack: notifies the text document when the container has made a link. allows the text doc to react and setup a hyeprlink for any selected text @@ -99,10 +100,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp private _undoTyping?: UndoManager.Batch; private _disposers: { [name: string]: IReactionDisposer } = {}; private _dropDisposer?: DragManager.DragDropDisposer; - private _first: Boolean = true; private _recordingStart: number = 0; - private _currentTime: number = 0; - private _linkTime: number | null = null; private _pause: boolean = false; private _animatingScroll: number = 0; // hack to prevent scroll values from being written to document when scroll is animating @@ -341,39 +339,23 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this._editorView.updateState(EditorState.fromJSON(this.config, json)); } } + if (window.getSelection()?.isCollapsed) AnchorMenu.Instance.fadeOut(true); } } pause = () => this._pause = true; - formatTime = (time: number) => { - const hours = Math.floor(time / 60 / 60); - const minutes = Math.floor(time / 60) - (hours * 60); - const seconds = time % 60; - - return hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0'); - } - // for inserting timestamps insertTime = () => { - let audioState; - if (this._first) { - DocListCast(this.dataDoc.links).map((l, i) => { - let la1 = l.anchor1 as Doc; - let la2 = l.anchor2 as Doc; - this._linkTime = NumCast(la1.anchorStartTime, NumCast(la2.anchorStartTime)); - audioState = la2.audioState; - if (Doc.AreProtosEqual(la2, this.dataDoc)) { - la1 = l.anchor2 as Doc; - la2 = l.anchor1 as Doc; - audioState = la1.audioState; - } - }); - } - this._currentTime = Date.now(); - let time; - this._linkTime ? time = this.formatTime(Math.round(this._linkTime + this._currentTime / 1000 - this._recordingStart / 1000)) : time = null; - + let linkTime; + let linkAnchor; + DocListCast(this.dataDoc.links).forEach((l, i) => { + const anchor = (l.anchor1 as Doc).annotationOn ? l.anchor1 as Doc : (l.anchor2 as Doc).annotationOn ? (l.anchor2 as Doc) : undefined; + if (anchor && (anchor.annotationOn as Doc).audioState === "recording") { + linkTime = NumCast(anchor.audioStart); + linkAnchor = anchor; + } + }); if (this._editorView) { const state = this._editorView.state; const now = Date.now(); @@ -388,13 +370,15 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } } } - if (time && audioState === "recording") { - let value = ""; + + const path = (this._editorView.state.selection.$from as any).path; + if (linkAnchor && linkTime && path[path.length - 3].type !== this._editorView.state.schema.nodes.code_block) { + const time = linkTime + Date.now() / 1000 - this._recordingStart / 1000; this._break = false; - value = this.layoutDoc._timeStampOnEnter ? "[" + time + "] " : "\n" + "[" + time + "] "; const from = state.selection.from; - const inserted = state.tr.insertText(value).addMark(from, from + value.length + 1, mark); - this._editorView.dispatch(this._editorView.state.tr.insertText(value)); + const value = this._editorView.state.schema.nodes.audiotag.create({ timeCode: time, audioId: linkAnchor[Id] }); + const replaced = this._editorView.state.tr.insert(from - 1, value); + this._editorView.dispatch(replaced.setSelection(new TextSelection(replaced.doc.resolve(from + 1)))); } } } @@ -568,10 +552,13 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } return ret; } - static _highlights: string[] = ["Text from Others", "Todo Items", "Important Items", "Disagree Items", "Ignore Items"]; + static _highlights: string[] = ["Audio Tags", "Text from Others", "Todo Items", "Important Items", "Disagree Items", "Ignore Items"]; updateHighlights = () => { clearStyleSheetRules(FormattedTextBox._userStyleSheet); + if (FormattedTextBox._highlights.indexOf("Audio Tags") === -1) { + addStyleSheetRule(FormattedTextBox._userStyleSheet, "audiotag", { display: "none" }, ""); + } if (FormattedTextBox._highlights.indexOf("Text from Others") !== -1) { addStyleSheetRule(FormattedTextBox._userStyleSheet, "UM-remote", { background: "yellow" }); } @@ -643,8 +630,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp }); !Doc.UserDoc().noviceMode && changeItems.push({ description: "FreeForm", event: () => DocUtils.makeCustomViewClicked(this.rootDoc, Docs.Create.FreeformDocument, "freeform"), icon: "eye" }); const highlighting: ContextMenuProps[] = []; - const noviceHighlighting = ["My Text", "Text from Others"]; - const expertHighlighting = ["My Text", "Text from Others", "Todo Items", "Important Items", "Ignore Items", "Disagree Items", "By Recent Minute", "By Recent Hour"]; + const noviceHighlighting = ["Audio Tags", "My Text", "Text from Others"]; + const expertHighlighting = [...noviceHighlighting, "Important Items", "Ignore Items", "Disagree Items", "By Recent Minute", "By Recent Hour"]; (Doc.UserDoc().noviceMode ? noviceHighlighting : expertHighlighting).forEach(option => highlighting.push({ description: (FormattedTextBox._highlights.indexOf(option) === -1 ? "Highlight " : "Unhighlight ") + option, event: () => { @@ -1302,6 +1289,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this.endUndoTypingBatch(); this.unhighlightSearchTerms(); this._editorView?.destroy(); + RichTextMenu.Instance?.TextView === this && RichTextMenu.Instance.updateMenu(undefined, undefined, undefined); FormattedTextBoxComment.tooltip && (FormattedTextBoxComment.tooltip.style.display = "none"); } @@ -1311,6 +1299,19 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp _break = false; _collapsed = false; onPointerDown = (e: React.PointerEvent): void => { + if ((e.target as any).tagName === "AUDIOTAG") { + e.preventDefault(); + e.stopPropagation(); + const time = (e.target as any)?.dataset?.timecode || 0; + const audioid = (e.target as any)?.dataset?.audioid || 0; + DocServer.GetRefField(audioid).then(anchor => { + if (anchor instanceof Doc) { + const audiodoc = anchor.annotationOn as Doc; + audiodoc._triggerAudio = Number(time); + !DocumentManager.Instance.getDocumentView(audiodoc) && this.props.addDocTab(audiodoc, "add:bottom"); + } + }); + } if (this._recording && !e.ctrlKey && e.button === 0) { this.stopDictation(true); this._break = true; diff --git a/src/client/views/nodes/formattedText/RichTextSchema.tsx b/src/client/views/nodes/formattedText/RichTextSchema.tsx index d272b6b8c..abbb89780 100644 --- a/src/client/views/nodes/formattedText/RichTextSchema.tsx +++ b/src/client/views/nodes/formattedText/RichTextSchema.tsx @@ -136,6 +136,8 @@ export class DashDocView { addDocument={returnFalse} rootSelected={this._textBox.props.isSelected} removeDocument={removeDoc} + layerProvider={this._textBox.props.layerProvider} + styleProvider={this._textBox.props.styleProvider} ScreenToLocalTransform={this.getDocTransform} addDocTab={this._textBox.props.addDocTab} pinToPres={returnFalse} @@ -143,7 +145,6 @@ export class DashDocView { PanelWidth={finalLayout[WidthSym]} PanelHeight={finalLayout[HeightSym]} focus={this.outerFocus} - styleProvider={DefaultStyleProvider} parentActive={returnFalse} whenActiveChanged={returnFalse} bringToFront={emptyFunction} diff --git a/src/client/views/nodes/formattedText/nodes_rts.ts b/src/client/views/nodes/formattedText/nodes_rts.ts index 64f7d27e5..722c0a836 100644 --- a/src/client/views/nodes/formattedText/nodes_rts.ts +++ b/src/client/views/nodes/formattedText/nodes_rts.ts @@ -6,6 +6,14 @@ import { ParagraphNodeSpec, toParagraphDOM, getParagraphNodeAttrs } from "./Para const blockquoteDOM: DOMOutputSpecArray = ["blockquote", 0], hrDOM: DOMOutputSpecArray = ["hr"], preDOM: DOMOutputSpecArray = ["pre", ["code", 0]], brDOM: DOMOutputSpecArray = ["br"], ulDOM: DOMOutputSpecArray = ["ul", 0]; +function formatAudioTime(time: number) { + time = Math.round(time); + const hours = Math.floor(time / 60 / 60); + const minutes = Math.floor(time / 60) - (hours * 60); + const seconds = time % 60; + + return minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0'); +} // :: Object // [Specs](#model.NodeSpec) for the nodes defined in this schema. export const nodes: { [index: string]: NodeSpec } = { @@ -14,6 +22,34 @@ export const nodes: { [index: string]: NodeSpec } = { content: "block+" }, + audiotag: { + group: "block", + attrs: { + timeCode: { default: 0 }, + audioId: { default: "" } + }, + toDOM(node) { + return ['audiotag', + { + // style: see FormattedTextBox.scss + "data-timecode": node.attrs.timeCode, + "data-audioid": node.attrs.audioId, + }, + formatAudioTime(node.attrs.timeCode.toString()) + ]; + }, + parseDOM: [ + { + tag: "audiotag", getAttrs(dom: any) { + return { + timeCode: dom.getAttribute("data-timecode"), + audioId: dom.getAttribute("data-audioid") + }; + } + }, + ] + }, + footnote: { group: "inline", content: "inline*", @@ -315,7 +351,7 @@ export const nodes: { [index: string]: NodeSpec } = { mapStyle: { default: "decimal" }, // "decimal", "multi", "bullet" visibility: { default: true } }, - content: 'paragraph+ | (paragraph ordered_list)', + content: '(paragraph|audiotag)+ | ((paragraph|audiotag)+ ordered_list)', parseDOM: [{ tag: "li", getAttrs(dom: any) { return { mapStyle: dom.getAttribute("data-mapStyle"), bulletStyle: dom.getAttribute("data-bulletStyle") }; |