afixed loadingBox to show error message for unsupported videos. fixed video uploading to generate errors for unsupported (Chrome) codecs. fixed videos that don't have codec support to still play audio and show duration. fixed dragging rotated documents to show and place the rotted document WYSIWYG

7 files changed, 96 insertions, 72 deletions

diff --git a/src/client/Network.ts b/src/client/Network.ts
index c781d4b6b..a222b320f 100644
--- a/src/client/Network.ts
+++ b/src/client/Network.ts
@@ -1,57 +1,54 @@
-import { Utils } from "../Utils";
+import { Utils } from '../Utils';
 import requestPromise = require('request-promise');
-import { Upload } from "../server/SharedMediaTypes";
+import { Upload } from '../server/SharedMediaTypes';
 
 export namespace Networking {
+    export async function FetchFromServer(relativeRoute: string) {
+        return (await fetch(relativeRoute)).text();
+    }
 
-      export async function FetchFromServer(relativeRoute: string) {
-            return (await fetch(relativeRoute)).text();
-      }
+    export async function PostToServer(relativeRoute: string, body?: any) {
+        const options = {
+            uri: Utils.prepend(relativeRoute),
+            method: 'POST',
+            body,
+            json: true,
+        };
+        return requestPromise.post(options);
+    }
 
-      export async function PostToServer(relativeRoute: string, body?: any) {
-            const options = {
-                  uri: Utils.prepend(relativeRoute),
-                  method: "POST",
-                  body,
-                  json: true
-            };
-            return requestPromise.post(options);
-      }
-
-      /**
-       * Handles uploading basic file types to server and makes the API call to "/uploadFormData" endpoint 
-       * with the mapping of GUID to filem as parameters.
-       * 
-       * @param files the files to be uploaded to the server
-       * @returns the response as a json from the server
-       */
-      export async function UploadFilesToServer<T extends Upload.FileInformation = Upload.FileInformation>(files: File | File[]): Promise<Upload.FileResponse<T>[]> {
-            const formData = new FormData();
-            if (Array.isArray(files)) {
-                  if (!files.length) {
-                        return [];
-                  }
-                  files.forEach(file => formData.append(Utils.GenerateGuid(), file));
-            } else {
-                  formData.append(Utils.GenerateGuid(), files);
+    /**
+     * Handles uploading basic file types to server and makes the API call to "/uploadFormData" endpoint
+     * with the mapping of GUID to filem as parameters.
+     *
+     * @param files the files to be uploaded to the server
+     * @returns the response as a json from the server
+     */
+    export async function UploadFilesToServer<T extends Upload.FileInformation = Upload.FileInformation>(files: File | File[]): Promise<Upload.FileResponse<T>[]> {
+        const formData = new FormData();
+        if (Array.isArray(files)) {
+            if (!files.length) {
+                return [];
             }
-            const parameters = {
-                  method: 'POST',
-                  body: formData
-            };
-            const response = await fetch("/uploadFormData", parameters);
-            return response.json();
-      }
-  
-      export async function UploadYoutubeToServer<T extends Upload.FileInformation = Upload.FileInformation>(videoId: string): Promise<Upload.FileResponse<T>[]> {
-            const parameters = {
-                  method: 'POST',
-                  body: JSON.stringify({ videoId }),
-                  json: true
-            };
-            const response = await fetch("/uploadYoutubeVideo", parameters);
-            return response.json();
-      }
-    
+            files.forEach(file => formData.append(Utils.GenerateGuid(), file));
+        } else {
+            formData.append(Utils.GenerateGuid(), files);
+        }
+        const parameters = {
+            method: 'POST',
+            body: formData,
+        };
+        const response = await fetch('/uploadFormData', parameters);
+        return response.json();
+    }
 
-}
\ No newline at end of file
+    export async function UploadYoutubeToServer<T extends Upload.FileInformation = Upload.FileInformation>(videoId: string): Promise<Upload.FileResponse<T>[]> {
+        const parameters = {
+            method: 'POST',
+            body: JSON.stringify({ videoId }),
+            json: true,
+        };
+        const response = await fetch('/uploadYoutubeVideo', parameters);
+        return response.json();
+    }
+}
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index b22e16633..8c3b91177 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1849,7 +1849,12 @@ export namespace DocUtils {
                 source: { name, type },
                 result,
             } = upfiles.lastElement();
-            name && type && processFileupload(generatedDocuments, name, type, result, options, overwriteDoc);
+            if ((result as any).message) {
+                if (overwriteDoc) {
+                    overwriteDoc.isLoading = false;
+                    overwriteDoc.errorMessage = (result as any).message;
+                }
+            } else name && type && processFileupload(generatedDocuments, name, type, result, options, overwriteDoc);
         });
     }
 
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 6386c87a0..dfd916e92 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -344,8 +344,7 @@ export namespace DragManager {
         }
         Object.assign(dragDiv.style, { width: '', height: '', overflow: '' });
         dragDiv.hidden = false;
