From c97b98c165e318da787361b8fc11382b0b98afa4 Mon Sep 17 00:00:00 2001 From: bob Date: Thu, 24 Oct 2019 11:54:03 -0400 Subject: several fixes to audioboxes. --- src/client/views/nodes/AudioBox.tsx | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) (limited to 'src/client/views/nodes/AudioBox.tsx') diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index cc1c63d44..bd1caaf1b 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -12,12 +12,11 @@ import { RouteStore } from "../../../server/RouteStore"; import { runInAction, observable, reaction, IReactionDisposer, computed, action } from "mobx"; import { DateField } from "../../../new_fields/DateField"; import { SelectionManager } from "../../util/SelectionManager"; -import { Doc, DocListCast, WidthSym } from "../../../new_fields/Doc"; +import { Doc, DocListCast } from "../../../new_fields/Doc"; import { ContextMenuProps } from "../ContextMenuItem"; import { ContextMenu } from "../ContextMenu"; import { Id } from "../../../new_fields/FieldSymbols"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { DocumentManager } from "../../util/DocumentManager"; import { DocumentView } from "./DocumentView"; interface Window { @@ -59,7 +58,7 @@ export class AudioBox extends DocExtendableComponent l[Id] === scrollLinkId).map(l => { let la1 = l.anchor1 as Doc; let linkTime = Doc.AreProtosEqual(la1, this.dataDoc) ? NumCast(l.anchor1Timecode) : NumCast(l.anchor2Timecode); - setTimeout(() => this.playFrom(linkTime), 250); + setTimeout(() => { this.playFrom(linkTime); Doc.linkFollowHighlight(l); }, 250); }); scrollLinkId && Doc.SetInPlace(this.layoutDoc, "scrollToLinkID", undefined, false); }, { fireImmediately: true }); @@ -75,11 +74,9 @@ export class AudioBox extends DocExtendableComponent { - const extensionDoc = this.extensionDoc; const htmlEle = this._ele; - const start = extensionDoc && DateCast(extensionDoc.recordingStart); - if (start && htmlEle) { - htmlEle && htmlEle.duration && htmlEle.duration !== Infinity && runInAction(() => this.dataDoc.duration = htmlEle.duration); + if (this._audioState === "recorded" && htmlEle) { + htmlEle.duration && htmlEle.duration !== Infinity && runInAction(() => this.dataDoc.duration = htmlEle.duration); DocListCast(this.dataDoc.links).map(l => { let la1 = l.anchor1 as Doc; let linkTime = NumCast(l.anchor2Timecode); @@ -195,7 +192,7 @@ export class AudioBox extends DocExtendableComponent { - e && e.addEventListener("timeupdate", action(() => this.Document.currentTimecode = e!.currentTime)); + e && e.addEventListener("timeupdate", this.timecodeChanged); this._ele = e; } @@ -225,13 +222,13 @@ export class AudioBox extends DocExtendableComponent :
- -
+
+
e.stopPropagation()} onPointerDown={e => { if (e.button === 0 && !e.ctrlKey) { let rect = (e.target as any).getBoundingClientRect(); - this._ele!.currentTime = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration); + this._ele!.currentTime = this.Document.currentTimecode = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration); this.pause(); e.stopPropagation(); } -- cgit v1.2.3-70-g09d2 From cf9fff0cf86e120cd4d26169ce8455bd8b438b24 Mon Sep 17 00:00:00 2001 From: bob Date: Thu, 24 Oct 2019 14:01:35 -0400 Subject: minor fixes including fix to focus() to restore animation panning --- src/client/views/collections/CollectionSubView.tsx | 2 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 15 +++++++-------- src/client/views/nodes/AudioBox.tsx | 2 +- src/client/views/nodes/DocuLinkBox.tsx | 3 ++- src/client/views/nodes/DocumentView.tsx | 4 ++-- 5 files changed, 13 insertions(+), 13 deletions(-) (limited to 'src/client/views/nodes/AudioBox.tsx') diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 55365de8c..d7e9494a3 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -74,7 +74,7 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T) { this._childLayoutDisposer && this._childLayoutDisposer(); } - @computed get dataDoc() { return this.props.DataDoc && this.props.Document.isTemplateField ? Doc.GetProto(this.props.DataDoc!) : Doc.GetProto(this.props.Document); } + @computed get dataDoc() { return this.props.DataDoc && this.props.Document.isTemplateField ? Doc.GetProto(this.props.DataDoc) : Doc.GetProto(this.props.Document); } @computed get extensionDoc() { return Doc.fieldExtensionDoc(this.dataDoc, this.props.fieldKey); } // The data field for rendering this collection will be on the this.props.Document unless we're rendering a template in which case we try to use props.DataDoc. diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index f6518a01d..6e0f75bc1 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -354,14 +354,14 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { } @action - setPan(panX: number, panY: number) { - if (!this.props.Document.lockedPosition || this.props.Document.inOverlay) { - this.props.Document.panTransformType = "None"; + setPan(panX: number, panY: number, panType: string = "None") { + if (!this.Document.lockedPosition || this.Document.inOverlay) { + this.Document.panTransformType = panType; var scale = this.getLocalTransform().inverse().Scale; const newPanX = Math.min((1 - 1 / scale) * this.nativeWidth, Math.max(0, panX)); - const newPanY = Math.min((this.props.Document.scrollHeight !== undefined ? NumCast(this.props.Document.scrollHeight) : (1 - 1 / scale) * this.nativeHeight), Math.max(0, panY)); - this.props.Document.panX = this.isAnnotationOverlay ? newPanX : panX; - this.props.Document.panY = this.isAnnotationOverlay ? newPanY : panY; + const newPanY = Math.min((this.props.Document.scrollHeight !== undefined ? NumCast(this.Document.scrollHeight) : (1 - 1 / scale) * this.nativeHeight), Math.max(0, panY)); + this.Document.panX = this.isAnnotationOverlay ? newPanX : panX; + this.Document.panY = this.isAnnotationOverlay ? newPanY : panY; } } @@ -415,8 +415,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { let savedState = { px: this.Document.panX, py: this.Document.panY, s: this.Document.scale, pt: this.Document.panTransformType }; - this.setPan(newPanX, newPanY); - this.Document.panTransformType = "Ease"; + this.setPan(newPanX, newPanY, "Ease"); Doc.BrushDoc(this.props.Document); this.props.focus(this.props.Document); willZoom && this.setScaleToZoom(layoutdoc, scale); diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index bd1caaf1b..268255b46 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -95,7 +95,7 @@ export class AudioBox extends DocExtendableComponent { this._ele!.pause(); this._playing = false; - }) + }); playFrom = (seekTimeInSeconds: number) => { if (this._ele) { diff --git a/src/client/views/nodes/DocuLinkBox.tsx b/src/client/views/nodes/DocuLinkBox.tsx index 8f68effe8..f4c7d43aa 100644 --- a/src/client/views/nodes/DocuLinkBox.tsx +++ b/src/client/views/nodes/DocuLinkBox.tsx @@ -36,7 +36,7 @@ export class DocuLinkBox extends DocComponent(Doc (e.button === 0 && !e.ctrlKey) && e.stopPropagation(); } onPointerMove = action((e: PointerEvent) => { - let cdiv = this._ref.current!.parentElement; + let cdiv = this._ref && this._ref.current && this._ref.current.parentElement; if (cdiv && (Math.abs(e.clientX - this._downx) > 5 || Math.abs(e.clientY - this._downy) > 5)) { let bounds = cdiv.getBoundingClientRect(); let pt = Utils.getNearestPointInPerimeter(bounds.left, bounds.top, bounds.width, bounds.height, e.clientX, e.clientY); @@ -65,6 +65,7 @@ export class DocuLinkBox extends DocComponent(Doc } e.stopPropagation(); } + render() { let anchorDoc = Cast(this.props.Document[this.props.fieldKey], Doc); let hasAnchor = anchorDoc instanceof Doc && anchorDoc.type === DocumentType.PDFANNO; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index ed93aa83e..11066145b 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -667,9 +667,9 @@ export class DocumentView extends DocComponent(Docu onDrop={this.onDrop} onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown} onClick={this.onClick} onPointerEnter={() => Doc.BrushDoc(this.props.Document)} onPointerLeave={() => Doc.UnBrushDoc(this.props.Document)} > - {this.Document.links && DocListCast(this.Document.links).filter(this.isNonTemporalLink).map((d, i) => + {this.Document.links && DocListCast(this.Document.links).filter((d) => !DocListCast(this.layoutDoc.hiddenLinks).some(hidden => Doc.AreProtosEqual(hidden, d))).filter(this.isNonTemporalLink).map((d, i) =>
- + Doc.AddDocToList(this.layoutDoc, "hiddenLinks", doc))} layoutKey={this.linkEndpoint(d)} />
)} {!showTitle && !showCaption ? this.Document.searchFields ? -- cgit v1.2.3-70-g09d2 From cb7078190a06ea19cb443626b9023b93c1930e3a Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 4 Nov 2019 11:35:50 -0500 Subject: getting back in the saddle: small changes -audio play icons, link titling, dictation. --- src/client/views/nodes/AudioBox.tsx | 1 + src/client/views/nodes/DocuLinkBox.tsx | 5 ++++- src/client/views/nodes/FormattedTextBox.tsx | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) (limited to 'src/client/views/nodes/AudioBox.tsx') diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 268255b46..d652a11d5 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -193,6 +193,7 @@ export class AudioBox extends DocExtendableComponent { e && e.addEventListener("timeupdate", this.timecodeChanged); + e && e.addEventListener("ended", this.pause); this._ele = e; } diff --git a/src/client/views/nodes/DocuLinkBox.tsx b/src/client/views/nodes/DocuLinkBox.tsx index f4c7d43aa..d73407903 100644 --- a/src/client/views/nodes/DocuLinkBox.tsx +++ b/src/client/views/nodes/DocuLinkBox.tsx @@ -72,7 +72,10 @@ export class DocuLinkBox extends DocComponent(Doc let y = NumCast(this.props.Document[this.props.fieldKey + "_y"], 100); let x = NumCast(this.props.Document[this.props.fieldKey + "_x"], 100); let c = StrCast(this.props.Document.backgroundColor, "lightblue"); - return
+ style={{ color: this._recording ? "red" : "blue", opacity: this._recording ? 1 : 0.2 }} icon={"microphone"} size="sm" />
); -- cgit v1.2.3-70-g09d2 From 70a6f10779729cff4a1b46d56dd5ff84f41ed14e Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 4 Nov 2019 13:08:47 -0500 Subject: cleaned up some exceptions, runtime warnings, fixed borderRounding, and adding to Library->Documents --- src/client/views/MainView.tsx | 2 ++ .../views/collections/CollectionStackingView.tsx | 1 - .../views/collections/CollectionTreeView.tsx | 6 +++--- src/client/views/nodes/AudioBox.tsx | 24 ++++++++++++---------- .../views/nodes/CollectionFreeFormDocumentView.tsx | 8 +------- src/client/views/nodes/DocumentView.tsx | 2 +- src/client/views/nodes/ImageBox.tsx | 2 +- 7 files changed, 21 insertions(+), 24 deletions(-) (limited to 'src/client/views/nodes/AudioBox.tsx') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index cc5c5bf2b..383300b22 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -38,6 +38,7 @@ import PDFMenu from './pdf/PDFMenu'; import { PreviewCursor } from './PreviewCursor'; import { Scripting } from '../util/Scripting'; import { LinkManager } from '../util/LinkManager'; +import { AudioBox } from './nodes/AudioBox'; @observer export class MainView extends React.Component { @@ -136,6 +137,7 @@ export class MainView extends React.Component { globalPointerDown = action((e: PointerEvent) => { this.isPointerDown = true; + AudioBox.AudioEnabled = true; const targets = document.elementsFromPoint(e.x, e.y); if (targets && targets.length && targets[0].className.toString().indexOf("contextMenu") === -1) { ContextMenu.Instance.closeMenu(); diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 7f0165ad4..37d897088 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -393,7 +393,6 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { let entries = Array.from(this.Sections.entries()); sections = entries.sort(this.sortFunc); } - console.log("NUM = " + this.numGroupColumns); return (
{ } let movedDocs = (de.data.options === this.props.treeViewId ? de.data.draggedDocuments : de.data.droppedDocuments); return (de.data.dropAction || de.data.userDropAction) ? - de.data.droppedDocuments.reduce((added, d) => this.props.addDocument(d, undefined, before) || added, false) + de.data.droppedDocuments.reduce((added, d) => addDoc(d) || added, false) : de.data.moveDocument ? movedDocs.reduce((added, d) => de.data.moveDocument(d, undefined, addDoc) || added, false) - : de.data.droppedDocuments.reduce((added, d) => this.props.addDocument(d, undefined, before), false); + : de.data.droppedDocuments.reduce((added, d) => addDoc(d), false); } return false; } @@ -474,7 +474,7 @@ class TreeView extends React.Component { let aspect = NumCast(childLayout.nativeWidth, 0) / NumCast(childLayout.nativeHeight, 0); return aspect ? Math.min(childLayout[WidthSym](), rowWidth()) / aspect : childLayout[HeightSym](); }; - return (AudioDocument) { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(AudioBox, fieldKey); } + public static Enabled = false; _linkPlayDisposer: IReactionDisposer | undefined; _reactionDisposer: IReactionDisposer | undefined; @@ -98,7 +99,7 @@ export class AudioBox extends DocExtendableComponent { - if (this._ele) { + if (this._ele && AudioBox.Enabled) { if (seekTimeInSeconds < 0) { this.pause(); } else if (seekTimeInSeconds <= this._ele.duration) { @@ -243,16 +244,17 @@ export class AudioBox extends DocExtendableComponent -
- -
-
Doc.linkFollowHighlight(la1)} - onPointerDown={e => { if (e.button === 0 && !e.ctrlKey) { this.playFrom(linkTime); e.stopPropagation(); } }} - onClick={e => { if (e.button === 0 && !e.ctrlKey) { this.pause(); e.stopPropagation(); } }} /> -
; + return !linkTime ? (null) : +
+
+ +
+
Doc.linkFollowHighlight(la1)} + onPointerDown={e => { if (e.button === 0 && !e.ctrlKey) { this.playFrom(linkTime); e.stopPropagation(); } }} + onClick={e => { if (e.button === 0 && !e.ctrlKey) { this.pause(); e.stopPropagation(); } }} /> +
; })}
{this.audio} diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 58cb831f8..581e5b736 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -4,7 +4,6 @@ import { observer } from "mobx-react"; import { Doc, HeightSym, WidthSym } from "../../../new_fields/Doc"; import { listSpec } from "../../../new_fields/Schema"; import { Cast, NumCast, StrCast } from "../../../new_fields/Types"; -import { percent2frac } from "../../../Utils"; import { Transform } from "../../util/Transform"; import { DocComponent } from "../DocComponent"; import "./CollectionFreeFormDocumentView.scss"; @@ -71,12 +70,7 @@ export class CollectionFreeFormDocumentView extends DocComponent(Docu onPointerEnter={() => Doc.BrushDoc(this.props.Document)} onPointerLeave={() => Doc.UnBrushDoc(this.props.Document)} > {this.Document.links && DocListCast(this.Document.links).filter((d) => !DocListCast(this.layoutDoc.hiddenLinks).some(hidden => Doc.AreProtosEqual(hidden, d))).filter(this.isNonTemporalLink).map((d, i) => -
+
Doc.AddDocToList(this.layoutDoc, "hiddenLinks", doc))} layoutKey={this.linkEndpoint(d)} />
)} {!showTitle && !showCaption ? diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 188440292..212c99f9d 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -323,7 +323,7 @@ export class ImageBox extends DocAnnotatableComponent + style={{ color: [DocListCast(extensionDoc.audioAnnotations).length ? "blue" : "gray", "green", "red"][this._audioState] }} icon={!DocListCast(extensionDoc.audioAnnotations).length ? "microphone" : faFileAudio} size="sm" />
{this.considerGooglePhotosLink()} -- cgit v1.2.3-70-g09d2