From 0046f6eab6ec28b509398b5184922296014a66d0 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 21 Sep 2022 13:24:02 -0400
Subject:  added cropping for videos.  made images render at full res when
 selected.

---
 src/client/views/nodes/VideoBox.tsx | 53 +++++++++++++++++++++++++++++++++++--
 1 file changed, 51 insertions(+), 2 deletions(-)

(limited to 'src/client/views/nodes/VideoBox.tsx')

diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index b45ee7f6e..ac472aa89 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -30,6 +30,7 @@ import { StyleProp } from '../StyleProvider';
 import { FieldView, FieldViewProps } from './FieldView';
 import { RecordingBox } from './RecordingBox';
 import './VideoBox.scss';
+import { ObjectField } from '../../../fields/ObjectField';
 const path = require('path');
 
 /**
@@ -397,7 +398,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     // sets video info on load
     videoLoad = action(() => {
         const aspect = this.player!.videoWidth / (this.player!.videoHeight || 1);
-        if (aspect) {
+        if (aspect && !this.dataDoc.viewScaleMin) {
             Doc.SetNativeWidth(this.dataDoc, this.player!.videoWidth);
             Doc.SetNativeHeight(this.dataDoc, this.player!.videoHeight);
             this.layoutDoc._height = NumCast(this.layoutDoc._width) / aspect;
@@ -570,7 +571,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                         key="video"
                         autoPlay={this._screenCapture}
                         ref={this.setVideoRef}
-                        style={this._fullScreen ? this.fullScreenSize() : {}}
+                        style={this._fullScreen ? this.fullScreenSize() : this.dataDoc.viewScaleMin ? { width: 'max-content', height: 'max-content', transform: `scale(${1 / NumCast(this.rootDoc._viewScale)})`, transformOrigin: 'top left' } : {}}
                         onCanPlay={this.videoLoad}
                         controls={VideoBox._nativeControls}
                         onPlay={() => this.Play()}
@@ -986,6 +987,53 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         return <div className="videoBox-annotationLayer" style={{ transition: this.transition, height: `${this.heightPercent}%` }} ref={this._annotationLayer} />;
     }
 
+    crop = (region: Doc | undefined, addCrop?: boolean) => {
+        if (!region) return;
+        const cropping = Doc.MakeCopy(region, true);
+        Doc.GetProto(region).backgroundColor = 'transparent';
+        Doc.GetProto(region).lockedPosition = true;
+        Doc.GetProto(region).title = 'region:' + this.rootDoc.title;
+        Doc.GetProto(region).isPushpin = true;
+        region._timecodeToHide = region._timecodeToShow;
+        this.addDocument(region);
+        const anchx = NumCast(cropping.x);
+        const anchy = NumCast(cropping.y);
+        const anchw = NumCast(cropping._width);
+        const anchh = NumCast(cropping._height);
+        const viewScale = NumCast(this.rootDoc[this.fieldKey + '-nativeWidth']) / anchw;
+        cropping.title = 'crop: ' + this.rootDoc.title;
+        cropping.x = NumCast(this.rootDoc.x) + NumCast(this.rootDoc._width);
+        cropping.y = NumCast(this.rootDoc.y);
+        cropping._width = anchw * (this.props.NativeDimScaling?.() || 1);
+        cropping._height = anchh * (this.props.NativeDimScaling?.() || 1);
+        cropping.timecodeToHide = undefined;
+        cropping.timecodeToShow = undefined;
+        cropping.isLinkButton = undefined;
+        const croppingProto = Doc.GetProto(cropping);
+        croppingProto.annotationOn = undefined;
+        croppingProto.isPrototype = true;
+        croppingProto.proto = Cast(this.rootDoc.proto, Doc, null)?.proto; // set proto of cropping's data doc to be IMAGE_PROTO
+        croppingProto.type = DocumentType.VID;
+        croppingProto.layout = VideoBox.LayoutString('data');
+        croppingProto.data = ObjectField.MakeCopy(this.rootDoc[this.fieldKey] as ObjectField);
+        croppingProto['data-nativeWidth'] = anchw;
+        croppingProto['data-nativeHeight'] = anchh;
+        croppingProto.currentTimecode = this.layoutDoc._currentTimecode;
+        croppingProto.viewScale = viewScale;
+        croppingProto.viewScaleMin = viewScale;
+        croppingProto.panX = anchx / viewScale;
+        croppingProto.panY = anchy / viewScale;
+        croppingProto.panXMin = anchx / viewScale;
+        croppingProto.panXMax = anchw / viewScale;
+        croppingProto.panYMin = anchy / viewScale;
+        croppingProto.panYMax = anchh / viewScale;
+        if (addCrop) {
+            DocUtils.MakeLink({ doc: region }, { doc: cropping }, 'cropped image', '');
+        }
+        this.props.bringToFront(cropping);
+        return cropping;
+    };
+
     savedAnnotations = () => this._savedAnnotations;
     render() {
         const borderRad = this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BorderRounding);
@@ -1048,6 +1096,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                             savedAnnotations={this.savedAnnotations}
                             annotationLayer={this._annotationLayer.current}
                             mainCont={this._mainCont.current}
+                            anchorMenuCrop={this.crop}
                         />
                     )}
                     {this.renderTimeline}
-- 
cgit v1.2.3-70-g09d2


From 4484aff465c8f4f242b98d31558483eff245ab95 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 21 Sep 2022 13:31:20 -0400
Subject: no video ui for cropped videos

---
 src/client/views/nodes/VideoBox.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

(limited to 'src/client/views/nodes/VideoBox.tsx')

diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index ac472aa89..aabe3eb25 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -398,7 +398,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     // sets video info on load
     videoLoad = action(() => {
         const aspect = this.player!.videoWidth / (this.player!.videoHeight || 1);
-        if (aspect && !this.dataDoc.viewScaleMin) {
+        if (aspect && !this.isCropped) {
             Doc.SetNativeWidth(this.dataDoc, this.player!.videoWidth);
             Doc.SetNativeHeight(this.dataDoc, this.player!.videoHeight);
             this.layoutDoc._height = NumCast(this.layoutDoc._width) / aspect;
@@ -571,7 +571,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                         key="video"
                         autoPlay={this._screenCapture}
                         ref={this.setVideoRef}
-                        style={this._fullScreen ? this.fullScreenSize() : this.dataDoc.viewScaleMin ? { width: 'max-content', height: 'max-content', transform: `scale(${1 / NumCast(this.rootDoc._viewScale)})`, transformOrigin: 'top left' } : {}}
+                        style={this._fullScreen ? this.fullScreenSize() : this.isCropped ? { width: 'max-content', height: 'max-content', transform: `scale(${1 / NumCast(this.rootDoc._viewScale)})`, transformOrigin: 'top left' } : {}}
                         onCanPlay={this.videoLoad}
                         controls={VideoBox._nativeControls}
                         onPlay={() => this.Play()}
@@ -928,7 +928,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         const xPos = xf.transformPoint(vidWidth / 2, 0)[0];
         const xRight = xf.transformPoint(vidWidth, 0)[0];
         const opacity = this._scrubbing ? 0.3 : this._controlsVisible ? 1 : 0;
-        return this._fullScreen || (xRight - xPos) * 2 < 50 ? null : (
+        return this._fullScreen || this.isCropped || (xRight - xPos) * 2 < 50 ? null : (
             <div className="videoBox-ui-wrapper" style={{ clip: `rect(${boundsTop}px, 10000px, 10000px, ${boundsLeft}px)` }}>
                 <div
                     className="videoBox-ui"
@@ -987,6 +987,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         return <div className="videoBox-annotationLayer" style={{ transition: this.transition, height: `${this.heightPercent}%` }} ref={this._annotationLayer} />;
     }
 
+    @computed get isCropped() {
+        return this.dataDoc.viewScaleMin; // bcz: hack to identify a cropped video
+    }
     crop = (region: Doc | undefined, addCrop?: boolean) => {
         if (!region) return;
         const cropping = Doc.MakeCopy(region, true);
-- 
cgit v1.2.3-70-g09d2

