Update Docs Site (#44)

2023-07-11 22:13:18 +01:00
parent 3cb5e8eb46
commit 29ef65733e
80 changed files with 1624 additions and 2381 deletions
@@ -0,0 +1,126 @@
+<script>
+	import PlayerStack from '$src/components/example-player/player-stack.svelte';
+	import PlayerWidget from '$src/components/example-player/player-widget.svelte';
+	import { episodes } from '$src/content/episodes';
+	import { DocsPage } from '$src/layout/page';
+	import PreviewComponent from '$src/layout/preview-component.svelte';
+	import { episode_audio } from 'svelte-podcast';
+
+	$: console.log('details :: ', $episode_audio?.details);
+
+	$: player_widget = {
+		current_time: true,
+		playback_rate: true,
+		duration: true,
+		skip_back: 10,
+		skip_forward: 30,
+	};
+
+	$: player_stack = {
+		playback_rate: true,
+		timestamps: true,
+		skip_back: 10,
+		skip_forward: 30,
+	};
+
+	/** @type { string | undefined} */
+	let audio_src = episodes.knomii.src;
+</script>
+
+<DocsPage
+	title="Examples"
+	let:Section
+	let:SectionArticle
+	let:TableModule
+	let:TableSchema
+>
+	<Section title="PlayerWidget">
+		<PreviewComponent name="PlayerWidget">
+			<svelte:fragment slot="options">
+				<div>
+					<label for="pw_current_time">current_time</label>
+					<input
+						id="pw_current_time"
+						type="checkbox"
+						bind:checked={player_widget.current_time}
+					/>
+				</div>
+				<div>
+					<label for="pw_playback_rate">playback_rate</label>
+					<input
+						id="pw_playback_rate"
+						type="checkbox"
+						bind:checked={player_widget.playback_rate}
+					/>
+				</div>
+				<div>
+					<label for="pw_duration">duration</label>
+					<input
+						id="pw_duration"
+						type="checkbox"
+						bind:checked={player_widget.duration}
+					/>
+				</div>
+				<div>
+					<label for="pw_skip_back">skip_back</label>
+					<input
+						id="pw_skip_back"
+						type="number"
+						bind:value={player_widget.skip_back}
+					/>
+				</div>
+				<div>
+					<label for="pw_skip_forward">skip_forward</label>
+					<input
+						id="pw_skip_forward"
+						type="number"
+						bind:value={player_widget.skip_forward}
+					/>
+				</div>
+			</svelte:fragment>
+
+			<PlayerWidget src={audio_src} include={player_widget} />
+		</PreviewComponent>
+	</Section>
+
+	<Section title="PlayerStack">
+		<PreviewComponent name="PlayerStack">
+			<svelte:fragment slot="options">
+				<div>
+					<label for="pw_playback_rate">playback_rate</label>
+					<input
+						id="pw_playback_rate"
+						type="checkbox"
+						bind:checked={player_stack.playback_rate}
+					/>
+				</div>
+				<div>
+					<label for="pw_timestamps">timestamps</label>
+					<input
+						id="pw_timestamps"
+						type="checkbox"
+						bind:checked={player_stack.timestamps}
+					/>
+				</div>
+				<div>
+					<label for="pw_skip_back">skip_back</label>
+					<input
+						id="pw_skip_back"
+						type="number"
+						bind:value={player_stack.skip_back}
+					/>
+				</div>
+				<div>
+					<label for="pw_skip_forward">skip_forward</label>
+					<input
+						id="pw_skip_forward"
+						type="number"
+						bind:value={player_stack.skip_forward}
+					/>
+				</div>
+			</svelte:fragment>
+
+			<PlayerStack src={audio_src} class="max-w-sm" include={player_stack} />
+		</PreviewComponent>
+	</Section>
+</DocsPage>