mirror of
https://github.com/blakeblackshear/frigate.git
synced 2025-12-13 08:36:41 +03:00
Cleanup components
This commit is contained in:
Nicolas Mowen
parent
9fdce80729
commit
a39f4b8192
321
web/src/components/overlay/PtzControlPanel.tsx
Normal file
321
web/src/components/overlay/PtzControlPanel.tsx
Normal file
@ -0,0 +1,321 @@
|
||||
import { usePtzCommand } from "@/api/ws";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import useKeyboardListener from "@/hooks/use-keyboard-listener";
|
||||
import { CameraPtzInfo } from "@/types/ptz";
|
||||
import React, { useCallback } from "react";
|
||||
import { isDesktop, isMobile } from "react-device-detect";
|
||||
import { BsThreeDotsVertical } from "react-icons/bs";
|
||||
import {
|
||||
FaAngleDown,
|
||||
FaAngleLeft,
|
||||
FaAngleRight,
|
||||
FaAngleUp,
|
||||
} from "react-icons/fa";
|
||||
import { TbViewfinder } from "react-icons/tb";
|
||||
import {
|
||||
MdCenterFocusStrong,
|
||||
MdCenterFocusWeak,
|
||||
MdZoomIn,
|
||||
MdZoomOut,
|
||||
} from "react-icons/md";
|
||||
import useSWR from "swr";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
import { useTranslation } from "react-i18next";
|
||||
import TooltipButton from "@/views/button/TooltipButton";
|
||||
|
||||
export default function PtzControlPanel({
|
||||
camera,
|
||||
enabled,
|
||||
clickOverlay,
|
||||
setClickOverlay,
|
||||
}: {
|
||||
camera: string;
|
||||
enabled: boolean;
|
||||
clickOverlay: boolean;
|
||||
setClickOverlay: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
}) {
|
||||
const { t } = useTranslation(["views/live"]);
|
||||
const { data: ptz } = useSWR<CameraPtzInfo>(
|
||||
enabled ? `${camera}/ptz/info` : null,
|
||||
);
|
||||
|
||||
const { send: sendPtz } = usePtzCommand(camera);
|
||||
|
||||
const onStop = useCallback(
|
||||
(e: React.SyntheticEvent) => {
|
||||
e.preventDefault();
|
||||
sendPtz("STOP");
|
||||
},
|
||||
[sendPtz],
|
||||
);
|
||||
|
||||
useKeyboardListener(
|
||||
[
|
||||
"ArrowLeft",
|
||||
"ArrowRight",
|
||||
"ArrowUp",
|
||||
"ArrowDown",
|
||||
"+",
|
||||
"-",
|
||||
"1",
|
||||
"2",
|
||||
"3",
|
||||
"4",
|
||||
"5",
|
||||
"6",
|
||||
"7",
|
||||
"8",
|
||||
"9",
|
||||
],
|
||||
(key, modifiers) => {
|
||||
if (modifiers.repeat || !key) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (["1", "2", "3", "4", "5", "6", "7", "8", "9"].includes(key)) {
|
||||
const presetNumber = parseInt(key);
|
||||
if (
|
||||
ptz &&
|
||||
(ptz.presets?.length ?? 0) > 0 &&
|
||||
presetNumber <= ptz.presets.length
|
||||
) {
|
||||
sendPtz(`preset_${ptz.presets[presetNumber - 1]}`);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (!modifiers.down) {
|
||||
sendPtz("STOP");
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
sendPtz("MOVE_LEFT");
|
||||
break;
|
||||
case "ArrowRight":
|
||||
sendPtz("MOVE_RIGHT");
|
||||
break;
|
||||
case "ArrowUp":
|
||||
sendPtz("MOVE_UP");
|
||||
break;
|
||||
case "ArrowDown":
|
||||
sendPtz("MOVE_DOWN");
|
||||
break;
|
||||
case "+":
|
||||
sendPtz(modifiers.shift ? "FOCUS_IN" : "ZOOM_IN");
|
||||
break;
|
||||
case "-":
|
||||
sendPtz(modifiers.shift ? "FOCUS_OUT" : "ZOOM_OUT");
|
||||
break;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"absolute inset-x-2 bottom-[10%] flex select-none flex-wrap items-center justify-center gap-1 md:left-[50%] md:-translate-x-[50%] md:flex-nowrap",
|
||||
isMobile && "landscape:ml-12",
|
||||
)}
|
||||
>
|
||||
{ptz?.features?.includes("pt") && (
|
||||
<>
|
||||
<TooltipButton
|
||||
label={t("ptz.move.left.label")}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("MOVE_LEFT");
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("MOVE_LEFT");
|
||||
}}
|
||||
onMouseUp={onStop}
|
||||
onTouchEnd={onStop}
|
||||
>
|
||||
<FaAngleLeft />
|
||||
</TooltipButton>
|
||||
<TooltipButton
|
||||
label={t("ptz.move.up.label")}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("MOVE_UP");
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("MOVE_UP");
|
||||
}}
|
||||
onMouseUp={onStop}
|
||||
onTouchEnd={onStop}
|
||||
>
|
||||
<FaAngleUp />
|
||||
</TooltipButton>
|
||||
<TooltipButton
|
||||
label={t("ptz.move.down.label")}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("MOVE_DOWN");
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("MOVE_DOWN");
|
||||
}}
|
||||
onMouseUp={onStop}
|
||||
onTouchEnd={onStop}
|
||||
>
|
||||
<FaAngleDown />
|
||||
</TooltipButton>
|
||||
<TooltipButton
|
||||
label={t("ptz.move.right.label")}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("MOVE_RIGHT");
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("MOVE_RIGHT");
|
||||
}}
|
||||
onMouseUp={onStop}
|
||||
onTouchEnd={onStop}
|
||||
>
|
||||
<FaAngleRight />
|
||||
</TooltipButton>
|
||||
</>
|
||||
)}
|
||||
{ptz?.features?.includes("zoom") && (
|
||||
<>
|
||||
<TooltipButton
|
||||
label={t("ptz.zoom.in.label")}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("ZOOM_IN");
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("ZOOM_IN");
|
||||
}}
|
||||
onMouseUp={onStop}
|
||||
onTouchEnd={onStop}
|
||||
>
|
||||
<MdZoomIn />
|
||||
</TooltipButton>
|
||||
<TooltipButton
|
||||
label={t("ptz.zoom.out.label")}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("ZOOM_OUT");
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("ZOOM_OUT");
|
||||
}}
|
||||
onMouseUp={onStop}
|
||||
onTouchEnd={onStop}
|
||||
>
|
||||
<MdZoomOut />
|
||||
</TooltipButton>
|
||||
</>
|
||||
)}
|
||||
{ptz?.features?.includes("focus") && (
|
||||
<>
|
||||
<TooltipButton
|
||||
label={t("ptz.focus.in.label")}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("FOCUS_IN");
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("FOCUS_IN");
|
||||
}}
|
||||
onMouseUp={onStop}
|
||||
onTouchEnd={onStop}
|
||||
>
|
||||
<MdCenterFocusStrong />
|
||||
</TooltipButton>
|
||||
<TooltipButton
|
||||
label={t("ptz.focus.out.label")}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("FOCUS_OUT");
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("FOCUS_OUT");
|
||||
}}
|
||||
onMouseUp={onStop}
|
||||
onTouchEnd={onStop}
|
||||
>
|
||||
<MdCenterFocusWeak />
|
||||
</TooltipButton>
|
||||
</>
|
||||
)}
|
||||
|
||||
{ptz?.features?.includes("pt-r-fov") && (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
className={`${clickOverlay ? "text-selected" : "text-primary"}`}
|
||||
aria-label={t("ptz.move.clickMove.label")}
|
||||
onClick={() => setClickOverlay(!clickOverlay)}
|
||||
>
|
||||
<TbViewfinder />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>
|
||||
{clickOverlay
|
||||
? t("ptz.move.clickMove.disable")
|
||||
: t("ptz.move.clickMove.enable")}
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
{(ptz?.presets?.length ?? 0) > 0 && (
|
||||
<DropdownMenu modal={!isDesktop}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button aria-label={t("ptz.presets")}>
|
||||
<BsThreeDotsVertical />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{t("ptz.presets")}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<DropdownMenuContent
|
||||
className="scrollbar-container max-h-[40dvh] overflow-y-auto"
|
||||
onCloseAutoFocus={(e) => e.preventDefault()}
|
||||
>
|
||||
{ptz?.presets.map((preset) => (
|
||||
<DropdownMenuItem
|
||||
key={preset}
|
||||
aria-label={preset}
|
||||
className="cursor-pointer"
|
||||
onSelect={() => sendPtz(`preset_${preset}`)}
|
||||
>
|
||||
{preset}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
52
web/src/views/button/TooltipButton.tsx
Normal file
52
web/src/views/button/TooltipButton.tsx
Normal file
@ -0,0 +1,52 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { ReactNode } from "react";
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
export default function TooltipButton({
|
||||
label,
|
||||
onClick,
|
||||
onMouseDown,
|
||||
onMouseUp,
|
||||
onTouchStart,
|
||||
onTouchEnd,
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: TooltipButtonProps) {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@ -17,7 +17,6 @@ import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
@ -25,11 +24,6 @@ import {
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { useResizeObserver } from "@/hooks/resize-observer";
|
||||
import useKeyboardListener from "@/hooks/use-keyboard-listener";
|
||||
import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
|
||||
@ -38,10 +32,8 @@ import {
|
||||
LiveStreamMetadata,
|
||||
VideoResolutionType,
|
||||
} from "@/types/live";
|
||||
import { CameraPtzInfo } from "@/types/ptz";
|
||||
import { RecordingStartingPoint } from "@/types/record";
|
||||
import React, {
|
||||
ReactNode,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
@ -56,12 +48,7 @@ import {
|
||||
isTablet,
|
||||
useMobileOrientation,
|
||||
} from "react-device-detect";
|
||||
import { BsThreeDotsVertical } from "react-icons/bs";
|
||||
import {
|
||||
FaAngleDown,
|
||||
FaAngleLeft,
|
||||
FaAngleRight,
|
||||
FaAngleUp,
|
||||
FaCog,
|
||||
FaCompress,
|
||||
FaExpand,
|
||||
@ -91,8 +78,6 @@ import {
|
||||
LuX,
|
||||
} from "react-icons/lu";
|
||||
import {
|
||||
MdCenterFocusStrong,
|
||||
MdCenterFocusWeak,
|
||||
MdClosedCaption,
|
||||
MdClosedCaptionDisabled,
|
||||
MdNoPhotography,
|
||||
@ -100,8 +85,6 @@ import {
|
||||
MdPersonOff,
|
||||
MdPersonSearch,
|
||||
MdPhotoCamera,
|
||||
MdZoomIn,
|
||||
MdZoomOut,
|
||||
} from "react-icons/md";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
|
||||
@ -126,6 +109,7 @@ import { Toaster } from "@/components/ui/sonner";
|
||||
import { useIsAdmin } from "@/hooks/use-is-admin";
|
||||
import { Trans, useTranslation } from "react-i18next";
|
||||
import { useDocDomain } from "@/hooks/use-doc-domain";
|
||||
import PtzControlPanel from "@/components/overlay/PtzControlPanel";
|
||||
|
||||
type LiveCameraViewProps = {
|
||||
config?: FrigateConfig;
|
||||
@ -680,336 +664,6 @@ 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 (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
function PtzControlPanel({
|
||||
camera,
|
||||
enabled,
|
||||
clickOverlay,
|
||||
setClickOverlay,
|
||||
}: {
|
||||
camera: string;
|
||||
enabled: boolean;
|
||||
clickOverlay: boolean;
|
||||
setClickOverlay: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
}) {
|
||||
const { t } = useTranslation(["views/live"]);
|
||||
const { data: ptz } = useSWR<CameraPtzInfo>(
|
||||
enabled ? `${camera}/ptz/info` : null,
|
||||
);
|
||||
|
||||
const { send: sendPtz } = usePtzCommand(camera);
|
||||
|
||||
const onStop = useCallback(
|
||||
(e: React.SyntheticEvent) => {
|
||||
e.preventDefault();
|
||||
sendPtz("STOP");
|
||||
},
|
||||
[sendPtz],
|
||||
);
|
||||
|
||||
useKeyboardListener(
|
||||
[
|
||||
"ArrowLeft",
|
||||
"ArrowRight",
|
||||
"ArrowUp",
|
||||
"ArrowDown",
|
||||
"+",
|
||||
"-",
|
||||
"1",
|
||||
"2",
|
||||
"3",
|
||||
"4",
|
||||
"5",
|
||||
"6",
|
||||
"7",
|
||||
"8",
|
||||
"9",
|
||||
],
|
||||
(key, modifiers) => {
|
||||
if (modifiers.repeat || !key) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (["1", "2", "3", "4", "5", "6", "7", "8", "9"].includes(key)) {
|
||||
const presetNumber = parseInt(key);
|
||||
if (
|
||||
ptz &&
|
||||
(ptz.presets?.length ?? 0) > 0 &&
|
||||
presetNumber <= ptz.presets.length
|
||||
) {
|
||||
sendPtz(`preset_${ptz.presets[presetNumber - 1]}`);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (!modifiers.down) {
|
||||
sendPtz("STOP");
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
sendPtz("MOVE_LEFT");
|
||||
break;
|
||||
case "ArrowRight":
|
||||
sendPtz("MOVE_RIGHT");
|
||||
break;
|
||||
case "ArrowUp":
|
||||
sendPtz("MOVE_UP");
|
||||
break;
|
||||
case "ArrowDown":
|
||||
sendPtz("MOVE_DOWN");
|
||||
break;
|
||||
case "+":
|
||||
sendPtz(modifiers.shift ? "FOCUS_IN" : "ZOOM_IN");
|
||||
break;
|
||||
case "-":
|
||||
sendPtz(modifiers.shift ? "FOCUS_OUT" : "ZOOM_OUT");
|
||||
break;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"absolute inset-x-2 bottom-[10%] flex select-none flex-wrap items-center justify-center gap-1 md:left-[50%] md:-translate-x-[50%] md:flex-nowrap",
|
||||
isMobile && "landscape:ml-12",
|
||||
)}
|
||||
>
|
||||
{ptz?.features?.includes("pt") && (
|
||||
<>
|
||||
<TooltipButton
|
||||
label={t("ptz.move.left.label")}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("MOVE_LEFT");
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("MOVE_LEFT");
|
||||
}}
|
||||
onMouseUp={onStop}
|
||||
onTouchEnd={onStop}
|
||||
>
|
||||
<FaAngleLeft />
|
||||
</TooltipButton>
|
||||
<TooltipButton
|
||||
label={t("ptz.move.up.label")}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("MOVE_UP");
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("MOVE_UP");
|
||||
}}
|
||||
onMouseUp={onStop}
|
||||
onTouchEnd={onStop}
|
||||
>
|
||||
<FaAngleUp />
|
||||
</TooltipButton>
|
||||
<TooltipButton
|
||||
label={t("ptz.move.down.label")}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("MOVE_DOWN");
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("MOVE_DOWN");
|
||||
}}
|
||||
onMouseUp={onStop}
|
||||
onTouchEnd={onStop}
|
||||
>
|
||||
<FaAngleDown />
|
||||
</TooltipButton>
|
||||
<TooltipButton
|
||||
label={t("ptz.move.right.label")}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("MOVE_RIGHT");
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("MOVE_RIGHT");
|
||||
}}
|
||||
onMouseUp={onStop}
|
||||
onTouchEnd={onStop}
|
||||
>
|
||||
<FaAngleRight />
|
||||
</TooltipButton>
|
||||
</>
|
||||
)}
|
||||
{ptz?.features?.includes("zoom") && (
|
||||
<>
|
||||
<TooltipButton
|
||||
label={t("ptz.zoom.in.label")}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("ZOOM_IN");
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("ZOOM_IN");
|
||||
}}
|
||||
onMouseUp={onStop}
|
||||
onTouchEnd={onStop}
|
||||
>
|
||||
<MdZoomIn />
|
||||
</TooltipButton>
|
||||
<TooltipButton
|
||||
label={t("ptz.zoom.out.label")}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("ZOOM_OUT");
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("ZOOM_OUT");
|
||||
}}
|
||||
onMouseUp={onStop}
|
||||
onTouchEnd={onStop}
|
||||
>
|
||||
<MdZoomOut />
|
||||
</TooltipButton>
|
||||
</>
|
||||
)}
|
||||
{ptz?.features?.includes("focus") && (
|
||||
<>
|
||||
<TooltipButton
|
||||
label={t("ptz.focus.in.label")}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("FOCUS_IN");
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("FOCUS_IN");
|
||||
}}
|
||||
onMouseUp={onStop}
|
||||
onTouchEnd={onStop}
|
||||
>
|
||||
<MdCenterFocusStrong />
|
||||
</TooltipButton>
|
||||
<TooltipButton
|
||||
label={t("ptz.focus.out.label")}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("FOCUS_OUT");
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("FOCUS_OUT");
|
||||
}}
|
||||
onMouseUp={onStop}
|
||||
onTouchEnd={onStop}
|
||||
>
|
||||
<MdCenterFocusWeak />
|
||||
</TooltipButton>
|
||||
</>
|
||||
)}
|
||||
|
||||
{ptz?.features?.includes("pt-r-fov") && (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
className={`${clickOverlay ? "text-selected" : "text-primary"}`}
|
||||
aria-label={t("ptz.move.clickMove.label")}
|
||||
onClick={() => setClickOverlay(!clickOverlay)}
|
||||
>
|
||||
<TbViewfinder />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>
|
||||
{clickOverlay
|
||||
? t("ptz.move.clickMove.disable")
|
||||
: t("ptz.move.clickMove.enable")}
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
{(ptz?.presets?.length ?? 0) > 0 && (
|
||||
<DropdownMenu modal={!isDesktop}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button aria-label={t("ptz.presets")}>
|
||||
<BsThreeDotsVertical />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{t("ptz.presets")}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<DropdownMenuContent
|
||||
className="scrollbar-container max-h-[40dvh] overflow-y-auto"
|
||||
onCloseAutoFocus={(e) => e.preventDefault()}
|
||||
>
|
||||
{ptz?.presets.map((preset) => (
|
||||
<DropdownMenuItem
|
||||
key={preset}
|
||||
aria-label={preset}
|
||||
className="cursor-pointer"
|
||||
onSelect={() => sendPtz(`preset_${preset}`)}
|
||||
>
|
||||
{preset}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function OnDemandRetentionMessage({ camera }: { camera: CameraConfig }) {
|
||||
const { t } = useTranslation(["views/live", "views/events"]);
|
||||
const rankMap = { all: 0, motion: 1, active_objects: 2 };
|
||||
|
||||
Loading…
Reference in New Issue
Block a user