@hexdn/react 0.1.0

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

@@ -0,0 +1,333 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePlayerHost } from "./player-host.js";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { TooltipSurface } from "./tooltip-surface.js";
+import { useSliderPointer } from "./use-slider-pointer.js";
+import { findMediaThumbnailPreviewCue, loadMediaThumbnailPreviewCues, materializeMediaThumbnailPreviewCueImage, } from "@hexdn/playback/internal";
+import styles from "./media-video-player.module.css";
+import { areScrubberPreviewStatesEqual, buildPlayerSliderStyle, buildScrubberThumbnailPreviewStyle, emptyScrubberPreviewGeometry, measureScrubberPreviewGeometry, resolveScrubberPointerRatio, syncScrubberPreviewLayout, } from "./media-video-player-layout.js";
+import { formatMediaVideoTime } from "@hexdn/playback/internal";
+const maxScrubberThumbnailObjectUrls = 8;
+const maxScrubberThumbnailRequests = 2;
+function revokeObjectUrls(objectUrls) {
+    for (const objectUrl of objectUrls) {
+        URL.revokeObjectURL(objectUrl);
+    }
+}
+export function MediaVideoPlayerScrubber({ bufferProgress, currentTime, duration, hasSeekableDuration, onSeekChange, onSeekToTime, onShowControls, previewThumbnails, requestAuthorization, seekLabel, seekProgress, seekValueText, }) {
+    const { fetchResource } = usePlayerHost();
+    const [scrubberPreviewState, setScrubberPreviewState] = useState(null);
+    const [scrubberThumbnailCues, setScrubberThumbnailCues] = useState([]);
+    const [scrubberThumbnailObjectUrls, setScrubberThumbnailObjectUrls] = useState(() => new Map());
+    const [scrubberThumbnailPreviewRequestUrl, setScrubberThumbnailPreviewRequestUrl,] = useState(null);
+    const scrubberRef = useRef(null);
+    const scrubberPreviewFrameRef = useRef(null);
+    const scrubberPreviewGeometryRef = useRef(emptyScrubberPreviewGeometry);
+    const scrubberPreviewLatestRef = useRef(null);
+    const scrubberPreviewPendingRef = useRef(null);
+    const scrubberPreviewSurfaceRef = useRef(null);
+    const scrubberThumbnailCuesRef = useRef([]);
+    const scrubberThumbnailObjectUrlsRef = useRef(new Map());
+    const scrubberThumbnailRequestsRef = useRef(new Map());
+    const setScrubberPreviewStateCoalesced = useCallback((nextPreviewState) => {
+        scrubberPreviewPendingRef.current = nextPreviewState;
+        if (scrubberPreviewFrameRef.current !== null) {
+            return;
+        }
+        scrubberPreviewFrameRef.current = window.requestAnimationFrame(() => {
+            scrubberPreviewFrameRef.current = null;
+            const pendingPreviewState = scrubberPreviewPendingRef.current;
+            scrubberPreviewPendingRef.current = null;
+            setScrubberPreviewState((currentPreviewState) => areScrubberPreviewStatesEqual(currentPreviewState, pendingPreviewState)
+                ? currentPreviewState
+                : pendingPreviewState);
+        });
+    }, []);
+    const clearScrubberPreviewFrame = useCallback(() => {
+        if (scrubberPreviewFrameRef.current === null) {
+            return;
+        }
+        window.cancelAnimationFrame(scrubberPreviewFrameRef.current);
+        scrubberPreviewFrameRef.current = null;
+        scrubberPreviewPendingRef.current = null;
+    }, []);
+    const clearScrubberThumbnailImageCache = useCallback(() => {
+        for (const controller of scrubberThumbnailRequestsRef.current.values()) {
+            controller.abort();
+        }
+        scrubberThumbnailRequestsRef.current.clear();
+        revokeObjectUrls(scrubberThumbnailObjectUrlsRef.current.values());
+        scrubberThumbnailObjectUrlsRef.current = new Map();
+        setScrubberThumbnailObjectUrls(new Map());
+    }, []);
+    const replaceScrubberThumbnailCues = useCallback((cues) => {
+        setScrubberThumbnailCues((currentCues) => {
+            if (currentCues === cues) {
+                return currentCues;
+            }
+            scrubberThumbnailCuesRef.current = cues;
+            return cues;
+        });
+    }, []);
+    const renderedScrubberPreview = scrubberPreviewState?.preview ?? null;
+    const showScrubberPreview = hasSeekableDuration && scrubberPreviewState?.active === true;
+    const scrubberPreviewRawCue = useMemo(() => renderedScrubberPreview
+        ? findMediaThumbnailPreviewCue(scrubberThumbnailCues, renderedScrubberPreview.time)
+        : null, [renderedScrubberPreview, scrubberThumbnailCues]);
+    const scrubberPreviewCue = useMemo(() => {
+        if (!scrubberPreviewRawCue) {
+            return null;
+        }
+        if (!requestAuthorization) {
+            return scrubberPreviewRawCue;
+        }
+        const objectUrl = scrubberThumbnailObjectUrls.get(scrubberPreviewRawCue.imageUrl);
+        return objectUrl
+            ? {
+                ...scrubberPreviewRawCue,
+                imageUrl: objectUrl,
+            }
+            : null;
+    }, [
+        requestAuthorization,
+        scrubberPreviewRawCue,
+        scrubberThumbnailObjectUrls,
+    ]);
+    const scrubberPreviewFrameCue = scrubberPreviewCue ??
+        (requestAuthorization && scrubberPreviewRawCue
+            ? { ...scrubberPreviewRawCue, imageUrl: "" }
+            : null);
+    const scrubberPreviewTimeLabel = formatMediaVideoTime(renderedScrubberPreview?.time ?? currentTime);
+    const seekSliderStyle = buildPlayerSliderStyle(bufferProgress, renderedScrubberPreview, seekProgress);
+    const thumbnailPreviewUrl = previewThumbnails?.type === "webvtt_sprites" ? previewThumbnails.url : null;
+    const thumbnailPreviewCount = previewThumbnails?.type === "webvtt_sprites" ? previewThumbnails.count : 0;
+    const requestScrubberThumbnailPreview = useCallback(() => {
+        if (thumbnailPreviewUrl) {
+            setScrubberThumbnailPreviewRequestUrl(thumbnailPreviewUrl);
+        }
+    }, [thumbnailPreviewUrl]);
+    const applyScrubberPreviewLayout = useCallback((boundary, preview) => {
+        scrubberPreviewLatestRef.current = preview;
+        let geometry = scrubberPreviewGeometryRef.current;
+        const surface = scrubberPreviewSurfaceRef.current;
+        if (surface &&
+            (geometry.boundaryWidth <= 0 || geometry.surfaceWidth <= 0)) {
+            geometry = measureScrubberPreviewGeometry(boundary, surface);
+            scrubberPreviewGeometryRef.current = geometry;
+        }
+        syncScrubberPreviewLayout(boundary, preview, geometry);
+    }, []);
+    useEffect(() => {
+        const boundary = scrubberRef.current;
+        const surface = scrubberPreviewSurfaceRef.current;
+        if (!boundary || !surface) {
+            return;
+        }
+        let frameId = null;
+        const updateLayout = () => {
+            frameId = null;
+            const geometry = measureScrubberPreviewGeometry(boundary, surface);
+            scrubberPreviewGeometryRef.current = geometry;
+            if (scrubberPreviewLatestRef.current) {
+                syncScrubberPreviewLayout(boundary, scrubberPreviewLatestRef.current, geometry);
+            }
+        };
+        const scheduleLayoutUpdate = () => {
+            if (frameId === null) {
+                frameId = window.requestAnimationFrame(updateLayout);
+            }
+        };
+        const resizeObserver = typeof ResizeObserver === "undefined"
+            ? null
+            : new ResizeObserver(scheduleLayoutUpdate);
+        resizeObserver?.observe(boundary);
+        resizeObserver?.observe(surface);
+        window.addEventListener("resize", scheduleLayoutUpdate);
+        updateLayout();
+        return () => {
+            if (frameId !== null) {
+                window.cancelAnimationFrame(frameId);
+            }
+            resizeObserver?.disconnect();
+            window.removeEventListener("resize", scheduleLayoutUpdate);
+        };
+    }, []);
+    useEffect(() => {
+        if (!hasSeekableDuration || !thumbnailPreviewUrl) {
+            return;
+        }
+        // Request metadata only once the external media reports a seekable duration.
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setScrubberThumbnailPreviewRequestUrl((currentUrl) => currentUrl === thumbnailPreviewUrl ? currentUrl : thumbnailPreviewUrl);
+    }, [hasSeekableDuration, thumbnailPreviewUrl]);
+    useEffect(() => {
+        if (!thumbnailPreviewUrl ||
+            scrubberThumbnailPreviewRequestUrl !== thumbnailPreviewUrl) {
+            // Invalidate URLs and decoded image state together when the media source changes.
+            // eslint-disable-next-line react-hooks/set-state-in-effect
+            clearScrubberThumbnailImageCache();
+            replaceScrubberThumbnailCues([]);
+            return;
+        }
+        const previewUrl = thumbnailPreviewUrl;
+        const previewCueLimit = thumbnailPreviewCount;
+        const controller = new AbortController();
+        let cancelled = false;
+        replaceScrubberThumbnailCues([]);
+        clearScrubberThumbnailImageCache();
+        async function loadThumbnailPreviewCues() {
+            try {
+                const cues = await loadMediaThumbnailPreviewCues({
+                    fetchResource,
+                    limit: previewCueLimit,
+                    requestAuthorization,
+                    signal: controller.signal,
+                    url: previewUrl,
+                });
+                if (!cancelled) {
+                    replaceScrubberThumbnailCues(cues);
+                }
+            }
+            catch {
+                if (!controller.signal.aborted && !cancelled) {
+                    replaceScrubberThumbnailCues([]);
+                }
+            }
+        }
+        void loadThumbnailPreviewCues();
+        return () => {
+            cancelled = true;
+            controller.abort();
+        };
+    }, [
+        clearScrubberThumbnailImageCache,
+        fetchResource,
+        replaceScrubberThumbnailCues,
+        requestAuthorization,
+        scrubberThumbnailPreviewRequestUrl,
+        thumbnailPreviewCount,
+        thumbnailPreviewUrl,
+    ]);
+    useEffect(() => {
+        const authorization = requestAuthorization;
+        const rawCue = scrubberPreviewRawCue;
+        if (!authorization || !rawCue) {
+            return;
+        }
+        if (scrubberThumbnailObjectUrlsRef.current.has(rawCue.imageUrl) ||
+            scrubberThumbnailRequestsRef.current.has(rawCue.imageUrl)) {
+            return;
+        }
+        while (scrubberThumbnailRequestsRef.current.size >= maxScrubberThumbnailRequests) {
+            const [oldestUrl, oldestController] = scrubberThumbnailRequestsRef.current.entries().next().value ?? [];
+            if (!oldestUrl || !oldestController) {
+                break;
+            }
+            oldestController.abort();
+            scrubberThumbnailRequestsRef.current.delete(oldestUrl);
+        }
+        const controller = new AbortController();
+        scrubberThumbnailRequestsRef.current.set(rawCue.imageUrl, controller);
+        void materializeMediaThumbnailPreviewCueImage({
+            fetchResource,
+            cue: rawCue,
+            requestAuthorization: authorization,
+            signal: controller.signal,
+        })
+            .then((materializedCue) => {
+            if (scrubberThumbnailRequestsRef.current.get(rawCue.imageUrl) ===
+                controller) {
+                scrubberThumbnailRequestsRef.current.delete(rawCue.imageUrl);
+            }
+            if (!materializedCue) {
+                return;
+            }
+            if (controller.signal.aborted) {
+                URL.revokeObjectURL(materializedCue.imageUrl);
+                return;
+            }
+            setScrubberThumbnailObjectUrls((currentObjectUrls) => {
+                if (currentObjectUrls.has(rawCue.imageUrl)) {
+                    URL.revokeObjectURL(materializedCue.imageUrl);
+                    return currentObjectUrls;
+                }
+                const nextObjectUrls = new Map(currentObjectUrls);
+                while (nextObjectUrls.size >= maxScrubberThumbnailObjectUrls) {
+                    const [oldestUrl, oldestObjectUrl] = nextObjectUrls.entries().next().value ?? [];
+                    if (!oldestUrl || !oldestObjectUrl) {
+                        break;
+                    }
+                    URL.revokeObjectURL(oldestObjectUrl);
+                    nextObjectUrls.delete(oldestUrl);
+                }
+                nextObjectUrls.set(rawCue.imageUrl, materializedCue.imageUrl);
+                scrubberThumbnailObjectUrlsRef.current = nextObjectUrls;
+                return nextObjectUrls;
+            });
+        })
+            .catch(() => {
+            if (scrubberThumbnailRequestsRef.current.get(rawCue.imageUrl) ===
+                controller) {
+                scrubberThumbnailRequestsRef.current.delete(rawCue.imageUrl);
+            }
+        });
+    }, [requestAuthorization, scrubberPreviewRawCue, fetchResource]);
+    useEffect(() => () => {
+        clearScrubberPreviewFrame();
+        for (const controller of scrubberThumbnailRequestsRef.current.values()) {
+            controller.abort();
+        }
+        scrubberThumbnailRequestsRef.current.clear();
+        revokeObjectUrls(scrubberThumbnailObjectUrlsRef.current.values());
+        scrubberThumbnailCuesRef.current = [];
+        scrubberThumbnailObjectUrlsRef.current = new Map();
+    }, [clearScrubberPreviewFrame]);
+    const readScrubberPosition = useCallback((point) => {
+        const boundary = scrubberRef.current;
+        if (!boundary || !hasSeekableDuration || duration <= 0) {
+            return null;
+        }
+        scrubberPreviewGeometryRef.current = {
+            ...scrubberPreviewGeometryRef.current,
+            boundaryWidth: boundary.clientWidth,
+        };
+        const ratio = resolveScrubberPointerRatio(boundary.getBoundingClientRect(), point);
+        return ratio === null ? null : ratio * duration;
+    }, [duration, hasSeekableDuration]);
+    const updateScrubberPreview = useCallback((time) => {
+        if (time === null) {
+            scrubberPreviewLatestRef.current = null;
+            clearScrubberPreviewFrame();
+            setScrubberPreviewState((current) => current?.active ? { ...current, active: false } : current);
+            return;
+        }
+        const boundary = scrubberRef.current;
+        if (!boundary)
+            return;
+        onShowControls();
+        const nextPreview = { percent: (time / duration) * 100, time };
+        requestScrubberThumbnailPreview();
+        applyScrubberPreviewLayout(boundary, nextPreview);
+        setScrubberPreviewStateCoalesced({
+            active: true,
+            preview: nextPreview,
+        });
+    }, [
+        applyScrubberPreviewLayout,
+        clearScrubberPreviewFrame,
+        duration,
+        onShowControls,
+        requestScrubberThumbnailPreview,
+        setScrubberPreviewStateCoalesced,
+    ]);
+    const { cancel: hideScrubberPreview, pointerHandlers } = useSliderPointer({
+        disabled: !hasSeekableDuration,
+        readValue: readScrubberPosition,
+        onPreviewChange: updateScrubberPreview,
+        onCommit: onSeekToTime,
+    });
+    return (_jsxs("div", { className: styles.scrubber, "data-hexdn-disabled": hasSeekableDuration ? "false" : "true", "data-hexdn-preview-visible": showScrubberPreview ? "true" : "false", ref: scrubberRef, style: seekSliderStyle, ...pointerHandlers, children: [_jsx("span", { className: styles.scrubberBuffer }), _jsx("span", { className: styles.scrubberFill }), _jsx("span", { "aria-hidden": "true", className: styles.scrubberPreviewAnchor, children: _jsx("span", { className: styles.scrubberPreview }) }), _jsx("span", { "aria-hidden": "true", className: styles.scrubberPreviewPositioner, children: _jsxs(TooltipSurface, { className: styles.scrubberPreviewSurface, ref: scrubberPreviewSurfaceRef, children: [scrubberPreviewFrameCue ? (_jsx("span", { className: styles.scrubberPreviewFrame, style: buildScrubberThumbnailPreviewStyle(scrubberPreviewFrameCue) })) : null, _jsx("span", { className: styles.scrubberPreviewTime, children: scrubberPreviewTimeLabel })] }) }), _jsx("span", { className: styles.scrubberHead }), _jsx("input", { "aria-label": seekLabel, "aria-valuetext": seekValueText, className: styles.scrubberInput, disabled: !hasSeekableDuration, max: hasSeekableDuration ? duration : 0, min: 0, onBlur: hideScrubberPreview, onChange: onSeekChange, onFocus: onShowControls, onPointerUp: (event) => {
+                    event.currentTarget.blur();
+                }, step: 0.1, type: "range", value: hasSeekableDuration ? Math.min(Math.max(currentTime, 0), duration) : 0 })] }));
+}

