Fixes derived audio store updating too frequently (#26)

.changeset/violet-meals-worry.md

@@ -0,0 +1,5 @@
+---
+'svelte-podcast': patch
+---
+
+Fixes derived store causing exessive updates

src/lib/context/audio-metadata.ts

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

src/lib/context/audio.ts

@@ -1,72 +1,19 @@
 import {
 	audio_autoplay,
-	audio_current_time,
-	audio_duration,
 	audio_element,
-	audio_ended,
-	audio_loading,
 	audio_muted,
-	audio_paused,
 	audio_src,
 	audio_start_at,
 } from '$lib/context/audio-internals';
-import { audio_metadata } from '$lib/context/audio-metadata';
 import { episode_progress } from '$lib/context/episode-progress';
-import { user_preferences } from '$lib/context/user-preferences';
+import { metadata } from '$lib/stores';
 import type { AudioLoadData, AudioLoadOptions } from '$lib/types';
-import { secondsToTimestamp } from '$lib/utility/seconds-to-timestamp';
 import { info, warn } from '$pkg/log';
 import clamp from 'just-clamp';
-import { derived } from 'svelte/store';
-
-const audio_state = derived(
-	[
-		audio_current_time,
-		audio_duration,
-		audio_ended,
-		audio_loading,
-		audio_paused,
-		audio_start_at,
-		audio_autoplay,
-		audio_muted,
-		audio_src,
-		audio_metadata,
-		user_preferences,
-	],
-	([
-		$current_time,
-		$duration,
-		$ended,
-		$loading,
-		$paused,
-		$start_at,
-		$autoplay,
-		$muted,
-		$src,
-		$metadata,
-		$user_preferences,
-	]) => {
-		return {
-			current_time: $current_time,
-			duration: $duration,
-			ended: $ended,
-			loading: $loading,
-			paused: $paused,
-			start_at: $start_at,
-			autoplay: $autoplay,
-			muted: $muted,
-			src: $src,
-			metadata: $metadata,
-			playback_rate: $user_preferences.playback_rate,
-			volume: $user_preferences.volume,
-			timestamp: secondsToTimestamp($current_time),
-		};
-	},
-);
 
 type HandleType = 'toggle' | 'set';
 
-function play(type: HandleType = 'set') {
+export function play(type: HandleType = 'set') {
 	info('play: ', type);
 	return audio_element.subscribe((el) => {
 		if (!el) return warn('no audio element');
@@ -77,7 +24,7 @@ function play(type: HandleType = 'set') {
 		}
 	})();
 }
-function pause(type: HandleType = 'set') {
+export function pause(type: HandleType = 'set') {
 	info('pause: ', type);
 	return audio_element.subscribe((el) => {
 		if (!el) return warn('no audio element');
@@ -89,7 +36,7 @@ function pause(type: HandleType = 'set') {
 	})();
 }
 
-function mute(type: HandleType = 'set') {
+export function mute(type: HandleType = 'set') {
 	info('mute: ', type);
 	if (type === 'toggle') {
 		audio_muted.update((muted) => !muted);
@@ -97,7 +44,7 @@ function mute(type: HandleType = 'set') {
 		audio_muted.set(true);
 	}
 }
-function unmute(type: HandleType = 'set') {
+export function unmute(type: HandleType = 'set') {
 	info('unmute: ', type);
 	if (type === 'toggle') {
 		audio_muted.update((muted) => !muted);
@@ -106,10 +53,10 @@ function unmute(type: HandleType = 'set') {
 	}
 }
 
-const load = (data: AudioLoadData, opts: AudioLoadOptions) => {
+export const load = (data: AudioLoadData, opts: AudioLoadOptions) => {
 	episode_progress.stash();
 
-	const { src, ...metadata } = data;
+	const { src, ...meta } = data;
 	const progress = episode_progress.use(src);
 	const start_at = progress?.start_at || opts.start_at || 0;
 
@@ -118,22 +65,22 @@ const load = (data: AudioLoadData, opts: AudioLoadOptions) => {
 	info('load: ', src);
 	audio_autoplay.set(opts.autoplay);
 	audio_src.set(src);
-	audio_metadata.set(metadata);
+	metadata.set(meta);
 	audio_start_at.set(start_at);
 	// opts.current_time ? seek(opts.current_time) : null;
 	//opts.autoplay && play();
 };
-function unload() {
+export function unload() {
 	episode_progress.stash();
 	info('unload: ');
 	pause();
 	audio_autoplay.set(false);
 	audio_src.set('');
-	audio_metadata.set(null);
+	metadata.set(null);
 	audio_start_at.set(0);
 }
 
-function seek(seconds: number, from: 'from-start' | 'from-end' = 'from-start') {
+export 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');
@@ -145,7 +92,7 @@ function seek(seconds: number, from: 'from-start' | 'from-end' = 'from-start') {
 	})();
 }
 
-function skip(seconds: number, type: 'forward' | 'backward' = 'forward') {
+export function skip(seconds: number, type: 'forward' | 'backward' = 'forward') {
 	info('skip: ', seconds, type);
 	return audio_element.subscribe((el) => {
 		if (!el) return warn('no audio element');
@@ -156,15 +103,3 @@ function skip(seconds: number, type: 'forward' | 'backward' = 'forward') {
 		}
 	})();
 }
-
-export const audio = {
-	subscribe: audio_state.subscribe,
-	play,
-	pause,
-	mute,
-	unmute,
-	load,
-	unload,
-	seek,
-	skip,
-};

src/lib/context/episode-progress.ts

@@ -1,17 +1,17 @@
 import { browser } from '$app/environment';
-import { audio } from '$lib/context/audio';
+import { audio_current_time, audio_src } from '$lib/context/audio-internals';
 import type { AudioLoadOptions, EpisodeProgress } from '$lib/types';
 import { error, info, warn } from '$lib/utility/package/log';
+import { get } from 'svelte/store';
 
 const episode_progress_map = new Map<string, EpisodeProgress>();
 
 function stash_episode() {
-	return audio.subscribe((state) => {
+	const src = get(audio_src);
-		info('saving progress: ', state.src);
+	if (!src) return;
-		if (!state.src) return;
+	info('saving progress: ', src);
-		episode_progress_map.set(state.src, { current_time: state.current_time });
+	episode_progress_map.set(src, { current_time: get(audio_current_time) });
-		save_all();
+	save_all();
-	})();
 }
 
 function use_episode(src: string): Pick<AudioLoadOptions, 'start_at'> | null {

src/lib/index.ts

@@ -2,4 +2,5 @@ export { default as AudioLoader } from '$lib/components/audio-loader.svelte';
 export * from '$lib/context/audio';
 export * from '$lib/context/episode-progress';
 export * from '$lib/context/user-preferences';
+export * from '$lib/stores';
 export * from '$lib/utility';

src/lib/stores.ts

@@ -0,0 +1,47 @@
+import {
+	audio_autoplay,
+	audio_current_time,
+	audio_duration,
+	audio_ended,
+	audio_loading,
+	audio_muted,
+	audio_paused,
+	audio_src,
+	audio_start_at,
+} from '$lib/context/audio-internals';
+import { user_preferences } from '$lib/context/user-preferences';
+import type { AudioLoadData, AudioLoadOptions, AudioMetadata } from '$lib/types';
+import { secondsToTimestamp } from '$lib/utility/seconds-to-timestamp';
+import { derived, writable } from 'svelte/store';
+
+export const time = derived([audio_current_time, audio_ended], ([$seconds, $ended]) => ({
+	current_time: $seconds,
+	timestamp: secondsToTimestamp($seconds),
+	ended: $ended,
+}));
+
+export const metadata = writable<AudioMetadata | null>(null);
+
+export const data = derived(
+	[audio_src, metadata],
+	([$src, $metadata]) =>
+		({
+			...$metadata,
+			src: $src,
+		} satisfies AudioLoadData),
+);
+
+export const options = derived(
+	[audio_start_at, audio_autoplay],
+	([$start_at, $autoplay]) =>
+		({
+			start_at: $start_at,
+			autoplay: $autoplay,
+		} satisfies AudioLoadOptions),
+);
+
+export const duration = { subscribe: audio_duration.subscribe };
+export const loading = { subscribe: audio_loading.subscribe };
+export const paused = { subscribe: audio_paused.subscribe };
+export const muted = { subscribe: audio_muted.subscribe };
+export const references = { subscribe: user_preferences.subscribe };

src/lib/types.ts

@@ -1,9 +1,9 @@
 export type AudioPlayerElement = HTMLAudioElement | undefined;
 
-export interface AudioMetadata {
+export type AudioMetadata = Partial<{
 	title: string;
 	artwork: string;
-}
+}>;
 
 export interface AudioLoadData extends AudioMetadata {
 	src: string;