mirror of
https://github.com/blakeblackshear/frigate.git
synced 2025-07-26 13:47:03 +02:00
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:
parent
485057abc1
commit
8072ce25c6
@ -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>
|
||||
|
@ -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
|
||||
);
|
||||
|
@ -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);
|
||||
|
@ -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"
|
||||
);
|
||||
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user