Add fullscreen mode

public/locales/de/translation.json

@@ -163,7 +163,9 @@
   },
   "presentBar": {
     "disableEditing": "Bearbeitung sperren",
+    "disableFullscreen": "Vollbildmodus verlassen",
     "enableEditing": "Bearbeitung freigeben",
+    "enableFullscreen": "Vollbildmodus betreten",
     "isPresenting": "präsentiert",
     "isPresentingUser": "{{displayName}} präsentiert",
     "startPresentation": "Präsentation starten",

public/locales/en/translation.json

@@ -163,7 +163,9 @@
   },
   "presentBar": {
     "disableEditing": "Disable editing",
+    "disableFullscreen": "Disable fullscreen",
     "enableEditing": "Enable editing",
+    "enableFullscreen": "Enable fullscreen",
     "isPresenting": "is presenting",
     "isPresentingUser": "{{displayName}} is presenting",
     "startPresentation": "Start presentation",

src/components/Layout/useLayoutState.tsx

@@ -18,7 +18,9 @@ import { grey } from '@mui/material/colors';
 import {
   createContext,
   PropsWithChildren,
+  useCallback,
   useContext,
+  useEffect,
   useMemo,
   useState,
 } from 'react';
@@ -39,12 +41,14 @@ type LayoutState = {
   isShowGrid: boolean;
   activeTool: ActiveTool;
   activeColor: string;
+  isFullscreen: boolean;
   setSlideOverviewVisible: (value: boolean) => void;
   setDeveloperToolsVisible: (value: boolean) => void;
   setShowCollaboratorsCursors: (value: boolean) => void;
   setShowGrid: (value: boolean) => void;
   setActiveTool: (tool: ActiveTool) => void;
   setActiveColor: (color: string) => void;
+  setFullscreen: (value: boolean) => void;
 };
 
 const LayoutStateContext = createContext<LayoutState | undefined>(undefined);
@@ -59,6 +63,27 @@ export function LayoutStateProvider({ children }: PropsWithChildren<{}>) {
   const [isShowGrid, setShowGrid] = useState<boolean>(true);
   const [activeTool, setActiveTool] = useState<ActiveTool>('select');
   const [activeColor, setActiveColor] = useState<string>(grey[500]);
+  const [isFullscreen, setFullscreenRaw] = useState(false);
+
+  const setFullscreen = useCallback((value: boolean) => {
+    if (value && !document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+    } else if (!value && document.fullscreenElement) {
+      document.exitFullscreen();
+    }
+  }, []);
+
+  useEffect(() => {
+    function listener(e: unknown) {
+      setFullscreenRaw(document.fullscreenElement !== null);
+    }
+
+    document.addEventListener('fullscreenchange', listener);
+
+    return () => {
+      document.removeEventListener('fullscreenchange', listener);
+    };
+  }, [isFullscreen]);
 
   const value = useMemo(
     () => ({
@@ -68,20 +93,24 @@ export function LayoutStateProvider({ children }: PropsWithChildren<{}>) {
       isShowGrid,
       activeTool,
       activeColor,
+      isFullscreen,
       setSlideOverviewVisible,
       setDeveloperToolsVisible,
       setShowCollaboratorsCursors,
       setShowGrid,
       setActiveTool,
       setActiveColor,
+      setFullscreen,
     }),
     [
       activeColor,
       activeTool,
       isDeveloperToolsVisible,
+      isFullscreen,
       isShowCollaboratorsCursors,
       isShowGrid,
       isSlideOverviewVisible,
+      setFullscreen,
     ]
   );
 

src/components/PresentBar/PresentBar.test.tsx

@@ -25,6 +25,7 @@ import {
 } from '../../lib/testUtils/documentTestUtils';
 import { mockRoomMember } from '../../lib/testUtils/matrixTestUtils';
 import { WhiteboardInstance, WhiteboardManager } from '../../state';
+import { LayoutStateProvider } from '../Layout';
 import { PresentBar } from './PresentBar';
 
 let widgetApi: MockedWidgetApi;
@@ -58,7 +59,7 @@ describe('<PresentBar/>', () => {
         whiteboardManager={whiteboardManager}
         widgetApi={widgetApi}
       >
-        {children}
+        <LayoutStateProvider>{children}</LayoutStateProvider>
       </WhiteboardTestingContextProvider>
     );
   });

src/components/PresentBar/PresentBar.tsx

@@ -16,6 +16,8 @@
 
 import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import FullscreenIcon from '@mui/icons-material/Fullscreen';
+import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
 import LockOpenIcon from '@mui/icons-material/LockOpen';
 import PresentToAllIcon from '@mui/icons-material/PresentToAll';
 import { Box } from '@mui/material';
@@ -34,13 +36,15 @@ import {
   ToolbarButton,
   ToolbarToggle,
 } from '../common/Toolbar';
+import { useLayoutState } from '../Layout';
 
 export function PresentBar() {
   const { t } = useTranslation();
   const whiteboardInstance = useActiveWhiteboardInstance();
   const { activeSlideId, isFirstSlideActive, isLastSlideActive } =
     useActiveSlide();
   const { state, toggleEditMode, togglePresentation } = usePresentationMode();
+  const { isFullscreen, setFullscreen } = useLayoutState();
 
   const handleToNextSlideClick = useCallback(() => {
     if (activeSlideId) {
@@ -58,6 +62,10 @@ export function PresentBar() {
     }
   }, [activeSlideId, whiteboardInstance]);
 
+  const toggleFullscreen = useCallback(() => {
+    setFullscreen(!isFullscreen);
+  }, [isFullscreen, setFullscreen]);
+
   const isPresenting = state.type === 'presenting';
   const isPresentingInEditMode = isPresenting && state.isEditMode;
 
@@ -77,12 +85,24 @@ export function PresentBar() {
     ? t('presentBar.disableEditing', 'Disable editing')
     : t('presentBar.enableEditing', 'Enable editing');
 
+  const fullScreenButtonTitle = isFullscreen
+    ? t('presentBar.disableFullscreen', 'Disable fullscreen')
+    : t('presentBar.enableFullscreen', 'Enable fullscreen');
+
   return (
     <Toolbar
       aria-label={presentBarTitle}
       sx={{ pointerEvents: 'initial' }}
       orientation="vertical"
     >
+      <ToolbarToggle
+        inputProps={{ 'aria-label': fullScreenButtonTitle }}
+        checked={isFullscreen}
+        onClick={toggleFullscreen}
+        icon={<FullscreenIcon />}
+        placement="bottom"
+        checkedIcon={<FullscreenExitIcon />}
+      />
       {state.type !== 'presentation' && (
         <ToolbarToggle
           inputProps={{ 'aria-label': buttonTitle }}