mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-02 06:23:42 +00:00
531042467a
* config options * metrics * stop and restart ffmpeg processes * dispatcher * frontend websocket * buttons for testing * don't recreate log pipe * add/remove cam from birdseye when enabling/disabling * end all objects and send empty camera activity * enable/disable switch in ui * disable buttons when camera is disabled * use enabled_in_config for some frontend checks * tweaks * handle settings pane with disabled cameras * frontend tweaks * change to debug log * mqtt docs * tweak * ensure all ffmpeg processes are initially started * clean up * use zmq * remove camera metrics * remove camera metrics * tweaks * frontend tweaks
82 lines
2.0 KiB
TypeScript
82 lines
2.0 KiB
TypeScript
import { IconType } from "react-icons";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
import { isDesktop } from "react-device-detect";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const variants = {
|
|
primary: {
|
|
active: "font-bold text-white bg-selected rounded-lg",
|
|
inactive: "text-secondary-foreground bg-secondary rounded-lg",
|
|
disabled:
|
|
"text-secondary-foreground bg-secondary rounded-lg cursor-not-allowed opacity-50",
|
|
},
|
|
overlay: {
|
|
active: "font-bold text-white bg-selected rounded-full",
|
|
inactive:
|
|
"text-primary rounded-full bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500",
|
|
disabled:
|
|
"bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 rounded-full cursor-not-allowed opacity-50",
|
|
},
|
|
};
|
|
|
|
type CameraFeatureToggleProps = {
|
|
className?: string;
|
|
variant?: "primary" | "overlay";
|
|
isActive: boolean;
|
|
Icon: IconType;
|
|
title: string;
|
|
onClick?: () => void;
|
|
disabled?: boolean; // New prop for disabling
|
|
};
|
|
|
|
export default function CameraFeatureToggle({
|
|
className = "",
|
|
variant = "primary",
|
|
isActive,
|
|
Icon,
|
|
title,
|
|
onClick,
|
|
disabled = false, // Default to false
|
|
}: CameraFeatureToggleProps) {
|
|
const content = (
|
|
<div
|
|
onClick={disabled ? undefined : onClick}
|
|
className={cn(
|
|
"flex flex-col items-center justify-center",
|
|
disabled
|
|
? variants[variant].disabled
|
|
: variants[variant][isActive ? "active" : "inactive"],
|
|
className,
|
|
)}
|
|
>
|
|
<Icon
|
|
className={cn(
|
|
"size-5 md:m-[6px]",
|
|
disabled
|
|
? "text-gray-400"
|
|
: isActive
|
|
? "text-white"
|
|
: "text-secondary-foreground",
|
|
)}
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
if (isDesktop) {
|
|
return (
|
|
<Tooltip>
|
|
<TooltipTrigger disabled={disabled}>{content}</TooltipTrigger>
|
|
<TooltipContent side="bottom">
|
|
<p>{title}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
return content;
|
|
}
|