@hexdn/react 0.1.0

package/dist/player/playback-landscape-presentation.d.ts

@@ -0,0 +1,16 @@
+declare const landscapeOrientation: "landscape";
+export type PlaybackScreenOrientation = {
+    readonly lock?: ((orientation: typeof landscapeOrientation) => PromiseLike<void> | void) | undefined;
+};
+export declare function isCoarsePlaybackPointer(): boolean;
+export declare function readPlaybackScreenOrientation(): PlaybackScreenOrientation | undefined;
+export declare function enterPlaybackFullscreen(input: {
+    readonly lockLandscape: boolean;
+    readonly orientation?: PlaybackScreenOrientation | undefined;
+    readonly requestFullscreen: () => Promise<void>;
+}): Promise<void>;
+export declare function isPlayerFullscreen(input: {
+    readonly fullscreenElement: Element | null;
+    readonly player: Element | null;
+}): boolean;
+export {};

package/dist/player/playback-landscape-presentation.js

@@ -0,0 +1,39 @@
+const coarsePlaybackPointerQuery = "(pointer: coarse)";
+const landscapeOrientation = "landscape";
+export function isCoarsePlaybackPointer() {
+    return (typeof window !== "undefined" &&
+        typeof window.matchMedia === "function" &&
+        window.matchMedia(coarsePlaybackPointerQuery).matches);
+}
+export function readPlaybackScreenOrientation() {
+    if (typeof screen === "undefined" || !screen.orientation) {
+        return undefined;
+    }
+    return screen.orientation;
+}
+async function lockPlaybackLandscape(orientation) {
+    if (!orientation?.lock) {
+        return false;
+    }
+    try {
+        await orientation.lock(landscapeOrientation);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+export async function enterPlaybackFullscreen(input) {
+    await input.requestFullscreen();
+    if (input.lockLandscape) {
+        void lockPlaybackLandscape(input.orientation);
+    }
+}
+export function isPlayerFullscreen(input) {
+    const { fullscreenElement, player } = input;
+    return Boolean(fullscreenElement &&
+        player &&
+        (fullscreenElement === player ||
+            fullscreenElement.contains(player) ||
+            player.contains(fullscreenElement)));
+}

package/dist/player/playback-loading-indicator.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+export declare function PlaybackLoadingIndicator({ active, deferUntilTransitionIdle, delayMs, content, }: {
+    readonly active?: boolean | undefined;
+    readonly deferUntilTransitionIdle?: boolean | undefined;
+    readonly delayMs?: number | undefined;
+    readonly content?: ReactNode;
+}): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null;

package/dist/player/playback-loading-indicator.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePlayerHost } from "./player-host.js";
+import { useEffect, useState } from "react";
+import { LoadingIndicator } from "./ui-primitives.js";
+import { mediaLoadingIndicatorDelayMs, schedulePlaybackLoadingIndicator, } from "@hexdn/playback/internal";
+export function PlaybackLoadingIndicator({ active = true, deferUntilTransitionIdle = false, delayMs = mediaLoadingIndicatorDelayMs, content, }) {
+    const { transition } = usePlayerHost();
+    const { waitForIdle: waitForPlaybackPowerTransitionIdle } = transition;
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
+        if (!active) {
+            // Cancel the previous browser-owned delay before a new playback wait begins.
+            // eslint-disable-next-line react-hooks/set-state-in-effect
+            setVisible(false);
+            return;
+        }
+        setVisible(false);
+        return schedulePlaybackLoadingIndicator({
+            delayMs,
+            onVisible: () => {
+                setVisible(true);
+            },
+            waitForTransitionIdle: deferUntilTransitionIdle
+                ? waitForPlaybackPowerTransitionIdle
+                : () => Promise.resolve(),
+        });
+    }, [
+        active,
+        deferUntilTransitionIdle,
+        delayMs,
+        waitForPlaybackPowerTransitionIdle,
+    ]);
+    return active && visible ? (content ?? _jsx(LoadingIndicator, {})) : null;
+}

