Merge branch 'main' of https://github.com/OllieJT/svelte-podcast

.github/workflows/main.yml

@@ -1,8 +1,8 @@
 name: 'CI'
 on:
-  push:
+  pull_request:
-    branches-ignore:
+    branches:
-      - 'main'
+      - '**'
 jobs:
   build:
     runs-on: ubuntu-latest

CHANGELOG.md

@@ -1,5 +1,23 @@
 # svelte-podcast
 
+## 0.3.4
+
+### Patch Changes
+
+- ff5caf2: fix to allow override of internal types
+
+## 0.3.3
+
+### Patch Changes
+
+- 802c704: fixes dist exports
+
+## 0.3.2
+
+### Patch Changes
+
+- 6c849b7: Fixes derived store causing exessive updates
+
 ## 0.3.1
 
 ### Patch Changes

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-podcast",
-	"version": "0.3.1",
+	"version": "0.3.4",
 	"license": "MIT",
 	"author": "Ollie Taylor",
 	"homepage": "https://github.com/OllieJT/svelte-podcast/blob/main/README.md",

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

@@ -1,53 +1,53 @@
 <script lang="ts">
 	import {
-		audio_autoplay,
+		_autoplay,
-		audio_current_time,
+		_current_time,
-		audio_duration,
+		_duration,
-		audio_element,
+		_element,
-		audio_ended,
+		_ended,
-		audio_loading,
+		_loading,
-		audio_muted,
+		_muted,
-		audio_paused,
+		_paused,
-		audio_src,
+		_src,
-		audio_start_at,
+		_start_at,
-	} from '$lib/context/audio-internals';
+	} from '$lib/audio/_private';
-	import { user_preferences } from '$lib/context/user-preferences';
+	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 = $audio_start_at;
+	let current_time = $_start_at;
 	let duration = 0;
 	let ended = true;
 	let paused = false;
 
 	// handler values
-	let volume = $user_preferences.volume;
+	let volume = $podcast_preferences.volume;
-	let playbackRate = $user_preferences.playback_rate;
+	let playbackRate = $podcast_preferences.playback_rate;
 	let muted = false;
 
 	// readonly - stores will update when bindings change
-	$: audio_element.set(element);
+	$: _element.set(element);
-	$: audio_current_time.set(current_time);
+	$: _current_time.set(current_time);
-	$: audio_duration.set(duration);
+	$: _duration.set(duration);
-	$: audio_ended.set(ended);
+	$: _ended.set(ended);
-	$: audio_paused.set(paused);
+	$: _paused.set(paused);
 
 	// handlers - when store value changes, the binding will update the audio element
-	$: volume = $user_preferences.volume;
+	$: volume = $podcast_preferences.volume;
-	$: playbackRate = $user_preferences.playback_rate;
+	$: playbackRate = $podcast_preferences.playback_rate;
-	$: muted = $audio_muted;
+	$: muted = $_muted;
-	$: current_time = $audio_start_at;
+	$: current_time = $_start_at;
 
 	onMount(load_podcast_state);
 </script>
 
 <audio
 	bind:this={element}
-	src={$audio_src}
+	src={$_src}
-	autoplay={$audio_autoplay}
+	autoplay={$_autoplay}
 	bind:currentTime={current_time}
 	bind:muted
 	bind:duration
@@ -71,6 +71,6 @@
 		// TODO: reset player state
 		// console.log('emptied', e);
 	}}
-	on:loadeddata={() => audio_loading.set(false)}
+	on:loadeddata={() => _loading.set(false)}
-	on:loadstart={() => audio_loading.set(true)}
+	on:loadstart={() => _loading.set(true)}
 />

src/lib/audio/index.ts

@@ -0,0 +1,145 @@
+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, type Readable } 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: Readable<AudioLoadData> = derived(
+	[_src, _metadata],
+	([$src, $metadata]) => ({
+		...$metadata,
+		src: $src,
+	}),
+);
+
+export const podcast_options: Readable<AudioLoadOptions> = derived(
+	[_start_at, _autoplay],
+	([$start_at, $autoplay]) => ({
+		start_at: $start_at,
+		autoplay: $autoplay,
+	}),
+);
+
+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);
+			}
+		})();
+	},
+};

