From d91e74ec13ee521b616302be9c6de268f2badf5f Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Mon, 29 Jan 2024 18:59:24 +0000 Subject: [PATCH] chore: module based file structure for /video group (#13453) * chore: module based file structure for /video group * fix * fix --- apps/web/app/future/video/[uid]/page.tsx | 8 +- .../future/video/meeting-ended/[uid]/page.tsx | 6 +- .../video/meeting-not-started/[uid]/page.tsx | 6 +- .../future/video/no-meeting-found/page.tsx | 5 +- ...-ended-single-view.getServerSideProps.tsx} | 3 + .../videos-meeting-ended-single-view.tsx | 62 +++++ ...tarted-single-view.getServerSideProps.tsx} | 3 + ...videos-meeting-not-started-single-view.tsx | 38 +++ .../videos-no-meeting-found-single-view.tsx | 27 ++ ...videos-single-view.getServerSideProps.tsx} | 4 + .../videos/views/videos-single-view.tsx | 243 +++++++++++++++++ apps/web/pages/video/[uid].tsx | 252 +----------------- apps/web/pages/video/meeting-ended/[uid].tsx | 72 +---- .../pages/video/meeting-not-started/[uid].tsx | 49 +--- apps/web/pages/video/no-meeting-found.tsx | 32 +-- 15 files changed, 422 insertions(+), 388 deletions(-) rename apps/web/{lib/video/meeting-ended/[uid]/getServerSideProps.tsx => modules/videos/views/videos-meeting-ended-single-view.getServerSideProps.tsx} (88%) create mode 100644 apps/web/modules/videos/views/videos-meeting-ended-single-view.tsx rename apps/web/{lib/video/meeting-not-started/[uid]/getServerSideProps.tsx => modules/videos/views/videos-meeting-not-started-single-view.getServerSideProps.tsx} (85%) create mode 100644 apps/web/modules/videos/views/videos-meeting-not-started-single-view.tsx create mode 100644 apps/web/modules/videos/views/videos-no-meeting-found-single-view.tsx rename apps/web/{lib/video/[uid]/getServerSideProps.tsx => modules/videos/views/videos-single-view.getServerSideProps.tsx} (95%) create mode 100644 apps/web/modules/videos/views/videos-single-view.tsx diff --git a/apps/web/app/future/video/[uid]/page.tsx b/apps/web/app/future/video/[uid]/page.tsx index 1d80f62af7..18731663a1 100644 --- a/apps/web/app/future/video/[uid]/page.tsx +++ b/apps/web/app/future/video/[uid]/page.tsx @@ -1,11 +1,11 @@ -import Page, { type JoinCallPageProps } from "@pages/video/[uid]"; 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 VideosSingleView from "~/videos/views/videos-single-view"; +import { getServerSideProps, type PageProps } from "~/videos/views/videos-single-view.getServerSideProps"; export const generateMetadata = async () => await _generateMetadata( @@ -13,6 +13,6 @@ export const generateMetadata = async () => (t) => t("quick_video_meeting") ); -const getData = withAppDirSsr(getServerSideProps); +const getData = withAppDirSsr(getServerSideProps); -export default WithLayout({ getData, Page, getLayout: null })<"P">; +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/future/video/meeting-ended/[uid]/page.tsx index 68c1744762..f3cf10badd 100644 --- a/apps/web/app/future/video/meeting-ended/[uid]/page.tsx +++ b/apps/web/app/future/video/meeting-ended/[uid]/page.tsx @@ -1,9 +1,9 @@ -import Page from "@pages/video/meeting-ended/[uid]"; import { withAppDirSsr } from "app/WithAppDirSsr"; import { _generateMetadata } from "app/_utils"; import { WithLayout } from "app/layoutHOC"; -import { getServerSideProps } from "@lib/video/meeting-ended/[uid]/getServerSideProps"; +import MeetingEnded from "~/videos/views/videos-meeting-ended-single-view"; +import { getServerSideProps } from "~/videos/views/videos-meeting-ended-single-view.getServerSideProps"; export const generateMetadata = async () => await _generateMetadata( @@ -13,4 +13,4 @@ export const generateMetadata = async () => const getData = withAppDirSsr(getServerSideProps); -export default WithLayout({ getData, Page, getLayout: null })<"P">; +export default WithLayout({ getData, Page: MeetingEnded, getLayout: null })<"P">; diff --git a/apps/web/app/future/video/meeting-not-started/[uid]/page.tsx b/apps/web/app/future/video/meeting-not-started/[uid]/page.tsx index ade26a9e85..cc56a262ed 100644 --- a/apps/web/app/future/video/meeting-not-started/[uid]/page.tsx +++ b/apps/web/app/future/video/meeting-not-started/[uid]/page.tsx @@ -1,4 +1,3 @@ -import Page from "@pages/video/meeting-not-started/[uid]"; import { withAppDirSsr } from "app/WithAppDirSsr"; import type { PageProps } from "app/_types"; import { _generateMetadata } from "app/_utils"; @@ -6,7 +5,8 @@ import { WithLayout } from "app/layoutHOC"; import prisma, { bookingMinimalSelect } from "@calcom/prisma"; -import { getServerSideProps } from "@lib/video/meeting-not-started/[uid]/getServerSideProps"; +import MeetingNotStarted from "~/videos/views/videos-meeting-not-started-single-view"; +import { getServerSideProps } from "~/videos/views/videos-meeting-not-started-single-view.getServerSideProps"; export const generateMetadata = async ({ params }: PageProps) => { const booking = await prisma.booking.findUnique({ @@ -24,4 +24,4 @@ export const generateMetadata = async ({ params }: PageProps) => { const getData = withAppDirSsr(getServerSideProps); -export default WithLayout({ getData, Page, getLayout: null })<"P">; +export default WithLayout({ getData, Page: MeetingNotStarted, getLayout: null })<"P">; diff --git a/apps/web/app/future/video/no-meeting-found/page.tsx b/apps/web/app/future/video/no-meeting-found/page.tsx index 9f16119f8b..e067027d7d 100644 --- a/apps/web/app/future/video/no-meeting-found/page.tsx +++ b/apps/web/app/future/video/no-meeting-found/page.tsx @@ -1,10 +1,11 @@ -import LegacyPage from "@pages/video/no-meeting-found"; import { _generateMetadata } from "app/_utils"; import { WithLayout } from "app/layoutHOC"; import type { GetServerSidePropsContext } from "next"; import { ssrInit } from "@server/lib/ssr"; +import NoMeetingFound from "~/videos/views/videos-no-meeting-found-single-view"; + export const generateMetadata = async () => await _generateMetadata( (t) => t("no_meeting_found"), @@ -20,4 +21,4 @@ const getData = async (context: GetServerSidePropsContext) => { }; }; -export default WithLayout({ getData, Page: LegacyPage, getLayout: null })<"P">; +export default WithLayout({ getData, Page: NoMeetingFound, getLayout: null })<"P">; diff --git a/apps/web/lib/video/meeting-ended/[uid]/getServerSideProps.tsx b/apps/web/modules/videos/views/videos-meeting-ended-single-view.getServerSideProps.tsx similarity index 88% rename from apps/web/lib/video/meeting-ended/[uid]/getServerSideProps.tsx rename to apps/web/modules/videos/views/videos-meeting-ended-single-view.getServerSideProps.tsx index 2995d36bb7..96526bd9e2 100644 --- a/apps/web/lib/video/meeting-ended/[uid]/getServerSideProps.tsx +++ b/apps/web/modules/videos/views/videos-meeting-ended-single-view.getServerSideProps.tsx @@ -2,6 +2,9 @@ import type { GetServerSidePropsContext } from "next"; import prisma, { bookingMinimalSelect } from "@calcom/prisma"; +import { type inferSSRProps } from "@lib/types/inferSSRProps"; + +export type PageProps = inferSSRProps; export async function getServerSideProps(context: GetServerSidePropsContext) { const booking = await prisma.booking.findUnique({ where: { 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 new file mode 100644 index 0000000000..279b0d2727 --- /dev/null +++ b/apps/web/modules/videos/views/videos-meeting-ended-single-view.tsx @@ -0,0 +1,62 @@ +"use client"; + +import dayjs from "@calcom/dayjs"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat"; +import { Button, HeadSeo } from "@calcom/ui"; +import { ArrowRight, Calendar, X } from "@calcom/ui/components/icon"; + +import { type PageProps } from "./videos-meeting-ended-single-view.getServerSideProps"; + +export default function MeetingUnavailable(props: PageProps) { + const { t } = useLocale(); + + return ( +
+ +
+
+
+ +
+
+
+
+ ); +} diff --git a/apps/web/lib/video/meeting-not-started/[uid]/getServerSideProps.tsx b/apps/web/modules/videos/views/videos-meeting-not-started-single-view.getServerSideProps.tsx similarity index 85% rename from apps/web/lib/video/meeting-not-started/[uid]/getServerSideProps.tsx rename to apps/web/modules/videos/views/videos-meeting-not-started-single-view.getServerSideProps.tsx index ac2ba3d9cc..50464d2c93 100644 --- a/apps/web/lib/video/meeting-not-started/[uid]/getServerSideProps.tsx +++ b/apps/web/modules/videos/views/videos-meeting-not-started-single-view.getServerSideProps.tsx @@ -1,6 +1,9 @@ import type { GetServerSidePropsContext } from "next"; import prisma, { bookingMinimalSelect } from "@calcom/prisma"; +import type { inferSSRProps } from "@calcom/types/inferSSRProps"; + +export type PageProps = inferSSRProps; // change the type export async function getServerSideProps(context: GetServerSidePropsContext) { diff --git a/apps/web/modules/videos/views/videos-meeting-not-started-single-view.tsx b/apps/web/modules/videos/views/videos-meeting-not-started-single-view.tsx new file mode 100644 index 0000000000..6ee2012ce9 --- /dev/null +++ b/apps/web/modules/videos/views/videos-meeting-not-started-single-view.tsx @@ -0,0 +1,38 @@ +"use client"; + +import dayjs from "@calcom/dayjs"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat"; +import { Button, HeadSeo, EmptyScreen } from "@calcom/ui"; +import { ArrowRight, Calendar, Clock } from "@calcom/ui/components/icon"; + +import { type PageProps } from "./videos-meeting-not-started-single-view.getServerSideProps"; + +export default function MeetingNotStarted(props: PageProps) { + const { t } = useLocale(); + return ( + <> + +
+ +