package/dist/player/player-control-popover.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+type PlayerControlPopoverAlign = "center" | "end" | "start";
+type PlayerControlPopoverSide = "top";
+export declare function PlayerControlPopover({ align, children, className, content, contentClassName, disabled, onInteraction, onInteractionEnd, openDelayMs, side, }: {
+    readonly align?: PlayerControlPopoverAlign | undefined;
+    readonly children: ReactNode;
+    readonly className?: string | undefined;
+    readonly content: ReactNode;
+    readonly contentClassName?: string | undefined;
+    readonly disabled?: boolean | undefined;
+    readonly onInteraction?: (() => void) | undefined;
+    readonly onInteractionEnd?: (() => void) | undefined;
+    readonly openDelayMs?: number | undefined;
+    readonly side?: PlayerControlPopoverSide | undefined;
+}): import("react").JSX.Element;
+export {};

package/dist/player/player-control-popover.js

@@ -0,0 +1,130 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState, } from "react";
+import { resolveBoundedHorizontalSurfaceLeft } from "./bounded-surface-position.js";
+import { cn } from "./utils.js";
+import styles from "./hexdn-player-control-popover.module.css";
+const DEFAULT_OPEN_DELAY_MS = 250;
+function readCssPixelValue(element, propertyName, fallback) {
+    const parsed = Number.parseFloat(window.getComputedStyle(element).getPropertyValue(propertyName));
+    return Number.isFinite(parsed) ? parsed : fallback;
+}
+export function PlayerControlPopover({ align = "center", children, className, content, contentClassName, disabled = false, onInteraction, onInteractionEnd, openDelayMs = DEFAULT_OPEN_DELAY_MS, side = "top", }) {
+    const hostRef = useRef(null);
+    const openTimerRef = useRef(null);
+    const surfaceRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const [surfaceStyle, setSurfaceStyle] = useState();
+    const clearOpenTimer = useCallback(() => {
+        if (openTimerRef.current === null) {
+            return;
+        }
+        window.clearTimeout(openTimerRef.current);
+        openTimerRef.current = null;
+    }, []);
+    const updateLayout = useCallback(() => {
+        if (align !== "center" || disabled) {
+            setSurfaceStyle(undefined);
+            return;
+        }
+        const host = hostRef.current;
+        const surface = surfaceRef.current;
+        if (!host || !surface) {
+            return;
+        }
+        const boundary = host.closest("[data-hexdn-player-control-popover-boundary]") ?? host.offsetParent;
+        if (!(boundary instanceof HTMLElement)) {
+            return;
+        }
+        const boundaryRect = boundary.getBoundingClientRect();
+        const hostRect = host.getBoundingClientRect();
+        const surfaceRect = surface.getBoundingClientRect();
+        const gutter = readCssPixelValue(boundary, "--hexdn-s-4", 16);
+        const hostCenter = hostRect.left + hostRect.width / 2;
+        const left = resolveBoundedHorizontalSurfaceLeft({
+            anchorCenter: hostCenter,
+            boundaryEnd: boundaryRect.right,
+            boundaryStart: boundaryRect.left,
+            gutter,
+            surfaceWidth: surfaceRect.width,
+        });
+        setSurfaceStyle({
+            "--hexdn-player-control-popover-left": `${left - hostRect.left}px`,
+            "--hexdn-player-control-popover-transform-x": "0px",
+        });
+    }, [align, disabled]);
+    useEffect(() => {
+        // Measure the mounted anchor and boundary before accepting pointer interaction.
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        updateLayout();
+        if (align !== "center" || disabled) {
+            return;
+        }
+        window.addEventListener("resize", updateLayout);
+        window.addEventListener("scroll", updateLayout, true);
+        return () => {
+            window.removeEventListener("resize", updateLayout);
+            window.removeEventListener("scroll", updateLayout, true);
+        };
+    }, [align, disabled, updateLayout]);
+    useEffect(() => {
+        if (disabled) {
+            clearOpenTimer();
+            // A disabled host capability must close an already-open interaction surface.
+            // eslint-disable-next-line react-hooks/set-state-in-effect
+            setIsOpen(false);
+        }
+    }, [clearOpenTimer, disabled]);
+    useEffect(() => {
+        return () => {
+            clearOpenTimer();
+        };
+    }, [clearOpenTimer]);
+    const keepAlive = useCallback(() => {
+        onInteraction?.();
+        updateLayout();
+    }, [onInteraction, updateLayout]);
+    const openImmediately = useCallback(() => {
+        if (disabled) {
+            return;
+        }
+        clearOpenTimer();
+        keepAlive();
+        setIsOpen(true);
+    }, [clearOpenTimer, disabled, keepAlive]);
+    const scheduleOpen = useCallback(() => {
+        if (disabled) {
+            return;
+        }
+        keepAlive();
+        if (isOpen || openTimerRef.current !== null) {
+            return;
+        }
+        if (openDelayMs <= 0) {
+            setIsOpen(true);
+            updateLayout();
+            return;
+        }
+        openTimerRef.current = window.setTimeout(() => {
+            openTimerRef.current = null;
+            setIsOpen(true);
+            updateLayout();
+        }, openDelayMs);
+    }, [disabled, isOpen, keepAlive, openDelayMs, updateLayout]);
+    const close = useCallback(() => {
+        clearOpenTimer();
+        setIsOpen(false);
+        onInteractionEnd?.();
+    }, [clearOpenTimer, onInteractionEnd]);
+    const handleBlur = useCallback((event) => {
+        const nextTarget = event.relatedTarget;
+        if (nextTarget instanceof Node &&
+            event.currentTarget.contains(nextTarget)) {
+            return;
+        }
+        close();
+    }, [close]);
+    return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: The wrapper delegates hover/focus state for the child trigger and floating surface.
+    _jsxs("div", { className: cn(styles.host, className), "data-hexdn-align": align, "data-hexdn-open": isOpen ? "true" : "false", "data-hexdn-side": side, onBlur: handleBlur, onFocus: openImmediately, onPointerEnter: scheduleOpen, onPointerLeave: close, onPointerMove: keepAlive, ref: hostRef, children: [children, disabled ? null : (_jsx("div", { className: cn(styles.surface, contentClassName), ref: surfaceRef, style: surfaceStyle, children: content }))] }));
+}

