Fullscreen updates (#628)

* Improve fullscreen visibility & add shortcut

* Update docs

* Update DeckProps interface

Author: rawrmonstar

README.md

@@ -279,12 +279,13 @@ You can toggle the presenter or overview mode by pressing respectively `alt+p` a
 | Alt/Option + P  | Toggle Presenter Mode          |
 | Alt/Option + T  | Toggle Timer in Presenter Mode |
 | Alt/Option + A  | Start autoplay (if enabled)    |
+| Alt/Option + F  | Toggle Fullscreen Mode         |
 
 <a name="fullscreen"></a>
 
 ## Fullscreen
 
-Fullscreen can be toggled via browser options, or by hovering over the bottom right corner of your window until the fullscreen icon appears and clicking it.
+Fullscreen can be toggled via browser options, <kbd>Alt/Option</kbd> + <kbd>F</kbd>, or by pressing the button in the bottom right corner of your window.
 
 <a name="pdf-export"></a>
 
@@ -484,6 +485,7 @@ The Deck tag is the root level tag for your presentation. It supports the follow
 | onStateChange           | PropTypes.func    | Called whenever a new slide becomes visible with the arguments `(previousState, nextState)` where state refers to the outgoing and incoming `<Slide />`'s `state` props, respectively. The default implementation attaches the current state as a class to the document root. | see description |
 | history                 | PropTypes.object  | Accepts custom configuration for [history](https://github.com/ReactTraining/history).                                                                                                                                                                                         |                 |
 | progress                | PropTypes.string  | Accepts `pacman`, `bar`, `number` or `none`. To override the color, change the 'quaternary' color in the theme.                                                                                                                                                               | `pacman`        |
+| showFullscreenControl   | PropTypes.bool    | Show the fullscreen control button in bottom right of the screen.                                                                                                                                                                                                             | `true`          |
 | theme                   | PropTypes.object  | Accepts a theme object for styling your presentation.                                                                                                                                                                                                                         |                 |
 | transition              | PropTypes.array   | Accepts `slide`, `zoom`, `fade` or `spin`, and can be combined. Sets global slide transitions. **Note: If you use the 'scale' transition, fitted text won't work in Safari.**                                                                                                 |                 |
 | transitionDuration      | PropTypes.number  | Accepts integer value in milliseconds for global transition duration.                                                                                                                                                                                                         | `500`           |

index.d.ts

@@ -160,6 +160,7 @@ declare module 'spectacle' {
     controls?: boolean;
     globalStyles?: boolean;
     history?: any; // Needs a type, see https://github.com/ReactTraining/history
+    showFullscreenControl?: boolean;
     onStateChange?: (previousState?: string, nextState?: string) => void;
     progress?: progressType;
     theme?: Theme;

src/components/__snapshots__/component-playground.test.js.snap

@@ -21,14 +21,10 @@ exports[`<ComponentPlayground /> Should render the dark theme correctly 1`] = `
         class="css-1a7vuu6 ev51h780"
       >
         <svg
-          viewBox="0 0 24 24"
+          viewBox="0 0 512 512"
         >
           <path
-            d="M0 0h24v24H0z"
-            fill="none"
-          />
-          <path
-            d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
+            d="M64 371.2h76.795V448H192V320H64v51.2zm76.795-230.4H64V192h128V64h-51.205v76.8zM320 448h51.2v-76.8H448V320H320v128zm51.2-307.2V64H320v128h128v-51.2h-76.8z"
             fill="currentColor"
           />
         </svg>
@@ -557,14 +553,10 @@ exports[`<ComponentPlayground /> Should render the light theme correctly 1`] = `
         class="css-1a7vuu6 ev51h780"
       >
         <svg
-          viewBox="0 0 24 24"
+          viewBox="0 0 512 512"
         >
           <path
-            d="M0 0h24v24H0z"
-            fill="none"
-          />
-          <path
-            d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
+            d="M64 371.2h76.795V448H192V320H64v51.2zm76.795-230.4H64V192h128V64h-51.205v76.8zM320 448h51.2v-76.8H448V320H320v128zm51.2-307.2V64H320v128h128v-51.2h-76.8z"
             fill="currentColor"
           />
         </svg>
@@ -1093,14 +1085,10 @@ exports[`<ComponentPlayground /> Should render with a custom background color 1`
         class="css-1a7vuu6 ev51h780"
       >
         <svg
-          viewBox="0 0 24 24"
+          viewBox="0 0 512 512"
         >
           <path
-            d="M0 0h24v24H0z"
-            fill="none"
-          />
-          <path
-            d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
+            d="M64 371.2h76.795V448H192V320H64v51.2zm76.795-230.4H64V192h128V64h-51.205v76.8zM320 448h51.2v-76.8H448V320H320v128zm51.2-307.2V64H320v128h128v-51.2h-76.8z"
             fill="currentColor"
           />
         </svg>
@@ -1629,14 +1617,10 @@ exports[`<ComponentPlayground /> Should render with a custom code block 1`] = `
         class="css-1a7vuu6 ev51h780"
       >
         <svg
-          viewBox="0 0 24 24"
+          viewBox="0 0 512 512"
         >
           <path
-            d="M0 0h24v24H0z"
-            fill="none"
-          />
-          <path
-            d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
+            d="M64 371.2h76.795V448H192V320H64v51.2zm76.795-230.4H64V192h128V64h-51.205v76.8zM320 448h51.2v-76.8H448V320H320v128zm51.2-307.2V64H320v128h128v-51.2h-76.8z"
             fill="currentColor"
           />
         </svg>

src/components/__snapshots__/fullscreen.test.js.snap

@@ -1,40 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Fullscreen /> should render correctly. 1`] = `
-<Fullscreen>
+<Fullscreen
+  onClick={[Function]}
+>
   <Styled(FullscreenButton)
+    isFullscreen={false}
     onClick={[Function]}
     styles={undefined}
-    viewBox="0 0 512 512"
   >
     <FullscreenButton
-      className="css-12n5ud e4v3eea0"
+      className="css-12w3q3u e4v3eea0"
+      isFullscreen={false}
       onClick={[Function]}
       styles={undefined}
-      viewBox="0 0 512 512"
     >
       <Styled(button)
         aria-label="Toggle full screen"
-        className="css-12n5ud e4v3eea0"
+        className="css-12w3q3u e4v3eea0"
         onClick={[Function]}
         styles={undefined}
-        viewBox="0 0 512 512"
       >
         <button
           aria-label="Toggle full screen"
-          className="e4v3eea0 css-1hv29sw ev51h780"
+          className="e4v3eea0 css-11lfetj ev51h780"
           onClick={[Function]}
-          viewBox="0 0 512 512"
         >
           <svg
-            viewBox="0 0 24 24"
+            viewBox="0 0 512 512"
           >
             <path
-              d="M0 0h24v24H0z"
-              fill="none"
-            />
-            <path
-              d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
+              d="M396.795 396.8H320V448h128V320h-51.205zM396.8 115.205V192H448V64H320v51.205zM115.205 115.2H192V64H64v128h51.205zM115.2 396.795V320H64v128h128v-51.205z"
               fill="currentColor"
             />
           </svg>