From 1b73917ba3da9a1d1c8f09e8aedb23eaa85da6c0 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 26 Mar 2024 10:13:14 -0600
Subject: [PATCH] Fix loading of images

---
 web/src/components/card/ReviewCard.tsx        | 13 ++++++++--
 .../indicators/ImageLoadingIndicator.tsx      | 20 ++++++++++++++++
 .../player/PreviewThumbnailPlayer.tsx         | 19 ++++-----------
 web/src/views/events/RecordingView.tsx        | 24 ++++++++++++-------
 4 files changed, 51 insertions(+), 25 deletions(-)
 create mode 100644 web/src/components/indicators/ImageLoadingIndicator.tsx

diff --git a/web/src/components/card/ReviewCard.tsx b/web/src/components/card/ReviewCard.tsx
index 546409538..1b0922d33 100644
--- a/web/src/components/card/ReviewCard.tsx
+++ b/web/src/components/card/ReviewCard.tsx
@@ -7,6 +7,8 @@ import { isSafari } from "react-device-detect";
 import useSWR from "swr";
 import TimeAgo from "../dynamic/TimeAgo";
 import { useMemo } from "react";
+import useImageLoaded from "@/hooks/use-image-loaded";
+import ImageLoadingIndicator from "../indicators/ImageLoadingIndicator";
 
 type ReviewCardProps = {
   event: ReviewSegment;
@@ -19,6 +21,7 @@ export default function ReviewCard({
   onClick,
 }: ReviewCardProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
+  const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
   const formattedDate = useFormattedTimestamp(
     event.start_time,
     config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p",
@@ -28,17 +31,23 @@ export default function ReviewCard({
     [event, currentTime],
   );
 
+  if (event.data.objects.includes("car")) {
+    //console.log(`failed to load ${JSON.stringify(event)}`);
+  }
+
   return (
     <div
       className="w-full flex flex-col gap-1.5 cursor-pointer"
       onClick={onClick}
     >
+      <ImageLoadingIndicator className="size-full" imgLoaded={imgLoaded} />
       <img
-        className={`size-full rounded-lg ${isSelected ? "outline outline-3 outline-offset-1 outline-selected" : ""}`}
+        ref={imgRef}
+        className={`size-full rounded-lg ${isSelected ? "outline outline-3 outline-offset-1 outline-selected" : ""} ${imgLoaded ? "visible" : "invisible"}`}
         src={`${baseUrl}${event.thumb_path.replace("/media/frigate/", "")}`}
         loading={isSafari ? "eager" : "lazy"}
         onLoad={() => {
-          //onImgLoad();
+          onImgLoad();
         }}
       />
       <div className="flex justify-between items-center">
diff --git a/web/src/components/indicators/ImageLoadingIndicator.tsx b/web/src/components/indicators/ImageLoadingIndicator.tsx
new file mode 100644
index 000000000..32531ea2b
--- /dev/null
+++ b/web/src/components/indicators/ImageLoadingIndicator.tsx
@@ -0,0 +1,20 @@
+import { isSafari } from "react-device-detect";
+import { Skeleton } from "../ui/skeleton";
+
+export default function ImageLoadingIndicator({
+  className,
+  imgLoaded,
+}: {
+  className?: string;
+  imgLoaded: boolean;
+}) {
+  if (imgLoaded) {
+    return;
+  }
+
+  return isSafari ? (
+    <div className={`bg-gray-300 pointer-events-none ${className ?? ""}`} />
+  ) : (
+    <Skeleton className={`pointer-events-none ${className ?? ""}`} />
+  );
+}
diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
index 3c11d79c0..95b6bd6b2 100644
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@@ -17,9 +17,9 @@ import { isFirefox, isMobile, isSafari } from "react-device-detect";
 import Chip from "@/components/indicators/Chip";
 import { useFormattedTimestamp } from "@/hooks/use-date-utils";
 import useImageLoaded from "@/hooks/use-image-loaded";
-import { Skeleton } from "../ui/skeleton";
 import { useSwipeable } from "react-swipeable";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import ImageLoadingIndicator from "../indicators/ImageLoadingIndicator";
 
 type PreviewPlayerProps = {
   review: ReviewSegment;
@@ -187,7 +187,10 @@ export default function PreviewThumbnailPlayer({
           />
         </div>
       )}
-      <PreviewPlaceholder imgLoaded={imgLoaded} />
+      <ImageLoadingIndicator
+        className="absolute inset-0"
+        imgLoaded={imgLoaded}
+      />
       <div className={`${imgLoaded ? "visible" : "invisible"}`}>
         <img
           ref={imgRef}
@@ -700,15 +703,3 @@ function InProgressPreview({
     </div>
   );
 }
-
-function PreviewPlaceholder({ imgLoaded }: { imgLoaded: boolean }) {
-  if (imgLoaded) {
-    return;
-  }
-
-  return isSafari ? (
-    <div className={`absolute inset-0 bg-gray-300 pointer-events-none`} />
-  ) : (
-    <Skeleton className={`absolute inset-0 pointer-events-none`} />
-  );
-}
diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index 4f023231f..b7479f3f7 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -277,7 +277,7 @@ export function RecordingView({
       </div>
 
       <div
-        className={`flex h-full justify-center overflow-hidden ${isDesktop ? "" : "flex-col"}`}
+        className={`flex h-full mb-2 justify-center overflow-hidden ${isDesktop ? "" : "flex-col"}`}
       >
         <div className="flex flex-1 flex-wrap">
           <div
@@ -418,14 +418,20 @@ function Timeline({
 
   return (
     <div className="w-60 h-full p-4 flex flex-col gap-4 bg-secondary overflow-auto">
-      {mainCameraReviewItems.map((review) => (
-        <ReviewCard
-          key={review.id}
-          event={review}
-          currentTime={currentTime}
-          onClick={() => setCurrentTime(review.start_time)}
-        />
-      ))}
+      {mainCameraReviewItems.map((review) => {
+        if (review.severity == "significant_motion") {
+          return;
+        }
+
+        return (
+          <ReviewCard
+            key={review.id}
+            event={review}
+            currentTime={currentTime}
+            onClick={() => setCurrentTime(review.start_time)}
+          />
+        );
+      })}
     </div>
   );
 }