From d3259c4782c22236810b40309513dec677b70596 Mon Sep 17 00:00:00 2001
From: Stavros Kois <47820033+stavros-k@users.noreply.github.com>
Date: Sat, 10 Aug 2024 19:25:13 +0300
Subject: [PATCH] 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>
---
 web/src/views/live/LiveDashboardView.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

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 (
     <div
       className="scrollbar-container size-full overflow-y-auto px-1 pt-2 md:p-2"