src/lib/context/audio-internals.ts

@@ -1,16 +0,0 @@
-import type { AudioPlayerElement } from '$lib/types';
-import { writable } from 'svelte/store';
-
-// readonly - stores will update when bindings change
-export const audio_current_time = writable<number>(0);
-export const audio_element = writable<AudioPlayerElement>();
-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_src = writable<string>('');

src/lib/context/audio-metadata.ts

@@ -1,4 +0,0 @@
-import type { AudioMetadata } from '$lib/types';
-import { writable } from 'svelte/store';
-
-export const audio_metadata = writable<AudioMetadata | null>(null);

src/lib/context/audio.ts

@@ -1,170 +0,0 @@
-import {
-	audio_autoplay,
-	audio_current_time,
-	audio_duration,
-	audio_element,
-	audio_ended,
-	audio_loading,
-	audio_muted,
-	audio_paused,
-	audio_src,
-	audio_start_at,
-} from '$lib/context/audio-internals';
-import { audio_metadata } from '$lib/context/audio-metadata';
-import { episode_progress } from '$lib/context/episode-progress';
-import { user_preferences } from '$lib/context/user-preferences';
-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';
-
-const audio_state = derived(
-	[
-		audio_current_time,
-		audio_duration,
-		audio_ended,
-		audio_loading,
-		audio_paused,
-		audio_start_at,
-		audio_autoplay,
-		audio_muted,
-		audio_src,
-		audio_metadata,
-		user_preferences,
-	],
-	([
-		$current_time,
-		$duration,
-		$ended,
-		$loading,
-		$paused,
-		$start_at,
-		$autoplay,
-		$muted,
-		$src,
-		$metadata,
-		$user_preferences,
-	]) => {
-		return {
-			current_time: $current_time,
-			duration: $duration,
-			ended: $ended,
-			loading: $loading,
-			paused: $paused,
-			start_at: $start_at,
-			autoplay: $autoplay,
-			muted: $muted,
-			src: $src,
-			metadata: $metadata,
-			playback_rate: $user_preferences.playback_rate,
-			volume: $user_preferences.volume,
-			timestamp: secondsToTimestamp($current_time),
-		};
-	},
-);
-
-type HandleType = 'toggle' | 'set';
-
-function play(type: HandleType = 'set') {
-	info('play: ', type);
-	return audio_element.subscribe((el) => {
-		if (!el) return warn('no audio element');
-		if (type === 'toggle') {
-			el.paused ? el.play() : el.pause();
-		} else {
-			el.play();
-		}
-	})();
-}
-function pause(type: HandleType = 'set') {
-	info('pause: ', type);
-	return audio_element.subscribe((el) => {
-		if (!el) return warn('no audio element');
-		if (type === 'toggle') {
-			el.paused ? el.play() : el.pause();
-		} else {
-			el.pause();
-		}
-	})();
-}
-
-function mute(type: HandleType = 'set') {
-	info('mute: ', type);
-	if (type === 'toggle') {
-		audio_muted.update((muted) => !muted);
-	} else {
-		audio_muted.set(true);
-	}
-}
-function unmute(type: HandleType = 'set') {
-	info('unmute: ', type);
-	if (type === 'toggle') {
-		audio_muted.update((muted) => !muted);
-	} else {
-		audio_muted.set(false);
-	}
-}
-
-const load = (data: AudioLoadData, opts: AudioLoadOptions) => {
-	episode_progress.stash();
-
-	const { src, ...metadata } = data;
-	const progress = episode_progress.use(src);
-	const start_at = progress?.start_at || opts.start_at || 0;
-
-	console.log('progress', progress);
-
-	info('load: ', src);
-	audio_autoplay.set(opts.autoplay);
-	audio_src.set(src);
-	audio_metadata.set(metadata);
-	audio_start_at.set(start_at);
-	// opts.current_time ? seek(opts.current_time) : null;
-	//opts.autoplay && play();
-};
-function unload() {
-	episode_progress.stash();
-	info('unload: ');
-	pause();
-	audio_autoplay.set(false);
-	audio_src.set('');
-	audio_metadata.set(null);
-	audio_start_at.set(0);
-}
-
-function seek(seconds: number, from: 'from-start' | 'from-end' = 'from-start') {
-	info('seek: ', seconds, from);
-	return audio_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);
-		}
-	})();
-}
-
-function skip(seconds: number, type: 'forward' | 'backward' = 'forward') {
-	info('skip: ', seconds, type);
-	return audio_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);
-		}
-	})();
-}
-
-export const audio = {
-	subscribe: audio_state.subscribe,
-	play,
-	pause,
-	mute,
-	unmute,
-	load,
-	unload,
-	seek,
-	skip,
-};

