administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-12-06 21:44:13 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

use new hooks for user based keys

Browse Source
This commit is contained in:
Josh Hawkins 2025-11-30 06:57:35 -06:00
parent 2cb94f173f
commit 2d6e23fe6d
17 changed files with 66 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/camera/DebugCameraImage.tsx
View File

@ -5,7 +5,7 @@ import { Button } from "../ui/button";
import { LuSettings } from "react-icons/lu"; import { LuSettings } from "react-icons/lu";
import { useCallback, useMemo, useState } from "react"; import { useCallback, useMemo, useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { usePersistence } from "@/hooks/use-persistence"; import { useUserPersistence } from "@/hooks/use-user-persistence";
import AutoUpdatingCameraImage from "./AutoUpdatingCameraImage"; import AutoUpdatingCameraImage from "./AutoUpdatingCameraImage";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@ -24,7 +24,7 @@ export default function DebugCameraImage({
}: DebugCameraImageProps) { }: DebugCameraImageProps) {
const { t } = useTranslation(["components/camera"]); const { t } = useTranslation(["components/camera"]);
const [showSettings, setShowSettings] = useState(false); const [showSettings, setShowSettings] = useState(false);
const [options, setOptions] = usePersistence<Options>( const [options, setOptions] = useUserPersistence<Options>(
`${cameraConfig?.name}-feed`, `${cameraConfig?.name}-feed`,
emptyObject, emptyObject,
); );

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

@ -13,7 +13,7 @@ import { baseUrl } from "@/api/baseUrl";
import { VideoPreview } from "../preview/ScrubbablePreview"; import { VideoPreview } from "../preview/ScrubbablePreview";
import { useApiHost } from "@/api"; import { useApiHost } from "@/api";
import { isDesktop, isSafari } from "react-device-detect"; import { isDesktop, isSafari } from "react-device-detect";
import { usePersistence } from "@/hooks/use-persistence"; import { useUserPersistence } from "@/hooks/use-user-persistence";
import { Skeleton } from "../ui/skeleton"; import { Skeleton } from "../ui/skeleton";
import { Button } from "../ui/button"; import { Button } from "../ui/button";
import { FaCircleCheck } from "react-icons/fa6"; import { FaCircleCheck } from "react-icons/fa6";
@ -112,7 +112,7 @@ export function AnimatedEventCard({
// image behavior // image behavior
const [alertVideos, _, alertVideosLoaded] = usePersistence( const [alertVideos, _, alertVideosLoaded] = useUserPersistence(
"alertVideos", "alertVideos",
true, true,
); );

10
web/src/components/filter/CameraGroupSelector.tsx
View File

@ -7,7 +7,6 @@ import {
import { isDesktop, isMobile } from "react-device-detect"; import { isDesktop, isMobile } from "react-device-detect";
import useSWR from "swr"; import useSWR from "swr";
import { MdHome } from "react-icons/md"; import { MdHome } from "react-icons/md";
import { usePersistedOverlayState } from "@/hooks/use-overlay-state";
import { Button, buttonVariants } from "../ui/button"; import { Button, buttonVariants } from "../ui/button";
import { useCallback, useEffect, useMemo, useState } from "react"; import { useCallback, useEffect, useMemo, useState } from "react";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"; import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
@ -57,7 +56,7 @@ import { Toaster } from "@/components/ui/sonner";
import { toast } from "sonner"; import { toast } from "sonner";
import ActivityIndicator from "../indicators/activity-indicator"; import ActivityIndicator from "../indicators/activity-indicator";
import { ScrollArea, ScrollBar } from "../ui/scroll-area"; import { ScrollArea, ScrollBar } from "../ui/scroll-area";
import { usePersistence } from "@/hooks/use-persistence"; import { useUserPersistence } from "@/hooks/use-user-persistence";
import { TooltipPortal } from "@radix-ui/react-tooltip"; import { TooltipPortal } from "@radix-ui/react-tooltip";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import * as LuIcons from "react-icons/lu"; import * as LuIcons from "react-icons/lu";
@ -79,6 +78,7 @@ import { Trans, useTranslation } from "react-i18next";
import { CameraNameLabel } from "../camera/FriendlyNameLabel"; import { CameraNameLabel } from "../camera/FriendlyNameLabel";
import { useAllowedCameras } from "@/hooks/use-allowed-cameras"; import { useAllowedCameras } from "@/hooks/use-allowed-cameras";
import { useIsAdmin } from "@/hooks/use-is-admin"; import { useIsAdmin } from "@/hooks/use-is-admin";
import { useUserPersistedOverlayState } from "@/hooks/use-overlay-state";
type CameraGroupSelectorProps = { type CameraGroupSelectorProps = {
className?: string; className?: string;
@ -109,9 +109,9 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
[timeoutId], [timeoutId],
); );
// groups // groups - use user-namespaced key for persistence to avoid cross-user conflicts
const [group, setGroup, , deleteGroup] = usePersistedOverlayState( const [group, setGroup, , deleteGroup] = useUserPersistedOverlayState(
"cameraGroup", "cameraGroup",
"default" as string, "default" as string,
); );
@ -276,7 +276,7 @@ function NewGroupDialog({
const [editState, setEditState] = useState<"none" | "add" | "edit">("none"); const [editState, setEditState] = useState<"none" | "add" | "edit">("none");
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [, , , deleteGridLayout] = usePersistence( const [, , , deleteGridLayout] = useUserPersistence(
`${activeGroup}-draggable-layout`, `${activeGroup}-draggable-layout`,
); );

7
web/src/components/input/InputWithTags.tsx
View File

@ -37,7 +37,7 @@ import {
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"; import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
import { TooltipPortal } from "@radix-ui/react-tooltip"; import { TooltipPortal } from "@radix-ui/react-tooltip";
import { usePersistence } from "@/hooks/use-persistence"; import { useUserPersistence } from "@/hooks/use-user-persistence";
import { SaveSearchDialog } from "./SaveSearchDialog"; import { SaveSearchDialog } from "./SaveSearchDialog";
import { DeleteSearchDialog } from "./DeleteSearchDialog"; import { DeleteSearchDialog } from "./DeleteSearchDialog";
import { import {
@ -128,9 +128,8 @@ export default function InputWithTags({
// TODO: search history from browser storage // TODO: search history from browser storage
const [searchHistory, setSearchHistory, searchHistoryLoaded] = usePersistence< const [searchHistory, setSearchHistory, searchHistoryLoaded] =
SavedSearchQuery[] useUserPersistence<SavedSearchQuery[]>("frigate-search-history");
>("frigate-search-history");
const [isSaveDialogOpen, setIsSaveDialogOpen] = useState(false); const [isSaveDialogOpen, setIsSaveDialogOpen] = useState(false);
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false); const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);

6
web/src/components/overlay/ReviewActivityCalendar.tsx
View File

@ -5,7 +5,7 @@ import { FaCircle } from "react-icons/fa";
import { getUTCOffset } from "@/utils/dateUtil"; import { getUTCOffset } from "@/utils/dateUtil";
import { type DayButtonProps, TZDate } from "react-day-picker"; import { type DayButtonProps, TZDate } from "react-day-picker";
import { LAST_24_HOURS_KEY } from "@/types/filter"; import { LAST_24_HOURS_KEY } from "@/types/filter";
import { usePersistence } from "@/hooks/use-persistence"; import { useUserPersistence } from "@/hooks/use-user-persistence";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { FrigateConfig } from "@/types/frigateConfig"; import { FrigateConfig } from "@/types/frigateConfig";
import useSWR from "swr"; import useSWR from "swr";
@ -27,7 +27,7 @@ export default function ReviewActivityCalendar({
}: ReviewActivityCalendarProps) { }: ReviewActivityCalendarProps) {
const { data: config } = useSWR<FrigateConfig>("config"); const { data: config } = useSWR<FrigateConfig>("config");
const timezone = useTimezone(config); const timezone = useTimezone(config);
const [weekStartsOn] = usePersistence("weekStartsOn", 0); const [weekStartsOn] = useUserPersistence("weekStartsOn", 0);
const disabledDates = useMemo(() => { const disabledDates = useMemo(() => {
const tomorrow = new Date(); const tomorrow = new Date();
@ -176,7 +176,7 @@ export function TimezoneAwareCalendar({
selectedDay, selectedDay,
onSelect, onSelect,
}: TimezoneAwareCalendarProps) { }: TimezoneAwareCalendarProps) {
const [weekStartsOn] = usePersistence("weekStartsOn", 0); const [weekStartsOn] = useUserPersistence("weekStartsOn", 0);
const timezoneOffset = useMemo( const timezoneOffset = useMemo(
() => () =>

6
web/src/components/player/HlsVideoPlayer.tsx
View File

@ -15,7 +15,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
import { AxiosResponse } from "axios"; import { AxiosResponse } from "axios";
import { toast } from "sonner"; import { toast } from "sonner";
import { useOverlayState } from "@/hooks/use-overlay-state"; import { useOverlayState } from "@/hooks/use-overlay-state";
import { usePersistence } from "@/hooks/use-persistence"; import { useUserPersistence } from "@/hooks/use-user-persistence";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { ASPECT_VERTICAL_LAYOUT, RecordingPlayerError } from "@/types/record"; import { ASPECT_VERTICAL_LAYOUT, RecordingPlayerError } from "@/types/record";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@ -210,9 +210,9 @@ export default function HlsVideoPlayer({
const [tallCamera, setTallCamera] = useState(false); const [tallCamera, setTallCamera] = useState(false);
const [isPlaying, setIsPlaying] = useState(true); const [isPlaying, setIsPlaying] = useState(true);
const [muted, setMuted] = usePersistence("hlsPlayerMuted", true); const [muted, setMuted] = useUserPersistence("hlsPlayerMuted", true);
const [volume, setVolume] = useOverlayState("playerVolume", 1.0); const [volume, setVolume] = useOverlayState("playerVolume", 1.0);
const [defaultPlaybackRate] = usePersistence("playbackRate", 1); const [defaultPlaybackRate] = useUserPersistence("playbackRate", 1);
const [playbackRate, setPlaybackRate] = useOverlayState( const [playbackRate, setPlaybackRate] = useOverlayState(
"playbackRate", "playbackRate",
defaultPlaybackRate ?? 1, defaultPlaybackRate ?? 1,

7
web/src/components/player/MsePlayer.tsx
View File

@ -1,5 +1,5 @@
import { baseUrl } from "@/api/baseUrl"; import { baseUrl } from "@/api/baseUrl";
import { usePersistence } from "@/hooks/use-persistence"; import { useUserPersistence } from "@/hooks/use-user-persistence";
import { import {
LivePlayerError, LivePlayerError,
PlayerStatsType, PlayerStatsType,
@ -72,7 +72,10 @@ function MSEPlayer({
const [errorCount, setErrorCount] = useState<number>(0); const [errorCount, setErrorCount] = useState<number>(0);
const totalBytesLoaded = useRef(0); const totalBytesLoaded = useRef(0);
const [fallbackTimeout] = usePersistence<number>("liveFallbackTimeout", 3); const [fallbackTimeout] = useUserPersistence<number>(
"liveFallbackTimeout",
3,
);
const videoRef = useRef<HTMLVideoElement>(null); const videoRef = useRef<HTMLVideoElement>(null);
const wsRef = useRef<WebSocket | null>(null); const wsRef = useRef<WebSocket | null>(null);

4
web/src/components/timeline/DetailStream.tsx
View File

@ -24,7 +24,7 @@ import { cn } from "@/lib/utils";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"; import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { Switch } from "@/components/ui/switch"; import { Switch } from "@/components/ui/switch";
import { usePersistence } from "@/hooks/use-persistence"; import { useUserPersistence } from "@/hooks/use-user-persistence";
import { isDesktop } from "react-device-detect"; import { isDesktop } from "react-device-detect";
import { resolveZoneName } from "@/hooks/use-zone-friendly-name"; import { resolveZoneName } from "@/hooks/use-zone-friendly-name";
import { PiSlidersHorizontalBold } from "react-icons/pi"; import { PiSlidersHorizontalBold } from "react-icons/pi";
@ -58,7 +58,7 @@ export default function DetailStream({
const effectiveTime = currentTime - annotationOffset / 1000; const effectiveTime = currentTime - annotationOffset / 1000;
const [upload, setUpload] = useState<Event | undefined>(undefined); const [upload, setUpload] = useState<Event | undefined>(undefined);
const [controlsExpanded, setControlsExpanded] = useState(false); const [controlsExpanded, setControlsExpanded] = useState(false);
const [alwaysExpandActive, setAlwaysExpandActive] = usePersistence( const [alwaysExpandActive, setAlwaysExpandActive] = useUserPersistence(
"detailStreamActiveExpanded", "detailStreamActiveExpanded",
true, true,
); );

4
web/src/context/streaming-settings-provider.tsx
View File

@ -6,7 +6,7 @@ import {
useContext, useContext,
} from "react"; } from "react";
import { AllGroupsStreamingSettings } from "@/types/frigateConfig"; import { AllGroupsStreamingSettings } from "@/types/frigateConfig";
import { usePersistence } from "@/hooks/use-persistence"; import { useUserPersistence } from "@/hooks/use-user-persistence";
type StreamingSettingsContextType = { type StreamingSettingsContextType = {
allGroupsStreamingSettings: AllGroupsStreamingSettings; allGroupsStreamingSettings: AllGroupsStreamingSettings;
@ -29,7 +29,7 @@ export function StreamingSettingsProvider({
persistedGroupStreamingSettings, persistedGroupStreamingSettings,
setPersistedGroupStreamingSettings, setPersistedGroupStreamingSettings,
isPersistedStreamingSettingsLoaded, isPersistedStreamingSettingsLoaded,
] = usePersistence<AllGroupsStreamingSettings>("streaming-settings"); ] = useUserPersistence<AllGroupsStreamingSettings>("streaming-settings");
useEffect(() => { useEffect(() => {
if (isPersistedStreamingSettingsLoaded) { if (isPersistedStreamingSettingsLoaded) {

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

@ -3,7 +3,7 @@ import useApiFilter from "@/hooks/use-api-filter";
import { useCameraPreviews } from "@/hooks/use-camera-previews"; import { useCameraPreviews } from "@/hooks/use-camera-previews";
import { useTimezone } from "@/hooks/use-date-utils"; import { useTimezone } from "@/hooks/use-date-utils";
import { useOverlayState, useSearchEffect } from "@/hooks/use-overlay-state"; import { useOverlayState, useSearchEffect } from "@/hooks/use-overlay-state";
import { usePersistence } from "@/hooks/use-persistence"; import { useUserPersistence } from "@/hooks/use-user-persistence";
import { FrigateConfig } from "@/types/frigateConfig"; import { FrigateConfig } from "@/types/frigateConfig";
import { RecordingStartingPoint } from "@/types/record"; import { RecordingStartingPoint } from "@/types/record";
import { import {
@ -42,7 +42,10 @@ export default function Events() {
"alert", "alert",
); );
const [showReviewed, setShowReviewed] = usePersistence("showReviewed", false); const [showReviewed, setShowReviewed] = useUserPersistence(
"showReviewed",
false,
);
const [recording, setRecording] = useOverlayState<RecordingStartingPoint>( const [recording, setRecording] = useOverlayState<RecordingStartingPoint>(
"recording", "recording",

9
web/src/pages/Explore.tsx
View File

@ -7,7 +7,7 @@ import ActivityIndicator from "@/components/indicators/activity-indicator";
import AnimatedCircularProgressBar from "@/components/ui/circular-progress-bar"; import AnimatedCircularProgressBar from "@/components/ui/circular-progress-bar";
import { useApiFilterArgs } from "@/hooks/use-api-filter"; import { useApiFilterArgs } from "@/hooks/use-api-filter";
import { useTimezone } from "@/hooks/use-date-utils"; import { useTimezone } from "@/hooks/use-date-utils";
import { usePersistence } from "@/hooks/use-persistence"; import { useUserPersistence } from "@/hooks/use-user-persistence";
import { FrigateConfig } from "@/types/frigateConfig"; import { FrigateConfig } from "@/types/frigateConfig";
import { SearchFilter, SearchQuery, SearchResult } from "@/types/search"; import { SearchFilter, SearchQuery, SearchResult } from "@/types/search";
import { ModelState } from "@/types/ws"; import { ModelState } from "@/types/ws";
@ -47,7 +47,10 @@ export default function Explore() {
// grid // grid
const [columnCount, setColumnCount] = usePersistence("exploreGridColumns", 4); const [columnCount, setColumnCount] = useUserPersistence(
"exploreGridColumns",
4,
);
const gridColumns = useMemo(() => { const gridColumns = useMemo(() => {
if (isMobileOnly) { if (isMobileOnly) {
return 2; return 2;
@ -57,7 +60,7 @@ export default function Explore() {
// default layout // default layout
const [defaultView, setDefaultView, defaultViewLoaded] = usePersistence( const [defaultView, setDefaultView, defaultViewLoaded] = useUserPersistence(
"exploreDefaultView", "exploreDefaultView",
"summary", "summary",
); );

9
web/src/pages/Live.tsx
View File

@ -1,10 +1,7 @@
import { useFullscreen } from "@/hooks/use-fullscreen"; import { useFullscreen } from "@/hooks/use-fullscreen";
import useKeyboardListener from "@/hooks/use-keyboard-listener"; import useKeyboardListener from "@/hooks/use-keyboard-listener";
import { import { useHashState, useSearchEffect } from "@/hooks/use-overlay-state";
useHashState, import { useUserPersistedOverlayState } from "@/hooks/use-overlay-state";
usePersistedOverlayState,
useSearchEffect,
} from "@/hooks/use-overlay-state";
import { FrigateConfig } from "@/types/frigateConfig"; import { FrigateConfig } from "@/types/frigateConfig";
import LiveBirdseyeView from "@/views/live/LiveBirdseyeView"; import LiveBirdseyeView from "@/views/live/LiveBirdseyeView";
import LiveCameraView from "@/views/live/LiveCameraView"; import LiveCameraView from "@/views/live/LiveCameraView";
@ -24,7 +21,7 @@ function Live() {
// selection // selection
const [selectedCameraName, setSelectedCameraName] = useHashState(); const [selectedCameraName, setSelectedCameraName] = useHashState();
const [cameraGroup, setCameraGroup, loaded, ,] = usePersistedOverlayState( const [cameraGroup, setCameraGroup, loaded] = useUserPersistedOverlayState(
"cameraGroup", "cameraGroup",
"default" as string, "default" as string,
); );

15
web/src/views/live/DraggableGridLayout.tsx
View File

@ -1,4 +1,4 @@
import { usePersistence } from "@/hooks/use-persistence"; import { useUserPersistence } from "@/hooks/use-user-persistence";
import { import {
AllGroupsStreamingSettings, AllGroupsStreamingSettings,
BirdseyeConfig, BirdseyeConfig,
@ -40,7 +40,7 @@ import { IoClose } from "react-icons/io5";
import { LuLayoutDashboard, LuPencil } from "react-icons/lu"; import { LuLayoutDashboard, LuPencil } from "react-icons/lu";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { EditGroupDialog } from "@/components/filter/CameraGroupSelector"; import { EditGroupDialog } from "@/components/filter/CameraGroupSelector";
import { usePersistedOverlayState } from "@/hooks/use-overlay-state"; import { useUserPersistedOverlayState } from "@/hooks/use-overlay-state";
import { FaCompress, FaExpand } from "react-icons/fa"; import { FaCompress, FaExpand } from "react-icons/fa";
import { import {
Tooltip, Tooltip,
@ -102,8 +102,8 @@ export default function DraggableGridLayout({
// preferred live modes per camera // preferred live modes per camera
const [globalAutoLive] = usePersistence("autoLiveView", true); const [globalAutoLive] = useUserPersistence("autoLiveView", true);
const [displayCameraNames] = usePersistence("displayCameraNames", false); const [displayCameraNames] = useUserPersistence("displayCameraNames", false);
const { allGroupsStreamingSettings, setAllGroupsStreamingSettings } = const { allGroupsStreamingSettings, setAllGroupsStreamingSettings } =
useStreamingSettings(); useStreamingSettings();
@ -118,11 +118,14 @@ export default function DraggableGridLayout({
const ResponsiveGridLayout = useMemo(() => WidthProvider(Responsive), []); const ResponsiveGridLayout = useMemo(() => WidthProvider(Responsive), []);
const [gridLayout, setGridLayout, isGridLayoutLoaded] = usePersistence< const [gridLayout, setGridLayout, isGridLayoutLoaded] = useUserPersistence<
Layout[] Layout[]
>(`${cameraGroup}-draggable-layout`); >(`${cameraGroup}-draggable-layout`);
const [group] = usePersistedOverlayState("cameraGroup", "default" as string); const [group] = useUserPersistedOverlayState(
"cameraGroup",
"default" as string,
);
const groups = useMemo(() => { const groups = useMemo(() => {
if (!config) { if (!config) {

6
web/src/views/live/LiveCameraView.tsx
View File

@ -101,7 +101,7 @@ import {
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
} from "@/components/ui/select"; } from "@/components/ui/select";
import { usePersistence } from "@/hooks/use-persistence"; import { useUserPersistence } from "@/hooks/use-user-persistence";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch"; import { Switch } from "@/components/ui/switch";
import axios from "axios"; import axios from "axios";
@ -146,7 +146,7 @@ export default function LiveCameraView({
// supported features // supported features
const [streamName, setStreamName] = usePersistence<string>( const [streamName, setStreamName] = useUserPersistence<string>(
`${camera.name}-stream`, `${camera.name}-stream`,
Object.values(camera.live.streams)[0], Object.values(camera.live.streams)[0],
); );
@ -279,7 +279,7 @@ export default function LiveCameraView({
const [pip, setPip] = useState(false); const [pip, setPip] = useState(false);
const [lowBandwidth, setLowBandwidth] = useState(false); const [lowBandwidth, setLowBandwidth] = useState(false);
const [playInBackground, setPlayInBackground] = usePersistence<boolean>( const [playInBackground, setPlayInBackground] = useUserPersistence<boolean>(
`${camera.name}-background-play`, `${camera.name}-background-play`,
false, false,
); );

8
web/src/views/live/LiveDashboardView.tsx
View File

@ -13,7 +13,7 @@ import {
TooltipProvider, TooltipProvider,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import { usePersistence } from "@/hooks/use-persistence"; import { useUserPersistence } from "@/hooks/use-user-persistence";
import { import {
AllGroupsStreamingSettings, AllGroupsStreamingSettings,
CameraConfig, CameraConfig,
@ -78,7 +78,7 @@ export default function LiveDashboardView({
// layout // layout
const [mobileLayout, setMobileLayout] = usePersistence<"grid" | "list">( const [mobileLayout, setMobileLayout] = useUserPersistence<"grid" | "list">(
"live-layout", "live-layout",
isDesktop ? "grid" : "list", isDesktop ? "grid" : "list",
); );
@ -211,8 +211,8 @@ export default function LiveDashboardView({
}; };
}, []); }, []);
const [globalAutoLive] = usePersistence("autoLiveView", true); const [globalAutoLive] = useUserPersistence("autoLiveView", true);
const [displayCameraNames] = usePersistence("displayCameraNames", false); const [displayCameraNames] = useUserPersistence("displayCameraNames", false);
const { allGroupsStreamingSettings, setAllGroupsStreamingSettings } = const { allGroupsStreamingSettings, setAllGroupsStreamingSettings } =
useStreamingSettings(); useStreamingSettings();

4
web/src/views/settings/ObjectSettingsView.tsx
View File

@ -7,7 +7,7 @@ import { Label } from "@/components/ui/label";
import useSWR from "swr"; import useSWR from "swr";
import Heading from "@/components/ui/heading"; import Heading from "@/components/ui/heading";
import { Switch } from "@/components/ui/switch"; import { Switch } from "@/components/ui/switch";
import { usePersistence } from "@/hooks/use-persistence"; import { useUserPersistence } from "@/hooks/use-user-persistence";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { useCameraActivity } from "@/hooks/use-camera-activity"; import { useCameraActivity } from "@/hooks/use-camera-activity";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@ -104,7 +104,7 @@ export default function ObjectSettingsView({
}, },
]; ];
const [options, setOptions, optionsLoaded] = usePersistence<Options>( const [options, setOptions, optionsLoaded] = useUserPersistence<Options>(
`${selectedCamera}-feed`, `${selectedCamera}-feed`,
emptyObject, emptyObject,
); );

14
web/src/views/settings/UiSettingsView.tsx
View File

@ -9,7 +9,7 @@ import { Button } from "../../components/ui/button";
import useSWR from "swr"; import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig"; import { FrigateConfig } from "@/types/frigateConfig";
import { del as delData } from "idb-keyval"; import { del as delData } from "idb-keyval";
import { usePersistence } from "@/hooks/use-persistence"; import { useUserPersistence } from "@/hooks/use-user-persistence";
import { isSafari } from "react-device-detect"; import { isSafari } from "react-device-detect";
import { import {
Select, Select,
@ -91,15 +91,15 @@ export default function UiSettingsView() {
// settings // settings
const [autoLive, setAutoLive] = usePersistence("autoLiveView", true); const [autoLive, setAutoLive] = useUserPersistence("autoLiveView", true);
const [cameraNames, setCameraName] = usePersistence( const [cameraNames, setCameraName] = useUserPersistence(
"displayCameraNames", "displayCameraNames",
false, false,
); );
const [playbackRate, setPlaybackRate] = usePersistence("playbackRate", 1); const [playbackRate, setPlaybackRate] = useUserPersistence("playbackRate", 1);
const [weekStartsOn, setWeekStartsOn] = usePersistence("weekStartsOn", 0); const [weekStartsOn, setWeekStartsOn] = useUserPersistence("weekStartsOn", 0);
const [alertVideos, setAlertVideos] = usePersistence("alertVideos", true); const [alertVideos, setAlertVideos] = useUserPersistence("alertVideos", true);
const [fallbackTimeout, setFallbackTimeout] = usePersistence( const [fallbackTimeout, setFallbackTimeout] = useUserPersistence(
"liveFallbackTimeout", "liveFallbackTimeout",
3, 3,
); );