pixelize-design-library 2.4.2-beta.9 → 3.0.0

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

@@ -0,0 +1,197 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cloneElement, useEffect, useRef, useState } from "react";
+import { Box, Flex, Heading, Text, VisuallyHidden } from "@chakra-ui/react";
+import { Check, ChevronLeft, ChevronRight, Copy, Download, ExternalLink, X } from "lucide-react";
+import Modal, { ModalBody } from "../Modal/Modal.js";
+import { useViewerChrome } from "./useViewerChrome.js";
+import ViewerIconButton from "./components/ViewerIconButton.js";
+import VideoPoster from "./components/VideoPoster.js";
+import TileChip from "./components/TileChip.js";
+import MediaImageViewer from "./components/MediaImageViewer.js";
+import MediaVideoPlayer from "./components/MediaVideoPlayer.js";
+import MediaAudioPlayer from "./components/MediaAudioPlayer.js";
+import MediaDocumentStage from "./components/MediaDocumentStage.js";
+import { iconForKind } from "./components/mediaKindIcon.js";
+import { fileTypeLabel, formatFileSize, formatUploadedDate, isTypingTarget, isUnsupportedImageSrc, isUnsupportedVideoSrc, mediaLink, wrapIndex, youtubeEmbed, youtubeWatch, } from "./mediaItems.js";
+import { defaultMediaViewerLabels } from "./MediaViewerProps.js";
+import { fullViewportHeight } from "../../Theme/tokens/builders/viewportHeight.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const BOX_SHADOW_OPACITY_TRANSITION = transitionFor(["box-shadow", "opacity"]);
+const SWIPE_MIN_PX = 50;
+const NO_SWIPE_ZONE = '[role="toolbar"], [role="slider"], [role="group"]';
+const COPIED_FEEDBACK_MS = 1500;
+const DOCUMENT_KINDS = new Set(["pdf", "doc", "text", "spreadsheet", "presentation", "archive", "file"]);
+const isDocumentKind = (kind) => DOCUMENT_KINDS.has(kind);
+const KIND_LABEL_KEY = {
+    video: "kindVideo",
+    youtube: "kindYoutube",
+    pdf: "kindPdf",
+    doc: "kindDoc",
+    file: "kindFile",
+    audio: "kindAudio",
+    text: "kindText",
+    spreadsheet: "kindSpreadsheet",
+    presentation: "kindPresentation",
+    archive: "kindArchive",
+};
+/** Full-viewport lightbox: stage switches by item kind, with filmstrip + keyboard/swipe navigation. */
+const MediaViewer = ({ isOpen, onClose, items, index, onIndexChange, defaultIndex, title, resolveDocument, labels: labelOverrides, imageLabels, videoLabels, audioLabels, documentLabels, }) => {
+    const labels = { ...defaultMediaViewerLabels, ...labelOverrides };
+    const isIndexControlled = index !== undefined;
+    const [uncontrolledIndex, setUncontrolledIndex] = useState(defaultIndex !== null && defaultIndex !== void 0 ? defaultIndex : 0);
+    const activeIndex = isIndexControlled ? index : uncontrolledIndex;
+    if (process.env.NODE_ENV !== "production" && isIndexControlled && !onIndexChange) {
+        console.warn("MediaViewer: index is set without onIndexChange, so navigation cannot move past it.");
+    }
+    const latestIndex = useRef(0);
+    const setIndex = (next) => {
+        latestIndex.current = next;
+        onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(next);
+        if (!isIndexControlled)
+            setUncontrolledIndex(next);
+    };
+    const chrome = useViewerChrome();
+    const stageRef = useRef(null);
+    const stripRef = useRef(null);
+    const [videoAt, setVideoAt] = useState(0);
+    const [imageZoom, setImageZoom] = useState(100);
+    const [copied, setCopied] = useState(false);
+    const [filmstripOverflows, setFilmstripOverflows] = useState(false);
+    const touchStart = useRef(null);
+    const total = items.length;
+    const safeIndex = total === 0 ? 0 : wrapIndex(activeIndex, total);
+    const item = items[safeIndex];
+    // NOTE: several arrow presses land in one tick; relative moves must compose, not restate.
+    latestIndex.current = safeIndex;
+    const go = useRef((delta) => void delta);
+    go.current = (delta) => {
+        if (total <= 1)
+            return;
+        setVideoAt(0);
+        setIndex(wrapIndex(latestIndex.current + delta, total));
+    };
+    useEffect(() => {
+        if (!isOpen)
+            return undefined;
+        const onKeyDown = (event) => {
+            var _a, _b;
+            if (event.ctrlKey || event.metaKey || event.altKey || isTypingTarget(event.target))
+                return;
+            if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+                return;
+            const claimedByVideo = (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, "[data-media-video-shell]");
+            if (claimedByVideo)
+                return;
+            go.current(event.key === "ArrowLeft" ? -1 : 1);
+            event.preventDefault();
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, [isOpen]);
+    useEffect(() => {
+        var _a;
+        const active = (_a = stripRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[aria-current="true"]');
+        active === null || active === void 0 ? void 0 : active.scrollIntoView({ block: "nearest", inline: "center" });
+    }, [safeIndex, isOpen]);
+    useEffect(() => {
+        if (!isOpen)
+            return undefined;
+        let observer;
+        let rafId;
+        // Modal mounts its portaled content a tick after isOpen flips, so stripRef.current can still be null here.
+        const attach = () => {
+            const el = stripRef.current;
+            if (!el) {
+                rafId = requestAnimationFrame(attach);
+                return;
+            }
+            const check = () => setFilmstripOverflows(el.scrollWidth > el.clientWidth + 1);
+            check();
+            if (typeof ResizeObserver === "undefined")
+                return;
+            observer = new ResizeObserver(check);
+            observer.observe(el);
+        };
+        attach();
+        return () => {
+            if (rafId !== undefined)
+                cancelAnimationFrame(rafId);
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+        };
+    }, [items, isOpen]);
+    useEffect(() => {
+        setCopied(false);
+    }, [safeIndex]);
+    if (!item)
+        return null;
+    const canSwipe = total > 1 && (item.kind !== "image" || imageZoom <= 100);
+    const onTouchStart = (event) => {
+        const target = event.target;
+        if (event.touches.length !== 1 || target.closest(NO_SWIPE_ZONE)) {
+            touchStart.current = null;
+            return;
+        }
+        touchStart.current = { x: event.touches[0].clientX, y: event.touches[0].clientY };
+    };
+    const onTouchMove = (event) => {
+        if (event.touches.length > 1)
+            touchStart.current = null;
+    };
+    const onTouchEnd = (event) => {
+        const start = touchStart.current;
+        touchStart.current = null;
+        if (!start || !canSwipe)
+            return;
+        const touch = event.changedTouches[0];
+        const dx = touch.clientX - start.x;
+        const dy = touch.clientY - start.y;
+        if (Math.abs(dx) > SWIPE_MIN_PX && Math.abs(dx) > Math.abs(dy))
+            go.current(dx < 0 ? 1 : -1);
+    };
+    const copyLink = async () => {
+        try {
+            await navigator.clipboard.writeText(mediaLink(item, videoAt));
+            setCopied(true);
+            window.setTimeout(() => setCopied(false), COPIED_FEEDBACK_MS);
+        }
+        catch {
+            setCopied(false);
+        }
+    };
+    const kindLabelKey = KIND_LABEL_KEY[item.kind];
+    const renderStage = () => {
+        var _a, _b, _c, _d;
+        if (item.kind === "image") {
+            return (_jsx(MediaImageViewer, { item: item, label: (_a = item.name) !== null && _a !== void 0 ? _a : title, onZoomChange: setImageZoom, labels: imageLabels }, item.key));
+        }
+        if (isDocumentKind(item.kind)) {
+            if (!resolveDocument) {
+                throw new Error("MediaViewer: resolveDocument is required when items include a pdf/doc/text/spreadsheet/presentation/archive/file item");
+            }
+            return (_jsx(MediaDocumentStage, { item: item, label: (_b = item.name) !== null && _b !== void 0 ? _b : title, resolveDocument: resolveDocument, labels: documentLabels }, item.key));
+        }
+        if (item.kind === "video") {
+            return (_jsx(MediaVideoPlayer, { item: item, label: (_c = item.name) !== null && _c !== void 0 ? _c : title, onTimeChange: setVideoAt, onPrevious: total > 1 ? () => go.current(-1) : undefined, onNext: total > 1 ? () => go.current(1) : undefined, labels: videoLabels }, item.key));
+        }
+        if (item.kind === "audio") {
+            return (_jsx(MediaAudioPlayer, { item: item, label: (_d = item.name) !== null && _d !== void 0 ? _d : title, onTimeChange: setVideoAt, labels: audioLabels }, item.key));
+        }
+        return (_jsx(Box, { as: "iframe", position: "absolute", inset: 0, src: youtubeEmbed(item.src), title: labels.youtubeTitle, border: "none", allowFullScreen: true }, item.key));
+    };
+    const meta = (() => {
+        const type = fileTypeLabel(item.src);
+        const parts = [type, item.fileSize ? formatFileSize(item.fileSize) : null].filter(Boolean);
+        const uploaded = item.uploadedAt ? labels.uploadedOn(formatUploadedDate(item.uploadedAt)) : null;
+        return [parts.join(" · "), uploaded].filter(Boolean).join(" — ");
+    })();
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, size: "full", hideCloseButton: true, initialFocusRef: stageRef, contentProps: { bg: chrome.stage, m: 0, borderRadius: 0 }, children: _jsxs(ModalBody, { p: 0, display: "flex", flexDirection: "column", sx: fullViewportHeight, children: [total > 1 && (_jsx(VisuallyHidden, { "aria-live": "polite", children: labels.nowShowing(safeIndex + 1, total) })), _jsxs(Flex, { align: "center", gap: 2, px: 4, py: 3, bg: chrome.raised, color: chrome.ink, "data-testid": "media-viewer-header", children: [_jsx(Heading, { as: "h2", size: "sm", noOfLines: 1, color: chrome.ink, children: title }), total > 1 && (_jsx(Text, { as: "span", color: chrome.muted, fontSize: "sm", "data-testid": "media-viewer-counter", children: labels.counter(safeIndex + 1, total) })), kindLabelKey && (_jsx(Text, { as: "span", px: 2, py: 0.5, borderRadius: "base", bg: chrome.hover, color: chrome.ink, fontSize: "xs", fontWeight: 600, children: labels[kindLabelKey] })), _jsx(Flex, { flex: 1 }), item.kind === "youtube" ? (_jsx(ViewerIconButton, { label: labels.openOnYoutube, icon: _jsx(ExternalLink, { size: 16 }), href: youtubeWatch(item.src) })) : (_jsx(ViewerIconButton, { label: labels.download, icon: _jsx(Download, { size: 16 }), href: item.src })), _jsx(ViewerIconButton, { label: copied ? labels.copied : labels.copyLink, icon: _jsx(Copy, { size: 16 }), onClick: copyLink, testId: "media-viewer-copy-link" }), _jsx(ViewerIconButton, { label: labels.close, icon: _jsx(X, { size: 18 }), onClick: onClose, testId: "media-viewer-close" })] }), _jsxs(Box, { ref: stageRef, tabIndex: -1, flex: 1, position: "relative", minH: 0, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd, "data-testid": "media-viewer-stage", children: [renderStage(), total > 1 && (_jsxs(_Fragment, { children: [_jsx(Box, { position: "absolute", top: "50%", left: { base: 2, md: 4 }, transform: "translateY(-50%)", zIndex: 2, children: _jsx(ViewerIconButton, { label: labels.previous, icon: _jsx(ChevronLeft, { size: 24 }), onClick: () => go.current(-1), round: true, testId: "media-viewer-prev" }) }), _jsx(Box, { position: "absolute", top: "50%", right: { base: 2, md: 4 }, transform: "translateY(-50%)", zIndex: 2, children: _jsx(ViewerIconButton, { label: labels.next, icon: _jsx(ChevronRight, { size: 24 }), onClick: () => go.current(1), round: true, testId: "media-viewer-next" }) })] }))] }), _jsxs(Box, { bg: chrome.raised, py: 3, minW: 0, children: [meta && (_jsx(Text, { fontSize: "xs", color: chrome.muted, mb: 2, px: 4, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", title: meta, children: meta })), total > 1 && (_jsx(Flex, { as: "nav", "aria-label": labels.filmstrip, ref: stripRef, gap: 2, px: 4, overflowX: "auto", justifyContent: filmstripOverflows ? "flex-start" : "center", "data-testid": "media-viewer-filmstrip", children: items.map((tile, i) => {
+                                const isSelected = i === safeIndex;
+                                const showPoster = tile.kind === "video" && !isUnsupportedVideoSrc(tile.src);
+                                const showThumb = !showPoster && tile.thumb && !(tile.kind === "image" && isUnsupportedImageSrc(tile.src));
+                                const extLabel = fileTypeLabel(tile.src);
+                                return (_jsxs(Box, { as: "button", type: "button", onClick: () => setIndex(i), "aria-current": isSelected, "aria-label": `${tile.kind} ${tile.ordinal}`, position: "relative", flexShrink: 0, w: "112px", h: "70px", borderRadius: "10px", overflow: "hidden", bg: chrome.track, opacity: isSelected ? 1 : 0.85, boxShadow: isSelected
+                                        ? `0 0 0 2px ${chrome.accentGlow(0.9)}, 0 0 12px 2px ${chrome.accentGlow(0.45)}`
+                                        : "none", transition: BOX_SHADOW_OPACITY_TRANSITION, _hover: { opacity: 1 }, children: [showPoster ? (_jsx(VideoPoster, { item: tile })) : showThumb ? (_jsx(Box, { as: "img", src: tile.thumb, alt: "", w: "100%", h: "100%", objectFit: "cover" })) : (_jsxs(_Fragment, { children: [_jsx(Flex, { align: "center", justify: "center", w: "100%", h: "100%", color: chrome.muted, children: cloneElement(iconForKind(tile.kind), { size: 20, "aria-hidden": true }) }), extLabel && _jsx(TileChip, { place: "br", children: extLabel })] })), isSelected && (_jsx(Flex, { position: "absolute", top: 1, right: 1, align: "center", justify: "center", w: "16px", h: "16px", borderRadius: "full", bg: chrome.accent, color: chrome.onAccent, children: _jsx(Check, { size: 10, "aria-hidden": true }) }))] }, tile.key));
+                            }) }))] })] }) }));
+};
+export default MediaViewer;

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

