pixelize-design-library 2.4.2-beta.42 → 2.4.2-beta.44

package/dist/Components/MediaViewer/components/MediaScrubber.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const focusRing_1 = require("../../../Theme/tokens/builders/focusRing");
+const useViewerChrome_1 = require("../useViewerChrome");
+const STEP_SECONDS = 5;
+const BIG_STEP_SECONDS = 30;
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+/** Shared scrubber for video and audio — buffered range, hover/drag time tooltip, full keyboard slider semantics. */
+const MediaScrubber = ({ value, max, buffered = [], onSeek, onPreview, ariaLabel, ariaValueText, formatTime, isDisabled = false, testId, }) => {
+    const chrome = (0, useViewerChrome_1.useViewerChrome)();
+    const trackRef = (0, react_1.useRef)(null);
+    const dragging = (0, react_1.useRef)(false);
+    const [hovering, setHovering] = (0, react_1.useState)(false);
+    const [previewX, setPreviewX] = (0, react_1.useState)(null);
+    const ring = (0, focusRing_1.settleBetween)(chrome.accent, [chrome.stage, chrome.raised, chrome.hover]);
+    const disabled = isDisabled || !Number.isFinite(max) || max <= 0;
+    const fraction = disabled ? 0 : clamp(value / max, 0, 1);
+    const fractionAt = (clientX) => {
+        var _a;
+        const rect = (_a = trackRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!rect || rect.width === 0)
+            return 0;
+        return clamp((clientX - rect.left) / rect.width, 0, 1);
+    };
+    const previewAt = (clientX) => {
+        const f = fractionAt(clientX);
+        setPreviewX(f * 100);
+        onPreview === null || onPreview === void 0 ? void 0 : onPreview(f * max);
+    };
+    const endPreview = () => {
+        setPreviewX(null);
+        onPreview === null || onPreview === void 0 ? void 0 : onPreview(null);
+    };
+    const onPointerDown = (event) => {
+        if (disabled)
+            return;
+        event.currentTarget.setPointerCapture(event.pointerId);
+        dragging.current = true;
+        previewAt(event.clientX);
+    };
+    const onPointerMove = (event) => {
+        if (disabled)
+            return;
+        if (dragging.current)
+            previewAt(event.clientX);
+        else if (hovering)
+            previewAt(event.clientX);
+    };
+    const onPointerUp = (event) => {
+        if (disabled || !dragging.current)
+            return;
+        dragging.current = false;
+        onSeek(fractionAt(event.clientX) * max);
+        if (!hovering)
+            endPreview();
+    };
+    const onKeyDown = (event) => {
+        if (disabled)
+            return;
+        let next = null;
+        if (event.key === "ArrowRight" || event.key === "ArrowUp")
+            next = value + STEP_SECONDS;
+        else if (event.key === "ArrowLeft" || event.key === "ArrowDown")
+            next = value - STEP_SECONDS;
+        else if (event.key === "PageUp")
+            next = value + BIG_STEP_SECONDS;
+        else if (event.key === "PageDown")
+            next = value - BIG_STEP_SECONDS;
+        else if (event.key === "Home")
+            next = 0;
+        else if (event.key === "End")
+            next = max;
+        if (next === null)
+            return;
+        event.preventDefault();
+        onSeek(clamp(next, 0, max));
+    };
+    const trackH = hovering || dragging.current ? "6px" : "4px";
+    const previewLabel = previewX !== null ? formatTime((previewX / 100) * max) : null;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", py: 2, cursor: disabled ? "default" : "pointer", onMouseEnter: () => setHovering(true), onMouseLeave: () => {
+            setHovering(false);
+            if (!dragging.current)
+                endPreview();
+        }, children: [previewLabel !== null ? ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", bottom: "100%", left: `${previewX}%`, transform: "translateX(-50%)", mb: 1, px: 2, py: 0.5, borderRadius: "4px", bg: chrome.raised, color: chrome.ink, fontSize: "xs", fontWeight: 600, whiteSpace: "nowrap", pointerEvents: "none", sx: { fontVariantNumeric: "tabular-nums" }, "data-testid": testId ? `${testId}-tooltip` : undefined, children: previewLabel })) : null, (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: trackRef, role: "slider", tabIndex: disabled ? -1 : 0, "aria-label": ariaLabel, "aria-orientation": "horizontal", "aria-valuemin": 0, "aria-valuemax": disabled ? 0 : max, "aria-valuenow": disabled ? 0 : value, "aria-valuetext": disabled ? undefined : ariaValueText(value), "aria-disabled": disabled || undefined, position: "relative", h: trackH, borderRadius: "full", bg: chrome.track, transition: "height 0.12s ease-out", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, onKeyDown: onKeyDown, _focusVisible: { boxShadow: `0 0 0 2px ${ring}` }, "data-testid": testId, children: [buffered.map((range, i) => ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: 0, bottom: 0, left: `${disabled ? 0 : clamp(range.start / max, 0, 1) * 100}%`, width: `${disabled ? 0 : (clamp(range.end / max, 0, 1) - clamp(range.start / max, 0, 1)) * 100}%`, bg: chrome.hover, borderRadius: "full" }, i))), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: 0, bottom: 0, left: 0, width: `${fraction * 100}%`, bg: chrome.accent, borderRadius: "full" }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "50%", left: `${fraction * 100}%`, transform: "translate(-50%, -50%)", boxSize: hovering || dragging.current ? "14px" : "0px", borderRadius: "full", bg: chrome.ink, transition: "width 0.12s ease-out, height 0.12s ease-out", pointerEvents: "none" })] })] }));
+};
+exports.default = MediaScrubber;

