BC-6493 - Disable video upload in tldraw (#56)

* disable video upload * switch to mime checking
hpi-schul-cloud · Feb 15, 2024 · fca22b9 · fca22b9
1 parent 71f253f
commit fca22b9
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 23 deletions.
diff --git a/src/hooks/useMultiplayerState.test.ts b/src/hooks/useMultiplayerState.test.ts
@@ -74,7 +74,7 @@ vi.mock("../stores/setup", () => ({
   envs: {
     TLDRAW__ASSETS_ENABLED: true,
     TLDRAW__ASSETS_MAX_SIZE: 1000000,
-    TLDRAW__ASSETS_ALLOWED_EXTENSIONS_LIST: [".png", ".jpg"],
+    TLDRAW__ASSETS_ALLOWED_MIME_TYPES_LIST: ["image/png", "image/jpeg"],
   },
 }));
 

diff --git a/src/hooks/useMultiplayerState.ts b/src/hooks/useMultiplayerState.ts
@@ -66,8 +66,7 @@ export function useMultiplayerState({
         app.fileSystemHandle = handle;
       }
     } catch (error) {
-      console.error("Error while exporting project", error);
-      toast.error("An error occurred while exporting project");
+      handleError("An error occurred while exporting project", error);
     }
     app.setIsLoading(false);
   }, []);
@@ -88,8 +87,7 @@ export function useMultiplayerState({
         app.fileSystemHandle = handle;
       }
     } catch (error) {
-      console.error("Error while exporting project", error);
-      toast.error("An error occurred while exporting project");
+      handleError("An error occurred while exporting project", error);
     }
     app.setIsLoading(false);
   }, []);
@@ -104,6 +102,8 @@ export function useMultiplayerState({
       window.app = app;
       setApp(app);
 
+      // below functions are overwriting the original tldraw implementations
+      // some of them had to be changed/fixed to support additional functionality
       app.saveProjectAs = async (filename) => {
         await onSaveAs(app, filename);
         return app;
@@ -135,8 +135,7 @@ export function useMultiplayerState({
           app.zoomToContent();
           app.zoomToFit();
         } catch (error) {
-          console.error("Error while opening project", error);
-          toast.error("An error occurred while opening project");
+          handleError("An error occurred while opening project", error);
         }
         app.setIsLoading(false);
       };
@@ -154,27 +153,27 @@ export function useMultiplayerState({
         toast.info("Asset uploading is disabled");
         return false;
       }
+
       if (file.size > envs!.TLDRAW__ASSETS_MAX_SIZE) {
-        toast.info(
-          `Asset is too big - max. ${
-            envs!.TLDRAW__ASSETS_MAX_SIZE / 1048576
-          }MB`,
-        );
+        const bytesInMb = 1048576;
+        const sizeInMb = envs!.TLDRAW__ASSETS_MAX_SIZE / bytesInMb;
+        toast.info(`Asset is too big - max. ${sizeInMb}MB`);
         return false;
       }
 
-      const fileExtension = file.name.split(".").pop()!;
-      if (
-        envs!.TLDRAW__ASSETS_ALLOWED_EXTENSIONS_LIST &&
-        !envs!.TLDRAW__ASSETS_ALLOWED_EXTENSIONS_LIST.includes(fileExtension)
-      ) {
-        toast.info("Asset with this extension is not allowed");
+      const isMimeTypeDisallowed =
+        envs!.TLDRAW__ASSETS_ALLOWED_MIME_TYPES_LIST &&
+        !envs!.TLDRAW__ASSETS_ALLOWED_MIME_TYPES_LIST.includes(file.type);
+
+      if (isMimeTypeDisallowed) {
+        toast.info("Asset of this type is not allowed");
         return false;
       }
 
       undoManager.stopCapturing();
 
       try {
+        const fileExtension = file.name.split(".").pop()!;
         const url = await uploadFileToStorage(
           file,
           fileExtension,
@@ -185,8 +184,7 @@ export function useMultiplayerState({
 
         return url;
       } catch (error) {
-        console.error("Error while uploading asset:", error);
-        toast.error("An error occurred while uploading asset");
+        handleError("An error occurred while uploading asset", error);
       }
 
       return false;
@@ -262,8 +260,7 @@ export function useMultiplayerState({
         link.download = `${roomId}_export.${info.type}`;
         link.click();
       } catch (error) {
-        console.error("Error while exporting project as image", error);
-        toast.error("An error occurred while exporting project as image");
+        handleError("An error occurred while exporting to image", error);
       }
       app.setIsLoading(false);
     },
@@ -429,3 +426,16 @@ const syncAssets = (app: TldrawApp) => {
     Object.fromEntries(yAssets.entries()),
   );
 };
+
+const handleError = (toastMessage: string, error: unknown) => {
+  if (error instanceof Error) {
+    if (error.message === "The user aborted a request.") {
+      // a case when user cancels some action, like opening project
+      // should not really be treated as an error
+      return;
+    }
+
+    console.error(toastMessage, error);
+    toast.error(toastMessage);
+  }
+};
diff --git a/src/types/Envs.ts b/src/types/Envs.ts
@@ -2,5 +2,5 @@ export type Envs = {
   FEATURE_TLDRAW_ENABLED: boolean;
   TLDRAW__ASSETS_ENABLED: boolean;
   TLDRAW__ASSETS_MAX_SIZE: number;
-  TLDRAW__ASSETS_ALLOWED_EXTENSIONS_LIST: string;
+  TLDRAW__ASSETS_ALLOWED_MIME_TYPES_LIST: string;
 };