@@ -0,0 +1,29 @@
+export const defaultMediaViewerLabels = {
+    close: "Close viewer",
+    copyLink: "Copy link",
+    copied: "Link copied",
+    counter: (current, total) => `${current} / ${total}`,
+    download: "Download",
+    filmstrip: "All media",
+    kindDoc: "Word document",
+    kindFile: "File",
+    kindPdf: "PDF",
+    kindVideo: "Video",
+    kindYoutube: "YouTube",
+    kindAudio: "Audio",
+    kindText: "Text",
+    kindSpreadsheet: "Spreadsheet",
+    kindPresentation: "Presentation",
+    kindArchive: "Archive",
+    next: "Next",
+    openOnYoutube: "Open on YouTube",
+    photoCount: (count) => `${count} photo${count === 1 ? "" : "s"}`,
+    videoCount: (count) => `${count} video${count === 1 ? "" : "s"}`,
+    documentCount: (count) => `${count} document${count === 1 ? "" : "s"}`,
+    youtubeCount: (count) => `${count} YouTube link${count === 1 ? "" : "s"}`,
+    previous: "Previous",
+    shortcuts: "Keyboard shortcuts",
+    nowShowing: (current, total) => `Showing item ${current} of ${total}`,
+    uploadedOn: (date) => `Uploaded · ${date}`,
+    youtubeTitle: "YouTube video",
+};

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

