import { useState } from "react"; import dayjs from "@calcom/dayjs"; import LicenseRequired from "@calcom/features/ee/common/components/v2/LicenseRequired"; import useHasPaidPlan from "@calcom/lib/hooks/useHasPaidPlan"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { RecordingItemSchema } from "@calcom/prisma/zod-utils"; import { RouterOutputs, trpc } from "@calcom/trpc/react"; import type { PartialReference } from "@calcom/types/EventManager"; import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, UpgradeTeamsBadge, } from "@calcom/ui"; import { Button, showToast } from "@calcom/ui"; import { FiDownload } from "@calcom/ui/components/icon"; import RecordingListSkeleton from "./components/RecordingListSkeleton"; type BookingItem = RouterOutputs["viewer"]["bookings"]["get"]["bookings"][number]; interface IViewRecordingsDialog { booking?: BookingItem; isOpenDialog: boolean; setIsOpenDialog: React.Dispatch>; timeFormat: number | null; } function convertSecondsToMs(seconds: number) { // Bitwise Double Not is faster than Math.floor const minutes = ~~(seconds / 60); const extraSeconds = seconds % 60; return `${minutes}min ${extraSeconds}sec`; } interface GetTimeSpanProps { startTime: string | undefined; endTime: string | undefined; locale: string; isTimeFormatAMPM: boolean; } const getTimeSpan = ({ startTime, endTime, locale, isTimeFormatAMPM }: GetTimeSpanProps) => { if (!startTime || !endTime) return ""; const formattedStartTime = new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "numeric", hour12: isTimeFormatAMPM, }).format(new Date(startTime)); const formattedEndTime = new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "numeric", hour12: isTimeFormatAMPM, }).format(new Date(endTime)); return `${formattedStartTime} - ${formattedEndTime}`; }; export const ViewRecordingsDialog = (props: IViewRecordingsDialog) => { const { t, i18n } = useLocale(); const { isOpenDialog, setIsOpenDialog, booking, timeFormat } = props; const [downloadingRecordingId, setRecordingId] = useState(null); const { hasPaidPlan, isLoading: isTeamPlanStatusLoading } = useHasPaidPlan(); const roomName = booking?.references?.find((reference: PartialReference) => reference.type === "daily_video")?.meetingId ?? undefined; const { data: recordings, isLoading } = trpc.viewer.getCalVideoRecordings.useQuery( { roomName: roomName ?? "" }, { enabled: !!roomName && isOpenDialog } ); const handleDownloadClick = async (recordingId: string) => { try { setRecordingId(recordingId); const res = await fetch(`/api/download-cal-video-recording?recordingId=${recordingId}`, { headers: { "Content-Type": "application/json", }, }); const respBody = await res.json(); if (respBody?.download_link) { window.location.href = respBody.download_link; } } catch (err) { console.error(err); showToast(t("something_went_wrong"), "error"); } setRecordingId(null); }; const subtitle = `${booking?.title} - ${dayjs(booking?.startTime).format("ddd")} ${dayjs( booking?.startTime ).format("D")}, ${dayjs(booking?.startTime).format("MMM")} ${getTimeSpan({ startTime: booking?.startTime, endTime: booking?.endTime, locale: i18n.language, isTimeFormatAMPM: timeFormat === 12, })} `; return ( <> {(isLoading || isTeamPlanStatusLoading) && } {recordings && "data" in recordings && recordings?.data?.length > 0 && (
{recordings.data.map((recording: RecordingItemSchema, index: number) => { return (

{t("recording")} {index + 1}

{convertSecondsToMs(recording.duration)}

{hasPaidPlan ? ( ) : ( )}
); })}
)} {!isLoading && (!recordings || (recordings && "total_count" in recordings && recordings?.total_count === 0)) && (

{t("no_recordings_found")}

)}
); }; export default ViewRecordingsDialog;