Use persistence for live layout (#10114)

* Use persistence for live layout

* Fix typing

* Fix persistence typing

* remove type

* More type fixing
This commit is contained in:
Nicolas Mowen 2024-02-28 07:16:16 -07:00 committed by GitHub
parent 485057abc1
commit 8072ce25c6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 21 additions and 17 deletions

View File

@ -22,7 +22,7 @@ export default function DebugCameraImage({
cameraConfig,
}: DebugCameraImageProps) {
const [showSettings, setShowSettings] = useState(false);
const [options, setOptions] = usePersistence(
const [options, setOptions] = usePersistence<Options>(
`${cameraConfig?.name}-feed`,
emptyObject
);
@ -36,7 +36,7 @@ export default function DebugCameraImage({
const searchParams = useMemo(
() =>
new URLSearchParams(
Object.keys(options).reduce((memo, key) => {
Object.keys(options || {}).reduce((memo, key) => {
//@ts-ignore we know this is correct
memo.push([key, options[key] === true ? "1" : "0"]);
return memo;
@ -68,7 +68,7 @@ export default function DebugCameraImage({
<CardContent>
<DebugSettings
handleSetOption={handleSetOption}
options={options}
options={options || {}}
/>
</CardContent>
</Card>

View File

@ -7,7 +7,7 @@ import { LivePlayerMode } from "@/types/live";
export default function useCameraLiveMode(
cameraConfig: CameraConfig,
preferredMode?: string
): LivePlayerMode {
): LivePlayerMode | undefined {
const { data: config } = useSWR<FrigateConfig>("config");
const restreamEnabled = useMemo(() => {
@ -22,10 +22,10 @@ export default function useCameraLiveMode(
)
);
}, [config, cameraConfig]);
const defaultLiveMode = useMemo(() => {
const defaultLiveMode = useMemo<LivePlayerMode | undefined>(() => {
if (config && cameraConfig) {
if (restreamEnabled) {
return cameraConfig.ui.live_mode || config?.ui.live_mode;
return cameraConfig.ui.live_mode || config.ui.live_mode;
}
return "jsmpeg";
@ -33,7 +33,7 @@ export default function useCameraLiveMode(
return undefined;
}, [cameraConfig, restreamEnabled]);
const [viewSource] = usePersistence(
const [viewSource] = usePersistence<LivePlayerMode>(
`${cameraConfig.name}-source`,
defaultLiveMode
);

View File

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

View File

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

View File

@ -1,10 +1,12 @@
import { LivePlayerMode } from "./live";
export interface UiConfig {
timezone?: string;
time_format?: "browser" | "12hour" | "24hour";
date_style?: "full" | "long" | "medium" | "short";
time_style?: "full" | "long" | "medium" | "short";
strftime_fmt?: string;
live_mode?: string;
live_mode?: LivePlayerMode;
use_experimental?: boolean;
dashboard: boolean;
order: number;