BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-06 11:44:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: prevent background from being mounted when not in use

Browse Source
This commit is contained in:
SethBurkart123
2024-02-09 18:22:58 +11:00
parent 410b817cca
commit 871cef91cb
9 changed files with 53 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/seqta/ui/ImageBackgrounds.ts
+7 -1
View File
@@ -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
+2 -2
View File
@@ -23,7 +23,7 @@
<body>
<!-- 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
+4 -4
View File
@@ -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
View File
@@ -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) {
@@ -80,6 +82,15 @@ export default class StorageListener {
document.documentElement.classList.remove('transparencyEffects');
}
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: