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

349
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,124 +1239,93 @@ 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">
<FilterSwitch <div className="mt-2 flex flex-col gap-2">
label="Object Detection"
isChecked={detectState == "ON"}
onCheckedChange={() => sendDetect(detectState == "ON" ? "OFF" : "ON")}
/>
{recordingEnabled && (
<FilterSwitch <FilterSwitch
label="Recording" label="Object Detection"
isChecked={recordState == "ON"} isChecked={detectState == "ON"}
onCheckedChange={() => onCheckedChange={() =>
sendRecord(recordState == "ON" ? "OFF" : "ON") sendDetect(detectState == "ON" ? "OFF" : "ON")
} }
/> />
)} {recordingEnabled && (
<FilterSwitch <FilterSwitch
label="Snapshots" label="Recording"
isChecked={snapshotState == "ON"} isChecked={recordState == "ON"}
onCheckedChange={() => onCheckedChange={() =>
sendSnapshot(snapshotState == "ON" ? "OFF" : "ON") sendRecord(recordState == "ON" ? "OFF" : "ON")
} }
/> />
{audioDetectEnabled && ( )}
<FilterSwitch <FilterSwitch
label="Audio Detection" label="Snapshots"
isChecked={audioState == "ON"} isChecked={snapshotState == "ON"}
onCheckedChange={() => sendAudio(audioState == "ON" ? "OFF" : "ON")}
/>
)}
{autotrackingEnabled && (
<FilterSwitch
label="Autotracking"
isChecked={autotrackingState == "ON"}
onCheckedChange={() => onCheckedChange={() =>
sendAutotracking(autotrackingState == "ON" ? "OFF" : "ON") sendSnapshot(snapshotState == "ON" ? "OFF" : "ON")
} }
/> />
)} {audioDetectEnabled && (
{Object.values(camera.live.streams).length > 1 && ( <FilterSwitch
<div className="mt-1 p-2"> label="Audio Detection"
<div className="mb-1 text-sm">Stream</div> isChecked={audioState == "ON"}
<Select onCheckedChange={() =>
value={streamName} sendAudio(audioState == "ON" ? "OFF" : "ON")
onValueChange={(value) => { }
setStreamName?.(value); />
}} )}
> {autotrackingEnabled && (
<SelectTrigger className="w-full"> <FilterSwitch
{Object.keys(camera.live.streams).find( label="Autotracking"
(key) => camera.live.streams[key] === streamName, isChecked={autotrackingState == "ON"}
)} onCheckedChange={() =>
</SelectTrigger> sendAutotracking(autotrackingState == "ON" ? "OFF" : "ON")
}
/>
)}
</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>
<Select
value={streamName}
onValueChange={(value) => {
setStreamName?.(value);
}}
>
<SelectTrigger className="w-full">
{Object.keys(camera.live.streams).find(
(key) => camera.live.streams[key] === streamName,
)}
</SelectTrigger>
<SelectContent> <SelectContent>
<SelectGroup> <SelectGroup>
{Object.entries(camera.live.streams).map(([stream, name]) => ( {Object.entries(camera.live.streams).map(
<SelectItem ([stream, name]) => (
key={stream} <SelectItem
className="cursor-pointer" key={stream}
value={name} className="cursor-pointer"
> value={name}
{stream} >
</SelectItem> {stream}
))} </SelectItem>
</SelectGroup> ),
</SelectContent> )}
</Select> </SelectGroup>
{preferredLiveMode != "jsmpeg" && isRestreamed && ( </SelectContent>
<div className="mt-1 flex flex-row items-center gap-1 text-sm text-muted-foreground"> </Select>
{supportsAudioOutput ? ( {preferredLiveMode != "jsmpeg" && isRestreamed && (
<> <div className="mt-1 flex flex-row items-center gap-1 text-sm text-muted-foreground">
<LuCheck className="size-4 text-success" /> {supportsAudioOutput ? (
<div>Audio is available for this stream</div>
</>
) : (
<>
<LuX className="size-4 text-danger" />
<div>Audio is unavailable for this stream</div>
<Popover>
<PopoverTrigger asChild>
<div className="cursor-pointer p-0">
<LuInfo className="size-4" />
<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.
<div className="mt-2 flex items-center text-primary">
<Link
to="https://docs.frigate.video/configuration/live"
target="_blank"
rel="noopener noreferrer"
className="inline"
>
Read the documentation{" "}
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
</PopoverContent>
</Popover>
</>
)}
</div>
)}
{preferredLiveMode != "jsmpeg" &&
isRestreamed &&
supportsAudioOutput && (
<div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
{supports2WayTalk ? (
<> <>
<LuCheck className="size-4 text-success" /> <LuCheck className="size-4 text-success" />
<div>Two-way talk is available for this stream</div> <div>Audio is available for this stream</div>
</> </>
) : ( ) : (
<> <>
<LuX className="size-4 text-danger" /> <LuX className="size-4 text-danger" />
<div>Two-way talk is unavailable for this stream</div> <div>Audio is unavailable for this stream</div>
<Popover> <Popover>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<div className="cursor-pointer p-0"> <div className="cursor-pointer p-0">
@ -1364,12 +1333,12 @@ 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 Audio must be output from your camera and configured
be configured for two-way talk. 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/#webrtc-extra-configuration" to="https://docs.frigate.video/configuration/live"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="inline" className="inline"
@ -1384,65 +1353,113 @@ function FrigateCameraFeatures({
)} )}
</div> </div>
)} )}
{preferredLiveMode == "jsmpeg" && isRestreamed && ( {preferredLiveMode != "jsmpeg" &&
<div className="mt-2 flex flex-col items-center gap-3"> isRestreamed &&
<div className="flex flex-row items-center gap-2"> supportsAudioOutput && (
<IoIosWarning className="mr-1 size-8 text-danger" /> <div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
{supports2WayTalk ? (
<>
<LuCheck className="size-4 text-success" />
<div>Two-way talk is available for this stream</div>
</>
) : (
<>
<LuX className="size-4 text-danger" />
<div>Two-way talk is unavailable for this stream</div>
<Popover>
<PopoverTrigger asChild>
<div className="cursor-pointer p-0">
<LuInfo className="size-4" />
<span className="sr-only">Info</span>
</div>
</PopoverTrigger>
<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"
target="_blank"
rel="noopener noreferrer"
className="inline"
>
Read the documentation{" "}
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
</PopoverContent>
</Popover>
</>
)}
</div>
)}
{preferredLiveMode == "jsmpeg" && isRestreamed && (
<div className="mt-2 flex flex-col items-center gap-3">
<div className="flex flex-row items-center gap-2">
<IoIosWarning className="mr-1 size-8 text-danger" />
<p className="text-sm"> <p className="text-sm">
Live view is in low-bandwidth mode due to buffering or Live view is in low-bandwidth mode due to buffering or
stream errors. stream errors.
</p> </p>
</div>
<Button
className={`flex items-center gap-2.5 rounded-lg`}
aria-label="Reset the stream"
variant="outline"
size="sm"
onClick={() => setLowBandwidth(false)}
>
<MdOutlineRestartAlt className="size-5 text-primary-variant" />
<div className="text-primary-variant">Reset stream</div>
</Button>
</div> </div>
<Button )}
className={`flex items-center gap-2.5 rounded-lg`} </div>
aria-label="Reset the stream" )}
variant="outline" <div className="flex flex-col gap-1 px-2">
size="sm" <div className="mb-1 text-sm font-medium leading-none">
onClick={() => setLowBandwidth(false)} On-Demand Recording
> </div>
<MdOutlineRestartAlt className="size-5 text-primary-variant" /> <Button
<div className="text-primary-variant">Reset stream</div> onClick={handleEventButtonClick}
</Button> className={cn(
</div> "w-full",
)} isRecording && "animate-pulse bg-red-500 hover:bg-red-600",
</div> )}
)} >
<div className="my-4"> {isRecording ? "End" : "Start"} on-demand recording
<Button </Button>
onClick={handleEventButtonClick} <p className="text-sm text-muted-foreground">
className={cn( Start a manual event based on this camera's recording retention
"w-full", settings.
isRecording && "animate-pulse bg-red-500 hover:bg-red-600",
)}
>
{isRecording ? "End" : "Start"} on-demand recording
</Button>
</div>
{isRestreamed && (
<>
<FilterSwitch
label="Play in Background"
isChecked={playInBackground}
onCheckedChange={(checked) => {
setPlayInBackground(checked);
}}
/>
<p className="mx-2 -mt-2 text-sm text-muted-foreground">
Enable this option to continue streaming when the player is
hidden.
</p> </p>
</> </div>
)} {isRestreamed && (
<div className="flex flex-col gap-1 px-2"> <>
<div className="flex items-center justify-between text-sm"> <FilterSwitch
Debug View label="Play in Background"
<LuExternalLink isChecked={playInBackground}
onClick={() => onCheckedChange={(checked) => {
navigate(`/settings?page=debug&camera=${camera.name}`) setPlayInBackground(checked);
} }}
className="ml-2 inline-flex size-5 cursor-pointer" />
/> <p className="mx-2 -mt-2 text-sm text-muted-foreground">
Enable this option to continue streaming when the player is
hidden.
</p>
</>
)}
<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={() =>
navigate(`/settings?page=debug&camera=${camera.name}`)
}
className="ml-2 inline-flex size-5 cursor-pointer"
/>
</div>
</div> </div>
</div> </div>
</DrawerContent> </DrawerContent>