From 5b55b0ae4a771dea7b7fa56c8fda083a6e32ccb2 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 11 Sep 2024 12:06:15 -0500
Subject: [PATCH] remove unnecessary bits from search thumbnail

---
 web/src/components/card/SearchThumbnail.tsx | 69 ++-------------------
 web/src/views/search/SearchView.tsx         |  1 -
 2 files changed, 6 insertions(+), 64 deletions(-)

diff --git a/web/src/components/card/SearchThumbnail.tsx b/web/src/components/card/SearchThumbnail.tsx
index 5ce653a4c..1e2317526 100644
--- a/web/src/components/card/SearchThumbnail.tsx
+++ b/web/src/components/card/SearchThumbnail.tsx
@@ -1,14 +1,13 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback } 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 { isIOS, 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";
@@ -19,14 +18,12 @@ 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) {
@@ -34,59 +31,15 @@ export default function SearchThumbnail({
   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);
-      }
+      onClick(searchResult, e.metaKey);
     },
-    [searchResult, showingMoreDetail, onClick],
+    [searchResult, 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(
@@ -95,13 +48,7 @@ export default function SearchThumbnail({
   );
 
   return (
-    <div
-      className="relative size-full cursor-pointer"
-      onMouseOver={isMobile ? undefined : () => setIsHovered(true)}
-      onMouseLeave={isMobile ? undefined : () => setIsHovered(false)}
-      onClick={handleOnClick}
-      {...swipeHandlers}
-    >
+    <div className="relative size-full cursor-pointer" onClick={handleOnClick}>
       <ImageLoadingIndicator
         className="absolute inset-0"
         imgLoaded={imgLoaded}
@@ -131,11 +78,7 @@ export default function SearchThumbnail({
 
         <div className="absolute left-0 top-2 z-40">
           <Tooltip>
-            <div
-              className="flex"
-              onMouseEnter={() => setTooltipHovering(true)}
-              onMouseLeave={() => setTooltipHovering(false)}
-            >
+            <div className="flex">
               <TooltipTrigger asChild>
                 <div className="mx-3 pb-1 text-sm text-white">
                   {
diff --git a/web/src/views/search/SearchView.tsx b/web/src/views/search/SearchView.tsx
index 1997e0430..a754037b6 100644
--- a/web/src/views/search/SearchView.tsx
+++ b/web/src/views/search/SearchView.tsx
@@ -181,7 +181,6 @@ export default function SearchView({
                     >
                       <SearchThumbnail
                         searchResult={value}
-                        scrollLock={false}
                         findSimilar={() => setSimilaritySearch(value)}
                         onClick={() => {
                           onSelectSearch(value, true);