Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-07-26 13:47:03 +02:00
Code Issues Projects Releases Wiki Activity

Semantic Search Frontend (#12112)

Browse Source 
* Add basic search page

* Abstract filters to separate components

* Make searching functional

* Add loading and no results indicators

* Implement searching

* Combine account and settings menus on mobile

* Support using thumbnail for in progress detections

* Fetch previews

* Move recordings view and open recordings when search is selected

* Implement detail pane

* Implement saving of description

* Implement similarity search

* Fix clicking

* Add date range picker

* Fix

* Fix iOS zoom bug

* Mobile fixes

* Use text area

* Fix spacing for drawer

* Fix fetching previews incorrectly
This commit is contained in:
Nicolas Mowen 2024-06-23 14:58:00 -06:00
parent 0d7a148897
commit 9d7e499adb
24 changed files with 2682 additions and 755 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/App.tsx
View File

@ -13,6 +13,7 @@ import { isPWA } from "./utils/isPWA";
const Live = lazy(() => import("@/pages/Live"));
const Events = lazy(() => import("@/pages/Events"));
const Search = lazy(() => import("@/pages/Search"));
const Exports = lazy(() => import("@/pages/Exports"));
const SubmitPlus = lazy(() => import("@/pages/SubmitPlus"));
const ConfigEditor = lazy(() => import("@/pages/ConfigEditor"));
@ -44,6 +45,7 @@ function App() {
<Route index element={<Live />} />
<Route path="/events" element={<Redirect to="/review" />} />
<Route path="/review" element={<Events />} />
<Route path="/search" element={<Search />} />
<Route path="/export" element={<Exports />} />
<Route path="/plus" element={<SubmitPlus />} />
<Route path="/system" element={<System />} />

2
web/src/components/card/AnimatedEventCard.tsx
View File

@ -7,10 +7,10 @@ import { REVIEW_PADDING, ReviewSegment } from "@/types/review";
import { useNavigate } from "react-router-dom";
import { RecordingStartingPoint } from "@/types/record";
import axios from "axios";
import { VideoPreview } from "../player/PreviewThumbnailPlayer";
import { isCurrentHour } from "@/utils/dateUtil";
import { useCameraPreviews } from "@/hooks/use-camera-previews";
import { baseUrl } from "@/api/baseUrl";
import { VideoPreview } from "../preview/ScrubbablePreview";
import { useApiHost } from "@/api";
import { isDesktop, isSafari } from "react-device-detect";
import { usePersistence } from "@/hooks/use-persistence";

152
web/src/components/filter/CalendarFilterButton.tsx Normal file
View File

@ -0,0 +1,152 @@
import {
useFormattedRange,
useFormattedTimestamp,
} from "@/hooks/use-date-utils";
import { ReviewSummary } from "@/types/review";
import { Button } from "../ui/button";
import { FaCalendarAlt } from "react-icons/fa";
import ReviewActivityCalendar from "../overlay/ReviewActivityCalendar";
import { DropdownMenuSeparator } from "../ui/dropdown-menu";
import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
import { isMobile } from "react-device-detect";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import { DateRangePicker } from "../ui/calendar-range";
import { DateRange } from "react-day-picker";
type CalendarFilterButtonProps = {
reviewSummary?: ReviewSummary;
day?: Date;
updateSelectedDay: (day?: Date) => void;
};
export default function CalendarFilterButton({
reviewSummary,
day,
updateSelectedDay,
}: CalendarFilterButtonProps) {
const selectedDate = useFormattedTimestamp(
day == undefined ? 0 : day?.getTime() / 1000 + 1,
"%b %-d",
);
const trigger = (
<Button
className="flex items-center gap-2"
variant={day == undefined ? "default" : "select"}
size="sm"
>
<FaCalendarAlt
className={`${day == undefined ? "text-secondary-foreground" : "text-selected-foreground"}`}
/>
<div
className={`hidden md:block ${day == undefined ? "text-primary" : "text-selected-foreground"}`}
>
{day == undefined ? "Last 24 Hours" : selectedDate}
</div>
</Button>
);
const content = (
<>
<ReviewActivityCalendar
reviewSummary={reviewSummary}
selectedDay={day}
onSelect={updateSelectedDay}
/>
<DropdownMenuSeparator />
<div className="flex items-center justify-center p-2">
<Button
onClick={() => {
updateSelectedDay(undefined);
}}
>
Reset
</Button>
</div>
</>
);
if (isMobile) {
return (
<Drawer>
<DrawerTrigger asChild>{trigger}</DrawerTrigger>
<DrawerContent>{content}</DrawerContent>
</Drawer>
);
}
return (
<Popover>
<PopoverTrigger asChild>{trigger}</PopoverTrigger>
<PopoverContent className="w-auto">{content}</PopoverContent>
</Popover>
);
}
type CalendarRangeFilterButtonProps = {
range?: DateRange;
defaultText: string;
updateSelectedRange: (range?: DateRange) => void;
};
export function CalendarRangeFilterButton({
range,
defaultText,
updateSelectedRange,
}: CalendarRangeFilterButtonProps) {
const selectedDate = useFormattedRange(
range?.from == undefined ? 0 : range.from.getTime() / 1000 + 1,
range?.to == undefined ? 0 : range.to.getTime() / 1000 - 1,
"%b %-d",
);
const trigger = (
<Button
className="flex items-center gap-2"
variant={range == undefined ? "default" : "select"}
size="sm"
>
<FaCalendarAlt
className={`${range == undefined ? "text-secondary-foreground" : "text-selected-foreground"}`}
/>
<div
className={`hidden md:block ${range == undefined ? "text-primary" : "text-selected-foreground"}`}
>
{range == undefined ? defaultText : selectedDate}
</div>
</Button>
);
const content = (
<>
<DateRangePicker
initialDateFrom={range?.from}
initialDateTo={range?.to}
showCompare={false}
onUpdate={(range) => updateSelectedRange(range.range)}
/>
<DropdownMenuSeparator />
<div className="flex items-center justify-center p-2">
<Button
onClick={() => {
updateSelectedRange(undefined);
}}
>
Reset
</Button>
</div>
</>
);
if (isMobile) {
return (
<Drawer>
<DrawerTrigger asChild>{trigger}</DrawerTrigger>
<DrawerContent>{content}</DrawerContent>
</Drawer>
);
}
return (
<Popover>
<PopoverTrigger asChild>{trigger}</PopoverTrigger>
<PopoverContent className="w-[840px]">{content}</PopoverContent>
</Popover>
);
}

177
web/src/components/filter/CamerasFilterButton.tsx Normal file
View File

@ -0,0 +1,177 @@
import { Button } from "../ui/button";
import { CameraGroupConfig } from "@/types/frigateConfig";
import { useState } from "react";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "../ui/dropdown-menu";
import { isMobile } from "react-device-detect";
import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
import FilterSwitch from "./FilterSwitch";
import { FaVideo } from "react-icons/fa";
type CameraFilterButtonProps = {
allCameras: string[];
groups: [string, CameraGroupConfig][];
selectedCameras: string[] | undefined;
updateCameraFilter: (cameras: string[] | undefined) => void;
};
export function CamerasFilterButton({
allCameras,
groups,
selectedCameras,
updateCameraFilter,
}: CameraFilterButtonProps) {
const [open, setOpen] = useState(false);
const [currentCameras, setCurrentCameras] = useState<string[] | undefined>(
selectedCameras,
);
const trigger = (
<Button
className="flex items-center gap-2 capitalize"
variant={selectedCameras?.length == undefined ? "default" : "select"}
size="sm"
>
<FaVideo
className={`${(selectedCameras?.length ?? 0) >= 1 ? "text-selected-foreground" : "text-secondary-foreground"}`}
/>
<div
className={`hidden md:block ${selectedCameras?.length ? "text-selected-foreground" : "text-primary"}`}
>
{selectedCameras == undefined
? "All Cameras"
: `${selectedCameras.includes("birdseye") ? selectedCameras.length - 1 : selectedCameras.length} Camera${selectedCameras.length !== 1 ? "s" : ""}`}
</div>
</Button>
);
const content = (
<>
{isMobile && (
<>
<DropdownMenuLabel className="flex justify-center">
Cameras
</DropdownMenuLabel>
<DropdownMenuSeparator />
</>
)}
<div className="scrollbar-container h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden p-4">
<FilterSwitch
isChecked={currentCameras == undefined}
label="All Cameras"
onCheckedChange={(isChecked) => {
if (isChecked) {
setCurrentCameras(undefined);
}
}}
/>
{groups.length > 0 && (
<>
<DropdownMenuSeparator className="mt-2" />
{groups.map(([name, conf]) => {
return (
<div
key={name}
className="w-full cursor-pointer rounded-lg px-2 py-1.5 text-sm capitalize text-primary hover:bg-muted"
onClick={() => setCurrentCameras([...conf.cameras])}
>
{name}
</div>
);
})}
</>
)}
<DropdownMenuSeparator className="my-2" />
<div className="flex flex-col gap-2.5">
{allCameras.map((item) => (
<FilterSwitch
key={item}
isChecked={currentCameras?.includes(item) ?? false}
label={item.replaceAll("_", " ")}
onCheckedChange={(isChecked) => {
if (isChecked) {
const updatedCameras = currentCameras
? [...currentCameras]
: [];
updatedCameras.push(item);
setCurrentCameras(updatedCameras);
} else {
const updatedCameras = currentCameras
? [...currentCameras]
: [];
// can not deselect the last item
if (updatedCameras.length > 1) {
updatedCameras.splice(updatedCameras.indexOf(item), 1);
setCurrentCameras(updatedCameras);
}
}
}}
/>
))}
</div>
</div>
<DropdownMenuSeparator className="my-2" />
<div className="flex items-center justify-evenly p-2">
<Button
variant="select"
onClick={() => {
updateCameraFilter(currentCameras);
setOpen(false);
}}
>
Apply
</Button>
<Button
onClick={() => {
setCurrentCameras(undefined);
updateCameraFilter(undefined);
}}
>
Reset
</Button>
</div>
</>
);
if (isMobile) {
return (
<Drawer
open={open}
onOpenChange={(open) => {
if (!open) {
setCurrentCameras(selectedCameras);
}
setOpen(open);
}}
>
<DrawerTrigger asChild>{trigger}</DrawerTrigger>
<DrawerContent className="max-h-[75dvh] overflow-hidden">
{content}
</DrawerContent>
</Drawer>
);
}
return (
<DropdownMenu
modal={false}
open={open}
onOpenChange={(open) => {
if (!open) {
setCurrentCameras(selectedCameras);
}
setOpen(open);
}}
>
<DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
<DropdownMenuContent>{content}</DropdownMenuContent>
</DropdownMenu>
);
}

254
web/src/components/filter/ReviewFilterGroup.tsx
View File

@ -1,36 +1,24 @@
import { Button } from "../ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import useSWR from "swr";
import { CameraGroupConfig, FrigateConfig } from "@/types/frigateConfig";
import { FrigateConfig } from "@/types/frigateConfig";
import { useCallback, useMemo, useState } from "react";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "../ui/dropdown-menu";
import { DropdownMenuSeparator } from "../ui/dropdown-menu";
import { ReviewFilter, ReviewSeverity, ReviewSummary } from "@/types/review";
import { getEndOfDayTimestamp } from "@/utils/dateUtil";
import { useFormattedTimestamp } from "@/hooks/use-date-utils";
import {
FaCalendarAlt,
FaCheckCircle,
FaFilter,
FaRunning,
FaVideo,
} from "react-icons/fa";
import { FaCheckCircle, FaFilter, FaRunning } from "react-icons/fa";
import { isDesktop, isMobile } from "react-device-detect";
import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
import { Switch } from "../ui/switch";
import { Label } from "../ui/label";
import ReviewActivityCalendar from "../overlay/ReviewActivityCalendar";
import MobileReviewSettingsDrawer, {
DrawerFeatures,
} from "../overlay/MobileReviewSettingsDrawer";
import useOptimisticState from "@/hooks/use-optimistic-state";
import FilterSwitch from "./FilterSwitch";
import { FilterList } from "@/types/filter";
import CalendarFilterButton from "./CalendarFilterButton";
import { CamerasFilterButton } from "./CamerasFilterButton";
const REVIEW_FILTERS = [
"cameras",
@ -210,6 +198,7 @@ export default function ReviewFilterGroup({
? undefined
: new Date(filter.after * 1000)
}
defaultText="Last 24 Hours"
updateSelectedDay={onUpdateSelectedDay}
/>
)}
@ -260,169 +249,6 @@ export default function ReviewFilterGroup({
);
}
type CameraFilterButtonProps = {
allCameras: string[];
groups: [string, CameraGroupConfig][];
selectedCameras: string[] | undefined;
updateCameraFilter: (cameras: string[] | undefined) => void;
};
export function CamerasFilterButton({
allCameras,
groups,
selectedCameras,
updateCameraFilter,
}: CameraFilterButtonProps) {
const [open, setOpen] = useState(false);
const [currentCameras, setCurrentCameras] = useState<string[] | undefined>(
selectedCameras,
);
const trigger = (
<Button
className="flex items-center gap-2 capitalize"
variant={selectedCameras?.length == undefined ? "default" : "select"}
size="sm"
>
<FaVideo
className={`${(selectedCameras?.length ?? 0) >= 1 ? "text-selected-foreground" : "text-secondary-foreground"}`}
/>
<div
className={`hidden md:block ${selectedCameras?.length ? "text-selected-foreground" : "text-primary"}`}
>
{selectedCameras == undefined
? "All Cameras"
: `${selectedCameras.includes("birdseye") ? selectedCameras.length - 1 : selectedCameras.length} Camera${selectedCameras.length !== 1 ? "s" : ""}`}
</div>
</Button>
);
const content = (
<>
{isMobile && (
<>
<DropdownMenuLabel className="flex justify-center">
Cameras
</DropdownMenuLabel>
<DropdownMenuSeparator />
</>
)}
<div className="scrollbar-container h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden p-4">
<FilterSwitch
isChecked={currentCameras == undefined}
label="All Cameras"
onCheckedChange={(isChecked) => {
if (isChecked) {
setCurrentCameras(undefined);
}
}}
/>
{groups.length > 0 && (
<>
<DropdownMenuSeparator className="mt-2" />
{groups.map(([name, conf]) => {
return (
<div
key={name}
className="w-full cursor-pointer rounded-lg px-2 py-1.5 text-sm capitalize text-primary hover:bg-muted"
onClick={() => setCurrentCameras([...conf.cameras])}
>
{name}
</div>
);
})}
</>
)}
<DropdownMenuSeparator className="my-2" />
<div className="flex flex-col gap-2.5">
{allCameras.map((item) => (
<FilterSwitch
key={item}
isChecked={currentCameras?.includes(item) ?? false}
label={item.replaceAll("_", " ")}
onCheckedChange={(isChecked) => {
if (isChecked) {
const updatedCameras = currentCameras
? [...currentCameras]
: [];
updatedCameras.push(item);
setCurrentCameras(updatedCameras);
} else {
const updatedCameras = currentCameras
? [...currentCameras]
: [];
// can not deselect the last item
if (updatedCameras.length > 1) {
updatedCameras.splice(updatedCameras.indexOf(item), 1);
setCurrentCameras(updatedCameras);
}
}
}}
/>
))}
</div>
</div>
<DropdownMenuSeparator className="my-2" />
<div className="flex items-center justify-evenly p-2">
<Button
variant="select"
onClick={() => {
updateCameraFilter(currentCameras);
setOpen(false);
}}
>
Apply
</Button>
<Button
onClick={() => {
setCurrentCameras(undefined);
updateCameraFilter(undefined);
}}
>
Reset
</Button>
</div>
</>
);
if (isMobile) {
return (
<Drawer
open={open}
onOpenChange={(open) => {
if (!open) {
setCurrentCameras(selectedCameras);
}
setOpen(open);
}}
>
<DrawerTrigger asChild>{trigger}</DrawerTrigger>
<DrawerContent className="max-h-[75dvh] overflow-hidden">
{content}
</DrawerContent>
</Drawer>
);
}
return (
<DropdownMenu
modal={false}
open={open}
onOpenChange={(open) => {
if (!open) {
setCurrentCameras(selectedCameras);
}
setOpen(open);
}}
>
<DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
<DropdownMenuContent>{content}</DropdownMenuContent>
</DropdownMenu>
);
}
type ShowReviewedFilterProps = {
showReviewed: boolean;
setShowReviewed: (reviewed: boolean) => void;
@ -466,74 +292,6 @@ function ShowReviewFilter({
);
}
type CalendarFilterButtonProps = {
reviewSummary?: ReviewSummary;
day?: Date;
updateSelectedDay: (day?: Date) => void;
};
function CalendarFilterButton({
reviewSummary,
day,
updateSelectedDay,
}: CalendarFilterButtonProps) {
const selectedDate = useFormattedTimestamp(
day == undefined ? 0 : day?.getTime() / 1000 + 1,
"%b %-d",
);
const trigger = (
<Button
className="flex items-center gap-2"
variant={day == undefined ? "default" : "select"}
size="sm"
>
<FaCalendarAlt
className={`${day == undefined ? "text-secondary-foreground" : "text-selected-foreground"}`}
/>
<div
className={`hidden md:block ${day == undefined ? "text-primary" : "text-selected-foreground"}`}
>
{day == undefined ? "Last 24 Hours" : selectedDate}
</div>
</Button>
);
const content = (
<>
<ReviewActivityCalendar
reviewSummary={reviewSummary}
selectedDay={day}
onSelect={updateSelectedDay}
/>
<DropdownMenuSeparator />
<div className="flex items-center justify-center p-2">
<Button
onClick={() => {
updateSelectedDay(undefined);
}}
>
Reset
</Button>
</div>
</>
);
if (isMobile) {
return (
<Drawer>
<DrawerTrigger asChild>{trigger}</DrawerTrigger>
<DrawerContent>{content}</DrawerContent>
</Drawer>
);
}
return (
<Popover>
<PopoverTrigger asChild>{trigger}</PopoverTrigger>
<PopoverContent className="w-auto">{content}</PopoverContent>
</Popover>
);
}
type GeneralFilterButtonProps = {
allLabels: string[];
selectedLabels: string[] | undefined;

458
web/src/components/filter/SearchFilterGroup.tsx Normal file
View File

@ -0,0 +1,458 @@
import { Button } from "../ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig";
import { useCallback, useMemo, useState } from "react";
import { DropdownMenuSeparator } from "../ui/dropdown-menu";
import { getEndOfDayTimestamp } from "@/utils/dateUtil";
import { FaFilter } from "react-icons/fa";
import { isDesktop, isMobile } from "react-device-detect";
import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
import { Switch } from "../ui/switch";
import { Label } from "../ui/label";
import MobileReviewSettingsDrawer, {
DrawerFeatures,
} from "../overlay/MobileReviewSettingsDrawer";
import FilterSwitch from "./FilterSwitch";
import { FilterList } from "@/types/filter";
import { CalendarRangeFilterButton } from "./CalendarFilterButton";
import { CamerasFilterButton } from "./CamerasFilterButton";
import { SearchFilter } from "@/types/search";
import { DateRange } from "react-day-picker";
const SEARCH_FILTERS = ["cameras", "date", "general"] as const;
type SearchFilters = (typeof SEARCH_FILTERS)[number];
const DEFAULT_REVIEW_FILTERS: SearchFilters[] = ["cameras", "date", "general"];
type SearchFilterGroupProps = {
filters?: SearchFilters[];
filter?: SearchFilter;
filterList?: FilterList;
onUpdateFilter: (filter: SearchFilter) => void;
};
export default function SearchFilterGroup({
filters = DEFAULT_REVIEW_FILTERS,
filter,
filterList,
onUpdateFilter,
}: SearchFilterGroupProps) {
const { data: config } = useSWR<FrigateConfig>("config");
const allLabels = useMemo<string[]>(() => {
if (filterList?.labels) {
return filterList.labels;
}
if (!config) {
return [];
}
const labels = new Set<string>();
const cameras = filter?.cameras || Object.keys(config.cameras);
cameras.forEach((camera) => {
if (camera == "birdseye") {
return;
}
const cameraConfig = config.cameras[camera];
cameraConfig.objects.track.forEach((label) => {
labels.add(label);
});
if (cameraConfig.audio.enabled_in_config) {
cameraConfig.audio.listen.forEach((label) => {
labels.add(label);
});
}
});
return [...labels].sort();
}, [config, filterList, filter]);
const allZones = useMemo<string[]>(() => {
if (filterList?.zones) {
return filterList.zones;
}
if (!config) {
return [];
}
const zones = new Set<string>();
const cameras = filter?.cameras || Object.keys(config.cameras);
cameras.forEach((camera) => {
if (camera == "birdseye") {
return;
}
const cameraConfig = config.cameras[camera];
cameraConfig.review.alerts.required_zones.forEach((zone) => {
zones.add(zone);
});
cameraConfig.review.detections.required_zones.forEach((zone) => {
zones.add(zone);
});
});
return [...zones].sort();
}, [config, filterList, filter]);
const filterValues = useMemo(
() => ({
cameras: Object.keys(config?.cameras || {}),
labels: Object.values(allLabels || {}),
zones: Object.values(allZones || {}),
}),
[config, allLabels, allZones],
);
const groups = useMemo(() => {
if (!config) {
return [];
}
return Object.entries(config.camera_groups).sort(
(a, b) => a[1].order - b[1].order,
);
}, [config]);
const mobileSettingsFeatures = useMemo<DrawerFeatures[]>(() => {
const features: DrawerFeatures[] = [];
if (filters.includes("date")) {
features.push("calendar");
}
if (filters.includes("general")) {
features.push("filter");
}
return features;
}, [filters]);
// handle updating filters
const onUpdateSelectedRange = useCallback(
(range?: DateRange) => {
onUpdateFilter({
...filter,
after:
range?.from == undefined ? undefined : range.from.getTime() / 1000,
before:
range?.to == undefined ? undefined : getEndOfDayTimestamp(range.to),
});
},
[filter, onUpdateFilter],
);
return (
<div className="flex justify-center gap-2">
{filters.includes("cameras") && (
<CamerasFilterButton
allCameras={filterValues.cameras}
groups={groups}
selectedCameras={filter?.cameras}
updateCameraFilter={(newCameras) => {
onUpdateFilter({ ...filter, cameras: newCameras });
}}
/>
)}
{isDesktop && filters.includes("date") && (
<CalendarRangeFilterButton
range={
filter?.after == undefined || filter?.before == undefined
? undefined
: {
from: new Date(filter.after * 1000),
to: new Date(filter.before * 1000),
}
}
defaultText="All Dates"
updateSelectedRange={onUpdateSelectedRange}
/>
)}
{isDesktop && filters.includes("general") && (
<GeneralFilterButton
allLabels={filterValues.labels}
selectedLabels={filter?.labels}
allZones={filterValues.zones}
selectedZones={filter?.zones}
updateLabelFilter={(newLabels) => {
onUpdateFilter({ ...filter, labels: newLabels });
}}
updateZoneFilter={(newZones) =>
onUpdateFilter({ ...filter, zones: newZones })
}
/>
)}
{isMobile && mobileSettingsFeatures.length > 0 && (
<MobileReviewSettingsDrawer
features={mobileSettingsFeatures}
filter={filter}
allLabels={allLabels}
allZones={allZones}
onUpdateFilter={onUpdateFilter}
// not applicable as exports are not used
camera=""
latestTime={0}
currentTime={0}
mode="none"
setMode={() => {}}
setRange={() => {}}
/>
)}
</div>
);
}
type GeneralFilterButtonProps = {
allLabels: string[];
selectedLabels: string[] | undefined;
allZones: string[];
selectedZones?: string[];
updateLabelFilter: (labels: string[] | undefined) => void;
updateZoneFilter: (zones: string[] | undefined) => void;
};
function GeneralFilterButton({
allLabels,
selectedLabels,
allZones,
selectedZones,
updateLabelFilter,
updateZoneFilter,
}: GeneralFilterButtonProps) {
const [open, setOpen] = useState(false);
const [currentLabels, setCurrentLabels] = useState<string[] | undefined>(
selectedLabels,
);
const [currentZones, setCurrentZones] = useState<string[] | undefined>(
selectedZones,
);
const trigger = (
<Button
size="sm"
variant={
selectedLabels?.length || selectedZones?.length ? "select" : "default"
}
className="flex items-center gap-2 capitalize"
>
<FaFilter
className={`${selectedLabels?.length || selectedZones?.length ? "text-selected-foreground" : "text-secondary-foreground"}`}
/>
<div
className={`hidden md:block ${selectedLabels?.length || selectedZones?.length ? "text-selected-foreground" : "text-primary"}`}
>
Filter
</div>
</Button>
);
const content = (
<GeneralFilterContent
allLabels={allLabels}
selectedLabels={selectedLabels}
currentLabels={currentLabels}
allZones={allZones}
selectedZones={selectedZones}
currentZones={currentZones}
setCurrentZones={setCurrentZones}
updateZoneFilter={updateZoneFilter}
updateLabelFilter={updateLabelFilter}
setCurrentLabels={setCurrentLabels}
onClose={() => setOpen(false)}
/>
);
if (isMobile) {
return (
<Drawer
open={open}
onOpenChange={(open) => {
if (!open) {
setCurrentLabels(selectedLabels);
}
setOpen(open);
}}
>
<DrawerTrigger asChild>{trigger}</DrawerTrigger>
<DrawerContent className="max-h-[75dvh] overflow-hidden">
{content}
</DrawerContent>
</Drawer>
);
}
return (
<Popover
open={open}
onOpenChange={(open) => {
if (!open) {
setCurrentLabels(selectedLabels);
}
setOpen(open);
}}
>
<PopoverTrigger asChild>{trigger}</PopoverTrigger>
<PopoverContent>{content}</PopoverContent>
</Popover>
);
}
type GeneralFilterContentProps = {
allLabels: string[];
selectedLabels: string[] | undefined;
currentLabels: string[] | undefined;
allZones?: string[];
selectedZones?: string[];
currentZones?: string[];
updateLabelFilter: (labels: string[] | undefined) => void;
setCurrentLabels: (labels: string[] | undefined) => void;
updateZoneFilter?: (zones: string[] | undefined) => void;
setCurrentZones?: (zones: string[] | undefined) => void;
onClose: () => void;
};
export function GeneralFilterContent({
allLabels,
selectedLabels,
currentLabels,
allZones,
selectedZones,
currentZones,
updateLabelFilter,
setCurrentLabels,
updateZoneFilter,
setCurrentZones,
onClose,
}: GeneralFilterContentProps) {
return (
<>
<div className="scrollbar-container h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden">
<div className="mb-5 mt-2.5 flex items-center justify-between">
<Label
className="mx-2 cursor-pointer text-primary"
htmlFor="allLabels"
>
All Labels
</Label>
<Switch
className="ml-1"
id="allLabels"
checked={currentLabels == undefined}
onCheckedChange={(isChecked) => {
if (isChecked) {
setCurrentLabels(undefined);
}
}}
/>
</div>
<div className="my-2.5 flex flex-col gap-2.5">
{allLabels.map((item) => (
<FilterSwitch
label={item.replaceAll("_", " ")}
isChecked={currentLabels?.includes(item) ?? false}
onCheckedChange={(isChecked) => {
if (isChecked) {
const updatedLabels = currentLabels ? [...currentLabels] : [];
updatedLabels.push(item);
setCurrentLabels(updatedLabels);
} else {
const updatedLabels = currentLabels ? [...currentLabels] : [];
// can not deselect the last item
if (updatedLabels.length > 1) {
updatedLabels.splice(updatedLabels.indexOf(item), 1);
setCurrentLabels(updatedLabels);
}
}
}}
/>
))}
</div>
{allZones && setCurrentZones && (
<>
<DropdownMenuSeparator />
<div className="mb-5 mt-2.5 flex items-center justify-between">
<Label
className="mx-2 cursor-pointer text-primary"
htmlFor="allZones"
>
All Zones
</Label>
<Switch
className="ml-1"
id="allZones"
checked={currentZones == undefined}
onCheckedChange={(isChecked) => {
if (isChecked) {
setCurrentZones(undefined);
}
}}
/>
</div>
<div className="my-2.5 flex flex-col gap-2.5">
{allZones.map((item) => (
<FilterSwitch
label={item.replaceAll("_", " ")}
isChecked={currentZones?.includes(item) ?? false}
onCheckedChange={(isChecked) => {
if (isChecked) {
const updatedZones = currentZones
? [...currentZones]
: [];
updatedZones.push(item);
setCurrentZones(updatedZones);
} else {
const updatedZones = currentZones
? [...currentZones]
: [];
// can not deselect the last item
if (updatedZones.length > 1) {
updatedZones.splice(updatedZones.indexOf(item), 1);
setCurrentZones(updatedZones);
}
}
}}
/>
))}
</div>
</>
)}
</div>
<DropdownMenuSeparator />
<div className="flex items-center justify-evenly p-2">
<Button
variant="select"
onClick={() => {
if (selectedLabels != currentLabels) {
updateLabelFilter(currentLabels);
}
if (updateZoneFilter && selectedZones != currentZones) {
updateZoneFilter(currentZones);
}
onClose();
}}
>
Apply
</Button>
<Button
onClick={() => {
setCurrentLabels(undefined);
setCurrentZones?.(undefined);
updateLabelFilter(undefined);
}}
>
Reset
</Button>
</div>
</>
);
}

8
web/src/components/indicators/Chip.tsx
View File

@ -39,7 +39,13 @@ export default function Chip({
className,
!isIOS && "z-10",
)}
onClick={onClick}
onClick={(e) => {
e.stopPropagation();
if (onClick) {
onClick();
}
}}
>
{children}
</div>

32
web/src/components/menu/GeneralSettings.tsx
View File

@ -3,6 +3,7 @@ import {
LuGithub,
LuLifeBuoy,
LuList,
LuLogOut,
LuMoon,
LuPenSquare,
LuRotateCw,
@ -56,7 +57,7 @@ import {
TooltipTrigger,
} from "@/components/ui/tooltip";
import ActivityIndicator from "../indicators/activity-indicator";
import { isDesktop } from "react-device-detect";
import { isDesktop, isMobile } from "react-device-detect";
import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
import {
Dialog,
@ -68,11 +69,18 @@ import {
import { TooltipPortal } from "@radix-ui/react-tooltip";
import { cn } from "@/lib/utils";
import { baseUrl } from "@/api/baseUrl";
import useSWR from "swr";
type GeneralSettingsProps = {
className?: string;
};
export default function GeneralSettings({ className }: GeneralSettingsProps) {
const { data: profile } = useSWR("profile");
const { data: config } = useSWR("config");
const logoutUrl = config?.proxy?.logout_url || "/api/logout";
// settings
const { theme, colorScheme, setTheme, setColorScheme } = useTheme();
const [restartDialogOpen, setRestartDialogOpen] = useState(false);
const [restartingSheetOpen, setRestartingSheetOpen] = useState(false);
@ -154,6 +162,28 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
}
>
<div className="scrollbar-container w-full flex-col overflow-y-auto overflow-x-hidden">
{isMobile && (
<>
<DropdownMenuLabel>
Current User: {profile?.username || "anonymous"}
</DropdownMenuLabel>
<DropdownMenuSeparator
className={isDesktop ? "mt-3" : "mt-1"}
/>
<MenuItem
className={
isDesktop
? "cursor-pointer"
: "flex items-center p-2 text-sm"
}
>
<a className="flex" href={logoutUrl}>
<LuLogOut className="mr-2 size-4" />
<span>Logout</span>
</a>
</MenuItem>
</>
)}
<DropdownMenuLabel>System</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup className={isDesktop ? "" : "flex flex-col"}>

2
web/src/components/navigation/Bottombar.tsx
View File

@ -7,7 +7,6 @@ import { useFrigateStats } from "@/api/ws";
import { useContext, useEffect, useMemo } from "react";
import useStats from "@/hooks/use-stats";
import GeneralSettings from "../menu/GeneralSettings";
import AccountSettings from "../menu/AccountSettings";
import useNavigation from "@/hooks/use-navigation";
import {
StatusBarMessagesContext,
@ -35,7 +34,6 @@ function Bottombar() {
<NavItem key={item.id} className="p-2" item={item} Icon={item.icon} />
))}
<GeneralSettings className="p-2" />
<AccountSettings className="p-2" />
<StatusAlertNav className="p-2" />
</div>
);

167
web/src/components/overlay/SearchDetailDialog.tsx Normal file
View File

@ -0,0 +1,167 @@
import { isDesktop, isIOS } from "react-device-detect";
import { Sheet, SheetContent } from "../ui/sheet";
import { Drawer, DrawerContent } from "../ui/drawer";
import { SearchResult } from "@/types/search";
import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig";
import { useFormattedTimestamp } from "@/hooks/use-date-utils";
import { getIconForLabel } from "@/utils/iconUtil";
import { useApiHost } from "@/api";
import { Button } from "../ui/button";
import { useCallback, useEffect, useState } from "react";
import axios from "axios";
import { toast } from "sonner";
import { Textarea } from "../ui/textarea";
type SearchDetailDialogProps = {
search?: SearchResult;
setSearch: (search: SearchResult | undefined) => void;
setSimilarity?: () => void;
};
export default function SearchDetailDialog({
search,
setSearch,
setSimilarity,
}: SearchDetailDialogProps) {
const { data: config } = useSWR<FrigateConfig>("config", {
revalidateOnFocus: false,
});
const apiHost = useApiHost();
// data
const [desc, setDesc] = useState(search?.description);
// we have to make sure the current selected search item stays in sync
useEffect(() => setDesc(search?.description), [search]);
const formattedDate = useFormattedTimestamp(
search?.start_time ?? 0,
config?.ui.time_format == "24hour"
? "%b %-d %Y, %H:%M"
: "%b %-d %Y, %I:%M %p",
);
// api
const updateDescription = useCallback(() => {
if (!search) {
return;
}
axios
.post(`events/${search.id}/description`, { description: desc })
.then((resp) => {
if (resp.status == 200) {
toast.success("Successfully saved description", {
position: "top-center",
});
}
})
.catch(() => {
toast.error("Failed to update the description", {
position: "top-center",
});
setDesc(search.description);
});
}, [desc, search]);
// content
const Overlay = isDesktop ? Sheet : Drawer;
const Content = isDesktop ? SheetContent : DrawerContent;
return (
<Overlay
open={search != undefined}
onOpenChange={(open) => {
if (!open) {
setSearch(undefined);
}
}}
>
<Content
className={
isDesktop ? "sm:max-w-xl" : "max-h-[75dvh] overflow-hidden p-2 pb-4"
}
>
{search && (
<div className="mt-3 flex size-full flex-col gap-5 md:mt-0">
<div className="flex w-full flex-row">
<div className="flex w-full flex-col gap-3">
<div className="flex flex-col gap-1.5">
<div className="text-sm text-primary/40">Label</div>
<div className="flex flex-row items-center gap-2 text-sm capitalize">
{getIconForLabel(search.label, "size-4 text-white")}
{search.label}
</div>
</div>
<div className="flex flex-col gap-1.5">
<div className="text-sm text-primary/40">Score</div>
<div className="text-sm">
{Math.round(search.score * 100)}%
</div>
</div>
<div className="flex flex-col gap-1.5">
<div className="text-sm text-primary/40">Camera</div>
<div className="text-sm capitalize">
{search.camera.replaceAll("_", " ")}
</div>
</div>
<div className="flex flex-col gap-1.5">
<div className="text-sm text-primary/40">Timestamp</div>
<div className="text-sm">{formattedDate}</div>
</div>
</div>
<div className="flex w-full flex-col gap-2 px-6">
<img
className="aspect-video select-none rounded-lg object-contain transition-opacity"
style={
isIOS
? {
WebkitUserSelect: "none",
WebkitTouchCallout: "none",
}
: undefined
}
draggable={false}
src={
search.thumb_path
? `${apiHost}${search.thumb_path.replace("/media/frigate/", "")}`
: `${apiHost}api/events/${search.id}/thumbnail.jpg`
}
/>
<Button
onClick={() => {
setSearch(undefined);
if (setSimilarity) {
setSimilarity();
}
}}
>
Find Similar
</Button>
</div>
</div>
<div className="flex flex-col gap-1.5">
<div className="text-sm text-primary/40">Description</div>
<Textarea
className="md:h-64"
placeholder="Description of the event"
value={desc}
onChange={(e) => setDesc(e.target.value)}
/>
<div className="flex w-full flex-row justify-end">
<Button variant="select" onClick={updateDescription}>
Save
</Button>
</div>
</div>
</div>
)}
</Content>
</Overlay>
);
}

496
web/src/components/player/PreviewThumbnailPlayer.tsx
View File

@ -1,10 +1,4 @@
import React, {
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from "react";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { useApiHost } from "@/api";
import { isCurrentHour } from "@/utils/dateUtil";
import { ReviewSegment } from "@/types/review";
@ -12,7 +6,7 @@ import { getIconForLabel } from "@/utils/iconUtil";
import TimeAgo from "../dynamic/TimeAgo";
import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig";
import { isFirefox, isIOS, isMobile, isSafari } from "react-device-detect";
import { isIOS, isMobile, 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";
@ -21,12 +15,11 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
import ImageLoadingIndicator from "../indicators/ImageLoadingIndicator";
import useContextMenu from "@/hooks/use-contextmenu";
import ActivityIndicator from "../indicators/activity-indicator";
import { TimelineScrubMode, TimeRange } from "@/types/timeline";
import { NoThumbSlider } from "../ui/slider";
import { PREVIEW_FPS, PREVIEW_PADDING } from "@/types/preview";
import { TimeRange } from "@/types/timeline";
import { capitalizeFirstLetter } from "@/utils/stringUtil";
import { baseUrl } from "@/api/baseUrl";
import { cn } from "@/lib/utils";
import { InProgressPreview, VideoPreview } from "../preview/ScrubbablePreview";
import { Preview } from "@/types/preview";
type PreviewPlayerProps = {
review: ReviewSegment;
@ -38,14 +31,6 @@ type PreviewPlayerProps = {
onClick: (review: ReviewSegment, ctrl: boolean) => void;
};
type Preview = {
camera: string;
src: string;
type: string;
start: number;
end: number;
};
export default function PreviewThumbnailPlayer({
review,
allPreviews,
@ -354,474 +339,3 @@ function PreviewContent({
);
}
}
type VideoPreviewProps = {
relevantPreview: Preview;
startTime: number;
endTime?: number;
showProgress?: boolean;
loop?: boolean;
setReviewed: () => void;
setIgnoreClick: (ignore: boolean) => void;
isPlayingBack: (ended: boolean) => void;
onTimeUpdate?: (time: number | undefined) => void;
windowVisible: boolean;
};
export function VideoPreview({
relevantPreview,
startTime,
endTime,
showProgress = true,
loop = false,
setReviewed,
setIgnoreClick,
isPlayingBack,
onTimeUpdate,
windowVisible,
}: VideoPreviewProps) {
const playerRef = useRef<HTMLVideoElement | null>(null);
const sliderRef = useRef<HTMLDivElement | null>(null);
// keep track of playback state
const [progress, setProgress] = useState(0);
const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout>();
const playerStartTime = useMemo(() => {
if (!relevantPreview) {
return 0;
}
// start with a bit of padding
return Math.max(0, startTime - relevantPreview.start - PREVIEW_PADDING);
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const playerDuration = useMemo(
() => (endTime ?? relevantPreview.end) - startTime + PREVIEW_PADDING,
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
[],
);
const [lastPercent, setLastPercent] = useState(0.0);
// initialize player correctly
useEffect(() => {
if (!playerRef.current) {
return;
}
if (isSafari || (isFirefox && isMobile)) {
playerRef.current.pause();
setPlaybackMode("compat");
} else {
playerRef.current.currentTime = playerStartTime;
playerRef.current.playbackRate = PREVIEW_FPS;
}
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [playerRef]);
// time progress update
const onProgress = useCallback(() => {
if (!windowVisible) {
return;
}
if (onTimeUpdate) {
onTimeUpdate(
relevantPreview.start + (playerRef.current?.currentTime || 0),
);
}
const playerProgress =
(playerRef.current?.currentTime || 0) - playerStartTime;
// end with a bit of padding
const playerPercent = (playerProgress / playerDuration) * 100;
if (setReviewed && lastPercent < 50 && playerPercent > 50) {
setReviewed();
}
setLastPercent(playerPercent);
if (playerPercent > 100) {
setReviewed();
if (loop && playerRef.current) {
if (playbackMode != "auto") {
setPlaybackMode("auto");
setTimeout(() => setPlaybackMode("compat"), 100);
}
playerRef.current.currentTime = playerStartTime;
return;
}
if (isMobile) {
isPlayingBack(false);
if (onTimeUpdate) {
onTimeUpdate(undefined);
}
} else {
playerRef.current?.pause();
}
setPlaybackMode("auto");
setProgress(100.0);
} else {
setProgress(playerPercent);
}
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [setProgress, lastPercent, windowVisible]);
// manual playback
// safari is incapable of playing at a speed > 2x
// so manual seeking is required on iOS
const [playbackMode, setPlaybackMode] = useState<TimelineScrubMode>("auto");
useEffect(() => {
if (playbackMode != "compat" || !playerRef.current) {
return;
}
let counter = 0;
const intervalId: NodeJS.Timeout = setInterval(() => {
if (playerRef.current) {
playerRef.current.currentTime = playerStartTime + counter;
counter += 1;
}
}, 1000 / PREVIEW_FPS);
return () => clearInterval(intervalId);
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [playbackMode, playerRef]);
// user interaction
useEffect(() => {
setIgnoreClick(playbackMode != "auto" && playbackMode != "compat");
}, [playbackMode, setIgnoreClick]);
const onManualSeek = useCallback(
(values: number[]) => {
const value = values[0];
if (!playerRef.current) {
return;
}
if (playerRef.current.paused == false) {
playerRef.current.pause();
}
if (setReviewed) {
setReviewed();
}
setProgress(value);
playerRef.current.currentTime =
playerStartTime + (value / 100.0) * playerDuration;
},
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
[playerDuration, playerRef, playerStartTime, setIgnoreClick],
);
const onStopManualSeek = useCallback(() => {
setTimeout(() => {
setHoverTimeout(undefined);
if (isSafari || (isFirefox && isMobile)) {
setPlaybackMode("compat");
} else {
setPlaybackMode("auto");
playerRef.current?.play();
}
}, 500);
}, [playerRef]);
const onProgressHover = useCallback(
(event: React.MouseEvent<HTMLDivElement>) => {
if (!sliderRef.current) {
return;
}
const rect = sliderRef.current.getBoundingClientRect();
const positionX = event.clientX - rect.left;
const width = sliderRef.current.clientWidth;
onManualSeek([Math.round((positionX / width) * 100)]);
if (hoverTimeout) {
clearTimeout(hoverTimeout);
}
},
[sliderRef, hoverTimeout, onManualSeek],
);
return (
<div className="relative aspect-video size-full bg-black">
<video
ref={playerRef}
className="pointer-events-none aspect-video size-full bg-black"
autoPlay
playsInline
preload="auto"
muted
onTimeUpdate={onProgress}
>
<source
src={`${baseUrl}${relevantPreview.src.substring(1)}`}
type={relevantPreview.type}
/>
</video>
{showProgress && (
<NoThumbSlider
ref={sliderRef}
className={`absolute inset-x-0 bottom-0 z-30 cursor-col-resize ${playbackMode == "hover" || playbackMode == "drag" ? "h-4" : "h-2"}`}
value={[progress]}
onValueChange={(event) => {
setPlaybackMode("drag");
onManualSeek(event);
}}
onValueCommit={onStopManualSeek}
min={0}
step={1}
max={100}
onMouseMove={
isMobile
? undefined
: (event) => {
if (playbackMode != "drag") {
setPlaybackMode("hover");
onProgressHover(event);
}
}
}
onMouseLeave={
isMobile
? undefined
: () => {
if (!sliderRef.current) {
return;
}
setHoverTimeout(setTimeout(() => onStopManualSeek(), 500));
}
}
/>
)}
</div>
);
}
const MIN_LOAD_TIMEOUT_MS = 200;
type InProgressPreviewProps = {
review: ReviewSegment;
timeRange: TimeRange;
showProgress?: boolean;
loop?: boolean;
setReviewed: (reviewId: string) => void;
setIgnoreClick: (ignore: boolean) => void;
isPlayingBack: (ended: boolean) => void;
onTimeUpdate?: (time: number | undefined) => void;
windowVisible: boolean;
};
export function InProgressPreview({
review,
timeRange,
showProgress = true,
loop = false,
setReviewed,
setIgnoreClick,
isPlayingBack,
onTimeUpdate,
windowVisible,
}: InProgressPreviewProps) {
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
}/frames`,
{ revalidateOnFocus: false },
);
const [playbackMode, setPlaybackMode] = useState<TimelineScrubMode>("auto");
const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout>();
const [key, setKey] = useState(0);
const handleLoad = useCallback(() => {
if (!previewFrames || !windowVisible) {
return;
}
if (onTimeUpdate) {
onTimeUpdate(review.start_time - PREVIEW_PADDING + key);
}
if (playbackMode != "auto") {
return;
}
if (key == previewFrames.length - 1) {
if (!review.has_been_reviewed) {
setReviewed(review.id);
}
if (loop) {
setKey(0);
return;
}
if (isMobile) {
isPlayingBack(false);
if (onTimeUpdate) {
onTimeUpdate(undefined);
}
}
return;
}
setTimeout(() => {
if (setReviewed && key == Math.floor(previewFrames.length / 2)) {
setReviewed(review.id);
}
if (previewFrames[key + 1]) {
setKey(key + 1);
}
}, MIN_LOAD_TIMEOUT_MS);
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [key, playbackMode, previewFrames]);
// user interaction
useEffect(() => {
setIgnoreClick(playbackMode != "auto");
}, [playbackMode, setIgnoreClick]);
const onManualSeek = useCallback(
(values: number[]) => {
const value = values[0];
if (!review.has_been_reviewed) {
setReviewed(review.id);
}
setKey(value);
},
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
[setIgnoreClick, setKey],
);
const onStopManualSeek = useCallback(
(values: number[]) => {
const value = values[0];
setTimeout(() => {
setPlaybackMode("auto");
setKey(value - 1);
}, 500);
},
[setPlaybackMode],
);
const onProgressHover = useCallback(
(event: React.MouseEvent<HTMLDivElement>) => {
if (!sliderRef.current || !previewFrames) {
return;
}
const rect = sliderRef.current.getBoundingClientRect();
const positionX = event.clientX - rect.left;
const width = sliderRef.current.clientWidth;
const progress = [Math.round((positionX / width) * previewFrames.length)];
onManualSeek(progress);
if (hoverTimeout) {
clearTimeout(hoverTimeout);
}
},
[sliderRef, hoverTimeout, previewFrames, onManualSeek],
);
if (!previewFrames || previewFrames.length == 0) {
return (
<img
className="size-full"
src={`${apiHost}${review.thumb_path.replace("/media/frigate/", "")}`}
/>
);
}
return (
<div className="relative flex size-full items-center bg-black">
<img
className="pointer-events-none size-full object-contain"
src={`${apiHost}api/preview/${previewFrames[key]}/thumbnail.webp`}
onLoad={handleLoad}
/>
{showProgress && (
<NoThumbSlider
ref={sliderRef}
className={`absolute inset-x-0 bottom-0 z-30 cursor-col-resize ${playbackMode != "auto" ? "h-4" : "h-2"}`}
value={[key]}
onValueChange={(event) => {
setPlaybackMode("drag");
onManualSeek(event);
}}
onValueCommit={onStopManualSeek}
min={0}
step={1}
max={previewFrames.length - 1}
onMouseMove={
isMobile
? undefined
: (event) => {
if (playbackMode != "drag") {
setPlaybackMode("hover");
onProgressHover(event);
}
}
}
onMouseLeave={
isMobile
? undefined
: (event) => {
if (!sliderRef.current || !previewFrames) {
return;
}
const rect = sliderRef.current.getBoundingClientRect();
const positionX = event.clientX - rect.left;
const width = sliderRef.current.clientWidth;
const progress = [
Math.round((positionX / width) * previewFrames.length),
];
setHoverTimeout(
setTimeout(() => onStopManualSeek(progress), 500),
);
}
}
/>
)}
</div>
);
}

331
web/src/components/player/SearchThumbnailPlayer.tsx Normal file
View File

@ -0,0 +1,331 @@
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { useApiHost } from "@/api";
import { isCurrentHour } from "@/utils/dateUtil";
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 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";
import { capitalizeFirstLetter } from "@/utils/stringUtil";
import { VideoPreview } from "../preview/ScrubbablePreview";
import { Preview } from "@/types/preview";
import { SearchResult } from "@/types/search";
import { LuInfo } from "react-icons/lu";
import useContextMenu from "@/hooks/use-contextmenu";
type SearchPlayerProps = {
searchResult: SearchResult;
allPreviews?: Preview[];
scrollLock?: boolean;
onClick: (searchResult: SearchResult, detail: boolean) => void;
};
export default function SearchThumbnailPlayer({
searchResult,
allPreviews,
scrollLock = false,
onClick,
}: SearchPlayerProps) {
const apiHost = useApiHost();
const { data: config } = useSWR<FrigateConfig>("config");
const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
// interaction
const [ignoreClick, setIgnoreClick] = useState(false);
const handleOnClick = useCallback(
(e: React.MouseEvent<HTMLDivElement>) => {
if (!ignoreClick) {
onClick(searchResult, e.metaKey);
}
},
[ignoreClick, searchResult, onClick],
);
const swipeHandlers = useSwipeable({
onSwipedLeft: () => setPlayback(false),
onSwipedRight: () => setPlayback(true),
preventScrollOnSwipe: true,
});
useContextMenu(imgRef, () => {
onClick(searchResult, true);
});
// playback
const relevantPreview = useMemo(() => {
if (!allPreviews) {
return undefined;
}
let multiHour = false;
const firstIndex = Object.values(allPreviews).findIndex((preview) => {
if (
preview.camera != searchResult.camera ||
preview.end < searchResult.start_time
) {
return false;
}
if ((searchResult.end_time ?? Date.now() / 1000) > preview.end) {
multiHour = true;
}
return true;
});
if (firstIndex == -1) {
return undefined;
}
if (!multiHour) {
return allPreviews[firstIndex];
}
const firstPrev = allPreviews[firstIndex];
const firstDuration = firstPrev.end - searchResult.start_time;
const secondDuration =
(searchResult.end_time ?? Date.now() / 1000) - firstPrev.end;
if (firstDuration > secondDuration) {
// the first preview is longer than the second, return the first
return firstPrev;
} else {
// the second preview is longer, return the second if it exists
if (firstIndex < allPreviews.length - 1) {
return allPreviews.find(
(preview, idx) =>
idx > firstIndex && preview.camera == searchResult.camera,
);
}
return undefined;
}
}, [allPreviews, searchResult]);
// Hover Playback
const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout | null>();
const [playback, setPlayback] = useState(false);
const [tooltipHovering, setTooltipHovering] = useState(false);
const playingBack = useMemo(
() => playback && !tooltipHovering,
[playback, tooltipHovering],
);
const [isHovered, setIsHovered] = useState(false);
useEffect(() => {
if (isHovered && scrollLock) {
return;
}
if (isHovered && !tooltipHovering) {
setHoverTimeout(
setTimeout(() => {
setPlayback(true);
setHoverTimeout(null);
}, 500),
);
} else {
if (hoverTimeout) {
clearTimeout(hoverTimeout);
}
setPlayback(false);
}
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isHovered, scrollLock, tooltipHovering]);
// date
const formattedDate = useFormattedTimestamp(
searchResult.start_time,
config?.ui.time_format == "24hour" ? "%b %-d, %H:%M" : "%b %-d, %I:%M %p",
);
return (
<div
className="relative size-full cursor-pointer"
onMouseOver={isMobile ? undefined : () => setIsHovered(true)}
onMouseLeave={isMobile ? undefined : () => setIsHovered(false)}
onClick={handleOnClick}
{...swipeHandlers}
>
{playingBack && (
<div className="absolute inset-0 animate-in fade-in">
<PreviewContent
searchResult={searchResult}
relevantPreview={relevantPreview}
setIgnoreClick={setIgnoreClick}
isPlayingBack={setPlayback}
/>
</div>
)}
<ImageLoadingIndicator
className="absolute inset-0"
imgLoaded={imgLoaded}
/>
<div className={`${imgLoaded ? "visible" : "invisible"}`}>
<img
ref={imgRef}
className={`size-full select-none transition-opacity ${
playingBack ? "opacity-0" : "opacity-100"
}`}
style={
isIOS
? {
WebkitUserSelect: "none",
WebkitTouchCallout: "none",
}
: undefined
}
draggable={false}
src={
searchResult.thumb_path
? `${apiHost}${searchResult.thumb_path.replace("/media/frigate/", "")}`
: `${apiHost}api/events/${searchResult.id}/thumbnail.jpg`
}
loading={isSafari ? "eager" : "lazy"}
onLoad={() => {
onImgLoad();
}}
/>
<div className="absolute left-0 top-2 z-40">
<Tooltip>
<div
className="flex"
onMouseEnter={() => setTooltipHovering(true)}
onMouseLeave={() => setTooltipHovering(false)}
>
<TooltipTrigger asChild>
<div className="mx-3 pb-1 text-sm text-white">
{
<>
<Chip
className={`flex items-start justify-between space-x-1 ${playingBack ? "hidden" : ""} "bg-gray-500 z-0 bg-gradient-to-br from-gray-400 to-gray-500`}
>
{getIconForLabel(
searchResult.label,
"size-3 text-white",
)}
</Chip>
</>
}
</div>
</TooltipTrigger>
</div>
<TooltipContent className="capitalize">
{[...new Set([searchResult.label])]
.filter(
(item) => item !== undefined && !item.includes("-verified"),
)
.map((text) => capitalizeFirstLetter(text))
.sort()
.join(", ")
.replaceAll("-verified", "")}
</TooltipContent>
</Tooltip>
</div>
<div className="absolute right-0 top-2 z-40">
<Tooltip>
<div
className="flex"
onMouseEnter={() => setTooltipHovering(true)}
onMouseLeave={() => setTooltipHovering(false)}
>
<TooltipTrigger asChild>
<div className="mx-3 pb-1 text-sm text-white">
{
<>
<Chip
className={`flex items-start justify-between space-x-1 ${playingBack ? "hidden" : ""} "bg-gray-500 z-0 bg-gradient-to-br from-gray-400 to-gray-500`}
onClick={() => onClick(searchResult, true)}
>
<LuInfo className="size-3" />
</Chip>
</>
}
</div>
</TooltipTrigger>
</div>
<TooltipContent className="capitalize">
View Detection Details
</TooltipContent>
</Tooltip>
</div>
{!playingBack && (
<>
<div className="rounded-t-l pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full bg-gradient-to-b from-black/60 to-transparent"></div>
<div className="rounded-b-l pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[20%] w-full bg-gradient-to-t from-black/60 to-transparent">
<div className="mx-3 flex h-full items-end justify-between pb-1 text-sm text-white">
{searchResult.end_time ? (
<TimeAgo time={searchResult.start_time * 1000} dense />
) : (
<div>
<ActivityIndicator size={24} />
</div>
)}
{formattedDate}
</div>
</div>
</>
)}
</div>
</div>
);
}
type PreviewContentProps = {
searchResult: SearchResult;
relevantPreview: Preview | undefined;
setIgnoreClick: (ignore: boolean) => void;
isPlayingBack: (ended: boolean) => void;
onTimeUpdate?: (time: number | undefined) => void;
};
function PreviewContent({
searchResult,
relevantPreview,
setIgnoreClick,
isPlayingBack,
onTimeUpdate,
}: PreviewContentProps) {
// preview
if (relevantPreview) {
return (
<VideoPreview
relevantPreview={relevantPreview}
startTime={searchResult.start_time}
endTime={searchResult.end_time}
setIgnoreClick={setIgnoreClick}
isPlayingBack={isPlayingBack}
onTimeUpdate={onTimeUpdate}
windowVisible={true}
setReviewed={() => {}}
/>
);
} else if (isCurrentHour(searchResult.start_time)) {
return (
/*<InProgressPreview
review={review}
timeRange={timeRange}
setIgnoreClick={setIgnoreClick}
isPlayingBack={isPlayingBack}
onTimeUpdate={onTimeUpdate}
windowVisible={true}
setReviewed={() => { }}
/>*/
<div />
);
}
}

486
web/src/components/preview/ScrubbablePreview.tsx Normal file
View File

@ -0,0 +1,486 @@
import React, {
useCallback,
useEffect,
useMemo,
useRef,
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";
import { NoThumbSlider } from "../ui/slider";
import { PREVIEW_FPS, PREVIEW_PADDING, Preview } from "@/types/preview";
import { baseUrl } from "@/api/baseUrl";
type VideoPreviewProps = {
relevantPreview: Preview;
startTime: number;
endTime?: number;
showProgress?: boolean;
loop?: boolean;
setReviewed: () => void;
setIgnoreClick: (ignore: boolean) => void;
isPlayingBack: (ended: boolean) => void;
onTimeUpdate?: (time: number | undefined) => void;
windowVisible: boolean;
};
export function VideoPreview({
relevantPreview,
startTime,
endTime,
showProgress = true,
loop = false,
setReviewed,
setIgnoreClick,
isPlayingBack,
onTimeUpdate,
windowVisible,
}: VideoPreviewProps) {
const playerRef = useRef<HTMLVideoElement | null>(null);
const sliderRef = useRef<HTMLDivElement | null>(null);
// keep track of playback state
const [progress, setProgress] = useState(0);
const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout>();
const playerStartTime = useMemo(() => {
if (!relevantPreview) {
return 0;
}
// start with a bit of padding
return Math.max(0, startTime - relevantPreview.start - PREVIEW_PADDING);
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const playerDuration = useMemo(
() => (endTime ?? relevantPreview.end) - startTime + PREVIEW_PADDING,
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
[],
);
const [lastPercent, setLastPercent] = useState(0.0);
// initialize player correctly
useEffect(() => {
if (!playerRef.current) {
return;
}
if (isSafari || (isFirefox && isMobile)) {
playerRef.current.pause();
setPlaybackMode("compat");
} else {
playerRef.current.currentTime = playerStartTime;
playerRef.current.playbackRate = PREVIEW_FPS;
}
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [playerRef]);
// time progress update
const onProgress = useCallback(() => {
if (!windowVisible) {
return;
}
if (onTimeUpdate) {
onTimeUpdate(
relevantPreview.start + (playerRef.current?.currentTime || 0),
);
}
const playerProgress =
(playerRef.current?.currentTime || 0) - playerStartTime;
// end with a bit of padding
const playerPercent = (playerProgress / playerDuration) * 100;
if (setReviewed && lastPercent < 50 && playerPercent > 50) {
setReviewed();
}
setLastPercent(playerPercent);
if (playerPercent > 100) {
setReviewed();
if (loop && playerRef.current) {
if (playbackMode != "auto") {
setPlaybackMode("auto");
setTimeout(() => setPlaybackMode("compat"), 100);
}
playerRef.current.currentTime = playerStartTime;
return;
}
if (isMobile) {
isPlayingBack(false);
if (onTimeUpdate) {
onTimeUpdate(undefined);
}
} else {
playerRef.current?.pause();
}
setPlaybackMode("auto");
setProgress(100.0);
} else {
setProgress(playerPercent);
}
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [setProgress, lastPercent, windowVisible]);
// manual playback
// safari is incapable of playing at a speed > 2x
// so manual seeking is required on iOS
const [playbackMode, setPlaybackMode] = useState<TimelineScrubMode>("auto");
useEffect(() => {
if (playbackMode != "compat" || !playerRef.current) {
return;
}
let counter = 0;
const intervalId: NodeJS.Timeout = setInterval(() => {
if (playerRef.current) {
playerRef.current.currentTime = playerStartTime + counter;
counter += 1;
}
}, 1000 / PREVIEW_FPS);
return () => clearInterval(intervalId);
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [playbackMode, playerRef]);
// user interaction
useEffect(() => {
setIgnoreClick(playbackMode != "auto" && playbackMode != "compat");
}, [playbackMode, setIgnoreClick]);
const onManualSeek = useCallback(
(values: number[]) => {
const value = values[0];
if (!playerRef.current) {
return;
}
if (playerRef.current.paused == false) {
playerRef.current.pause();
}
if (setReviewed) {
setReviewed();
}
setProgress(value);
playerRef.current.currentTime =
playerStartTime + (value / 100.0) * playerDuration;
},
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
[playerDuration, playerRef, playerStartTime, setIgnoreClick],
);
const onStopManualSeek = useCallback(() => {
setTimeout(() => {
setHoverTimeout(undefined);
if (isSafari || (isFirefox && isMobile)) {
setPlaybackMode("compat");
} else {
setPlaybackMode("auto");
playerRef.current?.play();
}
}, 500);
}, [playerRef]);
const onProgressHover = useCallback(
(event: React.MouseEvent<HTMLDivElement>) => {
if (!sliderRef.current) {
return;
}
const rect = sliderRef.current.getBoundingClientRect();
const positionX = event.clientX - rect.left;
const width = sliderRef.current.clientWidth;
onManualSeek([Math.round((positionX / width) * 100)]);
if (hoverTimeout) {
clearTimeout(hoverTimeout);
}
},
[sliderRef, hoverTimeout, onManualSeek],
);
return (
<div className="relative aspect-video size-full bg-black">
<video
ref={playerRef}
className="pointer-events-none aspect-video size-full bg-black"
autoPlay
playsInline
preload="auto"
muted
onTimeUpdate={onProgress}
>
<source
src={`${baseUrl}${relevantPreview.src.substring(1)}`}
type={relevantPreview.type}
/>
</video>
{showProgress && (
<NoThumbSlider
ref={sliderRef}
className={`absolute inset-x-0 bottom-0 z-30 cursor-col-resize ${playbackMode == "hover" || playbackMode == "drag" ? "h-4" : "h-2"}`}
value={[progress]}
onValueChange={(event) => {
setPlaybackMode("drag");
onManualSeek(event);
}}
onValueCommit={onStopManualSeek}
min={0}
step={1}
max={100}
onMouseMove={
isMobile
? undefined
: (event) => {
if (playbackMode != "drag") {
setPlaybackMode("hover");
onProgressHover(event);
}
}
}
onMouseLeave={
isMobile
? undefined
: () => {
if (!sliderRef.current) {
return;
}
setHoverTimeout(setTimeout(() => onStopManualSeek(), 500));
}
}
/>
)}
</div>
);
}
const MIN_LOAD_TIMEOUT_MS = 200;
type InProgressPreviewProps = {
review: ReviewSegment;
timeRange: TimeRange;
showProgress?: boolean;
loop?: boolean;
setReviewed: (reviewId: string) => void;
setIgnoreClick: (ignore: boolean) => void;
isPlayingBack: (ended: boolean) => void;
onTimeUpdate?: (time: number | undefined) => void;
windowVisible: boolean;
};
export function InProgressPreview({
review,
timeRange,
showProgress = true,
loop = false,
setReviewed,
setIgnoreClick,
isPlayingBack,
onTimeUpdate,
windowVisible,
}: InProgressPreviewProps) {
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
}/frames`,
{ revalidateOnFocus: false },
);
const [playbackMode, setPlaybackMode] = useState<TimelineScrubMode>("auto");
const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout>();
const [key, setKey] = useState(0);
const handleLoad = useCallback(() => {
if (!previewFrames || !windowVisible) {
return;
}
if (onTimeUpdate) {
onTimeUpdate(review.start_time - PREVIEW_PADDING + key);
}
if (playbackMode != "auto") {
return;
}
if (key == previewFrames.length - 1) {
if (!review.has_been_reviewed) {
setReviewed(review.id);
}
if (loop) {
setKey(0);
return;
}
if (isMobile) {
isPlayingBack(false);
if (onTimeUpdate) {
onTimeUpdate(undefined);
}
}
return;
}
setTimeout(() => {
if (setReviewed && key == Math.floor(previewFrames.length / 2)) {
setReviewed(review.id);
}
if (previewFrames[key + 1]) {
setKey(key + 1);
}
}, MIN_LOAD_TIMEOUT_MS);
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [key, playbackMode, previewFrames]);
// user interaction
useEffect(() => {
setIgnoreClick(playbackMode != "auto");
}, [playbackMode, setIgnoreClick]);
const onManualSeek = useCallback(
(values: number[]) => {
const value = values[0];
if (!review.has_been_reviewed) {
setReviewed(review.id);
}
setKey(value);
},
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
[setIgnoreClick, setKey],
);
const onStopManualSeek = useCallback(
(values: number[]) => {
const value = values[0];
setTimeout(() => {
setPlaybackMode("auto");
setKey(value - 1);
}, 500);
},
[setPlaybackMode],
);
const onProgressHover = useCallback(
(event: React.MouseEvent<HTMLDivElement>) => {
if (!sliderRef.current || !previewFrames) {
return;
}
const rect = sliderRef.current.getBoundingClientRect();
const positionX = event.clientX - rect.left;
const width = sliderRef.current.clientWidth;
const progress = [Math.round((positionX / width) * previewFrames.length)];
onManualSeek(progress);
if (hoverTimeout) {
clearTimeout(hoverTimeout);
}
},
[sliderRef, hoverTimeout, previewFrames, onManualSeek],
);
if (!previewFrames || previewFrames.length == 0) {
return (
<img
className="size-full"
src={`${apiHost}${review.thumb_path.replace("/media/frigate/", "")}`}
/>
);
}
return (
<div className="relative flex size-full items-center bg-black">
<img
className="pointer-events-none size-full object-contain"
src={`${apiHost}api/preview/${previewFrames[key]}/thumbnail.webp`}
onLoad={handleLoad}
/>
{showProgress && (
<NoThumbSlider
ref={sliderRef}
className={`absolute inset-x-0 bottom-0 z-30 cursor-col-resize ${playbackMode != "auto" ? "h-4" : "h-2"}`}
value={[key]}
onValueChange={(event) => {
setPlaybackMode("drag");
onManualSeek(event);
}}
onValueCommit={onStopManualSeek}
min={0}
step={1}
max={previewFrames.length - 1}
onMouseMove={
isMobile
? undefined
: (event) => {
if (playbackMode != "drag") {
setPlaybackMode("hover");
onProgressHover(event);
}
}
}
onMouseLeave={
isMobile
? undefined
: (event) => {
if (!sliderRef.current || !previewFrames) {
return;
}
const rect = sliderRef.current.getBoundingClientRect();
const positionX = event.clientX - rect.left;
const width = sliderRef.current.clientWidth;
const progress = [
Math.round((positionX / width) * previewFrames.length),
];
setHoverTimeout(
setTimeout(() => onStopManualSeek(progress), 500),
);
}
}
/>
)}
</div>
);
}

444
web/src/components/ui/calendar-range.tsx Normal file
View File

@ -0,0 +1,444 @@
/* eslint-disable max-lines */
"use client";
import { type FC, useState, useEffect, useRef } from "react";
import { Button } from "./button";
import { Calendar } from "./calendar";
import { Label } from "./label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "./select";
import { Switch } from "./switch";
import { cn } from "@/lib/utils";
import { LuCheck } from "react-icons/lu";
export interface DateRangePickerProps {
/** Click handler for applying the updates from DateRangePicker. */
onUpdate?: (values: { range: DateRange; rangeCompare?: DateRange }) => void;
/** Initial value for start date */
initialDateFrom?: Date | string;
/** Initial value for end date */
initialDateTo?: Date | string;
/** Initial value for start date for compare */
initialCompareFrom?: Date | string;
/** Initial value for end date for compare */
initialCompareTo?: Date | string;
/** Alignment of popover */
align?: "start" | "center" | "end";
/** Option for locale */
locale?: string;
/** Option for showing compare feature */
showCompare?: boolean;
}
const getDateAdjustedForTimezone = (dateInput: Date | string): Date => {
if (typeof dateInput === "string") {
// Split the date string to get year, month, and day parts
const parts = dateInput.split("-").map((part) => parseInt(part, 10));
// Create a new Date object using the local timezone
// Note: Month is 0-indexed, so subtract 1 from the month part
const date = new Date(parts[0], parts[1] - 1, parts[2]);
return date;
} else {
// If dateInput is already a Date object, return it directly
return dateInput;
}
};
interface DateRange {
from: Date;
to: Date | undefined;
}
interface Preset {
name: string;
label: string;
}
// Define presets
const PRESETS: Preset[] = [
{ name: "today", label: "Today" },
{ name: "yesterday", label: "Yesterday" },
{ name: "last7", label: "Last 7 days" },
{ name: "last14", label: "Last 14 days" },
{ name: "last30", label: "Last 30 days" },
{ name: "thisWeek", label: "This Week" },
{ name: "lastWeek", label: "Last Week" },
{ name: "thisMonth", label: "This Month" },
{ name: "lastMonth", label: "Last Month" },
];
/** The DateRangePicker component allows a user to select a range of dates */
export const DateRangePicker: FC<DateRangePickerProps> = ({
initialDateFrom = new Date(new Date().setHours(0, 0, 0, 0)),
initialDateTo,
initialCompareFrom,
initialCompareTo,
onUpdate,
showCompare = true,
}): JSX.Element => {
const [isOpen, setIsOpen] = useState(false);
const [range, setRange] = useState<DateRange>({
from: getDateAdjustedForTimezone(initialDateFrom),
to: initialDateTo
? getDateAdjustedForTimezone(initialDateTo)
: getDateAdjustedForTimezone(initialDateFrom),
});
const [rangeCompare, setRangeCompare] = useState<DateRange | undefined>(
initialCompareFrom
? {
from: new Date(new Date(initialCompareFrom).setHours(0, 0, 0, 0)),
to: initialCompareTo
? new Date(new Date(initialCompareTo).setHours(0, 0, 0, 0))
: new Date(new Date(initialCompareFrom).setHours(0, 0, 0, 0)),
}
: undefined,
);
// Refs to store the values of range and rangeCompare when the date picker is opened
const openedRangeRef = useRef<DateRange | undefined>();
const openedRangeCompareRef = useRef<DateRange | undefined>();
const [selectedPreset, setSelectedPreset] = useState<string | undefined>(
undefined,
);
const [isSmallScreen, setIsSmallScreen] = useState(
typeof window !== "undefined" ? window.innerWidth < 960 : false,
);
useEffect(() => {
const handleResize = (): void => {
setIsSmallScreen(window.innerWidth < 960);
};
window.addEventListener("resize", handleResize);
// Clean up event listener on unmount
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);
const getPresetRange = (presetName: string): DateRange => {
const preset = PRESETS.find(({ name }) => name === presetName);
if (!preset) throw new Error(`Unknown date range preset: ${presetName}`);
const from = new Date();
const to = new Date();
const first = from.getDate() - from.getDay();
switch (preset.name) {
case "today":
from.setHours(0, 0, 0, 0);
to.setHours(23, 59, 59, 999);
break;
case "yesterday":
from.setDate(from.getDate() - 1);
from.setHours(0, 0, 0, 0);
to.setDate(to.getDate() - 1);
to.setHours(23, 59, 59, 999);
break;
case "last7":
from.setDate(from.getDate() - 6);
from.setHours(0, 0, 0, 0);
to.setHours(23, 59, 59, 999);
break;
case "last14":
from.setDate(from.getDate() - 13);
from.setHours(0, 0, 0, 0);
to.setHours(23, 59, 59, 999);
break;
case "last30":
from.setDate(from.getDate() - 29);
from.setHours(0, 0, 0, 0);
to.setHours(23, 59, 59, 999);
break;
case "thisWeek":
from.setDate(first);
from.setHours(0, 0, 0, 0);
to.setHours(23, 59, 59, 999);
break;
case "lastWeek":
from.setDate(from.getDate() - 7 - from.getDay());
to.setDate(to.getDate() - to.getDay() - 1);
from.setHours(0, 0, 0, 0);
to.setHours(23, 59, 59, 999);
break;
case "thisMonth":
from.setDate(1);
from.setHours(0, 0, 0, 0);
to.setHours(23, 59, 59, 999);
break;
case "lastMonth":
from.setMonth(from.getMonth() - 1);
from.setDate(1);
from.setHours(0, 0, 0, 0);
to.setDate(0);
to.setHours(23, 59, 59, 999);
break;
}
return { from, to };
};
const setPreset = (preset: string): void => {
const range = getPresetRange(preset);
setRange(range);
if (rangeCompare) {
const rangeCompare = {
from: new Date(
range.from.getFullYear() - 1,
range.from.getMonth(),
range.from.getDate(),
),
to: range.to
? new Date(
range.to.getFullYear() - 1,
range.to.getMonth(),
range.to.getDate(),
)
: undefined,
};
setRangeCompare(rangeCompare);
}
};
const checkPreset = (): void => {
for (const preset of PRESETS) {
const presetRange = getPresetRange(preset.name);
const normalizedRangeFrom = new Date(range.from);
normalizedRangeFrom.setHours(0, 0, 0, 0);
const normalizedPresetFrom = new Date(
presetRange.from.setHours(0, 0, 0, 0),
);
const normalizedRangeTo = new Date(range.to ?? 0);
normalizedRangeTo.setHours(0, 0, 0, 0);
const normalizedPresetTo = new Date(
presetRange.to?.setHours(0, 0, 0, 0) ?? 0,
);
if (
normalizedRangeFrom.getTime() === normalizedPresetFrom.getTime() &&
normalizedRangeTo.getTime() === normalizedPresetTo.getTime()
) {
setSelectedPreset(preset.name);
return;
}
}
setSelectedPreset(undefined);
};
const resetValues = (): void => {
setRange({
from:
typeof initialDateFrom === "string"
? getDateAdjustedForTimezone(initialDateFrom)
: initialDateFrom,
to: initialDateTo
? typeof initialDateTo === "string"
? getDateAdjustedForTimezone(initialDateTo)
: initialDateTo
: typeof initialDateFrom === "string"
? getDateAdjustedForTimezone(initialDateFrom)
: initialDateFrom,
});
setRangeCompare(
initialCompareFrom
? {
from:
typeof initialCompareFrom === "string"
? getDateAdjustedForTimezone(initialCompareFrom)
: initialCompareFrom,
to: initialCompareTo
? typeof initialCompareTo === "string"
? getDateAdjustedForTimezone(initialCompareTo)
: initialCompareTo
: typeof initialCompareFrom === "string"
? getDateAdjustedForTimezone(initialCompareFrom)
: initialCompareFrom,
}
: undefined,
);
};
useEffect(() => {
checkPreset();
}, [range]);
const PresetButton = ({
preset,
label,
isSelected,
}: {
preset: string;
label: string;
isSelected: boolean;
}): JSX.Element => (
<Button
className={cn(isSelected && "pointer-events-none text-white")}
variant="ghost"
onClick={() => {
setPreset(preset);
}}
>
<>
<span className={cn("pr-2 opacity-0", isSelected && "opacity-70")}>
<LuCheck width={18} height={18} />
</span>
{label}
</>
</Button>
);
// Helper function to check if two date ranges are equal
const areRangesEqual = (a?: DateRange, b?: DateRange): boolean => {
if (!a || !b) return a === b; // If either is undefined, return true if both are undefined
return (
a.from.getTime() === b.from.getTime() &&
(!a.to || !b.to || a.to.getTime() === b.to.getTime())
);
};
useEffect(() => {
if (isOpen) {
openedRangeRef.current = range;
openedRangeCompareRef.current = rangeCompare;
}
}, [isOpen]);
return (
<div className="w-full">
<div className="flex py-2">
<div className="flex">
<div className="flex flex-col">
<div className="flex flex-col items-center justify-end gap-2 px-3 pb-4 lg:flex-row lg:items-start lg:pb-0">
{showCompare && (
<div className="flex items-center space-x-2 py-1 pr-4">
<Switch
defaultChecked={Boolean(rangeCompare)}
onCheckedChange={(checked: boolean) => {
if (checked) {
if (!range.to) {
setRange({
from: range.from,
to: range.from,
});
}
setRangeCompare({
from: new Date(
range.from.getFullYear(),
range.from.getMonth(),
range.from.getDate() - 365,
),
to: range.to
? new Date(
range.to.getFullYear() - 1,
range.to.getMonth(),
range.to.getDate(),
)
: new Date(
range.from.getFullYear() - 1,
range.from.getMonth(),
range.from.getDate(),
),
});
} else {
setRangeCompare(undefined);
}
}}
id="compare-mode"
/>
<Label htmlFor="compare-mode">Compare</Label>
</div>
)}
</div>
{isSmallScreen && (
<Select
defaultValue={selectedPreset}
onValueChange={(value) => {
setPreset(value);
}}
>
<SelectTrigger className="mx-auto mb-2 w-[180px]">
<SelectValue placeholder="Select..." />
</SelectTrigger>
<SelectContent>
{PRESETS.map((preset) => (
<SelectItem key={preset.name} value={preset.name}>
{preset.label}
</SelectItem>
))}
</SelectContent>
</Select>
)}
<div>
<Calendar
mode="range"
onSelect={(value: { from?: Date; to?: Date } | undefined) => {
if (value?.from != null) {
setRange({ from: value.from, to: value?.to });
}
}}
selected={range}
numberOfMonths={isSmallScreen ? 1 : 2}
defaultMonth={
new Date(
new Date().setMonth(
new Date().getMonth() - (isSmallScreen ? 0 : 1),
),
)
}
/>
</div>
</div>
</div>
{!isSmallScreen && (
<div className="flex flex-col items-end gap-1 pb-6 pl-6 pr-2">
<div className="flex w-full flex-col items-end gap-1 pb-6 pl-6 pr-2">
{PRESETS.map((preset) => (
<PresetButton
key={preset.name}
preset={preset.name}
label={preset.label}
isSelected={selectedPreset === preset.name}
/>
))}
</div>
</div>
)}
</div>
<div className="flex justify-end gap-2 py-2 pr-4">
<Button
onClick={() => {
setIsOpen(false);
resetValues();
}}
variant="ghost"
>
Cancel
</Button>
<Button
onClick={() => {
setIsOpen(false);
if (
!areRangesEqual(range, openedRangeRef.current) ||
!areRangesEqual(rangeCompare, openedRangeCompareRef.current)
) {
onUpdate?.({ range, rangeCompare });
}
}}
>
Update
</Button>
</div>
</div>
);
};

24
web/src/components/ui/textarea.tsx Normal file
View File

@ -0,0 +1,24 @@
import * as React from "react"
import { cn } from "@/lib/utils"
export interface TextareaProps
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
({ className, ...props }, ref) => {
return (
<textarea
className={cn(
"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
{...props}
/>
)
}
)
Textarea.displayName = "Textarea"
export { Textarea }

15
web/src/hooks/use-date-utils.ts
View File

@ -12,6 +12,21 @@ export function useFormattedTimestamp(timestamp: number, format: string) {
return formattedTimestamp;
}
export function useFormattedRange(start: number, end: number, format: string) {
const formattedStart = useMemo(() => {
return formatUnixTimestampToDateTime(start, {
strftime_fmt: format,
});
}, [format, start]);
const formattedEnd = useMemo(() => {
return formatUnixTimestampToDateTime(end, {
strftime_fmt: format,
});
}, [format, end]);
return `${formattedStart} - ${formattedEnd}`;
}
export function useTimezone(config: FrigateConfig | undefined) {
return useMemo(() => {
if (!config) {

28
web/src/hooks/use-navigation.ts
View File

@ -4,10 +4,18 @@ 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_SEARCH = 3;
export const ID_EXPORT = 4;
export const ID_PLUS = 5;
export const ID_PLAYGROUND = 6;
export default function useNavigation(
variant: "primary" | "secondary" = "primary",
) {
@ -17,28 +25,36 @@ export default function useNavigation(
() =>
[
{
id: 1,
id: ID_LIVE,
variant,
icon: FaVideo,
title: "Live",
url: "/",
},
{
id: 2,
id: ID_REVIEW,
variant,
icon: MdVideoLibrary,
title: "Review",
url: "/review",
},
{
id: 3,
id: ID_SEARCH,
variant,
icon: IoSearch,
title: "Search",
url: "/search",
enabled: config?.semantic_search?.enabled,
},
{
id: ID_EXPORT,
variant,
icon: FaCompactDisc,
title: "Export",
url: "/export",
},
{
id: 5,
id: ID_PLUS,
variant,
icon: Logo,
title: "Frigate+",
@ -46,7 +62,7 @@ export default function useNavigation(
enabled: config?.plus?.enabled == true,
},
{
id: 4,
id: ID_PLAYGROUND,
variant,
icon: LuConstruction,
title: "UI Playground",
@ -54,6 +70,6 @@ export default function useNavigation(
enabled: ENV !== "production",
},
] as NavData[],
[config?.plus.enabled, variant],
[config?.plus.enabled, config?.semantic_search.enabled, variant],
);
}

2
web/src/pages/Events.tsx
View File

@ -15,7 +15,7 @@ import {
SegmentedReviewData,
} from "@/types/review";
import EventView from "@/views/events/EventView";
import { RecordingView } from "@/views/events/RecordingView";
import { RecordingView } from "@/views/recording/RecordingView";
import axios from "axios";
import { useCallback, useEffect, useMemo, useState } from "react";
import useSWR from "swr";

201
web/src/pages/Search.tsx Normal file
View File

@ -0,0 +1,201 @@
import useApiFilter from "@/hooks/use-api-filter";
import { useCameraPreviews } from "@/hooks/use-camera-previews";
import { useOverlayState } from "@/hooks/use-overlay-state";
import { FrigateConfig } from "@/types/frigateConfig";
import { RecordingStartingPoint } from "@/types/record";
import { SearchFilter, SearchResult } from "@/types/search";
import { TimeRange } from "@/types/timeline";
import { RecordingView } from "@/views/recording/RecordingView";
import SearchView from "@/views/search/SearchView";
import { useCallback, useEffect, useMemo, useState } from "react";
import useSWR from "swr";
export default function Search() {
const { data: config } = useSWR<FrigateConfig>("config", {
revalidateOnFocus: false,
});
// search field handler
const [searchTimeout, setSearchTimeout] = useState<NodeJS.Timeout>();
const [search, setSearch] = useState("");
const [searchTerm, setSearchTerm] = useState("");
const [recording, setRecording] =
useOverlayState<RecordingStartingPoint>("recording");
// search filter
const [searchFilter, setSearchFilter, searchSearchParams] =
useApiFilter<SearchFilter>();
const onUpdateFilter = useCallback(
(newFilter: SearchFilter) => {
setSearchFilter(newFilter);
},
[setSearchFilter],
);
// search api
const [similaritySearch, setSimilaritySearch] = useState<SearchResult>();
useEffect(() => {
if (similaritySearch) {
setSimilaritySearch(undefined);
}
if (searchTimeout) {
clearTimeout(searchTimeout);
}
setSearchTimeout(
setTimeout(() => {
setSearchTimeout(undefined);
setSearchTerm(search);
}, 500),
);
// we only want to update the searchTerm when search changes
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [search]);
const searchQuery = useMemo(() => {
if (searchTerm.length == 0) {
return null;
}
if (similaritySearch) {
return [
"events/search",
{
query: similaritySearch.id,
cameras: searchSearchParams["cameras"],
labels: searchSearchParams["labels"],
zones: searchSearchParams["zones"],
before: searchSearchParams["before"],
after: searchSearchParams["after"],
include_thumbnails: 0,
search_type: "thumbnail",
},
];
}
return [
"events/search",
{
query: searchTerm,
cameras: searchSearchParams["cameras"],
labels: searchSearchParams["labels"],
zones: searchSearchParams["zones"],
before: searchSearchParams["before"],
after: searchSearchParams["after"],
include_thumbnails: 0,
},
];
}, [searchTerm, searchSearchParams, similaritySearch]);
const { data: searchResults, isLoading } =
useSWR<SearchResult[]>(searchQuery);
const previewTimeRange = useMemo<TimeRange>(() => {
if (!searchResults) {
return { after: 0, before: 0 };
}
return {
after: Math.min(...searchResults.map((res) => res.start_time)),
before: Math.max(
...searchResults.map((res) => res.end_time ?? Date.now() / 1000),
),
};
}, [searchResults]);
const allPreviews = useCameraPreviews(previewTimeRange, {
autoRefresh: false,
fetchPreviews: searchResults != undefined,
});
// selection
const onOpenSearch = useCallback(
(item: SearchResult) => {
setRecording({
camera: item.camera,
startTime: item.start_time,
severity: "alert",
});
},
[setRecording],
);
const selectedReviewData = useMemo(() => {
if (!recording) {
return undefined;
}
if (!config) {
return undefined;
}
if (!searchResults) {
return undefined;
}
const allCameras = searchFilter?.cameras ?? Object.keys(config.cameras);
return {
camera: recording.camera,
start_time: recording.startTime,
allCameras: allCameras,
};
// previews will not update after item is selected
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [recording, searchResults]);
const selectedTimeRange = useMemo(() => {
if (!recording) {
return undefined;
}
const time = new Date(recording.startTime * 1000);
time.setUTCMinutes(0, 0, 0);
const start = time.getTime() / 1000;
time.setHours(time.getHours() + 2);
const end = time.getTime() / 1000;
return {
after: start,
before: end,
};
}, [recording]);
if (recording) {
if (selectedReviewData && selectedTimeRange) {
return (
<RecordingView
startCamera={selectedReviewData.camera}
startTime={selectedReviewData.start_time}
allCameras={selectedReviewData.allCameras}
allPreviews={allPreviews}
timeRange={selectedTimeRange}
updateFilter={onUpdateFilter}
/>
);
}
} else {
return (
<SearchView
search={search}
searchTerm={searchTerm}
searchFilter={searchFilter}
searchResults={searchResults}
allPreviews={allPreviews}
isLoading={isLoading}
setSearch={setSearch}
setSimilaritySearch={setSimilaritySearch}
onUpdateFilter={onUpdateFilter}
onOpenSearch={onOpenSearch}
/>
);
}
}

6
web/src/pages/SubmitPlus.tsx
View File

@ -1,8 +1,6 @@
import { baseUrl } from "@/api/baseUrl";
import {
CamerasFilterButton,
GeneralFilterContent,
} from "@/components/filter/ReviewFilterGroup";
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 { Button } from "@/components/ui/button";

4
web/src/types/frigateConfig.ts
View File

@ -398,6 +398,10 @@ export interface FrigateConfig {
enabled: boolean;
};
semantic_search: {
enabled: boolean;
}
snapshots: {
bounding_box: boolean;
clean_copy: boolean;

20
web/src/types/search.ts Normal file
View File

@ -0,0 +1,20 @@
export type SearchResult = {
id: string;
camera: string;
description?: string;
start_time: number;
end_time?: number;
score: number;
label: string;
sub_label?: string;
thumb_path?: string;
zones: string[];
};
export type SearchFilter = {
cameras?: string[];
labels?: string[];
zones?: string[];
before?: number;
after?: number;
};

0
web/src/views/events/RecordingView.tsx → web/src/views/recording/RecordingView.tsx
View File

126
web/src/views/search/SearchView.tsx Normal file
View File

@ -0,0 +1,126 @@
import SearchFilterGroup from "@/components/filter/SearchFilterGroup";
import ActivityIndicator from "@/components/indicators/activity-indicator";
import SearchDetailDialog from "@/components/overlay/SearchDetailDialog";
import SearchThumbnailPlayer from "@/components/player/SearchThumbnailPlayer";
import { Input } from "@/components/ui/input";
import { Toaster } from "@/components/ui/sonner";
import { Preview } from "@/types/preview";
import { SearchFilter, SearchResult } from "@/types/search";
import { useCallback, useState } from "react";
import { LuSearchCheck, LuSearchX } from "react-icons/lu";
type SearchViewProps = {
search: string;
searchTerm: string;
searchFilter?: SearchFilter;
searchResults?: SearchResult[];
allPreviews?: Preview[];
isLoading: boolean;
setSearch: (search: string) => void;
setSimilaritySearch: (search: SearchResult) => void;
onUpdateFilter: (filter: SearchFilter) => void;
onOpenSearch: (item: SearchResult) => void;
};
export default function SearchView({
search,
searchTerm,
searchFilter,
searchResults,
allPreviews,
isLoading,
setSearch,
setSimilaritySearch,
onUpdateFilter,
onOpenSearch,
}: SearchViewProps) {
// detail
const [searchDetail, setSearchDetail] = useState<SearchResult>();
// search interaction
const onSelectSearch = useCallback(
(item: SearchResult, detail: boolean) => {
if (detail) {
setSearchDetail(item);
} else {
onOpenSearch(item);
}
},
[onOpenSearch],
);
return (
<div className="flex size-full flex-col pt-2 md:py-2">
<Toaster closeButton={true} />
<SearchDetailDialog
search={searchDetail}
setSearch={setSearchDetail}
setSimilarity={
searchDetail && (() => setSimilaritySearch(searchDetail))
}
/>
<div className="relative mb-2 flex h-11 items-center justify-between pl-2 pr-2 md:pl-3">
<Input
className={"text-md mr-2 w-full bg-muted md:mr-0 md:w-1/3"}
placeholder="Search for a specific detection..."
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
<SearchFilterGroup
filter={searchFilter}
onUpdateFilter={onUpdateFilter}
/>
</div>
<div className="no-scrollbar flex flex-1 flex-wrap content-start gap-2 overflow-y-auto md:gap-4">
{searchTerm.length == 0 && (
<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">
<LuSearchCheck className="size-16" />
Search For Detections
</div>
)}
{searchTerm.length > 0 && searchResults?.length == 0 && (
<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">
<LuSearchX className="size-16" />
No Detections Found
</div>
)}
{isLoading && (
<ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
)}
<div className="grid w-full gap-2 px-1 sm:grid-cols-2 md:mx-2 md:grid-cols-3 md:gap-4 3xl:grid-cols-4">
{searchResults &&
searchResults.map((value) => {
const selected = false;
return (
<div
key={value.id}
data-start={value.start_time}
className="review-item relative rounded-lg"
>
<div className="aspect-video overflow-hidden rounded-lg">
<SearchThumbnailPlayer
searchResult={value}
allPreviews={allPreviews}
scrollLock={false}
onClick={onSelectSearch}
/>
</div>
<div
className={`review-item-ring pointer-events-none absolute inset-0 z-10 size-full rounded-lg outline outline-[3px] -outline-offset-[2.8px] ${selected ? `shadow-severity_alert outline-severity_alert` : "outline-transparent duration-500"}`}
/>
</div>
);
})}
</div>
</div>
</div>
);
}