merging

1 files changed, 27 insertions, 20 deletions

diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index fb58ddefc..263fd5a19 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -26,6 +26,8 @@ import { StyleProp } from "../StyleProvider";
 import { FieldView, FieldViewProps } from './FieldView';
 import { LinkDocPreview } from "./LinkDocPreview";
 import "./VideoBox.scss";
+import { DragManager } from "../../util/DragManager";
+import { DocumentManager } from "../../util/DocumentManager";
 const path = require('path');
 
 type VideoDocument = makeInterface<[typeof documentSchema]>;
@@ -137,7 +139,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         }
     }
 
-    @action public Snapshot() {
+    @action public Snapshot(downX?: number, downY?: number) {
         const width = (this.layoutDoc._width || 0);
         const height = (this.layoutDoc._height || 0);
         const canvas = document.createElement('canvas');
@@ -176,11 +178,11 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             const retitled = StrCast(this.rootDoc.title).replace(/[ -\.]/g, "");
             const filename = path.basename(encodeURIComponent("snapshot" + retitled + "_" + (this.layoutDoc._currentTimecode || 0).toString().replace(/\./, "_")));
             VideoBox.convertDataUri(dataUrl, filename).then((returnedFilename: string) =>
-                returnedFilename && this.createRealSummaryLink(returnedFilename));
+                returnedFilename && this.createRealSummaryLink(returnedFilename, downX, downY));
         }
     }
 
-    private createRealSummaryLink = (relative: string) => {
+    private createRealSummaryLink = (relative: string, downX?: number, downY?: number) => {
         const url = this.choosePath(Utils.prepend(relative));
         const width = this.layoutDoc._width || 1;
         const height = this.layoutDoc._height || 0;
@@ -192,7 +194,10 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         Doc.SetNativeWidth(Doc.GetProto(imageSummary), Doc.NativeWidth(this.layoutDoc));
         Doc.SetNativeHeight(Doc.GetProto(imageSummary), Doc.NativeHeight(this.layoutDoc));
         this.props.addDocument?.(imageSummary);
-        DocUtils.MakeLink({ doc: imageSummary }, { doc: this.getAnchor() }, "video snapshot");
+        const link = DocUtils.MakeLink({ doc: imageSummary }, { doc: this.getAnchor() }, "video snapshot");
+        link && (Doc.GetProto(link.anchor2 as Doc).timecodeToHide = NumCast((link.anchor2 as Doc).timecodeToShow) + 3);
+        setTimeout(() =>
+            (downX !== undefined && downY !== undefined) && DocumentManager.Instance.getFirstDocumentView(imageSummary)?.startDragging(downX, downY, "move", true));
     }
 
     @action
@@ -383,7 +388,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             <span>{"" + formatTime(curTime)}</span>
             <span style={{ fontSize: 8 }}>{" " + Math.round((curTime - Math.trunc(curTime)) * 100)}</span>
         </div>,
-        <div className="videoBox-snapshot" key="snap" onClick={this.onSnapshot} >
+        <div className="videoBox-snapshot" key="snap" onPointerDown={this.onSnapshotDown} >
             <FontAwesomeIcon icon="camera" size="lg" />
         </div>,
         <div className="videoBox-timelineButton" key="timeline" onPointerDown={this.onTimelineHdlDown} style={{ bottom: `${100 - this.heightPercent}%` }}>
@@ -409,10 +414,11 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         e.preventDefault();
     }
 
-    onSnapshot = (e: React.MouseEvent) => {
-        this.Snapshot();
-        e.stopPropagation();
-        e.preventDefault();
+    onSnapshotDown = (e: React.PointerEvent) => {
+        setupMoveUpEvents(this, e, (e) => {
+            this.Snapshot(e.clientX, e.clientY);
+            return true;
+        }, emptyFunction, () => this.Snapshot());
     }
 
     onTimelineHdlDown = action((e: React.PointerEvent) => {
@@ -492,7 +498,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     }
 
     playLink = (doc: Doc) => {
-        const startTime = Math.max(0, (this._stackedTimeline.current?.anchorStart(doc) || 0) - .25);
+        const startTime = Math.max(0, (this._stackedTimeline.current?.anchorStart(doc) || 0));
         const endTime = this._stackedTimeline.current?.anchorEnd(doc);
         if (startTime !== undefined) {
             if (!this.layoutDoc.dontAutoPlayFollowedLinks) endTime ? this.playFrom(startTime, endTime) : this.playFrom(startTime);
@@ -567,22 +573,22 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             <div className="videoBox-viewer" onPointerDown={this.marqueeDown} >
                 <div style={{ position: "absolute", transition: this.transition, width: this.panelWidth(), height: this.panelHeight(), top: 0, left: `${(100 - this.heightPercent) / 2}%` }}>
                     <CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "setContentView"]).omit}
+                        renderDepth={this.props.renderDepth + 1}
                         fieldKey={this.annotationKey}
+                        CollectionView={undefined}
                         isAnnotationOverlay={true}
                         annotationLayerHostsContent={true}
-                        select={emptyFunction}
-                        isContentActive={this.isContentActive}
-                        scaling={returnOne}
-                        docFilters={this.timelineDocFilter}
                         PanelWidth={this.panelWidth}
                         PanelHeight={this.panelHeight}
                         ScreenToLocalTransform={this.screenToLocalTransform}
+                        docFilters={this.timelineDocFilter}
+                        select={emptyFunction}
+                        isContentActive={this.isContentActive}
+                        scaling={returnOne}
                         whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
                         removeDocument={this.removeDocument}
                         moveDocument={this.moveDocument}
-                        addDocument={this.addDocWithTimecode}
-                        CollectionView={undefined}
-                        renderDepth={this.props.renderDepth + 1}>
+                        addDocument={this.addDocWithTimecode}>
                         {this.contentFunc}
                     </CollectionFreeFormView>
                 </div>
@@ -591,16 +597,17 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 {this.renderTimeline}
                 {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? (null) :
                     <MarqueeAnnotator
-                        scrollTop={0}
                         rootDoc={this.rootDoc}
+                        scrollTop={0}
                         down={this._marqueeing}
-                        docView={this.props.docViewPath().lastElement()}
                         scaling={this.marqueeFitScaling}
+                        docView={this.props.docViewPath().lastElement()}
                         containerOffset={this.marqueeOffset}
                         addDocument={this.addDocWithTimecode}
                         finishMarquee={this.finishMarquee}
                         savedAnnotations={this._savedAnnotations}
-                        annotationLayer={this._annotationLayer.current} mainCont={this._mainCont.current}
+                        annotationLayer={this._annotationLayer.current}
+                        mainCont={this._mainCont.current}
                     />}
             </div>
         </div >);