Developing: Custom backgrounds

src/seqta/ui/Animation.js

@@ -0,0 +1,32 @@
+/**
+ * Update the background animation durations based on the slider input.
+ * @param {Object} item - The object containing the bksliderinput property.
+ * @param {number} [minDuration=1] - The minimum animation duration in seconds.
+ * @param {number} [maxDuration=10] - The maximum animation duration in seconds.
+ */
+export function updateBgDurations(item, minDuration = 1, maxDuration = 10) {
+  // Class names to look for
+  const bgClasses = ["bg", "bg2", "bg3"];
+  
+  // Reverse the slider direction to align with the animation
+  const reversedValue = 200 - item.bksliderinput;
+  
+  // Range of possible animation durations
+  const durationRange = maxDuration - minDuration;
+  
+  // Function to calculate animation duration
+  const calcDuration = (baseValue, offset = 0) => minDuration + ((baseValue / 200) + offset) * durationRange;
+  
+  // Iterate through each class name to update its animation duration
+  bgClasses.forEach((className, index) => {
+    const elements = document.getElementsByClassName(className);
+    if (elements.length === 0) {
+      console.error(`No elements found with class name: ${className}`);
+      return;
+    }
+    
+    const offset = index * 0.05;
+    const duration = calcDuration(reversedValue, offset);
+    elements[0].style.animationDuration = `${duration}s`;
+  });
+}

src/seqta/ui/Background.js

@@ -0,0 +1,37 @@
+/* global chrome */
+
+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);
+      });
+    });
+    console.log("response:", response);
+  } catch (error) {
+    console.log("Error:", error);
+  }
+  
+
+  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);
+
+/*   if (data) {
+    continue
+  } else if (data?.type === "video") {
+    // Handle video
+  } */
+}
+
+appendBackgroundToUI();

src/seqta/ui/Colors.js

@@ -1,19 +1,52 @@
 /* global chrome */
-import { ColorLuminance, GetThresholdofHex } from "../../SEQTA.js";
+import { ColorLuminance, GetThresholdofHex, lightenAndPaleColor } from "../../SEQTA.js";
 
-export function updateDocumentColors(newColor) {
-  const rbg = GetThresholdofHex(newColor);
-  const textColor = rbg > 210 ? "black" : "white";
-  const logo = `url(${chrome.runtime.getURL(
-    `icons/betterseqta-${textColor === "black" ? "dark" : "light"}-full.png`
-  )})`;
+// Helper functions
+const setCSSVar = (varName, value) => document.documentElement.style.setProperty(varName, value);
+const getChromeURL = (path) => chrome.runtime.getURL(path);
+const applyProperties = (props) => Object.entries(props).forEach(([key, value]) => setCSSVar(key, value));
 
-  document.documentElement.style.setProperty("--text-color", textColor);
-  document.documentElement.style.setProperty("--betterseqta-logo", logo);
-  document.documentElement.style.setProperty("--better-main", newColor);
+export function updateAllColors(storedSetting, newColor = null) {
+  // Determine the color to use
+  const selectedColor = newColor || storedSetting.selectedColor;
+  const DarkMode = storedSetting ? storedSetting.DarkMode : null;
 
-  const lightColor =
-    newColor === "#ffffff" ? "#b7b7b7" : ColorLuminance(newColor, 0.99);
+  // Common properties, always applied
+  const commonProps = {
+    "--better-sub": "#161616",
+    "--better-alert-highlight": "#c61851",
+    "--better-main": selectedColor
+  };
 
-  document.documentElement.style.setProperty("--better-light", lightColor);
-}
+  // Mode-based properties, applied if storedSetting is provided
+  let modeProps = {};
+  if (DarkMode !== null) {
+    modeProps = DarkMode ? {
+      "--background-primary": "#232323",
+      "--background-secondary": "#1a1a1a",
+      "--text-primary": "white"
+    } : {
+      "--background-primary": "#ffffff",
+      "--background-secondary": "#e5e7eb",
+      "--text-primary": "black",
+      "--better-pale": lightenAndPaleColor(selectedColor)  // Wrap this in try-catch if needed
+    };
+  }
+
+  // Dynamic properties, always applied
+  const rgbThreshold = GetThresholdofHex(selectedColor);
+  const isBright = rgbThreshold > 210;
+  const dynamicProps = {
+    "--text-color": isBright ? "black" : "white",
+    "--betterseqta-logo": `url(${getChromeURL(`icons/betterseqta-${isBright ? "dark" : "light"}-full.png`)})`,
+    "--better-light": selectedColor === "#ffffff" ? "#b7b7b7" : ColorLuminance(selectedColor, 0.95)
+  };
+
+  // Apply all the properties
+  applyProperties({ ...commonProps, ...modeProps, ...dynamicProps });
+
+  // Set favicon, if storedSetting is provided
+  if (DarkMode !== null) {
+    document.querySelector("link[rel*='icon']").href = getChromeURL("icons/icon-48.png");
+  }
+}