package/dist/Components/MediaViewer/components/MediaScrubberProps.d.ts

@@ -0,0 +1,30 @@
+/** One contiguous buffered time range, as reported by `HTMLMediaElement.buffered`. */
+export interface BufferedRange {
+    /** Range start, in seconds. */
+    start: number;
+    /** Range end, in seconds. */
+    end: number;
+}
+/** Props for the shared video/audio scrubber — a custom `role="slider"`, not Chakra's Slider. */
+export interface MediaScrubberProps {
+    /** Current committed playback position, in seconds. */
+    value: number;
+    /** Duration in seconds; a non-finite/zero value disables the scrubber. */
+    max: number;
+    /** Buffered ranges (from `video.buffered`), plotted behind the play progress. */
+    buffered?: BufferedRange[];
+    /** Fires on keyboard step, click and drag-release — the caller should seek the media here. */
+    onSeek: (seconds: number) => void;
+    /** Fires continuously while hovering/dragging, and with `null` when the pointer leaves — preview only, never seeks. */
+    onPreview?: (seconds: number | null) => void;
+    /** Accessible name of the `role="slider"` track. */
+    ariaLabel: string;
+    /** Builds the track's `aria-valuetext`; skipped while disabled. */
+    ariaValueText: (seconds: number) => string;
+    /** Formats the hover/drag tooltip's timestamp. */
+    formatTime: (seconds: number) => string;
+    /** Also forced true whenever `max` is non-finite or `<= 0`. */
+    isDisabled?: boolean;
+    /** Base `data-testid`; the hover tooltip gets `${testId}-tooltip`. */
+    testId?: string;
+}

package/dist/Components/MediaViewer/components/MediaScrubberProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/MediaViewer/components/MediaStatusPanel.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { MediaStatusPanelProps } from "./MediaStatusPanelProps";
+/** One panel for every non-preview stage state — loading/error/missing/no-preview — icon and wording vary, layout never does. */
+declare const MediaStatusPanel: React.FC<MediaStatusPanelProps>;
+export default MediaStatusPanel;

package/dist/Components/MediaViewer/components/MediaStatusPanel.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useViewerChrome_1 = require("../useViewerChrome");
+/** One panel for every non-preview stage state — loading/error/missing/no-preview — icon and wording vary, layout never does. */
+const MediaStatusPanel = ({ icon, label, message, hint, downloadHref, downloadLabel, tone = "neutral", testId, downloadTestId, }) => {
+    const chrome = (0, useViewerChrome_1.useViewerChrome)();
+    const warning = tone === "warning";
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { position: "absolute", inset: 0, direction: "column", align: "center", justify: "center", gap: 3, px: { base: 14, md: 16 }, textAlign: "center", color: chrome.ink, role: warning ? "alert" : undefined, "data-testid": testId, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { color: warning ? chrome.accent : chrome.muted, children: (0, react_1.cloneElement)(icon, { size: 48, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: 600, wordBreak: "break-word", children: label }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: chrome.muted, children: message }), hint ? ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: chrome.muted, children: hint })) : null, downloadHref ? ((0, jsx_runtime_1.jsx)(react_2.Button, { as: react_2.Link, href: downloadHref, download: label, size: "sm", colorScheme: "primary", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16, "aria-hidden": true }), "data-testid": downloadTestId !== null && downloadTestId !== void 0 ? downloadTestId : (testId ? `${testId}-download` : undefined), children: downloadLabel })) : null] }));
+};
+exports.default = MediaStatusPanel;

package/dist/Components/MediaViewer/components/MediaStatusPanelProps.d.ts

@@ -0,0 +1,24 @@
+import type { ReactElement } from "react";
+/** Non-preview state a stage can be in: pick the icon/wording/download combo that fits. */
+export type MediaStatusTone = "neutral" | "warning";
+/** Props for the shared no-preview/error/missing panel — vary icon/wording/download, never the layout. */
+export interface MediaStatusPanelProps {
+    /** Rendered at 48px, `aria-hidden`; tinted by `tone`. */
+    icon: ReactElement;
+    /** File/item name shown as the panel's headline. */
+    label: string;
+    /** Body text under the headline. */
+    message: string;
+    /** Optional extra line under `message`. */
+    hint?: string;
+    /** Shows the download button when set; omit to render no download action. */
+    downloadHref?: string;
+    /** Download button's visible text and accessible name. */
+    downloadLabel: string;
+    /** "warning" renders `role="alert"` and the warning icon tint — use for error/missing/denied states. */
+    tone?: MediaStatusTone;
+    /** Root `data-testid`. */
+    testId?: string;
+    /** Overrides the download button's own testid; defaults to `${testId}-download`. */
+    downloadTestId?: string;
+}

