diff --git a/CHANGELOG.md b/CHANGELOG.md index 14924fb..663ab78 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,9 @@ ## CHANGELOG +### 0.3.2 +Allow better styling of `SeekBar` and `Volume` controls by passing background-size. Specifically for styling back fill color in Chrome + +Workaround for [know bug](https://github.com/facebook/react/issues/554) with input ranges in <= IE11 + ### 0.3.1 Fixes bad reference to main file in package.json diff --git a/README.md b/README.md index 7b9fa6f..d0471a8 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -## React Media Player 0.3.1 +## React Media Player React media container component to help build video & audio players. diff --git a/bower.json b/bower.json index 7e1a137..97f5c58 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "react-media-player", - "version": "0.3.1", + "version": "0.3.2", "homepage": "https://github.com/souporserious/react-media-player", "authors": [ "Travis Arnold " diff --git a/dist/react-media-player.js b/dist/react-media-player.js index 285c462..35132ee 100644 --- a/dist/react-media-player.js +++ b/dist/react-media-player.js @@ -1353,13 +1353,19 @@ return /******/ (function(modules) { // webpackBootstrap return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(SeekBar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this._playingOnMouseDown = false, _this._handleMouseDown = function () { _this._playingOnMouseDown = _this.context.isPlaying; _this.context.pause(); - }, _this._handleMouseUp = function () { + }, _this._handleMouseUp = function (_ref) { + var value = _ref.target.value; + + // seek on mouseUp as well because of this bug in <= IE11 + // https://github.com/facebook/react/issues/554 + _this.context.seekTo(+value); + // only play if media was playing prior to mouseDown if (_this._playingOnMouseDown) { _this.context.play(); } - }, _this._handleChange = function (_ref) { - var value = _ref.target.value; + }, _this._handleChange = function (_ref2) { + var value = _ref2.target.value; _this.context.seekTo(+value); }, _temp), _possibleConstructorReturn(_this, _ret); @@ -1368,16 +1374,23 @@ return /******/ (function(modules) { // webpackBootstrap _createClass(SeekBar, [{ key: "render", value: function render() { + var _context = this.context; + var duration = _context.duration; + var currentTime = _context.currentTime; + return _react2.default.createElement("input", { id: this.props.id, className: this.props.className, type: "range", step: "any", - max: this.context.duration.toFixed(4), - value: this.context.currentTime, + max: duration.toFixed(4), + value: currentTime, onMouseDown: this._handleMouseDown, onMouseUp: this._handleMouseUp, - onChange: this._handleChange + onChange: this._handleChange, + style: { + backgroundSize: currentTime * 100 / duration + '% 100%' + } }); } }]); @@ -1560,7 +1573,7 @@ return /******/ (function(modules) { // webpackBootstrap args[_key] = arguments[_key]; } - return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Volume)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this._handleChange = function (_ref) { + return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Volume)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this._handleSetVolume = function (_ref) { var value = _ref.target.value; _this.context.setVolume((+value).toFixed(4)); @@ -1570,6 +1583,8 @@ return /******/ (function(modules) { // webpackBootstrap _createClass(Volume, [{ key: "render", value: function render() { + var volume = this.context.volume; + return _react2.default.createElement("input", { id: this.props.id, className: this.props.className, @@ -1577,8 +1592,12 @@ return /******/ (function(modules) { // webpackBootstrap step: "any", min: 0, max: 1, - value: this.context.volume, - onChange: this._handleChange + value: volume, + onMouseUp: this._handleSetVolume, + onChange: this._handleSetVolume, + style: { + backgroundSize: volume * 100 / 1 + '% 100%' + } }); } }]); diff --git a/dist/react-media-player.min.js b/dist/react-media-player.min.js index df031db..dfcbde5 100644 --- a/dist/react-media-player.min.js +++ b/dist/react-media-player.min.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("ReactDOM")):"function"==typeof define&&define.amd?define(["React","ReactDOM"],t):"object"==typeof exports?exports.ReactMediaPlayer=t(require("React"),require("ReactDOM")):e.ReactMediaPlayer=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return e[o].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="dist/",t(0)}([function(e,t,n){"use strict";function o(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t["default"]=e,t}function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0}),t.utils=t.controls=t.Media=void 0;var u=n(1),a=r(u),i=n(15),s=o(i),l=n(25),c=o(l);t.Media=a["default"],t.controls=s,t.utils=c},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(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 a(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 i=Object.assign||function(e){for(var t=1;tl;l++)s[l]=arguments[l];return n=o=u(this,(e=Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),o.state={currentTime:0,progress:0,duration:0,volume:1,isLoading:!0,isPlaying:!1,isMuted:!1,isFullscreen:!1},o._lastVolume=0,o._handlePlay=function(){o._player.play()},o._handlePause=function(){o._player.pause()},o._handlePlayPause=function(){o.state.isPlaying?o._player.pause():o._player.play()},o._handleStop=function(){o._player.stop()},o._handleSeekTo=function(e){o._player.seekTo(e)},o._handleMute=function(e){if(e)o._lastVolume=o.state.volume,o._player.setVolume(0);else{var t=o._lastVolume>0?o._lastVolume:.1;o._player.setVolume(t)}o._player.mute(e)},o._handleMuteUnmute=function(){o._handleMute(!o.state.isMuted)},o._handleSetVolume=function(e){var t=!1;0>=e&&(t=!0),t!==o.state.isMuted?o._handleMute(t):o._lastVolume=e,o._player.setVolume(e)},o._handleFullscreen=function(){var e=o.state.isFullscreen;e?document[_["default"]]():p["default"].findDOMNode(o._player)[h["default"]](),o.setState({isFullscreen:!e})},a=n,u(o,a)}return a(t,e),s(t,[{key:"getChildContext",value:function(){return i({},this.state,{play:this._handlePlay,pause:this._handlePause,playPause:this._handlePlayPause,stop:this._handleStop,seekTo:this._handleSeekTo,mute:this._handleMute,muteUnmute:this._handleMuteUnmute,setVolume:this._handleSetVolume,fullscreen:this._handleFullscreen})}},{key:"componentWillUpdate",value:function(e){this.props.src!==e.src&&this.setState({currentTime:0,progress:0,duration:0,isPlaying:!1,volume:1,isMuted:!1,isFullscreen:!1})}},{key:"render",value:function(){var e=this,t=this.props,n=t.src,o=t.children,r=(0,d["default"])(n,this.props.vendor),u=r.vendor,a=r.component;return a&&o((0,l.createElement)(a,{ref:function(t){return e._player=t},vendor:u,src:n,onReady:function(){return e.setState({isLoading:!1})},onPlaying:function(t){return e.setState({isPlaying:t})},onDuration:function(t){return e.setState({duration:t})},onProgress:function(t){return e.setState({progress:t})},onTimeUpdate:function(t){return e.setState({currentTime:t})},onMute:function(t){return e.setState({isMuted:t})},onVolumeChange:function(t){return e.setState({volume:t})}}))}}]),t}(l.Component);b.propTypes={vendor:l.PropTypes.oneOf(["youtube","vimeo","audio","video"]),src:l.PropTypes.string.isRequired,children:l.PropTypes.func.isRequired},b.childContextTypes={currentTime:l.PropTypes.number,progress:l.PropTypes.number,duration:l.PropTypes.number,volume:l.PropTypes.number,isLoading:l.PropTypes.bool,isPlaying:l.PropTypes.bool,isMuted:l.PropTypes.bool,isFullscreen:l.PropTypes.bool,play:l.PropTypes.func,pause:l.PropTypes.func,playPause:l.PropTypes.func,stop:l.PropTypes.func,seekTo:l.PropTypes.func,mute:l.PropTypes.func,muteUnmute:l.PropTypes.func,setVolume:l.PropTypes.func,fullscreen:l.PropTypes.func},t["default"]=b},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){var n=(0,a["default"])(e);return"youtube"===t||e.indexOf("youtube.com")>-1||e.indexOf("youtu.be")>-1?{vendor:"youtube",component:s["default"]}:"vimeo"===t||e.indexOf("vimeo.com")>-1?{vendor:"vimeo",component:c["default"]}:"video"===t||d.indexOf(n)>-1?{vendor:"video",component:f["default"]}:"audio"===t||y.indexOf(n)>-1?{vendor:"audio",component:f["default"]}:(console.warn("Warning: Player was not rendered. Source could not be determined."),null)}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=r;var u=n(5),a=o(u),i=n(6),s=o(i),l=n(10),c=o(l),p=n(12),f=o(p),d=["mp4","m4v","webm","ogv"],y=["mp3","m4a","wav","ogg"]},function(e,t){"use strict";function n(e){var t=e.substr(e.lastIndexOf("/")+1).split("?")[0],n=t.lastIndexOf(".");return n>-1&&t.substr(n+1)}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=n},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(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 a(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 i=function(){function e(e,t){for(var n=0;nl;l++)s[l]=arguments[l];return n=o=u(this,(e=Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),o._progressId=null,o._timeUpdateId=null,o._handleProgress=function(){var e=o._player.getVideoLoadedFraction()||0;o.props.onProgress(e),o._progressId&&1>e&&(o._progressId=requestAnimationFrame(o._handleProgress))},o._handleTimeUpdate=function(){o.props.onTimeUpdate(o._player.getCurrentTime()||0),o._timeUpdateId&&(o._timeUpdateId=requestAnimationFrame(o._handleTimeUpdate))},a=n,u(o,a)}return a(t,e),i(t,[{key:"componentDidMount",value:function(){var e=this;m?this._createPlayer():((0,p["default"])("http://www.youtube.com/player_api"),window.onYouTubeIframeAPIReady=function(){e._createPlayer(),m=!0})}},{key:"componentWillReceiveProps",value:function(e){if(e.src!==this.props.src){var t=(0,d["default"])(e.src);this._player.cueVideoById(t)}}},{key:"componentWillUnmount",value:function(){this._progressId&&cancelAnimationFrame(this._progressId),this._timeUpdateId&&cancelAnimationFrame(this._timeUpdateId),this._player&&this._player.destroy()}},{key:"_createPlayer",value:function(){var e=(0,d["default"])(this.props.src);this._player=new YT.Player(this._node,{videoId:e,events:this._events(),playerVars:{controls:0,showinfo:0,modestbranding:1}})}},{key:"_events",value:function(){var e=this;return{onReady:function(){e.props.onDuration(e._player.getDuration()),e.props.onReady()},onStateChange:function(t){var n=t.data,o=1===n;o?e._timeUpdateId=requestAnimationFrame(e._handleTimeUpdate):(cancelAnimationFrame(e._timeUpdateId),e._timeUpdateId=null,cancelAnimationFrame(e._progressId),e._progressId=null),(o||3===n)&&(e._progressId=requestAnimationFrame(e._handleProgress)),e.props.onPlaying(o)}}}},{key:"play",value:function(){this._player.playVideo()}},{key:"pause",value:function(){this._player.pauseVideo()}},{key:"stop",value:function(){this._player.stopVideo()}},{key:"seekTo",value:function(e){this._player.seekTo(e)}},{key:"mute",value:function(e){e?this._player.mute():this._player.unMute(),this.props.onMute(e)}},{key:"setVolume",value:function(e){this._player.setVolume(100*+e),this.props.onVolumeChange(+e)}},{key:"render",value:function(){var e=this;return l["default"].createElement("div",{ref:function(t){return e._node=t}})}}]),t}(s.Component);_.propTypes=h["default"],t["default"]=_},function(e,t){"use strict";function n(e,t){var n=document.createElement("script");n.async=!0,n.src=e,document.head.appendChild(n),"function"==typeof t&&t()}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=n},function(e,t){"use strict";function n(e){var t=/.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/,n=e.match(t);if(n&&11===n[1].length)return n[1];throw"Invalid Youtube ID provided"}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=n},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(2);t["default"]={src:o.PropTypes.string,onPlaying:o.PropTypes.func,onProgress:o.PropTypes.func,onDuration:o.PropTypes.func,onTimeUpdate:o.PropTypes.func,onVolumeChange:o.PropTypes.func}},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(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 a(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 i=function(){function e(e,t){for(var n=0;nl;l++)s[l]=arguments[l];return n=o=u(this,(e=Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),o._vimeoId=(0,f["default"])(o.props.src),o._origin="*",o._onMessage=function(e){if(!/^https?:\/\/player.vimeo.com/.test(e.origin))return!1;"*"===o._origin&&(o._origin=e.origin);var t=JSON.parse(e.data);switch(t.event){case"ready":o.props.onReady(),o._postMessages();break;case"loadProgress":o.props.onProgress(t.data.percent);break;case"playProgress":o.props.onTimeUpdate(t.data.seconds);break;case"play":o.props.onPlaying(!0);break;case"pause":case"finish":o.props.onPlaying(!1)}"getDuration"===t.method&&o.props.onDuration(t.value),"getVolume"===t.method&&o.setVolume(t.value)},a=n,u(o,a)}return a(t,e),i(t,[{key:"componentDidMount",value:function(){window.addEventListener("message",this._onMessage)}},{key:"componentWillReceiveProps",value:function(e){e.src!==this.props.src&&(this.stop(),this._vimeoId=(0,f["default"])(e.src))}},{key:"componentWillUnmount",value:function(){window.removeEventListener("message",this._onMessage)}},{key:"_postMessage",value:function(e,t){var n={method:e};t&&(n.value=t),this._iframe.contentWindow.postMessage(JSON.stringify(n),this._origin)}},{key:"_postMessages",value:function(){var e=this;["loadProgress","playProgress","play","pause","finish"].forEach(function(t){return e._postMessage("addEventListener",t)}),this._postMessage("getDuration"),this._postMessage("getVolume")}},{key:"play",value:function(){this._postMessage("play")}},{key:"pause",value:function(){this._postMessage("pause")}},{key:"stop",value:function(){this._postMessage("unload")}},{key:"seekTo",value:function(e){this._postMessage("seekTo",e)}},{key:"mute",value:function(e){this._postMessage("setVolume",e?"0":"1"),this.props.onMute(e)}},{key:"setVolume",value:function(e){this._postMessage("setVolume",e),this.props.onVolumeChange(+e)}},{key:"render",value:function(){var e=this;return l["default"].createElement("iframe",{ref:function(t){return e._iframe=t},src:"https://player.vimeo.com/video/"+this._vimeoId+"?api=1"})}}]),t}(s.Component);h.propTypes=y["default"],t["default"]=h},function(e,t){"use strict";function n(e){var t=/https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|video\/|)(\d+)(?:$|\/|\?)/,n=e.match(t);if(n)return n[3];throw"Invalid Vimeo ID provided"}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=n},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(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 a(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 i=function(){function e(e,t){for(var n=0;nl;l++)s[l]=arguments[l];return n=o=u(this,(e=Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),o._handleCanPlay=function(){o.props.onReady()},o._handlePlay=function(){o.props.onPlaying(!0)},o._handlePause=function(){o.props.onPlaying(!1)},o._handleEnded=function(){o.props.onPlaying(!1)},o._handleProgress=function(e){var t=e.target,n=t.buffered,r=t.duration,u=0;n.length>0&&(u=n.end(0)/r),o.props.onProgress(u)},o._handleDuration=function(e){var t=e.target.duration;o.props.onDuration(t)},o._handleTimeUpdate=function(e){var t=e.target.currentTime;o.props.onTimeUpdate(t)},o._handleVolumeChange=function(e){var t=e.target,n=t.volume,r=t.muted;o.props.onMute(r),o.props.onVolumeChange(n)},a=n,u(o,a)}return a(t,e),i(t,[{key:"play",value:function(){this._player.play()}},{key:"pause",value:function(){this._player.pause()}},{key:"stop",value:function(){this._player.pause(),this._player.currentTime=0}},{key:"seekTo",value:function(e){this._player.currentTime=e}},{key:"mute",value:function(e){this._player.muted=e}},{key:"setVolume",value:function(e){this._player.volume=e}},{key:"render",value:function(){var e=this;return l["default"].createElement(this.props.vendor,{ref:function(t){return e._player=t},src:this.props.src,onCanPlay:this._handleCanPlay,onPlay:this._handlePlay,onPause:this._handlePause,onEnded:this._handleEnded,onProgress:this._handleProgress,onLoadedMetadata:this._handleDuration,onTimeUpdate:this._handleTimeUpdate,onVolumeChange:this._handleVolumeChange})}}]),t}(s.Component);f.propTypes=p["default"],t["default"]=f},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=function(){var e=["requestFullscreen","mozRequestFullScreen","msRequestFullscreen","webkitRequestFullscreen"];return e.reduce(function(e,t){return document.documentElement[t]?t:e})}()},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=function(){var e=["exitFullscreen","mozCancelFullScreen","msExitFullscreen","webkitExitFullscreen"];return e.reduce(function(e,t){return document[t]?t:e})}()},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0}),t.Fullscreen=t.Volume=t.MuteUnmute=t.Duration=t.SeekBar=t.Progress=t.CurrentTime=t.PlayPause=void 0;var r=n(16),u=o(r),a=n(17),i=o(a),s=n(19),l=o(s),c=n(20),p=o(c),f=n(21),d=o(f),y=n(22),h=o(y),m=n(23),_=o(m),b=n(24),v=o(b);t.PlayPause=u["default"],t.CurrentTime=i["default"],t.Progress=l["default"],t.SeekBar=p["default"],t.Duration=d["default"],t.MuteUnmute=h["default"],t.Volume=_["default"],t.Fullscreen=v["default"]},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(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 a(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 i=function(){function e(e,t){for(var n=0;nl;l++)s[l]=arguments[l];return n=o=u(this,(e=Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),o._handlePlayPause=function(){o.context.playPause()},a=n,u(o,a)}return a(t,e),i(t,[{key:"render",value:function(){return l["default"].createElement("button",{id:this.props.id,className:this.props.className,type:"button",onClick:this._handlePlayPause},this.context.isPlaying?"Pause":"Play")}}]),t}(s.Component);c.contextTypes={isPlaying:s.PropTypes.bool,playPause:s.PropTypes.func},t["default"]=c},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(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 a(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 i=function(){function e(e,t){for(var n=0;no&&(o="0"+o),t>0?t+":"+n+":"+o:n+":"+o}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=n},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(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 a(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 i=function(){function e(e,t){for(var n=0;nl;l++)s[l]=arguments[l];return n=o=u(this,(e=Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),o._playingOnMouseDown=!1,o._handleMouseDown=function(){o._playingOnMouseDown=o.context.isPlaying,o.context.pause()},o._handleMouseUp=function(){o._playingOnMouseDown&&o.context.play()},o._handleChange=function(e){var t=e.target.value;o.context.seekTo(+t)},a=n,u(o,a)}return a(t,e),i(t,[{key:"render",value:function(){return l["default"].createElement("input",{id:this.props.id,className:this.props.className,type:"range",step:"any",max:this.context.duration.toFixed(4),value:this.context.currentTime,onMouseDown:this._handleMouseDown,onMouseUp:this._handleMouseUp,onChange:this._handleChange})}}]),t}(s.Component);c.contextTypes={currentTime:s.PropTypes.number,duration:s.PropTypes.number,play:s.PropTypes.func,pause:s.PropTypes.func,seekTo:s.PropTypes.func,isPlaying:s.PropTypes.bool},t["default"]=c},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(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 a(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 i=function(){function e(e,t){for(var n=0;nl;l++)s[l]=arguments[l];return n=o=u(this,(e=Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),o._handleMuteUnmute=function(){o.context.muteUnmute()},a=n,u(o,a)}return a(t,e),i(t,[{key:"render",value:function(){return l["default"].createElement("button",{id:this.props.id,className:this.props.className,type:"button",onClick:this._handleMuteUnmute},this.context.isMuted?"Unmute":"Mute")}}]),t}(s.Component);c.contextTypes={muteUnmute:s.PropTypes.func,isMuted:s.PropTypes.bool},t["default"]=c},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(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 a(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 i=function(){function e(e,t){for(var n=0;nl;l++)s[l]=arguments[l];return n=o=u(this,(e=Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),o._handleChange=function(e){var t=e.target.value;o.context.setVolume((+t).toFixed(4))},a=n,u(o,a)}return a(t,e),i(t,[{key:"render",value:function(){return l["default"].createElement("input",{id:this.props.id,className:this.props.className,type:"range",step:"any",min:0,max:1,value:this.context.volume,onChange:this._handleChange})}}]),t}(s.Component);c.contextTypes={volume:s.PropTypes.number,setVolume:s.PropTypes.func},t["default"]=c},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(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 a(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 i=function(){function e(e,t){for(var n=0;nl;l++)s[l]=arguments[l];return n=o=u(this,(e=Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),o._handleFullscreen=function(){o.context.fullscreen()},a=n,u(o,a)}return a(t,e),i(t,[{key:"render",value:function(){return l["default"].createElement("button",{id:this.props.id,className:this.props.className,type:"button",onClick:this._handleFullscreen},this.context.isFullscreen?"Exit Fullscreen":"Fullscreen")}}]),t}(s.Component);c.contextTypes={fullscreen:s.PropTypes.func,isFullscreen:s.PropTypes.bool},t["default"]=c},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0}),t.formatTime=void 0;var r=n(18),u=o(r);t.formatTime=u["default"]}])}); \ No newline at end of file +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("ReactDOM")):"function"==typeof define&&define.amd?define(["React","ReactDOM"],t):"object"==typeof exports?exports.ReactMediaPlayer=t(require("React"),require("ReactDOM")):e.ReactMediaPlayer=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return e[o].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="dist/",t(0)}([function(e,t,n){"use strict";function o(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t["default"]=e,t}function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0}),t.utils=t.controls=t.Media=void 0;var u=n(1),a=r(u),i=n(15),s=o(i),l=n(25),c=o(l);t.Media=a["default"],t.controls=s,t.utils=c},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(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 a(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 i=Object.assign||function(e){for(var t=1;tl;l++)s[l]=arguments[l];return n=o=u(this,(e=Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),o.state={currentTime:0,progress:0,duration:0,volume:1,isLoading:!0,isPlaying:!1,isMuted:!1,isFullscreen:!1},o._lastVolume=0,o._handlePlay=function(){o._player.play()},o._handlePause=function(){o._player.pause()},o._handlePlayPause=function(){o.state.isPlaying?o._player.pause():o._player.play()},o._handleStop=function(){o._player.stop()},o._handleSeekTo=function(e){o._player.seekTo(e)},o._handleMute=function(e){if(e)o._lastVolume=o.state.volume,o._player.setVolume(0);else{var t=o._lastVolume>0?o._lastVolume:.1;o._player.setVolume(t)}o._player.mute(e)},o._handleMuteUnmute=function(){o._handleMute(!o.state.isMuted)},o._handleSetVolume=function(e){var t=!1;0>=e&&(t=!0),t!==o.state.isMuted?o._handleMute(t):o._lastVolume=e,o._player.setVolume(e)},o._handleFullscreen=function(){var e=o.state.isFullscreen;e?document[_["default"]]():p["default"].findDOMNode(o._player)[h["default"]](),o.setState({isFullscreen:!e})},a=n,u(o,a)}return a(t,e),s(t,[{key:"getChildContext",value:function(){return i({},this.state,{play:this._handlePlay,pause:this._handlePause,playPause:this._handlePlayPause,stop:this._handleStop,seekTo:this._handleSeekTo,mute:this._handleMute,muteUnmute:this._handleMuteUnmute,setVolume:this._handleSetVolume,fullscreen:this._handleFullscreen})}},{key:"componentWillUpdate",value:function(e){this.props.src!==e.src&&this.setState({currentTime:0,progress:0,duration:0,isPlaying:!1,volume:1,isMuted:!1,isFullscreen:!1})}},{key:"render",value:function(){var e=this,t=this.props,n=t.src,o=t.children,r=(0,d["default"])(n,this.props.vendor),u=r.vendor,a=r.component;return a&&o((0,l.createElement)(a,{ref:function(t){return e._player=t},vendor:u,src:n,onReady:function(){return e.setState({isLoading:!1})},onPlaying:function(t){return e.setState({isPlaying:t})},onDuration:function(t){return e.setState({duration:t})},onProgress:function(t){return e.setState({progress:t})},onTimeUpdate:function(t){return e.setState({currentTime:t})},onMute:function(t){return e.setState({isMuted:t})},onVolumeChange:function(t){return e.setState({volume:t})}}))}}]),t}(l.Component);b.propTypes={vendor:l.PropTypes.oneOf(["youtube","vimeo","audio","video"]),src:l.PropTypes.string.isRequired,children:l.PropTypes.func.isRequired},b.childContextTypes={currentTime:l.PropTypes.number,progress:l.PropTypes.number,duration:l.PropTypes.number,volume:l.PropTypes.number,isLoading:l.PropTypes.bool,isPlaying:l.PropTypes.bool,isMuted:l.PropTypes.bool,isFullscreen:l.PropTypes.bool,play:l.PropTypes.func,pause:l.PropTypes.func,playPause:l.PropTypes.func,stop:l.PropTypes.func,seekTo:l.PropTypes.func,mute:l.PropTypes.func,muteUnmute:l.PropTypes.func,setVolume:l.PropTypes.func,fullscreen:l.PropTypes.func},t["default"]=b},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){var n=(0,a["default"])(e);return"youtube"===t||e.indexOf("youtube.com")>-1||e.indexOf("youtu.be")>-1?{vendor:"youtube",component:s["default"]}:"vimeo"===t||e.indexOf("vimeo.com")>-1?{vendor:"vimeo",component:c["default"]}:"video"===t||d.indexOf(n)>-1?{vendor:"video",component:f["default"]}:"audio"===t||y.indexOf(n)>-1?{vendor:"audio",component:f["default"]}:(console.warn("Warning: Player was not rendered. Source could not be determined."),null)}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=r;var u=n(5),a=o(u),i=n(6),s=o(i),l=n(10),c=o(l),p=n(12),f=o(p),d=["mp4","m4v","webm","ogv"],y=["mp3","m4a","wav","ogg"]},function(e,t){"use strict";function n(e){var t=e.substr(e.lastIndexOf("/")+1).split("?")[0],n=t.lastIndexOf(".");return n>-1&&t.substr(n+1)}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=n},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(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 a(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 i=function(){function e(e,t){for(var n=0;nl;l++)s[l]=arguments[l];return n=o=u(this,(e=Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),o._progressId=null,o._timeUpdateId=null,o._handleProgress=function(){var e=o._player.getVideoLoadedFraction()||0;o.props.onProgress(e),o._progressId&&1>e&&(o._progressId=requestAnimationFrame(o._handleProgress))},o._handleTimeUpdate=function(){o.props.onTimeUpdate(o._player.getCurrentTime()||0),o._timeUpdateId&&(o._timeUpdateId=requestAnimationFrame(o._handleTimeUpdate))},a=n,u(o,a)}return a(t,e),i(t,[{key:"componentDidMount",value:function(){var e=this;m?this._createPlayer():((0,p["default"])("http://www.youtube.com/player_api"),window.onYouTubeIframeAPIReady=function(){e._createPlayer(),m=!0})}},{key:"componentWillReceiveProps",value:function(e){if(e.src!==this.props.src){var t=(0,d["default"])(e.src);this._player.cueVideoById(t)}}},{key:"componentWillUnmount",value:function(){this._progressId&&cancelAnimationFrame(this._progressId),this._timeUpdateId&&cancelAnimationFrame(this._timeUpdateId),this._player&&this._player.destroy()}},{key:"_createPlayer",value:function(){var e=(0,d["default"])(this.props.src);this._player=new YT.Player(this._node,{videoId:e,events:this._events(),playerVars:{controls:0,showinfo:0,modestbranding:1}})}},{key:"_events",value:function(){var e=this;return{onReady:function(){e.props.onDuration(e._player.getDuration()),e.props.onReady()},onStateChange:function(t){var n=t.data,o=1===n;o?e._timeUpdateId=requestAnimationFrame(e._handleTimeUpdate):(cancelAnimationFrame(e._timeUpdateId),e._timeUpdateId=null,cancelAnimationFrame(e._progressId),e._progressId=null),(o||3===n)&&(e._progressId=requestAnimationFrame(e._handleProgress)),e.props.onPlaying(o)}}}},{key:"play",value:function(){this._player.playVideo()}},{key:"pause",value:function(){this._player.pauseVideo()}},{key:"stop",value:function(){this._player.stopVideo()}},{key:"seekTo",value:function(e){this._player.seekTo(e)}},{key:"mute",value:function(e){e?this._player.mute():this._player.unMute(),this.props.onMute(e)}},{key:"setVolume",value:function(e){this._player.setVolume(100*+e),this.props.onVolumeChange(+e)}},{key:"render",value:function(){var e=this;return l["default"].createElement("div",{ref:function(t){return e._node=t}})}}]),t}(s.Component);_.propTypes=h["default"],t["default"]=_},function(e,t){"use strict";function n(e,t){var n=document.createElement("script");n.async=!0,n.src=e,document.head.appendChild(n),"function"==typeof t&&t()}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=n},function(e,t){"use strict";function n(e){var t=/.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/,n=e.match(t);if(n&&11===n[1].length)return n[1];throw"Invalid Youtube ID provided"}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=n},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(2);t["default"]={src:o.PropTypes.string,onPlaying:o.PropTypes.func,onProgress:o.PropTypes.func,onDuration:o.PropTypes.func,onTimeUpdate:o.PropTypes.func,onVolumeChange:o.PropTypes.func}},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(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 a(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 i=function(){function e(e,t){for(var n=0;nl;l++)s[l]=arguments[l];return n=o=u(this,(e=Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),o._vimeoId=(0,f["default"])(o.props.src),o._origin="*",o._onMessage=function(e){if(!/^https?:\/\/player.vimeo.com/.test(e.origin))return!1;"*"===o._origin&&(o._origin=e.origin);var t=JSON.parse(e.data);switch(t.event){case"ready":o.props.onReady(),o._postMessages();break;case"loadProgress":o.props.onProgress(t.data.percent);break;case"playProgress":o.props.onTimeUpdate(t.data.seconds);break;case"play":o.props.onPlaying(!0);break;case"pause":case"finish":o.props.onPlaying(!1)}"getDuration"===t.method&&o.props.onDuration(t.value),"getVolume"===t.method&&o.setVolume(t.value)},a=n,u(o,a)}return a(t,e),i(t,[{key:"componentDidMount",value:function(){window.addEventListener("message",this._onMessage)}},{key:"componentWillReceiveProps",value:function(e){e.src!==this.props.src&&(this.stop(),this._vimeoId=(0,f["default"])(e.src))}},{key:"componentWillUnmount",value:function(){window.removeEventListener("message",this._onMessage)}},{key:"_postMessage",value:function(e,t){var n={method:e};t&&(n.value=t),this._iframe.contentWindow.postMessage(JSON.stringify(n),this._origin)}},{key:"_postMessages",value:function(){var e=this;["loadProgress","playProgress","play","pause","finish"].forEach(function(t){return e._postMessage("addEventListener",t)}),this._postMessage("getDuration"),this._postMessage("getVolume")}},{key:"play",value:function(){this._postMessage("play")}},{key:"pause",value:function(){this._postMessage("pause")}},{key:"stop",value:function(){this._postMessage("unload")}},{key:"seekTo",value:function(e){this._postMessage("seekTo",e)}},{key:"mute",value:function(e){this._postMessage("setVolume",e?"0":"1"),this.props.onMute(e)}},{key:"setVolume",value:function(e){this._postMessage("setVolume",e),this.props.onVolumeChange(+e)}},{key:"render",value:function(){var e=this;return l["default"].createElement("iframe",{ref:function(t){return e._iframe=t},src:"https://player.vimeo.com/video/"+this._vimeoId+"?api=1"})}}]),t}(s.Component);h.propTypes=y["default"],t["default"]=h},function(e,t){"use strict";function n(e){var t=/https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|video\/|)(\d+)(?:$|\/|\?)/,n=e.match(t);if(n)return n[3];throw"Invalid Vimeo ID provided"}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=n},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(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 a(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 i=function(){function e(e,t){for(var n=0;nl;l++)s[l]=arguments[l];return n=o=u(this,(e=Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),o._handleCanPlay=function(){o.props.onReady()},o._handlePlay=function(){o.props.onPlaying(!0)},o._handlePause=function(){o.props.onPlaying(!1)},o._handleEnded=function(){o.props.onPlaying(!1)},o._handleProgress=function(e){var t=e.target,n=t.buffered,r=t.duration,u=0;n.length>0&&(u=n.end(0)/r),o.props.onProgress(u)},o._handleDuration=function(e){var t=e.target.duration;o.props.onDuration(t)},o._handleTimeUpdate=function(e){var t=e.target.currentTime;o.props.onTimeUpdate(t)},o._handleVolumeChange=function(e){var t=e.target,n=t.volume,r=t.muted;o.props.onMute(r),o.props.onVolumeChange(n)},a=n,u(o,a)}return a(t,e),i(t,[{key:"play",value:function(){this._player.play()}},{key:"pause",value:function(){this._player.pause()}},{key:"stop",value:function(){this._player.pause(),this._player.currentTime=0}},{key:"seekTo",value:function(e){this._player.currentTime=e}},{key:"mute",value:function(e){this._player.muted=e}},{key:"setVolume",value:function(e){this._player.volume=e}},{key:"render",value:function(){var e=this;return l["default"].createElement(this.props.vendor,{ref:function(t){return e._player=t},src:this.props.src,onCanPlay:this._handleCanPlay,onPlay:this._handlePlay,onPause:this._handlePause,onEnded:this._handleEnded,onProgress:this._handleProgress,onLoadedMetadata:this._handleDuration,onTimeUpdate:this._handleTimeUpdate,onVolumeChange:this._handleVolumeChange})}}]),t}(s.Component);f.propTypes=p["default"],t["default"]=f},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=function(){var e=["requestFullscreen","mozRequestFullScreen","msRequestFullscreen","webkitRequestFullscreen"];return e.reduce(function(e,t){return document.documentElement[t]?t:e})}()},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=function(){var e=["exitFullscreen","mozCancelFullScreen","msExitFullscreen","webkitExitFullscreen"];return e.reduce(function(e,t){return document[t]?t:e})}()},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0}),t.Fullscreen=t.Volume=t.MuteUnmute=t.Duration=t.SeekBar=t.Progress=t.CurrentTime=t.PlayPause=void 0;var r=n(16),u=o(r),a=n(17),i=o(a),s=n(19),l=o(s),c=n(20),p=o(c),f=n(21),d=o(f),y=n(22),h=o(y),m=n(23),_=o(m),b=n(24),v=o(b);t.PlayPause=u["default"],t.CurrentTime=i["default"],t.Progress=l["default"],t.SeekBar=p["default"],t.Duration=d["default"],t.MuteUnmute=h["default"],t.Volume=_["default"],t.Fullscreen=v["default"]},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(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 a(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 i=function(){function e(e,t){for(var n=0;nl;l++)s[l]=arguments[l];return n=o=u(this,(e=Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),o._handlePlayPause=function(){o.context.playPause()},a=n,u(o,a)}return a(t,e),i(t,[{key:"render",value:function(){return l["default"].createElement("button",{id:this.props.id,className:this.props.className,type:"button",onClick:this._handlePlayPause},this.context.isPlaying?"Pause":"Play")}}]),t}(s.Component);c.contextTypes={isPlaying:s.PropTypes.bool,playPause:s.PropTypes.func},t["default"]=c},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(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 a(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 i=function(){function e(e,t){for(var n=0;no&&(o="0"+o),t>0?t+":"+n+":"+o:n+":"+o}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=n},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(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 a(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 i=function(){function e(e,t){for(var n=0;nl;l++)s[l]=arguments[l];return n=o=u(this,(e=Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),o._playingOnMouseDown=!1,o._handleMouseDown=function(){o._playingOnMouseDown=o.context.isPlaying,o.context.pause()},o._handleMouseUp=function(e){var t=e.target.value;o.context.seekTo(+t),o._playingOnMouseDown&&o.context.play()},o._handleChange=function(e){var t=e.target.value;o.context.seekTo(+t)},a=n,u(o,a)}return a(t,e),i(t,[{key:"render",value:function(){var e=this.context,t=e.duration,n=e.currentTime;return l["default"].createElement("input",{id:this.props.id,className:this.props.className,type:"range",step:"any",max:t.toFixed(4),value:n,onMouseDown:this._handleMouseDown,onMouseUp:this._handleMouseUp,onChange:this._handleChange,style:{backgroundSize:100*n/t+"% 100%"}})}}]),t}(s.Component);c.contextTypes={currentTime:s.PropTypes.number,duration:s.PropTypes.number,play:s.PropTypes.func,pause:s.PropTypes.func,seekTo:s.PropTypes.func,isPlaying:s.PropTypes.bool},t["default"]=c},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(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 a(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 i=function(){function e(e,t){for(var n=0;nl;l++)s[l]=arguments[l];return n=o=u(this,(e=Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),o._handleMuteUnmute=function(){o.context.muteUnmute()},a=n,u(o,a)}return a(t,e),i(t,[{key:"render",value:function(){return l["default"].createElement("button",{id:this.props.id,className:this.props.className,type:"button",onClick:this._handleMuteUnmute},this.context.isMuted?"Unmute":"Mute")}}]),t}(s.Component);c.contextTypes={muteUnmute:s.PropTypes.func,isMuted:s.PropTypes.bool},t["default"]=c},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(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 a(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 i=function(){function e(e,t){for(var n=0;nl;l++)s[l]=arguments[l];return n=o=u(this,(e=Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),o._handleSetVolume=function(e){var t=e.target.value;o.context.setVolume((+t).toFixed(4))},a=n,u(o,a)}return a(t,e),i(t,[{key:"render",value:function(){var e=this.context.volume;return l["default"].createElement("input",{id:this.props.id,className:this.props.className,type:"range",step:"any",min:0,max:1,value:e,onMouseUp:this._handleSetVolume,onChange:this._handleSetVolume,style:{backgroundSize:100*e/1+"% 100%"}})}}]),t}(s.Component);c.contextTypes={volume:s.PropTypes.number,setVolume:s.PropTypes.func},t["default"]=c},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(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 a(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 i=function(){function e(e,t){for(var n=0;nl;l++)s[l]=arguments[l];return n=o=u(this,(e=Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),o._handleFullscreen=function(){o.context.fullscreen()},a=n,u(o,a)}return a(t,e),i(t,[{key:"render",value:function(){return l["default"].createElement("button",{id:this.props.id,className:this.props.className,type:"button",onClick:this._handleFullscreen},this.context.isFullscreen?"Exit Fullscreen":"Fullscreen")}}]),t}(s.Component);c.contextTypes={fullscreen:s.PropTypes.func,isFullscreen:s.PropTypes.bool},t["default"]=c},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0}),t.formatTime=void 0;var r=n(18),u=o(r);t.formatTime=u["default"]}])}); \ No newline at end of file diff --git a/lib/controls/SeekBar.js b/lib/controls/SeekBar.js index 50e0f6a..2984786 100644 --- a/lib/controls/SeekBar.js +++ b/lib/controls/SeekBar.js @@ -35,13 +35,19 @@ var SeekBar = function (_Component) { return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(SeekBar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this._playingOnMouseDown = false, _this._handleMouseDown = function () { _this._playingOnMouseDown = _this.context.isPlaying; _this.context.pause(); - }, _this._handleMouseUp = function () { + }, _this._handleMouseUp = function (_ref) { + var value = _ref.target.value; + + // seek on mouseUp as well because of this bug in <= IE11 + // https://github.com/facebook/react/issues/554 + _this.context.seekTo(+value); + // only play if media was playing prior to mouseDown if (_this._playingOnMouseDown) { _this.context.play(); } - }, _this._handleChange = function (_ref) { - var value = _ref.target.value; + }, _this._handleChange = function (_ref2) { + var value = _ref2.target.value; _this.context.seekTo(+value); }, _temp), _possibleConstructorReturn(_this, _ret); @@ -50,16 +56,23 @@ var SeekBar = function (_Component) { _createClass(SeekBar, [{ key: "render", value: function render() { + var _context = this.context; + var duration = _context.duration; + var currentTime = _context.currentTime; + return _react2.default.createElement("input", { id: this.props.id, className: this.props.className, type: "range", step: "any", - max: this.context.duration.toFixed(4), - value: this.context.currentTime, + max: duration.toFixed(4), + value: currentTime, onMouseDown: this._handleMouseDown, onMouseUp: this._handleMouseUp, - onChange: this._handleChange + onChange: this._handleChange, + style: { + backgroundSize: currentTime * 100 / duration + '% 100%' + } }); } }]); diff --git a/lib/controls/Volume.js b/lib/controls/Volume.js index c7e6811..d7c4269 100644 --- a/lib/controls/Volume.js +++ b/lib/controls/Volume.js @@ -32,7 +32,7 @@ var Volume = function (_Component) { args[_key] = arguments[_key]; } - return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Volume)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this._handleChange = function (_ref) { + return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Volume)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this._handleSetVolume = function (_ref) { var value = _ref.target.value; _this.context.setVolume((+value).toFixed(4)); @@ -42,6 +42,8 @@ var Volume = function (_Component) { _createClass(Volume, [{ key: "render", value: function render() { + var volume = this.context.volume; + return _react2.default.createElement("input", { id: this.props.id, className: this.props.className, @@ -49,8 +51,12 @@ var Volume = function (_Component) { step: "any", min: 0, max: 1, - value: this.context.volume, - onChange: this._handleChange + value: volume, + onMouseUp: this._handleSetVolume, + onChange: this._handleSetVolume, + style: { + backgroundSize: volume * 100 / 1 + '% 100%' + } }); } }]); diff --git a/package.json b/package.json index 23baf4c..01ea688 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-media-player", - "version": "0.3.1", + "version": "0.3.2", "description": "React media player.", "main": "lib/react-media-player.js", "scripts": { @@ -47,7 +47,7 @@ "react": "^0.14.7", "react-dom": "^0.14.7", "react-motion": "^0.4.2", - "react-motion-ui-pack": "^0.6.0", + "react-motion-ui-pack": "^0.6.1", "sass-loader": "^1.0.2", "style-loader": "^0.12.3", "webpack": "^1.9.12",