diff --git a/dist/plyr.js b/dist/plyr.js index e87694a5..2eb5b809 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -1,3 +1,3 @@ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define("Plyr",t):e.Plyr=t()}(this,function(){"use strict";function e(){var e=window.localStorage.getItem(this.config.storage.key);return s.is.empty(e)?{}:JSON.parse(e)}function t(t){if(a.storage&&this.config.storage.enabled&&s.is.object(t)){var i=e.call(this);s.extend(i,t),window.localStorage.setItem(this.config.storage.key,JSON.stringify(i))}}var i={enabled:!0,title:"",debug:!1,autoplay:!1,seekTime:10,volume:1,muted:!1,displayDuration:!0,clickToPlay:!0,hideControls:!0,showPosterOnEnd:!1,disableContextMenu:!0,loadSprite:!0,iconPrefix:"plyr",iconUrl:"https://cdn.plyr.io/2.0.10/plyr.svg",blankVideo:"https://cdn.plyr.io/static/blank.mp4",duration:null,quality:{default:"default",options:["hd2160","hd1440","hd1080","hd720","large","medium","small","tiny","default"]},loop:{active:!1,start:null,end:null},speed:{default:1,options:[.5,.75,1,1.25,1.5,1.75,2]},keyboard:{focused:!0,global:!1},tooltips:{controls:!1,seek:!0},captions:{active:!1,language:window.navigator.language.split("-")[0]},fullscreen:{enabled:!0,fallback:!0},storage:{enabled:!0,key:"plyr"},controls:["play-large","play","progress","current-time","mute","volume","captions","settings","pip","airplay","fullscreen"],settings:["captions","quality","speed","loop"],i18n:{restart:"Restart",rewind:"Rewind {seektime} secs",play:"Play",pause:"Pause",forward:"Forward {seektime} secs",seek:"Seek",played:"Played",buffered:"Buffered",currentTime:"Current time",duration:"Duration",volume:"Volume",toggleMute:"Toggle Mute",toggleCaptions:"Toggle Captions",toggleFullscreen:"Toggle Fullscreen",frameTitle:"Player for {title}",captions:"Captions",settings:"Settings",speed:"Speed",quality:"Quality",loop:"Loop",start:"Start",end:"End",all:"All",reset:"Reset",none:"None",disabled:"Disabled"},urls:{vimeo:{api:"https://player.vimeo.com/api/player.js"},youtube:{api:"https://www.youtube.com/iframe_api"}},listeners:{seek:null,play:null,pause:null,restart:null,rewind:null,forward:null,mute:null,volume:null,captions:null,fullscreen:null,pip:null,airplay:null,speed:null,quality:null,loop:null,language:null},events:["ended","progress","stalled","playing","waiting","canplay","canplaythrough","loadstart","loadeddata","loadedmetadata","timeupdate","volumechange","play","pause","error","seeking","seeked","emptied","ratechange","cuechange","enterfullscreen","exitfullscreen","captionsenabled","captionsdisabled","captionchange","controlshidden","controlsshown","ready","statechange","qualitychange","qualityrequested"],selectors:{editable:"input, textarea, select, [contenteditable]",container:".plyr",controls:{container:null,wrapper:".plyr__controls"},labels:"[data-plyr]",buttons:{play:'[data-plyr="play"]',pause:'[data-plyr="pause"]',restart:'[data-plyr="restart"]',rewind:'[data-plyr="rewind"]',forward:'[data-plyr="fast-forward"]',mute:'[data-plyr="mute"]',captions:'[data-plyr="captions"]',fullscreen:'[data-plyr="fullscreen"]',pip:'[data-plyr="pip"]',airplay:'[data-plyr="airplay"]',settings:'[data-plyr="settings"]',loop:'[data-plyr="loop"]'},inputs:{seek:'[data-plyr="seek"]',volume:'[data-plyr="volume"]',speed:'[data-plyr="speed"]',language:'[data-plyr="language"]',quality:'[data-plyr="quality"]'},display:{currentTime:".plyr__time--current",duration:".plyr__time--duration",buffer:".plyr__progress--buffer",played:".plyr__progress--played",loop:".plyr__progress--loop",volume:".plyr__volume--display"},progress:".plyr__progress",captions:".plyr__captions",menu:{quality:".js-plyr__menu__list--quality"}},classNames:{video:"plyr__video-wrapper",embed:"plyr__video-embed",control:"plyr__control",type:"plyr--{0}",stopped:"plyr--stopped",playing:"plyr--playing",muted:"plyr--muted",loading:"plyr--loading",hover:"plyr--hover",tooltip:"plyr__tooltip",hidden:"plyr__sr-only",hideControls:"plyr--hide-controls",isIos:"plyr--is-ios",isTouch:"plyr--is-touch",uiSupported:"plyr--full-ui",menu:{value:"plyr__menu__value",badge:"plyr__badge"},captions:{enabled:"plyr--captions-enabled",active:"plyr--captions-active"},fullscreen:{enabled:"plyr--fullscreen-enabled",fallback:"plyr--fullscreen-fallback"},pip:{supported:"plyr--pip-supported",active:"plyr--pip-active"},airplay:{supported:"plyr--airplay-supported",active:"plyr--airplay-active"},tabFocus:"tab-focus"}},n={embed:["youtube","vimeo"],html5:["video","audio"]},s={is:{object:function(e){return this.getConstructor(e)===Object},number:function(e){return this.getConstructor(e)===Number&&!Number.isNaN(e)},string:function(e){return this.getConstructor(e)===String},boolean:function(e){return this.getConstructor(e)===Boolean},function:function(e){return this.getConstructor(e)===Function},array:function(e){return!this.undefined(e)&&Array.isArray(e)},nodeList:function(e){return!this.undefined(e)&&e instanceof NodeList},htmlElement:function(e){return!this.undefined(e)&&e instanceof HTMLElement},event:function(e){return!this.undefined(e)&&e instanceof Event},cue:function(e){return this.instanceOf(e,window.TextTrackCue)||this.instanceOf(e,window.VTTCue)},track:function(e){return!this.undefined(e)&&(this.instanceOf(e,window.TextTrack)||"string"==typeof e.kind)},undefined:function(e){return null!==e&&void 0===e},empty:function(e){return null===e||void 0===e||(this.string(e)||this.array(e)||this.nodeList(e))&&0===e.length||this.object(e)&&0===Object.keys(e).length},getConstructor:function(e){return null===e||void 0===e?null:e.constructor},instanceOf:function(e,t){return Boolean(e&&t&&e instanceof t)}},getBrowser:function(){return{isIE:!!document.documentMode,isWebkit:"WebkitAppearance"in document.documentElement.style&&!/Edge/.test(navigator.userAgent),isIPhone:/(iPhone|iPod)/gi.test(navigator.platform),isIos:/(iPad|iPhone|iPod)/gi.test(navigator.platform)}},loadScript:function(e){if(!document.querySelectorAll('script[src="'+e+'"]').length){var t=document.createElement("script");t.src=e;var i=document.getElementsByTagName("script")[0];i.parentNode.insertBefore(t,i)}},generateId:function(e){return e+"-"+Math.floor(1e4*Math.random())},inFrame:function(){try{return window.self!==window.top}catch(e){return!0}},wrap:function(e,t){var i=e.length?e:[e];Array.from(i).reverse().forEach(function(e,i){var n=i>0?t.cloneNode(!0):t,s=e.parentNode,a=e.nextSibling;n.appendChild(e),a?s.insertBefore(n,a):s.appendChild(n)})},removeElement:function(e){return s.is.htmlElement(e)&&s.is.htmlElement(e.parentNode)?(e.parentNode.removeChild(e),e):null},insertAfter:function(e,t){t.parentNode.insertBefore(e,t.nextSibling)},createElement:function(e,t,i){var n=document.createElement(e);return s.is.object(t)&&s.setAttributes(n,t),s.is.string(i)&&(n.textContent=i),n},insertElement:function(e,t,i,n){t.appendChild(s.createElement(e,i,n))},emptyElement:function(e){for(var t=e.childNodes.length;t>0;)e.removeChild(e.lastChild),t-=1},setAttributes:function(e,t){Object.keys(t).forEach(function(i){e.setAttribute(i,t[i])})},getAttributesFromSelector:function(e,t){if(!s.is.string(e)||s.is.empty(e))return{};var i={},n=t;return e.split(",").forEach(function(e){var t=e.trim(),a=t.replace(".",""),l=t.replace(/[[\]]/g,"").split("="),o=l[0],r=l.length>1?l[1].replace(/["']/g,""):"";switch(t.charAt(0)){case".":s.is.object(n)&&s.is.string(n.class)&&(n.class+=" "+a),i.class=a;break;case"#":i.id=t.replace("#","");break;case"[":i[o]=r}}),i},toggleClass:function(e,t,i){if(s.is.htmlElement(e)){var n=e.classList.contains(t);return e.classList[i?"add":"remove"](t),i&&!n||!i&&n}return null},hasClass:function(e,t){return s.is.htmlElement(e)&&e.classList.contains(t)},matches:function(e,t){var i={Element:Element},n=i.matches||i.webkitMatchesSelector||i.mozMatchesSelector||i.msMatchesSelector||function(){return Array.from(document.querySelectorAll(t)).includes(this)};return n.call(e,t)},getElements:function(e){return this.elements.container.querySelectorAll(e)},getElement:function(e){return this.elements.container.querySelector(e)},findElements:function(){try{return this.elements.controls=s.getElement.call(this,this.config.selectors.controls.wrapper),this.elements.buttons={play:s.getElements.call(this,this.config.selectors.buttons.play),pause:s.getElement.call(this,this.config.selectors.buttons.pause),restart:s.getElement.call(this,this.config.selectors.buttons.restart),rewind:s.getElement.call(this,this.config.selectors.buttons.rewind),forward:s.getElement.call(this,this.config.selectors.buttons.forward),mute:s.getElement.call(this,this.config.selectors.buttons.mute),pip:s.getElement.call(this,this.config.selectors.buttons.pip),airplay:s.getElement.call(this,this.config.selectors.buttons.airplay),settings:s.getElement.call(this,this.config.selectors.buttons.settings),captions:s.getElement.call(this,this.config.selectors.buttons.captions),fullscreen:s.getElement.call(this,this.config.selectors.buttons.fullscreen)},this.elements.progress=s.getElement.call(this,this.config.selectors.progress),this.elements.inputs={seek:s.getElement.call(this,this.config.selectors.inputs.seek),volume:s.getElement.call(this,this.config.selectors.inputs.volume)},this.elements.display={buffer:s.getElement.call(this,this.config.selectors.display.buffer),duration:s.getElement.call(this,this.config.selectors.display.duration),currentTime:s.getElement.call(this,this.config.selectors.display.currentTime)},s.is.htmlElement(this.elements.progress)&&(this.elements.display.seekTooltip=this.elements.progress.querySelector("."+this.config.classNames.tooltip)),!0}catch(e){return this.warn("It looks like there is a problem with your custom controls HTML",e),this.toggleNativeControls(!0),!1}},getFocusElement:function(){var e=document.activeElement;return e=e&&e!==document.body?document.querySelector(":focus"):null},trapFocus:function(){var e=this,t=s.getElements.call(this,"input:not([disabled]), button:not([disabled])"),i=t[0],n=t[t.length-1];s.on(this.elements.container,"keydown",function(t){9===t.which&&e.fullscreen.active&&(t.target!==n||t.shiftKey?t.target===i&&t.shiftKey&&(t.preventDefault(),n.focus()):(t.preventDefault(),i.focus()))},!1)},toggleListener:function(e,t,i,n,l,o){if(null!==e&&!s.is.undefined(e))if(s.is.nodeList(e))Array.from(e).forEach(function(e){e instanceof Node&&s.toggleListener.call(null,e,t,i,n,l,o)});else{var r=t.split(" "),c=!!s.is.boolean(o)&&o;a.passiveListeners&&(c={passive:!s.is.boolean(l)||l,capture:!!s.is.boolean(o)&&o}),r.forEach(function(t){e[n?"addEventListener":"removeEventListener"](t,i,c)})}},on:function(e,t,i,n,a){s.toggleListener(e,t,i,!0,n,a)},off:function(e,t,i,n,a){s.toggleListener(e,t,i,!1,n,a)},dispatchEvent:function(e,t,i,n){if(e&&t){var a=new CustomEvent(t,{bubbles:!!s.is.boolean(i)&&i,detail:Object.assign({},n,{plyr:this instanceof Plyr?this:null})});e.dispatchEvent(a)}},toggleState:function(e,t){if(!e)return null;var i=s.is.boolean(t)?t:!e.getAttribute("aria-pressed");return e.setAttribute("aria-pressed",i),i},getPercentage:function(e,t){return 0===e||0===t||Number.isNaN(e)||Number.isNaN(t)?0:(e/t*100).toFixed(2)},extend:function(){for(var e=arguments.length,t=Array(e),i=0;i0)&&(t?(i.decreaseVolume(.02),n=-1):(i.increaseVolume(.02),n=1)),(e.deltaY>0||e.deltaX<0)&&(t?(i.increaseVolume(.02),n=1):(i.decreaseVolume(.02),n=-1)),(1===n&&i.media.volume<1||-1===n&&i.media.volume>0)&&e.preventDefault()})},!1),o.enabled&&s.on(document,o.eventType,function(e){i.toggleFullscreen(e)})}},u={addStyleHook:function(){s.toggleClass(this.elements.container,this.config.selectors.container.replace(".",""),!0),s.toggleClass(this.elements.container,this.config.classNames.uiSupported,this.supported.ui)},toggleNativeControls:function(e){e&&this.isHTML5?this.media.setAttribute("controls",""):this.media.removeAttribute("controls")},build:function(){if(c.media.call(this),!this.supported.ui)return this.warn("Basic support only for "+this.type),s.removeElement.call(this,"controls"),s.removeElement.call(this,"buttons.play"),void u.toggleNativeControls.call(this,!0);s.is.htmlElement(this.elements.controls)||(d.inject.call(this),c.controls.call(this)),s.is.htmlElement(this.elements.controls)&&(u.toggleNativeControls.call(this),o.setup.call(this),p.setup.call(this),this.volume=null,u.updateVolume.call(this),this.speed=null,u.timeUpdate.call(this),u.checkPlaying.call(this),this.ready=!0,s.dispatchEvent.call(this,this.media,"ready"),this.config.autoplay&&this.play())},displayDuration:function(){this.supported.ui&&(!this.elements.display.duration&&this.config.displayDuration&&this.media.paused&&u.updateTimeDisplay.call(this,this.duration,this.elements.display.currentTime),this.elements.display.duration&&u.updateTimeDisplay.call(this,this.duration,this.elements.display.duration),d.updateSeekTooltip.call(this))},setTitle:function(){var e=this.config.i18n.play;if(s.is.string(this.config.title)&&!s.is.empty(this.config.title)&&(e+=", "+this.config.title,this.elements.container.setAttribute("aria-label",this.config.title)),this.supported.ui&&(s.is.htmlElement(this.elements.buttons.play)&&this.elements.buttons.play.setAttribute("aria-label",e),s.is.htmlElement(this.elements.buttons.playLarge)&&this.elements.buttons.playLarge.setAttribute("aria-label",e)),this.isEmbed){var t=s.getElement.call(this,"iframe");if(!s.is.htmlElement(t))return;var i=s.is.empty(this.config.title)?"video":this.config.title;t.setAttribute("title",this.config.i18n.frameTitle.replace("{title}",i))}},checkPlaying:function(){s.toggleClass(this.elements.container,this.config.classNames.playing,!this.media.paused),s.toggleClass(this.elements.container,this.config.classNames.stopped,this.media.paused),this.toggleControls(this.media.paused)},updateVolume:function(){if(this.supported.ui){var e=this.media.muted?0:this.media.volume;this.elements.inputs.volume&&u.setRange.call(this,this.elements.inputs.volume,e)}s.toggleClass(this.elements.container,this.config.classNames.muted,this.media.muted),this.supported.ui&&this.elements.buttons.mute&&s.toggleState(this.elements.buttons.mute,this.media.muted)},checkLoading:function(e){var t=this;this.loading="waiting"===e.type,clearTimeout(this.timers.loading),this.timers.loading=setTimeout(function(){s.toggleClass(t.elements.container,t.config.classNames.loading,t.loading),t.toggleControls(t.loading)},this.loading?250:0)},setRange:function(e,t){s.is.htmlElement(e)&&(e.value=t,d.updateRangeFill.call(this,e))},setProgress:function(e,t){var i=s.is.undefined(t)?0:t,n=s.is.undefined(e)?this.elements.display.buffer:e;if(s.is.htmlElement(n)){n.value=i;var a=n.getElementsByTagName("span")[0];s.is.htmlElement(a)&&(a.childNodes[0].nodeValue=i)}},updateProgress:function(e){var t=this;if(this.supported.ui){var i=0;if(e)switch(e.type){case"timeupdate":case"seeking":i=s.getPercentage(this.currentTime,this.duration),"timeupdate"===e.type&&u.setRange.call(this,this.elements.inputs.seek,i);break;case"playing":case"progress":i=function(){var e=t.media.buffered;return e&&e.length?s.getPercentage(e.end(0),t.duration):s.is.number(e)?100*e:0}(),u.setProgress.call(this,this.elements.display.buffer,i)}}},updateTimeDisplay:function(e,t){if(!s.is.htmlElement(t))return null;var i=Number.isNaN(e)?0:e,n=parseInt(i%60,10),a=parseInt(i/60%60,10),l=parseInt(i/60/60%60,10),o=parseInt(this.duration/60/60%60,10)>0;n=("0"+n).slice(-2),a=("0"+a).slice(-2);var r=(o?l+":":"")+a+":"+n;return t.textContent=r,r},timeUpdate:function(e){u.updateTimeDisplay.call(this,this.currentTime,this.elements.display.currentTime),e&&"timeupdate"===e.type&&this.media.seeking||u.updateProgress.call(this,e)}},d={updateRangeFill:function(e){if(this.browser.isWebkit){var t=s.is.event(e)?e.target:e;if(s.is.htmlElement(t)&&"range"===t.getAttribute("type")){s.is.htmlElement(this.elements.styleSheet)||(this.elements.styleSheet=s.createElement("style"),this.elements.container.appendChild(this.elements.styleSheet));var i=this.elements.styleSheet.sheet,n=t.value/t.max*100,a="#"+t.id+"::-webkit-slider-runnable-track",l="{ background-image: linear-gradient(to right, currentColor "+n+"%, transparent "+n+"%) }",o=Array.from(i.rules).findIndex(function(e){return e.selectorText===a});-1!==o&&i.deleteRule(o),i.insertRule([a,l].join(" "))}}},getIconUrl:function(){return{url:this.config.iconUrl,absolute:0===this.config.iconUrl.indexOf("http")||this.browser.isIE&&!window.svg4everybody}},createIcon:function(e,t){var i=d.getIconUrl.call(this),n=(i.absolute?"":i.url)+"#"+this.config.iconPrefix,a=document.createElementNS("http://www.w3.org/2000/svg","svg");s.setAttributes(a,s.extend(t,{role:"presentation"}));var l=document.createElementNS("http://www.w3.org/2000/svg","use");return l.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",n+"-"+e),a.appendChild(l),a},createLabel:function(e){var t=this.config.i18n[e];switch(e){case"pip":t="PIP";break;case"airplay":t="AirPlay"}return s.createElement("span",{class:this.config.classNames.hidden},t)},createBadge:function(e){var t=s.createElement("span",{class:this.config.classNames.menu.value});return t.appendChild(s.createElement("span",{class:this.config.classNames.menu.badge},e)),t},createButton:function(e,t){var i=s.createElement("button"),n=Object.assign({},t),a=e,l=void 0,o=void 0,r=void 0;switch("type"in n||(n.type="button"),"class"in n?-1===n.class.indexOf(this.config.classNames.control)&&(n.class+=" "+this.config.classNames.control):n.class=this.config.classNames.control,a){case"mute":r="toggleMute",l="volume",o="muted";break;case"captions":r="toggleCaptions",l="captions-off",o="captions-on";break;case"fullscreen":r="toggleFullscreen",l="enter-fullscreen",o="exit-fullscreen";break;case"play-large":n.class="plyr__play-large",a="play",r="play",l="play";break;default:r=a,l=a}return s.extend(n,s.getAttributesFromSelector(this.config.selectors.buttons[a],n)),s.is.string(o)&&i.appendChild(d.createIcon.call(this,o,{class:"icon--"+o})),i.appendChild(d.createIcon.call(this,l)),i.appendChild(d.createLabel.call(this,r)),s.setAttributes(i,n),this.elements.buttons[a]=i,i},createRange:function(e,t){var i=s.createElement("label",{for:t.id,class:this.config.classNames.hidden},this.config.i18n[e]),n=s.createElement("input",s.extend(s.getAttributesFromSelector(this.config.selectors.inputs[e]),{type:"range",min:0,max:100,step:.01,value:0,autocomplete:"off"},t));return this.elements.inputs[e]=n,d.updateRangeFill.call(this,n),{label:i,input:n}},createProgress:function(e,t){var i=s.createElement("progress",s.extend(s.getAttributesFromSelector(this.config.selectors.display[e]),{min:0,max:100,value:0},t));if("volume"!==e){i.appendChild(s.createElement("span",null,"0"));var n="";switch(e){case"played":n=this.config.i18n.played;break;case"buffer":n=this.config.i18n.buffered}i.textContent="% "+n.toLowerCase()}return this.elements.display[e]=i,i},createTime:function(e){var t=s.createElement("span",{class:"plyr__time"});return t.appendChild(s.createElement("span",{class:this.config.classNames.hidden},this.config.i18n[e])),t.appendChild(s.createElement("span",s.getAttributesFromSelector(this.config.selectors.display[e]),"00:00")),this.elements.display[e]=t,t},updateSeekTooltip:function(e){if(this.config.tooltips.seek&&s.is.htmlElement(this.elements.inputs.seek)&&s.is.htmlElement(this.elements.display.seekTooltip)&&0!==this.duration){var t=0,i=this.elements.inputs.seek.getBoundingClientRect(),n=this.config.classNames.tooltip+"--visible";if(s.is.event(e))t=100/i.width*(e.pageX-i.left);else{if(!s.hasClass(this.elements.display.seekTooltip,n))return;t=this.elements.display.seekTooltip.style.left.replace("%","")}t<0?t=0:t>100&&(t=100),u.updateTimeDisplay.call(this,this.duration/100*t,this.elements.display.seekTooltip),this.elements.display.seekTooltip.style.left=t+"%",s.is.event(e)&&["mouseenter","mouseleave"].includes(e.type)&&s.toggleClass(this.elements.display.seekTooltip,n,"mouseenter"===e.type)}},toggleTab:function(e,t){var i=this.elements.settings.tabs[e],n=this.elements.settings.panes[e];s.is.htmlElement(i)&&(t?i.removeAttribute("hidden"):i.setAttribute("hidden","")),s.is.htmlElement(n)&&(t?n.removeAttribute("hidden"):n.setAttribute("hidden",""))},setQualityMenu:function(e){var t=this,i=this.elements.settings.panes.quality.querySelector("ul");s.is.array(e)?this.options.quality=e.filter(function(e){return t.config.quality.options.includes(e)}):this.options.quality=this.config.quality.options;var n=!s.is.empty(this.options.quality)&&"youtube"===this.type;if(d.toggleTab.call(this,"quality",n),n){s.emptyElement(i);var a=function(e){var i="";switch(e){case"hd2160":i="4K";break;case"hd1440":i="WQHD";break;case"hd1080":case"hd720":i="HD"}return i.length?d.createBadge.call(t,i):null};this.options.quality.forEach(function(e){var n=s.createElement("li"),l=s.createElement("label",{class:t.config.classNames.control}),o=s.createElement("input",s.extend(s.getAttributesFromSelector(t.config.selectors.inputs.quality),{type:"radio",name:"plyr-quality",value:e}));l.appendChild(o),l.appendChild(document.createTextNode(d.getLabel.call(t,"quality",e)));var r=a(e);s.is.htmlElement(r)&&l.appendChild(r),n.appendChild(l),i.appendChild(n)}),d.updateSetting.call(this,"quality",i)}},getLabel:function(e,t){switch(e){case"speed":return 1===t?"Normal":t+"×";case"quality":switch(t){case"hd2160":return"2160P";case"hd1440":return"1440P";case"hd1080":return"1080P";case"hd720":return"720P";case"large":return"480P";case"medium":return"360P";case"small":return"240P";case"tiny":return"Tiny";case"default":return"Auto";default:return t}case"captions":return d.getLanguage.call(this);default:return null}},updateSetting:function(e,t){var i=this.elements.settings.panes[e],n=null,a=t;switch(e){case"captions":n=this.captions.language,this.captions.enabled||(n="");break;default:if(n=this[e],s.is.empty(n)&&(n=this.config[e].default),!this.options[e].includes(n))return void this.warn("Unsupported value of '"+n+"' for "+e);if(!this.config[e].options.includes(n))return void this.warn("Disabled value of '"+n+"' for "+e)}s.is.htmlElement(a)||(a=i&&i.querySelector("ul"));var l=a&&a.querySelector('input[value="'+n+'"]');s.is.htmlElement(l)&&(l.checked=!0,this.elements.settings.tabs[e].querySelector("."+this.config.classNames.menu.value).innerHTML=d.getLabel.call(this,e,n))},setLoopMenu:function(){var e=this,t=this.elements.settings.panes.loop.querySelector("ul");this.elements.settings.tabs.loop.removeAttribute("hidden"),this.elements.settings.panes.loop.removeAttribute("hidden");var i=!s.is.empty(this.loop.options);d.toggleTab.call(this,"loop",i),s.emptyElement(t),["start","end","all","reset"].forEach(function(i){var n=s.createElement("li"),a=s.createElement("button",s.extend(s.getAttributesFromSelector(e.config.selectors.buttons.loop),{type:"button",class:e.config.classNames.control,"data-plyr-loop-action":i}),e.config.i18n[i]);if(["start","end"].includes(i)){var l=d.createBadge.call(e,"00:00");a.appendChild(l)}n.appendChild(a),t.appendChild(n)})},getLanguage:function(){return this.supported.ui?!a.textTracks||s.is.empty(this.captions.tracks)?this.config.i18n.none:this.captions.enabled?this.captions.currentTrack.label:this.config.i18n.disabled:null},setCaptionsMenu:function(){var e=this,t=this.elements.settings.panes.captions.querySelector("ul"),i=!s.is.empty(this.captions.tracks);if(d.toggleTab.call(this,"captions",i),s.emptyElement(t),!s.is.empty(this.captions.tracks)){var n=Array.from(this.captions.tracks).map(function(e){return{language:e.language,badge:!0,label:s.is.empty(e.label)?e.language.toUpperCase():e.label}});n.unshift({language:"",label:this.config.i18n.none}),n.forEach(function(i){var n=s.createElement("li"),a=s.createElement("label",{class:e.config.classNames.control}),l=s.createElement("input",s.extend(s.getAttributesFromSelector(e.config.selectors.inputs.language),{type:"radio",name:"plyr-language",value:i.language}));i.language.toLowerCase()===e.captions.language.toLowerCase()&&(l.checked=!0),a.appendChild(l),a.appendChild(document.createTextNode(i.label||i.language)),i.badge&&a.appendChild(d.createBadge.call(e,i.language.toUpperCase())),n.appendChild(a),t.appendChild(n)}),d.updateSetting.call(this,"captions",t)}},setSpeedMenu:function(e){var t=this;s.is.array(e)?this.options.speed=e.filter(function(e){return t.config.speed.options.includes(e)}):this.options.speed=this.config.speed.options;var i=!s.is.empty(this.options.speed);if(d.toggleTab.call(this,"speed",i),i){var n=this.elements.settings.panes.speed.querySelector("ul");this.elements.settings.tabs.speed.removeAttribute("hidden"),this.elements.settings.panes.speed.removeAttribute("hidden"),s.emptyElement(n),this.options.speed.forEach(function(e){var i=s.createElement("li"),a=s.createElement("label",{class:t.config.classNames.control}),l=s.createElement("input",s.extend(s.getAttributesFromSelector(t.config.selectors.inputs.speed),{type:"radio",name:"plyr-speed",value:e}));a.appendChild(l),a.insertAdjacentHTML("beforeend",d.getLabel.call(t,"speed",e)),i.appendChild(a),n.appendChild(i)}),d.updateSetting.call(this,"speed",n)}},toggleMenu:function(e){var t=this.elements.settings.form,i=this.elements.buttons.settings,n=s.is.boolean(e)?e:t&&"true"===t.getAttribute("aria-hidden");if(s.is.event(e)){var a=t&&t.contains(e.target),l=e.target===this.elements.buttons.settings;if(a||!a&&!l&&n)return;l&&e.stopPropagation()}i&&i.setAttribute("aria-expanded",n),t&&(t.setAttribute("aria-hidden",!n),n?t.removeAttribute("tabindex"):t.setAttribute("tabindex",-1))},getTabSize:function(e){var t=e.cloneNode(!0);t.style.position="absolute",t.style.opacity=0,t.setAttribute("aria-hidden",!1),Array.from(t.querySelectorAll("input[name]")).forEach(function(e){var t=e.getAttribute("name");e.setAttribute("name",t+"-clone")}),e.parentNode.appendChild(t);var i=t.scrollWidth,n=t.scrollHeight;return s.removeElement(t),{width:i,height:n}},showTab:function(e){var t=this.elements.settings.menu,i=e.target,n="false"===i.getAttribute("aria-expanded"),l=document.getElementById(i.getAttribute("aria-controls"));if(s.is.htmlElement(l)&&"tabpanel"===l.getAttribute("role")){var o=t.querySelector('[role="tabpanel"][aria-hidden="false"]'),r=o.parentNode;if(Array.from(t.querySelectorAll('[aria-controls="'+o.getAttribute("id")+'"]')).forEach(function(e){e.setAttribute("aria-expanded",!1)}),a.transitions&&!a.reducedMotion){r.style.width=o.scrollWidth+"px",r.style.height=o.scrollHeight+"px";var c=d.getTabSize.call(this,l),u=function e(t){t.target===r&&["width","height"].includes(t.propertyName)&&(r.style.width="",r.style.height="",s.off(r,s.transitionEnd,e))};s.on(r,s.transitionEnd,u),r.style.width=c.width+"px",r.style.height=c.height+"px"}o.setAttribute("aria-hidden",!0),o.setAttribute("tabindex",-1),l.setAttribute("aria-hidden",!n),i.setAttribute("aria-expanded",n),l.removeAttribute("tabindex")}},create:function(e){var t=this;if(s.is.empty(this.config.controls))return null;var i=s.createElement("div",s.getAttributesFromSelector(this.config.selectors.controls.wrapper));if(this.config.controls.includes("restart")&&i.appendChild(d.createButton.call(this,"restart")),this.config.controls.includes("rewind")&&i.appendChild(d.createButton.call(this,"rewind")),this.config.controls.includes("play")&&(i.appendChild(d.createButton.call(this,"play")),i.appendChild(d.createButton.call(this,"pause"))),this.config.controls.includes("fast-forward")&&i.appendChild(d.createButton.call(this,"fast-forward")),this.config.controls.includes("progress")){var n=s.createElement("span",s.getAttributesFromSelector(this.config.selectors.progress)),l=d.createRange.call(this,"seek",{id:"plyr-seek-"+e.id});if(n.appendChild(l.label),n.appendChild(l.input),n.appendChild(d.createProgress.call(this,"buffer")),this.config.tooltips.seek){var o=s.createElement("span",{role:"tooltip",class:this.config.classNames.tooltip},"00:00");n.appendChild(o),this.elements.display.seekTooltip=o}this.elements.progress=n,i.appendChild(this.elements.progress)}if(this.config.controls.includes("current-time")&&i.appendChild(d.createTime.call(this,"currentTime")),this.config.controls.includes("duration")&&i.appendChild(d.createTime.call(this,"duration")),this.config.controls.includes("mute")&&i.appendChild(d.createButton.call(this,"mute")),this.config.controls.includes("volume")){var r=s.createElement("span",{class:"plyr__volume"}),c={max:1,step:.05,value:this.config.volume},u=d.createRange.call(this,"volume",s.extend(c,{id:"plyr-volume-"+e.id}));r.appendChild(u.label),r.appendChild(u.input),i.appendChild(r)}if(this.config.controls.includes("captions")&&i.appendChild(d.createButton.call(this,"captions")),this.config.controls.includes("settings")&&!s.is.empty(this.config.settings)){var p=s.createElement("div",{class:"plyr__menu"});p.appendChild(d.createButton.call(this,"settings",{id:"plyr-settings-toggle-"+e.id,"aria-haspopup":!0,"aria-controls":"plyr-settings-"+e.id,"aria-expanded":!1}));var h=s.createElement("form",{class:"plyr__menu__container",id:"plyr-settings-"+e.id,"aria-hidden":!0,"aria-labelled-by":"plyr-settings-toggle-"+e.id,role:"tablist",tabindex:-1}),m=s.createElement("div"),g=s.createElement("div",{id:"plyr-settings-"+e.id+"-home","aria-hidden":!1,"aria-labelled-by":"plyr-settings-toggle-"+e.id,role:"tabpanel"}),f=s.createElement("ul",{role:"tablist"});this.config.settings.forEach(function(i){var n=s.createElement("li",{role:"tab",hidden:""}),a=s.createElement("button",s.extend(s.getAttributesFromSelector(t.config.selectors.buttons.settings),{type:"button",class:t.config.classNames.control+" "+t.config.classNames.control+"--forward",id:"plyr-settings-"+e.id+"-"+i+"-tab","aria-haspopup":!0,"aria-controls":"plyr-settings-"+e.id+"-"+i,"aria-expanded":!1}),t.config.i18n[i]),l=s.createElement("span",{class:t.config.classNames.menu.value});l.innerHTML=e[i],a.appendChild(l),n.appendChild(a),f.appendChild(n),t.elements.settings.tabs[i]=n}),g.appendChild(f),m.appendChild(g),this.config.settings.forEach(function(i){var n=s.createElement("div",{id:"plyr-settings-"+e.id+"-"+i,"aria-hidden":!0,"aria-labelled-by":"plyr-settings-"+e.id+"-"+i+"-tab",role:"tabpanel",tabindex:-1,hidden:""}),a=s.createElement("button",{type:"button",class:t.config.classNames.control+" "+t.config.classNames.control+"--back","aria-haspopup":!0,"aria-controls":"plyr-settings-"+e.id+"-home","aria-expanded":!1},t.config.i18n[i]);n.appendChild(a);var l=s.createElement("ul");n.appendChild(l),m.appendChild(n),t.elements.settings.panes[i]=n}),h.appendChild(m),p.appendChild(h),i.appendChild(p),this.elements.settings.form=h,this.elements.settings.menu=p}return this.config.controls.includes("pip")&&a.pip&&i.appendChild(d.createButton.call(this,"pip")),this.config.controls.includes("airplay")&&a.airplay&&i.appendChild(d.createButton.call(this,"airplay")),this.config.controls.includes("fullscreen")&&i.appendChild(d.createButton.call(this,"fullscreen")),this.config.controls.includes("play-large")&&(this.elements.buttons.playLarge=d.createButton.call(this,"play-large"),this.elements.container.appendChild(this.elements.buttons.playLarge)),this.elements.controls=i,this.config.controls.includes("settings")&&this.config.settings.includes("speed")&&d.setSpeedMenu.call(this),i},inject:function(){var e=this;if(this.config.loadSprite){var t=d.getIconUrl.call(this);t.absolute?(this.log("AJAX loading absolute SVG sprite "+(this.browser.isIE?"(due to IE)":"")),s.loadSprite(t.url,"sprite-plyr")):this.log("Sprite will be used as external resource directly")}this.id=Math.floor(1e4*Math.random());var i=null;i=s.is.string(this.config.controls)?this.config.controls:s.is.function(this.config.controls)?this.config.controls({id:this.id,seektime:this.config.seekTime,title:this.config.title}):d.create.call(this,{id:this.id,seektime:this.config.seekTime,speed:this.speed,quality:this.quality,captions:d.getLanguage.call(this)});var n=void 0;if(s.is.string(this.config.selectors.controls.container)&&(n=document.querySelector(this.config.selectors.controls.container)),s.is.htmlElement(n)||(n=this.elements.container),s.is.htmlElement(i)?n.appendChild(i):n.insertAdjacentHTML("beforeend",i),s.is.htmlElement(this.elements.controls)&&s.findElements.call(this),this.config.tooltips.controls){var a=s.getElements.call(this,[this.config.selectors.controls.wrapper," ",this.config.selectors.labels," .",this.config.classNames.hidden].join(""));Array.from(a).forEach(function(t){s.toggleClass(t,e.config.classNames.hidden,!1),s.toggleClass(t,e.config.classNames.tooltip,!0)})}}},p={setup:function(){var e=this;if(this.supported.ui){if(s.is.empty(r.get.call(this).language)?s.is.empty(this.captions.language)&&(this.captions.language=this.config.captions.language.toLowerCase()):this.captions.language=r.get.call(this).language,s.is.boolean(this.captions.enabled)||(s.is.empty(r.get.call(this).language)?this.captions.enabled=this.config.captions.active:this.captions.enabled=r.get.call(this).captions),!["video","vimeo"].includes(this.type)||"video"===this.type&&!a.textTracks)return this.captions.tracks=null,void(this.config.controls.includes("settings")&&this.config.settings.includes("captions")&&d.setCaptionsMenu.call(this));if(s.is.htmlElement(this.elements.captions)||(this.elements.captions=s.createElement("div",s.getAttributesFromSelector(this.config.selectors.captions)),s.insertAfter(this.elements.captions,this.elements.wrapper)),"video"===this.type&&(this.captions.tracks=this.media.textTracks),s.toggleClass(this.elements.container,this.config.classNames.captions.enabled,!s.is.empty(this.captions.tracks)),!s.is.empty(this.captions.tracks)){p.show.call(this);var t=function(){e.captions.currentTrack=null,Array.from(e.captions.tracks).forEach(function(t){t.language===e.captions.language.toLowerCase()&&(e.captions.currentTrack=t)})};if(t(),!s.is.track(this.captions.currentTrack)){var i=this.config.captions.language;this.captions.language=i,t(),s.is.track(this.captions.currentTrack)||this.toggleCaptions(!1),d.updateSetting.call(this,"captions")}if("video"===this.type){Array.from(this.captions.tracks).forEach(function(t){s.off(t,"cuechange",function(t){return p.setCue.call(e,t)}),t.mode="hidden"});var n=this.captions.currentTrack&&["captions","subtitles"].includes(this.captions.currentTrack.kind);s.is.track(this.captions.currentTrack)&&n&&(s.on(this.captions.currentTrack,"cuechange",function(t){return p.setCue.call(e,t)}),this.captions.currentTrack.activeCues&&this.captions.currentTrack.activeCues.length>0&&p.setCue.call(this,this.captions.currentTrack))}else"vimeo"===this.type&&this.captions.active&&this.embed.enableTextTrack(this.captions.language);this.config.controls.includes("settings")&&this.config.settings.includes("captions")&&d.setCaptionsMenu.call(this)}}},setCue:function(e){var t=(s.is.event(e)?e.target:e).activeCues[0];s.is.cue(t)?p.set.call(this,t.getCueAsHTML()):p.set.call(this),s.dispatchEvent.call(this,this.media,"cuechange")},set:function(e){if(this.supported.ui)if(s.is.htmlElement(this.elements.captions)){var t=s.createElement("span");s.emptyElement(this.elements.captions);var i=s.is.undefined(e)?"":e;s.is.string(i)?t.textContent=i.trim():t.appendChild(i),this.elements.captions.appendChild(t)}else this.warn("No captions element to render to")},show:function(){if(this.elements.buttons.captions){var e=r.get.call(this).captions;s.is.boolean(e)?this.captions.active=e:e=this.captions.active,e&&(s.toggleClass(this.elements.container,this.config.classNames.captions.active,!0),s.toggleState(this.elements.buttons.captions,!0))}}},h={setup:function(){var e=this,t=s.parseYouTubeId(this.embedId),i=s.getElements.call(this,'[id^="'+this.type+'-"]');Array.from(i).forEach(s.removeElement),s.toggleClass(this.elements.wrapper,this.config.classNames.embed,!0),this.media.setAttribute("id",s.generateId(this.type)),s.is.object(window.YT)?h.ready.call(this,t):(s.loadScript(this.config.urls.youtube.api),window.onYouTubeReadyCallbacks=window.onYouTubeReadyCallbacks||[],window.onYouTubeReadyCallbacks.push(function(){h.ready.call(e,t)}),window.onYouTubeIframeAPIReady=function(){window.onYouTubeReadyCallbacks.forEach(function(e){e()})})},ready:function(e){var t=this;t.embed=new window.YT.Player(t.media.id,{videoId:e,playerVars:{autoplay:t.config.autoplay?1:0,controls:t.supported.ui?0:1,rel:0,showinfo:0,iv_load_policy:3,modestbranding:1,disablekb:1,playsinline:1,origin:window&&window.location.hostname,widget_referrer:window&&window.location.href},events:{onError:function(e){s.dispatchEvent.call(t,t.media,"error",!0,{code:e.data,embed:e.target})},onPlaybackQualityChange:function(e){var i=e.target;t.media.quality=i.getPlaybackQuality(),s.dispatchEvent.call(t,t.media,"qualitychange")},onPlaybackRateChange:function(e){var i=e.target;t.media.playbackRate=i.getPlaybackRate(),s.dispatchEvent.call(t,t.media,"ratechange")},onReady:function(e){var i=e.target;t.media.play=function(){i.playVideo(),t.media.paused=!1},t.media.pause=function(){i.pauseVideo(),t.media.paused=!0},t.media.stop=function(){i.stopVideo(),t.media.paused=!0},t.media.duration=i.getDuration(),t.media.paused=!0,t.media.muted=i.isMuted(),t.media.currentTime=0,Object.defineProperty(t.media,"currentTime",{get:function(){return Number(i.getCurrentTime())},set:function(e){t.media.seeking=!0,s.dispatchEvent.call(t,t.media,"seeking"),i.seekTo(e)}}),Object.defineProperty(t.media,"playbackRate",{get:function(){return i.getPlaybackRate()},set:function(e){i.setPlaybackRate(e)}}),Object.defineProperty(t.media,"volume",{get:function(){return i.getVolume()/100},set:function(e){i.setVolume(100*e),s.dispatchEvent.call(t,t.media,"volumechange")}}),Object.defineProperty(t.media,"currentSrc",{get:function(){return i.getVideoUrl()}}),t.config.controls.includes("settings")&&t.config.settings.includes("speed")&&d.setSpeedMenu.call(t,i.getAvailablePlaybackRates()),t.config.title=i.getVideoData().title,t.supported.ui&&t.media.setAttribute("tabindex",-1),window.setTimeout(function(){return u.build.call(t)},0),s.dispatchEvent.call(t,t.media,"timeupdate"),s.dispatchEvent.call(t,t.media,"durationchange"),window.clearInterval(t.timers.buffering),t.timers.buffering=window.setInterval(function(){t.media.buffered=i.getVideoLoadedFraction(),(null===t.media.lastBuffered||t.media.lastBuffered1&&void 0!==arguments[1]&&arguments[1],n=function(){if(document.body.style.overflow="",t.embed=null,i)s.removeElement(t.elements.captions),s.removeElement(t.elements.controls),s.removeElement(t.elements.wrapper),t.elements.captions=null,t.elements.controls=null,t.elements.wrapper=null,s.is.function(e)&&e();else{var n=t.elements.container.parentNode;s.is.htmlElement(n)&&n.replaceChild(t.elements.original,t.elements.container),s.dispatchEvent.call(t,t.elements.original,"destroyed",!0),s.is.function(e)&&e.call(t.elements.original),t.elements=null}};switch(this.type){case"youtube":window.clearInterval(this.timers.buffering),window.clearInterval(this.timers.playing),this.embed.destroy(),n();break;case"vimeo":this.embed.unload().then(n),window.setTimeout(n,200);break;case"video":case"audio":u.toggleNativeControls.call(this,!0),n()}}},{key:"isHTML5",get:function(){return n.html5.includes(this.type)}},{key:"isEmbed",get:function(){return n.embed.includes(this.type)}},{key:"currentTime",set:function(e){var t=0;s.is.number(e)&&(t=e),t<0?t=0:t>this.duration&&(t=this.duration),this.media.currentTime=t.toFixed(4),this.log("Seeking to "+this.currentTime+" seconds")},get:function(){return Number(this.media.currentTime)}},{key:"duration",get:function(){var e=parseInt(this.config.duration,10),t=Number(this.media.duration);return Number.isNaN(e)?t:e}},{key:"volume",set:function(e){var t=e,i=!s.is.undefined(t);return s.is.string(t)&&(t=Number(t)),s.is.number(t)||(t=r.get.call(this).volume),s.is.number(t)||(t=this.config.volume),t>1&&(t=1),t<0&&(t=0),this.media.volume=t,0===t?this.toggleMute(!0):this.media.muted&&i&&this.toggleMute(),this},get:function(){return this.media.volume}},{key:"speed",set:function(e){var t=s.is.number(e)?e:parseFloat(r.get.call(this).speed||this.speed.selected||this.config.speed.default);t<.1&&(t=.1),t>2&&(t=2),this.config.speed.options.includes(t)?this.media.playbackRate=t:this.warn("Unsupported speed ("+t+")")},get:function(){return this.media.playbackRate}},{key:"quality",set:function(e){var t=s.is.string(e)?e:parseFloat(r.get.call(this).quality||this.config.quality.selected);if(this.config.quality.options.includes(t))switch(this.type){case"youtube":this.utils.dispatchEvent.call(this,this.media,"qualityrequested",!1,{quality:t}),this.embed.setPlaybackQuality(t);break;default:this.warn("Quality options are only available for YouTube")}else this.warn("Unsupported quality option ("+t+")")},get:function(){switch(this.type){case"youtube":return this.embed.getPlaybackQuality();default:return this.warn("Quality options are only available for YouTube"),null}}},{key:"src",set:function(e){f.change.call(this,e)},get:function(){return this.media.currentSrc}},{key:"poster",set:function(e){"video"===this.type?s.is.string(e)&&this.media.setAttribute("poster",e):this.warn("Poster can only be set on HTML5 video")},get:function(){return"video"!==this.type?null:this.media.getAttribute("poster")}},{key:"language",set:function(e){var t=this;if(!s.is.string(e))return t;var i=e.toLowerCase();return this.captions.language===i?t:(this.toggleCaptions(!0),this.captions.language=i,s.dispatchEvent.call(this,this.media,"captionchange"),p.set.call(this),p.setup.call(this),this)},get:function(){return this.captions.language}}]),e}()}); +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define("Plyr",t):e.Plyr=t()}(this,function(){"use strict";function e(){var e=window.localStorage.getItem(this.config.storage.key);return s.is.empty(e)?{}:JSON.parse(e)}function t(t){if(a.storage&&this.config.storage.enabled&&s.is.object(t)){var i=e.call(this);s.extend(i,t),window.localStorage.setItem(this.config.storage.key,JSON.stringify(i))}}var i={enabled:!0,title:"",debug:!1,autoplay:!1,seekTime:10,volume:1,muted:!1,displayDuration:!0,clickToPlay:!0,hideControls:!0,showPosterOnEnd:!1,disableContextMenu:!0,loadSprite:!0,iconPrefix:"plyr",iconUrl:"https://cdn.plyr.io/2.0.10/plyr.svg",blankVideo:"https://cdn.plyr.io/static/blank.mp4",duration:null,quality:{default:"default",options:["hd2160","hd1440","hd1080","hd720","large","medium","small","tiny","default"]},loop:{active:!1,start:null,end:null},speed:{default:1,options:[.5,.75,1,1.25,1.5,1.75,2]},keyboard:{focused:!0,global:!1},tooltips:{controls:!1,seek:!0},captions:{active:!1,language:window.navigator.language.split("-")[0]},fullscreen:{enabled:!0,fallback:!0},storage:{enabled:!0,key:"plyr"},controls:["play-large","play","progress","current-time","mute","volume","captions","settings","pip","airplay","fullscreen"],settings:["captions","quality","speed","loop"],i18n:{restart:"Restart",rewind:"Rewind {seektime} secs",play:"Play",pause:"Pause",forward:"Forward {seektime} secs",seek:"Seek",played:"Played",buffered:"Buffered",currentTime:"Current time",duration:"Duration",volume:"Volume",toggleMute:"Toggle Mute",toggleCaptions:"Toggle Captions",toggleFullscreen:"Toggle Fullscreen",frameTitle:"Player for {title}",captions:"Captions",settings:"Settings",speed:"Speed",quality:"Quality",loop:"Loop",start:"Start",end:"End",all:"All",reset:"Reset",none:"None",disabled:"Disabled"},urls:{vimeo:{api:"https://player.vimeo.com/api/player.js"},youtube:{api:"https://www.youtube.com/iframe_api"}},listeners:{seek:null,play:null,pause:null,restart:null,rewind:null,forward:null,mute:null,volume:null,captions:null,fullscreen:null,pip:null,airplay:null,speed:null,quality:null,loop:null,language:null},events:["ended","progress","stalled","playing","waiting","canplay","canplaythrough","loadstart","loadeddata","loadedmetadata","timeupdate","volumechange","play","pause","error","seeking","seeked","emptied","ratechange","cuechange","enterfullscreen","exitfullscreen","captionsenabled","captionsdisabled","captionchange","controlshidden","controlsshown","ready","statechange","qualitychange","qualityrequested"],selectors:{editable:"input, textarea, select, [contenteditable]",container:".plyr",controls:{container:null,wrapper:".plyr__controls"},labels:"[data-plyr]",buttons:{play:'[data-plyr="play"]',pause:'[data-plyr="pause"]',restart:'[data-plyr="restart"]',rewind:'[data-plyr="rewind"]',forward:'[data-plyr="fast-forward"]',mute:'[data-plyr="mute"]',captions:'[data-plyr="captions"]',fullscreen:'[data-plyr="fullscreen"]',pip:'[data-plyr="pip"]',airplay:'[data-plyr="airplay"]',settings:'[data-plyr="settings"]',loop:'[data-plyr="loop"]'},inputs:{seek:'[data-plyr="seek"]',volume:'[data-plyr="volume"]',speed:'[data-plyr="speed"]',language:'[data-plyr="language"]',quality:'[data-plyr="quality"]'},display:{currentTime:".plyr__time--current",duration:".plyr__time--duration",buffer:".plyr__progress--buffer",played:".plyr__progress--played",loop:".plyr__progress--loop",volume:".plyr__volume--display"},progress:".plyr__progress",captions:".plyr__captions",menu:{quality:".js-plyr__menu__list--quality"}},classNames:{video:"plyr__video-wrapper",embed:"plyr__video-embed",control:"plyr__control",type:"plyr--{0}",stopped:"plyr--stopped",playing:"plyr--playing",muted:"plyr--muted",loading:"plyr--loading",hover:"plyr--hover",tooltip:"plyr__tooltip",hidden:"plyr__sr-only",hideControls:"plyr--hide-controls",isIos:"plyr--is-ios",isTouch:"plyr--is-touch",uiSupported:"plyr--full-ui",menu:{value:"plyr__menu__value",badge:"plyr__badge"},captions:{enabled:"plyr--captions-enabled",active:"plyr--captions-active"},fullscreen:{enabled:"plyr--fullscreen-enabled",fallback:"plyr--fullscreen-fallback"},pip:{supported:"plyr--pip-supported",active:"plyr--pip-active"},airplay:{supported:"plyr--airplay-supported",active:"plyr--airplay-active"},tabFocus:"tab-focus"}},n={embed:["youtube","vimeo"],html5:["video","audio"]},s={is:{object:function(e){return this.getConstructor(e)===Object},number:function(e){return this.getConstructor(e)===Number&&!Number.isNaN(e)},string:function(e){return this.getConstructor(e)===String},boolean:function(e){return this.getConstructor(e)===Boolean},function:function(e){return this.getConstructor(e)===Function},array:function(e){return!this.undefined(e)&&Array.isArray(e)},nodeList:function(e){return!this.undefined(e)&&e instanceof NodeList},htmlElement:function(e){return!this.undefined(e)&&e instanceof HTMLElement},event:function(e){return!this.undefined(e)&&e instanceof Event},cue:function(e){return this.instanceOf(e,window.TextTrackCue)||this.instanceOf(e,window.VTTCue)},track:function(e){return!this.undefined(e)&&(this.instanceOf(e,window.TextTrack)||"string"==typeof e.kind)},undefined:function(e){return null!==e&&void 0===e},empty:function(e){return null===e||void 0===e||(this.string(e)||this.array(e)||this.nodeList(e))&&0===e.length||this.object(e)&&0===Object.keys(e).length},getConstructor:function(e){return null===e||void 0===e?null:e.constructor},instanceOf:function(e,t){return Boolean(e&&t&&e instanceof t)}},getBrowser:function(){return{isIE:!!document.documentMode,isWebkit:"WebkitAppearance"in document.documentElement.style&&!/Edge/.test(navigator.userAgent),isIPhone:/(iPhone|iPod)/gi.test(navigator.platform),isIos:/(iPad|iPhone|iPod)/gi.test(navigator.platform)}},loadScript:function(e){if(!document.querySelectorAll('script[src="'+e+'"]').length){var t=document.createElement("script");t.src=e;var i=document.getElementsByTagName("script")[0];i.parentNode.insertBefore(t,i)}},generateId:function(e){return e+"-"+Math.floor(1e4*Math.random())},inFrame:function(){try{return window.self!==window.top}catch(e){return!0}},wrap:function(e,t){var i=e.length?e:[e];Array.from(i).reverse().forEach(function(e,i){var n=i>0?t.cloneNode(!0):t,s=e.parentNode,a=e.nextSibling;n.appendChild(e),a?s.insertBefore(n,a):s.appendChild(n)})},removeElement:function(e){return s.is.htmlElement(e)&&s.is.htmlElement(e.parentNode)?(e.parentNode.removeChild(e),e):null},insertAfter:function(e,t){t.parentNode.insertBefore(e,t.nextSibling)},createElement:function(e,t,i){var n=document.createElement(e);return s.is.object(t)&&s.setAttributes(n,t),s.is.string(i)&&(n.textContent=i),n},insertElement:function(e,t,i,n){t.appendChild(s.createElement(e,i,n))},emptyElement:function(e){for(var t=e.childNodes.length;t>0;)e.removeChild(e.lastChild),t-=1},setAttributes:function(e,t){Object.keys(t).forEach(function(i){e.setAttribute(i,t[i])})},getAttributesFromSelector:function(e,t){if(!s.is.string(e)||s.is.empty(e))return{};var i={},n=t;return e.split(",").forEach(function(e){var t=e.trim(),a=t.replace(".",""),l=t.replace(/[[\]]/g,"").split("="),o=l[0],r=l.length>1?l[1].replace(/["']/g,""):"";switch(t.charAt(0)){case".":s.is.object(n)&&s.is.string(n.class)&&(n.class+=" "+a),i.class=a;break;case"#":i.id=t.replace("#","");break;case"[":i[o]=r}}),i},toggleClass:function(e,t,i){if(s.is.htmlElement(e)){var n=e.classList.contains(t);return e.classList[i?"add":"remove"](t),i&&!n||!i&&n}return null},hasClass:function(e,t){return s.is.htmlElement(e)&&e.classList.contains(t)},matches:function(e,t){var i={Element:Element},n=i.matches||i.webkitMatchesSelector||i.mozMatchesSelector||i.msMatchesSelector||function(){return Array.from(document.querySelectorAll(t)).includes(this)};return n.call(e,t)},getElements:function(e){return this.elements.container.querySelectorAll(e)},getElement:function(e){return this.elements.container.querySelector(e)},findElements:function(){try{return this.elements.controls=s.getElement.call(this,this.config.selectors.controls.wrapper),this.elements.buttons={play:s.getElements.call(this,this.config.selectors.buttons.play),pause:s.getElement.call(this,this.config.selectors.buttons.pause),restart:s.getElement.call(this,this.config.selectors.buttons.restart),rewind:s.getElement.call(this,this.config.selectors.buttons.rewind),forward:s.getElement.call(this,this.config.selectors.buttons.forward),mute:s.getElement.call(this,this.config.selectors.buttons.mute),pip:s.getElement.call(this,this.config.selectors.buttons.pip),airplay:s.getElement.call(this,this.config.selectors.buttons.airplay),settings:s.getElement.call(this,this.config.selectors.buttons.settings),captions:s.getElement.call(this,this.config.selectors.buttons.captions),fullscreen:s.getElement.call(this,this.config.selectors.buttons.fullscreen)},this.elements.progress=s.getElement.call(this,this.config.selectors.progress),this.elements.inputs={seek:s.getElement.call(this,this.config.selectors.inputs.seek),volume:s.getElement.call(this,this.config.selectors.inputs.volume)},this.elements.display={buffer:s.getElement.call(this,this.config.selectors.display.buffer),duration:s.getElement.call(this,this.config.selectors.display.duration),currentTime:s.getElement.call(this,this.config.selectors.display.currentTime)},s.is.htmlElement(this.elements.progress)&&(this.elements.display.seekTooltip=this.elements.progress.querySelector("."+this.config.classNames.tooltip)),!0}catch(e){return this.warn("It looks like there is a problem with your custom controls HTML",e),this.toggleNativeControls(!0),!1}},getFocusElement:function(){var e=document.activeElement;return e=e&&e!==document.body?document.querySelector(":focus"):null},trapFocus:function(){var e=this,t=s.getElements.call(this,"input:not([disabled]), button:not([disabled])"),i=t[0],n=t[t.length-1];s.on(this.elements.container,"keydown",function(t){9===t.which&&e.fullscreen.active&&(t.target!==n||t.shiftKey?t.target===i&&t.shiftKey&&(t.preventDefault(),n.focus()):(t.preventDefault(),i.focus()))},!1)},toggleListener:function(e,t,i,n,l,o){if(null!==e&&!s.is.undefined(e))if(s.is.nodeList(e))Array.from(e).forEach(function(e){e instanceof Node&&s.toggleListener.call(null,e,t,i,n,l,o)});else{var r=t.split(" "),c=!!s.is.boolean(o)&&o;a.passiveListeners&&(c={passive:!s.is.boolean(l)||l,capture:!!s.is.boolean(o)&&o}),r.forEach(function(t){e[n?"addEventListener":"removeEventListener"](t,i,c)})}},on:function(e,t,i,n,a){s.toggleListener(e,t,i,!0,n,a)},off:function(e,t,i,n,a){s.toggleListener(e,t,i,!1,n,a)},dispatchEvent:function(e,t,i,n){if(e&&t){var a=new CustomEvent(t,{bubbles:!!s.is.boolean(i)&&i,detail:Object.assign({},n,{plyr:this instanceof Plyr?this:null})});e.dispatchEvent(a)}},toggleState:function(e,t){if(!e)return null;var i=s.is.boolean(t)?t:!e.getAttribute("aria-pressed");return e.setAttribute("aria-pressed",i),i},getPercentage:function(e,t){return 0===e||0===t||Number.isNaN(e)||Number.isNaN(t)?0:(e/t*100).toFixed(2)},extend:function(){for(var e=arguments.length,t=Array(e),i=0;i0)&&(t?(i.decreaseVolume(.02),n=-1):(i.increaseVolume(.02),n=1)),(e.deltaY>0||e.deltaX<0)&&(t?(i.increaseVolume(.02),n=1):(i.decreaseVolume(.02),n=-1)),(1===n&&i.media.volume<1||-1===n&&i.media.volume>0)&&e.preventDefault()})},!1),o.enabled&&s.on(document,o.eventType,function(e){i.toggleFullscreen(e)})}},u={addStyleHook:function(){s.toggleClass(this.elements.container,this.config.selectors.container.replace(".",""),!0),s.toggleClass(this.elements.container,this.config.classNames.uiSupported,this.supported.ui)},toggleNativeControls:function(e){e&&this.isHTML5?this.media.setAttribute("controls",""):this.media.removeAttribute("controls")},build:function(){if(c.media.call(this),!this.supported.ui)return this.warn("Basic support only for "+this.type),s.removeElement.call(this,"controls"),s.removeElement.call(this,"buttons.play"),void u.toggleNativeControls.call(this,!0);s.is.htmlElement(this.elements.controls)||(d.inject.call(this),c.controls.call(this)),s.is.htmlElement(this.elements.controls)&&(u.toggleNativeControls.call(this),o.setup.call(this),p.setup.call(this),this.volume=null,u.updateVolume.call(this),this.speed=null,u.timeUpdate.call(this),u.checkPlaying.call(this),this.ready=!0,s.dispatchEvent.call(this,this.media,"ready"),this.config.autoplay&&this.play())},displayDuration:function(){this.supported.ui&&(!this.elements.display.duration&&this.config.displayDuration&&this.media.paused&&u.updateTimeDisplay.call(this,this.duration,this.elements.display.currentTime),this.elements.display.duration&&u.updateTimeDisplay.call(this,this.duration,this.elements.display.duration),d.updateSeekTooltip.call(this))},setTitle:function(){var e=this.config.i18n.play;if(s.is.string(this.config.title)&&!s.is.empty(this.config.title)&&(e+=", "+this.config.title,this.elements.container.setAttribute("aria-label",this.config.title)),this.supported.ui&&(s.is.htmlElement(this.elements.buttons.play)&&this.elements.buttons.play.setAttribute("aria-label",e),s.is.htmlElement(this.elements.buttons.playLarge)&&this.elements.buttons.playLarge.setAttribute("aria-label",e)),this.isEmbed){var t=s.getElement.call(this,"iframe");if(!s.is.htmlElement(t))return;var i=s.is.empty(this.config.title)?"video":this.config.title;t.setAttribute("title",this.config.i18n.frameTitle.replace("{title}",i))}},checkPlaying:function(){s.toggleClass(this.elements.container,this.config.classNames.playing,!this.media.paused),s.toggleClass(this.elements.container,this.config.classNames.stopped,this.media.paused),this.toggleControls(this.media.paused)},updateVolume:function(){if(this.supported.ui){var e=this.media.muted?0:this.media.volume;this.elements.inputs.volume&&u.setRange.call(this,this.elements.inputs.volume,e)}s.toggleClass(this.elements.container,this.config.classNames.muted,this.media.muted),this.supported.ui&&this.elements.buttons.mute&&s.toggleState(this.elements.buttons.mute,this.media.muted)},checkLoading:function(e){var t=this;this.loading="waiting"===e.type,clearTimeout(this.timers.loading),this.timers.loading=setTimeout(function(){s.toggleClass(t.elements.container,t.config.classNames.loading,t.loading),t.toggleControls(t.loading)},this.loading?250:0)},setRange:function(e,t){s.is.htmlElement(e)&&(e.value=t,d.updateRangeFill.call(this,e))},setProgress:function(e,t){var i=s.is.undefined(t)?0:t,n=s.is.undefined(e)?this.elements.display.buffer:e;if(s.is.htmlElement(n)){n.value=i;var a=n.getElementsByTagName("span")[0];s.is.htmlElement(a)&&(a.childNodes[0].nodeValue=i)}},updateProgress:function(e){var t=this;if(this.supported.ui){var i=0;if(e)switch(e.type){case"timeupdate":case"seeking":i=s.getPercentage(this.currentTime,this.duration),"timeupdate"===e.type&&u.setRange.call(this,this.elements.inputs.seek,i);break;case"playing":case"progress":i=function(){var e=t.media.buffered;return e&&e.length?s.getPercentage(e.end(0),t.duration):s.is.number(e)?100*e:0}(),u.setProgress.call(this,this.elements.display.buffer,i)}}},updateTimeDisplay:function(e,t){if(!s.is.htmlElement(t))return null;var i=Number.isNaN(e)?0:e,n=parseInt(i%60,10),a=parseInt(i/60%60,10),l=parseInt(i/60/60%60,10),o=parseInt(this.duration/60/60%60,10)>0;n=("0"+n).slice(-2),a=("0"+a).slice(-2);var r=(o?l+":":"")+a+":"+n;return t.textContent=r,r},timeUpdate:function(e){u.updateTimeDisplay.call(this,this.currentTime,this.elements.display.currentTime),e&&"timeupdate"===e.type&&this.media.seeking||u.updateProgress.call(this,e)}},d={updateRangeFill:function(e){if(this.browser.isWebkit){var t=s.is.event(e)?e.target:e;if(s.is.htmlElement(t)&&"range"===t.getAttribute("type")){s.is.htmlElement(this.elements.styleSheet)||(this.elements.styleSheet=s.createElement("style"),this.elements.container.appendChild(this.elements.styleSheet));var i=this.elements.styleSheet.sheet,n=t.value/t.max*100,a="#"+t.id+"::-webkit-slider-runnable-track",l="{ background-image: linear-gradient(to right, currentColor "+n+"%, transparent "+n+"%) }",o=Array.from(i.rules).findIndex(function(e){return e.selectorText===a});-1!==o&&i.deleteRule(o),i.insertRule([a,l].join(" "))}}},getIconUrl:function(){return{url:this.config.iconUrl,absolute:0===this.config.iconUrl.indexOf("http")||this.browser.isIE&&!window.svg4everybody}},createIcon:function(e,t){var i=d.getIconUrl.call(this),n=(i.absolute?"":i.url)+"#"+this.config.iconPrefix,a=document.createElementNS("http://www.w3.org/2000/svg","svg");s.setAttributes(a,s.extend(t,{role:"presentation"}));var l=document.createElementNS("http://www.w3.org/2000/svg","use");return l.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",n+"-"+e),a.appendChild(l),a},createLabel:function(e){var t=this.config.i18n[e];switch(e){case"pip":t="PIP";break;case"airplay":t="AirPlay"}return s.createElement("span",{class:this.config.classNames.hidden},t)},createBadge:function(e){var t=s.createElement("span",{class:this.config.classNames.menu.value});return t.appendChild(s.createElement("span",{class:this.config.classNames.menu.badge},e)),t},createButton:function(e,t){var i=s.createElement("button"),n=Object.assign({},t),a=e,l=void 0,o=void 0,r=void 0;switch("type"in n||(n.type="button"),"class"in n?-1===n.class.indexOf(this.config.classNames.control)&&(n.class+=" "+this.config.classNames.control):n.class=this.config.classNames.control,a){case"mute":r="toggleMute",l="volume",o="muted";break;case"captions":r="toggleCaptions",l="captions-off",o="captions-on";break;case"fullscreen":r="toggleFullscreen",l="enter-fullscreen",o="exit-fullscreen";break;case"play-large":n.class="plyr__play-large",a="play",r="play",l="play";break;default:r=a,l=a}return s.extend(n,s.getAttributesFromSelector(this.config.selectors.buttons[a],n)),s.is.string(o)&&i.appendChild(d.createIcon.call(this,o,{class:"icon--"+o})),i.appendChild(d.createIcon.call(this,l)),i.appendChild(d.createLabel.call(this,r)),s.setAttributes(i,n),this.elements.buttons[a]=i,i},createRange:function(e,t){var i=s.createElement("label",{for:t.id,class:this.config.classNames.hidden},this.config.i18n[e]),n=s.createElement("input",s.extend(s.getAttributesFromSelector(this.config.selectors.inputs[e]),{type:"range",min:0,max:100,step:.01,value:0,autocomplete:"off"},t));return this.elements.inputs[e]=n,d.updateRangeFill.call(this,n),{label:i,input:n}},createProgress:function(e,t){var i=s.createElement("progress",s.extend(s.getAttributesFromSelector(this.config.selectors.display[e]),{min:0,max:100,value:0},t));if("volume"!==e){i.appendChild(s.createElement("span",null,"0"));var n="";switch(e){case"played":n=this.config.i18n.played;break;case"buffer":n=this.config.i18n.buffered}i.textContent="% "+n.toLowerCase()}return this.elements.display[e]=i,i},createTime:function(e){var t=s.createElement("span",{class:"plyr__time"});return t.appendChild(s.createElement("span",{class:this.config.classNames.hidden},this.config.i18n[e])),t.appendChild(s.createElement("span",s.getAttributesFromSelector(this.config.selectors.display[e]),"00:00")),this.elements.display[e]=t,t},updateSeekTooltip:function(e){if(this.config.tooltips.seek&&s.is.htmlElement(this.elements.inputs.seek)&&s.is.htmlElement(this.elements.display.seekTooltip)&&0!==this.duration){var t=0,i=this.elements.inputs.seek.getBoundingClientRect(),n=this.config.classNames.tooltip+"--visible";if(s.is.event(e))t=100/i.width*(e.pageX-i.left);else{if(!s.hasClass(this.elements.display.seekTooltip,n))return;t=this.elements.display.seekTooltip.style.left.replace("%","")}t<0?t=0:t>100&&(t=100),u.updateTimeDisplay.call(this,this.duration/100*t,this.elements.display.seekTooltip),this.elements.display.seekTooltip.style.left=t+"%",s.is.event(e)&&["mouseenter","mouseleave"].includes(e.type)&&s.toggleClass(this.elements.display.seekTooltip,n,"mouseenter"===e.type)}},toggleTab:function(e,t){var i=this.elements.settings.tabs[e],n=this.elements.settings.panes[e];s.is.htmlElement(i)&&(t?i.removeAttribute("hidden"):i.setAttribute("hidden","")),s.is.htmlElement(n)&&(t?n.removeAttribute("hidden"):n.setAttribute("hidden",""))},setQualityMenu:function(e){var t=this,i=this.elements.settings.panes.quality.querySelector("ul");s.is.array(e)?this.options.quality=e.filter(function(e){return t.config.quality.options.includes(e)}):this.options.quality=this.config.quality.options;var n=!s.is.empty(this.options.quality)&&"youtube"===this.type;if(d.toggleTab.call(this,"quality",n),n){s.emptyElement(i);var a=function(e){var i="";switch(e){case"hd2160":i="4K";break;case"hd1440":i="WQHD";break;case"hd1080":case"hd720":i="HD"}return i.length?d.createBadge.call(t,i):null};this.options.quality.forEach(function(e){var n=s.createElement("li"),l=s.createElement("label",{class:t.config.classNames.control}),o=s.createElement("input",s.extend(s.getAttributesFromSelector(t.config.selectors.inputs.quality),{type:"radio",name:"plyr-quality",value:e}));l.appendChild(o),l.appendChild(document.createTextNode(d.getLabel.call(t,"quality",e)));var r=a(e);s.is.htmlElement(r)&&l.appendChild(r),n.appendChild(l),i.appendChild(n)}),d.updateSetting.call(this,"quality",i)}},getLabel:function(e,t){switch(e){case"speed":return 1===t?"Normal":t+"×";case"quality":switch(t){case"hd2160":return"2160P";case"hd1440":return"1440P";case"hd1080":return"1080P";case"hd720":return"720P";case"large":return"480P";case"medium":return"360P";case"small":return"240P";case"tiny":return"Tiny";case"default":return"Auto";default:return t}case"captions":return d.getLanguage.call(this);default:return null}},updateSetting:function(e,t){var i=this.elements.settings.panes[e],n=null,a=t;switch(e){case"captions":n=this.captions.language,this.captions.enabled||(n="");break;default:if(n=this[e],s.is.empty(n)&&(n=this.config[e].default),!this.options[e].includes(n))return void this.warn("Unsupported value of '"+n+"' for "+e);if(!this.config[e].options.includes(n))return void this.warn("Disabled value of '"+n+"' for "+e)}s.is.htmlElement(a)||(a=i&&i.querySelector("ul"));var l=a&&a.querySelector('input[value="'+n+'"]');s.is.htmlElement(l)&&(l.checked=!0,this.elements.settings.tabs[e].querySelector("."+this.config.classNames.menu.value).innerHTML=d.getLabel.call(this,e,n))},setLoopMenu:function(){var e=this,t=this.elements.settings.panes.loop.querySelector("ul");this.elements.settings.tabs.loop.removeAttribute("hidden"),this.elements.settings.panes.loop.removeAttribute("hidden");var i=!s.is.empty(this.loop.options);d.toggleTab.call(this,"loop",i),s.emptyElement(t),["start","end","all","reset"].forEach(function(i){var n=s.createElement("li"),a=s.createElement("button",s.extend(s.getAttributesFromSelector(e.config.selectors.buttons.loop),{type:"button",class:e.config.classNames.control,"data-plyr-loop-action":i}),e.config.i18n[i]);if(["start","end"].includes(i)){var l=d.createBadge.call(e,"00:00");a.appendChild(l)}n.appendChild(a),t.appendChild(n)})},getLanguage:function(){return this.supported.ui?!a.textTracks||s.is.empty(this.captions.tracks)?this.config.i18n.none:this.captions.enabled?this.captions.currentTrack.label:this.config.i18n.disabled:null},setCaptionsMenu:function(){var e=this,t=this.elements.settings.panes.captions.querySelector("ul"),i=!s.is.empty(this.captions.tracks);if(d.toggleTab.call(this,"captions",i),s.emptyElement(t),!s.is.empty(this.captions.tracks)){var n=Array.from(this.captions.tracks).map(function(e){return{language:e.language,badge:!0,label:s.is.empty(e.label)?e.language.toUpperCase():e.label}});n.unshift({language:"",label:this.config.i18n.none}),n.forEach(function(i){var n=s.createElement("li"),a=s.createElement("label",{class:e.config.classNames.control}),l=s.createElement("input",s.extend(s.getAttributesFromSelector(e.config.selectors.inputs.language),{type:"radio",name:"plyr-language",value:i.language}));i.language.toLowerCase()===e.captions.language.toLowerCase()&&(l.checked=!0),a.appendChild(l),a.appendChild(document.createTextNode(i.label||i.language)),i.badge&&a.appendChild(d.createBadge.call(e,i.language.toUpperCase())),n.appendChild(a),t.appendChild(n)}),d.updateSetting.call(this,"captions",t)}},setSpeedMenu:function(e){var t=this;s.is.array(e)?this.options.speed=e.filter(function(e){return t.config.speed.options.includes(e)}):this.options.speed=this.config.speed.options;var i=!s.is.empty(this.options.speed);if(d.toggleTab.call(this,"speed",i),i){var n=this.elements.settings.panes.speed.querySelector("ul");this.elements.settings.tabs.speed.removeAttribute("hidden"),this.elements.settings.panes.speed.removeAttribute("hidden"),s.emptyElement(n),this.options.speed.forEach(function(e){var i=s.createElement("li"),a=s.createElement("label",{class:t.config.classNames.control}),l=s.createElement("input",s.extend(s.getAttributesFromSelector(t.config.selectors.inputs.speed),{type:"radio",name:"plyr-speed",value:e}));a.appendChild(l),a.insertAdjacentHTML("beforeend",d.getLabel.call(t,"speed",e)),i.appendChild(a),n.appendChild(i)}),d.updateSetting.call(this,"speed",n)}},toggleMenu:function(e){var t=this.elements.settings.form,i=this.elements.buttons.settings,n=s.is.boolean(e)?e:t&&"true"===t.getAttribute("aria-hidden");if(s.is.event(e)){var a=t&&t.contains(e.target),l=e.target===this.elements.buttons.settings;if(a||!a&&!l&&n)return;l&&e.stopPropagation()}i&&i.setAttribute("aria-expanded",n),t&&(t.setAttribute("aria-hidden",!n),n?t.removeAttribute("tabindex"):t.setAttribute("tabindex",-1))},getTabSize:function(e){var t=e.cloneNode(!0);t.style.position="absolute",t.style.opacity=0,t.setAttribute("aria-hidden",!1),Array.from(t.querySelectorAll("input[name]")).forEach(function(e){var t=e.getAttribute("name");e.setAttribute("name",t+"-clone")}),e.parentNode.appendChild(t);var i=t.scrollWidth,n=t.scrollHeight;return s.removeElement(t),{width:i,height:n}},showTab:function(e){var t=this.elements.settings.menu,i=e.target,n="false"===i.getAttribute("aria-expanded"),l=document.getElementById(i.getAttribute("aria-controls"));if(s.is.htmlElement(l)&&"tabpanel"===l.getAttribute("role")){var o=t.querySelector('[role="tabpanel"][aria-hidden="false"]'),r=o.parentNode;if(Array.from(t.querySelectorAll('[aria-controls="'+o.getAttribute("id")+'"]')).forEach(function(e){e.setAttribute("aria-expanded",!1)}),a.transitions&&!a.reducedMotion){r.style.width=o.scrollWidth+"px",r.style.height=o.scrollHeight+"px";var c=d.getTabSize.call(this,l),u=function e(t){t.target===r&&["width","height"].includes(t.propertyName)&&(r.style.width="",r.style.height="",s.off(r,s.transitionEnd,e))};s.on(r,s.transitionEnd,u),r.style.width=c.width+"px",r.style.height=c.height+"px"}o.setAttribute("aria-hidden",!0),o.setAttribute("tabindex",-1),l.setAttribute("aria-hidden",!n),i.setAttribute("aria-expanded",n),l.removeAttribute("tabindex")}},create:function(e){var t=this;if(s.is.empty(this.config.controls))return null;var i=s.createElement("div",s.getAttributesFromSelector(this.config.selectors.controls.wrapper));if(this.config.controls.includes("restart")&&i.appendChild(d.createButton.call(this,"restart")),this.config.controls.includes("rewind")&&i.appendChild(d.createButton.call(this,"rewind")),this.config.controls.includes("play")&&(i.appendChild(d.createButton.call(this,"play")),i.appendChild(d.createButton.call(this,"pause"))),this.config.controls.includes("fast-forward")&&i.appendChild(d.createButton.call(this,"fast-forward")),this.config.controls.includes("progress")){var n=s.createElement("span",s.getAttributesFromSelector(this.config.selectors.progress)),l=d.createRange.call(this,"seek",{id:"plyr-seek-"+e.id});if(n.appendChild(l.label),n.appendChild(l.input),n.appendChild(d.createProgress.call(this,"buffer")),this.config.tooltips.seek){var o=s.createElement("span",{role:"tooltip",class:this.config.classNames.tooltip},"00:00");n.appendChild(o),this.elements.display.seekTooltip=o}this.elements.progress=n,i.appendChild(this.elements.progress)}if(this.config.controls.includes("current-time")&&i.appendChild(d.createTime.call(this,"currentTime")),this.config.controls.includes("duration")&&i.appendChild(d.createTime.call(this,"duration")),this.config.controls.includes("mute")&&i.appendChild(d.createButton.call(this,"mute")),this.config.controls.includes("volume")){var r=s.createElement("span",{class:"plyr__volume"}),c={max:1,step:.05,value:this.config.volume},u=d.createRange.call(this,"volume",s.extend(c,{id:"plyr-volume-"+e.id}));r.appendChild(u.label),r.appendChild(u.input),i.appendChild(r)}if(this.config.controls.includes("captions")&&i.appendChild(d.createButton.call(this,"captions")),this.config.controls.includes("settings")&&!s.is.empty(this.config.settings)){var p=s.createElement("div",{class:"plyr__menu"});p.appendChild(d.createButton.call(this,"settings",{id:"plyr-settings-toggle-"+e.id,"aria-haspopup":!0,"aria-controls":"plyr-settings-"+e.id,"aria-expanded":!1}));var h=s.createElement("form",{class:"plyr__menu__container",id:"plyr-settings-"+e.id,"aria-hidden":!0,"aria-labelled-by":"plyr-settings-toggle-"+e.id,role:"tablist",tabindex:-1}),m=s.createElement("div"),g=s.createElement("div",{id:"plyr-settings-"+e.id+"-home","aria-hidden":!1,"aria-labelled-by":"plyr-settings-toggle-"+e.id,role:"tabpanel"}),f=s.createElement("ul",{role:"tablist"});this.config.settings.forEach(function(i){var n=s.createElement("li",{role:"tab",hidden:""}),a=s.createElement("button",s.extend(s.getAttributesFromSelector(t.config.selectors.buttons.settings),{type:"button",class:t.config.classNames.control+" "+t.config.classNames.control+"--forward",id:"plyr-settings-"+e.id+"-"+i+"-tab","aria-haspopup":!0,"aria-controls":"plyr-settings-"+e.id+"-"+i,"aria-expanded":!1}),t.config.i18n[i]),l=s.createElement("span",{class:t.config.classNames.menu.value});l.innerHTML=e[i],a.appendChild(l),n.appendChild(a),f.appendChild(n),t.elements.settings.tabs[i]=n}),g.appendChild(f),m.appendChild(g),this.config.settings.forEach(function(i){var n=s.createElement("div",{id:"plyr-settings-"+e.id+"-"+i,"aria-hidden":!0,"aria-labelled-by":"plyr-settings-"+e.id+"-"+i+"-tab",role:"tabpanel",tabindex:-1,hidden:""}),a=s.createElement("button",{type:"button",class:t.config.classNames.control+" "+t.config.classNames.control+"--back","aria-haspopup":!0,"aria-controls":"plyr-settings-"+e.id+"-home","aria-expanded":!1},t.config.i18n[i]);n.appendChild(a);var l=s.createElement("ul");n.appendChild(l),m.appendChild(n),t.elements.settings.panes[i]=n}),h.appendChild(m),p.appendChild(h),i.appendChild(p),this.elements.settings.form=h,this.elements.settings.menu=p}return this.config.controls.includes("pip")&&a.pip&&i.appendChild(d.createButton.call(this,"pip")),this.config.controls.includes("airplay")&&a.airplay&&i.appendChild(d.createButton.call(this,"airplay")),this.config.controls.includes("fullscreen")&&i.appendChild(d.createButton.call(this,"fullscreen")),this.config.controls.includes("play-large")&&(this.elements.buttons.playLarge=d.createButton.call(this,"play-large"),this.elements.container.appendChild(this.elements.buttons.playLarge)),this.elements.controls=i,this.config.controls.includes("settings")&&this.config.settings.includes("speed")&&d.setSpeedMenu.call(this),i},inject:function(){var e=this;if(this.config.loadSprite){var t=d.getIconUrl.call(this);t.absolute?(this.log("AJAX loading absolute SVG sprite "+(this.browser.isIE?"(due to IE)":"")),s.loadSprite(t.url,"sprite-plyr")):this.log("Sprite will be used as external resource directly")}this.id=Math.floor(1e4*Math.random());var i=null;i=s.is.string(this.config.controls)?this.config.controls:s.is.function(this.config.controls)?this.config.controls({id:this.id,seektime:this.config.seekTime,title:this.config.title}):d.create.call(this,{id:this.id,seektime:this.config.seekTime,speed:this.speed,quality:this.quality,captions:d.getLanguage.call(this)});var n=void 0;if(s.is.string(this.config.selectors.controls.container)&&(n=document.querySelector(this.config.selectors.controls.container)),s.is.htmlElement(n)||(n=this.elements.container),s.is.htmlElement(i)?n.appendChild(i):n.insertAdjacentHTML("beforeend",i),s.is.htmlElement(this.elements.controls)&&s.findElements.call(this),this.config.tooltips.controls){var a=s.getElements.call(this,[this.config.selectors.controls.wrapper," ",this.config.selectors.labels," .",this.config.classNames.hidden].join(""));Array.from(a).forEach(function(t){s.toggleClass(t,e.config.classNames.hidden,!1),s.toggleClass(t,e.config.classNames.tooltip,!0)})}}},p={setup:function(){var e=this;if(this.supported.ui){if(s.is.empty(r.get.call(this).language)?s.is.empty(this.captions.language)&&(this.captions.language=this.config.captions.language.toLowerCase()):this.captions.language=r.get.call(this).language,s.is.boolean(this.captions.enabled)||(s.is.empty(r.get.call(this).language)?this.captions.enabled=this.config.captions.active:this.captions.enabled=r.get.call(this).captions),!["video","vimeo"].includes(this.type)||"video"===this.type&&!a.textTracks)return this.captions.tracks=null,void(this.config.controls.includes("settings")&&this.config.settings.includes("captions")&&d.setCaptionsMenu.call(this));if(s.is.htmlElement(this.elements.captions)||(this.elements.captions=s.createElement("div",s.getAttributesFromSelector(this.config.selectors.captions)),s.insertAfter(this.elements.captions,this.elements.wrapper)),"video"===this.type&&(this.captions.tracks=this.media.textTracks),s.toggleClass(this.elements.container,this.config.classNames.captions.enabled,!s.is.empty(this.captions.tracks)),!s.is.empty(this.captions.tracks)){p.show.call(this);var t=function(){e.captions.currentTrack=null,Array.from(e.captions.tracks).forEach(function(t){t.language===e.captions.language.toLowerCase()&&(e.captions.currentTrack=t)})};if(t(),!s.is.track(this.captions.currentTrack)){var i=this.config.captions.language;this.captions.language=i,t(),s.is.track(this.captions.currentTrack)||this.toggleCaptions(!1),d.updateSetting.call(this,"captions")}if("video"===this.type){Array.from(this.captions.tracks).forEach(function(t){s.off(t,"cuechange",function(t){return p.setCue.call(e,t)}),t.mode="hidden"});var n=this.captions.currentTrack&&["captions","subtitles"].includes(this.captions.currentTrack.kind);s.is.track(this.captions.currentTrack)&&n&&(s.on(this.captions.currentTrack,"cuechange",function(t){return p.setCue.call(e,t)}),this.captions.currentTrack.activeCues&&this.captions.currentTrack.activeCues.length>0&&p.setCue.call(this,this.captions.currentTrack))}else"vimeo"===this.type&&this.captions.active&&this.embed.enableTextTrack(this.captions.language);this.config.controls.includes("settings")&&this.config.settings.includes("captions")&&d.setCaptionsMenu.call(this)}}},setCue:function(e){var t=(s.is.event(e)?e.target:e).activeCues[0];s.is.cue(t)?p.set.call(this,t.getCueAsHTML()):p.set.call(this),s.dispatchEvent.call(this,this.media,"cuechange")},set:function(e){if(this.supported.ui)if(s.is.htmlElement(this.elements.captions)){var t=s.createElement("span");s.emptyElement(this.elements.captions);var i=s.is.undefined(e)?"":e;s.is.string(i)?t.textContent=i.trim():t.appendChild(i),this.elements.captions.appendChild(t)}else this.warn("No captions element to render to")},show:function(){if(this.elements.buttons.captions){var e=r.get.call(this).captions;s.is.boolean(e)?this.captions.active=e:e=this.captions.active,e&&(s.toggleClass(this.elements.container,this.config.classNames.captions.active,!0),s.toggleState(this.elements.buttons.captions,!0))}}},h={setup:function(){var e=this,t=s.parseYouTubeId(this.embedId),i=s.getElements.call(this,'[id^="'+this.type+'-"]');Array.from(i).forEach(s.removeElement),s.toggleClass(this.elements.wrapper,this.config.classNames.embed,!0),this.media.setAttribute("id",s.generateId(this.type)),s.is.object(window.YT)?h.ready.call(this,t):(s.loadScript(this.config.urls.youtube.api),window.onYouTubeReadyCallbacks=window.onYouTubeReadyCallbacks||[],window.onYouTubeReadyCallbacks.push(function(){h.ready.call(e,t)}),window.onYouTubeIframeAPIReady=function(){window.onYouTubeReadyCallbacks.forEach(function(e){e()})})},ready:function(e){var t=this;t.embed=new window.YT.Player(t.media.id,{videoId:e,playerVars:{autoplay:t.config.autoplay?1:0,controls:t.supported.ui?0:1,rel:0,showinfo:0,iv_load_policy:3,modestbranding:1,disablekb:1,playsinline:1,origin:window&&window.location.hostname,widget_referrer:window&&window.location.href},events:{onError:function(e){s.dispatchEvent.call(t,t.media,"error",!0,{code:e.data,embed:e.target})},onPlaybackQualityChange:function(e){var i=e.target;t.media.quality=i.getPlaybackQuality(),s.dispatchEvent.call(t,t.media,"qualitychange")},onPlaybackRateChange:function(e){var i=e.target;t.media.playbackRate=i.getPlaybackRate(),s.dispatchEvent.call(t,t.media,"ratechange")},onReady:function(e){var i=e.target;t.media.play=function(){i.playVideo(),t.media.paused=!1},t.media.pause=function(){i.pauseVideo(),t.media.paused=!0},t.media.stop=function(){i.stopVideo(),t.media.paused=!0},t.media.duration=i.getDuration(),t.media.paused=!0,t.media.muted=i.isMuted(),t.media.currentTime=0,Object.defineProperty(t.media,"currentTime",{get:function(){return Number(i.getCurrentTime())},set:function(e){t.media.seeking=!0,s.dispatchEvent.call(t,t.media,"seeking"),i.seekTo(e)}}),Object.defineProperty(t.media,"playbackRate",{get:function(){return i.getPlaybackRate()},set:function(e){i.setPlaybackRate(e)}}),Object.defineProperty(t.media,"volume",{get:function(){return i.getVolume()/100},set:function(e){i.setVolume(100*e),s.dispatchEvent.call(t,t.media,"volumechange")}}),Object.defineProperty(t.media,"currentSrc",{get:function(){return i.getVideoUrl()}}),t.config.controls.includes("settings")&&t.config.settings.includes("speed")&&d.setSpeedMenu.call(t,i.getAvailablePlaybackRates()),t.config.title=i.getVideoData().title,t.supported.ui&&t.media.setAttribute("tabindex",-1),window.setTimeout(function(){return u.build.call(t)},0),s.dispatchEvent.call(t,t.media,"timeupdate"),s.dispatchEvent.call(t,t.media,"durationchange"),window.clearInterval(t.timers.buffering),t.timers.buffering=window.setInterval(function(){t.media.buffered=i.getVideoLoadedFraction(),(null===t.media.lastBuffered||t.media.lastBuffered1&&void 0!==arguments[1]&&arguments[1],n=function(){if(document.body.style.overflow="",t.embed=null,i)s.removeElement(t.elements.captions),s.removeElement(t.elements.controls),s.removeElement(t.elements.wrapper),t.elements.captions=null,t.elements.controls=null,t.elements.wrapper=null,s.is.function(e)&&e();else{var n=t.elements.container.parentNode;s.is.htmlElement(n)&&n.replaceChild(t.elements.original,t.elements.container),s.dispatchEvent.call(t,t.elements.original,"destroyed",!0),s.is.function(e)&&e.call(t.elements.original),t.elements=null}};switch(this.type){case"youtube":window.clearInterval(this.timers.buffering),window.clearInterval(this.timers.playing),this.embed.destroy(),n();break;case"vimeo":this.embed.unload().then(n),window.setTimeout(n,200);break;case"video":case"audio":u.toggleNativeControls.call(this,!0),n()}}},{key:"isHTML5",get:function(){return n.html5.includes(this.type)}},{key:"isEmbed",get:function(){return n.embed.includes(this.type)}},{key:"currentTime",set:function(e){var t=0;s.is.number(e)&&(t=e),t<0?t=0:t>this.duration&&(t=this.duration),this.media.currentTime=t.toFixed(4),this.log("Seeking to "+this.currentTime+" seconds")},get:function(){return Number(this.media.currentTime)}},{key:"duration",get:function(){var e=parseInt(this.config.duration,10),t=Number(this.media.duration);return Number.isNaN(e)?t:e}},{key:"volume",set:function(e){var t=e,i=!s.is.undefined(t);return s.is.string(t)&&(t=Number(t)),s.is.number(t)||(t=r.get.call(this).volume),s.is.number(t)||(t=this.config.volume),t>1&&(t=1),t<0&&(t=0),this.media.volume=t,0===t?this.toggleMute(!0):this.media.muted&&i&&this.toggleMute(),this},get:function(){return this.media.volume}},{key:"speed",set:function(e){var t=s.is.number(e)?e:parseFloat(r.get.call(this).speed||this.speed.selected||this.config.speed.default);t<.1&&(t=.1),t>2&&(t=2),this.config.speed.options.includes(t)?this.media.playbackRate=t:this.warn("Unsupported speed ("+t+")")},get:function(){return this.media.playbackRate}},{key:"quality",set:function(e){var t=s.is.string(e)?e:parseFloat(r.get.call(this).quality||this.config.quality.selected);if(this.config.quality.options.includes(t))switch(this.type){case"youtube":this.utils.dispatchEvent.call(this,this.media,"qualityrequested",!1,{quality:t}),this.embed.setPlaybackQuality(t);break;default:this.warn("Quality options are only available for YouTube")}else this.warn("Unsupported quality option ("+t+")")},get:function(){switch(this.type){case"youtube":return this.embed.getPlaybackQuality();default:return this.warn("Quality options are only available for YouTube"),null}}},{key:"src",set:function(e){f.change.call(this,e)},get:function(){return this.media.currentSrc}},{key:"poster",set:function(e){"video"===this.type?s.is.string(e)&&this.media.setAttribute("poster",e):this.warn("Poster can only be set on HTML5 video")},get:function(){return"video"!==this.type?null:this.media.getAttribute("poster")}},{key:"language",set:function(e){var t=this;if(!s.is.string(e))return t;var i=e.toLowerCase();return this.captions.language===i?t:(this.toggleCaptions(!0),this.captions.language=i,s.dispatchEvent.call(this,this.media,"captionchange"),p.set.call(this),p.setup.call(this),this)},get:function(){return this.captions.language}}]),e}()}); //# sourceMappingURL=plyr.js.map diff --git a/dist/plyr.js.map b/dist/plyr.js.map index ea329b5d..7ee12c86 100644 --- a/dist/plyr.js.map +++ b/dist/plyr.js.map @@ -1 +1 @@ -{"version":3,"file":"plyr.js","sources":["src/js/storage.js","src/js/defaults.js","src/js/types.js","src/js/utils.js","src/js/support.js","src/js/fullscreen.js","src/js/listeners.js","src/js/ui.js","src/js/controls.js","src/js/captions.js","src/js/plugins/youtube.js","src/js/plugins/vimeo.js","src/js/media.js","src/js/source.js","src/js/plyr.js"],"sourcesContent":["// ==========================================================================\n// Plyr storage\n// ==========================================================================\n\nimport support from './support';\nimport utils from './utils';\n\n// Get contents of local storage\nfunction get() {\n const store = window.localStorage.getItem(this.config.storage.key);\n\n if (utils.is.empty(store)) {\n return {};\n }\n\n return JSON.parse(store);\n}\n\n// Save a value back to local storage\nfunction set(object) {\n // Bail if we don't have localStorage support or it's disabled\n if (!support.storage || !this.config.storage.enabled) {\n return;\n }\n\n // Can only store objectst\n if (!utils.is.object(object)) {\n return;\n }\n\n // Get current storage\n const storage = get.call(this);\n\n // Update the working copy of the values\n utils.extend(storage, object);\n\n // Update storage\n window.localStorage.setItem(this.config.storage.key, JSON.stringify(storage));\n}\n\n// Setup localStorage\nfunction setup() {\n let value = null;\n let storage = {};\n\n // Bail if we don't have localStorage support or it's disabled\n if (!support.storage || !this.config.storage.enabled) {\n return storage;\n }\n\n // Clean up old volume\n // https://github.com/sampotts/plyr/issues/171\n window.localStorage.removeItem('plyr-volume');\n\n // load value from the current key\n value = window.localStorage.getItem(this.config.storage.key);\n\n if (!value) {\n // Key wasn't set (or had been cleared), move along\n } else if (/^\\d+(\\.\\d+)?$/.test(value)) {\n // If value is a number, it's probably volume from an older\n // version of this. See: https://github.com/sampotts/plyr/pull/313\n // Update the key to be JSON\n set({\n volume: parseFloat(value),\n });\n } else {\n // Assume it's JSON from this or a later version of plyr\n storage = JSON.parse(value);\n }\n\n return storage;\n}\n\nexport default { setup, set, get };\n","// Default config\nconst defaults = {\n // Disable\n enabled: true,\n\n // Custom media title\n title: '',\n\n // Logging to console\n debug: false,\n\n // Auto play (if supported)\n autoplay: false,\n\n // Default time to skip when rewind/fast forward\n seekTime: 10,\n\n // Default volume\n volume: 1,\n muted: false,\n\n // Display the media duration\n displayDuration: true,\n\n // Click video to play\n clickToPlay: true,\n\n // Auto hide the controls\n hideControls: true,\n\n // Revert to poster on finish (HTML5 - will cause reload)\n showPosterOnEnd: false,\n\n // Disable the standard context menu\n disableContextMenu: true,\n\n // Sprite (for icons)\n loadSprite: true,\n iconPrefix: 'plyr',\n iconUrl: 'https://cdn.plyr.io/2.0.10/plyr.svg',\n\n // Blank video (used to prevent errors on source change)\n blankVideo: 'https://cdn.plyr.io/static/blank.mp4',\n\n // Pass a custom duration\n duration: null,\n\n // Quality default\n quality: {\n default: 'default',\n options: ['hd2160', 'hd1440', 'hd1080', 'hd720', 'large', 'medium', 'small', 'tiny', 'default'],\n },\n\n // Set loops\n loop: {\n active: false,\n start: null,\n end: null,\n },\n\n // Speed default and options to display\n speed: {\n default: 1,\n options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],\n },\n\n // Keyboard shortcut settings\n keyboard: {\n focused: true,\n global: false,\n },\n\n // Display tooltips\n tooltips: {\n controls: false,\n seek: true,\n },\n\n // Captions settings\n captions: {\n active: false,\n language: window.navigator.language.split('-')[0],\n },\n\n // Fullscreen settings\n fullscreen: {\n enabled: true, // Allow fullscreen?\n fallback: true, // Fallback for vintage browsers\n },\n\n // Local storage\n storage: {\n enabled: true,\n key: 'plyr',\n },\n\n // Default controls\n controls: [\n 'play-large',\n 'play',\n 'progress',\n 'current-time',\n 'mute',\n 'volume',\n 'captions',\n 'settings',\n 'pip',\n 'airplay',\n 'fullscreen',\n ],\n settings: ['captions', 'quality', 'speed', 'loop'],\n\n // Localisation\n i18n: {\n restart: 'Restart',\n rewind: 'Rewind {seektime} secs',\n play: 'Play',\n pause: 'Pause',\n forward: 'Forward {seektime} secs',\n seek: 'Seek',\n played: 'Played',\n buffered: 'Buffered',\n currentTime: 'Current time',\n duration: 'Duration',\n volume: 'Volume',\n toggleMute: 'Toggle Mute',\n toggleCaptions: 'Toggle Captions',\n toggleFullscreen: 'Toggle Fullscreen',\n frameTitle: 'Player for {title}',\n captions: 'Captions',\n settings: 'Settings',\n speed: 'Speed',\n quality: 'Quality',\n loop: 'Loop',\n start: 'Start',\n end: 'End',\n all: 'All',\n reset: 'Reset',\n none: 'None',\n disabled: 'Disabled',\n },\n\n // URLs\n urls: {\n vimeo: {\n api: 'https://player.vimeo.com/api/player.js',\n },\n youtube: {\n api: 'https://www.youtube.com/iframe_api',\n },\n },\n\n // Custom control listeners\n listeners: {\n seek: null,\n play: null,\n pause: null,\n restart: null,\n rewind: null,\n forward: null,\n mute: null,\n volume: null,\n captions: null,\n fullscreen: null,\n pip: null,\n airplay: null,\n speed: null,\n quality: null,\n loop: null,\n language: null,\n },\n\n // Events to watch and bubble\n events: [\n // Events to watch on HTML5 media elements and bubble\n // https://developer.mozilla.org/en/docs/Web/Guide/Events/Media_events\n 'ended',\n 'progress',\n 'stalled',\n 'playing',\n 'waiting',\n 'canplay',\n 'canplaythrough',\n 'loadstart',\n 'loadeddata',\n 'loadedmetadata',\n 'timeupdate',\n 'volumechange',\n 'play',\n 'pause',\n 'error',\n 'seeking',\n 'seeked',\n 'emptied',\n 'ratechange',\n 'cuechange',\n\n // Custom events\n 'enterfullscreen',\n 'exitfullscreen',\n 'captionsenabled',\n 'captionsdisabled',\n 'captionchange',\n 'controlshidden',\n 'controlsshown',\n 'ready',\n\n // YouTube\n 'statechange',\n 'qualitychange',\n 'qualityrequested',\n ],\n\n // Selectors\n // Change these to match your template if using custom HTML\n selectors: {\n editable: 'input, textarea, select, [contenteditable]',\n container: '.plyr',\n controls: {\n container: null,\n wrapper: '.plyr__controls',\n },\n labels: '[data-plyr]',\n buttons: {\n play: '[data-plyr=\"play\"]',\n pause: '[data-plyr=\"pause\"]',\n restart: '[data-plyr=\"restart\"]',\n rewind: '[data-plyr=\"rewind\"]',\n forward: '[data-plyr=\"fast-forward\"]',\n mute: '[data-plyr=\"mute\"]',\n captions: '[data-plyr=\"captions\"]',\n fullscreen: '[data-plyr=\"fullscreen\"]',\n pip: '[data-plyr=\"pip\"]',\n airplay: '[data-plyr=\"airplay\"]',\n settings: '[data-plyr=\"settings\"]',\n loop: '[data-plyr=\"loop\"]',\n },\n inputs: {\n seek: '[data-plyr=\"seek\"]',\n volume: '[data-plyr=\"volume\"]',\n speed: '[data-plyr=\"speed\"]',\n language: '[data-plyr=\"language\"]',\n quality: '[data-plyr=\"quality\"]',\n },\n display: {\n currentTime: '.plyr__time--current',\n duration: '.plyr__time--duration',\n buffer: '.plyr__progress--buffer',\n played: '.plyr__progress--played',\n loop: '.plyr__progress--loop',\n volume: '.plyr__volume--display',\n },\n progress: '.plyr__progress',\n captions: '.plyr__captions',\n menu: {\n quality: '.js-plyr__menu__list--quality',\n },\n },\n\n // Class hooks added to the player in different states\n classNames: {\n video: 'plyr__video-wrapper',\n embed: 'plyr__video-embed',\n control: 'plyr__control',\n type: 'plyr--{0}',\n stopped: 'plyr--stopped',\n playing: 'plyr--playing',\n muted: 'plyr--muted',\n loading: 'plyr--loading',\n hover: 'plyr--hover',\n tooltip: 'plyr__tooltip',\n hidden: 'plyr__sr-only',\n hideControls: 'plyr--hide-controls',\n isIos: 'plyr--is-ios',\n isTouch: 'plyr--is-touch',\n uiSupported: 'plyr--full-ui',\n menu: {\n value: 'plyr__menu__value',\n badge: 'plyr__badge',\n },\n captions: {\n enabled: 'plyr--captions-enabled',\n active: 'plyr--captions-active',\n },\n fullscreen: {\n enabled: 'plyr--fullscreen-enabled',\n fallback: 'plyr--fullscreen-fallback',\n },\n pip: {\n supported: 'plyr--pip-supported',\n active: 'plyr--pip-active',\n },\n airplay: {\n supported: 'plyr--airplay-supported',\n active: 'plyr--airplay-active',\n },\n tabFocus: 'tab-focus',\n },\n};\n\nexport default defaults;\n","// ==========================================================================\n// Plyr supported types\n// ==========================================================================\n\nconst types = {\n embed: ['youtube', 'vimeo'],\n html5: ['video', 'audio'],\n};\n\nexport default types;\n","// ==========================================================================\n// Plyr utils\n// ==========================================================================\n\nimport support from './support';\n\nconst utils = {\n // Check variable types\n is: {\n object(input) {\n return this.getConstructor(input) === Object;\n },\n number(input) {\n return this.getConstructor(input) === Number && !Number.isNaN(input);\n },\n string(input) {\n return this.getConstructor(input) === String;\n },\n boolean(input) {\n return this.getConstructor(input) === Boolean;\n },\n function(input) {\n return this.getConstructor(input) === Function;\n },\n array(input) {\n return !this.undefined(input) && Array.isArray(input);\n },\n nodeList(input) {\n return !this.undefined(input) && input instanceof NodeList;\n },\n htmlElement(input) {\n return !this.undefined(input) && input instanceof HTMLElement;\n },\n event(input) {\n return !this.undefined(input) && input instanceof Event;\n },\n cue(input) {\n return this.instanceOf(input, window.TextTrackCue) || this.instanceOf(input, window.VTTCue);\n },\n track(input) {\n return (\n !this.undefined(input) && (this.instanceOf(input, window.TextTrack) || typeof input.kind === 'string')\n );\n },\n undefined(input) {\n return input !== null && typeof input === 'undefined';\n },\n empty(input) {\n return (\n input === null ||\n typeof input === 'undefined' ||\n ((this.string(input) || this.array(input) || this.nodeList(input)) && input.length === 0) ||\n (this.object(input) && Object.keys(input).length === 0)\n );\n },\n getConstructor(input) {\n if (input === null || typeof input === 'undefined') {\n return null;\n }\n\n return input.constructor;\n },\n instanceOf(input, constructor) {\n return Boolean(input && constructor && input instanceof constructor);\n },\n },\n\n // Unfortunately, due to mixed support, UA sniffing is required\n getBrowser() {\n return {\n isIE: /* @cc_on!@ */ false || !!document.documentMode,\n isWebkit: 'WebkitAppearance' in document.documentElement.style && !/Edge/.test(navigator.userAgent),\n isIPhone: /(iPhone|iPod)/gi.test(navigator.platform),\n isIos: /(iPad|iPhone|iPod)/gi.test(navigator.platform),\n };\n },\n\n // Load an external script\n loadScript(url) {\n // Check script is not already referenced\n if (document.querySelectorAll(`script[src=\"${url}\"]`).length) {\n return;\n }\n\n const tag = document.createElement('script');\n tag.src = url;\n\n const firstScriptTag = document.getElementsByTagName('script')[0];\n firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n },\n\n // Generate a random ID\n generateId(prefix) {\n return `${prefix}-${Math.floor(Math.random() * 10000)}`;\n },\n\n // Determine if we're in an iframe\n inFrame() {\n try {\n return window.self !== window.top;\n } catch (e) {\n return true;\n }\n },\n\n // Wrap an element\n wrap(elements, wrapper) {\n // Convert `elements` to an array, if necessary.\n const targets = elements.length ? elements : [elements];\n\n // Loops backwards to prevent having to clone the wrapper on the\n // first element (see `child` below).\n Array.from(targets)\n .reverse()\n .forEach((element, index) => {\n const child = index > 0 ? wrapper.cloneNode(true) : wrapper;\n\n // Cache the current parent and sibling.\n const parent = element.parentNode;\n const sibling = element.nextSibling;\n\n // Wrap the element (is automatically removed from its current\n // parent).\n child.appendChild(element);\n\n // If the element had a sibling, insert the wrapper before\n // the sibling to maintain the HTML structure; otherwise, just\n // append it to the parent.\n if (sibling) {\n parent.insertBefore(child, sibling);\n } else {\n parent.appendChild(child);\n }\n });\n },\n\n // Remove an element\n removeElement(element) {\n if (!utils.is.htmlElement(element) || !utils.is.htmlElement(element.parentNode)) {\n return null;\n }\n\n element.parentNode.removeChild(element);\n\n return element;\n },\n\n // Inaert an element after another\n insertAfter(element, target) {\n target.parentNode.insertBefore(element, target.nextSibling);\n },\n\n // Create a DocumentFragment\n createElement(type, attributes, text) {\n // Create a new \n const element = document.createElement(type);\n\n // Set all passed attributes\n if (utils.is.object(attributes)) {\n utils.setAttributes(element, attributes);\n }\n\n // Add text node\n if (utils.is.string(text)) {\n element.textContent = text;\n }\n\n // Return built element\n return element;\n },\n\n // Insert a DocumentFragment\n insertElement(type, parent, attributes, text) {\n // Inject the new \n parent.appendChild(utils.createElement(type, attributes, text));\n },\n\n // Remove all child elements\n emptyElement(element) {\n let { length } = element.childNodes;\n\n while (length > 0) {\n element.removeChild(element.lastChild);\n length -= 1;\n }\n },\n\n // Set attributes\n setAttributes(element, attributes) {\n Object.keys(attributes).forEach(key => {\n element.setAttribute(key, attributes[key]);\n });\n },\n\n // Get an attribute object from a string selector\n getAttributesFromSelector(sel, existingAttributes) {\n // For example:\n // '.test' to { class: 'test' }\n // '#test' to { id: 'test' }\n // '[data-test=\"test\"]' to { 'data-test': 'test' }\n\n if (!utils.is.string(sel) || utils.is.empty(sel)) {\n return {};\n }\n\n const attributes = {};\n const existing = existingAttributes;\n\n sel.split(',').forEach(s => {\n // Remove whitespace\n const selector = s.trim();\n const className = selector.replace('.', '');\n const stripped = selector.replace(/[[\\]]/g, '');\n\n // Get the parts and value\n const parts = stripped.split('=');\n const key = parts[0];\n const value = parts.length > 1 ? parts[1].replace(/[\"']/g, '') : '';\n\n // Get the first character\n const start = selector.charAt(0);\n\n switch (start) {\n case '.':\n // Add to existing classname\n if (utils.is.object(existing) && utils.is.string(existing.class)) {\n existing.class += ` ${className}`;\n }\n\n attributes.class = className;\n break;\n\n case '#':\n // ID selector\n attributes.id = selector.replace('#', '');\n break;\n\n case '[':\n // Attribute selector\n attributes[key] = value;\n\n break;\n\n default:\n break;\n }\n });\n\n return attributes;\n },\n\n // Toggle class on an element\n toggleClass(element, className, toggle) {\n if (utils.is.htmlElement(element)) {\n const contains = element.classList.contains(className);\n\n element.classList[toggle ? 'add' : 'remove'](className);\n\n return (toggle && !contains) || (!toggle && contains);\n }\n\n return null;\n },\n\n // Has class name\n hasClass(element, className) {\n return utils.is.htmlElement(element) && element.classList.contains(className);\n },\n\n // Element matches selector\n matches(element, selector) {\n const prototype = { Element };\n\n function match() {\n return Array.from(document.querySelectorAll(selector)).includes(this);\n }\n\n const matches =\n prototype.matches ||\n prototype.webkitMatchesSelector ||\n prototype.mozMatchesSelector ||\n prototype.msMatchesSelector ||\n match;\n\n return matches.call(element, selector);\n },\n\n // Find all elements\n getElements(selector) {\n return this.elements.container.querySelectorAll(selector);\n },\n\n // Find a single element\n getElement(selector) {\n return this.elements.container.querySelector(selector);\n },\n\n // Find the UI controls and store references in custom controls\n // TODO: Allow settings menus with custom controls\n findElements() {\n try {\n this.elements.controls = utils.getElement.call(this, this.config.selectors.controls.wrapper);\n\n // Buttons\n this.elements.buttons = {\n play: utils.getElements.call(this, this.config.selectors.buttons.play),\n pause: utils.getElement.call(this, this.config.selectors.buttons.pause),\n restart: utils.getElement.call(this, this.config.selectors.buttons.restart),\n rewind: utils.getElement.call(this, this.config.selectors.buttons.rewind),\n forward: utils.getElement.call(this, this.config.selectors.buttons.forward),\n mute: utils.getElement.call(this, this.config.selectors.buttons.mute),\n pip: utils.getElement.call(this, this.config.selectors.buttons.pip),\n airplay: utils.getElement.call(this, this.config.selectors.buttons.airplay),\n settings: utils.getElement.call(this, this.config.selectors.buttons.settings),\n captions: utils.getElement.call(this, this.config.selectors.buttons.captions),\n fullscreen: utils.getElement.call(this, this.config.selectors.buttons.fullscreen),\n };\n\n // Progress\n this.elements.progress = utils.getElement.call(this, this.config.selectors.progress);\n\n // Inputs\n this.elements.inputs = {\n seek: utils.getElement.call(this, this.config.selectors.inputs.seek),\n volume: utils.getElement.call(this, this.config.selectors.inputs.volume),\n };\n\n // Display\n this.elements.display = {\n buffer: utils.getElement.call(this, this.config.selectors.display.buffer),\n duration: utils.getElement.call(this, this.config.selectors.display.duration),\n currentTime: utils.getElement.call(this, this.config.selectors.display.currentTime),\n };\n\n // Seek tooltip\n if (utils.is.htmlElement(this.elements.progress)) {\n this.elements.display.seekTooltip = this.elements.progress.querySelector(\n `.${this.config.classNames.tooltip}`\n );\n }\n\n return true;\n } catch (error) {\n // Log it\n this.warn('It looks like there is a problem with your custom controls HTML', error);\n\n // Restore native video controls\n this.toggleNativeControls(true);\n\n return false;\n }\n },\n\n // Get the focused element\n getFocusElement() {\n let focused = document.activeElement;\n\n if (!focused || focused === document.body) {\n focused = null;\n } else {\n focused = document.querySelector(':focus');\n }\n\n return focused;\n },\n\n // Trap focus inside container\n trapFocus() {\n const tabbables = utils.getElements.call(this, 'input:not([disabled]), button:not([disabled])');\n const first = tabbables[0];\n const last = tabbables[tabbables.length - 1];\n\n utils.on(\n this.elements.container,\n 'keydown',\n event => {\n // If it is tab\n if (event.which === 9 && this.fullscreen.active) {\n if (event.target === last && !event.shiftKey) {\n // Move focus to first element that can be tabbed if Shift isn't used\n event.preventDefault();\n first.focus();\n } else if (event.target === first && event.shiftKey) {\n // Move focus to last element that can be tabbed if Shift is used\n event.preventDefault();\n last.focus();\n }\n }\n },\n false\n );\n },\n\n // Toggle event listener\n toggleListener(elements, event, callback, toggle, passive, capture) {\n // Bail if no elements\n if (elements === null || utils.is.undefined(elements)) {\n return;\n }\n\n // If a nodelist is passed, call itself on each node\n if (utils.is.nodeList(elements)) {\n // Create listener for each node\n Array.from(elements).forEach(element => {\n if (element instanceof Node) {\n utils.toggleListener.call(null, element, event, callback, toggle, passive, capture);\n }\n });\n\n return;\n }\n\n // Allow multiple events\n const events = event.split(' ');\n\n // Build options\n // Default to just capture boolean\n let options = utils.is.boolean(capture) ? capture : false;\n\n // If passive events listeners are supported\n if (support.passiveListeners) {\n options = {\n // Whether the listener can be passive (i.e. default never prevented)\n passive: utils.is.boolean(passive) ? passive : true,\n // Whether the listener is a capturing listener or not\n capture: utils.is.boolean(capture) ? capture : false,\n };\n }\n\n // If a single node is passed, bind the event listener\n events.forEach(type => {\n elements[toggle ? 'addEventListener' : 'removeEventListener'](type, callback, options);\n });\n },\n\n // Bind event handler\n on(element, events, callback, passive, capture) {\n utils.toggleListener(element, events, callback, true, passive, capture);\n },\n\n // Unbind event handler\n off(element, events, callback, passive, capture) {\n utils.toggleListener(element, events, callback, false, passive, capture);\n },\n\n // Trigger event\n dispatchEvent(element, type, bubbles, properties) {\n // Bail if no element\n if (!element || !type) {\n return;\n }\n\n // Create and dispatch the event\n const event = new CustomEvent(type, {\n bubbles: utils.is.boolean(bubbles) ? bubbles : false,\n detail: Object.assign({}, properties, {\n plyr: this instanceof Plyr ? this : null,\n }),\n });\n\n // Dispatch the event\n element.dispatchEvent(event);\n },\n\n // Toggle aria-pressed state on a toggle button\n // http://www.ssbbartgroup.com/blog/how-not-to-misuse-aria-states-properties-and-roles\n toggleState(target, state) {\n // Bail if no target\n if (!target) {\n return null;\n }\n\n // Get state\n const newState = utils.is.boolean(state) ? state : !target.getAttribute('aria-pressed');\n\n // Set the attribute on target\n target.setAttribute('aria-pressed', newState);\n\n return newState;\n },\n\n // Get percentage\n getPercentage(current, max) {\n if (current === 0 || max === 0 || Number.isNaN(current) || Number.isNaN(max)) {\n return 0;\n }\n return (current / max * 100).toFixed(2);\n },\n\n // Deep extend/merge destination object with N more objects\n // http://andrewdupont.net/2009/08/28/deep-extending-objects-in-javascript/\n // Removed call to arguments.callee (used explicit function name instead)\n extend(...objects) {\n const { length } = objects;\n\n // Bail if nothing to merge\n if (!length) {\n return null;\n }\n\n // Return first if specified but nothing to merge\n if (length === 1) {\n return objects[0];\n }\n\n // First object is the destination\n let destination = Array.prototype.shift.call(objects);\n if (!utils.is.object(destination)) {\n destination = {};\n }\n\n // Loop through all objects to merge\n objects.forEach(source => {\n if (!utils.is.object(source)) {\n return;\n }\n\n Object.keys(source).forEach(property => {\n if (source[property] && source[property].constructor && source[property].constructor === Object) {\n destination[property] = destination[property] || {};\n utils.extend(destination[property], source[property]);\n } else {\n destination[property] = source[property];\n }\n });\n });\n\n return destination;\n },\n\n // Parse YouTube ID from URL\n parseYouTubeId(url) {\n const regex = /^.*(youtu.be\\/|v\\/|u\\/\\w\\/|embed\\/|watch\\?v=|&v=)([^#&?]*).*/;\n return url.match(regex) ? RegExp.$2 : url;\n },\n\n // Parse Vimeo ID from URL\n parseVimeoId(url) {\n if (utils.is.number(Number(url))) {\n return url;\n }\n\n const regex = /^.*(vimeo.com\\/|video\\/)(\\d+).*/;\n return url.match(regex) ? RegExp.$2 : url;\n },\n\n // Convert object to URL parameters\n buildUrlParameters(input) {\n if (!utils.is.object(input)) {\n return '';\n }\n\n return Object.keys(input)\n .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(input[key])}`)\n .join('&');\n },\n\n // Remove HTML from a string\n stripHTML(source) {\n const fragment = document.createDocumentFragment();\n const element = document.createElement('div');\n fragment.appendChild(element);\n element.innerHTML = source;\n return fragment.firstChild.innerText;\n },\n\n // Load an SVG sprite\n loadSprite(url, id) {\n if (typeof url !== 'string') {\n return;\n }\n\n const prefix = 'cache-';\n const hasId = typeof id === 'string';\n let isCached = false;\n\n function updateSprite(data) {\n // Inject content\n this.innerHTML = data;\n\n // Inject the SVG to the body\n document.body.insertBefore(this, document.body.childNodes[0]);\n }\n\n // Only load once\n if (!hasId || !document.querySelectorAll(`#${id}`).length) {\n // Create container\n const container = document.createElement('div');\n container.setAttribute('hidden', '');\n\n if (hasId) {\n container.setAttribute('id', id);\n }\n\n // Check in cache\n if (support.storage) {\n const cached = window.localStorage.getItem(prefix + id);\n isCached = cached !== null;\n\n if (isCached) {\n const data = JSON.parse(cached);\n updateSprite.call(container, data.content);\n }\n }\n\n // ReSharper disable once InconsistentNaming\n const xhr = new XMLHttpRequest();\n\n // XHR for Chrome/Firefox/Opera/Safari\n if ('withCredentials' in xhr) {\n xhr.open('GET', url, true);\n } else {\n return;\n }\n\n // Once loaded, inject to container and body\n xhr.onload = () => {\n if (support.storage) {\n window.localStorage.setItem(\n prefix + id,\n JSON.stringify({\n content: xhr.responseText,\n })\n );\n }\n\n updateSprite.call(container, xhr.responseText);\n };\n\n xhr.send();\n }\n },\n\n // Get the transition end event\n transitionEnd: (() => {\n const element = document.createElement('span');\n\n const events = {\n WebkitTransition: 'webkitTransitionEnd',\n MozTransition: 'transitionend',\n OTransition: 'oTransitionEnd otransitionend',\n transition: 'transitionend',\n };\n\n const type = Object.keys(events).find(event => element.style[event] !== undefined);\n\n return typeof type === 'string' ? type : false;\n })(),\n};\n\nexport default utils;\n","// ==========================================================================\n// Plyr support checks\n// ==========================================================================\n\nimport utils from './utils';\n\n// Check for feature support\nconst support = {\n // Basic support\n audio: 'canPlayType' in document.createElement('audio'),\n video: 'canPlayType' in document.createElement('video'),\n\n // Check for support\n // Basic functionality vs full UI\n check(type, inline) {\n let api = false;\n let ui = false;\n const browser = utils.getBrowser();\n const playsInline = browser.isIPhone && inline && support.inline;\n\n switch (type) {\n case 'video':\n api = support.video;\n ui = api && support.rangeInput && (!browser.isIPhone || playsInline);\n break;\n\n case 'audio':\n api = support.audio;\n ui = api && support.rangeInput;\n break;\n\n case 'youtube':\n api = true;\n ui = support.rangeInput && (!browser.isIPhone || playsInline);\n break;\n\n case 'vimeo':\n api = true;\n ui = support.rangeInput && !browser.isIPhone;\n break;\n\n default:\n api = support.audio && support.video;\n ui = api && support.rangeInput;\n }\n\n return {\n api,\n ui,\n };\n },\n\n // Local storage\n // We can't assume if local storage is present that we can use it\n storage: (() => {\n if (!('localStorage' in window)) {\n return false;\n }\n\n // Try to use it (it might be disabled, e.g. user is in private/porn mode)\n // see: https://github.com/sampotts/plyr/issues/131\n const test = '___test';\n try {\n window.localStorage.setItem(test, test);\n window.localStorage.removeItem(test);\n return true;\n } catch (e) {\n return false;\n }\n })(),\n\n // Picture-in-picture support\n // Safari only currently\n pip: (() => {\n const browser = utils.getBrowser();\n return !browser.isIPhone && utils.is.function(utils.createElement('video').webkitSetPresentationMode);\n })(),\n\n // Airplay support\n // Safari only currently\n airplay: utils.is.function(window.WebKitPlaybackTargetAvailabilityEvent),\n\n // Inline playback support\n // https://webkit.org/blog/6784/new-video-policies-for-ios/\n inline: 'playsInline' in document.createElement('video'),\n\n // Check for mime type support against a player instance\n // Credits: http://diveintohtml5.info/everything.html\n // Related: http://www.leanbackplayer.com/test/h5mt.html\n mime(type) {\n const { media } = this;\n\n try {\n // Bail if no checking function\n if (!utils.is.function(media.canPlayType)) {\n return false;\n }\n\n // Type specific checks\n if (this.type === 'video') {\n switch (type) {\n case 'video/webm':\n return media.canPlayType('video/webm; codecs=\"vp8, vorbis\"').replace(/no/, '');\n\n case 'video/mp4':\n return media.canPlayType('video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"').replace(/no/, '');\n\n case 'video/ogg':\n return media.canPlayType('video/ogg; codecs=\"theora\"').replace(/no/, '');\n\n default:\n return false;\n }\n } else if (this.type === 'audio') {\n switch (type) {\n case 'audio/mpeg':\n return media.canPlayType('audio/mpeg;').replace(/no/, '');\n\n case 'audio/ogg':\n return media.canPlayType('audio/ogg; codecs=\"vorbis\"').replace(/no/, '');\n\n case 'audio/wav':\n return media.canPlayType('audio/wav; codecs=\"1\"').replace(/no/, '');\n\n default:\n return false;\n }\n }\n } catch (e) {\n return false;\n }\n\n // If we got this far, we're stuffed\n return false;\n },\n\n // Check for textTracks support\n textTracks: 'textTracks' in document.createElement('video'),\n\n // Check for passive event listener support\n // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md\n // https://www.youtube.com/watch?v=NPM6172J22g\n passiveListeners: (() => {\n // Test via a getter in the options object to see if the passive property is accessed\n let supported = false;\n try {\n const options = Object.defineProperty({}, 'passive', {\n get() {\n supported = true;\n return null;\n },\n });\n window.addEventListener('test', null, options);\n } catch (e) {\n // Do nothing\n }\n\n return supported;\n })(),\n\n // Sliders\n rangeInput: (() => {\n const range = document.createElement('input');\n range.type = 'range';\n return range.type === 'range';\n })(),\n\n // Touch\n // Remember a device can be moust + touch enabled\n touch: 'ontouchstart' in document.documentElement,\n\n // Detect transitions support\n transitions: utils.transitionEnd !== false,\n\n // Reduced motion iOS & MacOS setting\n // https://webkit.org/blog/7551/responsive-design-for-motion/\n reducedMotion: 'matchMedia' in window && window.matchMedia('(prefers-reduced-motion)').matches,\n};\n\nexport default support;\n","// ==========================================================================\n// Plyr fullscreen API\n// ==========================================================================\n\nimport utils from './utils';\n\n// Determine the prefix\nconst prefix = (() => {\n let value = false;\n\n if (utils.is.function(document.cancelFullScreen)) {\n value = '';\n } else {\n // Check for fullscreen support by vendor prefix\n ['webkit', 'o', 'moz', 'ms', 'khtml'].some(pre => {\n if (utils.is.function(document[`${pre}CancelFullScreen`])) {\n value = pre;\n return true;\n } else if (utils.is.function(document.msExitFullscreen) && document.msFullscreenEnabled) {\n // Special case for MS (when isn't it?)\n value = 'ms';\n return true;\n }\n\n return false;\n });\n }\n\n return value;\n})();\n\n// Fullscreen API\nconst fullscreen = {\n // Get the prefix\n prefix,\n\n // Check if we can use it\n enabled:\n document.fullscreenEnabled ||\n document.webkitFullscreenEnabled ||\n document.mozFullScreenEnabled ||\n document.msFullscreenEnabled,\n\n // Yet again Microsoft awesomeness,\n // Sometimes the prefix is 'ms', sometimes 'MS' to keep you on your toes\n eventType: prefix === 'ms' ? 'MSFullscreenChange' : `${prefix}fullscreenchange`,\n\n // Is an element fullscreen\n isFullScreen(element) {\n if (!fullscreen.enabled) {\n return false;\n }\n\n const target = utils.is.undefined(element) ? document.body : element;\n\n switch (prefix) {\n case '':\n return document.fullscreenElement === target;\n\n case 'moz':\n return document.mozFullScreenElement === target;\n\n default:\n return document[`${prefix}FullscreenElement`] === target;\n }\n },\n\n // Make an element fullscreen\n requestFullScreen(element) {\n if (!fullscreen.enabled) {\n return false;\n }\n\n const target = utils.is.undefined(element) ? document.body : element;\n\n return !prefix.length\n ? target.requestFullScreen()\n : target[prefix + (prefix === 'ms' ? 'RequestFullscreen' : 'RequestFullScreen')]();\n },\n\n // Bail from fullscreen\n cancelFullScreen() {\n if (!fullscreen.enabled) {\n return false;\n }\n\n return !prefix.length\n ? document.cancelFullScreen()\n : document[prefix + (prefix === 'ms' ? 'ExitFullscreen' : 'CancelFullScreen')]();\n },\n\n // Get the current element\n element() {\n if (!fullscreen.enabled) {\n return null;\n }\n\n return !prefix.length ? document.fullscreenElement : document[`${prefix}FullscreenElement`];\n },\n\n // Setup fullscreen\n setup() {\n if (!this.supported.ui || this.type === 'audio' || !this.config.fullscreen.enabled) {\n return;\n }\n\n // Check for native support\n const nativeSupport = fullscreen.enabled;\n\n if (nativeSupport || (this.config.fullscreen.fallback && !utils.inFrame())) {\n this.log(`${nativeSupport ? 'Native' : 'Fallback'} fullscreen enabled`);\n\n // Add styling hook to show button\n utils.toggleClass(this.elements.container, this.config.classNames.fullscreen.enabled, true);\n } else {\n this.log('Fullscreen not supported and fallback disabled');\n }\n\n // Toggle state\n if (this.elements.buttons && this.elements.buttons.fullscreen) {\n utils.toggleState(this.elements.buttons.fullscreen, false);\n }\n\n // Trap focus in container\n utils.trapFocus.call(this);\n },\n};\n\nexport default fullscreen;\n","// ==========================================================================\n// Plyr Event Listeners\n// ==========================================================================\n\nimport support from './support';\nimport utils from './utils';\nimport controls from './controls';\nimport fullscreen from './fullscreen';\nimport storage from './storage';\nimport ui from './ui';\n\nconst listeners = {\n // Listen for media events\n media() {\n // Time change on media\n utils.on(this.media, 'timeupdate seeking', event => ui.timeUpdate.call(this, event));\n\n // Display duration\n utils.on(this.media, 'durationchange loadedmetadata', event => ui.displayDuration.call(this, event));\n\n // Handle the media finishing\n utils.on(this.media, 'ended', () => {\n // Show poster on end\n if (this.type === 'video' && this.config.showPosterOnEnd) {\n // Restart\n this.restart();\n\n // Re-load media\n this.media.load();\n }\n });\n\n // Check for buffer progress\n utils.on(this.media, 'progress playing', event => ui.updateProgress.call(this, event));\n\n // Handle native mute\n utils.on(this.media, 'volumechange', event => ui.updateVolume.call(this, event));\n\n // Handle native play/pause\n utils.on(this.media, 'play pause ended', event => ui.checkPlaying.call(this, event));\n\n // Loading\n utils.on(this.media, 'waiting canplay seeked', event => ui.checkLoading.call(this, event));\n\n // Click video\n if (this.supported.ui && this.config.clickToPlay && this.type !== 'audio') {\n // Re-fetch the wrapper\n const wrapper = utils.getElement.call(this, `.${this.config.classNames.video}`);\n\n // Bail if there's no wrapper (this should never happen)\n if (!wrapper) {\n return;\n }\n\n // Set cursor\n wrapper.style.cursor = 'pointer';\n\n // On click play, pause ore restart\n utils.on(wrapper, 'click', () => {\n // Touch devices will just show controls (if we're hiding controls)\n if (this.config.hideControls && support.touch && !this.media.paused) {\n return;\n }\n\n if (this.media.paused) {\n this.play();\n } else if (this.media.ended) {\n this.restart();\n this.play();\n } else {\n this.pause();\n }\n });\n }\n\n // Disable right click\n if (this.config.disableContextMenu) {\n utils.on(\n this.media,\n 'contextmenu',\n event => {\n event.preventDefault();\n },\n false\n );\n }\n\n // Speed change\n utils.on(this.media, 'ratechange', () => {\n // Update UI\n controls.updateSetting.call(this, 'speed');\n\n // Save speed to localStorage\n storage.set.call(this, { speed: this.speed });\n });\n\n // Quality change\n utils.on(this.media, 'qualitychange', () => {\n // Update UI\n controls.updateSetting.call(this, 'quality');\n\n // Save speed to localStorage\n storage.set.call(this, { quality: this.quality });\n });\n\n // Caption language change\n utils.on(this.media, 'captionchange', () => {\n // Save speed to localStorage\n storage.set.call(this, { language: this.language });\n });\n\n // Volume change\n utils.on(this.media, 'volumechange', () => {\n // Save speed to localStorage\n storage.set.call(this, { volume: this.volume });\n });\n\n // Captions toggle\n utils.on(this.media, 'captionsenabled captionsdisabled', () => {\n // Update UI\n controls.updateSetting.call(this, 'captions');\n\n // Save speed to localStorage\n storage.set.call(this, { captions: this.captions.enabled });\n });\n\n // Proxy events to container\n // Bubble up key events for Edge\n utils.on(this.media, this.config.events.concat(['keyup', 'keydown']).join(' '), event => {\n utils.dispatchEvent.call(this, this.elements.container, event.type, true);\n });\n },\n\n // Listen for control events\n controls() {\n // IE doesn't support input event, so we fallback to change\n const inputEvent = this.browser.isIE ? 'change' : 'input';\n let last = null;\n\n // Click play/pause helper\n const togglePlay = () => {\n const play = this.togglePlay();\n\n // Determine which buttons\n const target = this.elements.buttons[play ? 'pause' : 'play'];\n\n // Transfer focus\n if (utils.is.htmlElement(target)) {\n target.focus();\n }\n };\n\n // Get the key code for an event\n function getKeyCode(event) {\n return event.keyCode ? event.keyCode : event.which;\n }\n\n function handleKey(event) {\n const code = getKeyCode(event);\n const pressed = event.type === 'keydown';\n const held = pressed && code === last;\n\n // If the event is bubbled from the media element\n // Firefox doesn't get the keycode for whatever reason\n if (!utils.is.number(code)) {\n return;\n }\n\n // Seek by the number keys\n function seekByKey() {\n // Divide the max duration into 10th's and times by the number value\n this.currentTime = this.duration / 10 * (code - 48);\n }\n\n // Handle the key on keydown\n // Reset on keyup\n if (pressed) {\n // Which keycodes should we prevent default\n const preventDefault = [\n 48,\n 49,\n 50,\n 51,\n 52,\n 53,\n 54,\n 56,\n 57,\n 32,\n 75,\n 38,\n 40,\n 77,\n 39,\n 37,\n 70,\n 67,\n 73,\n 76,\n 79,\n ];\n const checkFocus = [38, 40];\n\n if (checkFocus.includes(code)) {\n const focused = utils.getFocusElement();\n\n if (utils.is.htmlElement(focused) && utils.getFocusElement().type === 'radio') {\n return;\n }\n }\n\n // If the code is found prevent default (e.g. prevent scrolling for arrows)\n if (preventDefault.includes(code)) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n switch (code) {\n case 48:\n case 49:\n case 50:\n case 51:\n case 52:\n case 53:\n case 54:\n case 55:\n case 56:\n case 57:\n // 0-9\n if (!held) {\n seekByKey();\n }\n break;\n\n case 32:\n case 75:\n // Space and K key\n if (!held) {\n togglePlay();\n }\n break;\n\n case 38:\n // Arrow up\n this.increaseVolume(0.1);\n break;\n\n case 40:\n // Arrow down\n this.decreaseVolume(0.1);\n break;\n\n case 77:\n // M key\n if (!held) {\n this.toggleMute();\n }\n break;\n\n case 39:\n // Arrow forward\n this.forward();\n break;\n\n case 37:\n // Arrow back\n this.rewind();\n break;\n\n case 70:\n // F key\n this.toggleFullscreen();\n break;\n\n case 67:\n // C key\n if (!held) {\n this.toggleCaptions();\n }\n break;\n\n case 73:\n this.setLoop('start');\n break;\n\n case 76:\n this.setLoop();\n break;\n\n case 79:\n this.setLoop('end');\n break;\n\n default:\n break;\n }\n\n // Escape is handle natively when in full screen\n // So we only need to worry about non native\n if (!fullscreen.enabled && this.fullscreen.active && code === 27) {\n this.toggleFullscreen();\n }\n\n // Store last code for next cycle\n last = code;\n } else {\n last = null;\n }\n }\n\n // Keyboard shortcuts\n if (this.config.keyboard.focused) {\n // Handle global presses\n if (this.config.keyboard.global) {\n utils.on(\n window,\n 'keydown keyup',\n event => {\n const code = getKeyCode(event);\n const focused = utils.getFocusElement();\n const allowed = [48, 49, 50, 51, 52, 53, 54, 56, 57, 75, 77, 70, 67, 73, 76, 79];\n\n // Only handle global key press if key is in the allowed keys\n // and if the focused element is not editable (e.g. text input)\n // and any that accept key input http://webaim.org/techniques/keyboard/\n if (\n allowed.includes(code) &&\n (!utils.is.htmlElement(focused) || !utils.matches(focused, this.config.selectors.editable))\n ) {\n handleKey(event);\n }\n },\n false\n );\n }\n\n // Handle presses on focused\n utils.on(this.elements.container, 'keydown keyup', handleKey, false);\n }\n\n // Detect tab focus\n // Remove class on blur/focusout\n utils.on(this.elements.container, 'focusout', event => {\n utils.toggleClass(event.target, this.config.classNames.tabFocus, false);\n });\n\n // Add classname to tabbed elements\n utils.on(this.elements.container, 'keydown', event => {\n if (event.keyCode !== 9) {\n return;\n }\n\n // Delay the adding of classname until the focus has changed\n // This event fires before the focusin event\n window.setTimeout(() => {\n utils.toggleClass(utils.getFocusElement(), this.config.classNames.tabFocus, true);\n }, 0);\n });\n\n // Trigger custom and default handlers\n const proxy = (event, handlerKey, defaultHandler) => {\n const customHandler = this.config.listeners[handleKey];\n\n // Execute custom handler\n if (utils.is.function(customHandler)) {\n customHandler.call(this, event);\n }\n\n // Only call default handler if not prevented in custom handler\n if (!event.defaultPrevented && utils.is.function(defaultHandler)) {\n defaultHandler.call(this, event);\n }\n };\n\n // Play\n utils.on(this.elements.buttons.play, 'click', event => proxy(event, 'play', togglePlay));\n\n // Pause\n utils.on(this.elements.buttons.pause, 'click', event => proxy(event, 'pause', togglePlay));\n\n // Pause\n utils.on(this.elements.buttons.restart, 'click', event =>\n proxy(event, 'restart', () => {\n this.restart();\n })\n );\n\n // Rewind\n utils.on(this.elements.buttons.rewind, 'click', event =>\n proxy(event, 'rewind', () => {\n this.rewind();\n })\n );\n\n // Rewind\n utils.on(this.elements.buttons.forward, 'click', event =>\n proxy(event, 'forward', () => {\n this.forward();\n })\n );\n\n // Mute\n utils.on(this.elements.buttons.mute, 'click', event =>\n proxy(event, 'mute', () => {\n this.toggleMute();\n })\n );\n\n // Captions\n utils.on(this.elements.buttons.captions, 'click', event =>\n proxy(event, 'captions', () => {\n this.toggleCaptions();\n })\n );\n\n // Fullscreen\n utils.on(this.elements.buttons.fullscreen, 'click', event =>\n proxy(event, 'fullscreen', () => {\n this.toggleFullscreen();\n })\n );\n\n // Picture-in-Picture\n utils.on(this.elements.buttons.pip, 'click', event =>\n proxy(event, 'pip', () => {\n this.togglePictureInPicture();\n })\n );\n\n // Airplay\n utils.on(this.elements.buttons.airplay, 'click', event =>\n proxy(event, 'airplay', () => {\n this.airPlay();\n })\n );\n\n // Settings menu\n utils.on(this.elements.buttons.settings, 'click', event => {\n controls.toggleMenu.call(this, event);\n });\n\n // Click anywhere closes menu\n utils.on(document.documentElement, 'click', event => {\n controls.toggleMenu.call(this, event);\n });\n\n // Settings menu\n utils.on(this.elements.settings.form, 'click', event => {\n // Show tab in menu\n controls.showTab.call(this, event);\n\n // Settings menu items - use event delegation as items are added/removed\n // Settings - Language\n if (utils.matches(event.target, this.config.selectors.inputs.language)) {\n proxy(event, 'language', () => {\n this.toggleCaptions(true);\n this.language = event.target.value.toLowerCase();\n });\n } else if (utils.matches(event.target, this.config.selectors.inputs.quality)) {\n // Settings - Quality\n proxy(event, 'quality', () => {\n this.quality = event.target.value;\n });\n } else if (utils.matches(event.target, this.config.selectors.inputs.speed)) {\n // Settings - Speed\n proxy(event, 'speed', () => {\n this.speed = parseFloat(event.target.value);\n });\n } else if (utils.matches(event.target, this.config.selectors.buttons.loop)) {\n // Settings - Looping\n // TODO: use toggle buttons\n proxy(event, 'loop', () => {\n // TODO: This should be done in the method itself I think\n // var value = event.target.getAttribute('data-loop__value') || event.target.getAttribute('data-loop__type');\n\n this.warn('Set loop');\n });\n }\n });\n\n // Seek\n utils.on(this.elements.inputs.seek, inputEvent, event =>\n proxy(event, 'seek', () => {\n this.currentTime = event.target.value / event.target.max * this.duration;\n })\n );\n\n // Volume\n utils.on(this.elements.inputs.volume, inputEvent, event =>\n proxy(event, 'volume', () => {\n this.volume = event.target.value;\n })\n );\n\n // Polyfill for lower fill in for webkit\n if (this.browser.isWebkit) {\n utils.on(utils.getElements.call(this, 'input[type=\"range\"]'), 'input', event => {\n controls.updateRangeFill.call(this, event.target);\n });\n }\n\n // Seek tooltip\n utils.on(this.elements.progress, 'mouseenter mouseleave mousemove', event =>\n controls.updateSeekTooltip.call(this, event)\n );\n\n // Toggle controls visibility based on mouse movement\n if (this.config.hideControls) {\n // Toggle controls on mouse events and entering fullscreen\n utils.on(\n this.elements.container,\n 'mouseenter mouseleave mousemove touchstart touchend touchcancel touchmove enterfullscreen',\n event => {\n this.toggleControls(event);\n }\n );\n\n // Watch for cursor over controls so they don't hide when trying to interact\n utils.on(this.elements.controls, 'mouseenter mouseleave', event => {\n this.elements.controls.hover = event.type === 'mouseenter';\n });\n\n // Watch for cursor over controls so they don't hide when trying to interact\n utils.on(this.elements.controls, 'mousedown mouseup touchstart touchend touchcancel', event => {\n this.elements.controls.pressed = ['mousedown', 'touchstart'].includes(event.type);\n });\n\n // Focus in/out on controls\n // TODO: Check we need capture here\n utils.on(\n this.elements.controls,\n 'focus blur',\n event => {\n this.toggleControls(event);\n },\n true\n );\n }\n\n // Mouse wheel for volume\n utils.on(\n this.elements.inputs.volume,\n 'wheel',\n event =>\n proxy(event, 'volume', () => {\n // Detect \"natural\" scroll - suppored on OS X Safari only\n // Other browsers on OS X will be inverted until support improves\n const inverted = event.webkitDirectionInvertedFromDevice;\n const step = 1 / 50;\n let direction = 0;\n\n // Scroll down (or up on natural) to decrease\n if (event.deltaY < 0 || event.deltaX > 0) {\n if (inverted) {\n this.decreaseVolume(step);\n direction = -1;\n } else {\n this.increaseVolume(step);\n direction = 1;\n }\n }\n\n // Scroll up (or down on natural) to increase\n if (event.deltaY > 0 || event.deltaX < 0) {\n if (inverted) {\n this.increaseVolume(step);\n direction = 1;\n } else {\n this.decreaseVolume(step);\n direction = -1;\n }\n }\n\n // Don't break page scrolling at max and min\n if ((direction === 1 && this.media.volume < 1) || (direction === -1 && this.media.volume > 0)) {\n event.preventDefault();\n }\n }),\n false\n );\n\n // Handle user exiting fullscreen by escaping etc\n if (fullscreen.enabled) {\n utils.on(document, fullscreen.eventType, event => {\n this.toggleFullscreen(event);\n });\n }\n },\n};\n\nexport default listeners;\n","// ==========================================================================\n// Plyr UI\n// ==========================================================================\n\nimport utils from './utils';\nimport captions from './captions';\nimport controls from './controls';\nimport fullscreen from './fullscreen';\nimport listeners from './listeners';\nimport storage from './storage';\n\nconst ui = {\n addStyleHook() {\n utils.toggleClass(this.elements.container, this.config.selectors.container.replace('.', ''), true);\n utils.toggleClass(this.elements.container, this.config.classNames.uiSupported, this.supported.ui);\n },\n\n // Toggle native HTML5 media controls\n toggleNativeControls(toggle) {\n if (toggle && this.isHTML5) {\n this.media.setAttribute('controls', '');\n } else {\n this.media.removeAttribute('controls');\n }\n },\n\n // Setup the UI\n build() {\n // Re-attach media element listeners\n // TODO: Use event bubbling\n listeners.media.call(this);\n\n // Don't setup interface if no support\n if (!this.supported.ui) {\n this.warn(`Basic support only for ${this.type}`);\n\n // Remove controls\n utils.removeElement.call(this, 'controls');\n\n // Remove large play\n utils.removeElement.call(this, 'buttons.play');\n\n // Restore native controls\n ui.toggleNativeControls.call(this, true);\n\n // Bail\n return;\n }\n\n // Inject custom controls if not present\n if (!utils.is.htmlElement(this.elements.controls)) {\n // Inject custom controls\n controls.inject.call(this);\n\n // Re-attach control listeners\n listeners.controls.call(this);\n }\n\n // If there's no controls, bail\n if (!utils.is.htmlElement(this.elements.controls)) {\n return;\n }\n\n // Remove native controls\n ui.toggleNativeControls.call(this);\n\n // Setup fullscreen\n fullscreen.setup.call(this);\n\n // Captions\n captions.setup.call(this);\n\n // Set volume\n this.volume = null;\n ui.updateVolume.call(this);\n\n // Set playback speed\n this.speed = null;\n\n // Set loop\n // this.setLoop();\n\n // Reset time display\n ui.timeUpdate.call(this);\n\n // Update the UI\n ui.checkPlaying.call(this);\n\n this.ready = true;\n\n // Ready event at end of execution stack\n utils.dispatchEvent.call(this, this.media, 'ready');\n\n // Autoplay\n if (this.config.autoplay) {\n this.play();\n }\n },\n\n // Show the duration on metadataloaded\n displayDuration() {\n if (!this.supported.ui) {\n return;\n }\n\n // If there's only one time display, display duration there\n if (!this.elements.display.duration && this.config.displayDuration && this.media.paused) {\n ui.updateTimeDisplay.call(this, this.duration, this.elements.display.currentTime);\n }\n\n // If there's a duration element, update content\n if (this.elements.display.duration) {\n ui.updateTimeDisplay.call(this, this.duration, this.elements.display.duration);\n }\n\n // Update the tooltip (if visible)\n controls.updateSeekTooltip.call(this);\n },\n\n // Setup aria attribute for play and iframe title\n setTitle() {\n // Find the current text\n let label = this.config.i18n.play;\n\n // If there's a media title set, use that for the label\n if (utils.is.string(this.config.title) && !utils.is.empty(this.config.title)) {\n label += `, ${this.config.title}`;\n\n // Set container label\n this.elements.container.setAttribute('aria-label', this.config.title);\n }\n\n // If there's a play button, set label\n if (this.supported.ui) {\n if (utils.is.htmlElement(this.elements.buttons.play)) {\n this.elements.buttons.play.setAttribute('aria-label', label);\n }\n if (utils.is.htmlElement(this.elements.buttons.playLarge)) {\n this.elements.buttons.playLarge.setAttribute('aria-label', label);\n }\n }\n\n // Set iframe title\n // https://github.com/sampotts/plyr/issues/124\n if (this.isEmbed) {\n const iframe = utils.getElement.call(this, 'iframe');\n\n if (!utils.is.htmlElement(iframe)) {\n return;\n }\n\n // Default to media type\n const title = !utils.is.empty(this.config.title) ? this.config.title : 'video';\n\n iframe.setAttribute('title', this.config.i18n.frameTitle.replace('{title}', title));\n }\n },\n\n // Check playing state\n checkPlaying() {\n utils.toggleClass(this.elements.container, this.config.classNames.playing, !this.media.paused);\n\n utils.toggleClass(this.elements.container, this.config.classNames.stopped, this.media.paused);\n\n this.toggleControls(this.media.paused);\n },\n\n // Update volume UI and storage\n updateVolume() {\n // Update the if present\n if (this.supported.ui) {\n const value = this.media.muted ? 0 : this.media.volume;\n\n if (this.elements.inputs.volume) {\n ui.setRange.call(this, this.elements.inputs.volume, value);\n }\n }\n\n // Toggle class if muted\n utils.toggleClass(this.elements.container, this.config.classNames.muted, this.media.muted);\n\n // Update checkbox for mute state\n if (this.supported.ui && this.elements.buttons.mute) {\n utils.toggleState(this.elements.buttons.mute, this.media.muted);\n }\n },\n\n // Check if media is loading\n checkLoading(event) {\n this.loading = event.type === 'waiting';\n\n // Clear timer\n clearTimeout(this.timers.loading);\n\n // Timer to prevent flicker when seeking\n this.timers.loading = setTimeout(() => {\n // Toggle container class hook\n utils.toggleClass(this.elements.container, this.config.classNames.loading, this.loading);\n\n // Show controls if loading, hide if done\n this.toggleControls(this.loading);\n }, this.loading ? 250 : 0);\n },\n\n // Update seek value and lower fill\n setRange(target, value) {\n if (!utils.is.htmlElement(target)) {\n return;\n }\n\n target.value = value;\n\n // Webkit range fill\n controls.updateRangeFill.call(this, target);\n },\n\n // Set value\n setProgress(target, input) {\n // Default to 0\n const value = !utils.is.undefined(input) ? input : 0;\n const progress = !utils.is.undefined(target) ? target : this.elements.display.buffer;\n\n // Update value and label\n if (utils.is.htmlElement(progress)) {\n progress.value = value;\n\n // Update text label inside\n const label = progress.getElementsByTagName('span')[0];\n if (utils.is.htmlElement(label)) {\n label.childNodes[0].nodeValue = value;\n }\n }\n },\n\n // Update elements\n updateProgress(event) {\n if (!this.supported.ui) {\n return;\n }\n\n let value = 0;\n\n if (event) {\n switch (event.type) {\n // Video playing\n case 'timeupdate':\n case 'seeking':\n value = utils.getPercentage(this.currentTime, this.duration);\n\n // Set seek range value only if it's a 'natural' time event\n if (event.type === 'timeupdate') {\n ui.setRange.call(this, this.elements.inputs.seek, value);\n }\n\n break;\n\n // Check buffer status\n case 'playing':\n case 'progress':\n value = (() => {\n const { buffered } = this.media;\n\n if (buffered && buffered.length) {\n // HTML5\n return utils.getPercentage(buffered.end(0), this.duration);\n } else if (utils.is.number(buffered)) {\n // YouTube returns between 0 and 1\n return buffered * 100;\n }\n\n return 0;\n })();\n\n ui.setProgress.call(this, this.elements.display.buffer, value);\n\n break;\n\n default:\n break;\n }\n }\n },\n\n // Update the displayed time\n updateTimeDisplay(value, element) {\n // Bail if there's no duration display\n if (!utils.is.htmlElement(element)) {\n return null;\n }\n\n // Fallback to 0\n const time = !Number.isNaN(value) ? value : 0;\n\n let secs = parseInt(time % 60, 10);\n let mins = parseInt((time / 60) % 60, 10);\n const hours = parseInt((time / 60 / 60) % 60, 10);\n\n // Do we need to display hours?\n const displayHours = parseInt((this.duration / 60 / 60) % 60, 10) > 0;\n\n // Ensure it's two digits. For example, 03 rather than 3.\n secs = `0${secs}`.slice(-2);\n mins = `0${mins}`.slice(-2);\n\n // Generate display\n const display = `${(displayHours ? `${hours}:` : '') + mins}:${secs}`;\n\n // Render\n element.textContent = display;\n\n // Return for looping\n return display;\n },\n\n // Handle time change event\n timeUpdate(event) {\n // Duration\n ui.updateTimeDisplay.call(this, this.currentTime, this.elements.display.currentTime);\n\n // Ignore updates while seeking\n if (event && event.type === 'timeupdate' && this.media.seeking) {\n return;\n }\n\n // Playing progress\n ui.updateProgress.call(this, event);\n },\n};\n\nexport default ui;\n","// ==========================================================================\n// Plyr controls\n// ==========================================================================\n\nimport support from './support';\nimport utils from './utils';\nimport ui from './ui';\n\nconst controls = {\n // Webkit polyfill for lower fill range\n updateRangeFill(target) {\n // WebKit only\n if (!this.browser.isWebkit) {\n return;\n }\n\n // Get range from event if event passed\n const range = utils.is.event(target) ? target.target : target;\n\n // Needs to be a valid \n if (!utils.is.htmlElement(range) || range.getAttribute('type') !== 'range') {\n return;\n }\n\n // Inject the stylesheet if needed\n if (!utils.is.htmlElement(this.elements.styleSheet)) {\n this.elements.styleSheet = utils.createElement('style');\n this.elements.container.appendChild(this.elements.styleSheet);\n }\n\n const styleSheet = this.elements.styleSheet.sheet;\n const percentage = range.value / range.max * 100;\n const selector = `#${range.id}::-webkit-slider-runnable-track`;\n const styles = `{ background-image: linear-gradient(to right, currentColor ${percentage}%, transparent ${percentage}%) }`;\n\n // Find old rule if it exists\n const index = Array.from(styleSheet.rules).findIndex(rule => rule.selectorText === selector);\n\n // Remove old rule\n if (index !== -1) {\n styleSheet.deleteRule(index);\n }\n\n // Insert new one\n styleSheet.insertRule([selector, styles].join(' '));\n },\n\n // Get icon URL\n getIconUrl() {\n return {\n url: this.config.iconUrl,\n absolute: this.config.iconUrl.indexOf('http') === 0 || (this.browser.isIE && !window.svg4everybody),\n };\n },\n\n // Create icon\n createIcon(type, attributes) {\n const namespace = 'http://www.w3.org/2000/svg';\n const iconUrl = controls.getIconUrl.call(this);\n const iconPath = `${!iconUrl.absolute ? iconUrl.url : ''}#${this.config.iconPrefix}`;\n\n // Create \n const icon = document.createElementNS(namespace, 'svg');\n utils.setAttributes(\n icon,\n utils.extend(attributes, {\n role: 'presentation',\n })\n );\n\n // Create the to reference sprite\n const use = document.createElementNS(namespace, 'use');\n use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `${iconPath}-${type}`);\n\n // Add to \n icon.appendChild(use);\n\n return icon;\n },\n\n // Create hidden text label\n createLabel(type) {\n let text = this.config.i18n[type];\n\n switch (type) {\n case 'pip':\n text = 'PIP';\n break;\n\n case 'airplay':\n text = 'AirPlay';\n break;\n\n default:\n break;\n }\n\n return utils.createElement(\n 'span',\n {\n class: this.config.classNames.hidden,\n },\n text\n );\n },\n\n // Create a badge\n createBadge(text) {\n const badge = utils.createElement('span', {\n class: this.config.classNames.menu.value,\n });\n\n badge.appendChild(\n utils.createElement(\n 'span',\n {\n class: this.config.classNames.menu.badge,\n },\n text\n )\n );\n\n return badge;\n },\n\n // Create a