video-react - npm Package Compare versions

Comparing version 0.3.3 to 0.4.1

CHANGELOG.md

@@ -0,1 +1,8 @@
+<a name="0.4.1"></a>
+## [0.4.1](https://github.com/video-react/video-react/compare/0.3.3...v0.4.1) (2016-11-23)
+
+- Using redux to manage state
+- Add `playsInline` property
+
+
 <a name="0.3.3"></a>
@@ -2,0 +9,0 @@ ## [0.3.3](https://github.com/video-react/video-react/compare/0.3.2...v0.3.3) (2016-11-21)

lib/components/Bezel.js

@@ -26,3 +26,5 @@ 'use strict';
 var propTypes = {
-  player: _react.PropTypes.object
+  manager: _react.PropTypes.object,
+  player: _react.PropTypes.object,
+  actions: _react.PropTypes.object
 };
@@ -39,5 +41,7 @@
     _this.timer = null;
+    props.manager.subscribeToOperationStateChange(_this.handleStateChange.bind(_this));
 
     _this.state = {
-      hidden: true
+      hidden: true,
+      operation: {}
     };
@@ -48,32 +52,38 @@ return _this;
   _createClass(Bezel, [{
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate(prevProps) {
+    key: 'handleStateChange',
+    value: function handleStateChange(state, prevState) {
       var _this2 = this;
 
-      if (this.props.player.bezelCount !== prevProps.player.bezelCount) {
+      var actions = this.props.actions;
+
+      if (state.count !== prevState.count && state.operation.source === 'shortcut') {
         if (this.timer) {
-          clearTimeout(this.timer);
-        }
-
-        if (this.state.hidden) {
-          this.setState({
-            hidden: false
+          // previous animation is not finished
+          clearTimeout(this.timer); // cancel it
+          this.timer = null;
+          this.setState({ // hide it
+            hidden: true,
+            count: state.count
           });
+          setTimeout(function () {
+            // refresh the count, show it in next loop
+            actions.refreshOperation();
+          }, 10);
         } else {
+          // no previous animation
+          // show it
+          // update operation
           this.setState({
-            hidden: true
+            hidden: false,
+            count: state.count,
+            operation: state.operation
           });
-
-          setTimeout(function () {
+          // hide it after 0.5s
+          this.timer = setTimeout(function () {
             _this2.setState({
-              hidden: false
+              hidden: true
             });
-          }, 0);
+            _this2.timer = null;
+          }, 500);
         }
-
-        this.timer = setTimeout(function () {
-          _this2.setState({
-            hidden: true
-          });
-        }, 500);
       }
@@ -84,5 +94,4 @@ }
     value: function render() {
-      var player = this.props.player;
-
-      if (!player.bezelCount || !player.bezelStatus) {
+      // only displays for shortcut so far
+      if (this.state.operation.source !== 'shortcut') {
         return null;
@@ -100,5 +109,7 @@ }
           role: 'status',
-          'aria-label': player.bezelStatus
+          'aria-label': this.state.operation.action
         },
-        _react2.default.createElement('div', { className: (0, _classnames2.default)('video-react-bezel-icon', 'video-react-bezel-icon-' + player.bezelStatus) })
+        _react2.default.createElement('div', {
+          className: (0, _classnames2.default)('video-react-bezel-icon', 'video-react-bezel-icon-' + this.state.operation.action)
+        })
       );
@@ -111,2 +122,5 @@ }
 
-exports.default = Bezel;
+exports.default = Bezel;
+
+
+Bezel.propTypes = propTypes;

lib/components/control-bar/FullscreenToggle.js

@@ -41,4 +41,2 @@ 'use strict';
     _this.handleClick = _this.handleClick.bind(_this);
-    _this.requestFullscreen = _this.requestFullscreen.bind(_this);
-    _this.handleFullScreenChange = _this.handleFullScreenChange.bind(_this);
     return _this;
@@ -48,67 +46,2 @@ }
   _createClass(FullscreenToggle, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      document.addEventListener('fullscreenchange', this.handleFullScreenChange);
-      document.addEventListener('webkitfullscreenchange', this.handleFullScreenChange);
-      document.addEventListener('mozfullscreenchange', this.handleFullScreenChange);
-      document.addEventListener('MSFullscreenChange', this.handleFullScreenChange);
-    }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      document.removeEventListener('fullscreenchange', this.handleFullScreenChange);
-      document.removeEventListener('webkitfullscreenchange', this.handleFullScreenChange);
-      document.removeEventListener('mozfullscreenchange', this.handleFullScreenChange);
-      document.removeEventListener('MSFullscreenChange', this.handleFullScreenChange);
-    }
-  }, {
-    key: 'handleFullScreenChange',
-    value: function handleFullScreenChange() {
-      var actions = this.props.actions;
-
-      actions.handleFullscreenChange(this.isFullscreen());
-    }
-  }, {
-    key: 'isFullscreen',
-    value: function isFullscreen() {
-      return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
-    }
-  }, {
-    key: 'isFullscreenEnabled',
-    value: function isFullscreenEnabled() {
-      return document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled;
-    }
-
-    // go full-screen
-
-  }, {
-    key: 'requestFullscreen',
-    value: function requestFullscreen() {
-      var playerElement = this.props.actions.playerElement;
-
-
-      if (playerElement.requestFullscreen) {
-        playerElement.requestFullscreen();
-      } else if (playerElement.webkitRequestFullscreen) {
-        playerElement.webkitRequestFullscreen();
-      } else if (playerElement.mozRequestFullScreen) {
-        playerElement.mozRequestFullScreen();
-      } else if (playerElement.msRequestFullscreen) {
-        playerElement.msRequestFullscreen();
-      }
-    }
-  }, {
-    key: 'exitFullscreen',
-    value: function exitFullscreen() {
-      if (document.exitFullscreen) {
-        document.exitFullscreen();
-      } else if (document.webkitExitFullscreen) {
-        document.webkitExitFullscreen();
-      } else if (document.mozCancelFullScreen) {
-        document.mozCancelFullScreen();
-      } else if (document.msExitFullscreen) {
-        document.msExitFullscreen();
-      }
-    }
-  }, {
     key: 'handleClick',
@@ -120,11 +53,3 @@ value: function handleClick() {
 
-      if (this.isFullscreenEnabled()) {
-        if (this.isFullscreen()) {
-          this.exitFullscreen();
-        } else {
-          this.requestFullscreen();
-        }
-      } else {
-        actions.handleFullscreenChange(!player.isFullscreen);
-      }
+      actions.toggleFullscreen(player);
 
@@ -131,0 +56,0 @@ (0, _dom.blurNode)(this.button);

lib/components/Player.js

@@ -19,5 +19,5 @@ 'use strict';
 
-var _actions = require('../actions');
+var _Manager = require('../Manager');
 
-var _actions2 = _interopRequireDefault(_actions);
+var _Manager2 = _interopRequireDefault(_Manager);
 
@@ -58,2 +58,6 @@ var _BigPlayButton = require('./BigPlayButton');
 
+var _fullscreen = require('../utils/fullscreen');
+
+var _fullscreen2 = _interopRequireDefault(_fullscreen);
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
@@ -76,2 +80,3 @@
   muted: _react.PropTypes.bool,
+  playsInline: _react.PropTypes.bool,
   aspectRatio: _react.PropTypes.string,
@@ -125,31 +130,7 @@
 
-    _this.state = {
-      userActivity: true,
-      player: {
-        duration: 0,
-        currentTime: 0,
-        seekingTime: 0,
-        buffered: null,
-        waiting: true,
-        seeking: false,
-        paused: true,
-        autoPaused: false,
-        ended: false,
-        playbackRate: 1,
-        muted: props.muted || false,
-        volume: 1,
-        isFullscreen: false,
-        readyState: 0,
-        networkState: 0,
-        videoWidth: 0,
-        videoHeight: 0,
-        hasStarted: false,
+    _this.video = null; // the Video component
+    _this.manager = new _Manager2.default();
+    _this.actions = _this.manager.getActions();
+    _this.manager.subscribeToPlayerStateChange(_this.handleStateChange.bind(_this));
 
-        bezelCount: 0,
-        bezelStatus: null,
-        error: null
-      }
-    };
-    _this.actions = new _actions2.default(_this.setPlayerState.bind(_this));
-
     _this.getStyle = _this.getStyle.bind(_this);
@@ -161,2 +142,3 @@ _this.handleResize = _this.handleResize.bind(_this);
     _this.startControlsTimer = _this.startControlsTimer.bind(_this);
+    _this.handleFullScreenChange = _this.handleFullScreenChange.bind(_this);
     return _this;
@@ -170,11 +152,6 @@ }
       window.addEventListener('resize', this.handleResize);
+
+      _fullscreen2.default.addEventListener(this.handleFullScreenChange);
     }
   }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate(prevProps, prevState) {
-      if (this.state.player.isFullscreen !== prevState.player.isFullscreen) {
-        this.handleResize();
-      }
-    }
-  }, {
     key: 'componentWillUnmount',
@@ -184,2 +161,3 @@ value: function componentWillUnmount() {
       window.addEventListener('resize', this.handleResize);
+      _fullscreen2.default.removeEventListener(this.handleFullScreenChange);
       if (this.controlsHideTimer) {
@@ -189,11 +167,2 @@ window.clearTimeout(this.controlsHideTimer);
     }
-  }, {
-    key: 'setPlayerState',
-    value: function setPlayerState(player) {
-      this.setState(function (prevState) {
-        return _extends({}, prevState, {
-          player: _extends({}, prevState.player, player)
-        });
-      });
-    }
 
@@ -206,2 +175,7 @@ // player resize
   }, {
+    key: 'handleFullScreenChange',
+    value: function handleFullScreenChange() {
+      this.actions.handleFullscreenChange(_fullscreen2.default.isFullscreen);
+    }
+  }, {
     key: 'handleMouseDown',
@@ -221,10 +195,6 @@ value: function handleMouseDown() {
 
-      this.setState({
-        userActivity: true
-      });
+      this.actions.activate(true);
       clearTimeout(this.controlsHideTimer);
       this.controlsHideTimer = setTimeout(function () {
-        _this2.setState({
-          userActivity: false
-        });
+        _this2.actions.activate(false);
       }, 3000);
@@ -236,4 +206,6 @@ }
       var fluid = this.props.fluid;
-      var player = this.state.player;
 
+      var _manager$getState = this.manager.getState(),
+          player = _manager$getState.player;
+
       var style = {};
@@ -291,3 +263,11 @@ var width = void 0;
     value: function getDefaultChildren(props) {
-      return [_react2.default.createElement(_PosterImage2.default, _extends({
+      var _this3 = this;
+
+      return [_react2.default.createElement(_Video2.default, _extends({
+        ref: function ref(c) {
+          _this3.manager.video = _this3.video = c;
+        },
+        key: 'video',
+        order: 0.0
+      }, props)), _react2.default.createElement(_PosterImage2.default, _extends({
         key: 'poster-image',
@@ -325,17 +305,31 @@ order: 1.0
   }, {
+    key: 'handleStateChange',
+    value: function handleStateChange(state, prevState) {
+      if (state.isFullscreen !== prevState.isFullscreen) {
+        this.handleResize();
+      }
+      this.forceUpdate(); // re-render
+    }
+  }, {
     key: 'render',
     value: function render() {
-      var _this3 = this;
+      var _this4 = this;
 
       var fluid = this.props.fluid;
-      var _state$player = this.state.player,
-          paused = _state$player.paused,
-          hasStarted = _state$player.hasStarted,
-          waiting = _state$player.waiting,
-          seeking = _state$player.seeking,
-          isFullscreen = _state$player.isFullscreen;
 
+      var _manager$getState2 = this.manager.getState(),
+          player = _manager$getState2.player;
+
+      var paused = player.paused,
+          hasStarted = player.hasStarted,
+          waiting = player.waiting,
+          seeking = player.seeking,
+          isFullscreen = player.isFullscreen,
+          userActivity = player.userActivity;
+
       var props = _extends({}, this.props, {
-        player: this.state.player,
-        actions: this.actions
+        player: player,
+        actions: this.actions,
+        manager: this.manager,
+        store: this.manager.store
       });
@@ -356,4 +350,4 @@ var children = this.getChildren(props);
             'video-react-fullscreen': isFullscreen,
-            'video-react-user-inactive': !this.state.userActivity,
-            'video-react-user-active': this.state.userActivity,
+            'video-react-user-inactive': !userActivity,
+            'video-react-user-active': userActivity,
             'video-react-workinghover': !browser.IS_IOS
@@ -363,3 +357,3 @@ }, 'video-react'),
           ref: function ref(c) {
-            _this3.actions.setPlayerElement(c);
+            _this4.manager.rootElement = c;
           },
@@ -370,8 +364,2 @@ onTouchStart: this.handleMouseDown,
         },
-        _react2.default.createElement(_Video2.default, _extends({
-          ref: function ref(c) {
-            _this3.video = c;
-            _this3.actions.setVideo(c);
-          }
-        }, props)),
         children
@@ -378,0 +366,0 @@ );

lib/components/Shortcut.js

@@ -11,10 +11,2 @@ 'use strict';
 
-var _react2 = _interopRequireDefault(_react);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-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); } }
@@ -54,4 +46,9 @@
       handle: function handle(player, actions) {
-        actions.replay(5); // Go back 5 seconds
-        actions.setBezel('replay-5');
+        if (!player.hasStarted) {
+          return;
+        }
+        actions.replay(5, {
+          action: 'replay-5',
+          source: 'shortcut'
+        }); // Go back 5 seconds
       }
@@ -61,4 +58,9 @@ }, {
       handle: function handle(player, actions) {
-        actions.replay(10); // Go back 10 seconds
-        actions.setBezel('replay-10');
+        if (!player.hasStarted) {
+          return;
+        }
+        actions.replay(10, {
+          action: 'replay-10',
+          source: 'shortcut'
+        }); // Go back 10 seconds
       }
@@ -68,4 +70,9 @@ }, {
       handle: function handle(player, actions) {
-        actions.forward(5); // Go forward 5 seconds
-        actions.setBezel('forward-5');
+        if (!player.hasStarted) {
+          return;
+        }
+        actions.forward(5, {
+          action: 'forward-5',
+          source: 'shortcut'
+        }); // Go forward 5 seconds
       }
@@ -75,4 +82,9 @@ }, {
       handle: function handle(player, actions) {
-        actions.forward(10); // Go forward 10 seconds
-        actions.setBezel('forward-10');
+        if (!player.hasStarted) {
+          return;
+        }
+        actions.forward(10, {
+          action: 'forward-10',
+          source: 'shortcut'
+        }); // Go forward 10 seconds
       }
@@ -82,2 +94,5 @@ }, {
       handle: function handle(player, actions) {
+        if (!player.hasStarted) {
+          return;
+        }
         actions.seek(0); // Go to beginning of video
@@ -88,2 +103,5 @@ }
       handle: function handle(player, actions) {
+        if (!player.hasStarted) {
+          return;
+        }
         // Go to end of video
@@ -100,4 +118,6 @@ actions.seek(player.duration);
         }
-        actions.changeVolume(v);
-        actions.setBezel('volume-up');
+        actions.changeVolume(v, {
+          action: 'volume-up',
+          source: 'shortcut'
+        });
       }
@@ -112,8 +132,7 @@ }, {
         }
-        actions.changeVolume(v);
-        if (v > 0) {
-          actions.setBezel('volume-down');
-        } else {
-          actions.setBezel('volume-off');
-        }
+        var action = v > 0 ? 'volume-down' : 'volume-off';
+        actions.changeVolume(v, {
+          action: action,
+          source: 'shortcut'
+        });
       }
@@ -139,4 +158,6 @@ }, {
         }
-        actions.changeRate(playbackRate);
-        actions.setBezel('fast-forward');
+        actions.changeRate(playbackRate, {
+          action: 'fast-forward',
+          source: 'shortcut'
+        });
       }
@@ -160,4 +181,6 @@ }, {
         }
