Recording fixes (#10728)

* Use timerange everywhere and ensure recordings has last 24 hours * Pause recording when selecting timeline * Fix loading layout * Fix updating current time not always working * Simplify dynamic video player * Clean up desktop sizing * Fix current hour * Make padding consistent * Improve spacing for extra cameras * Make back button consistent * Fix preview player not jumping to correct time * Dont use useEffect due to preview changing * Simplify * Fix transition
2024-03-30 12:44:12 -06:00
parent 7d3b481181
commit 190cdc471a
12 changed files with 210 additions and 183 deletions
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -46,7 +46,7 @@ type EventViewProps = {
  reviews?: ReviewSegment[];
  reviewSummary?: ReviewSummary;
  relevantPreviews?: Preview[];
-  timeRange: { before: number; after: number };
+  timeRange: TimeRange;
  filter?: ReviewFilter;
  severity: ReviewSeverity;
  startTime?: number;
@@ -205,7 +205,7 @@ export default function EventView({
  }

  return (
-    <div className="flex flex-col size-full">
+    <div className="py-2 flex flex-col size-full">
      <div className="h-11 px-2 relative flex justify-between items-center">
        {isMobile && (
          <Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
@@ -492,7 +492,7 @@ function DetectionReview({
    <>
      <div
        ref={contentRef}
-        className="mt-2 flex flex-1 flex-wrap content-start gap-2 md:gap-4 overflow-y-auto no-scrollbar"
+        className="flex flex-1 flex-wrap content-start gap-2 md:gap-4 overflow-y-auto no-scrollbar"
      >
        {filter?.before == undefined && (
          <NewReviewData
@@ -687,6 +687,8 @@ function MotionReview({
    [selectedRangeIdx, timeRangeSegments],
  );

+  const [previewStart, setPreviewStart] = useState(startTime);
+
  const [scrubbing, setScrubbing] = useState(false);
  const [playing, setPlaying] = useState(false);

@@ -702,9 +704,7 @@ function MotionReview({
      );

      if (index != -1) {
-        Object.values(videoPlayersRef.current).forEach((controller) => {
-          controller.setNewPreviewStartTime(currentTime);
-        });
+        setPreviewStart(currentTime);
        setSelectedRangeIdx(index);
      }
      return;
@@ -713,7 +713,9 @@ function MotionReview({
    Object.values(videoPlayersRef.current).forEach((controller) => {
      controller.scrubToTimestamp(currentTime);
    });
-  }, [currentTime, currentTimeRange, timeRangeSegments]);
+    // only refresh when current time or available segments changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentTime, timeRangeSegments]);

  // playback

@@ -826,7 +828,7 @@ function MotionReview({
                className={`${detectionType ? `outline outline-3 outline-offset-1 outline-severity_${detectionType}` : "outline-0 shadow-none"} rounded-2xl ${grow}`}
                camera={camera.name}
                timeRange={currentTimeRange}
-                startTime={startTime}
+                startTime={previewStart}
                cameraPreviews={relevantPreviews || []}
                isScrubbing={scrubbing}
                onControllerReady={(controller) => {
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -46,6 +46,7 @@ type RecordingViewProps = {
  startTime: number;
  reviewItems?: ReviewSegment[];
  reviewSummary?: ReviewSummary;
+  timeRange: TimeRange;
  allCameras: string[];
  allPreviews?: Preview[];
  filter?: ReviewFilter;
@@ -56,6 +57,7 @@ export function RecordingView({
  startTime,
  reviewItems,
  reviewSummary,
+  timeRange,
  allCameras,
  allPreviews,
  filter,
@@ -85,15 +87,18 @@ export function RecordingView({
    "timeline",
  );

-  const timeRange = useMemo(() => getChunkedTimeDay(startTime), [startTime]);
+  const chunkedTimeRange = useMemo(
+    () => getChunkedTimeDay(timeRange),
+    [timeRange],
+  );
  const [selectedRangeIdx, setSelectedRangeIdx] = useState(
-    timeRange.ranges.findIndex((chunk) => {
+    chunkedTimeRange.findIndex((chunk) => {
      return chunk.after <= startTime && chunk.before >= startTime;
    }),
  );
  const currentTimeRange = useMemo(
-    () => timeRange.ranges[selectedRangeIdx],
-    [selectedRangeIdx, timeRange],
+    () => chunkedTimeRange[selectedRangeIdx],
+    [selectedRangeIdx, chunkedTimeRange],
  );

  // export
@@ -108,10 +113,10 @@ export function RecordingView({
      return;
    }

-    if (selectedRangeIdx < timeRange.ranges.length - 1) {
+    if (selectedRangeIdx < chunkedTimeRange.length - 1) {
      setSelectedRangeIdx(selectedRangeIdx + 1);
    }
-  }, [selectedRangeIdx, timeRange]);
+  }, [selectedRangeIdx, chunkedTimeRange]);

  // scrubbing and timeline state

@@ -121,7 +126,7 @@ export function RecordingView({

  const updateSelectedSegment = useCallback(
    (currentTime: number, updateStartTime: boolean) => {
-      const index = timeRange.ranges.findIndex(
+      const index = chunkedTimeRange.findIndex(
        (seg) => seg.after <= currentTime && seg.before >= currentTime,
      );

@@ -133,7 +138,7 @@ export function RecordingView({
        setSelectedRangeIdx(index);
      }
    },
-    [timeRange],
+    [chunkedTimeRange],
  );

  useEffect(() => {
@@ -189,40 +194,53 @@ export function RecordingView({

  // motion timeline data

+  const getCameraAspect = useCallback(
+    (cam: string) => {
+      if (!config) {
+        return undefined;
+      }
+
+      const camera = config.cameras[cam];
+
+      if (!camera) {
+        return undefined;
+      }
+
+      return camera.detect.width / camera.detect.height;
+    },
+    [config],
+  );
+
  const mainCameraAspect = useMemo(() => {
-    if (!config) {
+    const aspectRatio = getCameraAspect(mainCamera);
+
+    if (!aspectRatio) {
      return "normal";
-    }
-
-    const aspectRatio =
-      config.cameras[mainCamera].detect.width /
-      config.cameras[mainCamera].detect.height;
-
-    if (aspectRatio > 2) {
+    } else if (aspectRatio > 2) {
      return "wide";
    } else if (aspectRatio < 16 / 9) {
      return "tall";
    } else {
      return "normal";
    }
-  }, [config, mainCamera]);
+  }, [getCameraAspect, mainCamera]);

  const grow = useMemo(() => {
-    if (isMobile) {
-      return "";
-    }
-
    if (mainCameraAspect == "wide") {
      return "w-full aspect-wide";
-    } else if (isDesktop && mainCameraAspect == "tall") {
-      return "h-full aspect-tall flex flex-col justify-center";
+    } else if (mainCameraAspect == "tall") {
+      if (isDesktop) {
+        return "size-full aspect-tall flex flex-col justify-center";
+      } else {
+        return "size-full";
+      }
    } else {
      return "w-full aspect-video";
    }
  }, [mainCameraAspect]);

  return (
-    <div ref={contentRef} className="size-full flex flex-col">
+    <div ref={contentRef} className="size-full pt-2 flex flex-col">
      <Toaster />
      <div
        className={`w-full h-11 px-2 relative flex items-center justify-between`}
@@ -251,10 +269,16 @@ export function RecordingView({
            <ExportDialog
              camera={mainCamera}
              currentTime={currentTime}
-              latestTime={timeRange.end}
+              latestTime={timeRange.before}
              mode={exportMode}
              range={exportRange}
-              setRange={setExportRange}
+              setRange={(range) => {
+                setExportRange(range);
+
+                if (range != undefined) {
+                  mainControllerRef.current?.pause();
+                }
+              }}
              setMode={setExportMode}
            />
          )}
@@ -303,7 +327,7 @@ export function RecordingView({
            camera={mainCamera}
            filter={filter}
            currentTime={currentTime}
-            latestTime={timeRange.end}
+            latestTime={timeRange.before}
            mode={exportMode}
            range={exportRange}
            onUpdateFilter={updateFilter}
@@ -314,19 +338,26 @@ export function RecordingView({
      </div>

      <div
-        className={`h-full flex my-2 justify-center overflow-hidden ${isDesktop ? "" : "flex-col gap-2"}`}
+        className={`h-full flex justify-center overflow-hidden ${isDesktop ? "" : "flex-col gap-2"}`}
      >
-        <div className="flex flex-1 flex-wrap">
+        <div className={`${isDesktop ? "w-[80%]" : ""} flex flex-1 flex-wrap`}>
          <div
-            className={`size-full flex px-2 items-center ${mainCameraAspect == "tall" ? "flex-row justify-evenly" : "flex-col justify-center"}`}
+            className={`size-full flex items-center ${mainCameraAspect == "tall" ? "flex-row justify-evenly" : "flex-col justify-center gap-2"}`}
          >
            <div
              key={mainCamera}
              className={
                isDesktop
-                  ? `flex justify-center mb-5 ${mainCameraAspect == "tall" ? "h-full" : "w-[78%]"}`
-                  : `w-full ${mainCameraAspect == "wide" ? "" : "aspect-video"}`
+                  ? `${mainCameraAspect == "tall" ? "h-[90%]" : mainCameraAspect == "wide" ? "w-full" : "w-[78%]"} px-4 flex justify-center`
+                  : `w-full pt-2 ${mainCameraAspect == "wide" ? "aspect-wide" : "aspect-video"}`
              }
+              style={{
+                aspectRatio: isDesktop
+                  ? mainCameraAspect == "tall"
+                    ? getCameraAspect(mainCamera)
+                    : undefined
+                  : Math.max(1, getCameraAspect(mainCamera) ?? 0),
+              }}
            >
              <DynamicVideoPlayer
                className={grow}
@@ -351,33 +382,38 @@ export function RecordingView({
            </div>
            {isDesktop && (
              <div
-                className={`flex gap-2 ${mainCameraAspect == "tall" ? "h-full w-[16%] flex-col overflow-y-auto" : "w-full justify-center overflow-x-auto"}`}
+                className={`flex gap-2 ${mainCameraAspect == "tall" ? "h-full w-[12%] flex-col justify-center overflow-y-auto" : "w-full h-[14%] justify-center items-center overflow-x-auto"} `}
              >
                {allCameras.map((cam) => {
-                  if (cam !== mainCamera) {
-                    return (
-                      <div key={cam}>
-                        <PreviewPlayer
-                          className={
-                            mainCameraAspect == "tall"
-                              ? "size-full"
-                              : "size-full"
-                          }
-                          camera={cam}
-                          timeRange={currentTimeRange}
-                          cameraPreviews={allPreviews ?? []}
-                          startTime={startTime}
-                          isScrubbing={scrubbing}
-                          onControllerReady={(controller) => {
-                            previewRefs.current[cam] = controller;
-                            controller.scrubToTimestamp(startTime);
-                          }}
-                          onClick={() => onSelectCamera(cam)}
-                        />
-                      </div>
-                    );
+                  if (cam == mainCamera) {
+                    return;
                  }
-                  return null;
+
+                  return (
+                    <div
+                      key={cam}
+                      className={
+                        mainCameraAspect == "tall" ? undefined : "h-full"
+                      }
+                      style={{
+                        aspectRatio: getCameraAspect(cam),
+                      }}
+                    >
+                      <PreviewPlayer
+                        className="size-full"
+                        camera={cam}
+                        timeRange={currentTimeRange}
+                        cameraPreviews={allPreviews ?? []}
+                        startTime={startTime}
+                        isScrubbing={scrubbing}
+                        onControllerReady={(controller) => {
+                          previewRefs.current[cam] = controller;
+                          controller.scrubToTimestamp(startTime);
+                        }}
+                        onClick={() => onSelectCamera(cam)}
+                      />
+                    </div>
+                  );
                })}
              </div>
            )}
@@ -406,7 +442,7 @@ type TimelineProps = {
  contentRef: MutableRefObject<HTMLDivElement | null>;
  mainCamera: string;
  timelineType: TimelineType;
-  timeRange: { start: number; end: number };
+  timeRange: TimeRange;
  mainCameraReviewItems: ReviewSegment[];
  currentTime: number;
  exportRange?: TimeRange;
@@ -429,8 +465,8 @@ function Timeline({
  const { data: motionData } = useSWR<MotionData[]>([
    "review/activity/motion",
    {
-      before: timeRange.end,
-      after: timeRange.start,
+      before: timeRange.before,
+      after: timeRange.after,
      scale: SEGMENT_DURATION / 2,
      cameras: mainCamera,
    },
@@ -455,7 +491,7 @@ function Timeline({
    <div
      className={`${
        isDesktop
-          ? `${timelineType == "timeline" ? "w-[100px]" : "w-60"} mt-2 overflow-y-auto no-scrollbar`
+          ? `${timelineType == "timeline" ? "w-[100px]" : "w-60"} overflow-y-auto no-scrollbar`
          : "flex-grow overflow-hidden"
      } relative`}
    >
@@ -465,8 +501,8 @@ function Timeline({
        <MotionReviewTimeline
          segmentDuration={30}
          timestampSpread={15}
-          timelineStart={timeRange.end}
-          timelineEnd={timeRange.start}
+          timelineStart={timeRange.before}
+          timelineEnd={timeRange.after}
          showHandlebar={exportRange == undefined}
          showExportHandles={exportRange != undefined}
          exportStartTime={exportRange?.after}
@@ -496,7 +532,11 @@ function Timeline({
                key={review.id}
                event={review}
                currentTime={currentTime}
-                onClick={() => setCurrentTime(review.start_time)}
+                onClick={() => {
+                  setScrubbing(true);
+                  setCurrentTime(review.start_time);
+                  setScrubbing(false);
+                }}
              />
            );
          })}
--- a/web/src/views/live/LiveBirdseyeView.tsx
+++ b/web/src/views/live/LiveBirdseyeView.tsx
@@ -116,7 +116,7 @@ export default function LiveBirdseyeView() {
        className={
          fullscreen
            ? `fixed inset-0 bg-black z-30`
-            : `size-full flex flex-col ${isMobile ? "landscape:flex-row" : ""}`
+            : `size-full p-2 flex flex-col ${isMobile ? "landscape:flex-row" : ""}`
        }
      >
        <div
@@ -128,11 +128,11 @@ export default function LiveBirdseyeView() {
        >
          {!fullscreen ? (
            <Button
-              className={`rounded-lg ${isMobile ? "ml-2" : "ml-0"}`}
-              size={isMobile ? "icon" : "default"}
+              className={`rounded-lg flex items-center gap-2 ${isMobile ? "ml-2" : "ml-0"}`}
+              size={isMobile ? "icon" : "sm"}
              onClick={() => navigate(-1)}
            >
-              <IoMdArrowBack className="size-5 lg:mr-[10px]" />
+              <IoMdArrowBack className="size-5" />
              {isDesktop && "Back"}
            </Button>
          ) : (
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -204,7 +204,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
        className={
          fullscreen
            ? `fixed inset-0 bg-black z-30`
-            : `size-full flex flex-col ${isMobile ? "landscape:flex-row" : ""}`
+            : `size-full p-2 flex flex-col ${isMobile ? "landscape:flex-row" : ""}`
        }
      >
        <div
@@ -217,7 +217,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
          {!fullscreen ? (
            <Button
              className={`rounded-lg ${isMobile ? "ml-2" : "ml-0"}`}
-              size={isMobile ? "icon" : "default"}
+              size={isMobile ? "icon" : "sm"}
              onClick={() => navigate(-1)}
            >
              <IoMdArrowBack className="size-5 lg:mr-[10px]" />
@@ -228,7 +228,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
          )}
          <TooltipProvider>
            <div
-              className={`flex flex-row items-center gap-2 mr-1 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`}
+              className={`flex flex-row items-center gap-2 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`}
            >
              {!isIOS && (
                <CameraFeatureToggle
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -129,9 +129,9 @@ export default function LiveDashboardView({
  const birdseyeConfig = useMemo(() => config?.birdseye, [config]);

  return (
-    <div className="size-full overflow-y-auto">
+    <div className="size-full p-2 overflow-y-auto">
      {isMobile && (
-        <div className="h-11 px-2 relative flex items-center justify-between">
+        <div className="h-11 relative flex items-center justify-between">
          <Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
          <CameraGroupSelector />
          <div className="flex items-center gap-1">
@@ -164,7 +164,7 @@ export default function LiveDashboardView({
      {events && events.length > 0 && (
        <ScrollArea>
          <TooltipProvider>
-            <div className="flex gap-2 items-center">
+            <div className="px-1 flex gap-2 items-center">
              {events.map((event) => {
                return <AnimatedEventCard key={event.id} event={event} />;
              })}