@@ -0,0 +1,138 @@
+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, } from "@chakra-ui/react";
+import { ChevronDown, Download, Music, Pause, Play, SkipBack, SkipForward, Volume2, VolumeX } from "lucide-react";
+import { settleBetween } from "../../../Theme/tokens/builders/focusRing.js";
+import { surfaceFocusRing } from "../../Common/surfaceFocusRing.js";
+import { formatClock, isTypingTarget, PLAYBACK_SPEEDS, SEEK_STEP_SECONDS } from "../mediaItems.js";
+import { useViewerChrome } from "../useViewerChrome.js";
+import { TimelineClock, TimelineScrubber, usePlaybackTimeline } from "./PlaybackTimeline.js";
+import MediaStatusPanel from "./MediaStatusPanel.js";
+import ViewerIconButton from "./ViewerIconButton.js";
+import { defaultMediaAudioPlayerLabels } from "./MediaAudioPlayerProps.js";
+import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
+const VOLUME_WIDTH_TRANSITION = transitionFor(["width"], "base", "out");
+const ARROW_SEEK_SECONDS = 5;
+const ARROW_VOLUME_STEP = 0.1;
+/** Audio stage of MediaViewer: play/pause, seek, volume and playback-speed controls with J / L skip keys. */
+const MediaAudioPlayer = ({ item, label, onTimeChange, labels: labelOverrides }) => {
+    const labels = { ...defaultMediaAudioPlayerLabels, ...labelOverrides };
+    const chrome = useViewerChrome();
+    const shellRef = useRef(null);
+    const audioRef = useRef(null);
+    const [playing, setPlaying] = useState(false);
+    const timeline = usePlaybackTimeline();
+    const [duration, setDuration] = useState(0);
+    const [volume, setVolume] = useState(1);
+    const [muted, setMuted] = useState(false);
+    const [rate, setRate] = useState(1);
+    const [failed, setFailed] = useState(false);
+    const [buffered, setBuffered] = useState([]);
+    const [volumeHover, setVolumeHover] = useState(false);
+    const ring = settleBetween(chrome.accent, [chrome.stage, chrome.raised, chrome.hover]);
+    const focusShadow = surfaceFocusRing(chrome.stage, ring);
+    const audio = () => audioRef.current;
+    const togglePlay = () => {
+        const a = audio();
+        if (!a)
+            return;
+        if (a.paused)
+            void a.play().catch(() => setPlaying(false));
+        else
+            a.pause();
+    };
+    const seekTo = (seconds) => {
+        const a = audio();
+        if (!a)
+            return;
+        const max = Number.isFinite(a.duration) ? a.duration : seconds;
+        a.currentTime = Math.min(max, Math.max(0, seconds));
+        timeline.set(a.currentTime);
+    };
+    const seekBy = (delta) => { var _a, _b; return seekTo(((_b = (_a = audio()) === null || _a === void 0 ? void 0 : _a.currentTime) !== null && _b !== void 0 ? _b : 0) + delta); };
+    const toggleMute = () => {
+        const a = audio();
+        if (!a)
+            return;
+        a.muted = !a.muted;
+        if (!a.muted && a.volume === 0)
+            a.volume = 0.5;
+    };
+    const changeVolume = (value) => {
+        const a = audio();
+        if (!a)
+            return;
+        a.volume = value / 100;
+        a.muted = value === 0;
+    };
+    const changeRate = (value) => {
+        const a = audio();
+        if (a)
+            a.playbackRate = value;
+        setRate(value);
+    };
+    const actions = useRef({ togglePlay, seekBy, toggleMute, changeVolume });
+    useEffect(() => {
+        actions.current = { togglePlay, seekBy, toggleMute, 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 (!playerHasFocus && key !== " " && key !== "k")
+                return;
+            if (key === " " || key === "k")
+                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 (event.key === "ArrowRight")
+                a.seekBy(ARROW_SEEK_SECONDS);
+            else if (event.key === "ArrowLeft")
+                a.seekBy(-ARROW_SEEK_SECONDS);
+            else if (event.key === "ArrowUp")
+                a.changeVolume(Math.min(100, ((_d = (_c = audio()) === null || _c === void 0 ? void 0 : _c.volume) !== null && _d !== void 0 ? _d : 0) * 100 + ARROW_VOLUME_STEP * 100));
+            else if (event.key === "ArrowDown")
+                a.changeVolume(Math.max(0, ((_f = (_e = audio()) === 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 = audioRef.current;
+        window.addEventListener("keydown", onKey);
+        return () => {
+            window.removeEventListener("keydown", onKey);
+            el === null || el === void 0 ? void 0 : el.pause();
+        };
+    }, []);
+    useEffect(() => {
+        setPlaying(false);
+        timeline.set(0);
+        setDuration(0);
+        setRate(1);
+        setFailed(false);
+        setBuffered([]);
+        if (audioRef.current)
+            audioRef.current.playbackRate = 1;
+    }, [item.key, timeline]);
+    const clock = (seconds) => formatClock(seconds);
+    const effectiveVolume = muted ? 0 : Math.round(volume * 100);
+    return (_jsxs(Box, { ref: shellRef, as: "section", "aria-label": `${labels.audioPlayer}: ${label}`, position: "absolute", inset: 0, bg: chrome.stage, children: [_jsx("audio", { ref: audioRef, src: item.src, preload: "metadata", onPlay: () => setPlaying(true), onPause: () => setPlaying(false), onEnded: () => setPlaying(false), onError: () => setFailed(true), onProgress: (e) => {
+                    const ranges = e.currentTarget.buffered;
+                    setBuffered(Array.from({ length: ranges.length }, (_, i) => ({ start: ranges.start(i), end: ranges.end(i) })));
+                }, onTimeUpdate: (e) => {
+                    timeline.set(e.currentTarget.currentTime);
+                    onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(e.currentTarget.currentTime);
+                }, onLoadedMetadata: (e) => setDuration(e.currentTarget.duration), onDurationChange: (e) => setDuration(e.currentTarget.duration), onVolumeChange: (e) => {
+                    setVolume(e.currentTarget.volume);
+                    setMuted(e.currentTarget.muted);
+                }, "data-testid": "media-audio" }), failed ? (_jsx(MediaStatusPanel, { icon: _jsx(VolumeX, {}), label: label, message: labels.audioError, downloadHref: item.src, downloadLabel: labels.download, tone: "warning", testId: "media-audio-error" })) : (_jsxs(Flex, { direction: "column", align: "center", justify: "center", h: "100%", px: { base: 4, md: 10 }, gap: 6, children: [_jsx(Flex, { boxSize: { base: "96px", md: "140px" }, borderRadius: "full", bg: chrome.raised, align: "center", justify: "center", color: chrome.accent, children: _jsx(Music, { size: 48, "aria-hidden": true }) }), _jsx(Text, { fontSize: "sm", fontWeight: 600, color: chrome.ink, noOfLines: 1, maxW: "480px", textAlign: "center", children: label }), _jsxs(Box, { w: "100%", maxW: "480px", children: [_jsx(TimelineScrubber, { timeline: timeline, duration: duration, buffered: buffered, onSeek: seekTo, ariaLabel: labels.seek, ariaValueText: (v) => labels.seekValue(clock(v), clock(duration)), formatTime: clock, isDisabled: duration <= 0, testId: "media-audio-seek" }), _jsxs(Flex, { role: "toolbar", "aria-label": labels.audioControls, align: "center", justify: "space-between", gap: 2, wrap: "wrap", mt: 1, children: [_jsxs(Flex, { align: "center", gap: 1, wrap: "wrap", children: [_jsx(IconButton, { "aria-label": playing ? labels.pause : labels.play, icon: playing ? _jsx(Pause, { size: 20 }) : _jsx(Play, { size: 20 }), onClick: togglePlay, isRound: true, variant: "ghost", bg: chrome.raised, color: chrome.accent, _hover: { bg: chrome.hover }, _focusVisible: { boxShadow: focusShadow }, "data-testid": "media-audio-toggle" }), _jsx(ViewerIconButton, { label: labels.rewind, hint: "J", icon: _jsx(SkipBack, { size: 16 }), onClick: () => seekBy(-SEEK_STEP_SECONDS), testId: "media-audio-rewind" }), _jsx(ViewerIconButton, { label: labels.forward, hint: "L", icon: _jsx(SkipForward, { size: 16 }), onClick: () => seekBy(SEEK_STEP_SECONDS), testId: "media-audio-forward" }), _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-audio-mute" }), _jsx(Box, { w: volumeHover ? "88px" : "0px", overflow: "hidden", px: volumeHover ? 1 : 0, transition: VOLUME_WIDTH_TRANSITION, 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: focusShadow } })] }) })] }), _jsx(TimelineClock, { timeline: timeline, duration: duration, testId: "media-audio-time" })] }), _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: focusShadow }, "data-testid": "media-audio-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: "popover", 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))) }) })] }), _jsx(ViewerIconButton, { label: labels.download, icon: _jsx(Download, { size: 18 }), href: item.src, testId: "media-audio-download" })] })] })] })] }))] }));
+};
+export default MediaAudioPlayer;

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