package/dist/Components/MediaViewer/components/MediaStatusPanelProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/MediaViewer/components/MediaVideoPlayer.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { type MediaVideoPlayerProps } from "./MediaVideoPlayerProps";
+declare const MediaVideoPlayer: React.FC<MediaVideoPlayerProps>;
+export default MediaVideoPlayer;

package/dist/Components/MediaViewer/components/MediaVideoPlayer.js

@@ -0,0 +1,248 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const react_3 = require("@emotion/react");
+const lucide_react_1 = require("lucide-react");
+const useFullscreen_1 = require("../../../Hooks/useFullscreen");
+const focusRing_1 = require("../../../Theme/tokens/builders/focusRing");
+const mediaItems_1 = require("../mediaItems");
+const useAutoHideChrome_1 = require("../hooks/useAutoHideChrome");
+const motion_1 = require("../../../Theme/chakra/motion");
+const useViewerChrome_1 = require("../useViewerChrome");
+const MediaScrubber_1 = __importDefault(require("./MediaScrubber"));
+const MediaStatusPanel_1 = __importDefault(require("./MediaStatusPanel"));
+const ViewerIconButton_1 = __importDefault(require("./ViewerIconButton"));
+const MediaVideoPlayerProps_1 = require("./MediaVideoPlayerProps");
+const hasIosVideoFullscreen = () => typeof HTMLVideoElement !== "undefined" && "webkitEnterFullscreen" in HTMLVideoElement.prototype;
+const isActivatable = (target) => target instanceof HTMLElement && /^(button|a)$/i.test(target.tagName);
+const DOUBLE_CLICK_WINDOW_MS = 260;
+const RIPPLE_LIFETIME_MS = 650;
+const SKIP_SECONDS = 10;
+const ARROW_SEEK_SECONDS = 5;
+const ARROW_VOLUME_STEP = 0.1;
+const spin = (0, react_3.keyframes) `from { transform: rotate(0deg); } to { transform: rotate(360deg); }`;
+const rippleFade = (0, react_3.keyframes) `0% { opacity: 0.9; } 100% { opacity: 0; }`;
+const seekIcon = (icon) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "span", align: "center", gap: "2px", "aria-hidden": true, children: [icon, (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "xs", fontWeight: 600, children: mediaItems_1.SEEK_STEP_SECONDS })] }));
+const MediaVideoPlayer = ({ item, label, onTimeChange, onPrevious, onNext, labels: labelOverrides, }) => {
+    const labels = { ...MediaVideoPlayerProps_1.defaultMediaVideoPlayerLabels, ...labelOverrides };
+    const chrome = (0, useViewerChrome_1.useViewerChrome)();
+    const reducedMotion = (0, motion_1.usePrefersReducedMotion)();
+    const shellRef = (0, react_1.useRef)(null);
+    const videoRef = (0, react_1.useRef)(null);
+    const [playing, setPlaying] = (0, react_1.useState)(false);
+    const [current, setCurrent] = (0, react_1.useState)(0);
+    const [duration, setDuration] = (0, react_1.useState)(0);
+    const [volume, setVolume] = (0, react_1.useState)(1);
+    const [muted, setMuted] = (0, react_1.useState)(false);
+    const [rate, setRate] = (0, react_1.useState)(1);
+    const [hasCaptions, setHasCaptions] = (0, react_1.useState)(false);
+    const [captionsOn, setCaptionsOn] = (0, react_1.useState)(false);
+    const [failed, setFailed] = (0, react_1.useState)(false);
+    const [buffering, setBuffering] = (0, react_1.useState)(false);
+    const [buffered, setBuffered] = (0, react_1.useState)([]);
+    const [ripple, setRipple] = (0, react_1.useState)(null);
+    const [announcement, setAnnouncement] = (0, react_1.useState)("");
+    const [volumeHover, setVolumeHover] = (0, react_1.useState)(false);
+    const unsupported = (0, mediaItems_1.isUnsupportedVideoSrc)(item.src);
+    const { isFullscreen, toggle: toggleShellFullscreen, isSupported: shellFullscreen, } = (0, useFullscreen_1.useFullscreen)(shellRef);
+    const iosFullscreen = !shellFullscreen && hasIosVideoFullscreen();
+    const pipSupported = typeof document !== "undefined" && document.pictureInPictureEnabled === true;
+    const ring = (0, focusRing_1.settleBetween)(chrome.accent, [chrome.stage, chrome.raised, chrome.hover]);
+    const { visible: chromeVisible, handlers: chromeHandlers } = (0, useAutoHideChrome_1.useAutoHideChrome)(shellRef, playing && !unsupported);
+    const video = () => videoRef.current;
+    const togglePlay = () => {
+        const v = video();
+        if (!v)
+            return;
+        if (v.paused)
+            void v.play().catch(() => setPlaying(false));
+        else
+            v.pause();
+    };
+    const seekTo = (seconds) => {
+        const v = video();
+        if (!v)
+            return;
+        const max = Number.isFinite(v.duration) ? v.duration : seconds;
+        v.currentTime = Math.min(max, Math.max(0, seconds));
+        setCurrent(v.currentTime);
+    };
+    const seekBy = (delta) => { var _a, _b; return seekTo(((_b = (_a = video()) === null || _a === void 0 ? void 0 : _a.currentTime) !== null && _b !== void 0 ? _b : 0) + delta); };
+    const toggleMute = () => {
+        const v = video();
+        if (!v)
+            return;
+        v.muted = !v.muted;
+        if (!v.muted && v.volume === 0)
+            v.volume = 0.5;
+    };
+    const changeVolume = (value) => {
+        const v = video();
+        if (!v)
+            return;
+        v.volume = value / 100;
+        v.muted = value === 0;
+    };
+    const changeRate = (value) => {
+        const v = video();
+        if (v)
+            v.playbackRate = value;
+        setRate(value);
+    };
+    const toggleCaptions = () => {
+        const v = video();
+        if (!v)
+            return;
+        const next = !captionsOn;
+        for (const track of Array.from(v.textTracks))
+            track.mode = next ? "showing" : "hidden";
+        setCaptionsOn(next);
+    };
+    const togglePip = async () => {
+        const v = video();
+        if (!v)
+            return;
+        try {
+            if (document.pictureInPictureElement)
+                await document.exitPictureInPicture();
+            else
+                await v.requestPictureInPicture();
+        }
+        catch {
+            return;
+        }
+    };
+    const toggleFullscreen = async () => {
+        var _a;
+        if (!iosFullscreen)
+            return toggleShellFullscreen();
+        const v = videoRef.current;
+        (_a = v === null || v === void 0 ? void 0 : v.webkitEnterFullscreen) === null || _a === void 0 ? void 0 : _a.call(v);
+    };
+    const skip = (delta, side) => {
+        seekBy(delta);
+        setRipple({ side, nonce: Date.now() });
+        setAnnouncement(delta < 0 ? labels.skipBack(Math.abs(delta)) : labels.skipForward(delta));
+    };
+    const actions = (0, react_1.useRef)({ togglePlay, seekBy, toggleMute, toggleCaptions, toggleFullscreen, togglePip, changeVolume });
+    (0, react_1.useEffect)(() => {
+        actions.current = { togglePlay, seekBy, toggleMute, toggleCaptions, toggleFullscreen, togglePip, changeVolume };
+    });
+    (0, react_1.useEffect)(() => {
+        const onKey = (event) => {
+            var _a, _b, _c, _d, _e, _f;
+            if (event.ctrlKey || event.metaKey || event.altKey || (0, mediaItems_1.isTypingTarget)(event.target))
+                return;
+            const a = actions.current;
+            const key = event.key.toLowerCase();
+            const playerHasFocus = (_b = (_a = shellRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) !== null && _b !== void 0 ? _b : false;
+            if (key === " " || key === "k") {
+                if (key === " " && isActivatable(event.target))
+                    return;
+                a.togglePlay();
+            }
+            else if (key === "j")
+                a.seekBy(-mediaItems_1.SEEK_STEP_SECONDS);
+            else if (key === "l")
+                a.seekBy(mediaItems_1.SEEK_STEP_SECONDS);
+            else if (key === "m")
+                a.toggleMute();
+            else if (key === "c")
+                a.toggleCaptions();
+            else if (key === "f")
+                void a.toggleFullscreen();
+            else if (key === "p")
+                void a.togglePip();
+            else if (playerHasFocus && event.key === "ArrowRight")
+                a.seekBy(ARROW_SEEK_SECONDS);
+            else if (playerHasFocus && event.key === "ArrowLeft")
+                a.seekBy(-ARROW_SEEK_SECONDS);
+            else if (playerHasFocus && event.key === "ArrowUp")
+                a.changeVolume(Math.min(100, ((_d = (_c = video()) === null || _c === void 0 ? void 0 : _c.volume) !== null && _d !== void 0 ? _d : 0) * 100 + ARROW_VOLUME_STEP * 100));
+            else if (playerHasFocus && event.key === "ArrowDown")
+                a.changeVolume(Math.max(0, ((_f = (_e = video()) === null || _e === void 0 ? void 0 : _e.volume) !== null && _f !== void 0 ? _f : 0) * 100 - ARROW_VOLUME_STEP * 100));
+            else
+                return;
+            event.preventDefault();
+        };
+        const el = videoRef.current;
+        window.addEventListener("keydown", onKey);
+        return () => {
+            window.removeEventListener("keydown", onKey);
+            el === null || el === void 0 ? void 0 : el.pause();
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        setPlaying(false);
+        setCurrent(0);
+        setDuration(0);
+        setRate(1);
+        setHasCaptions(false);
+        setCaptionsOn(false);
+        setFailed(false);
+        setBuffering(false);
+        setBuffered([]);
+        if (videoRef.current)
+            videoRef.current.playbackRate = 1;
+    }, [item.key]);
+    (0, react_1.useEffect)(() => {
+        if (!ripple)
+            return undefined;
+        const t = window.setTimeout(() => setRipple(null), RIPPLE_LIFETIME_MS);
+        return () => window.clearTimeout(t);
+    }, [ripple]);
+    const clickState = (0, react_1.useRef)({
+        pending: false,
+        timer: null,
+    });
+    const onStageClick = (event) => {
+        const rect = event.currentTarget.getBoundingClientRect();
+        const xFraction = (event.clientX - rect.left) / rect.width;
+        const state = clickState.current;
+        if (state.pending) {
+            if (state.timer)
+                clearTimeout(state.timer);
+            state.pending = false;
+            if (xFraction < 1 / 3)
+                skip(-SKIP_SECONDS, "left");
+            else if (xFraction > 2 / 3)
+                skip(SKIP_SECONDS, "right");
+            else
+                togglePlay();
+            return;
+        }
+        state.pending = true;
+        state.timer = setTimeout(() => {
+            state.pending = false;
+            togglePlay();
+        }, DOUBLE_CLICK_WINDOW_MS);
+    };
+    const clock = (seconds) => (0, mediaItems_1.formatClock)(seconds);
+    const effectiveVolume = muted ? 0 : Math.round(volume * 100);
+    const fadeTransition = reducedMotion ? "none" : "opacity 0.2s ease-out";
+    const scrimTop = `linear-gradient(to bottom, ${chrome.scrim(0.75)}, ${chrome.scrim(0)})`;
+    const scrimBottom = `linear-gradient(to top, ${chrome.scrim(0.85)}, ${chrome.scrim(0)})`;
+    const showChrome = chromeVisible || !playing;
+    if (unsupported) {
+        return ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", inset: 0, bg: chrome.stage, children: (0, jsx_runtime_1.jsx)(MediaStatusPanel_1.default, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.VolumeX, {}), label: label, message: labels.unsupportedFormat, hint: labels.unsupportedFormatHint, downloadHref: item.src, downloadLabel: labels.download, tone: "warning", testId: "media-video-unsupported" }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: shellRef, as: "section", "aria-label": `${labels.videoPlayer}: ${label}`, "data-media-video-shell": true, position: "absolute", inset: 0, bg: chrome.stage, overflow: "hidden", cursor: showChrome ? "default" : "none", onMouseMove: chromeHandlers.onMouseMove, onPointerMove: chromeHandlers.onPointerMove, onFocus: chromeHandlers.onFocus, onBlur: chromeHandlers.onBlur, onKeyDownCapture: chromeHandlers.onKeyDown, children: [(0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { "aria-live": "polite", children: announcement }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", inset: 0, onClick: onStageClick, children: failed ? ((0, jsx_runtime_1.jsx)(MediaStatusPanel_1.default, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.VolumeX, {}), label: label, message: labels.videoError, downloadLabel: labels.download, tone: "warning", testId: "media-video-error" })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "video", ref: videoRef, src: item.src, preload: "metadata", playsInline: true, w: "100%", h: "100%", objectFit: "contain", onPlay: () => setPlaying(true), onPause: () => setPlaying(false), onEnded: () => setPlaying(false), onError: () => setFailed(true), onWaiting: () => setBuffering(true), onPlaying: () => setBuffering(false), onCanPlay: () => setBuffering(false), onProgress: (e) => {
+                        const ranges = e.currentTarget.buffered;
+                        setBuffered(Array.from({ length: ranges.length }, (_, i) => ({ start: ranges.start(i), end: ranges.end(i) })));
+                    }, onTimeUpdate: (e) => {
+                        setCurrent(e.currentTarget.currentTime);
+                        onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(e.currentTarget.currentTime);
+                    }, onLoadedMetadata: (e) => {
+                        setDuration(e.currentTarget.duration);
+                        setHasCaptions(e.currentTarget.textTracks.length > 0);
+                    }, onDurationChange: (e) => setDuration(e.currentTarget.duration), onVolumeChange: (e) => {
+                        setVolume(e.currentTarget.volume);
+                        setMuted(e.currentTarget.muted);
+                    }, "data-testid": "media-video" })) }), buffering && !failed ? ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", pointerEvents: "none", "data-testid": "media-video-buffering", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Loader2, boxSize: "40px", color: chrome.ink, sx: reducedMotion ? undefined : { animation: `${spin} 0.9s linear infinite` } }) })) : null, ripple ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", top: 0, bottom: 0, left: ripple.side === "left" ? 0 : undefined, right: ripple.side === "right" ? 0 : undefined, w: "40%", align: "center", justify: "center", pointerEvents: "none", opacity: reducedMotion ? 1 : undefined, sx: reducedMotion ? undefined : { animation: `${rippleFade} ${RIPPLE_LIFETIME_MS}ms ease-out` }, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", gap: 1, color: chrome.ink, bg: chrome.scrim(0.35), borderRadius: "full", boxSize: "72px", justify: "center", children: [ripple.side === "left" ? (0, jsx_runtime_1.jsx)(lucide_react_1.SkipBack, { size: 22, "aria-hidden": true }) : (0, jsx_runtime_1.jsx)(lucide_react_1.SkipForward, { size: 22, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, children: `${SKIP_SECONDS}s` })] }) }, ripple.nonce)) : null, !playing && !failed ? ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.play, "aria-hidden": true, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 36 }), onClick: togglePlay, position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", boxSize: { base: "64px", md: "88px" }, isRound: true, variant: "ghost", bg: chrome.raised, color: chrome.accent, _hover: { bg: chrome.hover }, _focusVisible: { boxShadow: `0 0 0 2px ${ring}` }, tabIndex: -1, transition: fadeTransition, zIndex: 3, "data-testid": "media-video-big-play" })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: 0, left: 0, right: 0, h: "72px", bgImage: scrimTop, pointerEvents: "none", opacity: showChrome ? 1 : 0, transition: fadeTransition, "aria-hidden": true }), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", bottom: 0, left: 0, right: 0, zIndex: 3, bgImage: scrimBottom, pt: failed || duration <= 0 ? 2 : 10, px: 3, pb: 2, opacity: showChrome ? 1 : 0, visibility: showChrome ? "visible" : "hidden", transition: fadeTransition, children: [(0, jsx_runtime_1.jsx)(MediaScrubber_1.default, { value: Math.min(current, duration || current), max: duration > 0 ? duration : 0, buffered: buffered, onSeek: seekTo, ariaLabel: labels.seek, ariaValueText: (v) => labels.seekValue(clock(v), clock(duration)), formatTime: clock, isDisabled: failed || duration <= 0, testId: "media-video-seek" }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "toolbar", "aria-label": labels.videoControls, align: "center", justify: "space-between", gap: 2, wrap: "wrap", mt: 1, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: playing ? labels.pause : labels.play, hint: "K", icon: playing ? (0, jsx_runtime_1.jsx)(lucide_react_1.Pause, { size: 18 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 18 }), onClick: togglePlay, testId: "media-video-toggle" }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.rewind, hint: "J", icon: seekIcon((0, jsx_runtime_1.jsx)(lucide_react_1.SkipBack, { size: 16 })), onClick: () => seekBy(-mediaItems_1.SEEK_STEP_SECONDS), testId: "media-video-rewind" }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.forward, hint: "L", icon: seekIcon((0, jsx_runtime_1.jsx)(lucide_react_1.SkipForward, { size: 16 })), onClick: () => seekBy(mediaItems_1.SEEK_STEP_SECONDS), testId: "media-video-forward" }), onPrevious ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.previous, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 18 }), onClick: onPrevious, testId: "media-video-previous" })) : null, onNext ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.next, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 18 }), onClick: onNext, testId: "media-video-next" })) : null, (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", onMouseEnter: () => setVolumeHover(true), onMouseLeave: () => setVolumeHover(false), sx: { "&:focus-within": { "--volume-w": "88px" } }, children: [(0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: muted || volume === 0 ? labels.unmute : labels.mute, hint: "M", icon: muted || volume === 0 ? (0, jsx_runtime_1.jsx)(lucide_react_1.VolumeX, { size: 18 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Volume2, { size: 18 }), onClick: toggleMute, pressed: muted, testId: "media-video-mute" }), (0, jsx_runtime_1.jsx)(react_2.Box, { w: volumeHover ? { base: "64px", md: "88px" } : { base: "64px", md: "0px" }, overflow: "hidden", px: volumeHover ? 1 : 0, transition: fadeTransition, sx: { "&:focus-within": { width: "88px", paddingInline: "4px" } }, children: (0, jsx_runtime_1.jsxs)(react_2.Slider, { "aria-label": labels.volume, min: 0, max: 100, step: 5, value: effectiveVolume, onChange: changeVolume, focusThumbOnChange: false, getAriaValueText: (v) => `${v}%`, children: [(0, jsx_runtime_1.jsx)(react_2.SliderTrack, { bg: chrome.track, h: "4px", borderRadius: "full", children: (0, jsx_runtime_1.jsx)(react_2.SliderFilledTrack, { bg: chrome.ink }) }), (0, jsx_runtime_1.jsx)(react_2.SliderThumb, { bg: chrome.ink, boxSize: "12px", _focusVisible: { boxShadow: `0 0 0 2px ${ring}` } })] }) })] }), (0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", ml: 2, fontSize: "sm", fontWeight: 500, color: chrome.ink, sx: { fontVariantNumeric: "tabular-nums" }, "data-testid": "media-video-time", children: [clock(current), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", color: chrome.muted, children: ` / ${clock(duration)}` })] })] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsxs)(react_2.Menu, { placement: "top-end", children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { "aria-label": labels.speed, h: "32px", px: 3, borderRadius: "full", borderWidth: "1px", borderColor: chrome.track, bg: chrome.raised, color: chrome.ink, fontSize: "sm", fontWeight: 600, _hover: { bg: chrome.hover }, _focusVisible: { boxShadow: `0 0 0 2px ${ring}` }, "data-testid": "media-video-speed", children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "span", align: "center", gap: 1, children: [`${rate}x`, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14, "aria-hidden": true })] }) }), (0, jsx_runtime_1.jsx)(react_2.MenuList, { minW: "160px", bg: chrome.raised, zIndex: 1500, children: (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { type: "radio", title: labels.speed, value: String(rate), onChange: (value) => changeRate(Number(value)), children: mediaItems_1.PLAYBACK_SPEEDS.map((speed) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: String(speed), bg: chrome.raised, color: chrome.ink, _hover: { bg: chrome.hover }, _focus: { bg: chrome.hover }, children: speed === 1 ? `1x - ${labels.normalSpeed}` : `${speed}x` }, speed))) }) })] }), hasCaptions ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.captions, hint: "C", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Captions, { size: 18 }), onClick: toggleCaptions, pressed: captionsOn, testId: "media-video-captions" })) : null, pipSupported ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.pip, hint: "P", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.PictureInPicture2, { size: 18 }), onClick: () => void togglePip(), testId: "media-video-pip" })) : null, (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.download, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 18 }), href: item.src, testId: "media-video-download" }), shellFullscreen || iosFullscreen ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: isFullscreen ? labels.exitFullscreen : labels.fullscreen, hint: "F", icon: isFullscreen ? (0, jsx_runtime_1.jsx)(lucide_react_1.Minimize, { size: 18 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Maximize, { size: 18 }), onClick: () => void toggleFullscreen(), pressed: isFullscreen, testId: "media-video-fullscreen" })) : null] })] })] })] }));
+};
+exports.default = MediaVideoPlayer;

