update camera streaming dialog

This commit is contained in:
Josh Hawkins 2025-01-10 10:32:32 -06:00
parent 6d46d7a3ed
commit 14821d5f81

View File

@ -175,64 +175,97 @@ export function CameraStreamingDialog({
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="flex flex-col space-y-8"> <div className="flex flex-col space-y-8">
{Object.entries(config?.cameras[camera].live.streams).length > 1 && ( {!isRestreamed && (
<div className="flex flex-col items-start gap-2"> <div className="flex flex-col gap-2">
<Label htmlFor="stream" className="text-right"> <Label>Stream</Label>
Stream <div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
</Label> <LuX className="size-4 text-danger" />
<Select value={streamName} onValueChange={setStreamName}> <div>Restreaming is not enabled for this camera.</div>
<SelectTrigger className=""> <Popover>
<SelectValue placeholder="Choose a stream" /> <PopoverTrigger asChild>
</SelectTrigger> <div className="cursor-pointer p-0">
<SelectContent> <LuInfo className="size-4" />
{camera !== "birdseye" && <span className="sr-only">Info</span>
Object.entries(config?.cameras[camera].live.streams).map( </div>
([name, stream]) => ( </PopoverTrigger>
<SelectItem key={stream} value={stream}> <PopoverContent className="w-80 text-xs">
{name} Set up go2rtc for additional live view options and audio for
</SelectItem> this camera.
), <div className="mt-2 flex items-center text-primary">
)} <Link
</SelectContent> to="https://docs.frigate.video/configuration/live"
<div className="flex flex-row items-center gap-1 text-sm text-muted-foreground"> target="_blank"
{supportsAudioOutput ? ( rel="noopener noreferrer"
<> className="inline"
<LuCheck className="size-4 text-success" /> >
<div>Audio is available for this stream</div> Read the documentation{" "}
</> <LuExternalLink className="ml-2 inline-flex size-3" />
) : ( </Link>
<> </div>
<LuX className="size-4 text-danger" /> </PopoverContent>
<div>Audio is unavailable for this stream</div> </Popover>
<Popover> </div>
<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">
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>
</Select>
</div> </div>
)} )}
{isRestreamed &&
Object.entries(config?.cameras[camera].live.streams).length > 0 && (
<div className="flex flex-col items-start gap-2">
<Label htmlFor="stream" className="text-right">
Stream
</Label>
<Select value={streamName} onValueChange={setStreamName}>
<SelectTrigger className="">
<SelectValue placeholder="Choose a stream" />
</SelectTrigger>
<SelectContent>
{camera !== "birdseye" &&
Object.entries(config?.cameras[camera].live.streams).map(
([name, stream]) => (
<SelectItem key={stream} value={stream}>
{name}
</SelectItem>
),
)}
</SelectContent>
<div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
{supportsAudioOutput ? (
<>
<LuCheck className="size-4 text-success" />
<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 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"
target="_blank"
rel="noopener noreferrer"
className="inline"
>
Read the documentation{" "}
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
</PopoverContent>
</Popover>
</>
)}
</div>
</Select>
</div>
)}
<div className="flex flex-col items-start gap-2"> <div className="flex flex-col items-start gap-2">
<Label htmlFor="streaming-method" className="text-right"> <Label htmlFor="streaming-method" className="text-right">
Streaming Method Streaming Method