From 908ef0d36d2c4b16ede04d53dcc4e09e5d722afe Mon Sep 17 00:00:00 2001
From: Ollie Taylor <13766232+OllieJT@users.noreply.github.com>
Date: Fri, 24 Feb 2023 23:44:23 +0000
Subject: [PATCH 1/6] adds /dist to eslintignore

---
 .eslintignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.eslintignore b/.eslintignore
index 3897265..1d4b507 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -3,6 +3,7 @@ node_modules
 /build
 /.svelte-kit
 /package
+/dist
 .env
 .env.*
 !.env.example

From 42c27b2469b3085af321b743991a6da29cd0cac3 Mon Sep 17 00:00:00 2001
From: Ollie Taylor <13766232+OllieJT@users.noreply.github.com>
Date: Sat, 25 Feb 2023 14:16:19 +0000
Subject: [PATCH 2/6] refactor audio to use custom listener stores

---
 src/lib/audio/_private.ts            |  17 ----
 src/lib/audio/audio-element.ts       |  25 +++++
 src/lib/audio/audio-loader.svelte    |  81 ++-------------
 src/lib/audio/episode-data.ts        | 140 +++++++++++++++++++++++++
 src/lib/audio/episode-details.ts     |   5 +
 src/lib/audio/episode-progress.ts    |  30 ++++++
 src/lib/audio/index.ts               | 147 +--------------------------
 src/lib/progress/index.ts            |  32 +++---
 src/lib/progress/local-storage.ts    |   2 +
 src/lib/utility/use-state.ts         |   4 +-
 src/routes/+layout.svelte            |   2 +-
 src/routes/+page.svelte              |  66 +++++-------
 src/routes/another-page/+page.svelte |  21 +---
 13 files changed, 259 insertions(+), 313 deletions(-)
 delete mode 100644 src/lib/audio/_private.ts
 create mode 100644 src/lib/audio/audio-element.ts
 create mode 100644 src/lib/audio/episode-data.ts
 create mode 100644 src/lib/audio/episode-details.ts
 create mode 100644 src/lib/audio/episode-progress.ts

diff --git a/src/lib/audio/_private.ts b/src/lib/audio/_private.ts
deleted file mode 100644
index efbb9e2..0000000
--- a/src/lib/audio/_private.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-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);
diff --git a/src/lib/audio/audio-element.ts b/src/lib/audio/audio-element.ts
new file mode 100644
index 0000000..7b3b371
--- /dev/null
+++ b/src/lib/audio/audio-element.ts
@@ -0,0 +1,25 @@
+import { browser } from '$app/environment';
+import { onMount } from 'svelte';
+import { readable } from 'svelte/store';
+
+export const audio_element = readable<HTMLAudioElement | null>(null, (set) => {
+	if (!browser) return;
+	const ID = 'svelte-podcast-generated-audio-element';
+	onMount(() => {
+		const el = document.createElement('audio');
+		el.id = ID;
+		el.setAttribute('preload', 'metadata');
+		el.muted = false;
+		el.autoplay = true;
+		el.controls = true;
+		document.body.appendChild(el);
+		set(el);
+	});
+
+	return () => {
+		const element = document.getElementById(ID);
+		element ? element.remove() : null;
+	};
+});
+
+export type AudioElementStore = typeof audio_element;
diff --git a/src/lib/audio/audio-loader.svelte b/src/lib/audio/audio-loader.svelte
index ba26eb2..94745c3 100644
--- a/src/lib/audio/audio-loader.svelte
+++ b/src/lib/audio/audio-loader.svelte
@@ -1,76 +1,13 @@
 <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 { audio_element } from '$lib/audio/audio-element';
+	import { load_podcast_state } from '$lib/utility';
+	import { info } from '$lib/utility/package/log';
 	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);
+	onMount(() => {
+		load_podcast_state();
+		return audio_element.subscribe((el) => {
+			info('loaded audio :: ', el);
+		});
+	});
 </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)}
