30 lines
696 B
Svelte
30 lines
696 B
Svelte
|
<svelte:options runes={true} />
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import {Button} from "$lib/components/ui/button";
|
||
|
|
import {onMount} from "svelte";
|
||
|
|
let { audio, pause, play } = $props();
|
||
|
|
let mounted = $state(false);
|
||
|
|
|
||
|
|
$inspect(audio);
|
||
|
|
|
||
|
|
onMount(() => {
|
||
|
|
mounted = true;
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="flex flex-row gap-2">
|
||
|
|
{#if mounted}
|
||
|
|
<p>Paused: {audio.paused}</p>
|
||
|
|
<p>Volume: {audio.volume}</p>
|
||
|
|
<p>Duration: {audio.duration}</p>
|
||
|
|
{#if audio.paused}
|
||
|
|
<Button onclick={play}>Play</Button>
|
||
|
|
{:else}
|
||
|
|
<Button onclick={pause}>Pause</Button>
|
||
|
|
{/if}
|
||
|
|
{:else}
|
||
|
|
<p>Nothing going on here</p>
|
||
|
|
{/if}
|
||
|
|
</div>
|