simplify exports

src/lib/audio/_private.ts

@@ -0,0 +1,17 @@
+import type { AudioMetadata, AudioPlayerElement } from '$lib/types';
+import { writable } from 'svelte/store';
+
+// readonly - stores will update when bindings change
+export const _current_time = writable<number>(0);
+export const _element = writable<AudioPlayerElement>();
+export const _duration = writable<number>(0);
+export const _ended = writable<boolean>(false);
+export const _loading = writable<boolean>(false);
+export const _paused = writable<boolean>(true);
+
+// handlers - when store value changes, the binding will update the audio element
+export const _start_at = writable<number>(0);
+export const _autoplay = writable<boolean>(false);
+export const _muted = writable<boolean>(false);
+export const _src = writable<string>('');
+export const _metadata = writable<AudioMetadata | null>(null);

src/lib/audio/audio-loader.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import {
+		_autoplay,
+		_current_time,
+		_duration,
+		_element,
+		_ended,
+		_loading,
+		_muted,
+		_paused,
+		_src,
+		_start_at,
+	} from '$lib/audio/_private';
+	import { podcast_preferences } from '$lib/preferences';
+	import type { AudioPlayerElement } from '$lib/types';
+	import { load_podcast_state } from '$lib/utility/use-state';
+	import { onMount } from 'svelte';
+
+	// readonly values
+	let element: AudioPlayerElement;
+	let current_time = $_start_at;
+	let duration = 0;
+	let ended = true;
+	let paused = false;
+
+	// handler values
+	let volume = $podcast_preferences.volume;
+	let playbackRate = $podcast_preferences.playback_rate;
+	let muted = false;
+
+	// readonly - stores will update when bindings change
+	$: _element.set(element);
+	$: _current_time.set(current_time);
+	$: _duration.set(duration);
+	$: _ended.set(ended);
+	$: _paused.set(paused);
+
+	// handlers - when store value changes, the binding will update the audio element
+	$: volume = $podcast_preferences.volume;
+	$: playbackRate = $podcast_preferences.playback_rate;
+	$: muted = $_muted;
+	$: current_time = $_start_at;
+
+	onMount(load_podcast_state);
+</script>
+
+<audio
+	bind:this={element}
+	src={$_src}
+	autoplay={$_autoplay}
+	bind:currentTime={current_time}
+	bind:muted
+	bind:duration
+	bind:paused
+	bind:playbackRate
+	bind:volume
+	bind:ended
+	preload="metadata"
+	controls={false}
+	on:canplay={(e) => false && console.log('canplay', e)}
+	on:canplaythrough={(e) => false && console.log('canplaythrough', e)}
+	on:timeupdate={(e) => false && console.log('progress', e)}
+	on:loadedmetadata={(e) => false && console.log('loadedmetadata', e)}
+	on:suspend={(e) => false && console.log('suspend', e)}
+	on:seeked={(e) => false && console.log('seeked', e)}
+	on:play={(e) => false && console.log('play', e)}
+	on:waiting={(e) => console.log('waiting', e)}
+	on:stalled={(e) => console.log('stalled', e)}
+	on:load={(e) => console.log('load', e)}
+	on:emptied={() => {
+		// TODO: reset player state
+		// console.log('emptied', e);
+	}}
+	on:loadeddata={() => _loading.set(false)}
+	on:loadstart={() => _loading.set(true)}
+/>

src/lib/audio/index.ts

