From 768ab508529ab2b7f43a44592e5dc2c9f15a68a5 Mon Sep 17 00:00:00 2001 From: yunahi <60233430+yunahi@users.noreply.github.com> Date: Sat, 9 Jan 2021 01:31:43 +0900 Subject: spotlight --- src/client/views/collections/TabDocView.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'src/client/views/collections/TabDocView.tsx') diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 530595cd0..b3ad0f82e 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -142,6 +142,16 @@ export class TabDocView extends React.Component { pinDoc.presStartTime = 0; pinDoc.presEndTime = doc.duration; } + //save position + if (pinDoc.isInkMask) { + pinDoc.y = doc.y; + pinDoc.x = doc.x; + pinDoc.presHideAfter = true; + pinDoc.presHideBefore = true; + pinDoc.title = doc.title + "- Spotlight"; + pinDoc.presMovement = PresMovement.None; + + } if (curPres.expandBoolean) pinDoc.presExpandInlineButton = true; const dview = CollectionDockingView.Instance.props.Document; const fieldKey = CollectionDockingView.Instance.props.fieldKey; -- cgit v1.2.3-70-g09d2 From 761596b7bb7b4cab18e1e1df62330a3a11a7af03 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 11 Jan 2021 13:57:14 -0500 Subject: generalized spotlight moving to be available by any document --- src/client/views/DocumentButtonBar.tsx | 11 +++---- src/client/views/collections/CollectionMenu.tsx | 4 +-- src/client/views/collections/TabDocView.tsx | 12 ++++---- src/client/views/nodes/PresBox.tsx | 39 ++++++++++++++----------- src/mobile/MobileInterface.tsx | 2 +- 5 files changed, 37 insertions(+), 31 deletions(-) (limited to 'src/client/views/collections/TabDocView.tsx') diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index 96f5d78fd..3eabb294d 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -186,20 +186,21 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV @computed get pinButton() { const targetDoc = this.view0?.props.Document; - const isPinned = targetDoc && Doc.isDocPinned(targetDoc); - return !targetDoc ? (null) :
{SelectionManager.Views().length > 1 ? "Pin multiple documents to presentation" : "Pin to presentation"}
}> + return !targetDoc ? (null) : {SelectionManager.Views().length > 1 ? "Pin multiple documents to presentation" : "Pin to presentation"}}>
this.props.views().map(view => view && TabDocView.PinDoc(view.props.Document, false)))}> + onClick={undoBatch(e => this.props.views().map(view => view && TabDocView.PinDoc(view.props.Document /*, { setPosition: true }*/)))}> -
; + + ; } @undoBatch @action pinWithView = (targetDoc: Doc) => { if (targetDoc) { - TabDocView.PinDoc(targetDoc, false); + TabDocView.PinDoc(targetDoc); const activeDoc = PresBox.Instance.childDocs[PresBox.Instance.childDocs.length - 1]; const scrollable: boolean = (targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.RTF || targetDoc.type === DocumentType.WEB || targetDoc._viewType === CollectionViewType.Stacking); const pannable: boolean = ((targetDoc.type === DocumentType.COL && targetDoc._viewType === CollectionViewType.Freeform) || targetDoc.type === DocumentType.IMG); diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 85fcf6384..5670d45f5 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -389,7 +389,7 @@ export class CollectionViewBaseChrome extends React.Component{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}} placement="top"> ; @@ -399,7 +399,7 @@ export class CollectionViewBaseChrome extends React.Component) => { if (targetDoc) { - TabDocView.PinDoc(targetDoc, false); + TabDocView.PinDoc(targetDoc); const presArray: Doc[] = PresBox.Instance?.sortArray(); const size: number = PresBox.Instance?._selectedArray.size; const presSelected: Doc | undefined = presArray && size ? presArray[size - 1] : undefined; diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 9a0759fe5..09f709a5e 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -24,7 +24,7 @@ import { Transform } from '../../util/Transform'; import { undoBatch, UndoManager } from "../../util/UndoManager"; import { DocumentView, DocAfterFocusFunc, DocumentViewProps } from "../nodes/DocumentView"; import { FieldViewProps } from '../nodes/FieldView'; -import { PresBox, PresMovement } from '../nodes/PresBox'; +import { PresBox, PresMovement, PinProps } from '../nodes/PresBox'; import { DefaultLayerProvider, DefaultStyleProvider, StyleLayers, StyleProp } from '../StyleProvider'; import { CollectionDockingView } from './CollectionDockingView'; import { CollectionDockingViewMenu } from './CollectionDockingViewMenu'; @@ -166,8 +166,8 @@ export class TabDocView extends React.Component { * Adds a document to the presentation view **/ @action - public static async PinDoc(doc: Doc, unpin = false, audioRange?: boolean) { - if (unpin) console.log('TODO: Remove UNPIN from this location'); + public static async PinDoc(doc: Doc, pinProps?: PinProps) { + if (pinProps?.unpin) console.log('TODO: Remove UNPIN from this location'); //add this new doc to props.Document const curPres = CurrentUserUtils.ActivePresentation; if (curPres) { @@ -183,21 +183,21 @@ export class TabDocView extends React.Component { const size: number = PresBox.Instance?._selectedArray.size; const presSelected: Doc | undefined = presArray && size ? presArray[size - 1] : undefined; Doc.AddDocToList(curPres, "data", pinDoc, presSelected); - if (!audioRange && (pinDoc.type === DocumentType.AUDIO || pinDoc.type === DocumentType.VID)) { + if (!pinProps?.audioRange && (pinDoc.type === DocumentType.AUDIO || pinDoc.type === DocumentType.VID)) { pinDoc.mediaStart = "manual"; pinDoc.mediaStop = "manual"; pinDoc.presStartTime = 0; pinDoc.presEndTime = pinDoc.type === DocumentType.AUDIO ? doc.duration : NumCast(doc["data-duration"]); } //save position - if (pinDoc.isInkMask) { + if (pinProps?.setPosition || pinDoc.isInkMask) { + pinDoc.setPosition = true; pinDoc.y = doc.y; pinDoc.x = doc.x; pinDoc.presHideAfter = true; pinDoc.presHideBefore = true; pinDoc.title = doc.title + "- Spotlight"; pinDoc.presMovement = PresMovement.None; - } if (curPres.expandBoolean) pinDoc.presExpandInlineButton = true; const dview = CollectionDockingView.Instance.props.Document; diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 90897b8fd..aef776563 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -66,6 +66,12 @@ export enum PresColor { SlideBackground = "#d5dce2", } +export class PinProps { + audioRange?: boolean; + unpin?: boolean; + setPosition?: boolean; +} + type PresBoxSchema = makeInterface<[typeof documentSchema]>; const PresBoxDocument = makeInterface(documentSchema); @@ -711,7 +717,7 @@ export class PresBox extends ViewBoxBaseComponent audio.presStartTime = NumCast(doc.audioStart); audio.presEndTime = NumCast(doc.audioEnd); audio.presDuration = NumCast(doc.audioEnd) - NumCast(doc.audioStart); - TabDocView.PinDoc(audio, false, true); + TabDocView.PinDoc(audio, { audioRange: true }); setTimeout(() => this.removeDocument(doc), 0); return false; } @@ -774,21 +780,20 @@ export class PresBox extends ViewBoxBaseComponent if (doc.presPinView || doc.presentationTargetDoc === this.layoutDoc.presCollection) setTimeout(() => this.updateCurrentPresentation(context), 0); else this.updateCurrentPresentation(context); - if (this.targetDoc.isInkMask) { - if (this.activeItem.y !== undefined && - this.activeItem.x !== undefined && - this.targetDoc.x !== undefined && - this.targetDoc.y !== undefined) { - const timer = (ms: number) => new Promise(res => this._presTimer = setTimeout(res, ms)); - const time = 10; - const ydiff = NumCast(this.activeItem.y) - NumCast(this.targetDoc.y); - const xdiff = NumCast(this.activeItem.x) - NumCast(this.targetDoc.x); - - for (let i = 0; i < time; i++) { - this.targetDoc.x = NumCast(this.targetDoc.x) + xdiff / time; - this.targetDoc.y = NumCast(this.targetDoc.y) + ydiff / time; - await timer(0.1); - } + if (this.activeItem.setPosition && + this.activeItem.y !== undefined && + this.activeItem.x !== undefined && + this.targetDoc.x !== undefined && + this.targetDoc.y !== undefined) { + const timer = (ms: number) => new Promise(res => this._presTimer = setTimeout(res, ms)); + const time = 10; + const ydiff = NumCast(this.activeItem.y) - NumCast(this.targetDoc.y); + const xdiff = NumCast(this.activeItem.x) - NumCast(this.targetDoc.x); + + for (let i = 0; i < time; i++) { + this.targetDoc.x = NumCast(this.targetDoc.x) + xdiff / time; + this.targetDoc.y = NumCast(this.targetDoc.y) + ydiff / time; + await timer(0.1); } } } @@ -1731,7 +1736,7 @@ export class PresBox extends ViewBoxBaseComponent const presData = Cast(this.rootDoc.data, listSpec(Doc)); if (data && presData) { data.push(doc); - TabDocView.PinDoc(doc, false); + TabDocView.PinDoc(doc); this.gotoDocument(this.childDocs.length, this.activeItem); } else { this.props.addDocTab(doc, "add:right"); diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index c4a6433c8..c7e2d02cb 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -512,7 +512,7 @@ export class MobileInterface extends React.Component { return
TabDocView.PinDoc(this._activeDoc, isPinned)}> + onClick={e => TabDocView.PinDoc(this._activeDoc, { unpin: isPinned })}>
; } else return (null); -- cgit v1.2.3-70-g09d2 From 6ce848be82dcb2c3b8bffe69282305b348d639a2 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 14 Jan 2021 11:58:25 -0500 Subject: fixed stacking behavior of what audio regions that have no end --- src/client/views/DocumentButtonBar.tsx | 2 +- src/client/views/collections/TabDocView.tsx | 2 +- src/client/views/nodes/AudioBox.tsx | 66 +++++++++++++++-------------- 3 files changed, 36 insertions(+), 34 deletions(-) (limited to 'src/client/views/collections/TabDocView.tsx') diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index 3eabb294d..a2bd0aad9 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -190,7 +190,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
{SelectionManager.Views().length > 1 ? "Pin multiple documents to presentation" : "Pin to presentation"}
}>
this.props.views().map(view => view && TabDocView.PinDoc(view.props.Document /*, { setPosition: true }*/)))}> + onClick={undoBatch(e => this.props.views().map(view => view && TabDocView.PinDoc(view.props.Document, { setPosition: e.shiftKey ? true : undefined })))}>
; diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 09f709a5e..5ca069fb9 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -196,7 +196,7 @@ export class TabDocView extends React.Component { pinDoc.x = doc.x; pinDoc.presHideAfter = true; pinDoc.presHideBefore = true; - pinDoc.title = doc.title + "- Spotlight"; + pinDoc.title = doc.title + " (move)"; pinDoc.presMovement = PresMovement.None; } if (curPres.expandBoolean) pinDoc.presExpandInlineButton = true; diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 141f90e83..36df09338 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -17,20 +17,19 @@ import { emptyFunction, formatTime, numberRange, returnFalse, returnTrue, setupM import { Docs, DocUtils } from "../../documents/Documents"; import { Networking } from "../../Network"; import { CurrentUserUtils } from "../../util/CurrentUserUtils"; +import { DocumentManager } from "../../util/DocumentManager"; import { Scripting } from "../../util/Scripting"; import { SelectionManager } from "../../util/SelectionManager"; import { SnappingManager } from "../../util/SnappingManager"; import { ContextMenu } from "../ContextMenu"; import { ContextMenuProps } from "../ContextMenuItem"; import { ViewBoxAnnotatableComponent } from "../DocComponent"; -import { StyleProp } from "../StyleProvider"; import "./AudioBox.scss"; -import { DocumentView, DocumentViewProps } from "./DocumentView"; +import { DocumentView } from "./DocumentView"; import { FieldView, FieldViewProps } from './FieldView'; import { FormattedTextBoxComment } from "./formattedText/FormattedTextBoxComment"; -import { LinkAnchorBox } from "./LinkAnchorBox"; import { LinkDocPreview } from "./LinkDocPreview"; -import { DocumentManager } from "../../util/DocumentManager"; +import { computedFn } from "mobx-utils"; declare class MediaRecorder { // whatever MediaRecorder has @@ -46,6 +45,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent this.layoutDoc.playOnSelect = !this.layoutDoc.playOnSelect, icon: "expand-arrows-alt" }); funcs.push({ description: (this.layoutDoc.hideMarkers ? "Don't hide" : "Hide") + " range markers", event: () => this.layoutDoc.hideMarkers = !this.layoutDoc.hideMarkers, icon: "expand-arrows-alt" }); - funcs.push({ description: (this.layoutDoc.hideLabels ? "Don't hide" : "Hide") + " label markers", event: () => this.layoutDoc.hideLabels = !this.layoutDoc.hideLabels, icon: "expand-arrows-alt" }); funcs.push({ description: (this.layoutDoc.playOnClick ? "Don't play" : "Play") + " markers onClick", event: () => this.layoutDoc.playOnClick = !this.layoutDoc.playOnClick, icon: "expand-arrows-alt" }); ContextMenu.Instance?.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" }); } @@ -409,6 +409,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent { + this.props.select(false); const rect = (e.target as any).getBoundingClientRect(); const toTimeline = (screen_delta: number) => screen_delta / rect.width * this.audioDuration; this._markerStart = this._markerEnd = toTimeline(e.clientX - rect.x); @@ -479,11 +480,11 @@ export class AudioBox extends ViewBoxAnnotatableComponent { - const increment = this.audioDuration / 500; + const increment = this.audioDuration / AudioBox.NUMBER_OF_BUCKETS; this._count = []; - for (let i = 0; i < 500; i++) { + for (let i = 0; i < AudioBox.NUMBER_OF_BUCKETS; i++) { this._count.push([increment * i, 0]); } } @@ -495,9 +496,10 @@ export class AudioBox extends ViewBoxAnnotatableComponent= m.audioStart && this._count[i][0] <= m.audioEnd) { + const timelineContentWidth = this.props.PanelWidth() - AudioBox.playheadWidth; + const audioEnd = m.audioEnd === undefined ? m.audioStart + 10 / timelineContentWidth * this.audioDuration : m.audioEnd; + for (let i = 0; i < AudioBox.NUMBER_OF_BUCKETS; i++) { + if (this._count[i][0] >= m.audioStart && this._count[i][0] <= audioEnd) { this._count[i][1]++; if (this._count[i][1] > max) { @@ -506,8 +508,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent= m.audioStart && this._count[i][0] <= m.audioEnd) { + for (let i = 0; i < AudioBox.NUMBER_OF_BUCKETS; i++) { + if (this._count[i][0] >= m.audioStart && this._count[i][0] <= audioEnd) { this._count[i][1] = max; } } @@ -561,7 +563,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent AudioBox.LabelScript; rangePlayScript = () => AudioBox.RangePlayScript; labelPlayScript = () => AudioBox.LabelPlayScript; - renderMarker = (mark: Doc, script: undefined | (() => ScriptField), doublescript: undefined | (() => ScriptField), x: number, y: number, width: number, height: number) => { + renderMarker = computedFn(function (this: AudioBox, mark: Doc, script: undefined | (() => ScriptField), doublescript: undefined | (() => ScriptField), x: number, y: number, width: number, height: number) { return width} @@ -578,15 +580,13 @@ export class AudioBox extends ViewBoxAnnotatableComponent; - } + }); render() { const interactive = SnappingManager.GetIsDragging() || this.active() ? "-interactive" : ""; this._first = true; // for indicating the first marker that is rendered - const heightPercent = 80; - const playheadWidth = 30; - const timelineContentWidth = this.props.PanelWidth() - playheadWidth; - const timelineContentHeight = (this.props.PanelHeight() * heightPercent / 100) * heightPercent / 100; // panelHeight * heightPercent is player height. * heightPercent is timeline height (as per css inline) + const timelineContentWidth = this.props.PanelWidth() - AudioBox.playheadWidth; + const timelineContentHeight = (this.props.PanelHeight() * AudioBox.heightPercent / 100) * AudioBox.heightPercent / 100; // panelHeight * heightPercent is player height. * heightPercent is timeline height (as per css inline) return
:
-
-
-
+
+
{ e.stopPropagation(); e.preventDefault(); }} onPointerDown={e => { if (e.button === 0 && !e.ctrlKey) { @@ -634,32 +634,34 @@ export class AudioBox extends ViewBoxAnnotatableComponent {this.markerDocs.map((m, i) => { const isOverlap = this.isOverlap(m); - return !m.isLabel ? - this.layoutDoc.hideMarkers ? (null) : + const left = AudioBox.playheadWidth + NumCast(m.audioStart) / this.audioDuration * timelineContentWidth; + return this.layoutDoc.hideMarkers ? (null) : + !m.isLabel ?
{ this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation(); }} >
this.onPointerDown(e, m, true)} /> {this.renderMarker(m, this.rangeClickScript, this.rangePlayScript, - playheadWidth + NumCast(m.audioStart) / this.audioDuration * timelineContentWidth, + left, .1 * this.props.PanelHeight() + isOverlap / (this.dataDoc.markerAmount + 1) * timelineContentHeight, timelineContentWidth * (NumCast(m.audioEnd) - NumCast(m.audioStart)) / this.audioDuration, timelineContentHeight / (this.dataDoc.markerAmount + 1))}
this.onPointerDown(e, m, false)} />
- : - this.layoutDoc.hideLabels ? (null) : + :
{ this.playFrom(NumCast(m.audioStart)); e.stopPropagation(); }}> {this.renderMarker(m, this.labelClickScript, this.labelPlayScript, - playheadWidth + NumCast(m.audioStart) / this.audioDuration * timelineContentWidth, + left, .1 * this.props.PanelHeight(), 10, 10)}
; -- cgit v1.2.3-70-g09d2