feat(settings): add background selector

src/seqta/ui/ImageBackgrounds.ts

@@ -1,13 +1,104 @@
-import browser from 'webextension-polyfill';
+import { getDataById, isIndexedDBSupported } from '@/svelte-interface/hooks/BackgroundDataLoader';
 
 export async function appendBackgroundToUI() {
   const parent = document.getElementById('container');
 
-  // embed background.html
-  const background = document.createElement('iframe');
+  // embed background.html - old method
+  /* const background = document.createElement('iframe');
   background.id = 'background';
   background.classList.add('imageBackground');
   background.setAttribute('excludeDarkCheck', 'true');
   background.src = browser.runtime.getURL('seqta/ui/background/background.html');
-  parent!.appendChild(background);
+  parent!.appendChild(background); */
+  if (!parent) return;
+
+  const backgroundContainer = document.createElement('div');
+  backgroundContainer.classList.add('imageBackground');
+  backgroundContainer.setAttribute('excludeDarkCheck', 'true');
+
+  const mediaContainer = document.createElement('div');
+  mediaContainer.id = 'media-container';
+  backgroundContainer.appendChild(mediaContainer);
+
+  parent.appendChild(backgroundContainer);
+
+  // Add styles
+  const style = document.createElement('style');
+  style.textContent = `
+    #media-container {
+      width: 100%;
+      height: 100%;
+    }
+
+    #media-container video, #media-container img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  `;
+  document.head.appendChild(style);
+
+  // Load and display the background
+  await loadBackground();
 }
+
+export async function loadBackground() {
+  if (!isIndexedDBSupported()) {
+    console.error("IndexedDB is not supported. Unable to load background.");
+    return;
+  }
+
+  try {
+    const selectedBackgroundId = localStorage.getItem('selectedBackground');
+    if (!selectedBackgroundId) {
+      const backgroundContainer = document.querySelector('.imageBackground');
+      if (backgroundContainer) {
+        backgroundContainer.remove();
+      }
+      return;
+    };
+
+    const background = await getDataById(selectedBackgroundId);
+    if (!background) return;
+
+    let backgroundContainer = document.querySelector('.imageBackground');
+    if (!backgroundContainer) {
+      backgroundContainer = document.createElement('div');
+      backgroundContainer.classList.add('imageBackground');
+      backgroundContainer.setAttribute('excludeDarkCheck', 'true');
+      const parent = document.getElementById('container');
+      if (parent) {
+        parent.appendChild(backgroundContainer);
+      }
+    }
+
+    let mediaContainer = document.getElementById('media-container');
+    if (!mediaContainer) {
+      mediaContainer = document.createElement('div');
+      mediaContainer.id = 'media-container';
+      backgroundContainer.appendChild(mediaContainer);
+    };
+
+    mediaContainer = document.getElementById('media-container');
+    if (!mediaContainer) return;
+
+    mediaContainer.innerHTML = '';
+
+    const mediaElement = background.type === 'video' 
+      ? document.createElement('video')
+      : document.createElement('img');
+
+    mediaElement.src = URL.createObjectURL(background.blob);
+    mediaElement.classList.add('background');
+
+    if (mediaElement instanceof HTMLVideoElement) {
+      mediaElement.loop = true;
+      mediaElement.muted = true;
+      mediaElement.autoplay = true;
+    }
+
+    mediaContainer.appendChild(mediaElement);
+  } catch (error) {
+    console.error('Error loading background:', error);
+  }
+}