mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-07-02 07:10:27 +00:00
* config file changes * config migrator * stream selection on single camera live view * camera streaming settings dialog * manage persistent group streaming settings * apply streaming settings in camera groups * add ability to clear all streaming settings from settings * docs * update reference config * fixes * clarify docs * use first stream as default in dialog * ensure still image is visible after switching stream type to none * docs * clarify docs * add ability to continue playing stream in background * fix props * put stream selection inside dropdown on desktop * add capabilities to live mode hook * live context menu component * resize observer: only return new dimensions if they've actually changed * pass volume prop to players * fix slider bug, https://github.com/shadcn-ui/ui/issues/1448 * update react-grid-layout * prevent animated transitions on draggable grid layout * add context menu to dashboards * use provider * streaming dialog from context menu * docs * add jsmpeg warning to context menu * audio and two way talk indicators in single camera view * add link to debug view * don't use hook * create manual events from live camera view * maintain grow classes on grid items * fix initial volume state on default dashboard * fix pointer events causing context menu to end up underneath image on iOS * mobile drawer tweaks * stream stats * show settings menu for non-restreamed cameras * consistent settings icon * tweaks * optional stats to fix birdseye player * add toaster to live camera view * fix crash on initial save in streaming dialog * don't require restreaming for context menu streaming settings * add debug view to context menu * stats fixes * update docs * always show stream info when restreamed * update camera streaming dialog * make note of no h265 support for webrtc * docs clarity * ensure docs show streams as a dict * docs clarity * fix css file * tweaks
67 lines
1.5 KiB
TypeScript
67 lines
1.5 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",
|
|
},
|
|
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",
|
|
},
|
|
};
|
|
|
|
type CameraFeatureToggleProps = {
|
|
className?: string;
|
|
variant?: "primary" | "overlay";
|
|
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={cn(
|
|
"flex flex-col items-center justify-center",
|
|
variants[variant][isActive ? "active" : "inactive"],
|
|
className,
|
|
)}
|
|
>
|
|
<Icon
|
|
className={`size-5 md:m-[6px] ${isActive ? "text-white" : "text-secondary-foreground"}`}
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
if (isDesktop) {
|
|
return (
|
|
<Tooltip>
|
|
<TooltipTrigger>{content}</TooltipTrigger>
|
|
<TooltipContent side="bottom">
|
|
<p>{title}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
return content;
|
|
}
|