Individual live view (#10178)

* Get live camera view working

* Get ptz working

* Add button for ptz presets

* Add camera feature buttons

* Add button for camera audio

* Cleanup

* Cleanup mobile live

* Only use landscape check on mobile

web/src/components/dynamic/CameraFeatureToggle.tsx

@@ -0,0 +1,60 @@
+import { IconType } from "react-icons";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { isDesktop } from "react-device-detect";
+
+const variants = {
+  primary: {
+    active: "font-bold text-primary-foreground bg-primary",
+    inactive: "text-muted-foreground bg-muted",
+  },
+  secondary: {
+    active: "font-bold text-primary",
+    inactive: "text-muted-foreground",
+  },
+};
+
+type CameraFeatureToggleProps = {
+  className?: string;
+  variant?: "primary" | "secondary";
+  isActive: boolean;
+  Icon: IconType;
+  title: string;
+  onClick?: () => void;
+};
+
+export default function CameraFeatureToggle({
+  className = "",
+  variant = "primary",
+  isActive,
+  Icon,
+  title,
+  onClick,
+}: CameraFeatureToggleProps) {
+  const content = (
+    <div
+      onClick={onClick}
+      className={`${className} flex flex-col justify-center items-center rounded-lg ${
+        variants[variant][isActive ? "active" : "inactive"]
+      }`}
+    >
+      <Icon className="size-5 md:m-[6px]" />
+    </div>
+  );
+
+  if (isDesktop) {
+    return (
+      <Tooltip>
+        <TooltipTrigger>{content}</TooltipTrigger>
+        <TooltipContent side="bottom">
+          <p>{title}</p>
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  return content;
+}