-/>
diff --git a/src/lib/audio/episode-data.ts b/src/lib/audio/episode-data.ts
new file mode 100644
index 0000000..12ac468
--- /dev/null
+++ b/src/lib/audio/episode-data.ts
@@ -0,0 +1,140 @@
+import { audio_element, type AudioElementStore } from '$lib/audio/audio-element';
+import {
+	episode_details,
+	type EpisodeDetails,
+	type EpisodeDetailsStore,
+} from '$lib/audio/episode-details';
+import { podcast_preferences } from '$lib/preferences';
+import { podcast_progress } from '$lib/progress';
+import { warn } from '$lib/utility/package/log';
+import clamp from 'just-clamp';
+import { derived, get } from 'svelte/store';
+
+type EpisodeAttributes = {
+	will_autoplay: boolean;
+	is_muted: boolean;
+	duration: number;
+	src: string;
+	start_at: number;
+	details: EpisodeDetails;
+};
+const default_episode_attributes = {
+	will_autoplay: false,
+	is_muted: false,
+	duration: 0,
+	start_at: 0,
+	details: null,
+} satisfies Omit<EpisodeAttributes, 'src'>;
+
+const episode_attributes = derived<
+	[AudioElementStore, EpisodeDetailsStore],
+	EpisodeAttributes | null
+>([audio_element, episode_details], ([$audio, $details], set) => {
+	if (!$audio) return set(null);
+
+	function set_value() {
+		if (!$audio?.src) return null;
+		set({
+			...default_episode_attributes,
+			src: $audio.src,
+			duration: $audio.duration,
+			details: $details,
+		});
+	}
+
+	$audio.addEventListener('loadeddata', () => set_value());
+	return () => $audio.removeEventListener('loadeddata', () => set_value());
+});
+
+type HandleType = 'toggle' | 'set';
+
+const no_element = (action: string) => warn(`could not ${action} :: no audio element exists yet`);
+
+export const episode_audio = {
+	subscribe: episode_attributes.subscribe,
+	load: (src: string, details: EpisodeDetails) => {
+		podcast_progress.stash();
+		const el = get(audio_element);
+		if (!el) return no_element('load');
+		const progress = podcast_progress.get(src);
+		el.src = src;
+		console.log('progress', progress);
+		console.log('src', src);
+		console.log('podcast_progress', podcast_progress.data);
+		el.currentTime = progress?.start_at || 0;
+
+		const preferences = get(podcast_preferences);
+		el.playbackRate = preferences.playback_rate;
+		el.volume = preferences.volume;
+
+		episode_details.set(details);
+	},
+	unload: () => {
+		podcast_progress.stash();
+		const el = get(audio_element);
+		if (!el) return no_element('unload');
+		el.src = '';
+		episode_details.set(null);
+	},
+	play: (t?: HandleType) => {
+		const el = get(audio_element);
+		if (!el) return no_element('play');
+
+		if (t === 'toggle') {
+			el.paused ? el.play() : el.pause();
+		} else {
+			el.play();
+		}
+	},
+	pause: (t?: HandleType) => {
+		podcast_progress.stash();
+		const el = get(audio_element);
+		if (!el) return no_element('pause');
+
+		if (t === 'toggle') {
+			el.paused ? el.play() : el.pause();
+		} else {
+			el.pause();
+		}
+	},
+	mute: (t?: HandleType) => {
+		const el = get(audio_element);
+		if (!el) return no_element('mute');
+
+		if (t === 'toggle') {
+			el.muted = !el.muted;
+		} else {
+			el.muted = true;
+		}
+	},
+	unmute: (t?: HandleType) => {
+		const el = get(audio_element);
+		if (!el) return no_element('unmute');
+
+		if (t === 'toggle') {
+			el.muted = !el.muted;
+		} else {
+			el.muted = false;
+		}
+	},
+	seek(seconds: number, from: 'from-start' | 'from-end' = 'from-start') {
+		const el = get(audio_element);
+		if (!el) return no_element('seek');
+
+		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') {
+		const el = get(audio_element);
+		if (!el) return no_element('skip');
+
+		if (type === 'backward') {
+			el.currentTime = clamp(0, el.duration, el.currentTime - seconds);
+		} else {
+			el.currentTime = clamp(0, el.duration, el.currentTime + seconds);
+		}
+	},
+};
diff --git a/src/lib/audio/episode-details.ts b/src/lib/audio/episode-details.ts
new file mode 100644
index 0000000..39951fe
--- /dev/null
+++ b/src/lib/audio/episode-details.ts
@@ -0,0 +1,5 @@
+import { writable } from 'svelte/store';
+
+export type EpisodeDetails = Record<string, string | number | boolean> | null;
+export const episode_details = writable<EpisodeDetails>(null);
+export type EpisodeDetailsStore = typeof episode_details;
diff --git a/src/lib/audio/episode-progress.ts b/src/lib/audio/episode-progress.ts
new file mode 100644
index 0000000..9f97377
--- /dev/null
+++ b/src/lib/audio/episode-progress.ts
@@ -0,0 +1,30 @@
+import { audio_element, type AudioElementStore } from '$lib/audio/audio-element';
+import { secondsToTimestamp } from '$lib/utility';
+import { derived } from 'svelte/store';
+
+type EpisodeProgress = { current_time: number; timestamp: string; has_ended: boolean };
+
+const default_episode_progress = {
+	current_time: 0,
+	timestamp: '00:00',
+	has_ended: false,
+} satisfies EpisodeProgress;
+
+export const episode_progress = derived<AudioElementStore, EpisodeProgress>(
+	audio_element,
+	($audio, set) => {
+		if (!$audio) return set(default_episode_progress);
+
+		function set_value() {
+			if (!$audio) return;
+			set({
+				current_time: $audio.currentTime,
+				timestamp: secondsToTimestamp($audio.currentTime),
+				has_ended: $audio.ended,
+			});
+		}
+
+		$audio.addEventListener('timeupdate', () => set_value());
+		return () => $audio.removeEventListener('timeupdate', () => set_value());
+	},
+);
diff --git a/src/lib/audio/index.ts b/src/lib/audio/index.ts
index bd0cceb..b39e8f1 100644
--- a/src/lib/audio/index.ts
+++ b/src/lib/audio/index.ts
@@ -1,145 +1,4 @@
-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);
-			}
-		})();
-	},
-};
+export * from '$lib/audio/episode-data';
+export * from '$lib/audio/episode-details';
+export * from '$lib/audio/episode-progress';
diff --git a/src/lib/progress/index.ts b/src/lib/progress/index.ts
index e7baaa8..5c1815c 100644
--- a/src/lib/progress/index.ts
+++ b/src/lib/progress/index.ts
@@ -1,27 +1,27 @@
-import { _current_time, _src } from '$lib/audio/_private';
+import { episode_audio, episode_progress } from '$lib/audio';
 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';
 
