Handle user preferences (#21)

.changeset/twelve-chicken-divide.md

@@ -0,0 +1,5 @@
+---
+'svelte-podcast': minor
+---
+
+Adds mechanic for managing user preferences

src/lib/components/audio-loader.svelte

@@ -8,13 +8,12 @@
 		audio_loading,
 		audio_muted,
 		audio_paused,
-		audio_playback_rate,
 		audio_src,
 		audio_start_at,
-		audio_volume,
 	} from '$lib/context/audio-internals';
-	import { episode_progress } from '$lib/context/progress';
+	import { user_preferences } from '$lib/context/user-preferences';
 	import type { PlayerElement } from '$lib/types/types';
+	import { load_podcast_state } from '$lib/utility/use-state';
 	import { onMount } from 'svelte';
 
 	// readonly values
@@ -25,9 +24,9 @@
 	let paused = false;
 
 	// handler values
-	let volume = $audio_volume;
+	let volume = $user_preferences.volume;
+	let playbackRate = $user_preferences.playback_rate;
 	let muted = false;
-	let playbackRate = 1;
 
 	// readonly - stores will update when bindings change
 	$: audio_element.set(element);
@@ -37,14 +36,12 @@
 	$: audio_paused.set(paused);
 
 	// handlers - when store value changes, the binding will update the audio element
-	$: volume = $audio_volume;
+	$: volume = $user_preferences.volume;
+	$: playbackRate = $user_preferences.playback_rate;
 	$: muted = $audio_muted;
-	$: playbackRate = $audio_playback_rate;
 	$: current_time = $audio_start_at;
 
-	onMount(() => {
+	onMount(load_podcast_state);
-		episode_progress.load_all();
-	});
 </script>
 
 <audio

src/lib/context/audio-internals.ts

@@ -13,6 +13,4 @@ export const audio_paused = writable<boolean>(true);
 export const audio_start_at = writable<number>(0);
 export const audio_autoplay = writable<boolean>(false);
 export const audio_muted = writable<boolean>(false);
-export const audio_playback_rate = writable<number>(1);
 export const audio_src = writable<string>('');
-export const audio_volume = writable<number>(1);

src/lib/context/audio.ts

@@ -7,13 +7,12 @@ import {
 	audio_loading,
 	audio_muted,
 	audio_paused,
-	audio_playback_rate,
 	audio_src,
 	audio_start_at,
-	audio_volume,
 } from '$lib/context/audio-internals';
 import { audio_metadata, type AudioMetadata } from '$lib/context/audio-metadata';
-import { episode_progress } from '$lib/context/progress';
+import { episode_progress } from '$lib/context/episode-progress';
+import { user_preferences } from '$lib/context/user-preferences';
 import { secondsToTimestamp } from '$lib/utility/seconds-to-timestamp';
 import { info, warn } from '$pkg/log';
 import clamp from 'just-clamp';
