Adds dispatch events

src/lib/components/audio.svelte

@@ -6,17 +6,25 @@
 
 	export let src: string;
 	export let autoplay: boolean;
-	export let playbackRate: number = 1;
+
 	export let currentTime: number = 0;
-	export let paused: boolean = true;
-	export let volume: number = 0;
 	export let muted: boolean = false;
+	export let paused: boolean = true;
+	export let playbackRate: number = 1;
+	export let volume: number = 0;
 
 	let audioElement: PlayerElement;
 
 	$: usePlayer(audioElement, 'playbackRate', playbackRate);
 
-	const dispatch = createEventDispatcher<{ play: void; pause: void }>();
+	const dispatch = createEventDispatcher<{
+		playing: void;
+		finished: void;
+		paused: { currentTime: number };
+		progress: { currentTime: number };
+		seek: { currentTime: number };
+		rateChange: { playbackRate: number };
+	}>();
 
 	let duration: number = 0;
 </script>
@@ -32,23 +40,28 @@
 		bind:muted
 		bind:volume
 		preload="metadata"
-		controls={true}
-		on:canplay={(e) => console.log('canplay')}
-		on:canplaythrough={(e) => console.log('canplaythrough')}
+		controls={false}
+		on:timeupdate={(e) => {
+			// @ts-expect-error
+			const timeNow = e.target?.currentTime;
+			if (typeof timeNow != 'number') return;
+			dispatch('progress', { currentTime: timeNow });
+		}}
+		on:playing={(e) => dispatch('playing')}
+		on:pause={(e) => dispatch('paused', { currentTime })}
+		on:ratechange={(e) => dispatch('rateChange', { playbackRate })}
+		on:ended={(e) => dispatch('finished')}
+		on:seeked={(e) => dispatch('seek', { currentTime })}
 		on:durationchange={(e) => console.log('durationchange')}
-		on:ended={(e) => console.log('ended')}
 		on:loadeddata={(e) => console.log('loaded data')}
 		on:loadedmetadata={(e) => console.log('loadedmetadata')}
 		on:loadstart={(e) => console.log('load start')}
-		on:pause={(e) => console.log('pause')}
-		on:play={(e) => console.log('play')}
-		on:playing={(e) => console.log('playing')}
-		on:ratechange={(e) => console.log('ratechange')}
-		on:seeked={(e) => console.log('seeked')}
 		on:seeking={(e) => console.log('seeking')}
 		on:suspend={(e) => console.log('suspend')}
-		on:timeupdate={(e) => console.log('timeupdate')}
 		on:volumechange={(e) => console.log('volumechange')}
+		on:play={(e) => console.log('play')}
+		on:canplay={(e) => console.log('canplay')}
+		on:canplaythrough={(e) => console.log('canplaythrough')}
 		on:waiting={(e) => console.log('waiting')}
 		on:stalled={(e) => console.log('stalled', e)}
 		on:emptied={(e) => console.log('emptied', e)}