From 07212fc671a3004d7e16aaaa885b7a2ffc831ea3 Mon Sep 17 00:00:00 2001
From: Ollie Taylor <13766232+OllieJT@users.noreply.github.com>
Date: Wed, 22 Feb 2023 00:29:57 +0000
Subject: [PATCH] passes duration to slot props

---
 src/lib/components/audio.svelte |  1 +
 src/routes/+page.svelte         | 40 +++++++++++++++++----------------
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/audio.svelte b/src/lib/components/audio.svelte
index d967913..084e87a 100644
--- a/src/lib/components/audio.svelte
+++ b/src/lib/components/audio.svelte
@@ -67,4 +67,5 @@
 		on:emptied={(e) => console.log('emptied', e)}
 		on:load={(e) => console.log('load', e)}
 	/>
+	<slot {duration} />
 {/key}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a6dcb25..61ed261 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -19,30 +19,32 @@
 	{playbackRate}
 	{paused}
 	bind:currentTime
-/>
+	let:duration
+>
+	<h5>Custom audio controls</h5>
 
-<h5>Custom audio controls</h5>
+	<h6>Audio Actions</h6>
 
-<h6>Audio Actions</h6>
+	<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>
 
-<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={() => (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 = 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>
+	<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={() => (playbackRate = 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}
+	{#each [0, 0.25, 0.5, 0.75, 1] as v}
+		<button type="button" on:click={() => (volume = v)}>{v * 100}%</button>
+	{/each}
+</Audio>