experimental: full support for background photos and videos

src/seqta/ui/Background.js

@@ -1,37 +1,77 @@
 /* global chrome */
+/* function isValidBase64(str) {
+  const len = str.length;
+  if (len % 4 !== 0) {
+    return false;
+  }
+  for (let i = 0; i < len; i++) {
+    if (!(/[A-Za-z0-9+/=]/.test(str[i]))) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function base64ToArrayBuffer(base64) {
+  console.log(base64);
+  if (!isValidBase64(base64)) {
+    console.error("Invalid base64 string");
+    return null;
+  }
+  const binaryString = atob(base64);
+  const len = binaryString.length;
+  const bytes = new Uint8Array(len);
+  for (let i = 0; i < len; i++) {
+    bytes[i] = binaryString.charCodeAt(i);
+  }
+  return bytes.buffer;
+} */
 
 export async function appendBackgroundToUI() {
-  try {
-    const response = await new Promise((resolve, reject) => {
-      chrome.runtime.sendMessage({ type: "IndexedDB" }, (response) => {
-        if (chrome.runtime.lastError) {
-          return reject(chrome.runtime.lastError);
-        }
-        resolve(response);
-      });
+  const response = await new Promise((resolve, reject) => {
+    chrome.runtime.sendMessage({ type: "IndexedDB", action: "read", fileName: "customBackground" }, (response) => {
+      if (chrome.runtime.lastError) {
+        return reject(chrome.runtime.lastError);
+      }
+      resolve(response);
     });
-    console.log("response:", response);
-  } catch (error) {
-    console.log("Error:", error);
-  }
+  });
+  console.log("response:", response);
+
+  let data = response.data; // response.data is the image base64 string
+  let type = response.type; // response.type is the image type [ video | image ]
   
+  if (data) {
+    // check if it is video from its base64 string
+    const mount = document.getElementById("container");
+    console.log("Starting to append background");
+    let backgroundElement;
+    if (type === "video") {
+      /* const arrayBuffer = base64ToArrayBuffer(data);
+      const blob = new Blob([arrayBuffer], { type: "video/mp4" });
+      const blobUrl = URL.createObjectURL(blob);
+      console.log("blobUrl:", blobUrl); */
 
-  const mount = document.getElementById("container");
-  console.log("Starting to append background");
-  let data;
-  const response = await chrome.runtime.sendMessage({ type: "IndexedDB" });
-  data = response;
-  const imgElement = document.createElement("img");
-  imgElement.src = data;
-  imgElement.alt = "Uploaded Image";
-  imgElement.classList.add("imageBackground");
-  mount.appendChild(imgElement);
+      backgroundElement = document.createElement("video");
+      backgroundElement.src = data;
+      backgroundElement.autoplay = true;
+      backgroundElement.loop = true;
+      backgroundElement.muted = true;
+      backgroundElement.classList.add("imageBackground");
+      mount.appendChild(backgroundElement);
 
-/*   if (data) {
-    continue
-  } else if (data?.type === "video") {
-    // Handle video
-  } */
+      const videoElement = document.getElementsByClassName("imageBackground")[0];
+      setTimeout(() => {
+        videoElement.play();
+      }, 1000);
+    } else {
+      backgroundElement = document.createElement("img");
+      backgroundElement.src = data;
+      backgroundElement.alt = "Custom Background";
+      backgroundElement.classList.add("imageBackground");
+      mount.appendChild(backgroundElement);
+    }
+  }
 }
 
 appendBackgroundToUI();

src/seqta/utils/IndexedDB.js

@@ -1,29 +1,26 @@
-// IndexedDB utility functions
-export const openDB = () => {
-  return new Promise<IDBDatabase>((resolve, reject) => {
-    const request = indexedDB.open("MyDatabase", 1);
+export const openDB = async () => {
+  const request = indexedDB.open("MyDatabase", 1);
 
-    request.onerror = () => reject(request.error);
-    request.onsuccess = () => resolve(request.result);
+  request.onupgradeneeded = async (event) => {
+    const db = event.target.result;
+    await db.createObjectStore("backgrounds", { keyPath: "id" });
+  };
 
-    request.onupgradeneeded = (event) => {
-      const db = (event.target).result;
-      db.createObjectStore("backgrounds", { keyPath: "id" });
-    };
-  });
+  return request;
 };
 
 export const writeData = async (type, data) => {
-  return new Promise((resolve, reject) => {
-    openDB().then(db => {
-      const tx = db.transaction("backgrounds", "readwrite");
-      const store = tx.objectStore("backgrounds");
-      const request = store.put({ id: "customBackground", type, data });
+  console.log("Reading Data");
+  const db = await openDB();
+  console.log("Opened DB");
 
-      tx.oncomplete = () => resolve(request.result);
-      tx.onerror = () => reject(tx.error);
-    }).catch(reject);
-  });
+  const tx = db.transaction("backgrounds", "readwrite");
+  const store = tx.objectStore("backgrounds");
+  const request = await store.put({ id: "customBackground", type, data });
+
+  console.log("Data written successfully");
+
+  return request.result;
 };
 
 export const readData = async () => {