@atmo-dev/events-ui 0.1.0

package/dist/ThemePicker.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import { themeBackgrounds, type EventTheme } from './theme.js';
+
+	let {
+		theme = $bindable<EventTheme>({ name: 'minimal', accentColor: 'cyan', baseColor: 'mist' })
+	}: {
+		theme: EventTheme;
+	} = $props();
+
+	const bgKeys = Object.keys(themeBackgrounds);
+
+	const accentColors = [
+		{ label: 'red', cls: 'bg-red-500' },
+		{ label: 'orange', cls: 'bg-orange-500' },
+		{ label: 'amber', cls: 'bg-amber-500' },
+		{ label: 'yellow', cls: 'bg-yellow-500' },
+		{ label: 'lime', cls: 'bg-lime-500' },
+		{ label: 'green', cls: 'bg-green-500' },
+		{ label: 'emerald', cls: 'bg-emerald-500' },
+		{ label: 'teal', cls: 'bg-teal-500' },
+		{ label: 'cyan', cls: 'bg-cyan-500' },
+		{ label: 'sky', cls: 'bg-sky-500' },
+		{ label: 'blue', cls: 'bg-blue-500' },
+		{ label: 'indigo', cls: 'bg-indigo-500' },
+		{ label: 'violet', cls: 'bg-violet-500' },
+		{ label: 'purple', cls: 'bg-purple-500' },
+		{ label: 'fuchsia', cls: 'bg-fuchsia-500' },
+		{ label: 'pink', cls: 'bg-pink-500' },
+		{ label: 'rose', cls: 'bg-rose-500' }
+	];
+
+	const baseColors = [
+		{ label: 'gray', cls: 'bg-gray-500' },
+		{ label: 'stone', cls: 'bg-stone-500' },
+		{ label: 'zinc', cls: 'bg-zinc-500' },
+		{ label: 'neutral', cls: 'bg-neutral-500' },
+		{ label: 'slate', cls: 'bg-slate-500' },
+		{ label: 'olive', cls: 'bg-olive-500' },
+		{ label: 'mauve', cls: 'bg-mauve-500' },
+		{ label: 'mist', cls: 'bg-mist-500' },
+		{ label: 'taupe', cls: 'bg-taupe-500' }
+	];
+</script>
+
+<div class="flex flex-col gap-6">
+	<!-- Theme background -->
+	<div>
+		<p class="text-base-500 dark:text-base-400 mb-2 text-xs font-medium">Background style</p>
+		<div class="flex flex-wrap gap-2">
+			{#each bgKeys as key}
+				<button
+					type="button"
+					class="relative flex aspect-video w-24 cursor-pointer items-center justify-center overflow-hidden rounded-xl border-2 transition-colors
+						{theme.name === key
+						? 'border-accent-500'
+						: 'border-base-200 dark:border-base-700 hover:border-accent-400 dark:hover:border-accent-500'}"
+					onclick={() => (theme = { ...theme, name: key })}
+				>
+					<span class="text-base-600 dark:text-base-400 text-xs font-medium">
+						{themeBackgrounds[key]}
+					</span>
+				</button>
+			{/each}
+		</div>
+	</div>
+
+	<!-- Accent color -->
+	<div>
+		<p class="text-base-500 dark:text-base-400 mb-2 text-xs font-medium">Accent color</p>
+		<div class="flex flex-wrap gap-2">
+			{#each accentColors as color}
+				<button
+					type="button"
+					aria-label="Accent color {color.label}"
+					class="size-7 cursor-pointer rounded-full border-2 transition-all {color.cls}
+						{theme.accentColor === color.label
+						? 'border-white scale-110 ring-2 ring-base-400'
+						: 'border-transparent hover:scale-105'}"
+					onclick={() => (theme = { ...theme, accentColor: color.label })}
+				></button>
+			{/each}
+		</div>
+	</div>
+
+	<!-- Base color -->
+	<div>
+		<p class="text-base-500 dark:text-base-400 mb-2 text-xs font-medium">Base color</p>
+		<div class="flex flex-wrap gap-2">
+			{#each baseColors as color}
+				<button
+					type="button"
+					aria-label="Base color {color.label}"
+					class="size-7 cursor-pointer rounded-full border-2 transition-all {color.cls}
+						{theme.baseColor === color.label
+						? 'border-white scale-110 ring-2 ring-base-400'
+						: 'border-transparent hover:scale-105'}"
+					onclick={() => (theme = { ...theme, baseColor: color.label })}
+				></button>
+			{/each}
+		</div>
+	</div>
+</div>

package/dist/ThemePicker.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type EventTheme } from './theme.js';
+type $$ComponentProps = {
+    theme: EventTheme;
+};
+declare const ThemePicker: import("svelte").Component<$$ComponentProps, {}, "theme">;
+type ThemePicker = ReturnType<typeof ThemePicker>;
+export default ThemePicker;

package/dist/ThumbnailPresets.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	// @ts-nocheck
+	import { designs, resolveAccentColor } from './thumbnails/designs';
+	import { tick } from 'svelte';
+
+	let {
+		name = '',
+		dateStr = '',
+		accent = '',
+		seed = 1,
+		selected = $bindable<string | null>(null),
+		onselect
+	}: {
+		name?: string;
+		dateStr?: string;
+		accent?: string;
+		seed?: number;
+		selected?: string | null;
+		onselect?: () => void;
+	} = $props();
+
+	const presetKeys = Object.keys(designs);
+	const previewSize = 200;
+
+	let containerEl: HTMLDivElement | undefined = $state(undefined);
+
+	function renderAll() {
+		if (!containerEl) return;
+		const color = resolveAccentColor(accent);
+		const canvases = containerEl.querySelectorAll<HTMLCanvasElement>('canvas');
+		canvases.forEach((canvas) => {
+			const key = canvas.dataset.key!;
+			const ctx = canvas.getContext('2d');
+			if (!ctx) return;
+			canvas.width = previewSize;
+			canvas.height = previewSize;
+			designs[key](ctx, previewSize, previewSize, name || 'Event', dateStr, seed, color);
+		});
+	}
+
+	$effect(() => {
+		void name;
+		void dateStr;
+		void accent;
+		void seed;
+		void containerEl;
+		tick().then(renderAll);
+	});
+</script>
+
+<div class="flex flex-col gap-3">
+	<p class="text-base-500 dark:text-base-400 text-xs font-medium">Preset thumbnails</p>
+	<div class="grid grid-cols-3 gap-2" bind:this={containerEl}>
+		{#each presetKeys as key}
+			<button
+				type="button"
+				aria-label="Use {key} preset thumbnail"
+				class="aspect-square cursor-pointer overflow-hidden rounded-xl border-2 transition-colors
+					{selected === key
+					? 'border-accent-500'
+					: 'border-base-200 dark:border-base-700 hover:border-accent-400 dark:hover:border-accent-500'}"
+				onclick={() => { selected = key; onselect?.(); }}
+			>
+				<canvas data-key={key} class="h-full w-full"></canvas>
+			</button>
+		{/each}
+	</div>
+</div>

package/dist/ThumbnailPresets.svelte.d.ts

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    name?: string;
+    dateStr?: string;
+    accent?: string;
+    seed?: number;
+    selected?: string | null;
+    onselect?: () => void;
+};
+declare const ThumbnailPresets: import("svelte").Component<$$ComponentProps, {}, "selected">;
+type ThumbnailPresets = ReturnType<typeof ThumbnailPresets>;
+export default ThumbnailPresets;

package/dist/TimePicker.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+	// @ts-nocheck
+	import { Popover } from 'bits-ui';
+	import { TimeField } from 'bits-ui';
+	import { Time } from '@internationalized/date';
+	import { untrack, tick } from 'svelte';
+
+	let {
+		value = $bindable(''),
+		required = false,
+		locale = 'en',
+		referenceTime = ''
+	}: {
+		value: string;
+		required?: boolean;
+		locale?: string;
+		referenceTime?: string;
+	} = $props();
+
+	let isOpen = $state(false);
+	let listEl: HTMLDivElement | undefined = $state(undefined);
+	let internalValue: Time | undefined = $state(undefined);
+
+	function parseTimeStr(str: string): Time | undefined {
+		if (!str) return undefined;
+		const [hourStr, minuteStr] = str.split(':');
+		const hour = parseInt(hourStr, 10);
+		const minute = parseInt(minuteStr, 10);
+		if (isNaN(hour) || isNaN(minute)) return undefined;
+		return new Time(hour, minute);
+	}
+
+	function formatTimeStr(t: Time): string {
+		const h = String(t.hour).padStart(2, '0');
+		const m = String(t.minute).padStart(2, '0');
+		return `${h}:${m}`;
+	}
+
+	$effect(() => {
+		const parsed = parseTimeStr(value);
+		untrack(() => {
+			if (parsed) {
+				if (
+					!internalValue ||
+					parsed.hour !== internalValue.hour ||
+					parsed.minute !== internalValue.minute
+				) {
+					internalValue = parsed;
+				}
+			} else {
+				internalValue = undefined;
+			}
+		});
+	});
+
+	function handleValueChange(newVal: Time | undefined) {
+		if (newVal && newVal instanceof Time) {
+			internalValue = newVal;
+			value = formatTimeStr(newVal);
+		}
+	}
+
+	// Generate 48 half-hour slots
+	const slots = Array.from({ length: 48 }, (_, i) => {
+		const h = Math.floor(i / 2);
+		const m = i % 2 === 0 ? 0 : 30;
+		const key = `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+		const date = new Date(2000, 0, 1, h, m);
+		const label = date.toLocaleTimeString(locale, { hour: 'numeric', minute: '2-digit' });
+		return { key, label };
+	});
+
+	function durationLabel(slotKey: string): string {
+		if (!referenceTime) return '';
+		const [rh, rm] = referenceTime.split(':').map(Number);
+		const [sh, sm] = slotKey.split(':').map(Number);
+		let diff = (sh * 60 + sm) - (rh * 60 + rm);
+		if (diff <= 0) return '';
+		const hours = Math.floor(diff / 60);
+		const mins = diff % 60;
+		if (hours === 0) return `${mins}m`;
+		if (mins === 0) return `${hours}h`;
+		return `${hours}h ${mins}m`;
+	}
+
+	function selectSlot(key: string) {
+		value = key;
+		isOpen = false;
+	}
+
+	// Scroll to selected/closest slot when popover opens
+	$effect(() => {
+		if (isOpen && listEl) {
+			tick().then(() => {
+				if (!listEl) return;
+				const selected = listEl.querySelector('[data-selected]');
+				if (selected) {
+					selected.scrollIntoView({ block: 'center' });
+				} else if (value) {
+					const [hStr, mStr] = value.split(':');
+					const totalMin = parseInt(hStr, 10) * 60 + parseInt(mStr, 10);
+					const closestIdx = Math.min(Math.round(totalMin / 30), 47);
+					const el = listEl.children[closestIdx];
+					if (el) el.scrollIntoView({ block: 'center' });
+				}
+			});
+		}
+	});
+</script>
+
+<div class="relative">
+	<TimeField.Root
+		bind:value={internalValue}
+		onValueChange={handleValueChange}
+		granularity="minute"
+		{locale}
+		{required}
+	>
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="border-base-300 bg-base-100 text-base-900 focus-within:border-accent-500 dark:border-base-700 dark:bg-base-800 dark:text-base-100 dark:focus-within:border-accent-400 flex shrink-0 cursor-pointer items-center whitespace-nowrap rounded-xl border px-2.5 py-1.5 text-sm min-w-[7.5rem] transition-colors"
+			onfocusin={() => (isOpen = true)}
+		>
+			<TimeField.Input>
+				{#snippet children({ segments })}
+					{#each segments as segment, i (segment.part + i)}
+						{#if segment.part === 'literal'}
+							<span class="text-base-400 dark:text-base-500">{segment.value}</span>
+						{:else}
+							<TimeField.Segment
+								part={segment.part}
+								class="hover:bg-base-200 focus:bg-base-200 dark:hover:bg-base-700 dark:focus:bg-base-700 rounded px-0.5 focus:outline-none"
+							>
+								{segment.value}
+							</TimeField.Segment>
+						{/if}
+					{/each}
+				{/snippet}
+			</TimeField.Input>
+
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				class="text-base-400 dark:text-base-500 ml-auto size-4 pl-0.5"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+				/>
+			</svg>
+		</div>
+	</TimeField.Root>
+
+	{#if isOpen}
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="fixed inset-0 z-40"
+			onclick={() => (isOpen = false)}
+			onkeydown={(e) => { if (e.key === 'Escape') isOpen = false; }}
+		></div>
+		<div
+			bind:this={listEl}
+			class="border-base-200 bg-base-50 dark:border-base-700 dark:bg-base-900 absolute left-0 z-50 mt-2 max-h-60 overflow-y-auto rounded-2xl border p-2 shadow-lg"
+		>
+			{#each slots as slot (slot.key)}
+				<button
+					type="button"
+					class="w-full rounded-lg px-4 py-1.5 text-left text-sm whitespace-nowrap transition-colors
+						{value === slot.key
+						? 'bg-accent-100 dark:bg-accent-900 font-medium text-accent-900 dark:text-accent-100'
+						: 'text-base-700 hover:bg-base-200 dark:text-base-300 dark:hover:bg-base-700'}"
+					data-selected={value === slot.key ? '' : undefined}
+					onclick={() => selectSlot(slot.key)}
+				>
+					{slot.label}
+					{#if durationLabel(slot.key)}
+						<span class="ml-2 opacity-50">{durationLabel(slot.key)}</span>
+					{/if}
+				</button>
+			{/each}
+		</div>
+	{/if}
+</div>

package/dist/TimePicker.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    value: string;
+    required?: boolean;
+    locale?: string;
+    referenceTime?: string;
+};
+declare const TimePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type TimePicker = ReturnType<typeof TimePicker>;
+export default TimePicker;

package/dist/TimezonePicker.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	// @ts-nocheck
+	import { tick } from 'svelte';
+
+	let {
+		value = $bindable('')
+	}: {
+		value: string;
+	} = $props();
+
+	let isOpen = $state(false);
+	let search = $state('');
+	let listEl: HTMLDivElement | undefined = $state(undefined);
+	let searchEl: HTMLInputElement | undefined = $state(undefined);
+
+	// Get all IANA timezones
+	const allTimezones = Intl.supportedValuesOf('timeZone');
+
+	function getOffset(tz: string): string {
+		try {
+			const fmt = new Intl.DateTimeFormat('en', {
+				timeZone: tz,
+				timeZoneName: 'shortOffset'
+			});
+			const parts = fmt.formatToParts(new Date());
+			const tzPart = parts.find((p) => p.type === 'timeZoneName');
+			return tzPart?.value ?? '';
+		} catch {
+			return '';
+		}
+	}
+
+	function getCityName(tz: string): string {
+		const parts = tz.split('/');
+		return (parts[parts.length - 1] || tz).replace(/_/g, ' ');
+	}
+
+	let displayOffset = $derived(getOffset(value));
+	let displayCity = $derived(getCityName(value));
+
+	let filtered = $derived.by(() => {
+		if (!search.trim()) return allTimezones;
+		const q = search.toLowerCase();
+		return allTimezones.filter((tz) => {
+			const city = getCityName(tz).toLowerCase();
+			const offset = getOffset(tz).toLowerCase();
+			return tz.toLowerCase().includes(q) || city.includes(q) || offset.includes(q);
+		});
+	});
+
+	function selectTimezone(tz: string) {
+		value = tz;
+		isOpen = false;
+		search = '';
+	}
+
+	$effect(() => {
+		if (isOpen) {
+			tick().then(() => {
+				searchEl?.focus();
+				if (listEl) {
+					const selected = listEl.querySelector('[data-selected]');
+					if (selected) {
+						selected.scrollIntoView({ block: 'center' });
+					}
+				}
+			});
+		}
+	});
+</script>
+
+<div class="relative">
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="border-base-300 bg-base-100 text-base-900 dark:border-base-700 dark:bg-base-800 dark:text-base-100 flex h-full shrink-0 cursor-pointer flex-col items-center justify-center gap-1.5 whitespace-nowrap rounded-xl border px-5 py-2 text-xs transition-colors"
+		onclick={() => (isOpen = !isOpen)}
+	>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke-width="1.5"
+			stroke="currentColor"
+			class="text-base-400 dark:text-base-500 size-4"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5a17.92 17.92 0 0 1-8.716-2.247m0 0A8.966 8.966 0 0 1 3 12c0-1.97.633-3.794 1.708-5.282"
+			/>
+		</svg>
+		<div class="flex flex-col items-center gap-0.5 leading-tight">
+			<span class="text-base-500 dark:text-base-400">{displayOffset}</span>
+			<span>{displayCity}</span>
+		</div>
+	</div>
+
+	{#if isOpen}
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class="fixed inset-0 z-40" onclick={() => { isOpen = false; search = ''; }} onkeydown={(e) => { if (e.key === 'Escape') { isOpen = false; search = ''; } }}></div>
+		<div class="border-base-200 bg-base-50 dark:border-base-700 dark:bg-base-900 absolute right-0 z-50 mt-2 w-64 rounded-2xl border p-2 shadow-lg">
+			<input
+				bind:this={searchEl}
+				bind:value={search}
+				type="text"
+				placeholder="Search timezone..."
+				class="border-base-300 bg-base-100 text-base-900 dark:border-base-700 dark:bg-base-800 dark:text-base-100 mb-2 w-full rounded-lg border px-3 py-1.5 text-sm outline-none focus:border-accent-500 dark:focus:border-accent-400"
+				onkeydown={(e) => { if (e.key === 'Escape') { isOpen = false; search = ''; } }}
+			/>
+			<div bind:this={listEl} class="max-h-60 overflow-y-auto">
+				{#each filtered as tz (tz)}
+					<button
+						type="button"
+						class="flex w-full items-center justify-between rounded-lg px-3 py-1.5 text-left text-sm transition-colors
+							{value === tz
+							? 'bg-accent-100 dark:bg-accent-900 font-medium text-accent-900 dark:text-accent-100'
+							: 'text-base-700 hover:bg-base-200 dark:text-base-300 dark:hover:bg-base-700'}"
+						data-selected={value === tz ? '' : undefined}
+						onclick={() => selectTimezone(tz)}
+					>
+						<span>{getCityName(tz)}</span>
+						<span class="text-base-400 dark:text-base-500 text-xs">{getOffset(tz)}</span>
+					</button>
+				{/each}
+				{#if filtered.length === 0}
+					<p class="text-base-400 dark:text-base-500 px-3 py-2 text-sm">No results</p>
+				{/if}
+			</div>
+		</div>
+	{/if}
+</div>

package/dist/TimezonePicker.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    value: string;
+};
+declare const TimezonePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type TimezonePicker = ReturnType<typeof TimezonePicker>;
+export default TimezonePicker;

package/dist/VodPlayer.svelte

@@ -0,0 +1,137 @@
+<script lang="ts" module>
+	export type VodPlayerApi = {
+		seek: (time: number) => void;
+	};
+</script>
+
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import 'plyr/dist/plyr.css';
+	import type HlsType from 'hls.js';
+	import type PlyrType from 'plyr';
+
+	let {
+		playlistUrl,
+		title,
+		subtitlesUrl,
+		currentTime = $bindable(0),
+		api = $bindable(undefined)
+	}: {
+		playlistUrl: string;
+		title: string;
+		subtitlesUrl?: string;
+		currentTime?: number;
+		api?: VodPlayerApi;
+	} = $props();
+
+	let videoEl: HTMLVideoElement | undefined = $state();
+	let error = $state(false);
+
+	let hls: HlsType | null = null;
+	let plyr: PlyrType | null = null;
+
+	api = {
+		seek(time: number) {
+			if (plyr) {
+				plyr.currentTime = time;
+				plyr.play();
+			}
+		}
+	};
+
+	onMount(() => {
+		init();
+		return () => {
+			hls?.destroy();
+			plyr?.destroy();
+		};
+	});
+
+	async function init() {
+		if (!videoEl) return;
+
+		try {
+			const [{ default: Plyr }, { default: Hls }] = await Promise.all([
+				import('plyr'),
+				import('hls.js')
+			]);
+
+			if (Hls.isSupported()) {
+				hls = new Hls({ autoStartLoad: false });
+				hls.loadSource(playlistUrl);
+				hls.attachMedia(videoEl);
+				hls.on(Hls.Events.ERROR, (_event, data) => {
+					if (data.fatal) {
+						if (data.type === Hls.ErrorTypes.NETWORK_ERROR) {
+							hls?.startLoad();
+						} else if (data.type === Hls.ErrorTypes.MEDIA_ERROR) {
+							hls?.recoverMediaError();
+						} else {
+							error = true;
+						}
+					}
+				});
+			} else if (videoEl.canPlayType('application/vnd.apple.mpegurl')) {
+				videoEl.src = playlistUrl;
+			} else {
+				error = true;
+				return;
+			}
+
+			plyr = new Plyr(videoEl, {
+				controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen'],
+				settings: ['captions', 'speed'],
+				speed: { selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] },
+				captions: { active: !!subtitlesUrl, language: 'en', update: true },
+				ratio: '16:9'
+			});
+
+			plyr.on('play', () => {
+				hls?.startLoad();
+			});
+
+			plyr.on('timeupdate', () => {
+				currentTime = plyr?.currentTime ?? 0;
+			});
+
+			// Add track after Plyr init and force captions on
+			if (subtitlesUrl) {
+				const media = videoEl;
+				// Remove any existing tracks first
+				media.querySelectorAll('track').forEach((t) => t.remove());
+				// Add fresh track
+				const track = document.createElement('track');
+				track.kind = 'captions';
+				track.label = 'English';
+				track.srclang = 'en';
+				track.src = subtitlesUrl;
+				track.default = true;
+				media.appendChild(track);
+				// Wait for track to load, then activate
+				track.addEventListener('load', () => {
+					plyr!.toggleCaptions(true);
+				});
+				// Also try toggling after a short delay as fallback
+				setTimeout(() => plyr?.toggleCaptions(true), 500);
+			}
+		} catch {
+			error = true;
+		}
+	}
+</script>
+
+{#if error}
+	<div class="bg-base-100 dark:bg-base-900 border-base-200 dark:border-base-800 flex aspect-video w-full items-center justify-center rounded-xl border">
+		<p class="text-base-500 dark:text-base-400 text-sm">Failed to load video</p>
+	</div>
+{:else}
+	<div class="border-base-300 dark:border-base-400/40 aspect-video w-full max-w-full overflow-hidden rounded-xl border">
+		<video bind:this={videoEl} class="h-full w-full" aria-label={title} crossorigin="anonymous"></video>
+	</div>
+{/if}
+
+<style>
+	* {
+		--plyr-color-main: var(--color-accent-500);
+	}
+</style>

package/dist/VodPlayer.svelte.d.ts

@@ -0,0 +1,14 @@
+export type VodPlayerApi = {
+    seek: (time: number) => void;
+};
+import 'plyr/dist/plyr.css';
+type $$ComponentProps = {
+    playlistUrl: string;
+    title: string;
+    subtitlesUrl?: string;
+    currentTime?: number;
+    api?: VodPlayerApi;
+};
+declare const VodPlayer: import("svelte").Component<$$ComponentProps, {}, "currentTime" | "api">;
+type VodPlayer = ReturnType<typeof VodPlayer>;
+export default VodPlayer;