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

Run prettier and eslint

Browse Source
This commit is contained in:
kensand 2024-07-30 22:11:55 -04:00
parent ae4546341f
commit 4a376e91eb
3 changed files with 88 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,5 +33,5 @@ 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 const LiveViewModes = ["auto", "static", "continuous"] as const;
export type LiveViewMode = (typeof LiveViewModes)[number]; export type LiveViewMode = (typeof LiveViewModes)[number];

2
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, LiveViewMode} 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";

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

@ -62,16 +62,15 @@ export default function GeneralSettingsView() {
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 <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">
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
@ -80,28 +79,41 @@ export default function GeneralSettingsView() {
<div className="mt-2 space-y-6"> <div className="mt-2 space-y-6">
<div className="text-md">Live View Modes</div> <div className="text-md">Live View Modes</div>
<div className="my-2 text-sm text-muted-foreground"> <div className="my-2 text-sm text-muted-foreground">
<p>Live stream behavior:<br/>Auto mode (default) will begin streaming when activity is <p>
detected.<br/>Static mode will update camera images on the live dashboard once per minute.<br/>Continuous mode Live stream behavior:
will stream cameras regardless of activity. Caution: Continuous mode will increase bandwidth usage and may affect performance.</p> <br />
Auto mode (default) will begin streaming when activity is
detected.
<br />
Static mode will update camera images on the live dashboard once
per minute.
<br />
Continuous mode will stream cameras regardless of activity.
Caution: Continuous mode will increase bandwidth usage and may
affect performance.
</p>
</div> </div>
<Select <Select
value={liveViewMode} value={liveViewMode}
onValueChange={(value: LiveViewMode) => setLiveViewMode(value)} onValueChange={(value: LiveViewMode) => setLiveViewMode(value)}
> >
<SelectTrigger className="w-100" style={{textTransform: "capitalize"}}> <SelectTrigger
className="w-100"
style={{ textTransform: "capitalize" }}
>
{liveViewMode} {liveViewMode}
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectGroup> <SelectGroup>
{LiveViewModes.map((mode) => ( {LiveViewModes.map((mode) => (
<SelectItem <SelectItem
key={mode} key={mode}
className="cursor-pointer" className="cursor-pointer"
value={mode} value={mode}
style={{textTransform: "capitalize"}} style={{ textTransform: "capitalize" }}
> >
{mode} {mode}
</SelectItem> </SelectItem>
))} ))}
</SelectGroup> </SelectGroup>
</SelectContent> </SelectContent>
@ -109,9 +121,9 @@ export default function GeneralSettingsView() {
<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
@ -142,7 +154,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
@ -157,66 +169,65 @@ 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>
</div> <Select
</div> value={weekStartsOn?.toString()}
<Select onValueChange={(value) => setWeekStartsOn(parseInt(value))}
value={weekStartsOn?.toString()} >
onValueChange={(value) => setWeekStartsOn(parseInt(value))} <SelectTrigger className="w-32">
> {WEEK_STARTS_ON[weekStartsOn ?? 0]}
<SelectTrigger className="w-32"> </SelectTrigger>
{WEEK_STARTS_ON[weekStartsOn ?? 0]} <SelectContent>
</SelectTrigger> <SelectGroup>
<SelectContent> {WEEK_STARTS_ON.map((day, index) => (
<SelectGroup> <SelectItem
{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> );
</>
)
;
} }