fixed trimming already trimmed clips.

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}