mirror of
https://github.com/OFFIS-ESC/constellation-analyzer
synced 2026-01-26 23:43:40 +00:00
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:
parent
520eef879e
commit
68ca121b19
2 changed files with 39 additions and 2 deletions
16
src/App.tsx
16
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]);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}),
|
||||
|
|
|
|||
Loading…
Reference in a new issue