Fix current hour search preview

2026-02-14 15:15:22 +03:00 · 2024-09-09 17:20:15 -06:00 · 2024-09-09 17:20:15 -06:00 · 09824c19a4
commit 09824c19a4
parent 1df2610b21
4 changed files with 223 additions and 99 deletions
--- a/web/src/components/filter/SearchFilterGroup.tsx
+++ b/web/src/components/filter/SearchFilterGroup.tsx
@ -20,7 +20,14 @@ import { cn } from "@/lib/utils";
 import SubFilterIcon from "../icons/SubFilterIcon";
 import { FaLocationDot } from "react-icons/fa6";

-const SEARCH_FILTERS = ["cameras", "date", "general", "zone", "sub"] as const;
+const SEARCH_FILTERS = [
+  "cameras",
+  "date",
+  "general",
+  "zone",
+  "sub",
+  "source",
+] as const;
 type SearchFilters = (typeof SEARCH_FILTERS)[number];
 const DEFAULT_REVIEW_FILTERS: SearchFilters[] = [
  "cameras",
@ -28,6 +35,7 @@ const DEFAULT_REVIEW_FILTERS: SearchFilters[] = [
  "general",
  "zone",
  "sub",
+  "source",
 ];

 type SearchFilterGroupProps = {
@ -175,15 +183,9 @@ export default function SearchFilterGroup({
        <GeneralFilterButton
          allLabels={filterValues.labels}
          selectedLabels={filter?.labels}
-          selectedSearchSources={
-            filter?.search_type ?? ["thumbnail", "description"]
-          }
          updateLabelFilter={(newLabels) => {
            onUpdateFilter({ ...filter, labels: newLabels });
          }}
-          updateSearchSourceFilter={(newSearchSource) =>
-            onUpdateFilter({ ...filter, search_type: newSearchSource })
-          }
        />
      )}
      {filters.includes("zone") && allZones.length > 0 && (
@ -204,6 +206,16 @@ export default function SearchFilterGroup({
          }
        />
      )}
+      {config?.semantic_search?.enabled && filters.includes("source") && (
+        <SearchTypeButton
+          selectedSearchSources={
+            filter?.search_type ?? ["thumbnail", "description"]
+          }
+          updateSearchSourceFilter={(newSearchSource) =>
+            onUpdateFilter({ ...filter, search_type: newSearchSource })
+          }
+        />
+      )}
    </div>
  );
 }
@ -211,24 +223,17 @@ export default function SearchFilterGroup({
 type GeneralFilterButtonProps = {
  allLabels: string[];
  selectedLabels: string[] | undefined;
-  selectedSearchSources: SearchSource[];
  updateLabelFilter: (labels: string[] | undefined) => void;
-  updateSearchSourceFilter: (sources: SearchSource[]) => void;
 };
 function GeneralFilterButton({
  allLabels,
  selectedLabels,
-  selectedSearchSources,
  updateLabelFilter,
-  updateSearchSourceFilter,
 }: GeneralFilterButtonProps) {
  const [open, setOpen] = useState(false);
  const [currentLabels, setCurrentLabels] = useState<string[] | undefined>(
    selectedLabels,
  );
-  const [currentSearchSources, setCurrentSearchSources] = useState<
-    SearchSource[]
-  >(selectedSearchSources);

  const trigger = (
    <Button
@ -251,12 +256,8 @@ function GeneralFilterButton({
      allLabels={allLabels}
      selectedLabels={selectedLabels}
      currentLabels={currentLabels}
-      selectedSearchSources={selectedSearchSources}
-      currentSearchSources={currentSearchSources}
      setCurrentLabels={setCurrentLabels}
      updateLabelFilter={updateLabelFilter}
-      setCurrentSearchSources={setCurrentSearchSources}
-      updateSearchSourceFilter={updateSearchSourceFilter}
      onClose={() => setOpen(false)}
    />
  );
@ -302,78 +303,21 @@ type GeneralFilterContentProps = {
  allLabels: string[];
  selectedLabels: string[] | undefined;
  currentLabels: string[] | undefined;
-  selectedSearchSources: SearchSource[];
-  currentSearchSources: SearchSource[];
  updateLabelFilter: (labels: string[] | undefined) => void;
  setCurrentLabels: (labels: string[] | undefined) => void;
-  setCurrentSearchSources: (sources: SearchSource[]) => void;
-  updateSearchSourceFilter: (sources: SearchSource[]) => void;
  onClose: () => void;
 };
 export function GeneralFilterContent({
  allLabels,
  selectedLabels,
  currentLabels,
-  selectedSearchSources,
-  currentSearchSources,
  updateLabelFilter,
  setCurrentLabels,
-  setCurrentSearchSources,
-  updateSearchSourceFilter,
  onClose,
 }: GeneralFilterContentProps) {
-  const { data: config } = useSWR<FrigateConfig>("config", {
-    revalidateOnFocus: false,
-  });
-
  return (
    <>
      <div className="scrollbar-container h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden">
-        {config?.semantic_search?.enabled && (
-          <div className="my-2.5 flex flex-col gap-2.5">
-            <FilterSwitch
-              label="Thumbnail Image"
-              isChecked={currentSearchSources?.includes("thumbnail") ?? false}
-              onCheckedChange={(isChecked) => {
-                const updatedSources = currentSearchSources
-                  ? [...currentSearchSources]
-                  : [];
-
-                if (isChecked) {
-                  updatedSources.push("thumbnail");
-                  setCurrentSearchSources(updatedSources);
-                } else {
-                  if (updatedSources.length > 1) {
-                    const index = updatedSources.indexOf("thumbnail");
-                    if (index !== -1) updatedSources.splice(index, 1);
-                    setCurrentSearchSources(updatedSources);
-                  }
-                }
-              }}
-            />
-            <FilterSwitch
-              label="Description"
-              isChecked={currentSearchSources?.includes("description") ?? false}
-              onCheckedChange={(isChecked) => {
-                const updatedSources = currentSearchSources
-                  ? [...currentSearchSources]
-                  : [];
-
-                if (isChecked) {
-                  updatedSources.push("description");
-                  setCurrentSearchSources(updatedSources);
-                } else {
-                  if (updatedSources.length > 1) {
-                    const index = updatedSources.indexOf("description");
-                    if (index !== -1) updatedSources.splice(index, 1);
-                    setCurrentSearchSources(updatedSources);
-                  }
-                }
-              }}
-            />
-            <DropdownMenuSeparator />
-          </div>
-        )}
        <div className="mb-5 mt-2.5 flex items-center justify-between">
          <Label
            className="mx-2 cursor-pointer text-primary"
@ -427,10 +371,6 @@ export function GeneralFilterContent({
              updateLabelFilter(currentLabels);
            }

-            if (selectedSearchSources != currentSearchSources) {
-              updateSearchSourceFilter(currentSearchSources);
-            }
-
            onClose();
          }}
        >
@ -800,3 +740,170 @@ export function SubFilterContent({
    </>
  );
 }
+
+type SearchTypeButtonProps = {
+  selectedSearchSources: SearchSource[];
+  updateSearchSourceFilter: (sources: SearchSource[]) => void;
+};
+function SearchTypeButton({
+  selectedSearchSources,
+  updateSearchSourceFilter,
+}: SearchTypeButtonProps) {
+  const [open, setOpen] = useState(false);
+  const [currentSearchSources, setCurrentSearchSources] = useState<
+    SearchSource[]
+  >(selectedSearchSources);
+
+  const trigger = (
+    <Button
+      size="sm"
+      variant={selectedSearchSources?.length != 2 ? "select" : "default"}
+      className="flex items-center gap-2 capitalize"
+    >
+      <FaFilter
+        className={`${selectedSearchSources?.length != 2 ? "text-selected-foreground" : "text-secondary-foreground"}`}
+      />
+      <div
+        className={`hidden md:block ${selectedSearchSources?.length != 2 ? "text-selected-foreground" : "text-primary"}`}
+      >
+        {selectedSearchSources?.length != 2
+          ? `${selectedSearchSources[0]}`
+          : "All Search Sources"}
+      </div>
+    </Button>
+  );
+  const content = (
+    <SearchTypeContent
+      selectedSearchSources={selectedSearchSources}
+      currentSearchSources={currentSearchSources}
+      setCurrentSearchSources={setCurrentSearchSources}
+      updateSearchSourceFilter={updateSearchSourceFilter}
+      onClose={() => setOpen(false)}
+    />
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer
+        open={open}
+        onOpenChange={(open) => {
+          if (!open) {
+            setCurrentSearchSources(selectedSearchSources);
+          }
+
+          setOpen(open);
+        }}
+      >
+        <DrawerTrigger asChild>{trigger}</DrawerTrigger>
+        <DrawerContent className="max-h-[75dvh] overflow-hidden">
+          {content}
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(open) => {
+        if (!open) {
+          setCurrentSearchSources(selectedSearchSources);
+        }
+
+        setOpen(open);
+      }}
+    >
+      <PopoverTrigger asChild>{trigger}</PopoverTrigger>
+      <PopoverContent>{content}</PopoverContent>
+    </Popover>
+  );
+}
+
+type SearchTypeContentProps = {
+  selectedSearchSources: SearchSource[];
+  currentSearchSources: SearchSource[];
+  setCurrentSearchSources: (sources: SearchSource[]) => void;
+  updateSearchSourceFilter: (sources: SearchSource[]) => void;
+  onClose: () => void;
+};
+export function SearchTypeContent({
+  selectedSearchSources,
+  currentSearchSources,
+  setCurrentSearchSources,
+  updateSearchSourceFilter,
+  onClose,
+}: SearchTypeContentProps) {
+  return (
+    <>
+      <div className="scrollbar-container h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden">
+        <div className="my-2.5 flex flex-col gap-2.5">
+          <FilterSwitch
+            label="Thumbnail Image"
+            isChecked={currentSearchSources?.includes("thumbnail") ?? false}
+            onCheckedChange={(isChecked) => {
+              const updatedSources = currentSearchSources
+                ? [...currentSearchSources]
+                : [];
+
+              if (isChecked) {
+                updatedSources.push("thumbnail");
+                setCurrentSearchSources(updatedSources);
+              } else {
+                if (updatedSources.length > 1) {
+                  const index = updatedSources.indexOf("thumbnail");
+                  if (index !== -1) updatedSources.splice(index, 1);
+                  setCurrentSearchSources(updatedSources);
+                }
+              }
+            }}
+          />
+          <FilterSwitch
+            label="Description"
+            isChecked={currentSearchSources?.includes("description") ?? false}
+            onCheckedChange={(isChecked) => {
+              const updatedSources = currentSearchSources
+                ? [...currentSearchSources]
+                : [];
+
+              if (isChecked) {
+                updatedSources.push("description");
+                setCurrentSearchSources(updatedSources);
+              } else {
+                if (updatedSources.length > 1) {
+                  const index = updatedSources.indexOf("description");
+                  if (index !== -1) updatedSources.splice(index, 1);
+                  setCurrentSearchSources(updatedSources);
+                }
+              }
+            }}
+          />
+        </div>
+        <DropdownMenuSeparator />
+        <div className="flex items-center justify-evenly p-2">
+          <Button
+            variant="select"
+            onClick={() => {
+              if (selectedSearchSources != currentSearchSources) {
+                updateSearchSourceFilter(currentSearchSources);
+              }
+
+              onClose();
+            }}
+          >
+            Apply
+          </Button>
+          <Button
+            onClick={() => {
+              setCurrentSearchSources([
+                "thumbnail",
+                "description",
+              ] as SearchSource[]);
+            }}
+          >
+            Reset
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+}
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@ -329,7 +329,9 @@ function PreviewContent({
  } else if (isCurrentHour(review.start_time)) {
    return (
      <InProgressPreview
-        review={review}
+        camera={review.camera}
+        startTime={review.start_time}
+        endTime={review.end_time}
        timeRange={timeRange}
        setReviewed={setReviewed}
        setIgnoreClick={setIgnoreClick}
--- a/web/src/components/player/SearchThumbnailPlayer.tsx
+++ b/web/src/components/player/SearchThumbnailPlayer.tsx
@ -14,7 +14,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import ImageLoadingIndicator from "../indicators/ImageLoadingIndicator";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { capitalizeFirstLetter } from "@/utils/stringUtil";
-import { VideoPreview } from "../preview/ScrubbablePreview";
+import { InProgressPreview, VideoPreview } from "../preview/ScrubbablePreview";
 import { Preview } from "@/types/preview";
 import { SearchResult } from "@/types/search";
 import useContextMenu from "@/hooks/use-contextmenu";
@ -272,6 +272,7 @@ function PreviewContent({
  onTimeUpdate,
 }: PreviewContentProps) {
  // preview
+  const now = useMemo(() => Date.now() / 1000, []);

  if (relevantPreview) {
    return (
@ -287,6 +288,21 @@ function PreviewContent({
      />
    );
  } else if (isCurrentHour(searchResult.start_time)) {
-    return <div />;
+    return (
+      <InProgressPreview
+        camera={searchResult.camera}
+        startTime={searchResult.start_time}
+        endTime={searchResult.end_time}
+        timeRange={{
+          before: now,
+          after: searchResult.start_time,
+        }}
+        setIgnoreClick={setIgnoreClick}
+        isPlayingBack={isPlayingBack}
+        onTimeUpdate={onTimeUpdate}
+        windowVisible={true}
+        setReviewed={() => {}}
+      />
+    );
  }
 }
--- a/web/src/components/preview/ScrubbablePreview.tsx
+++ b/web/src/components/preview/ScrubbablePreview.tsx
@ -6,7 +6,6 @@ import React, {
  useState,
 } from "react";
 import { useApiHost } from "@/api";
-import { ReviewSegment } from "@/types/review";
 import useSWR from "swr";
 import { isFirefox, isMobile, isSafari } from "react-device-detect";
 import { TimelineScrubMode, TimeRange } from "@/types/timeline";
@ -286,21 +285,27 @@ export function VideoPreview({

 const MIN_LOAD_TIMEOUT_MS = 200;
 type InProgressPreviewProps = {
-  review: ReviewSegment;
+  camera: string;
+  startTime: number;
+  endTime?: number;
  timeRange: TimeRange;
  showProgress?: boolean;
  loop?: boolean;
-  setReviewed: (reviewId: string) => void;
+  defaultImageUrl?: string;
+  setReviewed: () => void;
  setIgnoreClick: (ignore: boolean) => void;
  isPlayingBack: (ended: boolean) => void;
  onTimeUpdate?: (time: number | undefined) => void;
  windowVisible: boolean;
 };
 export function InProgressPreview({
-  review,
+  camera,
+  startTime,
+  endTime,
  timeRange,
  showProgress = true,
  loop = false,
+  defaultImageUrl,
  setReviewed,
  setIgnoreClick,
  isPlayingBack,
@ -310,8 +315,8 @@ export function InProgressPreview({
  const apiHost = useApiHost();
  const sliderRef = useRef<HTMLDivElement | null>(null);
  const { data: previewFrames } = useSWR<string[]>(
-    `preview/${review.camera}/start/${Math.floor(review.start_time) - PREVIEW_PADDING}/end/${
-      Math.ceil(review.end_time ?? timeRange.before) + PREVIEW_PADDING
+    `preview/${camera}/start/${Math.floor(startTime) - PREVIEW_PADDING}/end/${
+      Math.ceil(endTime ?? timeRange.before) + PREVIEW_PADDING
    }/frames`,
    { revalidateOnFocus: false },
  );
@ -326,7 +331,7 @@ export function InProgressPreview({
    }

    if (onTimeUpdate) {
-      onTimeUpdate(review.start_time - PREVIEW_PADDING + key);
+      onTimeUpdate(startTime - PREVIEW_PADDING + key);
    }

    if (playbackMode != "auto") {
@ -334,9 +339,7 @@ export function InProgressPreview({
    }

    if (key == previewFrames.length - 1) {
-      if (!review.has_been_reviewed) {
-        setReviewed(review.id);
-      }
+      setReviewed();

      if (loop) {
        setKey(0);
@ -356,7 +359,7 @@ export function InProgressPreview({

    setTimeout(() => {
      if (setReviewed && key == Math.floor(previewFrames.length / 2)) {
-        setReviewed(review.id);
+        setReviewed();
      }

      if (previewFrames[key + 1]) {
@ -377,11 +380,7 @@ export function InProgressPreview({
  const onManualSeek = useCallback(
    (values: number[]) => {
      const value = values[0];
-
-      if (!review.has_been_reviewed) {
-        setReviewed(review.id);
-      }
-
+      setReviewed();
      setKey(value);
    },

@ -424,7 +423,7 @@ export function InProgressPreview({
    return (
      <img
        className="size-full"
-        src={`${apiHost}${review.thumb_path.replace("/media/frigate/", "")}`}
+        src={defaultImageUrl} //{`${apiHost}${review.thumb_path.replace("/media/frigate/", "")}`}
      />
    );
  }