package/dist/player/media-video-player-surface-click.d.ts

@@ -0,0 +1,8 @@
+export type MediaVideoPlayerSurfaceClickAction = "ignore" | "play-now" | "reveal-controls" | "toggle-after-double-click-window";
+export declare function resolveMediaVideoPlayerSurfaceClickAction(input: {
+    readonly clickCount: number;
+    readonly controlsVisible: boolean;
+    readonly ended: boolean;
+    readonly isCoarsePointer: boolean;
+    readonly paused: boolean;
+}): MediaVideoPlayerSurfaceClickAction;

package/dist/player/media-video-player-surface-click.js

@@ -0,0 +1,14 @@
+export function resolveMediaVideoPlayerSurfaceClickAction(input) {
+    if (input.clickCount > 1) {
+        return "ignore";
+    }
+    if (input.isCoarsePointer && !input.controlsVisible) {
+        return "reveal-controls";
+    }
+    // Starting playback must remain inside the click's user-activation window.
+    // Safari rejects audible play requests deferred through a timer. Pausing can
+    // still wait briefly so a double click only enters fullscreen.
+    return input.paused || input.ended
+        ? "play-now"
+        : "toggle-after-double-click-window";
+}

package/dist/player/media-video-player-view-state.d.ts

@@ -0,0 +1,21 @@
+export declare function resolveMediaVideoPlayerViewState(input: {
+    readonly bufferedEnd: number;
+    readonly currentTime: number;
+    readonly duration: number;
+    readonly hasError: boolean;
+    readonly isControlsVisible: boolean;
+    readonly isMediaReady: boolean;
+    readonly isMediaWaiting: boolean;
+    readonly isMuted: boolean;
+    readonly isPresentationReady: boolean;
+    readonly volume: number;
+}): {
+    bufferProgress: string;
+    controlsAreVisible: boolean;
+    effectiveVolume: number;
+    hasSeekableDuration: boolean;
+    isBuffering: boolean;
+    isLoading: boolean;
+    seekProgress: string;
+    volumeProgress: string;
+};

