work on image and video backgrounds! Not laggy anymore with large files

src/SEQTA.js

@@ -1330,6 +1330,9 @@ function AddBetterSEQTAElements(toggle) {
                   if (element.getAttribute("excludeDarkCheck") == "true") {
                     continue;
                   }
+                  
+                  console.log(element);
+                  console.log(element.contentDocument.documentElement);
 
                   element.contentDocument.documentElement.childNodes[1].style.color =
                     "white";

src/background.js

@@ -132,12 +132,7 @@ function HandleIntexedDB(request, sendResponse) {
 
   case "read":
     readData().then((data) => {
-      const reader = new FileReader();
-      reader.onload = () => {
-        const arrayBuffer = reader.result;
-        sendResponse({ data: arrayBuffer, type: data.type });
-      };
-      reader.readAsArrayBuffer(data.data);
+      sendResponse(data);
     });
     return true;
   }

src/inject/injected.css

@@ -431,7 +431,7 @@ td.colourBar {
 }
 
 ol > [data-message] {
-  padding-left: 4px !important;
+  padding-left: 8px !important;
   padding-right: 4px !important;
 }
 
@@ -872,11 +872,11 @@ div > ol:has(.uiFileHandlerWrapper) {
 }
 
 .ais-description {
-  color: var(--text-primary);
+  color: var(--text-primary) !important;
 }
 
 .ais-signature {
-  color: var(--text-primary);
+  color: var(--text-primary) !important;
 }
 
 .ais-btnSearch i {
@@ -1428,8 +1428,8 @@ ul {
   overflow: hidden;
 }
 
-.header .days .title {
-  color: var(--text-primary);
+.title {
+  color: var(--text-primary) !important;
 }
 
 div.entry.class {
@@ -1683,8 +1683,14 @@ body {
   display: none;
 }
 
-.MessageList__MessageList___3DxoC > ol > li.MessageList__unread___3imtO {
-  box-shadow: inset 3px 0 var(--better-main);
+.MessageList__MessageList___3DxoC > ol > li.MessageList__unread___3imtO::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 3px; /* Same width as your box-shadow */
+  background: var(--better-main);
 }
 
 .connectedNotificationsWrapper > div > button {

src/inject/injected/popup.css

@@ -26,4 +26,5 @@
   height: 100%;
   object-fit: cover;
   pointer-events: none;
+  border: none !important;
 }

src/seqta/ui/ImageBackgrounds.js

@@ -1,82 +1,84 @@
-/* // 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;
-} */
+/* global chrome */
 
 export async function appendBackgroundToUI() {
+  console.log("Starting appendBackgroundToUI...");
+
+  const parent = document.getElementById("container");
+
+  // embed background.html
+  const background = document.createElement("iframe");
+  background.id = "background";
+  background.classList.add("imageBackground");
+  background.setAttribute("excludeDarkCheck", "true");
+  background.src = chrome.runtime.getURL("backgrounds/background.html");
+  parent.appendChild(background);
+
   /* const response = await new Promise((resolve, reject) => {
+    console.log("Sending message to background script...");
     chrome.runtime.sendMessage({ type: "IndexedDB", action: "read", fileName: "customBackground" }, (response) => {
       if (chrome.runtime.lastError) {
+        console.error("Error from background script:", chrome.runtime.lastError);
         return reject(chrome.runtime.lastError);
       }
+      console.log("Received response from background script:", response);
       resolve(response);
     });
   });
-  console.log("response:", response);
 
-  let data = response.data; // response.data is the image base64 string
+  let data = response.data; // response.data is the image Data URL
+
+  // Extract the pure base64 string from the Data URL
+  const base64Marker = ";base64,";
+  const base64Index = data.indexOf(base64Marker) + base64Marker.length;
+  const base64 = data.substring(base64Index);
+
   let type = response.type; // response.type is the image type [ video | image ]
-  
-  if (data) {
-    // check if it is video from its base64 string
+
+  if (base64) {
+    console.log("Data exists, proceeding...");
+
     const mount = document.getElementById("container");
-    console.log("Starting to append background");
+
+    // Convert base64 to ArrayBuffer
+    console.log("Converting base64 to ArrayBuffer...");
+    const byteCharacters = atob(base64);
+    const byteNumbers = Array.from(byteCharacters).map(char => char.charCodeAt(0));
+    const byteArray = new Uint8Array(byteNumbers);
+
+    // Create blob
+    console.log("Creating blob...");
+    const blob = new Blob([byteArray], { type: type === "video" ? "video/mp4" : "image/jpeg" });
+
+    // Create blob URL
+    console.log("Creating blob URL...");
+    const blobUrl = URL.createObjectURL(blob);
+
     let backgroundElement;
+
     if (type === "video") {
-      console.log("Data type:", typeof data);
-      console.log("Data instance:", data instanceof Blob);
-
-      if (data instanceof Blob) {
-        console.log("Blob size:", data.size);
-        console.log("Blob type:", data.type);
-      }    
-
-      console.log("Starting blob.");
-      const blob = new Blob([new Uint8Array(response.data)]);  // Adjust the MIME type accordingly
-      console.log("Made blob.");
-      const blobUrl = URL.createObjectURL(blob);
-      console.log(blobUrl);
+      console.log("Appending video element...");
       backgroundElement = document.createElement("video");
       backgroundElement.src = blobUrl;
       backgroundElement.autoplay = true;
       backgroundElement.loop = true;
       backgroundElement.muted = true;
-      console.log(backgroundElement);
-      mount.appendChild(backgroundElement);
-      // Remember to revoke the blob URL to avoid memory leaks
+
+      // Revoke blob URL to free memory
       backgroundElement.addEventListener("ended", () => {
+        console.log("Video ended, revoking blob URL...");
         URL.revokeObjectURL(blobUrl);
       });
     } else {
+      console.log("Appending image element...");
       backgroundElement = document.createElement("img");
-      backgroundElement.src = data;
+      backgroundElement.src = blobUrl;
       backgroundElement.alt = "Custom Background";
       backgroundElement.classList.add("imageBackground");
-      mount.appendChild(backgroundElement);
     }
+
+    console.log("Appending background element to the DOM...");
+    mount.appendChild(backgroundElement);
+  } else {
+    console.warn("No data received. Background not appended.");
   } */
-}
+}

src/seqta/ui/colors/Manager.js

@@ -8,10 +8,12 @@ const setCSSVar = (varName, value) => document.documentElement.style.setProperty
 const getChromeURL = (path) => chrome.runtime.getURL(path);
 const applyProperties = (props) => Object.entries(props).forEach(([key, value]) => setCSSVar(key, value));
 
+let DarkMode = null;
+
 export function updateAllColors(storedSetting, newColor = null) {
   // Determine the color to use
   const selectedColor = newColor || storedSetting.selectedColor;
-  const DarkMode = storedSetting ? storedSetting.DarkMode : null;
+  DarkMode = storedSetting ? storedSetting.DarkMode : DarkMode;
 
   // Common properties, always applied
   const commonProps = {
@@ -22,7 +24,7 @@ export function updateAllColors(storedSetting, newColor = null) {
 
   // Mode-based properties, applied if storedSetting is provided
   let modeProps = {};
-  console.log(DarkMode);
+  console.log("Darkmode: ", DarkMode);
   if (DarkMode !== null) {
     modeProps = DarkMode ? {
       "--background-primary": "#232323",