package/dist/Components/MediaViewer/components/MediaVideoPlayerProps.d.ts

@@ -0,0 +1,71 @@
+import type { MediaItem } from "../mediaItems";
+/** All copy shown in the video player, merged over `defaultMediaVideoPlayerLabels`. */
+export interface MediaVideoPlayerLabels {
+    /** Accessible name for the player region, combined with `label`. */
+    videoPlayer: string;
+    /** Shown instead of the video when it fails to load. */
+    videoError: string;
+    /** Big center play button and transport play toggle, when paused. */
+    play: string;
+    /** Transport play toggle, shown while playing. */
+    pause: string;
+    /** Accessible name of the transport `role="toolbar"` control group. */
+    videoControls: string;
+    /** Accessible name of the seek slider. */
+    seek: string;
+    /** Rewind-`SEEK_STEP_SECONDS` transport button, hint "J". */
+    rewind: string;
+    /** Forward-`SEEK_STEP_SECONDS` transport button, hint "L". */
+    forward: string;
+    /** Mute-toggle label shown while muted or at zero volume. */
+    unmute: string;
+    /** Mute-toggle label shown while audible. */
+    mute: string;
+    /** Accessible name of the volume slider. */
+    volume: string;
+    /** Accessible name of the playback-speed menu. */
+    speed: string;
+    /** Suffix shown next to "1x" in the speed menu, e.g. "1x - Normal". */
+    normalSpeed: string;
+    /** Caption toggle button, only rendered once the video reports text tracks. */
+    captions: string;
+    /** Toggle button, only rendered when the browser supports picture-in-picture. */
+    pip: string;
+    /** Download transport button's accessible name. */
+    download: string;
+    /** Fullscreen toggle label shown while already fullscreen. */
+    exitFullscreen: string;
+    /** Fullscreen toggle label shown while not fullscreen. */
+    fullscreen: string;
+    /** Builds the seek slider's `aria-valuetext` from two already-`formatClock`-ed strings. */
+    seekValue: (current: string, total: string) => string;
+    /** Previous-item transport button; only rendered when `onPrevious` is passed. */
+    previous: string;
+    /** Next-item transport button; only rendered when `onNext` is passed. */
+    next: string;
+    /** @deprecated Never read by MediaVideoPlayer; defined but unused. */
+    loading: string;
+    /** Shown for a source extension known not to play natively (avi/mkv/m3u8), instead of attempting playback. */
+    unsupportedFormat: string;
+    /** Hint text under `unsupportedFormat`, prompting a download instead. */
+    unsupportedFormatHint: string;
+    /** Screen-reader announcement for a double-click/tap skip, distinct from the visible ripple. */
+    skipBack: (seconds: number) => string;
+    skipForward: (seconds: number) => string;
+}
+export declare const defaultMediaVideoPlayerLabels: MediaVideoPlayerLabels;
+/** Props for the Netflix/Prime-style video transport rendered for `kind: "video"` items. */
+export interface MediaVideoPlayerProps {
+    /** The video to play; changing `item.key` resets playback state (also guards against a parent that reuses this instance without a key remount). */
+    item: MediaItem;
+    /** Accessible name for the player region, combined with `videoPlayer`. */
+    label: string;
+    /** Fires on every `timeupdate`, with the video's current playback position in seconds. */
+    onTimeChange?: (seconds: number) => void;
+    /** Shows a transport "previous" button when the gallery has a sibling before this item. */
+    onPrevious?: () => void;
+    /** Shows a transport "next" button when the gallery has a sibling after this item. */
+    onNext?: () => void;
+    /** Overrides for any of `defaultMediaVideoPlayerLabels`, merged over the defaults. */
+    labels?: Partial<MediaVideoPlayerLabels>;
+}

