Show icons for what was detected

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -183,6 +183,13 @@ function PreviewContent({
 
   if (relevantPreview && !isVisible) {
     return <div />;
+  } else if (!relevantPreview && isCurrentHour(startTs)) {
+    return (
+      <img
+        className="w-full"
+        src={`${apiHost}api/preview/${camera}/${startTs}/thumbnail.jpg`}
+      />
+    );
   } else if (!relevantPreview && !isCurrentHour(startTs)) {
     return (
       <img
@@ -200,9 +207,6 @@ function PreviewContent({
           muted: true,
           fluid: true,
           loadingSpinner: false,
-          poster: relevantPreview
-            ? ""
-            : `${apiHost}api/preview/${camera}/${startTs}/thumbnail.jpg`,
           sources: relevantPreview
             ? [
                 {

web/src/pages/Events.tsx

@@ -6,6 +6,7 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { ReviewSegment, ReviewSeverity } from "@/types/review";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
+import { getIconForLabel } from "@/utils/iconUtil";
 import axios from "axios";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { LuCalendar, LuFilter, LuVideo } from "react-icons/lu";
@@ -13,7 +14,7 @@ import { MdCircle } from "react-icons/md";
 import useSWR from "swr";
 import useSWRInfinite from "swr/infinite";
 
-const API_LIMIT = 12;
+const API_LIMIT = 20;
 
 export default function Events() {
   const { data: config } = useSWR<FrigateConfig>("config");
@@ -83,7 +84,11 @@ export default function Events() {
   // preview videos
 
   const previewTimes = useMemo(() => {
-    if (!reviewPages) {
+    if (
+      !reviewPages ||
+      reviewPages.length == 0 ||
+      reviewPages.at(-1)!!.length == 0
+    ) {
       return undefined;
     }
 
@@ -178,26 +183,26 @@ export default function Events() {
             );
 
             return (
-              <>
+              <div key={value.id}>
                 <div
                   ref={lastRow ? lastReviewRef : null}
-                  key={value.id}
                   className="relative h-[234px] rounded-2xl overflow-hidden"
                   style={{
                     aspectRatio: detectConfig.width / detectConfig.height,
                   }}
                 >
-                  {relevantPreview ? (
-                    <PreviewThumbnailPlayer
-                      relevantPreview={relevantPreview}
-                      camera={value.camera}
-                      startTs={value.start_time}
-                      isMobile={false}
-                      eventId=""
-                    />
-                  ) : (
-                    <div>
-                      {value.camera} {value.data.objects}
+                  <PreviewThumbnailPlayer
+                    relevantPreview={relevantPreview}
+                    camera={value.camera}
+                    startTs={value.start_time}
+                    isMobile={false}
+                    eventId=""
+                  />
+                  {(severity == "alert" || severity == "detection") && (
+                    <div className="absolute top-1 right-1 flex">
+                      {value.data.objects.map((object) => {
+                        return getIconForLabel(object);
+                      })}
                     </div>
                   )}
                   <div className="absolute left-1 right-1 bottom-1 flex justify-between">
@@ -211,7 +216,7 @@ export default function Events() {
                   </div>
                 </div>
                 {lastRow && !isDone && <ActivityIndicator />}
-              </>
+              </div>
             );
           });
         })}

web/src/utils/iconUtil.tsx

@@ -0,0 +1,22 @@
+import {
+  LuBox,
+  LuCar,
+  LuDog,
+  LuLassoSelect,
+  LuPersonStanding,
+} from "react-icons/lu";
+
+export function getIconForLabel(label: string, className?: string) {
+  switch (label) {
+    case "car":
+      return <LuCar className={className} />;
+    case "dog":
+      return <LuDog className={className} />;
+    case "package":
+      return <LuBox className={className} />;
+    case "person":
+      return <LuPersonStanding className={className} />;
+    default:
+      return <LuLassoSelect className={className} />;
+  }
+}