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

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

@@ -0,0 +1,243 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from "react";
+import { Box, Flex, IconButton, Menu, MenuButton, MenuItemOption, MenuList, MenuOptionGroup, Slider, SliderFilledTrack, SliderThumb, SliderTrack, Text, VisuallyHidden, } from "@chakra-ui/react";
+import { keyframes } from "@emotion/react";
+import { Captions, ChevronDown, ChevronLeft, ChevronRight, Download, Loader2, Maximize, Minimize, Pause, PictureInPicture2, Play, SkipBack, SkipForward, Volume2, VolumeX, } from "lucide-react";
+import { useFullscreen } from "../../../Hooks/useFullscreen.js";
+import { settleBetween } from "../../../Theme/tokens/builders/focusRing.js";
+import { formatClock, isTypingTarget, isUnsupportedVideoSrc, PLAYBACK_SPEEDS, SEEK_STEP_SECONDS } from "../mediaItems.js";
+import { useAutoHideChrome } from "../hooks/useAutoHideChrome.js";
+import { usePrefersReducedMotion } from "../../../Theme/chakra/motion.js";
+import { useViewerChrome } from "../useViewerChrome.js";
+import MediaScrubber from "./MediaScrubber.js";
+import MediaStatusPanel from "./MediaStatusPanel.js";
+import ViewerIconButton from "./ViewerIconButton.js";
+import { defaultMediaVideoPlayerLabels } from "./MediaVideoPlayerProps.js";
+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 = keyframes `from { transform: rotate(0deg); } to { transform: rotate(360deg); }`;
+const rippleFade = keyframes `0% { opacity: 0.9; } 100% { opacity: 0; }`;
+const seekIcon = (icon) => (_jsxs(Flex, { as: "span", align: "center", gap: "2px", "aria-hidden": true, children: [icon, _jsx(Text, { as: "span", fontSize: "xs", fontWeight: 600, children: SEEK_STEP_SECONDS })] }));
+const MediaVideoPlayer = ({ item, label, onTimeChange, onPrevious, onNext, labels: labelOverrides, }) => {
+    const labels = { ...defaultMediaVideoPlayerLabels, ...labelOverrides };
+    const chrome = useViewerChrome();
+    const reducedMotion = usePrefersReducedMotion();
+    const shellRef = useRef(null);
+    const videoRef = useRef(null);
+    const [playing, setPlaying] = useState(false);
+    const [current, setCurrent] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const [volume, setVolume] = useState(1);
+    const [muted, setMuted] = useState(false);
+    const [rate, setRate] = useState(1);
+    const [hasCaptions, setHasCaptions] = useState(false);
+    const [captionsOn, setCaptionsOn] = useState(false);
+    const [failed, setFailed] = useState(false);
+    const [buffering, setBuffering] = useState(false);
+    const [buffered, setBuffered] = useState([]);
+    const [ripple, setRipple] = useState(null);
+    const [announcement, setAnnouncement] = useState("");
+    const [volumeHover, setVolumeHover] = useState(false);
+    const unsupported = isUnsupportedVideoSrc(item.src);
+    const { isFullscreen, toggle: toggleShellFullscreen, isSupported: shellFullscreen, } = useFullscreen(shellRef);
+    const iosFullscreen = !shellFullscreen && hasIosVideoFullscreen();
+    const pipSupported = typeof document !== "undefined" && document.pictureInPictureEnabled === true;
+    const ring = settleBetween(chrome.accent, [chrome.stage, chrome.raised, chrome.hover]);
+    const { visible: chromeVisible, handlers: chromeHandlers } = 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 = useRef({ togglePlay, seekBy, toggleMute, toggleCaptions, toggleFullscreen, togglePip, changeVolume });
+    useEffect(() => {
+        actions.current = { togglePlay, seekBy, toggleMute, toggleCaptions, toggleFullscreen, togglePip, changeVolume };
+    });
+    useEffect(() => {
+        const onKey = (event) => {
+            var _a, _b, _c, _d, _e, _f;
+            if (event.ctrlKey || event.metaKey || event.altKey || 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(-SEEK_STEP_SECONDS);
+            else if (key === "l")
+                a.seekBy(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();
+        };
+    }, []);
+    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]);
+    useEffect(() => {
+        if (!ripple)
+            return undefined;
+        const t = window.setTimeout(() => setRipple(null), RIPPLE_LIFETIME_MS);
+        return () => window.clearTimeout(t);
+    }, [ripple]);
+    const clickState = 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) => 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 (_jsx(Box, { position: "absolute", inset: 0, bg: chrome.stage, children: _jsx(MediaStatusPanel, { icon: _jsx(VolumeX, {}), label: label, message: labels.unsupportedFormat, hint: labels.unsupportedFormatHint, downloadHref: item.src, downloadLabel: labels.download, tone: "warning", testId: "media-video-unsupported" }) }));
+    }
+    return (_jsxs(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: [_jsx(VisuallyHidden, { "aria-live": "polite", children: announcement }), _jsx(Box, { position: "absolute", inset: 0, onClick: onStageClick, children: failed ? (_jsx(MediaStatusPanel, { icon: _jsx(VolumeX, {}), label: label, message: labels.videoError, downloadLabel: labels.download, tone: "warning", testId: "media-video-error" })) : (_jsx(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 ? (_jsx(Box, { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", pointerEvents: "none", "data-testid": "media-video-buffering", children: _jsx(Box, { as: Loader2, boxSize: "40px", color: chrome.ink, sx: reducedMotion ? undefined : { animation: `${spin} 0.9s linear infinite` } }) })) : null, ripple ? (_jsx(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: _jsxs(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" ? _jsx(SkipBack, { size: 22, "aria-hidden": true }) : _jsx(SkipForward, { size: 22, "aria-hidden": true }), _jsx(Text, { fontSize: "xs", fontWeight: 600, children: `${SKIP_SECONDS}s` })] }) }, ripple.nonce)) : null, !playing && !failed ? (_jsx(IconButton, { "aria-label": labels.play, "aria-hidden": true, icon: _jsx(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, _jsx(Box, { position: "absolute", top: 0, left: 0, right: 0, h: "72px", bgImage: scrimTop, pointerEvents: "none", opacity: showChrome ? 1 : 0, transition: fadeTransition, "aria-hidden": true }), _jsxs(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: [_jsx(MediaScrubber, { 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" }), _jsxs(Flex, { role: "toolbar", "aria-label": labels.videoControls, align: "center", justify: "space-between", gap: 2, wrap: "wrap", mt: 1, children: [_jsxs(Flex, { align: "center", gap: 1, wrap: "wrap", children: [_jsx(ViewerIconButton, { label: playing ? labels.pause : labels.play, hint: "K", icon: playing ? _jsx(Pause, { size: 18 }) : _jsx(Play, { size: 18 }), onClick: togglePlay, testId: "media-video-toggle" }), _jsx(ViewerIconButton, { label: labels.rewind, hint: "J", icon: seekIcon(_jsx(SkipBack, { size: 16 })), onClick: () => seekBy(-SEEK_STEP_SECONDS), testId: "media-video-rewind" }), _jsx(ViewerIconButton, { label: labels.forward, hint: "L", icon: seekIcon(_jsx(SkipForward, { size: 16 })), onClick: () => seekBy(SEEK_STEP_SECONDS), testId: "media-video-forward" }), onPrevious ? (_jsx(ViewerIconButton, { label: labels.previous, icon: _jsx(ChevronLeft, { size: 18 }), onClick: onPrevious, testId: "media-video-previous" })) : null, onNext ? (_jsx(ViewerIconButton, { label: labels.next, icon: _jsx(ChevronRight, { size: 18 }), onClick: onNext, testId: "media-video-next" })) : null, _jsxs(Flex, { align: "center", onMouseEnter: () => setVolumeHover(true), onMouseLeave: () => setVolumeHover(false), sx: { "&:focus-within": { "--volume-w": "88px" } }, children: [_jsx(ViewerIconButton, { label: muted || volume === 0 ? labels.unmute : labels.mute, hint: "M", icon: muted || volume === 0 ? _jsx(VolumeX, { size: 18 }) : _jsx(Volume2, { size: 18 }), onClick: toggleMute, pressed: muted, testId: "media-video-mute" }), _jsx(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: _jsxs(Slider, { "aria-label": labels.volume, min: 0, max: 100, step: 5, value: effectiveVolume, onChange: changeVolume, focusThumbOnChange: false, getAriaValueText: (v) => `${v}%`, children: [_jsx(SliderTrack, { bg: chrome.track, h: "4px", borderRadius: "full", children: _jsx(SliderFilledTrack, { bg: chrome.ink }) }), _jsx(SliderThumb, { bg: chrome.ink, boxSize: "12px", _focusVisible: { boxShadow: `0 0 0 2px ${ring}` } })] }) })] }), _jsxs(Text, { as: "span", ml: 2, fontSize: "sm", fontWeight: 500, color: chrome.ink, sx: { fontVariantNumeric: "tabular-nums" }, "data-testid": "media-video-time", children: [clock(current), _jsx(Text, { as: "span", color: chrome.muted, children: ` / ${clock(duration)}` })] })] }), _jsxs(Flex, { align: "center", gap: 1, children: [_jsxs(Menu, { placement: "top-end", children: [_jsx(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: _jsxs(Flex, { as: "span", align: "center", gap: 1, children: [`${rate}x`, _jsx(ChevronDown, { size: 14, "aria-hidden": true })] }) }), _jsx(MenuList, { minW: "160px", bg: chrome.raised, zIndex: 1500, children: _jsx(MenuOptionGroup, { type: "radio", title: labels.speed, value: String(rate), onChange: (value) => changeRate(Number(value)), children: PLAYBACK_SPEEDS.map((speed) => (_jsx(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 ? (_jsx(ViewerIconButton, { label: labels.captions, hint: "C", icon: _jsx(Captions, { size: 18 }), onClick: toggleCaptions, pressed: captionsOn, testId: "media-video-captions" })) : null, pipSupported ? (_jsx(ViewerIconButton, { label: labels.pip, hint: "P", icon: _jsx(PictureInPicture2, { size: 18 }), onClick: () => void togglePip(), testId: "media-video-pip" })) : null, _jsx(ViewerIconButton, { label: labels.download, icon: _jsx(Download, { size: 18 }), href: item.src, testId: "media-video-download" }), shellFullscreen || iosFullscreen ? (_jsx(ViewerIconButton, { label: isFullscreen ? labels.exitFullscreen : labels.fullscreen, hint: "F", icon: isFullscreen ? _jsx(Minimize, { size: 18 }) : _jsx(Maximize, { size: 18 }), onClick: () => void toggleFullscreen(), pressed: isFullscreen, testId: "media-video-fullscreen" })) : null] })] })] })] }));
+};
+export default MediaVideoPlayer;

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

@@ -0,0 +1,28 @@
+export const 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/esm/Components/MediaViewer/components/TileChip.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "@chakra-ui/react";
+import { useViewerChrome } from "../useViewerChrome.js";
+/** Decorative absolutely-positioned pill on a filmstrip/grid tile — the tile itself carries the a11y label. */
+const TileChip = ({ children, place }) => {
+    const chrome = useViewerChrome();
+    const corner = place === "tl" ? { left: "6px", top: "6px" } : { right: "6px", bottom: "6px" };
+    return (_jsx(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 }));
+};
+export default TileChip;

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

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

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box } from "@chakra-ui/react";
+import { formatClock } from "../mediaItems.js";
+import TileChip from "./TileChip.js";
+/** Thumbnail-only muted video seeked near its start, so a video tile needs no separate poster asset. */
+const VideoPoster = ({ item }) => {
+    const [duration, setDuration] = useState(null);
+    return (_jsxs(_Fragment, { children: [_jsx(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) ? (_jsx(TileChip, { place: "br", children: formatClock(duration) })) : null] }));
+};
+export default VideoPoster;

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

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

package/dist/esm/Components/MediaViewer/components/ViewerIconButton.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconButton } from "@chakra-ui/react";
+import ToolTip from "../../ToolTip/ToolTip.js";
+import { useViewerChrome } from "../useViewerChrome.js";
+import { settleBetween } from "../../../Theme/tokens/builders/focusRing.js";
+/** Toolbar/nav button for the media lightbox — always painted against the fixed dark viewer chrome. */
+const ViewerIconButton = ({ label, hint, icon, onClick, href, size = "md", round = false, pressed = false, isDisabled = false, testId, }) => {
+    const chrome = useViewerChrome();
+    const tooltipLabel = hint ? `${label} (${hint})` : label;
+    // The stage is a fixed dark chrome regardless of app mode, so the ring is settled against it directly.
+    const ring = settleBetween(chrome.accent, [chrome.stage, chrome.raised, chrome.hover]);
+    const linkProps = href ? { as: "a", href, download: true, rel: "noopener" } : {};
+    return (_jsx(ToolTip, { label: tooltipLabel, children: _jsx(IconButton, { "aria-label": label, "aria-pressed": href ? undefined : pressed, icon: icon, onClick: onClick, isDisabled: isDisabled, size: size, isRound: round, variant: "ghost", color: chrome.ink, bg: round || pressed ? chrome.raised : "transparent", _hover: { bg: chrome.hover }, _active: { bg: chrome.hover }, outline: "2px solid transparent", outlineOffset: "2px", _focusVisible: { boxShadow: `0 0 0 2px ${ring}` }, "data-testid": testId, ...linkProps }) }));
+};
+export default ViewerIconButton;

package/dist/esm/Components/MediaViewer/components/ViewerIconButtonProps.js

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

package/dist/esm/Components/MediaViewer/components/mediaKindIcon.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Archive, File, FileCode, FileSpreadsheet, FileText, FileWarning, Image, Music, Play, Presentation, Video, } from "lucide-react";
+const KIND_ICON = {
+    image: _jsx(Image, {}),
+    video: _jsx(Video, {}),
+    audio: _jsx(Music, {}),
+    youtube: _jsx(Play, {}),
+    pdf: _jsx(FileText, {}),
+    doc: _jsx(FileText, {}),
+    text: _jsx(FileCode, {}),
+    spreadsheet: _jsx(FileSpreadsheet, {}),
+    presentation: _jsx(Presentation, {}),
+    archive: _jsx(Archive, {}),
+    file: _jsx(File, {}),
+};
+/** One icon per `MediaKind`, for filmstrip tiles and status panels — never a generic grey square. */
+export const iconForKind = (kind) => KIND_ICON[kind];
+export const warningIcon = () => _jsx(FileWarning, {});

package/dist/esm/Components/MediaViewer/components/sanitizeDocxHrefs.js

@@ -0,0 +1,27 @@
+const SAFE_SCHEMES = new Set(["http:", "https:", "mailto:"]);
+// docx-preview's renderAsync output is untrusted HTML; strip any href that isn't a safe scheme.
+export function sanitizeDocxHrefs(root) {
+    root.querySelectorAll("a[href]").forEach((anchor) => {
+        const href = anchor.getAttribute("href");
+        if (href === null)
+            return;
+        const trimmed = href.trim();
+        if (trimmed.startsWith("#"))
+            return;
+        // Protocol-relative links inherit the page's own scheme, not the base above.
+        if (trimmed.startsWith("//")) {
+            anchor.removeAttribute("href");
+            return;
+        }
+        let scheme;
+        try {
+            scheme = new URL(trimmed, "https://sanitize.invalid/").protocol;
+        }
+        catch {
+            anchor.removeAttribute("href");
+            return;
+        }
+        if (!SAFE_SCHEMES.has(scheme))
+            anchor.removeAttribute("href");
+    });
+}

package/dist/esm/Components/MediaViewer/hooks/useAutoHideChrome.js

@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+const HIDE_DELAY_MS = 3000;
+/** Pointer-idle auto-hide only — focus inside `containerRef` (keyboard/SR use) always keeps chrome visible. */
+export function useAutoHideChrome(containerRef, canHide, delayMs = HIDE_DELAY_MS) {
+    const [visible, setVisible] = useState(true);
+    const [focusWithin, setFocusWithin] = useState(false);
+    const timer = useRef(null);
+    const clear = () => {
+        if (timer.current)
+            window.clearTimeout(timer.current);
+        timer.current = null;
+    };
+    const show = useCallback(() => {
+        setVisible(true);
+        clear();
+        if (canHide && !focusWithin)
+            timer.current = setTimeout(() => setVisible(false), delayMs);
+    }, [canHide, focusWithin, delayMs]);
+    useEffect(() => {
+        if (!canHide || focusWithin) {
+            clear();
+            setVisible(true);
+            return undefined;
+        }
+        show();
+        return clear;
+    }, [canHide, focusWithin, show]);
+    const onFocus = useCallback(() => {
+        setFocusWithin(true);
+        setVisible(true);
+    }, []);
+    const onBlur = useCallback((event) => {
+        var _a;
+        const next = event.relatedTarget;
+        if (next && ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(next)))
+            return;
+        setFocusWithin(false);
+    }, [containerRef]);
+    return { visible, show, handlers: { onMouseMove: show, onPointerMove: show, onFocus, onBlur, onKeyDown: show } };
+}

package/dist/esm/Components/MediaViewer/hooks/useFileViewer.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import MediaViewer from "../MediaViewer.js";
+import { buildFileItems } from "../mediaItems.js";
+/** Imperative open/close for `MediaViewer`, with object-URL lifecycle management for local files. */
+export function useFileViewer(options = {}) {
+    const [state, setState] = useState(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const objectUrls = useRef([]);
+    const revokeAll = useCallback(() => {
+        objectUrls.current.forEach((url) => URL.revokeObjectURL(url));
+        objectUrls.current = [];
+    }, []);
+    useEffect(() => revokeAll, [revokeAll]);
+    const open = useCallback((files, index, title, resolveUrl) => {
+        revokeAll();
+        setState({ items: buildFileItems(files, resolveUrl), index, title });
+        setIsOpen(true);
+    }, [revokeAll]);
+    const openItems = useCallback((items, index, title) => {
+        revokeAll();
+        setState({ items, index, title });
+        setIsOpen(true);
+    }, [revokeAll]);
+    const openLocal = useCallback((files, index, title) => {
+        revokeAll();
+        const viewerFiles = files.map((file) => {
+            const url = URL.createObjectURL(file);
+            objectUrls.current.push(url);
+            return { url, name: file.name, fileSize: file.size };
+        });
+        setState({ items: buildFileItems(viewerFiles, (path) => path), index, title });
+        setIsOpen(true);
+    }, [revokeAll]);
+    const close = useCallback(() => {
+        setIsOpen(false);
+        revokeAll();
+    }, [revokeAll]);
+    const onIndexChange = useCallback((index) => {
+        setState((prev) => (prev ? { ...prev, index } : prev));
+    }, []);
+    const viewer = state ? (_jsx(MediaViewer, { isOpen: isOpen, onClose: close, items: state.items, index: state.index, onIndexChange: onIndexChange, title: state.title, ...options })) : null;
+    return { open, openItems, openLocal, close, viewer };
+}
+export default useFileViewer;

package/dist/esm/Components/MediaViewer/mediaItems.js

@@ -0,0 +1,174 @@
+export const MIN_ZOOM = 25;
+export const MAX_ZOOM = 400;
+export const ZOOM_STEP = 25;
+export const PLAYBACK_SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 2];
+export const SEEK_STEP_SECONDS = 10;
+const ABSOLUTE_URL_RE = /^(blob:|data:|https?:)/;
+/** Passes an already-absolute url through untouched; only a bare stored path goes through resolveUrl. */
+export const resolveMediaUrl = (path, resolveUrl) => ABSOLUTE_URL_RE.test(path) ? path : resolveUrl(path);
+const KIND_BY_EXT = [
+    [/\.(jpe?g|png|gif|webp|avif|bmp|svg|heic|heif|tiff?|ico)$/i, "image"],
+    [/\.(mp4|mov|webm|m4v|ogv|avi|mkv|m3u8)$/i, "video"],
+    [/\.(mp3|wav|m4a|aac|flac|ogg|opus)$/i, "audio"],
+    [/\.pdf$/i, "pdf"],
+    [/\.(docx|odt|rtf)$/i, "doc"],
+    [/\.(txt|md|json|csv|log|ya?ml|xml|jsx?|tsx?|css|html?|py|java|c|cpp|sh|rb|go|rs|php)$/i, "text"],
+    [/\.(xlsx|xls)$/i, "spreadsheet"],
+    [/\.(pptx|ppt)$/i, "presentation"],
+    [/\.(zip|rar|7z|tar|gz)$/i, "archive"],
+];
+const UNSUPPORTED_IMAGE_EXT = /\.(heic|heif)(?:[?#].*)?$/i;
+export const isUnsupportedImageSrc = (src) => UNSUPPORTED_IMAGE_EXT.test(src);
+const UNSUPPORTED_VIDEO_EXT = /\.(avi|mkv|m3u8)(?:[?#].*)?$/i;
+export const isUnsupportedVideoSrc = (src) => UNSUPPORTED_VIDEO_EXT.test(src);
+const kindOf = (nameOrUrl) => {
+    var _a, _b;
+    const bare = nameOrUrl.replace(/[?#].*$/, "");
+    return (_b = (_a = KIND_BY_EXT.find(([re]) => re.test(bare))) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : "file";
+};
+/** Picks the viewer kind from the file name first, falling back to the url — bare `.doc` is not `doc`. */
+export const fileKind = (url, name) => {
+    const byName = name ? kindOf(name) : "file";
+    return byName === "file" ? kindOf(url) : byName;
+};
+export const youtubeThumb = (videoId) => `https://img.youtube.com/vi/${videoId}/mqdefault.jpg`;
+export const youtubeEmbed = (videoId) => `https://www.youtube-nocookie.com/embed/${videoId}`;
+export const youtubeWatch = (videoId) => `https://www.youtube.com/watch?v=${videoId}`;
+export const asFile = (source) => typeof source === "string" ? { path: source } : source;
+/** Builds ordered viewer items from DB-backed photos/videos/YouTube ids; ordinal restarts per group. */
+export function buildMediaItems(sources, resolveUrl) {
+    const items = [];
+    sources.photos.forEach((source, i) => {
+        var _a, _b;
+        const file = asFile(source);
+        const src = resolveMediaUrl(file.path, resolveUrl);
+        items.push({
+            key: `photo-${i}`,
+            kind: "image",
+            src,
+            thumb: src,
+            ordinal: i + 1,
+            uploadedAt: (_a = file.uploadedAt) !== null && _a !== void 0 ? _a : null,
+            fileSize: (_b = file.fileSize) !== null && _b !== void 0 ? _b : null,
+        });
+    });
+    sources.videos.forEach((source, i) => {
+        var _a, _b;
+        const file = asFile(source);
+        items.push({
+            key: `video-${i}`,
+            kind: "video",
+            src: resolveMediaUrl(file.path, resolveUrl),
+            thumb: null,
+            ordinal: i + 1,
+            uploadedAt: (_a = file.uploadedAt) !== null && _a !== void 0 ? _a : null,
+            fileSize: (_b = file.fileSize) !== null && _b !== void 0 ? _b : null,
+        });
+    });
+    sources.youtubeVideoIds.forEach((id, i) => {
+        items.push({
+            key: `youtube-${i}`,
+            kind: "youtube",
+            src: id,
+            thumb: youtubeThumb(id),
+            ordinal: i + 1,
+        });
+    });
+    return items;
+}
+/** Builds viewer items from a flat file list; ordinal numbering is per-kind, not per-list-position. */
+export function buildFileItems(files, resolveUrl) {
+    const seen = {};
+    return files.map((file, i) => {
+        var _a, _b, _c, _d;
+        const kind = fileKind(file.url, file.name);
+        const ordinal = ((_a = seen[kind]) !== null && _a !== void 0 ? _a : 0) + 1;
+        seen[kind] = ordinal;
+        const src = resolveMediaUrl(file.url, resolveUrl);
+        return {
+            key: `file-${i}`,
+            kind,
+            src,
+            thumb: kind === "image" ? src : null,
+            ordinal,
+            uploadedAt: (_b = file.uploadedAt) !== null && _b !== void 0 ? _b : null,
+            fileSize: (_c = file.fileSize) !== null && _c !== void 0 ? _c : null,
+            name: (_d = file.name) !== null && _d !== void 0 ? _d : null,
+        };
+    });
+}
+export function countMedia(items) {
+    const counts = {
+        image: 0,
+        video: 0,
+        audio: 0,
+        youtube: 0,
+        pdf: 0,
+        doc: 0,
+        text: 0,
+        spreadsheet: 0,
+        presentation: 0,
+        archive: 0,
+        file: 0,
+    };
+    items.forEach((item) => {
+        counts[item.kind] += 1;
+    });
+    return counts;
+}
+// Up to three photos lead, then the first non-photo items, so a video is never buried behind "+N more".
+export function planPreview(items, slots) {
+    if (items.length <= slots)
+        return { tiles: items.map((_, i) => i), hidden: 0 };
+    const photoIdx = items.flatMap((item, i) => (item.kind === "image" ? [i] : []));
+    const motionIdx = items.flatMap((item, i) => (item.kind === "image" ? [] : [i]));
+    const leadPhotos = photoIdx.slice(0, Math.min(3, slots));
+    const motion = motionIdx.slice(0, slots - leadPhotos.length);
+    const chosen = new Set([...leadPhotos, ...motion]);
+    for (let i = 0; i < items.length && chosen.size < slots; i += 1)
+        chosen.add(i);
+    const tiles = [...chosen].sort((a, b) => a - b);
+    return { tiles, hidden: items.length - tiles.length };
+}
+export const wrapIndex = (index, length) => length === 0 ? 0 : ((index % length) + length) % length;
+export const clampZoom = (zoom) => Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, zoom));
+export function formatClock(totalSeconds) {
+    if (!Number.isFinite(totalSeconds) || totalSeconds < 0)
+        return "00:00";
+    const total = Math.floor(totalSeconds);
+    const hours = Math.floor(total / 3600);
+    const minutes = Math.floor((total % 3600) / 60);
+    const seconds = total % 60;
+    const pad = (n) => String(n).padStart(2, "0");
+    return hours > 0 ? `${hours}:${pad(minutes)}:${pad(seconds)}` : `${pad(minutes)}:${pad(seconds)}`;
+}
+export function mediaLink(item, atSeconds) {
+    if (item.kind === "youtube") {
+        const t = atSeconds && atSeconds > 0 ? `&t=${Math.floor(atSeconds)}s` : "";
+        return `${youtubeWatch(item.src)}${t}`;
+    }
+    if (item.kind === "video" && atSeconds && atSeconds > 0)
+        return `${item.src}#t=${Math.floor(atSeconds)}`;
+    return item.src;
+}
+export function formatFileSize(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+export function fileTypeLabel(src) {
+    const match = /\.([a-z0-9]{2,5})(?:[?#].*)?$/i.exec(src);
+    return match ? match[1].toUpperCase() : null;
+}
+/** True while the event target is a text field or slider, so keyboard shortcuts stay out of its way. */
+export function isTypingTarget(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    if (target.isContentEditable)
+        return true;
+    if (/^(input|textarea|select)$/i.test(target.tagName))
+        return true;
+    return target.getAttribute("role") === "slider";
+}