keyboardControls

src/components/deck/index.js

@@ -99,7 +99,7 @@ const Deck = ({
   }
 
   const filteredChildren = React.Children.map(children, mapMarkdownIntoSlides)
-    .flat(1)
+    .reduce((acc, slide) => acc.concat(slide), [])
     .filter(child => isComponentType(child, 'Slide'));
 
   const numberOfSlides = filteredChildren.length;
@@ -157,7 +157,12 @@ const Deck = ({
     [sendMessage, isController]
   );
 
-  const { navigateToNext, navigateToPrevious, goToSlide } = useUrlRouting({
+  const {
+    navigateToNext,
+    navigateToPrevious,
+    toggleMode,
+    goToSlide
+  } = useUrlRouting({
     dispatch,
     currentSlide: state.currentSlide,
     currentSlideElement: state.currentSlideElement,
@@ -171,7 +176,8 @@ const Deck = ({
   useKeyboardControls({
     keyboardControls,
     navigateToNext,
-    navigateToPrevious
+    navigateToPrevious,
+    toggleMode
   });
 
   const { runTransition } = React.useContext(TransitionPipeContext);

src/components/fullscreen.js

@@ -2,22 +2,16 @@ import * as React from 'react';
 import propTypes from 'prop-types';
 import styled from 'styled-components';
 
-const FullScreen = props => {
-  const toggleFullScreen = React.useCallback(() => {
-    if (!document.fullscreenElement) {
-      document.documentElement.requestFullscreen();
-    } else {
-      if ('exitFullscreen' in document) {
-        document.exitFullscreen();
-      }
-    }
-  }, []);
+import { useToggleFullScreen } from '../hooks/use-full-screen';
 
+const FullScreen = props => {
   const Container = styled('div')`
     @media print {
       display: none;
     }
   `;
+
+  const toggleFullScreen = useToggleFullScreen();
   return (
     <Container
       className="spectacle-fullscreen-button"

src/hooks/use-deck.js

@@ -35,6 +35,9 @@ function useDeck(initialState) {
           }
         };
       }
+      case 'TOGGLE_MODE': {
+        return { ...state, [action.payload.mode]: !state[action.payload.mode] };
+      }
       default:
         return { ...state };
     }

src/hooks/use-full-screen.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const useToggleFullScreen = () =>
+  React.useCallback(() => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+    } else {
+      if ('exitFullscreen' in document) {
+        document.exitFullscreen();
+      }
+    }
+  }, []);

src/hooks/use-keyboard-controls.js

@@ -1,12 +1,16 @@
 import React from 'react';
 import debounce from '../utils/debounce';
+import { useToggleFullScreen } from './use-full-screen';
+import { isWindows, isMacOS } from '../utils/detect-platform';
 
 const useKeyboardControls = ({
   keyboardControls = 'arrows',
   navigateToNext,
-  navigateToPrevious
+  navigateToPrevious,
+  toggleMode
 }) => {
   const keyPressCount = React.useRef(0);
+  const toggleFullScreen = useToggleFullScreen();
   React.useEffect(
     function() {
       // Keep track of the number of next slide presses for debounce
@@ -33,14 +37,49 @@ const useKeyboardControls = ({
             e.preventDefault();
           }
         }
+        if (!!e.altKey && isMacOS()) {
+          switch (e.key) {
+            case 'ø':
+              toggleMode('overviewMode');
+              break;
+            case 'π':
+              toggleMode('presenterMode');
+              break;
+            case 'ƒ':
+              toggleFullScreen();
+              break;
+            default:
+              null;
+          }
+        } else if (!!e.altKey && !!e.shiftKey && isWindows()) {
+          switch (e.key) {
+            case 'O':
+              toggleMode('overviewMode');
+              break;
+            case 'P':
+              toggleMode('presenterMode');
+              break;
+            case 'F':
+              toggleFullScreen();
+              break;
+            default:
+              null;
+          }
+        }
       }
 
       window.addEventListener('keydown', handleKeyDown);
       return () => {
         window.removeEventListener('keydown', handleKeyDown);
       };
     },
-    [keyboardControls, navigateToNext, navigateToPrevious]
+    [
+      keyboardControls,
+      navigateToNext,
+      navigateToPrevious,
+      toggleFullScreen,
+      toggleMode
+    ]
   );
 };
 

src/hooks/use-url-routing.js

@@ -304,9 +304,15 @@ export default function useUrlRouting(options) {
     []
   );
 
+  const toggleMode = React.useCallback(
+    s => dispatch({ type: 'TOGGLE_MODE', payload: { mode: s } }),
+    [dispatch]
+  );
+
   return {
     navigateToNext,
     navigateToPrevious,
+    toggleMode,
     goToSlide
   };
 }

src/utils/detect-platform.js

@@ -0,0 +1,5 @@
+export const isWindows = () =>
+  navigator.platform.toLowerCase().includes('win32');
+
+export const isMacOS = () =>
+  navigator.platform.toLowerCase().includes('macintel');