@hexdn/react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Havikware
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,160 @@
+# @hexdn/react
+
+Ready-made, customizable playback and upload UI. Import only the entry point you
+need. Styles are included; use labels, CSS variables and custom content to fit
+your application. Keep HexDN environment API keys on your server.
+
+## Player
+
+```tsx
+import { Player } from "@hexdn/react/player";
+
+<Player source="https://cdn.example/video/master.m3u8" title="My video" />;
+```
+
+For restricted video, expose a tenant endpoint that authorizes the viewer and
+returns `hexdn.playback.createSource(...)` for protected playback or
+`hexdn.playback.createSignedSource(...)` for signed playback, using
+`@hexdn/sdk`:
+
+```tsx
+<Player sourceEndpoint="/api/videos/42/playback" title="My video" />
+```
+
+The player acquires and renews the source through that endpoint. `getSource`
+supports custom acquisition. Labels, themes and slots customize the controls;
+integration callbacks connect application navigation, preferences and progress
+persistence. Ready public sources need no credential request. The HLS engine
+loads only when required.
+
+Playback-origin restrictions are optional. If your HexDN environment has
+playback origins configured, include your application's origin; an empty
+playback-origin list does not restrict origins.
+
+To enable independent analytics with HexDN collection, first provision a
+collection key on your trusted server using `@hexdn/sdk`:
+
+```ts
+import { HexDN } from "@hexdn/sdk";
+
+const hexdn = new HexDN({ apiKey: configuration.hexdnApiKey });
+const key = await hexdn.analytics.collectionKeys.create({
+  origins: ["https://app.example"],
+});
+const collectionKey = key.id;
+const collectionEndpoint = "https://api.hexdn.com/v1/analytics/collect";
+```
+
+Use your application's exact origins (scheme, host and port), without wildcards.
+Provision once per origin configuration, not per view. Publish only
+`collectionKey` and `collectionEndpoint` through your application's public
+configuration; keep the environment API key on the server. If you configure a
+different HexDN API base, use its `/v1/analytics/collect` URL. These collection
+origins are independent of playback and upload origin settings.
+
+Pass that public configuration and a stable video identity to the player:
+
+```tsx
+import { createFetchTransport } from "@hexdn/analytics";
+
+const analytics = {
+  video: { id: "your-video-id" },
+  transport: createFetchTransport({
+    endpoint: collectionEndpoint,
+    collectionKey,
+  }),
+};
+
+<Player sourceEndpoint="/api/videos/42/playback" analytics={analytics} />;
+```
+
+An existing `beginPlaybackAttempt()` handle can be supplied as
+`analytics.pendingAttempt` when play intent precedes mounting the player.
+Credential changes retain the attempt. Product view rules and resume persistence
+remain application responsibilities.
+
+A source descriptor's `playbackId` supplies the default content identity.
+Credential URL changes with the same ID preserve position, playback speed and
+play/pause intent. Use `playbackIdentity` to override it; external sources
+without an ID use their URL. Analytics keeps its separately supplied video
+identity.
+
+## Uploader
+
+Before browser uploads, have your HexDN operator register the application's
+origin in the environment with `purpose=upload`, include it in the reviewed
+deployment upload origins, and apply the source-storage CORS policy. The
+environment and storage policies must both allow the origin; an upload
+capability alone does not configure browser access. Origin provisioning is
+currently an operator task, not a method on the public server SDK.
+
+```tsx
+import { Uploader } from "@hexdn/react/upload";
+
+<Uploader
+  getUpload={async (file, { signal, idempotencyKey }) => {
+    const response = await fetch("/api/video-uploads", {
+      method: "POST",
+      signal,
+      headers: {
+        "Content-Type": "application/json",
+        "Idempotency-Key": idempotencyKey,
+      },
+      body: JSON.stringify({
+        filename: file.name,
+        byteLength: file.size,
+        mimeType: file.type,
+      }),
+    });
+    if (!response.ok) throw new Error("Upload could not be authorized.");
+    const { upload } = await response.json();
+    return upload;
+  }}
+  onComplete={() => refreshApplicationVideo()}
+/>;
+```
+
+Your endpoint authenticates the uploader, chooses outputs, and returns a scoped
+`{ upload: { url, token } }` capability. Forward the supplied idempotency key to
+asset creation: the component preserves it through an uncertain creation retry.
+An already-created capability can instead be passed as `upload={capability}`.
+
+The default UI supports file selection, dropping a file, progress, pause and
+resume/retry. Media bytes go directly to storage through `@hexdn/upload`. Resume
+uses the same capability and original file, including authoritative part
+reconciliation and completion recovery. Upload completion confirms receipt of
+source bytes; processing/readiness comes from the application's normal API reads
+or webhooks.
+
+Pause and default unmount cleanup stop local transfer only. Remote cancellation
+is a separate explicit application action. Set `abortOnUnmount={false}` only
+when the application owns a continuing background workflow. The `accept` prop is
+a file-picker hint; enforce product and content rules on your server.
+
+Customize labels and `--hexdn-upload-color`, `--hexdn-upload-background`,
+`--hexdn-upload-border`, `--hexdn-upload-radius`, and `--hexdn-upload-accent`.
+For an existing application, use the same controller with your own presentation:
+
+```tsx
+import { Uploader, useUploader } from "@hexdn/react/upload";
+
+const uploader = useUploader({ upload: capability });
+
+<Uploader controller={uploader} dropEnabled={false}>
+  <button disabled={uploader.isBusy} onClick={uploader.openPicker}>
+    Choose video
+  </button>
+  <progress max={100} value={uploader.state.progress?.percent ?? 0} />
+</Uploader>;
+```
+
+`children` can also be a render function receiving the controller. Advanced
+applications can supply `transfer(file, { signal, onProgress, idempotencyKey })`
+to wrap their existing authorization and product workflow around the upload
+core. That callback owns retry/resume semantics and must distinguish local abort
+from any destructive product action. Errors remain available as
+`controller.state.error`; raw provider errors are not displayed by the default
+UI.
+
+Neither uploader entry point nor upload core imports the player, HLS, or
+analytics.

