fix console errors with tooltips and dropdown in single camera live view

This commit is contained in:
Josh Hawkins 2025-09-22 19:37:39 -05:00
parent a525dd0ff7
commit 303471242f

View File

@ -28,7 +28,6 @@ import {
import { import {
Tooltip, Tooltip,
TooltipContent, TooltipContent,
TooltipProvider,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import { useResizeObserver } from "@/hooks/resize-observer"; import { useResizeObserver } from "@/hooks/resize-observer";
@ -116,6 +115,7 @@ import {
SelectGroup, SelectGroup,
SelectItem, SelectItem,
SelectTrigger, SelectTrigger,
SelectValue,
} from "@/components/ui/select"; } from "@/components/ui/select";
import { usePersistence } from "@/hooks/use-persistence"; import { usePersistence } from "@/hooks/use-persistence";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
@ -499,7 +499,6 @@ export default function LiveCameraView({
) : ( ) : (
<div /> <div />
)} )}
<TooltipProvider>
<div <div
className={`flex flex-row items-center gap-2 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`} className={`flex flex-row items-center gap-2 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`}
> >
@ -593,9 +592,7 @@ export default function LiveCameraView({
camera={camera} camera={camera}
recordingEnabled={camera.record.enabled_in_config} recordingEnabled={camera.record.enabled_in_config}
audioDetectEnabled={camera.audio.enabled_in_config} audioDetectEnabled={camera.audio.enabled_in_config}
autotrackingEnabled={ autotrackingEnabled={camera.onvif.autotracking.enabled_in_config}
camera.onvif.autotracking.enabled_in_config
}
transcriptionEnabled={ transcriptionEnabled={
camera.audio_transcription.enabled_in_config camera.audio_transcription.enabled_in_config
} }
@ -614,7 +611,6 @@ export default function LiveCameraView({
cameraEnabled={cameraEnabled} cameraEnabled={cameraEnabled}
/> />
</div> </div>
</TooltipProvider>
</div> </div>
<div id="player-container" className="size-full" ref={containerRef}> <div id="player-container" className="size-full" ref={containerRef}>
<TransformComponent <TransformComponent
@ -707,7 +703,6 @@ function TooltipButton({
...props ...props
}: TooltipButtonProps) { }: TooltipButtonProps) {
return ( return (
<TooltipProvider>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button <Button
@ -727,7 +722,6 @@ function TooltipButton({
<p>{label}</p> <p>{label}</p>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider>
); );
} }
@ -961,7 +955,6 @@ function PtzControlPanel({
)} )}
{ptz?.features?.includes("pt-r-fov") && ( {ptz?.features?.includes("pt-r-fov") && (
<TooltipProvider>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button <Button
@ -980,18 +973,22 @@ function PtzControlPanel({
</p> </p>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider>
)} )}
{(ptz?.presets?.length ?? 0) > 0 && ( {(ptz?.presets?.length ?? 0) > 0 && (
<TooltipProvider> <DropdownMenu modal={!isDesktop}>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<DropdownMenu modal={!isDesktop}>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button aria-label={t("ptz.presets")}> <Button aria-label={t("ptz.presets")}>
<BsThreeDotsVertical /> <BsThreeDotsVertical />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
</TooltipTrigger>
<TooltipContent>
<p>{t("ptz.presets")}</p>
</TooltipContent>
</Tooltip>
<DropdownMenuContent <DropdownMenuContent
className="scrollbar-container max-h-[40dvh] overflow-y-auto" className="scrollbar-container max-h-[40dvh] overflow-y-auto"
onCloseAutoFocus={(e) => e.preventDefault()} onCloseAutoFocus={(e) => e.preventDefault()}
@ -1008,12 +1005,6 @@ function PtzControlPanel({
))} ))}
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</TooltipTrigger>
<TooltipContent>
<p>{t("ptz.presets")}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
)} )}
</div> </div>
); );
@ -1401,9 +1392,11 @@ function FrigateCameraFeatures({
}} }}
> >
<SelectTrigger className="w-full"> <SelectTrigger className="w-full">
<SelectValue>
{Object.keys(camera.live.streams).find( {Object.keys(camera.live.streams).find(
(key) => camera.live.streams[key] === streamName, (key) => camera.live.streams[key] === streamName,
)} )}
</SelectValue>
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -1733,9 +1726,11 @@ function FrigateCameraFeatures({
}} }}
> >
<SelectTrigger className="w-full"> <SelectTrigger className="w-full">
<SelectValue>
{Object.keys(camera.live.streams).find( {Object.keys(camera.live.streams).find(
(key) => camera.live.streams[key] === streamName, (key) => camera.live.streams[key] === streamName,
)} )}
</SelectValue>
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>