diff options
| -rw-r--r-- | src/client/views/collections/CollectionStackedTimeline.tsx | 14 | ||||
| -rw-r--r-- | src/client/views/nodes/AudioBox.tsx | 10 | ||||
| -rw-r--r-- | src/client/views/nodes/VideoBox.tsx | 2 |
3 files changed, 14 insertions, 12 deletions
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx index 0985e5b2e..12d70c05d 100644 --- a/src/client/views/collections/CollectionStackedTimeline.tsx +++ b/src/client/views/collections/CollectionStackedTimeline.tsx @@ -63,6 +63,8 @@ export type CollectionStackedTimelineProps = { dictationKey: string; rawDuration: number; trimming: boolean; + clipStart: number; + clipEnd: number; trimStart: () => number; trimEnd: () => number; trimDuration: number; @@ -332,7 +334,7 @@ export class CollectionStackedTimeline extends CollectionSubView< this.props.setEndTrim(Math.max( Math.min( this.trimEnd + (e.movementX / rect.width) * this.duration, - this.duration + this.props.clipStart + this.duration ), this.trimStart + this.minLength )); @@ -582,7 +584,7 @@ export class CollectionStackedTimeline extends CollectionSubView< start + (10 / timelineContentWidth) * this.duration ); const left = this.props.trimming ? - (start / this.duration) * timelineContentWidth + ((start - this.props.clipStart) / this.duration) * timelineContentWidth : Math.max((start - this.trimStart) / this.props.trimDuration * timelineContentWidth, 0); const top = (d.level / maxLevel) * this.timelineContentHeight() + 15; const timespan = end - start; @@ -631,7 +633,7 @@ export class CollectionStackedTimeline extends CollectionSubView< className="collectionStackedTimeline-current" style={{ left: this.props.trimming - ? `${(this.currentTime / this.duration) * 100}%` + ? `${((this.currentTime - this.props.clipStart) / this.duration) * 100}%` : `${(this.currentTime - this.trimStart) / (this.trimEnd - this.trimStart) * 100}%`, }} /> @@ -640,13 +642,13 @@ export class CollectionStackedTimeline extends CollectionSubView< <> <div className="collectionStackedTimeline-trim-shade" - style={{ width: `${(this.trimStart / this.duration) * 100}%` }} + style={{ width: `${((this.trimStart - this.props.clipStart) / this.duration) * 100}%` }} ></div> <div className="collectionStackedTimeline-trim-controls" style={{ - left: `${(this.trimStart / this.duration) * 100}%`, + left: `${((this.trimStart - this.props.clipStart) / this.duration) * 100}%`, width: `${((this.trimEnd - this.trimStart) / this.duration) * 100 }%`, }} @@ -664,7 +666,7 @@ export class CollectionStackedTimeline extends CollectionSubView< <div className="collectionStackedTimeline-trim-shade" style={{ - left: `${(this.trimEnd / this.duration) * 100}%`, + left: `${((this.trimEnd - this.props.clipStart) / this.duration) * 100}%`, width: `${((this.duration - this.trimEnd) / this.duration) * 100 }%`, }} diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index bde1a3d72..918933194 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -77,6 +77,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent< @observable _trimming: boolean = false; @observable _trimStart: number = NumCast(this.layoutDoc.clipStart); @observable _trimEnd: number | undefined = Cast(this.layoutDoc.clipEnd, "number"); + @computed get clipStart() { return NumCast(this.layoutDoc.clipStart); } + @computed get clipEnd() { return NumCast(this.layoutDoc.clipEnd, this.duration); } @computed get trimStart() { return this._trimming ? this._trimStart : NumCast(this.layoutDoc.clipStart); } @computed get trimEnd() { return this._trimming && this._trimEnd !== undefined ? this._trimEnd : NumCast(this.layoutDoc.clipEnd, this.duration); @@ -181,9 +183,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent< this.mediaState = this.path ? "paused" : undefined; - this.layoutDoc.clipStart = this.layoutDoc.clipStart ? this.layoutDoc.clipStart : 0; - this.layoutDoc.clipEnd = this.layoutDoc.clipEnd ? this.layoutDoc.clipEnd : this.duration ? this.duration : undefined; - this.path && this.setAnchorTime(NumCast(this.layoutDoc.clipStart)); this.path && this.timecodeChanged(); @@ -496,9 +495,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent< // shows trim controls @action startTrim = () => { - if (!this.duration) { - this.timecodeChanged(); - } if (this.mediaState === "playing") { this.Pause(); } @@ -581,6 +577,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent< playLink={this.playLink} PanelWidth={this.timelineWidth} PanelHeight={this.timelineHeight} + clipStart={this.clipStart} + clipEnd={this.clipEnd} trimming={this._trimming} trimStart={this.trimStartFunc} trimEnd={this.trimEndFunc} diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 84eeacc29..2485e7658 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -551,6 +551,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp Pause={this.Pause} playLink={this.playLink} PanelHeight={this.timelineHeight} + clipStart={0} + clipEnd={this.duration} trimming={false} trimStart={returnZero} trimEnd={this.trimEndFunc} |