video-react - npm Package Compare versions

Comparing version 0.4.1 to 0.4.2

CHANGELOG.md

@@ -0,1 +1,10 @@
+<a name="0.4.2"></a>
+## [0.4.2](https://github.com/video-react/video-react/compare/0.4.1...v0.4.2) (2016-11-24)
+
+- Fixed source issue
+- Move `redux` to peerDependencies
+- Add `play()`, `pause()`, `load()`, `addTextTrack()`, `canPlayType()` methods to player.
+- Add example for `Shortcut` component
+- Add example for `Player`
+
 <a name="0.4.1"></a>
@@ -2,0 +11,0 @@ ## [0.4.1](https://github.com/video-react/video-react/compare/0.3.3...v0.4.1) (2016-11-23)

lib/components/Player.js

@@ -161,2 +161,46 @@ 'use strict';
 
+    // play the video
+
+  }, {
+    key: 'play',
+    value: function play() {
+      this.video.play();
+    }
+
+    // pause the video
+
+  }, {
+    key: 'pause',
+    value: function pause() {
+      this.video.pause();
+    }
+
+    // Change the video source and re-load the video:
+
+  }, {
+    key: 'load',
+    value: function load() {
+      this.video.load();
+    }
+
+    // Add a new text track to the video
+
+  }, {
+    key: 'addTextTrack',
+    value: function addTextTrack() {
+      var _video;
+
+      (_video = this.video).addTextTrack.apply(_video, arguments);
+    }
+
+    // Check if your browser can play different types of video:
+
+  }, {
+    key: 'canPlayType',
+    value: function canPlayType() {
+      var _video2;
+
+      (_video2 = this.video).canPlayType.apply(_video2, arguments);
+    }
+
     // player resize
@@ -252,3 +296,3 @@
     key: 'getDefaultChildren',
-    value: function getDefaultChildren(props) {
+    value: function getDefaultChildren(props, fullProps) {
       var _this3 = this;
@@ -262,3 +306,3 @@
         order: 0.0
-      }, props)), _react2.default.createElement(_PosterImage2.default, _extends({
+      }, fullProps)), _react2.default.createElement(_PosterImage2.default, _extends({
         key: 'poster-image',
@@ -290,5 +334,5 @@ order: 1.0
       var children = _react2.default.Children.toArray(this.props.children).filter(function (e) {
-        return e.type !== 'source';
+        return !(0, _utils.isVideoChild)(e);
       });
-      var defaultChildren = this.getDefaultChildren(propsWithoutChildren);
+      var defaultChildren = this.getDefaultChildren(propsWithoutChildren, props);
       return (0, _utils.mergeAndSortChildren)(defaultChildren, children, propsWithoutChildren);
@@ -295,0 +339,0 @@ }

lib/components/Shortcut.js

@@ -209,2 +209,13 @@ 'use strict';
     value: function mergeShortcuts() {
+      var gradeShortcut = function gradeShortcut(s) {
+        var score = 0;
+        var ps = ['ctrl', 'shift', 'alt'];
+        ps.forEach(function (key) {
+          if (s[key]) {
+            score++;
+          }
+        });
+        return score;
+      };
+
       var shortcuts = (this.props.shortcuts || []).filter(function (s) {
@@ -214,3 +225,5 @@ return s.keyCode && s.handle && typeof s.handle === 'function';
 
-      this.shortcuts = [].concat(_toConsumableArray(shortcuts), _toConsumableArray(this.defaultShortcuts));
+      this.shortcuts = [].concat(_toConsumableArray(shortcuts), _toConsumableArray(this.defaultShortcuts)).sort(function (a, b) {
+        return gradeShortcut(b) - gradeShortcut(a);
+      });
     }
@@ -246,6 +259,5 @@ }, {
       var keyCode = e.keyCode || e.which;
-      var ctrl = e.ctrlKey;
+      var ctrl = e.ctrlKey || e.metaKey;
       var shift = e.shiftKey;
       var alt = e.altKey;
-      var command = e.metaKey;
 
@@ -256,3 +268,3 @@ var shortcut = this.shortcuts.find(function (s) {
         }
-        if (s.ctrl !== undefined && s.ctrl !== ctrl || s.shift !== undefined && s.shift !== shift || s.alt !== undefined && s.alt !== alt || s.command !== undefined && s.command !== command) {
+        if (s.ctrl !== undefined && s.ctrl !== ctrl || s.shift !== undefined && s.shift !== shift || s.alt !== undefined && s.alt !== alt) {
           return false;
@@ -259,0 +271,0 @@ }

lib/components/Video.js

@@ -17,2 +17,4 @@ 'use strict';
 
+var _utils = require('../utils');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -130,2 +132,30 @@
 
+    // Change the video source and re-load the video:
+
+  }, {
+    key: 'load',
+    value: function load() {
+      this.video.load();
+    }
+
+    // Add a new text track to the video
+
+  }, {
+    key: 'addTextTrack',
+    value: function addTextTrack() {
+      var _video;
+
+      (_video = this.video).addTextTrack.apply(_video, arguments);
+    }
+
+    // Check if your browser can play different types of video:
+
+  }, {
+    key: 'canPlayType',
+    value: function canPlayType() {
+      var _video2;
+
+      (_video2 = this.video).canPlayType.apply(_video2, arguments);
+    }
+
     // toggle play
@@ -624,7 +654,5 @@
 
-      // only keep <source /> elements
+      // only keep <source />, <track />, <MyComponent type="source" /> elements
 
-      var children = _react2.default.Children.toArray(this.props.children).filter(function (c) {
-        return c.type === 'source';
-      });
+      var children = _react2.default.Children.toArray(this.props.children).filter(_utils.isVideoChild);
 
@@ -631,0 +659,0 @@ return _react2.default.createElement(

lib/utils/index.js

@@ -10,2 +10,3 @@ 'use strict';
 exports.formatTime = formatTime;
+exports.isVideoChild = isVideoChild;
 exports.mergeAndSortChildren = mergeAndSortChildren;
@@ -62,2 +63,15 @@
 
+// Check if the element belongs to a video element
+// only accept <source />, <track />,
+// <MyComponent type="source" />,
+// <MyComponent type="track" />
+// elements
+function isVideoChild(c) {
+  var type = c.type;
+  if (c.props && c.props.type) {
+    type = c.props.type;
+  }
+  return type === 'source' || type === 'track';
+}
+
 // merge default children
@@ -64,0 +78,0 @@ // sort them by `order` property

package.json

 {
   "name": "video-react",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Video-React is a web video player built from the ground up for an HTML5 world using React library.",
@@ -11,3 +11,3 @@ "main": "lib/index.js",
     "start": "webpack-dev-server --config ./webpack.dev.config.js --watch",
-    "build-docs": "cross-env WEBPACK_BUILD=production webpack --config ./webpack.dev.config.js --progress --colors",
+    "build-docs": "cross-env WEBPACK_BUILD=development webpack --config ./webpack.dev.config.js --progress --colors",
     "build": "cross-env WEBPACK_BUILD=production webpack --progress --colors && webpack --progress --colors",
@@ -37,5 +37,9 @@ "prebuild": "babel src --out-dir lib --ignore src/__tests__/",
     "react-video",
+    "player",
     "component",
     "components",
     "react-component",
+    "react-components",
+    "react component",
+    "react components",
     "ui"
@@ -47,3 +51,4 @@ ],
     "Jing Sun",
-    "Xiaolei Chen"
+    "Xiaolei Chen",
+    "Xiangkun Yang"
   ],
@@ -58,8 +63,8 @@ "license": "MIT",
     "classnames": "^2.2.3",
-    "lodash.throttle": "^4.1.1",
-    "redux": "^3.6.0"
+    "lodash.throttle": "^4.1.1"
   },
   "peerDependencies": {
     "react": "^15.0.0",
-    "react-dom": "^15.0.0"
+    "react-dom": "^15.0.0",
+    "redux": "^3.0.0"
   },
@@ -107,2 +112,3 @@ "devDependencies": {
     "reactstrap": "^3.6.0",
+    "redux": "^3.6.0",
     "sass-loader": "^4.0.2",
@@ -109,0 +115,0 @@ "sinon": "^1.17.6",

README.md

@@ -11,3 +11,3 @@
 ```sh
-npm install --save video-react react react-dom
+npm install --save video-react react react-dom redux
 ```
@@ -25,3 +25,3 @@
 ```html
-<link rel="stylesheet" href="/your-css-path/video-react.css" />
+<link rel="stylesheet" href="https://video-react.github.io/assets/video-react.css" />
 ```
@@ -28,0 +28,0 @@

No alert changes

Improved metrics

Total package byte prevSize

1270391

increased by1.02%

Lines of code

10678

increased by1.45%

Worsened metrics

Dev dependency count

48

increased by2.13%

Dependency changes

• - Removedredux@^3.6.0