Update recordings view (#10585)

* Update recordings view

* Fix opening recordings view from gif

web/src/components/filter/FilterCheckBox.tsx

@@ -5,6 +5,7 @@ import { IconType } from "react-icons";
 type FilterCheckBoxProps = {
   label: string;
   CheckIcon?: IconType;
+  iconClassName?: string;
   isChecked: boolean;
   onCheckedChange: (isChecked: boolean) => void;
 };
@@ -12,6 +13,7 @@ type FilterCheckBoxProps = {
 export default function FilterCheckBox({
   label,
   CheckIcon = LuCheck,
+  iconClassName = "size-6",
   isChecked,
   onCheckedChange,
 }: FilterCheckBoxProps) {
@@ -22,9 +24,9 @@ export default function FilterCheckBox({
       onClick={() => onCheckedChange(!isChecked)}
     >
       {isChecked ? (
-        <CheckIcon className="w-6 h-6" />
+        <CheckIcon className={iconClassName} />
       ) : (
-        <div className="w-6 h-6" />
+        <div className={iconClassName} />
       )}
       <div className="ml-1 w-full flex justify-start">{label}</div>
     </Button>

web/src/components/filter/ReviewFilterGroup.tsx

@@ -280,7 +280,7 @@ type CalendarFilterButtonProps = {
   day?: Date;
   updateSelectedDay: (day?: Date) => void;
 };
-function CalendarFilterButton({
+export function CalendarFilterButton({
   reviewSummary,
   day,
   updateSelectedDay,

web/src/components/image/AnimatedEventThumbnail.tsx

@@ -7,6 +7,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { ReviewSegment } from "@/types/review";
 import { useNavigate } from "react-router-dom";
 import { Skeleton } from "../ui/skeleton";
+import { RecordingStartingPoint } from "@/types/record";
 
 type AnimatedEventThumbnailProps = {
   event: ReviewSegment;
@@ -18,7 +19,13 @@ export function AnimatedEventThumbnail({ event }: AnimatedEventThumbnailProps) {
 
   const navigate = useNavigate();
   const onOpenReview = useCallback(() => {
-    navigate("events", { state: { review: event.id } });
+    navigate("events", {
+      state: {
+        camera: event.camera,
+        startTime: event.start_time,
+        severity: event.severity,
+      } as RecordingStartingPoint,
+    });
   }, [navigate, event]);
 
   // image behavior

web/src/pages/Events.tsx

@@ -36,11 +36,18 @@ export default function Events() {
   const [reviewFilter, setReviewFilter, reviewSearchParams] =
     useApiFilter<ReviewFilter>();
 
-  const onUpdateFilter = useCallback((newFilter: ReviewFilter) => {
+  const onUpdateFilter = useCallback(
-    setReviewFilter(newFilter);
+    (newFilter: ReviewFilter) => {
-    // we don't want this updating
+      setReviewFilter(newFilter);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+
-  }, []);
+      // update recording start time if filter
+      // was changed on recording page
+      if (recording != undefined && newFilter.after != undefined) {
+        setRecording({ ...recording, startTime: newFilter.after }, true);
+      }
+    },
+    [recording, setRecording, setReviewFilter],
+  );
 
   // review paging
 
@@ -286,10 +293,8 @@ export default function Events() {
 
     return {
       camera: recording.camera,
-      severity: recording.severity,
       start_time: recording.startTime,
       allCameras: allCameras,
-      cameraSegments: reviews.filter((seg) => allCameras.includes(seg.camera)),
     };
 
     // previews will not update after item is selected
@@ -306,9 +311,11 @@ export default function Events() {
         startCamera={selectedReviewData.camera}
         startTime={selectedReviewData.start_time}
         allCameras={selectedReviewData.allCameras}
-        severity={selectedReviewData.severity}
+        reviewItems={reviews}
-        reviewItems={selectedReviewData.cameraSegments}
+        reviewSummary={reviewSummary}
         allPreviews={allPreviews}
+        filter={reviewFilter}
+        updateFilter={onUpdateFilter}
       />
     );
   } else {

web/src/views/events/RecordingView.tsx

@@ -1,24 +1,26 @@
+import FilterCheckBox from "@/components/filter/FilterCheckBox";
+import { CalendarFilterButton } from "@/components/filter/ReviewFilterGroup";
 import PreviewPlayer, {
   PreviewController,
 } from "@/components/player/PreviewPlayer";
 import { DynamicVideoController } from "@/components/player/dynamic/DynamicVideoController";
 import DynamicVideoPlayer from "@/components/player/dynamic/DynamicVideoPlayer";
-import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
 import MotionReviewTimeline from "@/components/timeline/MotionReviewTimeline";
 import { Button } from "@/components/ui/button";
-import {
+import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { Preview } from "@/types/preview";
-import { MotionData, ReviewSegment, ReviewSeverity } from "@/types/review";
+import {
+  MotionData,
+  ReviewFilter,
+  ReviewSegment,
+  ReviewSummary,
+} from "@/types/review";
+import { getEndOfDayTimestamp } from "@/utils/dateUtil";
 import { getChunkedTimeDay } from "@/utils/timelineUtil";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { isDesktop, isMobile } from "react-device-detect";
+import { FaCircle, FaVideo } from "react-icons/fa";
 import { IoMdArrowRoundBack } from "react-icons/io";
 import { useNavigate } from "react-router-dom";
 import useSWR from "swr";
@@ -28,18 +30,22 @@ const SEGMENT_DURATION = 30;
 type RecordingViewProps = {
   startCamera: string;
   startTime: number;
-  severity: ReviewSeverity;
+  reviewItems?: ReviewSegment[];
-  reviewItems: ReviewSegment[];
+  reviewSummary?: ReviewSummary;
   allCameras: string[];
   allPreviews?: Preview[];
+  filter?: ReviewFilter;
+  updateFilter: (newFilter: ReviewFilter) => void;
 };
 export function RecordingView({
   startCamera,
   startTime,
-  severity,
   reviewItems,
+  reviewSummary,
   allCameras,
   allPreviews,
+  filter,
+  updateFilter,
 }: RecordingViewProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
   const navigate = useNavigate();
@@ -54,7 +60,7 @@ export function RecordingView({
   const [playbackStart, setPlaybackStart] = useState(startTime);
 
   const mainCameraReviewItems = useMemo(
-    () => reviewItems.filter((cam) => cam.camera == mainCamera),
+    () => reviewItems?.filter((cam) => cam.camera == mainCamera) ?? [],
     [reviewItems, mainCamera],
   );
 
@@ -157,19 +163,15 @@ export function RecordingView({
 
   // motion timeline data
 
-  const { data: motionData } = useSWR<MotionData[]>(
+  const { data: motionData } = useSWR<MotionData[]>([
-    severity == "significant_motion"
+    "review/activity/motion",
-      ? [
+    {
-          "review/activity/motion",
+      before: timeRange.end,
-          {
+      after: timeRange.start,
-            before: timeRange.end,
+      scale: SEGMENT_DURATION / 2,
-            after: timeRange.start,
+      cameras: mainCamera,
-            scale: SEGMENT_DURATION / 2,
+    },
-            cameras: mainCamera,
+  ]);
-          },
-        ]
-      : null,
-  );
 
   const mainCameraAspect = useMemo(() => {
     if (!config) {
@@ -201,41 +203,61 @@ export function RecordingView({
 
   return (
     <div ref={contentRef} className="relative size-full">
-      <Button
+      <div
-        className="absolute top-0 left-0 rounded-lg"
+        className={`absolute left-0  top-0 mr-2 flex items-center justify-between ${isMobile ? "right-0" : "right-24"}`}
-        onClick={() => navigate(-1)}
       >
-        <IoMdArrowRoundBack className="size-5 mr-[10px]" />
+        <Button className="rounded-lg" onClick={() => navigate(-1)}>
-        Back
+          <IoMdArrowRoundBack className="size-5 mr-[10px]" />
-      </Button>
+          Back
-      {isMobile && (
+        </Button>
-        <DropdownMenu>
+        <div className="flex items-center justify-end">
-          <DropdownMenuTrigger asChild>
+          <CalendarFilterButton
-            <Button className="absolute top-0 right-0 rounded-lg capitalize">
+            day={
-              {mainCamera.replaceAll("_", " ")}
+              filter?.after == undefined
-            </Button>
+                ? undefined
-          </DropdownMenuTrigger>
+                : new Date(filter.after * 1000)
-          <DropdownMenuContent>
+            }
-            <DropdownMenuRadioGroup
+            reviewSummary={reviewSummary}
-              value={mainCamera}
+            updateSelectedDay={(day) => {
-              onValueChange={(cam) => {
+              updateFilter({
-                setPlaybackStart(currentTime);
+                ...filter,
-                setMainCamera(cam);
+                after: day == undefined ? undefined : day.getTime() / 1000,
-              }}
+                before:
-            >
+                  day == undefined ? undefined : getEndOfDayTimestamp(day),
-              {allCameras.map((cam) => (
+              });
-                <DropdownMenuRadioItem
+            }}
-                  key={cam}
+          />
-                  className="capitalize"
+          {isMobile && (
-                  value={cam}
+            <Drawer>
+              <DrawerTrigger asChild>
+                <Button
+                  className="rounded-lg capitalize flex items-center gap-2"
+                  size="sm"
+                  variant="secondary"
                 >
-                  {cam.replaceAll("_", " ")}
+                  <FaVideo className="text-muted-foreground" />
-                </DropdownMenuRadioItem>
+                  {mainCamera.replaceAll("_", " ")}
-              ))}
+                </Button>
-            </DropdownMenuRadioGroup>
+              </DrawerTrigger>
-          </DropdownMenuContent>
+              <DrawerContent className="max-h-[75dvh] overflow-hidden">
-        </DropdownMenu>
+                {allCameras.map((cam) => (
-      )}
+                  <FilterCheckBox
+                    key={cam}
+                    CheckIcon={FaCircle}
+                    iconClassName="size-2"
+                    label={cam.replaceAll("_", " ")}
+                    isChecked={cam == mainCamera}
+                    onCheckedChange={() => {
+                      setPlaybackStart(currentTime);
+                      setMainCamera(cam);
+                    }}
+                  />
+                ))}
+              </DrawerContent>
+            </Drawer>
+          )}
+        </div>
+      </div>
 
       <div
         className={`flex h-full justify-center overflow-hidden ${isDesktop ? "" : "flex-col pt-12"}`}
@@ -312,36 +334,20 @@ export function RecordingView({
               : "flex-grow overflow-hidden"
           }
         >
-          {severity != "significant_motion" ? (
+          <MotionReviewTimeline
-            <EventReviewTimeline
+            segmentDuration={30}
-              segmentDuration={30}
+            timestampSpread={15}
-              timestampSpread={15}
+            timelineStart={timeRange.end}
-              timelineStart={timeRange.end}
+            timelineEnd={timeRange.start}
-              timelineEnd={timeRange.start}
+            showHandlebar
-              showHandlebar
+            handlebarTime={currentTime}
-              handlebarTime={currentTime}
+            setHandlebarTime={setCurrentTime}
-              setHandlebarTime={setCurrentTime}
+            events={mainCameraReviewItems}
-              events={mainCameraReviewItems}
+            motion_events={motionData ?? []}
-              severityType={severity}
+            severityType="significant_motion"
-              contentRef={contentRef}
+            contentRef={contentRef}
-              onHandlebarDraggingChange={(scrubbing) => setScrubbing(scrubbing)}
+            onHandlebarDraggingChange={(scrubbing) => setScrubbing(scrubbing)}
-            />
+          />
-          ) : (
-            <MotionReviewTimeline
-              segmentDuration={30}
-              timestampSpread={15}
-              timelineStart={timeRange.end}
-              timelineEnd={timeRange.start}
-              showHandlebar
-              handlebarTime={currentTime}
-              setHandlebarTime={setCurrentTime}
-              events={mainCameraReviewItems}
-              motion_events={motionData ?? []}
-              severityType={severity}
-              contentRef={contentRef}
-              onHandlebarDraggingChange={(scrubbing) => setScrubbing(scrubbing)}
-            />
-          )}
         </div>
       </div>
     </div>