Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-03-04 00:17:22 +01:00
Code Issues Projects Releases Wiki Activity

Add tooltips to ptz controls (#15633)

Browse Source
This commit is contained in:
Josh Hawkins 2024-12-21 17:57:22 -06:00 committed by GitHub
parent bed20de302
commit 9387246f83
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 119 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
web/src/views/live/LiveCameraView.tsx
View File

@ -17,7 +17,12 @@ import {
DropdownMenuItem, DropdownMenuItem,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { TooltipProvider } from "@/components/ui/tooltip"; import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { useResizeObserver } from "@/hooks/resize-observer"; import { useResizeObserver } from "@/hooks/resize-observer";
import useKeyboardListener from "@/hooks/use-keyboard-listener"; import useKeyboardListener from "@/hooks/use-keyboard-listener";
import { CameraConfig, FrigateConfig } from "@/types/frigateConfig"; import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
@ -29,6 +34,7 @@ import {
import { CameraPtzInfo } from "@/types/ptz"; import { CameraPtzInfo } from "@/types/ptz";
import { RecordingStartingPoint } from "@/types/record"; import { RecordingStartingPoint } from "@/types/record";
import React, { import React, {
ReactNode,
useCallback, useCallback,
useEffect, useEffect,
useMemo, useMemo,
@ -518,6 +524,53 @@ export default function LiveCameraView({
); );
} }
type TooltipButtonProps = {
label: string;
onClick?: () => void;
onMouseDown?: (e: React.MouseEvent) => void;
onMouseUp?: (e: React.MouseEvent) => void;
onTouchStart?: (e: React.TouchEvent) => void;
onTouchEnd?: (e: React.TouchEvent) => void;
children: ReactNode;
className?: string;
};
function TooltipButton({
label,
onClick,
onMouseDown,
onMouseUp,
onTouchStart,
onTouchEnd,
children,
className,
...props
}: TooltipButtonProps) {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button
aria-label={label}
onClick={onClick}
onMouseDown={onMouseDown}
onMouseUp={onMouseUp}
onTouchStart={onTouchStart}
onTouchEnd={onTouchEnd}
className={className}
{...props}
>
{children}
</Button>
</TooltipTrigger>
<TooltipContent>
<p>{label}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}
function PtzControlPanel({ function PtzControlPanel({
camera, camera,
clickOverlay, clickOverlay,
@ -611,8 +664,8 @@ function PtzControlPanel({
> >
{ptz?.features?.includes("pt") && ( {ptz?.features?.includes("pt") && (
<> <>
<Button <TooltipButton
aria-label="Move PTZ camera to the left" label="Move camera left"
onMouseDown={(e) => { onMouseDown={(e) => {
e.preventDefault(); e.preventDefault();
sendPtz("MOVE_LEFT"); sendPtz("MOVE_LEFT");
@ -625,9 +678,9 @@ function PtzControlPanel({
onTouchEnd={onStop} onTouchEnd={onStop}
> >
<FaAngleLeft /> <FaAngleLeft />
</Button> </TooltipButton>
<Button <TooltipButton
aria-label="Move PTZ camera up" label="Move camera up"
onMouseDown={(e) => { onMouseDown={(e) => {
e.preventDefault(); e.preventDefault();
sendPtz("MOVE_UP"); sendPtz("MOVE_UP");
@ -640,9 +693,9 @@ function PtzControlPanel({
onTouchEnd={onStop} onTouchEnd={onStop}
> >
<FaAngleUp /> <FaAngleUp />
</Button> </TooltipButton>
<Button <TooltipButton
aria-label="Move PTZ camera down" label="Move camera down"
onMouseDown={(e) => { onMouseDown={(e) => {
e.preventDefault(); e.preventDefault();
sendPtz("MOVE_DOWN"); sendPtz("MOVE_DOWN");
@ -655,9 +708,9 @@ function PtzControlPanel({
onTouchEnd={onStop} onTouchEnd={onStop}
> >
<FaAngleDown /> <FaAngleDown />
</Button> </TooltipButton>
<Button <TooltipButton
aria-label="Move PTZ camera to the right" label="Move camera right"
onMouseDown={(e) => { onMouseDown={(e) => {
e.preventDefault(); e.preventDefault();
sendPtz("MOVE_RIGHT"); sendPtz("MOVE_RIGHT");
@ -670,13 +723,13 @@ function PtzControlPanel({
onTouchEnd={onStop} onTouchEnd={onStop}
> >
<FaAngleRight /> <FaAngleRight />
</Button> </TooltipButton>
</> </>
)} )}
{ptz?.features?.includes("zoom") && ( {ptz?.features?.includes("zoom") && (
<> <>
<Button <TooltipButton
aria-label="Zoom PTZ camera in" label="Zoom in"
onMouseDown={(e) => { onMouseDown={(e) => {
e.preventDefault(); e.preventDefault();
sendPtz("ZOOM_IN"); sendPtz("ZOOM_IN");
@ -689,9 +742,9 @@ function PtzControlPanel({
onTouchEnd={onStop} onTouchEnd={onStop}
> >
<MdZoomIn /> <MdZoomIn />
</Button> </TooltipButton>
<Button <TooltipButton
aria-label="Zoom PTZ camera out" label="Zoom out"
onMouseDown={(e) => { onMouseDown={(e) => {
e.preventDefault(); e.preventDefault();
sendPtz("ZOOM_OUT"); sendPtz("ZOOM_OUT");
@ -704,21 +757,32 @@ function PtzControlPanel({
onTouchEnd={onStop} onTouchEnd={onStop}
> >
<MdZoomOut /> <MdZoomOut />
</Button> </TooltipButton>
</> </>
)} )}
{ptz?.features?.includes("pt-r-fov") && ( {ptz?.features?.includes("pt-r-fov") && (
<> <TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button <Button
className={`${clickOverlay ? "text-selected" : "text-primary"}`} className={`${clickOverlay ? "text-selected" : "text-primary"}`}
aria-label="Click in the frame to center the PTZ camera" aria-label="Click in the frame to center the camera"
onClick={() => setClickOverlay(!clickOverlay)} onClick={() => setClickOverlay(!clickOverlay)}
> >
<TbViewfinder /> <TbViewfinder />
</Button> </Button>
</> </TooltipTrigger>
<TooltipContent>
<p>{clickOverlay ? "Disable" : "Enable"} click to move</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
)} )}
{(ptz?.presets?.length ?? 0) > 0 && ( {(ptz?.presets?.length ?? 0) > 0 && (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<DropdownMenu modal={!isDesktop}> <DropdownMenu modal={!isDesktop}>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button aria-label="PTZ camera presets"> <Button aria-label="PTZ camera presets">
@ -729,8 +793,7 @@ function PtzControlPanel({
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()}
> >
{ptz?.presets.map((preset) => { {ptz?.presets.map((preset) => (
return (
<DropdownMenuItem <DropdownMenuItem
key={preset} key={preset}
aria-label={preset} aria-label={preset}
@ -739,10 +802,15 @@ function PtzControlPanel({
> >
{preset} {preset}
</DropdownMenuItem> </DropdownMenuItem>
); ))}
})}
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</TooltipTrigger>
<TooltipContent>
<p>PTZ camera presets</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
)} )}
</div> </div>
); );