react-vimeo
Version:
React component to load video from Vimeo
8 lines • 17.8 kB
JavaScript
/*
* React-Vimeo - React component to load video from Vimeo
* @version v2.0.0
* @link https://github.com/freecodecamp/react-vimeo
* @license MIT
* @author Berkeley Martinez (https://github.com/berkeleytrue)
*/
!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,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function u(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return e.charAt(0).toUpperCase()+e.substring(1)}function s(e,t){return t["on"+u(e)]||function(){}}function c(e,t,n,r){try{n.contentWindow.postMessage({method:e,value:t},r)}catch(e){return e}return null}Object.defineProperty(t,"__esModule",{value:!0});var l=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),f=n(3),p=r(f),d=n(1),m=r(d),h=n(10),y=r(h),g=n(9),v=r(g),b=n(2),w=r(b),E=n(4),O=r(E),_=n(5),x=r(_),T=(0,w.default)("vimeo:player"),j=function(){},k=(0,y.default)({cueChange:null,ended:null,loaded:null,pause:null,play:null,progress:null,seeked:null,textTrackChange:null,timeUpdate:null,volumeChange:null}),C=function(e){function t(){var e,n,r,i;o(this,t);for(var u=arguments.length,l=Array(u),f=0;f<u;f++)l[f]=arguments[f];return n=r=a(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(l))),r.state={imageLoaded:!1,playerOrigin:"*",showingVideo:r.props.autoplay,thumb:null},r.addMessageListener=function(){var e,t="undefined"!=typeof window?(e=window).addEventListener.bind(e):j;t("message",r.onMessage)},r.onError=function(e){throw r.props.onError&&r.props.onError(e),e},r.onMessage=function(e){var t=e.origin,n=e.data,o=r.props.onReady,a=r.state.playerOrigin;if("*"===a&&r.setState({playerOrigin:t}),!/^https?:\/\/player.vimeo.com/.test(t))return!1;if("string"==typeof n)try{n=JSON.parse(n)}catch(e){T("error parsing message",e),n={event:""}}return"ready"===n.event?(T("player ready"),r.onReady(r._player,"*"===a?t:a),o(n)):void(n.event&&(T("firing event: ",n.event),s(n.event,r.props)(n)))},r.onReady=function(e,t){Object.keys(k).forEach(function(n){var o=c("addEventListener",n.toLowerCase(),e,t);o&&r.onError(o)})},r.playVideo=function(e){e.preventDefault(),r.setState({showingVideo:!0})},r.getIframeUrl=function(){var e=r.props.videoId,t=r.getIframeUrlQuery();return"//player.vimeo.com/video/"+e+"?"+t},r.getIframeUrlQuery=function(){var e=[];return Object.keys(r.props.playerOptions).forEach(function(t){e.push(t+"="+r.props.playerOptions[t])}),e.join("&")},r.fetchVimeoData=function(){if(!r.state.imageLoaded){var e=r.props.videoId;(0,v.default)("//vimeo.com/api/v2/video/"+e+".json",{prefix:"vimeo"},function(e,t){e&&(T("jsonp err: ",e.message),r.onError(e)),T("jsonp response",t),r.setState({thumb:t[0].thumbnail_large,imageLoaded:!0})})}},r.renderImage=function(){if(!r.state.showingVideo&&r.state.imageLoaded){var e={backgroundImage:"url("+r.state.thumb+")",display:r.state.showingVideo?"none":"block",height:"100%",width:"100%"},t=r.props.playButton?(0,d.cloneElement)(r.props.playButton,{onClick:r.playVideo}):m.default.createElement(O.default,{onClick:r.playVideo});return m.default.createElement("div",{className:"vimeo-image",style:e},t)}},r.renderIframe=function(){if(r.state.showingVideo){r.addMessageListener();var e={display:r.state.showingVideo?"block":"none",height:"100%",width:"100%"};return m.default.createElement("div",{className:"vimeo-embed",style:e},m.default.createElement("iframe",{frameBorder:"0",ref:function(e){r._player=e},src:r.getIframeUrl()}))}},r.renderLoading=function(e,t){if(!e)return t?t:m.default.createElement(x.default,null)},i=n,a(r,i)}return i(t,e),l(t,[{key:"componentWillReceiveProps",value:function(e){e.videoId!==this.props.videoId&&this.setState({thumb:null,imageLoaded:!1,showingVideo:!1})}},{key:"componentDidMount",value:function(){this.fetchVimeoData()}},{key:"componentDidUpdate",value:function(){this.fetchVimeoData()}},{key:"componentWillUnmount",value:function(){var e,t="undefined"!=typeof window?(e=window).removeEventListener.bind(e):j;t("message",this.onMessage)}},{key:"render",value:function(){return m.default.createElement("div",{className:this.props.className},this.renderLoading(this.state.imageLoaded,this.props.loading),this.renderImage(),this.renderIframe())}}]),t}(m.default.Component);C.displayName="Vimeo",C.propTypes={autoplay:p.default.bool,className:p.default.string,loading:p.default.element,playButton:p.default.node,playerOptions:p.default.object,videoId:p.default.string.isRequired,onCueChange:p.default.func,onEnded:p.default.func,onError:p.default.func,onLoaded:p.default.func,onPause:p.default.func,onPlay:p.default.func,onProgress:p.default.func,onReady:p.default.func,onSeeked:p.default.func,onTextTrackChanged:p.default.func,onTimeUpdate:p.default.func,onVolumeChange:p.default.func},C.defaultProps=function(){var e=Object.keys(k).concat(["ready"]).reduce(function(e,t){return e["on"+u(t)]=j,e},{});return e.className="vimeo",e.playerOptions={autoplay:1},e.autoplay=!1,e}(),t.default=C,e.exports=t.default},function(t,n){t.exports=e},function(e,t,n){(function(r){function o(){return!("undefined"==typeof window||!window.process||"renderer"!==window.process.type)||("undefined"!=typeof document&&document.documentElement&&document.documentElement.style&&document.documentElement.style.WebkitAppearance||"undefined"!=typeof window&&window.console&&(window.console.firebug||window.console.exception&&window.console.table)||"undefined"!=typeof navigator&&navigator.userAgent&&navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/)&&parseInt(RegExp.$1,10)>=31||"undefined"!=typeof navigator&&navigator.userAgent&&navigator.userAgent.toLowerCase().match(/applewebkit\/(\d+)/))}function a(e){var n=this.useColors;if(e[0]=(n?"%c":"")+this.namespace+(n?" %c":" ")+e[0]+(n?"%c ":" ")+"+"+t.humanize(this.diff),n){var r="color: "+this.color;e.splice(1,0,r,"color: inherit");var o=0,a=0;e[0].replace(/%[a-zA-Z%]/g,function(e){"%%"!==e&&(o++,"%c"===e&&(a=o))}),e.splice(a,0,r)}}function i(){return"object"==typeof console&&console.log&&Function.prototype.apply.call(console.log,console,arguments)}function u(e){try{null==e?t.storage.removeItem("debug"):t.storage.debug=e}catch(e){}}function s(){var e;try{e=t.storage.debug}catch(e){}return!e&&"undefined"!=typeof r&&"env"in r&&(e=r.env.DEBUG),e}function c(){try{return window.localStorage}catch(e){}}t=e.exports=n(6),t.log=i,t.formatArgs=a,t.save=u,t.load=s,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){try{return JSON.stringify(e)}catch(e){return"[UnexpectedJSONParseError]: "+e.message}},t.enable(s())}).call(t,n(12))},function(e,t,n){e.exports=n(13)()},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),s=n(3),c=r(s),l=n(1),f=r(l),p=function(e){function t(){return o(this,t),a(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return i(t,e),u(t,[{key:"render",value:function(){return f.default.createElement("button",{className:"vimeo-play-button",onClick:this.props.onClick,type:"button"},f.default.createElement("svg",{version:"1.1",viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg"},f.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"})))}}]),t}(f.default.Component);p.displayName="PlayButton",p.propTypes={onClick:c.default.func},t.default=p,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),s=n(1),c=r(s),l=function(e){function t(){return o(this,t),a(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return i(t,e),u(t,[{key:"render",value:function(){return c.default.createElement("div",{className:"vimeo-loading"},c.default.createElement("svg",{height:"32",viewBox:"0 0 32 32",width:"32",xmlns:"http://www.w3.org/2000/svg"},c.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"}),c.default.createElement("path",{d:"M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z"})))}}]),t}(c.default.Component);l.displayName="Spinner",t.default=l,e.exports=t.default},function(e,t,n){function r(e){var n,r=0;for(n in e)r=(r<<5)-r+e.charCodeAt(n),r|=0;return t.colors[Math.abs(r)%t.colors.length]}function o(e){function n(){if(n.enabled){var e=n,r=+new Date,o=r-(c||r);e.diff=o,e.prev=c,e.curr=r,c=r;for(var a=new Array(arguments.length),i=0;i<a.length;i++)a[i]=arguments[i];a[0]=t.coerce(a[0]),"string"!=typeof a[0]&&a.unshift("%O");var u=0;a[0]=a[0].replace(/%([a-zA-Z%])/g,function(n,r){if("%%"===n)return n;u++;var o=t.formatters[r];if("function"==typeof o){var i=a[u];n=o.call(e,i),a.splice(u,1),u--}return n}),t.formatArgs.call(e,a);var s=n.log||t.log||console.log.bind(console);s.apply(e,a)}}return n.namespace=e,n.enabled=t.enabled(e),n.useColors=t.useColors(),n.color=r(e),"function"==typeof t.init&&t.init(n),n}function a(e){t.save(e),t.names=[],t.skips=[];for(var n=("string"==typeof e?e:"").split(/[\s,]+/),r=n.length,o=0;o<r;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 i(){t.enable("")}function u(e){var n,r;for(n=0,r=t.skips.length;n<r;n++)if(t.skips[n].test(e))return!1;for(n=0,r=t.names.length;n<r;n++)if(t.names[n].test(e))return!0;return!1}function s(e){return e instanceof Error?e.stack||e.message:e}t=e.exports=o.debug=o.default=o,t.coerce=s,t.disable=i,t.enable=a,t.enabled=u,t.humanize=n(11),t.names=[],t.skips=[],t.formatters={};var c},function(e,t){"use strict";function n(e){return function(){return e}}var r=function(){};r.thatReturns=n,r.thatReturnsFalse=n(!1),r.thatReturnsTrue=n(!0),r.thatReturnsNull=n(null),r.thatReturnsThis=function(){return this},r.thatReturnsArgument=function(e){return e},e.exports=r},function(e,t,n){"use strict";function r(e,t,n,r,a,i,u,s){if(o(t),!e){var c;if(void 0===t)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[n,r,a,i,u,s],f=0;c=new Error(t.replace(/%s/g,function(){return l[f++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}var o=function(e){};e.exports=r},function(e,t,n){function r(){}function o(e,t,n){function o(){s.parentNode&&s.parentNode.removeChild(s),window[f]=r,c&&clearTimeout(c)}function u(){window[f]&&o()}"function"==typeof t&&(n=t,t={}),t||(t={});var s,c,l=t.prefix||"__jp",f=t.name||l+i++,p=t.param||"callback",d=null!=t.timeout?t.timeout:6e4,m=encodeURIComponent,h=document.getElementsByTagName("script")[0]||document.head;return d&&(c=setTimeout(function(){o(),n&&n(new Error("Timeout"))},d)),window[f]=function(e){a("jsonp got",e),o(),n&&n(null,e)},e+=(~e.indexOf("?")?"&":"?")+p+"="+m(f),e=e.replace("?&","?"),a('jsonp req "%s"',e),s=document.createElement("script"),s.src=e,h.parentNode.insertBefore(s,h),u}var a=n(2)("jsonp");e.exports=o;var i=0},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},function(e,t){function n(e){if(e=String(e),!(e.length>100)){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*c;case"hours":case"hour":case"hrs":case"hr":case"h":return n*s;case"minutes":case"minute":case"mins":case"min":case"m":return n*u;case"seconds":case"second":case"secs":case"sec":case"s":return n*i;case"milliseconds":case"millisecond":case"msecs":case"msec":case"ms":return n;default:return}}}}function r(e){return e>=c?Math.round(e/c)+"d":e>=s?Math.round(e/s)+"h":e>=u?Math.round(e/u)+"m":e>=i?Math.round(e/i)+"s":e+"ms"}function o(e){return a(e,c,"day")||a(e,s,"hour")||a(e,u,"minute")||a(e,i,"second")||e+" ms"}function a(e,t,n){if(!(e<t))return e<1.5*t?Math.floor(e/t)+" "+n:Math.ceil(e/t)+" "+n+"s"}var i=1e3,u=60*i,s=60*u,c=24*s,l=365.25*c;e.exports=function(e,t){t=t||{};var a=typeof e;if("string"===a&&e.length>0)return n(e);if("number"===a&&isNaN(e)===!1)return t.long?o(e):r(e);throw new Error("val is not a non-empty string or a valid number. val="+JSON.stringify(e))}},function(e,t){function n(){throw new Error("setTimeout has not been defined")}function r(){throw new Error("clearTimeout has not been defined")}function o(e){if(l===setTimeout)return setTimeout(e,0);if((l===n||!l)&&setTimeout)return l=setTimeout,setTimeout(e,0);try{return l(e,0)}catch(t){try{return l.call(null,e,0)}catch(t){return l.call(this,e,0)}}}function a(e){if(f===clearTimeout)return clearTimeout(e);if((f===r||!f)&&clearTimeout)return f=clearTimeout,clearTimeout(e);try{return f(e)}catch(t){try{return f.call(null,e)}catch(t){return f.call(this,e)}}}function i(){h&&d&&(h=!1,d.length?m=d.concat(m):y=-1,m.length&&u())}function u(){if(!h){var e=o(i);h=!0;for(var t=m.length;t;){for(d=m,m=[];++y<t;)d&&d[y].run();y=-1,t=m.length}d=null,h=!1,a(e)}}function s(e,t){this.fun=e,this.array=t}function c(){}var l,f,p=e.exports={};!function(){try{l="function"==typeof setTimeout?setTimeout:n}catch(e){l=n}try{f="function"==typeof clearTimeout?clearTimeout:r}catch(e){f=r}}();var d,m=[],h=!1,y=-1;p.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];m.push(new s(e,t)),1!==m.length||h||o(u)},s.prototype.run=function(){this.fun.apply(null,this.array)},p.title="browser",p.browser=!0,p.env={},p.argv=[],p.version="",p.versions={},p.on=c,p.addListener=c,p.once=c,p.off=c,p.removeListener=c,p.removeAllListeners=c,p.emit=c,p.prependListener=c,p.prependOnceListener=c,p.listeners=function(e){return[]},p.binding=function(e){throw new Error("process.binding is not supported")},p.cwd=function(){return"/"},p.chdir=function(e){throw new Error("process.chdir is not supported")},p.umask=function(){return 0}},function(e,t,n){"use strict";var r=n(7),o=n(8),a=n(14);e.exports=function(){function e(e,t,n,r,i,u){u!==a&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t){"use strict";var n="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";e.exports=n}])});