@droppii-org/chat-sdk 0.1.82 → 0.1.84

package/dist/components/media-resources/LinkResourceItem.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../components/icon";
+import { useFetchUrlMetadata } from "../../hooks/common/useFetchUrlMetadata";
+import { openLink } from "../../utils/openLink";
+const stripProtocol = (url) => url.replace(/^https?:\/\//i, "");
+const LinkResourceItem = ({ url, messageMetadata }) => {
+    const { t } = useTranslation("conversation-inbox");
+    const hasMessageMetadata = Boolean((messageMetadata === null || messageMetadata === void 0 ? void 0 : messageMetadata.title) || (messageMetadata === null || messageMetadata === void 0 ? void 0 : messageMetadata.image));
+    const { data: fetchedMetadata } = useFetchUrlMetadata(url, !hasMessageMetadata);
+    const title = (messageMetadata === null || messageMetadata === void 0 ? void 0 : messageMetadata.title) || (fetchedMetadata === null || fetchedMetadata === void 0 ? void 0 : fetchedMetadata.title) || "";
+    const imageUrl = (messageMetadata === null || messageMetadata === void 0 ? void 0 : messageMetadata.image) || (fetchedMetadata === null || fetchedMetadata === void 0 ? void 0 : fetchedMetadata.image) || "";
+    const [failedImageUrl, setFailedImageUrl] = useState("");
+    const shouldShowImage = Boolean(imageUrl) && failedImageUrl !== imageUrl;
+    const handleOpen = () => {
+        openLink(url, t);
+    };
+    return (_jsxs("div", { "data-testid": "link-resource-item", className: "flex w-full cursor-pointer items-center gap-2 rounded-[12px] bg-gray-50/20 p-3", onClick: handleOpen, children: [_jsx("div", { className: "flex h-[76px] w-[76px] shrink-0 items-center justify-center", children: shouldShowImage ? (_jsx("img", { src: imageUrl, alt: "", className: "h-full w-full rounded-[8px] object-cover", onError: () => setFailedImageUrl(imageUrl) })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center rounded-[12px] bg-gray-200", children: _jsx(Icon, { icon: "link-b", size: 24, color: "white" }) })) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-center", children: [_jsx("p", { className: "truncate text-[14px] font-normal leading-[1.6] tracking-[-0.14px] text-gray-600", children: stripProtocol(url) }), _jsx("p", { className: "line-clamp-2 text-[16px] font-medium leading-[1.6] text-gray-900", children: title || url })] })] }));
+};
+export default LinkResourceItem;

package/dist/components/media-resources/LinkResourceList.d.ts

@@ -0,0 +1,3 @@
+declare const LinkResourceList: () => import("react/jsx-runtime").JSX.Element;
+export default LinkResourceList;
+//# sourceMappingURL=LinkResourceList.d.ts.map

package/dist/components/media-resources/LinkResourceList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkResourceList.d.ts","sourceRoot":"","sources":["../../../src/components/media-resources/LinkResourceList.tsx"],"names":[],"mappings":"AASA,QAAA,MAAM,gBAAgB,+CA2BrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/media-resources/LinkResourceList.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { parseMessageContent, parseUrlMetadata } from "../../utils/common";
+import { MediaResourceTabKey } from "./constants";
+import ResourceScrollContainer from "./ResourceScrollContainer";
+import LinkResourceItem from "./LinkResourceItem";
+import { useResourceTab } from "./useResourceTab";
+const LinkResourceList = () => {
+    const { items, containerProps } = useResourceTab(MediaResourceTabKey.Link);
+    const linkRows = items.flatMap((item) => {
+        var _a, _b;
+        const urls = parseMessageContent((_a = item === null || item === void 0 ? void 0 : item.chatLog) === null || _a === void 0 ? void 0 : _a.content).urls || [];
+        const messageMetadata = parseUrlMetadata((_b = item === null || item === void 0 ? void 0 : item.chatLog) === null || _b === void 0 ? void 0 : _b.ex);
+        return urls.map((url, urlIndex) => {
+            var _a;
+            return ({
+                key: `${(_a = item.chatLog) === null || _a === void 0 ? void 0 : _a.clientMsgID}-${urlIndex}`,
+                url,
+                messageMetadata: urlIndex === 0 ? messageMetadata : undefined,
+            });
+        });
+    });
+    return (_jsx(ResourceScrollContainer, Object.assign({}, containerProps, { itemCount: linkRows.length, children: _jsx("div", { className: "flex flex-col gap-2 p-3", children: linkRows.map((row) => (_jsx(LinkResourceItem, { url: row.url, messageMetadata: row.messageMetadata }, row.key))) }) })));
+};
+export default LinkResourceList;

package/dist/components/media-resources/MediaEntryCard.d.ts

@@ -0,0 +1,7 @@
+import { MediaResourceTabKey } from "./constants";
+interface MediaEntryCardProps {
+    onSelect: (tabKey: MediaResourceTabKey) => void;
+}
+declare const MediaEntryCard: ({ onSelect }: MediaEntryCardProps) => import("react/jsx-runtime").JSX.Element;
+export default MediaEntryCard;
+//# sourceMappingURL=MediaEntryCard.d.ts.map

package/dist/components/media-resources/MediaEntryCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaEntryCard.d.ts","sourceRoot":"","sources":["../../../src/components/media-resources/MediaEntryCard.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,mBAAmB,EAGpB,MAAM,aAAa,CAAC;AAErB,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACjD;AAED,QAAA,MAAM,cAAc,GAAI,cAAc,mBAAmB,4CA4BxD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/media-resources/MediaEntryCard.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../components/icon";
+import { MEDIA_RESOURCE_TAB_ORDER, RESOURCE_ENTRY_ICON, RESOURCE_TAB_LABEL_KEY, } from "./constants";
+const MediaEntryCard = ({ onSelect }) => {
+    const { t } = useTranslation();
+    return (_jsx("div", { "data-testid": "media-entry-card", className: "flex w-full items-center justify-between overflow-hidden rounded-[12px] bg-white", children: MEDIA_RESOURCE_TAB_ORDER.map((tabKey) => (_jsxs("button", { type: "button", "data-testid": `media-entry-${tabKey}`, className: "flex min-w-0 flex-1 cursor-pointer flex-col items-center justify-center gap-1 px-2 py-3", onClick: () => onSelect(tabKey), children: [_jsx(Icon, { icon: RESOURCE_ENTRY_ICON[tabKey], size: 24, className: "text-gray-900" }), _jsx("span", { className: "whitespace-nowrap text-center text-[12px] font-normal leading-[1.6] text-gray-900", children: t(RESOURCE_TAB_LABEL_KEY[tabKey]) })] }, tabKey))) }));
+};
+export default MediaEntryCard;

package/dist/components/media-resources/MediaResourcePanel.d.ts

@@ -0,0 +1,9 @@
+import { MediaResourceTabKey } from "./constants";
+interface MediaResourcePanelProps {
+    open: boolean;
+    initialTab: MediaResourceTabKey;
+    onClose: () => void;
+}
+declare const MediaResourcePanel: ({ open, initialTab, onClose, }: MediaResourcePanelProps) => import("react/jsx-runtime").JSX.Element;
+export default MediaResourcePanel;
+//# sourceMappingURL=MediaResourcePanel.d.ts.map

package/dist/components/media-resources/MediaResourcePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaResourcePanel.d.ts","sourceRoot":"","sources":["../../../src/components/media-resources/MediaResourcePanel.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGlD,UAAU,uBAAuB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,mBAAmB,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,kBAAkB,GAAI,gCAIzB,uBAAuB,4CAoCzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/media-resources/MediaResourcePanel.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Drawer } from "antd";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../components/icon";
+import MediaResourceTabs from "./MediaResourceTabs";
+const MediaResourcePanel = ({ open, initialTab, onClose, }) => {
+    const { t } = useTranslation();
+    return (_jsx(Drawer, { open: open, onClose: onClose, placement: "right", closeIcon: false, width: "100%", styles: {
+            body: { padding: 0 },
+        }, getContainer: false, destroyOnHidden: true, children: _jsxs("div", { className: "flex h-full flex-col bg-white", children: [_jsxs("div", { className: "flex w-full items-center p-2", children: [_jsx("button", { type: "button", "data-testid": "media-resource-back", className: "flex shrink-0 cursor-pointer items-center justify-center p-2 text-primary-400", onClick: onClose, children: _jsx(Icon, { icon: "arrow-left-o", size: 24 }) }), _jsx("p", { className: "min-w-0 flex-1 truncate px-2 text-[18px] font-bold leading-[1.6] text-gray-900", children: t("media_resources_title") })] }), _jsx("div", { className: "min-h-0 flex-1", children: _jsx(MediaResourceTabs, { initialTab: initialTab }) })] }) }));
+};
+export default MediaResourcePanel;

package/dist/components/media-resources/MediaResourceTabBar.d.ts

@@ -0,0 +1,8 @@
+import { MediaResourceTabKey } from "./constants";
+interface MediaResourceTabBarProps {
+    activeKey: MediaResourceTabKey;
+    onChange: (key: MediaResourceTabKey) => void;
+}
+declare const MediaResourceTabBar: ({ activeKey, onChange, }: MediaResourceTabBarProps) => import("react/jsx-runtime").JSX.Element;
+export default MediaResourceTabBar;
+//# sourceMappingURL=MediaResourceTabBar.d.ts.map

package/dist/components/media-resources/MediaResourceTabBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaResourceTabBar.d.ts","sourceRoot":"","sources":["../../../src/components/media-resources/MediaResourceTabBar.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,mBAAmB,EAEpB,MAAM,aAAa,CAAC;AAErB,UAAU,wBAAwB;IAChC,SAAS,EAAE,mBAAmB,CAAC;IAC/B,QAAQ,EAAE,CAAC,GAAG,EAAE,mBAAmB,KAAK,IAAI,CAAC;CAC9C;AAED,QAAA,MAAM,mBAAmB,GAAI,0BAG1B,wBAAwB,4CAwC1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/media-resources/MediaResourceTabBar.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { MEDIA_RESOURCE_TAB_ORDER, RESOURCE_TAB_LABEL_KEY, } from "./constants";
+const MediaResourceTabBar = ({ activeKey, onChange, }) => {
+    const { t } = useTranslation();
+    return (_jsx("div", { role: "tablist", "data-testid": "media-resource-tab-bar", className: "flex w-full items-end border-b border-gray-25 bg-white", children: MEDIA_RESOURCE_TAB_ORDER.map((tabKey) => {
+            const isActive = tabKey === activeKey;
+            return (_jsxs("button", { type: "button", role: "tab", "aria-selected": isActive, "data-testid": `media-resource-tab-${tabKey}`, className: "flex cursor-pointer flex-col items-center justify-center px-3 pt-0.5", onClick: () => onChange(tabKey), children: [_jsx("span", { className: clsx("text-center text-[14px] font-bold leading-[1.6] tracking-[0.14px]", isActive ? "text-primary-400" : "text-gray-400"), children: t(RESOURCE_TAB_LABEL_KEY[tabKey]) }), _jsx("span", { className: clsx("h-[3px] w-full rounded-[4px] bg-primary-400", !isActive && "opacity-0") })] }, tabKey));
+        }) }));
+};
+export default MediaResourceTabBar;

package/dist/components/media-resources/MediaResourceTabs.d.ts

@@ -0,0 +1,7 @@
+import { MediaResourceTabKey } from "./constants";
+export interface MediaResourceTabsProps {
+    initialTab?: MediaResourceTabKey;
+}
+declare const MediaResourceTabs: ({ initialTab, }: MediaResourceTabsProps) => import("react/jsx-runtime").JSX.Element;
+export default MediaResourceTabs;
+//# sourceMappingURL=MediaResourceTabs.d.ts.map

package/dist/components/media-resources/MediaResourceTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaResourceTabs.d.ts","sourceRoot":"","sources":["../../../src/components/media-resources/MediaResourceTabs.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAOlD,MAAM,WAAW,sBAAsB;IACrC,UAAU,CAAC,EAAE,mBAAmB,CAAC;CAClC;AAED,QAAA,MAAM,iBAAiB,GAAI,iBAExB,sBAAsB,4CAcxB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/media-resources/MediaResourceTabs.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { MediaResourceTabKey } from "./constants";
+import MediaResourceTabBar from "./MediaResourceTabBar";
+import ImageResourceGrid from "./ImageResourceGrid";
+import VideoResourceGrid from "./VideoResourceGrid";
+import FileResourceList from "./FileResourceList";
+import LinkResourceList from "./LinkResourceList";
+const MediaResourceTabs = ({ initialTab = MediaResourceTabKey.Image, }) => {
+    const [activeKey, setActiveKey] = useState(initialTab);
+    return (_jsxs("div", { className: "flex h-full flex-col bg-white", children: [_jsx(MediaResourceTabBar, { activeKey: activeKey, onChange: setActiveKey }), _jsxs("div", { className: "min-h-0 flex-1", children: [activeKey === MediaResourceTabKey.Image && _jsx(ImageResourceGrid, {}), activeKey === MediaResourceTabKey.Video && _jsx(VideoResourceGrid, {}), activeKey === MediaResourceTabKey.File && _jsx(FileResourceList, {}), activeKey === MediaResourceTabKey.Link && _jsx(LinkResourceList, {})] })] }));
+};
+export default MediaResourceTabs;

package/dist/components/media-resources/ResourceEmptyState.d.ts

@@ -0,0 +1,7 @@
+import { MediaResourceTabKey } from "./constants";
+interface ResourceEmptyStateProps {
+    tabKey: MediaResourceTabKey;
+}
+declare const ResourceEmptyState: ({ tabKey }: ResourceEmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+export default ResourceEmptyState;
+//# sourceMappingURL=ResourceEmptyState.d.ts.map

package/dist/components/media-resources/ResourceEmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceEmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/media-resources/ResourceEmptyState.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,mBAAmB,EAEpB,MAAM,aAAa,CAAC;AAErB,UAAU,uBAAuB;IAC/B,MAAM,EAAE,mBAAmB,CAAC;CAC7B;AAED,QAAA,MAAM,kBAAkB,GAAI,YAAY,uBAAuB,4CAc9D,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/media-resources/ResourceEmptyState.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { emptyBoxIcon } from "../../assets/svg";
+import { RESOURCE_EMPTY_TEXT_KEY, } from "./constants";
+const ResourceEmptyState = ({ tabKey }) => {
+    const { t } = useTranslation();
+    return (_jsxs("div", { "data-testid": "resource-empty-state", className: "flex h-full w-full flex-col items-center gap-3 bg-white px-8 py-[42px]", children: [_jsx("div", { className: "h-[120px] w-[120px] shrink-0", children: emptyBoxIcon }), _jsx("p", { className: "text-center text-[16px] font-normal leading-[1.6] tracking-[0.16px] text-gray-600", children: t(RESOURCE_EMPTY_TEXT_KEY[tabKey]) })] }));
+};
+export default ResourceEmptyState;

package/dist/components/media-resources/ResourceScrollContainer.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import { MediaResourceTabKey } from "./constants";
+export interface ResourceScrollContainerProps {
+    tabKey: MediaResourceTabKey;
+    itemCount: number;
+    isLoading: boolean;
+    isError: boolean;
+    hasNextPage: boolean;
+    isFetchingNextPage: boolean;
+    fetchNextPage: () => void;
+    onRetry: () => void;
+    children: ReactNode;
+}
+declare const ResourceScrollContainer: ({ tabKey, itemCount, isLoading, isError, hasNextPage, isFetchingNextPage, fetchNextPage, onRetry, children, }: ResourceScrollContainerProps) => import("react/jsx-runtime").JSX.Element;
+export default ResourceScrollContainer;
+//# sourceMappingURL=ResourceScrollContainer.d.ts.map

package/dist/components/media-resources/ResourceScrollContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceScrollContainer.d.ts","sourceRoot":"","sources":["../../../src/components/media-resources/ResourceScrollContainer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAI7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGlD,MAAM,WAAW,4BAA4B;IAC3C,MAAM,EAAE,mBAAmB,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAQD,QAAA,MAAM,uBAAuB,GAAI,+GAU9B,4BAA4B,4CAgD9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/components/media-resources/ResourceScrollContainer.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { Button, Spin } from "antd";
+import { useTranslation } from "react-i18next";
+import ResourceEmptyState from "./ResourceEmptyState";
+const LoadingIndicator = () => (_jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }));
+const ResourceScrollContainer = ({ tabKey, itemCount, isLoading, isError, hasNextPage, isFetchingNextPage, fetchNextPage, onRetry, children, }) => {
+    const { t } = useTranslation();
+    const isEmptyWithMorePages = itemCount === 0 && hasNextPage && !isError;
+    useEffect(() => {
+        if (isEmptyWithMorePages && !isFetchingNextPage) {
+            fetchNextPage();
+        }
+    }, [isEmptyWithMorePages, isFetchingNextPage, fetchNextPage]);
+    if (isLoading || isEmptyWithMorePages) {
+        return (_jsx("div", { className: "flex h-full items-center justify-center py-6", children: _jsx(Spin, {}) }));
+    }
+    if (isError) {
+        return (_jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-3 px-8 py-6", children: [_jsx("p", { className: "text-center text-[16px] leading-[1.6] text-gray-600", children: t("resource_load_error") }), _jsx(Button, { onClick: onRetry, children: t("retry") })] }));
+    }
+    if (itemCount === 0) {
+        return _jsx(ResourceEmptyState, { tabKey: tabKey });
+    }
+    const scrollableId = `resource-scroll-${tabKey}`;
+    return (_jsx("div", { id: scrollableId, className: "h-full overflow-auto", children: _jsx(InfiniteScroll, { dataLength: itemCount, next: fetchNextPage, hasMore: hasNextPage, loader: _jsx(LoadingIndicator, {}), scrollableTarget: scrollableId, children: children }) }));
+};
+export default ResourceScrollContainer;

package/dist/components/media-resources/VideoPreviewModal.d.ts

@@ -0,0 +1,10 @@
+import { MessageResourcesItem } from "../../types/dto";
+interface VideoPreviewModalProps {
+    open: boolean;
+    items: MessageResourcesItem[];
+    initialIndex: number;
+    onClose: () => void;
+}
+declare const VideoPreviewModal: ({ open, items, initialIndex, onClose, }: VideoPreviewModalProps) => import("react/jsx-runtime").JSX.Element;
+export default VideoPreviewModal;
+//# sourceMappingURL=VideoPreviewModal.d.ts.map

package/dist/components/media-resources/VideoPreviewModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPreviewModal.d.ts","sourceRoot":"","sources":["../../../src/components/media-resources/VideoPreviewModal.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAInD,UAAU,sBAAsB;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,oBAAoB,EAAE,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAKD,QAAA,MAAM,iBAAiB,GAAI,yCAKxB,sBAAsB,4CAmDxB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/media-resources/VideoPreviewModal.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, Carousel, Modal } from "antd";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../components/icon";
+import { downloadFileFromUrl } from "../../utils/download";
+const parseVideoContent = (item) => { var _a; return JSON.parse(((_a = item === null || item === void 0 ? void 0 : item.chatLog) === null || _a === void 0 ? void 0 : _a.content) || "{}"); };
+const VideoPreviewModal = ({ open, items, initialIndex, onClose, }) => {
+    const { t } = useTranslation();
+    const [currentIndex, setCurrentIndex] = useState(initialIndex);
+    const currentVideoContent = parseVideoContent(items[currentIndex]);
+    const handleDownload = () => {
+        downloadFileFromUrl(currentVideoContent.videoUrl || "");
+    };
+    return (_jsxs(Modal, { open: open, onCancel: onClose, footer: null, centered: true, destroyOnClose: true, styles: {
+            content: {
+                padding: 0,
+            },
+        }, children: [_jsx(Carousel, { dots: true, infinite: false, initialSlide: initialIndex, afterChange: (index) => setCurrentIndex(index), children: items.map((item, index) => {
+                    var _a;
+                    const videoContent = parseVideoContent(item);
+                    return (_jsx("div", { className: "text-center", children: _jsx("video", { src: videoContent.videoUrl, controls: true, autoPlay: index === currentIndex, className: "max-h-[80vh] w-full" }) }, (_a = item.chatLog) === null || _a === void 0 ? void 0 : _a.clientMsgID));
+                }) }), _jsx("div", { className: "flex items-center justify-end p-2", children: _jsxs(Button, { type: "text", onClick: handleDownload, children: [_jsx(Icon, { icon: "download-o", size: 20 }), t("download")] }) })] }));
+};
+export default VideoPreviewModal;

