Explore UI tweaks (#13679)

* Loading indicators and filter bar tweaks

* remove unnecessary bits from search thumbnail

* simplify

* add video loading indicator

* clean up

web/src/components/card/SearchThumbnail.tsx

@@ -1,14 +1,13 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { 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;
+  onClick: (searchResult: SearchResult) => void;
 };
 
 export default function SearchThumbnail({
   searchResult,
-  scrollLock = false,
   findSimilar,
   onClick,
 }: SearchThumbnailProps) {
@@ -34,58 +31,11 @@ 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 handleOnClick = useCallback(() => {
-
+    onClick(searchResult);
-  const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout | null>();
+  }, [searchResult, onClick]);
-  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
 
@@ -95,13 +45,7 @@ export default function SearchThumbnail({
   );
 
   return (
-    <div
+    <div className="relative size-full cursor-pointer" onClick={handleOnClick}>
-      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}
@@ -131,18 +75,14 @@ export default function SearchThumbnail({
 
         <div className="absolute left-0 top-2 z-40">
           <Tooltip>
-            <div
+            <div className="flex">
-              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)}
+                        onClick={() => onClick(searchResult)}
                       >
                         {getIconForLabel(
                           searchResult.label,

web/src/components/overlay/detail/SearchDetailDialog.tsx

@@ -32,6 +32,7 @@ import { Event } from "@/types/event";
 import HlsVideoPlayer from "@/components/player/HlsVideoPlayer";
 import { baseUrl } from "@/api/baseUrl";
 import { cn } from "@/lib/utils";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
 
 const SEARCH_TABS = ["details", "Frigate+", "video"] as const;
 type SearchTab = (typeof SEARCH_TABS)[number];
@@ -312,11 +313,16 @@ type VideoTabProps = {
   search: SearchResult;
 };
 function VideoTab({ search }: VideoTabProps) {
+  const [isLoading, setIsLoading] = useState(true);
   const videoRef = useRef<HTMLVideoElement | null>(null);
 
   const endTime = useMemo(() => search.end_time ?? Date.now() / 1000, [search]);
 
   return (
+    <>
+      {isLoading && (
+        <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+      )}
       <HlsVideoPlayer
         videoRef={videoRef}
         currentSource={`${baseUrl}vod/${search.camera}/start/${search.start_time}/end/${endTime}/index.m3u8`}
@@ -325,6 +331,8 @@ function VideoTab({ search }: VideoTabProps) {
         frigateControls={false}
         fullscreen={false}
         supportsFullscreen={false}
+        onPlaying={() => setIsLoading(false)}
       />
+    </>
   );
 }

web/src/views/explore/ExploreView.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo } from "react";
-import { isIOS, isMobileOnly } from "react-device-detect";
+import { isIOS, isMobileOnly, isSafari } from "react-device-detect";
 import useSWR from "swr";
 import { useApiHost } from "@/api";
 import { cn } from "@/lib/utils";
@@ -12,9 +12,12 @@ import {
 } from "@/components/ui/tooltip";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { SearchResult } from "@/types/search";
+import ImageLoadingIndicator from "@/components/indicators/ImageLoadingIndicator";
+import useImageLoaded from "@/hooks/use-image-loaded";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
 
 type ExploreViewProps = {
-  onSelectSearch: (searchResult: SearchResult, detail: boolean) => void;
+  onSelectSearch: (searchResult: SearchResult) => void;
 };
 
 export default function ExploreView({ onSelectSearch }: ExploreViewProps) {
@@ -50,8 +53,14 @@ export default function ExploreView({ onSelectSearch }: ExploreViewProps) {
     }, {});
   }, [events]);
 
+  if (!events) {
     return (
-    <div className="space-y-4 overflow-x-hidden p-2">
+      <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+    );
+  }
+
+  return (
+    <div className="scrollbar-container mx-2 space-y-4 overflow-x-hidden">
       {Object.entries(eventsByLabel).map(([label, filteredEvents]) => (
         <ThumbnailRow
           key={label}
@@ -67,7 +76,7 @@ export default function ExploreView({ onSelectSearch }: ExploreViewProps) {
 type ThumbnailRowType = {
   objectType: string;
   searchResults?: SearchResult[];
-  onSelectSearch: (searchResult: SearchResult, detail: boolean) => void;
+  onSelectSearch: (searchResult: SearchResult) => void;
 };
 
 function ThumbnailRow({
@@ -75,7 +84,6 @@ function ThumbnailRow({
   searchResults,
   onSelectSearch,
 }: ThumbnailRowType) {
-  const apiHost = useApiHost();
   const navigate = useNavigate();
 
   const handleSearch = (label: string) => {
@@ -106,22 +114,9 @@ function ThumbnailRow({
             key={event.id}
             className="relative aspect-square h-auto max-w-[20%] flex-grow md:max-w-[10%]"
           >
-            <img
+            <ExploreThumbnailImage
-              className={cn(
+              event={event}
-                "absolute h-full w-full cursor-pointer rounded-lg object-cover transition-all duration-300 ease-in-out md:rounded-2xl",
+              onSelectSearch={onSelectSearch}
-              )}
-              style={
-                isIOS
-                  ? {
-                      WebkitUserSelect: "none",
-                      WebkitTouchCallout: "none",
-                    }
-                  : undefined
-              }
-              draggable={false}
-              src={`${apiHost}api/events/${event.id}/thumbnail.jpg`}
-              alt={`${objectType} snapshot`}
-              onClick={() => onSelectSearch(event, true)}
             />
           </div>
         ))}
@@ -148,6 +143,48 @@ function ThumbnailRow({
   );
 }
 
+type ExploreThumbnailImageProps = {
+  event: SearchResult;
+  onSelectSearch: (searchResult: SearchResult) => void;
+};
+function ExploreThumbnailImage({
+  event,
+  onSelectSearch,
+}: ExploreThumbnailImageProps) {
+  const apiHost = useApiHost();
+  const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
+
+  return (
+    <>
+      <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 md:rounded-2xl",
+        )}
+        style={
+          isIOS
+            ? {
+                WebkitUserSelect: "none",
+                WebkitTouchCallout: "none",
+              }
+            : undefined
+        }
+        loading={isSafari ? "eager" : "lazy"}
+        draggable={false}
+        src={`${apiHost}api/events/${event.id}/thumbnail.jpg`}
+        onClick={() => onSelectSearch(event)}
+        onLoad={() => {
+          onImgLoad();
+        }}
+      />
+    </>
+  );
+}
+
 function ExploreMoreLink({ objectType }: { objectType: string }) {
   const formattedType = objectType.replaceAll("_", " ");
   const label = formattedType.endsWith("s")

web/src/views/search/SearchView.tsx

@@ -65,12 +65,8 @@ export default function SearchView({
 
   // search interaction
 
-  const onSelectSearch = useCallback((item: SearchResult, detail: boolean) => {
+  const onSelectSearch = useCallback((item: SearchResult) => {
-    if (detail) {
     setSearchDetail(item);
-    } else {
-      setSearchDetail(item);
-    }
   }, []);
 
   // confidence score - probably needs tweaking
@@ -110,18 +106,18 @@ export default function SearchView({
 
       <div
         className={cn(
-          "flex h-11 items-center pl-2 pr-2 md:pl-3",
+          "flex flex-col items-start space-y-2 pl-2 pr-2 md:mb-2 md:pl-3 lg:h-10 lg:flex-row lg:items-center lg:space-y-0",
           config?.semantic_search?.enabled
             ? "justify-between"
             : "justify-center",
-          isMobileOnly && "mb-3 h-auto flex-wrap gap-2",
+          isMobileOnly && "mb-2 h-auto flex-wrap gap-2 space-y-0",
         )}
       >
         {config?.semantic_search?.enabled && (
           <div
             className={cn(
               "relative w-full",
-              hasExistingSearch ? "md:mr-3 md:w-1/3" : "md:ml-[25%] md:w-1/2",
+              hasExistingSearch ? "lg:mr-3 lg:w-1/3" : "lg:ml-[25%] lg:w-1/2",
             )}
           >
             <Input
@@ -141,7 +137,9 @@ export default function SearchView({
 
         {hasExistingSearch && (
           <SearchFilterGroup
-            className={cn("", isMobileOnly && "w-full justify-between")}
+            className={cn(
+              "w-full justify-between md:justify-start lg:justify-end",
+            )}
             filter={searchFilter}
             onUpdateFilter={onUpdateFilter}
           />
@@ -179,9 +177,8 @@ export default function SearchView({
                     >
                       <SearchThumbnail
                         searchResult={value}
-                        scrollLock={false}
                         findSimilar={() => setSimilaritySearch(value)}
-                        onClick={onSelectSearch}
+                        onClick={() => onSelectSearch(value)}
                       />
                       {(searchTerm || similaritySearch) && (
                         <div className={cn("absolute right-2 top-2 z-40")}>