plyr.fm / frontend / src / lib / preferences.svelte.ts

// user preferences state management
import { browser } from '$app/environment';
import { API_URL } from '$lib/config';
import { auth } from '$lib/auth.svelte';

export type Theme = 'dark' | 'light' | 'system';

export interface UiSettings {
	background_image_url?: string;
	background_tile?: boolean;
	use_playing_artwork_as_background?: boolean;
}

export interface Preferences {
	accent_color: string | null;
	auto_advance: boolean;
	allow_comments: boolean;
	hidden_tags: string[];
	theme: Theme;
	enable_teal_scrobbling: boolean;
	teal_needs_reauth: boolean;
	show_sensitive_artwork: boolean;
	show_liked_on_profile: boolean;
	support_url: string | null;
	ui_settings: UiSettings;
	auto_download_liked: boolean;
}

const DEFAULT_PREFERENCES: Preferences = {
	accent_color: null,
	auto_advance: true,
	allow_comments: true,
	hidden_tags: ['ai'],
	theme: 'dark',
	enable_teal_scrobbling: false,
	teal_needs_reauth: false,
	show_sensitive_artwork: false,
	show_liked_on_profile: false,
	support_url: null,
	ui_settings: {},
	auto_download_liked: false
};

class PreferencesManager {
	data = $state<Preferences | null>(null);
	loading = $state(false);
	private initialized = false;

	get loaded(): boolean {
		return this.data !== null;
	}

	get hiddenTags(): string[] {
		return this.data?.hidden_tags ?? DEFAULT_PREFERENCES.hidden_tags;
	}

	get accentColor(): string | null {
		return this.data?.accent_color ?? null;
	}

	get autoAdvance(): boolean {
		return this.data?.auto_advance ?? DEFAULT_PREFERENCES.auto_advance;
	}

	get allowComments(): boolean {
		return this.data?.allow_comments ?? DEFAULT_PREFERENCES.allow_comments;
	}

	get theme(): Theme {
		return this.data?.theme ?? DEFAULT_PREFERENCES.theme;
	}

	get enableTealScrobbling(): boolean {
		return this.data?.enable_teal_scrobbling ?? DEFAULT_PREFERENCES.enable_teal_scrobbling;
	}

	get tealNeedsReauth(): boolean {
		return this.data?.teal_needs_reauth ?? DEFAULT_PREFERENCES.teal_needs_reauth;
	}

	get showSensitiveArtwork(): boolean {
		return this.data?.show_sensitive_artwork ?? DEFAULT_PREFERENCES.show_sensitive_artwork;
	}

	get showLikedOnProfile(): boolean {
		return this.data?.show_liked_on_profile ?? DEFAULT_PREFERENCES.show_liked_on_profile;
	}

	get supportUrl(): string | null {
		return this.data?.support_url ?? DEFAULT_PREFERENCES.support_url;
	}

	get uiSettings(): UiSettings {
		return this.data?.ui_settings ?? DEFAULT_PREFERENCES.ui_settings;
	}

	get autoDownloadLiked(): boolean {
		return this.data?.auto_download_liked ?? DEFAULT_PREFERENCES.auto_download_liked;
	}

	setAutoDownloadLiked(enabled: boolean): void {
		if (browser) {
			localStorage.setItem('autoDownloadLiked', enabled ? '1' : '0');
		}
		if (this.data) {
			this.data = { ...this.data, auto_download_liked: enabled };
		}
	}

	setTheme(theme: Theme): void {
		if (browser) {
			localStorage.setItem('theme', theme);
			this.applyTheme(theme);
		}
		this.update({ theme });
	}

	applyTheme(theme: Theme): void {
		if (!browser) return;
		const root = document.documentElement;
		root.classList.remove('theme-dark', 'theme-light');

		let effectiveTheme: 'dark' | 'light';
		if (theme === 'system') {
			effectiveTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
		} else {
			effectiveTheme = theme;
		}
		root.classList.add(`theme-${effectiveTheme}`);
	}

