From 29ee8f1763c12b09dde6d627bcc3c2957d54b66d Mon Sep 17 00:00:00 2001
From: Ollie Taylor <13766232+OllieJT@users.noreply.github.com>
Date: Fri, 24 Feb 2023 13:15:34 +0000
Subject: [PATCH 1/7] restructure $lib

---
 .prettierignore                                            | 3 ++-
 .../components/{audio/audio.svelte => audio-loader.svelte} | 7 +++----
 src/lib/components/{audio => }/audio-progress.svelte       | 0
 src/lib/components/audio/index.ts                          | 2 --
 src/lib/{components/audio/store.ts => context/audio.ts}    | 4 ++--
 src/lib/index.ts                                           | 4 ++--
 src/lib/{helper/check.ts => types/type-guards.ts}          | 0
 src/lib/{components/audio => types}/types.ts               | 0
 src/lib/{helper => utility}/seconds-to-timestamp.ts        | 0
 src/routes/+layout.svelte                                  | 4 ++--
 src/routes/+page.svelte                                    | 2 +-
 src/routes/another-page/+page.svelte                       | 7 +------
 12 files changed, 13 insertions(+), 20 deletions(-)
 rename src/lib/components/{audio/audio.svelte => audio-loader.svelte} (91%)
 rename src/lib/components/{audio => }/audio-progress.svelte (100%)
 delete mode 100644 src/lib/components/audio/index.ts
 rename src/lib/{components/audio/store.ts => context/audio.ts} (95%)
 rename src/lib/{helper/check.ts => types/type-guards.ts} (100%)
 rename src/lib/{components/audio => types}/types.ts (100%)
 rename src/lib/{helper => utility}/seconds-to-timestamp.ts (100%)

diff --git a/.prettierignore b/.prettierignore
index 3897265..9813cfa 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -3,6 +3,7 @@ node_modules
 /build
 /.svelte-kit
 /package
+/dist
 .env
 .env.*
 !.env.example
@@ -10,4 +11,4 @@ node_modules
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml
 package-lock.json
-yarn.lock
+yarn.lock
\ No newline at end of file
diff --git a/src/lib/components/audio/audio.svelte b/src/lib/components/audio-loader.svelte
similarity index 91%
rename from src/lib/components/audio/audio.svelte
rename to src/lib/components/audio-loader.svelte
index 663061e..9736ee9 100644
--- a/src/lib/components/audio/audio.svelte
+++ b/src/lib/components/audio-loader.svelte
@@ -4,9 +4,9 @@
 		__internal_audio_element,
 		__internal_audio_metadata,
 		__internal_audio_src,
-	} from '$lib/components/audio/store';
-	import type { PlayerElement } from '$lib/components/audio/types';
-	import { isBoolean, isNumber } from '$lib/helper/check';
+	} from '$lib/context/audio';
+	import { isBoolean, isNumber } from '$lib/types/type-guards';
+	import type { PlayerElement } from '$lib/types/types';
 
 	let element: PlayerElement;
 	let currentTime = 0;
@@ -72,5 +72,4 @@
 			__internal_audio_metadata.update((m) => ({ ...m, duration }));
 		}}
 	/>
-	<!-- <AudioA11yProgress {currentTime} {paused} {duration} /> -->
 {/key}
diff --git a/src/lib/components/audio/audio-progress.svelte b/src/lib/components/audio-progress.svelte
similarity index 100%
rename from src/lib/components/audio/audio-progress.svelte
rename to src/lib/components/audio-progress.svelte
diff --git a/src/lib/components/audio/index.ts b/src/lib/components/audio/index.ts
deleted file mode 100644
index d4a0c36..0000000
--- a/src/lib/components/audio/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as AudioManager } from './audio.svelte';
-export { audio } from './store';
diff --git a/src/lib/components/audio/store.ts b/src/lib/context/audio.ts
similarity index 95%
rename from src/lib/components/audio/store.ts
rename to src/lib/context/audio.ts
index 70f6c6d..a3f691f 100644
--- a/src/lib/components/audio/store.ts
+++ b/src/lib/context/audio.ts
@@ -1,6 +1,6 @@
 import { dev } from '$app/environment';
