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;
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (emptyBooking) {
|
|
|
|
|
router.push("/call/no-meeting-found");
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (!emptyBooking && session.userid !== props.booking.user.id) {
|
|
|
|
|
const callFrame = DailyIframe.createFrame({
|
|
|
|
|
showLeaveButton: true,
|
|
|
|
|
iframeStyle: {
|
|
|
|
|
position: "fixed",
|
|
|
|
|
width: "100%",
|
|
|
|
|
height: "100%",
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
callFrame.join({
|
|
|
|
|
url: props.booking.dailyRef.dailyurl,
|
|
|
|
|
showLeaveButton: true,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
if (!emptyBooking && session.userid === props.booking.user.id) {
|
|
|
|
|
const callFrame = DailyIframe.createFrame({
|
|
|
|
|
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
|
|
|
|
|
className="hidden sm:inline-block z-10 fixed w-auto h-5"
|
|
|
|
|
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) {
|
|
|
|
|
const booking = await prisma.booking.findFirst({
|
|
|
|
|
where: {
|
|
|
|
|
uid: context.query.uid,
|
|
|
|
|
},
|
|
|
|
|
select: {
|
|
|
|
|
id: true,
|
|
|
|
|
user: {
|
|
|
|
|
select: {
|
|
|
|
|
credentials: true,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
attendees: true,
|
|
|
|
|
dailyRef: {
|
|
|
|
|
select: {
|
|
|
|
|
dailyurl: true,
|
|
|
|
|
dailytoken: true,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
references: {
|
|
|
|
|
select: {
|
|
|
|
|
uid: true,
|
|
|
|
|
type: true,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const session = await getSession();
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
props: {
|
|
|
|
|
booking: booking,
|
|
|
|
|
session: session,
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
}
|