package/dist/player/bounded-surface-position.d.ts

@@ -0,0 +1,8 @@
+export type BoundedHorizontalSurfaceInput = {
+    readonly anchorCenter: number;
+    readonly boundaryEnd: number;
+    readonly boundaryStart: number;
+    readonly gutter: number;
+    readonly surfaceWidth: number;
+};
+export declare function resolveBoundedHorizontalSurfaceLeft({ anchorCenter, boundaryEnd, boundaryStart, gutter, surfaceWidth, }: BoundedHorizontalSurfaceInput): number;

package/dist/player/bounded-surface-position.js

@@ -0,0 +1,8 @@
+export function resolveBoundedHorizontalSurfaceLeft({ anchorCenter, boundaryEnd, boundaryStart, gutter, surfaceWidth, }) {
+    const availableGutter = Math.max((boundaryEnd - boundaryStart - surfaceWidth) / 2, 0);
+    const effectiveGutter = Math.min(Math.max(gutter, 0), availableGutter);
+    const minimumLeft = boundaryStart + effectiveGutter;
+    const maximumLeft = boundaryEnd - surfaceWidth - effectiveGutter;
+    const naturalLeft = anchorCenter - surfaceWidth / 2;
+    return Math.min(Math.max(naturalLeft, minimumLeft), Math.max(minimumLeft, maximumLeft));
+}

package/dist/player/hexdn-player-control-popover.module.css

