2021-10-07 16:12:39 +00:00
|
|
|
import DailyIframe from "@daily-co/daily-js";
|
|
|
|
|
import { getSession } from "next-auth/client";
|
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
|
|
|
|
2021-10-14 23:08:14 +00:00
|
|
|
import { HeadSeo } from "@components/seo/head-seo";
|
|
|
|
|
|
2021-10-07 16:12:39 +00:00
|
|
|
import prisma from "../../lib/prisma";
|
|
|
|
|
|
|
|
|
|
export default function JoinCall(props, session) {
|
|
|
|
|
const router = useRouter();
|
|
|
|
|
|
|
|
|
|
//if no booking redirectis to the 404 page
|
|
|
|
|
const emptyBooking = props.booking === null;
|
2021-10-26 13:10:55 +00:00
|
|
|
|
|
|
|
|
//daily.co calls have a 60 minute exit and entry buffer when a user enters a call when it's not available it will trigger the modals
|
|
|
|
|
const now = new Date();
|
|
|
|
|
const enterDate = new Date(now.getTime() + 60 * 60 * 1000);
|
|
|
|
|
const exitDate = new Date(now.getTime() - 60 * 60 * 1000);
|
|
|
|
|
|
|
|
|
|
console.log(enterDate);
|
|
|
|
|
|
|
|
|
|
//find out if the meeting is upcoming or in the past
|
|
|
|
|
const isPast = new Date(props.booking.endTime) <= exitDate;
|
|
|
|
|
const isUpcoming = new Date(props.booking.startTime) >= enterDate;
|
|
|
|
|
const meetingUnavailable = isUpcoming == true || isPast == true;
|
|
|
|
|
|
2021-10-07 16:12:39 +00:00
|
|
|
useEffect(() => {
|
|
|
|
|
if (emptyBooking) {
|
|
|
|
|
router.push("/call/no-meeting-found");
|
|
|
|
|
}
|
2021-10-26 13:10:55 +00:00
|
|
|
|
|
|
|
|
if (isUpcoming) {
|
|
|
|
|
router.push(`/call/meeting-not-started/${props.booking.uid}`);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (isPast) {
|
|
|
|
|
router.push(`/call/meeting-ended/${props.booking.uid}`);
|
|
|
|
|
}
|
2021-10-07 16:12:39 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
2021-10-26 13:10:55 +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({
|
|
|
|
|
url: props.booking.dailyRef.dailyurl,
|
|
|
|
|
showLeaveButton: true,
|
|
|
|
|
});
|
|
|
|
|
}
|
2021-10-26 13:10:55 +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({
|
|
|
|
|
url: props.booking.dailyRef.dailyurl,
|
|
|
|
|
showLeaveButton: true,
|
|
|
|
|
token: props.booking.dailyRef.dailytoken,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}, []);
|
|
|
|
|
|
2021-10-09 15:15:07 +00:00
|
|
|
return (
|
2021-10-14 23:08:14 +00:00
|
|
|
<>
|
|
|
|
|
<HeadSeo title="Video Conference" description="Join the video call" />
|
|
|
|
|
<Head>
|
|
|
|
|
<meta property="og:type" content="website" />
|
|
|
|
|
<meta property="og:image" content="https://cal.com/video-og-image.png" />
|
|
|
|
|
<meta property="twitter:card" content="summary_large_image" />
|
|
|
|
|
<meta property="twitter:image" content="https://cal.com/video-og-image.png" />
|
|
|
|
|
</Head>
|
|
|
|
|
<div style={{ zIndex: 2, position: "relative" }}>
|
|
|
|
|
<Link href="/">
|
|
|
|
|
<img
|
2021-10-26 13:10:55 +00:00
|
|
|
className="fixed z-10 hidden w-auto h-5 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
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export async function getServerSideProps(context) {
|
2021-10-26 13:10:55 +00:00
|
|
|
const booking = await prisma.booking.findUnique({
|
2021-10-07 16:12:39 +00:00
|
|
|
where: {
|
|
|
|
|
uid: context.query.uid,
|
|
|
|
|
},
|
|
|
|
|
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: {
|
|
|
|
|
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,
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
}
|
