refactor bindings + include start_at option

src/lib/context/audio-internals.ts

@@ -1,15 +1,30 @@
-import type { PlayerElement, PlayerMetadata } from '$lib/types/types';
+import type { PlayerElement } from '$lib/types/types';
 import { writable } from 'svelte/store';
 
 export const audio_element = writable<PlayerElement>();
-export const audio_current_time = writable<number>(0);
-export const audio_src = writable<string | null>(null);
+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_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,
-	muted: false,
-	paused: true,
-	playbackRate: 1,
+	ended: false,
 	loading: false,
+	paused: true,
+	// muted: false,
+	// playbackRate: 1,
 });

src/lib/context/audio.ts

@@ -3,20 +3,40 @@ import {
 	audio_current_time,
 	audio_element,
 	audio_metadata,
+	audio_muted,
+	audio_playback_rate,
 	audio_src,
+	audio_start_at,
+	audio_volume,
 } from '$lib/context/audio-internals';
 import { secondsToTimestamp } from '$lib/utility/seconds-to-timestamp';
 import { info, warn } from '$pkg/log';
 import clamp from 'just-clamp';
 import { derived } from 'svelte/store';
 
-const audio_state = derived([audio_metadata, audio_current_time], ([$metadata, $current_time]) => {
-	return {
-		current_time: $current_time,
-		timestamp: secondsToTimestamp($current_time),
-		...$metadata,
-	};
-});
+const audio_state = derived(
+	[
+		audio_metadata,
+		audio_autoplay,
+		audio_current_time,
+		audio_muted,
+		audio_playback_rate,
+		audio_src,
+		audio_volume,
+	],
+	([$metadata, $autoplay, $current_time, $muted, $playback_rate, $src, $volume]) => {
+		return {
+			...$metadata,
+			autoplay: $autoplay,
+			current_time: $current_time,
+			timestamp: secondsToTimestamp($current_time),
+			muted: $muted,
+			playback_rate: $playback_rate,
+			src: $src,
+			volume: $volume,
+		};
+	},
+);
 
 type HandleType = 'toggle' | 'set';
 
@@ -45,52 +65,47 @@ function pause(type: HandleType = 'set') {
 
 function mute(type: HandleType = 'set') {
 	info('mute: ', type);
-	return audio_element.subscribe((el) => {
-		if (!el) return warn('no audio element');
-		if (type === 'toggle') {
-			el.muted = !el.muted;
-		} else {
-			el.muted = true;
-		}
-	})();
+	if (type === 'toggle') {
+		audio_muted.update((muted) => !muted);
+	} else {
+		audio_muted.set(true);
+	}
 }
 function unmute(type: HandleType = 'set') {
 	info('unmute: ', type);
-	return audio_element.subscribe((el) => {
-		if (!el) return warn('no audio element');
-		if (type === 'toggle') {
-			el.muted = !el.muted;
-		} else {
-			el.muted = false;
-		}
-	})();
+	if (type === 'toggle') {
+		audio_muted.update((muted) => !muted);
+	} else {
+		audio_muted.set(false);
+	}
 }
 
 type LoadOptions = {
 	autoplay: boolean;
+	start_at?: number;
 };
 
 function load(src: string, opts: LoadOptions) {
 	info('load: ', src);
 	audio_autoplay.set(opts.autoplay);
+	audio_volume.set(1);
 	audio_src.set(src);
-	return audio_element.subscribe((el) => {
-		if (!el) return warn('no audio element');
-		el.volume = 1;
-		el.pause();
-	})();
+	audio_start_at.set(opts.start_at || 0);
+	// opts.current_time ? seek(opts.current_time) : null;
+	//opts.autoplay && play();
 }
 function unload() {
 	info('unload: ');
-	audio_src.set(null);
+	pause();
+	audio_autoplay.set(false);
+	audio_volume.set(1);
+	audio_src.set('');
+	audio_start_at.set(0);
 }
 
 function setPlaybackRate(rate: number) {
 	info('setPlaybackRate: ', rate);
-	return audio_element.subscribe((el) => {
-		if (!el) return warn('no audio element');
-		el.playbackRate = clamp(0, 10, rate);
-	})();
+	audio_playback_rate.set(clamp(0, 10, rate));
 }
 
 function seek(seconds: number, from: 'from-start' | 'from-end' = 'from-start') {