Use chip for detections and show all the time

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -16,6 +16,7 @@ import TimeAgo from "../dynamic/TimeAgo";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { isMobile, isSafari } from "react-device-detect";
+import Chip from "../Chip";
 
 type PreviewPlayerProps = {
   review: ReviewSegment;
@@ -121,12 +122,12 @@ export default function PreviewThumbnailPlayer({
       ) : (
         <img
           className="h-full w-full"
+          loading="lazy"
           src={`${apiHost}${review.thumb_path.replace("/media/frigate/", "")}`}
         />
       )}
-      {!playingBack &&
-        (review.severity == "alert" || review.severity == "detection") && (
-          <div className="absolute top-1 left-[6px] flex gap-1">
+      {(review.severity == "alert" || review.severity == "detection") && (
+        <Chip className="absolute top-2 left-2 flex gap-1 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500">
           {review.data.objects.map((object) => {
             return getIconForLabel(object, "w-3 h-3 text-white");
           })}
@@ -136,7 +137,7 @@ export default function PreviewThumbnailPlayer({
           {review.data.sub_labels?.map((sub) => {
             return getIconForSubLabel(sub, "w-3 h-3 text-white");
           })}
-          </div>
+        </Chip>
       )}
       {!playingBack && (
         <div className="absolute left-[6px] right-[6px] bottom-1 flex justify-between text-white">
@@ -184,7 +185,6 @@ function PreviewContent({
   setProgress,
   setReviewed,
 }: PreviewContentProps) {
-
   // manual playback
   // safari is incapable of playing at a speed > 2x
   // so manual seeking is required on iOS