diff options
| -rw-r--r-- | src/client/views/collections/CollectionStackedTimeline.scss | 1 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionStackedTimeline.tsx | 44 | ||||
| -rw-r--r-- | src/client/views/nodes/VideoBox.tsx | 6 |
3 files changed, 32 insertions, 19 deletions
diff --git a/src/client/views/collections/CollectionStackedTimeline.scss b/src/client/views/collections/CollectionStackedTimeline.scss index 091337aac..7a957ae5c 100644 --- a/src/client/views/collections/CollectionStackedTimeline.scss +++ b/src/client/views/collections/CollectionStackedTimeline.scss @@ -5,7 +5,6 @@ width: 100%; height: 100%; z-index: 1000; - overflow: hidden; top: 0px; .collectionStackedTimeline-trim-shade { diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx index 0a0581f3c..3ec7f27d3 100644 --- a/src/client/views/collections/CollectionStackedTimeline.tsx +++ b/src/client/views/collections/CollectionStackedTimeline.tsx @@ -87,6 +87,8 @@ export class CollectionStackedTimeline extends CollectionSubView< @observable _trimStart: number = 0; @observable _trimEnd: number = 0; + @observable _zoomFactor: number = 1; + get minTrimLength() { return this._timeline?.getBoundingClientRect() ? 0.05 * this.clipDuration : 0; } @computed get trimStart() { return this.IsTrimming !== TrimScope.None ? this._trimStart : this.clipStart; } @computed get trimDuration() { return this.trimEnd - this.trimStart; } @@ -133,6 +135,7 @@ export class CollectionStackedTimeline extends CollectionSubView< @action public StartTrimming(scope: TrimScope) { + console.log(this.minTrimLength); this._trimStart = this.clipStart; this._trimEnd = this.clipEnd; this._trimming = scope; @@ -144,6 +147,11 @@ export class CollectionStackedTimeline extends CollectionSubView< this._trimming = TrimScope.None; } + @action + public setZoom(change: number) { + this._zoomFactor = Math.max(1, this._zoomFactor + change); + } + anchorStart = (anchor: Doc) => NumCast(anchor._timecodeToShow, NumCast(anchor[this.props.startTag])); anchorEnd = (anchor: Doc, val: any = null) => NumCast(anchor._timecodeToHide, NumCast(anchor[this.props.endTag], val) ?? null); toTimeline = (screen_delta: number, width: number) => { @@ -181,6 +189,11 @@ export class CollectionStackedTimeline extends CollectionSubView< this._markerEnd = undefined; CollectionStackedTimeline.SelectingRegion = undefined; } + break; + case "Escape": + this._trimStart = this.clipStart; + this._trimStart = this.clipEnd; + this._trimming = TrimScope.None; } } } @@ -285,7 +298,7 @@ export class CollectionStackedTimeline extends CollectionSubView< this._trimStart = Math.min( Math.max( this.trimStart + (e.movementX / rect.width) * this.clipDuration, - 0 + this.clipStart ), this.trimEnd - this.minTrimLength ); @@ -311,7 +324,7 @@ export class CollectionStackedTimeline extends CollectionSubView< this._trimEnd = Math.max( Math.min( this.trimEnd + (e.movementX / rect.width) * this.clipDuration, - this.clipStart + this.clipDuration + this.clipEnd ), this.trimStart + this.minTrimLength ); @@ -560,6 +573,7 @@ export class CollectionStackedTimeline extends CollectionSubView< ref={(timeline: HTMLDivElement | null) => (this._timeline = timeline)} onClick={(e) => this.isContentActive() && StopEvent(e)} onPointerDown={(e) => this.isContentActive() && this.onPointerDownTimeline(e)} + style={{ width: `${this._zoomFactor * 100}%` }} > {drawAnchors.map((d) => { const start = this.anchorStart(d.anchor); @@ -854,19 +868,19 @@ class StackedTimelineAnchor extends React.Component<StackedTimelineAnchorProps> {inner.view} {!inner.anchor.view || !SelectionManager.IsSelected(inner.anchor.view) ? null : ( - <> - <div - key="left" - className="collectionStackedTimeline-left-resizer" - onPointerDown={(e) => this.onAnchorDown(e, this.props.mark, true)} - /> - <div - key="right" - className="collectionStackedTimeline-resizer" - onPointerDown={(e) => this.onAnchorDown(e, this.props.mark, false)} - /> - </> - )} + <> + <div + key="left" + className="collectionStackedTimeline-left-resizer" + onPointerDown={(e) => this.onAnchorDown(e, this.props.mark, true)} + /> + <div + key="right" + className="collectionStackedTimeline-resizer" + onPointerDown={(e) => this.onAnchorDown(e, this.props.mark, false)} + /> + </> + )} </> ); } diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index b1f049700..23c90de8a 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -419,12 +419,12 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp finishTrim = action(() => { this.Pause(); this.setPlayheadTime(Math.max(Math.min(this.timeline?.trimEnd || 0, this.player!.currentTime), this.timeline?.trimStart || 0)); - this._stackedTimeline.current?.StopTrimming(); + this.timeline?.StopTrimming(); }); startTrim = (scope: TrimScope) => { this.Pause(); - this._stackedTimeline.current?.StartTrimming(scope); + this.timeline?.StartTrimming(scope); } onClipPointerDown = (e: React.PointerEvent) => { @@ -441,7 +441,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp playLink = (doc: Doc) => { const startTime = Math.max(0, (this._stackedTimeline.current?.anchorStart(doc) || 0)); - const endTime = this._stackedTimeline.current?.anchorEnd(doc); + const endTime = this.timeline?.anchorEnd(doc); if (startTime !== undefined) { if (!this.layoutDoc.dontAutoPlayFollowedLinks) endTime ? this.playFrom(startTime, endTime) : this.playFrom(startTime); else this.Seek(startTime); |