From 838ef636f8b6b097292faf2458d16dff170f1e8e Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 11 Mar 2024 07:05:44 -0600
Subject: [PATCH] Layout tweaks (#10365)

* Cleanup review items

* Fix spacing

* Fix -1 text

* Cleanup scroll

* Show activity indicator when review items are null

* Show no preview text when not found

* Add padding to buttons

* Simplify comparisons
---
 .../components/filter/ReviewFilterGroup.tsx   |  6 +--
 .../components/player/PreviewVideoPlayer.tsx  |  5 ++
 web/src/views/events/EventView.tsx            | 47 +++++++++++++------
 web/src/views/events/RecordingView.tsx        |  2 +-
 4 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx
index 2a2229ec9..0ebb00a20 100644
--- a/web/src/components/filter/ReviewFilterGroup.tsx
+++ b/web/src/components/filter/ReviewFilterGroup.tsx
@@ -212,7 +212,7 @@ function CamerasFilterButton({
         ))}
       </div>
       <DropdownMenuSeparator />
-      <div className="flex justify-evenly items-center">
+      <div className="p-2 flex justify-evenly items-center">
         <Button
           variant="select"
           onClick={() => {
@@ -312,7 +312,7 @@ function CalendarFilterButton({
         }}
       />
       <DropdownMenuSeparator />
-      <div className="flex justify-center items-center">
+      <div className="p-2 flex justify-center items-center">
         <Button
           variant="secondary"
           onClick={() => {
@@ -421,7 +421,7 @@ function GeneralFilterButton({
         ))}
       </div>
       <DropdownMenuSeparator />
-      <div className="flex justify-evenly items-center">
+      <div className="p-2 flex justify-evenly items-center">
         <Button
           variant="select"
           onClick={() => {
diff --git a/web/src/components/player/PreviewVideoPlayer.tsx b/web/src/components/player/PreviewVideoPlayer.tsx
index 5d68f0d02..07b7cbf6f 100644
--- a/web/src/components/player/PreviewVideoPlayer.tsx
+++ b/web/src/components/player/PreviewVideoPlayer.tsx
@@ -140,6 +140,11 @@ export default function PreviewVideoPlayer({
           <source src={currentPreview.src} type={currentPreview.type} />
         )}
       </video>
+      {cameraPreviews && !currentPreview && (
+        <div className="absolute inset-x-0 top-1/2 -y-translate-1/2 bg-black text-white rounded-2xl align-center text-center">
+          No Preview Found
+        </div>
+      )}
     </div>
   );
 }
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 24cf7aa84..eaae92a0f 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -85,7 +85,7 @@ export default function EventView({
     }
 
     if (!summary) {
-      return { alert: 0, detection: 0, significant_motion: 0 };
+      return { alert: -1, detection: -1, significant_motion: -1 };
     }
 
     if (filter?.showReviewed == 1) {
@@ -106,6 +106,10 @@ export default function EventView({
   // review paging
 
   const reviewItems = useMemo(() => {
+    if (!reviews) {
+      return undefined;
+    }
+
     const all: ReviewSegment[] = [];
     const alerts: ReviewSegment[] = [];
     const detections: ReviewSegment[] = [];
@@ -167,7 +171,7 @@ export default function EventView({
 
   const exportReview = useCallback(
     (id: string) => {
-      const review = reviewItems.all?.find((seg) => seg.id == id);
+      const review = reviewItems?.all?.find((seg) => seg.id == id);
 
       if (!review) {
         return;
@@ -206,7 +210,9 @@ export default function EventView({
             aria-label="Select alerts"
           >
             <MdCircle className="size-2 md:mr-[10px] text-severity_alert" />
-            <div className="hidden md:block">Alerts ∙ {reviewCounts.alert}</div>
+            <div className="hidden md:block">
+              Alerts{` ∙ ${reviewCounts.alert > -1 ? reviewCounts.alert : ""}`}
+            </div>
           </ToggleGroupItem>
           <ToggleGroupItem
             className={`${severity == "detection" ? "" : "text-gray-500"}`}
@@ -215,7 +221,8 @@ export default function EventView({
           >
             <MdCircle className="size-2 md:mr-[10px] text-severity_detection" />
             <div className="hidden md:block">
-              Detections ∙ {reviewCounts.detection}
+              Detections
+              {` ∙ ${reviewCounts.detection > -1 ? reviewCounts.detection : ""}`}
             </div>
           </ToggleGroupItem>
           <ToggleGroupItem
@@ -277,7 +284,7 @@ export default function EventView({
 
 type DetectionReviewProps = {
   contentRef: MutableRefObject<HTMLDivElement | null>;
-  reviewItems: {
+  reviewItems?: {
     all: ReviewSegment[];
     alert: ReviewSegment[];
     detection: ReviewSegment[];
@@ -310,10 +317,14 @@ function DetectionReview({
 
   // review data
   const currentItems = useMemo(() => {
+    if (!reviewItems) {
+      return null;
+    }
+
     const current = reviewItems[severity];
 
     if (!current || current.length == 0) {
-      return null;
+      return [];
     }
 
     if (filter?.showReviewed != 1) {
@@ -323,7 +334,7 @@ function DetectionReview({
     }
     // only refresh when severity or filter changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [severity, filter, reviewItems.all.length]);
+  }, [severity, filter, reviewItems?.all.length]);
 
   // preview
 
@@ -348,7 +359,7 @@ function DetectionReview({
   // timeline interaction
 
   const { alignStartDateToTimeline } = useEventUtils(
-    reviewItems.all,
+    reviewItems?.all ?? [],
     segmentDuration,
   );
 
@@ -441,10 +452,16 @@ function DetectionReview({
           />
         )}
 
-        {itemsToReview == 0 && (
-          <div className="size-full flex flex-col justify-center items-center">
+        {!currentItems && (
+          <div className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2">
+            <ActivityIndicator />
+          </div>
+        )}
+
+        {currentItems?.length === 0 && (
+          <div className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 flex flex-col justify-center items-center text-center">
             <LuFolderCheck className="size-16" />
-            There are no {severity.replace(/_/g, " ")} items to review
+            There are no {severity.replace(/_/g, " ")}s to review
           </div>
         )}
 
@@ -479,7 +496,7 @@ function DetectionReview({
                 </div>
               );
             })}
-          {(itemsToReview ?? 0) > 0 && (
+          {(currentItems?.length ?? 0) > 0 && (itemsToReview ?? 0) > 0 && (
             <div className="col-span-full flex justify-center items-center">
               <Button
                 className="text-white"
@@ -503,7 +520,7 @@ function DetectionReview({
           minimapEndTime={minimapBounds.end}
           showHandlebar={previewTime != undefined}
           handlebarTime={previewTime}
-          events={reviewItems.all}
+          events={reviewItems?.all ?? []}
           severityType={severity}
           contentRef={contentRef}
         />
@@ -514,7 +531,7 @@ function DetectionReview({
 
 type MotionReviewProps = {
   contentRef: MutableRefObject<HTMLDivElement | null>;
-  reviewItems: {
+  reviewItems?: {
     all: ReviewSegment[];
     alert: ReviewSegment[];
     detection: ReviewSegment[];
@@ -680,7 +697,7 @@ function MotionReview({
           showHandlebar
           handlebarTime={currentTime}
           setHandlebarTime={setCurrentTime}
-          events={reviewItems.all}
+          events={reviewItems?.all ?? []}
           motion_events={motionData ?? []}
           severityType="significant_motion"
           contentRef={contentRef}
diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index 737caec82..857c5de04 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -366,7 +366,7 @@ export function MobileRecordingView({
 
   return (
     <div ref={contentRef} className="flex flex-col relative w-full h-full">
-      <div className="flex justify-evenly items-center">
+      <div className="flex justify-evenly items-center p-2">
         <Button className="rounded-lg" onClick={() => navigate(-1)}>
           <IoMdArrowRoundBack className="size-5 mr-[10px]" />
           Back