From 68ca121b1941ccfec943154400dedce31866545a Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <jan-henrik.bruhn@offis.de>
Date: Mon, 19 Jan 2026 11:44:23 +0100
Subject: [PATCH] Add automatic fullscreen mode when entering presentation mode

Changes:
- setPresentationMode now requests fullscreen when enabled
- Automatically exits fullscreen when presentation mode is disabled
- Sync presentation mode when user manually exits fullscreen (ESC key)
- Add fullscreenchange event listener in App.tsx
- Add debug logging for fullscreen state changes

Behavior:
- Clicking "Presentation Mode" in menu or pressing F11 -> enters fullscreen
- Pressing ESC in presentation mode -> exits both presentation and fullscreen
- Clicking exit presentation mode -> exits both modes
- Manual fullscreen exit (browser button) -> also exits presentation mode

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/App.tsx                 | 16 ++++++++++++++++
 src/stores/settingsStore.ts | 25 +++++++++++++++++++++++--
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 8f6e798..6e2a4b7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -83,6 +83,22 @@ function AppContent() {
       );
   }, []);
 
+  // Sync presentation mode with fullscreen state
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      // If user exits fullscreen manually (e.g., ESC key), exit presentation mode too
+      if (!document.fullscreenElement && presentationMode) {
+        console.log('[App] Fullscreen exited manually, exiting presentation mode');
+        useSettingsStore.getState().setPresentationMode(false);
+      }
+    };
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    };
+  }, [presentationMode]);
+
   const handleFitView = useCallback(() => {
     fitView({ padding: 0.2, duration: 300 });
   }, [fitView]);
diff --git a/src/stores/settingsStore.ts b/src/stores/settingsStore.ts
index a019a12..01bab1f 100644
--- a/src/stores/settingsStore.ts
+++ b/src/stores/settingsStore.ts
@@ -36,8 +36,29 @@ export const useSettingsStore = create<SettingsState>()(
 
       // Presentation Mode Settings
       presentationMode: false,
-      setPresentationMode: (enabled: boolean) =>
-        set({ presentationMode: enabled }),
+      setPresentationMode: (enabled: boolean) => {
+        set({ presentationMode: enabled });
+
+        // Handle fullscreen mode
+        if (enabled) {
+          // Enter fullscreen
+          console.log('[Settings] Entering presentation mode, requesting fullscreen');
+          const docElement = document.documentElement;
+          if (docElement.requestFullscreen) {
+            docElement.requestFullscreen().catch((err) => {
+              console.warn('[Settings] Failed to enter fullscreen:', err);
+            });
+          }
+        } else {
+          // Exit fullscreen
+          console.log('[Settings] Exiting presentation mode, exiting fullscreen');
+          if (document.fullscreenElement && document.exitFullscreen) {
+            document.exitFullscreen().catch((err) => {
+              console.warn('[Settings] Failed to exit fullscreen:', err);
+            });
+          }
+        }
+      },
 
       // Future settings implementations go here
     }),