From 5403ee1c8d47b124b0ff3489d685f2950493798c Mon Sep 17 00:00:00 2001
From: Stavros kois <s.kois@outlook.com>
Date: Sat, 10 Aug 2024 14:37:35 +0300
Subject: [PATCH 1/5] add shortcut and query for live view

---
 web/src/views/live/LiveDashboardView.tsx | 33 ++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index 00c0462243..c48654aa14 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -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"

From 15c1e6af499552b43eab8255b9cbe7e85f7bb580 Mon Sep 17 00:00:00 2001
From: Stavros Kois <47820033+stavros-k@users.noreply.github.com>
Date: Sat, 10 Aug 2024 15:39:17 +0300
Subject: [PATCH 2/5] Update web/src/views/live/LiveDashboardView.tsx

---
 web/src/views/live/LiveDashboardView.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index c48654aa14..d594d36c79 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -34,7 +34,6 @@ 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 = {

From 1c0e2e8430cf6e0677a8a41b4cd026d86e545bfb Mon Sep 17 00:00:00 2001
From: Stavros Kois <47820033+stavros-k@users.noreply.github.com>
Date: Sat, 10 Aug 2024 15:39:24 +0300
Subject: [PATCH 3/5] Update web/src/views/live/LiveDashboardView.tsx

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>
---
 web/src/views/live/LiveDashboardView.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index d594d36c79..076e6b8e8e 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -269,11 +269,9 @@ export default function LiveDashboardView({
   useKeyboardListener(["f"], onKeyboardShortcut);
   const handleFullScreenQuery = useCallback(
     (value: string) => {
-      const desiredState = value === "true";
-      if (fullscreen === desiredState) {
-        return;
+      if (!fullscreen) {
+          toggleFullscreen();
       }
-      toggleFullscreen;
     },
     [fullscreen, toggleFullscreen],
   );

From f6c64ff88ee36bd4a5db718c56aa1cc19e883bde Mon Sep 17 00:00:00 2001
From: Stavros Kois <47820033+stavros-k@users.noreply.github.com>
Date: Sat, 10 Aug 2024 15:44:57 +0300
Subject: [PATCH 4/5] Apply suggestions from code review

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>
---
 web/src/views/live/LiveDashboardView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index 076e6b8e8e..c151cc3efd 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -268,9 +268,9 @@ export default function LiveDashboardView({
 
   useKeyboardListener(["f"], onKeyboardShortcut);
   const handleFullScreenQuery = useCallback(
-    (value: string) => {
+    () => {
       if (!fullscreen) {
-          toggleFullscreen();
+        toggleFullscreen();
       }
     },
     [fullscreen, toggleFullscreen],

From fe991c18669f3c76e480853529d68dd8d6c13099 Mon Sep 17 00:00:00 2001
From: Stavros Kois <47820033+stavros-k@users.noreply.github.com>
Date: Sat, 10 Aug 2024 19:14:38 +0300
Subject: [PATCH 5/5] Update LiveDashboardView.tsx

---
 web/src/views/live/LiveDashboardView.tsx | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index c151cc3efd..51f46d2f2a 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -34,7 +34,6 @@ import { useResizeObserver } from "@/hooks/resize-observer";
 import useKeyboardListener, {
   KeyModifiers,
 } from "@/hooks/use-keyboard-listener";
-import { useSearchEffect } from "@/hooks/use-overlay-state";
 
 type LiveDashboardViewProps = {
   cameras: CameraConfig[];
@@ -267,15 +266,6 @@ export default function LiveDashboardView({
   );
 
   useKeyboardListener(["f"], onKeyboardShortcut);
-  const handleFullScreenQuery = useCallback(
-    () => {
-      if (!fullscreen) {
-        toggleFullscreen();
-      }
-    },
-    [fullscreen, toggleFullscreen],
-  );
-  useSearchEffect("fullscreen", handleFullScreenQuery);
 
   return (
     <div