package/dist/player/player-host.d.ts

@@ -0,0 +1,31 @@
+import { fetchPlaybackResource, loadMediaVideoPlayerHlsEngine, readMediaVideoPlayerCaptionsPreference, readMediaVideoPlayerVolumePreference, writeMediaVideoPlayerCaptionsPreference, writeMediaVideoPlayerVolumePreference, type PlaybackTransition } from "@hexdn/playback/internal";
+import { type ReactNode } from "react";
+declare const defaultPreferences: {
+    readCaptions: typeof readMediaVideoPlayerCaptionsPreference;
+    readVolume: typeof readMediaVideoPlayerVolumePreference;
+    writeCaptions: typeof writeMediaVideoPlayerCaptionsPreference;
+    writeVolume: typeof writeMediaVideoPlayerVolumePreference;
+};
+/** Optional integration with an application's navigation and presentation owner. */
+export type PlayerIntegration = {
+    readonly transition?: PlaybackTransition | undefined;
+    readonly loadHlsEngine?: typeof loadMediaVideoPlayerHlsEngine | undefined;
+    readonly fetchResource?: typeof fetchPlaybackResource | undefined;
+    readonly preferences?: typeof defaultPreferences | undefined;
+};
+export declare function PlayerHost({ children, integration, }: {
+    readonly children: ReactNode;
+    readonly integration?: PlayerIntegration | undefined;
+}): import("react").JSX.Element;
+export declare function usePlayerHost(): {
+    transition: PlaybackTransition;
+    loadHlsEngine: typeof loadMediaVideoPlayerHlsEngine;
+    fetchResource: typeof fetchPlaybackResource;
+    preferences: {
+        readCaptions: typeof readMediaVideoPlayerCaptionsPreference;
+        readVolume: typeof readMediaVideoPlayerVolumePreference;
+        writeCaptions: typeof writeMediaVideoPlayerCaptionsPreference;
+        writeVolume: typeof writeMediaVideoPlayerVolumePreference;
+    };
+};
+export {};

