@cometchat/chat-uikit-react
Version:
Ready-to-use Chat UI Components for React
574 lines (570 loc) • 27.5 kB
JavaScript
import './index.css';
import { CometChatButton } from './chunk-KOCEARYG.js';
import { CometChatAvatar } from './chunk-LDXTHTWH.js';
import { useCometChatFrameContext } from './chunk-UTFM6ET6.js';
import { useLocale } from './chunk-UVWJYQJ3.js';
import { createContext, useContext, useRef, useCallback, useState, useEffect, useMemo } from 'react';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
var CometChatFullScreenViewerContext = createContext(null);
function useCometChatFullScreenViewerContext() {
const ctx = useContext(CometChatFullScreenViewerContext);
if (!ctx) {
throw new Error(
"useCometChatFullScreenViewerContext must be used within <CometChatFullScreenViewer.Root>"
);
}
return ctx;
}
function formatFileSize(bytes) {
if (!bytes) return "";
const units = ["B", "KB", "MB", "GB"];
let size = bytes;
let unitIndex = 0;
while (size >= 1024 && unitIndex < units.length - 1) {
size /= 1024;
unitIndex++;
}
return `${size.toFixed(unitIndex > 0 ? 1 : 0)} ${units[unitIndex] ?? ""}`;
}
function getFileExtension(name) {
if (!name) return "";
const parts = name.split(".");
return parts.length > 1 ? (parts[parts.length - 1] ?? "").toUpperCase() : "";
}
var CometChatFullScreenViewerHeader = ({
children,
className
}) => {
const { getLocalizedString } = useLocale();
const ctx = useCometChatFullScreenViewerContext();
const {
onClose,
senderName,
senderAvatar,
senderStatus,
sentAt,
fileName,
fileSize,
isGalleryMode,
currentIndex,
attachments,
onDownload,
currentUrl
} = ctx;
const formattedSize = formatFileSize(fileSize);
const extension = getFileExtension(fileName);
const showSenderInfo = !!(senderName ?? senderAvatar);
const handleClose = (event) => {
event.stopPropagation();
onClose();
};
const handleDownload = () => {
const attachment = attachments[currentIndex];
if (isGalleryMode && attachment) {
onDownload?.(attachment);
} else {
onDownload?.(currentUrl);
}
};
const headerClasses = ["cometchat-fullscreen-viewer__header", className].filter(Boolean).join(" ");
if (children) {
return /* @__PURE__ */ jsx("div", { className: headerClasses, children });
}
return /* @__PURE__ */ jsxs("div", { className: headerClasses, children: [
/* @__PURE__ */ jsx("div", { className: "cometchat-fullscreen-viewer__header-left", children: showSenderInfo && /* @__PURE__ */ jsxs("div", { className: "cometchat-fullscreen-viewer__sender-info", children: [
/* @__PURE__ */ jsx("div", { className: "cometchat-fullscreen-viewer__avatar", children: /* @__PURE__ */ jsx(CometChatAvatar, { name: senderName ?? "", image: senderAvatar, size: "medium" }) }),
/* @__PURE__ */ jsxs("div", { className: "cometchat-fullscreen-viewer__sender-details", children: [
senderName && /* @__PURE__ */ jsx("div", { className: "cometchat-fullscreen-viewer__sender-name", children: senderName }),
senderStatus && /* @__PURE__ */ jsx("div", { className: "cometchat-fullscreen-viewer__sender-status", children: senderStatus }),
sentAt && /* @__PURE__ */ jsx("div", { className: "cometchat-fullscreen-viewer__sender-date", children: sentAt })
] })
] }) }),
/* @__PURE__ */ jsx("div", { className: "cometchat-fullscreen-viewer__header-center", children: fileName && /* @__PURE__ */ jsxs("div", { className: "cometchat-fullscreen-viewer__file-info-header", children: [
/* @__PURE__ */ jsx("span", { className: "cometchat-fullscreen-viewer__file-info-name", children: fileName }),
formattedSize && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("span", { className: "cometchat-fullscreen-viewer__file-info-separator", children: "\u2022" }),
/* @__PURE__ */ jsx("span", { className: "cometchat-fullscreen-viewer__file-info-size", children: formattedSize })
] }),
extension && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("span", { className: "cometchat-fullscreen-viewer__file-info-separator", children: "\u2022" }),
/* @__PURE__ */ jsx("span", { className: "cometchat-fullscreen-viewer__file-info-type", children: extension })
] })
] }) }),
/* @__PURE__ */ jsxs("div", { className: "cometchat-fullscreen-viewer__header-right", children: [
isGalleryMode && /* @__PURE__ */ jsxs("div", { className: "cometchat-fullscreen-viewer__index-display", "aria-live": "polite", children: [
currentIndex + 1,
" of ",
attachments.length
] }),
onDownload && /* @__PURE__ */ jsx(
"button",
{
type: "button",
className: "cometchat-fullscreen-viewer__action-button",
onClick: handleDownload,
"aria-label": getLocalizedString("accessibility_download"),
children: /* @__PURE__ */ jsx(
"div",
{
className: "cometchat-fullscreen-viewer__download-action-icon",
"aria-hidden": "true"
}
)
}
),
/* @__PURE__ */ jsx(
"button",
{
type: "button",
className: [
"cometchat-fullscreen-viewer__action-button",
"cometchat-fullscreen-viewer__close-btn"
].join(" "),
onClick: handleClose,
"aria-label": getLocalizedString("accessibility_close"),
children: /* @__PURE__ */ jsx("div", { className: "cometchat-fullscreen-viewer__close-icon", "aria-hidden": "true" })
}
)
] })
] });
};
CometChatFullScreenViewerHeader.displayName = "CometChatFullScreenViewerHeader";
// src/assets/unsupported.svg
var unsupported_default = 'data:image/svg+xml,<svg width="22" height="27" viewBox="0 0 22 27" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g filter="url(%23filter0_ii_19749_12975)">%0A<path d="M15.1328 0.000732422L21.7988 6.66675V24.5339C21.7988 25.7121 20.8442 26.6677 19.666 26.6677H2.33301C1.1548 26.6677 0.199219 25.7121 0.199219 24.5339V2.13452C0.199219 0.956314 1.1548 0.000732422 2.33301 0.000732422H15.1328Z" fill="%23CCCCCC"/>%0A</g>%0A<g filter="url(%23filter1_dd_19749_12975)">%0A<path d="M11.0006 21.334C10.1697 21.334 9.38975 21.1764 8.6609 20.8613C7.93204 20.546 7.2969 20.118 6.75547 19.5773C6.21394 19.0366 5.78596 18.402 5.47151 17.6737C5.15717 16.9453 5 16.1656 5 15.3346C5 14.5036 5.15758 13.7237 5.47273 12.9949C5.78799 12.266 6.21598 11.6309 6.75669 11.0895C7.29741 10.5479 7.93194 10.1199 8.66029 9.8055C9.38873 9.49116 10.1684 9.33398 10.9994 9.33398C11.8303 9.33398 12.6103 9.49156 13.3391 9.80672C14.068 10.122 14.7031 10.55 15.2445 11.0907C15.7861 11.6314 16.214 12.2659 16.5285 12.9943C16.8428 13.7227 17 14.5024 17 15.3334C17 16.1643 16.8424 16.9442 16.5273 17.6731C16.212 18.4019 15.784 19.0371 15.2433 19.5785C14.7026 20.12 14.0681 20.548 13.3397 20.8625C12.6113 21.1768 11.8316 21.334 11.0006 21.334ZM11 20.3679C11.5977 20.3679 12.1706 20.2688 12.7189 20.0705C13.2672 19.8722 13.7655 19.5849 14.2136 19.2086L7.12753 12.1203C6.75664 12.5746 6.47032 13.0749 6.26855 13.6212C6.06689 14.1675 5.96606 14.7385 5.96606 15.334C5.96606 16.7382 6.454 17.9282 7.42987 18.9041C8.40574 19.88 9.59578 20.3679 11 20.3679ZM14.8624 18.5476C15.2265 18.1002 15.5127 17.6022 15.7212 17.0536C15.9297 16.5051 16.0339 15.9319 16.0339 15.334C16.0339 13.9298 15.546 12.7397 14.5701 11.7639C13.5943 10.788 12.4042 10.3 11 10.3C10.4048 10.3 9.83411 10.4009 9.288 10.6025C8.7419 10.8043 8.24135 11.0933 7.78636 11.4696L14.8624 18.5476Z" fill="white"/>%0A</g>%0A<path d="M21.174 6.04175L15.7578 6.04175L21.7995 12.0834L21.7995 6.66675L21.174 6.04175Z" fill="url(%23paint0_linear_19749_12975)"/>%0A<path d="M17.2655 6.66675L21.7988 6.66675L15.1322 8.14332e-05L15.1322 4.53341C15.1322 5.71162 16.0873 6.66675 17.2655 6.66675Z" fill="%23EAEAEA"/>%0A<defs>%0A<filter id="filter0_ii_19749_12975" x="0.199219" y="-0.132601" width="21.5996" height="26.9337" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">%0A<feFlood flood-opacity="0" result="BackgroundImageFix"/>%0A<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>%0A<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>%0A<feOffset dy="-0.266667"/>%0A<feGaussianBlur stdDeviation="0.0666667"/>%0A<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>%0A<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>%0A<feBlend mode="normal" in2="shape" result="effect1_innerShadow_19749_12975"/>%0A<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>%0A<feOffset dy="0.266667"/>%0A<feGaussianBlur stdDeviation="0.0666667"/>%0A<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>%0A<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/>%0A<feBlend mode="normal" in2="effect1_innerShadow_19749_12975" result="effect2_innerShadow_19749_12975"/>%0A</filter>%0A<filter id="filter1_dd_19749_12975" x="4.86667" y="9.20065" width="13.2" height="13.4667" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">%0A<feFlood flood-opacity="0" result="BackgroundImageFix"/>%0A<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>%0A<feOffset dx="0.533333" dy="0.8"/>%0A<feGaussianBlur stdDeviation="0.266667"/>%0A<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>%0A<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_19749_12975"/>%0A<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>%0A<feOffset/>%0A<feGaussianBlur stdDeviation="0.0666667"/>%0A<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/>%0A<feBlend mode="normal" in2="effect1_dropShadow_19749_12975" result="effect2_dropShadow_19749_12975"/>%0A<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_19749_12975" result="shape"/>%0A</filter>%0A<linearGradient id="paint0_linear_19749_12975" x1="17.112" y1="4.68758" x2="23.1536" y2="10.7292" gradientUnits="userSpaceOnUse">%0A<stop stop-opacity="0.2"/>%0A<stop offset="1" stop-opacity="0"/>%0A</linearGradient>%0A</defs>%0A</svg>%0A';
var CometChatFullScreenViewerUnsupportedState = () => {
const { getLocalizedString } = useLocale();
const { onDownload, isGalleryMode, attachments, currentIndex, currentUrl } = useCometChatFullScreenViewerContext();
const handleDownload = () => {
const attachment = attachments[currentIndex];
if (isGalleryMode && attachment) {
onDownload?.(attachment);
} else {
onDownload?.(currentUrl);
}
};
return /* @__PURE__ */ jsxs("div", { className: "cometchat-fullscreen-viewer__unsupported-state", children: [
/* @__PURE__ */ jsx("div", { className: "cometchat-fullscreen-viewer__unsupported-icon-wrapper", children: /* @__PURE__ */ jsx(
"img",
{
src: unsupported_default,
alt: "",
"aria-hidden": "true",
className: "cometchat-fullscreen-viewer__unsupported-icon"
}
) }),
/* @__PURE__ */ jsx("div", { className: "cometchat-fullscreen-viewer__unsupported-title", children: getLocalizedString("full_screen_viewer_no_preview") }),
/* @__PURE__ */ jsx("div", { className: "cometchat-fullscreen-viewer__unsupported-subtitle", children: getLocalizedString("full_screen_viewer_preview_unsupported") }),
onDownload && (currentUrl || attachments[currentIndex]?.url) && /* @__PURE__ */ jsx(
CometChatButton,
{
className: "cometchat-fullscreen-viewer__unsupported-download",
variant: "primary",
size: "md",
onClick: handleDownload,
icon: /* @__PURE__ */ jsx("span", { className: "cometchat-fullscreen-viewer__download-icon", "aria-hidden": "true" }),
text: getLocalizedString("accessibility_download")
}
)
] });
};
CometChatFullScreenViewerUnsupportedState.displayName = "CometChatFullScreenViewerUnsupportedState";
var CometChatFullScreenViewerImageView = () => {
const { currentUrl, senderName } = useCometChatFullScreenViewerContext();
const { getLocalizedString } = useLocale();
const [hasError, setHasError] = useState(false);
useEffect(() => {
setHasError(false);
}, [currentUrl]);
if (hasError) {
return /* @__PURE__ */ jsx(CometChatFullScreenViewerUnsupportedState, {});
}
return /* @__PURE__ */ jsx(
"img",
{
src: currentUrl,
className: "cometchat-fullscreen-viewer__body-image",
alt: senderName ? `Image from ${senderName}` : getLocalizedString("accessibility_full_screen_image"),
decoding: "async",
onError: () => {
setHasError(true);
}
}
);
};
CometChatFullScreenViewerImageView.displayName = "CometChatFullScreenViewerImageView";
var CometChatFullScreenViewerVideoView = () => {
const { currentUrl, senderName } = useCometChatFullScreenViewerContext();
const { getLocalizedString } = useLocale();
const [status, setStatus] = useState("loading");
const videoRef = useRef(null);
useEffect(() => {
const video = videoRef.current;
if (!video) return;
setStatus("loading");
const handleMetadata = () => {
if (video.videoWidth === 0 && video.videoHeight === 0) {
video.pause();
setStatus("invalid");
return;
}
setStatus("valid");
const playback = video.play();
if (playback && typeof playback.catch === "function") {
playback.catch(() => void 0);
}
};
const handleError = () => {
setStatus("invalid");
};
video.addEventListener("loadedmetadata", handleMetadata);
video.addEventListener("error", handleError);
if (video.error) {
handleError();
} else if (video.readyState >= 1) {
handleMetadata();
}
return () => {
video.removeEventListener("loadedmetadata", handleMetadata);
video.removeEventListener("error", handleError);
};
}, [currentUrl]);
const videoClasses = [
"cometchat-fullscreen-viewer__body-video",
status !== "valid" ? "cometchat-fullscreen-viewer__body-video--loading" : ""
].filter(Boolean).join(" ");
return /* @__PURE__ */ jsxs("div", { className: "cometchat-fullscreen-viewer__video-container", children: [
/* @__PURE__ */ jsx(
"video",
{
ref: videoRef,
className: videoClasses,
src: currentUrl,
controls: true,
tabIndex: status === "valid" ? void 0 : -1,
"aria-label": senderName ? `Video from ${senderName}` : getLocalizedString("accessibility_full_screen_video"),
children: "Your browser does not support the video element."
}
),
status === "invalid" && /* @__PURE__ */ jsx(CometChatFullScreenViewerUnsupportedState, {})
] });
};
CometChatFullScreenViewerVideoView.displayName = "CometChatFullScreenViewerVideoView";
var CometChatFullScreenViewerAudioView = () => {
const { currentUrl, fileName, senderName } = useCometChatFullScreenViewerContext();
const { getLocalizedString } = useLocale();
return /* @__PURE__ */ jsxs("div", { className: "cometchat-fullscreen-viewer__audio-container", children: [
/* @__PURE__ */ jsx("div", { className: "cometchat-fullscreen-viewer__audio-icon", "aria-hidden": "true" }),
/* @__PURE__ */ jsx(
"audio",
{
className: "cometchat-fullscreen-viewer__body-audio",
src: currentUrl,
controls: true,
autoPlay: true,
"aria-label": senderName ? `Audio from ${senderName}` : getLocalizedString("accessibility_full_screen_audio"),
children: "Your browser does not support the audio element."
}
),
fileName && /* @__PURE__ */ jsx("div", { className: "cometchat-fullscreen-viewer__audio-filename", children: fileName })
] });
};
CometChatFullScreenViewerAudioView.displayName = "CometChatFullScreenViewerAudioView";
function formatFileSize2(bytes) {
if (!bytes) return "";
const units = ["B", "KB", "MB", "GB"];
let size = bytes;
let unitIndex = 0;
while (size >= 1024 && unitIndex < units.length - 1) {
size /= 1024;
unitIndex++;
}
return `${size.toFixed(unitIndex > 0 ? 1 : 0)} ${units[unitIndex] ?? ""}`;
}
function getFileExtension2(name) {
if (!name) return "";
const parts = name.split(".");
return parts.length > 1 ? (parts[parts.length - 1] ?? "").toUpperCase() : "";
}
var CometChatFullScreenViewerFileView = () => {
const { getLocalizedString } = useLocale();
const { currentUrl, fileName, fileSize } = useCometChatFullScreenViewerContext();
const formattedSize = formatFileSize2(fileSize);
const extension = getFileExtension2(fileName);
const displayName = fileName ?? "File";
return /* @__PURE__ */ jsxs("div", { className: "cometchat-fullscreen-viewer__file-preview", children: [
/* @__PURE__ */ jsxs("div", { className: "cometchat-fullscreen-viewer__file-icon", children: [
/* @__PURE__ */ jsx("div", { className: "cometchat-fullscreen-viewer__file-icon-inner", "aria-hidden": "true" }),
extension && /* @__PURE__ */ jsx("div", { className: "cometchat-fullscreen-viewer__file-extension", children: extension })
] }),
/* @__PURE__ */ jsxs("div", { className: "cometchat-fullscreen-viewer__file-info", children: [
/* @__PURE__ */ jsx("div", { className: "cometchat-fullscreen-viewer__file-preview-name", children: displayName }),
formattedSize && /* @__PURE__ */ jsx("div", { className: "cometchat-fullscreen-viewer__file-preview-size", children: formattedSize })
] }),
currentUrl && /* @__PURE__ */ jsxs(
"a",
{
href: currentUrl,
target: "_blank",
rel: "noopener noreferrer",
className: "cometchat-fullscreen-viewer__download-button",
"aria-label": getLocalizedString("accessibility_download_file").replace(
"{name}",
displayName
),
children: [
/* @__PURE__ */ jsx("span", { className: "cometchat-fullscreen-viewer__download-icon", "aria-hidden": "true" }),
/* @__PURE__ */ jsx("span", { children: getLocalizedString("accessibility_download") })
]
}
)
] });
};
CometChatFullScreenViewerFileView.displayName = "CometChatFullScreenViewerFileView";
var CometChatFullScreenViewerBody = ({
children,
className
}) => {
const { getLocalizedString } = useLocale();
const { mediaType, currentUrl } = useCometChatFullScreenViewerContext();
const bodyClasses = ["cometchat-fullscreen-viewer__body", className].filter(Boolean).join(" ");
if (children) {
return /* @__PURE__ */ jsx("div", { className: bodyClasses, children });
}
return /* @__PURE__ */ jsxs("div", { className: bodyClasses, children: [
mediaType === "image" && /* @__PURE__ */ jsx(CometChatFullScreenViewerImageView, {}),
mediaType === "video" && /* @__PURE__ */ jsx(CometChatFullScreenViewerVideoView, {}),
mediaType === "audio" && /* @__PURE__ */ jsx(CometChatFullScreenViewerAudioView, {}),
mediaType === "file" && /* @__PURE__ */ jsx(CometChatFullScreenViewerFileView, {}),
!currentUrl && !children && /* @__PURE__ */ jsx("div", { className: "cometchat-fullscreen-viewer__error-text", children: getLocalizedString("full_screen_viewer_empty") })
] });
};
CometChatFullScreenViewerBody.displayName = "CometChatFullScreenViewerBody";
var CometChatFullScreenViewerNavigation = ({ className }) => {
const { getLocalizedString } = useLocale();
const { isGalleryMode, canNavigatePrev, canNavigateNext, navigatePrev, navigateNext } = useCometChatFullScreenViewerContext();
if (!isGalleryMode) return null;
const prevClasses = [
"cometchat-fullscreen-viewer__nav-button",
"cometchat-fullscreen-viewer__nav-button--prev",
className
].filter(Boolean).join(" ");
const nextClasses = [
"cometchat-fullscreen-viewer__nav-button",
"cometchat-fullscreen-viewer__nav-button--next",
className
].filter(Boolean).join(" ");
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
"button",
{
type: "button",
className: prevClasses,
disabled: !canNavigatePrev,
"aria-disabled": !canNavigatePrev,
"aria-label": getLocalizedString("full_screen_viewer_previous"),
onClick: navigatePrev,
children: /* @__PURE__ */ jsx("div", { className: "cometchat-fullscreen-viewer__nav-icon-prev", "aria-hidden": "true" })
}
),
/* @__PURE__ */ jsx(
"button",
{
type: "button",
className: nextClasses,
disabled: !canNavigateNext,
"aria-disabled": !canNavigateNext,
"aria-label": getLocalizedString("full_screen_viewer_next"),
onClick: navigateNext,
children: /* @__PURE__ */ jsx("div", { className: "cometchat-fullscreen-viewer__nav-icon-next", "aria-hidden": "true" })
}
)
] });
};
CometChatFullScreenViewerNavigation.displayName = "CometChatFullScreenViewerNavigation";
var CometChatFullScreenViewerRoot = ({
onClose,
url = "",
mediaType = "image",
fileName,
fileSize,
attachments = [],
startIndex = 0,
senderName,
senderAvatar,
senderStatus,
sentAt,
onIndexChange,
onDownload,
children,
className
}) => {
const containerRef = useRef(null);
const previousFocusRef = useRef(null);
const IframeContext = useCometChatFrameContext();
const getCurrentDocument = useCallback(() => {
return IframeContext.iframeDocument ?? document;
}, [IframeContext.iframeDocument]);
const { getLocalizedString } = useLocale();
const isGalleryMode = attachments.length > 0;
const clampedStart = Math.max(0, Math.min(startIndex, attachments.length - 1));
const [currentIndex, setCurrentIndex] = useState(clampedStart);
useEffect(() => {
if (isGalleryMode) {
const clamped = Math.max(0, Math.min(startIndex, attachments.length - 1));
setCurrentIndex(clamped);
}
}, [startIndex, attachments.length, isGalleryMode]);
const currentAttachment = isGalleryMode ? attachments[currentIndex] : void 0;
const currentUrl = isGalleryMode ? currentAttachment?.url ?? "" : url;
const currentMediaType = isGalleryMode ? currentAttachment?.type ?? "image" : mediaType;
const currentFileName = isGalleryMode ? currentAttachment?.name ?? "" : fileName ?? "";
const currentFileSize = isGalleryMode ? currentAttachment?.size : fileSize;
const canNavigatePrev = isGalleryMode && currentIndex > 0;
const canNavigateNext = isGalleryMode && currentIndex < attachments.length - 1;
const navigatePrev = useCallback(() => {
if (!canNavigatePrev) return;
const newIndex = currentIndex - 1;
setCurrentIndex(newIndex);
onIndexChange?.(newIndex);
requestAnimationFrame(() => containerRef.current?.focus());
}, [canNavigatePrev, currentIndex, onIndexChange]);
const navigateNext = useCallback(() => {
if (!canNavigateNext) return;
const newIndex = currentIndex + 1;
setCurrentIndex(newIndex);
onIndexChange?.(newIndex);
requestAnimationFrame(() => containerRef.current?.focus());
}, [canNavigateNext, currentIndex, onIndexChange]);
useEffect(() => {
const doc = getCurrentDocument();
const original = doc.body.style.overflow;
doc.body.style.overflow = "hidden";
return () => {
doc.body.style.overflow = original;
};
}, [getCurrentDocument]);
useEffect(() => {
previousFocusRef.current = getCurrentDocument().activeElement;
requestAnimationFrame(() => {
containerRef.current?.focus();
});
return () => {
previousFocusRef.current?.focus();
};
}, [getCurrentDocument]);
const handleKeyDown = useCallback(
(event) => {
if (event.key === "Escape") {
event.preventDefault();
onClose();
return;
}
if (isGalleryMode) {
const activeTag = getCurrentDocument().activeElement?.tagName;
const isFocusedOnMedia = activeTag === "VIDEO" || activeTag === "AUDIO";
if (!isFocusedOnMedia) {
if (event.key === "ArrowLeft") {
event.preventDefault();
navigatePrev();
return;
}
if (event.key === "ArrowRight") {
event.preventDefault();
navigateNext();
return;
}
}
}
if (event.key === "Tab") {
const container = containerRef.current;
if (!container) return;
const focusable = container.querySelectorAll(
'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), video, audio'
);
if (focusable.length === 0) return;
const first = focusable[0];
const last = focusable[focusable.length - 1];
if (event.shiftKey && getCurrentDocument().activeElement === first) {
event.preventDefault();
last?.focus();
} else if (!event.shiftKey && getCurrentDocument().activeElement === last) {
event.preventDefault();
first?.focus();
}
}
},
[onClose, isGalleryMode, navigatePrev, navigateNext, getCurrentDocument]
);
const ctxValue = useMemo(
() => ({
onClose,
mediaType: currentMediaType,
currentUrl,
currentIndex,
attachments,
isGalleryMode,
canNavigatePrev,
canNavigateNext,
navigatePrev,
navigateNext,
senderName,
senderAvatar,
senderStatus,
sentAt,
fileName: currentFileName,
fileSize: currentFileSize,
onDownload
}),
[
onClose,
currentMediaType,
currentUrl,
currentIndex,
attachments,
isGalleryMode,
canNavigatePrev,
canNavigateNext,
navigatePrev,
navigateNext,
senderName,
senderAvatar,
senderStatus,
sentAt,
currentFileName,
currentFileSize,
onDownload
]
);
const rootClasses = ["cometchat-fullscreen-viewer", className].filter(Boolean).join(" ");
return /* @__PURE__ */ jsx(CometChatFullScreenViewerContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx(
"div",
{
ref: containerRef,
className: rootClasses,
role: "dialog",
"aria-modal": "true",
"aria-label": getAriaLabel(currentMediaType, getLocalizedString),
tabIndex: -1,
onKeyDown: handleKeyDown,
children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(CometChatFullScreenViewerHeader, {}),
/* @__PURE__ */ jsx(CometChatFullScreenViewerBody, {}),
isGalleryMode && /* @__PURE__ */ jsx(CometChatFullScreenViewerNavigation, {})
] })
}
) });
};
function getAriaLabel(mediaType, getLocalizedString) {
switch (mediaType) {
case "video":
return getLocalizedString("accessibility_full_screen_video");
case "audio":
return getLocalizedString("accessibility_full_screen_audio");
case "file":
return getLocalizedString("full_screen_viewer_file_viewer");
default:
return getLocalizedString("full_screen_viewer_image_viewer");
}
}
CometChatFullScreenViewerRoot.displayName = "CometChatFullScreenViewerRoot";
export { CometChatFullScreenViewerBody, CometChatFullScreenViewerHeader, CometChatFullScreenViewerNavigation, CometChatFullScreenViewerRoot, unsupported_default, useCometChatFullScreenViewerContext };