Explore page optimizations (#13682)

* Fix video scaling

* Simplify similarity searching

* Hide source filter when doing similarity search

* Fix up

* Remove frigate plus view

* Add icons to detail tabs

* Cleanup
This commit is contained in:
Nicolas Mowen 2024-09-11 13:20:41 -06:00 committed by GitHub
parent 863f51363a
commit f3784505e0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 109 additions and 752 deletions

View File

@ -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 />} />

View File

@ -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>
);
}

View File

@ -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>
);
}

View File

@ -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],
);
}

View File

@ -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}
/>
);

View File

@ -1,636 +0,0 @@
import { baseUrl } from "@/api/baseUrl";
import { CamerasFilterButton } from "@/components/filter/CamerasFilterButton";
import { GeneralFilterContent } from "@/components/filter/ReviewFilterGroup";
import Chip from "@/components/indicators/Chip";
import ActivityIndicator from "@/components/indicators/activity-indicator";
import { FrigatePlusDialog } from "@/components/overlay/dialog/FrigatePlusDialog";
import { Button } from "@/components/ui/button";
import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { DualThumbSlider } from "@/components/ui/slider";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { Event } from "@/types/event";
import { ATTRIBUTE_LABELS, FrigateConfig } from "@/types/frigateConfig";
import { getIconForLabel } from "@/utils/iconUtil";
import { capitalizeFirstLetter } from "@/utils/stringUtil";
import axios from "axios";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { isMobile } from "react-device-detect";
import {
FaList,
FaSort,
FaSortAmountDown,
FaSortAmountUp,
} from "react-icons/fa";
import { LuFolderX } from "react-icons/lu";
import { PiSlidersHorizontalFill } from "react-icons/pi";
import useSWR from "swr";
import useSWRInfinite from "swr/infinite";
const API_LIMIT = 100;
export default function SubmitPlus() {
// title
useEffect(() => {
document.title = "Plus - Frigate";
}, []);
// filters
const [selectedCameras, setSelectedCameras] = useState<string[]>();
const [selectedLabels, setSelectedLabels] = useState<string[]>();
const [scoreRange, setScoreRange] = useState<number[]>();
// sort
const [sort, setSort] = useState<string>();
// data
const eventFetcher = useCallback((key: string) => {
const [path, params] = Array.isArray(key) ? key : [key, undefined];
return axios.get(path, { params }).then((res) => res.data);
}, []);
const getKey = useCallback(
(index: number, prevData: Event[]) => {
if (index > 0) {
const lastDate = prevData[prevData.length - 1].start_time;
return [
"events",
{
limit: API_LIMIT,
in_progress: 0,
is_submitted: 0,
has_snapshot: 1,
cameras: selectedCameras ? selectedCameras.join(",") : null,
labels: selectedLabels ? selectedLabels.join(",") : null,
min_score: scoreRange ? scoreRange[0] : null,
max_score: scoreRange ? scoreRange[1] : null,
sort: sort ? sort : null,
before: lastDate,
},
];
}
return [
"events",
{
limit: 100,
in_progress: 0,
is_submitted: 0,
has_snapshot: 1,
cameras: selectedCameras ? selectedCameras.join(",") : null,
labels: selectedLabels ? selectedLabels.join(",") : null,
min_score: scoreRange ? scoreRange[0] : null,
max_score: scoreRange ? scoreRange[1] : null,
sort: sort ? sort : null,
},
];
},
[scoreRange, selectedCameras, selectedLabels, sort],
);
const {
data: eventPages,
mutate: refresh,
size,
setSize,
isValidating,
} = useSWRInfinite<Event[]>(getKey, eventFetcher, {
revalidateOnFocus: false,
});
const events = useMemo(
() => (eventPages ? eventPages.flat() : []),
[eventPages],
);
const [upload, setUpload] = useState<Event>();
// paging
const isDone = useMemo(
() => (eventPages?.at(-1)?.length ?? 0) < API_LIMIT,
[eventPages],
);
const pagingObserver = useRef<IntersectionObserver | null>();
const lastEventRef = useCallback(
(node: HTMLElement | null) => {
if (isValidating) return;
if (pagingObserver.current) pagingObserver.current.disconnect();
try {
pagingObserver.current = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && !isDone) {
setSize(size + 1);
}
});
if (node) pagingObserver.current.observe(node);
} catch (e) {
// no op
}
},
[isValidating, isDone, size, setSize],
);
return (
<div className="flex size-full flex-col">
<div className="scrollbar-container flex h-16 w-full items-center justify-between overflow-x-auto px-2">
<PlusFilterGroup
selectedCameras={selectedCameras}
selectedLabels={selectedLabels}
selectedScoreRange={scoreRange}
setSelectedCameras={setSelectedCameras}
setSelectedLabels={setSelectedLabels}
setSelectedScoreRange={setScoreRange}
/>
<PlusSortSelector selectedSort={sort} setSelectedSort={setSort} />
</div>
<div className="no-scrollbar flex size-full flex-1 flex-wrap content-start gap-2 overflow-y-auto md:gap-4">
{!events?.length ? (
<>
{isValidating ? (
<ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
) : (
<div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
<LuFolderX className="size-16" />
No snapshots found
</div>
)}
</>
) : (
<>
<div className="grid w-full gap-2 p-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
<FrigatePlusDialog
upload={upload}
onClose={() => setUpload(undefined)}
onEventUploaded={() => {
refresh(
(data: Event[][] | undefined) => {
if (!data || !upload) {
return data;
}
let pageIndex = -1;
let index = -1;
data.forEach((page, pIdx) => {
const search = page.findIndex((e) => e.id == upload.id);
if (search != -1) {
pageIndex = pIdx;
index = search;
}
});
if (index == -1) {
return data;
}
return [
...data.slice(0, pageIndex),
[
...data[pageIndex].slice(0, index),
{ ...data[pageIndex][index], plus_id: "new_upload" },
...data[pageIndex].slice(index + 1),
],
...data.slice(pageIndex + 1),
];
},
{ revalidate: false, populateCache: true },
);
}}
/>
{events?.map((event) => {
if (event.data.type != "object" || event.plus_id) {
return;
}
return (
<div
key={event.id}
className="relative flex aspect-video w-full cursor-pointer items-center justify-center rounded-lg bg-black md:rounded-2xl"
onClick={() => setUpload(event)}
>
<div className="absolute left-0 top-2 z-40">
<Tooltip>
<div className="flex">
<TooltipTrigger asChild>
<div className="mx-3 pb-1 text-sm text-white">
<Chip
className={`z-0 flex items-center justify-between space-x-1 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500`}
>
{[event.label].map((object) => {
return getIconForLabel(
object,
"size-3 text-white",
);
})}
<div className="text-xs">
{Math.round(event.data.score * 100)}%
</div>
</Chip>
</div>
</TooltipTrigger>
</div>
<TooltipContent className="capitalize">
{[event.label]
.map((text) => capitalizeFirstLetter(text))
.sort()
.join(", ")
.replaceAll("-verified", "")}
</TooltipContent>
</Tooltip>
</div>
<img
className="aspect-video h-full rounded-lg object-contain md:rounded-2xl"
src={`${baseUrl}api/events/${event.id}/snapshot.jpg`}
loading="lazy"
/>
</div>
);
})}
</div>
{!isDone && isValidating ? (
<div className="flex w-full items-center justify-center">
<ActivityIndicator />
</div>
) : (
<div ref={lastEventRef} />
)}
</>
)}
</div>
</div>
);
}
type PlusFilterGroupProps = {
selectedCameras: string[] | undefined;
selectedLabels: string[] | undefined;
selectedScoreRange: number[] | undefined;
setSelectedCameras: (cameras: string[] | undefined) => void;
setSelectedLabels: (cameras: string[] | undefined) => void;
setSelectedScoreRange: (range: number[] | undefined) => void;
};
function PlusFilterGroup({
selectedCameras,
selectedLabels,
selectedScoreRange,
setSelectedCameras,
setSelectedLabels,
setSelectedScoreRange,
}: PlusFilterGroupProps) {
const { data: config } = useSWR<FrigateConfig>("config");
const allCameras = useMemo(() => {
if (!config) {
return [];
}
return Object.keys(config.cameras);
}, [config]);
const allLabels = useMemo<string[]>(() => {
if (!config) {
return [];
}
const labels = new Set<string>();
const cameras = selectedCameras || Object.keys(config.cameras);
cameras.forEach((camera) => {
const cameraConfig = config.cameras[camera];
cameraConfig.objects.track.forEach((label) => {
if (!ATTRIBUTE_LABELS.includes(label)) {
labels.add(label);
}
});
});
return [...labels].sort();
}, [config, selectedCameras]);
const [open, setOpen] = useState<"none" | "camera" | "label" | "score">(
"none",
);
const [currentLabels, setCurrentLabels] = useState<string[] | undefined>(
undefined,
);
const [currentScoreRange, setCurrentScoreRange] = useState<
number[] | undefined
>(undefined);
const Menu = isMobile ? Drawer : DropdownMenu;
const Trigger = isMobile ? DrawerTrigger : DropdownMenuTrigger;
const Content = isMobile ? DrawerContent : DropdownMenuContent;
return (
<div className="flex h-full items-center justify-start gap-2">
<CamerasFilterButton
allCameras={allCameras}
groups={[]}
selectedCameras={selectedCameras}
updateCameraFilter={setSelectedCameras}
/>
<Menu
open={open == "label"}
onOpenChange={(open) => {
if (!open) {
setCurrentLabels(selectedLabels);
}
setOpen(open ? "label" : "none");
}}
>
<Trigger asChild>
<Button
className="flex items-center gap-2 capitalize"
size="sm"
variant={selectedLabels == undefined ? "default" : "select"}
>
<FaList
className={`${selectedLabels == undefined ? "text-secondary-foreground" : "text-selected-foreground"}`}
/>
<div className="hidden text-primary md:block">
{selectedLabels == undefined
? "All Labels"
: `${selectedLabels.length} Labels`}
</div>
</Button>
</Trigger>
<Content className={isMobile ? "max-h-[75dvh]" : ""}>
<GeneralFilterContent
allLabels={allLabels}
selectedLabels={selectedLabels}
currentLabels={currentLabels}
setCurrentLabels={setCurrentLabels}
updateLabelFilter={setSelectedLabels}
onClose={() => setOpen("none")}
/>
</Content>
</Menu>
<Menu
open={open == "score"}
onOpenChange={(open) => {
setOpen(open ? "score" : "none");
}}
>
<Trigger asChild>
<Button
className="flex items-center gap-2 capitalize"
size="sm"
variant={selectedScoreRange == undefined ? "default" : "select"}
>
<PiSlidersHorizontalFill
className={`${selectedScoreRange == undefined ? "text-secondary-foreground" : "text-selected-foreground"}`}
/>
<div className="hidden text-primary md:block">
{selectedScoreRange == undefined
? "Score Range"
: `${Math.round(selectedScoreRange[0] * 100)}% - ${Math.round(selectedScoreRange[1] * 100)}%`}
</div>
</Button>
</Trigger>
<Content
className={`flex min-w-80 flex-col justify-center p-2 ${isMobile ? "gap-2 *:max-h-[75dvh]" : ""}`}
>
<div className="flex items-center gap-1">
<Input
className="w-12"
inputMode="numeric"
value={Math.round((currentScoreRange?.at(0) ?? 0.5) * 100)}
onChange={(e) => {
const value = e.target.value;
if (value) {
setCurrentScoreRange([
parseInt(value) / 100.0,
currentScoreRange?.at(1) ?? 1.0,
]);
}
}}
/>
<DualThumbSlider
className="w-full"
min={0.5}
max={1.0}
step={0.01}
value={currentScoreRange ?? [0.5, 1.0]}
onValueChange={setCurrentScoreRange}
/>
<Input
className="w-12"
inputMode="numeric"
value={Math.round((currentScoreRange?.at(1) ?? 1.0) * 100)}
onChange={(e) => {
const value = e.target.value;
if (value) {
setCurrentScoreRange([
currentScoreRange?.at(0) ?? 0.5,
parseInt(value) / 100.0,
]);
}
}}
/>
</div>
<DropdownMenuSeparator />
<div className="flex items-center justify-evenly p-2">
<Button
variant="select"
onClick={() => {
setSelectedScoreRange(currentScoreRange);
setOpen("none");
}}
>
Apply
</Button>
<Button
onClick={() => {
setCurrentScoreRange(undefined);
setSelectedScoreRange(undefined);
}}
>
Reset
</Button>
</div>
</Content>
</Menu>
</div>
);
}
type PlusSortSelectorProps = {
selectedSort?: string;
setSelectedSort: (sort: string | undefined) => void;
};
function PlusSortSelector({
selectedSort,
setSelectedSort,
}: PlusSortSelectorProps) {
// menu state
const [open, setOpen] = useState(false);
// sort
const [currentSort, setCurrentSort] = useState<string>();
const [currentDir, setCurrentDir] = useState<string>("desc");
// components
const Sort = selectedSort
? selectedSort.split("_")[1] == "desc"
? FaSortAmountDown
: FaSortAmountUp
: FaSort;
const Menu = isMobile ? Drawer : DropdownMenu;
const Trigger = isMobile ? DrawerTrigger : DropdownMenuTrigger;
const Content = isMobile ? DrawerContent : DropdownMenuContent;
return (
<div className="flex h-full items-center justify-start gap-2">
<Menu
open={open}
onOpenChange={(open) => {
setOpen(open);
if (!open) {
const parts = selectedSort?.split("_");
if (parts?.length == 2) {
setCurrentSort(parts[0]);
setCurrentDir(parts[1]);
}
}
}}
>
<Trigger asChild>
<Button
className="flex items-center gap-2 capitalize"
size="sm"
variant={selectedSort == undefined ? "default" : "select"}
>
<Sort
className={`${selectedSort == undefined ? "text-secondary-foreground" : "text-selected-foreground"}`}
/>
<div className="hidden text-primary md:block">
{selectedSort == undefined ? "Sort" : selectedSort.split("_")[0]}
</div>
</Button>
</Trigger>
<Content
className={`flex flex-col justify-center gap-2 p-2 ${isMobile ? "max-h-[75dvh]" : ""}`}
>
<RadioGroup
className={`flex flex-col gap-4 ${isMobile ? "mt-4" : ""}`}
onValueChange={(value) => setCurrentSort(value)}
>
<div className="flex w-full items-center gap-2">
<RadioGroupItem
className={
currentSort == "date"
? "bg-selected from-selected/50 to-selected/90 text-selected"
: "bg-secondary from-secondary/50 to-secondary/90 text-secondary"
}
id="date"
value="date"
/>
<Label
className="w-full cursor-pointer capitalize"
htmlFor="date"
>
Date
</Label>
{currentSort == "date" ? (
currentDir == "desc" ? (
<FaSortAmountDown
className="size-5 cursor-pointer"
onClick={() => setCurrentDir("asc")}
/>
) : (
<FaSortAmountUp
className="size-5 cursor-pointer"
onClick={() => setCurrentDir("desc")}
/>
)
) : (
<div className="size-5" />
)}
</div>
<div className="flex w-full items-center gap-2">
<RadioGroupItem
className={
currentSort == "score"
? "bg-selected from-selected/50 to-selected/90 text-selected"
: "bg-secondary from-secondary/50 to-secondary/90 text-secondary"
}
id="score"
value="score"
/>
<Label
className="w-full cursor-pointer capitalize"
htmlFor="score"
>
Score
</Label>
{currentSort == "score" ? (
currentDir == "desc" ? (
<FaSortAmountDown
className="size-5 cursor-pointer"
onClick={() => setCurrentDir("asc")}
/>
) : (
<FaSortAmountUp
className="size-5 cursor-pointer"
onClick={() => setCurrentDir("desc")}
/>
)
) : (
<div className="size-5" />
)}
</div>
</RadioGroup>
<DropdownMenuSeparator />
<div className="flex items-center justify-evenly p-2">
<Button
variant="select"
disabled={!currentSort}
onClick={() => {
if (currentSort) {
setSelectedSort(`${currentSort}_${currentDir}`);
setOpen(false);
}
}}
>
Apply
</Button>
<Button
onClick={() => {
setCurrentSort(undefined);
setCurrentDir("desc");
setSelectedSort(undefined);
}}
>
Reset
</Button>
</div>
</Content>
</Menu>
</div>
);
}

