Save Progress (#20)

.changeset/tidy-peaches-joke.md

@@ -0,0 +1,5 @@
+---
+'svelte-podcast': minor
+---
+
+Adds save/load mechanic for episode progress

src/lib/components/audio-loader.svelte

@@ -13,7 +13,9 @@
 		audio_start_at,
 		audio_volume,
 	} from '$lib/context/audio-internals';
+	import { episode_progress } from '$lib/context/progress';
 	import type { PlayerElement } from '$lib/types/types';
+	import { onMount } from 'svelte';
 
 	// readonly values
 	let element: PlayerElement;
@@ -39,6 +41,10 @@
 	$: muted = $audio_muted;
 	$: playbackRate = $audio_playback_rate;
 	$: current_time = $audio_start_at;
+
+	onMount(() => {
+		episode_progress.load_all();
+	});
 </script>
 
 <audio

src/lib/context/audio.ts

@@ -13,6 +13,7 @@ import {
 	audio_volume,
 } from '$lib/context/audio-internals';
 import { audio_metadata, type AudioMetadata } from '$lib/context/audio-metadata';
+import { episode_progress } from '$lib/context/progress';
 import { secondsToTimestamp } from '$lib/utility/seconds-to-timestamp';
 import { info, warn } from '$pkg/log';
 import clamp from 'just-clamp';
@@ -115,17 +116,25 @@ export type AudioLoadOptions = {
 };
 
 const load = (data: AudioLoadData, opts: AudioLoadOptions) => {
+	episode_progress.stash();
+
 	const { src, ...metadata } = data;
+	const progress = episode_progress.use(src);
+	const start_at = progress?.start_at || opts.start_at || 0;
+
+	console.log('progress', progress);
+
 	info('load: ', src);
 	audio_autoplay.set(opts.autoplay);
 	audio_volume.set(1);
 	audio_src.set(src);
 	audio_metadata.set(metadata);
-	audio_start_at.set(opts.start_at || 0);
+	audio_start_at.set(start_at);
 	// opts.current_time ? seek(opts.current_time) : null;
 	//opts.autoplay && play();
 };
 function unload() {
+	episode_progress.stash();
 	info('unload: ');
 	pause();
 	audio_autoplay.set(false);

src/lib/context/progress.ts

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

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { audio, type AudioLoadData } from '$lib';
+	import { episode_progress } from '$lib/context/progress';
 
 	const sources = {
 		syntax: {
@@ -22,6 +23,7 @@
 
 <h1>Demo</h1>
 <a href="/another-page">Another Page</a>
+<button type="button" on:click={episode_progress.save_all}>save</button>
 
 <h5>Load Audio</h5>
 <button