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()( // 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 }),