@droppii-org/chat-sdk
Version:
Droppii React Chat SDK
52 lines (51 loc) • 4.34 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { MessageType } from "@openim/wasm-client-sdk";
import { useSearchMessage } from "../../hooks/search/useSearchMessage";
import InfiniteScroll from "react-infinite-scroll-component";
import { Carousel, Empty, Image, Modal, Spin } from "antd";
import { useCallback, useState } from "react";
import dayjs from "dayjs";
import useConversationStore from "../../store/conversation";
import { useBoolean } from "ahooks";
import { images } from "../../constants/images";
import { Icon } from "../icon";
import { useTranslation } from "react-i18next";
const VideoCollection = () => {
const { t } = useTranslation();
const selectedSourceId = useConversationStore((state) => state.selectedSourceId);
const { groupedData, fetchNextPage, hasNextPage, dataFlatten, isLoading } = useSearchMessage({
payload: {
recvID: selectedSourceId,
contentType: MessageType.VideoMessage,
},
});
const [open, { setTrue, setFalse }] = useBoolean(false);
const [currentIndex, setCurrentIndex] = useState(0);
const handleOpenPreview = (index) => {
setCurrentIndex(index);
setTrue();
};
const renderItem = useCallback((date, items) => {
return (_jsxs("div", { className: "mb-2", children: [_jsx("span", { className: "text-sm font-medium text-gray-500 px-3", children: dayjs(date).format("DD MMMM, YYYY") }), _jsx("div", { className: "grid grid-cols-3 justify-start gap-px py-2", children: items.map((item) => {
var _a, _b;
const videoContent = JSON.parse(((_a = item === null || item === void 0 ? void 0 : item.chatLog) === null || _a === void 0 ? void 0 : _a.content) || "{}");
const globalIndex = dataFlatten.findIndex((v) => { var _a, _b; return ((_a = v.chatLog) === null || _a === void 0 ? void 0 : _a.clientMsgID) === ((_b = item.chatLog) === null || _b === void 0 ? void 0 : _b.clientMsgID); });
return (_jsxs("div", { className: "border relative w-full h-full aspect-square cursor-pointer", onClick: () => handleOpenPreview(globalIndex), children: [_jsx(Image, { rootClassName: "w-full h-full", src: videoContent.snapshotUrl, alt: "video thumbnail", className: "w-full !h-full object-cover", fallback: images.imageFailed }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/30 text-white text-2xl", children: _jsx(Icon, { icon: "play-b", size: 24, color: "white" }) })] }, (_b = item === null || item === void 0 ? void 0 : item.chatLog) === null || _b === void 0 ? void 0 : _b.clientMsgID));
}) })] }, date));
}, []);
if (dataFlatten.length === 0 && !isLoading)
return _jsx(Empty, { description: t("no_media_files") });
if (isLoading)
return (_jsx("div", { className: "flex items-center justify-center", children: _jsx(Spin, {}) }));
return (_jsxs("div", { id: "scrollableVideoDiv", className: "h-full overflow-auto", children: [_jsx(InfiniteScroll, { dataLength: Object.keys(groupedData).length, next: fetchNextPage, hasMore: hasNextPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableVideoDiv", children: Object.entries(groupedData).map(([date, items]) => renderItem(date, items)) }), _jsx(Modal, { open: open, onCancel: setFalse, footer: null, centered: true, styles: {
content: {
padding: 0,
},
}, children: _jsx(Carousel, { dots: true, infinite: false, initialSlide: currentIndex, afterChange: (i) => setCurrentIndex(i), children: dataFlatten.map((item, idx) => {
var _a;
const videoContent = JSON.parse(((_a = item === null || item === void 0 ? void 0 : item.chatLog) === null || _a === void 0 ? void 0 : _a.content) || "{}");
const sourceUrl = videoContent.videoUrl;
return (_jsx("div", { style: { textAlign: "center" }, children: _jsx("video", { src: sourceUrl, controls: true, autoPlay: idx === currentIndex, style: { width: "100%", maxHeight: "80vh" } }) }, idx));
}) }) })] }));
};
export default VideoCollection;