administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-08 20:25:26 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Use persistence for live layout

Browse Source
This commit is contained in:
Nicolas Mowen 2024-02-27 17:04:20 -07:00
parent 485057abc1
commit 7187273eb7
2 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/hooks/use-persistence.ts
View File

@ -1,16 +1,16 @@
import { useEffect, useState, useCallback } from "react"; import { useEffect, useState, useCallback } from "react";
import { get as getData, set as setData } from "idb-keyval"; import { get as getData, set as setData } from "idb-keyval";
type usePersistenceReturn = [ type usePersistenceReturn<S extends any> = [
value: any | undefined, value: S | undefined,
setValue: (value: string | boolean) => void, setValue: (value: string | boolean) => void,
loaded: boolean, loaded: boolean,
]; ];
export function usePersistence( export function usePersistence<S>(
key: string, key: string,
defaultValue: any | undefined = undefined defaultValue: S | undefined = undefined
): usePersistenceReturn { ): usePersistenceReturn<S> {
const [value, setInternalValue] = useState<any | undefined>(defaultValue); const [value, setInternalValue] = useState<any | undefined>(defaultValue);
const [loaded, setLoaded] = useState<boolean>(false); const [loaded, setLoaded] = useState<boolean>(false);

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

@ -5,6 +5,7 @@ import LivePlayer from "@/components/player/LivePlayer";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { TooltipProvider } from "@/components/ui/tooltip"; import { TooltipProvider } from "@/components/ui/tooltip";
import { usePersistence } from "@/hooks/use-persistence";
import { Event as FrigateEvent } from "@/types/event"; import { Event as FrigateEvent } from "@/types/event";
import { FrigateConfig } from "@/types/frigateConfig"; import { FrigateConfig } from "@/types/frigateConfig";
import { useCallback, useEffect, useMemo, useState } from "react"; import { useCallback, useEffect, useMemo, useState } from "react";
@ -17,7 +18,8 @@ function Live() {
// layout // layout
const [layout, setLayout] = useState<"grid" | "list">( const [layout, setLayout] = usePersistence<"grid" | "list">(
"live-layout",
isDesktop ? "grid" : "list" isDesktop ? "grid" : "list"
); );