src/lib/context/episode-progress.ts

@@ -1,87 +0,0 @@
-import { browser } from '$app/environment';
-import { audio } from '$lib/context/audio';
-import type { AudioLoadOptions, EpisodeProgress } from '$lib/types';
-import { error, info, warn } from '$lib/utility/package/log';
-
-const episode_progress_map = new Map<string, EpisodeProgress>();
-
-function stash_episode() {
-	return audio.subscribe((state) => {
-		info('saving progress: ', state.src);
-		if (!state.src) return;
-		episode_progress_map.set(state.src, { current_time: state.current_time });
-		save_all();
-	})();
-}
-
-function use_episode(src: string): Pick<AudioLoadOptions, 'start_at'> | null {
-	const progress = episode_progress_map.get(src);
-
-	if (!progress) return null;
-
-	info('found saved progress: ', progress);
-
-	return { start_at: progress.current_time };
-}
-
-type SavedEpisodeProgress = EpisodeProgress & { src: string };
-const EPISODE_PROGRESS_KEY = 'EPISODE_PROGRESS' as const;
-
-function save_all() {
-	if (!browser || !localStorage) {
-		warn('localStorage not available, skipping save');
-		return;
-	}
-	const items = [...episode_progress_map];
-
-	const episodes = items.reduce((prev, [src, progress]) => {
-		return [...prev, { src, ...progress }];
-	}, [] as SavedEpisodeProgress[]);
-
-	info(`Saving progress for ${episodes.length} episodes to localStorage`, episodes);
-	localStorage.setItem(EPISODE_PROGRESS_KEY, JSON.stringify(episodes));
-}
-
-function load_all() {
-	if (!browser || !localStorage) {
-		warn('localStorage not available, skipping load');
-		return;
-	}
-	const data = localStorage.getItem(EPISODE_PROGRESS_KEY);
-
-	if (!data) {
-		info('No saved episode progress found');
-		return;
-	}
-
-	const episodes = JSON.parse(data) as SavedEpisodeProgress[];
-
-	try {
-		episodes.forEach(({ src, ...progress }) => {
-			episode_progress_map.set(src, progress);
-		});
-		info(`Loaded ${episode_progress_map.size} episodes progress from localStorage`);
-	} catch (e) {
-		error('Error loading episode progress', e);
-		return;
-	}
-}
-
-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

@@ -1,66 +0,0 @@
-import { browser } from '$app/environment';
-import type { UserPreferences } from '$lib/types';
-import { info, warn } from '$lib/utility/package/log';
-import clamp from 'just-clamp';
-import { writable } from 'svelte/store';
-
-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,5 +1,4 @@
-export { default as AudioLoader } from '$lib/components/audio-loader.svelte';
+export * from '$lib/audio';
-export * from '$lib/context/audio';
+export * from '$lib/preferences';
-export * from '$lib/context/episode-progress';
+export * from '$lib/progress';
-export * from '$lib/context/user-preferences';
 export * from '$lib/utility';

src/lib/preferences/_private.ts