+const get_src_pathname = (src: string) => {
+	if (src.startsWith('http')) return new URL(src).pathname;
+	else return new URL(src, 'https://svelte.dev').pathname;
+};
+
 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],
-	},
+	data: _episode_progress_map,
 	stash() {
-		const src = get(_src);
-		if (!src) return;
-		info('saving progress: ', src);
-		podcast_progress.episodes.set(src, get(_current_time));
+		const audio = get(episode_audio);
+		console.log('audio', audio);
+		if (!audio?.src) return;
+		info('saving progress: ', audio.src);
+		const pathname = get_src_pathname(audio.src);
+		_episode_progress_map.set(pathname, get(episode_progress).current_time);
 		save_all();
 	},
-	use(src: string): Pick<AudioLoadOptions, 'start_at'> | null {
+	get(src: string): Pick<AudioLoadOptions, 'start_at'> | null {
 		const start_at = _episode_progress_map.get(src);
 
 		if (!start_at) return null;
@@ -30,8 +30,8 @@ export const podcast_progress = {
 
 		return { start_at: start_at };
 	},
-	save_all,
-	load_all,
+	save: save_all,
+	load: load_all,
 	clear_all() {
 		_episode_progress_map.clear();
 		save_all();
diff --git a/src/lib/progress/local-storage.ts b/src/lib/progress/local-storage.ts
index 4435930..965b5a1 100644
--- a/src/lib/progress/local-storage.ts
+++ b/src/lib/progress/local-storage.ts
@@ -12,6 +12,8 @@ export function save_all() {
 	}
 	const items = [..._episode_progress_map];
 
+	console.log('items', items);
+
 	const episodes = items.reduce((prev, [src, current_time]) => {
 		return [...prev, { src, current_time }];
 	}, [] as SavedEpisodeProgress[]);
diff --git a/src/lib/utility/use-state.ts b/src/lib/utility/use-state.ts
index 8dea168..686d17b 100644
--- a/src/lib/utility/use-state.ts
+++ b/src/lib/utility/use-state.ts
@@ -2,11 +2,11 @@ import { podcast_preferences } from '$lib/preferences';
 import { podcast_progress } from '$lib/progress';
 
 export function save_podcast_state() {
-	podcast_progress.save_all();
+	podcast_progress.save();
 	podcast_preferences.save();
 }
 
 export function load_podcast_state() {
-	podcast_progress.load_all();
+	podcast_progress.load();
 	podcast_preferences.load();
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index eeacb62..419f6c7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AudioLoader } from '$lib';
+	import { AudioLoader } from '$lib/audio';
 </script>
 
 <AudioLoader />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8289b20..641963b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,18 +1,6 @@
 <script lang="ts">
-	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';
+	import { podcast_preferences, podcast_progress, save_podcast_state } from '$lib';
+	import { episode_audio, episode_progress } from '$lib/audio';
 
 	const sources = {
 		syntax: {
@@ -25,23 +13,17 @@
 			title: `Empowerment starts with letting go of control`,
 			artwork: `https://ssl-static.libsyn.com/p/assets/f/a/8/d/fa8d56d5226884335f2e77a3093c12a1/ep-6.png`,
 		},
-	} satisfies Record<string, AudioLoadData>;
+	} as const;
 
 	let current_time = 0;
-	$: current_time = $podcast_time.current_time;
+	$: current_time = $episode_progress.current_time;
 </script>
 
 <pre>{JSON.stringify(
 		{
-			podcast_time,
-			podcast_data,
-			podcast_options,
-			podcast_duration,
-			podcast_loading,
-			podcast_paused,
-			podcast_muted,
-			podcast_preferences,
-			podcast_progress,
+			$episode_audio,
+			$episode_progress,
+			$podcast_preferences,
 		},
 		null,
 		3,
@@ -49,51 +31,49 @@
 
 <h1>Demo</h1>
 <a href="/another-page">Another Page</a>
-<button type="button" on:click={podcast_progress.save_all}>Save progress</button>
+<button type="button" on:click={podcast_progress.save}>Save progress</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={() => podcast_audio.load(sources['syntax'], { autoplay: true, start_at: 45 })}
+<button type="button" on:click={() => episode_audio.load(sources['syntax'].src, sources['knomii'])}
 	>Syntax</button
 >
-<button type="button" on:click={() => podcast_audio.load(sources['knomii'], { autoplay: false })}
+<button type="button" on:click={() => episode_audio.load(sources['knomii'].src, sources['knomii'])}
 	>Knomii</button
 >
-<button type="button" on:click={() => podcast_audio.unload()}>None</button>
+<button type="button" on:click={() => episode_audio.unload()}>None</button>
 
 <h5>Custom audio controls</h5>
 
 <h6>Play / Pause Actions</h6>
 
-<button type="button" on:click={() => podcast_audio.play()}>Play</button>
-<button type="button" on:click={() => podcast_audio.pause()}>Pause</button>
-<button type="button" on:click={() => podcast_audio.pause('toggle')}>Toggle</button>
+<button type="button" on:click={() => episode_audio.play()}>Play</button>
+<button type="button" on:click={() => episode_audio.pause()}>Pause</button>
+<button type="button" on:click={() => episode_audio.pause('toggle')}>Toggle</button>
 
 <h6>Audio Actions</h6>
 
-<button type="button" on:click={() => podcast_audio.mute()}>Mute</button>
-<button type="button" on:click={() => podcast_audio.unmute()}>Unmute</button>
-<button type="button" on:click={() => podcast_audio.mute('toggle')}>Toggle</button>
+<button type="button" on:click={() => episode_audio.mute()}>Mute</button>
+<button type="button" on:click={() => episode_audio.unmute()}>Unmute</button>
+<button type="button" on:click={() => episode_audio.mute('toggle')}>Toggle</button>
 
 <h6>Seeking</h6>
 
 <input
 	type="range"
 	min={0}
-	max={$podcast_duration}
+	max={$episode_audio?.duration}
 	style="width:100%"
 	bind:value={current_time}
-	on:change={(e) => podcast_audio.seek(parseInt(e.currentTarget.value))}
+	on:change={(e) => episode_audio.seek(parseInt(e.currentTarget.value))}
 />
 
-<button type="button" on:click={() => podcast_audio.seek(30)}>Go to 30s from start </button>
-<button type="button" on:click={() => podcast_audio.seek(30, 'from-end')}>Go to 30s from end</button
+<button type="button" on:click={() => episode_audio.seek(30)}>Go to 30s from start </button>
+<button type="button" on:click={() => episode_audio.seek(30, 'from-end')}>Go to 30s from end</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>
+<button type="button" on:click={() => episode_audio.skip(10, 'forward')}>Skip 10s</button>
+<button type="button" on:click={() => episode_audio.skip(10, 'backward')}>Rewind 10s</button>
 
 <h6>Playback Rate</h6>
 
diff --git a/src/routes/another-page/+page.svelte b/src/routes/another-page/+page.svelte
index 5df0f3f..5f343cc 100644
--- a/src/routes/another-page/+page.svelte
+++ b/src/routes/another-page/+page.svelte
@@ -1,14 +1,5 @@
 <script lang="ts">
-	import {
-		podcast_data,
-		podcast_duration,
-		podcast_loading,
-		podcast_muted,
-		podcast_options,
-		podcast_paused,
-		podcast_preferences,
-		podcast_time,
-	} from '$lib';
+	import { episode_audio, episode_progress } from '$lib/audio';
 </script>
 
 <h1>Demo</h1>
@@ -17,14 +8,8 @@
 
 <pre>{JSON.stringify(
 		{
-			podcast_time,
-			podcast_data,
-			podcast_options,
-			podcast_duration,
-			podcast_loading,
-			podcast_paused,
-			podcast_muted,
-			podcast_preferences,
+			$episode_audio,
+			$episode_progress,
 		},
 		null,
 		3,

From e46b929d69df946b6b714c48ef0a9b74f00f869d Mon Sep 17 00:00:00 2001
From: Ollie Taylor <13766232+OllieJT@users.noreply.github.com>
Date: Sat, 25 Feb 2023 14:23:56 +0000
Subject: [PATCH 3/6] colocate typings

---
 src/app.d.ts                      |  7 +++++++
 src/lib/audio/episode-data.ts     | 15 ++-------------
 src/lib/audio/episode-details.ts  |  4 ++--
 src/lib/audio/episode-progress.ts |  3 +--
 src/lib/types.ts                  | 22 +++++++++++++---------
 5 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/src/app.d.ts b/src/app.d.ts
index f59b884..465f22f 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -1,5 +1,12 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
+
+declare module './lib/types' {
+	interface EpisodeDetails {
+		title: string;
+	}
+}
+
 declare global {
 	namespace App {
 		// interface Error {}
diff --git a/src/lib/audio/episode-data.ts b/src/lib/audio/episode-data.ts
index 12ac468..99c50fd 100644
--- a/src/lib/audio/episode-data.ts
+++ b/src/lib/audio/episode-data.ts
@@ -1,23 +1,12 @@
 import { audio_element, type AudioElementStore } from '$lib/audio/audio-element';
-import {
-	episode_details,
-	type EpisodeDetails,
-	type EpisodeDetailsStore,
-} from '$lib/audio/episode-details';
+import { episode_details, type EpisodeDetailsStore } from '$lib/audio/episode-details';
 import { podcast_preferences } from '$lib/preferences';
 import { podcast_progress } from '$lib/progress';
+import type { EpisodeAttributes, EpisodeDetails } from '$lib/types';
 import { warn } from '$lib/utility/package/log';
 import clamp from 'just-clamp';
 import { derived, get } from 'svelte/store';
 
-type EpisodeAttributes = {
-	will_autoplay: boolean;
-	is_muted: boolean;
-	duration: number;
-	src: string;
-	start_at: number;
-	details: EpisodeDetails;
-};
 const default_episode_attributes = {
 	will_autoplay: false,
 	is_muted: false,
diff --git a/src/lib/audio/episode-details.ts b/src/lib/audio/episode-details.ts
index 39951fe..551be6f 100644
--- a/src/lib/audio/episode-details.ts
+++ b/src/lib/audio/episode-details.ts
@@ -1,5 +1,5 @@
+import type { EpisodeDetails } from '$lib/types';
 import { writable } from 'svelte/store';
 
-export type EpisodeDetails = Record<string, string | number | boolean> | null;
-export const episode_details = writable<EpisodeDetails>(null);
+export const episode_details = writable<EpisodeDetails | null>(null);
 export type EpisodeDetailsStore = typeof episode_details;
diff --git a/src/lib/audio/episode-progress.ts b/src/lib/audio/episode-progress.ts
index 9f97377..d279206 100644
--- a/src/lib/audio/episode-progress.ts
+++ b/src/lib/audio/episode-progress.ts
@@ -1,9 +1,8 @@
 import { audio_element, type AudioElementStore } from '$lib/audio/audio-element';
+import type { EpisodeProgress } from '$lib/types';
 import { secondsToTimestamp } from '$lib/utility';
 import { derived } from 'svelte/store';
 
-type EpisodeProgress = { current_time: number; timestamp: string; has_ended: boolean };
-
 const default_episode_progress = {
 	current_time: 0,
 	timestamp: '00:00',
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 6cf569b..be88021 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -1,18 +1,22 @@
-export type AudioPlayerElement = HTMLAudioElement | undefined;
-
-export interface AudioMetadata {
-	title?: string;
-	artwork?: string;
+export interface EpisodeDetails {
+	[key: string]: string | number | boolean;
 }
 
-export interface AudioLoadData extends AudioMetadata {
+export type EpisodeProgress = { current_time: number; timestamp: string; has_ended: boolean };
+
+export type EpisodeAttributes = {
+	will_autoplay: boolean;
+	is_muted: boolean;
+	duration: number;
 	src: string;
-}
+	start_at: number;
+	details: EpisodeDetails | null;
+};
 
-export interface AudioLoadOptions {
+export type AudioLoadOptions = {
 	autoplay: boolean;
 	start_at?: number;
-}
+};
 
 export interface UserPreferences {
 	playback_rate: number;

From 49c5e4eb631bd719f85b913d72d6511679e7d3a5 Mon Sep 17 00:00:00 2001
From: Ollie Taylor <13766232+OllieJT@users.noreply.github.com>
Date: Sat, 25 Feb 2023 14:33:17 +0000
Subject: [PATCH 4/6] restructured preferences

---
 src/lib/audio/episode-data.ts                 |  4 +--
 src/lib/preferences/_private.ts               |  9 -----
 .../{local-storage.ts => db-local-storage.ts} | 19 +++++-----
 src/lib/preferences/db-state.ts               | 35 +++++++++++++++++++
 src/lib/preferences/edit.ts                   | 16 ---------
 src/lib/preferences/index.ts                  | 15 +-------
 src/lib/utility/use-state.ts                  |  9 ++---
 src/routes/+page.svelte                       |  8 ++---
 8 files changed, 53 insertions(+), 62 deletions(-)
 delete mode 100644 src/lib/preferences/_private.ts
 rename src/lib/preferences/{local-storage.ts => db-local-storage.ts} (63%)
 create mode 100644 src/lib/preferences/db-state.ts
 delete mode 100644 src/lib/preferences/edit.ts

diff --git a/src/lib/audio/episode-data.ts b/src/lib/audio/episode-data.ts
index 99c50fd..1f932b5 100644
--- a/src/lib/audio/episode-data.ts
+++ b/src/lib/audio/episode-data.ts
@@ -1,6 +1,6 @@
 import { audio_element, type AudioElementStore } from '$lib/audio/audio-element';
 import { episode_details, type EpisodeDetailsStore } from '$lib/audio/episode-details';
-import { podcast_preferences } from '$lib/preferences';
+import { user_preferences } from '$lib/preferences';
 import { podcast_progress } from '$lib/progress';
 import type { EpisodeAttributes, EpisodeDetails } from '$lib/types';
 import { warn } from '$lib/utility/package/log';
@@ -52,7 +52,7 @@ export const episode_audio = {
 		console.log('podcast_progress', podcast_progress.data);
 		el.currentTime = progress?.start_at || 0;
 
-		const preferences = get(podcast_preferences);
+		const preferences = get(user_preferences);
 		el.playbackRate = preferences.playback_rate;
 		el.volume = preferences.volume;
 
diff --git a/src/lib/preferences/_private.ts b/src/lib/preferences/_private.ts
deleted file mode 100644
index f5c5d92..0000000
--- a/src/lib/preferences/_private.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-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);
diff --git a/src/lib/preferences/local-storage.ts b/src/lib/preferences/db-local-storage.ts
similarity index 63%
rename from src/lib/preferences/local-storage.ts
rename to src/lib/preferences/db-local-storage.ts
index 806d0fa..54e0eba 100644
--- a/src/lib/preferences/local-storage.ts
+++ b/src/lib/preferences/db-local-storage.ts
@@ -1,23 +1,24 @@
 import { browser } from '$app/environment';
-import { edit_preference } from '$lib/preferences/edit';
-import { _user_preferences } from '$lib/preferences/_private';
+import { user_preferences } from '$lib/preferences/db-state';
+
 import type { UserPreferences } from '$lib/types';
 import { info, warn } from '$lib/utility/package/log';
+import { get } from 'svelte/store';
 
 const USER_PREFERENCE_KEY = 'USER_PREFERENCE' as const;
 
-export function save() {
+export function save_preferences() {
 	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));
-	})();
+
+	const preferences = get(user_preferences);
+	info(`Saving user preferences to localStorage`, preferences);
+	localStorage.setItem(USER_PREFERENCE_KEY, JSON.stringify(preferences));
 }
 
-export function load() {
+export function load_preferences() {
 	if (!browser || !localStorage) {
 		warn('localStorage not available, skipping load');
 		return;
@@ -30,7 +31,7 @@ export function load() {
 	}
 
 	const preferences = JSON.parse(data) as UserPreferences;
-	edit_preference(preferences);
+	user_preferences.edit(preferences);
 
 	info(`Loaded user preferences from localStorage`, preferences);
 }
diff --git a/src/lib/preferences/db-state.ts b/src/lib/preferences/db-state.ts
new file mode 100644
index 0000000..1a77aa7
--- /dev/null
+++ b/src/lib/preferences/db-state.ts
@@ -0,0 +1,35 @@
+import type { UserPreferences } from '$lib/types';
+import clamp from 'just-clamp';
+import { writable } from 'svelte/store';
+import { load_preferences, save_preferences } from './db-local-storage';
+
+const _default_user_preferences = {
+	playback_rate: 1,
+	volume: 1,
+} satisfies UserPreferences;
+
+const _user_preferences = 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 edit(prefs: Partial<UserPreferences>) {
+	_user_preferences.update((prev) => clamp_preferences({ ...prev, ...prefs }));
+	save_preferences();
+}
+
+const clear = () => {
+	_user_preferences.set(_default_user_preferences);
+	save_preferences();
+};
+
+export const user_preferences = {
+	subscribe: _user_preferences.subscribe,
+	edit,
+	clear,
+	load: load_preferences,
+};
diff --git a/src/lib/preferences/edit.ts b/src/lib/preferences/edit.ts
deleted file mode 100644
index fb727c8..0000000
--- a/src/lib/preferences/edit.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-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();
-}
diff --git a/src/lib/preferences/index.ts b/src/lib/preferences/index.ts
index 7d359bd..1bed929 100644
--- a/src/lib/preferences/index.ts
+++ b/src/lib/preferences/index.ts
@@ -1,14 +1 @@
-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();
-	},
-};
+export * from './db-state';
diff --git a/src/lib/utility/use-state.ts b/src/lib/utility/use-state.ts
index 686d17b..a46c1c4 100644
--- a/src/lib/utility/use-state.ts
+++ b/src/lib/utility/use-state.ts
@@ -1,12 +1,7 @@
-import { podcast_preferences } from '$lib/preferences';
+import { user_preferences } from '$lib/preferences';
 import { podcast_progress } from '$lib/progress';
 
-export function save_podcast_state() {
-	podcast_progress.save();
-	podcast_preferences.save();
-}
-
 export function load_podcast_state() {
 	podcast_progress.load();
-	podcast_preferences.load();
+	user_preferences.load();
 }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 641963b..602b4fd 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { podcast_preferences, podcast_progress, save_podcast_state } from '$lib';
+	import { podcast_progress, user_preferences } from '$lib';
 	import { episode_audio, episode_progress } from '$lib/audio';
 
 	const sources = {
@@ -23,7 +23,7 @@
 		{
 			$episode_audio,
 			$episode_progress,
-			$podcast_preferences,
+			$user_preferences,
 		},
 		null,
 		3,
@@ -32,8 +32,6 @@
 <h1>Demo</h1>
 <a href="/another-page">Another Page</a>
 <button type="button" on:click={podcast_progress.save}>Save progress</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={() => episode_audio.load(sources['syntax'].src, sources['knomii'])}
@@ -78,7 +76,7 @@
 <h6>Playback Rate</h6>
 
 {#each [0.5, 1, 2, 3] as rate}
-	<button type="button" on:click={() => podcast_preferences.edit({ playback_rate: rate })}>
+	<button type="button" on:click={() => user_preferences.edit({ playback_rate: rate })}>
 		{rate}x
 	</button>
 {/each}

From 81ab49d15e8e378a81779c76065d874de3662c3e Mon Sep 17 00:00:00 2001
From: Ollie Taylor <13766232+OllieJT@users.noreply.github.com>
Date: Sat, 25 Feb 2023 14:46:07 +0000
Subject: [PATCH 5/6] restructured progress

---
 src/lib/audio/episode-data.ts                 | 11 ++---
 src/lib/preferences/db-state.ts               | 20 +++------
 .../{local-storage.ts => db-local-storage.ts} |  4 +-
 src/lib/progress/db-state.ts                  | 43 +++++++++++++++++++
 src/lib/progress/index.ts                     | 40 +----------------
 src/routes/+page.svelte                       |  3 +-
 6 files changed, 59 insertions(+), 62 deletions(-)
 rename src/lib/progress/{local-storage.ts => db-local-storage.ts} (94%)
 create mode 100644 src/lib/progress/db-state.ts

diff --git a/src/lib/audio/episode-data.ts b/src/lib/audio/episode-data.ts
index 1f932b5..4d430fb 100644
--- a/src/lib/audio/episode-data.ts
+++ b/src/lib/audio/episode-data.ts
@@ -42,14 +42,11 @@ const no_element = (action: string) => warn(`could not ${action} :: no audio ele
 export const episode_audio = {
 	subscribe: episode_attributes.subscribe,
 	load: (src: string, details: EpisodeDetails) => {
-		podcast_progress.stash();
+		podcast_progress.stash_episode();
 		const el = get(audio_element);
 		if (!el) return no_element('load');
-		const progress = podcast_progress.get(src);
+		const progress = podcast_progress.get_episode(src);
 		el.src = src;
-		console.log('progress', progress);
-		console.log('src', src);
-		console.log('podcast_progress', podcast_progress.data);
 		el.currentTime = progress?.start_at || 0;
 
 		const preferences = get(user_preferences);
@@ -59,7 +56,7 @@ export const episode_audio = {
 		episode_details.set(details);
 	},
 	unload: () => {
-		podcast_progress.stash();
+		podcast_progress.stash_episode();
 		const el = get(audio_element);
 		if (!el) return no_element('unload');
 		el.src = '';
@@ -76,7 +73,7 @@ export const episode_audio = {
 		}
 	},
 	pause: (t?: HandleType) => {
-		podcast_progress.stash();
+		podcast_progress.stash_episode();
 		const el = get(audio_element);
 		if (!el) return no_element('pause');
 
diff --git a/src/lib/preferences/db-state.ts b/src/lib/preferences/db-state.ts
index 1a77aa7..e4fd3df 100644
--- a/src/lib/preferences/db-state.ts
+++ b/src/lib/preferences/db-state.ts
@@ -3,24 +3,18 @@ import clamp from 'just-clamp';
 import { writable } from 'svelte/store';
 import { load_preferences, save_preferences } from './db-local-storage';
 
-const _default_user_preferences = {
-	playback_rate: 1,
-	volume: 1,
-} satisfies UserPreferences;
-
+const _default_user_preferences = { playback_rate: 1, volume: 1 } satisfies UserPreferences;
 const _user_preferences = 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),
-	};
-}
+const clamp_preferences = (prefs: UserPreferences) => ({
+	playback_rate: clamp(prefs.playback_rate, 0.5, 5),
+	volume: clamp(prefs.volume, 0, 1),
+});
 
-function edit(prefs: Partial<UserPreferences>) {
+const edit = (prefs: Partial<UserPreferences>) => {
 	_user_preferences.update((prev) => clamp_preferences({ ...prev, ...prefs }));
 	save_preferences();
-}
+};
 
 const clear = () => {
 	_user_preferences.set(_default_user_preferences);
diff --git a/src/lib/progress/local-storage.ts b/src/lib/progress/db-local-storage.ts
similarity index 94%
rename from src/lib/progress/local-storage.ts
rename to src/lib/progress/db-local-storage.ts
index 965b5a1..ea5a64c 100644
--- a/src/lib/progress/local-storage.ts
+++ b/src/lib/progress/db-local-storage.ts
@@ -5,7 +5,7 @@ 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() {
+export function save_podcast_progress() {
 	if (!browser || !localStorage) {
 		warn('localStorage not available, skipping save');
 		return;
@@ -22,7 +22,7 @@ export function save_all() {
 	localStorage.setItem(EPISODE_PROGRESS_KEY, JSON.stringify(episodes));
 }
 
-export function load_all() {
+export function load_podcast_progress() {
 	if (!browser || !localStorage) {
 		warn('localStorage not available, skipping load');
 		return;
diff --git a/src/lib/progress/db-state.ts b/src/lib/progress/db-state.ts
new file mode 100644
index 0000000..9e1b811
--- /dev/null
+++ b/src/lib/progress/db-state.ts
@@ -0,0 +1,43 @@
+import { episode_audio, episode_progress } from '$lib/audio';
+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_podcast_progress, save_podcast_progress } from './db-local-storage';
+
+const get_src_pathname = (src: string) => {
+	if (src.startsWith('http')) return new URL(src).pathname;
+	else return new URL(src, 'https://svelte.dev').pathname;
+};
+
+const stash_episode_progress = () => {
+	const audio = get(episode_audio);
+	console.log('audio', audio);
+	if (!audio?.src) return;
+	info('saving progress: ', audio.src);
+	const pathname = get_src_pathname(audio.src);
+	_episode_progress_map.set(pathname, get(episode_progress).current_time);
+	save_podcast_progress();
+};
+
+const get_episode_progress = (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 };
+};
+
+const clear = () => {
+	_episode_progress_map.clear();
+	save_podcast_progress();
+};
+
+export const podcast_progress = {
+	stash_episode: stash_episode_progress,
+	get_episode: get_episode_progress,
+	load: load_podcast_progress,
+	clear,
+};
diff --git a/src/lib/progress/index.ts b/src/lib/progress/index.ts
index 5c1815c..1bed929 100644
--- a/src/lib/progress/index.ts
+++ b/src/lib/progress/index.ts
@@ -1,39 +1 @@
-import { episode_audio, episode_progress } from '$lib/audio';
-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';
-
-const get_src_pathname = (src: string) => {
-	if (src.startsWith('http')) return new URL(src).pathname;
-	else return new URL(src, 'https://svelte.dev').pathname;
-};
-
-export const podcast_progress = {
-	data: _episode_progress_map,
-	stash() {
-		const audio = get(episode_audio);
-		console.log('audio', audio);
-		if (!audio?.src) return;
-		info('saving progress: ', audio.src);
-		const pathname = get_src_pathname(audio.src);
-		_episode_progress_map.set(pathname, get(episode_progress).current_time);
-		save_all();
-	},
-	get(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: save_all,
-	load: load_all,
-	clear_all() {
-		_episode_progress_map.clear();
-		save_all();
-	},
-};
+export * from './db-state';
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 602b4fd..1cbaf01 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -31,7 +31,8 @@
 
 <h1>Demo</h1>
 <a href="/another-page">Another Page</a>
-<button type="button" on:click={podcast_progress.save}>Save progress</button>
+<button type="button" on:click={podcast_progress.clear}>Clear progress for all episodes</button>
+<button type="button" on:click={user_preferences.clear}>Clear all preferences</button>
 
 <h5>Load Audio</h5>
 <button type="button" on:click={() => episode_audio.load(sources['syntax'].src, sources['knomii'])}

From ff6a6d92dbf50ae535b7dc84d04bf174ae218323 Mon Sep 17 00:00:00 2001
From: Ollie Taylor <13766232+OllieJT@users.noreply.github.com>
Date: Sat, 25 Feb 2023 14:47:10 +0000
Subject: [PATCH 6/6] Adds changeset

---
 .changeset/famous-cheetahs-complain.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/famous-cheetahs-complain.md

diff --git a/.changeset/famous-cheetahs-complain.md b/.changeset/famous-cheetahs-complain.md
new file mode 100644
index 0000000..c2fa837
--- /dev/null
+++ b/.changeset/famous-cheetahs-complain.md
@@ -0,0 +1,5 @@
+---
+'svelte-podcast': minor
+---
+
+refactored audio element bindings for better control over element