package/dist/components/media-resources/VideoResourceGrid.d.ts

@@ -0,0 +1,3 @@
+declare const VideoResourceGrid: () => import("react/jsx-runtime").JSX.Element;
+export default VideoResourceGrid;
+//# sourceMappingURL=VideoResourceGrid.d.ts.map

package/dist/components/media-resources/VideoResourceGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoResourceGrid.d.ts","sourceRoot":"","sources":["../../../src/components/media-resources/VideoResourceGrid.tsx"],"names":[],"mappings":"AAeA,QAAA,MAAM,iBAAiB,+CA8DtB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/media-resources/VideoResourceGrid.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Image } from "antd";
+import { useBoolean } from "ahooks";
+import { images } from "../../constants/images";
+import { Icon } from "../../components/icon";
+import VideoPlayerModal, { toVideoPlayerSources, } from "../../components/video-player/VideoPlayerModal";
+import { formatDuration } from "../../utils/common";
+import { MediaResourceTabKey, MILLISECONDS_PER_SECOND } from "./constants";
+import ResourceScrollContainer from "./ResourceScrollContainer";
+import { useResourceTab } from "./useResourceTab";
+const VideoResourceGrid = () => {
+    const { items, containerProps } = useResourceTab(MediaResourceTabKey.Video);
+    const [isPreviewOpen, { setTrue: openPreview, setFalse: closePreview }] = useBoolean(false);
+    const [previewIndex, setPreviewIndex] = useState(0);
+    const videoSources = useMemo(() => toVideoPlayerSources(items), [items]);
+    const handleOpenPreview = (index) => {
+        setPreviewIndex(index);
+        openPreview();
+    };
+    return (_jsxs(ResourceScrollContainer, Object.assign({}, containerProps, { itemCount: videoSources.length, children: [_jsx("div", { className: "grid grid-cols-3 gap-2 p-3", children: videoSources.map((video, index) => {
+                    const durationLabel = video.duration
+                        ? formatDuration(video.duration / MILLISECONDS_PER_SECOND)
+                        : "";
+                    return (_jsxs("div", { className: "relative aspect-square w-full cursor-pointer overflow-hidden rounded-[8px]", onClick: () => handleOpenPreview(index), children: [_jsx(Image, { rootClassName: "w-full h-full pointer-events-none", className: "w-full !h-full object-cover", src: video.snapshotUrl, alt: "video thumbnail", preview: false, fallback: images.imageFailed }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/30", children: _jsx(Icon, { icon: "play-b", size: 24, color: "white" }) }), durationLabel && (_jsx("div", { className: "absolute bottom-1 right-1 flex items-center justify-center rounded-[12px] bg-black/70 px-1", children: _jsx("span", { className: "text-[10px] font-normal leading-[1.6] text-white", children: durationLabel }) }))] }, video.id));
+                }) }), isPreviewOpen && (_jsx(VideoPlayerModal, { open: isPreviewOpen, videos: videoSources, initialIndex: previewIndex, onClose: closePreview }))] })));
+};
+export default VideoResourceGrid;

package/dist/components/media-resources/constants.d.ts

@@ -0,0 +1,14 @@
+import { MessageType } from "@openim/wasm-client-sdk";
+export declare enum MediaResourceTabKey {
+    Image = "image",
+    Video = "video",
+    File = "file",
+    Link = "link"
+}
+export declare const MEDIA_RESOURCE_TAB_ORDER: MediaResourceTabKey[];
+export declare const RESOURCE_CONTENT_TYPE: Record<MediaResourceTabKey, MessageType>;
+export declare const RESOURCE_TAB_LABEL_KEY: Record<MediaResourceTabKey, string>;
+export declare const RESOURCE_EMPTY_TEXT_KEY: Record<MediaResourceTabKey, string>;
+export declare const RESOURCE_ENTRY_ICON: Record<MediaResourceTabKey, string>;
+export declare const MILLISECONDS_PER_SECOND = 1000;
+//# sourceMappingURL=constants.d.ts.map

package/dist/components/media-resources/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/media-resources/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,oBAAY,mBAAmB;IAC7B,KAAK,UAAU;IACf,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,eAAO,MAAM,wBAAwB,EAAE,mBAAmB,EAKzD,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,mBAAmB,EAAE,WAAW,CAK1E,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,mBAAmB,EAAE,MAAM,CAKtE,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,mBAAmB,EAAE,MAAM,CAKvE,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,mBAAmB,EAAE,MAAM,CAKnE,CAAC;AAEF,eAAO,MAAM,uBAAuB,OAAO,CAAC"}

package/dist/components/media-resources/constants.js

@@ -0,0 +1,39 @@
+import { MessageType } from "@openim/wasm-client-sdk";
+export var MediaResourceTabKey;
+(function (MediaResourceTabKey) {
+    MediaResourceTabKey["Image"] = "image";
+    MediaResourceTabKey["Video"] = "video";
+    MediaResourceTabKey["File"] = "file";
+    MediaResourceTabKey["Link"] = "link";
+})(MediaResourceTabKey || (MediaResourceTabKey = {}));
+export const MEDIA_RESOURCE_TAB_ORDER = [
+    MediaResourceTabKey.Image,
+    MediaResourceTabKey.Video,
+    MediaResourceTabKey.File,
+    MediaResourceTabKey.Link,
+];
+export const RESOURCE_CONTENT_TYPE = {
+    [MediaResourceTabKey.Image]: MessageType.PictureMessage,
+    [MediaResourceTabKey.Video]: MessageType.VideoMessage,
+    [MediaResourceTabKey.File]: MessageType.FileMessage,
+    [MediaResourceTabKey.Link]: MessageType.UrlTextMessage,
+};
+export const RESOURCE_TAB_LABEL_KEY = {
+    [MediaResourceTabKey.Image]: "image",
+    [MediaResourceTabKey.Video]: "video",
+    [MediaResourceTabKey.File]: "file",
+    [MediaResourceTabKey.Link]: "link",
+};
+export const RESOURCE_EMPTY_TEXT_KEY = {
+    [MediaResourceTabKey.Image]: "no_resource_images",
+    [MediaResourceTabKey.Video]: "no_resource_videos",
+    [MediaResourceTabKey.File]: "no_resource_files",
+    [MediaResourceTabKey.Link]: "no_resource_links",
+};
+export const RESOURCE_ENTRY_ICON = {
+    [MediaResourceTabKey.Image]: "image-o",
+    [MediaResourceTabKey.Video]: "video-o",
+    [MediaResourceTabKey.File]: "folder-o",
+    [MediaResourceTabKey.Link]: "link-alt-o",
+};
+export const MILLISECONDS_PER_SECOND = 1000;

package/dist/components/media-resources/index.d.ts

@@ -0,0 +1,11 @@
+export { default as MediaResourceTabs } from "./MediaResourceTabs";
+export { default as MediaResourceTabBar } from "./MediaResourceTabBar";
+export { default as MediaResourcePanel } from "./MediaResourcePanel";
+export { default as MediaEntryCard } from "./MediaEntryCard";
+export { default as ImageResourceGrid } from "./ImageResourceGrid";
+export { default as VideoResourceGrid } from "./VideoResourceGrid";
+export { default as FileResourceList } from "./FileResourceList";
+export { default as LinkResourceList } from "./LinkResourceList";
+export { default as ResourceEmptyState } from "./ResourceEmptyState";
+export * from "./constants";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/media-resources/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/media-resources/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,cAAc,aAAa,CAAC"}

package/dist/components/media-resources/index.js

@@ -0,0 +1,10 @@
+export { default as MediaResourceTabs } from "./MediaResourceTabs";
+export { default as MediaResourceTabBar } from "./MediaResourceTabBar";
+export { default as MediaResourcePanel } from "./MediaResourcePanel";
+export { default as MediaEntryCard } from "./MediaEntryCard";
+export { default as ImageResourceGrid } from "./ImageResourceGrid";
+export { default as VideoResourceGrid } from "./VideoResourceGrid";
+export { default as FileResourceList } from "./FileResourceList";
+export { default as LinkResourceList } from "./LinkResourceList";
+export { default as ResourceEmptyState } from "./ResourceEmptyState";
+export * from "./constants";

package/dist/components/media-resources/useResourceTab.d.ts

@@ -0,0 +1,14 @@
+import { MediaResourceTabKey } from "./constants";
+export declare const useResourceTab: (tabKey: MediaResourceTabKey) => {
+    items: import("../../types/dto").MessageResultItem[];
+    containerProps: {
+        tabKey: MediaResourceTabKey;
+        isLoading: boolean;
+        isError: boolean;
+        hasNextPage: boolean;
+        isFetchingNextPage: boolean;
+        fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<import("../../types/dto").PagedMessageResponse, unknown>, Error>>;
+        onRetry: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<import("../../types/dto").PagedMessageResponse, unknown>, Error>>;
+    };
+};
+//# sourceMappingURL=useResourceTab.d.ts.map

package/dist/components/media-resources/useResourceTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResourceTab.d.ts","sourceRoot":"","sources":["../../../src/components/media-resources/useResourceTab.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAyB,MAAM,aAAa,CAAC;AAEzE,eAAO,MAAM,cAAc,GAAI,QAAQ,mBAAmB;;;;;;;;;;;CA8BzD,CAAC"}

package/dist/components/media-resources/useResourceTab.js

@@ -0,0 +1,22 @@
+import useConversationStore from "../../store/conversation";
+import { useMessageResources } from "../../hooks/message/useMessageResources";
+import { RESOURCE_CONTENT_TYPE } from "./constants";
+export const useResourceTab = (tabKey) => {
+    const selectedSourceId = useConversationStore((state) => state.selectedSourceId);
+    const { items, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, isError, refetch, } = useMessageResources({
+        recvID: selectedSourceId,
+        contentType: RESOURCE_CONTENT_TYPE[tabKey],
+    });
+    return {
+        items,
+        containerProps: {
+            tabKey,
+            isLoading,
+            isError,
+            hasNextPage,
+            isFetchingNextPage,
+            fetchNextPage,
+            onRetry: refetch,
+        },
+    };
+};

package/dist/components/message/item/FileMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/FileMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAiB,MAAM,yBAAyB,CAAC;AAMrE,UAAU,oBAAoB;IAC5B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,eAAe,GAAI,OAAO,oBAAoB,4CAiEnD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"FileMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/FileMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAiB,MAAM,yBAAyB,CAAC;AAOrE,UAAU,oBAAoB;IAC5B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,eAAe,GAAI,OAAO,oBAAoB,4CAyDnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/message/item/FileMessage.js

@@ -4,6 +4,7 @@ import { Spin } from "antd";
 import { Icon } from "../../../components/icon";
 import { documentIcon } from "../../../assets/svg";
 import { renderFileSize, shortenFileName } from "../../../utils/common";
+import { downloadFileFromUrl } from "../../../utils/download";
 const FileMessageItem = (props) => {
     var _a;
     const { message } = props;
@@ -19,16 +20,7 @@ const FileMessageItem = (props) => {
         window.open(sourceUrl, "_blank", "noopener,noreferrer");
     };
     const handleDownload = () => {
-        if (!hasUrl)
-            return;
-        const link = document.createElement("a");
-        link.href = sourceUrl;
-        link.setAttribute("download", fileName);
-        link.setAttribute("target", "_blank");
-        link.setAttribute("rel", "noopener noreferrer");
-        document.body.appendChild(link);
-        link.click();
-        link.remove();
+        downloadFileFromUrl(sourceUrl, fileName);
     };
     return (_jsx(Spin, { spinning: isSending, children: _jsxs("div", { className: "flex h-[51px] w-[292px] items-center gap-3 rounded-xl border border-gray-200/20 bg-white px-3 py-1", children: [_jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden [&>svg]:h-6 [&>svg]:w-6", children: documentIcon }), _jsxs("div", { className: "flex min-w-0 w-[168px] flex-col justify-center", children: [_jsx("span", { className: "truncate text-[14px] font-medium leading-[160%] text-gray-900", children: shortenFileName(fileName) }), _jsx("span", { className: "truncate text-[13px] leading-[160%] text-gray-600", children: renderFileSize(fileSize) })] }), _jsxs("div", { className: "flex w-[52px] shrink-0 items-center justify-end gap-3", children: [_jsx("button", { type: "button", onClick: handleView, disabled: !hasUrl, "aria-label": "Xem file", className: !hasUrl ? "opacity-30" : undefined, children: _jsx(Icon, { icon: "eye-o", size: 20, className: "text-gray-900" }) }), _jsx("button", { type: "button", onClick: handleDownload, disabled: !hasUrl, "aria-label": "T\u1EA3i xu\u1ED1ng", className: !hasUrl ? "opacity-30" : undefined, children: _jsx(Icon, { icon: "download-o", size: 20, className: "text-gray-900" }) })] })] }) }));
 };

package/dist/components/message/item/imagePreviewToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"imagePreviewToolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/imagePreviewToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIzC,eAAO,MAAM,aAAa,GAAI,WAAW,MAAM,SAQ9C,CAAC;AAEF,eAAO,MAAM,yBAAyB,GACpC,cAAc,SAAS,EACvB,UAAU,MAAM,GAAG,SAAS,EAC5B,GAAG,SAAS,KACX,SAcF,CAAC"}
+{"version":3,"file":"imagePreviewToolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/imagePreviewToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKzC,eAAO,MAAM,aAAa,GAAI,WAAW,MAAM,SAI9C,CAAC;AAEF,eAAO,MAAM,yBAAyB,GACpC,cAAc,SAAS,EACvB,UAAU,MAAM,GAAG,SAAS,EAC5B,GAAG,SAAS,KACX,SAcF,CAAC"}

package/dist/components/message/item/imagePreviewToolbar.js

@@ -1,14 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from "antd";
 import { Icon } from "../../../components/icon";
+import { downloadFileFromUrl } from "../../../utils/download";
 export const downloadImage = (imageUrl) => {
     if (!imageUrl)
         return;
-    const link = document.createElement("a");
-    link.href = imageUrl;
-    link.download = imageUrl.substring(imageUrl.lastIndexOf("/") + 1);
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
+    const fileName = imageUrl.substring(imageUrl.lastIndexOf("/") + 1);
+    downloadFileFromUrl(imageUrl, fileName);
 };
 export const renderImagePreviewToolbar = (originalNode, imageUrl, t) => (_jsxs("div", { className: "flex flex-col justify-center gap-2", children: [originalNode, imageUrl && (_jsx(Button, { type: "primary", icon: _jsx(Icon, { icon: "download-o", size: 16, className: "text-white" }), className: "self-center", onClick: () => downloadImage(imageUrl), children: t("download") }))] }));

package/dist/components/video-player/VideoPlayerModal.d.ts

@@ -0,0 +1,19 @@
+import { MessageResultItem } from "../../types/dto";
+export interface VideoPlayerSource {
+    id: string;
+    videoUrl?: string;
+    snapshotUrl?: string;
+    snapshotWidth?: number;
+    snapshotHeight?: number;
+    duration?: number;
+}
+interface VideoPlayerModalProps {
+    open: boolean;
+    videos: VideoPlayerSource[];
+    initialIndex: number;
+    onClose: () => void;
+}
+export declare const toVideoPlayerSources: (items: MessageResultItem[]) => VideoPlayerSource[];
+declare const VideoPlayerModal: ({ open, videos, initialIndex, onClose, }: VideoPlayerModalProps) => import("react/jsx-runtime").JSX.Element;
+export default VideoPlayerModal;
+//# sourceMappingURL=VideoPlayerModal.d.ts.map

package/dist/components/video-player/VideoPlayerModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPlayerModal.d.ts","sourceRoot":"","sources":["../../../src/components/video-player/VideoPlayerModal.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGhD,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,qBAAqB;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAQD,eAAO,MAAM,oBAAoB,GAC/B,OAAO,iBAAiB,EAAE,KACzB,iBAAiB,EAWhB,CAAC;AAEL,QAAA,MAAM,gBAAgB,GAAI,0CAKvB,qBAAqB,4CAqFvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/video-player/VideoPlayerModal.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Modal } from "antd";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../components/icon";
+import { parseMessageContent } from "../../utils/common";
+const NAVIGATION_BUTTON_CLASS = "absolute top-1/2 flex h-11 w-11 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white transition-colors hover:bg-black/70";
+const CLOSE_BUTTON_CLASS = "flex h-8 w-8 items-center justify-center rounded-full bg-black/50 text-white transition-colors hover:bg-black/70";
+export const toVideoPlayerSources = (items) => items.map((item) => {
+    var _a, _b;
+    const videoContent = parseMessageContent((_a = item === null || item === void 0 ? void 0 : item.chatLog) === null || _a === void 0 ? void 0 : _a.content);
+    return {
+        id: (_b = item === null || item === void 0 ? void 0 : item.chatLog) === null || _b === void 0 ? void 0 : _b.clientMsgID,
+        videoUrl: videoContent.videoUrl,
+        snapshotUrl: videoContent.snapshotUrl,
+        snapshotWidth: videoContent.snapshotWidth,
+        snapshotHeight: videoContent.snapshotHeight,
+        duration: videoContent.duration,
+    };
+});
+const VideoPlayerModal = ({ open, videos, initialIndex, onClose, }) => {
+    const { t } = useTranslation();
+    const [currentIndex, setCurrentIndex] = useState(initialIndex);
+    const hasPreviousVideo = currentIndex > 0;
+    const hasNextVideo = currentIndex < videos.length - 1;
+    const goToPreviousVideo = () => {
+        setCurrentIndex((index) => (index > 0 ? index - 1 : index));
+    };
+    const goToNextVideo = () => {
+        setCurrentIndex((index) => (index < videos.length - 1 ? index + 1 : index));
+    };
+    const currentVideo = videos[currentIndex];
+    const { snapshotWidth = 0, snapshotHeight = 0 } = currentVideo || {};
+    const hasSnapshotSize = snapshotWidth > 0 && snapshotHeight > 0;
+    return (_jsx(Modal, { open: open, onCancel: onClose, footer: null, centered: true, destroyOnHidden: true, getContainer: false, closeIcon: _jsx("span", { className: CLOSE_BUTTON_CLASS, children: _jsx(Icon, { icon: "close-b", size: 18 }) }), styles: {
+            content: {
+                padding: 0,
+            },
+        }, children: _jsxs("div", { className: "relative overflow-hidden rounded-[8px] bg-black", children: [_jsx("video", { src: currentVideo === null || currentVideo === void 0 ? void 0 : currentVideo.videoUrl, poster: currentVideo === null || currentVideo === void 0 ? void 0 : currentVideo.snapshotUrl, controls: true, autoPlay: true, className: clsx("block max-h-[80vh] w-full object-contain", !hasSnapshotSize && "aspect-video"), style: hasSnapshotSize
+                        ? { aspectRatio: `${snapshotWidth} / ${snapshotHeight}` }
+                        : undefined }, currentVideo === null || currentVideo === void 0 ? void 0 : currentVideo.id), videos.length > 1 && (_jsxs("span", { className: "absolute left-3 top-3 rounded-full bg-black/60 px-2 py-0.5 text-[12px] font-medium leading-[1.6] text-white", children: [currentIndex + 1, " / ", videos.length] })), hasPreviousVideo && (_jsx("button", { type: "button", "aria-label": t("previous_video"), "data-testid": "video-player-previous", className: clsx(NAVIGATION_BUTTON_CLASS, "left-2"), onClick: goToPreviousVideo, children: _jsx(Icon, { icon: "angle-left-o", size: 24 }) })), hasNextVideo && (_jsx("button", { type: "button", "aria-label": t("next_video"), "data-testid": "video-player-next", className: clsx(NAVIGATION_BUTTON_CLASS, "right-2"), onClick: goToNextVideo, children: _jsx(Icon, { icon: "angle-right-o", size: 24 }) }))] }) }));
+};
+export default VideoPlayerModal;

package/dist/components/video-player/index.d.ts

@@ -0,0 +1,3 @@
+export { default as VideoPlayerModal, toVideoPlayerSources } from "./VideoPlayerModal";
+export type { VideoPlayerSource } from "./VideoPlayerModal";
+//# sourceMappingURL=index.d.ts.map