diff options
| -rw-r--r-- | src/client/views/collections/CollectionStackedTimeline.tsx | 58 | ||||
| -rw-r--r-- | src/client/views/nodes/AudioBox.tsx | 7 | ||||
| -rw-r--r-- | src/client/views/nodes/VideoBox.tsx | 6 |
3 files changed, 36 insertions, 35 deletions
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx index 12d70c05d..8b937c278 100644 --- a/src/client/views/collections/CollectionStackedTimeline.tsx +++ b/src/client/views/collections/CollectionStackedTimeline.tsx @@ -50,7 +50,7 @@ import { DragManager } from "../../util/DragManager"; type PanZoomDocument = makeInterface<[]>; const PanZoomDocument = makeInterface(); export type CollectionStackedTimelineProps = { - duration: number; + clipDuration: number; Play: () => void; Pause: () => void; playLink: (linkDoc: Doc) => void; @@ -67,7 +67,7 @@ export type CollectionStackedTimelineProps = { clipEnd: number; trimStart: () => number; trimEnd: () => number; - trimDuration: number; + trimDuration: () => number; setStartTrim: (newStart: number) => void; setEndTrim: (newEnd: number) => void; }; @@ -91,7 +91,7 @@ export class CollectionStackedTimeline extends CollectionSubView< get minLength() { const rect = this._timeline?.getBoundingClientRect(); if (rect) { - return 0.05 * this.duration; + return 0.05 * this.clipDuration; } return 0; } @@ -104,8 +104,8 @@ export class CollectionStackedTimeline extends CollectionSubView< return this.props.trimEnd(); } - get duration() { - return this.props.duration; + get clipDuration() { + return this.props.clipDuration; } @computed get currentTime() { @@ -116,8 +116,8 @@ export class CollectionStackedTimeline extends CollectionSubView< <div className="collectionStackedTimeline-selector" style={{ - left: `${((Math.min(this._markerStart, this._markerEnd) - this.trimStart) / this.props.trimDuration) * 100}%`, - width: `${(Math.abs(this._markerStart - this._markerEnd) / this.props.trimDuration) * 100}%`, + left: `${((Math.min(this._markerStart, this._markerEnd) - this.trimStart) / this.props.trimDuration()) * 100}%`, + width: `${(Math.abs(this._markerStart - this._markerEnd) / this.props.trimDuration()) * 100}%`, }} /> ); @@ -166,7 +166,7 @@ export class CollectionStackedTimeline extends CollectionSubView< toTimeline = (screen_delta: number, width: number) => { return Math.max( this.trimStart, - Math.min(this.trimEnd, (screen_delta / width) * this.props.trimDuration + this.trimStart)); + Math.min(this.trimEnd, (screen_delta / width) * this.props.trimDuration() + this.trimStart)); } rangeClickScript = () => CollectionStackedTimeline.RangeScript; @@ -283,10 +283,10 @@ export class CollectionStackedTimeline extends CollectionSubView< undefined, () => { !wasPlaying && - (this.props.trimming && this.duration ? - this.props.setTime(((clientX - rect.x) / rect.width) * this.duration) + (this.props.trimming && this.clipDuration ? + this.props.setTime(((clientX - rect.x) / rect.width) * this.clipDuration) : - this.props.setTime(((clientX - rect.x) / rect.width) * this.props.trimDuration + this.trimStart) + this.props.setTime(((clientX - rect.x) / rect.width) * this.props.trimDuration() + this.trimStart) ); } ); @@ -305,7 +305,7 @@ export class CollectionStackedTimeline extends CollectionSubView< if (rect && this.props.isContentActive()) { this.props.setStartTrim(Math.min( Math.max( - this.trimStart + (e.movementX / rect.width) * this.duration, + this.trimStart + (e.movementX / rect.width) * this.clipDuration, 0 ), this.trimEnd - this.minLength @@ -333,8 +333,8 @@ export class CollectionStackedTimeline extends CollectionSubView< if (rect && this.props.isContentActive()) { this.props.setEndTrim(Math.max( Math.min( - this.trimEnd + (e.movementX / rect.width) * this.duration, - this.props.clipStart + this.duration + this.trimEnd + (e.movementX / rect.width) * this.clipDuration, + this.props.clipStart + this.clipDuration ), this.trimStart + this.minLength )); @@ -344,7 +344,7 @@ export class CollectionStackedTimeline extends CollectionSubView< emptyFunction, action((e, doubleTap) => { if (doubleTap) { - this.props.setEndTrim(this.duration); + this.props.setEndTrim(this.clipDuration); } }) ); @@ -362,8 +362,8 @@ export class CollectionStackedTimeline extends CollectionSubView< const timelineContentWidth = this.props.PanelWidth(); for (let i = 0; i < docDragData.droppedDocuments.length; i++) { const d = Doc.GetProto(docDragData.droppedDocuments[i]); - d._timecodeToHide = x / timelineContentWidth * this.props.trimDuration + NumCast(d._timecodeToHide) - NumCast(d._timecodeToShow); - d._timecodeToShow = x / timelineContentWidth * this.props.trimDuration; + d._timecodeToHide = x / timelineContentWidth * this.props.trimDuration() + NumCast(d._timecodeToHide) - NumCast(d._timecodeToShow); + d._timecodeToShow = x / timelineContentWidth * this.props.trimDuration(); } return true; @@ -469,7 +469,7 @@ export class CollectionStackedTimeline extends CollectionSubView< const x1 = this.anchorStart(m); const x2 = this.anchorEnd( m, - x1 + (10 / timelineContentWidth) * this.duration + x1 + (10 / timelineContentWidth) * this.clipDuration ); let max = 0; const overlappedLevels = new Set( @@ -544,7 +544,7 @@ export class CollectionStackedTimeline extends CollectionSubView< <div className="collectionStackedTimeline-waveform"> <AudioWaveform rawDuration={this.props.rawDuration} - duration={this.duration} + duration={this.clipDuration} mediaPath={this.props.mediaPath} layoutDoc={this.layoutDoc} PanelHeight={this.timelineContentHeight} @@ -581,14 +581,14 @@ export class CollectionStackedTimeline extends CollectionSubView< const start = this.anchorStart(d.anchor); const end = this.anchorEnd( d.anchor, - start + (10 / timelineContentWidth) * this.duration + start + (10 / timelineContentWidth) * this.clipDuration ); const left = this.props.trimming ? - ((start - this.props.clipStart) / this.duration) * timelineContentWidth - : Math.max((start - this.trimStart) / this.props.trimDuration * timelineContentWidth, 0); + ((start - this.props.clipStart) / this.clipDuration) * timelineContentWidth + : Math.max((start - this.trimStart) / this.props.trimDuration() * timelineContentWidth, 0); const top = (d.level / maxLevel) * this.timelineContentHeight() + 15; const timespan = end - start; - const width = (timespan / this.duration) * timelineContentWidth; + const width = (timespan / this.clipDuration) * timelineContentWidth; const height = (this.timelineContentHeight()) / maxLevel; return this.props.Document.hideAnchors ? null : ( <div @@ -633,7 +633,7 @@ export class CollectionStackedTimeline extends CollectionSubView< className="collectionStackedTimeline-current" style={{ left: this.props.trimming - ? `${((this.currentTime - this.props.clipStart) / this.duration) * 100}%` + ? `${((this.currentTime - this.props.clipStart) / this.clipDuration) * 100}%` : `${(this.currentTime - this.trimStart) / (this.trimEnd - this.trimStart) * 100}%`, }} /> @@ -642,14 +642,14 @@ export class CollectionStackedTimeline extends CollectionSubView< <> <div className="collectionStackedTimeline-trim-shade" - style={{ width: `${((this.trimStart - this.props.clipStart) / this.duration) * 100}%` }} + style={{ width: `${((this.trimStart - this.props.clipStart) / this.clipDuration) * 100}%` }} ></div> <div className="collectionStackedTimeline-trim-controls" style={{ - left: `${((this.trimStart - this.props.clipStart) / this.duration) * 100}%`, - width: `${((this.trimEnd - this.trimStart) / this.duration) * 100 + left: `${((this.trimStart - this.props.clipStart) / this.clipDuration) * 100}%`, + width: `${((this.trimEnd - this.trimStart) / this.clipDuration) * 100 }%`, }} > @@ -666,8 +666,8 @@ export class CollectionStackedTimeline extends CollectionSubView< <div className="collectionStackedTimeline-trim-shade" style={{ - left: `${((this.trimEnd - this.props.clipStart) / this.duration) * 100}%`, - width: `${((this.duration - this.trimEnd) / this.duration) * 100 + left: `${((this.trimEnd - this.props.clipStart) / this.clipDuration) * 100}%`, + width: `${((this.clipDuration - this.trimEnd) / this.clipDuration) * 100 }%`, }} ></div> diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 918933194..f6d6ff440 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -546,6 +546,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent< timelineWidth = () => this.props.PanelWidth() - AudioBox.playheadWidth; trimEndFunc = () => this.trimEnd; trimStartFunc = () => this.trimStart; + trimDurationFunc = () => this.trimDuration; @computed get renderTimeline() { return ( <CollectionStackedTimeline @@ -560,8 +561,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent< focus={DocUtils.DefaultFocus} bringToFront={emptyFunction} CollectionView={undefined} - rawDuration={this.rawDuration} - duration={this.duration} playFrom={this.playFrom} setTime={this.setAnchorTime} playing={this.playing} @@ -577,12 +576,14 @@ export class AudioBox extends ViewBoxAnnotatableComponent< playLink={this.playLink} PanelWidth={this.timelineWidth} PanelHeight={this.timelineHeight} + rawDuration={this.rawDuration} clipStart={this.clipStart} clipEnd={this.clipEnd} + clipDuration={this.duration} trimming={this._trimming} trimStart={this.trimStartFunc} trimEnd={this.trimEndFunc} - trimDuration={this.trimDuration} + trimDuration={this.trimDurationFunc} setStartTrim={this.setStartTrim} setEndTrim={this.setEndTrim} /> diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 2485e7658..8b33842ff 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -538,8 +538,6 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp endTag={"_timecodeToHide" /* videoEnd */} bringToFront={emptyFunction} CollectionView={undefined} - duration={this.duration} - rawDuration={this.duration} playFrom={this.playFrom} setTime={this.setAnchorTime} playing={this.playing} @@ -551,12 +549,14 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp Pause={this.Pause} playLink={this.playLink} PanelHeight={this.timelineHeight} + rawDuration={this.duration} + clipDuration={this.duration} clipStart={0} clipEnd={this.duration} trimming={false} trimStart={returnZero} trimEnd={this.trimEndFunc} - trimDuration={this.duration} + trimDuration={this.trimEndFunc} setStartTrim={emptyFunction} setEndTrim={emptyFunction} /> |