package/dist/Components/MediaViewer/components/MediaVideoPlayerProps.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultMediaVideoPlayerLabels = void 0;
+exports.defaultMediaVideoPlayerLabels = {
+    videoPlayer: "Video player",
+    videoError: "This video could not be played",
+    play: "Play",
+    pause: "Pause",
+    videoControls: "Video controls",
+    seek: "Seek",
+    rewind: "Back 10 seconds",
+    forward: "Forward 10 seconds",
+    unmute: "Unmute",
+    mute: "Mute",
+    volume: "Volume",
+    speed: "Playback speed",
+    normalSpeed: "Normal",
+    captions: "Captions",
+    pip: "Picture in picture",
+    download: "Download",
+    exitFullscreen: "Exit fullscreen",
+    fullscreen: "Fullscreen",
+    seekValue: (current, total) => `${current} of ${total}`,
+    previous: "Previous",
+    next: "Next",
+    loading: "Loading",
+    unsupportedFormat: "This format can't be played here",
+    unsupportedFormatHint: "Download it to play it on your device.",
+    skipBack: (seconds) => `Skipped back ${seconds} seconds`,
+    skipForward: (seconds) => `Skipped forward ${seconds} seconds`,
+};

package/dist/Components/MediaViewer/components/TileChip.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { TileChipProps } from "./TileChipProps";
+/** Decorative absolutely-positioned pill on a filmstrip/grid tile — the tile itself carries the a11y label. */
+declare const TileChip: React.FC<TileChipProps>;
+export default TileChip;

