@u-wave/react-youtube - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

lib/rollup.es.js

@@ -141,2 +141,23 @@ import React from 'react';
       _this.resolvePlayer(event.target);
+    }, _this.onPlayerStateChange = function (event) {
+      var State = YT.PlayerState; // eslint-disable-line no-undef
+      switch (event.data) {
+        case State.CUED:
+          _this.props.onCued(event);
+          break;
+        case State.BUFFERING:
+          _this.props.onBuffering(event);
+          break;
+        case State.PAUSED:
+          _this.props.onPause(event);
+          break;
+        case State.PLAYING:
+          _this.props.onPlaying(event);
+          break;
+        case State.ENDED:
+          _this.props.onEnd(event);
+          break;
+        default:
+        // Nothing
+      }
     }, _this.refContainer = function (container) {
@@ -200,3 +221,4 @@ _this.container = container;
       events: {
-        onReady: this.onPlayerReady
+        onReady: this.onPlayerReady,
+        onStateChange: this.onPlayerStateChange
       }
@@ -271,5 +293,5 @@ };
 
-        Object.keys(eventNames).forEach(function (dmName) {
-          var reactName = eventNames[dmName];
-          player.addEventListener(dmName, function (event) {
+        Object.keys(eventNames).forEach(function (ytName) {
+          var reactName = eventNames[ytName];
+          player.addEventListener(ytName, function (event) {
             if (_this4.props[reactName]) {
@@ -314,3 +336,8 @@ _this4.props[reactName](event);
   showRelatedVideos: true,
-  showInfo: true
+  showInfo: true,
+  onCued: function onCued() {},
+  onBuffering: function onBuffering() {},
+  onPlaying: function onPlaying() {},
+  onPause: function onPause() {},
+  onEnd: function onEnd() {}
 };
@@ -462,5 +489,13 @@ process.env.NODE_ENV !== "production" ? YouTube.propTypes = {
   /**
+   * Sent when the video is cued and ready to play.
+   */
+  onCued: PropTypes.func,
+  /**
+   * Sent when the video is buffering.
+   */
+  onBuffering: PropTypes.func,
+  /**
    * Sent when playback has been started or resumed.
    */
-  onPlay: PropTypes.func,
+  onPlaying: PropTypes.func,
   /**
@@ -467,0 +502,0 @@ * Sent when playback has been paused.

lib/rollup.js

@@ -147,2 +147,23 @@ 'use strict';
       _this.resolvePlayer(event.target);
+    }, _this.onPlayerStateChange = function (event) {
+      var State = YT.PlayerState; // eslint-disable-line no-undef
+      switch (event.data) {
+        case State.CUED:
+          _this.props.onCued(event);
+          break;
+        case State.BUFFERING:
+          _this.props.onBuffering(event);
+          break;
+        case State.PAUSED:
+          _this.props.onPause(event);
+          break;
+        case State.PLAYING:
+          _this.props.onPlaying(event);
+          break;
+        case State.ENDED:
+          _this.props.onEnd(event);
+          break;
+        default:
+        // Nothing
+      }
     }, _this.refContainer = function (container) {
@@ -206,3 +227,4 @@ _this.container = container;
       events: {
-        onReady: this.onPlayerReady
+        onReady: this.onPlayerReady,
+        onStateChange: this.onPlayerStateChange
       }
@@ -277,5 +299,5 @@ };
 
-        Object.keys(eventNames).forEach(function (dmName) {
-          var reactName = eventNames[dmName];
-          player.addEventListener(dmName, function (event) {
+        Object.keys(eventNames).forEach(function (ytName) {
+          var reactName = eventNames[ytName];
+          player.addEventListener(ytName, function (event) {
             if (_this4.props[reactName]) {
@@ -320,3 +342,8 @@ _this4.props[reactName](event);
   showRelatedVideos: true,
-  showInfo: true
+  showInfo: true,
+  onCued: function onCued() {},
+  onBuffering: function onBuffering() {},
+  onPlaying: function onPlaying() {},
+  onPause: function onPause() {},
+  onEnd: function onEnd() {}
 };
@@ -468,5 +495,13 @@ process.env.NODE_ENV !== "production" ? YouTube.propTypes = {
   /**
+   * Sent when the video is cued and ready to play.
+   */
+  onCued: PropTypes.func,
+  /**
+   * Sent when the video is buffering.
+   */
+  onBuffering: PropTypes.func,
+  /**
    * Sent when playback has been started or resumed.
    */
-  onPlay: PropTypes.func,
+  onPlaying: PropTypes.func,
   /**
@@ -473,0 +508,0 @@ * Sent when playback has been paused.

package.json

 {
   "name": "@u-wave/react-youtube",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "YouTube player component for React.",
@@ -5,0 +5,0 @@ "main": "lib/rollup.js",

README.md

@@ -55,5 +55,7 @@ # @u-wave/react-youtube
 | onError | function |  | Sent when the player triggers an error. |
-| onPlay | function |  | Sent when playback has been started or resumed. |
-| onPause | function |  | Sent when playback has been paused. |
-| onEnd | function |  | Sent when playback has stopped. |
+| onCued | function | () => {} | Sent when the video is cued and ready to play. |
+| onBuffering | function | () => {} | Sent when the video is buffering. |
+| onPlaying | function | () => {} | Sent when playback has been started or resumed. |
+| onPause | function | () => {} | Sent when playback has been paused. |
+| onEnd | function | () => {} | Sent when playback has stopped. |
 | onStateChange | function |  |  |
@@ -65,3 +67,4 @@ | onPlaybackRateChange | function |  |  |
 
- - [react-dailymotion][] - A Dailymotion component with a similar API.
+ - [react-dailymotion][] - A Dailymotion component with a similar declarative API.
+ - [@u-wave/react-vimeo][] - A Vimeo component with a similar declarative API.
 
@@ -79,1 +82,2 @@ ## License
 [react-dailymotion]: https://github.com/u-wave/react-dailymotion
+[@u-wave/react-vimeo]: https://github.com/u-wave/react-vimeo

src/index.js

@@ -158,5 +158,13 @@ import React from 'react';
     /**
+     * Sent when the video is cued and ready to play.
+     */
+    onCued: PropTypes.func,
+    /**
+     * Sent when the video is buffering.
+     */
+    onBuffering: PropTypes.func,
+    /**
      * Sent when playback has been started or resumed.
      */
-    onPlay: PropTypes.func,
+    onPlaying: PropTypes.func,
     /**
@@ -188,2 +196,7 @@ * Sent when playback has been paused.
     showInfo: true,
+    onCued: () => {},
+    onBuffering: () => {},
+    onPlaying: () => {},
+    onPause: () => {},
+    onEnd: () => {},
   };
@@ -229,2 +242,25 @@
 
+  onPlayerStateChange = (event) => {
+    const State = YT.PlayerState; // eslint-disable-line no-undef
+    switch (event.data) {
+      case State.CUED:
+        this.props.onCued(event);
+        break;
+      case State.BUFFERING:
+        this.props.onBuffering(event);
+        break;
+      case State.PAUSED:
+        this.props.onPause(event);
+        break;
+      case State.PLAYING:
+        this.props.onPlaying(event);
+        break;
+      case State.ENDED:
+        this.props.onEnd(event);
+        break;
+      default:
+        // Nothing
+    }
+  }
+
   /**
@@ -262,2 +298,3 @@ * @private
         onReady: this.onPlayerReady,
+        onStateChange: this.onPlayerStateChange,
       },
@@ -324,5 +361,5 @@ };
 
-        Object.keys(eventNames).forEach((dmName) => {
-          const reactName = eventNames[dmName];
-          player.addEventListener(dmName, (event) => {
+        Object.keys(eventNames).forEach((ytName) => {
+          const reactName = eventNames[ytName];
+          player.addEventListener(ytName, (event) => {
             if (this.props[reactName]) {
@@ -329,0 +366,0 @@ this.props[reactName](event);

No alert changes

Improved metrics

Total package byte prevSize

134175

increased by2.48%

Lines of code

1502

increased by7.59%

Number of lines in readme file

81

increased by5.19%

No dependency changes