ove more values to micro stores

src/lib/components/audio-loader.svelte

@@ -2,44 +2,50 @@
 	import {
 		audio_autoplay,
 		audio_current_time,
+		audio_duration,
 		audio_element,
-		audio_metadata,
+		audio_ended,
+		audio_loading,
 		audio_muted,
+		audio_paused,
 		audio_playback_rate,
 		audio_src,
 		audio_start_at,
 		audio_volume,
 	} from '$lib/context/audio-internals';
 	import type { PlayerElement } from '$lib/types/types';
-	import { isBoolean, isNumber } from '$pkg/type-guards';
 
+	// readonly values
 	let element: PlayerElement;
-	let currentTime = $audio_start_at;
+	let current_time = $audio_start_at;
-	let volume = $audio_volume;
-
 	let duration = 0;
 	let ended = true;
-	let muted = false;
 	let paused = false;
+
+	// handler values
+	let volume = $audio_volume;
+	let muted = false;
 	let playbackRate = 1;
 
-	// Update stores based on bindings
+	// readonly - stores will update when bindings change
 	$: audio_element.set(element);
-	$: audio_current_time.set(currentTime);
+	$: audio_current_time.set(current_time);
-	$: audio_metadata.update((x) => ({ ...x, duration, ended, paused }));
+	$: audio_duration.set(duration);
+	$: audio_ended.set(ended);
+	$: audio_paused.set(paused);
 
-	// Update bindings based on stores
+	// handlers - when store value changes, the binding will update the audio element
 	$: volume = $audio_volume;
 	$: muted = $audio_muted;
 	$: playbackRate = $audio_playback_rate;
-	$: currentTime = $audio_start_at;
+	$: current_time = $audio_start_at;
 </script>
 
 <audio
 	bind:this={element}
 	src={$audio_src}
 	autoplay={$audio_autoplay}
-	bind:currentTime
+	bind:currentTime={current_time}
 	bind:muted
 	bind:duration
 	bind:paused
@@ -62,34 +68,6 @@
 		// TODO: reset player state
 		// console.log('emptied', e);
 	}}
-	on:loadeddata={() => {
+	on:loadeddata={() => audio_loading.set(false)}
-		audio_metadata.update((m) => ({ ...m, loading: false }));
+	on:loadstart={() => audio_loading.set(true)}
-	}}
-	on:loadstart={() => {
-		audio_metadata.update((m) => ({ ...m, loading: true }));
-	}}
-	on:playing={(e) => {
-		// @ts-expect-error event is not fully typed
-		const is_paused = e.target.paused;
-		if (!isBoolean(is_paused)) return;
-		audio_metadata.update((m) => ({ ...m, paused: is_paused }));
-	}}
-	on:pause={(e) => {
-		// @ts-expect-error event is not fully typed
-		const is_paused = e.target.paused;
-		if (!isBoolean(is_paused)) return;
-		audio_metadata.update((m) => ({ ...m, paused: is_paused }));
-	}}
-	on:ratechange={(e) => {
-		// @ts-expect-error event is not fully typed
-		const playbackRate = e.target.playbackRate;
-		if (!isNumber(playbackRate)) return;
-		audio_metadata.update((m) => ({ ...m, playbackRate }));
-	}}
-	on:durationchange={(e) => {
-		// @ts-expect-error event is not fully typed
-		const duration = e.target?.duration;
-		if (!isNumber(duration)) return;
-		audio_metadata.update((m) => ({ ...m, duration }));
-	}}
 />

src/lib/context/audio-internals.ts

@@ -1,30 +1,18 @@
 import type { PlayerElement } from '$lib/types/types';
 import { writable } from 'svelte/store';
 
-export const audio_element = writable<PlayerElement>();
+// readonly - stores will update when bindings change
-export const audio_start_at = writable<number>(0);
-
-export const audio_autoplay = writable<boolean>(false);
 export const audio_current_time = writable<number>(0);
+export const audio_element = writable<PlayerElement>();
+export const audio_duration = writable<number>(0);
+export const audio_ended = writable<boolean>(false);
+export const audio_loading = writable<boolean>(false);
+export const audio_paused = writable<boolean>(true);
+
+// handlers - when store value changes, the binding will update the audio element
+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);
-
-export type PlayerMetadata = {
-	duration: number;
-	// muted: boolean;
-	paused: boolean;
-	// playbackRate: number;
-	loading: boolean;
-	ended: boolean;
-};
-
-export const audio_metadata = writable<PlayerMetadata>({
-	duration: 0,
-	ended: false,
-	loading: false,
-	paused: true,
-	// muted: false,
-	// playbackRate: 1,
-});

src/lib/context/audio.ts

@@ -1,9 +1,12 @@
 import {
 	audio_autoplay,
 	audio_current_time,
+	audio_duration,
 	audio_element,
-	audio_metadata,
+	audio_ended,
+	audio_loading,
 	audio_muted,
+	audio_paused,
 	audio_playback_rate,
 	audio_src,
 	audio_start_at,
@@ -16,24 +19,44 @@ import { derived } from 'svelte/store';
 
 const audio_state = derived(
 	[
-		audio_metadata,
-		audio_autoplay,
 		audio_current_time,
+		audio_duration,
+		audio_ended,
+		audio_loading,
+		audio_paused,
+		audio_start_at,
+		audio_autoplay,
 		audio_muted,
 		audio_playback_rate,
 		audio_src,
 		audio_volume,
 	],
-	([$metadata, $autoplay, $current_time, $muted, $playback_rate, $src, $volume]) => {
+	([
+		$current_time,
+		$duration,
+		$ended,
+		$loading,
+		$paused,
+		$start_at,
+		$autoplay,
+		$muted,
+		$playback_rate,
+		$src,
+		$volume,
+	]) => {
 		return {
-			...$metadata,
-			autoplay: $autoplay,
 			current_time: $current_time,
-			timestamp: secondsToTimestamp($current_time),
+			duration: $duration,
+			ended: $ended,
+			loading: $loading,
+			paused: $paused,
+			start_at: $start_at,
+			autoplay: $autoplay,
 			muted: $muted,
 			playback_rate: $playback_rate,
 			src: $src,
 			volume: $volume,
+			timestamp: secondsToTimestamp($current_time),
 		};
 	},
 );
@@ -80,26 +103,31 @@ function unmute(type: HandleType = 'set') {
 	}
 }
 
-type LoadOptions = {
+export type AudioLoadData = AudioMetadata & { src: string };
+
+export type AudioLoadOptions = {
 	autoplay: boolean;
 	start_at?: number;
 };
 
-function load(src: string, opts: LoadOptions) {
+const load = (data: AudioLoadData, opts: AudioLoadOptions) => {
+	const { src, ...metadata } = data;
 	info('load: ', src);
 	audio_autoplay.set(opts.autoplay);
 	audio_volume.set(1);
 	audio_src.set(src);
+	audio_metadata.set(metadata);
 	audio_start_at.set(opts.start_at || 0);
 	// opts.current_time ? seek(opts.current_time) : null;
 	//opts.autoplay && play();
-}
+};
 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);
 }