Refactor search details into Explore Page (#13665)

2024-09-11 08:41:16 -06:00
parent e016bd6900
commit 3972642ba0
18 changed files with 1075 additions and 713 deletions
--- a/web/src/components/card/SearchThumbnail.tsx
+++ b/web/src/components/card/SearchThumbnail.tsx
@@ -0,0 +1,185 @@
+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";
+
+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, findSimilar);
+
+  // 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 (
+    <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>
+    </div>
+  );
+}