always show stream info when restreamed

This commit is contained in:
Josh Hawkins 2025-01-10 10:18:59 -06:00
parent 0eebbd362a
commit 6d46d7a3ed
2 changed files with 172 additions and 105 deletions

View File

@ -211,7 +211,7 @@ export function CameraStreamingDialog({
<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">

View File

@ -1047,11 +1047,42 @@ function FrigateCameraFeatures({
</DropdownMenuTrigger>
<DropdownMenuContent className="max-w-96">
<div className="flex flex-col gap-5 p-4">
{Object.values(camera.live.streams).length > 1 && (
{!isRestreamed && (
<div className="flex flex-col gap-2">
<Label>Stream</Label>
<div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
<LuX className="size-4 text-danger" />
<div>Restreaming is not enabled for this camera.</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 text-xs">
Set up go2rtc for additional live view options and audio
for this camera.
<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>
</div>
)}
{isRestreamed &&
Object.values(camera.live.streams).length > 0 && (
<div className="flex flex-col gap-1">
<Label htmlFor="streaming-method" className="">
Stream
</Label>
<Label htmlFor="streaming-method">Stream</Label>
<Select
value={streamName}
onValueChange={(value) => {
@ -1126,7 +1157,9 @@ function FrigateCameraFeatures({
{supports2WayTalk ? (
<>
<LuCheck className="size-4 text-success" />
<div>Two-way talk is available for this stream</div>
<div>
Two-way talk is available for this stream
</div>
</>
) : (
<>
@ -1142,8 +1175,8 @@ function FrigateCameraFeatures({
</div>
</PopoverTrigger>
<PopoverContent className="w-80 text-xs">
Your device must suppport the feature and WebRTC
must be configured for two-way talk.
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"
@ -1168,8 +1201,8 @@ function FrigateCameraFeatures({
<IoIosWarning className="mr-1 size-8 text-danger" />
<p className="text-sm">
Live view is in low-bandwidth mode due to buffering or
stream errors.
Live view is in low-bandwidth mode due to buffering
or stream errors.
</p>
</div>
<Button
@ -1180,7 +1213,9 @@ function FrigateCameraFeatures({
onClick={() => setLowBandwidth(false)}
>
<MdOutlineRestartAlt className="size-5 text-primary-variant" />
<div className="text-primary-variant">Reset stream</div>
<div className="text-primary-variant">
Reset stream
</div>
</Button>
</div>
)}
@ -1309,7 +1344,39 @@ function FrigateCameraFeatures({
)}
</div>
<div className="mt-3 flex flex-col gap-5">
{Object.values(camera.live.streams).length > 1 && (
{!isRestreamed && (
<div className="flex flex-col gap-2 p-2">
<Label>Stream</Label>
<div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
<LuX className="size-4 text-danger" />
<div>Restreaming is not enabled for this camera.</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 text-xs">
Set up go2rtc for additional live view options and audio for
this camera.
<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>
</div>
)}
{isRestreamed && Object.values(camera.live.streams).length > 0 && (
<div className="mt-1 p-2">
<div className="mb-1 text-sm">Stream</div>
<Select