Feature/autoplay toggle on start (#637)

* Added autoplay toggle on key combination if enabled

* Added autoplayOnStart as Deck tag/prop

* Fixed _toggleAutoplaying & linting issue

* Updated jest snapshot

* Prettier fix

* Added index.d.ts definition

Author: MathEman-1

README.md

@@ -278,7 +278,7 @@ You can toggle the presenter or overview mode by pressing respectively `alt+p` a
 | Alt/Option + O  | Toggle Overview Mode           |
 | Alt/Option + P  | Toggle Presenter Mode          |
 | Alt/Option + T  | Toggle Timer in Presenter Mode |
-| Alt/Option + A  | Start autoplay (if enabled)    |
+| Alt/Option + A  | Toggle autoplay (if enabled)   |
 | Alt/Option + F  | Toggle Fullscreen Mode         |
 
 <a name="fullscreen"></a>
@@ -476,6 +476,7 @@ The Deck tag is the root level tag for your presentation. It supports the follow
 | autoplay                | PropTypes.bool    | Automatically advance slides.                                                                                                                                                                                                                                                 | `false`         |
 | autoplayDuration        | PropTypes.number  | Accepts integer value in milliseconds for global autoplay duration.                                                                                                                                                                                                           | `7000`          |
 | autoplayLoop            | PropTypes.bool    | Keep slides in loop.                                                                                                                                                                                                                                                          | `true`          |
+| autoplayOnStart         | PropTypes.bool    | Start presentation with autoplay on/not paused (if autoplay is enabled).                                                                                                                                                                                                      | `true`          |
 | controls                | PropTypes.bool    | Show control arrows when not in fullscreen.                                                                                                                                                                                                                                   | `true`          |
 | contentHeight           | PropTypes.numbers | Baseline content area height.                                                                                                                                                                                                                                                 | `700px`         |
 | contentWidth            | PropTypes.numbers | Baseline content area width.                                                                                                                                                                                                                                                  | `1000px`        |

index.d.ts

@@ -157,6 +157,7 @@ declare module 'spectacle' {
     autoplay?: boolean;
     autoplayDuration?: number;
     autoplayLoop?: boolean;
+    autoplayOnStart?: boolean;
     controls?: boolean;
     globalStyles?: boolean;
     history?: any; // Needs a type, see https://github.com/ReactTraining/history

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

@@ -14,6 +14,7 @@ exports[`<Manager /> should render correctly. 1`] = `
     autoplay={false}
     autoplayDuration={7000}
     autoplayLoop={true}
+    autoplayOnStart={true}
     contentHeight={700}
     contentWidth={1000}
     controls={true}
@@ -354,6 +355,7 @@ exports[`<Manager /> should render fullscreen button dependant on prop 1`] = `
     autoplay={false}
     autoplayDuration={7000}
     autoplayLoop={true}
+    autoplayOnStart={true}
     contentHeight={700}
     contentWidth={1000}
     controls={true}
@@ -666,6 +668,7 @@ exports[`<Manager /> should render the export configuration when specified. 1`]
     autoplay={false}
     autoplayDuration={7000}
     autoplayLoop={true}
+    autoplayOnStart={true}
     contentHeight={700}
     contentWidth={1000}
     controls={true}
@@ -800,6 +803,7 @@ exports[`<Manager /> should render the overview configuration when specified. 1`
     autoplay={false}
     autoplayDuration={7000}
     autoplayLoop={true}
+    autoplayOnStart={true}
     contentHeight={700}
     contentWidth={1000}
     controls={true}
@@ -960,6 +964,7 @@ exports[`<Manager /> should render with slideset slides 1`] = `
     autoplay={false}
     autoplayDuration={7000}
     autoplayLoop={true}
+    autoplayOnStart={true}
     contentHeight={700}
     contentWidth={1000}
     controls={true}

src/components/deck.js

@@ -26,6 +26,7 @@ export default class Deck extends Component {
     autoplay: PropTypes.bool,
     autoplayDuration: PropTypes.number,
     autoplayLoop: PropTypes.bool,
+    autoplayOnStart: PropTypes.bool,
     children: PropTypes.node,
     controls: PropTypes.bool,
     globalStyles: PropTypes.bool,

src/components/manager.js

@@ -103,6 +103,7 @@ export class Manager extends Component {
     autoplay: PropTypes.bool,
     autoplayDuration: PropTypes.number,
     autoplayLoop: PropTypes.bool,
+    autoplayOnStart: PropTypes.bool,
     children: PropTypes.node,
     contentHeight: PropTypes.number,
     contentWidth: PropTypes.number,
@@ -139,6 +140,7 @@ export class Manager extends Component {
     autoplay: false,
     autoplayDuration: 7000,
     autoplayLoop: true,
+    autoplayOnStart: true,
     contentWidth: 1000,
     contentHeight: 700,
     disableKeyboardControls: false,
@@ -167,7 +169,7 @@ export class Manager extends Component {
       slideReference: [],
       fullscreen: window.innerHeight === screen.height,
       mobile: window.innerWidth < props.contentWidth,
-      autoplaying: props.autoplay
+      autoplaying: props.autoplay ? props.autoplayOnStart : false
     };
 
     this.viewedIndexes = new Set();
@@ -188,11 +190,14 @@ export class Manager extends Component {
 
   componentDidMount() {
     const slideIndex = this._getSlideIndex();
+    const autoplayOnStart = this.props.autoplay
+      ? this.props.autoplayOnStart
+      : false;
     this.setState({
       lastSlideIndex: slideIndex
     });
     this._attachEvents();
-    if (this.props.autoplay) {
+    if (autoplayOnStart) {
       this._startAutoplay();
     }
   }
@@ -249,6 +254,13 @@ export class Manager extends Component {
     this.setState({ autoplaying: false });
     clearInterval(this.autoplayInterval);
   }
+  _toggleAutoplaying() {
+    if (this.state.autoplaying) {
+      this._stopAutoplay();
+    } else {
+      this._startAutoplay();
+    }
+  }
   _handleEvent(e) {
     // eslint-disable-line complexity
     const event = window.event ? window.event : e;
@@ -297,7 +309,7 @@ export class Manager extends Component {
       !event.metaKey &&
       this.props.autoplay
     ) {
-      this._startAutoplay();
+      this._toggleAutoplaying();
     } else if (
       event.altKey &&
       event.keyCode === 70 && // 'f'