package/dist/Components/MediaViewer/components/TileChip.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useViewerChrome_1 = require("../useViewerChrome");
+/** Decorative absolutely-positioned pill on a filmstrip/grid tile — the tile itself carries the a11y label. */
+const TileChip = ({ children, place }) => {
+    const chrome = (0, useViewerChrome_1.useViewerChrome)();
+    const corner = place === "tl" ? { left: "6px", top: "6px" } : { right: "6px", bottom: "6px" };
+    return ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", position: "absolute", ...corner, h: "18px", px: "6px", borderRadius: "4px", bg: chrome.stage, color: chrome.ink, fontSize: "11px", fontWeight: 600, display: "inline-flex", alignItems: "center", "aria-hidden": true, children: children }));
+};
+exports.default = TileChip;

package/dist/Components/MediaViewer/components/TileChipProps.d.ts

@@ -0,0 +1,7 @@
+/** A small corner pill on a filmstrip tile — carries a file-type label or a badge. */
+export interface TileChipProps {
+    /** The pill's text content, e.g. a file extension or duration. */
+    children: string;
+    /** Corner to anchor the pill: top-left or bottom-right. */
+    place: "tl" | "br";
+}

package/dist/Components/MediaViewer/components/TileChipProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/MediaViewer/components/VideoPoster.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { VideoPosterProps } from "./VideoPosterProps";
+/** Thumbnail-only muted video seeked near its start, so a video tile needs no separate poster asset. */
+declare const VideoPoster: React.FC<VideoPosterProps>;
+export default VideoPoster;

