Explore page optimizations

web/src/App.tsx

@@ -15,7 +15,6 @@ const Live = lazy(() => import("@/pages/Live"));
 const Events = lazy(() => import("@/pages/Events"));
 const Explore = lazy(() => import("@/pages/Explore"));
 const Exports = lazy(() => import("@/pages/Exports"));
-const SubmitPlus = lazy(() => import("@/pages/SubmitPlus"));
 const ConfigEditor = lazy(() => import("@/pages/ConfigEditor"));
 const System = lazy(() => import("@/pages/System"));
 const Settings = lazy(() => import("@/pages/Settings"));
@@ -47,7 +46,6 @@ function App() {
                   <Route path="/review" element={<Events />} />
                   <Route path="/explore" element={<Explore />} />
                   <Route path="/export" element={<Exports />} />
-                  <Route path="/plus" element={<SubmitPlus />} />
                   <Route path="/system" element={<System />} />
                   <Route path="/settings" element={<Settings />} />
                   <Route path="/config" element={<ConfigEditor />} />

web/src/components/filter/SearchFilterGroup.tsx

@@ -43,14 +43,15 @@ type SearchFilterGroupProps = {
   className: string;
   filters?: SearchFilters[];
   filter?: SearchFilter;
+  searchTerm: string;
   filterList?: FilterList;
   onUpdateFilter: (filter: SearchFilter) => void;
 };
-
 export default function SearchFilterGroup({
   className,
   filters = DEFAULT_REVIEW_FILTERS,
   filter,
+  searchTerm,
   filterList,
   onUpdateFilter,
 }: SearchFilterGroupProps) {
@@ -213,16 +214,18 @@ 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 })
-          }
-        />
-      )}
+      {config?.semantic_search?.enabled &&
+        filters.includes("source") &&
+        !searchTerm.includes("similarity:") && (
+          <SearchTypeButton
+            selectedSearchSources={
+              filter?.search_type ?? ["thumbnail", "description"]
+            }
+            updateSearchSourceFilter={(newSearchSource) =>
+              onUpdateFilter({ ...filter, search_type: newSearchSource })
+            }
+          />
+        )}
     </div>
   );
 }

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

@@ -33,8 +33,11 @@ import HlsVideoPlayer from "@/components/player/HlsVideoPlayer";
 import { baseUrl } from "@/api/baseUrl";
 import { cn } from "@/lib/utils";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
+import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record";
+import { FaRegListAlt, FaVideo } from "react-icons/fa";
+import FrigatePlusIcon from "@/components/icons/FrigatePlusIcon";
 