{props.booking.title}

+

+ + {dayjs(props.booking.startTime).format(`${detectBrowserTimeFormat}, dddd DD MMMM YYYY`)} +

+ + } + buttonRaw={ + + } + /> +
+ + ); +} diff --git a/apps/web/modules/videos/views/videos-no-meeting-found-single-view.tsx b/apps/web/modules/videos/views/videos-no-meeting-found-single-view.tsx new file mode 100644 index 0000000000..4dd8bfe49a --- /dev/null +++ b/apps/web/modules/videos/views/videos-no-meeting-found-single-view.tsx @@ -0,0 +1,27 @@ +"use client"; + +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import { Button, EmptyScreen, HeadSeo } from "@calcom/ui"; +import { X, ArrowRight } from "@calcom/ui/components/icon"; + +export default function NoMeetingFound() { + const { t } = useLocale(); + + return ( + <> + +
+ + {t("go_back_home")} + + } + /> +
+ + ); +} diff --git a/apps/web/lib/video/[uid]/getServerSideProps.tsx b/apps/web/modules/videos/views/videos-single-view.getServerSideProps.tsx similarity index 95% rename from apps/web/lib/video/[uid]/getServerSideProps.tsx rename to apps/web/modules/videos/views/videos-single-view.getServerSideProps.tsx index a0d6d78896..d5a477ce41 100644 --- a/apps/web/lib/video/[uid]/getServerSideProps.tsx +++ b/apps/web/modules/videos/views/videos-single-view.getServerSideProps.tsx @@ -5,8 +5,12 @@ import { getServerSession } from "@calcom/features/auth/lib/getServerSession"; import { getCalVideoReference } from "@calcom/features/get-cal-video-reference"; import prisma, { bookingMinimalSelect } from "@calcom/prisma"; +import { type inferSSRProps } from "@lib/types/inferSSRProps"; + import { ssrInit } from "@server/lib/ssr"; +export type PageProps = inferSSRProps; + const md = new MarkdownIt("default", { html: true, breaks: true, linkify: true }); export async function getServerSideProps(context: GetServerSidePropsContext) { diff --git a/apps/web/modules/videos/views/videos-single-view.tsx b/apps/web/modules/videos/views/videos-single-view.tsx new file mode 100644 index 0000000000..84aed3e68b --- /dev/null +++ b/apps/web/modules/videos/views/videos-single-view.tsx @@ -0,0 +1,243 @@ +"use client"; + +import DailyIframe from "@daily-co/daily-js"; +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 { formatToLocalizedDate, formatToLocalizedTime } from "@calcom/lib/date-fns"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML"; +import { ChevronRight } from "@calcom/ui/components/icon"; + +import { type PageProps } from "./videos-single-view.getServerSideProps"; + +export default function JoinCall(props: PageProps) { + const { t } = useLocale(); + const { meetingUrl, meetingPassword, booking } = props; + + 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 }), + }); + callFrame.join(); + return () => { + callFrame.destroy(); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + const title = `${APP_NAME} Video`; + return ( + <> + + {title} + + + + + + + + + + + + +
+ {booking?.user?.organization?.calVideoLogo ? ( + My Org Logo + ) : ( + Logo + )} +
+ + + ); +} + +interface ProgressBarProps { + startTime: string; + endTime: string; +} + +function ProgressBar(props: ProgressBarProps) { + const { t } = useLocale(); + const { startTime, endTime } = props; + const currentTime = dayjs().second(0).millisecond(0); + const startingTime = dayjs(startTime).second(0).millisecond(0); + const isPast = currentTime.isAfter(startingTime); + const currentDifference = dayjs().diff(startingTime, "minutes"); + const startDuration = dayjs(endTime).diff(startingTime, "minutes"); + const [duration, setDuration] = useState(() => { + if (currentDifference >= 0 && isPast) { + return startDuration - currentDifference; + } else { + return startDuration; + } + }); + + const timeoutRef = useRef(null); + const intervalRef = useRef(null); + + useEffect(() => { + const now = dayjs(); + const remainingMilliseconds = (60 - now.get("seconds")) * 1000 - now.get("milliseconds"); + + timeoutRef.current = setTimeout(() => { + const past = dayjs().isAfter(startingTime); + + if (past) { + setDuration((prev) => prev - 1); + } + + intervalRef.current = setInterval(() => { + if (dayjs().isAfter(startingTime)) { + setDuration((prev) => prev - 1); + } + }, 60000); + }, remainingMilliseconds); + + return () => { + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + timeoutRef.current = null; + } + if (intervalRef.current) { + clearInterval(intervalRef.current); + intervalRef.current = null; + } + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + const prev = startDuration - duration; + const percentage = prev * (100 / startDuration); + return ( +
+

+ {duration} {t("minutes")} +

+
+
+
+
+
+ ); +} + +interface VideoMeetingInfo { + booking: PageProps["booking"]; +} + +export function VideoMeetingInfo(props: VideoMeetingInfo) { + const [open, setOpen] = useState(false); + const { booking } = props; + const { t } = useLocale(); + + const endTime = new Date(booking.endTime); + const startTime = new Date(booking.startTime); + + return ( + <> + + + ); +} diff --git a/apps/web/pages/video/[uid].tsx b/apps/web/pages/video/[uid].tsx index 9aee58c5b2..a0e571ee66 100644 --- a/apps/web/pages/video/[uid].tsx +++ b/apps/web/pages/video/[uid].tsx @@ -1,251 +1,11 @@ -"use client"; +import PageWrapper, { type CalPageWrapper } from "@components/PageWrapper"; -import DailyIframe from "@daily-co/daily-js"; -import Head from "next/head"; -import { useState, useEffect, useRef } from "react"; +import VideosSingleView from "~/videos/views/videos-single-view"; -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 { formatToLocalizedDate, formatToLocalizedTime } from "@calcom/lib/date-fns"; -import { useLocale } from "@calcom/lib/hooks/useLocale"; -import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML"; -import type { inferSSRProps } from "@calcom/types/inferSSRProps"; -import { ChevronRight } from "@calcom/ui/components/icon"; +export { getServerSideProps, type PageProps } from "~/videos/views/videos-single-view.getServerSideProps"; -import { getServerSideProps } from "@lib/video/[uid]/getServerSideProps"; +const VideosSinglePage = VideosSingleView as unknown as CalPageWrapper; -import PageWrapper from "@components/PageWrapper"; +VideosSinglePage.PageWrapper = PageWrapper; -export type JoinCallPageProps = Omit, "trpcState">; - -export default function JoinCall(props: JoinCallPageProps) { - const { t } = useLocale(); - const { meetingUrl, meetingPassword, booking } = props; - - 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 }), - }); - callFrame.join(); - return () => { - callFrame.destroy(); - }; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - const title = `${APP_NAME} Video`; - return ( - <> - - {title} - - - - - - - - - - - - -
- {booking?.user?.organization?.calVideoLogo ? ( - My Org Logo - ) : ( - Logo - )} -
- - - ); -} - -interface ProgressBarProps { - startTime: string; - endTime: string; -} - -function ProgressBar(props: ProgressBarProps) { - const { t } = useLocale(); - const { startTime, endTime } = props; - const currentTime = dayjs().second(0).millisecond(0); - const startingTime = dayjs(startTime).second(0).millisecond(0); - const isPast = currentTime.isAfter(startingTime); - const currentDifference = dayjs().diff(startingTime, "minutes"); - const startDuration = dayjs(endTime).diff(startingTime, "minutes"); - const [duration, setDuration] = useState(() => { - if (currentDifference >= 0 && isPast) { - return startDuration - currentDifference; - } else { - return startDuration; - } - }); - - const timeoutRef = useRef(null); - const intervalRef = useRef(null); - - useEffect(() => { - const now = dayjs(); - const remainingMilliseconds = (60 - now.get("seconds")) * 1000 - now.get("milliseconds"); - - timeoutRef.current = setTimeout(() => { - const past = dayjs().isAfter(startingTime); - - if (past) { - setDuration((prev) => prev - 1); - } - - intervalRef.current = setInterval(() => { - if (dayjs().isAfter(startingTime)) { - setDuration((prev) => prev - 1); - } - }, 60000); - }, remainingMilliseconds); - - return () => { - if (timeoutRef.current) { - clearTimeout(timeoutRef.current); - timeoutRef.current = null; - } - if (intervalRef.current) { - clearInterval(intervalRef.current); - intervalRef.current = null; - } - }; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - const prev = startDuration - duration; - const percentage = prev * (100 / startDuration); - return ( -
-

- {duration} {t("minutes")} -

-
-
-
-
-
- ); -} - -interface VideoMeetingInfo { - booking: JoinCallPageProps["booking"]; -} - -export function VideoMeetingInfo(props: VideoMeetingInfo) { - const [open, setOpen] = useState(false); - const { booking } = props; - const { t } = useLocale(); - - const endTime = new Date(booking.endTime); - const startTime = new Date(booking.startTime); - - return ( - <> - - - ); -} - -export { getServerSideProps }; -JoinCall.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 index 75d867e23a..3c744d7f9e 100644 --- a/apps/web/pages/video/meeting-ended/[uid].tsx +++ b/apps/web/pages/video/meeting-ended/[uid].tsx @@ -1,68 +1,14 @@ -"use client"; +import PageWrapper, { type CalPageWrapper } from "@components/PageWrapper"; -import dayjs from "@calcom/dayjs"; -import { useLocale } from "@calcom/lib/hooks/useLocale"; -import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat"; -import { Button, HeadSeo } from "@calcom/ui"; -import { ArrowRight, Calendar, X } from "@calcom/ui/components/icon"; +import MeetingEnded from "~/videos/views/videos-meeting-ended-single-view"; -import type { inferSSRProps } from "@lib/types/inferSSRProps"; -import { getServerSideProps } from "@lib/video/meeting-ended/[uid]/getServerSideProps"; +export { + getServerSideProps, + type PageProps, +} from "~/videos/views/videos-meeting-ended-single-view.getServerSideProps"; -import PageWrapper from "@components/PageWrapper"; +const MeetingEndedPage = MeetingEnded as unknown as CalPageWrapper; -export default function MeetingUnavailable(props: inferSSRProps) { - const { t } = useLocale(); +MeetingEndedPage.PageWrapper = PageWrapper; - return ( -
- -
-
-
- -
-
-
-
- ); -} - -export { getServerSideProps }; -MeetingUnavailable.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 index f43724026a..fe592e983e 100644 --- a/apps/web/pages/video/meeting-not-started/[uid].tsx +++ b/apps/web/pages/video/meeting-not-started/[uid].tsx @@ -1,45 +1,14 @@ -"use client"; +import PageWrapper, { type CalPageWrapper } from "@components/PageWrapper"; -import dayjs from "@calcom/dayjs"; -import { useLocale } from "@calcom/lib/hooks/useLocale"; -import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat"; -import type { inferSSRProps } from "@calcom/types/inferSSRProps"; -import { Button, HeadSeo, EmptyScreen } from "@calcom/ui"; -import { ArrowRight, Calendar, Clock } from "@calcom/ui/components/icon"; +import MeetingNotStarted from "~/videos/views/videos-meeting-not-started-single-view"; -import { getServerSideProps } from "@lib/video/meeting-not-started/[uid]/getServerSideProps"; +export { + getServerSideProps, + type PageProps, +} from "~/videos/views/videos-meeting-not-started-single-view.getServerSideProps"; -import PageWrapper from "@components/PageWrapper"; +const MeetingNotStartedPage = MeetingNotStarted as unknown as CalPageWrapper; -export default function MeetingNotStarted(props: inferSSRProps) { - const { t } = useLocale(); - return ( - <> - -
- -