-import type { PlayerElement, PlayerMetadata } from '$lib/components/audio/types';
-import { secondsToTimestamp } from '$lib/helper/seconds-to-timestamp';
+import type { PlayerElement, PlayerMetadata } from '$lib/types/types';
+import { secondsToTimestamp } from '$lib/utility/seconds-to-timestamp';
 import clamp from 'just-clamp';
 import { derived, writable } from 'svelte/store';
 
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 5457dac..a927e69 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,2 +1,2 @@
-// Reexport your entry components here
-export * from '$lib/components/audio';
+export { default as AudioLoader } from '$lib/components/audio-loader.svelte';
+export { audio } from '$lib/context/audio';
diff --git a/src/lib/helper/check.ts b/src/lib/types/type-guards.ts
similarity index 100%
rename from src/lib/helper/check.ts
rename to src/lib/types/type-guards.ts
diff --git a/src/lib/components/audio/types.ts b/src/lib/types/types.ts
similarity index 100%
rename from src/lib/components/audio/types.ts
rename to src/lib/types/types.ts
diff --git a/src/lib/helper/seconds-to-timestamp.ts b/src/lib/utility/seconds-to-timestamp.ts
similarity index 100%
rename from src/lib/helper/seconds-to-timestamp.ts
rename to src/lib/utility/seconds-to-timestamp.ts
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 83ffe02..eeacb62 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { AudioManager } from '$lib/components/audio';
+	import { AudioLoader } from '$lib';
 </script>
 
-<AudioManager />
+<AudioLoader />
 
 <slot />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 12786bf..734dd87 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { audio } from '$lib/components/audio';