package/dist/player/player-host.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fetchPlaybackResource, immediatePlaybackTransition, loadMediaVideoPlayerHlsEngine, readMediaVideoPlayerCaptionsPreference, readMediaVideoPlayerVolumePreference, writeMediaVideoPlayerCaptionsPreference, writeMediaVideoPlayerVolumePreference, } from "@hexdn/playback/internal";
+import { createContext, useContext, useMemo } from "react";
+const defaultPreferences = {
+    readCaptions: readMediaVideoPlayerCaptionsPreference,
+    readVolume: readMediaVideoPlayerVolumePreference,
+    writeCaptions: writeMediaVideoPlayerCaptionsPreference,
+    writeVolume: writeMediaVideoPlayerVolumePreference,
+};
+const defaultHost = {
+    transition: immediatePlaybackTransition,
+    loadHlsEngine: loadMediaVideoPlayerHlsEngine,
+    fetchResource: fetchPlaybackResource,
+    preferences: defaultPreferences,
+};
+const PlayerHostContext = createContext(defaultHost);
+export function PlayerHost({ children, integration, }) {
+    const host = useMemo(() => ({
+        transition: integration?.transition ?? defaultHost.transition,
+        loadHlsEngine: integration?.loadHlsEngine ?? defaultHost.loadHlsEngine,
+        fetchResource: integration?.fetchResource ?? defaultHost.fetchResource,
+        preferences: integration?.preferences ?? defaultHost.preferences,
+    }), [integration]);
+    return _jsx(PlayerHostContext, { value: host, children: children });
+}
+export function usePlayerHost() {
+    return useContext(PlayerHostContext);
+}

package/dist/player/player-icon.d.ts

@@ -0,0 +1,19 @@
+declare const shapes: {
+    play: import("react").JSX.Element;
+    pause: import("react").JSX.Element;
+    back10: import("react").JSX.Element;
+    fwd10: import("react").JSX.Element;
+    volume: import("react").JSX.Element;
+    captions: import("react").JSX.Element;
+    fullscreen: import("react").JSX.Element;
+    chevron: import("react").JSX.Element;
+    info: import("react").JSX.Element;
+    error: import("react").JSX.Element;
+};
+export type DsIconName = keyof typeof shapes | "chevron-l";
+export declare function resolveDsVolumeLevel(volume: number): "muted" | "low" | "high";
+export declare function DsIcon({ name, volumeLevel, }: {
+    readonly name: DsIconName;
+    readonly volumeLevel?: "muted" | "low" | "high" | undefined;
+}): import("react").JSX.Element;
+export {};

package/dist/player/player-icon.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from "./ui.module.css";
+import { cn } from "./utils.js";
+function path(d, props = {}) {
+    return _jsx("path", { d: d, ...props });
+}
+function circle(props) {
+    return _jsx("circle", { ...props });
+}
+function rect(props) {
+    return _jsx("rect", { ...props });
+}
+const seekText = (_jsx("text", { fill: "currentColor", fontFamily: "var(--hexdn-player-font-family, var(--hexdn-type-timecode-family, ui-sans-serif, system-ui, sans-serif))", fontSize: "7", fontWeight: "600", letterSpacing: "-.02em", stroke: "none", textAnchor: "middle", x: "12", y: "15.1", children: "10" }));
+const volumeSpeakerPath = "M4 9.6h3.3L12 5.9v12.2L7.3 14.4H4z";
+const volumeLowWavePath = "M15.4 9.9a3.4 3.4 0 0 1 0 4.2";
+const volumeHighWavePath = "M18.1 7.6a7 7 0 0 1 0 8.8";
+const volumeMutePath = "M15.9 10.1l4.1 3.8M20 10.1l-4.1 3.8";
+const statefulVolumeIconShape = (_jsxs(_Fragment, { children: [path(volumeSpeakerPath, {
+            className: "hexdn-volume-glyph-speaker",
+            fill: "currentColor",
+        }), path(volumeLowWavePath, {
+            className: "hexdn-volume-glyph-wave hexdn-volume-glyph-wave--low",
+        }), path(volumeHighWavePath, {
+            className: "hexdn-volume-glyph-wave",
+        }), path(volumeMutePath, { className: "hexdn-volume-glyph-mute" })] }));
+const shapes = {
+    play: path("M8 5v14l11-7z", { fill: "currentColor" }),
+    pause: path("M9.5 7v10M14.5 7v10"),
+    back10: (_jsxs(_Fragment, { children: [path("M5.42 8.6A7.6 7.6 0 1 0 12 4.8"), path("M8.4 4.8L12 2.5v4.6z", {
+                fill: "currentColor",
+            }), seekText] })),
+    fwd10: (_jsxs(_Fragment, { children: [path("M18.58 8.6A7.6 7.6 0 1 1 12 4.8"), path("M15.6 4.8L12 2.5v4.6z", {
+                fill: "currentColor",
+            }), seekText] })),
+    volume: (_jsxs(_Fragment, { children: [path(volumeSpeakerPath, { fill: "currentColor" }), path(`${volumeLowWavePath}${volumeHighWavePath}`)] })),
+    captions: (_jsxs(_Fragment, { children: [rect({ height: 13, rx: 3, width: 18, x: 3, y: 5.5 }), path("M6.8 11.2h10.4M6.8 14.6h6")] })),
+    fullscreen: path("M4.5 9V5.5H8M16 5.5h3.5V9M19.5 15v3.5H16M8 18.5H4.5V15"),
+    chevron: path("M10 6.5l5.5 5.5-5.5 5.5"),
+    info: (_jsxs(_Fragment, { children: [circle({ cx: 12, cy: 12, r: 8 }), path("M12 11.2v5"), circle({
+                cx: 12,
+                cy: 7.8,
+                fill: "currentColor",
+                r: 1.05,
+                stroke: "none",
+            })] })),
+    error: (_jsxs(_Fragment, { children: [circle({ cx: 12, cy: 12, r: 8 }), path("M9.3 9.3l5.4 5.4M14.7 9.3l-5.4 5.4")] })),
+};
+export function resolveDsVolumeLevel(volume) {
+    return !Number.isFinite(volume) || volume <= 0
+        ? "muted"
+        : volume <= 0.5
+            ? "low"
+            : "high";
+}
+export function DsIcon({ name, volumeLevel, }) {
+    return (_jsx("svg", { "aria-hidden": "true", className: cn("hexdn-icon", styles.icon, name === "volume" && "hexdn-volume-glyph"), "data-hexdn-volume-level": volumeLevel, fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", viewBox: "0 0 24 24", style: name === "chevron-l" ? { transform: "rotate(90deg)" } : undefined, children: name === "volume" && volumeLevel
+            ? statefulVolumeIconShape
+            : shapes[name === "chevron-l" ? "chevron" : name] }));
+}

