start paused option

Author: mshick

README.md

@@ -133,6 +133,7 @@ Property | Type | Default | Required | Description
 show | `String`,`Array` | none | no | The video or video fallback array to show.
 showPlaylist | `Array` | none | no | An array of video URL strings, or of video fallback arrays.
 play | `Number` | none | no | Similar to `show` but used to play a video at a given index in the `showPlaylist` array.
+paused | `Boolean` | false | no | Set the playlist to a paused state on initial load.
 poster | `String` | none | no | A fallback image to use, when all else fails.
 mute | `Boolean` | true | no | Should the videos be played muted?
 loop | `Boolean` | true | no | Should videos / playlists loop or begin again when finished?

dist/react-drive-in-browser.js

@@ -508,6 +508,7 @@ var ReactDriveIn = (function (React) { 'use strict';
       _this.loop = true;
       _this.loopPlaylistItems = false;
       _this.slideshow = false;
+      _this.startPaused = false;
 
       _this.playlistLength = 0;
       _this.currentItem = 0;
@@ -870,7 +871,11 @@ var ReactDriveIn = (function (React) { 'use strict';
 
         var onCanPlay = function onCanPlay() {
           _this2.emit("media.canplay");
-          mediaEl.play();
+
+          if (!_this2.startPaused) {
+            mediaEl.play();
+          }
+
           if (_this2._seeking) {
             _this2._seeking = false;
           }
@@ -917,6 +922,10 @@ var ReactDriveIn = (function (React) { 'use strict';
 
             _this3._slideshowTimer = new Timer(ended, _this3.slideshowItemDuration * 1000);
 
+            if (_this3.startPaused) {
+              _this3._slideshowTimer.pause();
+            }
+
             _this3._slideshowTimer.on("pause", onPause);
           }
         };
@@ -1086,6 +1095,8 @@ var ReactDriveIn = (function (React) { 'use strict';
 
         this.slideshow = options.slideshow;
 
+        this.startPaused = options.startPaused;
+
         this.parentEl = this._setParent(options.el);
 
         var mediaEl = this._createMediaEl();
@@ -1259,6 +1270,7 @@ var ReactDriveIn = (function (React) { 'use strict';
         className: props.className,
         mute: props.mute,
         loop: props.loop,
+        playing: !props.paused,
         loopPaylistItems: props.loopPlaylistItems,
         slideshow: props.slideshow,
         volume: props.volume,
@@ -1329,7 +1341,8 @@ var ReactDriveIn = (function (React) { 'use strict';
 
         this.DI.init({
           el: this.getMedia(),
-          slideshow: this.props.slideshow
+          slideshow: this.props.slideshow,
+          startPaused: this.props.paused
         });
 
         var options = {
@@ -1429,6 +1442,7 @@ var ReactDriveIn = (function (React) { 'use strict';
     showPlaylist: React.PropTypes.oneOfType([React.PropTypes.array]),
     poster: React.PropTypes.string,
     mute: React.PropTypes.bool,
+    paused: React.PropTypes.bool,
     loop: React.PropTypes.bool,
     loopPlaylistItems: React.PropTypes.bool,
     playbackRate: React.PropTypes.number,

dist/react-drive-in.js

@@ -68,6 +68,7 @@ var ReactDriveIn = (function (_React$Component) {
       className: props.className,
       mute: props.mute,
       loop: props.loop,
+      playing: !props.paused,
       loopPaylistItems: props.loopPlaylistItems,
       slideshow: props.slideshow,
       volume: props.volume,
@@ -146,7 +147,8 @@ var ReactDriveIn = (function (_React$Component) {
         loop: this.props.loop,
         loopPlaylistItems: this.props.loopPlaylistItems,
         poster: this.props.poster,
-        isTouch: this.props.isTouch
+        isTouch: this.props.isTouch,
+        startPaused: this.props.paused
       };
 
       if (this.props.showPlaylist) {
@@ -238,6 +240,7 @@ ReactDriveIn.propTypes = {
   showPlaylist: React.PropTypes.oneOfType([React.PropTypes.array]),
   poster: React.PropTypes.string,
   mute: React.PropTypes.bool,
+  paused: React.PropTypes.bool,
   loop: React.PropTypes.bool,
   loopPlaylistItems: React.PropTypes.bool,
   playbackRate: React.PropTypes.number,

example/index.html

@@ -163,6 +163,7 @@ <h2>Currently Playing: <span id="currItem"></span></h2>
     onPlaying={onPlaying}
     slideshow={false}
     loopPlaylistItems
+    paused
   />,
   driveInEl
 );

lib/react-drive-in.jsx

@@ -11,6 +11,7 @@ class ReactDriveIn extends React.Component {
       className: props.className,
       mute: props.mute,
       loop: props.loop,
+      playing: !props.paused,
       loopPaylistItems: props.loopPlaylistItems,
       slideshow: props.slideshow,
       volume: props.volume,
@@ -70,7 +71,8 @@ class ReactDriveIn extends React.Component {
 
     this.DI.init({
       el: this.getMedia(),
-      slideshow: this.props.slideshow
+      slideshow: this.props.slideshow,
+      startPaused: this.props.paused
     });
 
     const options = {
@@ -162,6 +164,7 @@ ReactDriveIn.propTypes = {
   showPlaylist: React.PropTypes.oneOfType([React.PropTypes.array]),
   poster: React.PropTypes.string,
   mute: React.PropTypes.bool,
+  paused: React.PropTypes.bool,
   loop: React.PropTypes.bool,
   loopPlaylistItems: React.PropTypes.bool,
   playbackRate: React.PropTypes.number,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-drive-in",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "description": "React component supporting background videos and playlists.",
   "main": "dist/react-drive-in.js",
   "jsnext:main": "lib/react-drive-in.jsx",
@@ -43,7 +43,6 @@
     "babel-preset-es2015-rollup": "^1.0.0",
     "babel-preset-react": "^6.1.18",
     "browser-sync": "^2.9.7",
-    "drive-in": "^1.5.1",
     "eslint": "^1.7.3",
     "eslint-config-defaults": "^7.0.1",
     "eslint-plugin-filenames": "^0.2.0",
@@ -76,6 +75,6 @@
   },
   "homepage": "https://github.com/ronik-design/react-drive-in",
   "dependencies": {
-    "drive-in": "^1.5.0"
+    "drive-in": "^1.5.2"
   }
 }