2021-10-07 16:12:39 +00:00
|
|
|
import DailyIframe from "@daily-co/daily-js";
|
2022-01-07 20:23:37 +00:00
|
|
|
import { NextPageContext } from "next";
|
|
|
|
|
import { getSession } from "next-auth/react";
|
2021-10-14 23:08:14 +00:00
|
|
|
import Head from "next/head";
|
2021-10-09 15:15:07 +00:00
|
|
|
import Link from "next/link";
|
2021-10-07 16:12:39 +00:00
|
|
|
import { useRouter } from "next/router";
|
2021-10-09 15:15:07 +00:00
|
|
|
import React, { useEffect } from "react";
|
2021-10-07 16:12:39 +00:00
|
|
|
|
2022-02-15 12:46:27 +00:00
|
|
|
import { useLocale } from "@lib/hooks/useLocale";
|
2022-01-07 20:23:37 +00:00
|
|
|
import prisma from "@lib/prisma";
|
|
|
|
|
import { inferSSRProps } from "@lib/types/inferSSRProps";
|
|
|
|
|
|
|
|
|
|
export type JoinCallPageProps = inferSSRProps<typeof getServerSideProps>;
|
2021-10-07 16:12:39 +00:00
|
|
|
|
2022-01-07 20:23:37 +00:00
|
|
|
export default function JoinCall(props: JoinCallPageProps) {
|
2022-02-15 12:46:27 +00:00
|
|
|
const { t } = useLocale();
|
2022-01-07 20:23:37 +00:00
|
|
|
const session = props.session;
|
2021-10-07 16:12:39 +00:00
|
|
|
const router = useRouter();
|
|
|
|
|
|
|
|
|
|
//if no booking redirectis to the 404 page
|
|
|
|
|
const emptyBooking = props.booking === null;
|
2021-10-26 13:10:55 +00:00
|
|
|
|
2022-02-19 00:39:10 +00:00
|
|
|
//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
|
2021-10-26 13:10:55 +00:00
|
|
|
const now = new Date();
|
|
|
|
|
const exitDate = new Date(now.getTime() - 60 * 60 * 1000);
|
|
|
|
|
|
2022-02-19 00:39:10 +00:00
|
|
|
//find out if the meeting is in the past
|
2022-01-07 20:23:37 +00:00
|
|
|
const isPast = new Date(props.booking?.endTime || "") <= exitDate;
|
2022-02-19 00:39:10 +00:00
|
|
|
const meetingUnavailable = isPast == true;
|
2021-10-26 13:10:55 +00:00
|
|
|
|
2021-10-07 16:12:39 +00:00
|
|
|
useEffect(() => {
|
|
|
|
|
if (emptyBooking) {
|
2022-02-15 12:46:27 +00:00
|
|
|
router.push("/video/no-meeting-found");
|
2021-10-07 16:12:39 +00:00
|
|
|
}
|
2021-10-26 13:10:55 +00:00
|
|
|
|
|
|
|
|
if (isPast) {
|
2022-02-15 12:46:27 +00:00
|
|
|
router.push(`/video/meeting-ended/${props.booking?.uid}`);
|
2021-10-26 13:10:55 +00:00
|
|
|
}
|
2021-10-07 16:12:39 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
2022-01-07 20:23:37 +00:00
|
|
|
if (!meetingUnavailable && !emptyBooking && session?.userid !== props.booking.user?.id) {
|
2021-10-07 16:12:39 +00:00
|
|
|
const callFrame = DailyIframe.createFrame({
|
2021-10-26 13:10:55 +00:00
|
|
|
theme: {
|
|
|
|
|
colors: {
|
|
|
|
|
accent: "#FFF",
|
|
|
|
|
accentText: "#111111",
|
|
|
|
|
background: "#111111",
|
|
|
|
|
backgroundAccent: "#111111",
|
|
|
|
|
baseText: "#FFF",
|
2021-12-06 09:49:56 +00:00
|
|
|
border: "#292929",
|
2021-10-26 13:10:55 +00:00
|
|
|
mainAreaBg: "#111111",
|
|
|
|
|
mainAreaBgAccent: "#111111",
|
|
|
|
|
mainAreaText: "#FFF",
|
|
|
|
|
supportiveText: "#FFF",
|
|
|
|
|
},
|
|
|
|
|
},
|
2021-10-07 16:12:39 +00:00
|
|
|
showLeaveButton: true,
|
|
|
|
|
iframeStyle: {
|
|
|
|
|
position: "fixed",
|
|
|
|
|
width: "100%",
|
|
|
|
|
height: "100%",
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
callFrame.join({
|
2022-01-07 20:23:37 +00:00
|
|
|
url: props.booking.dailyRef?.dailyurl,
|
2021-10-07 16:12:39 +00:00
|
|
|
showLeaveButton: true,
|
|
|
|
|
});
|
|
|
|
|
}
|
2022-01-07 20:23:37 +00:00
|
|
|
if (!meetingUnavailable && !emptyBooking && session?.userid === props.booking.user?.id) {
|
2021-10-07 16:12:39 +00:00
|
|
|
const callFrame = DailyIframe.createFrame({
|
2021-10-26 13:10:55 +00:00
|
|
|
theme: {
|
|
|
|
|
colors: {
|
|
|
|
|
accent: "#FFF",
|
|
|
|
|
accentText: "#111111",
|
|
|
|
|
background: "#111111",
|
|
|
|
|
backgroundAccent: "#111111",
|
|
|
|
|
baseText: "#FFF",
|
2021-12-06 09:49:56 +00:00
|
|
|
border: "#292929",
|
2021-10-26 13:10:55 +00:00
|
|
|
mainAreaBg: "#111111",
|
|
|
|
|
mainAreaBgAccent: "#111111",
|
|
|
|
|
mainAreaText: "#FFF",
|
|
|
|
|
supportiveText: "#FFF",
|
|
|
|
|
},
|
|
|
|
|
},
|
2021-10-07 16:12:39 +00:00
|
|
|
showLeaveButton: true,
|
|
|
|
|
iframeStyle: {
|
|
|
|
|
position: "fixed",
|
|
|
|
|
width: "100%",
|
|
|
|
|
height: "100%",
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
callFrame.join({
|
2022-01-07 20:23:37 +00:00
|
|
|
url: props.booking.dailyRef?.dailyurl,
|
2021-10-07 16:12:39 +00:00
|
|
|
showLeaveButton: true,
|
2022-01-07 20:23:37 +00:00
|
|
|
token: props.booking.dailyRef?.dailytoken,
|
2021-10-07 16:12:39 +00:00
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}, []);
|
|
|
|
|
|
2021-10-09 15:15:07 +00:00
|
|
|
return (
|
2021-10-14 23:08:14 +00:00
|
|
|
<>
|
|
|
|
|
<Head>
|
2022-02-15 12:46:27 +00:00
|
|
|
<title>Cal.com Video</title>
|
|
|
|
|
<meta name="title" content="Cal.com Video" />
|
|
|
|
|
<meta name="description" content={t("quick_video_meeting")} />
|
2021-10-14 23:08:14 +00:00
|
|
|
<meta property="og:image" content="https://cal.com/video-og-image.png" />
|
2022-02-15 12:46:27 +00:00
|
|
|
<meta property="og:type" content="website" />
|
|
|
|
|
<meta property="og:url" content="https://cal.com/video" />
|
|
|
|
|
<meta property="og:title" content="Cal.com Video" />
|
|
|
|
|
<meta property="og:description" content={t("quick_video_meeting")} />
|
2021-10-14 23:08:14 +00:00
|
|
|
<meta property="twitter:image" content="https://cal.com/video-og-image.png" />
|
2022-02-15 12:46:27 +00:00
|
|
|
<meta property="twitter:card" content="summary_large_image" />
|
|
|
|
|
<meta property="twitter:url" content="https://cal.com/video" />
|
|
|
|
|
<meta property="twitter:title" content="Cal.com Video" />
|
|
|
|
|
<meta property="twitter:description" content={t("quick_video_meeting")} />
|
2021-10-14 23:08:14 +00:00
|
|
|
</Head>
|
|
|
|
|
<div style={{ zIndex: 2, position: "relative" }}>
|
|
|
|
|
<Link href="/">
|
|
|
|
|
<img
|
2022-02-19 00:39:10 +00:00
|
|
|
className="h-5·w-auto fixed z-10 hidden sm:inline-block"
|
2021-10-14 23:08:14 +00:00
|
|
|
src="https://cal.com/logo-white.svg"
|
|
|
|
|
alt="Cal.com Logo"
|
|
|
|
|
style={{
|
|
|
|
|
top: 46,
|
|
|
|
|
left: 24,
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</Link>
|
|
|
|
|
{JoinCall}
|
|
|
|
|
</div>
|
|
|
|
|
</>
|
2021-10-09 15:15:07 +00:00
|
|
|
);
|
2021-10-07 16:12:39 +00:00
|
|
|
}
|
|
|
|
|
|
2022-01-07 20:23:37 +00:00
|
|
|
export async function getServerSideProps(context: NextPageContext) {
|
2021-10-26 13:10:55 +00:00
|
|
|
const booking = await prisma.booking.findUnique({
|
2021-10-07 16:12:39 +00:00
|
|
|
where: {
|
2022-01-07 20:23:37 +00:00
|
|
|
uid: context.query.uid as string,
|
2021-10-07 16:12:39 +00:00
|
|
|
},
|
|
|
|
|
select: {
|
2021-10-26 13:10:55 +00:00
|
|
|
uid: true,
|
2021-10-07 16:12:39 +00:00
|
|
|
id: true,
|
2021-10-26 13:10:55 +00:00
|
|
|
title: true,
|
|
|
|
|
description: true,
|
|
|
|
|
startTime: true,
|
|
|
|
|
endTime: true,
|
2021-10-07 16:12:39 +00:00
|
|
|
user: {
|
|
|
|
|
select: {
|
2022-01-07 20:23:37 +00:00
|
|
|
id: true,
|
2021-10-07 16:12:39 +00:00
|
|
|
credentials: true,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
attendees: true,
|
|
|
|
|
dailyRef: {
|
|
|
|
|
select: {
|
|
|
|
|
dailyurl: true,
|
|
|
|
|
dailytoken: true,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
references: {
|
|
|
|
|
select: {
|
|
|
|
|
uid: true,
|
|
|
|
|
type: true,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
2021-10-26 13:10:55 +00:00
|
|
|
if (!booking) {
|
|
|
|
|
// TODO: Booking is already cancelled
|
|
|
|
|
return {
|
|
|
|
|
props: { booking: null },
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const bookingObj = Object.assign({}, booking, {
|
|
|
|
|
startTime: booking.startTime.toString(),
|
|
|
|
|
endTime: booking.endTime.toString(),
|
|
|
|
|
});
|
2021-10-07 16:12:39 +00:00
|
|
|
const session = await getSession();
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
props: {
|
2021-10-26 13:10:55 +00:00
|
|
|
booking: bookingObj,
|
2021-10-07 16:12:39 +00:00
|
|
|
session: session,
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
}
|
