@videts/vide 0.8.0 → 0.9.3

package/dist/svelte/VideUI.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+import { getContext } from "svelte";
+import type { Snippet } from "svelte";
+import { type PlayerGetter, VIDE_PLAYER_KEY } from "./context.js";
+import { stateToClass } from "./helpers.js";
+import type { PlayerState } from "./helpers.js";
+
+interface Props {
+	class?: string;
+	children?: Snippet;
+	onmount?: (el: HTMLDivElement) => void;
+}
+
+const { class: className, children, onmount }: Props = $props();
+
+const rootEl: HTMLDivElement | undefined = $state();
+
+$effect(() => {
+	if (rootEl && onmount) onmount(rootEl);
+});
+
+const getPlayer = getContext<PlayerGetter>(VIDE_PLAYER_KEY);
+let stateClass = $state("");
+
+$effect(() => {
+	const p = getPlayer();
+	if (!p) {
+		stateClass = "";
+		return;
+	}
+	stateClass = stateToClass(p.state);
+	const handler = ({ to }: { from: PlayerState; to: PlayerState }) => {
+		stateClass = stateToClass(to);
+	};
+	p.on("statechange", handler);
+	return () => p.off("statechange", handler);
+});
+</script>
+
+<div
+	bind:this={rootEl}
+	class={["vide-ui", stateClass, className].filter(Boolean).join(" ")}
+	role="region"
+	aria-label="Video player"
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>

package/dist/svelte/VideUI.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+interface Props {
+    class?: string;
+    children?: Snippet;
+    onmount?: (el: HTMLDivElement) => void;
+}
+declare const VideUI: import("svelte").Component<Props, {}, "">;
+type VideUI = ReturnType<typeof VideUI>;
+export default VideUI;

package/dist/svelte/Video.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+import { getContext, onMount } from "svelte";
+import type { Snippet } from "svelte";
+import { type RegisterFn, VIDE_REGISTER_KEY } from "./context.js";
+import type { MediaElement } from "./helpers.js";
+
+interface Props {
+	src?: string;
+	class?: string;
+	children?: Snippet;
+	[key: string]: unknown;
+}
+
+const { class: className, children, ...videoAttrs }: Props = $props();
+let videoEl: HTMLVideoElement;
+
+const registerEl = getContext<RegisterFn>(VIDE_REGISTER_KEY);
+
+onMount(() => {
+	if (videoEl && registerEl) {
+		registerEl(videoEl as MediaElement);
+	}
+});
+</script>
+
+<div class={className}>
+	<video bind:this={videoEl} {...videoAttrs}></video>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>

package/dist/svelte/Video.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+interface Props {
+    src?: string;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+}
+declare const Video: import("svelte").Component<Props, {}, "">;
+type Video = ReturnType<typeof Video>;
+export default Video;

package/dist/svelte/VmapPlugin.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+import { getContext } from "svelte";
+import { vmap } from "../vmap/index.js";
+import type { VmapPluginOptions } from "../vmap/types.js";
+import { type PlayerGetter, VIDE_PLAYER_KEY } from "./context.js";
+
+const { url, timeout, vastOptions, adPlugins }: VmapPluginOptions = $props();
+
+const getPlayer = getContext<PlayerGetter>(VIDE_PLAYER_KEY);
+
+$effect(() => {
+	const p = getPlayer();
+	if (!p) return;
+	const plugin = vmap({ url, timeout, vastOptions, adPlugins });
+	const cleanup = plugin.setup(p);
+	return () => {
+		cleanup?.();
+	};
+});
+</script>

package/dist/svelte/VmapPlugin.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { VmapPluginOptions } from "../vmap/types.js";
+declare const VmapPlugin: import("svelte").Component<VmapPluginOptions, {}, "">;
+type VmapPlugin = ReturnType<typeof VmapPlugin>;
+export default VmapPlugin;

