Add current time marker

Author: hasparus

src/app/conf/2025/schedule/_components/schedule-list.tsx

@@ -17,6 +17,7 @@ import {
   ResetFiltersButton,
 } from "./filters"
 import { formatBlockTime } from "./format-block-time"
+import { useCurrentTimeMarker } from "./use-current-time-marker"
 
 export interface FiltersConfig
   extends Partial<
@@ -138,6 +139,8 @@ export function ScheduleList({
   const firstDayIsDayZero = Object.keys(firstDay).length < 3
   const startIndex = firstDayIsDayZero ? 0 : 1
 
+  const getTimeMarker = useCurrentTimeMarker()
+
   return (
     <>
       <div className="flex justify-between gap-1 max-lg:flex-col">
@@ -229,6 +232,16 @@ export function ScheduleList({
                         blockEnd.getTime(),
                     )
 
+                    let timeMarker = getTimeMarker(sessionDate, blockEnd)
+                    // if end times differ and blockEnd is far from start, we treat this as a long event, like "solutions showcase"
+                    if (
+                      endTimesDiffer &&
+                      blockEnd.getTime() - new Date(sessionDate).getTime() >
+                        1000 * 60 * 60 * 2
+                    ) {
+                      timeMarker = null
+                    }
+
                     return (
                       <div
                         key={`concurrent sessions on ${sessionDate}`}
@@ -256,6 +269,18 @@ export function ScheduleList({
                             ))}
                           </div>
                         </div>
+                        {timeMarker && (
+                          <div
+                            id="current-time-marker"
+                            className="typography-body-xs pointer-events-none absolute -right-1 z-10 -translate-y-full font-mono tabular-nums text-pri-base before:absolute before:inset-x-0 before:bottom-0 before:border-b before:border-pri-base before:opacity-80 after:absolute after:bottom-0 after:left-[-100vw] after:w-screen after:border-t after:border-pri-base after:opacity-20 dark:text-pri-light dark:before:border-pri-light dark:after:border-pri-light max-xl:bg-neu-0 xl:translate-x-full"
+                            style={{
+                              top: `${timeMarker.positionPercentage}%`,
+                            }}
+                          >
+                            <span className="max-2xl:hidden">now: </span>
+                            {timeMarker.currentTime}
+                          </div>
+                        )}
                         {hasDashedBorder && (
                           <svg
                             className="absolute -bottom-px left-0 h-px w-full text-neu-50"

src/app/conf/2025/schedule/_components/use-current-time-marker.ts

@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react"
+import { format } from "date-fns"
+
+const CONFERENCE_START = new Date("2025-09-08T00:00:00")
+const CONFERENCE_END = new Date("2025-09-10T23:59:59")
+
+export function useCurrentTimeMarker() {
+  const [now, setNow] = useState<Date>(new Date())
+
+  useEffect(() => {
+    const id = setInterval(() => setNow(new Date()), 60 * 1000)
+    return () => clearInterval(id)
+  }, [])
+
+  const showNowMarkers =
+    now.getTime() >= CONFERENCE_START.getTime() &&
+    now.getTime() <= CONFERENCE_END.getTime()
+
+  const getTimeMarker = (sessionDate: string, blockEnd: Date) => {
+    const blockStart = new Date(sessionDate)
+    const isCurrentBlock =
+      showNowMarkers &&
+      now.getTime() >= blockStart.getTime() &&
+      now.getTime() < blockEnd.getTime()
+
+    if (!isCurrentBlock) {
+      return null
+    }
+
+    const blockDuration = blockEnd.getTime() - blockStart.getTime()
+    const timePassed = now.getTime() - blockStart.getTime()
+    const positionPercentage = Math.min(
+      100,
+      Math.max(0, (timePassed / blockDuration) * 100),
+    )
+    const currentTimeFormatted = format(now, "HH:mm")
+
+    return {
+      positionPercentage,
+      currentTime: currentTimeFormatted,
+    }
+  }
+
+  return getTimeMarker
+}