-const SEARCH_TABS = ["details", "Frigate+", "video"] as const;
+const SEARCH_TABS = ["details", "frigate+", "video"] as const;
 type SearchTab = (typeof SEARCH_TABS)[number];
 
 type SearchDetailDialogProps = {
@@ -64,7 +67,7 @@ export default function SearchDetailDialog({
     const views = [...SEARCH_TABS];
 
     if (!config.plus.enabled || !search.has_snapshot) {
-      const index = views.indexOf("Frigate+");
+      const index = views.indexOf("frigate+");
       views.splice(index, 1);
     }
 
@@ -132,6 +135,9 @@ export default function SearchDetailDialog({
                   data-nav-item={item}
                   aria-label={`Select ${item}`}
                 >
+                  {item == "details" && <FaRegListAlt className="size-4" />}
+                  {item == "frigate+" && <FrigatePlusIcon className="size-4" />}
+                  {item == "video" && <FaVideo className="size-4" />}
                   <div className="capitalize">{item}</div>
                 </ToggleGroupItem>
               ))}
@@ -147,7 +153,7 @@ export default function SearchDetailDialog({
             setSimilarity={setSimilarity}
           />
         )}
-        {page == "Frigate+" && (
+        {page == "frigate+" && (
           <FrigatePlusDialog
             upload={search as unknown as Event}
             dialog={false}
@@ -157,7 +163,7 @@ export default function SearchDetailDialog({
             }}
           />
         )}
-        {page == "video" && <VideoTab search={search} />}
+        {page == "video" && <VideoTab search={search} config={config} />}
       </Content>
     </Overlay>
   );
@@ -311,28 +317,79 @@ function ObjectDetailsTab({
 
 type VideoTabProps = {
   search: SearchResult;
+  config?: FrigateConfig;
 };
-function VideoTab({ search }: VideoTabProps) {
+function VideoTab({ search, config }: VideoTabProps) {
   const [isLoading, setIsLoading] = useState(true);
   const videoRef = useRef<HTMLVideoElement | null>(null);
 
   const endTime = useMemo(() => search.end_time ?? Date.now() / 1000, [search]);
 
+  const mainCameraAspect = useMemo(() => {
+    const camera = config?.cameras?.[search.camera];
+
+    if (!camera) {
+      return "normal";
+    }
+
+    const aspectRatio = camera.detect.width / camera.detect.height;
+
+    if (!aspectRatio) {
+      return "normal";
+    } else if (aspectRatio > ASPECT_WIDE_LAYOUT) {
+      return "wide";
+    } else if (aspectRatio < ASPECT_VERTICAL_LAYOUT) {
+      return "tall";
+    } else {
+      return "normal";
+    }
+  }, [config, search]);
+
+  const containerClassName = useMemo(() => {
+    if (mainCameraAspect == "wide") {
+      return "flex justify-center items-center";
+    } else if (mainCameraAspect == "tall") {
+      if (isDesktop) {
+        return "size-full flex flex-col justify-center items-center";
+      } else {
+        return "size-full";
+      }
+    } else {
+      return "";
+    }
+  }, [mainCameraAspect]);
+
+  const videoClassName = useMemo(() => {
+    if (mainCameraAspect == "wide") {
+      return "w-full aspect-wide";
+    } else if (mainCameraAspect == "tall") {
+      if (isDesktop) {
+        return "w-[50%] aspect-tall flex justify-center";
+      } else {
+        return "size-full";
+      }
+    } else {
+      return "w-full aspect-video";
+    }
+  }, [mainCameraAspect]);
+
   return (
-    <>
+    <div className={`aspect-video ${containerClassName}`}>
       {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)}
-      />
-    </>
+      <div className={videoClassName}>
+        <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)}
+        />
+      </div>
+    </div>
   );
 }

web/src/hooks/use-navigation.ts

@@ -1,28 +1,20 @@
-import Logo from "@/components/Logo";
 import { ENV } from "@/env";
-import { FrigateConfig } from "@/types/frigateConfig";
 import { NavData } from "@/types/navigation";
 import { useMemo } from "react";
 import { FaCompactDisc, FaVideo } from "react-icons/fa";
 import { IoSearch } from "react-icons/io5";
 import { LuConstruction } from "react-icons/lu";
 import { MdVideoLibrary } from "react-icons/md";
-import useSWR from "swr";
 
 export const ID_LIVE = 1;
 export const ID_REVIEW = 2;
 export const ID_EXPLORE = 3;
 export const ID_EXPORT = 4;
-export const ID_PLUS = 5;
-export const ID_PLAYGROUND = 6;
+export const ID_PLAYGROUND = 5;
 
 export default function useNavigation(
   variant: "primary" | "secondary" = "primary",
 ) {
-  const { data: config } = useSWR<FrigateConfig>("config", {
-    revalidateOnFocus: false,
-  });
-
   return useMemo(
     () =>
       [
@@ -54,14 +46,6 @@ export default function useNavigation(
           title: "Export",
           url: "/export",
         },
-        {
-          id: ID_PLUS,
-          variant,
-          icon: Logo,
-          title: "Frigate+",
-          url: "/plus",
-          enabled: config?.plus?.enabled == true,
-        },
         {
           id: ID_PLAYGROUND,
           variant,
@@ -71,6 +55,6 @@ export default function useNavigation(
           enabled: ENV !== "production",
         },
       ] as NavData[],
-    [config?.plus.enabled, variant],
+    [variant],
   );
 }

web/src/pages/Explore.tsx

@@ -3,12 +3,7 @@ import { useCameraPreviews } from "@/hooks/use-camera-previews";
 import { useOverlayState, useSearchEffect } from "@/hooks/use-overlay-state";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { RecordingStartingPoint } from "@/types/record";
-import {
-  PartialSearchResult,
-  SearchFilter,
-  SearchResult,
-  SearchSource,
-} from "@/types/search";
+import { SearchFilter, SearchResult } from "@/types/search";
 import { TimeRange } from "@/types/timeline";
 import { RecordingView } from "@/views/recording/RecordingView";
 import SearchView from "@/views/search/SearchView";
@@ -31,62 +26,26 @@ export default function Explore() {
 
   // search filter
 
-  const [similaritySearch, setSimilaritySearch] =
-    useState<PartialSearchResult>();
+  const similaritySearch = useMemo(() => {
+    if (!searchTerm.includes("similarity:")) {
+      return undefined;
+    }
+
+    return searchTerm.split(":")[1];
+  }, [searchTerm]);
 
   const [searchFilter, setSearchFilter, searchSearchParams] =
     useApiFilterArgs<SearchFilter>();
 
-  const onUpdateFilter = useCallback(
-    (newFilter: SearchFilter) => {
-      setSearchFilter(newFilter);
-
-      if (similaritySearch && !newFilter.search_type?.includes("similarity")) {
-        setSimilaritySearch(undefined);
-      }
-    },
-    [similaritySearch, setSearchFilter],
-  );
-
   // search api
 
-  const updateFilterWithSimilarity = useCallback(
-    (similaritySearch: PartialSearchResult) => {
-      let newFilter = searchFilter;
-      setSimilaritySearch(similaritySearch);
-      if (similaritySearch) {
-        newFilter = {
-          ...searchFilter,
-          // @ts-expect-error we want to set this
-          similarity_search_id: undefined,
-          search_type: ["similarity"] as SearchSource[],
-        };
-      } else {
-        if (searchFilter?.search_type?.includes("similarity" as SearchSource)) {
-          newFilter = {
-            ...searchFilter,
-            // @ts-expect-error we want to set this
-            similarity_search_id: undefined,
-            search_type: undefined,
-          };
-        }
-      }
-      if (newFilter) {
-        setSearchFilter(newFilter);
-      }
-    },
-    [searchFilter, setSearchFilter],
-  );
-
   useSearchEffect("similarity_search_id", (similarityId) => {
-    updateFilterWithSimilarity({ id: similarityId });
+    setSearch(`similarity:${similarityId}`);
+    // @ts-expect-error we want to clear this
+    setSearchFilter({ ...searchFilter, similarity_search_id: undefined });
   });
 
   useEffect(() => {
-    if (similaritySearch) {
-      setSimilaritySearch(undefined);
-    }
-
     if (searchTimeout) {
       clearTimeout(searchTimeout);
     }
@@ -106,7 +65,7 @@ export default function Explore() {
       return [
         "events/search",
         {
-          query: similaritySearch.id,
+          query: similaritySearch,
           cameras: searchSearchParams["cameras"],
           labels: searchSearchParams["labels"],
           sub_labels: searchSearchParams["subLabels"],
@@ -241,7 +200,7 @@ export default function Explore() {
           allCameras={selectedReviewData.allCameras}
           allPreviews={allPreviews}
           timeRange={selectedTimeRange}
-          updateFilter={onUpdateFilter}
+          updateFilter={setSearchFilter}
         />
       );
     }
@@ -254,9 +213,8 @@ export default function Explore() {
         searchResults={searchResults}
         isLoading={isLoading}
         setSearch={setSearch}
-        similaritySearch={similaritySearch}
-        setSimilaritySearch={updateFilterWithSimilarity}
-        onUpdateFilter={onUpdateFilter}
+        setSimilaritySearch={(search) => setSearch(`similarity:${search.id}`)}
+        onUpdateFilter={setSearchFilter}
         onOpenSearch={onOpenSearch}
       />
     );