react-vimeo - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

lib/umd/ReactVimeo.js

 /*
  * React-Vimeo - React component to load video from Vimeo
- * @version v0.0.1
+ * @version v0.0.2
  * @link https://github.com/freecodecamp/react-vimeo
@@ -77,2 +77,6 @@ * @license MIT
 
+	var _keymirror = __webpack_require__(8);
+
+	var _keymirror2 = _interopRequireDefault(_keymirror);
+
 	var _debug = __webpack_require__(2);
@@ -93,3 +97,26 @@
 	var debug = (0, _debug2['default'])('vimeo:player');
+	var noop = function noop() {};
+	var playerEvents = (0, _keymirror2['default'])({
+	  cuechange: null,
+	  finish: null,
+	  loadProgress: null,
+	  pause: null,
+	  play: null,
+	  playProgress: null,
+	  seek: null
+	});
 
+	function capitalize(str) {
+	  return str.charAt(0).toUpperCase() + str.substring(1);
+	}
+
+	function getFuncForEvent(event, props) {
+	  return props['on' + capitalize(event)];
+	}
+
+	function post(method, value, player, playerOrigin) {
+	  player.contentWindow.postMessage({ method: method, value: value }, playerOrigin);
+	  return player;
+	}
+
 	exports['default'] = _react2['default'].createClass({
@@ -101,3 +128,11 @@ displayName: 'Vimeo',
 	    loading: _react.PropTypes.element,
+	    onCuechange: _react.PropTypes.func,
 	    onError: _react.PropTypes.func,
+	    onFinish: _react.PropTypes.func,
+	    onLoadProgress: _react.PropTypes.func,
+	    onPause: _react.PropTypes.func,
+	    onPlay: _react.PropTypes.func,
+	    onPlayProgress: _react.PropTypes.func,
+	    onReady: _react.PropTypes.func,
+	    onSeek: _react.PropTypes.func,
 	    playButton: _react.PropTypes.node,
@@ -108,5 +143,9 @@ videoId: _react.PropTypes.string.isRequired
 	  getDefaultProps: function getDefaultProps() {
-	    return {
-	      className: 'vimeo'
-	    };
+	    var defaults = Object.keys(playerEvents).concat(['ready']).reduce(function (defaults, event) {
+	      defaults['on' + capitalize(event)] = noop;
+	      return defaults;
+	    }, {});
+
+	    defaults.className = 'vimeo';
+	    return defaults;
 	  },
@@ -116,5 +155,6 @@
 	    return {
-	      thumb: null,
 	      imageLoaded: false,
-	      showingVideo: false
+	      playerOrigin: '*',
+	      showingVideo: false,
+	      thumb: null
 	    };
@@ -124,3 +164,3 @@ },
 	  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
-	    if (nextProps.className !== this.props.className || nextProps.videoId !== this.props.videoId) {
+	    if (nextProps.videoId !== this.props.videoId) {
 	      this.setState({
@@ -142,2 +182,51 @@ thumb: null,
 
+	  componentWillUnmount: function componentWillUnmount() {
+	    var removeEventListener = typeof window !== 'undefined' ? window.removeEventListener.bind(window) : noop;
+
+	    removeEventListener('message', this.onMessage);
+	  },
+
+	  addMessageListener: function addMessageListener() {
+	    var addEventListener = typeof window !== 'undefined' ? window.addEventListener.bind(window) : noop;
+
+	    addEventListener('message', this.onMessage);
+	  },
+
+	  onMessage: function onMessage(e) {
+	    var onReady = this.props.onReady;
+	    var playerOrigin = this.state.playerOrigin;
+
+	    if (playerOrigin === '*') {
+	      this.setState({
+	        playerOrigin: e.origin
+	      });
+	    }
+
+	    // Handle messages from the vimeo player only
+	    if (!/^https?:\/\/player.vimeo.com/.test(e.origin)) {
+	      return false;
+	    }
+
+	    var dats = JSON.parse(e.data);
+
+	    if (dats.event === 'ready') {
+	      var player = _react2['default'].findDOMNode(this.refs.player);
+	      debug('player ready');
+	      this.onReady(player, playerOrigin === '*' ? e.origin : playerOrigin);
+	      return onReady(dats);
+	    }
+
+	    var potentialFunc = getFuncForEvent(dats.event, this.props);
+
+	    if (typeof potentialFunc === 'function') {
+	      potentialFunc(dats);
+	    }
+	  },
+
+	  onReady: function onReady(player, playerOrigin) {
+	    Object.keys(playerEvents).forEach(function (event) {
+	      post('addEventListener', event, player, playerOrigin);
+	    });
+	  },
+
 	  playVideo: function playVideo(e) {
@@ -187,3 +276,5 @@ e.preventDefault();
 	      'div',
-	      { className: 'vimeo-image', style: style },
+	      {
+	        className: 'vimeo-image',
+	        style: style },
 	      _react2['default'].createElement(_PlayButton2['default'], { onClick: this.playVideo })
@@ -198,2 +289,4 @@ );
 
+	    this.addMessageListener();
+
 	    var embedVideoStyle = {
@@ -207,4 +300,9 @@ display: this.state.showingVideo ? 'block' : 'none',
 	      'div',
-	      { className: 'vimeo-embed', style: embedVideoStyle },
-	      _react2['default'].createElement('iframe', { frameBorder: '0', src: this.getIframeUrl() })
+	      {
+	        className: 'vimeo-embed',
+	        style: embedVideoStyle },
+	      _react2['default'].createElement('iframe', {
+	        frameBorder: '0',
+	        ref: 'player',
+	        src: this.getIframeUrl() })
 	    );
@@ -894,2 +992,61 @@ },
 
+/***/ },
+/* 8 */
+/***/ function(module, exports) {
+
+	/**
+	 * Copyright 2013-2014 Facebook, Inc.
+	 *
+	 * Licensed under the Apache License, Version 2.0 (the "License");
+	 * you may not use this file except in compliance with the License.
+	 * You may obtain a copy of the License at
+	 *
+	 * http://www.apache.org/licenses/LICENSE-2.0
+	 *
+	 * Unless required by applicable law or agreed to in writing, software
+	 * distributed under the License is distributed on an "AS IS" BASIS,
+	 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+	 * See the License for the specific language governing permissions and
+	 * limitations under the License.
+	 *
+	 */
+
+	"use strict";
+
+	/**
+	 * Constructs an enumeration with keys equal to their value.
+	 *
+	 * For example:
+	 *
+	 *   var COLORS = keyMirror({blue: null, red: null});
+	 *   var myColor = COLORS.blue;
+	 *   var isColorValid = !!COLORS[myColor];
+	 *
+	 * The last line could not be performed if the values of the generated enum were
+	 * not equal to their keys.
+	 *
+	 *   Input:  {key1: val1, key2: val2}
+	 *   Output: {key1: key1, key2: key2}
+	 *
+	 * @param {object} obj
+	 * @return {object}
+	 */
+	var keyMirror = function(obj) {
+	  var ret = {};
+	  var key;
+	  if (!(obj instanceof Object && !Array.isArray(obj))) {
+	    throw new Error('keyMirror(...): Argument must be an object.');
+	  }
+	  for (key in obj) {
+	    if (!obj.hasOwnProperty(key)) {
+	      continue;
+	    }
+	    ret[key] = key;
+	  }
+	  return ret;
+	};
+
+	module.exports = keyMirror;
+
+
 /***/ }
