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>
This commit is contained in:
Jan-Henrik Bruhn 2026-01-19 11:44:23 +01:00
parent 520eef879e
commit 68ca121b19
2 changed files with 39 additions and 2 deletions

View file

@ -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(() => { const handleFitView = useCallback(() => {
fitView({ padding: 0.2, duration: 300 }); fitView({ padding: 0.2, duration: 300 });
}, [fitView]); }, [fitView]);

View file

@ -36,8 +36,29 @@ export const useSettingsStore = create<SettingsState>()(
// Presentation Mode Settings // Presentation Mode Settings
presentationMode: false, presentationMode: false,
setPresentationMode: (enabled: boolean) => setPresentationMode: (enabled: boolean) => {
set({ presentationMode: enabled }), 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 // Future settings implementations go here
}), }),