package/dist/player/media-video-player-view-state.js

@@ -0,0 +1,31 @@
+import { shouldShowMediaLoadingIndicator } from "@hexdn/playback/internal";
+import { toMediaProgressPercent } from "@hexdn/playback/internal";
+export function resolveMediaVideoPlayerViewState(input) {
+    const hasSeekableDuration = input.duration > 0;
+    const isBuffering = input.isPresentationReady && input.isMediaReady && input.isMediaWaiting;
+    const isLoading = shouldShowMediaLoadingIndicator({
+        hasError: input.hasError,
+        isMediaReady: input.isMediaReady,
+        isMediaWaiting: input.isMediaWaiting,
+        isPresentationReady: input.isPresentationReady,
+    });
+    const controlsAreVisible = input.isControlsVisible ||
+        !input.isPresentationReady ||
+        isLoading ||
+        input.hasError;
+    const effectiveVolume = input.isMuted ? 0 : input.volume;
+    return {
+        bufferProgress: hasSeekableDuration
+            ? toMediaProgressPercent(input.bufferedEnd / input.duration)
+            : "0%",
+        controlsAreVisible,
+        effectiveVolume,
+        hasSeekableDuration,
+        isBuffering,
+        isLoading,
+        seekProgress: hasSeekableDuration
+            ? toMediaProgressPercent(input.currentTime / input.duration)
+            : "0%",
+        volumeProgress: toMediaProgressPercent(effectiveVolume),
+    };
+}