@@ -29,10 +28,9 @@ const audio_state = derived(
 		audio_start_at,
 		audio_autoplay,
 		audio_muted,
-		audio_playback_rate,
 		audio_src,
-		audio_volume,
 		audio_metadata,
+		user_preferences,
 	],
 	([
 		$current_time,
@@ -43,10 +41,9 @@ const audio_state = derived(
 		$start_at,
 		$autoplay,
 		$muted,
-		$playback_rate,
 		$src,
-		$volume,
 		$metadata,
+		$user_preferences,
 	]) => {
 		return {
 			current_time: $current_time,
@@ -57,10 +54,10 @@ const audio_state = derived(
 			start_at: $start_at,
 			autoplay: $autoplay,
 			muted: $muted,
-			playback_rate: $playback_rate,
 			src: $src,
-			volume: $volume,
 			metadata: $metadata,
+			playback_rate: $user_preferences.playback_rate,
+			volume: $user_preferences.volume,
 			timestamp: secondsToTimestamp($current_time),
 		};
 	},
@@ -126,7 +123,6 @@ const load = (data: AudioLoadData, opts: AudioLoadOptions) => {
 
 	info('load: ', src);
 	audio_autoplay.set(opts.autoplay);
-	audio_volume.set(1);
 	audio_src.set(src);
 	audio_metadata.set(metadata);
 	audio_start_at.set(start_at);
@@ -138,17 +134,11 @@ function unload() {
 	info('unload: ');
 	pause();
 	audio_autoplay.set(false);
-	audio_volume.set(1);
 	audio_src.set('');
 	audio_metadata.set(null);
 	audio_start_at.set(0);
 }
 
-function setPlaybackRate(rate: number) {
-	info('setPlaybackRate: ', rate);
-	audio_playback_rate.set(clamp(0, 10, rate));
-}
-
 function seek(seconds: number, from: 'from-start' | 'from-end' = 'from-start') {
 	info('seek: ', seconds, from);
 	return audio_element.subscribe((el) => {
@@ -181,7 +171,6 @@ export const audio = {
 	unmute,
 	load,
 	unload,
-	setPlaybackRate,
 	seek,
 	skip,
 };

src/lib/context/episode-progress.ts

@@ -13,6 +13,7 @@ function stash_episode() {
 		info('saving progress: ', state.src);
 		if (!state.src) return;
 		episode_progress_map.set(state.src, { current_time: state.current_time });
+		save_all();
 	})();
 }
 
@@ -69,9 +70,21 @@ function load_all() {
 	}
 }
 
+function clear_all() {
+	episode_progress_map.clear();
+	save_all();
+}
+
 export const episode_progress = {
+	episodes: {
+		get: episode_progress_map.get,
+		includes: episode_progress_map.has,
+		forEach: episode_progress_map.forEach,
+		map: [...episode_progress_map].map,
+	},
 	stash: stash_episode,
 	use: use_episode,
 	save_all,
 	load_all,
+	clear_all,
 };

src/lib/context/user-preferences.ts

@@ -0,0 +1,70 @@
+import { browser } from '$app/environment';
+import { info, warn } from '$lib/utility/package/log';
+import clamp from 'just-clamp';
+import { writable } from 'svelte/store';
+
+export type UserPreferences = {
+	playback_rate: number;
+	volume: number;
+};
+
+const default_user_preferences = {
+	playback_rate: 1,
+	volume: 1,
+} satisfies UserPreferences;
+
+const user_preference_store = 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 set_preference(prefs: Partial<UserPreferences>) {
+	user_preference_store.update((prev) => clamp_preferences({ ...prev, ...prefs }));
+	save();
+}
+const USER_PREFERENCE_KEY = 'USER_PREFERENCE' as const;
+
+function save() {
+	if (!browser || !localStorage) {
+		warn('localStorage not available, skipping save');
+		return;
+	}
+	return user_preference_store.subscribe((prefs) => {
+		info(`Saving user preferences to localStorage`, prefs);
+		localStorage.setItem(USER_PREFERENCE_KEY, JSON.stringify(prefs));
+	})();
+}
+
+function load() {
+	if (!browser || !localStorage) {
+		warn('localStorage not available, skipping load');
+		return;
+	}
+	const data = localStorage.getItem(USER_PREFERENCE_KEY);
+
+	if (!data) {
+		info('No saved user preferences found');
+		return;
+	}
+
+	const preferences = JSON.parse(data) as UserPreferences;
+	set_preference(preferences);
+	info(`Loaded user preferences from localStorage`, preferences);
+}
+
+function clear() {
+	user_preference_store.set(default_user_preferences);
+	save();
+}
+
+export const user_preferences = {
+	subscribe: user_preference_store.subscribe,
+	set: set_preference,
+	save,
+	load,
+	clear,
+};

src/lib/index.ts

@@ -1,2 +1,5 @@
 export { default as AudioLoader } from '$lib/components/audio-loader.svelte';
-export { audio, type AudioLoadData, type AudioLoadOptions } from '$lib/context/audio';
+export * from '$lib/context/audio';
+export * from '$lib/context/episode-progress';
+export * from '$lib/context/user-preferences';
+export * from '$lib/utility';

src/lib/utility/index.ts

@@ -0,0 +1,2 @@
+export * from './seconds-to-timestamp';
+export * from './use-state';

src/lib/utility/package/log.ts

@@ -13,9 +13,9 @@ export function log(type: Logger, ...content: unknown[]) {
 
 	if (type === 'info' && !dev) return;
 
-	logger('🔊 svelte-podcast: ', content);
+	logger('🔊 svelte-podcast: ', ...content);
 }
 
 export const info = (...content: unknown[]) => log('info', ...content);
-export const warn = (...content: unknown[]) => log('warn', content);
+export const warn = (...content: unknown[]) => log('warn', ...content);
-export const error = (...content: unknown[]) => log('error', content);
+export const error = (...content: unknown[]) => log('error', ...content);

src/lib/utility/use-state.ts

@@ -0,0 +1,12 @@
+import { episode_progress } from '$lib/context/episode-progress';
+import { user_preferences } from '$lib/context/user-preferences';
+
+export function save_podcast_state() {
+	episode_progress.save_all();
+	user_preferences.save();
+}
+
+export function load_podcast_state() {
+	episode_progress.load_all();
+	user_preferences.load();
+}

src/routes/+page.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
-	import { audio, type AudioLoadData } from '$lib';
+	import {
-	import { episode_progress } from '$lib/context/progress';
+		audio,
+		episode_progress,
+		save_podcast_state,
+		user_preferences,
+		type AudioLoadData,
+	} from '$lib';
 
 	const sources = {
 		syntax: {
@@ -23,7 +28,9 @@
 
 <h1>Demo</h1>
 <a href="/another-page">Another Page</a>
-<button type="button" on:click={episode_progress.save_all}>save</button>
+<button type="button" on:click={episode_progress.save_all}>Save progress</button>
+<button type="button" on:click={user_preferences.save}>Save preferences</button>
+<button type="button" on:click={save_podcast_state}>Save state (all)</button>
 
 <h5>Load Audio</h5>
 <button
@@ -68,5 +75,7 @@
 <h6>Playback Rate</h6>
 
 {#each [0.5, 1, 2, 3] as rate}
-	<button type="button" on:click={() => audio.setPlaybackRate(rate)}>{rate}x</button>
+	<button type="button" on:click={() => user_preferences.set({ playback_rate: rate })}
+		>{rate}x</button
+	>
 {/each}