@theoplayer/web-ui 1.9.5 → 1.10.0

package/dist/THEOplayerUI.js

@@ -1,5 +1,5 @@
 !/*!
- * THEOplayer Open Video UI for Web (v1.9.5)
+ * THEOplayer Open Video UI for Web (v1.10.0)
  * License: MIT
  */function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("theoplayer/chromeless")):"function"==typeof define&&define.amd?define(["exports","theoplayer/chromeless"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).THEOplayerUI={},e.THEOplayer)}(this,function(e,t){"use strict";function r(){return void 0!==window.ShadyCSS&&!1===window.ShadyCSS.nativeShadow}function a(e){r()&&window.ShadyCSS.styleElement(e)}function i(e,t){void 0!==window.ShadyCSS&&!1===window.ShadyCSS.nativeCss?window.ShadyCSS.styleSubtree(e,t):null!=t&&/**
  * @license
@@ -38,5 +38,5 @@ ${t}</style><div part="container"><div part="background"></div><div part="pointe
     <theolive-automatic-quality-selector></theolive-automatic-quality-selector>
     <theolive-bad-network-quality-selector></theolive-bad-network-quality-selector>
 </theoplayer-radio-group>
-`);class rV extends HTMLElement{_upgradeProperty(e){if(this.hasOwnProperty(e)){let t=this[e];delete this[e],this[e]=t}}connectedCallback(){a(this),this._radioGroup instanceof ev||customElements.upgrade(this._radioGroup),this.shadowRoot.addEventListener("change",this._onChange)}disconnectedCallback(){this.shadowRoot.removeEventListener("change",this._onChange)}constructor(){super(),this._onChange=()=>{this.dispatchEvent(new Event("change",{bubbles:!0}))};let e=this.attachShadow({mode:"open"});e.appendChild(rH().content.cloneNode(!0)),this._radioGroup=e.querySelector("theoplayer-radio-group")}}customElements.define("theolive-bad-network-menu",rV);let rz=o("theolive-default-ui",'<style>:host{box-sizing:border-box;display:inline-block;font-family:Helvetica,Arial,sans-serif;position:relative;width:100%}:host([hidden]){display:none!important}theoplayer-ui{--theoplayer-loading-delay:0.1s;display:block;font-family:Helvetica,Arial,sans-serif;width:100%}:host(:-webkit-full-screen),:host(:-webkit-full-screen) theoplayer-ui{height:100%!important;width:100%!important}:host(:fullscreen),:host(:fullscreen) theoplayer-ui{height:100%!important;width:100%!important}theoplayer-menu::part(heading){display:none!important}[part=centered-chrome] *{--theoplayer-control-height:48px}[part=middle-chrome]{flex-grow:1;justify-content:flex-end;pointer-events:none}[part=bottom-chrome],[part=middle-chrome]{display:flex;flex-flow:column nowrap;position:relative}[part=bottom-chrome]{align-items:stretch}:host([mobile]) theoplayer-ui{--theoplayer-control-backdrop-background:rgba(0,0,0,.5)}:host{--theoplayer-control-background-gradient-stops:transparent 0%,rgba(0,0,0,.01) 8.1%,rgba(0,0,0,.037) 15.5%,rgba(0,0,0,.078) 22.5%,rgba(0,0,0,.131) 29%,rgba(0,0,0,.195) 35.3%,rgba(0,0,0,.264) 41.2%,rgba(0,0,0,.337) 47.1%,rgba(0,0,0,.413) 52.9%,rgba(0,0,0,.486) 58.8%,rgba(0,0,0,.555) 64.7%,rgba(0,0,0,.619) 71%,rgba(0,0,0,.672) 77.5%,rgba(0,0,0,.713) 84.5%,rgba(0,0,0,.74) 91.9%,rgba(0,0,0,.75) 100%}:host(:not([mobile])) [part=bottom-chrome]:before,:host(:not([mobile])) [part=top-chrome]:before{bottom:0;content:"";display:block;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:-1}:host(:not([mobile])) [part=top-chrome]:before{background:linear-gradient(to top,var(--theoplayer-control-background-gradient-stops))}:host(:not([mobile])) [part=bottom-chrome]:before{background:linear-gradient(to bottom,var(--theoplayer-control-background-gradient-stops))}.theoplayer-spacer{flex-grow:1}theoplayer-time-range{--theoplayer-control-height:12px;--theoplayer-range-track-pointer-background:hsla(0,0%,100%,.5)}:host(:not([mobile])) [mobile-only],:host([mobile]) [mobile-hidden]{display:none!important}:host(:not([stream-type=vod])) [live-hidden],:host(:not([stream-type=vod])) theoplayer-control-bar ::slotted([live-hidden]),:host([stream-type=vod]) [live-only],:host([stream-type=vod]) theoplayer-control-bar ::slotted([live-only]){display:none!important}theoplayer-ui:not([has-first-play]) [part=centered-chrome] :not(theoplayer-play-button),theoplayer-ui:not([has-first-play]) theoplayer-control-bar,theoplayer-ui:not([playing-ad]) [ad-only],theoplayer-ui[playing-ad] [ad-hidden]{display:none!important}:host(:not([mobile])) theoplayer-ui[has-first-play] [part=centered-chrome] theoplayer-play-button{display:none!important}theoplayer-volume-range{--theoplayer-range-padding-left:0}theoplayer-mute-button+theoplayer-volume-range{--theoplayer-range-padding-right:0;--theoplayer-range-track-width:70px;overflow:hidden;transition:width .2s ease-in;width:0}theoplayer-mute-button+theoplayer-volume-range:focus,theoplayer-mute-button+theoplayer-volume-range:hover,theoplayer-mute-button:focus+theoplayer-volume-range,theoplayer-mute-button:hover+theoplayer-volume-range{width:70px}theoplayer-mute-button+theoplayer-volume-range:focus-within,theoplayer-mute-button:focus-within+theoplayer-volume-range{width:70px}theoplayer-live-button+theoplayer-time-display{padding-left:0}theoplayer-live-button[live]+theoplayer-time-display{display:none!important}p{color:#fff;color:var(--theoplayer-text-color,#fff);font-size:20px;font-size:var(--theoplayer-text-font-size,20px)}#announcement,#loading-announcement,#offline-announcement{display:none}theolive-bad-network-button{display:none;display:var(--theolive-bad-network-button-display,none)}theoplayer-settings-menu-button{display:inline-flex;display:var(--theolive-quality-button-display,inline-flex)}</style><theoplayer-ui><p id="loading-announcement" no-auto-hide slot="centered-chrome"><slot name="loading-announcement">Loading...</slot></p><p id="offline-announcement" no-auto-hide slot="centered-chrome"><slot name="offline-announcement">The live stream hasn\'t started yet</slot></p><p id="announcement" no-auto-hide slot="centered-chrome"></p><theoplayer-loading-indicator slot="centered-loading" no-auto-hide part="loading-indicator"></theoplayer-loading-indicator><div slot="centered-chrome" part="centered-chrome"><theoplayer-play-button part="center-play-button"></theoplayer-play-button></div><div part="bottom-chrome"><theoplayer-control-bar><theoplayer-play-button mobile-hidden part="play-button"></theoplayer-play-button><theoplayer-mute-button part="mute-button"></theoplayer-mute-button><theoplayer-volume-range mobile-hidden part="volume-range"></theoplayer-volume-range><theoplayer-live-button ad-hidden live-only part="live-button"></theoplayer-live-button><span class="theoplayer-spacer"></span><theoplayer-settings-menu-button ad-hidden menu="all-quality-menu" part="quality-button"></theoplayer-settings-menu-button><theolive-bad-network-button ad-hidden menu="quality-menu" part="theolive-bad-network-button"></theolive-bad-network-button><theoplayer-fullscreen-button part="fullscreen-button"></theoplayer-fullscreen-button></theoplayer-control-bar></div><theoplayer-menu id="quality-menu" slot="menu" menu-close-on-input hidden><theolive-bad-network-menu></theolive-bad-network-menu></theoplayer-menu><theoplayer-menu id="all-quality-menu" slot="menu" menu-close-on-input hidden><theoplayer-quality-radio-group></theoplayer-quality-radio-group></theoplayer-menu><theoplayer-error-display slot="error" part="error-display"></theoplayer-error-display></theoplayer-ui>');class rG extends rN{initShadowRoot(){let e=this.attachShadow({mode:"open",delegatesFocus:!0});return e.appendChild(rz().content.cloneNode(!0)),e}hidePlayerError(){this._root.removeAttribute("has-error"),this._errorDisplay.style.display="none"}stopHidingPlayerError(){this._root.setAttribute("has-error",""),this._errorDisplay.style.display="flex"}hidePlayerPlayButton_(){this._playButton.style.display="none"}stopHidingPlayerPlayButton(){this._playButton.style.display="inline-flex"}showMessage_(e,t){this.hidePlayerError(),this._loading.style.display="none",this._offline.style.display="none",this._announcement.style.display="none","loading"===e?this._loading.style.display="block":"offline"===e?this._offline.style.display="block":(this._announcement.textContent=null!=t?t:"",this._announcement.style.display="block"),this.hidePlayerPlayButton_()}hideMessage_(){this._loading.style.display="none",this._offline.style.display="none",this._announcement.style.display="none",this.stopHidingPlayerPlayButton()}constructor(e={}){super(e),this.onReady=()=>{this._ui.removeEventListener(rP,this.onReady);let e=this.player;if(e){var t,r,a;null==(t=e.theoLive)||t.addEventListener("publicationloadstart",this.onLoadChannelStart),null==(r=e.theoLive)||r.addEventListener("publicationoffline",this.onChannelOffline),null==(a=e.theoLive)||a.addEventListener("publicationloaded",this.onChannelLoaded),e.addEventListener("error",this.onError)}},this.onLoadChannelStart=()=>{this.showMessage_("loading",void 0)},this.onChannelOffline=()=>{this.showMessage_("offline",void 0)},this.onChannelLoaded=()=>{this.hidePlayerError(),this.hideMessage_()},this.onError=e=>{let t=e.errorObject.code;if(t<13e3||t>=14e3){this.showMessage_("offline",void 0);return}this.stopHidingPlayerError(),this.hideMessage_()},this._loading=this._shadowRoot.querySelector("#loading-announcement"),this._offline=this._shadowRoot.querySelector("#offline-announcement"),this._announcement=this._shadowRoot.querySelector("#announcement"),this._errorDisplay=this._shadowRoot.querySelector("theoplayer-error-display"),this._playButton=this._shadowRoot.querySelector("theoplayer-play-button"),this._root=this._shadowRoot.querySelector("theoplayer-ui"),this._ui.addEventListener(rP,this.onReady)}}customElements.define("theolive-default-ui",rG),e.ActiveQualityDisplay=tv,e.AdClickThroughButton=rf,e.AdCountdown=rv,e.AdDisplay=ry,e.AdSkipButton=rw,e.AirPlayButton=rr,e.Attribute=p,e.Button=N,e.CastButton=t2,e.ChromecastButton=t7,e.ChromecastDisplay=re,e.CloseMenuButton=eM,e.ColorStops=tD,e.ControlBar=s,e.DefaultUI=rN,e.DurationDisplay=el,e.ErrorDisplay=t5,e.ExtensionSlot=rx,e.FullscreenButton=tN,e.GestureReceiver=rs,e.LanguageMenu=tn,e.LanguageMenuButton=th,e.LinkButton=B,e.LiveButton=rp,e.LoadingIndicator=ro,e.MediaTrackRadioButton=eN,e.Menu=ew,e.MenuButton=eP,e.MenuGroup=eC,e.MuteButton=Y,e.PlayButton=Q,e.PlaybackRateDisplay=tm,e.PlaybackRateMenu=tg,e.PlaybackRateMenuButton=tc,e.PlaybackRateRadioGroup=tp,e.PreviewThumbnail=tz,e.PreviewTimeDisplay=tK,e.QualityRadioButton=tk,e.QualityRadioGroup=tx,e.RadioButton=eu,e.RadioGroup=ev,e.Range=tB,e.SeekButton=Z,e.SettingsMenu=tL,e.SettingsMenuButton=tR,e.SlotContainer=c,e.StateReceiverMixin=H,e.THEOliveDefaultUI=rG,e.TextTrackOffRadioButton=e$,e.TextTrackRadioButton=eF,e.TextTrackStyleDisplay=e4,e.TextTrackStyleMenu=ta,e.TextTrackStyleRadioGroup=e9,e.TextTrackStyleResetButton=tT,e.TimeDisplay=eo,e.TimeRange=tJ,e.TrackRadioGroup=eW,e.UIContainer=rM,e.VolumeRange=t0,e.buttonTemplate=I,e.linkButtonTemplate=D,e.menuGroupTemplate=eA,e.menuTemplate=ek,e.rangeTemplate=tq,e.registerExtension=function(e){rA.push(e)},e.version="1.9.5"});
+`);class rV extends HTMLElement{_upgradeProperty(e){if(this.hasOwnProperty(e)){let t=this[e];delete this[e],this[e]=t}}connectedCallback(){a(this),this._radioGroup instanceof ev||customElements.upgrade(this._radioGroup),this.shadowRoot.addEventListener("change",this._onChange)}disconnectedCallback(){this.shadowRoot.removeEventListener("change",this._onChange)}constructor(){super(),this._onChange=()=>{this.dispatchEvent(new Event("change",{bubbles:!0}))};let e=this.attachShadow({mode:"open"});e.appendChild(rH().content.cloneNode(!0)),this._radioGroup=e.querySelector("theoplayer-radio-group")}}customElements.define("theolive-bad-network-menu",rV);let rz=o("theolive-default-ui",'<style>:host{box-sizing:border-box;display:inline-block;font-family:Helvetica,Arial,sans-serif;position:relative;width:100%}:host([hidden]){display:none!important}theoplayer-ui{--theoplayer-loading-delay:0.1s;display:block;font-family:Helvetica,Arial,sans-serif;width:100%}:host(:-webkit-full-screen),:host(:-webkit-full-screen) theoplayer-ui{height:100%!important;width:100%!important}:host(:fullscreen),:host(:fullscreen) theoplayer-ui{height:100%!important;width:100%!important}theoplayer-menu::part(heading){display:none!important}[part=centered-chrome] *{--theoplayer-control-height:48px}[part=middle-chrome]{flex-grow:1;justify-content:flex-end;pointer-events:none}[part=bottom-chrome],[part=middle-chrome]{display:flex;flex-flow:column nowrap;position:relative}[part=bottom-chrome]{align-items:stretch}:host([mobile]) theoplayer-ui{--theoplayer-control-backdrop-background:rgba(0,0,0,.5)}:host{--theoplayer-control-background-gradient-stops:transparent 0%,rgba(0,0,0,.01) 8.1%,rgba(0,0,0,.037) 15.5%,rgba(0,0,0,.078) 22.5%,rgba(0,0,0,.131) 29%,rgba(0,0,0,.195) 35.3%,rgba(0,0,0,.264) 41.2%,rgba(0,0,0,.337) 47.1%,rgba(0,0,0,.413) 52.9%,rgba(0,0,0,.486) 58.8%,rgba(0,0,0,.555) 64.7%,rgba(0,0,0,.619) 71%,rgba(0,0,0,.672) 77.5%,rgba(0,0,0,.713) 84.5%,rgba(0,0,0,.74) 91.9%,rgba(0,0,0,.75) 100%}:host(:not([mobile])) [part=bottom-chrome]:before,:host(:not([mobile])) [part=top-chrome]:before{bottom:0;content:"";display:block;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:-1}:host(:not([mobile])) [part=top-chrome]:before{background:linear-gradient(to top,var(--theoplayer-control-background-gradient-stops))}:host(:not([mobile])) [part=bottom-chrome]:before{background:linear-gradient(to bottom,var(--theoplayer-control-background-gradient-stops))}.theoplayer-spacer{flex-grow:1}theoplayer-time-range{--theoplayer-control-height:12px;--theoplayer-range-track-pointer-background:hsla(0,0%,100%,.5)}:host(:not([mobile])) [mobile-only],:host([mobile]) [mobile-hidden]{display:none!important}:host(:not([stream-type=vod])) [live-hidden],:host(:not([stream-type=vod])) theoplayer-control-bar ::slotted([live-hidden]),:host([stream-type=vod]) [live-only],:host([stream-type=vod]) theoplayer-control-bar ::slotted([live-only]){display:none!important}theoplayer-ui:not([has-first-play]) [part=centered-chrome] :not(theoplayer-play-button),theoplayer-ui:not([has-first-play]) theoplayer-control-bar,theoplayer-ui:not([playing-ad]) [ad-only],theoplayer-ui[playing-ad] [ad-hidden]{display:none!important}:host(:not([mobile])) theoplayer-ui[has-first-play] [part=centered-chrome] theoplayer-play-button{display:none!important}theoplayer-volume-range{--theoplayer-range-padding-left:0}theoplayer-mute-button+theoplayer-volume-range{--theoplayer-range-padding-right:0;--theoplayer-range-track-width:70px;overflow:hidden;transition:width .2s ease-in;width:0}theoplayer-mute-button+theoplayer-volume-range:focus,theoplayer-mute-button+theoplayer-volume-range:hover,theoplayer-mute-button:focus+theoplayer-volume-range,theoplayer-mute-button:hover+theoplayer-volume-range{width:70px}theoplayer-mute-button+theoplayer-volume-range:focus-within,theoplayer-mute-button:focus-within+theoplayer-volume-range{width:70px}theoplayer-live-button+theoplayer-time-display{padding-left:0}theoplayer-live-button[live]+theoplayer-time-display{display:none!important}p{color:#fff;color:var(--theoplayer-text-color,#fff);font-size:20px;font-size:var(--theoplayer-text-font-size,20px)}#announcement,#loading-announcement,#offline-announcement{display:none}theolive-bad-network-button{display:none;display:var(--theolive-bad-network-button-display,none)}theoplayer-settings-menu-button{display:inline-flex;display:var(--theolive-quality-button-display,inline-flex)}</style><theoplayer-ui><p id="loading-announcement" no-auto-hide slot="centered-chrome"><slot name="loading-announcement">Loading...</slot></p><p id="offline-announcement" no-auto-hide slot="centered-chrome"><slot name="offline-announcement">The live stream hasn\'t started yet</slot></p><p id="announcement" no-auto-hide slot="centered-chrome"></p><theoplayer-loading-indicator slot="centered-loading" no-auto-hide part="loading-indicator"></theoplayer-loading-indicator><div slot="centered-chrome" part="centered-chrome"><theoplayer-play-button part="center-play-button"></theoplayer-play-button></div><div part="bottom-chrome"><theoplayer-control-bar><theoplayer-play-button mobile-hidden part="play-button"></theoplayer-play-button><theoplayer-mute-button part="mute-button"></theoplayer-mute-button><theoplayer-volume-range mobile-hidden part="volume-range"></theoplayer-volume-range><theoplayer-live-button ad-hidden live-only part="live-button"></theoplayer-live-button><span class="theoplayer-spacer"></span><theoplayer-settings-menu-button ad-hidden menu="all-quality-menu" part="quality-button"></theoplayer-settings-menu-button><theolive-bad-network-button ad-hidden menu="quality-menu" part="theolive-bad-network-button"></theolive-bad-network-button><theoplayer-fullscreen-button part="fullscreen-button"></theoplayer-fullscreen-button></theoplayer-control-bar></div><theoplayer-menu id="quality-menu" slot="menu" menu-close-on-input hidden><theolive-bad-network-menu></theolive-bad-network-menu></theoplayer-menu><theoplayer-menu id="all-quality-menu" slot="menu" menu-close-on-input hidden><theoplayer-quality-radio-group></theoplayer-quality-radio-group></theoplayer-menu><theoplayer-error-display slot="error" part="error-display"></theoplayer-error-display></theoplayer-ui>');class rG extends rN{initShadowRoot(){let e=this.attachShadow({mode:"open",delegatesFocus:!0});return e.appendChild(rz().content.cloneNode(!0)),e}hidePlayerError(){this._root.removeAttribute("has-error"),this._errorDisplay.style.display="none"}stopHidingPlayerError(){this._root.setAttribute("has-error",""),this._errorDisplay.style.display="flex"}hidePlayerPlayButton_(){this._playButton.style.display="none"}stopHidingPlayerPlayButton(){this._playButton.style.display="inline-flex"}showMessage_(e,t){this.hidePlayerError(),this._loading.style.display="none",this._offline.style.display="none",this._announcement.style.display="none","loading"===e?this._loading.style.display="block":"offline"===e?this._offline.style.display="block":(this._announcement.textContent=null!=t?t:"",this._announcement.style.display="block"),this.hidePlayerPlayButton_()}hideMessage_(){this._loading.style.display="none",this._offline.style.display="none",this._announcement.style.display="none",this.stopHidingPlayerPlayButton()}constructor(e={}){super(e),this.onReady=()=>{this._ui.removeEventListener(rP,this.onReady);let e=this.player;if(e){var t,r,a;null==(t=e.theoLive)||t.addEventListener("publicationloadstart",this.onLoadChannelStart),null==(r=e.theoLive)||r.addEventListener("publicationoffline",this.onChannelOffline),null==(a=e.theoLive)||a.addEventListener("publicationloaded",this.onChannelLoaded),e.addEventListener("error",this.onError)}},this.onLoadChannelStart=()=>{this.showMessage_("loading",void 0)},this.onChannelOffline=()=>{this.showMessage_("offline",void 0)},this.onChannelLoaded=()=>{this.hidePlayerError(),this.hideMessage_()},this.onError=e=>{let t=e.errorObject.code;if(t<13e3||t>=14e3){this.showMessage_("offline",void 0);return}this.stopHidingPlayerError(),this.hideMessage_()},this._loading=this._shadowRoot.querySelector("#loading-announcement"),this._offline=this._shadowRoot.querySelector("#offline-announcement"),this._announcement=this._shadowRoot.querySelector("#announcement"),this._errorDisplay=this._shadowRoot.querySelector("theoplayer-error-display"),this._playButton=this._shadowRoot.querySelector("theoplayer-play-button"),this._root=this._shadowRoot.querySelector("theoplayer-ui"),this._ui.addEventListener(rP,this.onReady)}}customElements.define("theolive-default-ui",rG),e.ActiveQualityDisplay=tv,e.AdClickThroughButton=rf,e.AdCountdown=rv,e.AdDisplay=ry,e.AdSkipButton=rw,e.AirPlayButton=rr,e.Attribute=p,e.Button=N,e.CastButton=t2,e.ChromecastButton=t7,e.ChromecastDisplay=re,e.CloseMenuButton=eM,e.ColorStops=tD,e.ControlBar=s,e.DefaultUI=rN,e.DurationDisplay=el,e.ErrorDisplay=t5,e.ExtensionSlot=rx,e.FullscreenButton=tN,e.GestureReceiver=rs,e.LanguageMenu=tn,e.LanguageMenuButton=th,e.LinkButton=B,e.LiveButton=rp,e.LoadingIndicator=ro,e.MediaTrackRadioButton=eN,e.Menu=ew,e.MenuButton=eP,e.MenuGroup=eC,e.MuteButton=Y,e.PlayButton=Q,e.PlaybackRateDisplay=tm,e.PlaybackRateMenu=tg,e.PlaybackRateMenuButton=tc,e.PlaybackRateRadioGroup=tp,e.PreviewThumbnail=tz,e.PreviewTimeDisplay=tK,e.QualityRadioButton=tk,e.QualityRadioGroup=tx,e.RadioButton=eu,e.RadioGroup=ev,e.Range=tB,e.SeekButton=Z,e.SettingsMenu=tL,e.SettingsMenuButton=tR,e.SlotContainer=c,e.StateReceiverMixin=H,e.THEOliveDefaultUI=rG,e.TextTrackOffRadioButton=e$,e.TextTrackRadioButton=eF,e.TextTrackStyleDisplay=e4,e.TextTrackStyleMenu=ta,e.TextTrackStyleRadioGroup=e9,e.TextTrackStyleResetButton=tT,e.TimeDisplay=eo,e.TimeRange=tJ,e.TrackRadioGroup=eW,e.UIContainer=rM,e.VolumeRange=t0,e.buttonTemplate=I,e.linkButtonTemplate=D,e.menuGroupTemplate=eA,e.menuTemplate=ek,e.rangeTemplate=tq,e.registerExtension=function(e){rA.push(e)},e.version="1.10.0"});
 //# sourceMappingURL=THEOplayerUI.js.map