@@ -896,0 +1053,0 @@ /******/ ])

lib/umd/ReactVimeo.min.js

 /*
  * React-Vimeo - React component to load video from Vimeo
- * @version v0.0.1
+ * @version v0.0.2
  * @link https://github.com/freecodecamp/react-vimeo
@@ -8,2 +8,2 @@ * @license MIT
 */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactVimeo=t(require("react")):e.ReactVimeo=t(e.React)}(this,function(e){return function(e){function t(o){if(r[o])return r[o].exports;var n=r[o]={exports:{},id:o,loaded:!1};return e[o].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var n=r(1),a=o(n),s=r(2),i=o(s),c=r(3),u=o(c),l=r(4),d=o(l),f=r(5),p=i["default"]("vimeo:player");t["default"]=a["default"].createClass({displayName:"Vimeo",propTypes:{className:n.PropTypes.string,loading:n.PropTypes.element,onError:n.PropTypes.func,playButton:n.PropTypes.node,videoId:n.PropTypes.string.isRequired},getDefaultProps:function(){return{className:"vimeo"}},getInitialState:function(){return{thumb:null,imageLoaded:!1,showingVideo:!1}},componentWillReceiveProps:function(e){(e.className!==this.props.className||e.videoId!==this.props.videoId)&&this.setState({thumb:null,imageLoaded:!1,showingVideo:!1})},componentDidMount:function(){this.fetchVimeoData()},componentDidUpdate:function(){this.fetchVimeoData()},playVideo:function(e){e.preventDefault(),this.setState({showingVideo:!0})},getIframeUrl:function(){return"//player.vimeo.com/video/"+this.props.videoId+"?autoplay=1"},fetchVimeoData:function(){var e=this;if(!this.state.imageLoaded){var t=this.props.videoId;f.get({url:"//vimeo.com/api/v2/video/"+t+".json",onSuccess:function(t){p("ajax response",t),e.setState({thumb:t[0].thumbnail_large,imageLoaded:!0})},onError:this.props.onError||function(){}})}},renderImage:function(){if(!this.state.showingVideo&&this.state.imageLoaded){var e={backgroundImage:"url("+this.state.thumb+")",display:this.state.showingVideo?"none":"block",height:"100%",width:"100%"};return a["default"].createElement("div",{className:"vimeo-image",style:e},a["default"].createElement(u["default"],{onClick:this.playVideo}))}},renderIframe:function(){if(this.state.showingVideo){var e={display:this.state.showingVideo?"block":"none",height:"100%",width:"100%"};return a["default"].createElement("div",{className:"vimeo-embed",style:e},a["default"].createElement("iframe",{frameBorder:"0",src:this.getIframeUrl()}))}},renderLoading:function(e,t){return e?void 0:t?t:a["default"].createElement(d["default"],null)},render:function(){return a["default"].createElement("div",{className:this.props.className},this.renderLoading(this.state.imageLoaded,this.props.loading),this.renderImage(),this.renderIframe())}}),e.exports=t["default"]},function(t,r){t.exports=e},function(e,t,r){function o(){return"WebkitAppearance"in document.documentElement.style||window.console&&(console.firebug||console.exception&&console.table)||navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/)&&parseInt(RegExp.$1,10)>=31}function n(){var e=arguments,r=this.useColors;if(e[0]=(r?"%c":"")+this.namespace+(r?" %c":" ")+e[0]+(r?"%c ":" ")+"+"+t.humanize(this.diff),!r)return e;var o="color: "+this.color;e=[e[0],o,"color: inherit"].concat(Array.prototype.slice.call(e,1));var n=0,a=0;return e[0].replace(/%[a-z%]/g,function(e){"%%"!==e&&(n++,"%c"===e&&(a=n))}),e.splice(a,0,o),e}function a(){return"object"==typeof console&&console.log&&Function.prototype.apply.call(console.log,console,arguments)}function s(e){try{null==e?t.storage.removeItem("debug"):t.storage.debug=e}catch(r){}}function i(){var e;try{e=t.storage.debug}catch(r){}return e}function c(){try{return window.localStorage}catch(e){}}t=e.exports=r(6),t.log=a,t.formatArgs=n,t.save=s,t.load=i,t.useColors=o,t.storage="undefined"!=typeof chrome&&"undefined"!=typeof chrome.storage?chrome.storage.local:c(),t.colors=["lightseagreen","forestgreen","goldenrod","dodgerblue","darkorchid","crimson"],t.formatters.j=function(e){return JSON.stringify(e)},t.enable(i())},function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var n=r(1),a=o(n);t["default"]=a["default"].createClass({displayName:"PlayButton",propTypes:{onClick:a["default"].PropTypes.func},render:function(){return a["default"].createElement("button",{className:"vimeo-play-button",onClick:this.props.onClick,type:"button"},a["default"].createElement("svg",{version:"1.1",viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg"},a["default"].createElement("path",{d:"M79.674,53.719c2.59-2.046,2.59-5.392,0-7.437L22.566,1.053C19.977-0.993,18,0.035,18,3.335v93.331c0,3.3,1.977,4.326,4.566,2.281L79.674,53.719z"})))}}),e.exports=t["default"]},function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var n=r(1),a=o(n);t["default"]=a["default"].createClass({displayName:"Spinner",render:function(){return a["default"].createElement("div",{className:"vimeo-loading"},a["default"].createElement("svg",{height:"32",viewBox:"0 0 32 32",width:"32",xmlns:"http://www.w3.org/2000/svg"},a["default"].createElement("path",{d:"M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4",opacity:".25"}),a["default"].createElement("path",{d:"M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z"})))}}),e.exports=t["default"]},function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function n(e){function t(){a(JSON.parse(u.responseText))}function r(){return 4===u.readyState&&200===u.status?a(JSON.parse(u.responseText)):void 0}function o(e){return c("error occured fetching video data",e),s(i)}var n=e.url,a=e.onSuccess,s=e.onError,u=void 0;try{u=new XMLHttpRequest}catch(l){u=new XDomainRequest}return u.onreadystatechange=r,u.onload=t,u.onerror=o,u.open("GET",n,!0),u.send(),u.abort.bind(u)}Object.defineProperty(t,"__esModule",{value:!0}),t.get=n;var a=r(2),s=o(a),i={error:"Sorry, an error occurred on the server"},c=s["default"]("vimeo:ajax")},function(e,t,r){function o(){return t.colors[l++%t.colors.length]}function n(e){function r(){}function n(){var e=n,r=+new Date,a=r-(u||r);e.diff=a,e.prev=u,e.curr=r,u=r,null==e.useColors&&(e.useColors=t.useColors()),null==e.color&&e.useColors&&(e.color=o());var s=Array.prototype.slice.call(arguments);s[0]=t.coerce(s[0]),"string"!=typeof s[0]&&(s=["%o"].concat(s));var i=0;s[0]=s[0].replace(/%([a-z%])/g,function(r,o){if("%%"===r)return r;i++;var n=t.formatters[o];if("function"==typeof n){var a=s[i];r=n.call(e,a),s.splice(i,1),i--}return r}),"function"==typeof t.formatArgs&&(s=t.formatArgs.apply(e,s));var c=n.log||t.log||console.log.bind(console);c.apply(e,s)}r.enabled=!1,n.enabled=!0;var a=t.enabled(e)?n:r;return a.namespace=e,a}function a(e){t.save(e);for(var r=(e||"").split(/[\s,]+/),o=r.length,n=0;o>n;n++)r[n]&&(e=r[n].replace(/\*/g,".*?"),"-"===e[0]?t.skips.push(new RegExp("^"+e.substr(1)+"$")):t.names.push(new RegExp("^"+e+"$")))}function s(){t.enable("")}function i(e){var r,o;for(r=0,o=t.skips.length;o>r;r++)if(t.skips[r].test(e))return!1;for(r=0,o=t.names.length;o>r;r++)if(t.names[r].test(e))return!0;return!1}function c(e){return e instanceof Error?e.stack||e.message:e}t=e.exports=n,t.coerce=c,t.disable=s,t.enable=a,t.enabled=i,t.humanize=r(7),t.names=[],t.skips=[],t.formatters={};var u,l=0},function(e,t){function r(e){if(e=""+e,!(e.length>1e4)){var t=/^((?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|years?|yrs?|y)?$/i.exec(e);if(t){var r=parseFloat(t[1]),o=(t[2]||"ms").toLowerCase();switch(o){case"years":case"year":case"yrs":case"yr":case"y":return r*l;case"days":case"day":case"d":return r*u;case"hours":case"hour":case"hrs":case"hr":case"h":return r*c;case"minutes":case"minute":case"mins":case"min":case"m":return r*i;case"seconds":case"second":case"secs":case"sec":case"s":return r*s;case"milliseconds":case"millisecond":case"msecs":case"msec":case"ms":return r}}}}function o(e){return e>=u?Math.round(e/u)+"d":e>=c?Math.round(e/c)+"h":e>=i?Math.round(e/i)+"m":e>=s?Math.round(e/s)+"s":e+"ms"}function n(e){return a(e,u,"day")||a(e,c,"hour")||a(e,i,"minute")||a(e,s,"second")||e+" ms"}function a(e,t,r){return t>e?void 0:1.5*t>e?Math.floor(e/t)+" "+r:Math.ceil(e/t)+" "+r+"s"}var s=1e3,i=60*s,c=60*i,u=24*c,l=365.25*u;e.exports=function(e,t){return t=t||{},"string"==typeof e?r(e):t["long"]?n(e):o(e)}}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactVimeo=t(require("react")):e.ReactVimeo=t(e.React)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e){return e.charAt(0).toUpperCase()+e.substring(1)}function s(e,t){return t["on"+o(e)]}function a(e,t,n,r){return n.contentWindow.postMessage({method:e,value:t},r),n}Object.defineProperty(t,"__esModule",{value:!0});var i=n(1),c=r(i),u=n(8),l=r(u),d=n(2),f=r(d),p=n(3),m=r(p),h=n(4),g=r(h),y=n(5),v=f["default"]("vimeo:player"),w=function(){},b=l["default"]({cuechange:null,finish:null,loadProgress:null,pause:null,play:null,playProgress:null,seek:null});t["default"]=c["default"].createClass({displayName:"Vimeo",propTypes:{className:i.PropTypes.string,loading:i.PropTypes.element,onCuechange:i.PropTypes.func,onError:i.PropTypes.func,onFinish:i.PropTypes.func,onLoadProgress:i.PropTypes.func,onPause:i.PropTypes.func,onPlay:i.PropTypes.func,onPlayProgress:i.PropTypes.func,onReady:i.PropTypes.func,onSeek:i.PropTypes.func,playButton:i.PropTypes.node,videoId:i.PropTypes.string.isRequired},getDefaultProps:function(){var e=Object.keys(b).concat(["ready"]).reduce(function(e,t){return e["on"+o(t)]=w,e},{});return e.className="vimeo",e},getInitialState:function(){return{imageLoaded:!1,playerOrigin:"*",showingVideo:!1,thumb:null}},componentWillReceiveProps:function(e){e.videoId!==this.props.videoId&&this.setState({thumb:null,imageLoaded:!1,showingVideo:!1})},componentDidMount:function(){this.fetchVimeoData()},componentDidUpdate:function(){this.fetchVimeoData()},componentWillUnmount:function(){var e="undefined"!=typeof window?window.removeEventListener.bind(window):w;e("message",this.onMessage)},addMessageListener:function(){var e="undefined"!=typeof window?window.addEventListener.bind(window):w;e("message",this.onMessage)},onMessage:function(e){var t=this.props.onReady,n=this.state.playerOrigin;if("*"===n&&this.setState({playerOrigin:e.origin}),!/^https?:\/\/player.vimeo.com/.test(e.origin))return!1;var r=JSON.parse(e.data);if("ready"===r.event){var o=c["default"].findDOMNode(this.refs.player);return v("player ready"),this.onReady(o,"*"===n?e.origin:n),t(r)}var a=s(r.event,this.props);"function"==typeof a&&a(r)},onReady:function(e,t){Object.keys(b).forEach(function(n){a("addEventListener",n,e,t)})},playVideo:function(e){e.preventDefault(),this.setState({showingVideo:!0})},getIframeUrl:function(){return"//player.vimeo.com/video/"+this.props.videoId+"?autoplay=1"},fetchVimeoData:function(){var e=this;if(!this.state.imageLoaded){var t=this.props.videoId;y.get({url:"//vimeo.com/api/v2/video/"+t+".json",onSuccess:function(t){v("ajax response",t),e.setState({thumb:t[0].thumbnail_large,imageLoaded:!0})},onError:this.props.onError||function(){}})}},renderImage:function(){if(!this.state.showingVideo&&this.state.imageLoaded){var e={backgroundImage:"url("+this.state.thumb+")",display:this.state.showingVideo?"none":"block",height:"100%",width:"100%"};return c["default"].createElement("div",{className:"vimeo-image",style:e},c["default"].createElement(m["default"],{onClick:this.playVideo}))}},renderIframe:function(){if(this.state.showingVideo){this.addMessageListener();var e={display:this.state.showingVideo?"block":"none",height:"100%",width:"100%"};return c["default"].createElement("div",{className:"vimeo-embed",style:e},c["default"].createElement("iframe",{frameBorder:"0",ref:"player",src:this.getIframeUrl()}))}},renderLoading:function(e,t){return e?void 0:t?t:c["default"].createElement(g["default"],null)},render:function(){return c["default"].createElement("div",{className:this.props.className},this.renderLoading(this.state.imageLoaded,this.props.loading),this.renderImage(),this.renderIframe())}}),e.exports=t["default"]},function(t,n){t.exports=e},function(e,t,n){function r(){return"WebkitAppearance"in document.documentElement.style||window.console&&(console.firebug||console.exception&&console.table)||navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/)&&parseInt(RegExp.$1,10)>=31}function o(){var e=arguments,n=this.useColors;if(e[0]=(n?"%c":"")+this.namespace+(n?" %c":" ")+e[0]+(n?"%c ":" ")+"+"+t.humanize(this.diff),!n)return e;var r="color: "+this.color;e=[e[0],r,"color: inherit"].concat(Array.prototype.slice.call(e,1));var o=0,s=0;return e[0].replace(/%[a-z%]/g,function(e){"%%"!==e&&(o++,"%c"===e&&(s=o))}),e.splice(s,0,r),e}function s(){return"object"==typeof console&&console.log&&Function.prototype.apply.call(console.log,console,arguments)}function a(e){try{null==e?t.storage.removeItem("debug"):t.storage.debug=e}catch(n){}}function i(){var e;try{e=t.storage.debug}catch(n){}return e}function c(){try{return window.localStorage}catch(e){}}t=e.exports=n(6),t.log=s,t.formatArgs=o,t.save=a,t.load=i,t.useColors=r,t.storage="undefined"!=typeof chrome&&"undefined"!=typeof chrome.storage?chrome.storage.local:c(),t.colors=["lightseagreen","forestgreen","goldenrod","dodgerblue","darkorchid","crimson"],t.formatters.j=function(e){return JSON.stringify(e)},t.enable(i())},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),s=r(o);t["default"]=s["default"].createClass({displayName:"PlayButton",propTypes:{onClick:s["default"].PropTypes.func},render:function(){return s["default"].createElement("button",{className:"vimeo-play-button",onClick:this.props.onClick,type:"button"},s["default"].createElement("svg",{version:"1.1",viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg"},s["default"].createElement("path",{d:"M79.674,53.719c2.59-2.046,2.59-5.392,0-7.437L22.566,1.053C19.977-0.993,18,0.035,18,3.335v93.331c0,3.3,1.977,4.326,4.566,2.281L79.674,53.719z"})))}}),e.exports=t["default"]},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),s=r(o);t["default"]=s["default"].createClass({displayName:"Spinner",render:function(){return s["default"].createElement("div",{className:"vimeo-loading"},s["default"].createElement("svg",{height:"32",viewBox:"0 0 32 32",width:"32",xmlns:"http://www.w3.org/2000/svg"},s["default"].createElement("path",{d:"M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4",opacity:".25"}),s["default"].createElement("path",{d:"M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z"})))}}),e.exports=t["default"]},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e){function t(){s(JSON.parse(u.responseText))}function n(){return 4===u.readyState&&200===u.status?s(JSON.parse(u.responseText)):void 0}function r(e){return c("error occured fetching video data",e),a(i)}var o=e.url,s=e.onSuccess,a=e.onError,u=void 0;try{u=new XMLHttpRequest}catch(l){u=new XDomainRequest}return u.onreadystatechange=n,u.onload=t,u.onerror=r,u.open("GET",o,!0),u.send(),u.abort.bind(u)}Object.defineProperty(t,"__esModule",{value:!0}),t.get=o;var s=n(2),a=r(s),i={error:"Sorry, an error occurred on the server"},c=a["default"]("vimeo:ajax")},function(e,t,n){function r(){return t.colors[l++%t.colors.length]}function o(e){function n(){}function o(){var e=o,n=+new Date,s=n-(u||n);e.diff=s,e.prev=u,e.curr=n,u=n,null==e.useColors&&(e.useColors=t.useColors()),null==e.color&&e.useColors&&(e.color=r());var a=Array.prototype.slice.call(arguments);a[0]=t.coerce(a[0]),"string"!=typeof a[0]&&(a=["%o"].concat(a));var i=0;a[0]=a[0].replace(/%([a-z%])/g,function(n,r){if("%%"===n)return n;i++;var o=t.formatters[r];if("function"==typeof o){var s=a[i];n=o.call(e,s),a.splice(i,1),i--}return n}),"function"==typeof t.formatArgs&&(a=t.formatArgs.apply(e,a));var c=o.log||t.log||console.log.bind(console);c.apply(e,a)}n.enabled=!1,o.enabled=!0;var s=t.enabled(e)?o:n;return s.namespace=e,s}function s(e){t.save(e);for(var n=(e||"").split(/[\s,]+/),r=n.length,o=0;r>o;o++)n[o]&&(e=n[o].replace(/\*/g,".*?"),"-"===e[0]?t.skips.push(new RegExp("^"+e.substr(1)+"$")):t.names.push(new RegExp("^"+e+"$")))}function a(){t.enable("")}function i(e){var n,r;for(n=0,r=t.skips.length;r>n;n++)if(t.skips[n].test(e))return!1;for(n=0,r=t.names.length;r>n;n++)if(t.names[n].test(e))return!0;return!1}function c(e){return e instanceof Error?e.stack||e.message:e}t=e.exports=o,t.coerce=c,t.disable=a,t.enable=s,t.enabled=i,t.humanize=n(7),t.names=[],t.skips=[],t.formatters={};var u,l=0},function(e,t){function n(e){if(e=""+e,!(e.length>1e4)){var t=/^((?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|years?|yrs?|y)?$/i.exec(e);if(t){var n=parseFloat(t[1]),r=(t[2]||"ms").toLowerCase();switch(r){case"years":case"year":case"yrs":case"yr":case"y":return n*l;case"days":case"day":case"d":return n*u;case"hours":case"hour":case"hrs":case"hr":case"h":return n*c;case"minutes":case"minute":case"mins":case"min":case"m":return n*i;case"seconds":case"second":case"secs":case"sec":case"s":return n*a;case"milliseconds":case"millisecond":case"msecs":case"msec":case"ms":return n}}}}function r(e){return e>=u?Math.round(e/u)+"d":e>=c?Math.round(e/c)+"h":e>=i?Math.round(e/i)+"m":e>=a?Math.round(e/a)+"s":e+"ms"}function o(e){return s(e,u,"day")||s(e,c,"hour")||s(e,i,"minute")||s(e,a,"second")||e+" ms"}function s(e,t,n){return t>e?void 0:1.5*t>e?Math.floor(e/t)+" "+n:Math.ceil(e/t)+" "+n+"s"}var a=1e3,i=60*a,c=60*i,u=24*c,l=365.25*u;e.exports=function(e,t){return t=t||{},"string"==typeof e?n(e):t["long"]?o(e):r(e)}},function(e,t){"use strict";var n=function(e){var t,n={};if(!(e instanceof Object)||Array.isArray(e))throw new Error("keyMirror(...): Argument must be an object.");for(t in e)e.hasOwnProperty(t)&&(n[t]=t);return n};e.exports=n}])});

lib/Vimeo.js

@@ -13,2 +13,6 @@ 'use strict';
 
+var _keymirror = require('keymirror');
+
+var _keymirror2 = _interopRequireDefault(_keymirror);
+
 var _debug = require('debug');
@@ -29,3 +33,26 @@
 var debug = (0, _debug2['default'])('vimeo:player');
+var noop = function noop() {};
+var playerEvents = (0, _keymirror2['default'])({
+  cuechange: null,
+  finish: null,
+  loadProgress: null,
+  pause: null,
+  play: null,
+  playProgress: null,
+  seek: null
+});
 
+function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.substring(1);
+}
+
+function getFuncForEvent(event, props) {
+  return props['on' + capitalize(event)];
+}
+
+function post(method, value, player, playerOrigin) {
+  player.contentWindow.postMessage({ method: method, value: value }, playerOrigin);
+  return player;
+}
+
 exports['default'] = _react2['default'].createClass({
@@ -37,3 +64,11 @@ displayName: 'Vimeo',
     loading: _react.PropTypes.element,
+    onCuechange: _react.PropTypes.func,
     onError: _react.PropTypes.func,
+    onFinish: _react.PropTypes.func,
+    onLoadProgress: _react.PropTypes.func,
+    onPause: _react.PropTypes.func,
+    onPlay: _react.PropTypes.func,
+    onPlayProgress: _react.PropTypes.func,
+    onReady: _react.PropTypes.func,
+    onSeek: _react.PropTypes.func,
     playButton: _react.PropTypes.node,
@@ -44,5 +79,9 @@ videoId: _react.PropTypes.string.isRequired
   getDefaultProps: function getDefaultProps() {
-    return {
-      className: 'vimeo'
-    };
+    var defaults = Object.keys(playerEvents).concat(['ready']).reduce(function (defaults, event) {
+      defaults['on' + capitalize(event)] = noop;
+      return defaults;
+    }, {});
+
+    defaults.className = 'vimeo';
+    return defaults;
   },
@@ -52,5 +91,6 @@
     return {
-      thumb: null,
       imageLoaded: false,
-      showingVideo: false
+      playerOrigin: '*',
+      showingVideo: false,
+      thumb: null
     };
@@ -60,3 +100,3 @@ },
   componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
-    if (nextProps.className !== this.props.className || nextProps.videoId !== this.props.videoId) {
+    if (nextProps.videoId !== this.props.videoId) {
       this.setState({
@@ -78,2 +118,51 @@ thumb: null,
 
+  componentWillUnmount: function componentWillUnmount() {
+    var removeEventListener = typeof window !== 'undefined' ? window.removeEventListener.bind(window) : noop;
+
+    removeEventListener('message', this.onMessage);
+  },
+
+  addMessageListener: function addMessageListener() {
+    var addEventListener = typeof window !== 'undefined' ? window.addEventListener.bind(window) : noop;
+
+    addEventListener('message', this.onMessage);
+  },
+
+  onMessage: function onMessage(e) {
+    var onReady = this.props.onReady;
+    var playerOrigin = this.state.playerOrigin;
+
+    if (playerOrigin === '*') {
+      this.setState({
+        playerOrigin: e.origin
+      });
+    }
+
+    // Handle messages from the vimeo player only
+    if (!/^https?:\/\/player.vimeo.com/.test(e.origin)) {
+      return false;
+    }
+
+    var dats = JSON.parse(e.data);
+
+    if (dats.event === 'ready') {
+      var player = _react2['default'].findDOMNode(this.refs.player);
+      debug('player ready');
+      this.onReady(player, playerOrigin === '*' ? e.origin : playerOrigin);
+      return onReady(dats);
+    }
+
+    var potentialFunc = getFuncForEvent(dats.event, this.props);
+
+    if (typeof potentialFunc === 'function') {
+      potentialFunc(dats);
+    }
+  },
+
+  onReady: function onReady(player, playerOrigin) {
+    Object.keys(playerEvents).forEach(function (event) {
+      post('addEventListener', event, player, playerOrigin);
+    });
+  },
+
   playVideo: function playVideo(e) {
@@ -123,3 +212,5 @@ e.preventDefault();
       'div',
-      { className: 'vimeo-image', style: style },
+      {
+        className: 'vimeo-image',
+        style: style },
       _react2['default'].createElement(_PlayButton2['default'], { onClick: this.playVideo })
@@ -134,2 +225,4 @@ );
 
+    this.addMessageListener();
+
     var embedVideoStyle = {
@@ -143,4 +236,9 @@ display: this.state.showingVideo ? 'block' : 'none',
       'div',
-      { className: 'vimeo-embed', style: embedVideoStyle },
-      _react2['default'].createElement('iframe', { frameBorder: '0', src: this.getIframeUrl() })
+      {
+        className: 'vimeo-embed',
+        style: embedVideoStyle },
+      _react2['default'].createElement('iframe', {
+        frameBorder: '0',
+        ref: 'player',
+        src: this.getIframeUrl() })
     );
@@ -147,0 +245,0 @@ },

package.json

 {
   "name": "react-vimeo",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "React component to load video from Vimeo",
@@ -51,4 +51,5 @@ "author": {
     "lodash": "^2.4.1",
-    "nib": "^1.0.4",
+    "nib": "^1.1.0",
     "node-libs-browser": "^0.5.2",
+    "stylus": "^0.51.1",
     "webpack": "^1.10.1",
@@ -59,5 +60,4 @@ "yargs": "^1.3.2"
     "debug": "^2.2.0",
-    "nib": "^1.1.0",
-    "stylus": "^0.51.1"
+    "keymirror": "^0.1.1"
   }
 }

src/Vimeo.jsx

 import React, { PropTypes } from 'react';
+import keyMirror from 'keymirror';
 import debugFactory from 'debug';
@@ -10,3 +11,26 @@
 const debug = debugFactory('vimeo:player');
+const noop = () => {};
+const playerEvents = keyMirror({
+  cuechange: null,
+  finish: null,
+  loadProgress: null,
+  pause: null,
+  play: null,
+  playProgress: null,
+  seek: null
+});
 
+function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.substring(1);
+}
+
+function getFuncForEvent(event, props) {
+  return props['on' + capitalize(event)];
+}
+
+function post(method, value, player, playerOrigin) {
+  player.contentWindow.postMessage({ method, value }, playerOrigin);
+  return player;
+}
+
 export default React.createClass({
@@ -18,3 +42,11 @@ displayName: 'Vimeo',
     loading: PropTypes.element,
+    onCuechange: PropTypes.func,
     onError: PropTypes.func,
+    onFinish: PropTypes.func,
+    onLoadProgress: PropTypes.func,
+    onPause: PropTypes.func,
+    onPlay: PropTypes.func,
+    onPlayProgress: PropTypes.func,
+    onReady: PropTypes.func,
+    onSeek: PropTypes.func,
     playButton: PropTypes.node,
@@ -25,5 +57,11 @@ videoId: PropTypes.string.isRequired
   getDefaultProps() {
-    return {
-      className: 'vimeo'
-    };
+    const defaults = Object.keys(playerEvents)
+      .concat(['ready'])
+      .reduce((defaults, event) => {
+        defaults['on' + capitalize(event)] = noop;
+        return defaults;
+      }, {});
+
+    defaults.className = 'vimeo';
+    return defaults;
   },
@@ -33,5 +71,6 @@
     return {
-      thumb: null,
       imageLoaded: false,
-      showingVideo: false
+      playerOrigin: '*',
+      showingVideo: false,
+      thumb: null
     };
@@ -41,6 +80,3 @@ },
   componentWillReceiveProps(nextProps) {
-    if (
-      nextProps.className !== this.props.className ||
-      nextProps.videoId !== this.props.videoId
-    ) {
+    if (nextProps.videoId !== this.props.videoId) {
       this.setState({
@@ -62,2 +98,58 @@ thumb: null,
 
+  componentWillUnmount() {
+    const removeEventListener = typeof window !== 'undefined' ?
+      ::window.removeEventListener :
+      noop;
+
+    removeEventListener('message', this.onMessage);
+  },
+
+  addMessageListener() {
+    const addEventListener = typeof window !== 'undefined' ?
+      ::window.addEventListener :
+      noop;
+
+    addEventListener('message', this.onMessage);
+  },
+
+  onMessage(e) {
+    const { onReady } = this.props;
+    const { playerOrigin } = this.state;
+
+    if (playerOrigin === '*') {
+      this.setState({
+        playerOrigin: e.origin
+      });
+    }
+
+    // Handle messages from the vimeo player only
+    if (!(/^https?:\/\/player.vimeo.com/).test(e.origin)) {
+      return false;
+    }
+
+    const dats = JSON.parse(e.data);
+
+    if (dats.event === 'ready') {
+      const player = React.findDOMNode(this.refs.player);
+      debug('player ready');
+      this.onReady(
+        player,
+        playerOrigin === '*' ? e.origin : playerOrigin
+      );
+      return onReady(dats);
+    }
+
+    const potentialFunc = getFuncForEvent(dats.event, this.props);
+
+    if (typeof potentialFunc === 'function') {
+      potentialFunc(dats);
+    }
+  },
+
+  onReady(player, playerOrigin) {
+    Object.keys(playerEvents).forEach(event => {
+      post('addEventListener', event, player, playerOrigin);
+    });
+  },
+
   playVideo(e) {
@@ -104,3 +196,5 @@ e.preventDefault();
     return (
-      <div className='vimeo-image' style={ style }>
+      <div
+        className='vimeo-image'
+        style={ style }>
         <PlayButton onClick={ this.playVideo } />
@@ -116,2 +210,4 @@ </div>
 
+    this.addMessageListener();
+
     const embedVideoStyle = {
@@ -124,4 +220,9 @@ display: this.state.showingVideo ? 'block' : 'none',
     return (
-      <div className='vimeo-embed' style={ embedVideoStyle }>
-        <iframe frameBorder='0' src={ this.getIframeUrl() }></iframe>
+      <div
+        className='vimeo-embed'
+        style={ embedVideoStyle }>
+        <iframe
+          frameBorder='0'
+          ref='player'
+          src={ this.getIframeUrl() } />
       </div>
@@ -128,0 +229,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

600394

increased by55.88%

Dependency count

3

decreased by-25%

Lines of code

1604

increased by22.54%

Worsened metrics

Dev dependency count

13

increased by8.33%

Dependency changes

• + Addedkeymirror@^0.1.1

• + Addedkeymirror@0.1.1(transitive)

• - Removednib@^1.1.0

• - Removedstylus@^0.51.1

• - Removedamdefine@1.0.1(transitive)

• - Removedcss-parse@1.7.0(transitive)

• - Removedglob@3.2.11(transitive)

• - Removedinherits@2.0.4(transitive)

• - Removedlru-cache@2.7.3(transitive)

• - Removedminimatch@0.3.0(transitive)

• - Removedmkdirp@0.3.5(transitive)

• - Removednib@1.2.0(transitive)

• - Removedsax@0.5.8(transitive)

• - Removedsigmund@1.0.1(transitive)

• - Removedsource-map@0.1.43(transitive)

• - Removedstylus@0.51.1(transitive)