package/dist/svelte/components/AdCountdown.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+import { getContext } from "svelte";
+import { type PlayerGetter, VIDE_PLAYER_KEY } from "../context.js";
+import { useAdState } from "../use-ad-state.svelte.js";
+
+interface Props {
+	class?: string;
+	format?: (remaining: number) => string;
+}
+
+const { class: className, format }: Props = $props();
+
+const getPlayer = getContext<PlayerGetter>(VIDE_PLAYER_KEY);
+const adState = useAdState(getPlayer);
+let remaining = $state(0);
+
+$effect(() => {
+	const p = getPlayer();
+	if (!p) return;
+
+	const onTimeUpdate = ({ currentTime }: { currentTime: number }) => {
+		if (!adState.active || !adState.meta) return;
+		const duration =
+			adState.meta.duration ?? (Number.isFinite(p.duration) ? p.duration : 0);
+		remaining = Math.max(0, Math.ceil(duration - currentTime));
+	};
+
+	p.on("timeupdate", onTimeUpdate);
+	return () => p.off("timeupdate", onTimeUpdate);
+});
+</script>
+
+{#if adState.active}
+	<div class={["vide-ad-countdown", className].filter(Boolean).join(" ")}>
+		{format ? format(remaining) : `Ad \u00b7 ${remaining}s`}
+	</div>
+{/if}

package/dist/svelte/components/AdCountdown.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    class?: string;
+    format?: (remaining: number) => string;
+}
+declare const AdCountdown: import("svelte").Component<Props, {}, "">;
+type AdCountdown = ReturnType<typeof AdCountdown>;
+export default AdCountdown;

