import DailyIframe from "@daily-co/daily-js"; import { NextPageContext } from "next"; import { getSession } from "next-auth/react"; import Head from "next/head"; import { useEffect } from "react"; import { SEO_IMG_OGIMG_VIDEO, WEBSITE_URL } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import prisma, { bookingMinimalSelect } from "@calcom/prisma"; import { inferSSRProps } from "@calcom/types/inferSSRProps"; export type JoinCallPageProps = inferSSRProps; export default function JoinCall(props: JoinCallPageProps) { const { t } = useLocale(); useEffect(() => { const callFrame = DailyIframe.createFrame({ theme: { colors: { accent: "#FFF", accentText: "#111111", background: "#111111", backgroundAccent: "#111111", baseText: "#FFF", border: "#292929", mainAreaBg: "#111111", mainAreaBgAccent: "#111111", mainAreaText: "#FFF", supportiveText: "#FFF", }, }, showLeaveButton: true, iframeStyle: { position: "fixed", width: "100%", height: "100%", }, }); callFrame.join({ url: props.booking.references[0].meetingUrl ?? "", showLeaveButton: true, ...(props.booking.references[0].meetingPassword ? { token: props.booking.references[0].meetingPassword } : null), }); }, [props.booking?.references]); return ( <> Cal.com Video
Cal.com Logo
); } export async function getServerSideProps(context: NextPageContext) { const booking = await prisma.booking.findUnique({ where: { uid: context.query.uid as string, }, select: { ...bookingMinimalSelect, uid: true, user: { select: { id: true, credentials: true, }, }, references: { select: { uid: true, type: true, meetingUrl: true, meetingPassword: true, }, where: { type: "daily_video", }, }, }, }); if (!booking || booking.references.length === 0 || !booking.references[0].meetingUrl) { return { redirect: { destination: "/video/no-meeting-found", permanent: false, }, }; } //daily.co calls have a 60 minute exit buffer when a user enters a call when it's not available it will trigger the modals const now = new Date(); const exitDate = new Date(now.getTime() - 60 * 60 * 1000); //find out if the meeting is in the past const isPast = booking?.endTime <= exitDate; if (isPast) { return { redirect: { destination: `/video/meeting-ended/${booking?.uid}`, permanent: false, }, }; } const bookingObj = Object.assign({}, booking, { startTime: booking.startTime.toString(), endTime: booking.endTime.toString(), }); const session = await getSession(); // set meetingPassword to null for guests if (session?.user.id !== bookingObj.user?.id) { bookingObj.references.forEach((bookRef) => { bookRef.meetingPassword = null; }); } return { props: { booking: bookingObj, }, }; }