Update Docs Site (#44)

src/components/example-player/index.js

@@ -1,3 +1,2 @@
-export { default as HeadlessTimeline } from './headless-timeline.svelte';
 export { default as PlayerStack } from './player-stack.svelte';
 export { default as PlayerWidget } from './player-widget.svelte';

src/components/example-player/player-stack.svelte

@@ -1,29 +1,36 @@
-<script lang="ts">
-	import { Pause, Play, SpeakerWave } from '@inqling/svelte-icons/heroicon-20-solid';
-	import { clsx } from 'clsx';
-	import { AudioPlayer, episode_progress, user_preferences } from 'svelte-podcast';
-	import type { EpisodeDetails } from 'svelte-podcast/audio/stores';
+<script>
+	import {
+		Pause,
+		Play,
+		SpeakerWave,
+	} from '@inqling/svelte-icons/heroicon-20-solid';
+	import {
+		AudioPlayer,
+		episode_progress,
+		user_preferences,
+	} from 'svelte-podcast';
 	import { A11yIcon, Skip, Spinner, Timestamp } from './utility';
 
-	export let src: string | undefined;
-	export let metadata: EpisodeDetails = {};
+	/** @type {string | undefined} */
+	export let src;
 
-	export let hide_timestamps: boolean = false;
-	export let hide_playback_rate: boolean = false;
+	/** @type {import('svelte-podcast/audio/stores').EpisodeDetails} */
+	export let metadata = {};
 
-	export let skip_back: number = 30;
-	export let skip_forward: number = 10;
+	export let hide_timestamps = false;
+	export let hide_playback_rate = false;
 
-	export let playback_rate_values: number[] = [1.0, 1.2, 1.4, 1.6, 1.8, 2.0, 2.2, 2.4];
+	export let skip_back = 30;
+	export let skip_forward = 10;
 
-	const { class: ClassName, ...rest } = $$restProps;
+	export let playback_rate_values = [1.0, 1.2, 1.4, 1.6, 1.8, 2.0, 2.2, 2.4];
 </script>
 
 <AudioPlayer {src} {metadata} let:Player let:action let:episode>
 	<div
-		class={clsx('svpod--container svpod--reset', ClassName)}
+		{...$$restProps}
+		class="svpod--container svpod--reset"
 		data-loaded={episode.is_loaded ? 'true' : 'false'}
-		{...rest}
 	>
 		<div class="svpod--container--row svpod--row--controls">
 			<button
@@ -129,7 +136,9 @@
 		--svpod--timeline-track--shape--radius: var(--inner-radius);
 		--svpod--timeline-track--shape--border: 2px;
 
-		--svpod--timeline-thumb--shape--height: var(--svpod--timeline-track--shape--height);
+		--svpod--timeline-thumb--shape--height: var(
+			--svpod--timeline-track--shape--height
+		);
 		--svpod--timeline-thumb--shape--width: 3px;
 		--svpod--timeline-thumb--shape--radius: 1px;
 		--svpod--timeline-thumb--shape--border: 0px;
@@ -299,7 +308,11 @@
 		height: 100%;
 		content: '';
 		opacity: 0.5;
-		background: linear-gradient(45deg, var(--svpod--accent--base), transparent);
+		background: linear-gradient(
+			45deg,
+			var(--svpod--accent--base),
+			transparent
+		);
 	}
 
 	span.svpod--aspect--square {
@@ -311,10 +324,15 @@
 
 	.svpod--timeline {
 		:global(input[type='range']) {
-			--track--shape--height: calc(var(--svpod--timeline-track--shape--height));
-			--thumb-border-offset: calc(var(--svpod--timeline-thumb--shape--border) * 2);
+			--track--shape--height: calc(
+				var(--svpod--timeline-track--shape--height)
+			);
+			--thumb-border-offset: calc(
+				var(--svpod--timeline-thumb--shape--border) * 2
+			);
 			--thumb--shape--height: calc(
-				var(--svpod--timeline-thumb--shape--height) - var(--thumb-border-offset)
+				var(--svpod--timeline-thumb--shape--height) -
+					var(--thumb-border-offset)
 			);
 
 			--svpod--timeline-track--bg: var(--svpod--surface--base);

src/components/example-player/player-widget.svelte

@@ -1,32 +1,31 @@
-<script lang="ts">
+<script>
 	import { Pause, Play } from '@inqling/svelte-icons/heroicon-20-solid';
-	import { clsx } from 'clsx';
 	import { AudioPlayer, user_preferences } from 'svelte-podcast';
-	import type { EpisodeDetails } from 'svelte-podcast/audio/stores';
 	import { A11yIcon, Skip, Spinner, Timestamp } from './utility';
 
-	export let src: string | undefined;
-	export let metadata: EpisodeDetails = {};
+	/** @type {string | undefined} */
+	export let src;
 
-	export let hide_duration: boolean = false;
-	export let hide_current_time: boolean = false;
-	export let hide_playback_rate: boolean = false;
-	export let hide_skip_back: boolean = false;
-	export let hide_skip_forward: boolean = false;
+	/** @type {import('svelte-podcast/audio/stores').EpisodeDetails} */
+	export let metadata = {};
 
-	export let skip_back: number = 30;
-	export let skip_forward: number = 10;
+	export let hide_duration = false;
+	export let hide_current_time = false;
+	export let hide_playback_rate = false;
+	export let hide_skip_back = false;
+	export let hide_skip_forward = false;
 
-	export let playback_rate_values: number[] = [1.0, 1.2, 1.4, 1.6, 1.8, 2.0, 2.2, 2.4];
+	export let skip_back = 30;
+	export let skip_forward = 10;
 
-	const { class: ClassName, ...rest } = $$restProps;
+	export let playback_rate_values = [1.0, 1.2, 1.4, 1.6, 1.8, 2.0, 2.2, 2.4];
 </script>
 
 <AudioPlayer {src} {metadata} let:Player let:action let:episode>
 	<div
-		class={clsx('svpod--container svpod--reset', ClassName)}
+		{...$$restProps}
+		class="svpod--container svpod--reset"
 		data-loaded={episode.is_loaded ? 'true' : 'false'}
-		{...rest}
 	>
 		{#if !hide_skip_back}
 			<button
@@ -68,7 +67,10 @@
 
 		{#if !hide_current_time}
 			<div class="svpod--timestamp">
-				<Timestamp value={episode.current_time} force_hours={episode.timestamp_hours} />
+				<Timestamp
+					value={episode.current_time}
+					force_hours={episode.timestamp_hours}
+				/>
 			</div>
 		{/if}
 
@@ -118,7 +120,9 @@
 		--svpod--timeline-track--shape--radius: var(--inner-radius);
 		--svpod--timeline-track--shape--border: 2px;
 
-		--svpod--timeline-thumb--shape--height: var(--svpod--timeline-track--shape--height);
+		--svpod--timeline-thumb--shape--height: var(
+			--svpod--timeline-track--shape--height
+		);
 		--svpod--timeline-thumb--shape--width: 3px;
 		--svpod--timeline-thumb--shape--radius: 1px;
 		--svpod--timeline-thumb--shape--border: 0px;
@@ -226,10 +230,15 @@
 
 	.svpod--timeline {
 		:global(input[type='range']) {
-			--track--shape--height: calc(var(--svpod--timeline-track--shape--height));
-			--thumb-border-offset: calc(var(--svpod--timeline-thumb--shape--border) * 2);
+			--track--shape--height: calc(
+				var(--svpod--timeline-track--shape--height)
+			);
+			--thumb-border-offset: calc(
+				var(--svpod--timeline-thumb--shape--border) * 2
+			);
 			--thumb--shape--height: calc(
-				var(--svpod--timeline-thumb--shape--height) - var(--thumb-border-offset)
+				var(--svpod--timeline-thumb--shape--height) -
+					var(--thumb-border-offset)
 			);
 
 			--svpod--timeline-track--bg: var(--svpod--surface--base);

src/components/example-player/utility/a11y-icon.svelte

@@ -1,8 +1,9 @@
-<script lang="ts">
-	import type { SvelteIcon } from '@inqling/svelte-icons';
+<script>
+	/** @type {import('@inqling/svelte-icons').SvelteIcon} */
+	export let icon;
 
-	export let icon: SvelteIcon;
-	export let label: string;
+	/** @type {string} */
+	export let label;
 </script>
 
 <svelte:component this={icon} />

src/components/example-player/utility/skip.svelte

@@ -1,7 +1,12 @@
-<script lang="ts">
+<script>
+	/** @type {number} [size = 24] */
 	export let size = 24;
-	export let value: number;
-	export let type: 'forward' | 'backward';
+
+	/** @type {number} */
+	export let value;
+
+	/** @type {'forward' | 'backward'} */
+	export let type;
 </script>
 
 <div class="svpod--skip-container" style="font-size:{size}px">

src/components/example-player/utility/spinner.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">
+<script>
+	/** @type {number} */
 	export let size = 24;
 </script>
 

src/components/example-player/utility/timestamp.svelte

@@ -1,7 +1,10 @@
-<script lang="ts">
+<script>
 	import { seconds_to_timestamp } from 'svelte-podcast';
 
-	export let value: number;
+	/** @type {number} */
+	export let value;
+
+	/** @type {boolean} */
 	export let force_hours = false;
 
 	$: timestamp = seconds_to_timestamp(value, force_hours);