@orochibraru/ui 0.0.0 → 1.0.0-canary.2

package/dist/components/blocks/video-player/control-button.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+interface Props {
+    label: string;
+    shortcut?: string;
+    pressed?: boolean;
+    portalTarget: HTMLElement | string;
+    onclick: () => void;
+    class?: string;
+    children: Snippet;
+}
+declare const ControlButton: import("svelte").Component<Props, {}, "">;
+type ControlButton = ReturnType<typeof ControlButton>;
+export default ControlButton;

package/dist/components/blocks/video-player/format.d.ts

@@ -0,0 +1,9 @@
+/** A point on the timeline: a chapter start, or any marker worth a tick on the scrub bar. */
+export interface Chapter {
+    start: number;
+    title?: string;
+}
+/** `h:mm:ss`, or `m:ss` under an hour; anything not finite reads `0:00`. */
+export declare function formatTime(seconds: number): string;
+/** The chapter playing at `time`, from a list sorted by start. */
+export declare function chapterAt(chapters: Chapter[], time: number): Chapter | null;

package/dist/components/blocks/video-player/format.js

@@ -0,0 +1,24 @@
+/** `h:mm:ss`, or `m:ss` under an hour; anything not finite reads `0:00`. */
+export function formatTime(seconds) {
+    if (!Number.isFinite(seconds)) {
+        return "0:00";
+    }
+    const total = Math.max(0, Math.floor(seconds));
+    const hours = Math.floor(total / 3600);
+    const minutes = Math.floor((total % 3600) / 60);
+    const rest = String(total % 60).padStart(2, "0");
+    return hours > 0
+        ? `${hours}:${String(minutes).padStart(2, "0")}:${rest}`
+        : `${minutes}:${rest}`;
+}
+/** The chapter playing at `time`, from a list sorted by start. */
+export function chapterAt(chapters, time) {
+    let current = null;
+    for (const chapter of chapters) {
+        if (chapter.start > time) {
+            break;
+        }
+        current = chapter;
+    }
+    return current;
+}