@@ -0,0 +1,9 @@
+import type { UserPreferences } from '$lib/types';
+import { writable } from 'svelte/store';
+
+export const _default_user_preferences = {
+	playback_rate: 1,
+	volume: 1,
+} satisfies UserPreferences;
+
+export const _user_preferences = writable<UserPreferences>(_default_user_preferences);

src/lib/preferences/edit.ts

@@ -0,0 +1,16 @@
+import { _user_preferences } from '$lib/preferences/_private';
+import type { UserPreferences } from '$lib/types';
+import clamp from 'just-clamp';
+import { save } from './local-storage';
+
+function clamp_preferences(prefs: UserPreferences) {
+	return {
+		playback_rate: clamp(prefs.playback_rate, 0.5, 5),
+		volume: clamp(prefs.volume, 0, 1),
+	};
+}
+
+export function edit_preference(prefs: Partial<UserPreferences>) {
+	_user_preferences.update((prev) => clamp_preferences({ ...prev, ...prefs }));
+	save();
+}

src/lib/preferences/index.ts

@@ -0,0 +1,14 @@
+import { edit_preference } from '$lib/preferences/edit';
+import { _default_user_preferences, _user_preferences } from '$lib/preferences/_private';
+import { load, save } from './local-storage';
+
+export const podcast_preferences = {
+	subscribe: _user_preferences.subscribe,
+	edit: edit_preference,
+	load,
+	save,
+	clear() {
+		_user_preferences.set(_default_user_preferences);
+		save();
+	},
+};

src/lib/preferences/local-storage.ts

@@ -0,0 +1,36 @@
+import { browser } from '$app/environment';
+import { edit_preference } from '$lib/preferences/edit';
+import { _user_preferences } from '$lib/preferences/_private';
+import type { UserPreferences } from '$lib/types';
+import { info, warn } from '$lib/utility/package/log';
+
+const USER_PREFERENCE_KEY = 'USER_PREFERENCE' as const;
+
+export function save() {
+	if (!browser || !localStorage) {
+		warn('localStorage not available, skipping save');
+		return;
+	}
+	return _user_preferences.subscribe((prefs) => {
+		info(`Saving user preferences to localStorage`, prefs);
+		localStorage.setItem(USER_PREFERENCE_KEY, JSON.stringify(prefs));
+	})();
+}
+
+export 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;
+	edit_preference(preferences);
+
+	info(`Loaded user preferences from localStorage`, preferences);
+}

src/lib/progress/_private.ts

@@ -0,0 +1 @@
+export const _episode_progress_map = new Map<string, number>();

src/lib/progress/index.ts

@@ -0,0 +1,39 @@
+import { _current_time, _src } from '$lib/audio/_private';
+import { _episode_progress_map } from '$lib/progress/_private';
+import type { AudioLoadOptions } from '$lib/types';
+import { info } from '$lib/utility/package/log';
+import { get } from 'svelte/store';
+import { load_all, save_all } from './local-storage';
+
+export const podcast_progress = {
+	episodes: {
+		set: (src: string, current_time: number) => _episode_progress_map.set(src, current_time),
+		get: _episode_progress_map.get,
+		includes: _episode_progress_map.has,
+		forEach: _episode_progress_map.forEach,
+		count: _episode_progress_map.size,
+		data: [..._episode_progress_map],
+	},
+	stash() {
+		const src = get(_src);
+		if (!src) return;
+		info('saving progress: ', src);
+		podcast_progress.episodes.set(src, get(_current_time));
+		save_all();
+	},
+	use(src: string): Pick<AudioLoadOptions, 'start_at'> | null {
+		const start_at = _episode_progress_map.get(src);
+
+		if (!start_at) return null;
+
+		info('found saved progress: ', src, start_at);
+
+		return { start_at: start_at };
+	},
+	save_all,
+	load_all,
+	clear_all() {
+		_episode_progress_map.clear();
+		save_all();
+	},
+};

src/lib/progress/local-storage.ts

