mirror of
https://github.com/blakeblackshear/frigate.git
synced 2025-12-15 17:46:43 +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 {
|
import {
|
||||||
DropdownMenu,
|
DropdownMenu,
|
||||||
DropdownMenuContent,
|
DropdownMenuContent,
|
||||||
DropdownMenuItem,
|
|
||||||
DropdownMenuTrigger,
|
DropdownMenuTrigger,
|
||||||
} from "@/components/ui/dropdown-menu";
|
} from "@/components/ui/dropdown-menu";
|
||||||
import {
|
import {
|
||||||
@ -25,11 +24,6 @@ import {
|
|||||||
PopoverContent,
|
PopoverContent,
|
||||||
PopoverTrigger,
|
PopoverTrigger,
|
||||||
} from "@/components/ui/popover";
|
} from "@/components/ui/popover";
|
||||||
import {
|
|
||||||
Tooltip,
|
|
||||||
TooltipContent,
|
|
||||||
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";
|
||||||
@ -38,10 +32,8 @@ import {
|
|||||||
LiveStreamMetadata,
|
LiveStreamMetadata,
|
||||||
VideoResolutionType,
|
VideoResolutionType,
|
||||||
} from "@/types/live";
|
} from "@/types/live";
|
||||||
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,
|
||||||
@ -56,12 +48,7 @@ import {
|
|||||||
isTablet,
|
isTablet,
|
||||||
useMobileOrientation,
|
useMobileOrientation,
|
||||||
} from "react-device-detect";
|
} from "react-device-detect";
|
||||||
import { BsThreeDotsVertical } from "react-icons/bs";
|
|
||||||
import {
|
import {
|
||||||
FaAngleDown,
|
|
||||||
FaAngleLeft,
|
|
||||||
FaAngleRight,
|
|
||||||
FaAngleUp,
|
|
||||||
FaCog,
|
FaCog,
|
||||||
FaCompress,
|
FaCompress,
|
||||||
FaExpand,
|
FaExpand,
|
||||||
@ -91,8 +78,6 @@ import {
|
|||||||
LuX,
|
LuX,
|
||||||
} from "react-icons/lu";
|
} from "react-icons/lu";
|
||||||
import {
|
import {
|
||||||
MdCenterFocusStrong,
|
|
||||||
MdCenterFocusWeak,
|
|
||||||
MdClosedCaption,
|
MdClosedCaption,
|
||||||
MdClosedCaptionDisabled,
|
MdClosedCaptionDisabled,
|
||||||
MdNoPhotography,
|
MdNoPhotography,
|
||||||
@ -100,8 +85,6 @@ import {
|
|||||||
MdPersonOff,
|
MdPersonOff,
|
||||||
MdPersonSearch,
|
MdPersonSearch,
|
||||||
MdPhotoCamera,
|
MdPhotoCamera,
|
||||||
MdZoomIn,
|
|
||||||
MdZoomOut,
|
|
||||||
} from "react-icons/md";
|
} from "react-icons/md";
|
||||||
import { Link, useNavigate } from "react-router-dom";
|
import { Link, useNavigate } from "react-router-dom";
|
||||||
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
|
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 { useIsAdmin } from "@/hooks/use-is-admin";
|
||||||
import { Trans, useTranslation } from "react-i18next";
|
import { Trans, useTranslation } from "react-i18next";
|
||||||
import { useDocDomain } from "@/hooks/use-doc-domain";
|
import { useDocDomain } from "@/hooks/use-doc-domain";
|
||||||
|
import PtzControlPanel from "@/components/overlay/PtzControlPanel";
|
||||||
|
|
||||||
type LiveCameraViewProps = {
|
type LiveCameraViewProps = {
|
||||||
config?: FrigateConfig;
|
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 }) {
|
function OnDemandRetentionMessage({ camera }: { camera: CameraConfig }) {
|
||||||
const { t } = useTranslation(["views/live", "views/events"]);
|
const { t } = useTranslation(["views/live", "views/events"]);
|
||||||
const rankMap = { all: 0, motion: 1, active_objects: 2 };
|
const rankMap = { all: 0, motion: 1, active_objects: 2 };
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user