mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-06 03:34:40 +00:00
feat: add backgrounds tab + filtering improvements
This commit is contained in:
sethburkart123
@@ -0,0 +1,34 @@
|
||||
<script lang="ts">
|
||||
let { size = 'md', color = 'currentColor' } = $props();
|
||||
|
||||
const sizeMap = {
|
||||
sm: '1rem',
|
||||
md: '2rem',
|
||||
lg: '3rem',
|
||||
};
|
||||
|
||||
let dimensions = $derived(sizeMap[size as keyof typeof sizeMap] || size);
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class="animate-spin"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
width={dimensions}
|
||||
height={dimensions}
|
||||
>
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke={color}
|
||||
stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill={color}
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
@@ -0,0 +1,389 @@
|
||||
<script lang="ts">
|
||||
import { hasEnoughStorageSpace, isIndexedDBSupported, writeData, openDatabase, readAllData, deleteData } from '@/svelte-interface/hooks/BackgroundDataLoader';
|
||||
import { setTheme } from '@/seqta/ui/themes/setTheme';
|
||||
import Spinner from '../Spinner.svelte';
|
||||
import { settingsState } from '@/seqta/utils/listeners/SettingsState'
|
||||
|
||||
type Background = { id: string; category: string; type: string; lowResUrl: string; highResUrl: string; name: string; description: string; featured?: boolean };
|
||||
let { searchTerm } = $props<{ searchTerm: string }>();
|
||||
|
||||
// Existing states
|
||||
let backgrounds = $state<Background[]>([]);
|
||||
let selectedCategory = $state<string>('All');
|
||||
let error = $state<string | null>(null);
|
||||
let selectedBackground = $state<string | null>(null);
|
||||
let isLoading = $state<boolean>(true);
|
||||
let savedBackgrounds = $state<string[]>([]);
|
||||
let installingBackgrounds = $state<Set<string>>(new Set());
|
||||
let debugInfo = $state<string>('');
|
||||
let displayBackground = $state<Background | null>(null);
|
||||
|
||||
// New state variables
|
||||
let activeTab = $state<'all' | 'installed' | 'photos' | 'videos'>('all');
|
||||
let showPreview = $state<boolean>(false);
|
||||
let favorites = $state<string[]>([]);
|
||||
let sortBy = $state<'newest' | 'popular' | 'name'>('newest');
|
||||
|
||||
// Existing functions
|
||||
const loadStore = async () => {
|
||||
try {
|
||||
debugInfo = 'Fetching backgrounds...';
|
||||
const response = await fetch('https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/store/backgrounds.json');
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
backgrounds = data.backgrounds;
|
||||
console.log(data.backgrounds);
|
||||
debugInfo = `Loaded ${backgrounds.length} backgrounds`;
|
||||
await loadSavedBackgrounds();
|
||||
} catch (e) {
|
||||
error = 'Failed to load background store';
|
||||
debugInfo = `Error: ${e instanceof Error ? e.message : 'Unknown error'}`;
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
};
|
||||
|
||||
async function loadSavedBackgrounds(): Promise<void> {
|
||||
try {
|
||||
if (!isIndexedDBSupported()) {
|
||||
throw new Error("Your browser doesn't support IndexedDB.");
|
||||
}
|
||||
await openDatabase();
|
||||
const data = await readAllData();
|
||||
savedBackgrounds = data.map(item => item.id);
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Unknown error occurred';
|
||||
}
|
||||
}
|
||||
|
||||
// Load data on mount
|
||||
loadStore();
|
||||
|
||||
// Derived states
|
||||
let filteredBackgrounds = $derived((() => {
|
||||
let filtered = backgrounds.filter((bg: Background) => {
|
||||
const matchesCategory = selectedCategory === 'All'
|
||||
? true
|
||||
: selectedCategory === 'Featured'
|
||||
? bg.featured
|
||||
: bg.category === selectedCategory;
|
||||
const matchesSearch = bg.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
bg.description.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
return matchesCategory && matchesSearch;
|
||||
});
|
||||
|
||||
// Apply sorting
|
||||
filtered.sort((a: Background, b: Background) => {
|
||||
switch (sortBy) {
|
||||
case 'name':
|
||||
return a.name.localeCompare(b.name);
|
||||
case 'newest':
|
||||
return -1;
|
||||
case 'popular':
|
||||
return -1;
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
|
||||
return filtered;
|
||||
})());
|
||||
|
||||
let categories = $derived([...new Set(backgrounds.map(bg => bg.category))]);
|
||||
|
||||
// Background management functions
|
||||
async function saveBackgroundFromUrl(url: string, id: string, fileType: string): Promise<void> {
|
||||
try {
|
||||
if (!isIndexedDBSupported()) {
|
||||
throw new Error("Your browser doesn't support IndexedDB.");
|
||||
}
|
||||
|
||||
const response = await fetch(url);
|
||||
const blob = await response.blob();
|
||||
const hasSpace = await hasEnoughStorageSpace(blob.size);
|
||||
|
||||
if (!hasSpace) {
|
||||
throw new Error("Not enough storage space.");
|
||||
}
|
||||
|
||||
await writeData(id, fileType, blob);
|
||||
savedBackgrounds = [...savedBackgrounds, id];
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Unknown error occurred';
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteBackground(fileId: string): Promise<void> {
|
||||
installingBackgrounds = new Set(installingBackgrounds).add(fileId);
|
||||
try {
|
||||
await deleteData(fileId);
|
||||
savedBackgrounds = savedBackgrounds.filter(id => id !== fileId);
|
||||
|
||||
if (selectedBackground === fileId) {
|
||||
selectNoBackground();
|
||||
}
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? `Failed to delete background: ${e.message}` : 'Unknown error occurred';
|
||||
} finally {
|
||||
installingBackgrounds = new Set(installingBackgrounds);
|
||||
installingBackgrounds.delete(fileId);
|
||||
}
|
||||
}
|
||||
|
||||
async function installBackground(background: Background) {
|
||||
installingBackgrounds = new Set(installingBackgrounds).add(background.id);
|
||||
try {
|
||||
await saveBackgroundFromUrl(background.highResUrl, background.id, background.type);
|
||||
} finally {
|
||||
installingBackgrounds = new Set(installingBackgrounds);
|
||||
installingBackgrounds.delete(background.id);
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleBackgroundInstallation(background: Background) {
|
||||
if (savedBackgrounds.includes(background.id)) {
|
||||
await deleteBackground(background.id);
|
||||
} else {
|
||||
await installBackground(background);
|
||||
}
|
||||
}
|
||||
|
||||
function selectBackground(fileId: string): void {
|
||||
if (selectedBackground === fileId) {
|
||||
selectNoBackground();
|
||||
return;
|
||||
}
|
||||
selectedBackground = fileId;
|
||||
setTheme(fileId);
|
||||
}
|
||||
|
||||
function selectNoBackground() {
|
||||
selectedBackground = null;
|
||||
setTheme('');
|
||||
}
|
||||
|
||||
function openPreview(background: Background) {
|
||||
displayBackground = background;
|
||||
showPreview = true;
|
||||
}
|
||||
|
||||
function closePreview() {
|
||||
showPreview = false;
|
||||
displayBackground = null;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex h-screen">
|
||||
<!-- Sidebar -->
|
||||
<div class="w-64 h-full p-4 border-r border-zinc-200 dark:border-zinc-700">
|
||||
<div class="mb-8">
|
||||
<h2 class="mb-4 text-lg font-semibold">Categories</h2>
|
||||
<nav class="space-y-2">
|
||||
<button
|
||||
class={`w-full px-4 py-2 text-left bg-transparent rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800 transition ${selectedCategory === 'All' ? 'bg-blue-100 dark:bg-zinc-800' : ''}`}
|
||||
onclick={() => selectedCategory = 'All'}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
<button
|
||||
class={`w-full px-4 py-2 text-left bg-transparent rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800 transition ${selectedCategory === 'Featured' ? 'bg-blue-100 dark:bg-zinc-800' : ''}`}
|
||||
onclick={() => selectedCategory = 'Featured'}
|
||||
>
|
||||
Featured
|
||||
</button>
|
||||
|
||||
<div class="my-2 border-b border-zinc-200 dark:border-zinc-700"></div>
|
||||
|
||||
{#each categories as category}
|
||||
<button
|
||||
class={`w-full px-4 py-2 text-left bg-transparent rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800 transition ${selectedCategory === category ? 'bg-blue-100 dark:bg-zinc-800' : ''}`}
|
||||
onclick={() => selectedCategory = category}
|
||||
>
|
||||
{category}
|
||||
</button>
|
||||
{/each}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1 overflow-auto">
|
||||
<!-- Header -->
|
||||
<div class="sticky top-0 z-10 p-4 bg-white border-b dark:bg-zinc-900 dark:border-zinc-700">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h1 class="text-2xl font-bold">Explore Backgrounds</h1>
|
||||
<div class="flex items-center gap-4">
|
||||
<select
|
||||
bind:value={sortBy}
|
||||
class="p-2 border rounded-lg border-zinc-200 dark:border-zinc-700 dark:bg-zinc-800"
|
||||
>
|
||||
<option value="newest">Newest</option>
|
||||
<option value="popular">Most Popular</option>
|
||||
<option value="name">Name</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="flex gap-2">
|
||||
{#each ['All', 'Installed', 'Photos', 'Videos'] as tab}
|
||||
<button
|
||||
class={`px-4 py-2 text-sm font-medium transition-colors rounded-full
|
||||
${activeTab === tab.toLowerCase() ? 'bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700' :
|
||||
'bg-zinc-100 dark:bg-transparent dark:outline dark:outline-1 dark:outline-zinc-700 hover:bg-zinc-200 dark:hover:bg-zinc-700/20'}`}
|
||||
onclick={() => activeTab = tab.toLowerCase() as typeof activeTab}
|
||||
>
|
||||
{tab}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Background Grid -->
|
||||
<div class="p-4">
|
||||
{#if isLoading}
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{#each Array(9) as _, i}
|
||||
<div class="relative overflow-hidden rounded-lg animate-pulse">
|
||||
<!-- Image placeholder -->
|
||||
<div class="w-full h-48 bg-zinc-200 dark:bg-zinc-800"></div>
|
||||
<!-- Gradient overlay -->
|
||||
<div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-zinc-300 dark:from-zinc-700 to-transparent">
|
||||
<!-- Title placeholder -->
|
||||
<div class="absolute bottom-2 left-2 right-2">
|
||||
<div class="w-2/3 h-4 rounded-full bg-zinc-200 dark:bg-zinc-800"></div>
|
||||
<div class="w-1/2 h-3 mt-2 rounded-full bg-zinc-200 dark:bg-zinc-800"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="p-4 text-red-500 bg-red-100 rounded-lg">
|
||||
Error: {error}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{#each filteredBackgrounds.filter((bg: Background) => {
|
||||
if (activeTab === 'installed') return savedBackgrounds.includes(bg.id);
|
||||
if (activeTab === 'photos') return bg.type === 'image';
|
||||
if (activeTab === 'videos') return bg.type !== 'image';
|
||||
return true;
|
||||
}) as background (background.id)}
|
||||
<div
|
||||
class="relative overflow-hidden rounded-lg shadow-lg cursor-pointer group"
|
||||
onclick={() => toggleBackgroundInstallation(background)}
|
||||
onkeydown={(event) => {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
toggleBackgroundInstallation(background);
|
||||
}
|
||||
}}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
{#if background.type === 'image'}
|
||||
<img src={background.lowResUrl} alt={background.name} class="object-cover w-full h-48 transition-all duration-300 group-hover:scale-105" />
|
||||
{:else}
|
||||
<video src={background.lowResUrl} class="object-cover w-full h-48" muted loop autoplay></video>
|
||||
{/if}
|
||||
<div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100">
|
||||
{#if installingBackgrounds.has(background.id)}
|
||||
<Spinner />
|
||||
{:else if savedBackgrounds.includes(background.id)}
|
||||
<span class="flex items-center text-white">
|
||||
<span class="mr-2 text-2xl not-italic font-IconFamily" aria-hidden="true"></span>
|
||||
<span class="text-sm font-semibold">Remove</span>
|
||||
</span>
|
||||
{:else}
|
||||
<span class="flex items-center text-white">
|
||||
<span class="mr-2 text-2xl not-italic font-IconFamily" aria-hidden="true"></span>
|
||||
<span class="text-sm font-semibold">Install</span>
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
|
||||
<h3 class="text-sm font-semibold text-white">{background.name}</h3>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preview Modal -->
|
||||
{#if showPreview && displayBackground}
|
||||
<div
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75"
|
||||
onclick={closePreview}
|
||||
onkeydown={(e) => e.key === 'Escape' && closePreview()}
|
||||
>
|
||||
<div
|
||||
class="w-full max-w-4xl p-4 bg-white rounded-lg dark:bg-zinc-800"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div class="flex justify-between mb-4">
|
||||
<h2 class="text-2xl font-bold">{displayBackground.name}</h2>
|
||||
<button
|
||||
class="text-zinc-500 hover:text-zinc-700"
|
||||
onclick={closePreview}
|
||||
>
|
||||
<span class="text-2xl font-IconFamily"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="relative mb-4 aspect-video">
|
||||
{#if displayBackground.type === 'image'}
|
||||
<img
|
||||
src={displayBackground.highResUrl}
|
||||
alt={displayBackground.name}
|
||||
class="object-cover w-full h-full rounded-lg"
|
||||
/>
|
||||
{:else}
|
||||
<video
|
||||
src={displayBackground.highResUrl}
|
||||
class="object-cover w-full h-full rounded-lg"
|
||||
controls
|
||||
muted
|
||||
loop
|
||||
autoplay
|
||||
></video>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<p class="mb-4 text-zinc-600 dark:text-zinc-300">{displayBackground.description}</p>
|
||||
|
||||
<div class="flex space-x-4">
|
||||
<button
|
||||
class="px-4 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600"
|
||||
onclick={() => toggleBackgroundInstallation(displayBackground)}
|
||||
>
|
||||
{savedBackgrounds.includes(displayBackground.id) ? 'Remove' : 'Install'}
|
||||
</button>
|
||||
{#if savedBackgrounds.includes(displayBackground.id)}
|
||||
<button
|
||||
class="px-4 py-2 text-white bg-green-500 rounded-lg hover:bg-green-600"
|
||||
onclick={() => selectBackground(displayBackground.id)}
|
||||
>
|
||||
Apply
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if settingsState.devMode}
|
||||
<div class="p-4 mt-8 rounded bg-zinc-100 dark:bg-zinc-800">
|
||||
<h3 class="mb-2 font-bold">Debug Info:</h3>
|
||||
<p>{debugInfo}</p>
|
||||
<p>Total backgrounds: {backgrounds.length}</p>
|
||||
<p>Categories: {categories.join(', ') || '<empty>'}</p>
|
||||
<p>Active Tab: {activeTab}</p>
|
||||
<p>Selected Category: {selectedCategory}</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import type { Background } from './types';
|
||||
|
||||
export let filteredBackgrounds: Background[];
|
||||
|
||||
let dispatch = createEventDispatcher();
|
||||
|
||||
let filters = $state({
|
||||
type: [] as string[],
|
||||
color: [] as string[],
|
||||
resolution: [] as string[],
|
||||
orientation: [] as string[]
|
||||
});
|
||||
|
||||
$: {
|
||||
dispatch('filter', filters);
|
||||
}
|
||||
|
||||
function toggleFilter(category: keyof typeof filters, value: string) {
|
||||
if (filters[category].includes(value)) {
|
||||
filters[category] = filters[category].filter(v => v !== value);
|
||||
} else {
|
||||
filters[category] = [...filters[category], value];
|
||||
}
|
||||
}
|
||||
|
||||
function clearFilters() {
|
||||
filters = {
|
||||
type: [],
|
||||
color: [],
|
||||
resolution: [],
|
||||
orientation: []
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="p-4 bg-white rounded-lg shadow dark:bg-gray-800">
|
||||
<h2 class="mb-4 text-xl font-semibold">Filters</h2>
|
||||
|
||||
<div class="mb-4">
|
||||
<h3 class="mb-2 font-medium">Type</h3>
|
||||
<div class="space-y-2">
|
||||
<label class="flex items-center">
|
||||
<input type="checkbox" checked={filters.type.includes('image')} on:change={() => toggleFilter('type', 'image')}>
|
||||
<span class="ml-2">Image</span>
|
||||
</label>
|
||||
<label class="flex items-center">
|
||||
<input type="checkbox" checked={filters.type.includes('video')} on:change={() => toggleFilter('type', 'video')}>
|
||||
<span class="ml-2">Video</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add similar sections for color, resolution, and orientation -->
|
||||
|
||||
<button
|
||||
class="px-4 py-2 mt-4 text-white bg-red-500 rounded hover:bg-red-600"
|
||||
on:click={clearFilters}
|
||||
>
|
||||
Clear Filters
|
||||
</button>
|
||||
</div>
|
||||
@@ -1,6 +1,4 @@
|
||||
<script lang="ts">
|
||||
import Theme from '@/svelte-interface/pages/settings/theme.svelte'
|
||||
|
||||
let { theme, onClick } = $props<{ theme: Theme; onClick: () => void }>();
|
||||
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
@@ -16,11 +16,8 @@
|
||||
import { getAvailableThemes } from '@/seqta/ui/themes/getAvailableThemes'
|
||||
import { themeUpdates } from '../hooks/ThemeUpdates'
|
||||
|
||||
// Import background-related functions and components
|
||||
import { hasEnoughStorageSpace, isIndexedDBSupported, writeData, openDatabase, readAllData, deleteData } from '@/svelte-interface/hooks/BackgroundDataLoader'
|
||||
import BackgroundUploader from '../components/themes/BackgroundUploader.svelte';
|
||||
import BackgroundItem from '../components/themes/BackgroundItem.svelte'
|
||||
import { loadBackground } from '@/seqta/ui/ImageBackgrounds'
|
||||
import Backgrounds from '../components/store/Backgrounds.svelte'
|
||||
|
||||
// State variables
|
||||
let searchTerm = $state('');
|
||||
@@ -32,8 +29,6 @@
|
||||
let currentThemes = $state<string[]>([]);
|
||||
let activeTab = $state('themes');
|
||||
|
||||
// Background-related state
|
||||
let backgrounds = $state<{ id: string; type: string; blob: Blob | null; url?: string }[]>([]);
|
||||
let error = $state<string | null>(null);
|
||||
let selectedBackground = $state<string | null>(null);
|
||||
|
||||
@@ -54,10 +49,6 @@
|
||||
activeTab = tab;
|
||||
};
|
||||
|
||||
async function getTheme() {
|
||||
return localStorage.getItem('selectedBackground');
|
||||
}
|
||||
|
||||
// Fetch themes and initialize app
|
||||
const fetchThemes = async () => {
|
||||
try {
|
||||
@@ -76,121 +67,10 @@
|
||||
}
|
||||
};
|
||||
|
||||
// Background-related functions
|
||||
async function handleFileChange(file: File): Promise<void> {
|
||||
if (!file) return;
|
||||
|
||||
try {
|
||||
if (!isIndexedDBSupported()) {
|
||||
throw new Error("Your browser doesn't support IndexedDB. Unable to save backgrounds.");
|
||||
}
|
||||
|
||||
const hasSpace = await hasEnoughStorageSpace(file.size);
|
||||
if (!hasSpace) {
|
||||
throw new Error("Not enough storage space to save this background.");
|
||||
}
|
||||
|
||||
const fileId = `${Date.now()}-${file.name}`;
|
||||
const fileType = file.type.split('/')[0];
|
||||
const blob = new Blob([file], { type: file.type });
|
||||
|
||||
await writeData(fileId, fileType, blob);
|
||||
backgrounds = [...backgrounds, { id: fileId, type: fileType, blob, url: URL.createObjectURL(blob) }];
|
||||
} catch (e) {
|
||||
if (e instanceof Error) {
|
||||
error = e.message;
|
||||
} else {
|
||||
error = 'An unknown error occurred';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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 loadFullBackgrounds(): Promise<void> {
|
||||
try {
|
||||
error = null;
|
||||
|
||||
if (!isIndexedDBSupported()) {
|
||||
throw new Error("Your browser doesn't support IndexedDB. Unable to load backgrounds.");
|
||||
}
|
||||
|
||||
const data = await readAllData();
|
||||
backgrounds = await preloadBackgrounds(data);
|
||||
} catch (e) {
|
||||
if (e instanceof Error) {
|
||||
error = e.message;
|
||||
} else {
|
||||
error = 'An unknown error occurred';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function preloadBackgrounds(data: { id: string; type: string; blob: Blob }[]): Promise<{ id: string; type: string; blob: Blob; url: string }[]> {
|
||||
return data.map(bg => ({
|
||||
...bg,
|
||||
url: URL.createObjectURL(bg.blob)
|
||||
}));
|
||||
}
|
||||
|
||||
function selectBackground(fileId: string): void {
|
||||
if (selectedBackground === fileId) {
|
||||
selectNoBackground();
|
||||
return;
|
||||
}
|
||||
|
||||
selectedBackground = fileId;
|
||||
setTheme(fileId);
|
||||
}
|
||||
|
||||
async function deleteBackground(fileId: string): Promise<void> {
|
||||
try {
|
||||
await deleteData(fileId);
|
||||
backgrounds = backgrounds.filter(bg => bg.id !== fileId);
|
||||
|
||||
if (selectedBackground === fileId) {
|
||||
selectNoBackground();
|
||||
}
|
||||
} catch (e) {
|
||||
if (e instanceof Error) {
|
||||
error = `Failed to delete background: ${e.message}`;
|
||||
} else {
|
||||
error = 'An unknown error occurred';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function selectNoBackground() {
|
||||
selectedBackground = null;
|
||||
setTheme('');
|
||||
}
|
||||
|
||||
// On mount
|
||||
onMount(async () => {
|
||||
await fetchThemes();
|
||||
await fetchCurrentThemes();
|
||||
await loadBackgroundMetadata();
|
||||
|
||||
darkMode = (await browser.storage.local.get('DarkMode')).DarkMode === 'true';
|
||||
darkMode = $settingsState.DarkMode;
|
||||
@@ -202,9 +82,6 @@
|
||||
theme.description.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
));
|
||||
|
||||
let imageBackgrounds = $derived(backgrounds.filter(bg => bg.type === 'image'));
|
||||
let videoBackgrounds = $derived(backgrounds.filter(bg => bg.type === 'video'));
|
||||
|
||||
$effect(() => {
|
||||
loadBackground();
|
||||
selectedBackground
|
||||
@@ -221,7 +98,7 @@
|
||||
<div class="h-full overflow-y-scroll bg-zinc-200/50 dark:bg-zinc-900 dark:text-white pt-[4.25rem]">
|
||||
<Header {searchTerm} {setSearchTerm} {darkMode} {activeTab} {setActiveTab} />
|
||||
|
||||
<div class="px-12 pt-6">
|
||||
<div class={`px-12 ${activeTab === 'backgrounds' ? 'pt-0' : 'pt-6'}`}>
|
||||
<!-- Loading State -->
|
||||
{#if loading}
|
||||
<div class="grid grid-cols-1 gap-4 py-12 mx-auto sm:grid-cols-2 lg:grid-cols-3">
|
||||
@@ -263,40 +140,7 @@
|
||||
/>
|
||||
{/if}
|
||||
{:else if activeTab === 'backgrounds'}
|
||||
<!-- Backgrounds Tab Content -->
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h2 class="mb-4 text-lg font-bold">Background Images</h2>
|
||||
<div class="flex flex-wrap gap-4 mb-4">
|
||||
<BackgroundUploader on:fileChange={e => handleFileChange(e.detail)} />
|
||||
{#each imageBackgrounds as bg (bg.id)}
|
||||
<BackgroundItem
|
||||
{bg}
|
||||
isSelected={selectedBackground === bg.id}
|
||||
isEditMode={false}
|
||||
onClick={() => selectBackground(bg.id)}
|
||||
onDelete={() => deleteBackground(bg.id)}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="mb-4 text-lg font-bold">Background Videos</h2>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<BackgroundUploader on:fileChange={e => handleFileChange(e.detail)} />
|
||||
{#each videoBackgrounds as bg (bg.id)}
|
||||
<BackgroundItem
|
||||
{bg}
|
||||
isSelected={selectedBackground === bg.id}
|
||||
isEditMode={false}
|
||||
onClick={() => selectBackground(bg.id)}
|
||||
onDelete={() => deleteBackground(bg.id)}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Backgrounds {searchTerm} />
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user