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>
blakeblackshear · Aug 30, 2024 · d3259c4 · d3259c4
1 parent 940c12d
commit d3259c4
Showing 1 changed file with 20 additions and 0 deletions.
diff --git 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 (
  <div
  className="scrollbar-container size-full overflow-y-auto px-1 pt-2 md:p-2"