From 9a9eb91a2d8b65ceacdef4525ef928f3b11865c6 Mon Sep 17 00:00:00 2001
From: StroepWafel <contact@stroepwafel.au>
Date: Fri, 26 Jun 2026 22:20:20 +0930
Subject: [PATCH] fix(BGImages): BG images wouldn't load on either browser

---
 .../themes/BackgroundSelector.svelte          | 63 +++----------------
 1 file changed, 9 insertions(+), 54 deletions(-)

diff --git a/src/interface/components/themes/BackgroundSelector.svelte b/src/interface/components/themes/BackgroundSelector.svelte
index b6be121b..7c7e7ef7 100644
--- a/src/interface/components/themes/BackgroundSelector.svelte
+++ b/src/interface/components/themes/BackgroundSelector.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  import { hasEnoughStorageSpace, isIndexedDBSupported, writeData, openDatabase, readAllData, deleteData } from '@/interface/hooks/BackgroundDataLoader'
+  import { hasEnoughStorageSpace, isIndexedDBSupported, writeData, readAllData, deleteData } from '@/interface/hooks/BackgroundDataLoader'
   import BackgroundUploader from './BackgroundUploader.svelte';
   import BackgroundItem from './BackgroundItem.svelte'
   import { onMount, onDestroy } from 'svelte'
   import { loadBackground } from '@/seqta/ui/ImageBackgrounds'
-  import { delay } from 'lodash'
   import { backgroundUpdates } from '@/interface/hooks/BackgroundUpdates'
 
   let { isEditMode, selectNoBackground = $bindable(), selectedBackground = $bindable() } = $props<{ isEditMode: boolean, selectNoBackground: () => void, selectedBackground: string | null }>();
@@ -14,11 +13,6 @@
   let imageBackgrounds = $derived(backgrounds.filter(bg => bg.type === 'image'));
   let videoBackgrounds = $derived(backgrounds.filter(bg => bg.type === 'video'));
 
-  let isVisible = $state(false);
-  let element: HTMLElement;
-  let observer: MutationObserver;
-  let parentElement: HTMLElement | null = null;
-
   async function getTheme() {
     return localStorage.getItem('selectedBackground');
   }
@@ -55,29 +49,6 @@
     }
   }
 
-  async function loadBackgroundMetadata(): Promise<void> {
-    try {
-      error = null;
-
-      if (!isIndexedDBSupported()) {
-        throw new Error("Your browser doesn't support IndexedDB. Unable to load backgrounds.");
-      }
-
-      await openDatabase();
-      const data = await readAllData();
-      selectedBackground = await getTheme();
-      
-      // Only load metadata (id and type) for placeholders
-      backgrounds = data.map(({ id, type }) => ({ id, type, blob: null }));
-    } catch (e) {
-      if (e instanceof Error) {
-        error = e.message;
-      } else {
-        error = 'An unknown error occurred';
-      }
-    }
-  }
-
   async function syncBackgrounds(): Promise<void> {
     try {
       error = null;
@@ -86,8 +57,9 @@
         throw new Error("Your browser doesn't support IndexedDB. Unable to load backgrounds.");
       }
 
+      selectedBackground = await getTheme();
       const dbData = await readAllData();
-      
+
       // Release existing object URLs to prevent memory leaks
       backgrounds.forEach(bg => {
         if (bg.url) URL.revokeObjectURL(bg.url);
@@ -119,7 +91,7 @@
       selectNoBackground();
       return;
     }
-    
+
     selectedBackground = fileId;
     setTheme(fileId);
   }
@@ -157,40 +129,23 @@
     }
   });
 
-  function checkActiveClass() {
-    if (parentElement?.classList.contains('active')) {
-      delay(() => {
-        isVisible = true;
-        syncBackgrounds();
-      }, 600);
-    }
-  }
-
   onMount(() => {
-    loadBackgroundMetadata();
+    syncBackgrounds();
     backgroundUpdates.addListener(syncBackgrounds);
-    
-    parentElement = element.closest('.tab');
-    if (parentElement) {
-      observer = new MutationObserver(checkActiveClass);
-      observer.observe(parentElement, { attributes: true, attributeFilter: ['class'] });
-    }
 
     return () => {
-      observer?.disconnect();
       backgroundUpdates.removeListener(syncBackgrounds);
     };
   });
 
   onDestroy(() => {
-    observer?.disconnect();
     backgrounds.forEach((bg) => {
       if (bg.url) URL.revokeObjectURL(bg.url);
     });
   });
 </script>
 
-<div bind:this={element} class="relative px-1 { !( isEditMode && imageBackgrounds.length === 0 && videoBackgrounds.length === 0 ) && 'pt-2' }">
+<div class="relative px-1 { !( isEditMode && imageBackgrounds.length === 0 && videoBackgrounds.length === 0 ) && 'pt-2' }">
   {#if !(imageBackgrounds.length === 0 && isEditMode)}
     <h2 class="pb-2 text-lg font-bold">Background Images</h2>
     <div class="flex flex-wrap gap-4 mb-4">
@@ -198,7 +153,7 @@
         <BackgroundUploader on:fileChange={e => handleFileChange(e.detail)} />
       {/if}
       {#each imageBackgrounds as bg (bg.id)}
-        {#if isVisible && bg.blob}
+        {#if bg.url}
           <BackgroundItem
             bg={bg}
             isSelected={selectedBackground === bg.id}
@@ -219,7 +174,7 @@
         <BackgroundUploader on:fileChange={e => handleFileChange(e.detail)} />
       {/if}
       {#each videoBackgrounds as bg (bg.id)}
-        {#if isVisible && bg.blob}
+        {#if bg.url}
           <BackgroundItem
             bg={bg}
             isSelected={selectedBackground === bg.id}
@@ -233,4 +188,4 @@
       {/each}
     </div>
   {/if}
-</div>
\ No newline at end of file
+</div>