From 21d140deb3ff818436d0b846e1fb658a2815648f Mon Sep 17 00:00:00 2001
From: Ollie Taylor <13766232+OllieJT@users.noreply.github.com>
Date: Wed, 22 Feb 2023 16:40:02 +0000
Subject: [PATCH] saving progress before I try stupid stuff

---
 package.json                                  |   5 +-
 src/lib/components/audio.svelte               |  68 -----------
 .../audio-progress.svelte}                    |   0
 src/lib/components/audio/audio.svelte         |  80 ++++++++++++
 .../components/{audio.ts => audio/helper.ts}  |   2 +-
 src/lib/components/audio/state.ts             | 115 ++++++++++++++++++
 src/routes/+page.svelte                       |  86 ++++++-------
 yarn.lock                                     |   5 +
 8 files changed, 244 insertions(+), 117 deletions(-)
 delete mode 100644 src/lib/components/audio.svelte
 rename src/lib/components/{audio-a11y-progress.svelte => audio/audio-progress.svelte} (100%)
 create mode 100644 src/lib/components/audio/audio.svelte
 rename src/lib/components/{audio.ts => audio/helper.ts} (86%)
 create mode 100644 src/lib/components/audio/state.ts

diff --git a/package.json b/package.json
index 6017e08..6e6d2eb 100644
--- a/package.json
+++ b/package.json
@@ -47,5 +47,8 @@
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"just-clamp": "^4.2.0"
+	}
 }
