add shortcut and query for fullscreen in live view (#12924)

* add shortcut and query for live view

* Update web/src/views/live/LiveDashboardView.tsx

* Update web/src/views/live/LiveDashboardView.tsx

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>

* Apply suggestions from code review

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>

* Update LiveDashboardView.tsx

---------

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>
This commit is contained in:
Stavros Kois 2024-08-10 19:25:13 +03:00 committed by Nicolas Mowen
parent 940c12d9d8
commit d3259c4782

View File

@ -31,6 +31,9 @@ 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";
type LiveDashboardViewProps = {
cameras: CameraConfig[];
@ -247,6 +250,23 @@ 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);
return (
<div
className="scrollbar-container size-full overflow-y-auto px-1 pt-2 md:p-2"