package/dist/svelte/components/AdLabel.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+import { getContext } from "svelte";
+import type { Snippet } from "svelte";
+import { type PlayerGetter, VIDE_PLAYER_KEY } from "../context.js";
+import { useAdState } from "../use-ad-state.svelte.js";
+
+interface Props {
+	class?: string;
+	children?: Snippet;
+}
+
+const { class: className, children }: Props = $props();
+
+const getPlayer = getContext<PlayerGetter>(VIDE_PLAYER_KEY);
+const adState = useAdState(getPlayer);
+</script>
+
+{#if adState.active}
+	<div class={["vide-ad-label", className].filter(Boolean).join(" ")}>
+		{#if children}
+			{@render children()}
+		{:else}
+			Ad
+		{/if}
+	</div>
+{/if}

package/dist/svelte/components/AdLabel.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+interface Props {
+    class?: string;
+    children?: Snippet;
+}
+declare const AdLabel: import("svelte").Component<Props, {}, "">;
+type AdLabel = ReturnType<typeof AdLabel>;
+export default AdLabel;

package/dist/svelte/components/AdLearnMore.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+import { getContext } from "svelte";
+import type { Snippet } from "svelte";
+import { type PlayerGetter, VIDE_PLAYER_KEY } from "../context.js";
+import { useAdState } from "../use-ad-state.svelte.js";
+
+interface Props {
+	class?: string;
+	children?: Snippet;
+	showTitle?: boolean;
+}
+
+const { class: className, children, showTitle = false }: Props = $props();
+
+const getPlayer = getContext<PlayerGetter>(VIDE_PLAYER_KEY);
+const adState = useAdState(getPlayer);
+
+function onClick() {
+	const p = getPlayer();
+	if (!p || !adState.meta?.clickThrough) return;
+	p.el.click();
+	window.open(adState.meta.clickThrough, "_blank");
+	p.el.pause();
+}
+</script>
+
+{#if adState.active && adState.meta?.clickThrough}
+	<button
+		type="button"
+		class={["vide-ad-cta", className].filter(Boolean).join(" ")}
+		onclick={onClick}
+	>
+		{#if showTitle && adState.meta.adTitle}
+			<span class="vide-ad-cta__title">{adState.meta.adTitle}</span>
+		{/if}
+		{#if children}
+			{@render children()}
+		{:else}
+			Learn More
+		{/if}
+	</button>
+{/if}

package/dist/svelte/components/AdLearnMore.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+interface Props {
+    class?: string;
+    children?: Snippet;
+    showTitle?: boolean;
+}
+declare const AdLearnMore: import("svelte").Component<Props, {}, "">;
+type AdLearnMore = ReturnType<typeof AdLearnMore>;
+export default AdLearnMore;

package/dist/svelte/components/AdOverlay.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+import { getContext } from "svelte";
+import type { Snippet } from "svelte";
+import { type PlayerGetter, VIDE_PLAYER_KEY } from "../context.js";
+import { useAdState } from "../use-ad-state.svelte.js";
+
+interface Props {
+	class?: string;
+	children?: Snippet;
+}
+
+const { class: className, children }: Props = $props();
+
+const getPlayer = getContext<PlayerGetter>(VIDE_PLAYER_KEY);
+const adState = useAdState(getPlayer);
+
+function onClick() {
+	const p = getPlayer();
+	if (!p) return;
+	p.el.click();
+	const url = adState.meta?.clickThrough;
+	if (url) {
+		window.open(url, "_blank");
+		p.el.pause();
+	} else {
+		if (p.el.paused) {
+			Promise.resolve(p.el.play()).catch(() => {});
+		} else {
+			p.el.pause();
+		}
+	}
+}
+</script>
+
+{#if adState.active}
+	<div
+		class={["vide-ad-overlay", className].filter(Boolean).join(" ")}
+		onclick={onClick}
+		role="button"
+		tabindex="-1"
+	>
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+{/if}

package/dist/svelte/components/AdOverlay.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+interface Props {
+    class?: string;
+    children?: Snippet;
+}
+declare const AdOverlay: import("svelte").Component<Props, {}, "">;
+type AdOverlay = ReturnType<typeof AdOverlay>;
+export default AdOverlay;

package/dist/svelte/components/AdSkip.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+import { getContext } from "svelte";
+import type { Snippet } from "svelte";
+import { type PlayerGetter, VIDE_PLAYER_KEY } from "../context.js";
+import { useAdState } from "../use-ad-state.svelte.js";
+
+interface Props {
+	class?: string;
+	children?: Snippet;
+}
+
+const { class: className, children }: Props = $props();
+
+const getPlayer = getContext<PlayerGetter>(VIDE_PLAYER_KEY);
+const adState = useAdState(getPlayer);
+let canSkip = $state(false);
+let countdown = $state(0);
+
+$effect(() => {
+	const p = getPlayer();
+	if (!p) return;
+
+	const onTimeUpdate = ({ currentTime }: { currentTime: number }) => {
+		if (
+			!adState.active ||
+			!adState.meta ||
+			adState.meta.skipOffset === undefined
+		)
+			return;
+		if (currentTime >= adState.meta.skipOffset) {
+			canSkip = true;
+		} else {
+			canSkip = false;
+			countdown = Math.max(0, Math.ceil(adState.meta.skipOffset - currentTime));
+		}
+	};
+
+	p.on("timeupdate", onTimeUpdate);
+	return () => p.off("timeupdate", onTimeUpdate);
+});
+
+function onClick() {
+	const p = getPlayer();
+	if (!p || !canSkip || !adState.meta) return;
+	p.emit("ad:skip", { adId: adState.meta.adId });
+}
+</script>
+
+{#if adState.active && adState.meta && adState.meta.skipOffset !== undefined}
+	<button
+		type="button"
+		class={["vide-skip", !canSkip && "vide-skip--disabled", className].filter(Boolean).join(" ")}
+		aria-label="Skip ad"
+		onclick={onClick}
+		disabled={!canSkip}
+	>
+		{#if canSkip}
+			{#if children}
+				{@render children()}
+			{:else}
+				Skip Ad
+			{/if}
+		{:else}
+			Skip in {countdown}s
+		{/if}
+	</button>
+{/if}

package/dist/svelte/components/AdSkip.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+interface Props {
+    class?: string;
+    children?: Snippet;
+}
+declare const AdSkip: import("svelte").Component<Props, {}, "">;
+type AdSkip = ReturnType<typeof AdSkip>;
+export default AdSkip;

package/dist/svelte/components/BigPlayButton.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+import { getContext } from "svelte";
+import type { Snippet } from "svelte";
+import { type PlayerGetter, VIDE_PLAYER_KEY } from "../context.js";
+import IconPlay from "../icons/IconPlay.svelte";
+
+interface Props {
+	class?: string;
+	children?: Snippet;
+}
+
+const { class: className, children }: Props = $props();
+
+const getPlayer = getContext<PlayerGetter>(VIDE_PLAYER_KEY);
+
+function onClick() {
+	const p = getPlayer();
+	if (!p) return;
+	if (p.state === "ended") {
+		function onReady({ to }: { from: string; to: string }): void {
+			if (to === "ready") {
+				p.off("statechange", onReady);
+				p.play().catch(() => {});
+			}
+		}
+		p.on("statechange", onReady);
+		p.el.currentTime = 0;
+		p.el.load();
+		return;
+	}
+	p.play().catch(() => {});
+}
+</script>
+
+<button
+	type="button"
+	class={["vide-bigplay", className].filter(Boolean).join(" ")}
+	aria-label="Play video"
+	onclick={onClick}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		<IconPlay />
+	{/if}
+</button>

package/dist/svelte/components/BigPlayButton.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+interface Props {
+    class?: string;
+    children?: Snippet;
+}
+declare const BigPlayButton: import("svelte").Component<Props, {}, "">;
+type BigPlayButton = ReturnType<typeof BigPlayButton>;
+export default BigPlayButton;

package/dist/svelte/components/ClickPlay.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+import { getContext, onDestroy } from "svelte";
+import { type PlayerGetter, VIDE_PLAYER_KEY } from "../context.js";
+import { isAdState } from "../helpers.js";
+
+const DBLCLICK_DELAY = 200;
+
+interface Props {
+	class?: string;
+	enableFullscreen?: boolean;
+}
+
+const { class: className, enableFullscreen = true }: Props = $props();
+
+const getPlayer = getContext<PlayerGetter>(VIDE_PLAYER_KEY);
+let clickTimer: ReturnType<typeof setTimeout> | null = null;
+
+function togglePlay(): void {
+	const p = getPlayer();
+	if (!p) return;
+	if (p.state === "playing" || p.state === "ad:playing") {
+		p.pause();
+	} else {
+		p.play().catch(() => {});
+	}
+}
+
+function toggleFullscreen(): void {
+	if (!enableFullscreen) return;
+	const p = getPlayer();
+	const target =
+		(p?.el.closest(".vide-ui") as HTMLElement | null) ?? p?.el.parentElement;
+	if (!target) return;
+	if (document.fullscreenElement != null) {
+		document.exitFullscreen().catch(() => {});
+	} else if (target.requestFullscreen) {
+		target.requestFullscreen().catch(() => {});
+	}
+}
+
+function onClick(): void {
+	const p = getPlayer();
+	if (!p) return;
+
+	if (isAdState(p.state)) {
+		p.el.click();
+		togglePlay();
+		return;
+	}
+
+	if (clickTimer !== null) {
+		clearTimeout(clickTimer);
+		clickTimer = null;
+		toggleFullscreen();
+		return;
+	}
+
+	clickTimer = setTimeout(() => {
+		clickTimer = null;
+		togglePlay();
+	}, DBLCLICK_DELAY);
+}
+
+onDestroy(() => {
+	if (clickTimer !== null) {
+		clearTimeout(clickTimer);
+		clickTimer = null;
+	}
+});
+</script>
+
+<div
+	class={["vide-clickplay", className].filter(Boolean).join(" ")}
+	onclick={onClick}
+	role="presentation"
+></div>

package/dist/svelte/components/ClickPlay.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    class?: string;
+    enableFullscreen?: boolean;
+}
+declare const ClickPlay: import("svelte").Component<Props, {}, "">;
+type ClickPlay = ReturnType<typeof ClickPlay>;
+export default ClickPlay;

package/dist/svelte/components/ErrorDisplay.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+import { getContext } from "svelte";
+import { type PlayerGetter, VIDE_PLAYER_KEY } from "../context.js";
+
+interface Props {
+	class?: string;
+}
+
+const { class: className }: Props = $props();
+
+const getPlayer = getContext<PlayerGetter>(VIDE_PLAYER_KEY);
+let message = $state("");
+
+$effect(() => {
+	const p = getPlayer();
+	if (!p) return;
+	const handler = ({ message: msg }: { message: string }) => {
+		message = msg;
+	};
+	p.on("error", handler);
+	return () => p.off("error", handler);
+});
+</script>
+
+<div class={["vide-error", className].filter(Boolean).join(" ")}>
+	<span class="vide-error__message">{message}</span>
+</div>

package/dist/svelte/components/ErrorDisplay.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    class?: string;
+}
+declare const ErrorDisplay: import("svelte").Component<Props, {}, "">;
+type ErrorDisplay = ReturnType<typeof ErrorDisplay>;
+export default ErrorDisplay;

package/dist/svelte/components/FullscreenButton.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+import { getContext, onDestroy, onMount } from "svelte";
+import type { Snippet } from "svelte";
+import { type PlayerGetter, VIDE_PLAYER_KEY } from "../context.js";
+import IconFullscreenEnter from "../icons/IconFullscreenEnter.svelte";
+import IconFullscreenExit from "../icons/IconFullscreenExit.svelte";
+
+interface Props {
+	class?: string;
+	target?: HTMLElement | null;
+	children?: Snippet;
+}
+
+const { class: className, target = null, children }: Props = $props();
+
+const getPlayer = getContext<PlayerGetter>(VIDE_PLAYER_KEY);
+let active = $state(false);
+
+function onChange() {
+	active =
+		document.fullscreenElement != null ||
+		// biome-ignore lint/suspicious/noExplicitAny: webkit prefix
+		(document as any).webkitFullscreenElement != null;
+}
+
+onMount(() => {
+	document.addEventListener("fullscreenchange", onChange);
+	document.addEventListener("webkitfullscreenchange", onChange);
+});
+
+onDestroy(() => {
+	document.removeEventListener("fullscreenchange", onChange);
+	document.removeEventListener("webkitfullscreenchange", onChange);
+});
+
+function onClick() {
+	const p = getPlayer();
+	const fsTarget =
+		target ??
+		(p?.el.closest(".vide-ui") as HTMLElement | null) ??
+		p?.el.parentElement;
+	if (!fsTarget) return;
+	if (document.fullscreenElement) {
+		document.exitFullscreen().catch(() => {});
+	} else {
+		fsTarget.requestFullscreen().catch(() => {});
+	}
+}
+</script>
+
+<button
+	type="button"
+	class={["vide-fullscreen", className].filter(Boolean).join(" ")}
+	aria-label={active ? "Exit fullscreen" : "Fullscreen"}
+	data-fullscreen={active || undefined}
+	onclick={onClick}
+>
+	{#if children}
+		{@render children()}
+	{:else if active}
+		<IconFullscreenExit />
+	{:else}
+		<IconFullscreenEnter />
+	{/if}
+</button>

package/dist/svelte/components/FullscreenButton.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+interface Props {
+    class?: string;
+    target?: HTMLElement | null;
+    children?: Snippet;
+}
+declare const FullscreenButton: import("svelte").Component<Props, {}, "">;
+type FullscreenButton = ReturnType<typeof FullscreenButton>;
+export default FullscreenButton;

package/dist/svelte/components/Loader.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+interface Props {
+	class?: string;
+}
+
+const { class: className }: Props = $props();
+</script>
+
+<div class={["vide-loader", className].filter(Boolean).join(" ")}>
+	<div class="vide-loader__spinner"></div>
+</div>

package/dist/svelte/components/Loader.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    class?: string;
+}
+declare const Loader: import("svelte").Component<Props, {}, "">;
+type Loader = ReturnType<typeof Loader>;
+export default Loader;