feat: dynamically elapse time left timer (#7938)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

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<NodeJS.Timeout | null>(null);
+  const intervalRef = useRef<NodeJS.Timeout | null>(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) {
 
               <div
                 className="prose-sm prose prose-invert"
-                dangerouslySetInnerHTML={{ __html: md.render(booking.description ?? "") }}
+                dangerouslySetInnerHTML={{ __html: booking.description }}
               />
             </>
           )}
@@ -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(),
     },
   };