package/dist/player/player-labels.d.ts

@@ -0,0 +1,27 @@
+export declare const defaultPlayerLabels: {
+    backAction: string;
+    hideStatsAction: string;
+    showStatsAction: string;
+    seekLabel: string;
+    seekValueText: string;
+    rewind10Action: string;
+    forward10Action: string;
+    pauseVideoAction: string;
+    playVideoAction: string;
+    volumeLabel: string;
+    unmuteVideoAction: string;
+    muteVideoAction: string;
+    disableCaptionsAction: string;
+    enableCaptionsAction: string;
+    exitFullscreenAction: string;
+    enterFullscreenAction: string;
+    retryAction: string;
+    sessionUnavailableBody: string;
+    sessionUnavailableTitle: string;
+    fullscreenUnavailableError: string;
+    playbackFailedError: string;
+    playbackStartFailedError: string;
+    protectedPlaybackUnsupportedError: string;
+};
+export type PlayerLabels = typeof defaultPlayerLabels;
+export declare function createPlayerTranslator(labels?: Partial<PlayerLabels>): (key: `playback.${keyof PlayerLabels}`, values?: Readonly<Record<string, string>>) => string;

package/dist/player/player-labels.js

@@ -0,0 +1,35 @@
+export const defaultPlayerLabels = {
+    backAction: "Back",
+    hideStatsAction: "Hide playback statistics",
+    showStatsAction: "Show playback statistics",
+    seekLabel: "Seek",
+    seekValueText: "{current} of {duration}",
+    rewind10Action: "Back 10 seconds",
+    forward10Action: "Forward 10 seconds",
+    pauseVideoAction: "Pause",
+    playVideoAction: "Play",
+    volumeLabel: "Volume",
+    unmuteVideoAction: "Unmute",
+    muteVideoAction: "Mute",
+    disableCaptionsAction: "Turn captions off",
+    enableCaptionsAction: "Turn captions on",
+    exitFullscreenAction: "Exit fullscreen",
+    enterFullscreenAction: "Enter fullscreen",
+    retryAction: "Try again",
+    sessionUnavailableBody: "The video could not be loaded. Please try again.",
+    sessionUnavailableTitle: "Playback unavailable",
+    fullscreenUnavailableError: "Fullscreen is unavailable in this browser.",
+    playbackFailedError: "The video could not be played.",
+    playbackStartFailedError: "The video could not start. Please try again.",
+    protectedPlaybackUnsupportedError: "This browser cannot play this protected video.",
+};
+export function createPlayerTranslator(labels) {
+    const copy = { ...defaultPlayerLabels, ...labels };
+    return (key, values) => {
+        let text = copy[key.slice("playback.".length)];
+        for (const [name, value] of Object.entries(values ?? {})) {
+            text = text.replaceAll(`{${name}}`, value);
+        }
+        return text;
+    };
+}

