video-react - npm Package Compare versions

Comparing version 0.7.8 to 0.8.2

CHANGELOG.md

@@ -0,1 +1,15 @@
+<a name="0.8.2"></a>
+## [0.8.2](https://github.com/video-react/video-react/compare/v0.8.1...v0.8.2) (2017-04-24)
+
+
+
+<a name="0.8.1"></a>
+## [0.8.1](https://github.com/video-react/video-react/compare/v0.7.8...v0.8.1) (2017-04-24)
+
+
+
+- Upgrade for React 15.5
+- Add `className` property for components #22
+- Add `style` node to `pakcage.json` #29
+
 <a name="0.7.8"></a>
@@ -2,0 +16,0 @@ ## [0.7.8](https://github.com/video-react/video-react/compare/v0.7.7...v0.7.8) (2017-04-17)

lib/components/Bezel.js

@@ -9,2 +9,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -27,5 +31,4 @@
 var propTypes = {
-  manager: _react.PropTypes.object,
-  player: _react.PropTypes.object,
-  actions: _react.PropTypes.object
+  manager: _propTypes2.default.object,
+  className: _propTypes2.default.string
 };
@@ -98,3 +101,3 @@
             'video-react-bezel-animation-alt': this.state.count % 2 === 1
-          }),
+          }, this.props.className),
           style: style,
@@ -101,0 +104,0 @@ role: 'status',

lib/components/BigPlayButton.js

@@ -9,2 +9,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -27,5 +31,6 @@
 var propTypes = {
-  actions: _react.PropTypes.object,
-  player: _react.PropTypes.object,
-  position: _react.PropTypes.string
+  actions: _propTypes2.default.object,
+  player: _propTypes2.default.object,
+  position: _propTypes2.default.string,
+  className: _propTypes2.default.string
 };
@@ -72,3 +77,3 @@
         {
-          className: (0, _classnames2.default)('video-react-big-play-button', 'video-react-big-play-button-' + position),
+          className: (0, _classnames2.default)('video-react-big-play-button', 'video-react-big-play-button-' + position, this.props.className),
           type: 'button',
@@ -75,0 +80,0 @@ 'aria-live': 'polite',

lib/components/ClickableComponent.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -29,7 +33,7 @@
 var propTypes = {
-  tagName: _react.PropTypes.string.isRequired,
-  onClick: _react.PropTypes.func.isRequired,
-  onFocus: _react.PropTypes.func,
-  onBlur: _react.PropTypes.func,
-  className: _react.PropTypes.string
+  tagName: _propTypes2.default.string.isRequired,
+  onClick: _propTypes2.default.func.isRequired,
+  onFocus: _propTypes2.default.func,
+  onBlur: _propTypes2.default.func,
+  className: _propTypes2.default.string
 };
@@ -36,0 +40,0 @@

lib/components/control-bar/ControlBar.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -75,7 +79,6 @@
 var propTypes = {
-  actions: _react.PropTypes.object,
-  player: _react.PropTypes.object,
-  children: _react.PropTypes.any,
-  autoHide: _react.PropTypes.bool,
-  disableDefaultControls: _react.PropTypes.bool
+  children: _propTypes2.default.any,
+  autoHide: _propTypes2.default.bool,
+  disableDefaultControls: _propTypes2.default.bool,
+  className: _propTypes2.default.string
 };
@@ -175,3 +178,5 @@
     value: function render() {
-      var autoHide = this.props.autoHide;
+      var _props = this.props,
+          autoHide = _props.autoHide,
+          className = _props.className;
 
@@ -183,3 +188,4 @@ var children = this.getChildren();
           className: (0, _classnames2.default)('video-react-control-bar', {
-            'video-react-control-bar-auto-hide': autoHide
+            'video-react-control-bar-auto-hide': autoHide,
+            className: className
           })
@@ -186,0 +192,0 @@ },

lib/components/control-bar/ForwardControl.js

@@ -14,2 +14,2 @@ 'use strict';
 // Pass mode into parent function
-exports.default = new _ForwardReplayControl2.default('forward');
+exports.default = (0, _ForwardReplayControl2.default)('forward');

lib/components/control-bar/ForwardReplayControl.js

@@ -9,2 +9,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -29,5 +33,5 @@
 var propTypes = {
-  actions: _react.PropTypes.object,
-  player: _react.PropTypes.object,
-  seconds: _react2.default.PropTypes.oneOf([5, 10, 30])
+  actions: _propTypes2.default.object,
+  className: _propTypes2.default.string,
+  seconds: _propTypes2.default.oneOf([5, 10, 30])
 };
@@ -72,3 +76,5 @@
 
-        var seconds = this.props.seconds;
+        var _props2 = this.props,
+            seconds = _props2.seconds,
+            className = _props2.className;
 
@@ -81,3 +87,3 @@ return _react2.default.createElement(
             },
-            className: (0, _classnames2.default)((_classNames = {}, _defineProperty(_classNames, 'video-react-icon-' + mode + '-' + seconds, true), _defineProperty(_classNames, 'video-react-' + mode + '-control', true), _classNames), 'video-react-control video-react-button video-react-icon'),
+            className: (0, _classnames2.default)(className, (_classNames = {}, _defineProperty(_classNames, 'video-react-icon-' + mode + '-' + seconds, true), _defineProperty(_classNames, 'video-react-' + mode + '-control', true), _classNames), 'video-react-control video-react-button video-react-icon'),
             onClick: this.handleClick
@@ -84,0 +90,0 @@ },

