if same youtube video is uploaded, reuse the existing file without downloading again. removed failed uploads from parsed_files. change pinWithView to highlight the pinned view region. Give pinWithView collections an option to just pan or zoom to % of screen size.

2 files changed, 39 insertions, 4 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 6927d429d..3cc425745 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -88,6 +88,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     private _cachedPool: Map<string, PoolData> = new Map();
     private _lastTap = 0;
     private _batch: UndoManager.Batch | undefined = undefined;
+    private _brushtimer: any;
+    private _brushtimer1: any;
 
     // private isWritingMode: boolean = true;
     // private writingModeDocs: Doc[] = [];
@@ -114,6 +116,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     @observable _marqueeRef = React.createRef<HTMLDivElement>();
     @observable _marqueeViewRef = React.createRef<MarqueeView>();
     @observable ChildDrag: DocumentView | undefined; // child document view being dragged.  needed to update drop areas of groups when a group item is dragged.
+    @observable _brushedView = { width: 0, height: 0, panX: 0, panY: 0, opacity: 0 }; // highlighted region of freeform canvas used by presentations to indicate a region
 
     @computed get views() {
         const viewsMask = this._layoutElements.filter(ele => ele.bounds && !ele.bounds.z && ele.inkMask !== -1 && ele.inkMask !== undefined).map(ele => ele.ele);
@@ -1520,6 +1523,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     componentDidMount() {
         super.componentDidMount?.();
         this.props.setContentView?.(this);
+        this.props.setBrushViewer?.(this.brushView);
         setTimeout(
             action(() => {
                 this._firstRender = false;
@@ -1881,6 +1885,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                         </div>
                     ) : null}
                     <CollectionFreeFormViewPannableContents
+                        brushView={this._brushedView}
                         isAnnotationOverlay={this.isAnnotationOverlay}
                         isAnnotationOverlayScrollable={this.props.isAnnotationOverlayScrollable}
                         transform={this.contentTransform}
@@ -1916,9 +1921,25 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         }
     };
 
+    @action
+    brushView = (viewport: { width: number; height: number; panX: number; panY: number }) => {
+        this._brushedView = { ...viewport, panX: viewport.panX - viewport.width / 2, panY: viewport.panY - viewport.height / 2, opacity: 1 };
+        this._brushtimer1 && clearTimeout(this._brushtimer1);
+        this._brushtimer && clearTimeout(this._brushtimer);
+        this._brushtimer1 = setTimeout(
+            action(() => {
+                this._brushedView.opacity = 0;
+                this._brushtimer = setTimeout(
+                    action(() => (this._brushedView = { width: 0, height: 0, panX: 0, panY: 0, opacity: 0 })),
+                    500
+                );
+            }),
+            1000
+        );
+    };
+
     render() {
         TraceMobx();
-        const clientRect = this._mainCont?.getBoundingClientRect();
         return (
             <div
                 className={'collectionfreeformview-container'}
@@ -2004,6 +2025,7 @@ interface CollectionFreeFormViewPannableContentsProps {
     presPinView?: boolean;
     isAnnotationOverlay: boolean | undefined;
     isAnnotationOverlayScrollable: boolean | undefined;
+    brushView: { panX: number; panY: number; width: number; height: number; opacity: number };
 }
 
 @observer
@@ -2123,6 +2145,21 @@ class CollectionFreeFormViewPannableContents extends React.Component<CollectionF
                     //willChange: "transform"
                 }}>
                 {this.props.children()}
+                {!this.props.brushView.width ? null : (
+                    <div
+                        className="collectionFreeFormView-brushView"
+                        style={{
+                            zIndex: 1000,
+                            opacity: this.props.brushView.opacity,
+                            border: 'orange solid 2px',
+                            position: 'absolute',
+                            transform: `translate(${this.props.brushView.panX}px, ${this.props.brushView.panY}px)`,
+                            width: this.props.brushView.width,
+                            height: this.props.brushView.height,
+                            transition: 'opacity 2s',
+                        }}
+                    />
+                )}
                 {this.presPaths}
                 {this.progressivize}
                 {this.zoomProgressivize}
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 58a00bbac..584c9690f 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -425,13 +425,11 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
     @undoBatch
     @action
     pinWithView = async () => {
-        const scale = Math.min(this.props.PanelWidth() / this.Bounds.width, this.props.PanelHeight() / this.Bounds.height);
         const doc = this.props.Document;
         const viewOptions: PinViewProps = {
             bounds: this.Bounds,
-            scale: scale,
         };
-        TabDocView.PinDoc(doc, { pinWithView: viewOptions });
+        TabDocView.PinDoc(doc, { pinWithView: viewOptions, pinDocView: true });
         MarqueeOptionsMenu.Instance.fadeOut(true);
         this.hideMarquee();
     };