Redesign Recordings View (#10690)

* Use full width top bar

* Make each item in review filter group optional

* Remove export creation from export page

* Consolidate packages and fix opening recording from event

* Use common type for time range

* Move timeline to separate component

* Add events list view to recordings view

* Fix loading of images

* Fix incorrect labels

* use overlay state for selected timeline type

* Fix up for mobile view for now

* replace overlay state

* fix comparison

* remove unused

web/src/views/events/EventView.tsx

@@ -254,10 +254,14 @@ export default function EventView({
 
         {selectedReviews.length <= 0 ? (
           <ReviewFilterGroup
+            filters={
+              severity == "significant_motion"
+                ? ["cameras", "date", "motionOnly"]
+                : ["cameras", "date", "general"]
+            }
             reviewSummary={reviewSummary}
             filter={filter}
             onUpdateFilter={updateFilter}
-            severity={severity}
             motionOnly={motionOnly}
             setMotionOnly={setMotionOnly}
           />
@@ -667,7 +671,7 @@ function MotionReview({
     }
 
     return timeRangeSegments.ranges.findIndex(
-      (seg) => seg.start <= startTime && seg.end >= startTime,
+      (seg) => seg.after <= startTime && seg.before >= startTime,
     );
     // only render once
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -675,7 +679,7 @@ function MotionReview({
 
   const [selectedRangeIdx, setSelectedRangeIdx] = useState(initialIndex);
   const [currentTime, setCurrentTime] = useState<number>(
-    startTime ?? timeRangeSegments.ranges[selectedRangeIdx]?.end,
+    startTime ?? timeRangeSegments.ranges[selectedRangeIdx]?.before,
   );
   const currentTimeRange = useMemo(
     () => timeRangeSegments.ranges[selectedRangeIdx],
@@ -689,11 +693,11 @@ function MotionReview({
 
   useEffect(() => {
     if (
-      currentTime > currentTimeRange.end + 60 ||
-      currentTime < currentTimeRange.start - 60
+      currentTime > currentTimeRange.before + 60 ||
+      currentTime < currentTimeRange.after - 60
     ) {
       const index = timeRangeSegments.ranges.findIndex(
-        (seg) => seg.start <= currentTime && seg.end >= currentTime,
+        (seg) => seg.after <= currentTime && seg.before >= currentTime,
       );
 
       if (index != -1) {