Podcast player components (#37)

src/routes/+page.svelte

@@ -1,5 +1,12 @@
 <script lang="ts">
-	import { episode_audio, episode_progress, user_preferences, user_progress } from '$lib';
+	import {
+		episode_audio,
+		episode_progress,
+		PlayerStack,
+		PlayerWidget,
+		user_preferences,
+		user_progress,
+	} from 'svelte-podcast';
 
 	const sources = {
 		syntax: {
@@ -16,6 +23,8 @@
 
 	let current_time = 0;
 	$: current_time = $episode_progress.current_time;
+
+	$: console.log('details :: ', $episode_audio?.details);
 </script>
 
 <pre>{JSON.stringify(
@@ -25,7 +34,7 @@
 			$user_preferences,
 		},
 		null,
-		3,
+		2,
 	)}</pre>
 
 <h1>Demo</h1>
@@ -34,7 +43,7 @@
 <button type="button" on:click={user_preferences.clear}>Clear all preferences</button>
 
 <h5>Load Audio</h5>
-<button type="button" on:click={() => episode_audio.load(sources['syntax'].src, sources['knomii'])}
+<button type="button" on:click={() => episode_audio.load(sources['syntax'].src, sources['syntax'])}
 	>Syntax</button
 >
 <button type="button" on:click={() => episode_audio.load(sources['knomii'].src, sources['knomii'])}
@@ -58,15 +67,6 @@
 
 <h6>Seeking</h6>
 
-<input
-	type="range"
-	min={0}
-	max={$episode_audio?.duration}
-	style="width:100%"
-	bind:value={current_time}
-	on:change={(e) => episode_audio.seek(parseInt(e.currentTarget.value))}
-/>
-
 <button type="button" on:click={() => episode_audio.seek(30)}>Go to 30s from start </button>
 <button type="button" on:click={() => episode_audio.seek(30, 'from-end')}>Go to 30s from end</button
 >
@@ -80,3 +80,51 @@
 		{rate}x
 	</button>
 {/each}
+
+<hr />
+
+<!-- <PodcastPlayer
+	artwork={$episode_audio?.details?.artwork}
+	title={$episode_audio?.details?.title || 'Podcast Name'}
+/> -->
+
+<br />
+<PlayerWidget />
+<br />
+<br />
+<PlayerWidget include={{ playback_rate: true }} />
+<br />
+<br />
+<PlayerWidget include={{ skip_back: 10, skip_forward: 30 }} />
+<br />
+<br />
+<PlayerWidget
+	style="width: 100%;"
+	include={{
+		current_time: true,
+		playback_rate: true,
+		duration: true,
+		skip_back: 10,
+		skip_forward: 30,
+	}}
+/>
+
+<br />
+<br />
+<PlayerStack style="width:400px;" />
+<br />
+<br />
+<PlayerStack include={{ playback_rate: true }} />
+<br />
+<br />
+<PlayerStack include={{ skip_back: 10, skip_forward: 30, timestamps: true }} />
+<br />
+<br />
+<PlayerStack
+	include={{
+		playback_rate: true,
+		timestamps: true,
+		skip_back: 10,
+		skip_forward: 30,
+	}}
+/>