restructured preferences

src/lib/audio/episode-data.ts

@@ -1,6 +1,6 @@
 import { audio_element, type AudioElementStore } from '$lib/audio/audio-element';
 import { episode_details, type EpisodeDetailsStore } from '$lib/audio/episode-details';
-import { podcast_preferences } from '$lib/preferences';
+import { user_preferences } from '$lib/preferences';
 import { podcast_progress } from '$lib/progress';
 import type { EpisodeAttributes, EpisodeDetails } from '$lib/types';
 import { warn } from '$lib/utility/package/log';
@@ -52,7 +52,7 @@ export const episode_audio = {
 		console.log('podcast_progress', podcast_progress.data);
 		el.currentTime = progress?.start_at || 0;
 
-		const preferences = get(podcast_preferences);
+		const preferences = get(user_preferences);
 		el.playbackRate = preferences.playback_rate;
 		el.volume = preferences.volume;
 

src/lib/preferences/_private.ts

@@ -1,9 +0,0 @@
-import type { UserPreferences } from '$lib/types';
-import { writable } from 'svelte/store';
-
-export const _default_user_preferences = {
-	playback_rate: 1,
-	volume: 1,
-} satisfies UserPreferences;
-
-export const _user_preferences = writable<UserPreferences>(_default_user_preferences);

src/lib/preferences/db-local-storage.ts

@@ -1,23 +1,24 @@
 import { browser } from '$app/environment';
-import { edit_preference } from '$lib/preferences/edit';
-import { _user_preferences } from '$lib/preferences/_private';
+import { user_preferences } from '$lib/preferences/db-state';
+
 import type { UserPreferences } from '$lib/types';
 import { info, warn } from '$lib/utility/package/log';
+import { get } from 'svelte/store';
 
 const USER_PREFERENCE_KEY = 'USER_PREFERENCE' as const;
 
-export function save() {
+export function save_preferences() {
 	if (!browser || !localStorage) {
 		warn('localStorage not available, skipping save');
 		return;
 	}
-	return _user_preferences.subscribe((prefs) => {
-		info(`Saving user preferences to localStorage`, prefs);
-		localStorage.setItem(USER_PREFERENCE_KEY, JSON.stringify(prefs));
-	})();
+
+	const preferences = get(user_preferences);
+	info(`Saving user preferences to localStorage`, preferences);
+	localStorage.setItem(USER_PREFERENCE_KEY, JSON.stringify(preferences));
 }
 
-export function load() {
+export function load_preferences() {
 	if (!browser || !localStorage) {
 		warn('localStorage not available, skipping load');
 		return;
@@ -30,7 +31,7 @@ export function load() {
 	}
 
 	const preferences = JSON.parse(data) as UserPreferences;
-	edit_preference(preferences);
+	user_preferences.edit(preferences);
 
 	info(`Loaded user preferences from localStorage`, preferences);
 }

src/lib/preferences/db-state.ts

@@ -0,0 +1,35 @@
+import type { UserPreferences } from '$lib/types';
+import clamp from 'just-clamp';
+import { writable } from 'svelte/store';
+import { load_preferences, save_preferences } from './db-local-storage';
+
+const _default_user_preferences = {
+	playback_rate: 1,
+	volume: 1,
+} satisfies UserPreferences;
+
+const _user_preferences = writable<UserPreferences>(_default_user_preferences);
+
+function clamp_preferences(prefs: UserPreferences) {
+	return {
+		playback_rate: clamp(prefs.playback_rate, 0.5, 5),
+		volume: clamp(prefs.volume, 0, 1),
+	};
+}
+
+function edit(prefs: Partial<UserPreferences>) {
+	_user_preferences.update((prev) => clamp_preferences({ ...prev, ...prefs }));
+	save_preferences();
+}
+
+const clear = () => {
+	_user_preferences.set(_default_user_preferences);
+	save_preferences();
+};
+
+export const user_preferences = {
+	subscribe: _user_preferences.subscribe,
+	edit,
+	clear,
+	load: load_preferences,
+};

src/lib/preferences/edit.ts

@@ -1,16 +0,0 @@
-import { _user_preferences } from '$lib/preferences/_private';
-import type { UserPreferences } from '$lib/types';
-import clamp from 'just-clamp';
-import { save } from './local-storage';
-
-function clamp_preferences(prefs: UserPreferences) {
-	return {
-		playback_rate: clamp(prefs.playback_rate, 0.5, 5),
-		volume: clamp(prefs.volume, 0, 1),
-	};
-}
-
-export function edit_preference(prefs: Partial<UserPreferences>) {
-	_user_preferences.update((prev) => clamp_preferences({ ...prev, ...prefs }));
-	save();
-}

src/lib/preferences/index.ts

@@ -1,14 +1 @@
-import { edit_preference } from '$lib/preferences/edit';
-import { _default_user_preferences, _user_preferences } from '$lib/preferences/_private';
-import { load, save } from './local-storage';
-
-export const podcast_preferences = {
-	subscribe: _user_preferences.subscribe,
-	edit: edit_preference,
-	load,
-	save,
-	clear() {
-		_user_preferences.set(_default_user_preferences);
-		save();
-	},
-};
+export * from './db-state';

src/lib/utility/use-state.ts

@@ -1,12 +1,7 @@
-import { podcast_preferences } from '$lib/preferences';
+import { user_preferences } from '$lib/preferences';
 import { podcast_progress } from '$lib/progress';
 
-export function save_podcast_state() {
-	podcast_progress.save();
-	podcast_preferences.save();
-}
-
 export function load_podcast_state() {
 	podcast_progress.load();
-	podcast_preferences.load();
+	user_preferences.load();
 }

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { podcast_preferences, podcast_progress, save_podcast_state } from '$lib';
+	import { podcast_progress, user_preferences } from '$lib';
 	import { episode_audio, episode_progress } from '$lib/audio';
 
 	const sources = {
@@ -23,7 +23,7 @@
 		{
 			$episode_audio,
 			$episode_progress,
-			$podcast_preferences,
+			$user_preferences,
 		},
 		null,
 		3,
@@ -32,8 +32,6 @@
 <h1>Demo</h1>
 <a href="/another-page">Another Page</a>
 <button type="button" on:click={podcast_progress.save}>Save progress</button>
-<button type="button" on:click={podcast_preferences.save}>Save preferences</button>
-<button type="button" on:click={save_podcast_state}>Save state (all)</button>
 
 <h5>Load Audio</h5>
 <button type="button" on:click={() => episode_audio.load(sources['syntax'].src, sources['knomii'])}
@@ -78,7 +76,7 @@
 <h6>Playback Rate</h6>
 
 {#each [0.5, 1, 2, 3] as rate}
-	<button type="button" on:click={() => podcast_preferences.edit({ playback_rate: rate })}>
+	<button type="button" on:click={() => user_preferences.edit({ playback_rate: rate })}>
 		{rate}x
 	</button>
 {/each}