package/dist/player/player-slots.d.ts

@@ -0,0 +1,18 @@
+import type { MediaVideoPlayerError } from "@hexdn/playback/internal";
+import type { ReactNode } from "react";
+export type PlayerSlotControls = {
+    readonly showControls: () => void;
+    readonly holdControls: () => void;
+    readonly releaseControls: () => void;
+};
+export type PlayerSlots = {
+    readonly headerTrailing?: ((controls: PlayerSlotControls) => ReactNode) | undefined;
+    readonly leadingControls?: ((controls: PlayerSlotControls) => ReactNode) | undefined;
+    readonly loading?: ReactNode;
+    readonly controlError?: ((message: string) => ReactNode) | undefined;
+    readonly terminalError?: ((input: {
+        readonly error: MediaVideoPlayerError;
+        readonly retry: () => Promise<void>;
+        readonly back?: (() => Promise<void>) | undefined;
+    }) => ReactNode) | undefined;
+};

package/dist/player/player-slots.js

@@ -0,0 +1 @@
+export {};

package/dist/player/ready-player.d.ts

@@ -0,0 +1,34 @@
+import type { CSSProperties } from "react";
+import { type PlayerAnalyticsOptions } from "./use-player-analytics.js";
+import { type PlayerLabels } from "./player-labels.js";
+import type { PlayerSlots } from "./player-slots.js";
+import type { PlaybackSource, VideoPlaybackRequestAuthorization, VideoPreviewThumbnails } from "@hexdn/playback";
+import type { MediaVideoPlayerDebugHudComponent } from "./media-video-player-debug-hud-loader-contract.js";
+import { type MediaVideoPlayerProgressSnapshot, type MediaVideoPlayerQualityEvent } from "./use-media-video-player.js";
+export type ReadyPlayerProps = {
+    readonly getSource?: import("@hexdn/playback").PlaybackSourceResolver | undefined;
+    readonly autoPlay?: boolean | undefined;
+    readonly analytics?: PlayerAnalyticsOptions | undefined;
+    readonly style?: CSSProperties | undefined;
+    readonly sourceError?: string | null | undefined;
+    readonly onRetrySource?: (() => Promise<void>) | undefined;
+    readonly className?: string | undefined;
+    readonly initialPositionMs?: number | undefined;
+    readonly onBack?: (() => void) | undefined;
+    readonly onProgress?: ((snapshot: MediaVideoPlayerProgressSnapshot) => void) | undefined;
+    readonly onQualityEvent?: ((event: MediaVideoPlayerQualityEvent) => void) | undefined;
+    readonly onProtectedPlaybackRefresh?: (() => Promise<PlaybackSource | null | undefined>) | undefined;
+    readonly playbackIdentity?: string | undefined;
+    readonly posterUrl?: string | undefined;
+    readonly previewThumbnails?: VideoPreviewThumbnails | undefined;
+    readonly requestAuthorization?: VideoPlaybackRequestAuthorization | undefined;
+    readonly sourceUrl: string;
+    readonly expiresAt?: string | undefined;
+    readonly subtitle?: string | undefined;
+    readonly title?: string | undefined;
+    readonly labels?: Partial<PlayerLabels> | undefined;
+    readonly slots?: PlayerSlots | undefined;
+    readonly debugControls?: boolean | undefined;
+    readonly loadDebugHud?: (() => Promise<MediaVideoPlayerDebugHudComponent | null>) | undefined;
+};
+export declare function ReadyPlayer({ autoPlay, getSource, analytics, style, sourceError, onRetrySource, className, initialPositionMs, onBack, onProgress, onQualityEvent, onProtectedPlaybackRefresh, playbackIdentity, posterUrl, previewThumbnails, requestAuthorization, sourceUrl, expiresAt, subtitle, title, labels, slots, debugControls, loadDebugHud, }: ReadyPlayerProps): import("react").JSX.Element;