From de6f0f1b778180f7b26f85f45053ffb97eb526af Mon Sep 17 00:00:00 2001
From: Sam Potts
Date: Thu, 23 Nov 2017 12:57:43 +1100
Subject: [PATCH] Updated data attributes to `data-plyr` namespace. Speed menu
fixes
---
.prettierrc | 2 +-
.vscode/settings.json | 1 -
bundles.json | 2 +-
dist/plyr.js | 2 +-
dist/plyr.js.map | 2 +-
gulpfile.js | 46 ++--
package.json | 13 +-
readme.md | 528 +++++++++++++++++++++-----------------
src/js/captions.js | 11 +-
src/js/controls.js | 52 +---
src/js/defaults.js | 14 +-
src/js/fullscreen.js | 14 +-
src/js/listeners.js | 38 +--
src/js/media.js | 12 +-
src/js/plugins/vimeo.js | 5 -
src/js/plugins/youtube.js | 7 +-
src/js/plyr.js | 17 +-
src/js/source.js | 6 +-
src/js/ui.js | 7 +-
src/js/utils.js | 15 +-
20 files changed, 365 insertions(+), 429 deletions(-)
diff --git a/.prettierrc b/.prettierrc
index 79c01567..223a51a5 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,7 +1,7 @@
{
"useTabs": false,
"tabWidth": 4,
- "printWidth": 120,
+ "printWidth": 160,
"singleQuote": true,
"trailingComma": "es5"
}
diff --git a/.vscode/settings.json b/.vscode/settings.json
index ce62af13..301da554 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -17,7 +17,6 @@
// Prettier
"prettier.eslintIntegration": true,
- "prettier.cssEnable": ["css", "less"],
"prettier.stylelintIntegration": true,
// Formatting
diff --git a/bundles.json b/bundles.json
index ebbaef34..726ecbbd 100644
--- a/bundles.json
+++ b/bundles.json
@@ -3,7 +3,7 @@
"less": {
"plyr.css": "src/less/bundle.less"
},
- "scss": {
+ "sass": {
"plyr.css": "src/scss/plyr.scss"
},
"js": {
diff --git a/dist/plyr.js b/dist/plyr.js
index 8ecc7e00..eb2c8cd6 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,autopause:!1,seekTime:10,volume:1,muted:!1,duration:null,displayDuration:!0,invertTime:!0,toggleInvert:!0,ratio:"16:9",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",quality:{default:"default",options:["hd2160","hd1440","hd1080","hd720","large","medium","small","tiny","default"]},loop:{active:!1},speed:{selected: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",mute:"Mute",unmute:"Unmute",enableCaptions:"Enable captions",disableCaptions:"Disable captions",enterFullscreen:"Enter fullscreen",exitFullscreen:"Exit 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","languagechange","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",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",noTransition:"plyr--no-transition",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:"plyr__tab-focus"},keys:{google:null}},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.nullOrUndefined(e)&&Array.isArray(e)},nodeList:function(e){return this.instanceof(e,window.NodeList)},htmlElement:function(e){return this.instanceof(e,window.HTMLElement)},textNode:function(e){return this.getConstructor(e)===Text},event:function(e){return this.instanceof(e,window.Event)},cue:function(e){return this.instanceof(e,window.TextTrackCue)||this.instanceof(e,window.VTTCue)},track:function(e){return this.instanceof(e,window.TextTrack)||!this.nullOrUndefined(e)&&this.string(e.kind)},nullOrUndefined:function(e){return null===e||void 0===e},empty:function(e){return this.nullOrUndefined(e)||(this.string(e)||this.array(e)||this.nodeList(e))&&!e.length||this.object(e)&&!Object.keys(e).length},instanceof:function(e,t){return Boolean(e&&t&&e instanceof t)},getConstructor:function(e){return this.nullOrUndefined(e)?null:e.constructor}},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,t){if(!document.querySelectorAll('script[src="'+e+'"]').length){var i=document.createElement("script");i.src=e;var n=document.getElementsByTagName("script")[0];s.is.function(t)&&i.addEventListener("load",function(e){return t.call(null,e)},!1),n.parentNode.insertBefore(i,n)}},loadSprite:function(e,t){function i(e){this.innerHTML=e,document.body.insertBefore(this,document.body.childNodes[0])}if(s.is.string(e)){var n=s.is.string(t);if(!n||!document.querySelectorAll("#"+t).length){var l=document.createElement("div");if(s.toggleHidden(l,!0),n&&l.setAttribute("id",t),a.storage){var o=window.localStorage.getItem("cache-"+t);if(null!==o){var r=JSON.parse(o);return void i.call(l,r.content)}}fetch(e).then(function(e){return e.ok?e.text():null}).then(function(e){null!==e&&(a.storage&&window.localStorage.setItem("cache-"+t,JSON.stringify({content:e})),i.call(l,e))}).catch(function(){})}}},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)})},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},insertAfter:function(e,t){t.parentNode.insertBefore(e,t.nextSibling)},insertElement:function(e,t,i,n){t.appendChild(s.createElement(e,i,n))},removeElement:function(e){return s.is.htmlElement(e)&&s.is.htmlElement(e.parentNode)?(e.parentNode.removeChild(e),e):null},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)},toggleHidden:function(e,t){s.is.htmlElement(e)&&(t?e.setAttribute("hidden",""):e.removeAttribute("hidden"))},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.console.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,"button:not(:disabled), input:not(:disabled), [tabindex]"),i=t[0],n=t[t.length-1];s.on(this.elements.container,"keydown",function(t){if("Tab"===t.key&&9===t.keyCode&&e.fullscreen.active){var a=s.getFocusElement();a!==n||t.shiftKey?a===i&&t.shiftKey&&(n.focus(),t.preventDefault()):(i.focus(),t.preventDefault())}},!1)},toggleListener:function(e,t,i,n,l,o){if(!s.is.nullOrUndefined(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(s.is.htmlElement(e)){var i="true"===e.getAttribute("aria-pressed"),n=s.is.boolean(t)?t:!i;e.setAttribute("aria-pressed",n)}},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)&&(i?(e.decreaseVolume(.02),n=-1):(e.increaseVolume(.02),n=1)),(t.deltaY>0||t.deltaX<0)&&(i?(e.increaseVolume(.02),n=1):(e.decreaseVolume(.02),n=-1)),(1===n&&e.media.volume<1||-1===n&&e.media.volume>0)&&t.preventDefault()})},!1)}},d={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(){arguments.length>0&&void 0!==arguments[0]&&arguments[0]&&this.isHTML5?this.media.setAttribute("controls",""):this.media.removeAttribute("controls")},build:function(){if(u.media.call(this),!this.supported.ui)return this.console.warn("Basic support only for "+this.type),s.removeElement.call(this,"controls"),s.removeElement.call(this,"buttons.play"),void d.toggleNativeControls.call(this,!0);s.is.htmlElement(this.elements.controls)||(p.inject.call(this),u.controls.call(this)),s.is.htmlElement(this.elements.controls)&&(d.toggleNativeControls.call(this),o.setup.call(this),m.setup.call(this),this.volume=null,this.muted=null,this.speed=null,this.loop=null,this.options.quality=[],d.timeUpdate.call(this),d.checkPlaying.call(this),this.ready=!0,s.dispatchEvent.call(this,this.media,"ready"),d.setTitle.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)),s.is.nodeList(this.elements.buttons.play)&&Array.from(this.elements.buttons.play).forEach(function(t){t.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(){var e=this;s.toggleClass(this.elements.container,this.config.classNames.playing,this.playing),s.toggleClass(this.elements.container,this.config.classNames.stopped,this.paused),s.is.nodeList(this.elements.buttons.play)&&Array.from(this.elements.buttons.play).forEach(function(t){return s.toggleState(t,e.playing)}),this.toggleControls(!this.playing)},checkLoading:function(e){var t=this;this.loading=["stalled","waiting"].includes(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)},updateVolume:function(){this.supported.ui&&(s.is.htmlElement(this.elements.inputs.volume)&&d.setRange.call(this,this.elements.inputs.volume,this.muted?0:this.volume),s.is.htmlElement(this.elements.buttons.mute)&&s.toggleState(this.elements.buttons.mute,this.muted||0===this.volume))},setRange:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;s.is.htmlElement(e)&&(e.value=t,p.updateRangeFill.call(this,e))},setProgress:function(e,t){var i=s.is.number(t)?t:0,n=s.is.htmlElement(e)?e:this.elements.display.buffer;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&&s.is.event(e)){var i=0;if(e)switch(e.type){case"timeupdate":case"seeking":i=s.getPercentage(this.currentTime,this.duration),"timeupdate"===e.type&&d.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}(),d.setProgress.call(this,this.elements.display.buffer,i)}}},updateTimeDisplay:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(s.is.htmlElement(e)&&s.is.number(t)){var n=function(e){return("0"+e).slice(-2)},a=function(e){return parseInt(e/60/60%60,10)},l=a(t),o=function(e){return parseInt(e/60%60,10)}(t),r=function(e){return parseInt(e%60,10)}(t);a(this.duration)>0?l+=":":l="",e.textContent=(i?"-":"")+l+n(o)+":"+n(r)}},timeUpdate:function(e){var t=!s.is.htmlElement(this.elements.display.duration)&&this.config.invertTime;d.updateTimeDisplay.call(this,this.elements.display.currentTime,t?this.duration-this.currentTime:this.currentTime,t),e&&"timeupdate"===e.type&&this.media.seeking||d.updateProgress.call(this,e)},durationUpdate:function(){this.supported.ui&&(!s.is.htmlElement(this.elements.display.duration)&&this.config.displayDuration&&this.paused&&d.updateTimeDisplay.call(this,this.elements.display.currentTime,this.duration),s.is.htmlElement(this.elements.display.duration)&&d.updateTimeDisplay.call(this,this.elements.display.duration,this.duration),p.updateSeekTooltip.call(this))}},h=s.getBrowser(),p={updateRangeFill:function(e){if(h.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")||h.isIE&&!window.svg4everybody}},createIcon:function(e,t){var i=p.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"),o=n+"-"+e;return"href"in l?l.setAttributeNS("http://www.w3.org/1999/xlink","href",o):l.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",o),a.appendChild(l),a},createLabel:function(e,t){var i=this.config.i18n[e],n=Object.assign({},t);switch(e){case"pip":i="PIP";break;case"airplay":i="AirPlay"}return"class"in n?n.class+=" "+this.config.classNames.hidden:n.class=this.config.classNames.hidden,s.createElement("span",n,i)},createBadge:function(e){if(s.is.empty(e))return null;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=!1,o=void 0,r=void 0,c=void 0,u=void 0;switch("type"in n||(n.type="button"),"class"in n?n.class.includes(this.config.classNames.control)&&(n.class+=" "+this.config.classNames.control):n.class=this.config.classNames.control,a){case"play":l=!0,o="play",c="pause",r="play",u="pause";break;case"mute":l=!0,o="mute",c="unmute",r="volume",u="muted";break;case"captions":l=!0,o="enableCaptions",c="disableCaptions",r="captions-off",u="captions-on";break;case"fullscreen":l=!0,o="enterFullscreen",c="exitFullscreen",r="enter-fullscreen",u="exit-fullscreen";break;case"play-large":n.class+=" "+this.config.classNames.control+"--overlaid",a="play",o="play",r="play";break;default:o=a,r=a}return l?(i.appendChild(p.createIcon.call(this,u,{class:"icon--pressed"})),i.appendChild(p.createIcon.call(this,r,{class:"icon--not-pressed"})),i.appendChild(p.createLabel.call(this,c,{class:"label--pressed"})),i.appendChild(p.createLabel.call(this,o,{class:"label--not-pressed"})),n["aria-pressed"]=!1,n["aria-label"]=this.config.i18n[o]):(i.appendChild(p.createIcon.call(this,r)),i.appendChild(p.createLabel.call(this,o))),s.extend(n,s.getAttributesFromSelector(this.config.selectors.buttons[a],n)),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,p.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},createMenuItem:function(e,t,i,n){var a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:null,l=arguments.length>5&&void 0!==arguments[5]&&arguments[5],o=s.createElement("li"),r=s.createElement("label",{class:this.config.classNames.control}),c=s.createElement("input",s.extend(s.getAttributesFromSelector(this.config.selectors.inputs[i]),{type:"radio",name:"plyr-"+i,value:e,checked:l,class:"plyr__sr-only"})),u=s.createElement("span",{"aria-hidden":!0});r.appendChild(c),r.appendChild(u),r.insertAdjacentHTML("beforeend",n),s.is.htmlElement(a)&&r.appendChild(a),o.appendChild(r),t.appendChild(o)},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),d.updateTimeDisplay.call(this,this.elements.display.seekTooltip,this.duration/100*t),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.toggleHidden(i,!t),s.toggleHidden(n,!t)},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(p.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?p.createBadge.call(t,i):null};this.options.quality.forEach(function(e){return p.createMenuItem.call(t,e,i,"quality",p.getLabel.call(t,"quality",e),a(e))}),p.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 p.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.console.warn("Unsupported value of '"+n+"' for "+e);if(!this.config[e].options.includes(n))return void this.console.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=p.getLabel.call(this,e,n))},getLanguage:function(){if(!this.supported.ui)return null;if(!a.textTracks||!m.getTracks.call(this).length)return this.config.i18n.none;if(this.captions.enabled){var e=m.getCurrentTrack.call(this);if(s.is.track(e))return e.label}return this.config.i18n.disabled},setCaptionsMenu:function(){var e=this,t=this.elements.settings.panes.captions.querySelector("ul"),i=m.getTracks.call(this).length;if(p.toggleTab.call(this,"captions",i),s.emptyElement(t),i){var n=m.getTracks.call(this).map(function(e){return{language:e.language,label:s.is.empty(e.label)?e.language.toUpperCase():e.label}});n.unshift({language:"",label:this.config.i18n.none}),n.forEach(function(i){p.createMenuItem.call(e,i.language,t,"language",i.label||i.language,p.createBadge.call(e,i.language.toUpperCase()),i.language.toLowerCase()===e.captions.language.toLowerCase())}),p.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(p.toggleTab.call(this,"speed",i),i){var n=this.elements.settings.panes.speed.querySelector("ul");s.toggleHidden(this.elements.settings.tabs.speed,!1),s.toggleHidden(this.elements.settings.panes.speed,!1),s.emptyElement(n),this.options.speed.forEach(function(e){return p.createMenuItem.call(t,e,n,"speed",p.getLabel.call(t,"speed",e))}),p.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:s.is.htmlElement(t)&&"true"===t.getAttribute("aria-hidden");if(s.is.event(e)){var a=s.is.htmlElement(t)&&t.contains(e.target),l=e.target===this.elements.buttons.settings;if(a||!a&&!l&&n)return;l&&e.stopPropagation()}s.is.htmlElement(i)&&i.setAttribute("aria-expanded",n),s.is.htmlElement(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=p.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"),l.querySelectorAll("button:not(:disabled), input:not(:disabled), [tabindex]")[0].focus()}},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(p.createButton.call(this,"restart")),this.config.controls.includes("rewind")&&i.appendChild(p.createButton.call(this,"rewind")),this.config.controls.includes("play")&&i.appendChild(p.createButton.call(this,"play")),this.config.controls.includes("fast-forward")&&i.appendChild(p.createButton.call(this,"fast-forward")),this.config.controls.includes("progress")){var n=s.createElement("span",s.getAttributesFromSelector(this.config.selectors.progress)),l=p.createRange.call(this,"seek",{id:"plyr-seek-"+e.id});if(n.appendChild(l.label),n.appendChild(l.input),n.appendChild(p.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(p.createTime.call(this,"currentTime")),this.config.controls.includes("duration")&&i.appendChild(p.createTime.call(this,"duration")),this.config.controls.includes("mute")&&i.appendChild(p.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=p.createRange.call(this,"volume",s.extend(c,{id:"plyr-volume-"+e.id}));r.appendChild(u.label),r.appendChild(u.input),this.elements.volume=r,i.appendChild(r)}if(this.config.controls.includes("captions")&&i.appendChild(p.createButton.call(this,"captions")),this.config.controls.includes("settings")&&!s.is.empty(this.config.settings)){var d=s.createElement("div",{class:"plyr__menu"});d.appendChild(p.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),d.appendChild(h),i.appendChild(d),this.elements.settings.form=h,this.elements.settings.menu=d}return this.config.controls.includes("pip")&&a.pip&&i.appendChild(p.createButton.call(this,"pip")),this.config.controls.includes("airplay")&&a.airplay&&i.appendChild(p.createButton.call(this,"airplay")),this.config.controls.includes("fullscreen")&&i.appendChild(p.createButton.call(this,"fullscreen")),this.config.controls.includes("play-large")&&this.elements.container.appendChild(p.createButton.call(this,"play-large")),this.elements.controls=i,this.config.controls.includes("settings")&&this.config.settings.includes("speed")&&p.setSpeedMenu.call(this),i},inject:function(){var e=this;if(this.config.loadSprite){var t=p.getIconUrl.call(this);t.absolute&&s.loadSprite(t.url,"sprite-plyr")}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}):p.create.call(this,{id:this.id,seektime:this.config.seekTime,speed:this.speed,quality:this.quality,captions:p.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),t.setAttribute("role","tooltip")})}}},m={setup:function(){this.supported.ui&&(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)?(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)),s.toggleClass(this.elements.container,this.config.classNames.captions.enabled,!s.is.empty(m.getTracks.call(this))),s.is.empty(m.getTracks.call(this))||(m.setLanguage.call(this),m.show.call(this),this.config.controls.includes("settings")&&this.config.settings.includes("captions")&&p.setCaptionsMenu.call(this))):this.config.controls.includes("settings")&&this.config.settings.includes("captions")&&p.setCaptionsMenu.call(this))},setLanguage:function(){var e=this;if("video"===this.type){m.getTracks.call(this).forEach(function(t){s.on(t,"cuechange",function(t){return m.setCue.call(e,t)}),t.mode="hidden"});var t=m.getCurrentTrack.call(this);s.is.track(t)&&Array.from(t.activeCues||[]).length&&m.setCue.call(this,t)}else"vimeo"===this.type&&this.captions.active&&this.embed.enableTextTrack(this.language)},getTracks:function(){return s.is.nullOrUndefined(this.media)?[]:Array.from(this.media.textTracks||[]).filter(function(e){return["captions","subtitles"].includes(e.kind)})},getCurrentTrack:function(){var e=this;return m.getTracks.call(this).find(function(t){return t.language.toLowerCase()===e.language})},setCue:function(e){var t=s.is.event(e)?e.target:e,i=t.activeCues[0];t===m.getCurrentTrack.call(this)&&(s.is.cue(i)?m.setText.call(this,i.getCueAsHTML()):m.setText.call(this,null),s.dispatchEvent.call(this,this.media,"cuechange"))},setText: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.nullOrUndefined(e)?"":e;s.is.string(i)?t.textContent=i.trim():t.appendChild(i),this.elements.captions.appendChild(t)}else this.console.warn("No captions element to render to")},show:function(){if(s.is.htmlElement(this.elements.buttons.captions)){var e=r.get.call(this).captions;s.is.boolean(e)?this.captions.active=e:e=this.config.captions.active,e&&(s.toggleClass(this.elements.container,this.config.classNames.captions.active,!0),s.toggleState(this.elements.buttons.captions,!0))}}},g={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),g.setAspectRatio.call(this),this.media.setAttribute("id",s.generateId(this.type)),s.is.object(window.YT)?g.ready.call(this,t):(s.loadScript(this.config.urls.youtube.api),window.onYouTubeReadyCallbacks=window.onYouTubeReadyCallbacks||[],window.onYouTubeReadyCallbacks.push(function(){g.ready.call(e,t)}),window.onYouTubeIframeAPIReady=function(){window.onYouTubeReadyCallbacks.forEach(function(e){e()})})},getTitle:function(){var e=this;if(s.is.function(this.embed.getVideoData)){var t=this.embed.getVideoData().title;if(s.is.empty(t))return this.config.title=t,void d.setTitle.call(this)}var i=this.config.keys.google,n=s.parseYouTubeId(this.embedId);if(s.is.string(i)&&!s.is.empty(i)){var a="https://www.googleapis.com/youtube/v3/videos?id="+n+"&key="+i+"&fields=items(snippet(title))&part=snippet";fetch(a).then(function(e){return e.ok?e.json():null}).then(function(t){null!==t&&s.is.object(t)&&(e.config.title=t.items[0].snippet.title,d.setTitle.call(e))}).catch(function(){})}},setAspectRatio:function(){var e=this.config.ratio.split(":");this.elements.wrapper.style.paddingBottom=100/e[0]*e[1]+"%"},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,cc_load_policy:this.captions.active?1:0,cc_lang_pref:this.config.captions.language},events:{onError:function(e){if(!s.is.object(t.media.error)){var i={code:e.data};switch(e.data){case 2:i.message="The request contains an invalid parameter value. For example, this error occurs if you specify a video ID that does not have 11 characters, or if the video ID contains invalid characters, such as exclamation points or asterisks.";break;case 5:i.message="The requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred.";break;case 100:i.message="The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private.";break;case 101:case 150:i.message="The owner of the requested video does not allow it to be played in embedded players.";break;default:i.message="An unknown error occured"}t.media.error=i,s.dispatchEvent.call(t,t.media,"error")}},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;g.getTitle.call(t),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.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,"quality",{get:function(){return i.getPlaybackQuality()},set:function(e){s.dispatchEvent.call(t,t.media,"qualityrequested",!1,{quality:e}),i.setPlaybackQuality(e)}});var n=t.config.volume;Object.defineProperty(t.media,"volume",{get:function(){return n},set:function(e){n=e,i.setVolume(100*n),s.dispatchEvent.call(t,t.media,"volumechange")}});var a=t.config.muted;Object.defineProperty(t.media,"muted",{get:function(){return a},set:function(e){var n=s.is.boolean(e)?e:a;a=n,i[n?"mute":"unMute"](),s.dispatchEvent.call(t,t.media,"volumechange")}}),Object.defineProperty(t.media,"currentSrc",{get:function(){return i.getVideoUrl()}}),Object.defineProperty(t.media,"ended",{get:function(){return t.currentTime===t.duration}}),t.config.controls.includes("settings")&&t.config.settings.includes("speed")&&p.setSpeedMenu.call(t,i.getAvailablePlaybackRates()),t.supported.ui&&t.media.setAttribute("tabindex",-1),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,t.embedId=null,i)Object.keys(t.elements).length&&(t.elements.buttons&&t.elements.buttons.play&&Array.from(t.elements.buttons.play).forEach(function(e){return s.removeElement(e)}),s.removeElement(t.elements.captions),s.removeElement(t.elements.controls),s.removeElement(t.elements.wrapper),t.elements.buttons.play=null,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":d.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:"paused",get:function(){return this.media.paused}},{key:"playing",get:function(){return!this.paused&&!this.ended&&(!this.isHTML5||this.media.readyState>2)}},{key:"ended",get:function(){return this.media.ended}},{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.console.log("Seeking to "+this.currentTime+" seconds")},get:function(){return Number(this.media.currentTime)}},{key:"seeking",get:function(){return this.media.seeking}},{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;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.config.volume=t,this.media.volume=t,this.muted&&t>0&&(this.muted=!1)},get:function(){return this.media.volume}},{key:"muted",set:function(e){var t=e;s.is.boolean(t)||(t=r.get.call(this).muted),s.is.boolean(t)||(t=this.config.muted),this.config.muted=t,this.media.muted=t},get:function(){return this.media.muted}},{key:"hasAudio",get:function(){return!this.isHTML5||(this.media.mozHasAudio||Boolean(this.media.webkitAudioDecodedByteCount)||Boolean(this.media.audioTracks&&this.media.audioTracks.length))}},{key:"speed",set:function(e){var t=null;(t=s.is.number(e)?e:s.is.number(r.get.call(this).speed)?r.get.call(this).speed:this.config.speed.selected)<.1&&(t=.1),t>2&&(t=2),this.config.speed.options.includes(t)?(this.config.speed.selected=t,this.media.playbackRate=t):this.console.warn("Unsupported speed ("+t+")")},get:function(){return this.media.playbackRate}},{key:"quality",set:function(e){var t=null;t=s.is.string(e)?e:s.is.number(r.get.call(this).quality)?r.get.call(this).quality:this.config.quality.selected,this.options.quality.includes(t)?(this.config.quality.selected=t,this.media.quality=t):this.console.warn("Unsupported quality option ("+t+")")},get:function(){return this.media.quality}},{key:"loop",set:function(e){var t=s.is.boolean(e)?e:this.config.loop.active;this.config.loop.active=t,this.media.loop=t},get:function(){return this.media.loop}},{key:"source",set:function(e){v.change.call(this,e)},get:function(){return this.media.currentSrc}},{key:"poster",set:function(e){this.isHTML5&&"video"===this.type?s.is.string(e)&&this.media.setAttribute("poster",e):this.console.warn("Poster can only be set on HTML5 video")},get:function(){return this.isHTML5&&"video"===this.type?this.media.getAttribute("poster"):null}},{key:"autoplay",set:function(e){var t=s.is.boolean(e)?e:this.config.autoplay;this.config.autoplay=t},get:function(){return this.config.autoplay}},{key:"language",set:function(e){if(s.is.string(e)&&(this.toggleCaptions(!s.is.empty(e)),!s.is.empty(e))){var t=e.toLowerCase();this.language!==t&&(this.captions.language=t,m.setText.call(this,null),m.setLanguage.call(this),s.dispatchEvent.call(this,this.media,"languagechange"))}},get:function(){return this.captions.language}},{key:"pip",set:function(e){var t={pip:"picture-in-picture",inline:"inline"};if(a.pip){var i=s.is.boolean(e)?e:this.pip===t.inline;this.media.webkitSetPresentationMode(i?t.pip:t.inline)}},get:function(){return a.pip?this.media.webkitPresentationMode:null}}]),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,autopause:!1,seekTime:10,volume:1,muted:!1,duration:null,displayDuration:!0,invertTime:!0,toggleInvert:!0,ratio:"16:9",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",quality:{default:"default",options:["hd2160","hd1440","hd1080","hd720","large","medium","small","tiny","default"]},loop:{active:!1},speed:{selected: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",mute:"Mute",unmute:"Unmute",enableCaptions:"Enable captions",disableCaptions:"Disable captions",enterFullscreen:"Enter fullscreen",exitFullscreen:"Exit 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","languagechange","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",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",noTransition:"plyr--no-transition",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:"plyr__tab-focus"},keys:{google:null}},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.nullOrUndefined(e)&&Array.isArray(e)},nodeList:function(e){return this.instanceof(e,window.NodeList)},htmlElement:function(e){return this.instanceof(e,window.HTMLElement)},textNode:function(e){return this.getConstructor(e)===Text},event:function(e){return this.instanceof(e,window.Event)},cue:function(e){return this.instanceof(e,window.TextTrackCue)||this.instanceof(e,window.VTTCue)},track:function(e){return this.instanceof(e,window.TextTrack)||!this.nullOrUndefined(e)&&this.string(e.kind)},nullOrUndefined:function(e){return null===e||void 0===e},empty:function(e){return this.nullOrUndefined(e)||(this.string(e)||this.array(e)||this.nodeList(e))&&!e.length||this.object(e)&&!Object.keys(e).length},instanceof:function(e,t){return Boolean(e&&t&&e instanceof t)},getConstructor:function(e){return this.nullOrUndefined(e)?null:e.constructor}},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,t){if(!document.querySelectorAll('script[src="'+e+'"]').length){var i=document.createElement("script");i.src=e;var n=document.getElementsByTagName("script")[0];s.is.function(t)&&i.addEventListener("load",function(e){return t.call(null,e)},!1),n.parentNode.insertBefore(i,n)}},loadSprite:function(e,t){function i(e){this.innerHTML=e,document.body.insertBefore(this,document.body.childNodes[0])}if(s.is.string(e)){var n=s.is.string(t);if(!n||!document.querySelectorAll("#"+t).length){var l=document.createElement("div");if(s.toggleHidden(l,!0),n&&l.setAttribute("id",t),a.storage){var o=window.localStorage.getItem("cache-"+t);if(null!==o){var r=JSON.parse(o);return void i.call(l,r.content)}}fetch(e).then(function(e){return e.ok?e.text():null}).then(function(e){null!==e&&(a.storage&&window.localStorage.setItem("cache-"+t,JSON.stringify({content:e})),i.call(l,e))}).catch(function(){})}}},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)})},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},insertAfter:function(e,t){t.parentNode.insertBefore(e,t.nextSibling)},insertElement:function(e,t,i,n){t.appendChild(s.createElement(e,i,n))},removeElement:function(e){return s.is.htmlElement(e)&&s.is.htmlElement(e.parentNode)?(e.parentNode.removeChild(e),e):null},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)},toggleHidden:function(e,t){s.is.htmlElement(e)&&(t?e.setAttribute("hidden",""):e.removeAttribute("hidden"))},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.console.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,"button:not(:disabled), input:not(:disabled), [tabindex]"),i=t[0],n=t[t.length-1];s.on(this.elements.container,"keydown",function(t){if("Tab"===t.key&&9===t.keyCode&&e.fullscreen.active){var a=s.getFocusElement();a!==n||t.shiftKey?a===i&&t.shiftKey&&(n.focus(),t.preventDefault()):(i.focus(),t.preventDefault())}},!1)},toggleListener:function(e,t,i,n,l,o){if(!s.is.nullOrUndefined(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(s.is.htmlElement(e)){var i="true"===e.getAttribute("aria-pressed"),n=s.is.boolean(t)?t:!i;e.setAttribute("aria-pressed",n)}},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)&&(i?(e.decreaseVolume(.02),n=-1):(e.increaseVolume(.02),n=1)),(t.deltaY>0||t.deltaX<0)&&(i?(e.increaseVolume(.02),n=1):(e.decreaseVolume(.02),n=-1)),(1===n&&e.media.volume<1||-1===n&&e.media.volume>0)&&t.preventDefault()})},!1)}},d={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(){arguments.length>0&&void 0!==arguments[0]&&arguments[0]&&this.isHTML5?this.media.setAttribute("controls",""):this.media.removeAttribute("controls")},build:function(){if(u.media.call(this),!this.supported.ui)return this.console.warn("Basic support only for "+this.type),s.removeElement.call(this,"controls"),s.removeElement.call(this,"buttons.play"),void d.toggleNativeControls.call(this,!0);s.is.htmlElement(this.elements.controls)||(p.inject.call(this),u.controls.call(this)),s.is.htmlElement(this.elements.controls)&&(d.toggleNativeControls.call(this),o.setup.call(this),m.setup.call(this),this.volume=null,this.muted=null,this.speed=null,this.loop=null,this.options.quality=[],d.timeUpdate.call(this),d.checkPlaying.call(this),this.ready=!0,s.dispatchEvent.call(this,this.media,"ready"),d.setTitle.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)),s.is.nodeList(this.elements.buttons.play)&&Array.from(this.elements.buttons.play).forEach(function(t){t.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(){var e=this;s.toggleClass(this.elements.container,this.config.classNames.playing,this.playing),s.toggleClass(this.elements.container,this.config.classNames.stopped,this.paused),s.is.nodeList(this.elements.buttons.play)&&Array.from(this.elements.buttons.play).forEach(function(t){return s.toggleState(t,e.playing)}),this.toggleControls(!this.playing)},checkLoading:function(e){var t=this;this.loading=["stalled","waiting"].includes(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)},updateVolume:function(){this.supported.ui&&(s.is.htmlElement(this.elements.inputs.volume)&&d.setRange.call(this,this.elements.inputs.volume,this.muted?0:this.volume),s.is.htmlElement(this.elements.buttons.mute)&&s.toggleState(this.elements.buttons.mute,this.muted||0===this.volume))},setRange:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;s.is.htmlElement(e)&&(e.value=t,p.updateRangeFill.call(this,e))},setProgress:function(e,t){var i=s.is.number(t)?t:0,n=s.is.htmlElement(e)?e:this.elements.display.buffer;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&&s.is.event(e)){var i=0;if(e)switch(e.type){case"timeupdate":case"seeking":i=s.getPercentage(this.currentTime,this.duration),"timeupdate"===e.type&&d.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}(),d.setProgress.call(this,this.elements.display.buffer,i)}}},updateTimeDisplay:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(s.is.htmlElement(e)&&s.is.number(t)){var n=function(e){return("0"+e).slice(-2)},a=function(e){return parseInt(e/60/60%60,10)},l=a(t),o=function(e){return parseInt(e/60%60,10)}(t),r=function(e){return parseInt(e%60,10)}(t);a(this.duration)>0?l+=":":l="",e.textContent=(i?"-":"")+l+n(o)+":"+n(r)}},timeUpdate:function(e){var t=!s.is.htmlElement(this.elements.display.duration)&&this.config.invertTime;d.updateTimeDisplay.call(this,this.elements.display.currentTime,t?this.duration-this.currentTime:this.currentTime,t),e&&"timeupdate"===e.type&&this.media.seeking||d.updateProgress.call(this,e)},durationUpdate:function(){this.supported.ui&&(!s.is.htmlElement(this.elements.display.duration)&&this.config.displayDuration&&this.paused&&d.updateTimeDisplay.call(this,this.elements.display.currentTime,this.duration),s.is.htmlElement(this.elements.display.duration)&&d.updateTimeDisplay.call(this,this.elements.display.duration,this.duration),p.updateSeekTooltip.call(this))}},h=s.getBrowser(),p={updateRangeFill:function(e){if(h.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")||h.isIE&&!window.svg4everybody}},createIcon:function(e,t){var i=p.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"),o=n+"-"+e;return"href"in l?l.setAttributeNS("http://www.w3.org/1999/xlink","href",o):l.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",o),a.appendChild(l),a},createLabel:function(e,t){var i=this.config.i18n[e],n=Object.assign({},t);switch(e){case"pip":i="PIP";break;case"airplay":i="AirPlay"}return"class"in n?n.class+=" "+this.config.classNames.hidden:n.class=this.config.classNames.hidden,s.createElement("span",n,i)},createBadge:function(e){if(s.is.empty(e))return null;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=!1,o=void 0,r=void 0,c=void 0,u=void 0;switch("type"in n||(n.type="button"),"class"in n?n.class.includes(this.config.classNames.control)&&(n.class+=" "+this.config.classNames.control):n.class=this.config.classNames.control,a){case"play":l=!0,o="play",c="pause",r="play",u="pause";break;case"mute":l=!0,o="mute",c="unmute",r="volume",u="muted";break;case"captions":l=!0,o="enableCaptions",c="disableCaptions",r="captions-off",u="captions-on";break;case"fullscreen":l=!0,o="enterFullscreen",c="exitFullscreen",r="enter-fullscreen",u="exit-fullscreen";break;case"play-large":n.class+=" "+this.config.classNames.control+"--overlaid",a="play",o="play",r="play";break;default:o=a,r=a}return l?(i.appendChild(p.createIcon.call(this,u,{class:"icon--pressed"})),i.appendChild(p.createIcon.call(this,r,{class:"icon--not-pressed"})),i.appendChild(p.createLabel.call(this,c,{class:"label--pressed"})),i.appendChild(p.createLabel.call(this,o,{class:"label--not-pressed"})),n["aria-pressed"]=!1,n["aria-label"]=this.config.i18n[o]):(i.appendChild(p.createIcon.call(this,r)),i.appendChild(p.createLabel.call(this,o))),s.extend(n,s.getAttributesFromSelector(this.config.selectors.buttons[a],n)),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,p.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},createMenuItem:function(e,t,i,n){var a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:null,l=arguments.length>5&&void 0!==arguments[5]&&arguments[5],o=s.createElement("li"),r=s.createElement("label",{class:this.config.classNames.control}),c=s.createElement("input",s.extend(s.getAttributesFromSelector(this.config.selectors.inputs[i]),{type:"radio",name:"plyr-"+i,value:e,checked:l,class:"plyr__sr-only"})),u=s.createElement("span",{"aria-hidden":!0});r.appendChild(c),r.appendChild(u),r.insertAdjacentHTML("beforeend",n),s.is.htmlElement(a)&&r.appendChild(a),o.appendChild(r),t.appendChild(o)},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),d.updateTimeDisplay.call(this,this.elements.display.seekTooltip,this.duration/100*t),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.toggleHidden(i,!t),s.toggleHidden(n,!t)},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(p.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?p.createBadge.call(t,i):null};this.options.quality.forEach(function(e){return p.createMenuItem.call(t,e,i,"quality",p.getLabel.call(t,"quality",e),a(e))}),p.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 p.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.console.warn("Unsupported value of '"+n+"' for "+e);if(!this.config[e].options.includes(n))return void this.console.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=p.getLabel.call(this,e,n))},getLanguage:function(){if(!this.supported.ui)return null;if(!a.textTracks||!m.getTracks.call(this).length)return this.config.i18n.none;if(this.captions.enabled){var e=m.getCurrentTrack.call(this);if(s.is.track(e))return e.label}return this.config.i18n.disabled},setCaptionsMenu:function(){var e=this,t=this.elements.settings.panes.captions.querySelector("ul"),i=m.getTracks.call(this).length;if(p.toggleTab.call(this,"captions",i),s.emptyElement(t),i){var n=m.getTracks.call(this).map(function(e){return{language:e.language,label:s.is.empty(e.label)?e.language.toUpperCase():e.label}});n.unshift({language:"",label:this.config.i18n.none}),n.forEach(function(i){p.createMenuItem.call(e,i.language,t,"language",i.label||i.language,p.createBadge.call(e,i.language.toUpperCase()),i.language.toLowerCase()===e.captions.language.toLowerCase())}),p.updateSetting.call(this,"captions",t)}},setSpeedMenu:function(){var e=this;s.is.object(this.options.speed)&&Object.keys(this.options.speed).length||(this.options.speed=[.5,.75,1,1.25,1.5,1.75,2]),this.options.speed=this.options.speed.filter(function(t){return e.config.speed.options.includes(t)});var t=!s.is.empty(this.options.speed);if(p.toggleTab.call(this,"speed",t),t){var i=this.elements.settings.panes.speed.querySelector("ul");s.toggleHidden(this.elements.settings.tabs.speed,!1),s.toggleHidden(this.elements.settings.panes.speed,!1),s.emptyElement(i),this.options.speed.forEach(function(t){return p.createMenuItem.call(e,t,i,"speed",p.getLabel.call(e,"speed",t))}),p.updateSetting.call(this,"speed",i)}},toggleMenu:function(e){var t=this.elements.settings.form,i=this.elements.buttons.settings,n=s.is.boolean(e)?e:s.is.htmlElement(t)&&"true"===t.getAttribute("aria-hidden");if(s.is.event(e)){var a=s.is.htmlElement(t)&&t.contains(e.target),l=e.target===this.elements.buttons.settings;if(a||!a&&!l&&n)return;l&&e.stopPropagation()}s.is.htmlElement(i)&&i.setAttribute("aria-expanded",n),s.is.htmlElement(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=p.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"),l.querySelectorAll("button:not(:disabled), input:not(:disabled), [tabindex]")[0].focus()}},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(p.createButton.call(this,"restart")),this.config.controls.includes("rewind")&&i.appendChild(p.createButton.call(this,"rewind")),this.config.controls.includes("play")&&i.appendChild(p.createButton.call(this,"play")),this.config.controls.includes("fast-forward")&&i.appendChild(p.createButton.call(this,"fast-forward")),this.config.controls.includes("progress")){var n=s.createElement("span",s.getAttributesFromSelector(this.config.selectors.progress)),l=p.createRange.call(this,"seek",{id:"plyr-seek-"+e.id});if(n.appendChild(l.label),n.appendChild(l.input),n.appendChild(p.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(p.createTime.call(this,"currentTime")),this.config.controls.includes("duration")&&i.appendChild(p.createTime.call(this,"duration")),this.config.controls.includes("mute")&&i.appendChild(p.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=p.createRange.call(this,"volume",s.extend(c,{id:"plyr-volume-"+e.id}));r.appendChild(u.label),r.appendChild(u.input),this.elements.volume=r,i.appendChild(r)}if(this.config.controls.includes("captions")&&i.appendChild(p.createButton.call(this,"captions")),this.config.controls.includes("settings")&&!s.is.empty(this.config.settings)){var d=s.createElement("div",{class:"plyr__menu"});d.appendChild(p.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),d.appendChild(h),i.appendChild(d),this.elements.settings.form=h,this.elements.settings.menu=d}return this.config.controls.includes("pip")&&a.pip&&i.appendChild(p.createButton.call(this,"pip")),this.config.controls.includes("airplay")&&a.airplay&&i.appendChild(p.createButton.call(this,"airplay")),this.config.controls.includes("fullscreen")&&i.appendChild(p.createButton.call(this,"fullscreen")),this.config.controls.includes("play-large")&&this.elements.container.appendChild(p.createButton.call(this,"play-large")),this.elements.controls=i,this.config.controls.includes("settings")&&this.config.settings.includes("speed")&&p.setSpeedMenu.call(this),i},inject:function(){var e=this;if(this.config.loadSprite){var t=p.getIconUrl.call(this);t.absolute&&s.loadSprite(t.url,"sprite-plyr")}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}):p.create.call(this,{id:this.id,seektime:this.config.seekTime,speed:this.speed,quality:this.quality,captions:p.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),t.setAttribute("role","tooltip")})}}},m={setup:function(){this.supported.ui&&(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)?(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)),s.toggleClass(this.elements.container,this.config.classNames.captions.enabled,!s.is.empty(m.getTracks.call(this))),s.is.empty(m.getTracks.call(this))||(m.setLanguage.call(this),m.show.call(this),this.config.controls.includes("settings")&&this.config.settings.includes("captions")&&p.setCaptionsMenu.call(this))):this.config.controls.includes("settings")&&this.config.settings.includes("captions")&&p.setCaptionsMenu.call(this))},setLanguage:function(){var e=this;if("video"===this.type){m.getTracks.call(this).forEach(function(t){s.on(t,"cuechange",function(t){return m.setCue.call(e,t)}),t.mode="hidden"});var t=m.getCurrentTrack.call(this);s.is.track(t)&&Array.from(t.activeCues||[]).length&&m.setCue.call(this,t)}else"vimeo"===this.type&&this.captions.active&&this.embed.enableTextTrack(this.language)},getTracks:function(){return s.is.nullOrUndefined(this.media)?[]:Array.from(this.media.textTracks||[]).filter(function(e){return["captions","subtitles"].includes(e.kind)})},getCurrentTrack:function(){var e=this;return m.getTracks.call(this).find(function(t){return t.language.toLowerCase()===e.language})},setCue:function(e){var t=s.is.event(e)?e.target:e,i=t.activeCues[0];t===m.getCurrentTrack.call(this)&&(s.is.cue(i)?m.setText.call(this,i.getCueAsHTML()):m.setText.call(this,null),s.dispatchEvent.call(this,this.media,"cuechange"))},setText: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.nullOrUndefined(e)?"":e;s.is.string(i)?t.textContent=i.trim():t.appendChild(i),this.elements.captions.appendChild(t)}else this.console.warn("No captions element to render to")},show:function(){if(s.is.htmlElement(this.elements.buttons.captions)){var e=r.get.call(this).captions;s.is.boolean(e)?this.captions.active=e:e=this.config.captions.active,e&&(s.toggleClass(this.elements.container,this.config.classNames.captions.active,!0),s.toggleState(this.elements.buttons.captions,!0))}}},g={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),g.setAspectRatio.call(this),this.media.setAttribute("id",s.generateId(this.type)),s.is.object(window.YT)?g.ready.call(this,t):(s.loadScript(this.config.urls.youtube.api),window.onYouTubeReadyCallbacks=window.onYouTubeReadyCallbacks||[],window.onYouTubeReadyCallbacks.push(function(){g.ready.call(e,t)}),window.onYouTubeIframeAPIReady=function(){window.onYouTubeReadyCallbacks.forEach(function(e){e()})})},getTitle:function(){var e=this;if(s.is.function(this.embed.getVideoData)){var t=this.embed.getVideoData().title;if(s.is.empty(t))return this.config.title=t,void d.setTitle.call(this)}var i=this.config.keys.google,n=s.parseYouTubeId(this.embedId);if(s.is.string(i)&&!s.is.empty(i)){var a="https://www.googleapis.com/youtube/v3/videos?id="+n+"&key="+i+"&fields=items(snippet(title))&part=snippet";fetch(a).then(function(e){return e.ok?e.json():null}).then(function(t){null!==t&&s.is.object(t)&&(e.config.title=t.items[0].snippet.title,d.setTitle.call(e))}).catch(function(){})}},setAspectRatio:function(){var e=this.config.ratio.split(":");this.elements.wrapper.style.paddingBottom=100/e[0]*e[1]+"%"},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,cc_load_policy:this.captions.active?1:0,cc_lang_pref:this.config.captions.language},events:{onError:function(e){if(!s.is.object(t.media.error)){var i={code:e.data};switch(e.data){case 2:i.message="The request contains an invalid parameter value. For example, this error occurs if you specify a video ID that does not have 11 characters, or if the video ID contains invalid characters, such as exclamation points or asterisks.";break;case 5:i.message="The requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred.";break;case 100:i.message="The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private.";break;case 101:case 150:i.message="The owner of the requested video does not allow it to be played in embedded players.";break;default:i.message="An unknown error occured"}t.media.error=i,s.dispatchEvent.call(t,t.media,"error")}},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;g.getTitle.call(t),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.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,"quality",{get:function(){return i.getPlaybackQuality()},set:function(e){s.dispatchEvent.call(t,t.media,"qualityrequested",!1,{quality:e}),i.setPlaybackQuality(e)}});var n=t.config.volume;Object.defineProperty(t.media,"volume",{get:function(){return n},set:function(e){n=e,i.setVolume(100*n),s.dispatchEvent.call(t,t.media,"volumechange")}});var a=t.config.muted;Object.defineProperty(t.media,"muted",{get:function(){return a},set:function(e){var n=s.is.boolean(e)?e:a;a=n,i[n?"mute":"unMute"](),s.dispatchEvent.call(t,t.media,"volumechange")}}),Object.defineProperty(t.media,"currentSrc",{get:function(){return i.getVideoUrl()}}),Object.defineProperty(t.media,"ended",{get:function(){return t.currentTime===t.duration}}),t.options.speed=i.getAvailablePlaybackRates(),t.supported.ui&&t.media.setAttribute("tabindex",-1),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,t.embedId=null,i)Object.keys(t.elements).length&&(t.elements.buttons&&t.elements.buttons.play&&Array.from(t.elements.buttons.play).forEach(function(e){return s.removeElement(e)}),s.removeElement(t.elements.captions),s.removeElement(t.elements.controls),s.removeElement(t.elements.wrapper),t.elements.buttons.play=null,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":d.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:"paused",get:function(){return this.media.paused}},{key:"playing",get:function(){return!this.paused&&!this.ended&&(!this.isHTML5||this.media.readyState>2)}},{key:"ended",get:function(){return this.media.ended}},{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.console.log("Seeking to "+this.currentTime+" seconds")},get:function(){return Number(this.media.currentTime)}},{key:"seeking",get:function(){return this.media.seeking}},{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;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.config.volume=t,this.media.volume=t,this.muted&&t>0&&(this.muted=!1)},get:function(){return this.media.volume}},{key:"muted",set:function(e){var t=e;s.is.boolean(t)||(t=r.get.call(this).muted),s.is.boolean(t)||(t=this.config.muted),this.config.muted=t,this.media.muted=t},get:function(){return this.media.muted}},{key:"hasAudio",get:function(){return!this.isHTML5||(this.media.mozHasAudio||Boolean(this.media.webkitAudioDecodedByteCount)||Boolean(this.media.audioTracks&&this.media.audioTracks.length))}},{key:"speed",set:function(e){var t=null;(t=s.is.number(e)?e:s.is.number(r.get.call(this).speed)?r.get.call(this).speed:this.config.speed.selected)<.1&&(t=.1),t>2&&(t=2),this.config.speed.options.includes(t)?(this.config.speed.selected=t,this.media.playbackRate=t):this.console.warn("Unsupported speed ("+t+")")},get:function(){return this.media.playbackRate}},{key:"quality",set:function(e){var t=null;t=s.is.string(e)?e:s.is.number(r.get.call(this).quality)?r.get.call(this).quality:this.config.quality.selected,this.options.quality.includes(t)?(this.config.quality.selected=t,this.media.quality=t):this.console.warn("Unsupported quality option ("+t+")")},get:function(){return this.media.quality}},{key:"loop",set:function(e){var t=s.is.boolean(e)?e:this.config.loop.active;this.config.loop.active=t,this.media.loop=t},get:function(){return this.media.loop}},{key:"source",set:function(e){v.change.call(this,e)},get:function(){return this.media.currentSrc}},{key:"poster",set:function(e){this.isHTML5&&"video"===this.type?s.is.string(e)&&this.media.setAttribute("poster",e):this.console.warn("Poster can only be set on HTML5 video")},get:function(){return this.isHTML5&&"video"===this.type?this.media.getAttribute("poster"):null}},{key:"autoplay",set:function(e){var t=s.is.boolean(e)?e:this.config.autoplay;this.config.autoplay=t},get:function(){return this.config.autoplay}},{key:"language",set:function(e){if(s.is.string(e)&&(this.toggleCaptions(!s.is.empty(e)),!s.is.empty(e))){var t=e.toLowerCase();this.language!==t&&(this.captions.language=t,m.setText.call(this,null),m.setLanguage.call(this),s.dispatchEvent.call(this,this.media,"languagechange"))}},get:function(){return this.captions.language}},{key:"pip",set:function(e){var t={pip:"picture-in-picture",inline:"inline"};if(a.pip){var i=s.is.boolean(e)?e:this.pip===t.inline;this.media.webkitSetPresentationMode(i?t.pip:t.inline)}},get:function(){return a.pip?this.media.webkitPresentationMode:null}}]),e}()});
//# sourceMappingURL=plyr.js.map
diff --git a/dist/plyr.js.map b/dist/plyr.js.map
index 6f38cad6..81b92cee 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 // Only allow one media playing at once (vimeo only)\n autopause: 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 // Pass a custom duration\n duration: null,\n\n // Display the media duration on load in the current time position\n // If you have opted to display both duration and currentTime, this is ignored\n displayDuration: true,\n\n // Invert the current time to be a countdown\n invertTime: true,\n\n // Clicking the currentTime inverts it's value to show time left rather than elapsed\n toggleInvert: true,\n\n // Aspect ratio (for embeds)\n ratio: '16:9',\n\n // Click video container to play/pause\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 // 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 selected: 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 mute: 'Mute',\n unmute: 'Unmute',\n enableCaptions: 'Enable captions',\n disableCaptions: 'Disable captions',\n enterFullscreen: 'Enter fullscreen',\n exitFullscreen: 'Exit 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 'languagechange',\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 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 noTransition: 'plyr--no-transition',\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: 'plyr__tab-focus',\n },\n\n // API keys\n keys: {\n google: null,\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.nullOrUndefined(input) && Array.isArray(input);\n },\n nodeList(input) {\n return this.instanceof(input, window.NodeList);\n },\n htmlElement(input) {\n return this.instanceof(input, window.HTMLElement);\n },\n textNode(input) {\n return this.getConstructor(input) === Text;\n },\n event(input) {\n return this.instanceof(input, window.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.instanceof(input, window.TextTrack) || (!this.nullOrUndefined(input) && this.string(input.kind))\n );\n },\n nullOrUndefined(input) {\n return input === null || typeof input === 'undefined';\n },\n empty(input) {\n return (\n this.nullOrUndefined(input) ||\n ((this.string(input) || this.array(input) || this.nodeList(input)) && !input.length) ||\n (this.object(input) && !Object.keys(input).length)\n );\n },\n instanceof(input, constructor) {\n return Boolean(input && constructor && input instanceof constructor);\n },\n getConstructor(input) {\n return !this.nullOrUndefined(input) ? input.constructor : null;\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, callback) {\n // Check script is not already referenced\n if (document.querySelectorAll(`script[src=\"${url}\"]`).length) {\n return;\n }\n\n // Build the element\n const element = document.createElement('script');\n element.src = url;\n\n // Find first script\n const first = document.getElementsByTagName('script')[0];\n\n // Bind callback\n if (utils.is.function(callback)) {\n element.addEventListener('load', event => callback.call(null, event), false);\n }\n\n // Inject\n first.parentNode.insertBefore(element, first);\n },\n\n // Load an external SVG sprite\n loadSprite(url, id) {\n if (!utils.is.string(url)) {\n return;\n }\n\n const prefix = 'cache-';\n const hasId = utils.is.string(id);\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 utils.toggleHidden(container, true);\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 return;\n }\n }\n\n // Get the sprite\n fetch(url)\n .then(response => (response.ok ? response.text() : null))\n .then(text => {\n if (text === null) {\n return;\n }\n\n if (support.storage) {\n window.localStorage.setItem(\n prefix + id,\n JSON.stringify({\n content: text,\n })\n );\n }\n\n updateSprite.call(container, text);\n })\n .catch(() => {});\n }\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 // 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 // Inaert an element after another\n insertAfter(element, target) {\n target.parentNode.insertBefore(element, target.nextSibling);\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 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 // 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 // Toggle hidden attribute on an element\n toggleHidden(element, toggle) {\n if (!utils.is.htmlElement(element)) {\n return;\n }\n\n if (toggle) {\n element.setAttribute('hidden', '');\n } else {\n element.removeAttribute('hidden');\n }\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.console.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 focusable = utils.getElements.call(this, 'button:not(:disabled), input:not(:disabled), [tabindex]');\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\n\n utils.on(\n this.elements.container,\n 'keydown',\n event => {\n // Bail if not tab key or not fullscreen\n if (event.key !== 'Tab' || event.keyCode !== 9 || !this.fullscreen.active) {\n return;\n }\n\n // Get the current focused element\n const focused = utils.getFocusElement();\n\n if (focused === last && !event.shiftKey) {\n // Move focus to first element that can be tabbed if Shift isn't used\n first.focus();\n event.preventDefault();\n } else if (focused === first && event.shiftKey) {\n // Move focus to last element that can be tabbed if Shift is used\n last.focus();\n event.preventDefault();\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 (utils.is.nullOrUndefined(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, detail) {\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({}, detail, {\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(element, input) {\n // Bail if no target\n if (!utils.is.htmlElement(element)) {\n return;\n }\n\n // Get state\n const pressed = element.getAttribute('aria-pressed') === 'true';\n const state = utils.is.boolean(input) ? input : !pressed;\n\n // Set the attribute on target\n element.setAttribute('aria-pressed', state);\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 // Get aspect ratio for dimensions\n getAspectRatio(width, height) {\n const getRatio = (w, h) => (h === 0 ? w : getRatio(h, w % h));\n const ratio = getRatio(width, height);\n return `${width / ratio}:${height / ratio}`;\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.nullOrUndefined(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.nullOrUndefined(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.console.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.console.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\n// Sniff out the browser\nconst browser = utils.getBrowser();\n\nconst listeners = {\n // Global listeners\n global() {\n let last = null;\n\n // Get the key code for an event\n const getKeyCode = event => (event.keyCode ? event.keyCode : event.which);\n\n // Handle key press\n const handleKey = event => {\n const code = getKeyCode(event);\n const pressed = event.type === 'keydown';\n const repeat = pressed && code === last;\n\n // Bail if a modifier key is set\n if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {\n return;\n }\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 const 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\n // Check focused element\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 const focused = utils.getFocusElement();\n if (utils.is.htmlElement(focused) && utils.matches(focused, this.config.selectors.editable)) {\n return;\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 (!repeat) {\n seekByKey();\n }\n break;\n\n case 32:\n case 75:\n // Space and K key\n if (!repeat) {\n this.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 (!repeat) {\n this.muted = !this.muted;\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 (!repeat) {\n this.toggleCaptions();\n }\n break;\n\n case 76:\n // L key\n this.loop = !this.loop;\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.global) {\n utils.on(window, 'keydown keyup', handleKey, false);\n } else if (this.config.keyboard.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 // 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 touchmove enterfullscreen exitfullscreen',\n event => {\n this.toggleControls(event);\n }\n );\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 // 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.durationUpdate.call(this, event));\n\n // Check for audio tracks on load\n // We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point\n utils.on(this.media, 'loadeddata', () => {\n utils.toggleHidden(this.elements.volume, !this.hasAudio);\n utils.toggleHidden(this.elements.buttons.mute, !this.hasAudio);\n });\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, 'playing play pause ended', event => ui.checkPlaying.call(this, event));\n\n // Loading\n utils.on(this.media, 'stalled waiting canplay seeked playing', 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 (!utils.is.htmlElement(wrapper)) {\n return;\n }\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.paused) {\n return;\n }\n\n if (this.paused) {\n this.play();\n } else if (this.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 to storage\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 to storage\n storage.set.call(this, { quality: this.quality });\n });\n\n // Caption language change\n utils.on(this.media, 'languagechange', () => {\n // Save to storage\n storage.set.call(this, { language: this.language });\n });\n\n // Volume change\n utils.on(this.media, 'volumechange', () => {\n // Save to storage\n storage.set.call(this, { volume: this.volume, muted: this.muted });\n });\n\n // Captions toggle\n utils.on(this.media, 'captionsenabled captionsdisabled', () => {\n // Update UI\n controls.updateSetting.call(this, 'captions');\n\n // Save to storage\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 let detail = {};\n\n // Get error details from media\n if (event.type === 'error') {\n detail = this.media.error;\n }\n\n utils.dispatchEvent.call(this, this.elements.container, event.type, true, detail);\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 = browser.isIE ? 'change' : 'input';\n\n // Trigger custom and default handlers\n const proxy = (event, handlerKey, defaultHandler) => {\n const customHandler = this.config.listeners[handlerKey];\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/pause toggle\n utils.on(this.elements.buttons.play, 'click', event =>\n proxy(event, 'play', () => {\n this.togglePlay();\n })\n );\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 toggle\n utils.on(this.elements.buttons.mute, 'click', event =>\n proxy(event, 'mute', () => {\n this.muted = !this.muted;\n })\n );\n\n // Captions toggle\n utils.on(this.elements.buttons.captions, 'click', event =>\n proxy(event, 'captions', () => {\n this.toggleCaptions();\n })\n );\n\n // Fullscreen toggle\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.pip = 'toggle';\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 event.stopPropagation();\n\n // Settings menu items - use event delegation as items are added/removed\n if (utils.matches(event.target, this.config.selectors.inputs.language)) {\n proxy(event, 'language', () => {\n this.language = event.target.value;\n });\n } else if (utils.matches(event.target, this.config.selectors.inputs.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 proxy(event, 'speed', () => {\n this.speed = parseFloat(event.target.value);\n });\n } else {\n controls.showTab.call(this, event);\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 // Current time invert\n // Only if one time element is used for both currentTime and duration\n if (this.config.toggleInvert && !utils.is.htmlElement(this.elements.display.duration)) {\n utils.on(this.elements.display.currentTime, 'click', () => {\n // Do nothing if we're at the start\n if (this.currentTime === 0) {\n return;\n }\n\n this.config.invertTime = !this.config.invertTime;\n ui.timeUpdate.call(this);\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 (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 // 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 utils.on(this.elements.controls, 'focusin focusout', event => {\n this.toggleControls(event);\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};\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';\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 = false) {\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.console.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 // Reset volume\n this.volume = null;\n\n // Reset mute state\n this.muted = null;\n\n // Reset speed\n this.speed = null;\n\n // Reset loop state\n this.loop = null;\n\n // Reset quality options\n this.options.quality = [];\n\n // Reset time display\n ui.timeUpdate.call(this);\n\n // Update the UI\n ui.checkPlaying.call(this);\n\n // Ready for API calls\n this.ready = true;\n\n // Ready event at end of execution stack\n utils.dispatchEvent.call(this, this.media, 'ready');\n\n // Set the title\n ui.setTitle.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 (utils.is.nodeList(this.elements.buttons.play)) {\n Array.from(this.elements.buttons.play).forEach(button => {\n button.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 // Class hooks\n utils.toggleClass(this.elements.container, this.config.classNames.playing, this.playing);\n utils.toggleClass(this.elements.container, this.config.classNames.stopped, this.paused);\n\n // Set aria state\n if (utils.is.nodeList(this.elements.buttons.play)) {\n Array.from(this.elements.buttons.play).forEach(button => utils.toggleState(button, this.playing));\n }\n\n // Toggle controls\n this.toggleControls(!this.playing);\n },\n\n // Check if media is loading\n checkLoading(event) {\n this.loading = ['stalled', 'waiting'].includes(event.type);\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 volume UI and storage\n updateVolume() {\n if (!this.supported.ui) {\n return;\n }\n\n // Update range\n if (utils.is.htmlElement(this.elements.inputs.volume)) {\n ui.setRange.call(this, this.elements.inputs.volume, this.muted ? 0 : this.volume);\n }\n\n // Update mute state\n if (utils.is.htmlElement(this.elements.buttons.mute)) {\n utils.toggleState(this.elements.buttons.mute, this.muted || this.volume === 0);\n }\n },\n\n // Update seek value and lower fill\n setRange(target, value = 0) {\n if (!utils.is.htmlElement(target)) {\n return;\n }\n\n // eslint-disable-next-line\n target.value = value;\n\n // Webkit range fill\n controls.updateRangeFill.call(this, target);\n },\n\n // Set
` tag and then call `plyr.setup()`. More info on `setup()` can be found under [initialising](#initialising).
+Include the `plyr.js` script before the closing `` tag and then call `plyr.setup()`. More info on `setup()` can
+be found under [initialising](#initialising).
```html
```
-If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript, you can use the following:
+If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript, you can use the
+following:
```html
@@ -124,7 +134,8 @@ Include the `plyr.css` stylsheet into your `
`
```
-If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
+If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the
+following:
```html
@@ -132,40 +143,50 @@ If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for t
### SVG Sprite
-The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/2.0.13/plyr.svg`.
+The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see
+the [options](#options) below. For reference, the CDN hosted SVG sprite can be found at
+`https://cdn.plyr.io/2.0.13/plyr.svg`.
## Advanced
### LESS & SASS/SCSS
-You can use `plyr.less` or `plyr.scss` file included in `/src` as part of your build and change variables to suit your design. The LESS and SASS require you to use the [autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) plugin (you be should already!) as all declarations use the W3C definitions.
+You can use `plyr.less` or `plyr.scss` file included in `/src` as part of your build and change variables to suit your
+design. The LESS and SASS require you to use the [autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) plugin
+(you be should already!) as all declarations use the W3C definitions.
-The HTML markup uses the BEM methodology with `plyr` as the block, e.g. `.plyr__controls`. You can change the class hooks in the options to match any custom CSS you write. Check out the JavaScript source for more on this.
+The HTML markup uses the BEM methodology with `plyr` as the block, e.g. `.plyr__controls`. You can change the class
+hooks in the options to match any custom CSS you write. Check out the JavaScript source for more on this.
### SVG
-The icons used in the Plyr controls are loaded in an SVG sprite. The sprite is automatically loaded from our CDN by default. If you already have an icon build system in place, you can include the source plyr icons (see `/src/sprite` for source icons).
+The icons used in the Plyr controls are loaded in an SVG sprite. The sprite is automatically loaded from our CDN by
+default. If you already have an icon build system in place, you can include the source plyr icons (see `/src/sprite` for
+source icons).
#### Using the `iconUrl` option
-You can however specify your own `iconUrl` option and Plyr will determine if the url is absolute and requires loading by AJAX/CORS due to current browser limitations or if it's a relative path, just use the path directly.
+You can however specify your own `iconUrl` option and Plyr will determine if the url is absolute and requires loading by
+AJAX/CORS due to current browser limitations or if it's a relative path, just use the path directly.
If you're using the `` tag on your site, you may need to use something like this:
[svgfixer.js](https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2)
More info on SVG sprites here:
-[http://css-tricks.com/svg-sprites-use-better-icon-fonts/](http://css-tricks.com/svg-sprites-use-better-icon-fonts/)
-and the AJAX technique here:
-[http://css-tricks.com/ajaxing-svg-sprite/](http://css-tricks.com/ajaxing-svg-sprite/)
+[http://css-tricks.com/svg-sprites-use-better-icon-fonts/](http://css-tricks.com/svg-sprites-use-better-icon-fonts/) and
+the AJAX technique here: [http://css-tricks.com/ajaxing-svg-sprite/](http://css-tricks.com/ajaxing-svg-sprite/)
### Cross Origin (CORS)
-You'll notice the `crossorigin` attribute on the example `