9879f9910a
* ⬆️ Bump tailwindcss from 2.2.14 to 2.2.15 Bumps [tailwindcss](https://github.com/tailwindlabs/tailwindcss) from 2.2.14 to 2.2.15. - [Release notes](https://github.com/tailwindlabs/tailwindcss/releases) - [Changelog](https://github.com/tailwindlabs/tailwindcss/blob/master/CHANGELOG.md) - [Commits](https://github.com/tailwindlabs/tailwindcss/compare/v2.2.14...v2.2.15) --- updated-dependencies: - dependency-name: tailwindcss dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * updating cal will provide a zoom meeting url * updating cal will provide a zoom meeting url * modifying how daily emails send * modifying how daily emails send * daily table * migration updates * rebasing updates * updating Daily references to a new table * merge updates, adding Daily references to book/events.ts * updated video email templates to remove Daily specific references * updating the events.ts and refactoring in the event manager * removing the package-lock * updating some of the internal Daily notes * removing handle errors raw from the Daily video client * prettier formatting fixes * Added the Daily location to calendar events and updated Cal video references to Daily.co video * updating references to create in event manager to check for Daily video * adding a daily interface in the event manager * adding daily to the location labels * resolving yarn merge conflicts * removing prettier auto and refactoring integrations: daily in the event manager * removing changes to estlintrc.json * updating message when daily video call meeting has not started * updated modal time buffer * changed video calls to Cal colors * removing change to undoing change to lodash/merge on the event manager * removing change on the event-types to match the main repo * updating the border color in daily video calls Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Lola-Ojabowale <lola.ojabowale@gmail.com>
183 lines
4.8 KiB
TypeScript
183 lines
4.8 KiB
TypeScript
import DailyIframe from "@daily-co/daily-js";
|
|
import { getSession } from "next-auth/client";
|
|
import Head from "next/head";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/router";
|
|
import React, { useEffect } from "react";
|
|
|
|
import { HeadSeo } from "@components/seo/head-seo";
|
|
|
|
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;
|
|
|
|
//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;
|
|
|
|
useEffect(() => {
|
|
if (emptyBooking) {
|
|
router.push("/call/no-meeting-found");
|
|
}
|
|
|
|
if (isUpcoming) {
|
|
router.push(`/call/meeting-not-started/${props.booking.uid}`);
|
|
}
|
|
|
|
if (isPast) {
|
|
router.push(`/call/meeting-ended/${props.booking.uid}`);
|
|
}
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!meetingUnavailable && !emptyBooking && session.userid !== props.booking.user.id) {
|
|
const callFrame = DailyIframe.createFrame({
|
|
theme: {
|
|
colors: {
|
|
accent: "#FFF",
|
|
accentText: "#111111",
|
|
background: "#111111",
|
|
backgroundAccent: "#111111",
|
|
baseText: "#FFF",
|
|
border: "#000000",
|
|
mainAreaBg: "#111111",
|
|
mainAreaBgAccent: "#111111",
|
|
mainAreaText: "#FFF",
|
|
supportiveText: "#FFF",
|
|
},
|
|
},
|
|
showLeaveButton: true,
|
|
iframeStyle: {
|
|
position: "fixed",
|
|
width: "100%",
|
|
height: "100%",
|
|
},
|
|
});
|
|
callFrame.join({
|
|
url: props.booking.dailyRef.dailyurl,
|
|
showLeaveButton: true,
|
|
});
|
|
}
|
|
if (!meetingUnavailable && !emptyBooking && session.userid === props.booking.user.id) {
|
|
const callFrame = DailyIframe.createFrame({
|
|
theme: {
|
|
colors: {
|
|
accent: "#FFF",
|
|
accentText: "#111111",
|
|
background: "#111111",
|
|
backgroundAccent: "#111111",
|
|
baseText: "#FFF",
|
|
border: "#000000",
|
|
mainAreaBg: "#111111",
|
|
mainAreaBgAccent: "#111111",
|
|
mainAreaText: "#FFF",
|
|
supportiveText: "#FFF",
|
|
},
|
|
},
|
|
showLeaveButton: true,
|
|
iframeStyle: {
|
|
position: "fixed",
|
|
width: "100%",
|
|
height: "100%",
|
|
},
|
|
});
|
|
callFrame.join({
|
|
url: props.booking.dailyRef.dailyurl,
|
|
showLeaveButton: true,
|
|
token: props.booking.dailyRef.dailytoken,
|
|
});
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<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="fixed z-10 hidden w-auto h-5 sm:inline-block"
|
|
src="https://cal.com/logo-white.svg"
|
|
alt="Cal.com Logo"
|
|
style={{
|
|
top: 46,
|
|
left: 24,
|
|
}}
|
|
/>
|
|
</Link>
|
|
{JoinCall}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export async function getServerSideProps(context) {
|
|
const booking = await prisma.booking.findUnique({
|
|
where: {
|
|
uid: context.query.uid,
|
|
},
|
|
select: {
|
|
uid: true,
|
|
id: true,
|
|
title: true,
|
|
description: true,
|
|
startTime: true,
|
|
endTime: true,
|
|
user: {
|
|
select: {
|
|
credentials: true,
|
|
},
|
|
},
|
|
attendees: true,
|
|
dailyRef: {
|
|
select: {
|
|
dailyurl: true,
|
|
dailytoken: true,
|
|
},
|
|
},
|
|
references: {
|
|
select: {
|
|
uid: true,
|
|
type: true,
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
if (!booking) {
|
|
// TODO: Booking is already cancelled
|
|
return {
|
|
props: { booking: null },
|
|
};
|
|
}
|
|
|
|
const bookingObj = Object.assign({}, booking, {
|
|
startTime: booking.startTime.toString(),
|
|
endTime: booking.endTime.toString(),
|
|
});
|
|
const session = await getSession();
|
|
|
|
return {
|
|
props: {
|
|
booking: bookingObj,
|
|
session: session,
|
|
},
|
|
};
|
|
}
|