bug: major bug fixes and smoothing

2026-06-06 19:54:39 +00:00 · 2024-01-24 08:47:54 +11:00
parent e2619bb20b
commit c1f095a503
7 changed files with 198 additions and 66 deletions
@@ -1,4 +1,4 @@
-import browser from 'webextension-polyfill'
+import backgroundPage from 'url:./background/background.html'

 export async function appendBackgroundToUI() {
  console.log('Starting appendBackgroundToUI...');
@@ -10,6 +10,6 @@ export async function appendBackgroundToUI() {
  background.id = 'background';
  background.classList.add('imageBackground');
  background.setAttribute('excludeDarkCheck', 'true');
-  background.src = browser.runtime.getURL('backgrounds/background.html');
+  background.src = backgroundPage;
  parent!.appendChild(background);
 }
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Background Fetcher</title>
+
+  <style>
+    body {
+      margin: 0 !important;
+    }
+
+    video, img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+
+      object-fit: cover;
+    }
+  </style>
+</head>
+<body>
+  <!-- Container for the media -->
+  <div id="media-container"></div>
+
+  <script src="background.ts"></script>
+</body>
+</html>
@@ -0,0 +1,111 @@
+interface Data {
+  blob: Blob;
+  type: 'image' | 'video';
+}
+
+interface DatabaseEventTarget extends EventTarget {
+  result: IDBDatabase;
+}
+
+interface DatabaseEvent extends Event {
+  target: DatabaseEventTarget;
+}
+
+const openDB = (): Promise<IDBDatabase> => {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open('MyDatabase', 1);
+
+    request.onerror = () => reject(request.error);
+    request.onsuccess = () => resolve(request.result);
+
+    request.onupgradeneeded = (event: IDBVersionChangeEvent) => {
+      // @ts-expect-error
+      event?.target?.result.createObjectStore('backgrounds', { keyPath: 'id' });
+    };
+  });
+};
+
+const readData = async (): Promise<Data | null> => {
+  const selectedBackground = localStorage.getItem('selectedBackground');
+  if (!selectedBackground) {
+    return null;
+  }
+
+  const db = await openDB();
+  const tx = db.transaction('backgrounds', 'readonly');
+  const store = tx.objectStore('backgrounds');
+  const request = store.get(selectedBackground);
+
+  return new Promise((resolve, reject) => {
+    request.onsuccess = () => resolve(request.result as Data);
+    request.onerror = () => reject(request.error);
+  });
+};
+
+const updateBackground = async (): Promise<void> => {
+  try {
+    const data = await readData();
+    if (!data) {
+      console.log('No data found in IndexedDB.');
+
+      const container = document.getElementById('media-container');
+      const currentMedia = container?.querySelector('.current-media');
+      if (currentMedia) {
+        currentMedia.remove();
+      }
+      return;
+    }
+
+    const url = URL.createObjectURL(data.blob);
+    const container = document.getElementById('media-container');
+
+    // Create new element and set properties
+    let newElement;
+    if (data.type === 'image') {
+      newElement = document.createElement('img');
+      newElement.src = url;
+      newElement.alt = 'Uploaded content';
+    } else if (data.type === 'video') {
+      newElement = document.createElement('video');
+      newElement.src = url;
+      newElement.autoplay = true;
+      newElement.loop = true;
+      newElement.muted = true;
+    }
+
+    // Mark the old element for removal
+    const oldElement = container?.querySelector('.current-media');
+    if (oldElement) {
+      oldElement.classList.remove('current-media');
+      oldElement.classList.add('old-media');
+    }
+
+    // Add the new element and mark it as current
+    newElement?.classList.add('current-media');
+    container?.appendChild(newElement as Node);
+
+    // Delay removal of old element
+    setTimeout(() => {
+      const oldMedia = container?.querySelector('.old-media');
+      if (oldMedia) {
+        oldMedia.remove();
+      }
+    }, 100); // 0.1 second delay
+  } catch (error) {
+    console.error('An error occurred:', error);
+  }
+};
+
+// Main function to run on page load
+const main = async (): Promise<void> => {
+  await updateBackground();
+
+  // Listen for changes to local storage
+  window.addEventListener('storage', async (event) => {
+    if (event.key === 'selectedBackground') {
+    }
+  });
+};
+
+// Run the main function when the document is ready
+document.addEventListener('DOMContentLoaded', main);