From 3a8aa26c78f47a65bf16b29d484eedd54bb2bb2a Mon Sep 17 00:00:00 2001 From: Nafees Nazik <84864519+G3root@users.noreply.github.com> Date: Wed, 25 Jan 2023 14:21:09 +0530 Subject: [PATCH] fix: duplicate iframes in cal video (#6662) * chore: upgrade daily-co * feat: return only needed data and preload i18n * fix: useEffect --- apps/web/package.json | 2 +- apps/web/pages/video/[uid].tsx | 34 ++++++++++++++++++++++------------ 2 files changed, 23 insertions(+), 13 deletions(-) diff --git a/apps/web/package.json b/apps/web/package.json index b3844bdf5b..36158ca3dc 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -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", diff --git a/apps/web/pages/video/[uid].tsx b/apps/web/pages/video/[uid].tsx index 773fa80901..0601265375 100644 --- a/apps/web/pages/video/[uid].tsx +++ b/apps/web/pages/video/[uid].tsx @@ -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; 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 ( <> - {APP_NAME} Video + {title} @@ -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(), }, }; }