video-react - npm Package Compare versions

Comparing version 0.2.4 to 0.3.1

CHANGELOG.md

@@ -0,1 +1,9 @@
+<a name="0.3.1"></a>
+## [0.3.1](https://github.com/video-react/video-react/compare/0.2.4...v0.3.1) (2016-11-18)
+
+* Added keyboard shortcuts
+* Display bezel icon for some keyboard operations
+* Fixed some issues
+* Remove supports for React v0.14
+
 <a name="0.2.4"></a>
@@ -2,0 +10,0 @@ ## [0.2.4](https://github.com/video-react/video-react/compare/0.2.3...v0.2.4) (2016-11-15)

lib/actions.js

@@ -16,2 +16,3 @@ "use strict";
     this.setState = setState;
+    this.bezelCount = 1;
   }
@@ -39,2 +40,7 @@
     }
+  }, {
+    key: "togglePlay",
+    value: function togglePlay() {
+      this.video.togglePlay();
+    }
 
@@ -82,2 +88,10 @@ // seek video by time
   }, {
+    key: "setBezel",
+    value: function setBezel(status) {
+      this.setState({
+        bezelCount: this.bezelCount++,
+        bezelStatus: status
+      });
+    }
+  }, {
     key: "handleFullscreenChange",
@@ -84,0 +98,0 @@ value: function handleFullscreenChange(isFullscreen) {

lib/components/Player.js

@@ -39,2 +39,10 @@ 'use strict';
 
+var _Bezel = require('./Bezel');
+
+var _Bezel2 = _interopRequireDefault(_Bezel);
+
+var _Shortcut = require('./Shortcut');
+
+var _Shortcut2 = _interopRequireDefault(_Shortcut);
+
 var _ControlBar = require('./control-bar/ControlBar');
@@ -70,3 +78,4 @@
 var defaultProps = {
-  fluid: true
+  fluid: true,
+  aspectRatio: 'auto'
 };
@@ -105,2 +114,5 @@
         hasStarted: false,
+
+        bezelCount: 0,
+        bezelStatus: null,
         error: null
@@ -225,8 +237,14 @@ }
         order: 2.0
+      }, props)), _react2.default.createElement(_Bezel2.default, _extends({
+        key: 'bezel',
+        order: 3.0
       }, props)), _react2.default.createElement(_BigPlayButton2.default, _extends({
         key: 'big-play-button',
-        order: 3.0
+        order: 4.0
       }, props)), _react2.default.createElement(_ControlBar2.default, _extends({
         key: 'control-bar',
-        order: 4.0
+        order: 5.0
+      }, props)), _react2.default.createElement(_Shortcut2.default, _extends({
+        key: 'shortcut',
+        order: 99.0
       }, props))];
@@ -233,0 +251,0 @@ }

lib/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.PlaybackRate = exports.VolumeMenuButton = exports.TimeDivider = exports.DurationDisplay = exports.CurrentTimeDisplay = exports.RemainingTimeDisplay = exports.MouseTimeDisplay = exports.LoadProgressBar = exports.PlayProgressBar = exports.Slider = exports.SeekBar = exports.ProgressControl = exports.FullscreenToggle = exports.ReplayControl = exports.ForwardControl = exports.PlayToggle = exports.ControlBar = exports.PosterImage = exports.LoadingSpinner = exports.BigPlayButton = exports.Source = exports.Video = exports.Player = undefined;
+exports.PlaybackRate = exports.VolumeMenuButton = exports.TimeDivider = exports.DurationDisplay = exports.CurrentTimeDisplay = exports.RemainingTimeDisplay = exports.MouseTimeDisplay = exports.LoadProgressBar = exports.PlayProgressBar = exports.Slider = exports.SeekBar = exports.ProgressControl = exports.FullscreenToggle = exports.ReplayControl = exports.ForwardControl = exports.PlayToggle = exports.ControlBar = exports.Bezel = exports.PosterImage = exports.LoadingSpinner = exports.BigPlayButton = exports.Video = exports.Player = undefined;
 
@@ -33,6 +33,10 @@ var _Player = require('./components/Player');
 
-var _Source = require('./components/Source');
+var _Bezel = require('./components/Bezel');
 
-var _Source2 = _interopRequireDefault(_Source);
+var _Bezel2 = _interopRequireDefault(_Bezel);
 
+var _Shortcut = require('./components/Shortcut');
+
+var _Shortcut2 = _interopRequireDefault(_Shortcut);
+
 var _ControlBar = require('./components/control-bar/ControlBar');
@@ -106,6 +110,6 @@
 exports.Video = _Video2.default;
-exports.Source = _Source2.default;
 exports.BigPlayButton = _BigPlayButton2.default;
 exports.LoadingSpinner = _LoadingSpinner2.default;
 exports.PosterImage = _PosterImage2.default;
+exports.Bezel = _Bezel2.default;
 exports.ControlBar = _ControlBar2.default;
@@ -112,0 +116,0 @@ exports.PlayToggle = _PlayToggle2.default;

package.json

 {
   "name": "video-react",
-  "version": "0.2.4",
+  "version": "0.3.1",
   "description": "Video-React is a web video player built from the ground up for an HTML5 world using React library.",
@@ -58,4 +58,4 @@ "main": "lib/index.js",
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0",
-    "react-dom": "^0.14.0 || ^15.0.0"
+    "react": "^15.0.0",
+    "react-dom": "^15.0.0"
   },
@@ -62,0 +62,0 @@ "devDependencies": {

README.md

@@ -14,2 +14,15 @@
 
+import css in your app or add video-react styles in your page
+```jsx
+import "node_modules/video-react/dist/video-react.css"; // import css
+```
+or
+```scss
+@import "~video-react/styles/scss/video-react"; // or import scss
+```
+or
+```html
+<link rel="stylesheet" href="/your-css-path/video-react.css" />
+```
+
 Import the components you need, example:
@@ -23,3 +36,3 @@
   return (
-    <Player poster="/assets/poster.png">
+    <Player>
       <source src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4" />
@@ -57,4 +70,6 @@ </Player>
 
-## Inspiration
+## Inspiration & Credits
 
-This project is heavily inspired by [video.js](http://www.videojs.com).
+* This project is heavily inspired by [video.js](http://www.videojs.com).
+* The document site is built with [reactstrap](https://github.com/reactstrap/reactstrap).
+

No alert changes

Improved metrics

Total package byte prevSize

1040888

increased by7.99%

Number of package files

77

increased by4.05%

Lines of code

8631

increased by8.43%

Number of lines in readme file

73

increased by28.07%

No dependency changes