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