Repository: FormidableLabs/spectacle
Pull request #637 (2019-01-09 07:47:50)

Feature/autoplay toggle on start
### Description

1. Alt/Option + A Start autoplay should be a toggle (start/stop depending on the state - same as the other key combination toggles)

2. Add prop/tag to Deck to pause autoplaying on slideshow start

Fixes https://github.com/FormidableLabs/spectacle/issues/633 (issue)

#### Type of Change

Please delete options that are not relevant.

- [x] New feature (non-breaking change which adds functionality)
- [x] This change requires a documentation update

### How Has This Been Tested?

Master branch has been downloaded and functionality has been tested by manually trying the 2 new features in the example project. To verify changes:

1. Enable autoplay in the example presentation and start/pause autoplay multiple times with key combination Alt/Option + A

2. Setup Deck props with all combinations of autoplay={true/false} and autoplayOnStart={true/false}
- Case autoplay={true} autoplayOnStart={false} -> presentation will be unpaused on start (can be paused with key combination & click)
- Case autoplay={true} autoplayOnStart={true} -> presentation will be paused on start (can be unpaused with key combination & click)
-Case autoplay={false} autoplayOnStart={false} -> autoplay controls are not available & no autoplay
-Case autoplay={false} autoplayOnStart={true} -> autoplay controls are not available & no autoplay (autoplayOnStart is ignored)

### Checklist:

- [x] My code follows the style guidelines of this project (I have run `yarn prettier-fix && yarn lint`)
- [x] I have added tests that prove my fix is effective or that my feature works
- [x] New and existing unit tests pass locally with my changes (I have run `yarn test`)
- [x] I have performed a self-review of my own code
- [x] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings


MathEman-1: Hey @ebrillhart, there were just some empty spaces in the readme - thats pretty strict :) Seems to have passed now.

Patch:
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 6e4b013..8289eed 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -45,7 +45,7 @@ Thanks for taking the time to help us make Spectacle even better! Before you go
 
 ## Releasing a new version to NPM (only for project administrators)
 
-1.  Run `npm version patch` (or `minor`, `major` as appropriate) to run tests and lint, build the `lib` ands `dist` directories, , then update `package.json` and add a git tag.
+1.  Run `npm version patch` (or `minor`, `major` as appropriate) to run tests and lint, build the `lib` and `dist` directories, and automatically update the `package.json` with a new git tag.
 2.  Run `npm publish` and publish to npm if all is well.
 3.  Run `git push && git push --tags`
 
diff --git a/README.md b/README.md
index 323f6ee..76116ea 100644
--- a/README.md
+++ b/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`        |
diff --git a/docs/tag-api.md b/docs/tag-api.md
index e16c0ad..feb6496 100644
--- a/docs/tag-api.md
+++ b/docs/tag-api.md
@@ -100,9 +100,9 @@ The element tags are the bread and butter of your slide content. Most of these t
 
 This tag does not extend from Base. It's special. Wrapping elements in the appear tag makes them appear/disappear in order in response to navigation.
 
-| Name               | PropType               | Description                                                                 |
-| ------------------ | ---------------------- | --------------------------------------------------------------------------- |
-| transitionDuration | React.PropTypes.number | Accepts integer value in milliseconds for duration of appearance animation. |
+| Name               | PropType         | Description                                                                 |
+| ------------------ | ---------------- | --------------------------------------------------------------------------- |
+| transitionDuration | PropTypes.number | Accepts integer value in milliseconds for duration of appearance animation. |
 
 <a name="blockquote-quote-and-cite-base"></a>
 
diff --git a/index.d.ts b/index.d.ts
index b5cf0bf..c1ae17b 100644
--- a/index.d.ts
+++ b/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
diff --git a/package.json b/package.json
index 330a2f2..b77bfdc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "spectacle",
-  "version": "5.2.2",
+  "version": "5.3.0",
   "description": "ReactJS Powered Presentation Framework",
   "main": "lib/index.js",
   "module": "es/index.js",
diff --git a/src/components/deck.js b/src/components/deck.js
index b442520..0923895 100644
--- a/src/components/deck.js
+++ b/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,
diff --git a/src/components/manager.js b/src/components/manager.js
index def589e..cd4e80b 100644
--- a/src/components/manager.js
+++ b/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'


Test patch:
diff --git a/src/components/__snapshots__/manager.test.js.snap b/src/components/__snapshots__/manager.test.js.snap
index 34a5ed7..149c781 100644
--- a/src/components/__snapshots__/manager.test.js.snap
+++ b/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}