+	import { audio } from '$lib';
 
 	const sources = {
 		syntax: '/example-syntax.mp3',
diff --git a/src/routes/another-page/+page.svelte b/src/routes/another-page/+page.svelte
index f0d9805..1cad0d5 100644
--- a/src/routes/another-page/+page.svelte
+++ b/src/routes/another-page/+page.svelte
@@ -1,10 +1,5 @@
 <script lang="ts">
-	import { audio } from '$lib/components/audio';
-
-	const sources = {
-		syntax: '/example-syntax.mp3',
-		knomii: '/example-knomii.mp3',
-	} as const;
+	import { audio } from '$lib';
 
 	let current_time = 0;
 	$: current_time = $audio.current_time;

From b74f1c15fbab2ea6d2bdfa443598efbf0de8e2c2 Mon Sep 17 00:00:00 2001
From: Ollie Taylor <13766232+OllieJT@users.noreply.github.com>
Date: Fri, 24 Feb 2023 13:27:53 +0000
Subject: [PATCH 2/7] improve package logs

---
 src/lib/context/audio.ts       | 29 ++++++++++-------------------
 src/lib/utility/package/log.ts | 21 +++++++++++++++++++++
 2 files changed, 31 insertions(+), 19 deletions(-)
 create mode 100644 src/lib/utility/package/log.ts

diff --git a/src/lib/context/audio.ts b/src/lib/context/audio.ts
index a3f691f..5cd080b 100644
--- a/src/lib/context/audio.ts
+++ b/src/lib/context/audio.ts
@@ -1,18 +1,9 @@
-import { dev } from '$app/environment';
 import type { PlayerElement, PlayerMetadata } from '$lib/types/types';
+import { info, warn } from '$lib/utility/package/log';
 import { secondsToTimestamp } from '$lib/utility/seconds-to-timestamp';
 import clamp from 'just-clamp';
 import { derived, writable } from 'svelte/store';
 
-function log(...val: (string | number | boolean)[]) {
-	if (!dev) return;
-	console.info('🎶 ', ...val);
-}
-function warn(...val: (string | number | boolean)[]) {
-	if (!dev) return;
-	console.warn('🎶 ', ...val);
-}
-
 export const __internal_audio_current_time = writable<number>(0);
 export const __internal_audio_src = writable<string | null>(null);
 export const __internal_audio_element = writable<PlayerElement>();
@@ -38,7 +29,7 @@ const state = derived(
 type HandleType = 'toggle' | 'set';
 
 function play(type: HandleType = 'set') {
-	log('play: ', type);
+	info('play: ', type);
 	return __internal_audio_element.subscribe((el) => {
 		if (!el) return warn('no audio element');
 		if (type === 'toggle') {
@@ -49,7 +40,7 @@ function play(type: HandleType = 'set') {
 	})();
 }
 function pause(type: HandleType = 'set') {
-	log('pause: ', type);
+	info('pause: ', type);
 	return __internal_audio_element.subscribe((el) => {
 		if (!el) return warn('no audio element');
 		if (type === 'toggle') {
@@ -61,7 +52,7 @@ function pause(type: HandleType = 'set') {
 }
 
 function mute(type: HandleType = 'set') {
-	log('mute: ', type);
+	info('mute: ', type);
 	return __internal_audio_element.subscribe((el) => {
 		if (!el) return warn('no audio element');
 		if (type === 'toggle') {
@@ -72,7 +63,7 @@ function mute(type: HandleType = 'set') {
 	})();
 }
 function unmute(type: HandleType = 'set') {
-	log('unmute: ', type);
+	info('unmute: ', type);
 	return __internal_audio_element.subscribe((el) => {
 		if (!el) return warn('no audio element');
 		if (type === 'toggle') {
@@ -84,7 +75,7 @@ function unmute(type: HandleType = 'set') {
 }
 
 function load(src: string) {
-	log('load: ', src);
+	info('load: ', src);
 	__internal_audio_src.set(src);
 	return __internal_audio_element.subscribe((el) => {
 		if (!el) return warn('no audio element');
@@ -93,12 +84,12 @@ function load(src: string) {
 	})();
 }
 function unload() {
-	log('unload: ');
+	info('unload: ');
 	__internal_audio_src.set(null);
 }
 
 function setPlaybackRate(rate: number) {
-	log('setPlaybackRate: ', rate);
+	info('setPlaybackRate: ', rate);
 	return __internal_audio_element.subscribe((el) => {
 		if (!el) return warn('no audio element');
 		el.playbackRate = clamp(0, 10, rate);
@@ -106,7 +97,7 @@ function setPlaybackRate(rate: number) {
 }
 
 function seek(seconds: number, from: 'from-start' | 'from-end' = 'from-start') {
-	log('seek: ', seconds, from);
+	info('seek: ', seconds, from);
 	return __internal_audio_element.subscribe((el) => {
 		if (!el) return warn('no audio element');
 		if (from === 'from-end') {
@@ -118,7 +109,7 @@ function seek(seconds: number, from: 'from-start' | 'from-end' = 'from-start') {
 }
 
 function skip(seconds: number, type: 'forward' | 'backward' = 'forward') {
-	log('skip: ', seconds, type);
+	info('skip: ', seconds, type);
 	return __internal_audio_element.subscribe((el) => {
 		if (!el) return warn('no audio element');
 		if (type === 'backward') {
diff --git a/src/lib/utility/package/log.ts b/src/lib/utility/package/log.ts
new file mode 100644
index 0000000..072eae4
--- /dev/null
+++ b/src/lib/utility/package/log.ts
@@ -0,0 +1,21 @@
+import { dev } from '$app/environment';
+
+const useLogger = {
+	error: console.error,
+	info: console.info,
+	warn: console.warn,
+};
+
+export type Logger = keyof typeof useLogger;
+
+export function log(type: Logger, ...content: unknown[]) {
+	const logger = useLogger[type];
+
+	if (type === 'info' && !dev) return;
+
+	logger('🔊 svelte-podcast: ', content);
+}
+
+export const info = (...content: unknown[]) => log('info', ...content);
+export const warn = (...content: unknown[]) => log('warn', content);
+export const error = (...content: unknown[]) => log('error', content);

From 3ac7346cdddcc4d625cfe5cdcefe95e513a78d50 Mon Sep 17 00:00:00 2001
From: Ollie Taylor <13766232+OllieJT@users.noreply.github.com>
Date: Fri, 24 Feb 2023 13:32:10 +0000
Subject: [PATCH 3/7] adds $pkg alias

---
 src/lib/components/audio-loader.svelte            | 2 +-
 src/lib/context/audio.ts                          | 2 +-
 src/lib/{types => utility/package}/type-guards.ts | 0
 svelte.config.js                                  | 4 ++++
 4 files changed, 6 insertions(+), 2 deletions(-)
 rename src/lib/{types => utility/package}/type-guards.ts (100%)

diff --git a/src/lib/components/audio-loader.svelte b/src/lib/components/audio-loader.svelte
index 9736ee9..56f2bd9 100644
--- a/src/lib/components/audio-loader.svelte
+++ b/src/lib/components/audio-loader.svelte
@@ -5,8 +5,8 @@
 		__internal_audio_metadata,
 		__internal_audio_src,
 	} from '$lib/context/audio';
-	import { isBoolean, isNumber } from '$lib/types/type-guards';
 	import type { PlayerElement } from '$lib/types/types';
+	import { isBoolean, isNumber } from '$pkg/type-guards';
 
 	let element: PlayerElement;
 	let currentTime = 0;
diff --git a/src/lib/context/audio.ts b/src/lib/context/audio.ts
index 5cd080b..b5b70f0 100644
--- a/src/lib/context/audio.ts
+++ b/src/lib/context/audio.ts
@@ -1,6 +1,6 @@
 import type { PlayerElement, PlayerMetadata } from '$lib/types/types';
-import { info, warn } from '$lib/utility/package/log';
 import { secondsToTimestamp } from '$lib/utility/seconds-to-timestamp';
+import { info, warn } from '$pkg/log';
 import clamp from 'just-clamp';
 import { derived, writable } from 'svelte/store';
 
diff --git a/src/lib/types/type-guards.ts b/src/lib/utility/package/type-guards.ts
similarity index 100%
rename from src/lib/types/type-guards.ts
rename to src/lib/utility/package/type-guards.ts
diff --git a/svelte.config.js b/svelte.config.js
index c160d6e..b91762c 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -9,6 +9,10 @@ const config = {
 
 	kit: {
 		adapter: adapter(),
+		alias: {
+			$lib: 'src/lib',
+			$pkg: 'src/lib/utility/package/',
+		},
 	},
 };
 

From 20fc30709954b996335f2b25dbaa95de4577f2ab Mon Sep 17 00:00:00 2001
From: Ollie Taylor <13766232+OllieJT@users.noreply.github.com>
Date: Fri, 24 Feb 2023 13:47:07 +0000
Subject: [PATCH 4/7] cleanup internal stores

---
 src/lib/components/audio-loader.svelte | 30 +++++++-------
 src/lib/context/audio-internals.ts     | 13 ++++++
 src/lib/context/audio.ts               | 57 +++++++++++---------------
 3 files changed, 52 insertions(+), 48 deletions(-)
 create mode 100644 src/lib/context/audio-internals.ts

diff --git a/src/lib/components/audio-loader.svelte b/src/lib/components/audio-loader.svelte
index 56f2bd9..d396daf 100644
--- a/src/lib/components/audio-loader.svelte
+++ b/src/lib/components/audio-loader.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import {
-		__internal_audio_current_time,
-		__internal_audio_element,
-		__internal_audio_metadata,
-		__internal_audio_src,
-	} from '$lib/context/audio';
+		audio_current_time,
+		audio_element,
+		audio_metadata,
+		audio_src,
+	} from '$lib/context/audio-internals';
 	import type { PlayerElement } from '$lib/types/types';
 	import { isBoolean, isNumber } from '$pkg/type-guards';
 
@@ -12,10 +12,10 @@
 	let currentTime = 0;
 	let muted = false;
 
-	$: src = $__internal_audio_src;
-	$: __internal_audio_element.set(element);
-	$: __internal_audio_current_time.set(currentTime);
-	$: __internal_audio_metadata.update((x) => ({ ...x, muted }));
+	$: src = $audio_src;
+	$: audio_element.set(element);
+	$: audio_current_time.set(currentTime);
+	$: audio_metadata.update((x) => ({ ...x, muted }));
 </script>
 
 {#key src}
@@ -42,34 +42,34 @@
 			// console.log('emptied', e);
 		}}
 		on:loadeddata={() => {
-			__internal_audio_metadata.update((m) => ({ ...m, loading: false }));
+			audio_metadata.update((m) => ({ ...m, loading: false }));
 		}}
 		on:loadstart={() => {
-			__internal_audio_metadata.update((m) => ({ ...m, loading: true }));
+			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;
-			__internal_audio_metadata.update((m) => ({ ...m, paused: is_paused }));
+			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;
-			__internal_audio_metadata.update((m) => ({ ...m, paused: is_paused }));
+			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;
-			__internal_audio_metadata.update((m) => ({ ...m, playbackRate }));
+			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;
-			__internal_audio_metadata.update((m) => ({ ...m, duration }));
+			audio_metadata.update((m) => ({ ...m, duration }));
 		}}
 	/>
 {/key}
diff --git a/src/lib/context/audio-internals.ts b/src/lib/context/audio-internals.ts
new file mode 100644
index 0000000..5083a48
--- /dev/null
+++ b/src/lib/context/audio-internals.ts
@@ -0,0 +1,13 @@
+import type { PlayerElement, PlayerMetadata } from '$lib/types/types';
+import { writable } from 'svelte/store';
+
+export const audio_current_time = writable<number>(0);
+export const audio_src = writable<string | null>(null);
+export const audio_element = writable<PlayerElement>();
+export const audio_metadata = writable<PlayerMetadata>({
+	duration: 0,
+	muted: false,
+	paused: true,
+	playbackRate: 1,
+	loading: false,
+});
diff --git a/src/lib/context/audio.ts b/src/lib/context/audio.ts
index b5b70f0..c91a837 100644
--- a/src/lib/context/audio.ts
+++ b/src/lib/context/audio.ts
@@ -1,36 +1,27 @@
-import type { PlayerElement, PlayerMetadata } from '$lib/types/types';
+import {
+	audio_current_time,
+	audio_element,
+	audio_metadata,
+	audio_src,
+} 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, writable } from 'svelte/store';
+import { derived } from 'svelte/store';
 
-export const __internal_audio_current_time = writable<number>(0);
-export const __internal_audio_src = writable<string | null>(null);
-export const __internal_audio_element = writable<PlayerElement>();
-export const __internal_audio_metadata = writable<PlayerMetadata>({
-	duration: 0,
-	muted: false,
-	paused: true,
-	playbackRate: 1,
-	loading: false,
+const audio_state = derived([audio_metadata, audio_current_time], ([$metadata, $current_time]) => {
+	return {
+		current_time: $current_time,
+		timestamp: secondsToTimestamp($current_time),
+		...$metadata,
+	};
 });
 
-const state = derived(
-	[__internal_audio_metadata, __internal_audio_current_time],
-	([$metadata, $current_time]) => {
-		return {
-			current_time: $current_time,
-			timestamp: secondsToTimestamp($current_time),
-			...$metadata,
-		};
-	},
-);
-
 type HandleType = 'toggle' | 'set';
 
 function play(type: HandleType = 'set') {
 	info('play: ', type);
-	return __internal_audio_element.subscribe((el) => {
+	return audio_element.subscribe((el) => {
 		if (!el) return warn('no audio element');
 		if (type === 'toggle') {
 			el.paused ? el.play() : el.pause();
@@ -41,7 +32,7 @@ function play(type: HandleType = 'set') {
 }
 function pause(type: HandleType = 'set') {
 	info('pause: ', type);
-	return __internal_audio_element.subscribe((el) => {
+	return audio_element.subscribe((el) => {
 		if (!el) return warn('no audio element');
 		if (type === 'toggle') {
 			el.paused ? el.play() : el.pause();
@@ -53,7 +44,7 @@ function pause(type: HandleType = 'set') {
 
 function mute(type: HandleType = 'set') {
 	info('mute: ', type);
-	return __internal_audio_element.subscribe((el) => {
+	return audio_element.subscribe((el) => {
 		if (!el) return warn('no audio element');
 		if (type === 'toggle') {
 			el.muted = !el.muted;
@@ -64,7 +55,7 @@ function mute(type: HandleType = 'set') {
 }
 function unmute(type: HandleType = 'set') {
 	info('unmute: ', type);
-	return __internal_audio_element.subscribe((el) => {
+	return audio_element.subscribe((el) => {
 		if (!el) return warn('no audio element');
 		if (type === 'toggle') {
 			el.muted = !el.muted;
@@ -76,8 +67,8 @@ function unmute(type: HandleType = 'set') {
 
 function load(src: string) {
 	info('load: ', src);
-	__internal_audio_src.set(src);
-	return __internal_audio_element.subscribe((el) => {
+	audio_src.set(src);
+	return audio_element.subscribe((el) => {
 		if (!el) return warn('no audio element');
 		el.volume = 1;
 		el.pause();
@@ -85,12 +76,12 @@ function load(src: string) {
 }
 function unload() {
 	info('unload: ');
-	__internal_audio_src.set(null);
+	audio_src.set(null);
 }
 
 function setPlaybackRate(rate: number) {
 	info('setPlaybackRate: ', rate);
-	return __internal_audio_element.subscribe((el) => {
+	return audio_element.subscribe((el) => {
 		if (!el) return warn('no audio element');
 		el.playbackRate = clamp(0, 10, rate);
 	})();
@@ -98,7 +89,7 @@ function setPlaybackRate(rate: number) {
 
 function seek(seconds: number, from: 'from-start' | 'from-end' = 'from-start') {
 	info('seek: ', seconds, from);
-	return __internal_audio_element.subscribe((el) => {
+	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);
@@ -110,7 +101,7 @@ function seek(seconds: number, from: 'from-start' | 'from-end' = 'from-start') {
 
 function skip(seconds: number, type: 'forward' | 'backward' = 'forward') {
 	info('skip: ', seconds, type);
-	return __internal_audio_element.subscribe((el) => {
+	return audio_element.subscribe((el) => {
 		if (!el) return warn('no audio element');
 		if (type === 'backward') {
 			el.currentTime = clamp(0, el.duration, el.currentTime - seconds);
@@ -121,7 +112,7 @@ function skip(seconds: number, type: 'forward' | 'backward' = 'forward') {
 }
 
 export const audio = {
-	subscribe: state.subscribe,
+	subscribe: audio_state.subscribe,
 	play,
 	pause,
 	mute,

From d7d81ce7325cc691fa79c3f9e56663c0468db7f8 Mon Sep 17 00:00:00 2001
From: Ollie Taylor <13766232+OllieJT@users.noreply.github.com>
Date: Fri, 24 Feb 2023 14:01:43 +0000
Subject: [PATCH 5/7] adds autoplay option

---
 src/lib/components/audio-loader.svelte | 3 ++-
 src/lib/context/audio-internals.ts     | 4 +++-
 src/lib/context/audio.ts               | 8 +++++++-
 src/routes/+page.svelte                | 8 ++++++--
 4 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/audio-loader.svelte b/src/lib/components/audio-loader.svelte
index d396daf..f46a025 100644
--- a/src/lib/components/audio-loader.svelte
+++ b/src/lib/components/audio-loader.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import {
+		audio_autoplay,
 		audio_current_time,
 		audio_element,
 		audio_metadata,
@@ -22,7 +23,7 @@
 	<audio
 		bind:this={element}
 		{src}
-		autoplay={false}
+		autoplay={$audio_autoplay}
 		bind:currentTime
 		bind:muted
 		preload="metadata"
diff --git a/src/lib/context/audio-internals.ts b/src/lib/context/audio-internals.ts
index 5083a48..cfe7a51 100644
--- a/src/lib/context/audio-internals.ts
+++ b/src/lib/context/audio-internals.ts
@@ -1,9 +1,11 @@
 import type { PlayerElement, PlayerMetadata } 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_element = writable<PlayerElement>();
+export const audio_autoplay = writable<boolean>(false);
+
 export const audio_metadata = writable<PlayerMetadata>({
 	duration: 0,
 	muted: false,
diff --git a/src/lib/context/audio.ts b/src/lib/context/audio.ts
index c91a837..0a4e4b5 100644
--- a/src/lib/context/audio.ts
+++ b/src/lib/context/audio.ts
@@ -1,4 +1,5 @@
 import {
+	audio_autoplay,
 	audio_current_time,
 	audio_element,
 	audio_metadata,
@@ -65,8 +66,13 @@ function unmute(type: HandleType = 'set') {
 	})();
 }
 
-function load(src: string) {
+type LoadOptions = {
+	autoplay: boolean;
+};
+
+function load(src: string, opts: LoadOptions) {
 	info('load: ', src);
+	audio_autoplay.set(opts.autoplay);
 	audio_src.set(src);
 	return audio_element.subscribe((el) => {
 		if (!el) return warn('no audio element');
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 734dd87..c775cfe 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -16,8 +16,12 @@
 <a href="/another-page">Another Page</a>
 
 <h5>Load Audio</h5>
-<button type="button" on:click={() => audio.load(sources['syntax'])}>Syntax</button>
-<button type="button" on:click={() => audio.load(sources['knomii'])}>Knomii</button>
+<button type="button" on:click={() => audio.load(sources['syntax'], { autoplay: true })}
+	>Syntax</button
+>
+<button type="button" on:click={() => audio.load(sources['knomii'], { autoplay: false })}
+	>Knomii</button
+>
 <button type="button" on:click={() => audio.unload()}>None</button>
 
 <h5>Custom audio controls</h5>

From 62497fe06bffe3fe523de9e52e7e04da5e1d63b5 Mon Sep 17 00:00:00 2001
From: Ollie Taylor <13766232+OllieJT@users.noreply.github.com>
Date: Fri, 24 Feb 2023 14:43:33 +0000
Subject: [PATCH 6/7] refactor bindings + include start_at option

---
 src/lib/components/audio-loader.svelte | 137 ++++++++++++++-----------
 src/lib/context/audio-internals.ts     |  27 +++--
 src/lib/context/audio.ts               |  81 +++++++++------
 src/lib/types/types.ts                 |   8 --
 src/routes/+page.svelte                |   5 +-
 5 files changed, 150 insertions(+), 108 deletions(-)

diff --git a/src/lib/components/audio-loader.svelte b/src/lib/components/audio-loader.svelte
index f46a025..7da7037 100644
--- a/src/lib/components/audio-loader.svelte
+++ b/src/lib/components/audio-loader.svelte
@@ -4,73 +4,92 @@
 		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 type { PlayerElement } from '$lib/types/types';
 	import { isBoolean, isNumber } from '$pkg/type-guards';
 
 	let element: PlayerElement;
-	let currentTime = 0;
-	let muted = false;
+	let currentTime = $audio_start_at;
+	let volume = $audio_volume;
 
-	$: src = $audio_src;
+	let duration = 0;
+	let ended = true;
+	let muted = false;
+	let paused = false;
+	let playbackRate = 1;
+
+	// Update stores based on bindings
 	$: audio_element.set(element);
 	$: audio_current_time.set(currentTime);
-	$: audio_metadata.update((x) => ({ ...x, muted }));
+	$: audio_metadata.update((x) => ({ ...x, duration, ended, paused }));
+
+	// Update bindings based on stores
+	$: volume = $audio_volume;
+	$: muted = $audio_muted;
+	$: playbackRate = $audio_playback_rate;
+	$: currentTime = $audio_start_at;
 </script>
 
-{#key src}
-	<audio
-		bind:this={element}
-		{src}
-		autoplay={$audio_autoplay}
-		bind:currentTime
-		bind:muted
-		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={() => {
-			audio_metadata.update((m) => ({ ...m, loading: false }));
-		}}
-		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 }));
-		}}
-	/>
-{/key}
+<audio
+	bind:this={element}
+	src={$audio_src}
+	autoplay={$audio_autoplay}
+	bind:currentTime
+	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={() => {
+		audio_metadata.update((m) => ({ ...m, loading: false }));
+	}}
+	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 }));
+	}}
+/>
diff --git a/src/lib/context/audio-internals.ts b/src/lib/context/audio-internals.ts
index cfe7a51..7ea9f00 100644
--- a/src/lib/context/audio-internals.ts
+++ b/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,
 });
diff --git a/src/lib/context/audio.ts b/src/lib/context/audio.ts
index 0a4e4b5..f513ab4 100644
--- a/src/lib/context/audio.ts
+++ b/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') {
diff --git a/src/lib/types/types.ts b/src/lib/types/types.ts
index 6e5c9a3..d8ee92f 100644
--- a/src/lib/types/types.ts
+++ b/src/lib/types/types.ts
@@ -1,9 +1 @@
 export type PlayerElement = HTMLAudioElement | undefined;
-
-export type PlayerMetadata = {
-	duration: number;
-	muted: boolean;
-	paused: boolean;
-	playbackRate: number;
-	loading: boolean;
-};
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c775cfe..ea813e6 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -16,8 +16,9 @@
 <a href="/another-page">Another Page</a>
 
 <h5>Load Audio</h5>
-<button type="button" on:click={() => audio.load(sources['syntax'], { autoplay: true })}
-	>Syntax</button
+<button
+	type="button"
+	on:click={() => audio.load(sources['syntax'], { autoplay: true, start_at: 45 })}>Syntax</button
 >
 <button type="button" on:click={() => audio.load(sources['knomii'], { autoplay: false })}
 	>Knomii</button

From a70d68dcd893b67b111e5ce5556726d7981bc385 Mon Sep 17 00:00:00 2001
From: Ollie Taylor <13766232+OllieJT@users.noreply.github.com>
Date: Fri, 24 Feb 2023 14:48:25 +0000
Subject: [PATCH 7/7] Add changeset

---
 .changeset/strong-foxes-know.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/strong-foxes-know.md

diff --git a/.changeset/strong-foxes-know.md b/.changeset/strong-foxes-know.md
new file mode 100644
index 0000000..31c10ac
--- /dev/null
+++ b/.changeset/strong-foxes-know.md
@@ -0,0 +1,7 @@
+---
+'svelte-podcast': minor
+---
+
+- Restructures lib to make dist cleaner and dev easier to grock
+- Refactors <audio /> bindings to make it easier to change values when loading a different source
+- Moves more values to micro-stores