package/dist/Components/MediaViewer/components/VideoPoster.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const mediaItems_1 = require("../mediaItems");
+const TileChip_1 = __importDefault(require("./TileChip"));
+/** Thumbnail-only muted video seeked near its start, so a video tile needs no separate poster asset. */
+const VideoPoster = ({ item }) => {
+    const [duration, setDuration] = (0, react_1.useState)(null);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "video", src: `${item.src}#t=0.1`, preload: "metadata", muted: true, playsInline: true, tabIndex: -1, "aria-hidden": true, w: "100%", h: "100%", objectFit: "cover", pointerEvents: "none", onLoadedMetadata: (event) => setDuration(event.currentTarget.duration) }), duration !== null && Number.isFinite(duration) ? ((0, jsx_runtime_1.jsx)(TileChip_1.default, { place: "br", children: (0, mediaItems_1.formatClock)(duration) })) : null] }));
+};
+exports.default = VideoPoster;

package/dist/Components/MediaViewer/components/VideoPosterProps.d.ts

@@ -0,0 +1,6 @@
+import type { MediaItem } from "../mediaItems";
+/** Renders a still frame pulled from a video, used as its filmstrip thumbnail. */
+export interface VideoPosterProps {
+    /** The video item to grab a near-start frame from; only its `src` is read. */
+    item: MediaItem;
+}

package/dist/Components/MediaViewer/components/VideoPosterProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/MediaViewer/components/ViewerIconButton.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { ViewerIconButtonProps } from "./ViewerIconButtonProps";
+/** Toolbar/nav button for the media lightbox — always painted against the fixed dark viewer chrome. */
+declare const ViewerIconButton: React.FC<ViewerIconButtonProps>;
+export default ViewerIconButton;