From 7bc4c493d9b436385d046a81600aa0777b24cb36 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 10 Sep 2024 14:47:22 -0600
Subject: [PATCH] Refactor search hovering to give information

---
 web/src/components/card/SearchThumbnail.tsx   | 302 +++++++++++++++++
 .../player/SearchThumbnailPlayer.tsx          | 308 ------------------
 web/src/views/search/SearchView.tsx           |   6 +-
 3 files changed, 305 insertions(+), 311 deletions(-)
 create mode 100644 web/src/components/card/SearchThumbnail.tsx
 delete mode 100644 web/src/components/player/SearchThumbnailPlayer.tsx

diff --git a/web/src/components/card/SearchThumbnail.tsx b/web/src/components/card/SearchThumbnail.tsx
new file mode 100644
index 000000000..58efd4737
--- /dev/null
+++ b/web/src/components/card/SearchThumbnail.tsx
@@ -0,0 +1,302 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useApiHost } from "@/api";
+import { getIconForLabel } from "@/utils/iconUtil";
+import TimeAgo from "../dynamic/TimeAgo";
+import useSWR from "swr";
+import { FrigateConfig } from "@/types/frigateConfig";
+import { isIOS, 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 { useSwipeable } from "react-swipeable";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import ImageLoadingIndicator from "../indicators/ImageLoadingIndicator";
+import ActivityIndicator from "../indicators/activity-indicator";
+import { capitalizeFirstLetter } from "@/utils/stringUtil";
+import { SearchResult } from "@/types/search";
+import useContextMenu from "@/hooks/use-contextmenu";
+import { cn } from "@/lib/utils";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { Button } from "../ui/button";
+
+type SearchThumbnailProps = {
+  searchResult: SearchResult;
+  scrollLock?: boolean;
+  findSimilar: () => void;
+  onClick: (searchResult: SearchResult, detail: boolean) => void;
+};
+
+export default function SearchThumbnail({
+  searchResult,
+  scrollLock = false,
+  findSimilar,
+  onClick,
+}: SearchThumbnailProps) {
+  const apiHost = useApiHost();
+  const { data: config } = useSWR<FrigateConfig>("config");
+  const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
+
+  // interaction
+
+  const swipeHandlers = useSwipeable({
+    onSwipedLeft: () => setDetails(false),
+    onSwipedRight: () => setDetails(true),
+    preventScrollOnSwipe: true,
+  });
+
+  useContextMenu(imgRef, () => {
+    onClick(searchResult, true);
+  });
+
+  // Hover Details
+
+  const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout | null>();
+  const [details, setDetails] = useState(false);
+  const [tooltipHovering, setTooltipHovering] = useState(false);
+  const showingMoreDetail = useMemo(
+    () => details && !tooltipHovering,
+    [details, tooltipHovering],
+  );
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleOnClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!showingMoreDetail) {
+        onClick(searchResult, e.metaKey);
+      }
+    },
+    [searchResult, showingMoreDetail, onClick],
+  );
+
+  useEffect(() => {
+    if (isHovered && scrollLock) {
+      return;
+    }
+
+    if (isHovered && !tooltipHovering) {
+      setHoverTimeout(
+        setTimeout(() => {
+          setDetails(true);
+          setHoverTimeout(null);
+        }, 500),
+      );
+    } else {
+      if (hoverTimeout) {
+        clearTimeout(hoverTimeout);
+      }
+
+      setDetails(false);
+    }
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isHovered, scrollLock, tooltipHovering]);
+
+  // date
+
+  const formattedDate = useFormattedTimestamp(
+    searchResult.start_time,
+    config?.ui.time_format == "24hour" ? "%b %-d, %H:%M" : "%b %-d, %I:%M %p",
+  );
+
+  return (
+    <Popover
+      open={showingMoreDetail}
+      onOpenChange={(open) => {
+        if (!open) {
+          setDetails(false);
+        }
+      }}
+    >
+      <PopoverTrigger asChild>
+        <div
+          className="relative size-full cursor-pointer"
+          onMouseOver={isMobile ? undefined : () => setIsHovered(true)}
+          onMouseLeave={isMobile ? undefined : () => setIsHovered(false)}
+          onClick={handleOnClick}
+          {...swipeHandlers}
+        >
+          <ImageLoadingIndicator
+            className="absolute inset-0"
+            imgLoaded={imgLoaded}
+          />
+          <div className={`${imgLoaded ? "visible" : "invisible"}`}>
+            <img
+              ref={imgRef}
+              className={cn(
+                "size-full select-none opacity-100 transition-opacity",
+                searchResult.search_source == "thumbnail" && "object-contain",
+              )}
+              style={
+                isIOS
+                  ? {
+                      WebkitUserSelect: "none",
+                      WebkitTouchCallout: "none",
+                    }
+                  : undefined
+              }
+              draggable={false}
+              src={`${apiHost}api/events/${searchResult.id}/thumbnail.jpg`}
+              loading={isSafari ? "eager" : "lazy"}
+              onLoad={() => {
+                onImgLoad();
+              }}
+            />
+
+            <div className="absolute left-0 top-2 z-40">
+              <Tooltip>
+                <div
+                  className="flex"
+                  onMouseEnter={() => setTooltipHovering(true)}
+                  onMouseLeave={() => setTooltipHovering(false)}
+                >
+                  <TooltipTrigger asChild>
+                    <div className="mx-3 pb-1 text-sm text-white">
+                      {
+                        <>
+                          <Chip
+                            className={`z-0 flex items-start justify-between space-x-1 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500`}
+                            onClick={() => onClick(searchResult, true)}
+                          >
+                            {getIconForLabel(
+                              searchResult.label,
+                              "size-3 text-white",
+                            )}
+                          </Chip>
+                        </>
+                      }
+                    </div>
+                  </TooltipTrigger>
+                </div>
+                <TooltipContent className="capitalize">
+                  {[...new Set([searchResult.label])]
+                    .filter(
+                      (item) =>
+                        item !== undefined && !item.includes("-verified"),
+                    )
+                    .map((text) => capitalizeFirstLetter(text))
+                    .sort()
+                    .join(", ")
+                    .replaceAll("-verified", "")}
+                </TooltipContent>
+              </Tooltip>
+            </div>
+            <div className="rounded-t-l pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full bg-gradient-to-b from-black/60 to-transparent"></div>
+            <div className="rounded-b-l pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[20%] w-full bg-gradient-to-t from-black/60 to-transparent">
+              <div className="mx-3 flex h-full items-end justify-between pb-1 text-sm text-white">
+                {searchResult.end_time ? (
+                  <TimeAgo time={searchResult.start_time * 1000} dense />
+                ) : (
+                  <div>
+                    <ActivityIndicator size={24} />
+                  </div>
+                )}
+                {formattedDate}
+              </div>
+            </div>
+          </div>
+          <PopoverContent>
+            <SearchDetails search={searchResult} findSimilar={findSimilar} />
+          </PopoverContent>
+        </div>
+      </PopoverTrigger>
+    </Popover>
+  );
+}
+
+type SearchDetailProps = {
+  search?: SearchResult;
+  findSimilar: () => void;
+};
+function SearchDetails({ search, findSimilar }: SearchDetailProps) {
+  const { data: config } = useSWR<FrigateConfig>("config", {
+    revalidateOnFocus: false,
+  });
+
+  const apiHost = useApiHost();
+
+  // data
+
+  const formattedDate = useFormattedTimestamp(
+    search?.start_time ?? 0,
+    config?.ui.time_format == "24hour"
+      ? "%b %-d %Y, %H:%M"
+      : "%b %-d %Y, %I:%M %p",
+  );
+
+  const score = useMemo(() => {
+    if (!search) {
+      return 0;
+    }
+
+    const value = search.score ?? search.data.top_score;
+
+    return Math.round(value * 100);
+  }, [search]);
+
+  const subLabelScore = useMemo(() => {
+    if (!search) {
+      return undefined;
+    }
+
+    if (search.sub_label) {
+      return Math.round((search.data?.top_score ?? 0) * 100);
+    } else {
+      return undefined;
+    }
+  }, [search]);
+
+  if (!search) {
+    return;
+  }
+
+  return (
+    <div className="mt-3 flex size-full flex-col gap-5 md:mt-0">
+      <div className="flex w-full flex-row">
+        <div className="flex w-full flex-col gap-3">
+          <div className="flex flex-col gap-1.5">
+            <div className="text-sm text-primary/40">Label</div>
+            <div className="flex flex-row items-center gap-2 text-sm capitalize">
+              {getIconForLabel(search.label, "size-4 text-primary")}
+              {search.label}
+              {search.sub_label && ` (${search.sub_label})`}
+            </div>
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <div className="text-sm text-primary/40">Score</div>
+            <div className="text-sm">
+              {score}%{subLabelScore && ` (${subLabelScore}%)`}
+            </div>
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <div className="text-sm text-primary/40">Camera</div>
+            <div className="text-sm capitalize">
+              {search.camera.replaceAll("_", " ")}
+            </div>
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <div className="text-sm text-primary/40">Timestamp</div>
+            <div className="text-sm">{formattedDate}</div>
+          </div>
+        </div>
+        <div className="flex w-full flex-col gap-2 px-6">
+          <img
+            className="aspect-video select-none rounded-lg object-contain transition-opacity"
+            style={
+              isIOS
+                ? {
+                    WebkitUserSelect: "none",
+                    WebkitTouchCallout: "none",
+                  }
+                : undefined
+            }
+            draggable={false}
+            src={`${apiHost}api/events/${search.id}/thumbnail.jpg`}
+          />
+          <Button variant="secondary" onClick={findSimilar}>
+            Find Similar
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/components/player/SearchThumbnailPlayer.tsx b/web/src/components/player/SearchThumbnailPlayer.tsx
deleted file mode 100644
index 9b54086da..000000000
--- a/web/src/components/player/SearchThumbnailPlayer.tsx
+++ /dev/null
@@ -1,308 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { useApiHost } from "@/api";
-import { isCurrentHour } from "@/utils/dateUtil";
-import { getIconForLabel } from "@/utils/iconUtil";
-import TimeAgo from "../dynamic/TimeAgo";
-import useSWR from "swr";
-import { FrigateConfig } from "@/types/frigateConfig";
-import { isIOS, 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 { useSwipeable } from "react-swipeable";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
-import ImageLoadingIndicator from "../indicators/ImageLoadingIndicator";
-import ActivityIndicator from "../indicators/activity-indicator";
-import { capitalizeFirstLetter } from "@/utils/stringUtil";
-import { InProgressPreview, VideoPreview } from "../preview/ScrubbablePreview";
-import { Preview } from "@/types/preview";
-import { SearchResult } from "@/types/search";
-import useContextMenu from "@/hooks/use-contextmenu";
-import { cn } from "@/lib/utils";
-
-type SearchPlayerProps = {
-  searchResult: SearchResult;
-  allPreviews?: Preview[];
-  scrollLock?: boolean;
-  onClick: (searchResult: SearchResult, detail: boolean) => void;
-};
-
-export default function SearchThumbnailPlayer({
-  searchResult,
-  allPreviews,
-  scrollLock = false,
-  onClick,
-}: SearchPlayerProps) {
-  const apiHost = useApiHost();
-  const { data: config } = useSWR<FrigateConfig>("config");
-  const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
-
-  // interaction
-
-  const [ignoreClick, setIgnoreClick] = useState(false);
-  const handleOnClick = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      if (!ignoreClick) {
-        onClick(searchResult, e.metaKey);
-      }
-    },
-    [ignoreClick, searchResult, onClick],
-  );
-
-  const swipeHandlers = useSwipeable({
-    onSwipedLeft: () => setPlayback(false),
-    onSwipedRight: () => setPlayback(true),
-    preventScrollOnSwipe: true,
-  });
-
-  useContextMenu(imgRef, () => {
-    onClick(searchResult, true);
-  });
-
-  // playback
-
-  const relevantPreview = useMemo(() => {
-    if (!allPreviews) {
-      return undefined;
-    }
-
-    let multiHour = false;
-    const firstIndex = Object.values(allPreviews).findIndex((preview) => {
-      if (
-        preview.camera != searchResult.camera ||
-        preview.end < searchResult.start_time
-      ) {
-        return false;
-      }
-
-      if ((searchResult.end_time ?? Date.now() / 1000) > preview.end) {
-        multiHour = true;
-      }
-
-      return true;
-    });
-
-    if (firstIndex == -1) {
-      return undefined;
-    }
-
-    if (!multiHour) {
-      return allPreviews[firstIndex];
-    }
-
-    const firstPrev = allPreviews[firstIndex];
-    const firstDuration = firstPrev.end - searchResult.start_time;
-    const secondDuration =
-      (searchResult.end_time ?? Date.now() / 1000) - firstPrev.end;
-
-    if (firstDuration > secondDuration) {
-      // the first preview is longer than the second, return the first
-      return firstPrev;
-    } else {
-      // the second preview is longer, return the second if it exists
-      if (firstIndex < allPreviews.length - 1) {
-        return allPreviews.find(
-          (preview, idx) =>
-            idx > firstIndex && preview.camera == searchResult.camera,
-        );
-      }
-
-      return undefined;
-    }
-  }, [allPreviews, searchResult]);
-
-  // Hover Playback
-
-  const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout | null>();
-  const [playback, setPlayback] = useState(false);
-  const [tooltipHovering, setTooltipHovering] = useState(false);
-  const playingBack = useMemo(
-    () => playback && !tooltipHovering,
-    [playback, tooltipHovering],
-  );
-  const [isHovered, setIsHovered] = useState(false);
-
-  useEffect(() => {
-    if (isHovered && scrollLock) {
-      return;
-    }
-
-    if (isHovered && !tooltipHovering) {
-      setHoverTimeout(
-        setTimeout(() => {
-          setPlayback(true);
-          setHoverTimeout(null);
-        }, 500),
-      );
-    } else {
-      if (hoverTimeout) {
-        clearTimeout(hoverTimeout);
-      }
-
-      setPlayback(false);
-    }
-    // we know that these deps are correct
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isHovered, scrollLock, tooltipHovering]);
-
-  // date
-
-  const formattedDate = useFormattedTimestamp(
-    searchResult.start_time,
-    config?.ui.time_format == "24hour" ? "%b %-d, %H:%M" : "%b %-d, %I:%M %p",
-  );
-
-  return (
-    <div
-      className="relative size-full cursor-pointer"
-      onMouseOver={isMobile ? undefined : () => setIsHovered(true)}
-      onMouseLeave={isMobile ? undefined : () => setIsHovered(false)}
-      onClick={handleOnClick}
-      {...swipeHandlers}
-    >
-      {playingBack && (
-        <div className="absolute inset-0 animate-in fade-in">
-          <PreviewContent
-            searchResult={searchResult}
-            relevantPreview={relevantPreview}
-            setIgnoreClick={setIgnoreClick}
-            isPlayingBack={setPlayback}
-          />
-        </div>
-      )}
-      <ImageLoadingIndicator
-        className="absolute inset-0"
-        imgLoaded={imgLoaded}
-      />
-      <div className={`${imgLoaded ? "visible" : "invisible"}`}>
-        <img
-          ref={imgRef}
-          className={cn(
-            "size-full select-none transition-opacity",
-            playingBack ? "opacity-0" : "opacity-100",
-            searchResult.search_source == "thumbnail" && "object-contain",
-          )}
-          style={
-            isIOS
-              ? {
-                  WebkitUserSelect: "none",
-                  WebkitTouchCallout: "none",
-                }
-              : undefined
-          }
-          draggable={false}
-          src={`${apiHost}api/events/${searchResult.id}/thumbnail.jpg`}
-          loading={isSafari ? "eager" : "lazy"}
-          onLoad={() => {
-            onImgLoad();
-          }}
-        />
-
-        <div className="absolute left-0 top-2 z-40">
-          <Tooltip>
-            <div
-              className="flex"
-              onMouseEnter={() => setTooltipHovering(true)}
-              onMouseLeave={() => setTooltipHovering(false)}
-            >
-              <TooltipTrigger asChild>
-                <div className="mx-3 pb-1 text-sm text-white">
-                  {
-                    <>
-                      <Chip
-                        className={`flex items-start justify-between space-x-1 ${playingBack ? "hidden" : ""} "bg-gray-500 z-0 bg-gradient-to-br from-gray-400 to-gray-500`}
-                        onClick={() => onClick(searchResult, true)}
-                      >
-                        {getIconForLabel(
-                          searchResult.label,
-                          "size-3 text-white",
-                        )}
-                      </Chip>
-                    </>
-                  }
-                </div>
-              </TooltipTrigger>
-            </div>
-            <TooltipContent className="capitalize">
-              {[...new Set([searchResult.label])]
-                .filter(
-                  (item) => item !== undefined && !item.includes("-verified"),
-                )
-                .map((text) => capitalizeFirstLetter(text))
-                .sort()
-                .join(", ")
-                .replaceAll("-verified", "")}
-            </TooltipContent>
-          </Tooltip>
-        </div>
-        {!playingBack && (
-          <>
-            <div className="rounded-t-l pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full bg-gradient-to-b from-black/60 to-transparent"></div>
-            <div className="rounded-b-l pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[20%] w-full bg-gradient-to-t from-black/60 to-transparent">
-              <div className="mx-3 flex h-full items-end justify-between pb-1 text-sm text-white">
-                {searchResult.end_time ? (
-                  <TimeAgo time={searchResult.start_time * 1000} dense />
-                ) : (
-                  <div>
-                    <ActivityIndicator size={24} />
-                  </div>
-                )}
-                {formattedDate}
-              </div>
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  );
-}
-
-type PreviewContentProps = {
-  searchResult: SearchResult;
-  relevantPreview: Preview | undefined;
-  setIgnoreClick: (ignore: boolean) => void;
-  isPlayingBack: (ended: boolean) => void;
-  onTimeUpdate?: (time: number | undefined) => void;
-};
-function PreviewContent({
-  searchResult,
-  relevantPreview,
-  setIgnoreClick,
-  isPlayingBack,
-  onTimeUpdate,
-}: PreviewContentProps) {
-  // preview
-  const now = useMemo(() => Date.now() / 1000, []);
-
-  if (relevantPreview) {
-    return (
-      <VideoPreview
-        relevantPreview={relevantPreview}
-        startTime={searchResult.start_time}
-        endTime={searchResult.end_time}
-        setIgnoreClick={setIgnoreClick}
-        isPlayingBack={isPlayingBack}
-        onTimeUpdate={onTimeUpdate}
-        windowVisible={true}
-        setReviewed={() => {}}
-      />
-    );
-  } else if (isCurrentHour(searchResult.start_time)) {
-    return (
-      <InProgressPreview
-        camera={searchResult.camera}
-        startTime={searchResult.start_time}
-        endTime={searchResult.end_time}
-        timeRange={{
-          before: now,
-          after: searchResult.start_time,
-        }}
-        setIgnoreClick={setIgnoreClick}
-        isPlayingBack={isPlayingBack}
-        onTimeUpdate={onTimeUpdate}
-        windowVisible={true}
-        setReviewed={() => {}}
-      />
-    );
-  }
-}
diff --git a/web/src/views/search/SearchView.tsx b/web/src/views/search/SearchView.tsx
index 391deceb6..44bb8e8d6 100644
--- a/web/src/views/search/SearchView.tsx
+++ b/web/src/views/search/SearchView.tsx
@@ -1,8 +1,8 @@
+import SearchThumbnail from "@/components/card/SearchThumbnail";
 import SearchFilterGroup from "@/components/filter/SearchFilterGroup";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import Chip from "@/components/indicators/Chip";
 import SearchDetailDialog from "@/components/overlay/detail/SearchDetailDialog";
-import SearchThumbnailPlayer from "@/components/player/SearchThumbnailPlayer";
 import { Input } from "@/components/ui/input";
 import { Toaster } from "@/components/ui/sonner";
 import {
@@ -184,10 +184,10 @@ export default function SearchView({
                       "aspect-square size-full overflow-hidden rounded-lg",
                     )}
                   >
-                    <SearchThumbnailPlayer
+                    <SearchThumbnail
                       searchResult={value}
-                      allPreviews={allPreviews}
                       scrollLock={false}
+                      findSimilar={() => setSimilaritySearch(value)}
                       onClick={onSelectSearch}
                     />
                     {(searchTerm || similaritySearch) && (