From 3e7ab9912157e97da1e6cc6760eb1233d3701f3e Mon Sep 17 00:00:00 2001
From: Ollie Taylor <13766232+OllieJT@users.noreply.github.com>
Date: Thu, 23 Feb 2023 12:09:08 +0000
Subject: [PATCH] Add navigating example to demo

---
 src/routes/+layout.svelte            |  7 +++++++
 src/routes/+page.svelte              | 23 ++++++++++++++---------
 src/routes/another-page/+page.svelte | 17 +++++++++++++++++
 3 files changed, 38 insertions(+), 9 deletions(-)
 create mode 100644 src/routes/+layout.svelte
 create mode 100644 src/routes/another-page/+page.svelte

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..83ffe02
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AudioManager } from '$lib/components/audio';
+</script>
+
+<AudioManager />
+
+<slot />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ede4569..12786bf 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,23 +1,19 @@
 <script lang="ts">
-	import { audio, AudioManager } from '$lib/components/audio';
+	import { audio } from '$lib/components/audio';
 
 	const sources = {
 		syntax: '/example-syntax.mp3',
 		knomii: '/example-knomii.mp3',
 	} as const;
+
+	let current_time = 0;
+	$: current_time = $audio.current_time;
 </script>
 
 <pre>{JSON.stringify($audio, null, 3)}</pre>
 
 <h1>Demo</h1>
-
-<AudioManager on:progress={(e) => console.log(e.detail)} />
-<!-- <progress
-	style="width: 960px; max-width:100%"
-	data-paused={$_paused ? 'true' : 'false'}
-	max={$_duration}
-	value={$_currentTime}
-/> -->
+<a href="/another-page">Another Page</a>
 
 <h5>Load Audio</h5>
 <button type="button" on:click={() => audio.load(sources['syntax'])}>Syntax</button>
@@ -40,6 +36,15 @@
 
 <h6>Seeking</h6>
 
+<input
+	type="range"
+	min={0}
+	max={$audio.duration}
+	style="width:100%"
+	bind:value={current_time}
+	on:change={(e) => audio.seek(parseInt(e.currentTarget.value))}
+/>
+
 <button type="button" on:click={() => audio.seek(30)}>Go to 30s from start </button>
 <button type="button" on:click={() => audio.seek(30, 'from-end')}>Go to 30s from end</button>
 <button type="button" on:click={() => audio.skip(10, 'forward')}>Skip 10s</button>
diff --git a/src/routes/another-page/+page.svelte b/src/routes/another-page/+page.svelte
new file mode 100644
index 0000000..f0d9805
--- /dev/null
+++ b/src/routes/another-page/+page.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { audio } from '$lib/components/audio';
+
+	const sources = {
+		syntax: '/example-syntax.mp3',
+		knomii: '/example-knomii.mp3',
+	} as const;
+
+	let current_time = 0;
+	$: current_time = $audio.current_time;
+</script>
+
+<h1>Demo</h1>
+
+<a href="/">Demo</a>
+
+<pre>{JSON.stringify($audio, null, 3)}</pre>