From d0025200b23f57ec25d3452d425de8725a032c6a Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 22 Jan 2021 21:14:37 -0500 Subject: fixed selection bounds for video box annotations, especially when in full screen view. --- src/client/views/nodes/VideoBox.tsx | 113 +++++++++++++++++++----------------- 1 file changed, 60 insertions(+), 53 deletions(-) (limited to 'src/client/views/nodes/VideoBox.tsx') diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 608d7daa3..c5e61eedd 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -49,7 +49,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent = React.createRef(); private _annotationLayer: React.RefObject = React.createRef(); - @observable _marqueeing: number[] | undefined; - @observable _savedAnnotations: Dictionary = new Dictionary(); _play: any = null; _timeline: Opt; _audioRef = React.createRef(); @@ -68,7 +66,11 @@ export class VideoBox extends ViewBoxAnnotatableComponent = []; _duration = 0; _start: boolean = true; - private _currMarker: any; + _currMarker: any; + @observable _marqueeing: number[] | undefined; + @observable _savedAnnotations: Dictionary = new Dictionary(); + @observable _screenCapture = false; + @observable static _showControls: boolean; @observable static SelectingRegion: VideoBox | undefined = undefined; @observable _visible: boolean = false; @observable _markerEnd: number = 0; @@ -76,7 +78,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent { @@ -311,7 +313,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent { const field = Cast(this.dataDoc[this.props.fieldKey], VideoField); if (field) { @@ -337,10 +339,9 @@ export class VideoBox extends ViewBoxAnnotatableComponentLoading :
-
+
,
, @@ -520,9 +517,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent this.layoutDoc._showTimeline = !this.layoutDoc._showTimeline // ref for timeline - timelineRef = (timeline: HTMLDivElement) => { - this._timeline = timeline; - } + timelineRef = (timeline: HTMLDivElement) => { this._timeline = timeline; } // starting the drag event creating a range marker @action @@ -579,18 +574,16 @@ export class VideoBox extends ViewBoxAnnotatableComponent { - DocumentManager.Instance.getDocumentView(anchorDoc)?.select(false); this.playFrom(seekTimeInSeconds, endTime); + return true; // select } // play back the video from time @action clickMarker = (anchorDoc: Doc, seekTimeInSeconds: number, endTime: number = this.videoDuration) => { - if (this.layoutDoc.playOnClick) this.playOnClick(anchorDoc, seekTimeInSeconds, endTime); - else { - DocumentManager.Instance.getDocumentView(anchorDoc)?.select(false); - this.player && (this.player.currentTime = this.layoutDoc._currentTimecode = seekTimeInSeconds); - } + if (this.layoutDoc.playOnClick) return this.playOnClick(anchorDoc, seekTimeInSeconds, endTime); + this.player && (this.player.currentTime = this.layoutDoc._currentTimecode = seekTimeInSeconds); + return true; // select } // starting the drag event for marker resizing @@ -644,12 +637,13 @@ export class VideoBox extends ViewBoxAnnotatableComponent width} PanelHeight={() => height} + renderDepth={this.props.renderDepth + 1} rootSelected={returnFalse} LayoutTemplate={undefined} LayoutTemplateString={LabelBox.LayoutString("data")} ContainingCollectionDoc={this.props.Document} removeDocument={(doc: Doc | Doc[]) => this.removeDocument(doc, annotationKey)} - ScreenToLocalTransform={() => this.props.ScreenToLocalTransform().scale(this.props.scaling?.() || 1).translate(-x - 4, -y - 3)} + ScreenToLocalTransform={() => this.props.ScreenToLocalTransform().scale(this.scaling()).translate(-x, -y)} parentActive={(out) => this.props.isSelected(out) || this._isChildActive} whenActiveChanged={action((isActive: boolean) => this.props.whenActiveChanged(this._isChildActive = isActive))} onClick={script} @@ -675,13 +669,17 @@ export class VideoBox extends ViewBoxAnnotatableComponent ({ level: this.getLevel(m, overlaps), marker: m })); const maxLevel = overlaps.reduce((m, o) => Math.max(m, o.level), 0) + 2; return !this.layoutDoc._showTimeline ? (null) : -
{ if (this._isChildActive || this.props.isSelected()) { e.stopPropagation(); e.preventDefault(); } }} +
{ + if (this._isChildActive || this.props.isSelected()) { + e.stopPropagation(); e.preventDefault(); + } + }} onPointerDown={e => { if (this._isChildActive || this.props.isSelected()) { e.button === 0 && !e.ctrlKey && this.onPointerDownTimeline(e); @@ -758,7 +756,6 @@ export class VideoBox extends ViewBoxAnnotatableComponent VideoBox.RangePlayScript; labelPlayScript = () => VideoBox.LabelPlayScript; - screenToLocalTransform = () => this.props.ScreenToLocalTransform(); contentFunc = () => [this.youtubeVideoId ? this.youtubeContent : this.content]; @computed get annotationLayer() { @@ -774,33 +771,43 @@ export class VideoBox extends ViewBoxAnnotatableComponent this.props.scaling?.() || 1; + panelWidth = () => this.props.PanelWidth() * this.heightPercent / 100; + panelHeight = () => this.props.PanelHeight() * this.heightPercent / 100; + screenToLocalTransform = () => { + const offset = (this.props.PanelWidth() - this.panelWidth()) / 2 / this.scaling(); + return this.props.ScreenToLocalTransform().translate(-offset, 0).scale(100 / this.heightPercent); + } + render() { const borderRad = this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BorderRounding); - const borderRadius = borderRad?.includes("px") ? `${Number(borderRad.split("px")[0]) / (this.props.scaling?.() || 1)}px` : borderRad; + const borderRadius = borderRad?.includes("px") ? `${Number(borderRad.split("px")[0]) / this.scaling()}px` : borderRad; return (
-
- this.props.PanelWidth() * (this.layoutDoc._showTimeline ? .8 : 1)} - PanelHeight={() => this.props.PanelHeight() * (this.layoutDoc._showTimeline ? .8 : 1)} - ScreenToLocalTransform={() => this.screenToLocalTransform().scale(this.layoutDoc._showTimeline ? 1 / .8 : 1)} - whenActiveChanged={this.whenActiveChanged} - removeDocument={this.removeDocument} - moveDocument={this.moveDocument} - addDocument={this.addDocumentWithTimestamp} - CollectionView={undefined} - renderDepth={this.props.renderDepth + 1}> - {this.contentFunc} - +
+
+ + {this.contentFunc} + +
{this.uIButtons} {this.annotationLayer} {this.renderTimeline} -- cgit v1.2.3-70-g09d2