use ReviewSegment type

web/src/components/timeline/EventReviewTimeline.tsx

@@ -9,7 +9,7 @@ import {
 } from "react";
 import EventSegment from "./EventSegment";
 import { useEventUtils } from "@/hooks/use-event-utils";
-import { Event } from "@/types/event";
+import { ReviewSegment } from "@/types/review";
 
 export type EventReviewTimelineProps = {
   segmentDuration: number;
@@ -21,7 +21,7 @@ export type EventReviewTimelineProps = {
   showMinimap?: boolean;
   minimapStartTime?: number;
   minimapEndTime?: number;
-  events: Event[];
+  events: ReviewSegment[];
   severityType: string;
   contentRef: RefObject<HTMLDivElement>;
 };

web/src/components/timeline/EventSegment.tsx

@@ -1,10 +1,10 @@
 import { useEventUtils } from "@/hooks/use-event-utils";
 import { useSegmentUtils } from "@/hooks/use-segment-utils";
-import { Event } from "@/types/event";
+import { ReviewSegment } from "@/types/review";
 import { useMemo } from "react";
 
 type EventSegmentProps = {
-  events: Event[];
+  events: ReviewSegment[];
   segmentTime: number;
   segmentDuration: number;
   timestampSpread: number;

web/src/hooks/use-event-utils.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
-import { Event } from '@/types/event';
+import { ReviewSegment } from '@/types/review';
 
-export const useEventUtils = (events: Event[], segmentDuration: number) => {
+export const useEventUtils = (events: ReviewSegment[], segmentDuration: number) => {
   const isStartOfEvent = useCallback((time: number): boolean => {
     return events.some((event) => {
       const segmentStart = getSegmentStart(event.start_time);

web/src/hooks/use-segment-utils.ts

@@ -1,9 +1,9 @@
 import { useCallback, useMemo } from 'react';
-import { Event } from '@/types/event';
+import { ReviewSegment } from '@/types/review';
 
 export const useSegmentUtils = (
   segmentDuration: number,
-  events: Event[],
+  events: ReviewSegment[],
   severityType: string,
 ) => {
   const getSegmentStart = useCallback((time: number): number => {
@@ -20,7 +20,7 @@ export const useSegmentUtils = (
 
   const mapSeverityToNumber = useCallback((severity: string): number => {
     switch (severity) {
-      case "motion":
+      case "significant_motion":
         return 1;
       case "detection":
         return 2;
@@ -117,8 +117,17 @@ export const useSegmentUtils = (
         roundBottom = !hasPrevOtherEvent;
         roundTop = !hasNextOtherEvent;
       } else {
-        roundTop = !hasNextSeverityEvent && !hasNextOtherEvent;
-        roundBottom = !hasPrevSeverityEvent && !hasPrevOtherEvent;
+        roundTop = !hasNextSeverityEvent || !hasNextOtherEvent;
+        roundBottom = !hasPrevSeverityEvent || !hasPrevOtherEvent;
+      }
+
+      if (segmentTime == 1708459740) {
+        console.log("hasOverlappingSeverityEvent: " + hasOverlappingSeverityEvent)
+        console.log("hasPrevSeverityEvent: " + hasPrevSeverityEvent)
+        console.log("hasNextSeverityEvent: " + hasNextSeverityEvent)
+        console.log("hasOverlappingOtherEvent: " + hasOverlappingOtherEvent)
+        console.log("hasPrevOtherEvent: " + hasPrevOtherEvent)
+        console.log("hasNextOtherEvent: "+hasNextOtherEvent)
       }
 
       return {

web/src/pages/UIPlayground.tsx

@@ -10,6 +10,7 @@ import ActivityIndicator from "@/components/ui/activity-indicator";
 import { useApiHost } from "@/api";
 import TimelineScrubber from "@/components/playground/TimelineScrubber";
 import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
+import { ReviewSegment } from "@/types/review";
 
 // Color data
 const colors = [
@@ -72,7 +73,7 @@ function UIPlayground() {
   const { data: config } = useSWR<FrigateConfig>("config");
   const [timeline, setTimeline] = useState<string | undefined>(undefined);
   const contentRef = useRef<HTMLDivElement>(null);
-  const [mockEvents, setMockEvents] = useState<Event[]>([]);
+  const [mockEvents, setMockEvents] = useState<ReviewSegment[]>([]);
 
   const onSelect = useCallback(({ items }: { items: string[] }) => {
     setTimeline(items[0]);
@@ -91,7 +92,6 @@ function UIPlayground() {
   useMemo(() => {
     const initialEvents = Array.from({ length: 50 }, generateRandomEvent);
     setMockEvents(initialEvents);
-    console.log(initialEvents);
   }, []);
 
   return (

web/src/types/review.ts

@@ -0,0 +1,20 @@
+export interface ReviewSegment {
+    id: string;
+    camera: string;
+    severity: ReviewSeverity;
+    start_time: number;
+    end_time: number;
+    thumb_path: string;
+    has_been_reviewed: boolean;
+    data: ReviewData;
+  }
+
+  export type ReviewSeverity = "alert" | "detection" | "significant_motion";
+
+  type ReviewData = {
+    audio: string[];
+    detections: string[];
+    objects: string[];
+    significant_motion_areas: number[];
+    zones: string[];
+  };