View File

@ -28,8 +28,6 @@ export type SearchResult = {
};
};
export type PartialSearchResult = Partial<SearchResult> & { id: string };
export type SearchFilter = {
cameras?: string[];
labels?: string[];

View File

@ -12,11 +12,7 @@ import {
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";
import { FrigateConfig } from "@/types/frigateConfig";
import {
PartialSearchResult,
SearchFilter,
SearchResult,
} from "@/types/search";
import { SearchFilter, SearchResult } from "@/types/search";
import { useCallback, useMemo, useState } from "react";
import { isMobileOnly } from "react-device-detect";
import { LuImage, LuSearchX, LuText, LuXCircle } from "react-icons/lu";
@ -29,7 +25,6 @@ type SearchViewProps = {
searchFilter?: SearchFilter;
searchResults?: SearchResult[];
isLoading: boolean;
similaritySearch?: PartialSearchResult;
setSearch: (search: string) => void;
setSimilaritySearch: (search: SearchResult) => void;
onUpdateFilter: (filter: SearchFilter) => void;
@ -41,7 +36,6 @@ export default function SearchView({
searchFilter,
searchResults,
isLoading,
similaritySearch,
setSearch,
setSimilaritySearch,
onUpdateFilter,
@ -123,7 +117,7 @@ export default function SearchView({
<Input
className="text-md w-full bg-muted pr-10"
placeholder={"Search for a detected object..."}
value={similaritySearch ? "" : search}
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
{search && (
@ -141,6 +135,7 @@ export default function SearchView({
"w-full justify-between md:justify-start lg:justify-end",
)}
filter={searchFilter}
searchTerm={searchTerm}
onUpdateFilter={onUpdateFilter}
/>
)}
@ -180,7 +175,7 @@ export default function SearchView({
findSimilar={() => setSimilaritySearch(value)}
onClick={() => onSelectSearch(value)}
/>
{(searchTerm || similaritySearch) && (
{searchTerm && (
<div className={cn("absolute right-2 top-2 z-40")}>
<Tooltip>
<TooltipTrigger>