diff --git a/apps/web/components/booking/TimezoneDropdown.tsx b/apps/web/components/booking/TimezoneDropdown.tsx index dcffd1904c..295d74f8b2 100644 --- a/apps/web/components/booking/TimezoneDropdown.tsx +++ b/apps/web/components/booking/TimezoneDropdown.tsx @@ -17,7 +17,7 @@ export function TimezoneDropdown({ return ( <> -
+
diff --git a/apps/web/pages/auth/forgot-password/[id].tsx b/apps/web/pages/auth/forgot-password/[id].tsx index 2fa048df1c..a1e04abcd4 100644 --- a/apps/web/pages/auth/forgot-password/[id].tsx +++ b/apps/web/pages/auth/forgot-password/[id].tsx @@ -22,7 +22,7 @@ type Props = { export default function Page({ resetPasswordRequest, csrfToken }: Props) { const { t } = useLocale(); const [loading, setLoading] = React.useState(false); - const [error, setError] = React.useState<{ message: string } | null>(null); + const [, setError] = React.useState<{ message: string } | null>(null); const [success, setSuccess] = React.useState(false); const [password, setPassword] = React.useState(""); diff --git a/apps/web/pages/video/[uid].tsx b/apps/web/pages/video/[uid].tsx index 957e4a062a..9f6f67337f 100644 --- a/apps/web/pages/video/[uid].tsx +++ b/apps/web/pages/video/[uid].tsx @@ -1,21 +1,27 @@ import DailyIframe from "@daily-co/daily-js"; +import MarkdownIt from "markdown-it"; import type { GetServerSidePropsContext } from "next"; import Head from "next/head"; -import { useEffect } from "react"; +import { useState, useEffect } from "react"; +import dayjs from "@calcom/dayjs"; import { getServerSession } from "@calcom/features/auth/lib/getServerSession"; +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 prisma, { bookingMinimalSelect } from "@calcom/prisma"; import type { inferSSRProps } from "@calcom/types/inferSSRProps"; +import { FiChevronRight } from "@calcom/ui/components/icon"; import { ssrInit } from "@server/lib/ssr"; export type JoinCallPageProps = inferSSRProps; +const md = new MarkdownIt("default", { html: true, breaks: true, linkify: true }); export default function JoinCall(props: JoinCallPageProps) { const { t } = useLocale(); - const { meetingUrl, meetingPassword } = props; + const { meetingUrl, meetingPassword, booking } = props; useEffect(() => { const callFrame = DailyIframe.createFrame({ @@ -53,7 +59,6 @@ export default function JoinCall(props: JoinCallPageProps) { <> {title} - @@ -77,6 +82,112 @@ export default function JoinCall(props: JoinCallPageProps) { }} />
+ + + ); +} + +interface ProgressBarProps { + startTime: string; + endTime: string; +} + +function ProgressBar(props: ProgressBarProps) { + 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] = useState(() => { + if (currentDifference >= 0 && isPast) { + return startDuration - currentDifference; + } else { + return startDuration; + } + }); + + const prev = startDuration - duration; + const percentage = prev * (100 / startDuration); + return ( +
+

{duration} minutes

+
+
+
+
+
+ ); +} + +interface VideoMeetingInfo { + booking: JoinCallPageProps["booking"]; +} + +export function VideoMeetingInfo(props: VideoMeetingInfo) { + const [open, setOpen] = useState(false); + const { booking } = props; + + const endTime = new Date(booking.endTime); + const startTime = new Date(booking.startTime); + + return ( + <> + ); } @@ -93,10 +204,14 @@ export async function getServerSideProps(context: GetServerSidePropsContext) { select: { ...bookingMinimalSelect, uid: true, + description: true, user: { select: { id: true, credentials: true, + timeZone: true, + name: true, + email: true, }, }, references: { @@ -157,6 +272,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) { ...(typeof bookingObj.references[0].meetingPassword === "string" && { meetingPassword: bookingObj.references[0].meetingPassword, }), + booking: bookingObj, trpcState: ssr.dehydrate(), }, }; diff --git a/apps/web/pages/video/meeting-not-started/[uid].tsx b/apps/web/pages/video/meeting-not-started/[uid].tsx index 87c361e926..2469bb7b70 100644 --- a/apps/web/pages/video/meeting-not-started/[uid].tsx +++ b/apps/web/pages/video/meeting-not-started/[uid].tsx @@ -5,63 +5,35 @@ import { useLocale } from "@calcom/lib/hooks/useLocale"; import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat"; import prisma, { bookingMinimalSelect } from "@calcom/prisma"; import type { inferSSRProps } from "@calcom/types/inferSSRProps"; -import { Button, HeadSeo } from "@calcom/ui"; -import { FiArrowRight, FiCalendar, FiX } from "@calcom/ui/components/icon"; +import { Button, HeadSeo, EmptyScreen } from "@calcom/ui"; +import { FiArrowRight, FiCalendar, FiClock } from "@calcom/ui/components/icon"; export default function MeetingNotStarted(props: inferSSRProps) { const { t } = useLocale(); return ( -
- + <> +
-
-
- -
-
+ +

{props.booking.title}

+

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

+ + } + buttonRaw={ + + } + />
-
+ ); } diff --git a/apps/web/pages/video/no-meeting-found.tsx b/apps/web/pages/video/no-meeting-found.tsx index a09d56100d..d65fbdd7dd 100644 --- a/apps/web/pages/video/no-meeting-found.tsx +++ b/apps/web/pages/video/no-meeting-found.tsx @@ -1,50 +1,25 @@ import { useLocale } from "@calcom/lib/hooks/useLocale"; -import { Button, HeadSeo } from "@calcom/ui"; +import { Button, EmptyScreen, HeadSeo } from "@calcom/ui"; import { FiX, FiArrowRight } from "@calcom/ui/components/icon"; export default function NoMeetingFound() { const { t } = useLocale(); return ( -
+ <>
-
-
- -
-
+ + {t("go_back_home")} + + } + />
-
+ ); } diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index 553a76ecca..fe91bdb923 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/apps/web/public/static/locales/en/common.json @@ -1647,6 +1647,7 @@ "add_a_new_route": "Add a new Route", "no_responses_yet": "No responses yet", "this_will_be_the_placeholder": "This will be the placeholder", + "this_meeting_has_not_started_yet": "This meeting has not started yet", "this_app_requires_connected_account": "{{appName}} requires a connected {{dependencyName}} account", "connect_app": "Connect {{dependencyName}}", "app_is_connected": "{{dependencyName}} is connected", diff --git a/packages/ui/components/form/inputs/Input.tsx b/packages/ui/components/form/inputs/Input.tsx index 1d681e8528..24f74bfba9 100644 --- a/packages/ui/components/form/inputs/Input.tsx +++ b/packages/ui/components/form/inputs/Input.tsx @@ -208,7 +208,7 @@ export const PasswordField = forwardRef(funct const textLabel = isPasswordVisible ? t("hide_password") : t("show_password"); return ( -
+