-        actions.changeRate(playbackRate);
-        actions.setBezel('fast-rewind');
+        actions.changeRate(playbackRate, {
+          action: 'fast-rewind',
+          source: 'shortcut'
+        });
       }
@@ -182,3 +205,3 @@ }];
     value: function componentDidUpdate(prevProps) {
-      if (prevProps.shortcuts != this.props.shortcuts) {
+      if (prevProps.shortcuts !== this.props.shortcuts) {
         this.mergeShortcuts();
@@ -208,7 +231,11 @@ }
       if (player.paused) {
-        actions.play();
-        actions.setBezel('play');
+        actions.play({
+          action: 'play',
+          source: 'shortcut'
+        });
       } else {
-        actions.pause();
-        actions.setBezel('pause');
+        actions.pause({
+          action: 'pause',
+          source: 'shortcut'
+        });
       }
@@ -218,3 +245,5 @@ }
     key: 'toggleFullscreen',
-    value: function toggleFullscreen(player, actions) {}
+    value: function toggleFullscreen(player, actions) {
+      actions.toggleFullscreen(player);
+    }
   }, {
@@ -263,2 +292,5 @@ key: 'handleKeypress',
 
-exports.default = Shortcut;
+exports.default = Shortcut;
+
+
+Shortcut.propTypes = propTypes;

lib/components/Video.js

@@ -32,2 +32,3 @@ 'use strict';
   autoPlay: _react.PropTypes.bool,
+  playsInline: _react.PropTypes.bool,
   src: _react.PropTypes.string,
@@ -73,2 +74,3 @@ poster: _react.PropTypes.string,
 
+    _this.video = null; // the html5 video
     _this.play = _this.play.bind(_this);
@@ -109,4 +111,3 @@ _this.pause = _this.pause.bind(_this);
 
-  // set playback rate
-  // speed of video
+  // get playback rate
 
@@ -321,24 +322,2 @@
 
-    // Fired the first time a video is played
-
-  }, {
-    key: 'handleFirstPlay',
-    value: function handleFirstPlay() {
-      var _props8 = this.props,
-          player = _props8.player,
-          starttime = _props8.starttime,
-          actions = _props8.actions;
-
-      // If the first starttime attribute is specified
-      // then we will start at the given offset in seconds
-
-      if (starttime) {
-        this.seek(starttime);
-      }
-
-      if (!player.hasStarted) {
-        actions.handleFirstPlay();
-      }
-    }
-
     // Fired when the duration of
@@ -350,6 +329,6 @@ // the media resource is first known or changed
     value: function handleDurationChange() {
-      var _props9 = this.props,
-          player = _props9.player,
-          actions = _props9.actions,
-          onDurationChange = _props9.onDurationChange;
+      var _props8 = this.props,
+          player = _props8.player,
+          actions = _props8.actions,
+          onDurationChange = _props8.onDurationChange;
 
@@ -371,5 +350,5 @@ if (player.duration !== this.video.duration) {
     value: function handleProgress() {
-      var _props10 = this.props,
-          actions = _props10.actions,
-          onProgress = _props10.onProgress;
+      var _props9 = this.props,
+          actions = _props9.actions,
+          onProgress = _props9.onProgress;
 
@@ -391,7 +370,7 @@ if (this.video) {
     value: function handleEnded() {
-      var _props11 = this.props,
-          loop = _props11.loop,
-          player = _props11.player,
-          actions = _props11.actions,
-          onEnded = _props11.onEnded;
+      var _props10 = this.props,
+          loop = _props10.loop,
+          player = _props10.player,
+          actions = _props10.actions,
+          onEnded = _props10.onEnded;
 
@@ -418,6 +397,6 @@ if (loop) {
     value: function handleWaiting() {
-      var _props12 = this.props,
-          player = _props12.player,
-          actions = _props12.actions,
-          onWaiting = _props12.onWaiting;
+      var _props11 = this.props,
+          player = _props11.player,
+          actions = _props11.actions,
+          onWaiting = _props11.onWaiting;
 
@@ -439,6 +418,6 @@ if (!player.waiting) {
     value: function handleSeeking() {
-      var _props13 = this.props,
-          player = _props13.player,
-          actions = _props13.actions,
-          onSeeking = _props13.onSeeking;
+      var _props12 = this.props,
+          player = _props12.player,
+          actions = _props12.actions,
+          onSeeking = _props12.onSeeking;
 
@@ -460,6 +439,6 @@ if (!player.seeking) {
     value: function handleSeeked() {
-      var _props14 = this.props,
-          player = _props14.player,
-          actions = _props14.actions,
-          onSeeked = _props14.onSeeked;
+      var _props13 = this.props,
+          player = _props13.player,
+          actions = _props13.actions,
+          onSeeked = _props13.onSeeked;
 
@@ -537,5 +516,5 @@ if (player.seeking) {
     value: function handleLoadedMetaData() {
-      var _props15 = this.props,
-          onLoadedMetadata = _props15.onLoadedMetadata,
-          startTime = _props15.startTime;
+      var _props14 = this.props,
+          onLoadedMetadata = _props14.onLoadedMetadata,
+          startTime = _props14.startTime;
 
@@ -571,6 +550,6 @@
     value: function handleTimeUpdate() {
-      var _props16 = this.props,
-          player = _props16.player,
-          actions = _props16.actions,
-          onTimeUpdate = _props16.onTimeUpdate;
+      var _props15 = this.props,
+          player = _props15.player,
+          actions = _props15.actions,
+          onTimeUpdate = _props15.onTimeUpdate;
 
@@ -593,6 +572,6 @@ if (player.currentTime !== this.video.currentTime) {
     value: function handleRateChange() {
-      var _props17 = this.props,
-          player = _props17.player,
-          actions = _props17.actions,
-          onRateChange = _props17.onRateChange;
+      var _props16 = this.props,
+          player = _props16.player,
+          actions = _props16.actions,
+          onRateChange = _props16.onRateChange;
 
@@ -613,6 +592,6 @@ if (player.playbackRate !== this.video.playbackRate) {
     value: function handleVolumeChange() {
-      var _props18 = this.props,
-          player = _props18.player,
-          actions = _props18.actions,
-          onVolumeChange = _props18.onVolumeChange;
+      var _props17 = this.props,
+          player = _props17.player,
+          actions = _props17.actions,
+          onVolumeChange = _props17.onVolumeChange;
 
@@ -648,9 +627,10 @@ if (player.volume !== this.video.volume) {
 
-      var _props19 = this.props,
-          player = _props19.player,
-          loop = _props19.loop,
-          poster = _props19.poster,
-          preload = _props19.preload,
-          src = _props19.src,
-          autoPlay = _props19.autoPlay;
+      var _props18 = this.props,
+          player = _props18.player,
+          loop = _props18.loop,
+          poster = _props18.poster,
+          preload = _props18.preload,
+          src = _props18.src,
+          autoPlay = _props18.autoPlay,
+          playsInline = _props18.playsInline;
 
@@ -673,2 +653,3 @@ // only keep <source /> elements
           loop: loop,
+          playsInline: playsInline,
           autoPlay: autoPlay,
@@ -705,13 +686,17 @@ poster: poster,
     key: 'playbackRate',
-    set: function set(rate) {
-      this.video.playbackRate = rate;
+    get: function get() {
+      return this.video.playbackRate;
     }
 
-    // get playback rate
+    // set playback rate
+    // speed of video
     ,
-    get: function get() {
-      return this.video.playbackRate;
+    set: function set(rate) {
+      this.video.playbackRate = rate;
     }
   }, {
     key: 'muted',
+    get: function get() {
+      return this.video.muted;
+    },
     set: function set(val) {
@@ -722,2 +707,5 @@ this.video.muted = val;
     key: 'volume',
+    get: function get() {
+      return this.video.volume;
+    },
     set: function set(val) {
@@ -724,0 +712,0 @@ this.video.volume = val;

package.json

 {
   "name": "video-react",
-  "version": "0.3.3",
+  "version": "0.4.1",
   "description": "Video-React is a web video player built from the ground up for an HTML5 world using React library.",
@@ -55,3 +55,4 @@ "main": "lib/index.js",
     "classnames": "^2.2.3",
-    "lodash.throttle": "^4.1.1"
+    "lodash.throttle": "^4.1.1",
+    "redux": "^3.6.0"
   },
@@ -58,0 +59,0 @@ "peerDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

1257558

increased by15.93%

Number of package files

84

increased by9.09%

Lines of code

10525

increased by16.75%

Worsened metrics

Dependency count

5

increased by25%

Number of medium supply chain risk alerts

5

increased by150%

Dependency changes

• + Addedredux@^3.6.0

• + Addedlodash@4.17.21(transitive)

• + Addedlodash-es@4.17.21(transitive)

• + Addedredux@3.7.2(transitive)

• + Addedsymbol-observable@1.2.0(transitive)