feat: image support (#4011)

Co-authored-by: Emil Atanasov <heitara@gmail.com>
Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>

src/excalidraw-app/data/firebase.ts

@@ -1,26 +1,45 @@
-import { getImportedKey } from "../data";
-import { createIV } from "./index";
-import { ExcalidrawElement } from "../../element/types";
+import { ExcalidrawElement, FileId } from "../../element/types";
 import { getSceneVersion } from "../../element";
 import Portal from "../collab/Portal";
 import { restoreElements } from "../../data/restore";
+import { BinaryFileData, BinaryFileMetadata, DataURL } from "../../types";
+import { FILE_CACHE_MAX_AGE_SEC } from "../app_constants";
+import { decompressData } from "../../data/encode";
+import { getImportedKey, createIV } from "../../data/encryption";
+import { MIME_TYPES } from "../../constants";
 
 // private
 // -----------------------------------------------------------------------------
 
+const FIREBASE_CONFIG = JSON.parse(process.env.REACT_APP_FIREBASE_CONFIG);
+
 let firebasePromise: Promise<
   typeof import("firebase/app").default
 > | null = null;
-let firestorePromise: Promise<any> | null = null;
-let firebseStoragePromise: Promise<any> | null = null;
+let firestorePromise: Promise<any> | null | true = null;
+let firebaseStoragePromise: Promise<any> | null | true = null;
+
+let isFirebaseInitialized = false;
 
 const _loadFirebase = async () => {
   const firebase = (
     await import(/* webpackChunkName: "firebase" */ "firebase/app")
   ).default;
 
-  const firebaseConfig = JSON.parse(process.env.REACT_APP_FIREBASE_CONFIG);
-  firebase.initializeApp(firebaseConfig);
+  if (!isFirebaseInitialized) {
+    try {
+      firebase.initializeApp(FIREBASE_CONFIG);
+    } catch (error) {
+      // trying initialize again throws. Usually this is harmless, and happens
+      // mainly in dev (HMR)
+      if (error.code === "app/duplicate-app") {
+        console.warn(error.name, error.code);
+      } else {
+        throw error;
+      }
+    }
+    isFirebaseInitialized = true;
+  }
 
   return firebase;
 };
@@ -42,18 +61,24 @@ const loadFirestore = async () => {
     firestorePromise = import(
       /* webpackChunkName: "firestore" */ "firebase/firestore"
     );
+  }
+  if (firestorePromise !== true) {
     await firestorePromise;
+    firestorePromise = true;
   }
   return firebase;
 };
 
 export const loadFirebaseStorage = async () => {
   const firebase = await _getFirebase();
-  if (!firebseStoragePromise) {
-    firebseStoragePromise = import(
+  if (!firebaseStoragePromise) {
+    firebaseStoragePromise = import(
       /* webpackChunkName: "storage" */ "firebase/storage"
     );
-    await firebseStoragePromise;
+  }
+  if (firebaseStoragePromise !== true) {
+    await firebaseStoragePromise;
+    firebaseStoragePromise = true;
   }
   return firebase;
 };
@@ -87,7 +112,7 @@ const encryptElements = async (
 const decryptElements = async (
   key: string,
   iv: Uint8Array,
-  ciphertext: ArrayBuffer,
+  ciphertext: ArrayBuffer | Uint8Array,
 ): Promise<readonly ExcalidrawElement[]> => {
   const importedKey = await getImportedKey(key, "decrypt");
   const decrypted = await window.crypto.subtle.decrypt(
@@ -100,7 +125,7 @@ const decryptElements = async (
   );
 
   const decodedData = new TextDecoder("utf-8").decode(
-    new Uint8Array(decrypted) as any,
+    new Uint8Array(decrypted),
   );
   return JSON.parse(decodedData);
 };
@@ -113,6 +138,7 @@ export const isSavedToFirebase = (
 ): boolean => {
   if (portal.socket && portal.roomId && portal.roomKey) {
     const sceneVersion = getSceneVersion(elements);
+
     return firebaseSceneVersionCache.get(portal.socket) === sceneVersion;
   }
   // if no room exists, consider the room saved so that we don't unnecessarily
@@ -120,6 +146,42 @@ export const isSavedToFirebase = (
   return true;
 };
 
+export const saveFilesToFirebase = async ({
+  prefix,
+  files,
+}: {
+  prefix: string;
+  files: { id: FileId; buffer: Uint8Array }[];
+}) => {
+  const firebase = await loadFirebaseStorage();
+
+  const erroredFiles = new Map<FileId, true>();
+  const savedFiles = new Map<FileId, true>();
+
+  await Promise.all(
+    files.map(async ({ id, buffer }) => {
+      try {
+        await firebase
+          .storage()
+          .ref(`${prefix}/${id}`)
+          .put(
+            new Blob([buffer], {
+              type: MIME_TYPES.binary,
+            }),
+            {
+              cacheControl: `public, max-age=${FILE_CACHE_MAX_AGE_SEC}`,
+            },
+          );
+        savedFiles.set(id, true);
+      } catch (error) {
+        erroredFiles.set(id, true);
+      }
+    }),
+  );
+
+  return { savedFiles, erroredFiles };
+};
+
 export const saveToFirebase = async (
   portal: Portal,
   elements: readonly ExcalidrawElement[],
@@ -198,3 +260,47 @@ export const loadFromFirebase = async (
 
   return restoreElements(elements, null);
 };
+
+export const loadFilesFromFirebase = async (
+  prefix: string,
+  decryptionKey: string,
+  filesIds: readonly FileId[],
+) => {
+  const loadedFiles: BinaryFileData[] = [];
+  const erroredFiles = new Map<FileId, true>();
+
+  await Promise.all(
+    [...new Set(filesIds)].map(async (id) => {
+      try {
+        const url = `https://firebasestorage.googleapis.com/v0/b/${
+          FIREBASE_CONFIG.storageBucket
+        }/o/${encodeURIComponent(prefix.replace(/^\//, ""))}%2F${id}`;
+        const response = await fetch(`${url}?alt=media`);
+        if (response.status < 400) {
+          const arrayBuffer = await response.arrayBuffer();
+
+          const { data, metadata } = await decompressData<BinaryFileMetadata>(
+            new Uint8Array(arrayBuffer),
+            {
+              decryptionKey,
+            },
+          );
+
+          const dataURL = new TextDecoder().decode(data) as DataURL;
+
+          loadedFiles.push({
+            mimeType: metadata.mimeType || MIME_TYPES.binary,
+            id,
+            dataURL,
+            created: metadata?.created || Date.now(),
+          });
+        }
+      } catch (error) {
+        erroredFiles.set(id, true);
+        console.error(error);
+      }
+    }),
+  );
+
+  return { loadedFiles, erroredFiles };
+};