administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-13 06:35:24 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Change Automatic Live View setting to allow for continuous playback

Browse Source
This commit is contained in:
kensand 2024-07-30 21:28:00 -04:00
parent 599dd7eecb
commit 8b4b715f5e
4 changed files with 109 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/types/live.ts
View File

@ -32,3 +32,6 @@ export type LiveStreamMetadata = {
}; };
export type LivePlayerError = "stalled" | "startup" | "mse-decode"; export type LivePlayerError = "stalled" | "startup" | "mse-decode";
export const LiveViewModes = ["Auto", "Static", "Continuous"] as const
export type LiveViewMode = (typeof LiveViewModes)[number];

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

@ -20,7 +20,7 @@ import {
} from "react-grid-layout"; } from "react-grid-layout";
import "react-grid-layout/css/styles.css"; import "react-grid-layout/css/styles.css";
import "react-resizable/css/styles.css"; import "react-resizable/css/styles.css";
import { LivePlayerError, LivePlayerMode } from "@/types/live"; import { LivePlayerError, LivePlayerMode, LiveViewMode } from "@/types/live";
import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record"; import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { useResizeObserver } from "@/hooks/resize-observer"; import { useResizeObserver } from "@/hooks/resize-observer";
@ -74,10 +74,10 @@ export default function DraggableGridLayout({
const birdseyeConfig = useMemo(() => config?.birdseye, [config]); const birdseyeConfig = useMemo(() => config?.birdseye, [config]);
// preferred live modes per camera // preferred live modes per camera
const [preferredLiveModes, setPreferredLiveModes] = useState<{ const [preferredLiveModes, setPreferredLiveModes] = useState<{
[key: string]: LivePlayerMode; [key: string]: LivePlayerMode;
}>({}); }>({});
const [liveViewMode] = usePersistence<LiveViewMode>("liveViewMode", "Auto");
useEffect(() => { useEffect(() => {
if (!cameras) return; if (!cameras) return;
@ -463,6 +463,7 @@ export default function DraggableGridLayout({
} }
cameraConfig={camera} cameraConfig={camera}
preferredLiveMode={preferredLiveModes[camera.name] ?? "mse"} preferredLiveMode={preferredLiveModes[camera.name] ?? "mse"}
liveViewMode={liveViewMode}
onClick={() => { onClick={() => {
!isEditMode && onSelectCamera(camera.name); !isEditMode && onSelectCamera(camera.name);
}} }}
@ -635,6 +636,7 @@ type LivePlayerGridItemProps = {
preferredLiveMode: LivePlayerMode; preferredLiveMode: LivePlayerMode;
onClick: () => void; onClick: () => void;
onError: (e: LivePlayerError) => void; onError: (e: LivePlayerError) => void;
liveViewMode?: LiveViewMode;
}; };
const LivePlayerGridItem = React.forwardRef< const LivePlayerGridItem = React.forwardRef<
@ -655,6 +657,7 @@ const LivePlayerGridItem = React.forwardRef<
preferredLiveMode, preferredLiveMode,
onClick, onClick,
onError, onError,
liveViewMode,
...props ...props
}, },
ref, ref,
@ -677,6 +680,8 @@ const LivePlayerGridItem = React.forwardRef<
onClick={onClick} onClick={onClick}
onError={onError} onError={onError}
containerRef={ref as React.RefObject<HTMLDivElement>} containerRef={ref as React.RefObject<HTMLDivElement>}
autoLive={liveViewMode == "Auto" || liveViewMode == "Continuous"}
showStillWithoutActivity={liveViewMode != "Continuous"}
/> />
{children} {children}
</div> </div>

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

@ -28,7 +28,7 @@ import DraggableGridLayout from "./DraggableGridLayout";
import { IoClose } from "react-icons/io5"; import { IoClose } from "react-icons/io5";
import { LuLayoutDashboard } from "react-icons/lu"; import { LuLayoutDashboard } from "react-icons/lu";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { LivePlayerError, LivePlayerMode } from "@/types/live"; import {LivePlayerError, LivePlayerMode, LiveViewMode} from "@/types/live";
import { FaCompress, FaExpand } from "react-icons/fa"; import { FaCompress, FaExpand } from "react-icons/fa";
import { useResizeObserver } from "@/hooks/resize-observer"; import { useResizeObserver } from "@/hooks/resize-observer";
@ -128,7 +128,7 @@ export default function LiveDashboardView({
// camera live views // camera live views
const [autoLiveView] = usePersistence("autoLiveView", true); const [liveViewMode] = usePersistence<LiveViewMode>("liveViewMode", "Auto");
const [preferredLiveModes, setPreferredLiveModes] = useState<{ const [preferredLiveModes, setPreferredLiveModes] = useState<{
[key: string]: LivePlayerMode; [key: string]: LivePlayerMode;
}>({}); }>({});
@ -377,7 +377,10 @@ export default function LiveDashboardView({
} }
cameraConfig={camera} cameraConfig={camera}
preferredLiveMode={preferredLiveModes[camera.name] ?? "mse"} preferredLiveMode={preferredLiveModes[camera.name] ?? "mse"}
autoLive={autoLiveView} autoLive={
liveViewMode == "Auto" || liveViewMode == "Continuous"
}
showStillWithoutActivity={liveViewMode != "Continuous"}
onClick={() => onSelectCamera(camera.name)} onClick={() => onSelectCamera(camera.name)}
onError={(e) => handleError(camera.name, e)} onError={(e) => handleError(camera.name, e)}
/> />

171
web/src/views/settings/GeneralSettingsView.tsx
View File

@ -18,6 +18,7 @@ import {
SelectItem, SelectItem,
SelectTrigger, SelectTrigger,
} from "../../components/ui/select"; } from "../../components/ui/select";
import { LiveViewMode, LiveViewModes } from "@/types/live.ts";
const PLAYBACK_RATE_DEFAULT = isSafari ? [0.5, 1, 2] : [0.5, 1, 2, 4, 8, 16]; const PLAYBACK_RATE_DEFAULT = isSafari ? [0.5, 1, 2] : [0.5, 1, 2, 4, 8, 16];
const WEEK_STARTS_ON = ["Sunday", "Monday"]; const WEEK_STARTS_ON = ["Sunday", "Monday"];
@ -52,52 +53,65 @@ export default function GeneralSettingsView() {
// settings // settings
const [autoLive, setAutoLive] = usePersistence("autoLiveView", true); const [liveViewMode, setLiveViewMode] = usePersistence<LiveViewMode>(
"liveViewMode",
"Auto",
);
const [playbackRate, setPlaybackRate] = usePersistence("playbackRate", 1); const [playbackRate, setPlaybackRate] = usePersistence("playbackRate", 1);
const [weekStartsOn, setWeekStartsOn] = usePersistence("weekStartsOn", 0); const [weekStartsOn, setWeekStartsOn] = usePersistence("weekStartsOn", 0);
const [alertVideos, setAlertVideos] = usePersistence("alertVideos", true); const [alertVideos, setAlertVideos] = usePersistence("alertVideos", true);
return ( return (
<> <>
<div className="flex size-full flex-col md:flex-row"> <div className="flex size-full flex-col md:flex-row">
<Toaster position="top-center" closeButton={true} /> <Toaster position="top-center" closeButton={true}/>
<div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0"> <div
className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
<Heading as="h3" className="my-2"> <Heading as="h3" className="my-2">
General Settings General Settings
</Heading> </Heading>
<Separator className="my-2 flex bg-secondary" /> <Separator className="my-2 flex bg-secondary"/>
<Heading as="h4" className="my-2"> <Heading as="h4" className="my-2">
Live Dashboard Live Dashboard
</Heading> </Heading>
<div className="mt-2 space-y-6"> <div className="mt-2 space-y-6">
<div className="space-y-3"> <div className="text-md">Live View Modes</div>
<div className="flex flex-row items-center justify-start gap-2"> <div className="my-2 text-sm text-muted-foreground">
<Switch <p>The mode for live streams. <br/> Auto mode (default) will begin streaming when motion is
id="auto-live" detected.<br/> Static mode will update images on live streams once per minute.<br/> Continuous mode
checked={autoLive} will stream cameras regardless of motion. Caution: Continuous mode will increase bandwidth
onCheckedChange={setAutoLive} usage and may affect performance.</p>
/>
<Label className="cursor-pointer" htmlFor="auto-live">
Automatic Live View
</Label>
</div>
<div className="my-2 text-sm text-muted-foreground">
<p>
Automatically switch to a camera's live view when activity is
detected. Disabling this option causes static camera images on
the Live dashboard to only update once per minute.
</p>
</div>
</div> </div>
<Select
value={liveViewMode}
onValueChange={(value: LiveViewMode) => setLiveViewMode(value)}
>
<SelectTrigger className="w-100">
{liveViewMode}
</SelectTrigger>
<SelectContent>
<SelectGroup>
{LiveViewModes.map((mode) => (
<SelectItem
key={mode}
className="cursor-pointer"
value={mode}
>
{mode}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
<div className="space-y-3"> <div className="space-y-3">
<div className="flex flex-row items-center justify-start gap-2"> <div className="flex flex-row items-center justify-start gap-2">
<Switch <Switch
id="images-only" id="images-only"
checked={alertVideos} checked={alertVideos}
onCheckedChange={setAlertVideos} onCheckedChange={setAlertVideos}
/> />
<Label className="cursor-pointer" htmlFor="images-only"> <Label className="cursor-pointer" htmlFor="images-only">
Play Alert Videos Play Alert Videos
@ -128,7 +142,7 @@ export default function GeneralSettingsView() {
<Button onClick={clearStoredLayouts}>Clear All Layouts</Button> <Button onClick={clearStoredLayouts}>Clear All Layouts</Button>
</div> </div>
<Separator className="my-2 flex bg-secondary" /> <Separator className="my-2 flex bg-secondary"/>
<Heading as="h4" className="my-2"> <Heading as="h4" className="my-2">
Recordings Viewer Recordings Viewer
@ -143,65 +157,66 @@ export default function GeneralSettingsView() {
</div> </div>
</div> </div>
<Select <Select
value={playbackRate?.toString()} value={playbackRate?.toString()}
onValueChange={(value) => setPlaybackRate(parseFloat(value))} onValueChange={(value) => setPlaybackRate(parseFloat(value))}
> >
<SelectTrigger className="w-20"> <SelectTrigger className="w-20">
{`${playbackRate}x`} {`${playbackRate}x`}
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectGroup> <SelectGroup>
{PLAYBACK_RATE_DEFAULT.map((rate) => ( {PLAYBACK_RATE_DEFAULT.map((rate) => (
<SelectItem <SelectItem
key={rate} key={rate}
className="cursor-pointer" className="cursor-pointer"
value={rate.toString()} value={rate.toString()}
> >
{rate}x {rate}x
</SelectItem> </SelectItem>
))} ))}
</SelectGroup> </SelectGroup>
</SelectContent> </SelectContent>
</Select> </Select>
<Separator className="my-2 flex bg-secondary" /> <Separator className="my-2 flex bg-secondary"/>
<Heading as="h4" className="my-2"> <Heading as="h4" className="my-2">
Calendar Calendar
</Heading> </Heading>
<div className="mt-2 space-y-6"> <div className="mt-2 space-y-6">
<div className="space-y-0.5"> <div className="space-y-0.5">
<div className="text-md">First Weekday</div> <div className="text-md">First Weekday</div>
<div className="my-2 text-sm text-muted-foreground"> <div className="my-2 text-sm text-muted-foreground">
<p>The day that the weeks of the review calendar begin on.</p> <p>The day that the weeks of the review calendar begin on.</p>
</div>
</div>
</div> </div>
<Select </div>
value={weekStartsOn?.toString()} </div>
onValueChange={(value) => setWeekStartsOn(parseInt(value))} <Select
> value={weekStartsOn?.toString()}
<SelectTrigger className="w-32"> onValueChange={(value) => setWeekStartsOn(parseInt(value))}
{WEEK_STARTS_ON[weekStartsOn ?? 0]} >
</SelectTrigger> <SelectTrigger className="w-32">
<SelectContent> {WEEK_STARTS_ON[weekStartsOn ?? 0]}
<SelectGroup> </SelectTrigger>
{WEEK_STARTS_ON.map((day, index) => ( <SelectContent>
<SelectItem <SelectGroup>
{WEEK_STARTS_ON.map((day, index) => (
<SelectItem
key={index} key={index}
className="cursor-pointer" className="cursor-pointer"
value={index.toString()} value={index.toString()}
> >
{day} {day}
</SelectItem> </SelectItem>
))} ))}
</SelectGroup> </SelectGroup>
</SelectContent> </SelectContent>
</Select> </Select>
<Separator className="my-2 flex bg-secondary" /> <Separator className="my-2 flex bg-secondary"/>
</div>
</div>
</div> </div>
</> </div>
); </div>
</>
)
;
} }