diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx index 00c046224..51f46d2f2 100644 --- a/web/src/views/live/LiveDashboardView.tsx +++ b/web/src/views/live/LiveDashboardView.tsx @@ -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 (