@@ -0,0 +1,46 @@
+import { browser } from '$app/environment';
+import { _episode_progress_map } from '$lib/progress/_private';
+import { error, info, warn } from '$lib/utility/package/log';
+
+type SavedEpisodeProgress = { src: string; current_time: number };
+const EPISODE_PROGRESS_KEY = 'EPISODE_PROGRESS' as const;
+
+export function save_all() {
+	if (!browser || !localStorage) {
+		warn('localStorage not available, skipping save');
+		return;
+	}
+	const items = [..._episode_progress_map];
+
+	const episodes = items.reduce((prev, [src, current_time]) => {
+		return [...prev, { src, current_time }];
+	}, [] as SavedEpisodeProgress[]);
+
+	info(`Saving progress for ${episodes.length} episodes to localStorage`, episodes);
+	localStorage.setItem(EPISODE_PROGRESS_KEY, JSON.stringify(episodes));
+}
+
+export function load_all() {
+	if (!browser || !localStorage) {
+		warn('localStorage not available, skipping load');
+		return;
+	}
+	const data = localStorage.getItem(EPISODE_PROGRESS_KEY);
+
+	if (!data) {
+		info('No saved episode progress found');
+		return;
+	}
+
+	const episodes = JSON.parse(data) as SavedEpisodeProgress[];
+
+	try {
+		episodes.forEach(({ src, current_time }) => {
+			_episode_progress_map.set(src, current_time);
+		});
+		info(`Loaded ${_episode_progress_map.size} episodes progress from localStorage`);
+	} catch (e) {
+		error('Error loading episode progress', e);
+		return;
+	}
+}

src/lib/types.ts

