fix: duplicate iframes in cal video (#6662)

* chore: upgrade daily-co

* feat: return only needed data and preload i18n

* fix: useEffect
This commit is contained in:
Nafees Nazik
2023-01-25 08:51:09 +00:00
committed by GitHub
parent 3c761f4451
commit 3a8aa26c78
2 changed files with 23 additions and 13 deletions
+1 -1
View File
@@ -37,7 +37,7 @@
"@calcom/trpc": "*",
"@calcom/tsconfig": "*",
"@calcom/ui": "*",
"@daily-co/daily-js": "^0.26.0",
"@daily-co/daily-js": "^0.37.0",
"@formkit/auto-animate": "^1.0.0-beta.5",
"@glidejs/glide": "^3.5.2",
"@heroicons/react": "^1.0.6",
+22 -12
View File
@@ -1,5 +1,5 @@
import DailyIframe from "@daily-co/daily-js";
import { NextPageContext } from "next";
import { GetServerSidePropsContext } from "next";
import { getSession } from "next-auth/react";
import Head from "next/head";
import { useEffect } from "react";
@@ -9,10 +9,13 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import prisma, { bookingMinimalSelect } from "@calcom/prisma";
import { inferSSRProps } from "@calcom/types/inferSSRProps";
import { ssrInit } from "@server/lib/ssr";
export type JoinCallPageProps = inferSSRProps<typeof getServerSideProps>;
export default function JoinCall(props: JoinCallPageProps) {
const { t } = useLocale();
const { meetingUrl, meetingPassword } = props;
useEffect(() => {
const callFrame = DailyIframe.createFrame({
@@ -36,19 +39,20 @@ export default function JoinCall(props: JoinCallPageProps) {
width: "100%",
height: "100%",
},
url: meetingUrl,
...(typeof meetingPassword === "string" && { token: meetingPassword }),
});
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]);
callFrame.join();
return () => {
callFrame.destroy();
};
}, []);
const title = `${APP_NAME} Video`;
return (
<>
<Head>
<title>{APP_NAME} Video</title>
<title>{title}</title>
<meta name="title" content={APP_NAME + " Video"} />
<meta name="description" content={t("quick_video_meeting")} />
<meta property="og:image" content={SEO_IMG_OGIMG_VIDEO} />
@@ -77,7 +81,9 @@ export default function JoinCall(props: JoinCallPageProps) {
);
}
export async function getServerSideProps(context: NextPageContext) {
export async function getServerSideProps(context: GetServerSidePropsContext) {
const ssr = await ssrInit(context);
const booking = await prisma.booking.findUnique({
where: {
uid: context.query.uid as string,
@@ -144,7 +150,11 @@ export async function getServerSideProps(context: NextPageContext) {
return {
props: {
booking: bookingObj,
meetingUrl: bookingObj.references[0].meetingUrl ?? "",
...(typeof bookingObj.references[0].meetingPassword === "string" && {
meetingPassword: bookingObj.references[0].meetingPassword,
}),
trpcState: ssr.dehydrate(),
},
};
}