diff --git a/src/lib/components/audio.svelte b/src/lib/components/audio.svelte
deleted file mode 100644
index 504da8c..0000000
--- a/src/lib/components/audio.svelte
+++ /dev/null
@@ -1,68 +0,0 @@
-<script lang="ts">
-	import AudioA11yProgress from '$lib/components/audio-a11y-progress.svelte';
-	import { createEventDispatcher } from 'svelte';
-	import { usePlayer, type PlayerElement } from './audio';
-
-	// TODO: Abstract to a store so we can add actions like reqind 20s
-
-	export let src: string;
-	export let autoplay: boolean;
-
-	export let currentTime = 0;
-	export let muted = false;
-	export let paused = true;
-	export let playbackRate = 1;
-	export let volume = 0;
-
-	let audioElement: PlayerElement;
-
-	$: usePlayer(audioElement, 'playbackRate', playbackRate);
-
-	const dispatch = createEventDispatcher<{
-		playing: void;
-		finished: void;
-		paused: { currentTime: number };
-		progress: { currentTime: number };
-		seek: { currentTime: number };
-		rateChange: { playbackRate: number };
-	}>();
-
-	let duration = 0;
-</script>
-
-{#key src}
-	<audio
-		bind:this={audioElement}
-		{src}
-		{autoplay}
-		bind:currentTime
-		bind:duration
-		bind:paused
-		bind:muted
-		bind:volume
-		preload="metadata"
-		controls={false}
-		on:timeupdate={() => dispatch('progress', { currentTime })}
-		on:playing={() => dispatch('playing')}
-		on:pause={() => dispatch('paused', { currentTime })}
-		on:ratechange={() => dispatch('rateChange', { playbackRate })}
-		on:ended={() => dispatch('finished')}
-		on:seeked={() => dispatch('seek', { currentTime })}
-		on:durationchange={() => console.log('durationchange')}
-		on:loadeddata={() => console.log('loaded data')}
-		on:loadedmetadata={() => console.log('loadedmetadata')}
-		on:loadstart={() => console.log('load start')}
-		on:seeking={() => console.log('seeking')}
-		on:suspend={() => console.log('suspend')}
-		on:volumechange={() => console.log('volumechange')}
-		on:play={() => console.log('play')}
-		on:canplay={() => console.log('canplay')}
-		on:canplaythrough={() => console.log('canplaythrough')}
-		on:waiting={() => console.log('waiting')}
-		on:stalled={(e) => console.log('stalled', e)}
-		on:emptied={(e) => console.log('emptied', e)}
-		on:load={(e) => console.log('load', e)}
-	/>
-	<AudioA11yProgress {currentTime} {paused} {duration} />
-	<slot {duration} />
-{/key}
diff --git a/src/lib/components/audio-a11y-progress.svelte b/src/lib/components/audio/audio-progress.svelte
similarity index 100%
rename from src/lib/components/audio-a11y-progress.svelte
rename to src/lib/components/audio/audio-progress.svelte
diff --git a/src/lib/components/audio/audio.svelte b/src/lib/components/audio/audio.svelte
new file mode 100644
index 0000000..8dc1f10
--- /dev/null
+++ b/src/lib/components/audio/audio.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { usePlayer, type PlayerElement } from '$lib/components/audio/helper';
+	import {
+		_currentTime,
+		_duration,
+		_muted,
+		_paused,
+		_playbackRate,
+		_seek,
+		_src,
+		_volume,
+	} from '$lib/components/audio/state';
+
+	export let autoplay: boolean;
+	let audioElement: PlayerElement;
+
+	let currentTime = 0;
+	let paused = true;
+	let playbackRate = 1;
+	let muted = false;
+	let volume = 0;
+	let duration = 0;
+
+	$: usePlayer(audioElement, 'playbackRate', playbackRate);
+
+	function handleSeek(value: number) {
+		if (value < 0) return;
+		if (value > duration) return;
+		currentTime = value;
+	}
+
+	$: _currentTime.set(currentTime);
+	$: _duration.set(duration);
+	$: _paused.set(paused);
+
+	$: handleSeek($_seek);
+
+	$: volume = $_volume;
+	$: muted = $_muted;
+	$: playbackRate = $_playbackRate;
+	$: paused = $_paused;
+</script>
+
+{#key $_src}
+	{#if $_src}
+		<audio
+			bind:this={audioElement}
+			src={$_src}
+			{autoplay}
+			bind:currentTime
+			bind:duration
+			bind:paused
+			bind:muted
+			bind:volume
+			preload="metadata"
+			controls={false}
+			on:seeked={() => _seek.set(-1)}
+			on:timeupdate={() => console.log('progress', { currentTime })}
+			on:ratechange={() => console.log('rateChange', { playbackRate })}
+			on:ended={() => console.log('finished')}
+			on:playing={() => console.log('playing')}
+			on:pause={() => console.log('pause')}
+			on:durationchange={() => console.log('durationchange')}
+			on:loadeddata={() => console.log('loaded data')}
+			on:loadedmetadata={() => console.log('loadedmetadata')}
+			on:loadstart={() => console.log('load start')}
+			on:seeking={() => console.log('seeking')}
+			on:suspend={() => console.log('suspend')}
+			on:volumechange={() => console.log('volumechange')}
+			on:play={() => console.log('play')}
+			on:canplay={() => console.log('canplay')}
+			on:canplaythrough={() => console.log('canplaythrough')}
+			on:waiting={() => console.log('waiting')}
+			on:stalled={(e) => console.log('stalled', e)}
+			on:emptied={(e) => console.log('emptied', e)}
+			on:load={(e) => console.log('load', e)}
+		/>
+		<!-- <AudioA11yProgress {currentTime} {paused} {duration} /> -->
+	{/if}\
+{/key}
diff --git a/src/lib/components/audio.ts b/src/lib/components/audio/helper.ts
similarity index 86%
rename from src/lib/components/audio.ts
rename to src/lib/components/audio/helper.ts
index eac8bf9..a37190a 100644
--- a/src/lib/components/audio.ts
+++ b/src/lib/components/audio/helper.ts
@@ -3,7 +3,7 @@ export type PlayerElement = HTMLAudioElement | undefined;
 export function usePlayer<K extends keyof HTMLAudioElement>(
 	el: PlayerElement,
 	key: K,
-	value: HTMLAudioElement[K]
+	value: HTMLAudioElement[K],
 ) {
 	if (!el) return;
 	el[key] = value;
diff --git a/src/lib/components/audio/state.ts b/src/lib/components/audio/state.ts
new file mode 100644
index 0000000..ce1844a
--- /dev/null
+++ b/src/lib/components/audio/state.ts
@@ -0,0 +1,115 @@
+import clamp from 'just-clamp';
+import { derived, writable } from 'svelte/store';
+
+export const _src = writable<string | undefined>(undefined);
+export const _duration = writable<number>(0);
+
+export const _currentTime = writable<number>(0);
+export const _muted = writable<boolean>(false);
+export const _paused = writable<boolean>(true);
+export const _playbackRate = writable<number>(1);
+export const _seek = writable<number>(0);
+export const _volume = writable<number>(1);
+
+const state = derived(
+	[_src, _currentTime, _duration, _muted, _paused, _playbackRate, _volume, _seek],
+	([$src, $currentTime, $duration, $muted, $paused, $playbackRate, $volume, $seek]) => {
+		const currentTime = $currentTime > $duration ? $duration : $currentTime;
+
+		return {
+			src: $src,
+			duration: $duration,
+
+			currentTime,
+			muted: $muted,
+			paused: $paused,
+			playbackRate: $playbackRate,
+			seek: $seek,
+			volume: $volume,
+		};
+	},
+);
+
+type AudioState = Parameters<Parameters<(typeof state)['subscribe']>[0]>[0];
+type PlayerState = Omit<AudioState, 'src' | 'duration'>;
+const default_player_state: PlayerState = {
+	currentTime: 0,
+	muted: false,
+	paused: true,
+	playbackRate: 1,
+	seek: 0,
+	volume: 1,
+};
+
+export function resetAudio() {
+	_currentTime.set(0);
+	_duration.set(0);
+	_muted.set(false);
+	_paused.set(true);
+	_playbackRate.set(1);
+	_volume.set(1);
+}
+
+function set_player_state(opts?: Partial<PlayerState>) {
+	_currentTime.set(opts?.currentTime ?? default_player_state.currentTime);
+	_muted.set(opts?.muted ?? default_player_state.muted);
+	_paused.set(opts?.paused ?? default_player_state.paused);
+	_playbackRate.set(opts?.playbackRate ?? default_player_state.playbackRate);
+	_volume.set(opts?.volume ?? default_player_state.volume);
+	_seek.set(opts?.seek ?? default_player_state.seek);
+}
+
+function unload() {
+	set_player_state();
+	_duration.set(0);
+	_src.set(undefined);
+}
+
+function load(src: string, opts?: Partial<PlayerState>) {
+	set_player_state(opts);
+	_src.set(src);
+}
+
+function play() {
+	// Incase of a missmatch between the html and js, we first pause and then play
+	_paused.set(true);
+	_paused.set(false);
+}
+function pause() {
+	// Incase of a missmatch between the html and js, we first play and then pause
+	_paused.set(false);
+	_paused.set(true);
+}
+
+export const audio = {
+	subscribe: state.subscribe,
+	currentTime: { subscribe: _currentTime.subscribe },
+	duration: { subscribe: _duration.subscribe },
+	muted: { subscribe: _muted.subscribe },
+	paused: { subscribe: _paused.subscribe },
+	playbackRate: { subscribe: _playbackRate.subscribe },
+	volume: { subscribe: _volume.subscribe },
+
+	load,
+	unload,
+
+	seek: (value: number) => {
+		console.log('seek', value);
+		// let duration = 0
+		// _duration.subscribe(d => duration = d)
+		return _duration.subscribe((dur) => {
+			_seek.set(clamp(0, dur, value));
+		});
+	},
+
+	toggle_mute: () => _muted.update((previous) => !previous),
+	unmute: () => _muted.set(false),
+	mute: () => _muted.set(true),
+
+	toggle_pause: () => _paused.update((previous) => !previous),
+	play,
+	pause: () => _paused.set(true),
+
+	setVolume: (value: number) => _volume.set(clamp(0, 1, value)),
+	setPlaybackRate: (value: number) => _playbackRate.set(clamp(0, 10, value)),
+};
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9b946d7..e9483dd 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,67 +1,59 @@
 <script lang="ts">
-	import Audio from '$lib/components/audio.svelte';
+	import Audio from '$lib/components/audio/audio.svelte';
+	import { audio, _currentTime, _duration, _paused } from '$lib/components/audio/state';
 
 	const sources = {
 		syntax: '/example-syntax.mp3',
-		knomii: '/example-knomii.mp3'
+		knomii: '/example-knomii.mp3',
 	} as const;
-
-	let playbackRate = 1;
-	let volume = 0.5;
-	let paused = true;
-	let currentTime = 0;
-	let src = '';
 </script>
 
+<pre>
+	{JSON.stringify($audio, null, 3)}
+</pre>
+
 <h1>Demo</h1>
 
-<h5>Native audio controls</h5>
-<Audio
-	on:progress={(e) => console.log(e.detail)}
-	{src}
-	autoplay={false}
-	{volume}
-	{playbackRate}
-	{paused}
-	bind:currentTime
-	let:duration
+<Audio on:progress={(e) => console.log(e.detail)} autoplay={false} />
+<progress
+	style="width: 960px; max-width:100%"
+	data-paused={$_paused ? 'true' : 'false'}
+	max={$_duration}
+	value={$_currentTime}
+/>
+
+<h5>Load Audio</h5>
+<button type="button" on:click={() => audio.load(sources['syntax'], { paused: false })}
+	>Syntax</button
 >
-	<progress
-		style="width: 800px; max-width:100%"
-		data-paused={paused ? 'true' : 'false'}
-		max={duration}
-		value={currentTime}
-	/>
+<button type="button" on:click={() => audio.load(sources['knomii'], { paused: false })}
+	>Knomii</button
+>
+<button type="button" on:click={() => audio.unload()}>None</button>
 
-	<h5>Load Audio</h5>
-	<button type="button" on:click={() => (src = sources['syntax'])}>Syntax</button>
-	<button type="button" on:click={() => (src = sources['knomii'])}>Knomii</button>
-	<button type="button" on:click={() => (src = '')}>None</button>
+<h5>Custom audio controls</h5>
 
-	<h5>Custom audio controls</h5>
+<h6>Audio Actions</h6>
 
-	<h6>Audio Actions</h6>
+<button type="button" on:click={audio.play}>Play</button>
+<button type="button" on:click={audio.pause}>Pause</button>
+<button type="button" on:click={audio.toggle_pause}>Toggle</button>
 
-	<button type="button" on:click={() => (paused = false)}>Play</button>
-	<button type="button" on:click={() => (paused = true)}>Pause</button>
-	<button type="button" on:click={() => (paused = !paused)}>Toggle</button>
+<h6>Seeking</h6>
 
-	<h6>Seeking</h6>
-
-	<button type="button" on:click={() => (currentTime = currentTime + 5)}>Skip 5s</button>
+<button type="button" on:click={() => audio.seek(30)}>Go to 30s</button>
+<!-- <button type="button" on:click={() => (currentTime = currentTime + 5)}>Skip 5s</button>
 	<button type="button" on:click={() => (currentTime = currentTime - 5)}>Rewind 5s</button>
-	<button type="button" on:click={() => (currentTime = 30)}>Go to 30s</button>
-	<button type="button" on:click={() => (currentTime = duration - 30)}>Go to 30s before end</button>
+	<button type="button" on:click={() => (currentTime = duration - 30)}>Go to 30s before end</button> -->
 
-	<h6>Playback Rate</h6>
+<h6>Playback Rate</h6>
 
-	{#each [0.5, 1, 2, 3] as rate}
-		<button type="button" on:click={() => (playbackRate = rate)}>{rate}x</button>
-	{/each}
+{#each [0.5, 1, 2, 3] as rate}
+	<button type="button" on:click={() => audio.setPlaybackRate(rate)}>{rate}x</button>
+{/each}
 
-	<h6>Volume</h6>
+<h6>Volume</h6>
 
-	{#each [0, 0.25, 0.5, 0.75, 1] as v}
-		<button type="button" on:click={() => (volume = v)}>{v * 100}%</button>
-	{/each}
-</Audio>
+{#each [0, 0.25, 0.5, 0.75, 1] as v}
+	<button type="button" on:click={() => audio.setVolume(v)}>{v * 100}%</button>
+{/each}
diff --git a/yarn.lock b/yarn.lock
index 0cd13c5..8686b66 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1009,6 +1009,11 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
 
+just-clamp@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/just-clamp/-/just-clamp-4.2.0.tgz#4dafc300d2f44685082b686f13deaa84d1c53b21"
+  integrity sha512-ssHiAxuN7R+VP7jS1XyUP7ju5YC4bTQwQdzYtuZkASTrKe9KsI/X0t+5BJeD6Un6z/dNMDFVNQpQEgUphpXa0w==
+
 kleur@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"