add shortcut and query for live view

This commit is contained in:
Stavros kois 2024-08-10 14:37:35 +03:00
parent 99e03576bf
commit 5403ee1c8d
No known key found for this signature in database
GPG Key ID: 52FD8F5EE0A731BB

View File

@ -31,6 +31,11 @@ import { cn } from "@/lib/utils";
import { LivePlayerError, LivePlayerMode } from "@/types/live";
import { FaCompress, FaExpand } from "react-icons/fa";
import { useResizeObserver } from "@/hooks/resize-observer";
import useKeyboardListener, {
KeyModifiers,
} from "@/hooks/use-keyboard-listener";
import { useSearchParams } from "react-router-dom";
import { useSearchEffect } from "@/hooks/use-overlay-state";
type LiveDashboardViewProps = {
cameras: CameraConfig[];
@ -247,6 +252,34 @@ export default function LiveDashboardView({
[setPreferredLiveModes],
);
const onKeyboardShortcut = useCallback(
(key: string, modifiers: KeyModifiers) => {
if (!modifiers.down) {
return;
}
switch (key) {
case "f":
toggleFullscreen();
break;
}
},
[toggleFullscreen],
);
useKeyboardListener(["f"], onKeyboardShortcut);
const handleFullScreenQuery = useCallback(
(value: string) => {
const desiredState = value === "true";
if (fullscreen === desiredState) {
return;
}
toggleFullscreen;
},
[fullscreen, toggleFullscreen],
);
useSearchEffect("fullscreen", handleFullScreenQuery);
return (
<div
className="scrollbar-container size-full overflow-y-auto px-1 pt-2 md:p-2"