@cassette/core - npm Package Compare versions

Comparing version 2.0.0-alpha.7 to 2.0.0-alpha.8

dist/es5/cassette-core.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("prop-types"),require("react")):"function"==typeof define&&define.amd?define(["prop-types","react"],t):"object"==typeof exports?exports.cassetteCore=t(require("prop-types"),require("react")):e.cassetteCore=t(e.PropTypes,e.React)}("undefined"!=typeof self?self:this,function(e,t){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var a=t[r]={i:r,l:!1,exports:{}};return e[r].call(a.exports,a,a.exports,n),a.l=!0,a.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)n.d(r,a,function(t){return e[t]}.bind(null,a));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/dist",n(n.s=7)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t,n){"use strict";n.d(t,"a",function(){return a}),n.d(t,"b",function(){return i});var r=console.log.bind(console),a=console.error?console.error.bind(console):r,i=console.warn?console.warn.bind(console):r},function(e,t,n){"use strict";(function(e){var r=n(1),a=n(2),i=n(6).version,s="undefined"==typeof window?e:window;s.__cassette_contexts__=s.__cassette_contexts__||{},t.a=function(e,t){void 0===t&&(t=null);var n=s.__cassette_contexts__[e];if(n)return n.packageVersion!==i&&Object(a.b)("Warning: multiple versions of "+e+" from the @cassette/core package have been loaded. v"+i+" will be ignored and v"+n.packageVersion+" will be used instead."),n;var o=Object(r.createContext)(t);return o.displayName=e,o.packageVersion=i,s.__cassette_contexts__[e]=o,o}}).call(this,n(5))},function(e,t,n){"use strict";e.exports=function(e,t,n){if("function"==typeof Array.prototype.findIndex)return e.findIndex(t,n);if("function"!=typeof t)throw new TypeError("predicate must be a function");var r=Object(e),a=r.length;if(0===a)return-1;for(var i=0;i<a;i++)if(t.call(n,r[i],i,r))return i;return-1}},function(e,t){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(n=window)}e.exports=n},function(e){e.exports={name:"@cassette/core",version:"2.0.0-alpha.7",description:"A simple, clean, and responsive visual wrapper for the HTML audio tag, built with React.",main:"dist/es5/cassette-core.js",scripts:{"build:clean":"rimraf dist","build:webpack":"BUILD_MODE=all webpack --progress",build:"npm run build:clean && npm run build:webpack",prepare:"npm run build",test:'echo "Error: no test specified" && exit 1'},repository:{type:"git",url:"https://github.com/benwiley4000/cassette.git"},engines:{node:">=6.0.0",npm:">=5.0.0"},keywords:["audio","video","media","ui","react","reactjs","responsive","music","player","html5","component","components"],author:{name:"Ben Wiley",email:"[e-mail]",url:"http://benwiley.org/"},license:"MIT",peerDependencies:{react:"^16.3.0"},devDependencies:{"array-find-index":"^1.0.2",rimraf:"^2.5.4",webpack:"^4.17.1"},dependencies:{"prop-types":"^15.5.10"},publishConfig:{access:"public"},gitHead:"d3fce0b83c06f6000b6988bd9d75bbae34f97737"}},function(e,t,n){"use strict";n.r(t);var r={};n.r(r),n.d(r,"controlKeyword",function(){return g}),n.d(r,"control",function(){return y}),n.d(r,"crossOriginAttribute",function(){return b}),n.d(r,"repeatStrategy",function(){return v}),n.d(r,"mediaSource",function(){return k}),n.d(r,"mediaSessionAction",function(){return S}),n.d(r,"mediaSessionArtwork",function(){return w}),n.d(r,"track",function(){return P}),n.d(r,"progressDirection",function(){return T}),n.d(r,"seekMode",function(){return x}),n.d(r,"aspectRatio",function(){return O});var a=n(1),i=n.n(a),s=n(0),o=n.n(s),l=n(4),u=n.n(l),c=n(3),d=Object(c.a)("PlayerContext"),p=Object(c.a)("GroupContext"),h=["none","playlist","track"],f=n(2);function m(e,t){var n=!1;return function(r,a,i){if(a in r){!n&&t in r&&(Object(f.b)("Do not define both the '"+a+"' and '"+t+"' props."),n=!0);for(var s=arguments.length,o=new Array(s>3?s-3:0),l=3;l<s;l++)o[l-3]=arguments[l];return e.isRequired.apply(e,[r,a,i].concat(o))}if(!(t in r))return new Error("If the '"+t+"' prop is not defined, '"+a+"' must be.")}}var g=o.a.oneOf(["playpause","backskip","forwardskip","volume","mute","repeat","shuffle","progress","progressdisplay","fullscreen","spacer"]),y=o.a.oneOfType([o.a.func,g]),b=o.a.oneOf(["anonymous","use-credentials"]),v=o.a.oneOf(h),k=o.a.shape({src:o.a.string.isRequired,type:o.a.string.isRequired}),S=o.a.oneOf(["play","pause","previoustrack","nexttrack","seekbackward","seekforward"]),w=o.a.shape({src:o.a.string.isRequired,sizes:o.a.string,type:o.a.string}),P=o.a.shape({url:m(o.a.string,"sources"),sources:m(o.a.arrayOf(k.isRequired),"url"),title:o.a.string.isRequired,artist:o.a.string,album:o.a.string,artwork:o.a.arrayOf(w.isRequired),meta:o.a.object}),T=o.a.oneOf(["left","right","up","down"]),x=o.a.oneOf(["paused","immediate","onrelease"]);function O(e,t){var n=e[t];if(void 0!==n)return"string"!=typeof n||2!==n.split(":").length||n.split(":").some(isNaN)?new Error("The "+t+" prop should be a string of the form 'x:y'. Example: 16:9"):void 0}var R="loopchange",E="srcrequest";var M=function(e){return void 0===e&&(e=document.createElement("media")),new MutationObserver(function(){e.dispatchEvent(new Event(R))}).observe(e,{attributeFilter:["loop"]}),Object.defineProperty(e,"src",{get:function(){return e.currentSrc},set:function(t){var n=new Event(E);n.srcRequested=t,e.dispatchEvent(n)}}),e};function C(e,t,n,r){for(var a=r,i=0;i<e;i++){if(!t.length)throw C(i,n,t,a),"Moving "+e+" places was not possible!";n.push(a),a=t.pop()}return a}function _(e,t,n,r,a){var i=r;if(e.length){for(var s=1;s<=t.length;s++)if(-1!==e.indexOf(t[t.length-s]))return C(s,t,n,i);if(a){if(function(e,t){if(!e.length)return!1;for(var n=0;n<e.length;n++)if(t!==e[n])return!1;return!0}(e,i))return i;var o;do{o=e[Math.floor(Math.random()*e.length)]}while(i===o||void 0===o);return void 0!==(i=C(t.length,t,n,i))&&n.push(i),o}}}var I=function(){function e(e,t){void 0===t&&(t={}),this._list=e,this._forwardStack=[],this._backStack=[],this._currentItem=void 0,this._allowBackShuffle=Boolean(t.allowBackShuffle)}var t=e.prototype;return t.findNextItem=function(e){return void 0!==e&&this.setCurrentIndex(e),this._currentItem=_(this._list,this._forwardStack,this._backStack,this._currentItem,!0),this._currentItem},t.findPreviousItem=function(e){return void 0!==e&&this.setCurrentIndex(e),this._currentItem=_(this._list,this._backStack,this._forwardStack,this._currentItem,this._allowBackShuffle),this._currentItem},t.pickNextItem=function(e,t){if(void 0!==t&&this.setCurrentIndex(t),void 0!==this._list[e])return void 0!==this._currentItem&&this._backStack.push(this._currentItem),this._forwardStack.length=0,this._currentItem=this._list[e],this._currentItem},t.setList=function(e){this._list=e},t.setOptions=function(e){for(var t=Object.keys(e),n=0;n<t.length;n++){var r=t[n];switch(r){case"allowBackShuffle":this["_"+r]=Boolean(e[r])}}},t.setCurrentIndex=function(e){var t=this._list[e];this._currentItem!==t&&(this.clear(),this._currentItem=t)},t.clear=function(){this._forwardStack.length=0,this._backStack.length=0,this._currentItem=void 0},e}();var q=function(e){return Boolean(e&&e.length)},F=[{src:""}];var j=function(e,t){if(!q(e))return F;var n=e[t],r=n.sources,a=n.url;return r?r.length?r:F:[{src:a}]};var L=function(e,t){return u()(e,function(e){return e.sources?-1!==u()(e.sources,function(e){return e.src===t}):e.url&&t===e.url})};var V=function(e){return(e||[]).map(function(t,n){return j(e,n)[0].src})};var D=function(e){for(var t=Array(e.length),n=0;n<e.length;n++)t[n]={start:e.start(n),end:e.end(n)};return t};var B=function(e,t){return e?"track":t?"playlist":"none"};var A=function(e,t,n){return t="number"==typeof t?t:-1/0,n="number"==typeof n?n:1/0,Math.max(t,Math.min(e,n))};var N=function(e,t,n){var r=t.getContext("2d"),a=null,i=null,s=null,o=null;return a=requestAnimationFrame(function l(){var u=e.videoWidth,c=e.videoHeight,d=e,p=u,h=c,f=u,m=c,g=!0;f&&m||!o||(d=o,p=o.naturalWidth,h=o.naturalHeight,f=o.naturalWidth,m=o.naturalHeight,g=!1),i&&s?(f=i,m=s):i?(f=i,m=i/p*h):s&&(m=s,f=s/h*p),t.width===f&&t.height===m||(t.width=f,t.height=m),r.drawImage(d,0,0,f,m),n&&n(r,g),a=requestAnimationFrame(l)}),{endStream:function(){cancelAnimationFrame(a)},setCanvasSize:function(e,t){i=e||null,s=t||null},setPlaceholderImage:function(e){o=e||null}}};function z(){return(z=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function W(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){U(e,t,n[t])})}return e}function U(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function H(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function G(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function K(e){if(Object(f.a)(e),"NotAllowedError"===e.name){var t="Media playback failed at "+(new Date).toLocaleTimeString()+"! (Perhaps autoplay is disabled in this browser.)";Object(f.b)(t)}}var J=["previoustrack","nexttrack","seekbackward","seekforward"],Q={paused:!0,currentTime:0,seekPreviewTime:0,seekInProgress:!1,awaitingResumeOnSeekComplete:!1,duration:0,bufferedRanges:[],playedRanges:[],seekableRanges:[],stalled:!1,awaitingPlay:!1};function X(e,t,n){void 0===n&&(n=!0);var r=e.activeTrackIndex!==t;return{activeTrackIndex:t,trackLoading:r,currentTime:0,loop:!r&&e.loop,awaitingPlay:Boolean(n),paused:!n}}var Y=function(e){function t(t){var n;return(n=e.call(this,t)||this).state=W({},Q,{activeTrackIndex:A(t.startingTrackIndex,0),trackLoading:q(t.playlist),currentTime:A(t.startingTime,0),volume:A(t.defaultVolume,0,1),muted:t.defaultMuted,loop:"track"===t.defaultRepeatStrategy,cycle:"playlist"===t.defaultRepeatStrategy,shuffle:t.defaultShuffle,playbackRate:t.defaultPlaybackRate,setVolumeInProgress:!1,awaitingPlay:t.autoplay&&q(t.playlist),__playlist__:t.playlist},t.initialStateSnapshot?function(e,t){var n=e.__unstable__,r=n.paused,a=n.currentTime,i=n.activeTrackIndex,s=n.volume,o=n.muted,l=n.loop,u=n.cycle,c=n.shuffle,d=n.playbackRate,p=n.activeTrackSrc,h={};q(t.playlist)&&"boolean"==typeof r&&(h.awaitingPlay=!r),"number"==typeof s&&s>=0&&s<=1&&(h.volume=s),"boolean"==typeof o&&(h.muted=o),"boolean"==typeof l&&(h.loop=l),"boolean"==typeof u&&(h.cycle=u),"boolean"==typeof c&&(h.shuffle=c),"number"==typeof d&&(h.playbackRate=d);var f=!1;if("string"==typeof p&&"number"==typeof i&&i>=0)if(p===j(t.playlist,i)[0].src)h.activeTrackIndex=i,f=!0;else{var m=L(t.playlist,p);-1!==m&&(h.activeTrackIndex=m,f=!0)}return f&&"number"==typeof a&&a>=0&&(h.currentTime=a),h}(t.initialStateSnapshot,t):{}),n.lastStableVolume=n.state.volume,n.shuffler=new I(V(t.playlist),{allowBackShuffle:t.allowBackShuffle}),n.media=null,n.setMediaElementRef=n.setMediaElementRef.bind(G(n)),n.togglePause=n.togglePause.bind(G(n)),n.selectTrackIndex=n.selectTrackIndex.bind(G(n)),n.forwardSkip=n.forwardSkip.bind(G(n)),n.backSkip=n.backSkip.bind(G(n)),n.seekPreview=n.seekPreview.bind(G(n)),n.seekComplete=n.seekComplete.bind(G(n)),n.setVolume=n.setVolume.bind(G(n)),n.setVolumeComplete=n.setVolumeComplete.bind(G(n)),n.toggleMuted=n.toggleMuted.bind(G(n)),n.toggleShuffle=n.toggleShuffle.bind(G(n)),n.setRepeatStrategy=n.setRepeatStrategy.bind(G(n)),n.setPlaybackRate=n.setPlaybackRate.bind(G(n)),n.pipeVideoStreamToCanvas=n.pipeVideoStreamToCanvas.bind(G(n)),n.handleMediaPlay=n.handleMediaPlay.bind(G(n)),n.handleMediaPause=n.handleMediaPause.bind(G(n)),n.handleMediaSrcrequest=n.handleMediaSrcrequest.bind(G(n)),n.handleMediaEnded=n.handleMediaEnded.bind(G(n)),n.handleMediaStalled=n.handleMediaStalled.bind(G(n)),n.handleMediaCanplaythrough=n.handleMediaCanplaythrough.bind(G(n)),n.handleMediaTimeupdate=n.handleMediaTimeupdate.bind(G(n)),n.handleMediaLoadedmetadata=n.handleMediaLoadedmetadata.bind(G(n)),n.handleMediaVolumechange=n.handleMediaVolumechange.bind(G(n)),n.handleMediaDurationchange=n.handleMediaDurationchange.bind(G(n)),n.handleMediaProgress=n.handleMediaProgress.bind(G(n)),n.handleMediaLoopchange=n.handleMediaLoopchange.bind(G(n)),n.handleMediaRatechange=n.handleMediaRatechange.bind(G(n)),n}H(t,e);var n=t.prototype;return n.componentDidMount=function(){var e=this,t=this.media=M(this.media);0!==t.readyState&&(t.currentTime=this.state.currentTime),t.volume=this.state.volume,t.muted=this.state.muted,t.defaultPlaybackRate=this.props.defaultPlaybackRate,t.playbackRate=this.state.playbackRate,t.addEventListener("srcrequest",this.handleMediaSrcrequest),t.addEventListener("loopchange",this.handleMediaLoopchange),this.state.awaitingPlay&&(this.setState({awaitingPlay:!1}),this.delayTimeout=setTimeout(function(){e.togglePause(!1)},1e3*this.props.autoplayDelayInSeconds))},t.getDerivedStateFromProps=function(e,t){var n=e.playlist;if(n===t.__playlist__)return null;var r={__playlist__:n};if(!q(n))return W({},Q,r,{activeTrackIndex:0,trackLoading:!1});var a=j(t.__playlist__,t.activeTrackIndex),i=j(n,t.activeTrackIndex);if(a[0].src===i[0].src)return r;var s=L(n,a[0].src);return W({},r,-1!==s?{activeTrackIndex:s}:X(t,0,!1))},n.componentDidUpdate=function(e,t){var n=this;this.media.defaultPlaybackRate=this.props.defaultPlaybackRate,this.shuffler.setList(V(this.props.playlist)),this.shuffler.setOptions({allowBackShuffle:this.props.allowBackShuffle});var r=j(e.playlist,t.activeTrackIndex),a=j(this.props.playlist,this.state.activeTrackIndex);r[0].src!==a[0].src&&(this.media.load(),this.state.shuffle||this.shuffler.clear()),e===this.props||this.media.paused||this.stealMediaSession(),this.state.awaitingPlay&&(this.setState({awaitingPlay:!1}),setTimeout(function(){n.togglePause(!1)})),clearTimeout(this.snapshotUpdateTimeout),this.snapshotUpdateTimeout=setTimeout(function(){n.props.onStateSnapshot&&n.props.onStateSnapshot(function(e){var t=e.paused,n=e.currentTime,r=e.activeTrackIndex,a=e.volume,i=e.muted,s=e.loop,o=e.cycle,l=e.shuffle,u=e.playbackRate,c=e.__playlist__;return{__unstable__:{paused:t,currentTime:n,activeTrackIndex:r,volume:a,muted:i,loop:s,cycle:o,shuffle:l,playbackRate:u,activeTrackSrc:q(c)?j(c,r)[0].src:null}}}(n.state))},100)},n.componentWillUnmount=function(){var e=this.media;e.removeEventListener("srcrequest",this.handleMediaSrcrequest),e.removeEventListener("loopchange",this.handleMediaLoopchange),clearTimeout(this.gapLengthTimeout),clearTimeout(this.delayTimeout)},n.setMediaElementRef=function(e){this.media=e,"function"==typeof this.props.mediaElementRef&&this.props.mediaElementRef(e)},n.stealMediaSession=function(){var e=this;window.MediaSession&&navigator.mediaSession instanceof MediaSession&&(navigator.mediaSession.metadata=new MediaMetadata(this.props.playlist[this.state.activeTrackIndex]),J.map(function(t){if(-1===e.props.supportedMediaSessionActions.indexOf(t))return null;var n=e.props.mediaSessionSeekLengthInSeconds;switch(t){case"play":return e.togglePause.bind(e,!1);case"pause":return e.togglePause.bind(e,!0);case"previoustrack":return e.backSkip;case"nexttrack":return e.forwardSkip;case"seekbackward":return function(){return e.media.currentTime-=n};case"seekforward":return function(){return e.media.currentTime+=n};default:return}}).forEach(function(e,t){navigator.mediaSession.setActionHandler(J[t],e)}))},n.pipeVideoStreamToCanvas=function(e,t){return N(this.media,e,t)},n.handleMediaPlay=function(){this.setState(function(e){return!1===e.paused?null:{paused:!1}}),this.stealMediaSession()},n.handleMediaPause=function(){this.setState(function(e){return!0===e.paused?null:{paused:!0}})},n.handleMediaSrcrequest=function(e){var t=this.props.playlist,n=j(t,this.state.activeTrackIndex);if(-1===u()(n,function(t){return t.src===e.srcRequested})){var r=L(t,e.srcRequested);-1!==r?this.selectTrackIndex(r):Object(f.a)("Source '"+e.srcRequested+"' does not exist in the loaded playlist. Make sure you've updated the 'playlist' prop to PlayerContextProvider before you select this track!")}},n.handleMediaEnded=function(){if(!this.state.seekInProgress){clearTimeout(this.gapLengthTimeout);var e=this.props,t=e.playlist,n=e.loadFirstTrackOnPlaylistComplete;if(q(t)){var r=this.state,a=r.cycle,i=r.activeTrackIndex;!a&&i+1>=t.length?n&&this.goToTrack(0,!1):this.gapLengthTimeout=setTimeout(this.forwardSkip,1e3*this.props.gapLengthInSeconds)}}},n.handleMediaStalled=function(){this.setState(function(e){return!0===e.stalled?null:{stalled:!0}})},n.handleMediaCanplaythrough=function(){this.setState(function(e){return!1===e.stalled?null:{stalled:!1}})},n.handleMediaTimeupdate=function(){var e=this.media,t=e.currentTime,n=e.played;this.setState({currentTime:t,playedRanges:D(n)})},n.handleMediaLoadedmetadata=function(){this.media.currentTime!==this.state.currentTime&&(this.media.currentTime=this.state.currentTime),this.setState(function(e){return!1===e.trackLoading?null:{trackLoading:!1}})},n.handleMediaVolumechange=function(){var e=this.media,t=e.volume,n=e.muted;this.setState({volume:t,muted:n})},n.handleMediaDurationchange=function(){var e=this.media.duration;this.setState({duration:e})},n.handleMediaProgress=function(){this.setState({bufferedRanges:D(this.media.buffered),seekableRanges:D(this.media.seekable)})},n.handleMediaLoopchange=function(){var e=this.media.loop;this.setState(function(t){return t.loop===e?null:{loop:e}})},n.handleMediaRatechange=function(){var e=this.media.playbackRate;this.setState(function(t){return t.playbackRate===e?null:{playbackRate:e}})},n.togglePause=function(e){if(clearTimeout(this.delayTimeout),"boolean"==typeof e?e:!this.state.paused)this.media.pause();else if(this.media.currentSrc)try{var t=this.media.play();t&&"function"==typeof t.catch&&t.catch(function(e){if("AbortError"!==e.name)return Promise.reject(e)}).catch(K)}catch(e){K(e)}},n.goToTrack=function(e,t){void 0===t&&(t=!0),clearTimeout(this.delayTimeout),this.setState(function(n){return X(n,e,t)})},n.selectTrackIndex=function(e){var t=this.props.playlist;q(t)&&(e<0||e>t.length?Object(f.b)("Playlist index "+e+" is out of bounds!"):(this.state.shuffle&&this.shuffler.pickNextItem(e,this.state.activeTrackIndex),this.goToTrack(e)))},n.backSkip=function(){var e=this.props,t=e.playlist,n=e.stayOnBackSkipThreshold,r=this.media,a=this.state,i=a.cycle,s=a.activeTrackIndex,o=a.shuffle;if(!q(t)||r.currentTime>=n||!i&&s<1)r.currentTime=0;else{var l;if(o){var u=this.shuffler.findPreviousItem(s);if(void 0===u)return void(r.currentTime=0);l=L(t,u)}else(l=s-1)<0&&(l=t.length-1);this.goToTrack(l)}},n.forwardSkip=function(){var e,t=this.props.playlist,n=this.state,r=n.cycle,a=n.activeTrackIndex,i=n.shuffle;!q(t)||!r&&a+1>=t.length||(i?e=L(t,this.shuffler.findNextItem(a)):(e=a+1)>=t.length&&(e=0),this.goToTrack(e))},n.seekPreview=function(e){if(q(this.props.playlist)){var t={seekPreviewTime:e,seekInProgress:!0};switch(this.props.seekMode){case"paused":this.setState(function(e){var n=e.paused,r=e.awaitingResumeOnSeekComplete;return W({},t,{awaitingResumeOnSeekComplete:!n||r})}),this.media.currentTime=e,this.state.paused||this.togglePause(!0);break;case"immediate":this.setState(function(e){var n=e.paused,r=e.awaitingResumeOnSeekComplete;return W({},t,{awaitingResumeOnSeekComplete:!n||r})}),this.media.currentTime=e,this.state.awaitingResumeOnSeekComplete&&!this.media.ended&&this.togglePause(!1);break;case"onrelease":this.setState(t)}}},n.seekComplete=function(e){var t=this.state,n=t.seekPreviewTime,r=t.awaitingResumeOnSeekComplete,a={seekInProgress:!1,awaitingResumeOnSeekComplete:!1},i="number"==typeof e?e:n;isNaN(i)?this.setState(a):(this.setState(W({},a,{currentTime:i})),this.media.currentTime=i,r&&(this.media.ended?this.forwardSkip():this.togglePause(!1)))},n.setVolume=function(e){this.state.setVolumeInProgress||this.setState({setVolumeInProgress:!0});var t=A(e,0,1);this.media.muted=0===t,this.media.volume=t},n.setVolumeComplete=function(){this.setState({setVolumeInProgress:!1}),this.media.muted||(this.lastStableVolume=this.media.volume)},n.toggleMuted=function(e){var t="boolean"==typeof e?e:!this.state.muted;this.media.muted=t,t||(this.media.volume=this.lastStableVolume)},n.toggleShuffle=function(e){var t="boolean"==typeof e?e:!this.state.shuffle;this.setState({shuffle:t})},n.setRepeatStrategy=function(e){-1!==h.indexOf(e)?this.setState(function(){switch(e){case"track":return{loop:!0};case"playlist":return{loop:!1,cycle:!0};case"none":return{loop:!1,cycle:!1};default:return null}}):Object(f.b)('repeatStrategy "'+e+'" is not one of: '+h.split(", ")+".")},n.setPlaybackRate=function(e){this.media.playbackRate=e},n.getControlProps=function(){var e=this.props,t=this.state,n={playlist:e.playlist,activeTrackIndex:t.activeTrackIndex,trackLoading:t.trackLoading,paused:t.paused,currentTime:t.currentTime,seekPreviewTime:t.seekPreviewTime,seekInProgress:t.seekInProgress,awaitingResumeOnSeekComplete:t.awaitingResumeOnSeekComplete,duration:t.duration,bufferedRanges:t.bufferedRanges,playedRanges:t.playedRanges,seekableRanges:t.seekableRanges,volume:t.volume,muted:t.muted,shuffle:t.shuffle,stalled:t.stalled,playbackRate:t.playbackRate,setVolumeInProgress:t.setVolumeInProgress,repeatStrategy:B(t.loop,t.cycle),pipeVideoStreamToCanvas:this.pipeVideoStreamToCanvas,onTogglePause:this.togglePause,onSelectTrackIndex:this.selectTrackIndex,onBackSkip:this.backSkip,onForwardSkip:this.forwardSkip,onSeekPreview:this.seekPreview,onSeekComplete:this.seekComplete,onSetVolume:this.setVolume,onSetVolumeComplete:this.setVolumeComplete,onToggleMuted:this.toggleMuted,onToggleShuffle:this.toggleShuffle,onSetRepeatStrategy:this.setRepeatStrategy,onSetPlaybackRate:this.setPlaybackRate};if(this.playerContext)for(var r=Object.keys(this.playerContext),a=0;a<r.length;a++){var i=r[a];if(n[i]!==this.playerContext[i]){this.playerContext=n;break}}else this.playerContext=n;return this.playerContext},n.render=function(){var e=j(this.props.playlist,this.state.activeTrackIndex),t=this.getControlProps();return i.a.createElement(a.Fragment,null,i.a.createElement("video",{hidden:!0,playsInline:!0,ref:this.setMediaElementRef,crossOrigin:this.props.crossOrigin,preload:"metadata",loop:this.state.loop,onPlay:this.handleMediaPlay,onPause:this.handleMediaPause,onEnded:this.handleMediaEnded,onStalled:this.handleMediaStalled,onCanPlayThrough:this.handleMediaCanplaythrough,onTimeUpdate:this.handleMediaTimeupdate,onLoadedMetadata:this.handleMediaLoadedmetadata,onVolumeChange:this.handleMediaVolumechange,onDurationChange:this.handleMediaDurationchange,onProgress:this.handleMediaProgress,onRateChange:this.handleMediaRatechange},e.map(function(e){return i.a.createElement("source",{key:e.src,src:e.src,type:e.type})})),i.a.createElement(d.Provider,{value:t},"function"==typeof this.props.children?this.props.children(t):this.props.children))},t}(a.Component);Y.propTypes={playlist:o.a.arrayOf(P.isRequired).isRequired,autoplay:o.a.bool.isRequired,autoplayDelayInSeconds:o.a.number.isRequired,gapLengthInSeconds:o.a.number.isRequired,crossOrigin:b,defaultVolume:o.a.number.isRequired,defaultMuted:o.a.bool,defaultRepeatStrategy:v.isRequired,defaultShuffle:o.a.bool,defaultPlaybackRate:o.a.number.isRequired,startingTime:o.a.number.isRequired,startingTrackIndex:o.a.number.isRequired,loadFirstTrackOnPlaylistComplete:o.a.bool,seekMode:x.isRequired,maintainPlaybackRate:o.a.bool.isRequired,allowBackShuffle:o.a.bool,stayOnBackSkipThreshold:o.a.number.isRequired,supportedMediaSessionActions:o.a.arrayOf(S.isRequired).isRequired,mediaSessionSeekLengthInSeconds:o.a.number.isRequired,mediaElementRef:o.a.func,initialStateSnapshot:o.a.shape({__unstable__:o.a.object.isRequired}),onStateSnapshot:o.a.func,children:o.a.oneOfType([o.a.node,o.a.func]).isRequired},Y.defaultProps={autoplay:!1,autoplayDelayInSeconds:0,gapLengthInSeconds:0,defaultVolume:1,defaultMuted:!1,defaultRepeatStrategy:"playlist",defaultShuffle:!1,defaultPlaybackRate:1,startingTime:0,startingTrackIndex:0,loadFirstTrackOnPlaylistComplete:!0,seekMode:"immediate",maintainPlaybackRate:!1,allowBackShuffle:!1,stayOnBackSkipThreshold:5,supportedMediaSessionActions:["play","pause","previoustrack","nexttrack"],mediaSessionSeekLengthInSeconds:10};var Z=function(e){function t(){return e.apply(this,arguments)||this}H(t,e);var n=t.prototype;return n.componentDidMount=function(){this.props.groupContext.registerMediaElement(this.mediaElement)},n.componentWillUnmount=function(){this.props.groupContext.unregisterMediaElement(this.mediaElement)},n.render=function(){var e=this,t=this.props,n=t.groupContext,r=t.props,a=r.mediaElementRef,s=function(e,t){if(null==e)return{};var n,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(a[n]=e[n]);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r<s.length;r++)n=s[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}(r,["mediaElementRef"]);return i.a.createElement(Y,z({},n.groupProps,s,{mediaElementRef:function(t){a&&a(t),e.mediaElement=t}}))},t}(a.Component);Z.propTypes={groupContext:o.a.shape({groupProps:o.a.object.isRequired,registerMediaElement:o.a.func.isRequired,unregisterMediaElement:o.a.func.isRequired}).isRequired};var $=function(e){return i.a.createElement(p.Consumer,null,function(t){return t?Object(a.createElement)(Z,{groupContext:t,props:e}):Object(a.createElement)(Y,e)})};function ee(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){te(e,t,n[t])})}return e}function te(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function ne(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var re=function(e){function t(t){var n;return(n=e.call(this,t)||this).registerMediaElement=n.registerMediaElement.bind(ne(n)),n.unregisterMediaElement=n.unregisterMediaElement.bind(ne(n)),n.enforceOneMediaSourceOnly=n.enforceOneMediaSourceOnly.bind(ne(n)),n.mediaElements=[],n}!function(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}(t,e);var n=t.prototype;return n.registerMediaElement=function(e){this.mediaElements=this.mediaElements.concat(e),e.addEventListener("play",this.enforceOneMediaSourceOnly,!0),e.addEventListener("volumechange",this.enforceOneMediaSourceOnly,!0)},n.unregisterMediaElement=function(e){this.mediaElements=this.mediaElements.filter(function(t){return e!==t}),e.removeEventListener("play",this.enforceOneMediaSourceOnly,!0),e.removeEventListener("volumechange",this.enforceOneMediaSourceOnly,!0)},n.enforceOneMediaSourceOnly=function(e){var t=e.target,n=t.paused,r=t.muted;if(!n&&!r){var a=this.mediaElements,i=Array.isArray(a),s=0;for(a=i?a:a[Symbol.iterator]();;){var o;if(i){if(s>=a.length)break;o=a[s++]}else{if((s=a.next()).done)break;o=s.value}var l=o;l===t||l.muted||l.pause()}}},n.render=function(){var e=this;return i.a.createElement(p.Consumer,null,function(t){var n=t?ee({},t,{groupProps:ee({},t.groupProps,e.props)}):{groupProps:e.props,registerMediaElement:e.registerMediaElement,unregisterMediaElement:e.unregisterMediaElement};return i.a.createElement(p.Provider,{value:n},e.props.children)})},t}(a.Component);re.propTypes={children:o.a.node.isRequired};var ae=re,ie=Object(c.a)("FullscreenContext",{fullscreen:!1,requestFullscreen:function(){Object(f.b)("Fullscreen request ignored since there is no FullscreenContextProvider ancestor.")},requestExitFullscreen:function(){Object(f.b)("Exit fullscreen request ignored since there is no FullscreenContextProvider ancestor.")}});function se(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var oe={width:"100%",height:"100%"},le=function(e){function t(t){var n;return(n=e.call(this,t)||this).state={fullscreen:!1},n.requestFullscreen=n.requestFullscreen.bind(se(n)),n.requestExitFullscreen=n.requestExitFullscreen.bind(se(n)),n.handleFullscreenChange=n.handleFullscreenChange.bind(se(n)),n.fullscreenElement=null,n}!function(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}(t,e);var n=t.prototype;return n.componentDidMount=function(){document.addEventListener("fullscreenchange",this.handleFullscreenChange),document.addEventListener("webkitfullscreenchange",this.handleFullscreenChange),document.addEventListener("mozfullscreenchange",this.handleFullscreenChange),document.addEventListener("msfullscreenchange",this.handleFullscreenChange)},n.componentWillUnmount=function(){document.removeEventListener("fullscreenchange",this.handleFullscreenChange),document.removeEventListener("webkitfullscreenchange",this.handleFullscreenChange),document.removeEventListener("mozfullscreenchange",this.handleFullscreenChange),document.removeEventListener("msfullscreenchange",this.handleFullscreenChange)},n.requestFullscreen=function(){this.props.fullscreenEnabled&&(this.fullscreenElement.requestFullscreen?this.fullscreenElement.requestFullscreen():this.fullscreenElement.webkitRequestFullscreen?this.fullscreenElement.webkitRequestFullscreen():this.fullscreenElement.mozRequestFullscreen?this.fullscreenElement.mozRequestFullScreen():this.fullscreenElement.msRequestFullscreen&&this.fullscreenElement.msRequestFullscreen())},n.requestExitFullscreen=function(){document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.webkitCancelFullScreen?document.webkitCancelFullScreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.msExitFullscreen&&document.mozExitFullscreen()},n.handleFullscreenChange=function(){var e=document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement||document.msFullscreenElement;this.setState({fullscreen:e===this.fullscreenElement})},n.getFullscreenContext=function(){var e={fullscreen:this.state.fullscreen,requestFullscreen:this.requestFullscreen,requestExitFullscreen:this.requestExitFullscreen};return this.fullscreenContext&&e.fullscreen===this.fullscreenContext.fullscreen?this.fullscreenContext:this.fullscreenContext=e},n.render=function(){var e=this,t=this.getFullscreenContext();return i.a.createElement("div",{ref:function(t){return e.fullscreenElement=t},style:this.state.fullscreen?oe:void 0},i.a.createElement(ie.Provider,{value:t},"function"==typeof this.props.children?this.props.children(t):this.props.children))},t}(a.PureComponent);le.propTypes={fullscreenEnabled:o.a.bool.isRequired,children:o.a.oneOfType([o.a.node,o.a.func]).isRequired},le.defaultProps={fullscreenEnabled:!0};var ue=le;function ce(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var de=function(e,t){var n={},r=e.displayName||e.name;function s(s){return i.a.createElement(ie.Consumer,null,function(o){return i.a.createElement(d.Consumer,null,function(i){var l=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){ce(e,t,n[t])})}return e}({},s),u=t,c=Array.isArray(u),d=0;for(u=c?u:u[Symbol.iterator]();;){var p;if(c){if(d>=u.length)break;p=u[d++]}else{if((d=u.next()).done)break;p=d.value}var h=p;i.hasOwnProperty(h)?l[h]=i[h]:o.hasOwnProperty(h)?l[h]=o[h]:n[h]||(Object(f.b)("Prop '"+h+"' for component "+r+" not found in playerContext or fullscreenContext."),n[h]=!0)}return Object(a.createElement)(e,l)})})}return r&&(s.displayName="PlayerContextFilter("+r+")"),s};n.d(t,"PlayerContextConsumer",function(){return pe}),n.d(t,"FullscreenContextConsumer",function(){return he}),n.d(t,"PlayerContextProvider",function(){return $}),n.d(t,"PlayerContextGroup",function(){return ae}),n.d(t,"FullscreenContextProvider",function(){return ue}),n.d(t,"playerContextFilter",function(){return de}),n.d(t,"PlayerPropTypes",function(){return r}),n.d(t,"logError",function(){return f.a}),n.d(t,"logWarning",function(){return f.b}),n.d(t,"convertToNumberWithinIntervalBounds",function(){return A}),n.d(t,"isPlaylistValid",function(){return q}),n.d(t,"repeatStrategyOptions",function(){return h});var pe=d.Consumer,he=ie.Consumer}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("prop-types"),require("react")):"function"==typeof define&&define.amd?define(["prop-types","react"],t):"object"==typeof exports?exports.cassetteCore=t(require("prop-types"),require("react")):e.cassetteCore=t(e.PropTypes,e.React)}("undefined"!=typeof self?self:this,function(e,t){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var a=t[r]={i:r,l:!1,exports:{}};return e[r].call(a.exports,a,a.exports,n),a.l=!0,a.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)n.d(r,a,function(t){return e[t]}.bind(null,a));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/dist",n(n.s=7)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t,n){"use strict";n.d(t,"a",function(){return a}),n.d(t,"b",function(){return i});var r=console.log.bind(console),a=console.error?console.error.bind(console):r,i=console.warn?console.warn.bind(console):r},function(e,t,n){"use strict";(function(e){var r=n(1),a=n(2),i=n(6).version,s="undefined"==typeof window?e:window;s.__cassette_contexts__=s.__cassette_contexts__||{},t.a=function(e,t){void 0===t&&(t=null);var n=s.__cassette_contexts__[e];if(n)return n.packageVersion!==i&&Object(a.b)("Warning: multiple versions of "+e+" from the @cassette/core package have been loaded. v"+i+" will be ignored and v"+n.packageVersion+" will be used instead."),n;var o=Object(r.createContext)(t);return o.displayName=e,o.packageVersion=i,s.__cassette_contexts__[e]=o,o}}).call(this,n(5))},function(e,t,n){"use strict";e.exports=function(e,t,n){if("function"==typeof Array.prototype.findIndex)return e.findIndex(t,n);if("function"!=typeof t)throw new TypeError("predicate must be a function");var r=Object(e),a=r.length;if(0===a)return-1;for(var i=0;i<a;i++)if(t.call(n,r[i],i,r))return i;return-1}},function(e,t){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(n=window)}e.exports=n},function(e){e.exports={name:"@cassette/core",version:"2.0.0-alpha.8",description:"A simple, clean, and responsive visual wrapper for the HTML audio tag, built with React.",main:"dist/es5/cassette-core.js",scripts:{"build:clean":"rimraf dist","build:webpack":"BUILD_MODE=all webpack --progress",build:"npm run build:clean && npm run build:webpack",prepare:"npm run build",test:'echo "Error: no test specified" && exit 1'},repository:{type:"git",url:"https://github.com/benwiley4000/cassette.git"},engines:{node:">=6.0.0",npm:">=5.0.0"},keywords:["audio","video","media","ui","react","reactjs","responsive","music","player","html5","component","components"],author:{name:"Ben Wiley",email:"[e-mail]",url:"http://benwiley.org/"},license:"MIT",peerDependencies:{react:"^16.3.0"},devDependencies:{"array-find-index":"^1.0.2",rimraf:"^2.5.4",webpack:"^4.17.1"},dependencies:{"prop-types":"^15.5.10"},publishConfig:{access:"public"},gitHead:"dd562013b527ca0b8bb7cba77e21b9565f449ba3"}},function(e,t,n){"use strict";n.r(t);var r={};n.r(r),n.d(r,"controlKeyword",function(){return g}),n.d(r,"control",function(){return v}),n.d(r,"crossOriginAttribute",function(){return y}),n.d(r,"repeatStrategy",function(){return b}),n.d(r,"mediaSource",function(){return k}),n.d(r,"mediaSessionAction",function(){return S}),n.d(r,"mediaSessionArtwork",function(){return E}),n.d(r,"track",function(){return w}),n.d(r,"progressDirection",function(){return T}),n.d(r,"seekMode",function(){return P}),n.d(r,"aspectRatio",function(){return O});var a=n(1),i=n.n(a),s=n(0),o=n.n(s),l=n(4),u=n.n(l),c=n(3),d=Object(c.a)("PlayerContext"),p=Object(c.a)("GroupContext"),h=["none","playlist","track"],f=n(2);function m(e,t){var n=!1;return function(r,a,i){if(a in r){!n&&t in r&&(Object(f.b)("Do not define both the '"+a+"' and '"+t+"' props."),n=!0);for(var s=arguments.length,o=new Array(s>3?s-3:0),l=3;l<s;l++)o[l-3]=arguments[l];return e.isRequired.apply(e,[r,a,i].concat(o))}if(!(t in r))return new Error("If the '"+t+"' prop is not defined, '"+a+"' must be.")}}var g=o.a.oneOf(["playpause","backskip","forwardskip","volume","mute","repeat","shuffle","progress","progressdisplay","fullscreen","spacer"]),v=o.a.oneOfType([o.a.func,g]),y=o.a.oneOf(["anonymous","use-credentials"]),b=o.a.oneOf(h),k=o.a.shape({src:o.a.string.isRequired,type:o.a.string.isRequired}),S=o.a.oneOf(["play","pause","previoustrack","nexttrack","seekbackward","seekforward"]),E=o.a.shape({src:o.a.string.isRequired,sizes:o.a.string,type:o.a.string}),w=o.a.shape({url:m(o.a.string,"sources"),sources:m(o.a.arrayOf(k.isRequired),"url"),title:o.a.string.isRequired,artist:o.a.string,album:o.a.string,artwork:o.a.arrayOf(E.isRequired),meta:o.a.object}),T=o.a.oneOf(["left","right","up","down"]),P=o.a.oneOf(["paused","immediate","onrelease"]);function O(e,t){var n=e[t];if(void 0!==n)return"string"!=typeof n||2!==n.split(":").length||n.split(":").some(isNaN)?new Error("The "+t+" prop should be a string of the form 'x:y'. Example: 16:9"):void 0}var x="loopchange",R="srcrequest";var M=function(){var e=document.createElement("video");return new MutationObserver(function(){e.dispatchEvent(new Event(x))}).observe(e,{attributeFilter:["loop"]}),Object.defineProperty(e,"src",{get:function(){return e.currentSrc},set:function(t){var n=new Event(R);n.srcRequested=t,e.dispatchEvent(n)}}),e};function C(e,t,n,r){for(var a=r,i=0;i<e;i++){if(!t.length)throw C(i,n,t,a),"Moving "+e+" places was not possible!";n.push(a),a=t.pop()}return a}function _(e,t,n,r,a){var i=r;if(e.length){for(var s=1;s<=t.length;s++)if(-1!==e.indexOf(t[t.length-s]))return C(s,t,n,i);if(a){if(function(e,t){if(!e.length)return!1;for(var n=0;n<e.length;n++)if(t!==e[n])return!1;return!0}(e,i))return i;var o;do{o=e[Math.floor(Math.random()*e.length)]}while(i===o||void 0===o);return void 0!==(i=C(t.length,t,n,i))&&n.push(i),o}}}var I=function(){function e(e,t){void 0===t&&(t={}),this._list=e,this._forwardStack=[],this._backStack=[],this._currentItem=void 0,this._allowBackShuffle=Boolean(t.allowBackShuffle)}var t=e.prototype;return t.findNextItem=function(e){return void 0!==e&&this.setCurrentIndex(e),this._currentItem=_(this._list,this._forwardStack,this._backStack,this._currentItem,!0),this._currentItem},t.findPreviousItem=function(e){return void 0!==e&&this.setCurrentIndex(e),this._currentItem=_(this._list,this._backStack,this._forwardStack,this._currentItem,this._allowBackShuffle),this._currentItem},t.pickNextItem=function(e,t){if(void 0!==t&&this.setCurrentIndex(t),void 0!==this._list[e])return void 0!==this._currentItem&&this._backStack.push(this._currentItem),this._forwardStack.length=0,this._currentItem=this._list[e],this._currentItem},t.setList=function(e){this._list=e},t.setOptions=function(e){for(var t=Object.keys(e),n=0;n<t.length;n++){var r=t[n];switch(r){case"allowBackShuffle":this["_"+r]=Boolean(e[r])}}},t.setCurrentIndex=function(e){var t=this._list[e];this._currentItem!==t&&(this.clear(),this._currentItem=t)},t.clear=function(){this._forwardStack.length=0,this._backStack.length=0,this._currentItem=void 0},e}();var q=function(e){return Boolean(e&&e.length)},F=[{src:""}];var L=function(e,t){if(!q(e))return F;var n=e[t],r=n.sources,a=n.url;return r?r.length?r:F:[{src:a}]};var j=function(e,t){return u()(e,function(e){return e.sources?-1!==u()(e.sources,function(e){return e.src===t}):e.url&&t===e.url})};var V=function(e){return(e||[]).map(function(t,n){return L(e,n)[0].src})};var H=function(e){for(var t=Array(e.length),n=0;n<e.length;n++)t[n]={start:e.start(n),end:e.end(n)};return t};var A=function(e,t){return e?"track":t?"playlist":"none"};var D=function(e,t,n){return t="number"==typeof t?t:-1/0,n="number"==typeof n?n:1/0,Math.max(t,Math.min(e,n))};function B(){return(B=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function N(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){U(e,t,n[t])})}return e}function U(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function z(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function W(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function G(e){if(Object(f.a)(e),"NotAllowedError"===e.name){var t="Media playback failed at "+(new Date).toLocaleTimeString()+"! (Perhaps autoplay is disabled in this browser.)";Object(f.b)(t)}}var K=["previoustrack","nexttrack","seekbackward","seekforward"],J={paused:!0,currentTime:0,seekPreviewTime:0,seekInProgress:!1,awaitingResumeOnSeekComplete:!1,duration:0,bufferedRanges:[],playedRanges:[],seekableRanges:[],stalled:!1,awaitingPlay:!1};function Q(e,t,n){void 0===n&&(n=!0);var r=e.activeTrackIndex!==t;return{activeTrackIndex:t,trackLoading:r,currentTime:0,loop:!r&&e.loop,awaitingPlay:Boolean(n),paused:!n}}function X(e,t){for(var n;n=e.firstChild;)e.removeChild(n);var r=t,a=Array.isArray(r),i=0;for(r=a?r:r[Symbol.iterator]();;){var s;if(a){if(i>=r.length)break;s=r[i++]}else{if((i=r.next()).done)break;s=i.value}var o=s,l=document.createElement("source");l.src=o.src,o.type&&(l.type=o.type),e.appendChild(l)}e.load()}var Y=function(e){function t(t){var n;return(n=e.call(this,t)||this).state=N({},J,{activeTrackIndex:D(t.startingTrackIndex,0),trackLoading:q(t.playlist),currentTime:D(t.startingTime,0),volume:D(t.defaultVolume,0,1),muted:t.defaultMuted,loop:"track"===t.defaultRepeatStrategy,cycle:"playlist"===t.defaultRepeatStrategy,shuffle:t.defaultShuffle,playbackRate:t.defaultPlaybackRate,setVolumeInProgress:!1,awaitingPlay:t.autoplay&&q(t.playlist),__playlist__:t.playlist},t.initialStateSnapshot?function(e,t){var n=e.__unstable__,r=n.paused,a=n.currentTime,i=n.activeTrackIndex,s=n.volume,o=n.muted,l=n.loop,u=n.cycle,c=n.shuffle,d=n.playbackRate,p=n.activeTrackSrc,h={};q(t.playlist)&&"boolean"==typeof r&&(h.awaitingPlay=!r),"number"==typeof s&&s>=0&&s<=1&&(h.volume=s),"boolean"==typeof o&&(h.muted=o),"boolean"==typeof l&&(h.loop=l),"boolean"==typeof u&&(h.cycle=u),"boolean"==typeof c&&(h.shuffle=c),"number"==typeof d&&(h.playbackRate=d);var f=!1;if("string"==typeof p&&"number"==typeof i&&i>=0)if(p===L(t.playlist,i)[0].src)h.activeTrackIndex=i,f=!0;else{var m=j(t.playlist,p);-1!==m&&(h.activeTrackIndex=m,f=!0)}return f&&"number"==typeof a&&a>=0&&(h.currentTime=a),h}(t.initialStateSnapshot,t):{}),n.lastStableVolume=n.state.volume,n.shuffler=new I(V(t.playlist),{allowBackShuffle:t.allowBackShuffle}),n.media=null,n.videoHostElementList=[],n.videoHostOccupiedCallbacks=new Map,n.videoHostVacatedCallbacks=new Map,n.togglePause=n.togglePause.bind(W(n)),n.selectTrackIndex=n.selectTrackIndex.bind(W(n)),n.forwardSkip=n.forwardSkip.bind(W(n)),n.backSkip=n.backSkip.bind(W(n)),n.seekPreview=n.seekPreview.bind(W(n)),n.seekComplete=n.seekComplete.bind(W(n)),n.setVolume=n.setVolume.bind(W(n)),n.setVolumeComplete=n.setVolumeComplete.bind(W(n)),n.toggleMuted=n.toggleMuted.bind(W(n)),n.toggleShuffle=n.toggleShuffle.bind(W(n)),n.setRepeatStrategy=n.setRepeatStrategy.bind(W(n)),n.setPlaybackRate=n.setPlaybackRate.bind(W(n)),n.registerVideoHostElement=n.registerVideoHostElement.bind(W(n)),n.renderVideoIntoHostElement=n.renderVideoIntoHostElement.bind(W(n)),n.unregisterVideoHostElement=n.unregisterVideoHostElement.bind(W(n)),n.updateVideoHostElement=n.updateVideoHostElement.bind(W(n)),n.handleMediaPlay=n.handleMediaPlay.bind(W(n)),n.handleMediaPause=n.handleMediaPause.bind(W(n)),n.handleMediaSrcrequest=n.handleMediaSrcrequest.bind(W(n)),n.handleMediaEnded=n.handleMediaEnded.bind(W(n)),n.handleMediaStalled=n.handleMediaStalled.bind(W(n)),n.handleMediaCanplaythrough=n.handleMediaCanplaythrough.bind(W(n)),n.handleMediaTimeupdate=n.handleMediaTimeupdate.bind(W(n)),n.handleMediaLoadedmetadata=n.handleMediaLoadedmetadata.bind(W(n)),n.handleMediaVolumechange=n.handleMediaVolumechange.bind(W(n)),n.handleMediaDurationchange=n.handleMediaDurationchange.bind(W(n)),n.handleMediaProgress=n.handleMediaProgress.bind(W(n)),n.handleMediaLoopchange=n.handleMediaLoopchange.bind(W(n)),n.handleMediaRatechange=n.handleMediaRatechange.bind(W(n)),n}z(t,e);var n=t.prototype;return n.componentDidMount=function(){var e=this,t=this.media=M(),n=this.props,r=n.defaultPlaybackRate,a=n.crossOrigin,i=n.playlist,s=n.autoplayDelayInSeconds,o=n.mediaElementRef,l=n.getPosterImageForTrack,u=n.onActiveTrackUpdate,c=this.state,d=c.volume,p=c.muted,h=c.playbackRate,f=c.loop,m=c.activeTrackIndex,g=c.awaitingPlay;t.defaultPlaybackRate=r,t.crossOrigin=a,t.volume=d,t.muted=p,t.playbackRate=h,t.loop=f,t.setAttribute("playsinline",""),t.setAttribute("webkit-playsinline",""),t.setAttribute("preload","metadata"),t.setAttribute("poster",l(i[m])),t.addEventListener("play",this.handleMediaPlay),t.addEventListener("pause",this.handleMediaPause),t.addEventListener("ended",this.handleMediaEnded),t.addEventListener("etalled",this.handleMediaStalled),t.addEventListener("canplaythrough",this.handleMediaCanplaythrough),t.addEventListener("timeupdate",this.handleMediaTimeupdate),t.addEventListener("loadedmetadata",this.handleMediaLoadedmetadata),t.addEventListener("volumechange",this.handleMediaVolumechange),t.addEventListener("durationchange",this.handleMediaDurationchange),t.addEventListener("progress",this.handleMediaProgress),t.addEventListener("ratechange",this.handleMediaRatechange),t.addEventListener("srcrequest",this.handleMediaSrcrequest),t.addEventListener("loopchange",this.handleMediaLoopchange),X(t,L(i,m)),this.mediaContainer.appendChild(t),g&&(this.setState({awaitingPlay:!1}),this.delayTimeout=setTimeout(function(){e.togglePause(!1)},1e3*s)),o&&o(t),u&&u(i[m],m)},t.getDerivedStateFromProps=function(e,t){var n=e.playlist;if(n===t.__playlist__)return null;var r={__playlist__:n};if(!q(n))return N({},J,r,{activeTrackIndex:0,trackLoading:!1});var a=L(t.__playlist__,t.activeTrackIndex),i=L(n,t.activeTrackIndex);if(a[0].src===i[0].src)return r;var s=j(n,a[0].src);return N({},r,-1!==s?{activeTrackIndex:s}:Q(t,0,!1))},n.componentDidUpdate=function(e,t){var n=this;this.media.defaultPlaybackRate=this.props.defaultPlaybackRate,this.media.crossOrigin=this.props.crossOrigin,this.shuffler.setList(V(this.props.playlist)),this.shuffler.setOptions({allowBackShuffle:this.props.allowBackShuffle});var r=L(e.playlist,t.activeTrackIndex),a=L(this.props.playlist,this.state.activeTrackIndex),i=e.playlist[t.activeTrackIndex],s=this.props.playlist[this.state.activeTrackIndex];r[0].src!==a[0].src&&(X(this.media,a),this.media.setAttribute("poster",this.props.getPosterImageForTrack(s)),this.state.shuffle||this.shuffler.clear()),this.props.onActiveTrackUpdate&&i!==s&&this.props.onActiveTrackUpdate(s,this.state.activeTrackIndex),e===this.props||this.media.paused||this.stealMediaSession(),this.state.awaitingPlay&&(this.setState({awaitingPlay:!1}),setTimeout(function(){n.togglePause(!1)})),clearTimeout(this.snapshotUpdateTimeout),this.snapshotUpdateTimeout=setTimeout(function(){n.props.onStateSnapshot&&n.props.onStateSnapshot(function(e){var t=e.paused,n=e.currentTime,r=e.activeTrackIndex,a=e.volume,i=e.muted,s=e.loop,o=e.cycle,l=e.shuffle,u=e.playbackRate,c=e.__playlist__;return{__unstable__:{paused:t,currentTime:n,activeTrackIndex:r,volume:a,muted:i,loop:s,cycle:o,shuffle:l,playbackRate:u,activeTrackSrc:q(c)?L(c,r)[0].src:null}}}(n.state))},100)},n.componentWillUnmount=function(){var e=this.media;e.removeEventListener("srcrequest",this.handleMediaSrcrequest),e.removeEventListener("loopchange",this.handleMediaLoopchange),clearTimeout(this.gapLengthTimeout),clearTimeout(this.delayTimeout)},n.stealMediaSession=function(){var e=this;window.MediaSession&&navigator.mediaSession instanceof MediaSession&&(navigator.mediaSession.metadata=new MediaMetadata(this.props.playlist[this.state.activeTrackIndex]),K.map(function(t){if(-1===e.props.supportedMediaSessionActions.indexOf(t))return null;var n=e.props.mediaSessionSeekLengthInSeconds;switch(t){case"play":return e.togglePause.bind(e,!1);case"pause":return e.togglePause.bind(e,!0);case"previoustrack":return e.backSkip;case"nexttrack":return e.forwardSkip;case"seekbackward":return function(){return e.media.currentTime-=n};case"seekforward":return function(){return e.media.currentTime+=n};default:return}}).forEach(function(e,t){navigator.mediaSession.setActionHandler(K[t],e)}))},n.registerVideoHostElement=function(e,t){var n=t.onHostOccupied,r=t.onHostVacated;this.videoHostElementList=this.videoHostElementList.concat(e),this.videoHostOccupiedCallbacks.set(e,n),this.videoHostVacatedCallbacks.set(e,r)},n.renderVideoIntoHostElement=function(e){var t=this;-1!==this.videoHostElementList.indexOf(e)&&(cancelAnimationFrame(this.videoHostUpdateRaf),this.videoHostUpdateRaf=requestAnimationFrame(function(){return t.updateVideoHostElement(e)}))},n.unregisterVideoHostElement=function(e){this.videoHostElementList=this.videoHostElementList.filter(function(t){return t!==e}),this.videoHostOccupiedCallbacks.delete(e),this.videoHostVacatedCallbacks.delete(e),this.media.parentNode===e&&this.updateVideoHostElement()},n.updateVideoHostElement=function(e){e?this.videoHostElementList=[e].concat(this.videoHostElementList.filter(function(t){return t!==e})):e=this.videoHostElementList[0]||this.mediaContainer;var t=!this.media.paused,n=this.media.parentNode;if(e!==n){e.appendChild(this.media),t&&this.media.paused&&this.media.play();var r=this.videoHostVacatedCallbacks.get(n);r&&r(this.media);var a=this.videoHostOccupiedCallbacks.get(e);a&&a(this.media)}},n.handleMediaPlay=function(){this.setState(function(e){return!1===e.paused?null:{paused:!1}}),this.stealMediaSession()},n.handleMediaPause=function(){this.setState(function(e){return!0===e.paused?null:{paused:!0}})},n.handleMediaSrcrequest=function(e){var t=this.props.playlist,n=L(t,this.state.activeTrackIndex);if(-1===u()(n,function(t){return t.src===e.srcRequested})){var r=j(t,e.srcRequested);-1!==r?this.selectTrackIndex(r):Object(f.a)("Source '"+e.srcRequested+"' does not exist in the loaded playlist. Make sure you've updated the 'playlist' prop to PlayerContextProvider before you select this track!")}},n.handleMediaEnded=function(){if(!this.state.seekInProgress){clearTimeout(this.gapLengthTimeout);var e=this.props,t=e.playlist,n=e.loadFirstTrackOnPlaylistComplete;if(q(t)){var r=this.state,a=r.cycle,i=r.activeTrackIndex;!a&&i+1>=t.length?n&&this.goToTrack(0,!1):this.gapLengthTimeout=setTimeout(this.forwardSkip,1e3*this.props.gapLengthInSeconds)}}},n.handleMediaStalled=function(){this.setState(function(e){return!0===e.stalled?null:{stalled:!0}})},n.handleMediaCanplaythrough=function(){this.setState(function(e){return!1===e.stalled?null:{stalled:!1}})},n.handleMediaTimeupdate=function(){var e=this.media,t=e.currentTime,n=e.played;this.state.trackLoading?this.media.currentTime=this.state.currentTime:this.setState({currentTime:t,playedRanges:H(n)})},n.handleMediaLoadedmetadata=function(){this.media.currentTime!==this.state.currentTime&&(this.media.currentTime=this.state.currentTime),this.setState(function(e){return!1===e.trackLoading?null:{trackLoading:!1}})},n.handleMediaVolumechange=function(){var e=this.media,t=e.volume,n=e.muted;this.setState({volume:t,muted:n})},n.handleMediaDurationchange=function(){var e=this.media.duration;this.setState({duration:e})},n.handleMediaProgress=function(){this.setState({bufferedRanges:H(this.media.buffered),seekableRanges:H(this.media.seekable)})},n.handleMediaLoopchange=function(){var e=this.media.loop;this.setState(function(t){return t.loop===e?null:{loop:e}})},n.handleMediaRatechange=function(){var e=this.media.playbackRate;this.setState(function(t){return t.playbackRate===e?null:{playbackRate:e}})},n.togglePause=function(e){if(clearTimeout(this.delayTimeout),"boolean"==typeof e?e:!this.state.paused)this.media.pause();else if(this.media.currentSrc)try{var t=this.media.play();t&&"function"==typeof t.catch&&t.catch(function(e){if("AbortError"!==e.name)return Promise.reject(e)}).catch(G)}catch(e){G(e)}},n.goToTrack=function(e,t){void 0===t&&(t=!0),clearTimeout(this.delayTimeout),this.setState(function(n){return Q(n,e,t)})},n.selectTrackIndex=function(e){var t=this.props.playlist;q(t)&&(e<0||e>t.length?Object(f.b)("Playlist index "+e+" is out of bounds!"):(this.state.shuffle&&this.shuffler.pickNextItem(e,this.state.activeTrackIndex),this.goToTrack(e)))},n.backSkip=function(){var e=this.props,t=e.playlist,n=e.stayOnBackSkipThreshold,r=this.media,a=this.state,i=a.cycle,s=a.activeTrackIndex,o=a.shuffle;if(!q(t)||r.currentTime>=n||!i&&s<1)r.currentTime=0;else{var l;if(o){var u=this.shuffler.findPreviousItem(s);if(void 0===u)return void(r.currentTime=0);l=j(t,u)}else(l=s-1)<0&&(l=t.length-1);this.goToTrack(l)}},n.forwardSkip=function(){var e,t=this.props.playlist,n=this.state,r=n.cycle,a=n.activeTrackIndex,i=n.shuffle;!q(t)||!r&&a+1>=t.length||(i?e=j(t,this.shuffler.findNextItem(a)):(e=a+1)>=t.length&&(e=0),this.goToTrack(e))},n.seekPreview=function(e){if(q(this.props.playlist)){var t={seekPreviewTime:e,seekInProgress:!0};switch(this.props.seekMode){case"paused":this.setState(function(e){var n=e.paused,r=e.awaitingResumeOnSeekComplete;return N({},t,{awaitingResumeOnSeekComplete:!n||r})}),this.media.currentTime=e,this.state.paused||this.togglePause(!0);break;case"immediate":this.setState(function(e){var n=e.paused,r=e.awaitingResumeOnSeekComplete;return N({},t,{awaitingResumeOnSeekComplete:!n||r})}),this.media.currentTime=e,this.state.awaitingResumeOnSeekComplete&&!this.media.ended&&this.togglePause(!1);break;case"onrelease":this.setState(t)}}},n.seekComplete=function(e){var t=this.state,n=t.seekPreviewTime,r=t.awaitingResumeOnSeekComplete,a={seekInProgress:!1,awaitingResumeOnSeekComplete:!1},i="number"==typeof e?e:n;isNaN(i)?this.setState(a):(this.setState(N({},a,{currentTime:i})),this.media.currentTime=i,r&&(this.media.ended?this.forwardSkip():this.togglePause(!1)))},n.setVolume=function(e,t){void 0===t&&(t=!0),t&&!this.state.setVolumeInProgress&&this.setState({setVolumeInProgress:!0});var n=D(e,0,1);this.media.muted=0===n,this.media.volume=n},n.setVolumeComplete=function(e){"number"==typeof e&&this.setVolume(e,!1),this.setState({setVolumeInProgress:!1}),this.media.muted||(this.lastStableVolume=this.media.volume)},n.toggleMuted=function(e){var t="boolean"==typeof e?e:!this.state.muted;this.media.muted=t,t||(this.media.volume=this.lastStableVolume)},n.toggleShuffle=function(e){var t="boolean"==typeof e?e:!this.state.shuffle;this.setState({shuffle:t})},n.setRepeatStrategy=function(e){if(-1!==h.indexOf(e))switch(e){case"track":this.media.loop=!0;break;case"playlist":this.setState({loop:!1,cycle:!0}),this.media.loop=!1;break;case"none":this.setState({loop:!1,cycle:!1}),this.media.loop=!1}else Object(f.b)('repeatStrategy "'+e+'" is not one of: '+h.split(", ")+".")},n.setPlaybackRate=function(e){this.media.playbackRate=e},n.getControlProps=function(){var e=this.props,t=this.state,n={playlist:e.playlist,activeTrackIndex:t.activeTrackIndex,trackLoading:t.trackLoading,paused:t.paused,currentTime:t.currentTime,seekPreviewTime:t.seekPreviewTime,seekInProgress:t.seekInProgress,awaitingResumeOnSeekComplete:t.awaitingResumeOnSeekComplete,duration:t.duration,bufferedRanges:t.bufferedRanges,playedRanges:t.playedRanges,seekableRanges:t.seekableRanges,volume:t.volume,muted:t.muted,shuffle:t.shuffle,stalled:t.stalled,playbackRate:t.playbackRate,setVolumeInProgress:t.setVolumeInProgress,repeatStrategy:A(t.loop,t.cycle),registerVideoHostElement:this.registerVideoHostElement,renderVideoIntoHostElement:this.renderVideoIntoHostElement,unregisterVideoHostElement:this.unregisterVideoHostElement,onTogglePause:this.togglePause,onSelectTrackIndex:this.selectTrackIndex,onBackSkip:this.backSkip,onForwardSkip:this.forwardSkip,onSeekPreview:this.seekPreview,onSeekComplete:this.seekComplete,onSetVolume:this.setVolume,onSetVolumeComplete:this.setVolumeComplete,onToggleMuted:this.toggleMuted,onToggleShuffle:this.toggleShuffle,onSetRepeatStrategy:this.setRepeatStrategy,onSetPlaybackRate:this.setPlaybackRate};if(this.playerContext)for(var r=Object.keys(this.playerContext),a=0;a<r.length;a++){var i=r[a];if(n[i]!==this.playerContext[i]){this.playerContext=n;break}}else this.playerContext=n;return this.playerContext},n.render=function(){var e=this,t=this.getControlProps();return i.a.createElement(a.Fragment,null,i.a.createElement("div",{ref:function(t){return e.mediaContainer=t},hidden:!0}),i.a.createElement(d.Provider,{value:t},"function"==typeof this.props.children?this.props.children(t):this.props.children))},t}(a.Component);Y.propTypes={playlist:o.a.arrayOf(w.isRequired).isRequired,autoplay:o.a.bool.isRequired,autoplayDelayInSeconds:o.a.number.isRequired,gapLengthInSeconds:o.a.number.isRequired,crossOrigin:y,defaultVolume:o.a.number.isRequired,defaultMuted:o.a.bool,defaultRepeatStrategy:b.isRequired,defaultShuffle:o.a.bool,defaultPlaybackRate:o.a.number.isRequired,startingTime:o.a.number.isRequired,startingTrackIndex:o.a.number.isRequired,loadFirstTrackOnPlaylistComplete:o.a.bool,seekMode:P.isRequired,maintainPlaybackRate:o.a.bool.isRequired,allowBackShuffle:o.a.bool,stayOnBackSkipThreshold:o.a.number.isRequired,supportedMediaSessionActions:o.a.arrayOf(S.isRequired).isRequired,mediaSessionSeekLengthInSeconds:o.a.number.isRequired,mediaElementRef:o.a.func,initialStateSnapshot:o.a.shape({__unstable__:o.a.object.isRequired}),onStateSnapshot:o.a.func,onActiveTrackUpdate:o.a.func,getPosterImageForTrack:o.a.func.isRequired,children:o.a.oneOfType([o.a.node,o.a.func]).isRequired},Y.defaultProps={autoplay:!1,autoplayDelayInSeconds:0,gapLengthInSeconds:0,defaultVolume:1,defaultMuted:!1,defaultRepeatStrategy:"playlist",defaultShuffle:!1,defaultPlaybackRate:1,startingTime:0,startingTrackIndex:0,loadFirstTrackOnPlaylistComplete:!0,seekMode:"immediate",maintainPlaybackRate:!1,allowBackShuffle:!1,stayOnBackSkipThreshold:5,supportedMediaSessionActions:["play","pause","previoustrack","nexttrack"],mediaSessionSeekLengthInSeconds:10,getPosterImageForTrack:function(e){return e&&e.artwork?e.artwork[0].src:""}};var Z=function(e){function t(){return e.apply(this,arguments)||this}z(t,e);var n=t.prototype;return n.componentDidMount=function(){this.props.groupContext.registerMediaElement(this.mediaElement)},n.componentWillUnmount=function(){this.props.groupContext.unregisterMediaElement(this.mediaElement)},n.render=function(){var e=this,t=this.props,n=t.groupContext,r=t.props,a=r.mediaElementRef,s=function(e,t){if(null==e)return{};var n,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(a[n]=e[n]);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r<s.length;r++)n=s[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}(r,["mediaElementRef"]);return i.a.createElement(Y,B({},n.groupProps,s,{mediaElementRef:function(t){a&&a(t),e.mediaElement=t}}))},t}(a.Component);Z.propTypes={groupContext:o.a.shape({groupProps:o.a.object.isRequired,registerMediaElement:o.a.func.isRequired,unregisterMediaElement:o.a.func.isRequired}).isRequired};var $=function(e){return i.a.createElement(p.Consumer,null,function(t){return t?Object(a.createElement)(Z,{groupContext:t,props:e}):Object(a.createElement)(Y,e)})};function ee(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){te(e,t,n[t])})}return e}function te(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function ne(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var re=function(e){function t(t){var n;return(n=e.call(this,t)||this).registerMediaElement=n.registerMediaElement.bind(ne(n)),n.unregisterMediaElement=n.unregisterMediaElement.bind(ne(n)),n.enforceOneMediaSourceOnly=n.enforceOneMediaSourceOnly.bind(ne(n)),n.mediaElements=[],n}!function(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}(t,e);var n=t.prototype;return n.registerMediaElement=function(e){this.mediaElements=this.mediaElements.concat(e),e.addEventListener("play",this.enforceOneMediaSourceOnly,!0),e.addEventListener("volumechange",this.enforceOneMediaSourceOnly,!0)},n.unregisterMediaElement=function(e){this.mediaElements=this.mediaElements.filter(function(t){return e!==t}),e.removeEventListener("play",this.enforceOneMediaSourceOnly,!0),e.removeEventListener("volumechange",this.enforceOneMediaSourceOnly,!0)},n.enforceOneMediaSourceOnly=function(e){var t=e.target,n=t.paused,r=t.muted;if(!n&&!r){var a=this.mediaElements,i=Array.isArray(a),s=0;for(a=i?a:a[Symbol.iterator]();;){var o;if(i){if(s>=a.length)break;o=a[s++]}else{if((s=a.next()).done)break;o=s.value}var l=o;l===t||l.muted||l.pause()}}},n.render=function(){var e=this;return i.a.createElement(p.Consumer,null,function(t){var n=t?ee({},t,{groupProps:ee({},t.groupProps,e.props)}):{groupProps:e.props,registerMediaElement:e.registerMediaElement,unregisterMediaElement:e.unregisterMediaElement};return i.a.createElement(p.Provider,{value:n},e.props.children)})},t}(a.Component);re.propTypes={children:o.a.node.isRequired};var ae=re,ie=Object(c.a)("FullscreenContext",{fullscreen:!1,requestFullscreen:function(){Object(f.b)("Fullscreen request ignored since there is no FullscreenContextProvider ancestor.")},requestExitFullscreen:function(){Object(f.b)("Exit fullscreen request ignored since there is no FullscreenContextProvider ancestor.")}});function se(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var oe={width:"100%",height:"100%"},le=function(e){function t(t){var n;return(n=e.call(this,t)||this).state={fullscreen:!1},n.requestFullscreen=n.requestFullscreen.bind(se(n)),n.requestExitFullscreen=n.requestExitFullscreen.bind(se(n)),n.handleFullscreenChange=n.handleFullscreenChange.bind(se(n)),n.fullscreenElement=null,n}!function(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}(t,e);var n=t.prototype;return n.componentDidMount=function(){document.addEventListener("fullscreenchange",this.handleFullscreenChange),document.addEventListener("webkitfullscreenchange",this.handleFullscreenChange),document.addEventListener("mozfullscreenchange",this.handleFullscreenChange),document.addEventListener("msfullscreenchange",this.handleFullscreenChange)},n.componentWillUnmount=function(){document.removeEventListener("fullscreenchange",this.handleFullscreenChange),document.removeEventListener("webkitfullscreenchange",this.handleFullscreenChange),document.removeEventListener("mozfullscreenchange",this.handleFullscreenChange),document.removeEventListener("msfullscreenchange",this.handleFullscreenChange)},n.requestFullscreen=function(){this.props.fullscreenEnabled&&(this.fullscreenElement.requestFullscreen?this.fullscreenElement.requestFullscreen():this.fullscreenElement.webkitRequestFullscreen?this.fullscreenElement.webkitRequestFullscreen():this.fullscreenElement.mozRequestFullscreen?this.fullscreenElement.mozRequestFullScreen():this.fullscreenElement.msRequestFullscreen&&this.fullscreenElement.msRequestFullscreen())},n.requestExitFullscreen=function(){document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.webkitCancelFullScreen?document.webkitCancelFullScreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.msExitFullscreen&&document.mozExitFullscreen()},n.handleFullscreenChange=function(){var e=document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement||document.msFullscreenElement;this.setState({fullscreen:e===this.fullscreenElement})},n.getFullscreenContext=function(){var e={fullscreen:this.state.fullscreen,requestFullscreen:this.requestFullscreen,requestExitFullscreen:this.requestExitFullscreen};return this.fullscreenContext&&e.fullscreen===this.fullscreenContext.fullscreen?this.fullscreenContext:this.fullscreenContext=e},n.render=function(){var e=this,t=this.getFullscreenContext();return i.a.createElement("div",{ref:function(t){return e.fullscreenElement=t},style:this.state.fullscreen?oe:void 0},i.a.createElement(ie.Provider,{value:t},"function"==typeof this.props.children?this.props.children(t):this.props.children))},t}(a.PureComponent);le.propTypes={fullscreenEnabled:o.a.bool.isRequired,children:o.a.oneOfType([o.a.node,o.a.func]).isRequired},le.defaultProps={fullscreenEnabled:!0};var ue=le;function ce(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var de=function(e,t){var n={},r=e.displayName||e.name;function s(s){return i.a.createElement(ie.Consumer,null,function(o){return i.a.createElement(d.Consumer,null,function(i){var l=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){ce(e,t,n[t])})}return e}({},s),u=t,c=Array.isArray(u),d=0;for(u=c?u:u[Symbol.iterator]();;){var p;if(c){if(d>=u.length)break;p=u[d++]}else{if((d=u.next()).done)break;p=d.value}var h=p;i.hasOwnProperty(h)?l[h]=i[h]:o.hasOwnProperty(h)?l[h]=o[h]:n[h]||(Object(f.b)("Prop '"+h+"' for component "+r+" not found in playerContext or fullscreenContext."),n[h]=!0)}return Object(a.createElement)(e,l)})})}return r&&(s.displayName="PlayerContextFilter("+r+")"),s};n.d(t,"PlayerContextConsumer",function(){return pe}),n.d(t,"FullscreenContextConsumer",function(){return he}),n.d(t,"PlayerContextProvider",function(){return $}),n.d(t,"PlayerContextGroup",function(){return ae}),n.d(t,"FullscreenContextProvider",function(){return ue}),n.d(t,"playerContextFilter",function(){return de}),n.d(t,"PlayerPropTypes",function(){return r}),n.d(t,"logError",function(){return f.a}),n.d(t,"logWarning",function(){return f.b}),n.d(t,"convertToNumberWithinIntervalBounds",function(){return D}),n.d(t,"isPlaylistValid",function(){return q}),n.d(t,"repeatStrategyOptions",function(){return h});var pe=d.Consumer,he=ie.Consumer}])});
 //# sourceMappingURL=cassette-core.min.js.map

dist/esm/cassette-core.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("prop-types"),require("react")):"function"==typeof define&&define.amd?define(["prop-types","react"],t):"object"==typeof exports?exports.cassetteCore=t(require("prop-types"),require("react")):e.cassetteCore=t(e.PropTypes,e.React)}("undefined"!=typeof self?self:this,function(e,t){return function(e){var t={};function n(s){if(t[s])return t[s].exports;var i=t[s]={i:s,l:!1,exports:{}};return e[s].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,s){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:s})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var s=Object.create(null);if(n.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(s,i,function(t){return e[t]}.bind(null,i));return s},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/dist",n(n.s=7)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t,n){"use strict";n.d(t,"a",function(){return i}),n.d(t,"b",function(){return a});const s=console.log.bind(console),i=console.error?console.error.bind(console):s,a=console.warn?console.warn.bind(console):s},function(e,t,n){"use strict";(function(e){var s=n(1),i=n(2);const a=n(6).version,r="undefined"==typeof window?e:window;r.__cassette_contexts__=r.__cassette_contexts__||{},t.a=function(e,t=null){const n=r.__cassette_contexts__[e];if(n)return n.packageVersion!==a&&Object(i.b)(`Warning: multiple versions of ${e} from the @cassette/core`+` package have been loaded. v${a} will be ignored and`+` v${n.packageVersion} will be used instead.`),n;const o=Object(s.createContext)(t);return o.displayName=e,o.packageVersion=a,r.__cassette_contexts__[e]=o,o}}).call(this,n(5))},function(e,t,n){"use strict";e.exports=function(e,t,n){if("function"==typeof Array.prototype.findIndex)return e.findIndex(t,n);if("function"!=typeof t)throw new TypeError("predicate must be a function");var s=Object(e),i=s.length;if(0===i)return-1;for(var a=0;a<i;a++)if(t.call(n,s[a],a,s))return a;return-1}},function(e,t){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(n=window)}e.exports=n},function(e){e.exports={name:"@cassette/core",version:"2.0.0-alpha.7",description:"A simple, clean, and responsive visual wrapper for the HTML audio tag, built with React.",main:"dist/es5/cassette-core.js",scripts:{"build:clean":"rimraf dist","build:webpack":"BUILD_MODE=all webpack --progress",build:"npm run build:clean && npm run build:webpack",prepare:"npm run build",test:'echo "Error: no test specified" && exit 1'},repository:{type:"git",url:"https://github.com/benwiley4000/cassette.git"},engines:{node:">=6.0.0",npm:">=5.0.0"},keywords:["audio","video","media","ui","react","reactjs","responsive","music","player","html5","component","components"],author:{name:"Ben Wiley",email:"[e-mail]",url:"http://benwiley.org/"},license:"MIT",peerDependencies:{react:"^16.3.0"},devDependencies:{"array-find-index":"^1.0.2",rimraf:"^2.5.4",webpack:"^4.17.1"},dependencies:{"prop-types":"^15.5.10"},publishConfig:{access:"public"},gitHead:"d3fce0b83c06f6000b6988bd9d75bbae34f97737"}},function(e,t,n){"use strict";n.r(t);var s={};n.r(s),n.d(s,"controlKeyword",function(){return g}),n.d(s,"control",function(){return y}),n.d(s,"crossOriginAttribute",function(){return b}),n.d(s,"repeatStrategy",function(){return k}),n.d(s,"mediaSource",function(){return S}),n.d(s,"mediaSessionAction",function(){return v}),n.d(s,"mediaSessionArtwork",function(){return w}),n.d(s,"track",function(){return P}),n.d(s,"progressDirection",function(){return T}),n.d(s,"seekMode",function(){return x}),n.d(s,"aspectRatio",function(){return M});var i=n(1),a=n.n(i),r=n(0),o=n.n(r),l=n(4),u=n.n(l),c=n(3),d=Object(c.a)("PlayerContext"),h=Object(c.a)("GroupContext");const p=["none","playlist","track"];var m=n(2);function f(e,t){let n=!1;return function(s,i,a,...r){return i in s?(!n&&t in s&&(Object(m.b)(`Do not define both the '${i}' and '${t}' props.`),n=!0),e.isRequired(s,i,a,...r)):t in s?void 0:new Error(`If the '${t}' prop is not defined, '${i}' must be.`)}}const g=o.a.oneOf(["playpause","backskip","forwardskip","volume","mute","repeat","shuffle","progress","progressdisplay","fullscreen","spacer"]),y=o.a.oneOfType([o.a.func,g]),b=o.a.oneOf(["anonymous","use-credentials"]),k=o.a.oneOf(p),S=o.a.shape({src:o.a.string.isRequired,type:o.a.string.isRequired}),v=o.a.oneOf(["play","pause","previoustrack","nexttrack","seekbackward","seekforward"]),w=o.a.shape({src:o.a.string.isRequired,sizes:o.a.string,type:o.a.string}),P=o.a.shape({url:f(o.a.string,"sources"),sources:f(o.a.arrayOf(S.isRequired),"url"),title:o.a.string.isRequired,artist:o.a.string,album:o.a.string,artwork:o.a.arrayOf(w.isRequired),meta:o.a.object}),T=o.a.oneOf(["left","right","up","down"]),x=o.a.oneOf(["paused","immediate","onrelease"]);function M(e,t){const n=e[t];if(void 0!==n)return"string"!=typeof n||2!==n.split(":").length||n.split(":").some(isNaN)?new Error(`The ${t} prop should be a string of the form 'x:y'. Example: 16:9`):void 0}const O="loopchange",R="srcrequest";var E=function(e=document.createElement("media")){return new MutationObserver(()=>{e.dispatchEvent(new Event(O))}).observe(e,{attributeFilter:["loop"]}),Object.defineProperty(e,"src",{get:()=>e.currentSrc,set:t=>{const n=new Event(R);n.srcRequested=t,e.dispatchEvent(n)}}),e};function C(e,t,n,s){let i=s;for(let s=0;s<e;s++){if(!t.length)throw C(s,n,t,i),`Moving ${e} places was not possible!`;n.push(i),i=t.pop()}return i}function _(e,t,n,s,i){let a,r=s;if(e.length){for(let s=1;s<=t.length;s++)if(-1!==e.indexOf(t[t.length-s]))return C(s,t,n,r);if(i){if(function(e,t){if(!e.length)return!1;for(let n=0;n<e.length;n++)if(t!==e[n])return!1;return!0}(e,r))return r;do{a=e[Math.floor(Math.random()*e.length)]}while(r===a||void 0===a);return void 0!==(r=C(t.length,t,n,r))&&n.push(r),a}}}var I=class{constructor(e,t={}){this._list=e,this._forwardStack=[],this._backStack=[],this._currentItem=void 0,this._allowBackShuffle=Boolean(t.allowBackShuffle)}findNextItem(e){return void 0!==e&&this.setCurrentIndex(e),this._currentItem=_(this._list,this._forwardStack,this._backStack,this._currentItem,!0),this._currentItem}findPreviousItem(e){return void 0!==e&&this.setCurrentIndex(e),this._currentItem=_(this._list,this._backStack,this._forwardStack,this._currentItem,this._allowBackShuffle),this._currentItem}pickNextItem(e,t){if(void 0!==t&&this.setCurrentIndex(t),void 0!==this._list[e])return void 0!==this._currentItem&&this._backStack.push(this._currentItem),this._forwardStack.length=0,this._currentItem=this._list[e],this._currentItem}setList(e){this._list=e}setOptions(e){for(const t of Object.keys(e))switch(t){case"allowBackShuffle":this[`_${t}`]=Boolean(e[t])}}setCurrentIndex(e){const t=this._list[e];this._currentItem!==t&&(this.clear(),this._currentItem=t)}clear(){this._forwardStack.length=0,this._backStack.length=0,this._currentItem=void 0}};var q=function(e){return Boolean(e&&e.length)};const F=[{src:""}];var j=function(e,t){if(!q(e))return F;const n=e[t],s=n.sources,i=n.url;return s?s.length?s:F:[{src:i}]};var L=function(e,t){return u()(e,e=>e.sources?-1!==u()(e.sources,e=>e.src===t):e.url&&t===e.url)};var V=function(e){return(e||[]).map((t,n)=>j(e,n)[0].src)};var D=function(e){const t=Array(e.length);for(let n=0;n<e.length;n++)t[n]={start:e.start(n),end:e.end(n)};return t};var B=function(e,t){return e?"track":t?"playlist":"none"};var A=function(e,t,n){return t="number"==typeof t?t:-1/0,n="number"==typeof n?n:1/0,Math.max(t,Math.min(e,n))};var N=function(e,t,n){const s=t.getContext("2d");let i=null,a=null,r=null,o=null;return i=requestAnimationFrame(function l(){const u=e.videoWidth,c=e.videoHeight;let d=e,h=u,p=c,m=u,f=c,g=!0;m&&f||!o||(d=o,h=o.naturalWidth,p=o.naturalHeight,m=o.naturalWidth,f=o.naturalHeight,g=!1),a&&r?(m=a,f=r):a?(m=a,f=a/h*p):r&&(f=r,m=r/p*h),t.width===m&&t.height===f||(t.width=m,t.height=f),s.drawImage(d,0,0,m,f),n&&n(s,g),i=requestAnimationFrame(l)}),{endStream(){cancelAnimationFrame(i)},setCanvasSize(e,t){a=e||null,r=t||null},setPlaceholderImage(e){o=e||null}}};function $(){return($=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var s in n)Object.prototype.hasOwnProperty.call(n,s)&&(e[s]=n[s])}return e}).apply(this,arguments)}function z(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},s=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(s=s.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),s.forEach(function(t){W(e,t,n[t])})}return e}function W(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function U(e){if(Object(m.a)(e),"NotAllowedError"===e.name){const e="Media playback failed at "+(new Date).toLocaleTimeString()+"! (Perhaps autoplay is disabled in this browser.)";Object(m.b)(e)}}const H=["previoustrack","nexttrack","seekbackward","seekforward"],G=0,K={paused:!0,currentTime:0,seekPreviewTime:0,seekInProgress:!1,awaitingResumeOnSeekComplete:!1,duration:0,bufferedRanges:[],playedRanges:[],seekableRanges:[],stalled:!1,awaitingPlay:!1};function J(e,t,n=!0){const s=e.activeTrackIndex!==t;return{activeTrackIndex:t,trackLoading:s,currentTime:0,loop:!s&&e.loop,awaitingPlay:Boolean(n),paused:!n}}class Q extends i.Component{constructor(e){super(e),this.state=z({},K,{activeTrackIndex:A(e.startingTrackIndex,0),trackLoading:q(e.playlist),currentTime:A(e.startingTime,0),volume:A(e.defaultVolume,0,1),muted:e.defaultMuted,loop:"track"===e.defaultRepeatStrategy,cycle:"playlist"===e.defaultRepeatStrategy,shuffle:e.defaultShuffle,playbackRate:e.defaultPlaybackRate,setVolumeInProgress:!1,awaitingPlay:e.autoplay&&q(e.playlist),__playlist__:e.playlist},e.initialStateSnapshot?function(e,t){const n=e.__unstable__,s=n.paused,i=n.currentTime,a=n.activeTrackIndex,r=n.volume,o=n.muted,l=n.loop,u=n.cycle,c=n.shuffle,d=n.playbackRate,h=n.activeTrackSrc,p={};q(t.playlist)&&"boolean"==typeof s&&(p.awaitingPlay=!s),"number"==typeof r&&r>=0&&r<=1&&(p.volume=r),"boolean"==typeof o&&(p.muted=o),"boolean"==typeof l&&(p.loop=l),"boolean"==typeof u&&(p.cycle=u),"boolean"==typeof c&&(p.shuffle=c),"number"==typeof d&&(p.playbackRate=d);let m=!1;if("string"==typeof h&&"number"==typeof a&&a>=0)if(h===j(t.playlist,a)[0].src)p.activeTrackIndex=a,m=!0;else{const e=L(t.playlist,h);-1!==e&&(p.activeTrackIndex=e,m=!0)}return m&&"number"==typeof i&&i>=0&&(p.currentTime=i),p}(e.initialStateSnapshot,e):{}),this.lastStableVolume=this.state.volume,this.shuffler=new I(V(e.playlist),{allowBackShuffle:e.allowBackShuffle}),this.media=null,this.setMediaElementRef=this.setMediaElementRef.bind(this),this.togglePause=this.togglePause.bind(this),this.selectTrackIndex=this.selectTrackIndex.bind(this),this.forwardSkip=this.forwardSkip.bind(this),this.backSkip=this.backSkip.bind(this),this.seekPreview=this.seekPreview.bind(this),this.seekComplete=this.seekComplete.bind(this),this.setVolume=this.setVolume.bind(this),this.setVolumeComplete=this.setVolumeComplete.bind(this),this.toggleMuted=this.toggleMuted.bind(this),this.toggleShuffle=this.toggleShuffle.bind(this),this.setRepeatStrategy=this.setRepeatStrategy.bind(this),this.setPlaybackRate=this.setPlaybackRate.bind(this),this.pipeVideoStreamToCanvas=this.pipeVideoStreamToCanvas.bind(this),this.handleMediaPlay=this.handleMediaPlay.bind(this),this.handleMediaPause=this.handleMediaPause.bind(this),this.handleMediaSrcrequest=this.handleMediaSrcrequest.bind(this),this.handleMediaEnded=this.handleMediaEnded.bind(this),this.handleMediaStalled=this.handleMediaStalled.bind(this),this.handleMediaCanplaythrough=this.handleMediaCanplaythrough.bind(this),this.handleMediaTimeupdate=this.handleMediaTimeupdate.bind(this),this.handleMediaLoadedmetadata=this.handleMediaLoadedmetadata.bind(this),this.handleMediaVolumechange=this.handleMediaVolumechange.bind(this),this.handleMediaDurationchange=this.handleMediaDurationchange.bind(this),this.handleMediaProgress=this.handleMediaProgress.bind(this),this.handleMediaLoopchange=this.handleMediaLoopchange.bind(this),this.handleMediaRatechange=this.handleMediaRatechange.bind(this)}componentDidMount(){const e=this.media=E(this.media);e.readyState!==G&&(e.currentTime=this.state.currentTime),e.volume=this.state.volume,e.muted=this.state.muted,e.defaultPlaybackRate=this.props.defaultPlaybackRate,e.playbackRate=this.state.playbackRate,e.addEventListener("srcrequest",this.handleMediaSrcrequest),e.addEventListener("loopchange",this.handleMediaLoopchange),this.state.awaitingPlay&&(this.setState({awaitingPlay:!1}),this.delayTimeout=setTimeout(()=>{this.togglePause(!1)},1e3*this.props.autoplayDelayInSeconds))}static getDerivedStateFromProps(e,t){const n=e.playlist;if(n===t.__playlist__)return null;const s={__playlist__:n};if(!q(n))return z({},K,s,{activeTrackIndex:0,trackLoading:!1});const i=j(t.__playlist__,t.activeTrackIndex),a=j(n,t.activeTrackIndex);if(i[0].src===a[0].src)return s;const r=L(n,i[0].src);return z({},s,-1!==r?{activeTrackIndex:r}:J(t,0,!1))}componentDidUpdate(e,t){this.media.defaultPlaybackRate=this.props.defaultPlaybackRate,this.shuffler.setList(V(this.props.playlist)),this.shuffler.setOptions({allowBackShuffle:this.props.allowBackShuffle});const n=j(e.playlist,t.activeTrackIndex),s=j(this.props.playlist,this.state.activeTrackIndex);n[0].src!==s[0].src&&(this.media.load(),this.state.shuffle||this.shuffler.clear()),e===this.props||this.media.paused||this.stealMediaSession(),this.state.awaitingPlay&&(this.setState({awaitingPlay:!1}),setTimeout(()=>{this.togglePause(!1)})),clearTimeout(this.snapshotUpdateTimeout),this.snapshotUpdateTimeout=setTimeout(()=>{this.props.onStateSnapshot&&this.props.onStateSnapshot(function(e){const t=e.paused,n=e.currentTime,s=e.activeTrackIndex,i=e.volume,a=e.muted,r=e.loop,o=e.cycle,l=e.shuffle,u=e.playbackRate,c=e.__playlist__;return{__unstable__:{paused:t,currentTime:n,activeTrackIndex:s,volume:i,muted:a,loop:r,cycle:o,shuffle:l,playbackRate:u,activeTrackSrc:q(c)?j(c,s)[0].src:null}}}(this.state))},100)}componentWillUnmount(){const e=this.media;e.removeEventListener("srcrequest",this.handleMediaSrcrequest),e.removeEventListener("loopchange",this.handleMediaLoopchange),clearTimeout(this.gapLengthTimeout),clearTimeout(this.delayTimeout)}setMediaElementRef(e){this.media=e,"function"==typeof this.props.mediaElementRef&&this.props.mediaElementRef(e)}stealMediaSession(){window.MediaSession&&navigator.mediaSession instanceof MediaSession&&(navigator.mediaSession.metadata=new MediaMetadata(this.props.playlist[this.state.activeTrackIndex]),H.map(e=>{if(-1===this.props.supportedMediaSessionActions.indexOf(e))return null;const t=this.props.mediaSessionSeekLengthInSeconds;switch(e){case"play":return this.togglePause.bind(this,!1);case"pause":return this.togglePause.bind(this,!0);case"previoustrack":return this.backSkip;case"nexttrack":return this.forwardSkip;case"seekbackward":return()=>this.media.currentTime-=t;case"seekforward":return()=>this.media.currentTime+=t;default:return}}).forEach((e,t)=>{navigator.mediaSession.setActionHandler(H[t],e)}))}pipeVideoStreamToCanvas(e,t){return N(this.media,e,t)}handleMediaPlay(){this.setState(e=>!1===e.paused?null:{paused:!1}),this.stealMediaSession()}handleMediaPause(){this.setState(e=>!0===e.paused?null:{paused:!0})}handleMediaSrcrequest(e){const t=this.props.playlist,n=j(t,this.state.activeTrackIndex);if(-1!==u()(n,t=>t.src===e.srcRequested))return;const s=L(t,e.srcRequested);-1!==s?this.selectTrackIndex(s):Object(m.a)(`Source '${e.srcRequested}' does not exist in the loaded playlist. `+"Make sure you've updated the 'playlist' prop to PlayerContextProvider before you select this track!")}handleMediaEnded(){if(this.state.seekInProgress)return;clearTimeout(this.gapLengthTimeout);const e=this.props,t=e.playlist,n=e.loadFirstTrackOnPlaylistComplete;if(!q(t))return;const s=this.state,i=s.cycle,a=s.activeTrackIndex;!i&&a+1>=t.length?n&&this.goToTrack(0,!1):this.gapLengthTimeout=setTimeout(this.forwardSkip,1e3*this.props.gapLengthInSeconds)}handleMediaStalled(){this.setState(e=>!0===e.stalled?null:{stalled:!0})}handleMediaCanplaythrough(){this.setState(e=>!1===e.stalled?null:{stalled:!1})}handleMediaTimeupdate(){const e=this.media,t=e.currentTime,n=e.played;this.setState({currentTime:t,playedRanges:D(n)})}handleMediaLoadedmetadata(){this.media.currentTime!==this.state.currentTime&&(this.media.currentTime=this.state.currentTime),this.setState(e=>!1===e.trackLoading?null:{trackLoading:!1})}handleMediaVolumechange(){const e=this.media,t=e.volume,n=e.muted;this.setState({volume:t,muted:n})}handleMediaDurationchange(){const e=this.media.duration;this.setState({duration:e})}handleMediaProgress(){this.setState({bufferedRanges:D(this.media.buffered),seekableRanges:D(this.media.seekable)})}handleMediaLoopchange(){const e=this.media.loop;this.setState(t=>t.loop===e?null:{loop:e})}handleMediaRatechange(){const e=this.media.playbackRate;this.setState(t=>t.playbackRate===e?null:{playbackRate:e})}togglePause(e){if(clearTimeout(this.delayTimeout),"boolean"==typeof e?e:!this.state.paused)this.media.pause();else if(this.media.currentSrc)try{const e=this.media.play();e&&"function"==typeof e.catch&&e.catch(e=>{if("AbortError"!==e.name)return Promise.reject(e)}).catch(U)}catch(e){U(e)}}goToTrack(e,t=!0){clearTimeout(this.delayTimeout),this.setState(n=>J(n,e,t))}selectTrackIndex(e){const t=this.props.playlist;q(t)&&(e<0||e>t.length?Object(m.b)(`Playlist index ${e} is out of bounds!`):(this.state.shuffle&&this.shuffler.pickNextItem(e,this.state.activeTrackIndex),this.goToTrack(e)))}backSkip(){const e=this.props,t=e.playlist,n=e.stayOnBackSkipThreshold,s=this.media,i=this.state,a=i.cycle,r=i.activeTrackIndex,o=i.shuffle;if(!q(t)||s.currentTime>=n||!a&&r<1)return void(s.currentTime=0);let l;if(o){const e=this.shuffler.findPreviousItem(r);if(void 0===e)return void(s.currentTime=0);l=L(t,e)}else(l=r-1)<0&&(l=t.length-1);this.goToTrack(l)}forwardSkip(){const e=this.props.playlist,t=this.state,n=t.cycle,s=t.activeTrackIndex,i=t.shuffle;if(!q(e)||!n&&s+1>=e.length)return;let a;i?a=L(e,this.shuffler.findNextItem(s)):(a=s+1)>=e.length&&(a=0),this.goToTrack(a)}seekPreview(e){if(!q(this.props.playlist))return;const t={seekPreviewTime:e,seekInProgress:!0};switch(this.props.seekMode){case"paused":this.setState(({paused:e,awaitingResumeOnSeekComplete:n})=>z({},t,{awaitingResumeOnSeekComplete:!e||n})),this.media.currentTime=e,this.state.paused||this.togglePause(!0);break;case"immediate":this.setState(({paused:e,awaitingResumeOnSeekComplete:n})=>z({},t,{awaitingResumeOnSeekComplete:!e||n})),this.media.currentTime=e,this.state.awaitingResumeOnSeekComplete&&!this.media.ended&&this.togglePause(!1);break;case"onrelease":this.setState(t)}}seekComplete(e){const t=this.state,n=t.seekPreviewTime,s=t.awaitingResumeOnSeekComplete,i={seekInProgress:!1,awaitingResumeOnSeekComplete:!1},a="number"==typeof e?e:n;isNaN(a)?this.setState(i):(this.setState(z({},i,{currentTime:a})),this.media.currentTime=a,s&&(this.media.ended?this.forwardSkip():this.togglePause(!1)))}setVolume(e){this.state.setVolumeInProgress||this.setState({setVolumeInProgress:!0});const t=A(e,0,1);this.media.muted=0===t,this.media.volume=t}setVolumeComplete(){this.setState({setVolumeInProgress:!1}),this.media.muted||(this.lastStableVolume=this.media.volume)}toggleMuted(e){const t="boolean"==typeof e?e:!this.state.muted;this.media.muted=t,t||(this.media.volume=this.lastStableVolume)}toggleShuffle(e){const t="boolean"==typeof e?e:!this.state.shuffle;this.setState({shuffle:t})}setRepeatStrategy(e){-1!==p.indexOf(e)?this.setState(()=>{switch(e){case"track":return{loop:!0};case"playlist":return{loop:!1,cycle:!0};case"none":return{loop:!1,cycle:!1};default:return null}}):Object(m.b)('repeatStrategy "'+e+'" is not one of: '+p.split(", ")+".")}setPlaybackRate(e){this.media.playbackRate=e}getControlProps(){const e=this.props,t=this.state,n={playlist:e.playlist,activeTrackIndex:t.activeTrackIndex,trackLoading:t.trackLoading,paused:t.paused,currentTime:t.currentTime,seekPreviewTime:t.seekPreviewTime,seekInProgress:t.seekInProgress,awaitingResumeOnSeekComplete:t.awaitingResumeOnSeekComplete,duration:t.duration,bufferedRanges:t.bufferedRanges,playedRanges:t.playedRanges,seekableRanges:t.seekableRanges,volume:t.volume,muted:t.muted,shuffle:t.shuffle,stalled:t.stalled,playbackRate:t.playbackRate,setVolumeInProgress:t.setVolumeInProgress,repeatStrategy:B(t.loop,t.cycle),pipeVideoStreamToCanvas:this.pipeVideoStreamToCanvas,onTogglePause:this.togglePause,onSelectTrackIndex:this.selectTrackIndex,onBackSkip:this.backSkip,onForwardSkip:this.forwardSkip,onSeekPreview:this.seekPreview,onSeekComplete:this.seekComplete,onSetVolume:this.setVolume,onSetVolumeComplete:this.setVolumeComplete,onToggleMuted:this.toggleMuted,onToggleShuffle:this.toggleShuffle,onSetRepeatStrategy:this.setRepeatStrategy,onSetPlaybackRate:this.setPlaybackRate};if(this.playerContext){for(const e of Object.keys(this.playerContext))if(n[e]!==this.playerContext[e]){this.playerContext=n;break}}else this.playerContext=n;return this.playerContext}render(){const e=j(this.props.playlist,this.state.activeTrackIndex),t=this.getControlProps();return a.a.createElement(i.Fragment,null,a.a.createElement("video",{hidden:!0,playsInline:!0,ref:this.setMediaElementRef,crossOrigin:this.props.crossOrigin,preload:"metadata",loop:this.state.loop,onPlay:this.handleMediaPlay,onPause:this.handleMediaPause,onEnded:this.handleMediaEnded,onStalled:this.handleMediaStalled,onCanPlayThrough:this.handleMediaCanplaythrough,onTimeUpdate:this.handleMediaTimeupdate,onLoadedMetadata:this.handleMediaLoadedmetadata,onVolumeChange:this.handleMediaVolumechange,onDurationChange:this.handleMediaDurationchange,onProgress:this.handleMediaProgress,onRateChange:this.handleMediaRatechange},e.map(e=>a.a.createElement("source",{key:e.src,src:e.src,type:e.type}))),a.a.createElement(d.Provider,{value:t},"function"==typeof this.props.children?this.props.children(t):this.props.children))}}Q.propTypes={playlist:o.a.arrayOf(P.isRequired).isRequired,autoplay:o.a.bool.isRequired,autoplayDelayInSeconds:o.a.number.isRequired,gapLengthInSeconds:o.a.number.isRequired,crossOrigin:b,defaultVolume:o.a.number.isRequired,defaultMuted:o.a.bool,defaultRepeatStrategy:k.isRequired,defaultShuffle:o.a.bool,defaultPlaybackRate:o.a.number.isRequired,startingTime:o.a.number.isRequired,startingTrackIndex:o.a.number.isRequired,loadFirstTrackOnPlaylistComplete:o.a.bool,seekMode:x.isRequired,maintainPlaybackRate:o.a.bool.isRequired,allowBackShuffle:o.a.bool,stayOnBackSkipThreshold:o.a.number.isRequired,supportedMediaSessionActions:o.a.arrayOf(v.isRequired).isRequired,mediaSessionSeekLengthInSeconds:o.a.number.isRequired,mediaElementRef:o.a.func,initialStateSnapshot:o.a.shape({__unstable__:o.a.object.isRequired}),onStateSnapshot:o.a.func,children:o.a.oneOfType([o.a.node,o.a.func]).isRequired},Q.defaultProps={autoplay:!1,autoplayDelayInSeconds:0,gapLengthInSeconds:0,defaultVolume:1,defaultMuted:!1,defaultRepeatStrategy:"playlist",defaultShuffle:!1,defaultPlaybackRate:1,startingTime:0,startingTrackIndex:0,loadFirstTrackOnPlaylistComplete:!0,seekMode:"immediate",maintainPlaybackRate:!1,allowBackShuffle:!1,stayOnBackSkipThreshold:5,supportedMediaSessionActions:["play","pause","previoustrack","nexttrack"],mediaSessionSeekLengthInSeconds:10};class X extends i.Component{componentDidMount(){this.props.groupContext.registerMediaElement(this.mediaElement)}componentWillUnmount(){this.props.groupContext.unregisterMediaElement(this.mediaElement)}render(){const e=this.props,t=e.groupContext,n=e.props,s=n.mediaElementRef,i=function(e,t){if(null==e)return{};var n,s,i={},a=Object.keys(e);for(s=0;s<a.length;s++)n=a[s],t.indexOf(n)>=0||(i[n]=e[n]);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(s=0;s<r.length;s++)n=r[s],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(n,["mediaElementRef"]);return a.a.createElement(Q,$({},t.groupProps,i,{mediaElementRef:e=>{s&&s(e),this.mediaElement=e}}))}}X.propTypes={groupContext:o.a.shape({groupProps:o.a.object.isRequired,registerMediaElement:o.a.func.isRequired,unregisterMediaElement:o.a.func.isRequired}).isRequired};var Y=function(e){return a.a.createElement(h.Consumer,null,t=>t?Object(i.createElement)(X,{groupContext:t,props:e}):Object(i.createElement)(Q,e))};function Z(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},s=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(s=s.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),s.forEach(function(t){ee(e,t,n[t])})}return e}function ee(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}class te extends i.Component{constructor(e){super(e),this.registerMediaElement=this.registerMediaElement.bind(this),this.unregisterMediaElement=this.unregisterMediaElement.bind(this),this.enforceOneMediaSourceOnly=this.enforceOneMediaSourceOnly.bind(this),this.mediaElements=[]}registerMediaElement(e){this.mediaElements=this.mediaElements.concat(e),e.addEventListener("play",this.enforceOneMediaSourceOnly,!0),e.addEventListener("volumechange",this.enforceOneMediaSourceOnly,!0)}unregisterMediaElement(e){this.mediaElements=this.mediaElements.filter(t=>e!==t),e.removeEventListener("play",this.enforceOneMediaSourceOnly,!0),e.removeEventListener("volumechange",this.enforceOneMediaSourceOnly,!0)}enforceOneMediaSourceOnly(e){const t=e.target,n=t.paused,s=t.muted;if(!n&&!s)for(const e of this.mediaElements)e===t||e.muted||e.pause()}render(){return a.a.createElement(h.Consumer,null,e=>{const t=e?Z({},e,{groupProps:Z({},e.groupProps,this.props)}):{groupProps:this.props,registerMediaElement:this.registerMediaElement,unregisterMediaElement:this.unregisterMediaElement};return a.a.createElement(h.Provider,{value:t},this.props.children)})}}te.propTypes={children:o.a.node.isRequired};var ne=te,se=Object(c.a)("FullscreenContext",{fullscreen:!1,requestFullscreen(){Object(m.b)("Fullscreen request ignored since there is no FullscreenContextProvider ancestor.")},requestExitFullscreen(){Object(m.b)("Exit fullscreen request ignored since there is no FullscreenContextProvider ancestor.")}});const ie={width:"100%",height:"100%"};class ae extends i.PureComponent{constructor(e){super(e),this.state={fullscreen:!1},this.requestFullscreen=this.requestFullscreen.bind(this),this.requestExitFullscreen=this.requestExitFullscreen.bind(this),this.handleFullscreenChange=this.handleFullscreenChange.bind(this),this.fullscreenElement=null}componentDidMount(){document.addEventListener("fullscreenchange",this.handleFullscreenChange),document.addEventListener("webkitfullscreenchange",this.handleFullscreenChange),document.addEventListener("mozfullscreenchange",this.handleFullscreenChange),document.addEventListener("msfullscreenchange",this.handleFullscreenChange)}componentWillUnmount(){document.removeEventListener("fullscreenchange",this.handleFullscreenChange),document.removeEventListener("webkitfullscreenchange",this.handleFullscreenChange),document.removeEventListener("mozfullscreenchange",this.handleFullscreenChange),document.removeEventListener("msfullscreenchange",this.handleFullscreenChange)}requestFullscreen(){this.props.fullscreenEnabled&&(this.fullscreenElement.requestFullscreen?this.fullscreenElement.requestFullscreen():this.fullscreenElement.webkitRequestFullscreen?this.fullscreenElement.webkitRequestFullscreen():this.fullscreenElement.mozRequestFullscreen?this.fullscreenElement.mozRequestFullScreen():this.fullscreenElement.msRequestFullscreen&&this.fullscreenElement.msRequestFullscreen())}requestExitFullscreen(){document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.webkitCancelFullScreen?document.webkitCancelFullScreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.msExitFullscreen&&document.mozExitFullscreen()}handleFullscreenChange(){const e=document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement||document.msFullscreenElement;this.setState({fullscreen:e===this.fullscreenElement})}getFullscreenContext(){const e={fullscreen:this.state.fullscreen,requestFullscreen:this.requestFullscreen,requestExitFullscreen:this.requestExitFullscreen};return this.fullscreenContext&&e.fullscreen===this.fullscreenContext.fullscreen?this.fullscreenContext:this.fullscreenContext=e}render(){const e=this.getFullscreenContext();return a.a.createElement("div",{ref:e=>this.fullscreenElement=e,style:this.state.fullscreen?ie:void 0},a.a.createElement(se.Provider,{value:e},"function"==typeof this.props.children?this.props.children(e):this.props.children))}}ae.propTypes={fullscreenEnabled:o.a.bool.isRequired,children:o.a.oneOfType([o.a.node,o.a.func]).isRequired},ae.defaultProps={fullscreenEnabled:!0};var re=ae;function oe(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var le=function(e,t){const n={},s=e.displayName||e.name;function r(r){return a.a.createElement(se.Consumer,null,o=>a.a.createElement(d.Consumer,null,a=>{const l=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},s=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(s=s.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),s.forEach(function(t){oe(e,t,n[t])})}return e}({},r);for(const e of t)a.hasOwnProperty(e)?l[e]=a[e]:o.hasOwnProperty(e)?l[e]=o[e]:n[e]||(Object(m.b)("Prop '"+e+"' for component "+s+" not found in playerContext or fullscreenContext."),n[e]=!0);return Object(i.createElement)(e,l)}))}return s&&(r.displayName=`PlayerContextFilter(${s})`),r};n.d(t,"PlayerContextConsumer",function(){return ue}),n.d(t,"FullscreenContextConsumer",function(){return ce}),n.d(t,"PlayerContextProvider",function(){return Y}),n.d(t,"PlayerContextGroup",function(){return ne}),n.d(t,"FullscreenContextProvider",function(){return re}),n.d(t,"playerContextFilter",function(){return le}),n.d(t,"PlayerPropTypes",function(){return s}),n.d(t,"logError",function(){return m.a}),n.d(t,"logWarning",function(){return m.b}),n.d(t,"convertToNumberWithinIntervalBounds",function(){return A}),n.d(t,"isPlaylistValid",function(){return q}),n.d(t,"repeatStrategyOptions",function(){return p});const ue=d.Consumer,ce=se.Consumer}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("prop-types"),require("react")):"function"==typeof define&&define.amd?define(["prop-types","react"],t):"object"==typeof exports?exports.cassetteCore=t(require("prop-types"),require("react")):e.cassetteCore=t(e.PropTypes,e.React)}("undefined"!=typeof self?self:this,function(e,t){return function(e){var t={};function n(s){if(t[s])return t[s].exports;var i=t[s]={i:s,l:!1,exports:{}};return e[s].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,s){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:s})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var s=Object.create(null);if(n.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(s,i,function(t){return e[t]}.bind(null,i));return s},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/dist",n(n.s=7)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t,n){"use strict";n.d(t,"a",function(){return i}),n.d(t,"b",function(){return a});const s=console.log.bind(console),i=console.error?console.error.bind(console):s,a=console.warn?console.warn.bind(console):s},function(e,t,n){"use strict";(function(e){var s=n(1),i=n(2);const a=n(6).version,r="undefined"==typeof window?e:window;r.__cassette_contexts__=r.__cassette_contexts__||{},t.a=function(e,t=null){const n=r.__cassette_contexts__[e];if(n)return n.packageVersion!==a&&Object(i.b)(`Warning: multiple versions of ${e} from the @cassette/core`+` package have been loaded. v${a} will be ignored and`+` v${n.packageVersion} will be used instead.`),n;const o=Object(s.createContext)(t);return o.displayName=e,o.packageVersion=a,r.__cassette_contexts__[e]=o,o}}).call(this,n(5))},function(e,t,n){"use strict";e.exports=function(e,t,n){if("function"==typeof Array.prototype.findIndex)return e.findIndex(t,n);if("function"!=typeof t)throw new TypeError("predicate must be a function");var s=Object(e),i=s.length;if(0===i)return-1;for(var a=0;a<i;a++)if(t.call(n,s[a],a,s))return a;return-1}},function(e,t){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(n=window)}e.exports=n},function(e){e.exports={name:"@cassette/core",version:"2.0.0-alpha.8",description:"A simple, clean, and responsive visual wrapper for the HTML audio tag, built with React.",main:"dist/es5/cassette-core.js",scripts:{"build:clean":"rimraf dist","build:webpack":"BUILD_MODE=all webpack --progress",build:"npm run build:clean && npm run build:webpack",prepare:"npm run build",test:'echo "Error: no test specified" && exit 1'},repository:{type:"git",url:"https://github.com/benwiley4000/cassette.git"},engines:{node:">=6.0.0",npm:">=5.0.0"},keywords:["audio","video","media","ui","react","reactjs","responsive","music","player","html5","component","components"],author:{name:"Ben Wiley",email:"[e-mail]",url:"http://benwiley.org/"},license:"MIT",peerDependencies:{react:"^16.3.0"},devDependencies:{"array-find-index":"^1.0.2",rimraf:"^2.5.4",webpack:"^4.17.1"},dependencies:{"prop-types":"^15.5.10"},publishConfig:{access:"public"},gitHead:"dd562013b527ca0b8bb7cba77e21b9565f449ba3"}},function(e,t,n){"use strict";n.r(t);var s={};n.r(s),n.d(s,"controlKeyword",function(){return g}),n.d(s,"control",function(){return b}),n.d(s,"crossOriginAttribute",function(){return y}),n.d(s,"repeatStrategy",function(){return k}),n.d(s,"mediaSource",function(){return v}),n.d(s,"mediaSessionAction",function(){return S}),n.d(s,"mediaSessionArtwork",function(){return E}),n.d(s,"track",function(){return w}),n.d(s,"progressDirection",function(){return T}),n.d(s,"seekMode",function(){return P}),n.d(s,"aspectRatio",function(){return x});var i=n(1),a=n.n(i),r=n(0),o=n.n(r),l=n(4),c=n.n(l),u=n(3),d=Object(u.a)("PlayerContext"),h=Object(u.a)("GroupContext");const p=["none","playlist","track"];var m=n(2);function f(e,t){let n=!1;return function(s,i,a,...r){return i in s?(!n&&t in s&&(Object(m.b)(`Do not define both the '${i}' and '${t}' props.`),n=!0),e.isRequired(s,i,a,...r)):t in s?void 0:new Error(`If the '${t}' prop is not defined, '${i}' must be.`)}}const g=o.a.oneOf(["playpause","backskip","forwardskip","volume","mute","repeat","shuffle","progress","progressdisplay","fullscreen","spacer"]),b=o.a.oneOfType([o.a.func,g]),y=o.a.oneOf(["anonymous","use-credentials"]),k=o.a.oneOf(p),v=o.a.shape({src:o.a.string.isRequired,type:o.a.string.isRequired}),S=o.a.oneOf(["play","pause","previoustrack","nexttrack","seekbackward","seekforward"]),E=o.a.shape({src:o.a.string.isRequired,sizes:o.a.string,type:o.a.string}),w=o.a.shape({url:f(o.a.string,"sources"),sources:f(o.a.arrayOf(v.isRequired),"url"),title:o.a.string.isRequired,artist:o.a.string,album:o.a.string,artwork:o.a.arrayOf(E.isRequired),meta:o.a.object}),T=o.a.oneOf(["left","right","up","down"]),P=o.a.oneOf(["paused","immediate","onrelease"]);function x(e,t){const n=e[t];if(void 0!==n)return"string"!=typeof n||2!==n.split(":").length||n.split(":").some(isNaN)?new Error(`The ${t} prop should be a string of the form 'x:y'. Example: 16:9`):void 0}const O="loopchange",M="srcrequest";var R=function(){const e=document.createElement("video");return new MutationObserver(()=>{e.dispatchEvent(new Event(O))}).observe(e,{attributeFilter:["loop"]}),Object.defineProperty(e,"src",{get:()=>e.currentSrc,set:t=>{const n=new Event(M);n.srcRequested=t,e.dispatchEvent(n)}}),e};function C(e,t,n,s){let i=s;for(let s=0;s<e;s++){if(!t.length)throw C(s,n,t,i),`Moving ${e} places was not possible!`;n.push(i),i=t.pop()}return i}function I(e,t,n,s,i){let a,r=s;if(e.length){for(let s=1;s<=t.length;s++)if(-1!==e.indexOf(t[t.length-s]))return C(s,t,n,r);if(i){if(function(e,t){if(!e.length)return!1;for(let n=0;n<e.length;n++)if(t!==e[n])return!1;return!0}(e,r))return r;do{a=e[Math.floor(Math.random()*e.length)]}while(r===a||void 0===a);return void 0!==(r=C(t.length,t,n,r))&&n.push(r),a}}}var _=class{constructor(e,t={}){this._list=e,this._forwardStack=[],this._backStack=[],this._currentItem=void 0,this._allowBackShuffle=Boolean(t.allowBackShuffle)}findNextItem(e){return void 0!==e&&this.setCurrentIndex(e),this._currentItem=I(this._list,this._forwardStack,this._backStack,this._currentItem,!0),this._currentItem}findPreviousItem(e){return void 0!==e&&this.setCurrentIndex(e),this._currentItem=I(this._list,this._backStack,this._forwardStack,this._currentItem,this._allowBackShuffle),this._currentItem}pickNextItem(e,t){if(void 0!==t&&this.setCurrentIndex(t),void 0!==this._list[e])return void 0!==this._currentItem&&this._backStack.push(this._currentItem),this._forwardStack.length=0,this._currentItem=this._list[e],this._currentItem}setList(e){this._list=e}setOptions(e){for(const t of Object.keys(e))switch(t){case"allowBackShuffle":this[`_${t}`]=Boolean(e[t])}}setCurrentIndex(e){const t=this._list[e];this._currentItem!==t&&(this.clear(),this._currentItem=t)}clear(){this._forwardStack.length=0,this._backStack.length=0,this._currentItem=void 0}};var q=function(e){return Boolean(e&&e.length)};const F=[{src:""}];var L=function(e,t){if(!q(e))return F;const n=e[t],s=n.sources,i=n.url;return s?s.length?s:F:[{src:i}]};var j=function(e,t){return c()(e,e=>e.sources?-1!==c()(e.sources,e=>e.src===t):e.url&&t===e.url)};var V=function(e){return(e||[]).map((t,n)=>L(e,n)[0].src)};var H=function(e){const t=Array(e.length);for(let n=0;n<e.length;n++)t[n]={start:e.start(n),end:e.end(n)};return t};var A=function(e,t){return e?"track":t?"playlist":"none"};var D=function(e,t,n){return t="number"==typeof t?t:-1/0,n="number"==typeof n?n:1/0,Math.max(t,Math.min(e,n))};function B(){return(B=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var s in n)Object.prototype.hasOwnProperty.call(n,s)&&(e[s]=n[s])}return e}).apply(this,arguments)}function N(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},s=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(s=s.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),s.forEach(function(t){U(e,t,n[t])})}return e}function U(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function $(e){if(Object(m.a)(e),"NotAllowedError"===e.name){const e="Media playback failed at "+(new Date).toLocaleTimeString()+"! (Perhaps autoplay is disabled in this browser.)";Object(m.b)(e)}}const z=["previoustrack","nexttrack","seekbackward","seekforward"],W={paused:!0,currentTime:0,seekPreviewTime:0,seekInProgress:!1,awaitingResumeOnSeekComplete:!1,duration:0,bufferedRanges:[],playedRanges:[],seekableRanges:[],stalled:!1,awaitingPlay:!1};function G(e,t,n=!0){const s=e.activeTrackIndex!==t;return{activeTrackIndex:t,trackLoading:s,currentTime:0,loop:!s&&e.loop,awaitingPlay:Boolean(n),paused:!n}}function K(e,t){let n;for(;n=e.firstChild;)e.removeChild(n);for(const n of t){const t=document.createElement("source");t.src=n.src,n.type&&(t.type=n.type),e.appendChild(t)}e.load()}class J extends i.Component{constructor(e){super(e),this.state=N({},W,{activeTrackIndex:D(e.startingTrackIndex,0),trackLoading:q(e.playlist),currentTime:D(e.startingTime,0),volume:D(e.defaultVolume,0,1),muted:e.defaultMuted,loop:"track"===e.defaultRepeatStrategy,cycle:"playlist"===e.defaultRepeatStrategy,shuffle:e.defaultShuffle,playbackRate:e.defaultPlaybackRate,setVolumeInProgress:!1,awaitingPlay:e.autoplay&&q(e.playlist),__playlist__:e.playlist},e.initialStateSnapshot?function(e,t){const n=e.__unstable__,s=n.paused,i=n.currentTime,a=n.activeTrackIndex,r=n.volume,o=n.muted,l=n.loop,c=n.cycle,u=n.shuffle,d=n.playbackRate,h=n.activeTrackSrc,p={};q(t.playlist)&&"boolean"==typeof s&&(p.awaitingPlay=!s),"number"==typeof r&&r>=0&&r<=1&&(p.volume=r),"boolean"==typeof o&&(p.muted=o),"boolean"==typeof l&&(p.loop=l),"boolean"==typeof c&&(p.cycle=c),"boolean"==typeof u&&(p.shuffle=u),"number"==typeof d&&(p.playbackRate=d);let m=!1;if("string"==typeof h&&"number"==typeof a&&a>=0)if(h===L(t.playlist,a)[0].src)p.activeTrackIndex=a,m=!0;else{const e=j(t.playlist,h);-1!==e&&(p.activeTrackIndex=e,m=!0)}return m&&"number"==typeof i&&i>=0&&(p.currentTime=i),p}(e.initialStateSnapshot,e):{}),this.lastStableVolume=this.state.volume,this.shuffler=new _(V(e.playlist),{allowBackShuffle:e.allowBackShuffle}),this.media=null,this.videoHostElementList=[],this.videoHostOccupiedCallbacks=new Map,this.videoHostVacatedCallbacks=new Map,this.togglePause=this.togglePause.bind(this),this.selectTrackIndex=this.selectTrackIndex.bind(this),this.forwardSkip=this.forwardSkip.bind(this),this.backSkip=this.backSkip.bind(this),this.seekPreview=this.seekPreview.bind(this),this.seekComplete=this.seekComplete.bind(this),this.setVolume=this.setVolume.bind(this),this.setVolumeComplete=this.setVolumeComplete.bind(this),this.toggleMuted=this.toggleMuted.bind(this),this.toggleShuffle=this.toggleShuffle.bind(this),this.setRepeatStrategy=this.setRepeatStrategy.bind(this),this.setPlaybackRate=this.setPlaybackRate.bind(this),this.registerVideoHostElement=this.registerVideoHostElement.bind(this),this.renderVideoIntoHostElement=this.renderVideoIntoHostElement.bind(this),this.unregisterVideoHostElement=this.unregisterVideoHostElement.bind(this),this.updateVideoHostElement=this.updateVideoHostElement.bind(this),this.handleMediaPlay=this.handleMediaPlay.bind(this),this.handleMediaPause=this.handleMediaPause.bind(this),this.handleMediaSrcrequest=this.handleMediaSrcrequest.bind(this),this.handleMediaEnded=this.handleMediaEnded.bind(this),this.handleMediaStalled=this.handleMediaStalled.bind(this),this.handleMediaCanplaythrough=this.handleMediaCanplaythrough.bind(this),this.handleMediaTimeupdate=this.handleMediaTimeupdate.bind(this),this.handleMediaLoadedmetadata=this.handleMediaLoadedmetadata.bind(this),this.handleMediaVolumechange=this.handleMediaVolumechange.bind(this),this.handleMediaDurationchange=this.handleMediaDurationchange.bind(this),this.handleMediaProgress=this.handleMediaProgress.bind(this),this.handleMediaLoopchange=this.handleMediaLoopchange.bind(this),this.handleMediaRatechange=this.handleMediaRatechange.bind(this)}componentDidMount(){const e=this.media=R(),t=this.props,n=t.defaultPlaybackRate,s=t.crossOrigin,i=t.playlist,a=t.autoplayDelayInSeconds,r=t.mediaElementRef,o=t.getPosterImageForTrack,l=t.onActiveTrackUpdate,c=this.state,u=c.volume,d=c.muted,h=c.playbackRate,p=c.loop,m=c.activeTrackIndex,f=c.awaitingPlay;e.defaultPlaybackRate=n,e.crossOrigin=s,e.volume=u,e.muted=d,e.playbackRate=h,e.loop=p,e.setAttribute("playsinline",""),e.setAttribute("webkit-playsinline",""),e.setAttribute("preload","metadata"),e.setAttribute("poster",o(i[m])),e.addEventListener("play",this.handleMediaPlay),e.addEventListener("pause",this.handleMediaPause),e.addEventListener("ended",this.handleMediaEnded),e.addEventListener("etalled",this.handleMediaStalled),e.addEventListener("canplaythrough",this.handleMediaCanplaythrough),e.addEventListener("timeupdate",this.handleMediaTimeupdate),e.addEventListener("loadedmetadata",this.handleMediaLoadedmetadata),e.addEventListener("volumechange",this.handleMediaVolumechange),e.addEventListener("durationchange",this.handleMediaDurationchange),e.addEventListener("progress",this.handleMediaProgress),e.addEventListener("ratechange",this.handleMediaRatechange),e.addEventListener("srcrequest",this.handleMediaSrcrequest),e.addEventListener("loopchange",this.handleMediaLoopchange),K(e,L(i,m)),this.mediaContainer.appendChild(e),f&&(this.setState({awaitingPlay:!1}),this.delayTimeout=setTimeout(()=>{this.togglePause(!1)},1e3*a)),r&&r(e),l&&l(i[m],m)}static getDerivedStateFromProps(e,t){const n=e.playlist;if(n===t.__playlist__)return null;const s={__playlist__:n};if(!q(n))return N({},W,s,{activeTrackIndex:0,trackLoading:!1});const i=L(t.__playlist__,t.activeTrackIndex),a=L(n,t.activeTrackIndex);if(i[0].src===a[0].src)return s;const r=j(n,i[0].src);return N({},s,-1!==r?{activeTrackIndex:r}:G(t,0,!1))}componentDidUpdate(e,t){this.media.defaultPlaybackRate=this.props.defaultPlaybackRate,this.media.crossOrigin=this.props.crossOrigin,this.shuffler.setList(V(this.props.playlist)),this.shuffler.setOptions({allowBackShuffle:this.props.allowBackShuffle});const n=L(e.playlist,t.activeTrackIndex),s=L(this.props.playlist,this.state.activeTrackIndex),i=e.playlist[t.activeTrackIndex],a=this.props.playlist[this.state.activeTrackIndex];n[0].src!==s[0].src&&(K(this.media,s),this.media.setAttribute("poster",this.props.getPosterImageForTrack(a)),this.state.shuffle||this.shuffler.clear()),this.props.onActiveTrackUpdate&&i!==a&&this.props.onActiveTrackUpdate(a,this.state.activeTrackIndex),e===this.props||this.media.paused||this.stealMediaSession(),this.state.awaitingPlay&&(this.setState({awaitingPlay:!1}),setTimeout(()=>{this.togglePause(!1)})),clearTimeout(this.snapshotUpdateTimeout),this.snapshotUpdateTimeout=setTimeout(()=>{this.props.onStateSnapshot&&this.props.onStateSnapshot(function(e){const t=e.paused,n=e.currentTime,s=e.activeTrackIndex,i=e.volume,a=e.muted,r=e.loop,o=e.cycle,l=e.shuffle,c=e.playbackRate,u=e.__playlist__;return{__unstable__:{paused:t,currentTime:n,activeTrackIndex:s,volume:i,muted:a,loop:r,cycle:o,shuffle:l,playbackRate:c,activeTrackSrc:q(u)?L(u,s)[0].src:null}}}(this.state))},100)}componentWillUnmount(){const e=this.media;e.removeEventListener("srcrequest",this.handleMediaSrcrequest),e.removeEventListener("loopchange",this.handleMediaLoopchange),clearTimeout(this.gapLengthTimeout),clearTimeout(this.delayTimeout)}stealMediaSession(){window.MediaSession&&navigator.mediaSession instanceof MediaSession&&(navigator.mediaSession.metadata=new MediaMetadata(this.props.playlist[this.state.activeTrackIndex]),z.map(e=>{if(-1===this.props.supportedMediaSessionActions.indexOf(e))return null;const t=this.props.mediaSessionSeekLengthInSeconds;switch(e){case"play":return this.togglePause.bind(this,!1);case"pause":return this.togglePause.bind(this,!0);case"previoustrack":return this.backSkip;case"nexttrack":return this.forwardSkip;case"seekbackward":return()=>this.media.currentTime-=t;case"seekforward":return()=>this.media.currentTime+=t;default:return}}).forEach((e,t)=>{navigator.mediaSession.setActionHandler(z[t],e)}))}registerVideoHostElement(e,{onHostOccupied:t,onHostVacated:n}){this.videoHostElementList=this.videoHostElementList.concat(e),this.videoHostOccupiedCallbacks.set(e,t),this.videoHostVacatedCallbacks.set(e,n)}renderVideoIntoHostElement(e){-1!==this.videoHostElementList.indexOf(e)&&(cancelAnimationFrame(this.videoHostUpdateRaf),this.videoHostUpdateRaf=requestAnimationFrame(()=>this.updateVideoHostElement(e)))}unregisterVideoHostElement(e){this.videoHostElementList=this.videoHostElementList.filter(t=>t!==e),this.videoHostOccupiedCallbacks.delete(e),this.videoHostVacatedCallbacks.delete(e),this.media.parentNode===e&&this.updateVideoHostElement()}updateVideoHostElement(e){e?this.videoHostElementList=[e].concat(this.videoHostElementList.filter(t=>t!==e)):e=this.videoHostElementList[0]||this.mediaContainer;const t=!this.media.paused,n=this.media.parentNode;if(e===n)return;e.appendChild(this.media),t&&this.media.paused&&this.media.play();const s=this.videoHostVacatedCallbacks.get(n);s&&s(this.media);const i=this.videoHostOccupiedCallbacks.get(e);i&&i(this.media)}handleMediaPlay(){this.setState(e=>!1===e.paused?null:{paused:!1}),this.stealMediaSession()}handleMediaPause(){this.setState(e=>!0===e.paused?null:{paused:!0})}handleMediaSrcrequest(e){const t=this.props.playlist,n=L(t,this.state.activeTrackIndex);if(-1!==c()(n,t=>t.src===e.srcRequested))return;const s=j(t,e.srcRequested);-1!==s?this.selectTrackIndex(s):Object(m.a)(`Source '${e.srcRequested}' does not exist in the loaded playlist. `+"Make sure you've updated the 'playlist' prop to PlayerContextProvider before you select this track!")}handleMediaEnded(){if(this.state.seekInProgress)return;clearTimeout(this.gapLengthTimeout);const e=this.props,t=e.playlist,n=e.loadFirstTrackOnPlaylistComplete;if(!q(t))return;const s=this.state,i=s.cycle,a=s.activeTrackIndex;!i&&a+1>=t.length?n&&this.goToTrack(0,!1):this.gapLengthTimeout=setTimeout(this.forwardSkip,1e3*this.props.gapLengthInSeconds)}handleMediaStalled(){this.setState(e=>!0===e.stalled?null:{stalled:!0})}handleMediaCanplaythrough(){this.setState(e=>!1===e.stalled?null:{stalled:!1})}handleMediaTimeupdate(){const e=this.media,t=e.currentTime,n=e.played;this.state.trackLoading?this.media.currentTime=this.state.currentTime:this.setState({currentTime:t,playedRanges:H(n)})}handleMediaLoadedmetadata(){this.media.currentTime!==this.state.currentTime&&(this.media.currentTime=this.state.currentTime),this.setState(e=>!1===e.trackLoading?null:{trackLoading:!1})}handleMediaVolumechange(){const e=this.media,t=e.volume,n=e.muted;this.setState({volume:t,muted:n})}handleMediaDurationchange(){const e=this.media.duration;this.setState({duration:e})}handleMediaProgress(){this.setState({bufferedRanges:H(this.media.buffered),seekableRanges:H(this.media.seekable)})}handleMediaLoopchange(){const e=this.media.loop;this.setState(t=>t.loop===e?null:{loop:e})}handleMediaRatechange(){const e=this.media.playbackRate;this.setState(t=>t.playbackRate===e?null:{playbackRate:e})}togglePause(e){if(clearTimeout(this.delayTimeout),"boolean"==typeof e?e:!this.state.paused)this.media.pause();else if(this.media.currentSrc)try{const e=this.media.play();e&&"function"==typeof e.catch&&e.catch(e=>{if("AbortError"!==e.name)return Promise.reject(e)}).catch($)}catch(e){$(e)}}goToTrack(e,t=!0){clearTimeout(this.delayTimeout),this.setState(n=>G(n,e,t))}selectTrackIndex(e){const t=this.props.playlist;q(t)&&(e<0||e>t.length?Object(m.b)(`Playlist index ${e} is out of bounds!`):(this.state.shuffle&&this.shuffler.pickNextItem(e,this.state.activeTrackIndex),this.goToTrack(e)))}backSkip(){const e=this.props,t=e.playlist,n=e.stayOnBackSkipThreshold,s=this.media,i=this.state,a=i.cycle,r=i.activeTrackIndex,o=i.shuffle;if(!q(t)||s.currentTime>=n||!a&&r<1)return void(s.currentTime=0);let l;if(o){const e=this.shuffler.findPreviousItem(r);if(void 0===e)return void(s.currentTime=0);l=j(t,e)}else(l=r-1)<0&&(l=t.length-1);this.goToTrack(l)}forwardSkip(){const e=this.props.playlist,t=this.state,n=t.cycle,s=t.activeTrackIndex,i=t.shuffle;if(!q(e)||!n&&s+1>=e.length)return;let a;i?a=j(e,this.shuffler.findNextItem(s)):(a=s+1)>=e.length&&(a=0),this.goToTrack(a)}seekPreview(e){if(!q(this.props.playlist))return;const t={seekPreviewTime:e,seekInProgress:!0};switch(this.props.seekMode){case"paused":this.setState(({paused:e,awaitingResumeOnSeekComplete:n})=>N({},t,{awaitingResumeOnSeekComplete:!e||n})),this.media.currentTime=e,this.state.paused||this.togglePause(!0);break;case"immediate":this.setState(({paused:e,awaitingResumeOnSeekComplete:n})=>N({},t,{awaitingResumeOnSeekComplete:!e||n})),this.media.currentTime=e,this.state.awaitingResumeOnSeekComplete&&!this.media.ended&&this.togglePause(!1);break;case"onrelease":this.setState(t)}}seekComplete(e){const t=this.state,n=t.seekPreviewTime,s=t.awaitingResumeOnSeekComplete,i={seekInProgress:!1,awaitingResumeOnSeekComplete:!1},a="number"==typeof e?e:n;isNaN(a)?this.setState(i):(this.setState(N({},i,{currentTime:a})),this.media.currentTime=a,s&&(this.media.ended?this.forwardSkip():this.togglePause(!1)))}setVolume(e,t=!0){t&&!this.state.setVolumeInProgress&&this.setState({setVolumeInProgress:!0});const n=D(e,0,1);this.media.muted=0===n,this.media.volume=n}setVolumeComplete(e){"number"==typeof e&&this.setVolume(e,!1),this.setState({setVolumeInProgress:!1}),this.media.muted||(this.lastStableVolume=this.media.volume)}toggleMuted(e){const t="boolean"==typeof e?e:!this.state.muted;this.media.muted=t,t||(this.media.volume=this.lastStableVolume)}toggleShuffle(e){const t="boolean"==typeof e?e:!this.state.shuffle;this.setState({shuffle:t})}setRepeatStrategy(e){if(-1!==p.indexOf(e))switch(e){case"track":this.media.loop=!0;break;case"playlist":this.setState({loop:!1,cycle:!0}),this.media.loop=!1;break;case"none":this.setState({loop:!1,cycle:!1}),this.media.loop=!1}else Object(m.b)('repeatStrategy "'+e+'" is not one of: '+p.split(", ")+".")}setPlaybackRate(e){this.media.playbackRate=e}getControlProps(){const e=this.props,t=this.state,n={playlist:e.playlist,activeTrackIndex:t.activeTrackIndex,trackLoading:t.trackLoading,paused:t.paused,currentTime:t.currentTime,seekPreviewTime:t.seekPreviewTime,seekInProgress:t.seekInProgress,awaitingResumeOnSeekComplete:t.awaitingResumeOnSeekComplete,duration:t.duration,bufferedRanges:t.bufferedRanges,playedRanges:t.playedRanges,seekableRanges:t.seekableRanges,volume:t.volume,muted:t.muted,shuffle:t.shuffle,stalled:t.stalled,playbackRate:t.playbackRate,setVolumeInProgress:t.setVolumeInProgress,repeatStrategy:A(t.loop,t.cycle),registerVideoHostElement:this.registerVideoHostElement,renderVideoIntoHostElement:this.renderVideoIntoHostElement,unregisterVideoHostElement:this.unregisterVideoHostElement,onTogglePause:this.togglePause,onSelectTrackIndex:this.selectTrackIndex,onBackSkip:this.backSkip,onForwardSkip:this.forwardSkip,onSeekPreview:this.seekPreview,onSeekComplete:this.seekComplete,onSetVolume:this.setVolume,onSetVolumeComplete:this.setVolumeComplete,onToggleMuted:this.toggleMuted,onToggleShuffle:this.toggleShuffle,onSetRepeatStrategy:this.setRepeatStrategy,onSetPlaybackRate:this.setPlaybackRate};if(this.playerContext){for(const e of Object.keys(this.playerContext))if(n[e]!==this.playerContext[e]){this.playerContext=n;break}}else this.playerContext=n;return this.playerContext}render(){const e=this.getControlProps();return a.a.createElement(i.Fragment,null,a.a.createElement("div",{ref:e=>this.mediaContainer=e,hidden:!0}),a.a.createElement(d.Provider,{value:e},"function"==typeof this.props.children?this.props.children(e):this.props.children))}}J.propTypes={playlist:o.a.arrayOf(w.isRequired).isRequired,autoplay:o.a.bool.isRequired,autoplayDelayInSeconds:o.a.number.isRequired,gapLengthInSeconds:o.a.number.isRequired,crossOrigin:y,defaultVolume:o.a.number.isRequired,defaultMuted:o.a.bool,defaultRepeatStrategy:k.isRequired,defaultShuffle:o.a.bool,defaultPlaybackRate:o.a.number.isRequired,startingTime:o.a.number.isRequired,startingTrackIndex:o.a.number.isRequired,loadFirstTrackOnPlaylistComplete:o.a.bool,seekMode:P.isRequired,maintainPlaybackRate:o.a.bool.isRequired,allowBackShuffle:o.a.bool,stayOnBackSkipThreshold:o.a.number.isRequired,supportedMediaSessionActions:o.a.arrayOf(S.isRequired).isRequired,mediaSessionSeekLengthInSeconds:o.a.number.isRequired,mediaElementRef:o.a.func,initialStateSnapshot:o.a.shape({__unstable__:o.a.object.isRequired}),onStateSnapshot:o.a.func,onActiveTrackUpdate:o.a.func,getPosterImageForTrack:o.a.func.isRequired,children:o.a.oneOfType([o.a.node,o.a.func]).isRequired},J.defaultProps={autoplay:!1,autoplayDelayInSeconds:0,gapLengthInSeconds:0,defaultVolume:1,defaultMuted:!1,defaultRepeatStrategy:"playlist",defaultShuffle:!1,defaultPlaybackRate:1,startingTime:0,startingTrackIndex:0,loadFirstTrackOnPlaylistComplete:!0,seekMode:"immediate",maintainPlaybackRate:!1,allowBackShuffle:!1,stayOnBackSkipThreshold:5,supportedMediaSessionActions:["play","pause","previoustrack","nexttrack"],mediaSessionSeekLengthInSeconds:10,getPosterImageForTrack:e=>e&&e.artwork?e.artwork[0].src:""};class Q extends i.Component{componentDidMount(){this.props.groupContext.registerMediaElement(this.mediaElement)}componentWillUnmount(){this.props.groupContext.unregisterMediaElement(this.mediaElement)}render(){const e=this.props,t=e.groupContext,n=e.props,s=n.mediaElementRef,i=function(e,t){if(null==e)return{};var n,s,i={},a=Object.keys(e);for(s=0;s<a.length;s++)n=a[s],t.indexOf(n)>=0||(i[n]=e[n]);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(s=0;s<r.length;s++)n=r[s],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(n,["mediaElementRef"]);return a.a.createElement(J,B({},t.groupProps,i,{mediaElementRef:e=>{s&&s(e),this.mediaElement=e}}))}}Q.propTypes={groupContext:o.a.shape({groupProps:o.a.object.isRequired,registerMediaElement:o.a.func.isRequired,unregisterMediaElement:o.a.func.isRequired}).isRequired};var X=function(e){return a.a.createElement(h.Consumer,null,t=>t?Object(i.createElement)(Q,{groupContext:t,props:e}):Object(i.createElement)(J,e))};function Y(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},s=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(s=s.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),s.forEach(function(t){Z(e,t,n[t])})}return e}function Z(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}class ee extends i.Component{constructor(e){super(e),this.registerMediaElement=this.registerMediaElement.bind(this),this.unregisterMediaElement=this.unregisterMediaElement.bind(this),this.enforceOneMediaSourceOnly=this.enforceOneMediaSourceOnly.bind(this),this.mediaElements=[]}registerMediaElement(e){this.mediaElements=this.mediaElements.concat(e),e.addEventListener("play",this.enforceOneMediaSourceOnly,!0),e.addEventListener("volumechange",this.enforceOneMediaSourceOnly,!0)}unregisterMediaElement(e){this.mediaElements=this.mediaElements.filter(t=>e!==t),e.removeEventListener("play",this.enforceOneMediaSourceOnly,!0),e.removeEventListener("volumechange",this.enforceOneMediaSourceOnly,!0)}enforceOneMediaSourceOnly(e){const t=e.target,n=t.paused,s=t.muted;if(!n&&!s)for(const e of this.mediaElements)e===t||e.muted||e.pause()}render(){return a.a.createElement(h.Consumer,null,e=>{const t=e?Y({},e,{groupProps:Y({},e.groupProps,this.props)}):{groupProps:this.props,registerMediaElement:this.registerMediaElement,unregisterMediaElement:this.unregisterMediaElement};return a.a.createElement(h.Provider,{value:t},this.props.children)})}}ee.propTypes={children:o.a.node.isRequired};var te=ee,ne=Object(u.a)("FullscreenContext",{fullscreen:!1,requestFullscreen(){Object(m.b)("Fullscreen request ignored since there is no FullscreenContextProvider ancestor.")},requestExitFullscreen(){Object(m.b)("Exit fullscreen request ignored since there is no FullscreenContextProvider ancestor.")}});const se={width:"100%",height:"100%"};class ie extends i.PureComponent{constructor(e){super(e),this.state={fullscreen:!1},this.requestFullscreen=this.requestFullscreen.bind(this),this.requestExitFullscreen=this.requestExitFullscreen.bind(this),this.handleFullscreenChange=this.handleFullscreenChange.bind(this),this.fullscreenElement=null}componentDidMount(){document.addEventListener("fullscreenchange",this.handleFullscreenChange),document.addEventListener("webkitfullscreenchange",this.handleFullscreenChange),document.addEventListener("mozfullscreenchange",this.handleFullscreenChange),document.addEventListener("msfullscreenchange",this.handleFullscreenChange)}componentWillUnmount(){document.removeEventListener("fullscreenchange",this.handleFullscreenChange),document.removeEventListener("webkitfullscreenchange",this.handleFullscreenChange),document.removeEventListener("mozfullscreenchange",this.handleFullscreenChange),document.removeEventListener("msfullscreenchange",this.handleFullscreenChange)}requestFullscreen(){this.props.fullscreenEnabled&&(this.fullscreenElement.requestFullscreen?this.fullscreenElement.requestFullscreen():this.fullscreenElement.webkitRequestFullscreen?this.fullscreenElement.webkitRequestFullscreen():this.fullscreenElement.mozRequestFullscreen?this.fullscreenElement.mozRequestFullScreen():this.fullscreenElement.msRequestFullscreen&&this.fullscreenElement.msRequestFullscreen())}requestExitFullscreen(){document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.webkitCancelFullScreen?document.webkitCancelFullScreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.msExitFullscreen&&document.mozExitFullscreen()}handleFullscreenChange(){const e=document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement||document.msFullscreenElement;this.setState({fullscreen:e===this.fullscreenElement})}getFullscreenContext(){const e={fullscreen:this.state.fullscreen,requestFullscreen:this.requestFullscreen,requestExitFullscreen:this.requestExitFullscreen};return this.fullscreenContext&&e.fullscreen===this.fullscreenContext.fullscreen?this.fullscreenContext:this.fullscreenContext=e}render(){const e=this.getFullscreenContext();return a.a.createElement("div",{ref:e=>this.fullscreenElement=e,style:this.state.fullscreen?se:void 0},a.a.createElement(ne.Provider,{value:e},"function"==typeof this.props.children?this.props.children(e):this.props.children))}}ie.propTypes={fullscreenEnabled:o.a.bool.isRequired,children:o.a.oneOfType([o.a.node,o.a.func]).isRequired},ie.defaultProps={fullscreenEnabled:!0};var ae=ie;function re(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var oe=function(e,t){const n={},s=e.displayName||e.name;function r(r){return a.a.createElement(ne.Consumer,null,o=>a.a.createElement(d.Consumer,null,a=>{const l=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},s=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(s=s.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),s.forEach(function(t){re(e,t,n[t])})}return e}({},r);for(const e of t)a.hasOwnProperty(e)?l[e]=a[e]:o.hasOwnProperty(e)?l[e]=o[e]:n[e]||(Object(m.b)("Prop '"+e+"' for component "+s+" not found in playerContext or fullscreenContext."),n[e]=!0);return Object(i.createElement)(e,l)}))}return s&&(r.displayName=`PlayerContextFilter(${s})`),r};n.d(t,"PlayerContextConsumer",function(){return le}),n.d(t,"FullscreenContextConsumer",function(){return ce}),n.d(t,"PlayerContextProvider",function(){return X}),n.d(t,"PlayerContextGroup",function(){return te}),n.d(t,"FullscreenContextProvider",function(){return ae}),n.d(t,"playerContextFilter",function(){return oe}),n.d(t,"PlayerPropTypes",function(){return s}),n.d(t,"logError",function(){return m.a}),n.d(t,"logWarning",function(){return m.b}),n.d(t,"convertToNumberWithinIntervalBounds",function(){return D}),n.d(t,"isPlaylistValid",function(){return q}),n.d(t,"repeatStrategyOptions",function(){return p});const le=d.Consumer,ce=ne.Consumer}])});
 //# sourceMappingURL=cassette-core.min.js.map

docs/playerContext.md

@@ -24,3 +24,5 @@ `playerContext` contains the following values:
 | repeatStrategy               | A value that is either "track", "playlist" or "none". Tells whether the playlist repeats at the playlist level, the track level, or none (playback stops at the end of the playlist).                                      |
-| pipeVideoStreamToCanvas      | A function which accepts an HTMLCanvasElement for displaying video content. Generally it's a better idea to use the [`VideoDisplay`](#videodisplay) component, which uses this internally.                                 |
+| registerVideoHostElement      | A function which registers a DOM element as eligible to host the video content. Generally it's a better idea to use the [`VideoDisplay`](#videodisplay) component, which uses this internally.                                 |
+| renderVideoIntoHostElement      | A function which moves the video content into the given host DOM element. `registerVideoHostElement` must be called first.                                 |
+| unregisterVideoHostElement      | A function which unregisters a DOM element that has been used to host the video content. This should **always** be called before the container is removed from the DOM.                                 |
 | onTogglePause                | A function which can be called with no arguments to toggle the `paused` state, or with a boolean argument to set the `paused` value directly.                                                                              |
@@ -30,6 +32,6 @@ | onSelectTrackIndex           | A function which can be called with an index of a new track to play                                                                                                                                                        |
 | onForwardSkip                | A function which can be called to trigger a forward skip                                                                                                                                                                   |
-| onSeekPreview                | A function which should be called as the seek time is updated, with the new time value as an argument (the resulting behavior depends on the `seekMode` prop passed to [`PlayerContextProvider`](#playercontextprovider)). |
+| onSeekPreview                | A function which should be called as the seek time is updated using a progress slider UI, with the new time value as an argument (the resulting behavior depends on the `seekMode` prop passed to [`PlayerContextProvider`](#playercontextprovider)). **`onSeekComplete` must be called when time updates are finished.** If the seeking UI involves a discrete click/tap only, then simply call `onSeekComplete` with the desired seek time. |
 | onSeekComplete               | A function which should be called in two scenarios: 1. When a time seek has completed (the user has released the mouse), it should be called with **no arguments** to seek to the last time value provided to `onSeekPreview`. Don't forget this! 2. It can be called with a **number argument** that specifies a time to seek to immediately (no need to call `onSeekPreview` first). |
-| onSetVolume                  | A function which should be called as volume adjustments are made, with the new volume as an argument.                                                                                                                      |
-| onSetVolumeComplete          | A function which should be called when the volume update has completed (the user has released the mouse). Don't forget this!                                                                                               |
+| onSetVolume                  | A function which should be called as volume adjustments are made using a volume slider UI, with the new volume as an argument. **`onSetVolumeComplete` must be called when adjustments are finished.** If the volume UI involves a discrete click/tap only, then simply call `onSetVolumeComplete` with the desired volume. |
+| onSetVolumeComplete          | A function which should be called in two scenarios: 1. When a volume update has completed (the user has released the mouse), it should be called with **no arguments** to commit the current volume (the last one set with `onSetVolume`) as stable. Don't forget this! 2. It can be called with a **number argument** that specifies a new volume to set immediately (no need to call `onSetVolume` first). |
 | onToggleMuted                | A function which can be called with no arguments to toggle the `muted` state, or with a boolean argument to set the `muted` value directly.                                                                                |
@@ -36,0 +38,0 @@ | onToggleShuffle              | A function which can be called with no arguments to toggle the `shuffle` state, or with a boolean argument to set the `shuffle` value directly.                                                                            |

package.json

 {
   "name": "@cassette/core",
-  "version": "2.0.0-alpha.7",
+  "version": "2.0.0-alpha.8",
   "description": "A simple, clean, and responsive visual wrapper for the HTML audio tag, built with React.",
@@ -55,3 +55,3 @@ "main": "dist/es5/cassette-core.js",
   },
-  "gitHead": "d3fce0b83c06f6000b6988bd9d75bbae34f97737"
+  "gitHead": "dd562013b527ca0b8bb7cba77e21b9565f449ba3"
 }

src/factories/createCustomMediaElement.js

 const loopchange = 'loopchange';
 const srcrequest = 'srcrequest';
 
-function createCustomMediaElement(media = document.createElement('media')) {
+function createCustomMediaElement() {
+  const media = document.createElement('video');
   new MutationObserver(() => {
@@ -6,0 +7,0 @@ media.dispatchEvent(new Event(loopchange));

src/PlayerContextProvider.js

@@ -18,3 +18,2 @@ import React, { Component, Fragment, createElement } from 'react';
 import convertToNumberWithinIntervalBounds from './utils/convertToNumberWithinIntervalBounds';
-import streamVideoElementToCanvas from './utils/streamVideoElementToCanvas';
 import { logError, logWarning } from './utils/console';
@@ -44,5 +43,2 @@ import { repeatStrategyOptions } from './constants';
 
-// media element readyState
-const HAVE_NOTHING = 0;
-
 const defaultState = {
@@ -91,2 +87,21 @@ // indicates whether media player should be paused
 
+function setMediaElementSources(mediaElement, sources) {
+  // remove current sources
+  let firstChild;
+  while ((firstChild = mediaElement.firstChild)) {
+    mediaElement.removeChild(firstChild);
+  }
+  // add new sources
+  for (const source of sources) {
+    const sourceElement = document.createElement('source');
+    sourceElement.src = source.src;
+    if (source.type) {
+      sourceElement.type = source.type;
+    }
+    mediaElement.appendChild(sourceElement);
+  }
+  // cancel playback and re-scan new sources
+  mediaElement.load();
+}
+
 /**
@@ -145,3 +160,5 @@ * Wraps an area which shares a common [`playerContext`](#playercontext)
 
-    this.setMediaElementRef = this.setMediaElementRef.bind(this);
+    this.videoHostElementList = [];
+    this.videoHostOccupiedCallbacks = new Map();
+    this.videoHostVacatedCallbacks = new Map();
 
@@ -161,3 +178,10 @@ // bind callback methods to pass to descendant elements
     this.setPlaybackRate = this.setPlaybackRate.bind(this);
-    this.pipeVideoStreamToCanvas = this.pipeVideoStreamToCanvas.bind(this);
+    this.registerVideoHostElement = this.registerVideoHostElement.bind(this);
+    this.renderVideoIntoHostElement = this.renderVideoIntoHostElement.bind(
+      this
+    );
+    this.unregisterVideoHostElement = this.unregisterVideoHostElement.bind(
+      this
+    );
+    this.updateVideoHostElement = this.updateVideoHostElement.bind(this);
 
@@ -181,23 +205,63 @@ // bind media event handlers
   componentDidMount() {
-    const media = (this.media = createCustomMediaElement(this.media));
+    const media = (this.media = createCustomMediaElement());
 
+    const {
+      defaultPlaybackRate,
+      crossOrigin,
+      playlist,
+      autoplayDelayInSeconds,
+      mediaElementRef,
+      getPosterImageForTrack,
+      onActiveTrackUpdate
+    } = this.props;
+    const {
+      volume,
+      muted,
+      playbackRate,
+      loop,
+      activeTrackIndex,
+      awaitingPlay
+    } = this.state;
+
     // initialize media properties
-    if (media.readyState !== HAVE_NOTHING) {
-      // we only set the currentTime now if we're beyond the
-      // HAVE_NOTHING readyState. Otherwise we'll let this get
-      // set when the loadedmetadata event fires. This avoids
-      // an issue where some browsers ignore or delay currentTime
-      // updates when in the HAVE_NOTHING state.
-      media.currentTime = this.state.currentTime;
-    }
-    media.volume = this.state.volume;
-    media.muted = this.state.muted;
-    media.defaultPlaybackRate = this.props.defaultPlaybackRate;
-    media.playbackRate = this.state.playbackRate;
+    // We used to set currentTime here.. now waiting for loadedmetadata.
+    // This avoids an issue where some browsers ignore or delay currentTime
+    // updates when in the HAVE_NOTHING state.
+    media.defaultPlaybackRate = defaultPlaybackRate;
+    media.crossOrigin = crossOrigin;
+    media.volume = volume;
+    media.muted = muted;
+    media.playbackRate = playbackRate;
+    media.loop = loop;
+    media.setAttribute('playsinline', '');
+    media.setAttribute('webkit-playsinline', '');
+    media.setAttribute('preload', 'metadata');
+    media.setAttribute(
+      'poster',
+      getPosterImageForTrack(playlist[activeTrackIndex])
+    );
 
-    // add special event listeners on the media element
+    // add listeners for media events
+    media.addEventListener('play', this.handleMediaPlay);
+    media.addEventListener('pause', this.handleMediaPause);
+    media.addEventListener('ended', this.handleMediaEnded);
+    media.addEventListener('etalled', this.handleMediaStalled);
+    media.addEventListener('canplaythrough', this.handleMediaCanplaythrough);
+    media.addEventListener('timeupdate', this.handleMediaTimeupdate);
+    media.addEventListener('loadedmetadata', this.handleMediaLoadedmetadata);
+    media.addEventListener('volumechange', this.handleMediaVolumechange);
+    media.addEventListener('durationchange', this.handleMediaDurationchange);
+    media.addEventListener('progress', this.handleMediaProgress);
+    media.addEventListener('ratechange', this.handleMediaRatechange);
+    // add listeners for special events
     media.addEventListener('srcrequest', this.handleMediaSrcrequest);
     media.addEventListener('loopchange', this.handleMediaLoopchange);
 
-    if (this.state.awaitingPlay) {
+    // set source elements for current track
+    setMediaElementSources(media, getTrackSources(playlist, activeTrackIndex));
+
+    // initially mount media element in the hidden container (this may change)
+    this.mediaContainer.appendChild(media);
+
+    if (awaitingPlay) {
       this.setState({
@@ -208,4 +272,12 @@ awaitingPlay: false
         this.togglePause(false);
-      }, this.props.autoplayDelayInSeconds * 1000);
+      }, autoplayDelayInSeconds * 1000);
     }
+
+    if (mediaElementRef) {
+      mediaElementRef(media);
+    }
+
+    if (onActiveTrackUpdate) {
+      onActiveTrackUpdate(playlist[activeTrackIndex], activeTrackIndex);
+    }
   }
@@ -272,2 +344,3 @@
     this.media.defaultPlaybackRate = this.props.defaultPlaybackRate;
+    this.media.crossOrigin = this.props.crossOrigin;
 
@@ -287,5 +360,10 @@ this.shuffler.setList(getSourceList(this.props.playlist));
     );
+    const prevTrack = prevProps.playlist[prevState.activeTrackIndex];
+    const newTrack = this.props.playlist[this.state.activeTrackIndex];
     if (prevSources[0].src !== newSources[0].src) {
-      // cancel playback and re-scan current sources
-      this.media.load();
+      setMediaElementSources(this.media, newSources);
+      this.media.setAttribute(
+        'poster',
+        this.props.getPosterImageForTrack(newTrack)
+      );
 
@@ -301,2 +379,6 @@ if (!this.state.shuffle) {
 
+    if (this.props.onActiveTrackUpdate && prevTrack !== newTrack) {
+      this.props.onActiveTrackUpdate(newTrack, this.state.activeTrackIndex);
+    }
+
     if (prevProps !== this.props && !this.media.paused) {
@@ -336,9 +418,2 @@ // update running media session based on new props
 
-  setMediaElementRef(ref) {
-    this.media = ref;
-    if (typeof this.props.mediaElementRef === 'function') {
-      this.props.mediaElementRef(ref);
-    }
-  }
-
   stealMediaSession() {
@@ -386,6 +461,60 @@ if (
 
-  pipeVideoStreamToCanvas(canvas, callback) {
-    return streamVideoElementToCanvas(this.media, canvas, callback);
+  registerVideoHostElement(hostElement, { onHostOccupied, onHostVacated }) {
+    this.videoHostElementList = this.videoHostElementList.concat(hostElement);
+    this.videoHostOccupiedCallbacks.set(hostElement, onHostOccupied);
+    this.videoHostVacatedCallbacks.set(hostElement, onHostVacated);
   }
 
+  renderVideoIntoHostElement(hostElement) {
+    if (this.videoHostElementList.indexOf(hostElement) === -1) {
+      return;
+    }
+    cancelAnimationFrame(this.videoHostUpdateRaf);
+    this.videoHostUpdateRaf = requestAnimationFrame(() =>
+      this.updateVideoHostElement(hostElement)
+    );
+  }
+
+  unregisterVideoHostElement(hostElement) {
+    this.videoHostElementList = this.videoHostElementList.filter(
+      elem => elem !== hostElement
+    );
+    this.videoHostOccupiedCallbacks.delete(hostElement);
+    this.videoHostVacatedCallbacks.delete(hostElement);
+    if (this.media.parentNode === hostElement) {
+      this.updateVideoHostElement();
+    }
+  }
+
+  updateVideoHostElement(hostElement) {
+    if (!hostElement) {
+      hostElement = this.videoHostElementList[0] || this.mediaContainer;
+    } else {
+      // move hostElement to front of list
+      this.videoHostElementList = [hostElement].concat(
+        this.videoHostElementList.filter(elem => elem !== hostElement)
+      );
+    }
+    const playing = !this.media.paused;
+    const oldHostElement = this.media.parentNode;
+    if (hostElement === oldHostElement) {
+      return;
+    }
+    hostElement.appendChild(this.media);
+    // according to the HTML spec playback should continue, but
+    // some browsers pause the element whenever it is moved around, so
+    // let's make sure playback resumes if that's the case.
+    if (playing && this.media.paused) {
+      this.media.play();
+    }
+    const onVacated = this.videoHostVacatedCallbacks.get(oldHostElement);
+    if (onVacated) {
+      onVacated(this.media);
+    }
+    const onOccupied = this.videoHostOccupiedCallbacks.get(hostElement);
+    if (onOccupied) {
+      onOccupied(this.media);
+    }
+  }
+
   handleMediaPlay() {
@@ -457,2 +586,7 @@ this.setState(state => (state.paused === false ? null : { paused: false }));
     const { currentTime, played } = this.media;
+    if (this.state.trackLoading) {
+      // correct currentTime to preset, if applicable, during load
+      this.media.currentTime = this.state.currentTime;
+      return;
+    }
     this.setState({
@@ -679,4 +813,4 @@ currentTime,
 
-  setVolume(volume) {
-    if (!this.state.setVolumeInProgress) {
+  setVolume(volume, inProgress = true) {
+    if (inProgress && !this.state.setVolumeInProgress) {
       this.setState({
@@ -691,3 +825,6 @@ setVolumeInProgress: true
 
-  setVolumeComplete() {
+  setVolumeComplete(volume) {
+    if (typeof volume === 'number') {
+      this.setVolume(volume, false);
+    }
     this.setState({
@@ -725,22 +862,22 @@ setVolumeInProgress: false
     }
-    this.setState(() => {
-      switch (repeatStrategy) {
-        case 'track':
-          return {
-            loop: true
-          };
-        case 'playlist':
-          return {
-            loop: false,
-            cycle: true
-          };
-        case 'none':
-          return {
-            loop: false,
-            cycle: false
-          };
-        default:
-          return null;
-      }
-    });
+    switch (repeatStrategy) {
+      case 'track':
+        // state update is automatic
+        this.media.loop = true;
+        break;
+      case 'playlist':
+        this.setState({
+          loop: false,
+          cycle: true
+        });
+        this.media.loop = false;
+        break;
+      case 'none':
+        this.setState({
+          loop: false,
+          cycle: false
+        });
+        this.media.loop = false;
+        break;
+    }
   }
@@ -774,3 +911,5 @@
       repeatStrategy: getRepeatStrategy(state.loop, state.cycle),
-      pipeVideoStreamToCanvas: this.pipeVideoStreamToCanvas,
+      registerVideoHostElement: this.registerVideoHostElement,
+      renderVideoIntoHostElement: this.renderVideoIntoHostElement,
+      unregisterVideoHostElement: this.unregisterVideoHostElement,
       onTogglePause: this.togglePause,
@@ -805,32 +944,6 @@ onSelectTrackIndex: this.selectTrackIndex,
   render() {
-    const sources = getTrackSources(
-      this.props.playlist,
-      this.state.activeTrackIndex
-    );
     const playerContext = this.getControlProps();
     return (
       <Fragment>
-        <video
-          hidden
-          playsInline
-          ref={this.setMediaElementRef}
-          crossOrigin={this.props.crossOrigin}
-          preload="metadata"
-          loop={this.state.loop}
-          onPlay={this.handleMediaPlay}
-          onPause={this.handleMediaPause}
-          onEnded={this.handleMediaEnded}
-          onStalled={this.handleMediaStalled}
-          onCanPlayThrough={this.handleMediaCanplaythrough}
-          onTimeUpdate={this.handleMediaTimeupdate}
-          onLoadedMetadata={this.handleMediaLoadedmetadata}
-          onVolumeChange={this.handleMediaVolumechange}
-          onDurationChange={this.handleMediaDurationchange}
-          onProgress={this.handleMediaProgress}
-          onRateChange={this.handleMediaRatechange}
-        >
-          {sources.map(source => (
-            <source key={source.src} src={source.src} type={source.type} />
-          ))}
-        </video>
+        <div ref={elem => (this.mediaContainer = elem)} hidden />
         <PlayerContext.Provider value={playerContext}>
@@ -873,2 +986,4 @@ {typeof this.props.children === 'function'
   onStateSnapshot: PropTypes.func,
+  onActiveTrackUpdate: PropTypes.func,
+  getPosterImageForTrack: PropTypes.func.isRequired,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired
@@ -894,3 +1009,6 @@ };
   supportedMediaSessionActions: ['play', 'pause', 'previoustrack', 'nexttrack'],
-  mediaSessionSeekLengthInSeconds: 10
+  mediaSessionSeekLengthInSeconds: 10,
+  getPosterImageForTrack(track) {
+    return track && track.artwork ? track.artwork[0].src : '';
+  }
 };
@@ -897,0 +1015,0 @@

No alert changes

Improved metrics

Total package byte prevSize

917394

increased by3.9%

Lines of code

5496

increased by4.15%

No dependency changes