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

mobile drawer tweaks

Browse Source
This commit is contained in:
Josh Hawkins 2024-12-26 17:03:42 -06:00
parent 3e7c7502ef
commit c3a0ba0865
1 changed files with 183 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
web/src/views/live/LiveCameraView.tsx
View File

@ -1089,7 +1089,7 @@ function FrigateCameraFeatures({
<span className="sr-only">Info</span> <span className="sr-only">Info</span>
</div> </div>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="w-80"> <PopoverContent className="w-80 text-xs">
Audio must be output from your camera and Audio must be output from your camera and
configured in go2rtc for this stream. configured in go2rtc for this stream.
<div className="mt-2 flex items-center text-primary"> <div className="mt-2 flex items-center text-primary">
@ -1133,7 +1133,7 @@ function FrigateCameraFeatures({
<span className="sr-only">Info</span> <span className="sr-only">Info</span>
</div> </div>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="w-80"> <PopoverContent className="w-80 text-xs">
Your device must suppport the feature and Your device must suppport the feature and
WebRTC must be configured for two-way talk. WebRTC must be configured for two-way talk.
<div className="mt-2 flex items-center text-primary"> <div className="mt-2 flex items-center text-primary">
@ -1205,7 +1205,7 @@ function FrigateCameraFeatures({
</div> </div>
)} )}
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<div className="flex items-center justify-between text-sm"> <div className="flex items-center justify-between text-sm font-medium leading-none">
Debug View Debug View
<LuExternalLink <LuExternalLink
onClick={() => onClick={() =>
@ -1239,11 +1239,14 @@ function FrigateCameraFeatures({
title={`${camera} Settings`} title={`${camera} Settings`}
/> />
</DrawerTrigger> </DrawerTrigger>
<DrawerContent className="flex flex-col gap-3 rounded-2xl px-2 py-4"> <DrawerContent className="rounded-2xl px-2 py-4">
<div className="mt-2 flex flex-col gap-2">
<FilterSwitch <FilterSwitch
label="Object Detection" label="Object Detection"
isChecked={detectState == "ON"} isChecked={detectState == "ON"}
onCheckedChange={() => sendDetect(detectState == "ON" ? "OFF" : "ON")} onCheckedChange={() =>
sendDetect(detectState == "ON" ? "OFF" : "ON")
}
/> />
{recordingEnabled && ( {recordingEnabled && (
<FilterSwitch <FilterSwitch
@ -1265,7 +1268,9 @@ function FrigateCameraFeatures({
<FilterSwitch <FilterSwitch
label="Audio Detection" label="Audio Detection"
isChecked={audioState == "ON"} isChecked={audioState == "ON"}
onCheckedChange={() => sendAudio(audioState == "ON" ? "OFF" : "ON")} onCheckedChange={() =>
sendAudio(audioState == "ON" ? "OFF" : "ON")
}
/> />
)} )}
{autotrackingEnabled && ( {autotrackingEnabled && (
@ -1277,6 +1282,8 @@ function FrigateCameraFeatures({
} }
/> />
)} )}
</div>
<div className="mt-3 flex flex-col gap-5">
{Object.values(camera.live.streams).length > 1 && ( {Object.values(camera.live.streams).length > 1 && (
<div className="mt-1 p-2"> <div className="mt-1 p-2">
<div className="mb-1 text-sm">Stream</div> <div className="mb-1 text-sm">Stream</div>
@ -1294,7 +1301,8 @@ function FrigateCameraFeatures({
<SelectContent> <SelectContent>
<SelectGroup> <SelectGroup>
{Object.entries(camera.live.streams).map(([stream, name]) => ( {Object.entries(camera.live.streams).map(
([stream, name]) => (
<SelectItem <SelectItem
key={stream} key={stream}
className="cursor-pointer" className="cursor-pointer"
@ -1302,7 +1310,8 @@ function FrigateCameraFeatures({
> >
{stream} {stream}
</SelectItem> </SelectItem>
))} ),
)}
</SelectGroup> </SelectGroup>
</SelectContent> </SelectContent>
</Select> </Select>
@ -1324,9 +1333,9 @@ function FrigateCameraFeatures({
<span className="sr-only">Info</span> <span className="sr-only">Info</span>
</div> </div>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="w-80"> <PopoverContent className="w-52 text-xs">
Audio must be output from your camera and configured in Audio must be output from your camera and configured
go2rtc for this stream. in go2rtc for this stream.
<div className="mt-2 flex items-center text-primary"> <div className="mt-2 flex items-center text-primary">
<Link <Link
to="https://docs.frigate.video/configuration/live" to="https://docs.frigate.video/configuration/live"
@ -1364,9 +1373,9 @@ function FrigateCameraFeatures({
<span className="sr-only">Info</span> <span className="sr-only">Info</span>
</div> </div>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="w-80"> <PopoverContent className="w-52 text-xs">
Your device must suppport the feature and WebRTC must Your device must suppport the feature and WebRTC
be configured for two-way talk. must be configured for two-way talk.
<div className="mt-2 flex items-center text-primary"> <div className="mt-2 flex items-center text-primary">
<Link <Link
to="https://docs.frigate.video/configuration/live/#webrtc-extra-configuration" to="https://docs.frigate.video/configuration/live/#webrtc-extra-configuration"
@ -1408,7 +1417,10 @@ function FrigateCameraFeatures({
)} )}
</div> </div>
)} )}
<div className="my-4"> <div className="flex flex-col gap-1 px-2">
<div className="mb-1 text-sm font-medium leading-none">
On-Demand Recording
</div>
<Button <Button
onClick={handleEventButtonClick} onClick={handleEventButtonClick}
className={cn( className={cn(
@ -1418,6 +1430,10 @@ function FrigateCameraFeatures({
> >
{isRecording ? "End" : "Start"} on-demand recording {isRecording ? "End" : "Start"} on-demand recording
</Button> </Button>
<p className="text-sm text-muted-foreground">
Start a manual event based on this camera's recording retention
settings.
</p>
</div> </div>
{isRestreamed && ( {isRestreamed && (
<> <>
@ -1434,8 +1450,8 @@ function FrigateCameraFeatures({
</p> </p>
</> </>
)} )}
<div className="flex flex-col gap-1 px-2"> <div className="mb-3 flex flex-col gap-1 px-2">
<div className="flex items-center justify-between text-sm"> <div className="flex items-center justify-between text-sm font-medium leading-none">
Debug View Debug View
<LuExternalLink <LuExternalLink
onClick={() => onClick={() =>
@ -1445,6 +1461,7 @@ function FrigateCameraFeatures({
/> />
</div> </div>
</div> </div>
</div>
</DrawerContent> </DrawerContent>
</Drawer> </Drawer>
); );