@@ -0,0 +1,113 @@
+.host {
+  --hexdn-player-control-popover-header-bg: var(
+    --hexdn-popover-header-bg,
+    rgba(244, 237, 228, 0.035)
+  );
+  --hexdn-player-control-popover-surface-bg: var(
+    --hexdn-player-floating-surface-bg,
+    var(
+      --hexdn-popover-surface-bg,
+      var(--hexdn-glass-strong, rgba(20, 17, 15, 0.8))
+    )
+  );
+  --hexdn-player-control-popover-bg: var(
+    --hexdn-player-control-popover-surface-bg
+  );
+  --hexdn-player-control-popover-duration: var(--hexdn-fast, 120ms);
+  --hexdn-player-control-popover-enter-offset: var(--hexdn-s-2, 8px);
+  --hexdn-player-control-popover-scale-x: 1;
+  --hexdn-player-control-popover-scale-y: 1;
+  --hexdn-player-control-popover-transform-origin: 50% 100%;
+
+  position: relative;
+  display: inline-flex;
+  flex: 0 0 auto;
+}
+
+.surface {
+  position: absolute;
+  z-index: var(--hexdn-z-tooltip, 100);
+  width: var(--hexdn-player-control-popover-width, auto);
+  min-width: var(
+    --hexdn-player-control-popover-min-width,
+    min(calc(var(--hexdn-s-10, 128px) * 2.5), 78vw)
+  );
+  max-width: var(
+    --hexdn-player-control-popover-max-width,
+    min(calc(var(--hexdn-s-10, 128px) * 3.5), 84vw)
+  );
+  border: 0;
+  border-radius: var(
+    --hexdn-player-control-popover-radius,
+    var(--hexdn-popover-radius, 12px)
+  );
+  background: var(--hexdn-player-control-popover-bg);
+  -webkit-backdrop-filter: blur(var(--hexdn-glass-blur, 14px))
+    saturate(var(--hexdn-glass-saturate, 1.2));
+  backdrop-filter: blur(var(--hexdn-glass-blur, 14px))
+    saturate(var(--hexdn-glass-saturate, 1.2));
+  box-shadow: var(--hexdn-glass-shadow, 0 8px 24px rgba(0, 0, 0, 0.5));
+  color: var(--hexdn-paper, #f4ede4);
+  cursor: inherit;
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(
+      var(--hexdn-player-control-popover-transform-x, 0),
+      var(--hexdn-player-control-popover-enter-offset)
+    )
+    scaleX(var(--hexdn-player-control-popover-scale-x))
+    scaleY(var(--hexdn-player-control-popover-scale-y));
+  transform-origin: var(--hexdn-player-control-popover-transform-origin);
+  transition:
+    opacity var(--hexdn-player-control-popover-duration)
+      var(--hexdn-ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
+    transform var(--hexdn-player-control-popover-duration)
+      var(--hexdn-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
+}
+
+.surface::before {
+  position: absolute;
+  right: 0;
+  left: 0;
+  content: "";
+}
+
+.host[data-hexdn-side="top"] .surface {
+  bottom: 100%;
+  margin-bottom: var(--hexdn-s-4, 16px);
+}
+
+.host[data-hexdn-side="top"] .surface::before {
+  bottom: calc(var(--hexdn-s-4, 16px) * -1);
+  height: var(--hexdn-s-4, 16px);
+}
+
+.host[data-hexdn-align="center"] .surface {
+  left: var(--hexdn-player-control-popover-left, 50%);
+  --hexdn-player-control-popover-transform-x: -50%;
+}
+
+.host[data-hexdn-align="start"] .surface {
+  left: 0;
+}
+
+.host[data-hexdn-align="end"] .surface {
+  right: 0;
+}
+
+.host[data-hexdn-open="true"] .surface {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translate(var(--hexdn-player-control-popover-transform-x, 0), 0)
+    scaleX(1) scaleY(1);
+}
+
+@media (max-width: 640px) {
+  .surface {
+    min-width: var(
+      --hexdn-player-control-popover-min-width,
+      min(calc(var(--hexdn-s-10, 128px) * 2.25), 86vw)
+    );
+    max-width: var(--hexdn-player-control-popover-max-width, 86vw);
+  }
+}

package/dist/player/index.d.ts

@@ -0,0 +1,25 @@
+import { type PlaybackSource, type PlaybackSourceResolver } from "@hexdn/playback";
+import { type PlayerIntegration } from "./player-host.js";
+import { type ReadyPlayerProps } from "./ready-player.js";
+export type { PlayerLabels } from "./player-labels.js";
+export { defaultPlayerLabels } from "./player-labels.js";
+export type { PlayerSlots, PlayerSlotControls } from "./player-slots.js";
+export type { PlayerIntegration } from "./player-host.js";
+export type { PlayerAnalyticsOptions } from "./use-player-analytics.js";
+export type { MediaVideoPlayerDebugHudComponent } from "./media-video-player-debug-hud-loader-contract.js";
+export type { MediaVideoPlayerProgressSnapshot, MediaVideoPlayerProgressReason, MediaVideoPlayerQualityEvent, } from "./use-media-video-player.js";
+export { PlayerControlPopover } from "./player-control-popover.js";
+export type PlayerTheme = {
+    readonly accentColor?: string | undefined;
+    readonly backgroundColor?: string | undefined;
+    readonly fontFamily?: string | undefined;
+};
+export type PlayerProps = Omit<ReadyPlayerProps, "sourceUrl" | "requestAuthorization" | "previewThumbnails" | "expiresAt" | "sourceError" | "onRetrySource"> & {
+    readonly source?: string | PlaybackSource | undefined;
+    readonly sourceEndpoint?: string | undefined;
+    readonly getSource?: PlaybackSourceResolver | undefined;
+    readonly integration?: PlayerIntegration | undefined;
+    readonly theme?: PlayerTheme | undefined;
+};
+/** Public URLs are ready immediately. Only an explicit endpoint/resolver acquires credentials. */
+export declare function Player({ source, sourceEndpoint, getSource, integration, theme, autoPlay, ...props }: PlayerProps): import("react").JSX.Element;

package/dist/player/index.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createPlaybackSourceEndpoint, } from "@hexdn/playback";
+import { useMemo } from "react";
+import { PlayerHost } from "./player-host.js";
+import { ReadyPlayer } from "./ready-player.js";
+export { defaultPlayerLabels } from "./player-labels.js";
+export { PlayerControlPopover } from "./player-control-popover.js";
+/** Public URLs are ready immediately. Only an explicit endpoint/resolver acquires credentials. */
+export function Player({ source, sourceEndpoint, getSource, integration, theme, autoPlay = false, ...props }) {
+    const readySource = useMemo(() => (typeof source === "string" ? { sourceUrl: source } : source), [source]);
+    const resolver = useMemo(() => getSource ??
+        (sourceEndpoint
+            ? createPlaybackSourceEndpoint({ endpoint: sourceEndpoint })
+            : undefined), [getSource, sourceEndpoint]);
+    const style = {
+        ...(theme?.accentColor
+            ? {
+                "--hexdn-progress-fill": theme.accentColor,
+                "--hexdn-progress-leading-edge": theme.accentColor,
+            }
+            : {}),
+        ...(theme?.backgroundColor
+            ? { "--hexdn-player-canvas": theme.backgroundColor }
+            : {}),
+        ...(theme?.fontFamily
+            ? { "--hexdn-player-font-family": theme.fontFamily }
+            : {}),
+        ...props.style,
+    };
+    return (_jsx(PlayerHost, { integration: integration, children: _jsx(ReadyPlayer, { ...props, ...readySource, sourceUrl: readySource?.sourceUrl ?? "", playbackIdentity: props.playbackIdentity ?? readySource?.playbackId, getSource: resolver, autoPlay: autoPlay, style: style }) }));
+}

package/dist/player/media-video-player-control-hold.d.ts

@@ -0,0 +1,2 @@
+export type MediaVideoPlayerControlHoldReason = "bottom" | "extension" | "volume";
+export declare function setMediaVideoPlayerControlHold(activeReasons: Set<MediaVideoPlayerControlHoldReason>, reason: MediaVideoPlayerControlHoldReason, active: boolean): boolean;

package/dist/player/media-video-player-control-hold.js

@@ -0,0 +1,9 @@
+export function setMediaVideoPlayerControlHold(activeReasons, reason, active) {
+    if (active) {
+        activeReasons.add(reason);
+    }
+    else {
+        activeReasons.delete(reason);
+    }
+    return activeReasons.size > 0;
+}

package/dist/player/media-video-player-debug-hud-loader-contract.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentType } from "react";
+import type { MediaVideoPlayerDebugSnapshot } from "./use-media-video-player.js";
+export type MediaVideoPlayerDebugHudComponent = ComponentType<{
+    readonly debug: MediaVideoPlayerDebugSnapshot;
+}>;

package/dist/player/media-video-player-debug-hud-loader-contract.js

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

package/dist/player/media-video-player-keyboard.d.ts

@@ -0,0 +1,5 @@
+type MediaVideoPlayerKeyboardShortcut = "restart" | "seek-backward" | "seek-forward" | "toggle-playback";
+export declare function readMediaVideoPlayerKeyboardShortcut(event: KeyboardEvent): MediaVideoPlayerKeyboardShortcut | null;
+export declare function shouldIgnoreMediaVideoPlayerKeyboardShortcut(event: KeyboardEvent): boolean;
+export declare function blurFocusedMediaVideoPlayerControl(player: HTMLDivElement | null): void;
+export {};

package/dist/player/media-video-player-keyboard.js

@@ -0,0 +1,52 @@
+const PLAYER_CONTROL_SELECTOR = "a, button, input, select, textarea, [contenteditable='true'], [role='button'], [role='slider']";
+function isPlaybackSpaceShortcut(event) {
+    return (event.code === "Space" || event.key === " " || event.key === "Spacebar");
+}
+export function readMediaVideoPlayerKeyboardShortcut(event) {
+    if (isPlaybackSpaceShortcut(event)) {
+        return "toggle-playback";
+    }
+    if (event.key === "0" ||
+        event.code === "Digit0" ||
+        event.code === "Numpad0") {
+        return "restart";
+    }
+    if (event.key === "ArrowLeft") {
+        return "seek-backward";
+    }
+    if (event.key === "ArrowRight") {
+        return "seek-forward";
+    }
+    return null;
+}
+export function shouldIgnoreMediaVideoPlayerKeyboardShortcut(event) {
+    if (event.defaultPrevented || event.repeat) {
+        return true;
+    }
+    if (event.altKey || event.ctrlKey || event.metaKey) {
+        return true;
+    }
+    const target = event.target;
+    if (typeof HTMLElement === "undefined" || !(target instanceof HTMLElement)) {
+        return false;
+    }
+    if (target.isContentEditable) {
+        return true;
+    }
+    return Boolean(target.closest(PLAYER_CONTROL_SELECTOR));
+}
+export function blurFocusedMediaVideoPlayerControl(player) {
+    if (typeof document === "undefined") {
+        return;
+    }
+    const activeElement = document.activeElement;
+    if (!player ||
+        !(activeElement instanceof HTMLElement) ||
+        !player.contains(activeElement)) {
+        return;
+    }
+    const focusedControl = activeElement.closest(PLAYER_CONTROL_SELECTOR);
+    if (focusedControl instanceof HTMLElement) {
+        focusedControl.blur();
+    }
+}

package/dist/player/media-video-player-layout.d.ts

@@ -0,0 +1,64 @@
+import type { CSSProperties } from "react";
+import type { MediaThumbnailPreviewCue } from "@hexdn/playback/internal";
+export type PlayerSliderStyle = CSSProperties & {
+    "--hexdn-video-buffer": string;
+    "--hexdn-video-preview": string;
+    "--hexdn-video-progress": string;
+};
+export type VolumeSliderStyle = CSSProperties & {
+    "--hexdn-video-volume": string;
+    "--hexdn-video-volume-ratio": number;
+};
+export type CaptionViewportStyle = CSSProperties & {
+    "--hexdn-player-video-bottom": string;
+    "--hexdn-player-video-left": string;
+    "--hexdn-player-video-right": string;
+};
+export type ScrubberThumbnailPreviewStyle = CSSProperties & {
+    "--hexdn-video-preview-image": string;
+    "--hexdn-video-preview-x": string;
+    "--hexdn-video-preview-y": string;
+    "--hexdn-video-preview-width": string;
+    "--hexdn-video-preview-height": string;
+};
+export type ScrubberPreview = {
+    readonly percent: number;
+    readonly time: number;
+};
+export type ScrubberPreviewState = {
+    readonly active: boolean;
+    readonly preview: ScrubberPreview;
+};
+export type ScrubberPreviewGeometry = {
+    readonly boundaryWidth: number;
+    readonly surfaceWidth: number;
+};
+export declare const emptyScrubberPreviewGeometry: {
+    boundaryWidth: number;
+    surfaceWidth: number;
+};
+export declare function areScrubberPreviewStatesEqual(left: ScrubberPreviewState | null, right: ScrubberPreviewState | null): boolean;
+export type VideoViewportInsets = {
+    readonly bottom: number;
+    readonly left: number;
+    readonly right: number;
+};
+export declare const emptyVideoViewportInsets: {
+    bottom: number;
+    left: number;
+    right: number;
+};
+export declare function readVideoViewportInsets(video: HTMLVideoElement): VideoViewportInsets;
+export declare function areVideoViewportInsetsEqual(current: VideoViewportInsets, next: VideoViewportInsets): boolean;
+export declare function clampScrubberRatio(value: number): number;
+export declare function resolveScrubberPointerRatio(rect: Pick<DOMRect, "left" | "top" | "width" | "height">, point: {
+    readonly clientX: number;
+    readonly clientY: number;
+}): number | null;
+export declare function formatCssImageUrl(value: string): string;
+export declare function buildScrubberThumbnailPreviewStyle(cue: MediaThumbnailPreviewCue): ScrubberThumbnailPreviewStyle;
+export declare function measureScrubberPreviewGeometry(boundary: HTMLElement, surface: HTMLElement): ScrubberPreviewGeometry;
+export declare function syncScrubberPreviewLayout(element: HTMLElement, preview: ScrubberPreview, geometry: ScrubberPreviewGeometry): void;
+export declare function buildPlayerSliderStyle(bufferProgress: string, preview: ScrubberPreview | null, seekProgress: string): PlayerSliderStyle;
+export declare function buildVolumeSliderStyle(effectiveVolume: number, volumeProgress: string): VolumeSliderStyle;
+export declare function buildCaptionViewportStyle(insets: VideoViewportInsets): CaptionViewportStyle;

package/dist/player/media-video-player-layout.js

@@ -0,0 +1,110 @@
+import { resolveBoundedHorizontalSurfaceLeft } from "./bounded-surface-position.js";
+import { resolveContainedMediaViewportInsets } from "@hexdn/playback/internal";
+export const emptyScrubberPreviewGeometry = {
+    boundaryWidth: 0,
+    surfaceWidth: 0,
+};
+function areScrubberPreviewsEqual(left, right) {
+    return left.percent === right.percent && left.time === right.time;
+}
+export function areScrubberPreviewStatesEqual(left, right) {
+    if (left === right) {
+        return true;
+    }
+    if (!left || !right || left.active !== right.active) {
+        return false;
+    }
+    return areScrubberPreviewsEqual(left.preview, right.preview);
+}
+export const emptyVideoViewportInsets = {
+    bottom: 0,
+    left: 0,
+    right: 0,
+};
+export function readVideoViewportInsets(video) {
+    return resolveContainedMediaViewportInsets({
+        containerHeight: video.clientHeight,
+        containerWidth: video.clientWidth,
+        mediaHeight: video.videoHeight,
+        mediaWidth: video.videoWidth,
+    });
+}
+export function areVideoViewportInsetsEqual(current, next) {
+    return (current.bottom === next.bottom &&
+        current.left === next.left &&
+        current.right === next.right);
+}
+export function clampScrubberRatio(value) {
+    if (!Number.isFinite(value)) {
+        return 0;
+    }
+    return Math.min(Math.max(value, 0), 1);
+}
+export function resolveScrubberPointerRatio(rect, point) {
+    if (rect.width <= 0 || rect.height <= 0)
+        return null;
+    // The portrait Watch frame rotates 90deg clockwise: the track's start/end
+    // then run top-to-bottom on screen, while its layout width stays unchanged.
+    return clampScrubberRatio(rect.height > rect.width
+        ? (point.clientY - rect.top) / rect.height
+        : (point.clientX - rect.left) / rect.width);
+}
+export function formatCssImageUrl(value) {
+    return `url("${value.replace(/["\\\n\r\f]/gu, "\\$&")}")`;
+}
+export function buildScrubberThumbnailPreviewStyle(cue) {
+    return {
+        "--hexdn-video-preview-height": `${cue.height}px`,
+        "--hexdn-video-preview-image": cue.imageUrl
+            ? formatCssImageUrl(cue.imageUrl)
+            : "none",
+        "--hexdn-video-preview-width": `${cue.width}px`,
+        "--hexdn-video-preview-x": `${cue.x}px`,
+        "--hexdn-video-preview-y": `${cue.y}px`,
+    };
+}
+export function measureScrubberPreviewGeometry(boundary, surface) {
+    const boundaryWidth = boundary.clientWidth;
+    boundary.style.setProperty("--hexdn-video-preview-surface-max-width", `${boundaryWidth}px`);
+    return {
+        boundaryWidth,
+        surfaceWidth: surface.offsetWidth,
+    };
+}
+export function syncScrubberPreviewLayout(element, preview, geometry) {
+    element.style.setProperty("--hexdn-video-preview", `${preview.percent}%`);
+    if (geometry.boundaryWidth <= 0 || geometry.surfaceWidth <= 0) {
+        return;
+    }
+    const anchorCenter = clampScrubberRatio(preview.percent / 100) * geometry.boundaryWidth;
+    const surfaceLeft = resolveBoundedHorizontalSurfaceLeft({
+        anchorCenter,
+        boundaryEnd: geometry.boundaryWidth,
+        boundaryStart: 0,
+        gutter: 16,
+        surfaceWidth: geometry.surfaceWidth,
+    });
+    const surfaceOrigin = Math.min(Math.max(anchorCenter - surfaceLeft, 0), geometry.surfaceWidth);
+    element.style.setProperty("--hexdn-video-preview-surface-left", `${surfaceLeft}px`);
+    element.style.setProperty("--hexdn-video-preview-surface-origin", `${surfaceOrigin}px`);
+}
+export function buildPlayerSliderStyle(bufferProgress, preview, seekProgress) {
+    return {
+        "--hexdn-video-buffer": bufferProgress,
+        "--hexdn-video-preview": preview ? `${preview.percent}%` : seekProgress,
+        "--hexdn-video-progress": seekProgress,
+    };
+}
+export function buildVolumeSliderStyle(effectiveVolume, volumeProgress) {
+    return {
+        "--hexdn-video-volume": volumeProgress,
+        "--hexdn-video-volume-ratio": effectiveVolume,
+    };
+}
+export function buildCaptionViewportStyle(insets) {
+    return {
+        "--hexdn-player-video-bottom": `${insets.bottom}px`,
+        "--hexdn-player-video-left": `${insets.left}px`,
+        "--hexdn-player-video-right": `${insets.right}px`,
+    };
+}

package/dist/player/media-video-player-scrubber.d.ts

@@ -0,0 +1,16 @@
+import type { VideoPlaybackRequestAuthorization, VideoPreviewThumbnails } from "@hexdn/playback/internal";
+import { type ChangeEventHandler } from "react";
+export declare function MediaVideoPlayerScrubber({ bufferProgress, currentTime, duration, hasSeekableDuration, onSeekChange, onSeekToTime, onShowControls, previewThumbnails, requestAuthorization, seekLabel, seekProgress, seekValueText, }: {
+    readonly bufferProgress: string;
+    readonly currentTime: number;
+    readonly duration: number;
+    readonly hasSeekableDuration: boolean;
+    readonly onSeekChange: ChangeEventHandler<HTMLInputElement>;
+    readonly onSeekToTime: (timeSeconds: number) => void;
+    readonly onShowControls: () => void;
+    readonly previewThumbnails?: VideoPreviewThumbnails | undefined;
+    readonly requestAuthorization?: VideoPlaybackRequestAuthorization | undefined;
+    readonly seekLabel: string;
+    readonly seekProgress: string;
+    readonly seekValueText: string;
+}): import("react").JSX.Element;