perf: prevent background from being mounted when not in use

.parcelrc

@@ -0,0 +1,5 @@
+{
+"transformers": {
+    "raw:*": ["@parcel/transformer-raw"]
+  }
+}

package.json

@@ -3,6 +3,7 @@
   "version": "3.2.4",
   "type": "module",
   "description": "BetterSEQTA+ is a browser extension that adds features to SEQTA.",
+  "browserslist": "> 0.5%, last 2 versions, not dead",
   "scripts": {
     "dev": "parcel watch manifest.json --host localhost --config @parcel/config-webextension --no-hmr --no-content-hash",
     "build": "parcel build manifest.json --config @parcel/config-webextension --no-content-hash --no-cache --no-source-maps",
@@ -24,6 +25,7 @@
   "devDependencies": {
     "@parcel/config-webextension": "^2.11.0",
     "@parcel/optimizer-data-url": "^2.11.0",
+    "@parcel/packager-ts": "2.11.0",
     "@parcel/transformer-inline-string": "^2.11.0",
     "@parcel/transformer-sass": "2.11.0",
     "assert": "^2.0.0",
@@ -50,6 +52,7 @@
     "yarn": "^1.22.21"
   },
   "dependencies": {
+    "@parcel/transformer-raw": "^2.11.0",
     "@sentry/browser": "^7.85.0",
     "@sentry/react": "^7.88.0",
     "@sentry/webpack-plugin": "^2.10.2",

src/interface/components/BackgroundSelector.tsx

@@ -3,6 +3,7 @@ import { downloadPresetBackground, openDB, readAllData, writeData } from "../hoo
 import presetBackgrounds from "../assets/presetBackgrounds";
 import "./BackgroundSelector.css";
 import { disableTheme } from "../hooks/ThemeManagment";
+import browser from "webextension-polyfill";
 
 // Custom Types and Interfaces
 export interface Background {
@@ -21,12 +22,27 @@ interface BackgroundSelectorProps {
   isEditMode: boolean;
 }
 
+async function GetTheme() {
+  return localStorage.getItem('selectedBackground');
+}
+
+async function SetTheme(theme: string) {
+  localStorage.setItem('selectedBackground', theme);
+  await browser.storage.local.set({ theme });
+}
+
 function BackgroundSelector({ selectedType, setSelectedType, isEditMode }: BackgroundSelectorProps) {
   const [backgrounds, setBackgrounds] = useState<Background[]>([]);
-  const [selectedBackground, setSelectedBackground] = useState<string | null>(localStorage.getItem('selectedBackground'));
+  const [selectedBackground, setSelectedBackground] = useState<string | null>();
   const [downloadedPresetIds, setDownloadedPresetIds] = useState<string[]>([]);
   const [downloadProgress, setDownloadProgress] = useState<Record<string, number>>({});
 
+  useEffect(() => {
+    GetTheme().then((theme) => {
+      setSelectedBackground(theme);
+    });
+  }, []);
+
   const handleFileChange = async (e: ChangeEvent<HTMLInputElement>): Promise<void> => {
     const file = e.target.files?.[0];
     if (!file) return;
@@ -77,7 +93,7 @@ function BackgroundSelector({ selectedType, setSelectedType, isEditMode }: Backg
     disableTheme();
     setSelectedType('background');
     setSelectedBackground(fileId);
-    localStorage.setItem('selectedBackground', fileId);
+    SetTheme(fileId);
   };
 
   const deleteBackground = async (fileId: string): Promise<void> => {
@@ -97,7 +113,7 @@ function BackgroundSelector({ selectedType, setSelectedType, isEditMode }: Backg
     setSelectedType('background');
     disableTheme();
     setSelectedBackground(null);
-    localStorage.removeItem('selectedBackground');
+    SetTheme('');
   };
 
   const calcCircumference = (radius: number) => 2 * Math.PI * radius;

src/interface/types/AppProps.ts

@@ -1,5 +1,6 @@
 export interface SettingsState {
   notificationCollector: boolean;
+  theme: string;
   lessonAlerts: boolean;
   telemetry: boolean;
   animatedBackground: boolean;

src/seqta/ui/ImageBackgrounds.ts

@@ -1,7 +1,13 @@
 import backgroundPage from 'url:./background/background.html'
+import browser from 'webextension-polyfill';
+import { SettingsState } from '../../types/storage';
 
 export async function appendBackgroundToUI() {
-  console.log('Starting appendBackgroundToUI...');
+  const settings = await browser.storage.local.get() as SettingsState;
+
+  console.log(settings.theme);
+
+  if (settings.theme == '') return; 
 
   const parent = document.getElementById('container');
 

src/seqta/ui/background/background.html

@@ -24,6 +24,6 @@
   <!-- Container for the media -->
   <div id="media-container"></div>
   
-  <script src="background.ts"></script>
+  <script src="./background.ts"></script>
 </body>
 </html>

src/seqta/ui/background/background.ts

@@ -19,7 +19,7 @@ const openDB = (): Promise<IDBDatabase> => {
     request.onsuccess = () => resolve(request.result);
 
     request.onupgradeneeded = (event: IDBVersionChangeEvent) => {
-      // @ts-expect-error
+      // @ts-expect-error - The event type is not recognized by TypeScript
       event?.target?.result.createObjectStore('backgrounds', { keyPath: 'id' });
     };
   });
@@ -27,7 +27,9 @@ const openDB = (): Promise<IDBDatabase> => {
 
 const readData = async (): Promise<Data | null> => {
   const selectedBackground = localStorage.getItem('selectedBackground');
-  if (!selectedBackground) {
+
+  //const selectedBackground = localStorage.getItem('selectedBackground');
+  if (!selectedBackground || selectedBackground === '') {
     return null;
   }
 
@@ -46,8 +48,6 @@ 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) {

src/seqta/utils/StorageListener.ts

@@ -11,6 +11,7 @@ import {
 } from '../../SEQTA';
 import { updateBgDurations } from '../ui/Animation';
 import { getDarkMode, updateAllColors } from '../ui/colors/Manager';
+import { appendBackgroundToUI } from '../ui/ImageBackgrounds';
 
 
 export default class StorageListener {
@@ -21,6 +22,7 @@ export default class StorageListener {
   }
 
   handleStorageChanges(changes: any) {
+    console.log('Storage changed:', changes);
     Object.keys(changes).forEach((changeKey) => {
       switch (changeKey) {
 
@@ -81,6 +83,15 @@ export default class StorageListener {
         }
         break;
       
+      case 'theme':
+        if (changes.theme.newValue === '' && changes.theme.oldValue !== '') {
+          document.querySelector('iframe#background')?.remove();
+        } else if (changes.theme.newValue !== '' && changes.theme.oldValue === '') {
+          appendBackgroundToUI();
+        }
+
+        break;
+
       // Add default case if you need to handle a case where changeKey does not match any case
       default:
         // Handle unknown changeKey if necessary

src/types/storage.ts

@@ -1,5 +1,6 @@
 export interface SettingsState {
   DarkMode: boolean;
+  theme: string;
   animatedbk: boolean;
   bksliderinput: string;
   customshortcuts: CustomShortcut[];