Explore UI tweaks (#13679)

* Loading indicators and filter bar tweaks * remove unnecessary bits from search thumbnail * simplify * add video loading indicator * clean up
2024-11-21 19:07:46 +01:00 · 2024-09-11 12:32:45 -05:00 · 2024-09-11 12:32:45 -05:00 · 863f51363a
commit 863f51363a
parent 22ee6bb137
4 changed files with 93 additions and 111 deletions
--- 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 { 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 [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]);
+  const handleOnClick = useCallback(() => {
+    onClick(searchResult);
+  }, [searchResult, onClick]);

  // date

@ -95,13 +45,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,18 +75,14 @@ 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">
                  {
                    <>
                      <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,
--- a/web/src/components/overlay/detail/SearchDetailDialog.tsx
+++ b/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,19 +313,26 @@ 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 (
-    <HlsVideoPlayer
-      videoRef={videoRef}
-      currentSource={`${baseUrl}vod/${search.camera}/start/${search.start_time}/end/${endTime}/index.m3u8`}
-      hotKeys
-      visible
-      frigateControls={false}
-      fullscreen={false}
-      supportsFullscreen={false}
-    />
+    <>
+      {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`}
+        hotKeys
+        visible
+        frigateControls={false}
+        fullscreen={false}
+        supportsFullscreen={false}
+        onPlaying={() => setIsLoading(false)}
+      />
+    </>
  );
 }
--- a/web/src/views/explore/ExploreView.tsx
+++ b/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 (
+      <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+    );
+  }
+
  return (
-    <div className="space-y-4 overflow-x-hidden p-2">
+    <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
-              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
-              }
-              draggable={false}
-              src={`${apiHost}api/events/${event.id}/thumbnail.jpg`}
-              alt={`${objectType} snapshot`}
-              onClick={() => onSelectSearch(event, true)}
+            <ExploreThumbnailImage
+              event={event}
+              onSelectSearch={onSelectSearch}
            />
          </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")
--- a/web/src/views/search/SearchView.tsx
+++ b/web/src/views/search/SearchView.tsx
@ -65,12 +65,8 @@ export default function SearchView({

  // search interaction

-  const onSelectSearch = useCallback((item: SearchResult, detail: boolean) => {
-    if (detail) {
-      setSearchDetail(item);
-    } else {
-      setSearchDetail(item);
-    }
+  const onSelectSearch = useCallback((item: SearchResult) => {
+    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")}>