lib/components/control-bar/FullscreenToggle.js

@@ -9,2 +9,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -27,4 +31,5 @@
 var propTypes = {
-  actions: _react.PropTypes.object,
-  player: _react.PropTypes.object
+  actions: _propTypes2.default.object,
+  player: _propTypes2.default.object,
+  className: _propTypes2.default.string
 };
@@ -58,3 +63,5 @@
 
-      var player = this.props.player;
+      var _props2 = this.props,
+          player = _props2.player,
+          className = _props2.className;
 
@@ -64,3 +71,3 @@ return _react2.default.createElement(
         {
-          className: (0, _classnames2.default)({
+          className: (0, _classnames2.default)(className, {
             'video-react-icon-fullscreen-exit': player.isFullscreen,
@@ -67,0 +74,0 @@ 'video-react-icon-fullscreen': !player.isFullscreen

lib/components/control-bar/LoadProgressBar.js

@@ -1,2 +0,2 @@
-"use strict";
+'use strict';
 
@@ -8,11 +8,20 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require("react");
+var _propTypes = require('prop-types');
 
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _react = require('react');
+
 var _react2 = _interopRequireDefault(_react);
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var propTypes = {
-  duration: _react.PropTypes.number,
-  buffered: _react.PropTypes.object
+  duration: _propTypes2.default.number,
+  buffered: _propTypes2.default.object,
+  className: _propTypes2.default.string
 };
@@ -23,3 +32,4 @@
   var buffered = _ref.buffered,
-      duration = _ref.duration;
+      duration = _ref.duration,
+      className = _ref.className;
 
@@ -39,3 +49,3 @@ if (!buffered || !buffered.length) {
     var percent = time / end || 0; // no NaN
-    return (percent >= 1 ? 1 : percent) * 100 + "%";
+    return (percent >= 1 ? 1 : percent) * 100 + '%';
   }
@@ -53,3 +63,3 @@
     // set the percent based on the width of the progress bar (bufferedEnd)
-    var part = _react2.default.createElement("div", {
+    var part = _react2.default.createElement('div', {
       style: {
@@ -59,3 +69,3 @@ left: percentify(start, bufferedEnd),
       },
-      key: "part-" + i
+      key: 'part-' + i
     });
@@ -70,16 +80,16 @@ parts.push(part);
   return _react2.default.createElement(
-    "div",
+    'div',
     {
       style: style,
-      className: "video-react-load-progress"
+      className: (0, _classnames2.default)('video-react-load-progress', className)
     },
     _react2.default.createElement(
-      "span",
-      { className: "video-react-control-text" },
+      'span',
+      { className: 'video-react-control-text' },
       _react2.default.createElement(
-        "span",
+        'span',
         null,
-        "Loaded"
+        'Loaded'
       ),
-      ": 0%"
+      ': 0%'
     ),
@@ -86,0 +96,0 @@ parts

lib/components/control-bar/MouseTimeDisplay.js

@@ -7,2 +7,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -12,2 +16,6 @@
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _utils = require('../../utils');
@@ -19,3 +27,4 @@
   var duration = _ref.duration,
-      mouseTime = _ref.mouseTime;
+      mouseTime = _ref.mouseTime,
+      className = _ref.className;
 
@@ -29,3 +38,3 @@ if (!mouseTime.time) {
   return _react2.default.createElement('div', {
-    className: 'video-react-mouse-display',
+    className: (0, _classnames2.default)('video-react-mouse-display', className),
     style: {
@@ -39,6 +48,7 @@ left: mouseTime.position + 'px'
 MouseTimeDisplay.propTypes = {
-  duration: _react.PropTypes.number,
-  mouseTime: _react.PropTypes.object
+  duration: _propTypes2.default.number,
+  mouseTime: _propTypes2.default.object,
+  className: _propTypes2.default.string
 };
 
 exports.default = MouseTimeDisplay;

lib/components/control-bar/PlaybackRateMenuButton.js

@@ -9,2 +9,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -31,5 +35,6 @@
 var propTypes = {
-  player: _react.PropTypes.object,
-  actions: _react.PropTypes.object,
-  rates: _react.PropTypes.array
+  player: _propTypes2.default.object,
+  actions: _propTypes2.default.object,
+  rates: _propTypes2.default.array,
+  className: _propTypes2.default.string
 };
@@ -82,5 +87,3 @@
         {
-          className: (0, _classnames2.default)({
-            'video-react-playback-rate': true
-          }),
+          className: (0, _classnames2.default)('video-react-playback-rate', this.props.className),
           onSelectItem: this.handleSelectItem,
@@ -87,0 +90,0 @@ items: items,

lib/components/control-bar/PlayProgressBar.js

@@ -8,2 +8,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -13,2 +17,6 @@
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _utils = require('../../utils');
@@ -19,5 +27,6 @@
 var propTypes = {
-  currentTime: _react.PropTypes.number,
-  duration: _react.PropTypes.number,
-  percentage: _react.PropTypes.string
+  currentTime: _propTypes2.default.number,
+  duration: _propTypes2.default.number,
+  percentage: _propTypes2.default.string,
+  className: _propTypes2.default.string
 };
@@ -29,3 +38,4 @@
       duration = _ref.duration,
-      percentage = _ref.percentage;
+      percentage = _ref.percentage,
+      className = _ref.className;
 
@@ -36,3 +46,3 @@ return _react2.default.createElement(
       'data-current-time': (0, _utils.formatTime)(currentTime, duration),
-      className: 'video-react-play-progress video-react-slider-bar',
+      className: (0, _classnames2.default)('video-react-play-progress video-react-slider-bar', className),
       style: {
@@ -39,0 +49,0 @@ width: percentage

lib/components/control-bar/PlayToggle.js

@@ -9,2 +9,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -27,4 +31,5 @@
 var propTypes = {
-  actions: _react.PropTypes.object,
-  player: _react.PropTypes.object
+  actions: _propTypes2.default.object,
+  player: _propTypes2.default.object,
+  className: _propTypes2.default.string
 };
@@ -62,3 +67,5 @@
 
-      var player = this.props.player;
+      var _props2 = this.props,
+          player = _props2.player,
+          className = _props2.className;
 
@@ -73,3 +80,3 @@ var controlText = player.paused ? 'Play' : 'Pause';
           },
-          className: (0, _classnames2.default)({
+          className: (0, _classnames2.default)(className, {
             'video-react-play-control': true,
@@ -76,0 +83,0 @@ 'video-react-control': true,

lib/components/control-bar/ProgressControl.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -18,2 +22,6 @@
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _dom = require('../../utils/dom');
@@ -38,3 +46,4 @@
 var propTypes = {
-  player: _react.PropTypes.object
+  player: _propTypes2.default.object,
+  className: _propTypes2.default.string
 };
@@ -85,2 +94,4 @@
 
+      var className = this.props.className;
+
       return _react2.default.createElement(
@@ -90,3 +101,3 @@ 'div',
           onMouseMove: this.handleMouseMoveThrottle,
-          className: 'video-react-progress-control video-react-control'
+          className: (0, _classnames2.default)('video-react-progress-control video-react-control', className)
         },
@@ -93,0 +104,0 @@ _react2.default.createElement(_SeekBar2.default, _extends({

lib/components/control-bar/ReplayControl.js

@@ -14,2 +14,2 @@ 'use strict';
 // Pass mode into parent function
-exports.default = new _ForwardReplayControl2.default('replay');
+exports.default = (0, _ForwardReplayControl2.default)('replay');

lib/components/control-bar/SeekBar.js

@@ -9,2 +9,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -14,2 +18,6 @@
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _Slider = require('../Slider');
@@ -42,5 +50,6 @@
 var propTypes = {
-  player: _react.PropTypes.object,
-  mouseTime: _react.PropTypes.object,
-  actions: _react.PropTypes.object
+  player: _propTypes2.default.object,
+  mouseTime: _propTypes2.default.object,
+  actions: _propTypes2.default.object,
+  className: _propTypes2.default.string
 };
@@ -171,3 +180,3 @@
           label: 'video progress bar',
-          className: 'video-react-progress-holder',
+          className: (0, _classnames2.default)('video-react-progress-holder', this.props.className),
           valuenow: (this.getPercent() * 100).toFixed(2),
@@ -174,0 +183,0 @@ valuetext: (0, _utils.formatTime)(time, duration),

lib/components/control-bar/VolumeMenuButton.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -37,5 +41,6 @@
 var propTypes = {
-  player: _react.PropTypes.object,
-  actions: _react.PropTypes.object,
-  vertical: _react.PropTypes.bool
+  player: _propTypes2.default.object,
+  actions: _propTypes2.default.object,
+  vertical: _propTypes2.default.bool,
+  className: _propTypes2.default.string
 };
@@ -93,3 +98,4 @@
           vertical = _props2.vertical,
-          player = _props2.player;
+          player = _props2.player,
+          className = _props2.className;
 
@@ -101,3 +107,3 @@ var inline = !vertical;
         {
-          className: (0, _classnames2.default)({
+          className: (0, _classnames2.default)(className, {
             'video-react-volume-menu-button-vertical': vertical,
@@ -104,0 +110,0 @@ 'video-react-volume-menu-button-horizontal': !vertical,

lib/components/LoadingSpinner.js

@@ -1,2 +0,2 @@
-"use strict";
+'use strict';
 
@@ -8,14 +8,24 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require("react");
+var _propTypes = require('prop-types');
 
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _react = require('react');
+
 var _react2 = _interopRequireDefault(_react);
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var propTypes = {
-  player: _react.PropTypes.object
+  player: _propTypes2.default.object,
+  className: _propTypes2.default.string
 };
 
 function LoadingSpinner(_ref) {
-  var player = _ref.player;
+  var player = _ref.player,
+      className = _ref.className;
 
@@ -26,5 +36,7 @@ if (!player.hasStarted || !player.seeking && !player.waiting) {
 
-  return _react2.default.createElement("div", { className: "video-react-loading-spinner" });
+  return _react2.default.createElement('div', {
+    className: (0, _classnames2.default)('video-react-loading-spinner', className)
+  });
 }
 
 LoadingSpinner.propTypes = propTypes;

lib/components/menu/Menu.js

@@ -1,2 +0,2 @@
-"use strict";
+'use strict';
 
@@ -9,4 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require("react");
+var _propTypes = require('prop-types');
 
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _react = require('react');
+
 var _react2 = _interopRequireDefault(_react);
@@ -23,3 +27,3 @@
 var propTypes = {
-  children: _react.PropTypes.any
+  children: _propTypes2.default.any
 };
@@ -40,3 +44,3 @@
   _createClass(Menu, [{
-    key: "handleClick",
+    key: 'handleClick',
     value: function handleClick(event) {
@@ -47,14 +51,14 @@ event.preventDefault();
   }, {
-    key: "render",
+    key: 'render',
     value: function render() {
       return _react2.default.createElement(
-        "div",
+        'div',
         {
-          className: "video-react-menu video-react-lock-showing",
-          role: "presentation",
+          className: 'video-react-menu video-react-lock-showing',
+          role: 'presentation',
           onClick: this.handleClick
         },
         _react2.default.createElement(
-          "ul",
-          { className: "video-react-menu-content" },
+          'ul',
+          { className: 'video-react-menu-content' },
           this.props.children
@@ -61,0 +65,0 @@ )

lib/components/menu/MenuButton.js

@@ -9,2 +9,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -39,8 +43,8 @@
 var propTypes = {
-  inline: _react.PropTypes.bool,
-  items: _react.PropTypes.array,
-  className: _react.PropTypes.string,
-  onSelectItem: _react.PropTypes.func,
-  children: _react.PropTypes.any,
-  selectedIndex: _react.PropTypes.number
+  inline: _propTypes2.default.bool,
+  items: _propTypes2.default.array,
+  className: _propTypes2.default.string,
+  onSelectItem: _propTypes2.default.func,
+  children: _propTypes2.default.any,
+  selectedIndex: _propTypes2.default.number
 };
@@ -47,0 +51,0 @@

lib/components/menu/MenuItem.js

@@ -9,2 +9,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -27,6 +31,6 @@
 var propTypes = {
-  item: _react.PropTypes.object,
-  index: _react.PropTypes.number,
-  activateIndex: _react.PropTypes.number,
-  onSelectItem: _react.PropTypes.func
+  item: _propTypes2.default.object,
+  index: _propTypes2.default.number,
+  activateIndex: _propTypes2.default.number,
+  onSelectItem: _propTypes2.default.func
 };
@@ -33,0 +37,0 @@

lib/components/Player.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -77,40 +81,41 @@
 var propTypes = {
-  children: _react.PropTypes.any,
+  children: _propTypes2.default.any,
 
-  width: _react.PropTypes.number,
-  height: _react.PropTypes.number,
-  fluid: _react.PropTypes.bool,
-  muted: _react.PropTypes.bool,
-  playsInline: _react.PropTypes.bool,
-  aspectRatio: _react.PropTypes.string,
+  width: _propTypes2.default.number,
+  height: _propTypes2.default.number,
+  fluid: _propTypes2.default.bool,
+  muted: _propTypes2.default.bool,
+  playsInline: _propTypes2.default.bool,
+  aspectRatio: _propTypes2.default.string,
+  className: _propTypes2.default.string,
 
-  startTime: _react.PropTypes.number,
-  loop: _react.PropTypes.bool,
-  autoPlay: _react.PropTypes.bool,
-  src: _react.PropTypes.string,
-  poster: _react.PropTypes.string,
-  preload: _react2.default.PropTypes.oneOf(['auto', 'metadata', 'none']),
+  startTime: _propTypes2.default.number,
+  loop: _propTypes2.default.bool,
+  autoPlay: _propTypes2.default.bool,
+  src: _propTypes2.default.string,
+  poster: _propTypes2.default.string,
+  preload: _propTypes2.default.oneOf(['auto', 'metadata', 'none']),
 
-  onLoadStart: _react.PropTypes.func,
-  onWaiting: _react.PropTypes.func,
-  onCanPlay: _react.PropTypes.func,
-  onCanPlayThrough: _react.PropTypes.func,
-  onPlaying: _react.PropTypes.func,
-  onEnded: _react.PropTypes.func,
-  onSeeking: _react.PropTypes.func,
-  onSeeked: _react.PropTypes.func,
-  onPlay: _react.PropTypes.func,
-  onPause: _react.PropTypes.func,
-  onProgress: _react.PropTypes.func,
-  onDurationChange: _react.PropTypes.func,
-  onError: _react.PropTypes.func,
-  onSuspend: _react.PropTypes.func,
-  onAbort: _react.PropTypes.func,
-  onEmptied: _react.PropTypes.func,
-  onStalled: _react.PropTypes.func,
-  onLoadedMetadata: _react.PropTypes.func,
-  onLoadedData: _react.PropTypes.func,
-  onTimeUpdate: _react.PropTypes.func,
-  onRateChange: _react.PropTypes.func,
-  onVolumeChange: _react.PropTypes.func
+  onLoadStart: _propTypes2.default.func,
+  onWaiting: _propTypes2.default.func,
+  onCanPlay: _propTypes2.default.func,
+  onCanPlayThrough: _propTypes2.default.func,
+  onPlaying: _propTypes2.default.func,
+  onEnded: _propTypes2.default.func,
+  onSeeking: _propTypes2.default.func,
+  onSeeked: _propTypes2.default.func,
+  onPlay: _propTypes2.default.func,
+  onPause: _propTypes2.default.func,
+  onProgress: _propTypes2.default.func,
+  onDurationChange: _propTypes2.default.func,
+  onError: _propTypes2.default.func,
+  onSuspend: _propTypes2.default.func,
+  onAbort: _propTypes2.default.func,
+  onEmptied: _propTypes2.default.func,
+  onStalled: _propTypes2.default.func,
+  onLoadedMetadata: _propTypes2.default.func,
+  onLoadedData: _propTypes2.default.func,
+  onTimeUpdate: _propTypes2.default.func,
+  onRateChange: _propTypes2.default.func,
+  onVolumeChange: _propTypes2.default.func
 };
@@ -120,2 +125,4 @@
   fluid: true,
+  muted: false,
+  playsInline: false,
   aspectRatio: 'auto'
@@ -177,3 +184,4 @@ };
         ref: function ref(c) {
-          _this2.manager.video = _this2.video = c;
+          _this2.video = c;
+          _this2.manager.video = _this2.video;
         },
@@ -463,3 +471,3 @@ key: 'video',
             'video-react-workinghover': !browser.IS_IOS
-          }, 'video-react'),
+          }, 'video-react', this.props.className),
           style: this.getStyle(),
@@ -466,0 +474,0 @@ ref: function ref(c) {

lib/components/popup/Popup.js

@@ -1,2 +0,2 @@
-"use strict";
+'use strict';
 
@@ -9,4 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require("react");
+var _propTypes = require('prop-types');
 
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _react = require('react');
+
 var _react2 = _interopRequireDefault(_react);
@@ -23,4 +27,4 @@
 var propTypes = {
-  player: _react.PropTypes.object,
-  children: _react.PropTypes.any
+  player: _propTypes2.default.object,
+  children: _propTypes2.default.any
 };
@@ -41,3 +45,3 @@
   _createClass(Popup, [{
-    key: "handleClick",
+    key: 'handleClick',
     value: function handleClick(event) {
@@ -48,3 +52,3 @@ event.preventDefault();
   }, {
-    key: "render",
+    key: 'render',
     value: function render() {
@@ -54,10 +58,10 @@ var children = this.props.children;
       return _react2.default.createElement(
-        "div",
+        'div',
         {
-          className: "video-react-menu",
+          className: 'video-react-menu',
           onClick: this.handleClick
         },
         _react2.default.createElement(
-          "div",
-          { className: "video-react-menu-content" },
+          'div',
+          { className: 'video-react-menu-content' },
           children
@@ -64,0 +68,0 @@ )

lib/components/popup/PopupButton.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -31,7 +35,7 @@
 var propTypes = {
-  inline: _react.PropTypes.bool,
-  onClick: _react.PropTypes.func.isRequired,
-  onFocus: _react.PropTypes.func,
-  onBlur: _react.PropTypes.func,
-  className: _react.PropTypes.string
+  inline: _propTypes2.default.bool,
+  onClick: _propTypes2.default.func.isRequired,
+  onFocus: _propTypes2.default.func,
+  onBlur: _propTypes2.default.func,
+  className: _propTypes2.default.string
 };
@@ -38,0 +42,0 @@

lib/components/PosterImage.js

@@ -1,2 +0,2 @@
-"use strict";
+'use strict';
 
@@ -7,12 +7,21 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require("react");
+var _propTypes = require('prop-types');
 
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _react = require('react');
+
 var _react2 = _interopRequireDefault(_react);
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var propTypes = {
-  poster: _react.PropTypes.string,
-  player: _react.PropTypes.object,
-  actions: _react.PropTypes.object
+  poster: _propTypes2.default.string,
+  player: _propTypes2.default.object,
+  actions: _propTypes2.default.object,
+  className: _propTypes2.default.string
 };
@@ -23,3 +32,4 @@
       player = _ref.player,
-      actions = _ref.actions;
+      actions = _ref.actions,
+      className = _ref.className;
 
@@ -30,6 +40,6 @@ if (!poster || player.hasStarted) {
 
-  return _react2.default.createElement("div", {
-    className: "video-react-poster",
+  return _react2.default.createElement('div', {
+    className: (0, _classnames2.default)('video-react-poster', className),
     style: {
-      backgroundImage: "url(\"" + poster + "\")"
+      backgroundImage: 'url("' + poster + '")'
     },
@@ -36,0 +46,0 @@ onClick: function onClick() {

lib/components/Shortcut.js

@@ -9,2 +9,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -14,2 +18,4 @@
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
@@ -24,6 +30,6 @@
 var propTypes = {
-  manager: _react.PropTypes.object,
-  actions: _react.PropTypes.object,
-  player: _react.PropTypes.object,
-  shortcuts: _react.PropTypes.array
+  manager: _propTypes2.default.object,
+  actions: _propTypes2.default.object,
+  player: _propTypes2.default.object,
+  shortcuts: _propTypes2.default.array
 };
@@ -30,0 +36,0 @@

lib/components/Slider.js

@@ -9,2 +9,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -35,20 +39,19 @@
 var propTypes = {
-  className: _react.PropTypes.string,
-  onMouseDown: _react.PropTypes.func,
-  onMouseMove: _react.PropTypes.func,
-  stepForward: _react.PropTypes.func,
-  stepBack: _react.PropTypes.func,
-  sliderActive: _react.PropTypes.func,
-  sliderInactive: _react.PropTypes.func,
-  onMouseUp: _react.PropTypes.func,
-  onFocus: _react.PropTypes.func,
-  onBlur: _react.PropTypes.func,
-  onClick: _react.PropTypes.func,
-  getPercent: _react.PropTypes.func,
-  vertical: _react.PropTypes.bool,
-  children: _react.PropTypes.node,
-  player: _react.PropTypes.object,
-  label: _react.PropTypes.string,
-  valuenow: _react.PropTypes.string,
-  valuetext: _react.PropTypes.string
+  className: _propTypes2.default.string,
+  onMouseDown: _propTypes2.default.func,
+  onMouseMove: _propTypes2.default.func,
+  stepForward: _propTypes2.default.func,
+  stepBack: _propTypes2.default.func,
+  sliderActive: _propTypes2.default.func,
+  sliderInactive: _propTypes2.default.func,
+  onMouseUp: _propTypes2.default.func,
+  onFocus: _propTypes2.default.func,
+  onBlur: _propTypes2.default.func,
+  onClick: _propTypes2.default.func,
+  getPercent: _propTypes2.default.func,
+  vertical: _propTypes2.default.bool,
+  children: _propTypes2.default.node,
+  label: _propTypes2.default.string,
+  valuenow: _propTypes2.default.string,
+  valuetext: _propTypes2.default.string
 };
@@ -55,0 +58,0 @@

lib/components/Source.js

@@ -8,2 +8,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -16,5 +20,5 @@
 var propTypes = {
-  src: _react.PropTypes.string.isRequired,
-  media: _react.PropTypes.string,
-  type: _react.PropTypes.string
+  src: _propTypes2.default.string.isRequired,
+  media: _propTypes2.default.string,
+  type: _propTypes2.default.string
 };
@@ -21,0 +25,0 @@

lib/components/time-controls/CurrentTimeDisplay.js

@@ -7,2 +7,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -12,2 +16,6 @@
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _utils = require('../../utils');
@@ -18,3 +26,4 @@
 var propTypes = {
-  player: _react.PropTypes.object
+  player: _propTypes2.default.object,
+  className: _propTypes2.default.string
 };
@@ -25,3 +34,4 @@
       currentTime = _ref$player.currentTime,
-      duration = _ref$player.duration;
+      duration = _ref$player.duration,
+      className = _ref.className;
 
@@ -32,3 +42,3 @@ var formattedTime = (0, _utils.formatTime)(currentTime, duration);
     {
-      className: 'video-react-current-time video-react-time-control video-react-control'
+      className: (0, _classnames2.default)('video-react-current-time video-react-time-control video-react-control', className)
     },
@@ -35,0 +45,0 @@ _react2.default.createElement(

lib/components/time-controls/DurationDisplay.js

@@ -7,2 +7,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -12,2 +16,6 @@
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _utils = require('../../utils');
@@ -18,7 +26,9 @@
 var propTypes = {
-  player: _react.PropTypes.object
+  player: _propTypes2.default.object,
+  className: _propTypes2.default.string
 };
 
 function DurationDisplay(_ref) {
-  var duration = _ref.player.duration;
+  var duration = _ref.player.duration,
+      className = _ref.className;
 
@@ -29,3 +39,3 @@ var formattedTime = (0, _utils.formatTime)(duration);
     {
-      className: 'video-react-duration video-react-time-control video-react-control'
+      className: (0, _classnames2.default)(className, 'video-react-duration video-react-time-control video-react-control')
     },
@@ -32,0 +42,0 @@ _react2.default.createElement(

lib/components/time-controls/RemainingTimeDisplay.js

@@ -7,2 +7,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -12,2 +16,6 @@
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _utils = require('../../utils');
@@ -18,3 +26,4 @@
 var propTypes = {
-  player: _react.PropTypes.object
+  player: _propTypes2.default.object,
+  className: _propTypes2.default.string
 };
@@ -25,3 +34,4 @@
       currentTime = _ref$player.currentTime,
-      duration = _ref$player.duration;
+      duration = _ref$player.duration,
+      className = _ref.className;
 
@@ -33,3 +43,3 @@ var remainingTime = duration - currentTime;
     {
-      className: 'video-react-remaining-time video-react-time-control video-react-control'
+      className: (0, _classnames2.default)('video-react-remaining-time video-react-time-control video-react-control', className)
     },
@@ -36,0 +46,0 @@ _react2.default.createElement(

lib/components/time-controls/TimeDivider.js

@@ -8,2 +8,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -13,10 +17,16 @@
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var propTypes = {
-  separator: _react.PropTypes.string
+  separator: _propTypes2.default.string,
+  className: _propTypes2.default.string
 };
 
 function TimeDivider(_ref) {
-  var separator = _ref.separator;
+  var separator = _ref.separator,
+      className = _ref.className;
 
@@ -27,3 +37,3 @@ var separatorText = separator || '/';
     {
-      className: 'video-react-time-control video-react-time-divider',
+      className: (0, _classnames2.default)('video-react-time-control video-react-time-divider', className),
       dir: 'ltr'
@@ -30,0 +40,0 @@ },

lib/components/Video.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -20,2 +24,6 @@
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _utils = require('../utils');
@@ -32,37 +40,38 @@
 var propTypes = {
-  actions: _react.PropTypes.object,
-  player: _react.PropTypes.object,
-  children: _react.PropTypes.any,
-  startTime: _react.PropTypes.number,
-  loop: _react.PropTypes.bool,
-  muted: _react.PropTypes.bool,
-  autoPlay: _react.PropTypes.bool,
-  playsInline: _react.PropTypes.bool,
-  src: _react.PropTypes.string,
-  poster: _react.PropTypes.string,
-  preload: _react2.default.PropTypes.oneOf(['auto', 'metadata', 'none']),
+  actions: _propTypes2.default.object,
+  player: _propTypes2.default.object,
+  children: _propTypes2.default.any,
+  startTime: _propTypes2.default.number,
+  loop: _propTypes2.default.bool,
+  muted: _propTypes2.default.bool,
+  autoPlay: _propTypes2.default.bool,
+  playsInline: _propTypes2.default.bool,
+  src: _propTypes2.default.string,
+  poster: _propTypes2.default.string,
+  className: _propTypes2.default.string,
+  preload: _propTypes2.default.oneOf(['auto', 'metadata', 'none']),
 
-  onLoadStart: _react.PropTypes.func,
-  onWaiting: _react.PropTypes.func,
-  onCanPlay: _react.PropTypes.func,
-  onCanPlayThrough: _react.PropTypes.func,
-  onPlaying: _react.PropTypes.func,
-  onEnded: _react.PropTypes.func,
-  onSeeking: _react.PropTypes.func,
-  onSeeked: _react.PropTypes.func,
-  onPlay: _react.PropTypes.func,
-  onPause: _react.PropTypes.func,
-  onProgress: _react.PropTypes.func,
-  onDurationChange: _react.PropTypes.func,
-  onError: _react.PropTypes.func,
-  onSuspend: _react.PropTypes.func,
-  onAbort: _react.PropTypes.func,
-  onEmptied: _react.PropTypes.func,
-  onStalled: _react.PropTypes.func,
-  onLoadedMetadata: _react.PropTypes.func,
-  onLoadedData: _react.PropTypes.func,
-  onTimeUpdate: _react.PropTypes.func,
-  onRateChange: _react.PropTypes.func,
-  onVolumeChange: _react.PropTypes.func,
-  onResize: _react.PropTypes.func
+  onLoadStart: _propTypes2.default.func,
+  onWaiting: _propTypes2.default.func,
+  onCanPlay: _propTypes2.default.func,
+  onCanPlayThrough: _propTypes2.default.func,
+  onPlaying: _propTypes2.default.func,
+  onEnded: _propTypes2.default.func,
+  onSeeking: _propTypes2.default.func,
+  onSeeked: _propTypes2.default.func,
+  onPlay: _propTypes2.default.func,
+  onPause: _propTypes2.default.func,
+  onProgress: _propTypes2.default.func,
+  onDurationChange: _propTypes2.default.func,
+  onError: _propTypes2.default.func,
+  onSuspend: _propTypes2.default.func,
+  onAbort: _propTypes2.default.func,
+  onEmptied: _propTypes2.default.func,
+  onStalled: _propTypes2.default.func,
+  onLoadedMetadata: _propTypes2.default.func,
+  onLoadedData: _propTypes2.default.func,
+  onTimeUpdate: _propTypes2.default.func,
+  onRateChange: _propTypes2.default.func,
+  onVolumeChange: _propTypes2.default.func,
+  onResize: _propTypes2.default.func
 };
@@ -694,3 +703,3 @@
         {
-          className: 'video-react-video',
+          className: (0, _classnames2.default)('video-react-video', this.props.className),
           ref: function ref(c) {
@@ -697,0 +706,0 @@ _this4.video = c;

lib/components/volume-control/VolumeBar.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -16,2 +20,6 @@
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _Slider = require('../Slider');
@@ -34,6 +42,7 @@
 var propTypes = {
-  actions: _react.PropTypes.object,
-  player: _react.PropTypes.object,
-  onFocus: _react.PropTypes.func,
-  onBlur: _react.PropTypes.func
+  actions: _propTypes2.default.object,
+  player: _propTypes2.default.object,
+  className: _propTypes2.default.string,
+  onFocus: _propTypes2.default.func,
+  onBlur: _propTypes2.default.func
 };
@@ -151,3 +160,5 @@
 
-      var player = this.props.player;
+      var _props4 = this.props,
+          player = _props4.player,
+          className = _props4.className;
 
@@ -175,3 +186,3 @@
           stepBack: this.stepBack,
-          className: 'video-react-volume-bar video-react-slider-bar'
+          className: (0, _classnames2.default)(className, 'video-react-volume-bar video-react-slider-bar')
         }, this.props),
@@ -178,0 +189,0 @@ _react2.default.createElement(_VolumeLevel2.default, this.props)

lib/components/volume-control/VolumeControl.js

@@ -12,2 +12,10 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _VolumeBar = require('./VolumeBar');
@@ -19,10 +27,18 @@
 
-function VolumeControl() {
+var propTypes = {
+  className: _propTypes2.default.string
+};
+
+function VolumeControl(_ref) {
+  var className = _ref.className;
+
   return _react2.default.createElement(
     'div',
     {
-      className: 'video-react-volume-control video-react-control'
+      className: (0, _classnames2.default)(className, 'video-react-volume-control video-react-control')
     },
     _react2.default.createElement(_VolumeBar2.default, this.props)
   );
-}
+}
+
+VolumeControl.propTypes = propTypes;

lib/components/volume-control/VolumeLevel.js

@@ -7,2 +7,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -12,7 +16,12 @@
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var propTypes = {
-  percentage: _react.PropTypes.string,
-  vertical: _react.PropTypes.bool
+  percentage: _propTypes2.default.string,
+  vertical: _propTypes2.default.bool,
+  className: _propTypes2.default.string
 };
@@ -27,3 +36,4 @@
   var percentage = _ref.percentage,
-      vertical = _ref.vertical;
+      vertical = _ref.vertical,
+      className = _ref.className;
 
@@ -40,3 +50,3 @@ var style = {};
     {
-      className: 'video-react-volume-level',
+      className: (0, _classnames2.default)(className, 'video-react-volume-level'),
       style: style
@@ -43,0 +53,0 @@ },

package.json

 {
   "name": "video-react",
-  "version": "0.7.8",
+  "version": "0.8.2",
   "description": "Video-React is a web video player built from the ground up for an HTML5 world using React library.",
   "main": "lib/index.js",
+  "style": "dist/video-react.css",
   "scripts": {
@@ -60,3 +61,4 @@ "report-coverage": "coveralls < ./coverage/lcov.info",
     "classnames": "^2.2.3",
-    "lodash.throttle": "^4.1.1"
+    "lodash.throttle": "^4.1.1",
+    "prop-types": "^15.5.8"
   },
@@ -80,3 +82,3 @@ "peerDependencies": {
     "conventional-recommended-bump": "^0.3.0",
-    "copy-webpack-plugin": "^3.0.1",
+    "copy-webpack-plugin": "^4.0.1",
     "coveralls": "^2.11.12",
@@ -90,3 +92,3 @@ "cross-env": "^2.0.0",
     "eslint-config-airbnb": "^10.0.0",
-    "eslint-plugin-import": "^1.12.0",
+    "eslint-plugin-import": "^1.16.0",
     "eslint-plugin-jsx-a11y": "^2.0.1",
@@ -98,3 +100,3 @@ "eslint-plugin-react": "^6.0.0",
     "history": "^3.0.0",
-    "hls.js": "^0.6.10",
+    "hls.js": "^0.7.5",
     "holderjs": "^2.9.3",
@@ -104,11 +106,13 @@ "json-loader": "^0.5.4",
     "raw-loader": "^0.5.1",
-    "react": "^15.3.0",
-    "react-addons-css-transition-group": "^15.3.2",
-    "react-addons-test-utils": "^15.3.0",
-    "react-addons-transition-group": "^15.3.0",
-    "react-dom": "^15.3.0",
+    "react": "^15.5.4",
+    "react-addons-css-transition-group": "^15.5.2",
+    "react-addons-test-utils": "^15.5.1",
+    "react-addons-transition-group": "^15.5.2",
+    "react-dom": "^15.5.4",
     "react-helmet": "^3.0.1",
     "react-prism": "4.0.0",
     "react-router": "^2.6.1",
-    "react-scripts": "^0.7.0",
+    "react-scripts": "^0.9.5",
+    "react-test-renderer": "^15.5.4",
+    "react-transition-group": "^1.1.2",
     "reactstrap": "^4.0.1",
@@ -115,0 +119,0 @@ "redux": "^3.6.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2908482

increased by3.97%

Lines of code

20147

increased by5.09%

Worsened metrics

Dependency count

6

increased by20%

Dev dependency count

52

increased by4%

Dependency changes

• + Addedprop-types@^15.5.8