context menu for explore summary thumbnail images

web/src/views/explore/ExploreView.tsx

@@ -18,15 +18,22 @@ import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { useEventUpdate } from "@/api/ws";
 import { isEqual } from "lodash";
 import TimeAgo from "@/components/dynamic/TimeAgo";
+import SearchResultActions from "@/components/menu/SearchResultActions";
+import { SearchTab } from "@/components/overlay/detail/SearchDetailDialog";
+import { FrigateConfig } from "@/types/frigateConfig";
 
 type ExploreViewProps = {
   searchDetail: SearchResult | undefined;
   setSearchDetail: (search: SearchResult | undefined) => void;
+  setSimilaritySearch: (search: SearchResult) => void;
+  onSelectSearch: (item: SearchResult, index: number, page?: SearchTab) => void;
 };
 
 export default function ExploreView({
   searchDetail,
   setSearchDetail,
+  setSimilaritySearch,
+  onSelectSearch,
 }: ExploreViewProps) {
   // title
 
@@ -102,6 +109,9 @@ export default function ExploreView({
           isValidating={isValidating}
           objectType={label}
           setSearchDetail={setSearchDetail}
+          mutate={mutate}
+          setSimilaritySearch={setSimilaritySearch}
+          onSelectSearch={onSelectSearch}
         />
       ))}
     </div>
@@ -113,6 +123,9 @@ type ThumbnailRowType = {
   searchResults?: SearchResult[];
   isValidating: boolean;
   setSearchDetail: (search: SearchResult | undefined) => void;
+  mutate: () => void;
+  setSimilaritySearch: (search: SearchResult) => void;
+  onSelectSearch: (item: SearchResult, index: number, page?: SearchTab) => void;
 };
 
 function ThumbnailRow({
@@ -120,6 +133,9 @@ function ThumbnailRow({
   searchResults,
   isValidating,
   setSearchDetail,
+  mutate,
+  setSimilaritySearch,
+  onSelectSearch,
 }: ThumbnailRowType) {
   const navigate = useNavigate();
 
@@ -155,6 +171,9 @@ function ThumbnailRow({
             <ExploreThumbnailImage
               event={event}
               setSearchDetail={setSearchDetail}
+              mutate={mutate}
+              setSimilaritySearch={setSimilaritySearch}
+              onSelectSearch={onSelectSearch}
             />
           </div>
         ))}
@@ -184,25 +203,49 @@ function ThumbnailRow({
 type ExploreThumbnailImageProps = {
   event: SearchResult;
   setSearchDetail: (search: SearchResult | undefined) => void;
+  mutate: () => void;
+  setSimilaritySearch: (search: SearchResult) => void;
+  onSelectSearch: (item: SearchResult, index: number, page?: SearchTab) => void;
 };
 function ExploreThumbnailImage({
   event,
   setSearchDetail,
+  mutate,
+  setSimilaritySearch,
+  onSelectSearch,
 }: ExploreThumbnailImageProps) {
   const apiHost = useApiHost();
+  const { data: config } = useSWR<FrigateConfig>("config");
   const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
 
+  const handleFindSimilar = () => {
+    if (config?.semantic_search.enabled) {
+      setSimilaritySearch(event);
+    }
+  };
+
+  const handleShowObjectLifecycle = () => {
+    onSelectSearch(event, 0, "object lifecycle");
+  };
+
   return (
-    <>
+    <SearchResultActions
+      searchResult={event}
+      findSimilar={handleFindSimilar}
+      refreshResults={mutate}
+      showObjectLifecycle={handleShowObjectLifecycle}
+      isContextMenu={true}
+    >
+      <div className="relative size-full">
         <ImageLoadingIndicator
           className="absolute inset-0"
           imgLoaded={imgLoaded}
         />
-
         <img
           ref={imgRef}
           className={cn(
-          "absolute h-full w-full cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out lg:rounded-2xl",
+            "absolute size-full cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out lg:rounded-2xl",
+            !imgLoaded && "invisible",
           )}
           style={
             isIOS
@@ -216,9 +259,8 @@ function ExploreThumbnailImage({
           draggable={false}
           src={`${apiHost}api/events/${event.id}/thumbnail.jpg`}
           onClick={() => setSearchDetail(event)}
-        onLoad={() => {
+          onLoad={onImgLoad}
-          onImgLoad();
+          alt={`${event.label} thumbnail`}
-        }}
         />
         {isDesktop && (
           <div className="absolute bottom-1 right-1 z-10 rounded-lg bg-black/50 px-2 py-1 text-xs text-white">
@@ -231,7 +273,8 @@ function ExploreThumbnailImage({
             )}
           </div>
         )}
-    </>
+      </div>
+    </SearchResultActions>
   );
 }
 

web/src/views/search/SearchView.tsx

@@ -489,6 +489,8 @@ export default function SearchView({
             <ExploreView
               searchDetail={searchDetail}
               setSearchDetail={setSearchDetail}
+              setSimilaritySearch={setSimilaritySearch}
+              onSelectSearch={onSelectSearch}
             />
           </div>
         )}