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 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/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/audio.svelte b/src/lib/components/audio/audio.svelte
deleted file mode 100644
index 663061e..0000000
--- a/src/lib/components/audio/audio.svelte
+++ /dev/null
@@ -1,76 +0,0 @@
-
-
-{#key src}
- 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={() => {
- __internal_audio_metadata.update((m) => ({ ...m, loading: false }));
- }}
- on:loadstart={() => {
- __internal_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 }));
- }}
- 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 }));
- }}
- 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 }));
- }}
- 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 }));
- }}
- />
-
-{/key}
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/components/audio/store.ts
deleted file mode 100644
index 70f6c6d..0000000
--- a/src/lib/components/audio/store.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-import { dev } from '$app/environment';
-import type { PlayerElement, PlayerMetadata } from '$lib/components/audio/types';
-import { secondsToTimestamp } from '$lib/helper/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(0);
-export const __internal_audio_src = writable(null);
-export const __internal_audio_element = writable();
-export const __internal_audio_metadata = writable({
- duration: 0,
- muted: false,
- paused: true,
- playbackRate: 1,
- loading: false,
-});
-
-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') {
- log('play: ', type);
- return __internal_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') {
- log('pause: ', type);
- return __internal_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') {
- log('mute: ', type);
- return __internal_audio_element.subscribe((el) => {
- if (!el) return warn('no audio element');
- if (type === 'toggle') {
- el.muted = !el.muted;
- } else {
- el.muted = true;
- }
- })();
-}
-function unmute(type: HandleType = 'set') {
- log('unmute: ', type);
- return __internal_audio_element.subscribe((el) => {
- if (!el) return warn('no audio element');
- if (type === 'toggle') {
- el.muted = !el.muted;
- } else {
- el.muted = false;
- }
- })();
-}
-
-function load(src: string) {
- log('load: ', src);
- __internal_audio_src.set(src);
- return __internal_audio_element.subscribe((el) => {
- if (!el) return warn('no audio element');
- el.volume = 1;
- el.pause();
- })();
-}
-function unload() {
- log('unload: ');
- __internal_audio_src.set(null);
-}
-
-function setPlaybackRate(rate: number) {
- log('setPlaybackRate: ', rate);
- return __internal_audio_element.subscribe((el) => {
- if (!el) return warn('no audio element');
- el.playbackRate = clamp(0, 10, rate);
- })();
-}
-
-function seek(seconds: number, from: 'from-start' | 'from-end' = 'from-start') {
- log('seek: ', seconds, from);
- return __internal_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') {
- log('skip: ', seconds, type);
- return __internal_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: state.subscribe,
- play,
- pause,
- mute,
- unmute,
- load,
- unload,
- setPlaybackRate,
- seek,
- skip,
-};
diff --git a/src/lib/components/audio/types.ts b/src/lib/components/audio/types.ts
deleted file mode 100644
index 6e5c9a3..0000000
--- a/src/lib/components/audio/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export type PlayerElement = HTMLAudioElement | undefined;
-
-export type PlayerMetadata = {
- duration: number;
- muted: boolean;
- paused: boolean;
- playbackRate: number;
- loading: boolean;
-};
diff --git a/src/lib/context/audio-internals.ts b/src/lib/context/audio-internals.ts
new file mode 100644
index 0000000..7ea9f00
--- /dev/null
+++ b/src/lib/context/audio-internals.ts
@@ -0,0 +1,30 @@
+import type { PlayerElement } from '$lib/types/types';
+import { writable } from 'svelte/store';
+
+export const audio_element = writable();
+export const audio_start_at = writable(0);
+
+export const audio_autoplay = writable(false);
+export const audio_current_time = writable(0);
+export const audio_muted = writable(false);
+export const audio_playback_rate = writable(1);
+export const audio_src = writable('');
+export const audio_volume = writable(1);
+
+export type PlayerMetadata = {
+ duration: number;
+ // muted: boolean;
+ paused: boolean;
+ // playbackRate: number;
+ loading: boolean;
+ ended: boolean;
+};
+
+export const audio_metadata = writable({
+ duration: 0,
+ ended: false,
+ loading: false,
+ paused: true,
+ // muted: false,
+ // playbackRate: 1,
+});
diff --git a/src/lib/context/audio.ts b/src/lib/context/audio.ts
new file mode 100644
index 0000000..f513ab4
--- /dev/null
+++ b/src/lib/context/audio.ts
@@ -0,0 +1,146 @@
+import {
+ audio_autoplay,
+ 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_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';
+
+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);
+ }
+}
+
+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);
+ audio_start_at.set(opts.start_at || 0);
+ // opts.current_time ? seek(opts.current_time) : null;
+ //opts.autoplay && play();
+}
+function unload() {
+ info('unload: ');
+ pause();
+ audio_autoplay.set(false);
+ audio_volume.set(1);
+ audio_src.set('');
+ audio_start_at.set(0);
+}
+
+function setPlaybackRate(rate: number) {
+ info('setPlaybackRate: ', rate);
+ audio_playback_rate.set(clamp(0, 10, rate));
+}
+
+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,
+ setPlaybackRate,
+ seek,
+ skip,
+};
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/types/types.ts b/src/lib/types/types.ts
new file mode 100644
index 0000000..d8ee92f
--- /dev/null
+++ b/src/lib/types/types.ts
@@ -0,0 +1 @@
+export type PlayerElement = HTMLAudioElement | undefined;
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);
diff --git a/src/lib/helper/check.ts b/src/lib/utility/package/type-guards.ts
similarity index 100%
rename from src/lib/helper/check.ts
rename to src/lib/utility/package/type-guards.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 @@
-