react-video/dist/react-video.min.js

React component to load video from Vimeo or Youtube across any device

/*
 * React Video - React component to load video from Vimeo or Youtube across any device
 * @version v1.5.3
 * @link https://github.com/pedronauck/react-video
 * @license MIT
 * @author Pedro Nauck (https://github.com/pedronauck)
*/
!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.ReactVideo=t(require("react")):e.ReactVideo=t(e.React)}(this,function(e){return function(e){function t(r){if(o[r])return o[r].exports;var i=o[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){var r=o(1),i=(o(2),o(3)),n=o(4),s=o(5);e.exports=r.createClass({displayName:"Video",propTypes:{from:r.PropTypes.oneOf(["youtube","vimeo"]),videoId:r.PropTypes.string.isRequired,onError:r.PropTypes.func},getDefaultProps:function(){return{className:"video"}},getInitialState:function(){return{thumb:null,imageLoaded:!1,showingVideo:!1}},isYoutube:function(){return"youtube"===this.props.from||isNaN(this.props.videoId)},isVimeo:function(){return"vimeo"===this.props.from||!isNaN(this.props.videoId)},componentWillReceiveProps:function(e){(e.className!==this.props.className||e.from!==this.props.from||e.videoId!==this.props.videoId)&&this.setState({thumb:null,imageLoaded:!1,showingVideo:!1})},componentDidMount:function(){this.state.imageLoaded||(this.isYoutube()&&this.fetchYoutubeData(),this.isVimeo()&&this.fetchVimeoData())},componentDidUpdate:function(){this.state.imageLoaded||(this.isYoutube()&&this.fetchYoutubeData(),this.isVimeo()&&this.fetchVimeoData())},render:function(){return r.DOM.div({className:this.props.className},!this.state.imageLoaded&&s(null),this.renderImage(),this.renderIframe())},renderImage:function(){var e={backgroundImage:"url("+this.state.thumb+")"};return this.state.imageLoaded&&!this.state.showingVideo?r.DOM.div({className:"video-image",style:e},n({onClick:this.playVideo})):void 0},renderIframe:function(){var e={display:this.state.showingVideo?"block":"none",width:"100%",height:"100%"};return this.state.showingVideo?r.DOM.div({className:"video-embed",style:e},r.DOM.iframe({frameBorder:"0",src:this.getIframeUrl()})):void 0},playVideo:function(e){this.setState({showingVideo:!0}),e.preventDefault()},getIframeUrl:function(){return this.isYoutube()?"//youtube.com/embed/"+this.props.videoId+"?autoplay=1":this.isVimeo()?"//player.vimeo.com/video/"+this.props.videoId+"?autoplay=1":void 0},fetchYoutubeData:function(){var e=this.props.videoId,t=this;i.get({url:"//gdata.youtube.com/feeds/api/videos/"+e+"?v=2&alt=json",onSuccess:function(e,o){var r=o.entry.media$group.media$thumbnail,i=r.sort(function(e,t){return t.width-e.width})[0].url;t.setState({thumb:i,imageLoaded:!0})},onError:t.props.onError})},fetchVimeoData:function(){var e=this.props.videoId,t=this;i.get({url:"//vimeo.com/api/v2/video/"+e+".json",onSuccess:function(e,o){t.setState({thumb:o[0].thumbnail_large,imageLoaded:!0})},onError:t.props.onError})}})},function(t){t.exports=e},function(e){e.exports=function(e){return"object"!=typeof e?Array.prototype.join.call(arguments," "):Object.keys(e).filter(function(t){return e[t]}).join(" ")}},function(e,t){t.get=function(e){var t=e.url,o=e.onSuccess,r=e.onError,i=!1,n=function(){o(null,JSON.parse(i.responseText))},s=function(){if(4===i.readyState)if(200===i.status)o(null,JSON.parse(i.responseText));else{var e={error:"Sorry, an error ocurred on the server"};if(r&&"function"==typeof r)return r(e);o(e,null)}},a=function(){var e={error:"Sorry, an error ocurred on the server"};return r&&"function"==typeof r?r(e):void o(e,null)};try{i=new XDomainRequest,i.onload=n}catch(u){i=new XMLHttpRequest,i.onreadystatechange=s}i.onerror=a,i.open("GET",t,!0),i.send()}},function(e,t,o){var r=o(1);e.exports=r.createClass({displayName:"exports",propTypes:{onClick:r.PropTypes.func},render:function(){return r.DOM.button({type:"button",className:"video-play-button",onClick:this.props.onClick},r.DOM.svg({xmlns:"http://www.w3.org/2000/svg",version:"1.1",viewBox:"0 0 100 100"},r.DOM.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"})))}})},function(e,t,o){var r=o(1);e.exports=r.createClass({displayName:"exports",render:function(){return r.DOM.div({className:"video-loading"},r.DOM.svg({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",width:"32",height:"32"},r.DOM.path({opacity:".25",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"}),r.DOM.path({d:"M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z"})))}})}])});