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') 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