@@ -0,0 +1,147 @@
+import {
+	_autoplay,
+	_current_time,
+	_duration,
+	_element,
+	_ended,
+	_loading,
+	_metadata,
+	_muted,
+	_paused,
+	_src,
+	_start_at,
+} from '$lib/audio/_private';
+import { podcast_progress } from '$lib/progress';
+import type { AudioLoadData, AudioLoadOptions } from '$lib/types';
+import { secondsToTimestamp } from '$lib/utility/seconds-to-timestamp';
+import { info, warn } from '$pkg/log';
+import clamp from 'just-clamp';
+import { derived } from 'svelte/store';
+export { default as AudioLoader } from '$lib/audio/audio-loader.svelte';
+
+export const podcast_time = derived([_current_time, _ended], ([$seconds, $ended]) => ({
+	current_time: $seconds,
+	timestamp: secondsToTimestamp($seconds),
+	ended: $ended,
+}));
+
+export const podcast_data = derived(
+	[_src, _metadata],
+	([$src, $metadata]) =>
+		({
+			...$metadata,
+			src: $src,
+		} satisfies AudioLoadData),
+);
+
+export const podcast_options = derived(
+	[_start_at, _autoplay],
+	([$start_at, $autoplay]) =>
+		({
+			start_at: $start_at,
+			autoplay: $autoplay,
+		} satisfies AudioLoadOptions),
+);
+
+export const podcast_duration = { subscribe: _duration.subscribe };
+export const podcast_loading = { subscribe: _loading.subscribe };
+export const podcast_paused = { subscribe: _paused.subscribe };
+export const podcast_muted = { subscribe: _muted.subscribe };
+
+type HandleType = 'toggle' | 'set';
+
+export const podcast_audio = {
+	play(type: HandleType = 'set') {
+		info('play: ', type);
+		return _element.subscribe((el) => {
+			if (!el) return warn('no audio element');
+			if (type === 'toggle') {
+				el.paused ? el.play() : el.pause();
+			} else {
+				el.play();
+			}
+		})();
+	},
+	pause(type: HandleType = 'set') {
+		info('pause: ', type);
+		return _element.subscribe((el) => {
+			if (!el) return warn('no audio element');
+			if (type === 'toggle') {
+				el.paused ? el.play() : el.pause();
+			} else {
+				el.pause();
+			}
+		})();
+	},
+
+	mute(type: HandleType = 'set') {
+		info('mute: ', type);
+		if (type === 'toggle') {
+			_muted.update((muted) => !muted);
+		} else {
+			_muted.set(true);
+		}
+	},
+	unmute(type: HandleType = 'set') {
+		info('unmute: ', type);
+		if (type === 'toggle') {
+			_muted.update((muted) => !muted);
+		} else {
+			_muted.set(false);
+		}
+	},
+
+	load(data: AudioLoadData, opts: AudioLoadOptions) {
+		podcast_progress.stash();
+
+		const { src, ...meta } = data;
+		const progress = podcast_progress.use(src);
+		const start_at = progress?.start_at || opts.start_at || 0;
+
+		console.log('progress', progress);
+
+		info('load: ', src);
+		_autoplay.set(opts.autoplay);
+		_src.set(src);
+		_metadata.set(meta);
+		_start_at.set(start_at);
+		// opts.current_time ? seek(opts.current_time) : null;
+		//opts.autoplay && play();
+	},
+	unload() {
+		podcast_progress.stash();
+		info('unload: ');
+		_element.subscribe((el) => {
+			if (!el) return warn('no audio element');
+			el.pause();
+		})();
+		_autoplay.set(false);
+		_src.set('');
+		_metadata.set(null);
+		_start_at.set(0);
+	},
+
+	seek(seconds: number, from: 'from-start' | 'from-end' = 'from-start') {
+		info('seek: ', seconds, from);
+		return _element.subscribe((el) => {
+			if (!el) return warn('no audio element');
+			if (from === 'from-end') {
+				el.currentTime = clamp(0, el.duration, el.duration - seconds);
+			} else {
+				el.currentTime = clamp(0, el.duration, seconds);
+			}
+		})();
+	},
+
+	skip(seconds: number, type: 'forward' | 'backward' = 'forward') {
+		info('skip: ', seconds, type);
+		return _element.subscribe((el) => {
+			if (!el) return warn('no audio element');
+			if (type === 'backward') {
+				el.currentTime = clamp(0, el.duration, el.currentTime - seconds);
+			} else {
+				el.currentTime = clamp(0, el.duration, el.currentTime + seconds);
+			}
+		})();
+	},
+};