	async initialize(): Promise<void> {
		if (!browser || this.initialized || this.loading) return;
		this.initialized = true;
		await this.fetch();
	}

	async fetch(): Promise<void> {
		if (!browser || !auth.isAuthenticated) return;

		this.loading = true;
		try {
			// preserve theme from localStorage (theme is client-side only)
			const storedTheme = localStorage.getItem('theme') as Theme | null;
			const currentTheme = storedTheme ?? this.data?.theme ?? DEFAULT_PREFERENCES.theme;

			const response = await fetch(`${API_URL}/preferences/`, {
				credentials: 'include'
			});
			if (response.ok) {
				const data = await response.json();
				// auto_download_liked is stored locally since it's device-specific
				const storedAutoDownload = localStorage.getItem('autoDownloadLiked') === '1';
				this.data = {
					accent_color: data.accent_color ?? null,
					auto_advance: data.auto_advance ?? DEFAULT_PREFERENCES.auto_advance,
					allow_comments: data.allow_comments ?? DEFAULT_PREFERENCES.allow_comments,
					hidden_tags: data.hidden_tags ?? DEFAULT_PREFERENCES.hidden_tags,
					theme: currentTheme,
					enable_teal_scrobbling: data.enable_teal_scrobbling ?? DEFAULT_PREFERENCES.enable_teal_scrobbling,
					teal_needs_reauth: data.teal_needs_reauth ?? DEFAULT_PREFERENCES.teal_needs_reauth,
					show_sensitive_artwork: data.show_sensitive_artwork ?? DEFAULT_PREFERENCES.show_sensitive_artwork,
					show_liked_on_profile: data.show_liked_on_profile ?? DEFAULT_PREFERENCES.show_liked_on_profile,
					support_url: data.support_url ?? DEFAULT_PREFERENCES.support_url,
					ui_settings: data.ui_settings ?? DEFAULT_PREFERENCES.ui_settings,
					auto_download_liked: storedAutoDownload
				};
			} else {
				const storedAutoDownload = localStorage.getItem('autoDownloadLiked') === '1';
				this.data = { ...DEFAULT_PREFERENCES, theme: currentTheme, auto_download_liked: storedAutoDownload };
			}
			// apply theme after fetching
			if (browser) {
				this.applyTheme(this.data.theme);
			}
		} catch (error) {
			console.error('failed to fetch preferences:', error);
			// preserve theme on error too
			const storedTheme = localStorage.getItem('theme') as Theme | null;
			this.data = { ...DEFAULT_PREFERENCES, theme: storedTheme ?? DEFAULT_PREFERENCES.theme };
		} finally {
			this.loading = false;
		}
	}

	async update(updates: Partial<Preferences>): Promise<void> {
		if (!browser || !auth.isAuthenticated) return;

		// optimistic update
		if (this.data) {
			this.data = { ...this.data, ...updates };
		}

		try {
			await fetch(`${API_URL}/preferences/`, {
				method: 'POST',
				headers: { 'Content-Type': 'application/json' },
				credentials: 'include',
				body: JSON.stringify(updates)
			});
		} catch (error) {
			console.error('failed to save preferences:', error);
			// revert on error by refetching
			await this.fetch();
		}
	}

	async updateUiSettings(updates: Partial<UiSettings>): Promise<void> {
		if (!browser || !auth.isAuthenticated) return;

		// optimistic update - merge with existing
		if (this.data) {
			this.data = {
				...this.data,
				ui_settings: { ...this.data.ui_settings, ...updates }
			};
		}

		try {
			const response = await fetch(`${API_URL}/preferences/`, {
				method: 'POST',
				headers: { 'Content-Type': 'application/json' },
				credentials: 'include',
				body: JSON.stringify({ ui_settings: updates })
			});
			if (!response.ok) {
				console.error('failed to save ui settings:', response.status);
				await this.fetch();
			}
		} catch (error) {
			console.error('failed to save ui settings:', error);
			await this.fetch();
		}
	}

	clear(): void {
		this.data = null;
		this.initialized = false;
	}
}

export const preferences = new PreferencesManager();