diff --git a/apps/web/pages/video/[uid].tsx b/apps/web/pages/video/[uid].tsx index d2284319dd..b68e3aa2ac 100644 --- a/apps/web/pages/video/[uid].tsx +++ b/apps/web/pages/video/[uid].tsx @@ -2,7 +2,7 @@ import DailyIframe from "@daily-co/daily-js"; import MarkdownIt from "markdown-it"; import type { GetServerSidePropsContext } from "next"; import Head from "next/head"; -import { useState, useEffect } from "react"; +import { useState, useEffect, useRef } from "react"; import dayjs from "@calcom/dayjs"; import { getServerSession } from "@calcom/features/auth/lib/getServerSession"; @@ -100,7 +100,7 @@ function ProgressBar(props: ProgressBarProps) { const isPast = currentTime.isAfter(startingTime); const currentDifference = dayjs().diff(startingTime, "minutes"); const startDuration = dayjs(endTime).diff(startingTime, "minutes"); - const [duration] = useState(() => { + const [duration, setDuration] = useState(() => { if (currentDifference >= 0 && isPast) { return startDuration - currentDifference; } else { @@ -108,6 +108,39 @@ function ProgressBar(props: ProgressBarProps) { } }); + 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; + } + }; + }, []); + const prev = startDuration - duration; const percentage = prev * (100 / startDuration); return ( @@ -179,7 +212,7 @@ export function VideoMeetingInfo(props: VideoMeetingInfo) {
)} @@ -280,7 +313,10 @@ export async function getServerSideProps(context: GetServerSidePropsContext) { ...(typeof bookingObj.references[0].meetingPassword === "string" && { meetingPassword: bookingObj.references[0].meetingPassword, }), - booking: bookingObj, + booking: { + ...bookingObj, + ...(bookingObj.description && { description: md.render(bookingObj.description) }), + }, trpcState: ssr.dehydrate(), }, };