From 09824c19a4db65bf1bcd6964d0dfde88adb7520a Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 9 Sep 2024 17:20:15 -0600
Subject: [PATCH] Fix current hour search preview

---
 .../components/filter/SearchFilterGroup.tsx   | 265 ++++++++++++------
 .../player/PreviewThumbnailPlayer.tsx         |   4 +-
 .../player/SearchThumbnailPlayer.tsx          |  20 +-
 .../components/preview/ScrubbablePreview.tsx  |  33 ++-
 4 files changed, 223 insertions(+), 99 deletions(-)

diff --git a/web/src/components/filter/SearchFilterGroup.tsx b/web/src/components/filter/SearchFilterGroup.tsx
index cee34e65d..07adae66f 100644
--- 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>
+    </>
+  );
+}
diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
index 2d91c5e3d..409618b86 100644
--- 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}
diff --git a/web/src/components/player/SearchThumbnailPlayer.tsx b/web/src/components/player/SearchThumbnailPlayer.tsx
index 52d4f640d..9b54086da 100644
--- 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={() => {}}
+      />
+    );
   }
 }
diff --git a/web/src/components/preview/ScrubbablePreview.tsx b/web/src/components/preview/ScrubbablePreview.tsx
index eb9a962a8..f3aa4f158 100644
--- 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/", "")}`}
       />
     );
   }