added trim button to video

1 files changed, 18 insertions, 0 deletions

diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 896f6ff88..a8ea1ed90 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -417,6 +417,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     @undoBatch
     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();
     });
 
@@ -425,6 +426,18 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         this._stackedTimeline.current?.StartTrimming(scope);
     }
 
+    onClipPointerDown = (e: React.PointerEvent) => {
+        this.heightPercent >= 100 && this.onTimelineHdlDown(e);
+        this.timeline && setupMoveUpEvents(this, e, returnFalse, returnFalse, action((e: PointerEvent, doubleTap?: boolean) => {
+            if (doubleTap) {
+                this.startTrim(TrimScope.All);
+            } else if (this.timeline) {
+                this.Pause();
+                this.timeline.IsTrimming !== TrimScope.None ? this.finishTrim() : this.startTrim(TrimScope.Clip);
+            }
+        }));
+    }
+
     playLink = (doc: Doc) => {
         const startTime = Math.max(0, (this._stackedTimeline.current?.anchorStart(doc) || 0));
         const endTime = this._stackedTimeline.current?.anchorEnd(doc);
@@ -534,6 +547,11 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 <div className="videoBox-timelineButton" onPointerDown={this.onTimelineHdlDown}>
                     <FontAwesomeIcon icon="eye" size="lg" />
                 </div>
+            </Tooltip>,
+            <Tooltip title={<div className="dash-tooltip">{this.timeline?.IsTrimming !== TrimScope.None ? "finish trimming" : "start trim"}</div>} key="trim" placement="bottom">
+                <div className="videoBox-timelineButton" onPointerDown={this.onClipPointerDown}>
+                    <FontAwesomeIcon icon={this.timeline?.IsTrimming !== TrimScope.None ? "check" : "cut"} size="lg" />
+                </div>
             </Tooltip>,]}
         </div>;
     }