-        const scaleXs: number[] = [],
-            scaleYs: number[] = [],
+        const scalings: number[] = [],
             xs: number[] = [],
             ys: number[] = [];
 
@@ -355,8 +354,15 @@ export namespace DragManager {
             top: Number.MAX_SAFE_INTEGER,
             bottom: Number.MIN_SAFE_INTEGER,
         };
+        let rot = 0;
         const docsToDrag = dragData instanceof DocumentDragData ? dragData.draggedDocuments : dragData instanceof AnchorAnnoDragData ? [dragData.dragDocument] : [];
         const dragElements = eles.map(ele => {
+            if (ele?.parentElement?.parentElement?.parentElement?.className === 'collectionFreeFormDocumentView-container') {
+                ele = ele.parentElement.parentElement.parentElement;
+                const rotStr = ele.style.transform.replace(/.*rotate\(([-0-9.]*)deg\).*/, '$1');
+                if (rotStr) rot = Number(rotStr);
+            }
+            if (rot < 0) rot += 360;
             if (!ele.parentNode) dragDiv.appendChild(ele);
             const dragElement = ele.parentNode === dragDiv ? ele : (ele.cloneNode(true) as HTMLElement);
             const children = Array.from(dragElement.children);
@@ -376,19 +382,29 @@ export namespace DragManager {
                 }
             }
             const rect = ele.getBoundingClientRect();
-            const scaleX = rect.width / (ele.offsetWidth || rect.width);
-            const scaleY = scaleX; //ele.offsetHeight ? rect.height / (ele.offsetHeight || rect.height) : scaleX;
+            const rotWidth = (rot > 45 && rot < 135) || (rot > 215 && rot < 305) ? rect.height : rect.width; //rect.width * Math.cos((rot * Math.PI) / 180) + rect.height * Math.sin((rot * Math.PI) / 180);
+            const scaling = rot ? rotWidth / ele.offsetWidth : rect.width / (ele.offsetWidth || rect.width);
 
             elesCont.left = Math.min(rect.left, elesCont.left);
             elesCont.top = Math.min(rect.top, elesCont.top);
             elesCont.right = Math.max(rect.right, elesCont.right);
             elesCont.bottom = Math.max(rect.bottom, elesCont.bottom);
-            xs.push(rect.left + (options?.offsetX || 0));
-            ys.push(rect.top + (options?.offsetY || 0));
-            scaleXs.push(scaleX);
-            scaleYs.push(scaleY);
+            const rotRad = (rot / 180) * Math.PI;
+            xs.push(
+                (rot > 90 && rot <= 270 ? rect.right : rect.left) + //
+                    (rot > 270 ? -scaling * (ele.offsetHeight * Math.sin(rotRad)) : 0) +
+                    (rot <= 90 || rot > 180 ? scaling * (ele.offsetHeight * Math.sin(rotRad)) : 0) +
+                    (options?.offsetX || 0)
+            );
+            ys.push(
+                rect.top + //
+                    (rot > 180 ? -scaling * (ele.offsetWidth * Math.sin(rotRad)) : 0) +
+                    (rot >= 90 && rot < 270 ? -scaling * (ele.offsetHeight * Math.cos(rotRad)) : 0) +
+                    (options?.offsetY || 0)
+            );
+            scalings.push(scaling);
             Object.assign(dragElement.style, {
-                opacity: '0.7',
+                opacity: '0',
                 position: 'absolute',
                 margin: '0',
                 top: '0',
@@ -399,9 +415,9 @@ export namespace DragManager {
                 borderRadius: getComputedStyle(ele).borderRadius,
                 zIndex: globalCssVariables.contextMenuZindex,
                 transformOrigin: '0 0',
-                width: `${rect.width / scaleX}px`,
-                height: `${rect.height / scaleY}px`,
-                transform: `translate(${xs[0]}px, ${ys[0]}px) scale(${scaleX}, ${scaleY})`,
+                width: rot ? '' : `${rect.width / scaling}px`,
+                height: rot ? '' : `${rect.height / scaling}px`,
+                transform: `translate(${xs[0]}px, ${ys[0]}px) rotate(${rot}deg)`,
             });
             dragLabel.style.transform = `translate(${xs[0]}px, ${ys[0] - 20}px)`;
 
@@ -415,6 +431,8 @@ export namespace DragManager {
             [dragElement, ...Array.from(dragElement.getElementsByTagName('*'))].forEach(ele => (ele as any).style && ((ele as any).style.pointerEvents = 'none'));
 
             dragDiv.appendChild(dragElement);
+            scalings[scalings.length - 1] = rect.width / dragElement.getBoundingClientRect().width;
+            setTimeout(() => (dragElement.style.opacity = '0.7'));
             if (dragElement !== ele) {
                 const children = [Array.from(ele.children), Array.from(dragElement.children)];
                 while (children[0].length) {
@@ -542,7 +560,7 @@ export namespace DragManager {
             const moveVec = { x: x - lastPt.x, y: y - lastPt.y };
             lastPt = { x, y };
 
-            dragElements.map((dragElement, i) => (dragElement.style.transform = `translate(${(xs[i] += moveVec.x)}px, ${(ys[i] += moveVec.y)}px)  scale(${scaleXs[i]}, ${scaleYs[i]})`));
+            dragElements.map((dragElement, i) => (dragElement.style.transform = `translate(${(xs[i] += moveVec.x)}px, ${(ys[i] += moveVec.y)}px) rotate(${rot}deg)  scale(${scalings[i]})`));
             dragLabel.style.transform = `translate(${xs[0]}px, ${ys[0] - 20}px)`;
         };
         const upHandler = (e: PointerEvent) => {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 01fadb48d..113574a64 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -498,8 +498,8 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                 .ScreenToLocalTransform()
                 .scale(this.NativeDimScaling)
                 .transformDirection(x - left, y - top);
-            dragData.offset[0] = Math.min(this.rootDoc[WidthSym](), dragData.offset[0]);
-            dragData.offset[1] = Math.min(this.rootDoc[HeightSym](), dragData.offset[1]);
+            // dragData.offset[0] = Math.min(this.rootDoc[WidthSym](), dragData.offset[0]);  // bcz: this was breaking dragging rotated objects since the offset may be out of bounds with regard to the unrotated document
+            // dragData.offset[1] = Math.min(this.rootDoc[HeightSym](), dragData.offset[1]);
             dragData.dropAction = dropAction;
             dragData.treeViewDoc = this.props.treeViewDoc;
             dragData.removeDocument = this.props.removeDocument;
diff --git a/src/client/views/nodes/LoadingBox.scss b/src/client/views/nodes/LoadingBox.scss
index f6912f547..d63ed2575 100644
--- a/src/client/views/nodes/LoadingBox.scss
+++ b/src/client/views/nodes/LoadingBox.scss
@@ -4,6 +4,8 @@
     align-content: center;
     justify-content: center;
     background-color: #fdfdfd;
+    height: 100%;
+    align-items: center;
 }
 
 .textContainer {
diff --git a/src/client/views/nodes/LoadingBox.tsx b/src/client/views/nodes/LoadingBox.tsx
index f3243f6cd..462ad425a 100644
--- a/src/client/views/nodes/LoadingBox.tsx
+++ b/src/client/views/nodes/LoadingBox.tsx
@@ -37,9 +37,9 @@ export class LoadingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     render() {
         return (
-            <div className="loadingBoxContainer">
+            <div className="loadingBoxContainer" style={{ background: this.rootDoc.isLoading ? '' : 'red' }}>
                 <div className="textContainer">
-                    <p className="headerText">{this.rootDoc.isLoading ? 'Loading:' : 'Error Loading File:'}</p>
+                    <p className="headerText">{this.rootDoc.isLoading ? 'Loading:' : StrCast(this.rootDoc.errorMessage, 'Error Loading File:')}</p>
                     <span className="text">{StrCast(this.rootDoc.title)}</span>
                     {!this.rootDoc.isLoading ? null : <ReactLoading type={'spinningBubbles'} color={'blue'} height={100} width={100} />}
                 </div>
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 0ff15f93b..6ff11258d 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -396,10 +396,12 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
     // sets video info on load
     videoLoad = action(() => {
-        const aspect = this.player!.videoWidth / this.player!.videoHeight;
-        Doc.SetNativeWidth(this.dataDoc, this.player!.videoWidth);
-        Doc.SetNativeHeight(this.dataDoc, this.player!.videoHeight);
-        this.layoutDoc._height = NumCast(this.layoutDoc._width) / aspect;
+        const aspect = this.player!.videoWidth / (this.player!.videoHeight || 1);
+        if (aspect) {
+            Doc.SetNativeWidth(this.dataDoc, this.player!.videoWidth);
+            Doc.SetNativeHeight(this.dataDoc, this.player!.videoHeight);
+            this.layoutDoc._height = NumCast(this.layoutDoc._width) / aspect;
+        }
         if (Number.isFinite(this.player!.duration)) {
             this.rawDuration = this.player!.duration;
         } else this.rawDuration = NumCast(this.dataDoc[this.fieldKey + '-duration']);