@@ -1,8 +1,8 @@
 export type AudioPlayerElement = HTMLAudioElement | undefined;
 
 export interface AudioMetadata {
-	title: string;
+	title?: string;
-	artwork: string;
+	artwork?: string;
 }
 
 export interface AudioLoadData extends AudioMetadata {
@@ -14,10 +14,6 @@ export interface AudioLoadOptions {
 	start_at?: number;
 }
 
-export interface EpisodeProgress {
-	current_time: number;
-}
-
 export interface UserPreferences {
 	playback_rate: number;
 	volume: number;

src/lib/utility/use-state.ts

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

src/routes/+page.svelte

@@ -1,5 +1,17 @@
 <script lang="ts">
-	import { audio, episode_progress, save_podcast_state, user_preferences } from '$lib';
+	import {
+		podcast_audio,
+		podcast_data,
+		podcast_duration,
+		podcast_loading,
+		podcast_muted,
+		podcast_options,
+		podcast_paused,
+		podcast_preferences,
+		podcast_progress,
+		podcast_time,
+		save_podcast_state,
+	} from '$lib';
 	import type { AudioLoadData } from '$lib/types';
 
 	const sources = {
@@ -16,61 +28,77 @@
 	} satisfies Record<string, AudioLoadData>;
 
 	let current_time = 0;
-	$: current_time = $audio.current_time;
+	$: current_time = $podcast_time.current_time;
 </script>
 
-<pre>{JSON.stringify($audio, null, 3)}</pre>
+<pre>{JSON.stringify(
+		{
+			podcast_time,
+			podcast_data,
+			podcast_options,
+			podcast_duration,
+			podcast_loading,
+			podcast_paused,
+			podcast_muted,
+			podcast_preferences,
+			podcast_progress,
+		},
+		null,
+		3,
+	)}</pre>
 
 <h1>Demo</h1>
 <a href="/another-page">Another Page</a>
-<button type="button" on:click={episode_progress.save_all}>Save progress</button>
+<button type="button" on:click={podcast_progress.save_all}>Save progress</button>
-<button type="button" on:click={user_preferences.save}>Save preferences</button>
+<button type="button" on:click={podcast_preferences.save}>Save preferences</button>
 <button type="button" on:click={save_podcast_state}>Save state (all)</button>
 
 <h5>Load Audio</h5>
 <button
 	type="button"
-	on:click={() => audio.load(sources['syntax'], { autoplay: true, start_at: 45 })}>Syntax</button
+	on:click={() => podcast_audio.load(sources['syntax'], { autoplay: true, start_at: 45 })}
+	>Syntax</button
 >
-<button type="button" on:click={() => audio.load(sources['knomii'], { autoplay: false })}
+<button type="button" on:click={() => podcast_audio.load(sources['knomii'], { autoplay: false })}
 	>Knomii</button
 >
-<button type="button" on:click={() => audio.unload()}>None</button>
+<button type="button" on:click={() => podcast_audio.unload()}>None</button>
 
 <h5>Custom audio controls</h5>
 
 <h6>Play / Pause Actions</h6>
 
-<button type="button" on:click={() => audio.play()}>Play</button>
+<button type="button" on:click={() => podcast_audio.play()}>Play</button>
-<button type="button" on:click={() => audio.pause()}>Pause</button>
+<button type="button" on:click={() => podcast_audio.pause()}>Pause</button>
-<button type="button" on:click={() => audio.pause('toggle')}>Toggle</button>
+<button type="button" on:click={() => podcast_audio.pause('toggle')}>Toggle</button>
 
 <h6>Audio Actions</h6>
 
-<button type="button" on:click={() => audio.mute()}>Mute</button>
+<button type="button" on:click={() => podcast_audio.mute()}>Mute</button>
-<button type="button" on:click={() => audio.unmute()}>Unmute</button>
+<button type="button" on:click={() => podcast_audio.unmute()}>Unmute</button>
-<button type="button" on:click={() => audio.mute('toggle')}>Toggle</button>
+<button type="button" on:click={() => podcast_audio.mute('toggle')}>Toggle</button>
 
 <h6>Seeking</h6>
 
 <input
 	type="range"
 	min={0}
-	max={$audio.duration}
+	max={$podcast_duration}
 	style="width:100%"
 	bind:value={current_time}
-	on:change={(e) => audio.seek(parseInt(e.currentTarget.value))}
+	on:change={(e) => podcast_audio.seek(parseInt(e.currentTarget.value))}
 />
 
-<button type="button" on:click={() => audio.seek(30)}>Go to 30s from start </button>
+<button type="button" on:click={() => podcast_audio.seek(30)}>Go to 30s from start </button>
-<button type="button" on:click={() => audio.seek(30, 'from-end')}>Go to 30s from end</button>
+<button type="button" on:click={() => podcast_audio.seek(30, 'from-end')}>Go to 30s from end</button
-<button type="button" on:click={() => audio.skip(10, 'forward')}>Skip 10s</button>
+>
-<button type="button" on:click={() => audio.skip(10, 'backward')}>Rewind 10s</button>
+<button type="button" on:click={() => podcast_audio.skip(10, 'forward')}>Skip 10s</button>
+<button type="button" on:click={() => podcast_audio.skip(10, 'backward')}>Rewind 10s</button>
 
 <h6>Playback Rate</h6>
 
 {#each [0.5, 1, 2, 3] as rate}
-	<button type="button" on:click={() => user_preferences.set({ playback_rate: rate })}
+	<button type="button" on:click={() => podcast_preferences.edit({ playback_rate: rate })}>
-		>{rate}x</button
+		{rate}x
-	>
+	</button>
 {/each}

src/routes/another-page/+page.svelte

@@ -1,12 +1,31 @@
 <script lang="ts">
-	import { audio } from '$lib';
+	import {
-
+		podcast_data,
-	let current_time = 0;
+		podcast_duration,
-	$: current_time = $audio.current_time;
+		podcast_loading,
+		podcast_muted,
+		podcast_options,
+		podcast_paused,
+		podcast_preferences,
+		podcast_time,
+	} from '$lib';
 </script>
 
 <h1>Demo</h1>
 
 <a href="/">Demo</a>
 
-<pre>{JSON.stringify($audio, null, 3)}</pre>
+<pre>{JSON.stringify(
+		{
+			podcast_time,
+			podcast_data,
+			podcast_options,
+			podcast_duration,
+			podcast_loading,
+			podcast_paused,
+			podcast_muted,
+			podcast_preferences,
+		},
+		null,
+		3,
+	)}</pre>