passes duration to slot props

This commit is contained in:
Ollie Taylor
2023-02-22 00:29:57 +00:00
parent 8afc23cbac
commit 07212fc671
2 changed files with 22 additions and 19 deletions
+1
View File
@@ -67,4 +67,5 @@
on:emptied={(e) => console.log('emptied', e)}
on:load={(e) => console.log('load', e)}
/>
<slot {duration} />
{/key}
+21 -19
View File
@@ -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>