From 1a4afe06c8a8eaa73bef387d0a46f231ab95c0c4 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Wed, 11 Dec 2024 12:51:30 -0500 Subject: [PATCH] chore: Remove Pages Router / Render App Router - `/video` (#16518) * /video: Remove Pages Router / Render App Router * fix * add meeting_unavailable i18n * remove from videos view * add correct metadata to video/[uid] * add safety to videos-single-view logic --------- Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com> --- .env.example | 2 +- apps/web/abTest/middlewareFactory.ts | 1 - apps/web/app/future/video/[uid]/page.tsx | 20 -- apps/web/app/video/[uid]/page.tsx | 39 ++++ .../video/meeting-ended/[uid]/page.tsx | 4 +- .../video/meeting-not-started/[uid]/page.tsx | 0 .../video/no-meeting-found/page.tsx | 0 apps/web/middleware.ts | 1 - .../videos-meeting-ended-single-view.tsx | 2 +- .../videos/views/videos-single-view.tsx | 172 ++++++++---------- apps/web/pages/video/[uid].tsx | 11 -- apps/web/pages/video/meeting-ended/[uid].tsx | 11 -- .../pages/video/meeting-not-started/[uid].tsx | 11 -- apps/web/pages/video/no-meeting-found.tsx | 9 - apps/web/public/static/locales/en/common.json | 1 + apps/web/scripts/vercel-app-router-deploy.sh | 1 - turbo.json | 1 - 17 files changed, 123 insertions(+), 163 deletions(-) delete mode 100644 apps/web/app/future/video/[uid]/page.tsx create mode 100644 apps/web/app/video/[uid]/page.tsx rename apps/web/app/{future => }/video/meeting-ended/[uid]/page.tsx (89%) rename apps/web/app/{future => }/video/meeting-not-started/[uid]/page.tsx (100%) rename apps/web/app/{future => }/video/no-meeting-found/page.tsx (100%) delete mode 100644 apps/web/pages/video/[uid].tsx delete mode 100644 apps/web/pages/video/meeting-ended/[uid].tsx delete mode 100644 apps/web/pages/video/meeting-not-started/[uid].tsx delete mode 100644 apps/web/pages/video/no-meeting-found.tsx diff --git a/.env.example b/.env.example index 70c5d0805e..616c7d2b54 100644 --- a/.env.example +++ b/.env.example @@ -358,7 +358,7 @@ APP_ROUTER_APPS_CATEGORIES_CATEGORY_ENABLED=0 APP_ROUTER_BOOKING_ENABLED=0 APP_ROUTER_BOOKINGS_STATUS_ENABLED=0 APP_ROUTER_GETTING_STARTED_STEP_ENABLED=0 -APP_ROUTER_VIDEO_ENABLED=0 +APP_ROUTER_APPS_ENABLED=0 APP_ROUTER_TEAM_ENABLED=0 APP_ROUTER_TEAMS_ENABLED=0 APP_ROUTER_AVAILABILITY_ENABLED=0 diff --git a/apps/web/abTest/middlewareFactory.ts b/apps/web/abTest/middlewareFactory.ts index ae9d7d49cc..1c92e05dd2 100644 --- a/apps/web/abTest/middlewareFactory.ts +++ b/apps/web/abTest/middlewareFactory.ts @@ -23,7 +23,6 @@ const ROUTES: [URLPattern, boolean][] = [ ["/getting-started/:step", process.env.APP_ROUTER_GETTING_STARTED_STEP_ENABLED === "1"] as const, ["/bookings/:status", process.env.APP_ROUTER_BOOKINGS_STATUS_ENABLED === "1"] as const, ["/booking/:path*", process.env.APP_ROUTER_BOOKING_ENABLED === "1"] as const, - ["/video/:path*", process.env.APP_ROUTER_VIDEO_ENABLED === "1"] as const, ["/team", process.env.APP_ROUTER_TEAM_ENABLED === "1"] as const, ["/teams", process.env.APP_ROUTER_TEAMS_ENABLED === "1"] as const, ["/availability", process.env.APP_ROUTER_AVAILABILITY_ENABLED === "1"] as const, diff --git a/apps/web/app/future/video/[uid]/page.tsx b/apps/web/app/future/video/[uid]/page.tsx deleted file mode 100644 index 1ab356f72c..0000000000 --- a/apps/web/app/future/video/[uid]/page.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { withAppDirSsr } from "app/WithAppDirSsr"; -import { _generateMetadata } from "app/_utils"; -import { WithLayout } from "app/layoutHOC"; - -import { APP_NAME } from "@calcom/lib/constants"; - -import { getServerSideProps } from "@lib/video/[uid]/getServerSideProps"; - -import type { PageProps } from "~/videos/views/videos-single-view"; -import VideosSingleView from "~/videos/views/videos-single-view"; - -export const generateMetadata = async () => - await _generateMetadata( - () => `${APP_NAME} Video`, - (t) => t("quick_video_meeting") - ); - -const getData = withAppDirSsr(getServerSideProps); - -export default WithLayout({ getData, Page: VideosSingleView, getLayout: null })<"P">; diff --git a/apps/web/app/video/[uid]/page.tsx b/apps/web/app/video/[uid]/page.tsx new file mode 100644 index 0000000000..5e04b560ce --- /dev/null +++ b/apps/web/app/video/[uid]/page.tsx @@ -0,0 +1,39 @@ +import { withAppDirSsr } from "app/WithAppDirSsr"; +import { getTranslate } from "app/_utils"; +import { WithLayout } from "app/layoutHOC"; + +import { APP_NAME, SEO_IMG_OGIMG_VIDEO, WEBSITE_URL } from "@calcom/lib/constants"; + +import { getServerSideProps } from "@lib/video/[uid]/getServerSideProps"; + +import type { PageProps } from "~/videos/views/videos-single-view"; +import VideosSingleView from "~/videos/views/videos-single-view"; + +export const generateMetadata = async () => { + const t = await getTranslate(); + return { + title: `${APP_NAME} Video`, + description: t("quick_video_meeting"), + openGraph: { + title: `${APP_NAME} Video`, + description: t("quick_video_meeting"), + url: `${WEBSITE_URL}/video`, + images: [ + { + url: SEO_IMG_OGIMG_VIDEO, + }, + ], + type: "website", + }, + twitter: { + card: "summary_large_image", + title: `${APP_NAME} Video`, + description: t("quick_video_meeting"), + images: [SEO_IMG_OGIMG_VIDEO], + }, + }; +}; + +const getData = withAppDirSsr(getServerSideProps); + +export default WithLayout({ getData, Page: VideosSingleView, getLayout: null })<"P">; diff --git a/apps/web/app/future/video/meeting-ended/[uid]/page.tsx b/apps/web/app/video/meeting-ended/[uid]/page.tsx similarity index 89% rename from apps/web/app/future/video/meeting-ended/[uid]/page.tsx rename to apps/web/app/video/meeting-ended/[uid]/page.tsx index a90d75d49f..eaefcfa5da 100644 --- a/apps/web/app/future/video/meeting-ended/[uid]/page.tsx +++ b/apps/web/app/video/meeting-ended/[uid]/page.tsx @@ -9,8 +9,8 @@ import MeetingEnded from "~/videos/views/videos-meeting-ended-single-view"; export const generateMetadata = async () => await _generateMetadata( - () => "Meeting Unavailable", - () => "Meeting Unavailable" + (t) => t("meeting_unavailable"), + (t) => t("meeting_unavailable") ); const getData = withAppDirSsr(getServerSideProps); diff --git a/apps/web/app/future/video/meeting-not-started/[uid]/page.tsx b/apps/web/app/video/meeting-not-started/[uid]/page.tsx similarity index 100% rename from apps/web/app/future/video/meeting-not-started/[uid]/page.tsx rename to apps/web/app/video/meeting-not-started/[uid]/page.tsx diff --git a/apps/web/app/future/video/no-meeting-found/page.tsx b/apps/web/app/video/no-meeting-found/page.tsx similarity index 100% rename from apps/web/app/future/video/no-meeting-found/page.tsx rename to apps/web/app/video/no-meeting-found/page.tsx diff --git a/apps/web/middleware.ts b/apps/web/middleware.ts index 651855f607..95556aed89 100644 --- a/apps/web/middleware.ts +++ b/apps/web/middleware.ts @@ -183,7 +183,6 @@ export const config = { "/bookings/:status/", "/future/bookings/:status/", "/video/:path*", - "/future/video/:path*", "/teams", "/future/teams/", "/settings/:path*", diff --git a/apps/web/modules/videos/views/videos-meeting-ended-single-view.tsx b/apps/web/modules/videos/views/videos-meeting-ended-single-view.tsx index a7d352d615..85d8e22750 100644 --- a/apps/web/modules/videos/views/videos-meeting-ended-single-view.tsx +++ b/apps/web/modules/videos/views/videos-meeting-ended-single-view.tsx @@ -14,7 +14,7 @@ export default function MeetingUnavailable(props: PageProps) { return (
- +
diff --git a/apps/web/modules/videos/views/videos-single-view.tsx b/apps/web/modules/videos/views/videos-single-view.tsx index 2a2c39fa00..77ab60d693 100644 --- a/apps/web/modules/videos/views/videos-single-view.tsx +++ b/apps/web/modules/videos/views/videos-single-view.tsx @@ -3,12 +3,11 @@ import type { DailyCall } from "@daily-co/daily-js"; import DailyIframe from "@daily-co/daily-js"; import { DailyProvider } from "@daily-co/daily-react"; -import Head from "next/head"; import { useState, useEffect, useRef } from "react"; import dayjs from "@calcom/dayjs"; import classNames from "@calcom/lib/classNames"; -import { APP_NAME, SEO_IMG_OGIMG_VIDEO, WEBSITE_URL } from "@calcom/lib/constants"; +import { WEBSITE_URL } from "@calcom/lib/constants"; import { TRANSCRIPTION_STOPPED_ICON, RECORDING_DEFAULT_ICON } from "@calcom/lib/constants"; import { formatToLocalizedDate, formatToLocalizedTime } from "@calcom/lib/date-fns"; import { useLocale } from "@calcom/lib/hooks/useLocale"; @@ -23,111 +22,98 @@ import { CalAiTranscribe } from "~/videos/ai/ai-transcribe"; export type PageProps = inferSSRProps; export default function JoinCall(props: PageProps) { - const { t } = useLocale(); const { meetingUrl, meetingPassword, booking, hasTeamPlan, calVideoLogo } = props; const [daily, setDaily] = useState(null); useEffect(() => { - const callFrame = DailyIframe.createFrame({ - theme: { - colors: { - accent: "#FFF", - accentText: "#111111", - background: "#111111", - backgroundAccent: "#111111", - baseText: "#FFF", - border: "#292929", - mainAreaBg: "#111111", - mainAreaBgAccent: "#1A1A1A", - mainAreaText: "#FFF", - supportiveText: "#FFF", - }, - }, - showLeaveButton: true, - iframeStyle: { - position: "fixed", - width: "100%", - height: "100%", - }, - url: meetingUrl, - ...(typeof meetingPassword === "string" && { token: meetingPassword }), - ...(hasTeamPlan && { - customTrayButtons: { - recording: { - label: "Record", - tooltip: "Start or stop recording", - iconPath: RECORDING_DEFAULT_ICON, - iconPathDarkMode: RECORDING_DEFAULT_ICON, - }, - transcription: { - label: "Cal.ai", - tooltip: "Transcription powered by AI", - iconPath: TRANSCRIPTION_STOPPED_ICON, - iconPathDarkMode: TRANSCRIPTION_STOPPED_ICON, + let callFrame: DailyCall | undefined; + try { + callFrame = DailyIframe.createFrame({ + theme: { + colors: { + accent: "#FFF", + accentText: "#111111", + background: "#111111", + backgroundAccent: "#111111", + baseText: "#FFF", + border: "#292929", + mainAreaBg: "#111111", + mainAreaBgAccent: "#1A1A1A", + mainAreaText: "#FFF", + supportiveText: "#FFF", }, }, - }), - }); + showLeaveButton: true, + iframeStyle: { + position: "fixed", + width: "100%", + height: "100%", + }, + url: meetingUrl, + ...(typeof meetingPassword === "string" && { token: meetingPassword }), + ...(hasTeamPlan && { + customTrayButtons: { + recording: { + label: "Record", + tooltip: "Start or stop recording", + iconPath: RECORDING_DEFAULT_ICON, + iconPathDarkMode: RECORDING_DEFAULT_ICON, + }, + transcription: { + label: "Cal.ai", + tooltip: "Transcription powered by AI", + iconPath: TRANSCRIPTION_STOPPED_ICON, + iconPathDarkMode: TRANSCRIPTION_STOPPED_ICON, + }, + }, + }), + }); + } catch (err) { + callFrame = DailyIframe.getCallInstance(); + } finally { + setDaily(callFrame ?? null); - setDaily(callFrame); - - callFrame.join(); + callFrame?.join(); + } return () => { - callFrame.destroy(); + callFrame?.destroy(); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - const title = `${APP_NAME} Video`; return ( - <> - - {title} - - - - - - - - - - - - - -
- -
-
- {calVideoLogo ? ( - My Org Logo - ) : ( - Logo - )} -
- - - + +
+ +
+
+ {calVideoLogo ? ( + My Org Logo + ) : ( + Logo + )} +
+ + ); } diff --git a/apps/web/pages/video/[uid].tsx b/apps/web/pages/video/[uid].tsx deleted file mode 100644 index b5eaeac454..0000000000 --- a/apps/web/pages/video/[uid].tsx +++ /dev/null @@ -1,11 +0,0 @@ -import PageWrapper from "@components/PageWrapper"; - -import VideosSingleView, { type PageProps } from "~/videos/views/videos-single-view"; - -export { getServerSideProps } from "@lib/video/[uid]/getServerSideProps"; - -const VideosSinglePage = (props: PageProps) => ; - -VideosSinglePage.PageWrapper = PageWrapper; - -export default VideosSinglePage; diff --git a/apps/web/pages/video/meeting-ended/[uid].tsx b/apps/web/pages/video/meeting-ended/[uid].tsx deleted file mode 100644 index 2e00c7ff23..0000000000 --- a/apps/web/pages/video/meeting-ended/[uid].tsx +++ /dev/null @@ -1,11 +0,0 @@ -import PageWrapper from "@components/PageWrapper"; - -import MeetingEnded, { type PageProps } from "~/videos/views/videos-meeting-ended-single-view"; - -export { getServerSideProps } from "@lib/video/meeting-ended/[uid]/getServerSideProps"; - -const MeetingEndedPage = (props: PageProps) => ; - -MeetingEndedPage.PageWrapper = PageWrapper; - -export default MeetingEndedPage; diff --git a/apps/web/pages/video/meeting-not-started/[uid].tsx b/apps/web/pages/video/meeting-not-started/[uid].tsx deleted file mode 100644 index 902130c2f5..0000000000 --- a/apps/web/pages/video/meeting-not-started/[uid].tsx +++ /dev/null @@ -1,11 +0,0 @@ -import PageWrapper from "@components/PageWrapper"; - -import MeetingNotStarted, { type PageProps } from "~/videos/views/videos-meeting-not-started-single-view"; - -export { getServerSideProps } from "@lib/video/meeting-not-started/[uid]/getServerSideProps"; - -const MeetingNotStartedPage = (props: PageProps) => ; - -MeetingNotStartedPage.PageWrapper = PageWrapper; - -export default MeetingNotStartedPage; diff --git a/apps/web/pages/video/no-meeting-found.tsx b/apps/web/pages/video/no-meeting-found.tsx deleted file mode 100644 index dad9643a44..0000000000 --- a/apps/web/pages/video/no-meeting-found.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import PageWrapper from "@components/PageWrapper"; - -import NoMeetingFound from "~/videos/views/videos-no-meeting-found-single-view"; - -const NoMeetingFoundPage = () => ; - -NoMeetingFoundPage.PageWrapper = PageWrapper; - -export default NoMeetingFoundPage; diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index 10275cdb14..ea6694f4a6 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/apps/web/public/static/locales/en/common.json @@ -2290,6 +2290,7 @@ "most_popular_events": "Most Popular Events", "summary_of_events_for_your_team_for_the_last_30_days": "Here's your summary of popular events for your team {{teamName}} for the last 30 days", "me": "Me", + "meeting_unavailable": "Meeting Unavailable", "monthly_digest_email": "Monthly digest email", "monthly_digest_email_for_teams": "Monthly digest email for teams", "verify_team_tooltip": "Verify your team to enable sending messages to attendees", diff --git a/apps/web/scripts/vercel-app-router-deploy.sh b/apps/web/scripts/vercel-app-router-deploy.sh index 464c79f929..86b6eb1c44 100755 --- a/apps/web/scripts/vercel-app-router-deploy.sh +++ b/apps/web/scripts/vercel-app-router-deploy.sh @@ -24,7 +24,6 @@ checkRoute "$APP_ROUTER_AUTH_OAUTH2_ENABLED" app/future/auth/oauth2 checkRoute "$APP_ROUTER_GETTING_STARTED_STEP_ENABLED" app/future/getting-started checkRoute "$APP_ROUTER_BOOKINGS_STATUS_ENABLED" app/future/bookings checkRoute "$APP_ROUTER_BOOKING_ENABLED" app/future/booking -checkRoute "$APP_ROUTER_VIDEO_ENABLED" app/future/video checkRoute "$APP_ROUTER_TEAM_ENABLED" app/future/team checkRoute "$APP_ROUTER_TEAMS_ENABLED" app/future/teams diff --git a/turbo.json b/turbo.json index 578a80ac50..1e9fa18fe6 100644 --- a/turbo.json +++ b/turbo.json @@ -241,7 +241,6 @@ "APP_ROUTER_BOOKINGS_STATUS_ENABLED", "APP_ROUTER_EVENT_TYPES_ENABLED", "APP_ROUTER_GETTING_STARTED_STEP_ENABLED", - "APP_ROUTER_VIDEO_ENABLED", "APP_ROUTER_AUTH_FORGOT_PASSWORD_ENABLED", "APP_ROUTER_AUTH_LOGIN_ENABLED", "APP_ROUTER_AUTH_LOGOUT_ENABLED",