fixes consumption of user preferences store

src/lib/components/audio-loader.svelte

@@ -8,12 +8,9 @@
 		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/episode-progress';
 	import { user_preferences } from '$lib/context/user-preferences';
 	import type { PlayerElement } from '$lib/types/types';
 	import { onMount } from 'svelte';
@@ -26,9 +23,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);
@@ -38,9 +35,9 @@
 	$: 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(() => {

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/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/index.ts

@@ -1,3 +1,4 @@
 export { default as AudioLoader } from '$lib/components/audio-loader.svelte';
 export * from '$lib/context/audio';
 export * from '$lib/context/episode-progress';
+export * from '$lib/context/user-preferences';

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { audio, episode_progress, type AudioLoadData } from '$lib';
+	import { audio, episode_progress, user_preferences, type AudioLoadData } from '$lib';
 
 	const sources = {
 		syntax: {
@@ -22,7 +22,8 @@
 
 <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>
 
 <h5>Load Audio</h5>
 <button
@@ -67,5 +68,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}