@@ -0,0 +1,18 @@
+export const defaultMediaAudioPlayerLabels = {
+    audioPlayer: "Audio player",
+    audioError: "This audio could not be played",
+    play: "Play",
+    pause: "Pause",
+    audioControls: "Audio controls",
+    seek: "Seek",
+    rewind: "Back 10 seconds",
+    forward: "Forward 10 seconds",
+    unmute: "Unmute",
+    mute: "Mute",
+    volume: "Volume",
+    speed: "Playback speed",
+    normalSpeed: "Normal",
+    download: "Download",
+    seekValue: (current, total) => `${current} of ${total}`,
+    loading: "Loading",
+};

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

@@ -0,0 +1,110 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Box, Flex, Spinner, Text } from "@chakra-ui/react";
+import PdfViewer from "../../PdfViewer/PdfViewer.js";
+import { useViewerChrome } from "../useViewerChrome.js";
+import { iconForKind, warningIcon } from "./mediaKindIcon.js";
+import MediaStatusPanel from "./MediaStatusPanel.js";
+import { sanitizeDocxHrefs } from "./sanitizeDocxHrefs.js";
+import { defaultMediaDocumentStageLabels, } from "./MediaDocumentStageProps.js";
+const DOCX_EXT_RE = /\.docx(?:[?#].*)?$/i;
+const isDocxSource = (item) => { var _a; return DOCX_EXT_RE.test((_a = item.name) !== null && _a !== void 0 ? _a : "") || DOCX_EXT_RE.test(item.src); };
+function PdfStage({ url, label }) {
+    return (_jsx(Box, { position: "absolute", inset: 0, px: { base: 0, md: 20 }, py: { base: 0, md: 4 }, sx: {
+            "& > div": { height: "100%", display: "flex", flexDirection: "column" },
+            "& embed": { flex: 1, height: "100%" },
+        }, "data-testid": "media-pdf", children: _jsx(PdfViewer, { pdfUrl: url, fileName: label, height: "100%", showToolbar: false }) }));
+}
+const DOCX_PREVIEW = "docx-preview";
+const loadDocxPreview = () => import(/* @vite-ignore */ DOCX_PREVIEW);
+function WordStage({ itemKey, url, blob, label, labels }) {
+    const chrome = useViewerChrome();
+    const hostRef = useRef(null);
+    const [failed, setFailed] = useState(false);
+    useEffect(() => {
+        setFailed(false);
+        const host = hostRef.current;
+        if (!host)
+            return;
+        let live = true;
+        loadDocxPreview()
+            .then(({ renderAsync }) => renderAsync(blob, host, undefined, { inWrapper: true, ignoreLastRenderedPageBreak: true }))
+            .then(() => {
+            if (live)
+                sanitizeDocxHrefs(host);
+        })
+            .catch(() => {
+            if (live)
+                setFailed(true);
+        });
+        return () => {
+            live = false;
+            host.replaceChildren();
+        };
+    }, [itemKey, blob]);
+    if (failed) {
+        return (_jsx(MediaStatusPanel, { icon: iconForKind("doc"), label: label, message: labels.noPreview, hint: labels.noPreviewHint, downloadHref: url, downloadLabel: labels.download, testId: "media-file", downloadTestId: "media-file-download" }));
+    }
+    return (_jsx(Box, { ref: hostRef, position: "absolute", inset: 0, overflow: "auto", sx: { "& .docx-wrapper": { background: chrome.stage, padding: { base: 2, md: 6 } } }, "data-testid": "media-doc" }));
+}
+function TextStage({ itemKey, url, blob, label, labels }) {
+    const chrome = useViewerChrome();
+    const [state, setState] = useState({
+        status: "loading",
+    });
+    useEffect(() => {
+        let live = true;
+        setState({ status: "loading" });
+        const load = blob ? blob.text() : fetch(url).then((res) => (res.ok ? res.text() : Promise.reject(new Error("fetch failed"))));
+        load
+            .then((text) => {
+            if (live)
+                setState({ status: "ready", text });
+        })
+            .catch(() => {
+            if (live)
+                setState({ status: "error" });
+        });
+        return () => {
+            live = false;
+        };
+    }, [itemKey, url, blob]);
+    if (state.status === "loading") {
+        return (_jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", "data-testid": "media-text-loading", children: _jsx(Spinner, { size: "lg", label: labels.loadingFile, color: chrome.ink }) }));
+    }
+    if (state.status === "error") {
+        return (_jsx(MediaStatusPanel, { icon: warningIcon(), label: label, message: labels.textLoadError, downloadHref: url, downloadLabel: labels.download, tone: "warning", testId: "media-text-error" }));
+    }
+    return (_jsx(Box, { position: "absolute", inset: 0, overflow: "auto", px: { base: 3, md: 8 }, py: 4, "data-testid": "media-text", children: _jsx(Text, { as: "pre", fontFamily: "mono", fontSize: "sm", whiteSpace: "pre-wrap", wordBreak: "break-word", color: chrome.ink, children: state.text }) }));
+}
+/** Document stage of MediaViewer: previews PDF, DOCX and text files inline, other kinds get a download panel; loading and error states come from `resolveDocument`. */
+export const MediaDocumentStage = ({ item, label, resolveDocument, labels: labelOverrides, }) => {
+    const labels = { ...defaultMediaDocumentStageLabels, ...labelOverrides };
+    const chrome = useViewerChrome();
+    const resolution = resolveDocument(item);
+    if (resolution.status === "loading") {
+        return (_jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", "data-testid": "media-file-loading", children: _jsx(Spinner, { size: "lg", label: labels.loadingFile, color: chrome.ink }) }));
+    }
+    if (resolution.status === "missing" || resolution.status === "error") {
+        return (_jsx(MediaStatusPanel, { label: label, message: labels.fileError, downloadLabel: labels.download, icon: warningIcon(), tone: "warning", testId: "media-file-missing" }));
+    }
+    if (item.kind === "pdf")
+        return _jsx(PdfStage, { url: resolution.url, label: label });
+    if (item.kind === "text") {
+        return _jsx(TextStage, { itemKey: item.key, url: resolution.url, blob: resolution.blob, label: label, labels: labels });
+    }
+    if (item.kind === "spreadsheet" || item.kind === "presentation" || item.kind === "archive") {
+        return (_jsx(MediaStatusPanel, { icon: iconForKind(item.kind), label: label, message: labels.noPreview, hint: labels.noPreviewHint, downloadHref: resolution.url, downloadLabel: labels.download, testId: `media-${item.kind}` }));
+    }
+    if (item.kind === "doc") {
+        if (!isDocxSource(item)) {
+            return (_jsx(MediaStatusPanel, { icon: iconForKind("doc"), label: label, message: labels.noPreview, hint: labels.noPreviewHint, downloadHref: resolution.url, downloadLabel: labels.download, testId: "media-file", downloadTestId: "media-file-download" }));
+        }
+        if (!resolution.blob) {
+            return (_jsx(MediaStatusPanel, { label: label, message: labels.fileError, downloadLabel: labels.download, icon: warningIcon(), tone: "warning", testId: "media-file-missing" }));
+        }
+        return _jsx(WordStage, { itemKey: item.key, url: resolution.url, blob: resolution.blob, label: label, labels: labels });
+    }
+    return (_jsx(MediaStatusPanel, { icon: iconForKind("file"), label: label, message: labels.noPreview, hint: labels.noPreviewHint, downloadHref: resolution.url, downloadLabel: labels.download, testId: "media-file", downloadTestId: "media-file-download" }));
+};
+export default MediaDocumentStage;

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

@@ -0,0 +1,8 @@
+export const defaultMediaDocumentStageLabels = {
+    download: "Download",
+    noPreview: "This file can't be previewed here",
+    noPreviewHint: "Download it to open it on your device.",
+    loadingFile: "Loading file…",
+    fileError: "This file could not be loaded. It may have been moved or deleted.",
+    textLoadError: "This file's contents could not be loaded.",
+};

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

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Box, Flex, Image, Text } from "@chakra-ui/react";
+import { Maximize, Minimize, RotateCw, Scan, ZoomIn, ZoomOut } from "lucide-react";
+import { useFullscreen } from "../../../Hooks/useFullscreen.js";
+import { clampZoom, isTypingTarget, isUnsupportedImageSrc, MAX_ZOOM, MIN_ZOOM, ZOOM_STEP } from "../mediaItems.js";
+import { useViewerChrome } from "../useViewerChrome.js";
+import { iconForKind, warningIcon } from "./mediaKindIcon.js";
+import MediaStatusPanel from "./MediaStatusPanel.js";
+import ViewerIconButton from "./ViewerIconButton.js";
+import { defaultMediaImageViewerLabels } from "./MediaImageViewerProps.js";
+import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
+const TRANSFORM_OUT_TRANSITION = transitionFor(["transform"], "fast", "out");
+const ORIGIN = { x: 0, y: 0 };
+const transformFor = (pan, zoom, rotation) => `translate(${pan.x}px, ${pan.y}px) scale(${zoom / 100}) rotate(${rotation}deg)`;
+/** Image stage of MediaViewer with zoom, drag-to-pan, rotation and keyboard shortcuts. */
+const MediaImageViewer = ({ item, label, onZoomChange, onNaturalSize, labels: labelOverrides, }) => {
+    const labels = { ...defaultMediaImageViewerLabels, ...labelOverrides };
+    const chrome = useViewerChrome();
+    const stageRef = useRef(null);
+    const imageRef = useRef(null);
+    const drag = useRef(null);
+    const pan = useRef(ORIGIN);
+    const [zoom, setZoom] = useState(100);
+    const [rotation, setRotation] = useState(0);
+    const [failed, setFailed] = useState(false);
+    const [dragging, setDragging] = useState(false);
+    const { isFullscreen, toggle: toggleFullscreen, isSupported: fullscreenSupported } = useFullscreen(stageRef);
+    useEffect(() => {
+        onZoomChange === null || onZoomChange === void 0 ? void 0 : onZoomChange(zoom);
+    }, [zoom, onZoomChange]);
+    // Defense in depth: a parent that reuses this instance across items (no key remount) must not carry state over.
+    useEffect(() => {
+        resetPan();
+        setZoom(100);
+        setRotation(0);
+        setFailed(false);
+    }, [item.key]);
+    const resetPan = () => {
+        pan.current = ORIGIN;
+        drag.current = null;
+        setDragging(false);
+    };
+    const zoomBy = (delta) => {
+        const next = clampZoom(zoom + delta);
+        setZoom(next);
+        if (next <= 100)
+            resetPan();
+    };
+    const reset = () => {
+        resetPan();
+        setZoom(100);
+        setRotation(0);
+    };
+    const rotate = () => setRotation((r) => (r + 90) % 360);
+    const actions = useRef({ zoomBy, reset, rotate, toggleFullscreen });
+    useEffect(() => {
+        actions.current = { zoomBy, reset, rotate, toggleFullscreen };
+    });
+    useEffect(() => {
+        const onKey = (event) => {
+            if (event.ctrlKey || event.metaKey || event.altKey || isTypingTarget(event.target))
+                return;
+            const a = actions.current;
+            if (event.key === "+" || event.key === "=")
+                a.zoomBy(ZOOM_STEP);
+            else if (event.key === "-" || event.key === "_")
+                a.zoomBy(-ZOOM_STEP);
+            else if (event.key === "0")
+                a.reset();
+            else if (event.key === "r" || event.key === "R")
+                a.rotate();
+            else if (event.key === "f" || event.key === "F")
+                void a.toggleFullscreen();
+            else
+                return;
+            event.preventDefault();
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, []);
+    const unsupported = isUnsupportedImageSrc(item.src);
+    const onPointerDown = (event) => {
+        if (zoom <= 100)
+            return;
+        event.currentTarget.setPointerCapture(event.pointerId);
+        drag.current = { start: { x: event.clientX, y: event.clientY }, from: pan.current };
+        setDragging(true);
+    };
+    const onPointerMove = (event) => {
+        const d = drag.current;
+        if (!d)
+            return;
+        pan.current = { x: d.from.x + event.clientX - d.start.x, y: d.from.y + event.clientY - d.start.y };
+        if (imageRef.current)
+            imageRef.current.style.transform = transformFor(pan.current, zoom, rotation);
+    };
+    const endDrag = () => {
+        drag.current = null;
+        setDragging(false);
+    };
+    if (unsupported) {
+        return (_jsx(Box, { position: "absolute", inset: 0, bg: chrome.stage, children: _jsx(MediaStatusPanel, { icon: iconForKind("image"), label: label, message: labels.unsupportedFormat, hint: labels.unsupportedFormatHint, downloadHref: item.src, downloadLabel: labels.download, tone: "warning", testId: "media-image-unsupported" }) }));
+    }
+    return (_jsxs(Box, { ref: stageRef, position: "absolute", inset: 0, bg: chrome.stage, overflow: "hidden", children: [_jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", p: { base: 2, md: 6 }, pb: { base: 20, md: 24 }, cursor: zoom > 100 ? (dragging ? "grabbing" : "grab") : "default", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, sx: { touchAction: zoom > 100 ? "none" : "pan-y" }, children: failed ? (_jsx(MediaStatusPanel, { icon: warningIcon(), label: label, message: labels.imageError, downloadLabel: labels.download, downloadHref: item.src, tone: "warning", testId: "media-image-error" })) : (_jsx(Image, { ref: imageRef, src: item.src, alt: label, maxW: "100%", maxH: "100%", objectFit: "contain", draggable: false, userSelect: "none", onError: () => setFailed(true), onLoad: (event) => onNaturalSize === null || onNaturalSize === void 0 ? void 0 : onNaturalSize({
+                        width: event.currentTarget.naturalWidth,
+                        height: event.currentTarget.naturalHeight,
+                    }), style: { transform: transformFor(pan.current, zoom, rotation) }, transition: dragging ? "none" : TRANSFORM_OUT_TRANSITION, "data-testid": "media-image" })) }), _jsxs(Flex, { role: "toolbar", "aria-label": labels.imageControls, position: "absolute", bottom: 4, left: "50%", transform: "translateX(-50%)", align: "center", gap: 1, p: 1, borderRadius: "xl", bg: chrome.raised, borderWidth: "1px", borderColor: chrome.hover, maxW: "calc(100% - 16px)", overflowX: "auto", children: [_jsx(ViewerIconButton, { label: labels.zoomOut, hint: "-", icon: _jsx(ZoomOut, { size: 18 }), onClick: () => zoomBy(-ZOOM_STEP), isDisabled: zoom <= MIN_ZOOM, testId: "media-zoom-out" }), _jsx(Text, { as: "output", "aria-live": "polite", "aria-label": labels.zoomLevel, minW: "56px", textAlign: "center", fontSize: "sm", fontWeight: 600, color: chrome.ink, "data-testid": "media-zoom-level", children: `${zoom}%` }), _jsx(ViewerIconButton, { label: labels.zoomIn, hint: "+", icon: _jsx(ZoomIn, { size: 18 }), onClick: () => zoomBy(ZOOM_STEP), isDisabled: zoom >= MAX_ZOOM, testId: "media-zoom-in" }), _jsx(ViewerIconButton, { label: labels.fitLabel, hint: "0", icon: _jsx(Scan, { size: 16, "aria-hidden": true }), onClick: reset, testId: "media-fit" }), _jsx(Box, { w: "1px", h: "24px", bg: chrome.hover, mx: 1, "aria-hidden": true }), _jsx(ViewerIconButton, { label: labels.rotate, hint: "R", icon: _jsx(RotateCw, { size: 18 }), onClick: rotate, testId: "media-rotate" }), fullscreenSupported ? (_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-fullscreen" })) : null] })] }));
+};
+export default MediaImageViewer;

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

@@ -0,0 +1,15 @@
+export const defaultMediaImageViewerLabels = {
+    imageError: "This photo could not be loaded",
+    imageControls: "Image controls",
+    zoomOut: "Zoom out",
+    zoomLevel: "Zoom level",
+    zoomIn: "Zoom in",
+    fitLabel: "Fit to screen",
+    fit: "Fit",
+    rotate: "Rotate",
+    exitFullscreen: "Exit fullscreen",
+    fullscreen: "Fullscreen",
+    download: "Download",
+    unsupportedFormat: "This photo format can't be previewed here",
+    unsupportedFormatHint: "Download it to view it on your device.",
+};