web/src/components/overlay/detail/TrackingDetails.tsx

@@ -221,26 +221,12 @@ export function TrackingDetails({
     displaySource,
   ]);
 
-  const isWithinEventRange = useMemo(() => {
+  const isWithinEventRange =
-    if (effectiveTime === undefined || event.start_time === undefined) {
+    effectiveTime !== undefined &&
-      return false;
+    event.start_time !== undefined &&
-    }
+    event.end_time !== undefined &&
-
+    effectiveTime >= event.start_time &&
-    // If an event has not ended yet, fall back to last timestamp in eventSequence
+    effectiveTime <= event.end_time;
-    let eventEnd = event.end_time;
-    if (eventEnd == null && eventSequence && eventSequence.length > 0) {
-      const last = eventSequence[eventSequence.length - 1];
-      if (last && last.timestamp !== undefined) {
-        eventEnd = last.timestamp;
-      }
-    }
-
-    if (eventEnd == null) {
-      return false;
-    }
-
-    return effectiveTime >= event.start_time && effectiveTime <= eventEnd;
-  }, [effectiveTime, event.start_time, event.end_time, eventSequence]);
 
   // Calculate how far down the blue line should extend based on effectiveTime
   const calculateLineHeight = useCallback(() => {

web/src/components/player/HlsVideoPlayer.tsx

@@ -318,7 +318,6 @@ export default function HlsVideoPlayer({
         {isDetailMode &&
           camera &&
           currentTime &&
-          loadedMetadata &&
           videoDimensions.width > 0 &&
           videoDimensions.height > 0 && (
             <div className="absolute z-50 size-full">

web/src/pages/Events.tsx

@@ -15,7 +15,6 @@ import {
   ReviewSummary,
   SegmentedReviewData,
 } from "@/types/review";
-import { TimelineType } from "@/types/timeline";
 import {
   getBeginningOfDayTimestamp,
   getEndOfDayTimestamp,
@@ -50,16 +49,6 @@ export default function Events() {
     false,
   );
 
-  const [notificationTab, setNotificationTab] =
-    useState<TimelineType>("timeline");
-
-  useSearchEffect("tab", (tab: string) => {
-    if (tab === "timeline" || tab === "events" || tab === "detail") {
-      setNotificationTab(tab as TimelineType);
-    }
-    return true;
-  });
-
   useSearchEffect("id", (reviewId: string) => {
     axios
       .get(`review/${reviewId}`)
@@ -77,7 +66,7 @@ export default function Events() {
               camera: resp.data.camera,
               startTime,
               severity: resp.data.severity,
-              timelineType: notificationTab,
+              timelineType: "detail",
             },
             true,
           );

web/src/types/record.ts

@@ -1,5 +1,4 @@
 import { ReviewSeverity } from "./review";
-import { TimelineType } from "./timeline";
 
 export type Recording = {
   id: string;
@@ -38,7 +37,7 @@ export type RecordingStartingPoint = {
   camera: string;
   startTime: number;
   severity: ReviewSeverity;
-  timelineType?: TimelineType;
+  timelineType?: "timeline" | "events" | "detail";
 };
 
 export type RecordingPlayerError = "stalled" | "startup";