{props.booking.title}

-

- - {dayjs(props.booking.startTime).format(`${detectBrowserTimeFormat}, dddd DD MMMM YYYY`)} -

- - } - buttonRaw={ - - } - /> -
- - ); -} +MeetingNotStartedPage.PageWrapper = PageWrapper; -export { getServerSideProps }; - -MeetingNotStarted.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 index e3d30fe413..55bd4f9d3c 100644 --- a/apps/web/pages/video/no-meeting-found.tsx +++ b/apps/web/pages/video/no-meeting-found.tsx @@ -1,31 +1,9 @@ -"use client"; +import PageWrapper, { type CalPageWrapper } from "@components/PageWrapper"; -import { useLocale } from "@calcom/lib/hooks/useLocale"; -import { Button, EmptyScreen, HeadSeo } from "@calcom/ui"; -import { X, ArrowRight } from "@calcom/ui/components/icon"; +import NoMeetingFound from "~/videos/views/videos-no-meeting-found-single-view"; -import PageWrapper from "@components/PageWrapper"; +const NoMeetingFoundPage = NoMeetingFound as unknown as CalPageWrapper; -export default function NoMeetingFound() { - const { t } = useLocale(); +NoMeetingFoundPage.PageWrapper = PageWrapper; - return ( - <> - -
- - {t("go_back_home")} - - } - /> -
- - ); -} - -NoMeetingFound.PageWrapper = PageWrapper; +export default NoMeetingFoundPage;