package/dist/components/blocks/video-player/gesture-feedback.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import FastForwardIcon from "@lucide/svelte/icons/fast-forward";
+	import RewindIcon from "@lucide/svelte/icons/rewind";
+
+	import type { SeekFeedback } from "./tap-gestures.svelte.js";
+	import { cn } from "../../../utils.js";
+
+	const { feedback }: { feedback: SeekFeedback | null } = $props();
+</script>
+
+{#if feedback}
+	<div
+		class={cn(
+			"bg-foreground/10 pointer-events-none absolute inset-y-0 z-10 flex w-1/3 items-center justify-center",
+			feedback.side === "left"
+				? "left-0 rounded-r-[50%]"
+				: "right-0 rounded-l-[50%]",
+		)}
+	>
+		<span
+			class="glass flex items-center gap-1.5 rounded-full px-4 py-2 text-sm font-semibold tabular"
+		>
+			{#if feedback.side === "left"}
+				<RewindIcon class="size-4 fill-current" />
+				-{feedback.seconds}s
+			{:else}
+				+{feedback.seconds}s
+				<FastForwardIcon class="size-4 fill-current" />
+			{/if}
+		</span>
+	</div>
+{/if}

package/dist/components/blocks/video-player/gesture-feedback.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { SeekFeedback } from "./tap-gestures.svelte.js";
+type $$ComponentProps = {
+    feedback: SeekFeedback | null;
+};
+declare const GestureFeedback: import("svelte").Component<$$ComponentProps, {}, "">;
+type GestureFeedback = ReturnType<typeof GestureFeedback>;
+export default GestureFeedback;

package/dist/components/blocks/video-player/gestures.d.ts

@@ -0,0 +1,13 @@
+export type GestureZone = "left" | "center" | "right";
+export interface TapPoint {
+    x: number;
+    y: number;
+    time: number;
+}
+/** Two taps further apart than this, in milliseconds, are two single taps. */
+export declare const DOUBLE_TAP_MS = 300;
+/** ... and further apart than this, in pixels, too. */
+export declare const DOUBLE_TAP_DISTANCE = 60;
+/** The left and right thirds seek on a double tap; the middle one doesn't. */
+export declare function gestureZone(x: number, width: number): GestureZone;
+export declare function isDoubleTap(previous: TapPoint | null, next: TapPoint): boolean;

package/dist/components/blocks/video-player/gestures.js

@@ -0,0 +1,25 @@
+/** Two taps further apart than this, in milliseconds, are two single taps. */
+export const DOUBLE_TAP_MS = 300;
+/** ... and further apart than this, in pixels, too. */
+export const DOUBLE_TAP_DISTANCE = 60;
+/** The left and right thirds seek on a double tap; the middle one doesn't. */
+export function gestureZone(x, width) {
+    if (width <= 0) {
+        return "center";
+    }
+    const ratio = x / width;
+    if (ratio < 1 / 3) {
+        return "left";
+    }
+    if (ratio > 2 / 3) {
+        return "right";
+    }
+    return "center";
+}
+export function isDoubleTap(previous, next) {
+    if (!previous) {
+        return false;
+    }
+    return (next.time - previous.time <= DOUBLE_TAP_MS &&
+        Math.hypot(next.x - previous.x, next.y - previous.y) <= DOUBLE_TAP_DISTANCE);
+}

package/dist/components/blocks/video-player/keymap.d.ts

@@ -0,0 +1,14 @@
+export interface PlayerKeyActions {
+    togglePlay: () => void;
+    seek: (delta: number) => void;
+    adjustVolume: (delta: number) => void;
+    toggleMute: () => void;
+    toggleFullscreen: () => void;
+    cycleSubtitles: () => void;
+}
+export declare const SEEK_SECONDS = 10;
+/**
+ * Runs the player shortcut for `event` and reports whether it took the key. Browser shortcuts (a modifier held), keys
+ * a focused field or menu handles itself, and Space on a focused button are left alone.
+ */
+export declare function handlePlayerKey(event: KeyboardEvent, actions: PlayerKeyActions): boolean;

package/dist/components/blocks/video-player/keymap.js

@@ -0,0 +1,55 @@
+export const SEEK_SECONDS = 10;
+const VOLUME_STEP = 0.1;
+const OWNS_KEYS = 'input, textarea, select, [contenteditable="true"], [role="slider"], [role^="menuitem"], [role="option"]';
+const ACTIVATES_ON_SPACE = 'button, a[href], [role="button"]';
+function focusedOn(event, selector) {
+    const target = event.target;
+    return Boolean(target?.closest?.(selector));
+}
+function action(key, actions) {
+    switch (key) {
+        case " ":
+        case "k":
+            return actions.togglePlay;
+        case "ArrowLeft":
+        case "j":
+            return () => actions.seek(-SEEK_SECONDS);
+        case "ArrowRight":
+        case "l":
+            return () => actions.seek(SEEK_SECONDS);
+        case "ArrowUp":
+            return () => actions.adjustVolume(VOLUME_STEP);
+        case "ArrowDown":
+            return () => actions.adjustVolume(-VOLUME_STEP);
+        case "m":
+            return actions.toggleMute;
+        case "f":
+            return actions.toggleFullscreen;
+        case "c":
+            return actions.cycleSubtitles;
+        default:
+            return undefined;
+    }
+}
+/**
+ * Runs the player shortcut for `event` and reports whether it took the key. Browser shortcuts (a modifier held), keys
+ * a focused field or menu handles itself, and Space on a focused button are left alone.
+ */
+export function handlePlayerKey(event, actions) {
+    if (event.ctrlKey || event.metaKey || event.altKey) {
+        return false;
+    }
+    if (focusedOn(event, OWNS_KEYS)) {
+        return false;
+    }
+    if (event.key === " " && focusedOn(event, ACTIVATES_ON_SPACE)) {
+        return false;
+    }
+    const run = action(event.key, actions);
+    if (!run) {
+        return false;
+    }
+    event.preventDefault();
+    run();
+    return true;
+}

package/dist/components/blocks/video-player/messages.d.ts

@@ -0,0 +1,22 @@
+export declare const defaultMessages: {
+    region: string;
+    play: string;
+    pause: string;
+    replay: string;
+    seek: string;
+    seekBackward: string;
+    seekForward: string;
+    mute: string;
+    unmute: string;
+    volume: string;
+    speed: string;
+    speedNormal: string;
+    subtitles: string;
+    subtitlesOff: string;
+    pictureInPicture: string;
+    fullscreen: string;
+    exitFullscreen: string;
+    loading: string;
+    error: string;
+};
+export type VideoPlayerMessages = typeof defaultMessages;

package/dist/components/blocks/video-player/messages.js

@@ -0,0 +1,21 @@
+export const defaultMessages = {
+    region: "Video player",
+    play: "Play",
+    pause: "Pause",
+    replay: "Replay",
+    seek: "Seek",
+    seekBackward: "Back 10 seconds",
+    seekForward: "Forward 10 seconds",
+    mute: "Mute",
+    unmute: "Unmute",
+    volume: "Volume",
+    speed: "Playback speed",
+    speedNormal: "Normal",
+    subtitles: "Subtitles",
+    subtitlesOff: "Off",
+    pictureInPicture: "Picture in picture",
+    fullscreen: "Fullscreen",
+    exitFullscreen: "Exit fullscreen",
+    loading: "Loading",
+    error: "This video can't be played.",
+};

package/dist/components/blocks/video-player/option-menu.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	import { Button } from "../../ui/button/index.js";
+	import * as DropdownMenu from "../../ui/dropdown-menu/index.js";
+	import * as Tooltip from "../../ui/tooltip/index.js";
+	import { cn } from "../../../utils.js";
+
+	interface Props {
+		label: string;
+		shortcut?: string;
+		options: Array<{ value: string; label: string }>;
+		value: string;
+		active?: boolean;
+		portalTarget: HTMLElement | string;
+		onselect: (value: string) => void;
+		onopenchange: (open: boolean) => void;
+		children: Snippet;
+	}
+
+	const {
+		label,
+		shortcut,
+		options,
+		value,
+		active = false,
+		portalTarget,
+		onselect,
+		onopenchange,
+		children,
+	}: Props = $props();
+</script>
+
+<DropdownMenu.Root onOpenChange={onopenchange}>
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			{#snippet child({ props: tooltipProps })}
+				<DropdownMenu.Trigger {...tooltipProps}>
+					{#snippet child({ props })}
+						<Button
+							{...props}
+							variant="ghost"
+							size="icon"
+							aria-label={label}
+							class={cn(
+								"size-11 rounded-full md:size-9 [&_svg]:size-5",
+								active && "text-primary",
+							)}
+						>
+							{@render children()}
+						</Button>
+					{/snippet}
+				</DropdownMenu.Trigger>
+			{/snippet}
+		</Tooltip.Trigger>
+		<Tooltip.Content portalProps={{ to: portalTarget }} sideOffset={6}>
+			{label}
+			{#if shortcut}
+				<kbd class="font-sans opacity-60">{shortcut}</kbd>
+			{/if}
+		</Tooltip.Content>
+	</Tooltip.Root>
+	<DropdownMenu.Content
+		portalProps={{ to: portalTarget }}
+		side="top"
+		align="end"
+		sideOffset={12}
+		class="w-44 rounded-2xl p-1.5"
+	>
+		<DropdownMenu.Group>
+			<DropdownMenu.GroupHeading>{label}</DropdownMenu.GroupHeading>
+			<DropdownMenu.RadioGroup {value} onValueChange={onselect}>
+				{#each options as option (option.value)}
+					<DropdownMenu.RadioItem
+						value={option.value}
+						closeOnSelect
+						class="min-h-11 rounded-xl md:min-h-8"
+					>
+						<span class="truncate">{option.label}</span>
+					</DropdownMenu.RadioItem>
+				{/each}
+			</DropdownMenu.RadioGroup>
+		</DropdownMenu.Group>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>

package/dist/components/blocks/video-player/option-menu.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from "svelte";
+interface Props {
+    label: string;
+    shortcut?: string;
+    options: Array<{
+        value: string;
+        label: string;
+    }>;
+    value: string;
+    active?: boolean;
+    portalTarget: HTMLElement | string;
+    onselect: (value: string) => void;
+    onopenchange: (open: boolean) => void;
+    children: Snippet;
+}
+declare const OptionMenu: import("svelte").Component<Props, {}, "">;
+type OptionMenu = ReturnType<typeof OptionMenu>;
+export default OptionMenu;

package/dist/components/blocks/video-player/player.svelte.d.ts

@@ -0,0 +1,37 @@
+/**
+ * The `<video>` element's state the controls show, bound off the element, and the actions they run on it. `currentTime`
+ * and `paused` stay with the component, which exposes them as bindable props.
+ */
+export declare class VideoPlayerState {
+    #private;
+    duration: number;
+    volume: number;
+    muted: boolean;
+    rate: number;
+    buffered: {
+        start: number;
+        end: number;
+    }[];
+    readyState: number;
+    seeking: boolean;
+    ended: boolean;
+    failed: boolean;
+    fullscreen: boolean;
+    controlsVisible: boolean;
+    menuOpen: boolean;
+    constructor(elements: {
+        video: () => HTMLVideoElement | null;
+        container: () => HTMLElement | null;
+    });
+    togglePlay: () => void;
+    seekTo: (time: number) => void;
+    seek: (delta: number) => void;
+    adjustVolume: (delta: number) => void;
+    toggleMute: () => void;
+    toggleFullscreen: () => Promise<void>;
+    syncFullscreen: () => void;
+    togglePictureInPicture: () => Promise<void>;
+    nudgeControls: () => void;
+    hideControls: () => void;
+    dispose: () => void;
+}

package/dist/components/blocks/video-player/player.svelte.js

@@ -0,0 +1,115 @@
+const HIDE_CONTROLS_MS = 3000;
+/**
+ * The `<video>` element's state the controls show, bound off the element, and the actions they run on it. `currentTime`
+ * and `paused` stay with the component, which exposes them as bindable props.
+ */
+export class VideoPlayerState {
+    duration = $state(0);
+    volume = $state(1);
+    muted = $state(false);
+    rate = $state(1);
+    buffered = $state([]);
+    readyState = $state(0);
+    seeking = $state(false);
+    ended = $state(false);
+    failed = $state(false);
+    fullscreen = $state(false);
+    controlsVisible = $state(true);
+    menuOpen = $state(false);
+    #video;
+    #container;
+    #hideTimer;
+    constructor(elements) {
+        this.#video = elements.video;
+        this.#container = elements.container;
+    }
+    togglePlay = () => {
+        const video = this.#video();
+        if (!video) {
+            return;
+        }
+        if (video.ended) {
+            video.currentTime = 0;
+        }
+        if (video.paused || video.ended) {
+            video.play().catch(() => undefined);
+        }
+        else {
+            video.pause();
+        }
+    };
+    seekTo = (time) => {
+        const video = this.#video();
+        if (!video) {
+            return;
+        }
+        const end = Number.isFinite(video.duration)
+            ? video.duration
+            : Number.POSITIVE_INFINITY;
+        video.currentTime = Math.min(Math.max(0, time), end);
+    };
+    seek = (delta) => {
+        this.seekTo((this.#video()?.currentTime ?? 0) + delta);
+    };
+    adjustVolume = (delta) => {
+        const current = this.muted ? 0 : this.volume;
+        this.volume = Math.min(1, Math.max(0, Number((current + delta).toFixed(2))));
+        this.muted = this.volume === 0;
+    };
+    toggleMute = () => {
+        this.muted = !this.muted;
+        if (!this.muted && this.volume === 0) {
+            this.volume = 1;
+        }
+    };
+    toggleFullscreen = async () => {
+        try {
+            if (document.fullscreenElement) {
+                await document.exitFullscreen();
+                return;
+            }
+            const container = this.#container();
+            if (container?.requestFullscreen) {
+                await container.requestFullscreen();
+                return;
+            }
+            this.#video()?.webkitEnterFullscreen?.();
+        }
+        catch {
+            this.syncFullscreen();
+        }
+    };
+    syncFullscreen = () => {
+        const container = this.#container();
+        this.fullscreen =
+            container !== null && document.fullscreenElement === container;
+    };
+    togglePictureInPicture = async () => {
+        const video = this.#video();
+        try {
+            if (document.pictureInPictureElement) {
+                await document.exitPictureInPicture();
+            }
+            else if (video) {
+                await video.requestPictureInPicture();
+            }
+        }
+        catch {
+            return;
+        }
+    };
+    nudgeControls = () => {
+        this.controlsVisible = true;
+        clearTimeout(this.#hideTimer);
+        this.#hideTimer = setTimeout(() => {
+            if (this.#video()?.paused === false && !this.menuOpen) {
+                this.controlsVisible = false;
+            }
+        }, HIDE_CONTROLS_MS);
+    };
+    hideControls = () => {
+        clearTimeout(this.#hideTimer);
+        this.controlsVisible = false;
+    };
+    dispose = () => clearTimeout(this.#hideTimer);
+}

package/dist/components/blocks/video-player/scrub-bar.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import {
+		type Chapter,
+		chapterAt,
+		formatTime,
+	} from "./format.js";
+
+	interface Props {
+		currentTime: number;
+		duration: number;
+		bufferedEnd: number;
+		chapters: Chapter[];
+		label: string;
+		onseek: (time: number) => void;
+	}
+
+	const { currentTime, duration, bufferedEnd, chapters, label, onseek }: Props =
+		$props();
+
+	let track = $state<HTMLDivElement | null>(null);
+	let hoverRatio = $state<number | null>(null);
+
+	const ratio = (time: number) =>
+		duration > 0 ? Math.min(1, Math.max(0, time / duration)) : 0;
+	const hovered = $derived(
+		hoverRatio === null ? null : chapterAt(chapters, hoverRatio * duration),
+	);
+
+	function onpointermove(event: PointerEvent) {
+		if (!track || event.pointerType !== "mouse") {
+			return;
+		}
+		const rect = track.getBoundingClientRect();
+		hoverRatio =
+			rect.width > 0
+				? Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width))
+				: null;
+	}
+</script>
+
+<div
+	bind:this={track}
+	role="presentation"
+	class="group/scrub relative flex h-6 items-center"
+	{onpointermove}
+	onpointerleave={() => (hoverRatio = null)}
+>
+	<div
+		class="bg-foreground/15 pointer-events-none absolute inset-x-0 h-1.5 rounded-full transition-[height] group-hover/scrub:h-2"
+	></div>
+	<div
+		class="bg-foreground/20 pointer-events-none absolute h-1.5 rounded-full transition-[height] group-hover/scrub:h-2"
+		style:width="{ratio(bufferedEnd) * 100}%"
+	></div>
+	<div
+		class="bg-primary glow pointer-events-none absolute h-1.5 rounded-full transition-[height] group-hover/scrub:h-2"
+		style:width="{ratio(currentTime) * 100}%"
+	></div>
+	{#each chapters as chapter (chapter.start)}
+		{#if chapter.start > 0 && chapter.start < duration}
+			<div
+				class="bg-background pointer-events-none absolute h-2.5 w-0.5 -translate-x-1/2 rounded-full"
+				style:left="{ratio(chapter.start) * 100}%"
+			></div>
+		{/if}
+	{/each}
+	<div
+		class="bg-primary ring-background pointer-events-none absolute size-3.5 -translate-x-1/2 rounded-full shadow-md ring-2 transition-transform group-focus-within/scrub:scale-125 group-hover/scrub:scale-125"
+		style:left="{ratio(currentTime) * 100}%"
+	></div>
+	{#if hoverRatio !== null && duration > 0}
+		<div
+			class="bg-popover text-popover-foreground pointer-events-none absolute bottom-full mb-2 flex -translate-x-1/2 flex-col items-center rounded-lg px-2 py-1 text-xs font-medium tabular shadow-md"
+			style:left="{hoverRatio * 100}%"
+		>
+			{#if hovered?.title}
+				<span class="max-w-48 truncate font-semibold">{hovered.title}</span>
+			{/if}
+			<span class={hovered?.title ? "text-muted-foreground" : undefined}
+				>{formatTime(hoverRatio * duration)}</span
+			>
+		</div>
+	{/if}
+	<input
+		type="range"
+		min="0"
+		max={duration || 0}
+		step="0.1"
+		value={currentTime}
+		aria-label={label}
+		aria-valuetext="{formatTime(currentTime)} / {formatTime(duration)}"
+		oninput={(event) => onseek(Number(event.currentTarget.value))}
+		class="relative h-6 w-full cursor-pointer appearance-none bg-transparent focus-visible:outline-none [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-transparent [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:bg-transparent"
+	/>
+</div>

package/dist/components/blocks/video-player/scrub-bar.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type Chapter } from "./format.js";
+interface Props {
+    currentTime: number;
+    duration: number;
+    bufferedEnd: number;
+    chapters: Chapter[];
+    label: string;
+    onseek: (time: number) => void;
+}
+declare const ScrubBar: import("svelte").Component<Props, {}, "">;
+type ScrubBar = ReturnType<typeof ScrubBar>;
+export default ScrubBar;

package/dist/components/blocks/video-player/tap-gestures.svelte.d.ts

@@ -0,0 +1,19 @@
+import { type GestureZone, type TapPoint } from "./gestures.js";
+export interface SeekFeedback {
+    side: "left" | "right";
+    seconds: number;
+}
+/**
+ * Taps on the picture on a touch screen. A tap in the middle runs `onTap` at once; on a side it waits out the
+ * double-tap window, and a second tap there seeks instead, as does each further quick tap, adding up.
+ */
+export declare class TapGestures {
+    #private;
+    feedback: SeekFeedback | null;
+    constructor(actions: {
+        seek: (delta: number) => void;
+        onTap: () => void;
+    });
+    tap: (point: TapPoint, zone: GestureZone) => void;
+    dispose: () => void;
+}