@mux/mux-player 1.8.0 → 1.9.0

package/dist/index.mjs

@@ -1,17 +1,26 @@
-var Le=(t,a,e)=>{if(!a.has(t))throw TypeError("Cannot "+e)};var l=(t,a,e)=>(Le(t,a,"read from private field"),e?e.call(t):a.get(t)),c=(t,a,e)=>{if(a.has(t))throw TypeError("Cannot add the same private member more than once");a instanceof WeakSet?a.add(t):a.set(t,e)},A=(t,a,e,i)=>(Le(t,a,"write to private field"),i?i.call(t,e):a.set(t,e),e);var b=(t,a,e)=>(Le(t,a,"access private method"),e);var j=class{addEventListener(){}removeEventListener(){}dispatchEvent(a){return!0}};if(typeof DocumentFragment=="undefined"){class t extends j{}globalThis.DocumentFragment=t}var X=class extends j{},Se=class extends j{},Dt={get(t){},define(t,a,e){},upgrade(t){},whenDefined(t){return Promise.resolve(X)}},Q,Ce=class{constructor(a,e={}){c(this,Q,void 0);A(this,Q,e==null?void 0:e.detail)}get detail(){return l(this,Q)}initCustomEvent(){}};Q=new WeakMap;function It(t,a){return new X}var Qe={document:{createElement:It},DocumentFragment,customElements:Dt,CustomEvent:Ce,EventTarget:j,HTMLElement:X,HTMLVideoElement:Se},et=typeof window=="undefined"||typeof globalThis.customElements=="undefined",p=et?Qe:globalThis,v=et?Qe.document:globalThis.document;import{MediaController as sa}from"media-chrome";import"media-chrome/dist/experimental/media-captions-menu-button.js";import la,{MediaError as $e,Attributes as u}from"@mux/mux-video";import{StreamTypes as C,PlaybackTypes as Te,addTextTrack as da,removeTextTrack as ua,CmcdTypeValues as Lt}from"@mux/playback-core";import{VideoEvents as Ft}from"@mux/mux-video";var _t="en",H={code:_t};var tt="en";function d(t,a=!0){var r,o;let e=a&&(o=(r=H)==null?void 0:r[t])!=null?o:t,i=a?H.code:tt;return new Me(e,i)}var Me=class{constructor(a,e=(i=>(i=H.code)!=null?i:tt)()){this.message=a,this.locale=e}format(a){return this.message.replace(/\{(\w+)\}/g,(e,i)=>{var r;return(r=a[i])!=null?r:""})}toString(){return this.message}};function at(t){let a="";return Object.entries(t).forEach(([e,i])=>{i!=null&&(a+=`${Nt(e)}: ${i}; `)}),a?a.trim():void 0}function Nt(t){return t.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function it(t){return t.replace(/[-_]([a-z])/g,(a,e)=>e.toUpperCase())}function L(t){if(t==null)return;let a=+t;return Number.isNaN(a)?void 0:a}function ce(t){let a=Vt(t).toString();return a?"?"+a:""}function Vt(t){let a={};for(let e in t)t[e]!=null&&(a[e]=t[e]);return new URLSearchParams(a)}function I(t){let a=(t!=null?t:"").split(".")[1];if(!a)return{};let e=a.replace(/-/g,"+").replace(/_/g,"/"),i=decodeURIComponent(atob(e).split("").map(function(r){return"%"+("00"+r.charCodeAt(0).toString(16)).slice(-2)}).join(""));return JSON.parse(i)}var Pe=(t,a)=>!t||!a?!1:t.contains(a)?!0:Pe(t,a.getRootNode().host);var Be="mux.com",Ht=()=>{try{return"1.8.0"}catch{}return"UNKNOWN"},$t=Ht(),be=()=>$t,De=(t,{maxResolution:a,token:e,domain:i=Be}={})=>{let n=!!e?{token:e}:{redundant_streams:!0,...a?{max_resolution:a}:{}};return`https://stream.${i}/${t}.m3u8${ce(n)}`},rt=(t,{token:a,thumbnailTime:e,domain:i=Be}={})=>{let r=a==null?e:void 0,{aud:o}=I(a);if(!(a&&o!=="t"))return`https://image.${i}/${t}/thumbnail.webp${ce({token:a,time:r})}`},ot=(t,{token:a,domain:e=Be}={})=>{let{aud:i}=I(a);if(!(a&&i!=="s"))return`https://image.${e}/${t}/storyboard.vtt${ce({token:a,format:"webp"})}`};var Kt={crossorigin:"crossOrigin",playsinline:"playsInline"};function nt(t){var a;return(a=Kt[t])!=null?a:it(t)}var $,K,k,pe=class{constructor(a,e){c(this,$,void 0);c(this,K,void 0);c(this,k,[]);A(this,$,a),A(this,K,e)}[Symbol.iterator](){return l(this,k).values()}get length(){return l(this,k).length}get value(){var a;return(a=l(this,k).join(" "))!=null?a:""}set value(a){var e;a!==this.value&&(A(this,k,[]),this.add(...(e=a==null?void 0:a.split(" "))!=null?e:[]))}toString(){return this.value}item(a){return l(this,k)[a]}values(){return l(this,k).values()}keys(){return l(this,k).keys()}forEach(a){l(this,k).forEach(a)}add(...a){var e,i;a.forEach(r=>{this.contains(r)||l(this,k).push(r)}),!(this.value===""&&!((e=l(this,$))!=null&&e.hasAttribute(`${l(this,K)}`)))&&((i=l(this,$))==null||i.setAttribute(`${l(this,K)}`,`${this.value}`))}remove(...a){var e;a.forEach(i=>{l(this,k).splice(l(this,k).indexOf(i),1)}),(e=l(this,$))==null||e.setAttribute(`${l(this,K)}`,`${this.value}`)}contains(a){return l(this,k).includes(a)}toggle(a,e){return typeof e!="undefined"?e?(this.add(a),!0):(this.remove(a),!1):this.contains(a)?(this.remove(a),!1):(this.add(a),!0)}replace(a,e){this.remove(a),this.add(e)}};$=new WeakMap,K=new WeakMap,k=new WeakMap;var st=`[mux-player ${be()}]`;function _(...t){console.warn(st,...t)}function x(...t){console.error(st,...t)}function he(t){var e;let a=(e=t.message)!=null?e:"";if(t.file){let i="https://github.com/muxinc/elements/blob/main/errors/";a+=` ${d("Read more: ")}
-${i}${t.file}`}_(a)}var y={AUTOPLAY:"autoplay",CROSSORIGIN:"crossorigin",LOOP:"loop",MUTED:"muted",PLAYSINLINE:"playsinline",PRELOAD:"preload"},F={VOLUME:"volume",PLAYBACKRATE:"playbackrate",MUTED:"muted"},dt=Object.freeze({length:0,start(t){let a=t>>>0;if(a>=this.length)throw new DOMException(`Failed to execute 'start' on 'TimeRanges': The index provided (${a}) is greater than or equal to the maximum bound (${this.length}).`);return 0},end(t){let a=t>>>0;if(a>=this.length)throw new DOMException(`Failed to execute 'end' on 'TimeRanges': The index provided (${a}) is greater than or equal to the maximum bound (${this.length}).`);return 0}}),Ut=Ft.filter(t=>t!=="error"),Yt=Object.values(y).filter(t=>![y.PLAYSINLINE].includes(t)),Zt=Object.values(F);function ut(t){t.querySelectorAll(":scope > track").forEach(a=>{var e;(e=t.media)==null||e.append(a.cloneNode())}),Ut.forEach(a=>{var e;(e=t.media)==null||e.addEventListener(a,i=>{t.dispatchEvent(new Event(i.type))})})}var Ie=class extends p.HTMLElement{static get observedAttributes(){return[...Yt,...Zt]}constructor(){super(),this.querySelectorAll(":scope > track").forEach(i=>{var r;(r=this.media)==null||r.append(i.cloneNode())});let a=i=>{for(let r of i)r.type==="childList"&&(r.removedNodes.forEach(o=>{var m,g;let n=(m=this.media)==null?void 0:m.querySelector(`track[src="${o.src}"]`);n&&((g=this.media)==null||g.removeChild(n))}),r.addedNodes.forEach(o=>{var n;(n=this.media)==null||n.append(o.cloneNode())}))};new MutationObserver(a).observe(this,{childList:!0,subtree:!0})}attributeChangedCallback(a,e,i){var r,o;switch(a){case F.MUTED:{this.media&&(this.media.muted=i!=null,this.media.defaultMuted=i!=null);return}case F.VOLUME:{let n=(r=L(i))!=null?r:1;this.media&&(this.media.volume=n);return}case F.PLAYBACKRATE:{let n=(o=L(i))!=null?o:1;this.media&&(this.media.playbackRate=n,this.media.defaultPlaybackRate=n);return}}}play(){var a,e;return(e=(a=this.media)==null?void 0:a.play())!=null?e:Promise.reject()}pause(){var a;(a=this.media)==null||a.pause()}requestCast(a){var e;return(e=this.media)==null?void 0:e.requestCast(a)}get media(){var a;return(a=this.shadowRoot)==null?void 0:a.querySelector("mux-video")}get paused(){var a,e;return(e=(a=this.media)==null?void 0:a.paused)!=null?e:!0}get duration(){var a,e;return(e=(a=this.media)==null?void 0:a.duration)!=null?e:NaN}get ended(){var a,e;return(e=(a=this.media)==null?void 0:a.ended)!=null?e:!1}get buffered(){var a,e;return(e=(a=this.media)==null?void 0:a.buffered)!=null?e:dt}get seekable(){var a,e;return(e=(a=this.media)==null?void 0:a.seekable)!=null?e:dt}get readyState(){var a,e;return(e=(a=this.media)==null?void 0:a.readyState)!=null?e:0}get videoWidth(){var a,e;return(e=(a=this.media)==null?void 0:a.videoWidth)!=null?e:0}get videoHeight(){var a,e;return(e=(a=this.media)==null?void 0:a.videoHeight)!=null?e:0}get currentTime(){var a,e;return(e=(a=this.media)==null?void 0:a.currentTime)!=null?e:0}set currentTime(a){this.media&&(this.media.currentTime=Number(a))}get volume(){var a,e;return(e=(a=this.media)==null?void 0:a.volume)!=null?e:1}set volume(a){this.media&&(this.media.volume=Number(a))}get playbackRate(){var a,e;return(e=(a=this.media)==null?void 0:a.playbackRate)!=null?e:1}set playbackRate(a){this.media&&(this.media.playbackRate=Number(a))}get defaultPlaybackRate(){var a;return(a=L(this.getAttribute(F.PLAYBACKRATE)))!=null?a:1}set defaultPlaybackRate(a){a!=null?this.setAttribute(F.PLAYBACKRATE,`${a}`):this.removeAttribute(F.PLAYBACKRATE)}get crossOrigin(){return ee(this,y.CROSSORIGIN)}set crossOrigin(a){this.setAttribute(y.CROSSORIGIN,`${a}`)}get autoplay(){return ee(this,y.AUTOPLAY)!=null}set autoplay(a){a?this.setAttribute(y.AUTOPLAY,typeof a=="string"?a:""):this.removeAttribute(y.AUTOPLAY)}get loop(){return ee(this,y.LOOP)!=null}set loop(a){a?this.setAttribute(y.LOOP,""):this.removeAttribute(y.LOOP)}get muted(){var a,e;return(e=(a=this.media)==null?void 0:a.muted)!=null?e:!1}set muted(a){this.media&&(this.media.muted=Boolean(a))}get defaultMuted(){return ee(this,y.MUTED)!=null}set defaultMuted(a){a?this.setAttribute(y.MUTED,""):this.removeAttribute(y.MUTED)}get playsInline(){return ee(this,y.PLAYSINLINE)!=null}set playsInline(a){x("playsInline is set to true by default and is not currently supported as a setter.")}get preload(){return this.media?this.media.preload:this.getAttribute("preload")}set preload(a){["","none","metadata","auto"].includes(a)?this.setAttribute(y.PRELOAD,a):this.removeAttribute(y.PRELOAD)}};function ee(t,a){return t.media?t.media.getAttribute(a):t.getAttribute(a)}var _e=Ie;import"media-chrome/dist/media-theme-element.js";var ct=`
-  :host {
-    cursor: pointer;
-  }
-  media-time-display {
-    color: inherit;
-  }
-`,pt=v.createElement("template");pt.innerHTML=`
-  <style>
-    ${ct}
-  </style>
-  <media-time-display show-duration></media-time-display>
-`;var mt=["Enter"," "],te,z,ge,G=class extends p.HTMLElement{constructor(){var e,i;super();c(this,z);c(this,te,void 0);this.attachShadow({mode:"open"}),(e=this.shadowRoot)==null||e.appendChild(this.constructor.template.content.cloneNode(!0)),this.timeDisplayEl=(i=this.shadowRoot)==null?void 0:i.querySelector("media-time-display")}static get observedAttributes(){return["hide-duration","remaining","disabled","aria-disabled"]}toggleTimeDisplay(){var e,i,r;(e=this.timeDisplayEl)!=null&&e.hasAttribute("remaining")?(i=this.timeDisplayEl)==null||i.removeAttribute("remaining"):(r=this.timeDisplayEl)==null||r.setAttribute("remaining","")}connectedCallback(){let e=i=>{let{key:r}=i;if(!mt.includes(r)){this.removeEventListener("keyup",e);return}this.toggleTimeDisplay()};this.addEventListener("keydown",i=>{let{metaKey:r,altKey:o,key:n}=i;if(r||o||!mt.includes(n)){this.removeEventListener("keyup",e);return}this.addEventListener("keyup",e)}),this.addEventListener("click",this.toggleTimeDisplay),A(this,te,setInterval(b(this,z,ge).bind(this),200)),requestAnimationFrame(()=>b(this,z,ge).call(this))}disconnectedCallback(){clearInterval(l(this,te))}attributeChangedCallback(e,i,r){var o,n;e==="hide-duration"&&b(this,z,ge).call(this),["remaining","disabled","aria-disabled"].includes(e)&&i!==r&&(r==null?(o=this.timeDisplayEl)==null||o.removeAttribute(e):(n=this.timeDisplayEl)==null||n.setAttribute(e,r))}};te=new WeakMap,z=new WeakSet,ge=function(){var i,r,o,n;getComputedStyle(this).getPropertyValue("--media-duration-display").trim()==="none"||this.getAttribute("hide-duration")!=null?(i=this.timeDisplayEl)!=null&&i.hasAttribute("show-duration")&&((r=this.timeDisplayEl)==null||r.removeAttribute("show-duration")):(o=this.timeDisplayEl)!=null&&o.hasAttribute("show-duration")||(n=this.timeDisplayEl)==null||n.setAttribute("show-duration","")},G.styles=ct,G.template=pt;p.customElements.get("mxp-time-display")||(p.customElements.define("mxp-time-display",G),p.MxpTimeDisplay=G);var bt=`:host {
+var we=(t,a,e)=>{if(!a.has(t))throw TypeError("Cannot "+e)};var m=(t,a,e)=>(we(t,a,"read from private field"),e?e.call(t):a.get(t)),c=(t,a,e)=>{if(a.has(t))throw TypeError("Cannot add the same private member more than once");a instanceof WeakSet?a.add(t):a.set(t,e)},T=(t,a,e,i)=>(we(t,a,"write to private field"),i?i.call(t,e):a.set(t,e),e);var f=(t,a,e)=>(we(t,a,"access private method"),e);var q=class{addEventListener(){}removeEventListener(){}dispatchEvent(a){return!0}};if(typeof DocumentFragment=="undefined"){class t extends q{}globalThis.DocumentFragment=t}var z=class extends q{},Oe=class extends q{},Rt={get(t){},define(t,a,e){},upgrade(t){},whenDefined(t){return Promise.resolve(z)}},J,Le=class{constructor(a,e={}){c(this,J,void 0);T(this,J,e==null?void 0:e.detail)}get detail(){return m(this,J)}initCustomEvent(){}};J=new WeakMap;function St(t,a){return new z}var ze={document:{createElement:St},DocumentFragment,customElements:Rt,CustomEvent:Le,EventTarget:q,HTMLElement:z,HTMLVideoElement:Oe},Je=typeof window=="undefined"||typeof globalThis.customElements=="undefined",p=Je?ze:globalThis,E=Je?ze.document:globalThis.document;import{MediaController as ta}from"media-chrome";import"media-chrome/dist/experimental/media-captions-selectmenu.js";import aa,{MediaError as ve,Attributes as d}from"@mux/mux-video";import{StreamTypes as C,PlaybackTypes as ke,addTextTrack as ia,removeTextTrack as ra,CmcdTypeValues as Tt}from"@mux/playback-core";import{VideoEvents as Nt}from"@mux/mux-video";var Ct="en",H={code:Ct};var Xe="en";function l(t,a=!0){var r,o;let e=a&&(o=(r=H)==null?void 0:r[t])!=null?o:t,i=a?H.code:Xe;return new Re(e,i)}var Re=class{constructor(a,e=(i=>(i=H.code)!=null?i:Xe)()){this.message=a,this.locale=e}format(a){return this.message.replace(/\{(\w+)\}/g,(e,i)=>{var r;return(r=a[i])!=null?r:""})}toString(){return this.message}};function Qe(t){let a="";return Object.entries(t).forEach(([e,i])=>{i!=null&&(a+=`${Mt(e)}: ${i}; `)}),a?a.trim():void 0}function Mt(t){return t.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function et(t){return t.replace(/[-_]([a-z])/g,(a,e)=>e.toUpperCase())}function R(t){if(t==null)return;let a=+t;return Number.isNaN(a)?void 0:a}function de(t){let a=Pt(t).toString();return a?"?"+a:""}function Pt(t){let a={};for(let e in t)t[e]!=null&&(a[e]=t[e]);return new URLSearchParams(a)}function D(t){let a=(t!=null?t:"").split(".")[1];if(!a)return{};let e=a.replace(/-/g,"+").replace(/_/g,"/"),i=decodeURIComponent(atob(e).split("").map(function(r){return"%"+("00"+r.charCodeAt(0).toString(16)).slice(-2)}).join(""));return JSON.parse(i)}var Se=(t,a)=>!t||!a?!1:t.contains(a)?!0:Se(t,a.getRootNode().host);var Ce="mux.com",Bt=()=>{try{return"1.9.0"}catch{}return"UNKNOWN"},_t=Bt(),ue=()=>_t,Me=(t,{maxResolution:a,token:e,domain:i=Ce}={})=>{let n=!!e?{token:e}:{redundant_streams:!0,...a?{max_resolution:a}:{}};return`https://stream.${i}/${t}.m3u8${de(n)}`},tt=(t,{token:a,thumbnailTime:e,domain:i=Ce}={})=>{let r=a==null?e:void 0,{aud:o}=D(a);if(!(a&&o!=="t"))return`https://image.${i}/${t}/thumbnail.webp${de({token:a,time:r})}`},at=(t,{token:a,domain:e=Ce}={})=>{let{aud:i}=D(a);if(!(a&&i!=="s"))return`https://image.${e}/${t}/storyboard.vtt${de({token:a,format:"webp"})}`};var Dt={crossorigin:"crossOrigin",playsinline:"playsInline"};function it(t){var a;return(a=Dt[t])!=null?a:et(t)}var $,K,v,me=class{constructor(a,e){c(this,$,void 0);c(this,K,void 0);c(this,v,[]);T(this,$,a),T(this,K,e)}[Symbol.iterator](){return m(this,v).values()}get length(){return m(this,v).length}get value(){var a;return(a=m(this,v).join(" "))!=null?a:""}set value(a){var e;a!==this.value&&(T(this,v,[]),this.add(...(e=a==null?void 0:a.split(" "))!=null?e:[]))}toString(){return this.value}item(a){return m(this,v)[a]}values(){return m(this,v).values()}keys(){return m(this,v).keys()}forEach(a){m(this,v).forEach(a)}add(...a){var e,i;a.forEach(r=>{this.contains(r)||m(this,v).push(r)}),!(this.value===""&&!((e=m(this,$))!=null&&e.hasAttribute(`${m(this,K)}`)))&&((i=m(this,$))==null||i.setAttribute(`${m(this,K)}`,`${this.value}`))}remove(...a){var e;a.forEach(i=>{m(this,v).splice(m(this,v).indexOf(i),1)}),(e=m(this,$))==null||e.setAttribute(`${m(this,K)}`,`${this.value}`)}contains(a){return m(this,v).includes(a)}toggle(a,e){return typeof e!="undefined"?e?(this.add(a),!0):(this.remove(a),!1):this.contains(a)?(this.remove(a),!1):(this.add(a),!0)}replace(a,e){this.remove(a),this.add(e)}};$=new WeakMap,K=new WeakMap,v=new WeakMap;var rt=`[mux-player ${ue()}]`;function N(...t){console.warn(rt,...t)}function x(...t){console.error(rt,...t)}function ce(t){var e;let a=(e=t.message)!=null?e:"";if(t.context&&(a+=` ${t.context}`),t.file){let i="https://github.com/muxinc/elements/blob/main/errors/";a+=` ${l("Read more: ")}
+${i}${t.file}`}N(a)}var y={AUTOPLAY:"autoplay",CROSSORIGIN:"crossorigin",LOOP:"loop",MUTED:"muted",PLAYSINLINE:"playsinline",PRELOAD:"preload"},F={VOLUME:"volume",PLAYBACKRATE:"playbackrate",MUTED:"muted"},nt=Object.freeze({length:0,start(t){let a=t>>>0;if(a>=this.length)throw new DOMException(`Failed to execute 'start' on 'TimeRanges': The index provided (${a}) is greater than or equal to the maximum bound (${this.length}).`);return 0},end(t){let a=t>>>0;if(a>=this.length)throw new DOMException(`Failed to execute 'end' on 'TimeRanges': The index provided (${a}) is greater than or equal to the maximum bound (${this.length}).`);return 0}}),It=Nt.filter(t=>t!=="error"),Vt=Object.values(y).filter(t=>![y.PLAYSINLINE].includes(t)),Ht=Object.values(F);function st(t){t.querySelectorAll(":scope > track").forEach(a=>{var e;(e=t.media)==null||e.append(a.cloneNode())}),It.forEach(a=>{var e;(e=t.media)==null||e.addEventListener(a,i=>{t.dispatchEvent(new Event(i.type))})})}var Pe=class extends p.HTMLElement{static get observedAttributes(){return[...Vt,...Ht]}constructor(){super(),this.querySelectorAll(":scope > track").forEach(i=>{var r;(r=this.media)==null||r.append(i.cloneNode())});let a=i=>{for(let r of i)r.type==="childList"&&(r.removedNodes.forEach(o=>{var u,h;let n=(u=this.media)==null?void 0:u.querySelector(`track[src="${o.src}"]`);n&&((h=this.media)==null||h.removeChild(n))}),r.addedNodes.forEach(o=>{var n;(n=this.media)==null||n.append(o.cloneNode())}))};new MutationObserver(a).observe(this,{childList:!0,subtree:!0})}attributeChangedCallback(a,e,i){var r,o;switch(a){case F.MUTED:{this.media&&(this.media.muted=i!=null,this.media.defaultMuted=i!=null);return}case F.VOLUME:{let n=(r=R(i))!=null?r:1;this.media&&(this.media.volume=n);return}case F.PLAYBACKRATE:{let n=(o=R(i))!=null?o:1;this.media&&(this.media.playbackRate=n,this.media.defaultPlaybackRate=n);return}}}play(){var a,e;return(e=(a=this.media)==null?void 0:a.play())!=null?e:Promise.reject()}pause(){var a;(a=this.media)==null||a.pause()}requestCast(a){var e;return(e=this.media)==null?void 0:e.requestCast(a)}get media(){var a;return(a=this.shadowRoot)==null?void 0:a.querySelector("mux-video")}get paused(){var a,e;return(e=(a=this.media)==null?void 0:a.paused)!=null?e:!0}get duration(){var a,e;return(e=(a=this.media)==null?void 0:a.duration)!=null?e:NaN}get ended(){var a,e;return(e=(a=this.media)==null?void 0:a.ended)!=null?e:!1}get buffered(){var a,e;return(e=(a=this.media)==null?void 0:a.buffered)!=null?e:nt}get seekable(){var a,e;return(e=(a=this.media)==null?void 0:a.seekable)!=null?e:nt}get readyState(){var a,e;return(e=(a=this.media)==null?void 0:a.readyState)!=null?e:0}get videoWidth(){var a,e;return(e=(a=this.media)==null?void 0:a.videoWidth)!=null?e:0}get videoHeight(){var a,e;return(e=(a=this.media)==null?void 0:a.videoHeight)!=null?e:0}get currentTime(){var a,e;return(e=(a=this.media)==null?void 0:a.currentTime)!=null?e:0}set currentTime(a){this.media&&(this.media.currentTime=Number(a))}get volume(){var a,e;return(e=(a=this.media)==null?void 0:a.volume)!=null?e:1}set volume(a){this.media&&(this.media.volume=Number(a))}get playbackRate(){var a,e;return(e=(a=this.media)==null?void 0:a.playbackRate)!=null?e:1}set playbackRate(a){this.media&&(this.media.playbackRate=Number(a))}get defaultPlaybackRate(){var a;return(a=R(this.getAttribute(F.PLAYBACKRATE)))!=null?a:1}set defaultPlaybackRate(a){a!=null?this.setAttribute(F.PLAYBACKRATE,`${a}`):this.removeAttribute(F.PLAYBACKRATE)}get crossOrigin(){return X(this,y.CROSSORIGIN)}set crossOrigin(a){this.setAttribute(y.CROSSORIGIN,`${a}`)}get autoplay(){return X(this,y.AUTOPLAY)!=null}set autoplay(a){a?this.setAttribute(y.AUTOPLAY,typeof a=="string"?a:""):this.removeAttribute(y.AUTOPLAY)}get loop(){return X(this,y.LOOP)!=null}set loop(a){a?this.setAttribute(y.LOOP,""):this.removeAttribute(y.LOOP)}get muted(){var a,e;return(e=(a=this.media)==null?void 0:a.muted)!=null?e:!1}set muted(a){this.media&&(this.media.muted=Boolean(a))}get defaultMuted(){return X(this,y.MUTED)!=null}set defaultMuted(a){a?this.setAttribute(y.MUTED,""):this.removeAttribute(y.MUTED)}get playsInline(){return X(this,y.PLAYSINLINE)!=null}set playsInline(a){x("playsInline is set to true by default and is not currently supported as a setter.")}get preload(){return this.media?this.media.preload:this.getAttribute("preload")}set preload(a){["","none","metadata","auto"].includes(a)?this.setAttribute(y.PRELOAD,a):this.removeAttribute(y.PRELOAD)}};function X(t,a){return t.media?t.media.getAttribute(a):t.getAttribute(a)}var Be=Pe;import"media-chrome/dist/media-theme-element.js";var lt=`:host {
+  --media-control-display: var(--controls);
+  --media-loading-indicator-display: var(--loading-indicator);
+  --media-dialog-display: var(--dialog);
+  --media-play-button-display: var(--play-button);
+  --media-live-button-display: var(--live-button);
+  --media-seek-backward-button-display: var(--seek-backward-button);
+  --media-seek-forward-button-display: var(--seek-forward-button);
+  --media-mute-button-display: var(--mute-button);
+  --media-captions-button-display: var(--captions-button);
+  --media-captions-selectmenu-display: var(--captions-selectmenu, var(--media-captions-button-display));
+  --media-airplay-button-display: var(--airplay-button);
+  --media-pip-button-display: var(--pip-button);
+  --media-fullscreen-button-display: var(--fullscreen-button);
+  --media-cast-button-display: var(--cast-button);
+  --media-playback-rate-button-display: var(--playback-rate-button);
+  --media-volume-range-display: var(--volume-range);
+  --media-time-range-display: var(--time-range);
+  --media-time-display-display: var(--time-display);
+  --media-duration-display-display: var(--duration-display);
+  --media-title-display-display: var(--title-display);
+
   display: inline-block;
   width: 100%;
 }
@@ -27,162 +36,110 @@ a {
   text-decoration: underline;
 }
 
+media-theme {
+  width: 100%;
+  height: 100%;
+}
+
 ::part(top),
 [part~='top'] {
-  --media-controls: var(--controls, var(--top-controls));
-  --media-play-button: var(--play-button, var(--top-play-button));
-  --media-seek-live-button: var(--seek-live-button, var(--top-seek-live-button));
-  --media-seek-backward-button: var(--seek-backward-button, var(--top-seek-backward-button));
-  --media-seek-forward-button: var(--seek-forward-button, var(--top-seek-forward-button));
-  --media-mute-button: var(--mute-button, var(--top-mute-button));
-  --media-captions-button: var(--captions-button, var(--top-captions-button));
-  --media-captions-menu-button: var(
-    --captions-menu-button,
-    var(--media-captions-button, var(--top-captions-menu-button))
+  --media-control-display: var(--controls, var(--top-controls));
+  --media-play-button-display: var(--play-button, var(--top-play-button));
+  --media-live-button-display: var(--live-button, var(--top-live-button));
+  --media-seek-backward-button-display: var(--seek-backward-button, var(--top-seek-backward-button));
+  --media-seek-forward-button-display: var(--seek-forward-button, var(--top-seek-forward-button));
+  --media-mute-button-display: var(--mute-button, var(--top-mute-button));
+  --media-captions-button-display: var(--captions-button, var(--top-captions-button));
+  --media-captions-selectmenu-display: var(
+    --captions-selectmenu,
+    var(--media-captions-button-display, var(--top-captions-selectmenu))
   );
-  --media-airplay-button: var(--airplay-button, var(--top-airplay-button));
-  --media-pip-button: var(--pip-button, var(--top-pip-button));
-  --media-fullscreen-button: var(--fullscreen-button, var(--top-fullscreen-button));
-  --media-cast-button: var(--cast-button, var(--top-cast-button));
-  --media-playback-rate-button: var(--playback-rate-button, var(--top-playback-rate-button));
-  --media-volume-range: var(--volume-range, var(--top-volume-range));
-  --media-time-range: var(--time-range, var(--top-time-range));
-  --media-time-display: var(--time-display, var(--top-time-display));
-  --media-duration-display: var(--duration-display, var(--top-duration-display));
-  --media-title-display: var(--title-display, var(--top-title-display));
+  --media-airplay-button-display: var(--airplay-button, var(--top-airplay-button));
+  --media-pip-button-display: var(--pip-button, var(--top-pip-button));
+  --media-fullscreen-button-display: var(--fullscreen-button, var(--top-fullscreen-button));
+  --media-cast-button-display: var(--cast-button, var(--top-cast-button));
+  --media-playback-rate-button-display: var(--playback-rate-button, var(--top-playback-rate-button));
+  --media-volume-range-display: var(--volume-range, var(--top-volume-range));
+  --media-time-range-display: var(--time-range, var(--top-time-range));
+  --media-time-display-display: var(--time-display, var(--top-time-display));
+  --media-duration-display-display: var(--duration-display, var(--top-duration-display));
+  --media-title-display-display: var(--title-display, var(--top-title-display));
 }
 
 ::part(center),
 [part~='center'] {
-  --media-controls: var(--controls, var(--center-controls));
-  --media-play-button: var(--play-button, var(--center-play-button));
-  --media-seek-live-button: var(--seek-live-button, var(--center-seek-live-button));
-  --media-seek-backward-button: var(--seek-backward-button, var(--center-seek-backward-button));
-  --media-seek-forward-button: var(--seek-forward-button, var(--center-seek-forward-button));
-  --media-mute-button: var(--mute-button, var(--center-mute-button));
-  --media-captions-button: var(--captions-button, var(--center-captions-button));
-  --media-captions-menu-button: var(
-    --captions-menu-button,
-    var(--media-captions-button, var(--center-captions-menu-button))
+  --media-control-display: var(--controls, var(--center-controls));
+  --media-play-button-display: var(--play-button, var(--center-play-button));
+  --media-live-button-display: var(--live-button, var(--center-live-button));
+  --media-seek-backward-button-display: var(--seek-backward-button, var(--center-seek-backward-button));
+  --media-seek-forward-button-display: var(--seek-forward-button, var(--center-seek-forward-button));
+  --media-mute-button-display: var(--mute-button, var(--center-mute-button));
+  --media-captions-button-display: var(--captions-button, var(--center-captions-button));
+  --media-captions-selectmenu-display: var(
+    --captions-selectmenu,
+    var(--media-captions-button-display, var(--center-captions-selectmenu))
   );
-  --media-airplay-button: var(--airplay-button, var(--center-airplay-button));
-  --media-pip-button: var(--pip-button, var(--center-pip-button));
-  --media-fullscreen-button: var(--fullscreen-button, var(--center-fullscreen-button));
-  --media-cast-button: var(--cast-button, var(--center-cast-button));
-  --media-playback-rate-button: var(--playback-rate-button, var(--center-playback-rate-button));
-  --media-volume-range: var(--volume-range, var(--center-volume-range));
-  --media-time-range: var(--time-range, var(--center-time-range));
-  --media-time-display: var(--time-display, var(--center-time-display));
-  --media-duration-display: var(--duration-display, var(--center-duration-display));
+  --media-airplay-button-display: var(--airplay-button, var(--center-airplay-button));
+  --media-pip-button-display: var(--pip-button, var(--center-pip-button));
+  --media-fullscreen-button-display: var(--fullscreen-button, var(--center-fullscreen-button));
+  --media-cast-button-display: var(--cast-button, var(--center-cast-button));
+  --media-playback-rate-button-display: var(--playback-rate-button, var(--center-playback-rate-button));
+  --media-volume-range-display: var(--volume-range, var(--center-volume-range));
+  --media-time-range-display: var(--time-range, var(--center-time-range));
+  --media-time-display-display: var(--time-display, var(--center-time-display));
+  --media-duration-display-display: var(--duration-display, var(--center-duration-display));
 }
 
 ::part(bottom),
 [part~='bottom'] {
-  --media-controls: var(--controls, var(--bottom-controls));
-  --media-play-button: var(--play-button, var(--bottom-play-button));
-  --media-seek-live-button: var(--seek-live-button, var(--bottom-seek-live-button));
-  --media-seek-backward-button: var(--seek-backward-button, var(--bottom-seek-backward-button));
-  --media-seek-forward-button: var(--seek-forward-button, var(--bottom-seek-forward-button));
-  --media-mute-button: var(--mute-button, var(--bottom-mute-button));
-  --media-captions-button: var(--captions-button, var(--bottom-captions-button));
-  --media-captions-menu-button: var(
-    --captions-menu-button,
-    var(--media-captions-button, var(--bottom-captions-menu-button))
+  --media-control-display: var(--controls, var(--bottom-controls));
+  --media-play-button-display: var(--play-button, var(--bottom-play-button));
+  --media-live-button-display: var(--live-button, var(--bottom-live-button));
+  --media-seek-backward-button-display: var(--seek-backward-button, var(--bottom-seek-backward-button));
+  --media-seek-forward-button-display: var(--seek-forward-button, var(--bottom-seek-forward-button));
+  --media-mute-button-display: var(--mute-button, var(--bottom-mute-button));
+  --media-captions-button-display: var(--captions-button, var(--bottom-captions-button));
+  --media-captions-selectmenu-display: var(
+    --captions-selectmenu,
+    var(--media-captions-button-display, var(--bottom-captions-selectmenu))
   );
-  --media-airplay-button: var(--airplay-button, var(--bottom-airplay-button));
-  --media-pip-button: var(--pip-button, var(--bottom-pip-button));
-  --media-fullscreen-button: var(--fullscreen-button, var(--bottom-fullscreen-button));
-  --media-cast-button: var(--cast-button, var(--bottom-cast-button));
-  --media-playback-rate-button: var(--playback-rate-button, var(--bottom-playback-rate-button));
-  --media-volume-range: var(--volume-range, var(--bottom-volume-range));
-  --media-time-range: var(--time-range, var(--bottom-time-range));
-  --media-time-display: var(--time-display, var(--bottom-time-display));
-  --media-duration-display: var(--duration-display, var(--bottom-duration-display));
-  --media-title-display: var(--title-display, var(--bottom-title-display));
-}
-
-[part*='seek-live button'] {
-  display: var(--media-controls, var(--media-seek-live-button));
-}
-
-/** Once we implement these CSS vars in Media Chrome below selectors can be deleted! */
-
-::part(play button) {
-  display: var(--media-controls, var(--media-play-button));
+  --media-airplay-button-display: var(--airplay-button, var(--bottom-airplay-button));
+  --media-pip-button-display: var(--pip-button, var(--bottom-pip-button));
+  --media-fullscreen-button-display: var(--fullscreen-button, var(--bottom-fullscreen-button));
+  --media-cast-button-display: var(--cast-button, var(--bottom-cast-button));
+  --media-playback-rate-button-display: var(--playback-rate-button, var(--bottom-playback-rate-button));
+  --media-volume-range-display: var(--volume-range, var(--bottom-volume-range));
+  --media-time-range-display: var(--time-range, var(--bottom-time-range));
+  --media-time-display-display: var(--time-display, var(--bottom-time-display));
+  --media-duration-display-display: var(--duration-display, var(--bottom-duration-display));
+  --media-title-display-display: var(--title-display, var(--bottom-title-display));
 }
-::part(seek-backward button) {
-  display: var(--media-controls, var(--media-seek-backward-button));
-}
-::part(seek-forward button) {
-  display: var(--media-controls, var(--media-seek-forward-button));
-}
-::part(mute button) {
-  display: var(--media-controls, var(--media-mute-button));
-}
-::part(captions menu-button) {
-  display: var(--media-controls, var(--media-captions-menu-button, contents));
-}
-::part(airplay button) {
-  display: var(--media-controls, var(--media-airplay-button));
-}
-::part(pip button) {
-  display: var(--media-controls, var(--media-pip-button));
-}
-::part(fullscreen button) {
-  display: var(--media-controls, var(--media-fullscreen-button));
-}
-::part(cast button) {
-  display: var(--media-controls, var(--media-cast-button));
-}
-::part(playback-rate button) {
-  display: var(--media-controls, var(--media-playback-rate-button));
-}
-::part(volume range) {
-  display: var(--media-controls, var(--media-volume-range));
-}
-::part(time range) {
-  display: var(--media-controls, var(--media-time-range));
-}
-::part(time display) {
-  display: var(--media-controls, var(--media-time-display));
-}
-::part(title display) {
-  display: var(--media-controls, var(--media-title-display));
-}
-`;var ht=`<!-- prettier-ignore -->
+`;var dt=`<!-- prettier-ignore -->
 <template id="media-theme-mux">
   <style>
-    :host(:not([audio])) {
-      --secondary-color: transparent;
-    }
-
     :host {
-      --_primary-color: var(--primary-color, #fff);
+      --_primary-color: var(--media-primary-color, white);
+      --_secondary-color: var(--media-secondary-color, rgb(0 0 0 / .75));
 
       --media-icon-color: var(--_primary-color);
       --media-range-thumb-background: var(--_primary-color);
       --media-range-bar-color: var(--_primary-color);
-      --media-control-background: var(--secondary-color);
-      --media-control-hover-background: var(--secondary-color);
+      --media-control-background: var(--_secondary-color);
+      --media-control-hover-background: var(--_secondary-color);
       --media-time-buffered-color: rgba(255, 255, 255, 0.4);
-      --media-range-track-background: rgba(255, 255, 255, 0.5);
-      --media-range-track-border-radius: 3px;
-      --media-preview-thumbnail-border: 1px solid #fff;
-      --media-preview-thumbnail-border-radius: 2px;
-      --media-preview-time-margin: 5px 0 2px;
-      color: var(--_primary-color);
-      display: inline-block;
-      width: 100%;
-      height: 100%;
-    }
-
-    :host(.two-tone:not([audio])) {
-      --mux-time-range-padding: 0px; /* px is needed in calc() */
+      --media-range-track-background:
+        linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
+        linear-gradient(rgba(20, 20, 30, 0.7), rgba(20, 20, 30, 0.7));
       --media-preview-thumbnail-border: 0;
       --media-preview-thumbnail-border-radius: 2px 2px 0 0;
       --media-preview-time-border-radius: 0 0 2px 2px;
       --media-preview-time-margin: 0 0 8px;
       --media-preview-time-text-shadow: none;
+
+      color: var(--_primary-color);
+      display: inline-block;
+      width: 100%;
+      height: 100%;
     }
 
     :host([audio]) {
@@ -191,15 +148,12 @@ a {
       --media-preview-time-text-shadow: none;
     }
 
-    :host(.two-tone:not([audio])) media-time-range {
-      --media-range-track-border-radius: 0;
-    }
-
     :host([audio]) ::slotted([slot='media']) {
       height: 0px;
     }
 
-    :host([audio]) :is(media-poster-image, media-loading-indicator) {
+    :host([audio]) media-loading-indicator,
+    :host([audio]) ::slotted([slot=poster]) {
       display: none;
     }
 
@@ -221,17 +175,16 @@ a {
       cursor: not-allowed;
     }
 
-    :host(:not([audio])) media-captions-menu-button::part(listbox) {
-      bottom: 42px;
+    :host(:not([audio])) media-captions-selectmenu::part(listbox) {
       z-index: 10;
     }
 
-    media-controller:not(:is([media-captions-list], [media-subtitles-list])) media-captions-menu-button {
-      --captions-menu-button: none;
+    media-controller:not(:is([media-captions-list], [media-subtitles-list])) media-captions-selectmenu {
+      --captions-selectmenu: none;
     }
 
-    media-captions-menu-button {
-      --media-listbox-background: var(--secondary-color);
+    media-captions-selectmenu {
+      --media-listbox-background: var(--_secondary-color);
       --media-listbox-selected-background: rgba(255, 255, 255, 0.28);
       --media-listbox-hover-background: none;
       --media-listbox-hover-outline: white solid 1px;
@@ -258,32 +211,17 @@ a {
       --pip-button: none;
     }
 
-    media-controller {
-      width: 100%;
-      height: 100%;
-    }
-
     :host media-time-range {
       color: var(--_primary-color);
       --media-range-thumb-opacity: 0;
     }
 
     :host(:not([audio])) media-time-range {
-      --media-range-padding-left: var(--mux-time-range-padding, 10px);
-      --media-range-padding-right: var(--mux-time-range-padding, 10px);
       --media-range-padding: 0;
+      background: transparent;
       z-index: 10;
       height: 10px;
       bottom: -3px;
-      background: linear-gradient(
-        180deg,
-        transparent,
-        transparent 3px,
-        var(--media-control-background, rgba(20, 20, 30, 0.7)) 3px,
-        var(--media-control-background, rgba(20, 20, 30, 0.7)) 7px,
-        transparent 7px,
-        transparent
-      );
       width: 100%;
     }
 
@@ -303,7 +241,7 @@ a {
       line-height: 0;
     }
 
-    media-control-bar :is(media-text-display, mxp-time-display):first-child {
+    media-control-bar :is(media-text-display, media-time-display):first-child {
       --media-control-padding: 9px 5px 9px 10px;
     }
 
@@ -392,10 +330,10 @@ a {
     media-loading-indicator {
       --media-loading-icon-width: 100%;
       --media-button-icon-height: auto;
+      display: var(--media-control-display, var(--media-loading-indicator-display, flex));
       pointer-events: none;
       position: absolute;
       width: min(15%, 150px);
-      display: flex;
       flex-flow: row;
       align-items: center;
       justify-content: center;
@@ -437,6 +375,215 @@ a {
       font-size: 21px;
     }
   </style>
+
+  <template partial="TitleDisplay">
+    <template if="title">
+      <media-text-display part="top title display" class="title-display">
+        {{title}}
+      </media-text-display>
+    </template>
+  </template>
+
+  <template partial="PlayButton">
+    <media-play-button
+      part="{{section ?? 'bottom'}} play button"
+      disabled="{{disabled}}"
+      aria-disabled="{{disabled}}"
+    >
+      <svg aria-hidden="true" viewBox="0 0 24 24" slot="play">
+        <path d="m6.73 20.93 14.05-8.54a.46.46 0 0 0 0-.78L6.73 3.07a.48.48 0 0 0-.73.39v17.07a.48.48 0 0 0 .73.4Z" />
+      </svg>
+      <svg aria-hidden="true" viewBox="0 0 24 24" slot="pause">
+        <path
+          d="M6 19.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-15a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v15ZM14.5 4a.5.5 0 0 0-.5.5v15a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-15a.5.5 0 0 0-.5-.5h-3Z"
+        />
+      </svg>
+    </media-play-button>
+  </template>
+
+  <template partial="SeekBackwardButton">
+    <media-seek-backward-button
+      seek-offset="{{backwardSeekOffset}}"
+      part="{{section ?? 'bottom'}} seek-backward button"
+      disabled="{{disabled}}"
+      aria-disabled="{{disabled}}"
+    >
+      <svg aria-hidden="true" viewBox="0 0 22 24" slot="backward">
+        <path d="M11 6V3L5.37 7 11 10.94V8a5.54 5.54 0 0 1 1.9 10.48v2.12A7.5 7.5 0 0 0 11 6Z" />
+        <text class="value" transform="translate(2.5 21)" style="font-size: 8px; font-family: 'ArialMT', 'Arial'">
+          {{backwardSeekOffset}}
+        </text>
+      </svg>
+    </media-seek-backward-button>
+  </template>
+
+  <template partial="SeekForwardButton">
+    <media-seek-forward-button
+      seek-offset="{{forwardSeekOffset}}"
+      part="{{section ?? 'bottom'}} seek-forward button"
+      disabled="{{disabled}}"
+      aria-disabled="{{disabled}}"
+    >
+      <svg aria-hidden="true" viewBox="0 0 22 24" slot="forward">
+        <path d="M11 6V3l5.61 4L11 10.94V8a5.54 5.54 0 0 0-1.9 10.48v2.12A7.5 7.5 0 0 1 11 6Z" />
+        <text class="value" transform="translate(10 21)" style="font-size: 8px; font-family: 'ArialMT', 'Arial'">
+          {{forwardSeekOffset}}
+        </text>
+      </svg>
+    </media-seek-forward-button>
+  </template>
+
+  <template partial="MuteButton">
+    <media-mute-button part="bottom mute button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
+      <svg aria-hidden="true" viewBox="0 0 24 24" slot="high">
+        <path
+          d="m11.14 4.86-4 4a.49.49 0 0 1-.35.14H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.5.5 0 0 0 .85-.36V5.21a.5.5 0 0 0-.86-.35Zm2.74-1.56v1.52A7.52 7.52 0 0 1 19.47 12a7.52 7.52 0 0 1-5.59 7.18v1.52A9 9 0 0 0 21 12a9 9 0 0 0-7.12-8.7Zm3.56 8.7a5.49 5.49 0 0 0-3.56-5.1v1.66a3.93 3.93 0 0 1 0 6.88v1.66a5.49 5.49 0 0 0 3.56-5.1Z"
+        />
+      </svg>
+      <svg aria-hidden="true" viewBox="0 0 24 24" slot="low">
+        <path
+          d="m11.14 4.853-4 4a.49.49 0 0 1-.35.14H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.5.5 0 0 0 .85-.36V5.203a.5.5 0 0 0-.86-.35Zm6.3 7.14a5.49 5.49 0 0 0-3.56-5.1v1.66a3.93 3.93 0 0 1 0 6.88v1.66a5.49 5.49 0 0 0 3.56-5.1Z"
+        />
+      </svg>
+      <svg aria-hidden="true" viewBox="0 0 24 24" slot="medium">
+        <path
+          d="m11.14 4.853-4 4a.49.49 0 0 1-.35.14H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.5.5 0 0 0 .85-.36V5.203a.5.5 0 0 0-.86-.35Zm6.3 7.14a5.49 5.49 0 0 0-3.56-5.1v1.66a3.93 3.93 0 0 1 0 6.88v1.66a5.49 5.49 0 0 0 3.56-5.1Z"
+        />
+      </svg>
+      <svg aria-hidden="true" viewBox="0 0 24 24" slot="off">
+        <path
+          d="m3 4.05 4.48 4.47-.33.33a.49.49 0 0 1-.36.15H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.48.48 0 0 0 .36.15.5.5 0 0 0 .5-.5v-5.75l4.67 4.66a7.71 7.71 0 0 1-2.79 1.47v1.52a9.32 9.32 0 0 0 3.87-1.91L20 21l1-1L4.06 3 3 4.05Zm5.36 5.36 2.39 2.39V17L8 14.26a1.74 1.74 0 0 0-1.24-.51H4.25v-3.5h2.54A1.74 1.74 0 0 0 8 9.74l.36-.33ZM19.47 12a7.19 7.19 0 0 1-.89 3.47l1.11 1.1A8.64 8.64 0 0 0 21 12a9 9 0 0 0-7.12-8.7v1.52A7.52 7.52 0 0 1 19.47 12ZM12 8.88V5.21a.5.5 0 0 0-.5-.5.48.48 0 0 0-.36.15L9.56 6.44 12 8.88ZM15.91 12a4.284 4.284 0 0 1-.07.72l1.22 1.22a5.2 5.2 0 0 0 .38-1.94 5.49 5.49 0 0 0-3.56-5.1v1.66A4 4 0 0 1 15.91 12Z"
+        />
+      </svg>
+    </media-mute-button>
+  </template>
+
+  <template partial="PipButton">
+    <media-pip-button part="bottom pip button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
+      <svg aria-hidden="true" viewBox="0 0 26 24" slot="enter">
+        <path
+          d="M22 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h6.75v-1.25h-6.5V4.25h17.5v6.5H23V4a1 1 0 0 0-1-1Zm0 10h-8a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1Zm-.5 6.5h-7v-5h7v5Z"
+        />
+      </svg>
+      <svg aria-hidden="true" viewBox="0 0 26 24" slot="exit">
+        <path
+          d="M22 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h6.75v-1.25h-6.5V4.25h17.5v6.5H23V4a1 1 0 0 0-1-1Zm0 10h-8a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1Zm-.5 6.5h-7v-5h7v5Z"
+        />
+      </svg>
+    </media-pip-button>
+  </template>
+
+  <template partial="CaptionsMenuButton">
+    <media-captions-selectmenu
+      default-showing="{{defaultShowingCaptions}}"
+      part="bottom captions selectmenu"
+      disabled="{{disabled}}"
+      aria-disabled="{{disabled}}"
+    >
+      <svg aria-hidden="true" viewBox="0 0 26 24" slot="on">
+        <path
+          d="M22.832 5.68a2.58 2.58 0 0 0-2.3-2.5c-3.62-.24-11.44-.24-15.06 0a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c3.62.24 11.44.24 15.06 0a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-11.41 10.1a3.63 3.63 0 0 1-1.51.32 4.76 4.76 0 0 1-1.63-.27 4 4 0 0 1-1.28-.83 3.67 3.67 0 0 1-.84-1.26 4.23 4.23 0 0 1-.3-1.63 4.28 4.28 0 0 1 .3-1.64 3.53 3.53 0 0 1 .84-1.21 3.89 3.89 0 0 1 1.29-.8 4.76 4.76 0 0 1 1.63-.27 4.06 4.06 0 0 1 1.35.24c.225.091.44.205.64.34a2.7 2.7 0 0 1 .55.52l-1.27 1a1.79 1.79 0 0 0-.6-.46 2 2 0 0 0-.83-.16 2 2 0 0 0-1.56.69 2.35 2.35 0 0 0-.46.77 2.78 2.78 0 0 0-.16 1c-.009.34.046.68.16 1 .104.283.26.545.46.77.188.21.415.38.67.5a2 2 0 0 0 .84.18 1.87 1.87 0 0 0 .9-.21 1.78 1.78 0 0 0 .65-.6l1.38 1a2.88 2.88 0 0 1-1.22 1.01Zm7.52 0a3.63 3.63 0 0 1-1.51.32 4.76 4.76 0 0 1-1.63-.27 3.89 3.89 0 0 1-1.28-.83 3.55 3.55 0 0 1-.85-1.26 4.23 4.23 0 0 1-.3-1.63 4.28 4.28 0 0 1 .3-1.64 3.43 3.43 0 0 1 .85-1.25 3.75 3.75 0 0 1 1.28-.8 4.76 4.76 0 0 1 1.63-.27 4 4 0 0 1 1.35.24c.225.091.44.205.64.34.21.144.395.32.55.52l-1.27 1a1.79 1.79 0 0 0-.6-.46 2 2 0 0 0-.83-.16 2 2 0 0 0-1.56.69 2.352 2.352 0 0 0-.46.77 3.01 3.01 0 0 0-.16 1c-.003.34.05.678.16 1 .108.282.263.542.46.77.188.21.416.38.67.5a2 2 0 0 0 .84.18 1.87 1.87 0 0 0 .9-.21 1.78 1.78 0 0 0 .65-.6l1.38 1a2.82 2.82 0 0 1-1.21 1.05Z"
+        />
+      </svg>
+      <svg aria-hidden="true" viewBox="0 0 26 24" slot="off">
+        <path
+          d="M22.832 5.68a2.58 2.58 0 0 0-2.3-2.5c-1.81-.12-4.67-.18-7.53-.18-2.86 0-5.72.06-7.53.18a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c1.81.12 4.67.18 7.53.18 2.86 0 5.72-.06 7.53-.18a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-1.49 12.53a1.11 1.11 0 0 1-.91 1.11c-1.67.11-4.45.18-7.43.18-2.98 0-5.76-.07-7.43-.18a1.11 1.11 0 0 1-.91-1.11c-.21-4.137-.21-8.283 0-12.42a1.11 1.11 0 0 1 .91-1.11c1.67-.11 4.43-.18 7.43-.18s5.76.07 7.43.18a1.11 1.11 0 0 1 .91 1.11c.21 4.137.21 8.283 0 12.42ZM10.843 14a1.55 1.55 0 0 1-.76.18 1.57 1.57 0 0 1-.71-.18 1.69 1.69 0 0 1-.57-.42 2.099 2.099 0 0 1-.38-.58 2.47 2.47 0 0 1 0-1.64 2 2 0 0 1 .39-.66 1.73 1.73 0 0 1 .58-.42c.23-.103.479-.158.73-.16.241-.004.48.044.7.14.199.088.373.222.51.39l1.08-.89a2.179 2.179 0 0 0-.47-.44 2.81 2.81 0 0 0-.54-.32 2.91 2.91 0 0 0-.58-.15 2.71 2.71 0 0 0-.56 0 4.08 4.08 0 0 0-1.38.15 3.27 3.27 0 0 0-1.09.67 3.14 3.14 0 0 0-.71 1.06 3.62 3.62 0 0 0-.26 1.39 3.57 3.57 0 0 0 .26 1.38 3 3 0 0 0 .71 1.06c.316.293.687.52 1.09.67.443.16.91.238 1.38.23a3.2 3.2 0 0 0 1.28-.27c.401-.183.747-.47 1-.83l-1.17-.88a1.42 1.42 0 0 1-.53.52Zm6.62 0a1.58 1.58 0 0 1-.76.18 1.54 1.54 0 0 1-.7-.18 1.69 1.69 0 0 1-.57-.42 2.12 2.12 0 0 1-.43-.58 2.29 2.29 0 0 1 .39-2.3 1.84 1.84 0 0 1 1.32-.58c.241-.003.48.045.7.14.199.088.373.222.51.39l1.08-.92a2.43 2.43 0 0 0-.47-.44 3.22 3.22 0 0 0-.53-.29 2.999 2.999 0 0 0-.57-.15 2.87 2.87 0 0 0-.57 0 4.06 4.06 0 0 0-1.36.15 3.17 3.17 0 0 0-1.09.67 3 3 0 0 0-.72 1.06 3.62 3.62 0 0 0-.25 1.39 3.57 3.57 0 0 0 .25 1.38c.16.402.405.764.72 1.06a3.17 3.17 0 0 0 1.09.67c.44.16.904.237 1.37.23.441 0 .877-.092 1.28-.27a2.45 2.45 0 0 0 1-.83l-1.15-.85a1.49 1.49 0 0 1-.54.49Z"
+        />
+      </svg>
+    </media-captions-selectmenu>
+  </template>
+
+  <template partial="AirplayButton">
+    <media-airplay-button part="bottom airplay button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
+      <svg aria-hidden="true" viewBox="0 0 26 24" slot="airplay">
+        <path
+          d="M13.19 14.22a.25.25 0 0 0-.38 0l-5.46 6.37a.25.25 0 0 0 .19.41h10.92a.25.25 0 0 0 .19-.41l-5.46-6.37Z"
+        />
+        <path
+          d="M22 3H4a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h2.94L8 16.75H4.25V4.25h17.5v12.5H18L19.06 18H22a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Z"
+        />
+      </svg>
+    </media-airplay-button>
+  </template>
+
+  <template partial="FullscreenButton">
+    <media-fullscreen-button part="bottom fullscreen button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
+      <svg aria-hidden="true" viewBox="0 0 24 24" slot="enter">
+        <path
+          d="M20.25 14.5a.76.76 0 0 0-.75.75v4.25h-4.25a.75.75 0 1 0 0 1.5h5a.76.76 0 0 0 .75-.75v-5a.76.76 0 0 0-.75-.75Zm0-11.5h-5a.76.76 0 0 0-.75.75.76.76 0 0 0 .75.75h4.25v4.25a.75.75 0 1 0 1.5 0v-5a.76.76 0 0 0-.75-.75ZM8.75 19.5H4.5v-4.25a.76.76 0 0 0-.75-.75.76.76 0 0 0-.75.75v5a.76.76 0 0 0 .75.75h5a.75.75 0 1 0 0-1.5Zm0-16.5h-5a.76.76 0 0 0-.75.75v5a.76.76 0 0 0 .75.75.76.76 0 0 0 .75-.75V4.5h4.25a.76.76 0 0 0 .75-.75.76.76 0 0 0-.75-.75Z"
+        />
+      </svg>
+      <svg aria-hidden="true" viewBox="0 0 24 24" slot="exit">
+        <path
+          d="M20.25 14.5h-5a.76.76 0 0 0-.75.75v5a.75.75 0 1 0 1.5 0V16h4.25a.75.75 0 1 0 0-1.5Zm-5-5h5a.75.75 0 1 0 0-1.5H16V3.75a.75.75 0 1 0-1.5 0v5a.76.76 0 0 0 .75.75Zm-6.5 5h-5a.75.75 0 1 0 0 1.5H8v4.25a.75.75 0 1 0 1.5 0v-5a.76.76 0 0 0-.75-.75Zm0-11.5a.76.76 0 0 0-.75.75V8H3.75a.75.75 0 0 0 0 1.5h5a.76.76 0 0 0 .75-.75v-5A.76.76 0 0 0 8.75 3Z"
+        />
+      </svg>
+    </media-fullscreen-button>
+  </template>
+
+  <template partial="CastButton">
+    <media-cast-button part="bottom cast button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
+      <svg aria-hidden="true" viewBox="0 0 26 24" slot="enter">
+        <path d="M3 15.5V17c2.206 0 4 1.794 4 4h1.5A5.5 5.5 0 0 0 3 15.5Zm0 3V21h2.5A2.5 2.5 0 0 0 3 18.5Z" />
+        <path d="M3 12.5V14c3.86 0 7 3.14 7 7h1.5A8.5 8.5 0 0 0 3 12.5Z" />
+        <path
+          d="M22 3H4a1 1 0 0 0-1 1v6.984c.424 0 .84.035 1.25.086V4.25h17.5v15.5h-8.82c.051.41.086.826.086 1.25H22a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Z"
+        />
+      </svg>
+      <svg aria-hidden="true" viewBox="0 0 26 24" slot="exit">
+        <path d="M3 15.5V17c2.206 0 4 1.794 4 4h1.5A5.5 5.5 0 0 0 3 15.5Zm0 3V21h2.5A2.5 2.5 0 0 0 3 18.5Z" />
+        <path d="M3 12.5V14c3.86 0 7 3.14 7 7h1.5A8.5 8.5 0 0 0 3 12.5Z" />
+        <path
+          d="M22 3H4a1 1 0 0 0-1 1v6.984c.424 0 .84.035 1.25.086V4.25h17.5v15.5h-8.82c.051.41.086.826.086 1.25H22a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Z"
+        />
+        <path d="M20.5 5.5h-15v5.811c3.52.906 6.283 3.67 7.189 7.19H20.5V5.5Z" />
+      </svg>
+    </media-cast-button>
+  </template>
+
+  <template partial="LiveButton">
+    <media-live-button
+      part="{{section ?? 'top'}} live button"
+      disabled="{{disabled}}"
+      aria-disabled="{{disabled}}"
+    ></media-live-button>
+  </template>
+
+  <template partial="PlaybackRateButton">
+    <media-playback-rate-button
+      rates="{{playbackRates}}"
+      part="bottom playback-rate button"
+      disabled="{{disabled}}"
+      aria-disabled="{{disabled}}"
+    ></media-playback-rate-button>
+  </template>
+
+  <template partial="VolumeRange">
+    <media-volume-range
+      part="bottom volume range"
+      disabled="{{disabled}}"
+      aria-disabled="{{disabled}}"
+    ></media-volume-range>
+  </template>
+
+  <template partial="TimeDisplay">
+    <media-time-display
+      remaining="{{defaultShowRemainingTime}}"
+      show-duration="{{!hideDuration}}"
+      part="bottom time display"
+      disabled="{{disabled}}"
+      aria-disabled="{{disabled}}"
+    ></media-time-display>
+  </template>
+
+  <template partial="TimeRange">
+    <media-time-range
+      part="bottom time range"
+      disabled="{{disabled}}"
+      aria-disabled="{{disabled}}"
+    ></media-time-range>
+  </template>
+
   <media-controller
     breakpoints="sm:300 md:700"
     gestures-disabled="{{disabled}}"
@@ -446,222 +593,9 @@ a {
     exportparts="layer, media-layer, poster-layer, vertical-layer, centered-layer, gesture-layer"
   >
     <slot name="media" slot="media"></slot>
-    <media-poster-image
-      slot="poster"
-      part="poster"
-      src="{{poster}}"
-      placeholder-src="{{placeholder}}"
-    ></media-poster-image>
+    <slot name="poster" slot="poster"></slot>
     <media-loading-indicator slot="centered-chrome" no-auto-hide></media-loading-indicator>
 
-    <template partial="TitleDisplay">
-      <template if="title">
-        <media-text-display part="top title display" class="title-display">
-          {{title}}
-        </media-text-display>
-      </template>
-    </template>
-
-    <template partial="PlayButton">
-      <media-play-button
-        part="{{section ?? 'bottom'}} play button"
-        disabled="{{disabled}}"
-        aria-disabled="{{disabled}}"
-      >
-        <svg aria-hidden="true" viewBox="0 0 24 24" slot="play">
-          <path d="m6.73 20.93 14.05-8.54a.46.46 0 0 0 0-.78L6.73 3.07a.48.48 0 0 0-.73.39v17.07a.48.48 0 0 0 .73.4Z" />
-        </svg>
-        <svg aria-hidden="true" viewBox="0 0 24 24" slot="pause">
-          <path
-            d="M6 19.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-15a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v15ZM14.5 4a.5.5 0 0 0-.5.5v15a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-15a.5.5 0 0 0-.5-.5h-3Z"
-          />
-        </svg>
-      </media-play-button>
-    </template>
-
-    <template partial="SeekBackwardButton">
-      <media-seek-backward-button
-        seek-offset="{{backwardSeekOffset}}"
-        part="{{section ?? 'bottom'}} seek-backward button"
-        disabled="{{disabled}}"
-        aria-disabled="{{disabled}}"
-      >
-        <svg aria-hidden="true" viewBox="0 0 22 24" slot="backward">
-          <path d="M11 6V3L5.37 7 11 10.94V8a5.54 5.54 0 0 1 1.9 10.48v2.12A7.5 7.5 0 0 0 11 6Z" />
-          <text class="value" transform="translate(2.5 21)" style="font-size: 8px; font-family: 'ArialMT', 'Arial'">
-            {{backwardSeekOffset}}
-          </text>
-        </svg>
-      </media-seek-backward-button>
-    </template>
-
-    <template partial="SeekForwardButton">
-      <media-seek-forward-button
-        seek-offset="{{forwardSeekOffset}}"
-        part="{{section ?? 'bottom'}} seek-forward button"
-        disabled="{{disabled}}"
-        aria-disabled="{{disabled}}"
-      >
-        <svg aria-hidden="true" viewBox="0 0 22 24" slot="forward">
-          <path d="M11 6V3l5.61 4L11 10.94V8a5.54 5.54 0 0 0-1.9 10.48v2.12A7.5 7.5 0 0 1 11 6Z" />
-          <text class="value" transform="translate(10 21)" style="font-size: 8px; font-family: 'ArialMT', 'Arial'">
-            {{forwardSeekOffset}}
-          </text>
-        </svg>
-      </media-seek-forward-button>
-    </template>
-
-    <template partial="MuteButton">
-      <media-mute-button part="bottom mute button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
-        <svg aria-hidden="true" viewBox="0 0 24 24" slot="high">
-          <path
-            d="m11.14 4.86-4 4a.49.49 0 0 1-.35.14H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.5.5 0 0 0 .85-.36V5.21a.5.5 0 0 0-.86-.35Zm2.74-1.56v1.52A7.52 7.52 0 0 1 19.47 12a7.52 7.52 0 0 1-5.59 7.18v1.52A9 9 0 0 0 21 12a9 9 0 0 0-7.12-8.7Zm3.56 8.7a5.49 5.49 0 0 0-3.56-5.1v1.66a3.93 3.93 0 0 1 0 6.88v1.66a5.49 5.49 0 0 0 3.56-5.1Z"
-          />
-        </svg>
-        <svg aria-hidden="true" viewBox="0 0 24 24" slot="low">
-          <path
-            d="m11.14 4.853-4 4a.49.49 0 0 1-.35.14H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.5.5 0 0 0 .85-.36V5.203a.5.5 0 0 0-.86-.35Zm6.3 7.14a5.49 5.49 0 0 0-3.56-5.1v1.66a3.93 3.93 0 0 1 0 6.88v1.66a5.49 5.49 0 0 0 3.56-5.1Z"
-          />
-        </svg>
-        <svg aria-hidden="true" viewBox="0 0 24 24" slot="medium">
-          <path
-            d="m11.14 4.853-4 4a.49.49 0 0 1-.35.14H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.5.5 0 0 0 .85-.36V5.203a.5.5 0 0 0-.86-.35Zm6.3 7.14a5.49 5.49 0 0 0-3.56-5.1v1.66a3.93 3.93 0 0 1 0 6.88v1.66a5.49 5.49 0 0 0 3.56-5.1Z"
-          />
-        </svg>
-        <svg aria-hidden="true" viewBox="0 0 24 24" slot="off">
-          <path
-            d="m3 4.05 4.48 4.47-.33.33a.49.49 0 0 1-.36.15H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.48.48 0 0 0 .36.15.5.5 0 0 0 .5-.5v-5.75l4.67 4.66a7.71 7.71 0 0 1-2.79 1.47v1.52a9.32 9.32 0 0 0 3.87-1.91L20 21l1-1L4.06 3 3 4.05Zm5.36 5.36 2.39 2.39V17L8 14.26a1.74 1.74 0 0 0-1.24-.51H4.25v-3.5h2.54A1.74 1.74 0 0 0 8 9.74l.36-.33ZM19.47 12a7.19 7.19 0 0 1-.89 3.47l1.11 1.1A8.64 8.64 0 0 0 21 12a9 9 0 0 0-7.12-8.7v1.52A7.52 7.52 0 0 1 19.47 12ZM12 8.88V5.21a.5.5 0 0 0-.5-.5.48.48 0 0 0-.36.15L9.56 6.44 12 8.88ZM15.91 12a4.284 4.284 0 0 1-.07.72l1.22 1.22a5.2 5.2 0 0 0 .38-1.94 5.49 5.49 0 0 0-3.56-5.1v1.66A4 4 0 0 1 15.91 12Z"
-          />
-        </svg>
-      </media-mute-button>
-    </template>
-
-    <template partial="PipButton">
-      <media-pip-button part="bottom pip button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
-        <svg aria-hidden="true" viewBox="0 0 26 24" slot="enter">
-          <path
-            d="M22 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h6.75v-1.25h-6.5V4.25h17.5v6.5H23V4a1 1 0 0 0-1-1Zm0 10h-8a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1Zm-.5 6.5h-7v-5h7v5Z"
-          />
-        </svg>
-        <svg aria-hidden="true" viewBox="0 0 26 24" slot="exit">
-          <path
-            d="M22 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h6.75v-1.25h-6.5V4.25h17.5v6.5H23V4a1 1 0 0 0-1-1Zm0 10h-8a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1Zm-.5 6.5h-7v-5h7v5Z"
-          />
-        </svg>
-      </media-pip-button>
-    </template>
-
-    <template partial="CaptionsMenuButton">
-      <media-captions-menu-button
-        default-showing="{{defaultShowingCaptions}}"
-        part="bottom captions menu-button"
-        disabled="{{disabled}}"
-        aria-disabled="{{disabled}}"
-      >
-        <svg aria-hidden="true" viewBox="0 0 26 24" slot="on">
-          <path
-            d="M22.832 5.68a2.58 2.58 0 0 0-2.3-2.5c-3.62-.24-11.44-.24-15.06 0a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c3.62.24 11.44.24 15.06 0a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-11.41 10.1a3.63 3.63 0 0 1-1.51.32 4.76 4.76 0 0 1-1.63-.27 4 4 0 0 1-1.28-.83 3.67 3.67 0 0 1-.84-1.26 4.23 4.23 0 0 1-.3-1.63 4.28 4.28 0 0 1 .3-1.64 3.53 3.53 0 0 1 .84-1.21 3.89 3.89 0 0 1 1.29-.8 4.76 4.76 0 0 1 1.63-.27 4.06 4.06 0 0 1 1.35.24c.225.091.44.205.64.34a2.7 2.7 0 0 1 .55.52l-1.27 1a1.79 1.79 0 0 0-.6-.46 2 2 0 0 0-.83-.16 2 2 0 0 0-1.56.69 2.35 2.35 0 0 0-.46.77 2.78 2.78 0 0 0-.16 1c-.009.34.046.68.16 1 .104.283.26.545.46.77.188.21.415.38.67.5a2 2 0 0 0 .84.18 1.87 1.87 0 0 0 .9-.21 1.78 1.78 0 0 0 .65-.6l1.38 1a2.88 2.88 0 0 1-1.22 1.01Zm7.52 0a3.63 3.63 0 0 1-1.51.32 4.76 4.76 0 0 1-1.63-.27 3.89 3.89 0 0 1-1.28-.83 3.55 3.55 0 0 1-.85-1.26 4.23 4.23 0 0 1-.3-1.63 4.28 4.28 0 0 1 .3-1.64 3.43 3.43 0 0 1 .85-1.25 3.75 3.75 0 0 1 1.28-.8 4.76 4.76 0 0 1 1.63-.27 4 4 0 0 1 1.35.24c.225.091.44.205.64.34.21.144.395.32.55.52l-1.27 1a1.79 1.79 0 0 0-.6-.46 2 2 0 0 0-.83-.16 2 2 0 0 0-1.56.69 2.352 2.352 0 0 0-.46.77 3.01 3.01 0 0 0-.16 1c-.003.34.05.678.16 1 .108.282.263.542.46.77.188.21.416.38.67.5a2 2 0 0 0 .84.18 1.87 1.87 0 0 0 .9-.21 1.78 1.78 0 0 0 .65-.6l1.38 1a2.82 2.82 0 0 1-1.21 1.05Z"
-          />
-        </svg>
-        <svg aria-hidden="true" viewBox="0 0 26 24" slot="off">
-          <path
-            d="M22.832 5.68a2.58 2.58 0 0 0-2.3-2.5c-1.81-.12-4.67-.18-7.53-.18-2.86 0-5.72.06-7.53.18a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c1.81.12 4.67.18 7.53.18 2.86 0 5.72-.06 7.53-.18a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-1.49 12.53a1.11 1.11 0 0 1-.91 1.11c-1.67.11-4.45.18-7.43.18-2.98 0-5.76-.07-7.43-.18a1.11 1.11 0 0 1-.91-1.11c-.21-4.137-.21-8.283 0-12.42a1.11 1.11 0 0 1 .91-1.11c1.67-.11 4.43-.18 7.43-.18s5.76.07 7.43.18a1.11 1.11 0 0 1 .91 1.11c.21 4.137.21 8.283 0 12.42ZM10.843 14a1.55 1.55 0 0 1-.76.18 1.57 1.57 0 0 1-.71-.18 1.69 1.69 0 0 1-.57-.42 2.099 2.099 0 0 1-.38-.58 2.47 2.47 0 0 1 0-1.64 2 2 0 0 1 .39-.66 1.73 1.73 0 0 1 .58-.42c.23-.103.479-.158.73-.16.241-.004.48.044.7.14.199.088.373.222.51.39l1.08-.89a2.179 2.179 0 0 0-.47-.44 2.81 2.81 0 0 0-.54-.32 2.91 2.91 0 0 0-.58-.15 2.71 2.71 0 0 0-.56 0 4.08 4.08 0 0 0-1.38.15 3.27 3.27 0 0 0-1.09.67 3.14 3.14 0 0 0-.71 1.06 3.62 3.62 0 0 0-.26 1.39 3.57 3.57 0 0 0 .26 1.38 3 3 0 0 0 .71 1.06c.316.293.687.52 1.09.67.443.16.91.238 1.38.23a3.2 3.2 0 0 0 1.28-.27c.401-.183.747-.47 1-.83l-1.17-.88a1.42 1.42 0 0 1-.53.52Zm6.62 0a1.58 1.58 0 0 1-.76.18 1.54 1.54 0 0 1-.7-.18 1.69 1.69 0 0 1-.57-.42 2.12 2.12 0 0 1-.43-.58 2.29 2.29 0 0 1 .39-2.3 1.84 1.84 0 0 1 1.32-.58c.241-.003.48.045.7.14.199.088.373.222.51.39l1.08-.92a2.43 2.43 0 0 0-.47-.44 3.22 3.22 0 0 0-.53-.29 2.999 2.999 0 0 0-.57-.15 2.87 2.87 0 0 0-.57 0 4.06 4.06 0 0 0-1.36.15 3.17 3.17 0 0 0-1.09.67 3 3 0 0 0-.72 1.06 3.62 3.62 0 0 0-.25 1.39 3.57 3.57 0 0 0 .25 1.38c.16.402.405.764.72 1.06a3.17 3.17 0 0 0 1.09.67c.44.16.904.237 1.37.23.441 0 .877-.092 1.28-.27a2.45 2.45 0 0 0 1-.83l-1.15-.85a1.49 1.49 0 0 1-.54.49Z"
-          />
-        </svg>
-      </media-captions-menu-button>
-    </template>
-
-    <template partial="AirplayButton">
-      <media-airplay-button part="bottom airplay button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
-        <svg aria-hidden="true" viewBox="0 0 26 24" slot="airplay">
-          <path
-            d="M13.19 14.22a.25.25 0 0 0-.38 0l-5.46 6.37a.25.25 0 0 0 .19.41h10.92a.25.25 0 0 0 .19-.41l-5.46-6.37Z"
-          />
-          <path
-            d="M22 3H4a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h2.94L8 16.75H4.25V4.25h17.5v12.5H18L19.06 18H22a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Z"
-          />
-        </svg>
-      </media-airplay-button>
-    </template>
-
-    <template partial="FullscreenButton">
-      <media-fullscreen-button part="bottom fullscreen button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
-        <svg aria-hidden="true" viewBox="0 0 24 24" slot="enter">
-          <path
-            d="M20.25 14.5a.76.76 0 0 0-.75.75v4.25h-4.25a.75.75 0 1 0 0 1.5h5a.76.76 0 0 0 .75-.75v-5a.76.76 0 0 0-.75-.75Zm0-11.5h-5a.76.76 0 0 0-.75.75.76.76 0 0 0 .75.75h4.25v4.25a.75.75 0 1 0 1.5 0v-5a.76.76 0 0 0-.75-.75ZM8.75 19.5H4.5v-4.25a.76.76 0 0 0-.75-.75.76.76 0 0 0-.75.75v5a.76.76 0 0 0 .75.75h5a.75.75 0 1 0 0-1.5Zm0-16.5h-5a.76.76 0 0 0-.75.75v5a.76.76 0 0 0 .75.75.76.76 0 0 0 .75-.75V4.5h4.25a.76.76 0 0 0 .75-.75.76.76 0 0 0-.75-.75Z"
-          />
-        </svg>
-        <svg aria-hidden="true" viewBox="0 0 24 24" slot="exit">
-          <path
-            d="M20.25 14.5h-5a.76.76 0 0 0-.75.75v5a.75.75 0 1 0 1.5 0V16h4.25a.75.75 0 1 0 0-1.5Zm-5-5h5a.75.75 0 1 0 0-1.5H16V3.75a.75.75 0 1 0-1.5 0v5a.76.76 0 0 0 .75.75Zm-6.5 5h-5a.75.75 0 1 0 0 1.5H8v4.25a.75.75 0 1 0 1.5 0v-5a.76.76 0 0 0-.75-.75Zm0-11.5a.76.76 0 0 0-.75.75V8H3.75a.75.75 0 0 0 0 1.5h5a.76.76 0 0 0 .75-.75v-5A.76.76 0 0 0 8.75 3Z"
-          />
-        </svg>
-      </media-fullscreen-button>
-    </template>
-
-    <template partial="CastButton">
-      <media-cast-button part="bottom cast button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
-        <svg aria-hidden="true" viewBox="0 0 26 24" slot="enter">
-          <path d="M3 15.5V17c2.206 0 4 1.794 4 4h1.5A5.5 5.5 0 0 0 3 15.5Zm0 3V21h2.5A2.5 2.5 0 0 0 3 18.5Z" />
-          <path d="M3 12.5V14c3.86 0 7 3.14 7 7h1.5A8.5 8.5 0 0 0 3 12.5Z" />
-          <path
-            d="M22 3H4a1 1 0 0 0-1 1v6.984c.424 0 .84.035 1.25.086V4.25h17.5v15.5h-8.82c.051.41.086.826.086 1.25H22a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Z"
-          />
-        </svg>
-        <svg aria-hidden="true" viewBox="0 0 26 24" slot="exit">
-          <path d="M3 15.5V17c2.206 0 4 1.794 4 4h1.5A5.5 5.5 0 0 0 3 15.5Zm0 3V21h2.5A2.5 2.5 0 0 0 3 18.5Z" />
-          <path d="M3 12.5V14c3.86 0 7 3.14 7 7h1.5A8.5 8.5 0 0 0 3 12.5Z" />
-          <path
-            d="M22 3H4a1 1 0 0 0-1 1v6.984c.424 0 .84.035 1.25.086V4.25h17.5v15.5h-8.82c.051.41.086.826.086 1.25H22a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Z"
-          />
-          <path d="M20.5 5.5h-15v5.811c3.52.906 6.283 3.67 7.189 7.19H20.5V5.5Z" />
-        </svg>
-      </media-cast-button>
-    </template>
-
-    <template partial="LiveButton">
-      <!-- NOTE: Keeping "seek-live" part for backwards compatibility for now -->
-      <media-live-button
-        part="{{section ?? 'top'}} live seek-live button"
-        disabled="{{disabled}}"
-        aria-disabled="{{disabled}}"
-      ></media-live-button>
-    </template>
-
-    <template partial="PlaybackRateButton">
-      <media-playback-rate-button
-        rates="{{playbackRates}}"
-        part="bottom playback-rate button"
-        disabled="{{disabled}}"
-        aria-disabled="{{disabled}}"
-      ></media-playback-rate-button>
-    </template>
-
-    <template partial="VolumeRange">
-      <media-volume-range
-        part="bottom volume range"
-        disabled="{{disabled}}"
-        aria-disabled="{{disabled}}"
-      ></media-volume-range>
-    </template>
-
-    <template partial="TimeDisplay">
-      <mxp-time-display
-        remaining="{{defaultShowRemainingTime}}"
-        part="bottom time display"
-        disabled="{{disabled}}"
-        aria-disabled="{{disabled}}"
-      ></mxp-time-display>
-    </template>
-
-    <template partial="TimeRange">
-      <media-time-range
-        part="bottom time range"
-        disabled="{{disabled}}"
-        aria-disabled="{{disabled}}"
-      ></media-time-range>
-    </template>
-
     <template if="audio">
 
       <template if="streamType == 'on-demand'">
@@ -703,7 +637,7 @@ a {
           </media-control-bar>
         </template>
 
-        <template if="targetLiveWindow == null">
+        <template if="!targetLiveWindow">
           <template if="title">
             <media-control-bar>{{>TitleDisplay}}</media-control-bar>
           </template>
@@ -721,11 +655,11 @@ a {
       </template>
     </template>
 
-    <template if="audio == null">
+    <template if="!audio">
 
       <template if="streamType == 'on-demand'">
 
-        <template if="breakpointSm == null">
+        <template if="!breakpointSm">
           {{>TimeRange}}
           <media-control-bar>
             {{>PlayButton}}
@@ -737,7 +671,7 @@ a {
         </template>
 
         <template if="breakpointSm">
-          <template if="breakpointMd == null">
+          <template if="!breakpointMd">
             <media-control-bar slot="top-chrome">
               {{>TitleDisplay}}
             </media-control-bar>
@@ -792,9 +726,9 @@ a {
 
       <template if="streamType == 'live'">
 
-        <template if="targetLiveWindow == null">
+        <template if="!targetLiveWindow">
 
-          <template if="breakpointSm == null">
+          <template if="!breakpointSm">
             <media-control-bar slot="top-chrome">
               {{>LiveButton}}
             </media-control-bar>
@@ -808,7 +742,7 @@ a {
           </template>
 
           <template if="breakpointSm">
-            <template if="breakpointMd == null">
+            <template if="!breakpointMd">
               <media-control-bar slot="top-chrome">
                 {{>LiveButton}}
                 {{>TitleDisplay}}
@@ -854,7 +788,7 @@ a {
 
         <template if="targetLiveWindow > 0">
 
-          <template if="breakpointSm == null">
+          <template if="!breakpointSm">
             <media-control-bar slot="top-chrome">
               {{>LiveButton}}
             </media-control-bar>
@@ -869,7 +803,7 @@ a {
           </template>
 
           <template if="breakpointSm">
-            <template if="breakpointMd == null">
+            <template if="!breakpointMd">
               <media-control-bar slot="top-chrome">
                 {{>LiveButton}}
                 {{>TitleDisplay}}
@@ -928,10 +862,10 @@ a {
 
   </media-controller>
 </template>
-`;var ft=`
+`;var ut=`
   :host {
     z-index: 100;
-    display: flex;
+    display: var(--media-dialog-display, flex);
     justify-content: center;
     align-items: center;
     width: 100%;
@@ -980,17 +914,17 @@ a {
     text-align: center;
     line-height: 1.4;
   }
-`,yt=v.createElement("template");yt.innerHTML=`
+`,ct=E.createElement("template");ct.innerHTML=`
   <style>
-    ${ft}
+    ${ut}
   </style>
 
   <div class="dialog">
     <slot></slot>
   </div>
-`;var N=class extends p.HTMLElement{constructor(){var e;super();this.attachShadow({mode:"open"}),(e=this.shadowRoot)==null||e.appendChild(this.constructor.template.content.cloneNode(!0))}show(){this.setAttribute("open",""),this.dispatchEvent(new CustomEvent("open",{composed:!0,bubbles:!0})),gt(this)}close(){!this.hasAttribute("open")||(this.removeAttribute("open"),this.dispatchEvent(new CustomEvent("close",{composed:!0,bubbles:!0})),jt(this))}attributeChangedCallback(e,i,r){e==="open"&&i!==r&&(r!=null?this.show():this.close())}connectedCallback(){this.hasAttribute("role")||this.setAttribute("role","dialog"),this.hasAttribute("open")&&gt(this)}};N.styles=ft,N.template=yt,N.observedAttributes=["open"];function gt(t){let a=new CustomEvent("initfocus",{composed:!0,bubbles:!0,cancelable:!0});if(t.dispatchEvent(a),a.defaultPrevented)return;let e=t.querySelector("[autofocus]:not([disabled])");!e&&t.tabIndex>=0&&(e=t),e||(e=vt(t.shadowRoot)),t._previouslyFocusedElement=v.activeElement,v.activeElement instanceof HTMLElement&&v.activeElement.blur(),t.addEventListener("transitionend",()=>{e instanceof HTMLElement&&e.focus({preventScroll:!0})},{once:!0})}function vt(t){let e=["button","input","keygen","select","textarea"].map(function(r){return r+":not([disabled])"});e.push('[tabindex]:not([disabled]):not([tabindex=""])');let i=t==null?void 0:t.querySelector(e.join(", "));if(!i&&"attachShadow"in Element.prototype){let r=(t==null?void 0:t.querySelectorAll("*"))||[];for(let o=0;o<r.length&&!(r[o].tagName&&r[o].shadowRoot&&(i=vt(r[o].shadowRoot),i));o++);}return i}function jt(t){t._previouslyFocusedElement instanceof HTMLElement&&t._previouslyFocusedElement.focus()}p.customElements.get("media-dialog")||(p.customElements.define("media-dialog",N),p.MediaDialog=N);var Ne=N;var kt=v.createElement("template");kt.innerHTML=`
+`;var I=class extends p.HTMLElement{constructor(){var e;super();this.attachShadow({mode:"open"}),(e=this.shadowRoot)==null||e.appendChild(this.constructor.template.content.cloneNode(!0))}show(){this.setAttribute("open",""),this.dispatchEvent(new CustomEvent("open",{composed:!0,bubbles:!0})),mt(this)}close(){!this.hasAttribute("open")||(this.removeAttribute("open"),this.dispatchEvent(new CustomEvent("close",{composed:!0,bubbles:!0})),Ft(this))}attributeChangedCallback(e,i,r){e==="open"&&i!==r&&(r!=null?this.show():this.close())}connectedCallback(){this.hasAttribute("role")||this.setAttribute("role","dialog"),this.hasAttribute("open")&&mt(this)}};I.styles=ut,I.template=ct,I.observedAttributes=["open"];function mt(t){let a=new CustomEvent("initfocus",{composed:!0,bubbles:!0,cancelable:!0});if(t.dispatchEvent(a),a.defaultPrevented)return;let e=t.querySelector("[autofocus]:not([disabled])");!e&&t.tabIndex>=0&&(e=t),e||(e=pt(t.shadowRoot)),t._previouslyFocusedElement=E.activeElement,E.activeElement instanceof HTMLElement&&E.activeElement.blur(),t.addEventListener("transitionend",()=>{e instanceof HTMLElement&&e.focus({preventScroll:!0})},{once:!0})}function pt(t){let e=["button","input","keygen","select","textarea"].map(function(r){return r+":not([disabled])"});e.push('[tabindex]:not([disabled]):not([tabindex=""])');let i=t==null?void 0:t.querySelector(e.join(", "));if(!i&&"attachShadow"in Element.prototype){let r=(t==null?void 0:t.querySelectorAll("*"))||[];for(let o=0;o<r.length&&!(r[o].tagName&&r[o].shadowRoot&&(i=pt(r[o].shadowRoot),i));o++);}return i}function Ft(t){t._previouslyFocusedElement instanceof HTMLElement&&t._previouslyFocusedElement.focus()}p.customElements.get("media-dialog")||(p.customElements.define("media-dialog",I),p.MediaDialog=I);var _e=I;var bt=E.createElement("template");bt.innerHTML=`
   <style>
-    ${Ne.styles}
+    ${_e.styles}
 
     .close {
       background: none;
@@ -1019,76 +953,80 @@ a {
       </svg>
     </button>
   </slot>
-`;var ae=class extends Ne{constructor(){var a,e;super(),(e=(a=this.shadowRoot)==null?void 0:a.querySelector(".close"))==null||e.addEventListener("click",()=>{this.close()})}};ae.template=kt;p.customElements.get("mxp-dialog")||(p.customElements.define("mxp-dialog",ae),p.MxpDialog=ae);import{TemplateInstance as Gt,ChildNodePart as ye,AttrPart as ve}from"media-chrome/dist/media-theme-element.js";var ie=new WeakMap,re=class{constructor(a,e){this.element=a;this.type=e;this.element.addEventListener(this.type,this);let i=ie.get(this.element);i&&i.set(this.type,this)}set(a){if(typeof a=="function")this.handleEvent=a.bind(this.element);else if(typeof a=="object"&&typeof a.handleEvent=="function")this.handleEvent=a.handleEvent.bind(a);else{this.element.removeEventListener(this.type,this);let e=ie.get(this.element);e&&e.delete(this.type)}}static for(a){ie.has(a.element)||ie.set(a.element,new Map);let e=a.attributeName.slice(2),i=ie.get(a.element);return i&&i.has(e)?i.get(e):new re(a.element,e)}};function zt(t,a){return t instanceof ve&&t.attributeName.startsWith("on")?(re.for(t).set(a),t.element.removeAttributeNS(t.attributeNamespace,t.attributeName),!0):!1}function Jt(t,a){return a instanceof fe&&t instanceof ye?(a.renderInto(t),!0):!1}function Xt(t,a){return a instanceof DocumentFragment&&t instanceof ye?(a.childNodes.length&&t.replace(...a.childNodes),!0):!1}function Qt(t,a){if(t instanceof ve){let e=t.attributeNamespace,i=t.element.getAttributeNS(e,t.attributeName);return String(a)!==i&&(t.value=String(a)),!0}return t.value=String(a),!0}function ea(t,a){if(t instanceof ve&&a instanceof Element){let e=t.element;return e[t.attributeName]!==a&&(t.element.removeAttributeNS(t.attributeNamespace,t.attributeName),e[t.attributeName]=a),!0}return!1}function ta(t,a){if(typeof a=="boolean"&&t instanceof ve){let e=t.attributeNamespace,i=t.element.hasAttributeNS(e,t.attributeName);return a!==i&&(t.booleanValue=a),!0}return!1}function aa(t,a){return a===!1&&t instanceof ye?(t.replace(""),!0):!1}function ia(t,a){ea(t,a)||ta(t,a)||zt(t,a)||aa(t,a)||Jt(t,a)||Xt(t,a)||Qt(t,a)}var Ve=new Map,Et=new WeakMap,At=new WeakMap,fe=class{constructor(a,e,i){this.strings=a;this.values=e;this.processor=i;this.stringsKey=this.strings.join("
")}get template(){if(Ve.has(this.stringsKey))return Ve.get(this.stringsKey);{let a=v.createElement("template"),e=this.strings.length-1;return a.innerHTML=this.strings.reduce((i,r,o)=>i+r+(o<e?`{{ ${o} }}`:""),""),Ve.set(this.stringsKey,a),a}}renderInto(a){let e=this.template;if(Et.get(a)!==e){Et.set(a,e);let r=new Gt(e,this.values,this.processor);At.set(a,r),a instanceof ye?a.replace(...r.children):a.appendChild(r);return}let i=At.get(a);i&&i.update(this.values)}},ra={processCallback(t,a,e){var i;if(!!e){for(let[r,o]of a)if(r in e){let n=(i=e[r])!=null?i:"";ia(o,n)}}}};function S(t,...a){return new fe(t,a,ra)}function Tt(t,a){t.renderInto(a)}import{StreamTypes as ke}from"@mux/playback-core";var He=v.createElement("template");"innerHTML"in He&&(He.innerHTML=ht);var xt=t=>S`
+`;var Q=class extends _e{constructor(){var a,e;super(),(e=(a=this.shadowRoot)==null?void 0:a.querySelector(".close"))==null||e.addEventListener("click",()=>{this.close()})}};Q.template=bt;p.customElements.get("mxp-dialog")||(p.customElements.define("mxp-dialog",Q),p.MxpDialog=Q);import{TemplateInstance as Ut,ChildNodePart as be,AttrPart as he}from"media-chrome/dist/media-theme-element.js";var ee=new WeakMap,te=class{constructor(a,e){this.element=a;this.type=e;this.element.addEventListener(this.type,this);let i=ee.get(this.element);i&&i.set(this.type,this)}set(a){if(typeof a=="function")this.handleEvent=a.bind(this.element);else if(typeof a=="object"&&typeof a.handleEvent=="function")this.handleEvent=a.handleEvent.bind(a);else{this.element.removeEventListener(this.type,this);let e=ee.get(this.element);e&&e.delete(this.type)}}static for(a){ee.has(a.element)||ee.set(a.element,new Map);let e=a.attributeName.slice(2),i=ee.get(a.element);return i&&i.has(e)?i.get(e):new te(a.element,e)}};function Yt(t,a){return t instanceof he&&t.attributeName.startsWith("on")?(te.for(t).set(a),t.element.removeAttributeNS(t.attributeNamespace,t.attributeName),!0):!1}function Zt(t,a){return a instanceof pe&&t instanceof be?(a.renderInto(t),!0):!1}function Wt(t,a){return a instanceof DocumentFragment&&t instanceof be?(a.childNodes.length&&t.replace(...a.childNodes),!0):!1}function jt(t,a){if(t instanceof he){let e=t.attributeNamespace,i=t.element.getAttributeNS(e,t.attributeName);return String(a)!==i&&(t.value=String(a)),!0}return t.value=String(a),!0}function qt(t,a){if(t instanceof he&&a instanceof Element){let e=t.element;return e[t.attributeName]!==a&&(t.element.removeAttributeNS(t.attributeNamespace,t.attributeName),e[t.attributeName]=a),!0}return!1}function Gt(t,a){if(typeof a=="boolean"&&t instanceof he){let e=t.attributeNamespace,i=t.element.hasAttributeNS(e,t.attributeName);return a!==i&&(t.booleanValue=a),!0}return!1}function zt(t,a){return a===!1&&t instanceof be?(t.replace(""),!0):!1}function Jt(t,a){qt(t,a)||Gt(t,a)||Yt(t,a)||zt(t,a)||Zt(t,a)||Wt(t,a)||jt(t,a)}var De=new Map,ht=new WeakMap,gt=new WeakMap,pe=class{constructor(a,e,i){this.strings=a;this.values=e;this.processor=i;this.stringsKey=this.strings.join("
")}get template(){if(De.has(this.stringsKey))return De.get(this.stringsKey);{let a=E.createElement("template"),e=this.strings.length-1;return a.innerHTML=this.strings.reduce((i,r,o)=>i+r+(o<e?`{{ ${o} }}`:""),""),De.set(this.stringsKey,a),a}}renderInto(a){var r;let e=this.template;if(ht.get(a)!==e){ht.set(a,e);let o=new Ut(e,this.values,this.processor);gt.set(a,o),a instanceof be?a.replace(...o.children):a.appendChild(o);return}let i=gt.get(a);(r=i==null?void 0:i.update)==null||r.call(i,this.values)}},Xt={processCallback(t,a,e){var i;if(!!e){for(let[r,o]of a)if(r in e){let n=(i=e[r])!=null?i:"";Jt(o,n)}}}};function S(t,...a){return new pe(t,a,Xt)}function yt(t,a){t.renderInto(a)}import{StreamTypes as ge}from"@mux/playback-core";var Ne=E.createElement("template");"innerHTML"in Ne&&(Ne.innerHTML=dt);var ft=t=>S`
   <style>
-    ${bt}
+    ${lt}
   </style>
-  ${na(t)}
-`,wt=t=>[ke.LIVE,ke.LL_LIVE].includes(t.streamType),Ot=t=>[ke.DVR,ke.LL_DVR].includes(t.streamType),Rt=t=>wt(t)||Ot(t),oa=t=>{let a=t.hotKeys?`${t.hotKeys}`:"";return Rt(t)&&(a+=" noarrowleft noarrowright"),a},na=t=>{var a,e,i,r,o,n,m,g,T,E,B,D,h,w,O,R,f,me,J,q,Fe,Ue,Ye,Ze,We,qe,je,Ge,ze,Je,Xe;return S`
+  ${ea(t)}
+`,vt=t=>[ge.LIVE,ge.LL_LIVE].includes(t.streamType),kt=t=>[ge.DVR,ge.LL_DVR].includes(t.streamType),Et=t=>vt(t)||kt(t),Qt=t=>{let a=t.hotKeys?`${t.hotKeys}`:"";return Et(t)&&(a+=" noarrowleft noarrowright"),a},ea=t=>{var a,e,i,r,o,n,u,h,A,k,B,_,b,w,O,L,g,le,G,j,Ve,He,$e,Ke,Fe,Ue,Ye,Ze,We,je,qe,Ge;return S`
   <media-theme
-    template="${(a=t.theme)!=null?a:He.content.children[0]}"
-    class="${t.secondaryColor?"two-tone":!1}"
-    stream-type="${Rt(t)?"live":"on-demand"}"
-    target-live-window="${Ot(t)?1:!1}"
-    hotkeys="${oa(t)||!1}"
+    template="${(a=t.themeTemplate)!=null?a:Ne.content.children[0]}"
+    stream-type="${Et(t)?"live":"on-demand"}"
+    target-live-window="${kt(t)?1:!1}"
+    hotkeys="${Qt(t)||!1}"
     nohotkeys="${t.noHotKeys||!t.hasSrc||t.isDialogOpen||!1}"
     disabled="${!t.hasSrc||t.isDialogOpen}"
     audio="${(e=t.audio)!=null?e:!1}"
-    style="${(i=at({"--primary-color":t.primaryColor,"--secondary-color":t.secondaryColor}))!=null?i:!1}"
+    style="${(i=Qe({"--media-primary-color":t.primaryColor,"--media-secondary-color":t.secondaryColor}))!=null?i:!1}"
     default-showing-captions="${!t.defaultHiddenCaptions}"
     forward-seek-offset="${(r=t.forwardSeekOffset)!=null?r:!1}"
     backward-seek-offset="${(o=t.backwardSeekOffset)!=null?o:!1}"
     playback-rates="${(n=t.playbackRates)!=null?n:!1}"
-    default-show-remaining-time="${(m=t.defaultShowRemainingTime)!=null?m:!1}"
-    title="${(g=t.title)!=null?g:!1}"
-    poster="${t.poster===""?!1:(T=t.poster)!=null?T:!1}"
-    placeholder="${(E=t.placeholder)!=null?E:!1}"
-    exportparts="top, center, bottom, layer, media-layer, poster-layer, vertical-layer, centered-layer, gesture-layer, poster, seek-live, play, button, seek-backward, seek-forward, mute, captions, airplay, pip, fullscreen, cast, playback-rate, volume, range, time, display"
+    default-show-remaining-time="${(u=t.defaultShowRemainingTime)!=null?u:!1}"
+    hide-duration="${(h=t.hideDuration)!=null?h:!1}"
+    title="${(A=t.title)!=null?A:!1}"
+    exportparts="top, center, bottom, layer, media-layer, poster-layer, vertical-layer, centered-layer, gesture-layer, poster, live, play, button, seek-backward, seek-forward, mute, captions, airplay, pip, fullscreen, cast, playback-rate, volume, range, time, display"
   >
     <mux-video
       slot="media"
-      crossorigin="${(B=t.crossOrigin)!=null?B:""}"
+      crossorigin="${(k=t.crossOrigin)!=null?k:""}"
       playsinline
-      autoplay="${(D=t.autoplay)!=null?D:!1}"
-      muted="${(h=t.muted)!=null?h:!1}"
-      loop="${(w=t.loop)!=null?w:!1}"
-      preload="${(O=t.preload)!=null?O:!1}"
-      debug="${(R=t.debug)!=null?R:!1}"
-      prefer-cmcd="${(f=t.preferCmcd)!=null?f:!1}"
-      disable-cookies="${(me=t.disableCookies)!=null?me:!1}"
-      prefer-playback="${(J=t.preferPlayback)!=null?J:!1}"
+      autoplay="${(B=t.autoplay)!=null?B:!1}"
+      muted="${(_=t.muted)!=null?_:!1}"
+      loop="${(b=t.loop)!=null?b:!1}"
+      preload="${(w=t.preload)!=null?w:!1}"
+      debug="${(O=t.debug)!=null?O:!1}"
+      prefer-cmcd="${(L=t.preferCmcd)!=null?L:!1}"
+      disable-cookies="${(g=t.disableCookies)!=null?g:!1}"
+      prefer-playback="${(le=t.preferPlayback)!=null?le:!1}"
       start-time="${t.startTime!=null?t.startTime:!1}"
-      beacon-collection-domain="${(q=t.beaconCollectionDomain)!=null?q:!1}"
-      player-software-name="${(Fe=t.playerSoftwareName)!=null?Fe:!1}"
-      player-software-version="${(Ue=t.playerSoftwareVersion)!=null?Ue:!1}"
-      env-key="${(Ye=t.envKey)!=null?Ye:!1}"
-      stream-type="${(Ze=t.streamType)!=null?Ze:!1}"
-      custom-domain="${(We=t.customDomain)!=null?We:!1}"
-      src="${t.src?t.src:t.playbackId?De(t.playbackId,{maxResolution:t.maxResolution,domain:t.customDomain,token:t.tokens.playback}):!1}"
-      cast-src="${t.src?t.src:t.playbackId?De(t.playbackId,{maxResolution:t.maxResolution,domain:t.customDomain,token:t.tokens.playback}):!1}"
-      cast-stream-type="${wt(t)?"live":!1}"
+      beacon-collection-domain="${(G=t.beaconCollectionDomain)!=null?G:!1}"
+      player-software-name="${(j=t.playerSoftwareName)!=null?j:!1}"
+      player-software-version="${(Ve=t.playerSoftwareVersion)!=null?Ve:!1}"
+      env-key="${(He=t.envKey)!=null?He:!1}"
+      stream-type="${($e=t.streamType)!=null?$e:!1}"
+      custom-domain="${(Ke=t.customDomain)!=null?Ke:!1}"
+      src="${t.src?t.src:t.playbackId?Me(t.playbackId,{maxResolution:t.maxResolution,domain:t.customDomain,token:t.tokens.playback}):!1}"
+      cast-src="${t.src?t.src:t.playbackId?Me(t.playbackId,{maxResolution:t.maxResolution,domain:t.customDomain,token:t.tokens.playback}):!1}"
+      cast-stream-type="${vt(t)?"live":!1}"
       exportparts="video"
     >
       ${t.storyboard?S`<track label="thumbnails" default kind="metadata" src="${t.storyboard}" />`:S``}
     </mux-video>
+    <media-poster-image
+      slot="poster"
+      part="poster"
+      src="${t.poster===""?!1:(Fe=t.poster)!=null?Fe:!1}"
+      placeholder-src="${(Ue=t.placeholder)!=null?Ue:!1}"
+    ></media-poster-image>
     <mxp-dialog
       no-auto-hide
-      open="${(qe=t.isDialogOpen)!=null?qe:!1}"
+      open="${(Ye=t.isDialogOpen)!=null?Ye:!1}"
       onclose="${t.onCloseErrorDialog}"
       oninitfocus="${t.onInitFocusDialog}"
     >
-      ${(je=t.dialog)!=null&&je.title?S`<h3>${t.dialog.title}</h3>`:S``}
+      ${(Ze=t.dialog)!=null&&Ze.title?S`<h3>${t.dialog.title}</h3>`:S``}
       <p>
-        ${(Ge=t.dialog)==null?void 0:Ge.message}
-        ${(ze=t.dialog)!=null&&ze.linkUrl?S`<a
+        ${(We=t.dialog)==null?void 0:We.message}
+        ${(je=t.dialog)!=null&&je.linkUrl?S`<a
               href="${t.dialog.linkUrl}"
               target="_blank"
               rel="external noopener"
-              aria-label="${(Je=t.dialog.linkText)!=null?Je:""} ${d("(opens in a new window)")}"
-              >${(Xe=t.dialog.linkText)!=null?Xe:t.dialog.linkUrl}</a
+              aria-label="${(qe=t.dialog.linkText)!=null?qe:""} ${l("(opens in a new window)")}"
+              >${(Ge=t.dialog.linkText)!=null?Ge:t.dialog.linkUrl}</a
             >`:S``}
       </p>
     </mxp-dialog>
   </media-theme>
-`};import{MediaError as Ee}from"@mux/mux-video";function Ae(t,a,e,i,r){var m,g,T;let o={},n={};switch(t.code){case Ee.MEDIA_ERR_NETWORK:{switch(o.title=d("Network Error",r),o.message=t.message,(m=t.data)==null?void 0:m.response.code){case 412:{o.title=d("Video is not currently available",r),o.message=d("The live stream or video file are not yet ready.",r),n.message=d("This playback-id may belong to a live stream that is not currently active or an asset that is not ready.",r),n.file="412-not-playable.md";break}case 404:{o.title=d("Video does not exist",r),o.message="",n.message=d("This playback-id does not exist. You may have used an Asset ID or an ID from a different resource.",r),n.file="404-not-found.md";break}case 403:{if(o.title=d("Invalid playback URL",r),o.message=d("The video URL or playback-token are formatted with incorrect or incomplete information.",r),n.message=d("403 error trying to access this playback URL. If this is a signed URL, you might need to provide a playback-token.",r),n.file="missing-signed-tokens.md",!i)break;let{exp:E,aud:B,sub:D}=I(i),h=Date.now()>E*1e3,w=D!==e,O=B!=="v",R={timeStyle:"medium",dateStyle:"medium"};if(h){o.title=d("Video URL has expired",r),o.message=d("The video\u2019s secured playback-token has expired.",r),n.message=d("This playback is using signed URLs and the playback-token has expired. Expired at: {expiredDate}. Current time: {currentDate}.",r).format({expiredDate:new Intl.DateTimeFormat(H.code,R).format(E*1e3),currentDate:new Intl.DateTimeFormat(H.code,R).format(Date.now())}),n.file="403-expired-token.md";break}if(w){o.title=d("Video URL is formatted incorrectly",r),o.message=d("The video\u2019s playback ID does not match the one encoded in the playback-token.",r),n.message=d("The specified playback ID {playbackId} and the playback ID encoded in the playback-token {tokenPlaybackId} do not match.",r).format({playbackId:e,tokenPlaybackId:D}),n.file="403-playback-id-mismatch.md";break}if(O){o.title=d("Video URL is formatted incorrectly",r),o.message=d("The playback-token is formatted with incorrect information.",r),n.message=d("The playback-token has an incorrect aud value: {tokenType}. aud value should be v.",r).format({tokenType:B}),n.file="403-incorrect-aud-value.md";break}n.message=d("403 error trying to access this playback URL. If this is a signed playback ID, the token might not have been generated correctly.",r),n.file="403-malformatted-token.md";break}}break}case Ee.MEDIA_ERR_DECODE:{let{message:E}=t;o={title:d("Media Error",r),message:E},n.file="media-decode-error.md";break}case Ee.MEDIA_ERR_SRC_NOT_SUPPORTED:{let E=(T=(g=t.data)==null?void 0:g.response)==null?void 0:T.code;if(E>=400&&E<500){t.code=Ee.MEDIA_ERR_NETWORK,t.data={response:{code:E}},{dialog:o,devlog:n}=Ae(t,a,e,i);break}o={title:d("Source Not Supported",r),message:t.message},n.file="media-src-not-supported.md";break}default:o={title:d("Error",r),message:t.message};break}return a&&(o={title:d("Your device appears to be offline",r),message:d("Check your internet connection and try reloading this video.",r)}),{dialog:o,devlog:n}}var ma=Object.values(C),M={SRC:"src",POSTER:"poster"},s={STYLE:"style",DEFAULT_HIDDEN_CAPTIONS:"default-hidden-captions",PRIMARY_COLOR:"primary-color",SECONDARY_COLOR:"secondary-color",FORWARD_SEEK_OFFSET:"forward-seek-offset",BACKWARD_SEEK_OFFSET:"backward-seek-offset",PLAYBACK_TOKEN:"playback-token",THUMBNAIL_TOKEN:"thumbnail-token",STORYBOARD_TOKEN:"storyboard-token",STORYBOARD_SRC:"storyboard-src",THUMBNAIL_TIME:"thumbnail-time",AUDIO:"audio",NOHOTKEYS:"nohotkeys",HOTKEYS:"hotkeys",PLAYBACK_RATES:"playbackrates",DEFAULT_SHOW_REMAINING_TIME:"default-show-remaining-time",TITLE:"title",PLACEHOLDER:"placeholder"};function ca(t,a){var i;return{src:!t.playbackId&&t.src,playbackId:t.playbackId,hasSrc:!!t.playbackId||!!t.src,poster:t.poster,storyboard:t.storyboard,storyboardSrc:t.getAttribute(s.STORYBOARD_SRC),placeholder:t.getAttribute("placeholder"),theme:t.getAttribute("theme"),thumbnailTime:!t.tokens.thumbnail&&t.thumbnailTime,autoplay:t.autoplay,crossOrigin:t.crossOrigin,loop:t.loop,noHotKeys:t.hasAttribute(s.NOHOTKEYS),hotKeys:t.getAttribute(s.HOTKEYS),muted:t.muted,paused:t.paused,preload:t.preload,envKey:t.envKey,preferCmcd:t.preferCmcd,debug:t.debug,disableCookies:t.disableCookies,tokens:t.tokens,beaconCollectionDomain:t.beaconCollectionDomain,maxResolution:t.maxResolution,metadata:t.metadata,playerSoftwareName:t.playerSoftwareName,playerSoftwareVersion:t.playerSoftwareVersion,startTime:t.startTime,preferPlayback:t.preferPlayback,audio:t.audio,streamType:t.streamType,primaryColor:t.primaryColor,secondaryColor:t.secondaryColor,forwardSeekOffset:t.forwardSeekOffset,backwardSeekOffset:t.backwardSeekOffset,defaultHiddenCaptions:t.defaultHiddenCaptions,defaultShowRemainingTime:t.defaultShowRemainingTime,playbackRates:t.getAttribute(s.PLAYBACK_RATES),customDomain:(i=t.getAttribute(u.CUSTOM_DOMAIN))!=null?i:void 0,title:t.getAttribute(s.TITLE),...a}}var pa=Object.values(u),ba=Object.values(M),ha=Object.values(s),ga=be(),fa="mux-player",St={dialog:void 0,isDialogOpen:!1},V,le,P,de,Y,Z,oe,xe,Ct,ue,Ke,W,ne,we,Mt,Oe,Pt,Re,Bt,se=class extends _e{constructor(){super();c(this,Z);c(this,xe);c(this,ue);c(this,W);c(this,we);c(this,Oe);c(this,Re);c(this,V,!1);c(this,le,{});c(this,P,!0);c(this,de,new pe(this,"hotkeys"));c(this,Y,{...St,onCloseErrorDialog:()=>b(this,ue,Ke).call(this,{dialog:void 0,isDialogOpen:!1}),onInitFocusDialog:e=>{Pe(this,v.activeElement)||e.preventDefault()}});this.attachShadow({mode:"open"}),b(this,xe,Ct).call(this),this.isConnected&&b(this,Z,oe).call(this)}static get observedAttributes(){var e;return[...(e=_e.observedAttributes)!=null?e:[],...ba,...pa,...ha]}get theme(){var e;return(e=this.shadowRoot)==null?void 0:e.querySelector("media-theme")}get mediaController(){var e,i;return(i=(e=this.theme)==null?void 0:e.shadowRoot)==null?void 0:i.querySelector("media-controller")}get metadataFromAttrs(){return this.getAttributeNames().filter(e=>e.startsWith("metadata-")).reduce((e,i)=>{let r=this.getAttribute(i);return r!==null&&(e[i.replace(/^metadata-/,"").replace(/-/g,"_")]=r),e},{})}connectedCallback(){var i;let e=(i=this.shadowRoot)==null?void 0:i.querySelector("mux-video");e&&(e.metadata=this.metadataFromAttrs)}attributeChangedCallback(e,i,r){switch(l(this,V)||b(this,Z,oe).call(this),super.attributeChangedCallback(e,i,r),e){case s.HOTKEYS:l(this,de).value=r;break;case s.THUMBNAIL_TIME:{r!=null&&this.tokens.thumbnail&&_(d("Use of thumbnail-time with thumbnail-token is currently unsupported. Ignore thumbnail-time.").format({}));break}case s.THUMBNAIL_TOKEN:{let{aud:n}=I(r);r&&n!=="t"&&_(d("The provided thumbnail-token should have audience value 't' instead of '{aud}'.").format({aud:n}));break}case s.STORYBOARD_TOKEN:{let{aud:n}=I(r);r&&n!=="s"&&_(d("The provided storyboard-token should have audience value 's' instead of '{aud}'.").format({aud:n}));break}case u.PLAYBACK_ID:{r!=null&&r.includes("?token")&&x(d("The specificed playback ID {playbackId} contains a token which must be provided via the playback-token attribute.").format({playbackId:r})),this.streamType?this.streamType!=null&&!ma.includes(this.streamType)&&he({file:"invalid-stream-type.md",message:d("Invalid stream-type value supplied: `{streamType}`. Please provide stream-type as either: `on-demand`, `live`, `ll-live`, `live:dvr`, or `ll-live:dvr`").format({streamType:this.streamType})}):he({file:"invalid-stream-type.md",message:String(d("No stream-type value supplied. Defaulting to `on-demand`. Please provide stream-type as either: `on-demand`, `live`, `ll-live`, `live:dvr`, or `ll-live:dvr`"))});break}}[u.PLAYBACK_ID,M.SRC,s.PLAYBACK_TOKEN].includes(e)&&i!==r&&A(this,Y,{...l(this,Y),...St}),b(this,W,ne).call(this,{[nt(e)]:r})}get preferCmcd(){var e;return(e=this.getAttribute(u.PREFER_CMCD))!=null?e:void 0}set preferCmcd(e){e!==this.preferCmcd&&(e?Lt.includes(e)?this.setAttribute(u.PREFER_CMCD,e):_(`Invalid value for preferCmcd. Must be one of ${Lt.join()}`):this.removeAttribute(u.PREFER_CMCD))}get hasPlayed(){var e,i;return(i=(e=this.mediaController)==null?void 0:e.hasAttribute("media-has-played"))!=null?i:!1}get inLiveWindow(){var e;return(e=this.mediaController)==null?void 0:e.hasAttribute("media-time-is-live")}get _hls(){var e;return(e=this.media)==null?void 0:e._hls}get mux(){var e;return(e=this.media)==null?void 0:e.mux}get playbackId(){var e;return(e=this.getAttribute(u.PLAYBACK_ID))!=null?e:void 0}set playbackId(e){e?this.setAttribute(u.PLAYBACK_ID,e):this.removeAttribute(u.PLAYBACK_ID)}get src(){var e,i;return this.playbackId?(e=U(this,M.SRC))!=null?e:void 0:(i=this.getAttribute(M.SRC))!=null?i:void 0}set src(e){e?this.setAttribute(M.SRC,e):this.removeAttribute(M.SRC)}get poster(){var i;let e=this.getAttribute(M.POSTER);if(e!=null)return e;if(this.playbackId&&!this.audio)return rt(this.playbackId,{domain:this.customDomain,thumbnailTime:(i=this.thumbnailTime)!=null?i:this.startTime,token:this.tokens.thumbnail})}set poster(e){e||e===""?this.setAttribute(M.POSTER,e):this.removeAttribute(M.POSTER)}get storyboardSrc(){var e;return(e=this.getAttribute(s.STORYBOARD_SRC))!=null?e:void 0}set storyboardSrc(e){e?this.setAttribute(s.STORYBOARD_SRC,e):this.removeAttribute(s.STORYBOARD_SRC)}get storyboard(){if(!this.audio&&(!this.streamType||![C.LIVE,C.LL_LIVE,C.DVR,C.LL_DVR].includes(this.streamType))){if(this.storyboardSrc&&!this.tokens.storyboard)return this.storyboardSrc;if(this.playbackId)return ot(this.playbackId,{domain:this.customDomain,token:this.tokens.storyboard})}}get audio(){return this.hasAttribute(s.AUDIO)}set audio(e){if(!e){this.removeAttribute(s.AUDIO);return}this.setAttribute(s.AUDIO,"")}get hotkeys(){return l(this,de)}get nohotkeys(){return this.hasAttribute(s.NOHOTKEYS)}set nohotkeys(e){if(!e){this.removeAttribute(s.NOHOTKEYS);return}this.setAttribute(s.NOHOTKEYS,"")}get thumbnailTime(){return L(this.getAttribute(s.THUMBNAIL_TIME))}set thumbnailTime(e){this.setAttribute(s.THUMBNAIL_TIME,`${e}`)}get title(){var e;return(e=this.getAttribute(s.TITLE))!=null?e:""}set title(e){e!==this.title&&(e?this.setAttribute(s.TITLE,e):this.removeAttribute("title"),super.title=e)}get placeholder(){var e;return(e=U(this,s.PLACEHOLDER))!=null?e:""}set placeholder(e){this.setAttribute(s.PLACEHOLDER,`${e}`)}get primaryColor(){var e;return(e=this.getAttribute(s.PRIMARY_COLOR))!=null?e:void 0}set primaryColor(e){this.setAttribute(s.PRIMARY_COLOR,`${e}`)}get secondaryColor(){var e;return(e=this.getAttribute(s.SECONDARY_COLOR))!=null?e:"rgb(0 0 0 / .75)"}set secondaryColor(e){this.setAttribute(s.SECONDARY_COLOR,`${e}`)}get defaultShowRemainingTime(){return this.hasAttribute(s.DEFAULT_SHOW_REMAINING_TIME)}set defaultShowRemainingTime(e){e?this.setAttribute(s.DEFAULT_SHOW_REMAINING_TIME,""):this.removeAttribute(s.DEFAULT_SHOW_REMAINING_TIME)}get playbackRates(){if(!!this.hasAttribute(s.PLAYBACK_RATES))return this.getAttribute(s.PLAYBACK_RATES).trim().split(/\s*,?\s+/).map(e=>Number(e)).filter(e=>!Number.isNaN(e)).sort((e,i)=>e-i)}set playbackRates(e){if(!e){this.removeAttribute(s.PLAYBACK_RATES);return}this.setAttribute(s.PLAYBACK_RATES,e.join(" "))}get forwardSeekOffset(){var e;return(e=L(this.getAttribute(s.FORWARD_SEEK_OFFSET)))!=null?e:10}set forwardSeekOffset(e){this.setAttribute(s.FORWARD_SEEK_OFFSET,`${e}`)}get backwardSeekOffset(){var e;return(e=L(this.getAttribute(s.BACKWARD_SEEK_OFFSET)))!=null?e:10}set backwardSeekOffset(e){this.setAttribute(s.BACKWARD_SEEK_OFFSET,`${e}`)}get defaultHiddenCaptions(){return this.hasAttribute(s.DEFAULT_HIDDEN_CAPTIONS)}set defaultHiddenCaptions(e){e?this.setAttribute(s.DEFAULT_HIDDEN_CAPTIONS,""):this.removeAttribute(s.DEFAULT_HIDDEN_CAPTIONS)}get playerSoftwareName(){var e;return(e=this.getAttribute(u.PLAYER_SOFTWARE_NAME))!=null?e:fa}get playerSoftwareVersion(){var e;return(e=this.getAttribute(u.PLAYER_SOFTWARE_VERSION))!=null?e:ga}get beaconCollectionDomain(){var e;return(e=this.getAttribute(u.BEACON_COLLECTION_DOMAIN))!=null?e:void 0}set beaconCollectionDomain(e){e!==this.beaconCollectionDomain&&(e?this.setAttribute(u.BEACON_COLLECTION_DOMAIN,e):this.removeAttribute(u.BEACON_COLLECTION_DOMAIN))}get maxResolution(){var e;return(e=this.getAttribute(u.MAX_RESOLUTION))!=null?e:void 0}set maxResolution(e){e!==this.maxResolution&&(e?this.setAttribute(u.MAX_RESOLUTION,e):this.removeAttribute(u.MAX_RESOLUTION))}get customDomain(){var e;return(e=this.getAttribute(u.CUSTOM_DOMAIN))!=null?e:void 0}set customDomain(e){e!==this.customDomain&&(e?this.setAttribute(u.CUSTOM_DOMAIN,e):this.removeAttribute(u.CUSTOM_DOMAIN))}get envKey(){var e;return(e=U(this,u.ENV_KEY))!=null?e:void 0}set envKey(e){this.setAttribute(u.ENV_KEY,`${e}`)}get debug(){return U(this,u.DEBUG)!=null}set debug(e){e?this.setAttribute(u.DEBUG,""):this.removeAttribute(u.DEBUG)}get disableCookies(){return U(this,u.DISABLE_COOKIES)!=null}set disableCookies(e){e?this.setAttribute(u.DISABLE_COOKIES,""):this.removeAttribute(u.DISABLE_COOKIES)}get streamType(){return U(this,u.STREAM_TYPE)}set streamType(e){this.setAttribute(u.STREAM_TYPE,`${e}`)}get startTime(){return L(U(this,u.START_TIME))}set startTime(e){this.setAttribute(u.START_TIME,`${e}`)}get preferPlayback(){let e=this.getAttribute(u.PREFER_PLAYBACK);if(e===Te.MSE||e===Te.NATIVE)return e}set preferPlayback(e){e!==this.preferPlayback&&(e===Te.MSE||e===Te.NATIVE?this.setAttribute(u.PREFER_PLAYBACK,e):this.removeAttribute(u.PREFER_PLAYBACK))}get metadata(){var e;return(e=this.media)==null?void 0:e.metadata}set metadata(e){if(l(this,V)||b(this,Z,oe).call(this),!this.media){x("underlying media element missing when trying to set metadata. metadata will not be set.");return}this.media.metadata={...this.metadataFromAttrs,...e}}async addCuePoints(e){var i;if(l(this,V)||b(this,Z,oe).call(this),!this.media){x("underlying media element missing when trying to addCuePoints. cuePoints will not be added.");return}return(i=this.media)==null?void 0:i.addCuePoints(e)}get activeCuePoint(){var e;return(e=this.media)==null?void 0:e.activeCuePoint}get cuePoints(){var e,i;return(i=(e=this.media)==null?void 0:e.cuePoints)!=null?i:[]}get tokens(){let e=this.getAttribute(s.PLAYBACK_TOKEN),i=this.getAttribute(s.THUMBNAIL_TOKEN),r=this.getAttribute(s.STORYBOARD_TOKEN);return{...l(this,le),...e!=null?{playback:e}:{},...i!=null?{thumbnail:i}:{},...r!=null?{storyboard:r}:{}}}set tokens(e){A(this,le,e!=null?e:{})}get playbackToken(){var e;return(e=this.getAttribute(s.PLAYBACK_TOKEN))!=null?e:void 0}set playbackToken(e){this.setAttribute(s.PLAYBACK_TOKEN,`${e}`)}get thumbnailToken(){var e;return(e=this.getAttribute(s.THUMBNAIL_TOKEN))!=null?e:void 0}set thumbnailToken(e){this.setAttribute(s.THUMBNAIL_TOKEN,`${e}`)}get storyboardToken(){var e;return(e=this.getAttribute(s.STORYBOARD_TOKEN))!=null?e:void 0}set storyboardToken(e){this.setAttribute(s.STORYBOARD_TOKEN,`${e}`)}addTextTrack(e,i,r,o){var m;let n=(m=this.media)==null?void 0:m.nativeEl;if(!!n)return da(n,e,i,r,o)}removeTextTrack(e){var r;let i=(r=this.media)==null?void 0:r.nativeEl;if(!!i)return ua(i,e)}get textTracks(){var e;return(e=this.media)==null?void 0:e.textTracks}};V=new WeakMap,le=new WeakMap,P=new WeakMap,de=new WeakMap,Y=new WeakMap,Z=new WeakSet,oe=function(){var e,i;if(!l(this,V)){A(this,V,!0),b(this,W,ne).call(this);try{if(customElements.upgrade(this.theme),!(this.theme instanceof p.HTMLElement))throw""}catch{x("<media-theme> failed to upgrade!")}try{if(customElements.upgrade(this.media),!(this.media instanceof la))throw""}catch{x("<mux-video> failed to upgrade!")}try{if(customElements.upgrade(this.mediaController),!(this.mediaController instanceof sa))throw""}catch{x("<media-controller> failed to upgrade!")}ut(this),b(this,we,Mt).call(this),b(this,Oe,Pt).call(this),A(this,P,(i=(e=this.mediaController)==null?void 0:e.hasAttribute("user-inactive"))!=null?i:!0),b(this,Re,Bt).call(this)}},xe=new WeakSet,Ct=function(){var e,i;try{(e=window==null?void 0:window.CSS)==null||e.registerProperty({name:"--primary-color",syntax:"<color>",inherits:!0,initialValue:"white"}),(i=window==null?void 0:window.CSS)==null||i.registerProperty({name:"--secondary-color",syntax:"<color>",inherits:!0,initialValue:"transparent"})}catch{}},ue=new WeakSet,Ke=function(e){Object.assign(l(this,Y),e),b(this,W,ne).call(this)},W=new WeakSet,ne=function(e={}){Tt(xt(ca(this,{...l(this,Y),...e})),this.shadowRoot)},we=new WeakSet,Mt=function(){var i;let e=r=>{let{detail:o}=r;if(o instanceof $e||(o=new $e(o.message,o.code,o.fatal)),!(o!=null&&o.fatal)){_(o),o.data&&_(`${o.name} data:`,o.data);return}let{dialog:n,devlog:m}=Ae(o,!window.navigator.onLine,this.playbackId,this.playbackToken);m.message&&he(m),x(o),o.data&&x(`${o.name} data:`,o.data),b(this,ue,Ke).call(this,{isDialogOpen:!0,dialog:n})};this.addEventListener("error",e),this.media&&(this.media.errorTranslator=(r={})=>{var n,m,g;if(!((n=this.media)!=null&&n.error))return r;let{devlog:o}=Ae((m=this.media)==null?void 0:m.error,!window.navigator.onLine,this.playbackId,this.playbackToken,!1);return{player_error_code:(g=this.media)==null?void 0:g.error.code,player_error_message:o.message?String(o.message):r.player_error_message}}),(i=this.media)==null||i.addEventListener("error",r=>{var n,m;let{detail:o}=r;if(!o){let{message:g,code:T}=(m=(n=this.media)==null?void 0:n.error)!=null?m:{};o=new $e(g,T)}!(o!=null&&o.fatal)||this.dispatchEvent(new CustomEvent("error",{detail:o}))})},Oe=new WeakSet,Pt=function(){var i,r,o,n;let e=()=>b(this,W,ne).call(this);(r=(i=this.media)==null?void 0:i.textTracks)==null||r.addEventListener("addtrack",e),(n=(o=this.media)==null?void 0:o.textTracks)==null||n.addEventListener("removetrack",e)},Re=new WeakSet,Bt=function(){var E,B,D;let e=this.mediaController,i=/.*Version\/.*Safari\/.*/.test(navigator.userAgent);if(i)return;let r,o=new WeakMap,n=()=>this.streamType&&[C.LIVE,C.LL_LIVE].includes(this.streamType)&&!this.secondaryColor&&this.offsetWidth>=800,m=(h,w,O=!1)=>{if(n())return;Array.from(h&&h.activeCues||[]).forEach(f=>{if(!(!f.snapToLines||f.line<-5||f.line>=0&&f.line<10))if(!w||this.paused){let me=f.text.split(`
-`).length,J=i?-2:-3;this.streamType&&[C.LIVE,C.LL_LIVE].includes(this.streamType)&&(J=i?-1:-2);let q=J-me;if(f.line===q&&!O)return;o.has(f)||o.set(f,f.line),f.line=q-1,f.line=q}else setTimeout(()=>{f.line=o.get(f)||"auto"},500)})},g=()=>{var h;m(r,(h=e==null?void 0:e.hasAttribute("user-inactive"))!=null?h:!1)},T=()=>{var O;let w=Array.from(((O=e==null?void 0:e.media)==null?void 0:O.textTracks)||[]).filter(R=>["subtitles","captions"].includes(R.kind)&&R.mode==="showing")[0];w!==r&&(r==null||r.removeEventListener("cuechange",g)),r=w,r==null||r.addEventListener("cuechange",g),m(r,l(this,P))};if(T(),(E=e==null?void 0:e.media)==null||E.textTracks.addEventListener("change",T),(B=e==null?void 0:e.media)==null||B.textTracks.addEventListener("addtrack",T),navigator.userAgent.includes("Chrome/")){let h=()=>{m(r,l(this,P),!0),this.paused||window.requestAnimationFrame(h)};(D=e==null?void 0:e.media)==null||D.addEventListener("playing",()=>{h()})}e==null||e.addEventListener("userinactivechange",()=>{let h=e==null?void 0:e.hasAttribute("user-inactive");l(this,P)!==h&&(A(this,P,h),m(r,l(this,P)))})};function U(t,a){return t.media?t.media.getAttribute(a):t.getAttribute(a)}p.customElements.get("mux-player")||(p.customElements.define("mux-player",se),p.MuxPlayerElement=se);var Ti=se;export{$e as MediaError,Ti as default,U as getVideoAttribute};
+`};import{MediaError as ye}from"@mux/mux-video";function fe(t,a,e,i,r){var u,h,A;let o={},n={};switch(t.code){case ye.MEDIA_ERR_NETWORK:{switch(o.title=l("Network Error",r),o.message=t.message,(u=t.data)==null?void 0:u.response.code){case 412:{o.title=l("Video is not currently available",r),o.message=l("The live stream or video file are not yet ready.",r),n.message=l("This playback-id may belong to a live stream that is not currently active or an asset that is not ready.",r),n.file="412-not-playable.md";break}case 404:{o.title=l("Video does not exist",r),o.message="",n.message=l("This playback-id does not exist. You may have used an Asset ID or an ID from a different resource.",r),n.file="404-not-found.md";break}case 403:{if(o.title=l("Invalid playback URL",r),o.message=l("The video URL or playback-token are formatted with incorrect or incomplete information.",r),n.message=l("403 error trying to access this playback URL. If this is a signed URL, you might need to provide a playback-token.",r),n.file="missing-signed-tokens.md",!i)break;let{exp:k,aud:B,sub:_}=D(i),b=Date.now()>k*1e3,w=_!==e,O=B!=="v",L={timeStyle:"medium",dateStyle:"medium"};if(b){o.title=l("Video URL has expired",r),o.message=l("The video\u2019s secured playback-token has expired.",r),n.message=l("The video\u2019s secured playback-token has expired.",r),n.context=l("Expired at: {expiredDate}. Current time: {currentDate}.",r).format({expiredDate:new Intl.DateTimeFormat(H.code,L).format(k*1e3),currentDate:new Intl.DateTimeFormat(H.code,L).format(Date.now())}),n.file="403-expired-token.md";break}if(w){o.title=l("Video URL is formatted incorrectly",r),o.message=l("The video\u2019s playback ID does not match the one encoded in the playback-token.",r),n.message=l("The video\u2019s playback ID does not match the one encoded in the playback-token.",r),n.context=l("Specified playback ID: {playbackId} and the playback ID encoded in the playback-token: {tokenPlaybackId}",r).format({playbackId:e,tokenPlaybackId:_}),n.file="403-playback-id-mismatch.md";break}if(O){o.title=l("Video URL is formatted incorrectly",r),o.message=l("The playback-token is formatted with incorrect information.",r),n.message=l("The playback-token is formatted with incorrect information.",r),n.context=l("The playback-token has an incorrect aud value: {tokenType}. aud value should be v.",r).format({tokenType:B}),n.file="403-incorrect-aud-value.md";break}n.message=l("403 error trying to access this playback URL. If this is a signed playback ID, the token might not have been generated correctly.",r),n.file="403-malformatted-token.md";break}}break}case ye.MEDIA_ERR_DECODE:{let{message:k}=t;o={title:l("Media Error",r),message:k},n.file="media-decode-error.md";break}case ye.MEDIA_ERR_SRC_NOT_SUPPORTED:{let k=(A=(h=t.data)==null?void 0:h.response)==null?void 0:A.code;if(k>=400&&k<500){t.code=ye.MEDIA_ERR_NETWORK,t.data={response:{code:k}},{dialog:o,devlog:n}=fe(t,a,e,i);break}o={title:l("Source Not Supported",r),message:t.message},n.file="media-src-not-supported.md";break}default:o={title:l("Error",r),message:t.message};break}return a&&(o={title:l("Your device appears to be offline",r),message:l("Check your internet connection and try reloading this video.",r)}),{dialog:o,devlog:n}}var oa=Object.values(C),M={SRC:"src",POSTER:"poster"},s={STYLE:"style",DEFAULT_HIDDEN_CAPTIONS:"default-hidden-captions",PRIMARY_COLOR:"primary-color",SECONDARY_COLOR:"secondary-color",FORWARD_SEEK_OFFSET:"forward-seek-offset",BACKWARD_SEEK_OFFSET:"backward-seek-offset",PLAYBACK_TOKEN:"playback-token",THUMBNAIL_TOKEN:"thumbnail-token",STORYBOARD_TOKEN:"storyboard-token",STORYBOARD_SRC:"storyboard-src",THUMBNAIL_TIME:"thumbnail-time",AUDIO:"audio",NOHOTKEYS:"nohotkeys",HOTKEYS:"hotkeys",PLAYBACK_RATES:"playbackrates",DEFAULT_SHOW_REMAINING_TIME:"default-show-remaining-time",TITLE:"title",PLACEHOLDER:"placeholder",THEME:"theme"};function na(t,a){var i;return{src:!t.playbackId&&t.src,playbackId:t.playbackId,hasSrc:!!t.playbackId||!!t.src,poster:t.poster,storyboard:t.storyboard,storyboardSrc:t.getAttribute(s.STORYBOARD_SRC),placeholder:t.getAttribute("placeholder"),themeTemplate:sa(t),thumbnailTime:!t.tokens.thumbnail&&t.thumbnailTime,autoplay:t.autoplay,crossOrigin:t.crossOrigin,loop:t.loop,noHotKeys:t.hasAttribute(s.NOHOTKEYS),hotKeys:t.getAttribute(s.HOTKEYS),muted:t.muted,paused:t.paused,preload:t.preload,envKey:t.envKey,preferCmcd:t.preferCmcd,debug:t.debug,disableCookies:t.disableCookies,tokens:t.tokens,beaconCollectionDomain:t.beaconCollectionDomain,maxResolution:t.maxResolution,metadata:t.metadata,playerSoftwareName:t.playerSoftwareName,playerSoftwareVersion:t.playerSoftwareVersion,startTime:t.startTime,preferPlayback:t.preferPlayback,audio:t.audio,streamType:t.streamType,primaryColor:t.primaryColor,secondaryColor:t.secondaryColor,forwardSeekOffset:t.forwardSeekOffset,backwardSeekOffset:t.backwardSeekOffset,defaultHiddenCaptions:t.defaultHiddenCaptions,defaultShowRemainingTime:t.defaultShowRemainingTime,hideDuration:la(t),playbackRates:t.getAttribute(s.PLAYBACK_RATES),customDomain:(i=t.getAttribute(d.CUSTOM_DOMAIN))!=null?i:void 0,title:t.getAttribute(s.TITLE),...a}}function sa(t){var e,i;let a=t.getAttribute(s.THEME);if(a){let r=(i=(e=t.getRootNode())==null?void 0:e.getElementById)==null?void 0:i.call(e,a);if(r)return r;a.startsWith("media-theme-")||(a=`media-theme-${a}`);let o=p.customElements.get(a);if(o!=null&&o.template)return o.template}}function la(t){var e;let a=(e=t.mediaController)==null?void 0:e.querySelector("media-time-display");return a&&getComputedStyle(a).getPropertyValue("--media-duration-display-display").trim()==="none"}var da=Object.values(d),ma=Object.values(M),ua=Object.values(s),ca=ue(),pa="mux-player",At={dialog:void 0,isDialogOpen:!1},V,oe,P,ne,Y,Z,ae,Ee,xt,se,Ie,W,ie,Te,wt,Ae,Ot,xe,Lt,re=class extends Be{constructor(){super();c(this,Z);c(this,Ee);c(this,se);c(this,W);c(this,Te);c(this,Ae);c(this,xe);c(this,V,!1);c(this,oe,{});c(this,P,!0);c(this,ne,new me(this,"hotkeys"));c(this,Y,{...At,onCloseErrorDialog:()=>f(this,se,Ie).call(this,{dialog:void 0,isDialogOpen:!1}),onInitFocusDialog:e=>{Se(this,E.activeElement)||e.preventDefault()}});this.attachShadow({mode:"open"}),f(this,Ee,xt).call(this),this.isConnected&&f(this,Z,ae).call(this)}static get observedAttributes(){var e;return[...(e=Be.observedAttributes)!=null?e:[],...ma,...da,...ua]}get mediaTheme(){var e;return(e=this.shadowRoot)==null?void 0:e.querySelector("media-theme")}get mediaController(){var e,i;return(i=(e=this.mediaTheme)==null?void 0:e.shadowRoot)==null?void 0:i.querySelector("media-controller")}get metadataFromAttrs(){return this.getAttributeNames().filter(e=>e.startsWith("metadata-")).reduce((e,i)=>{let r=this.getAttribute(i);return r!==null&&(e[i.replace(/^metadata-/,"").replace(/-/g,"_")]=r),e},{})}connectedCallback(){var i;let e=(i=this.shadowRoot)==null?void 0:i.querySelector("mux-video");e&&(e.metadata=this.metadataFromAttrs)}attributeChangedCallback(e,i,r){switch(m(this,V)||f(this,Z,ae).call(this),super.attributeChangedCallback(e,i,r),e){case s.HOTKEYS:m(this,ne).value=r;break;case s.THUMBNAIL_TIME:{r!=null&&this.tokens.thumbnail&&N(l("Use of thumbnail-time with thumbnail-token is currently unsupported. Ignore thumbnail-time.").format({}));break}case s.THUMBNAIL_TOKEN:{let{aud:n}=D(r);r&&n!=="t"&&N(l("The provided thumbnail-token should have audience value 't' instead of '{aud}'.").format({aud:n}));break}case s.STORYBOARD_TOKEN:{let{aud:n}=D(r);r&&n!=="s"&&N(l("The provided storyboard-token should have audience value 's' instead of '{aud}'.").format({aud:n}));break}case d.PLAYBACK_ID:{r!=null&&r.includes("?token")&&x(l("The specificed playback ID {playbackId} contains a token which must be provided via the playback-token attribute.").format({playbackId:r})),this.streamType?this.streamType!=null&&!oa.includes(this.streamType)&&ce({file:"invalid-stream-type.md",message:l("Invalid stream-type value supplied: `{streamType}`. Please provide stream-type as either: `on-demand`, `live`, `ll-live`, `live:dvr`, or `ll-live:dvr`").format({streamType:this.streamType})}):ce({file:"invalid-stream-type.md",message:String(l("No stream-type value supplied. Defaulting to `on-demand`. Please provide stream-type as either: `on-demand`, `live`, `ll-live`, `live:dvr`, or `ll-live:dvr`"))});break}}[d.PLAYBACK_ID,M.SRC,s.PLAYBACK_TOKEN].includes(e)&&i!==r&&T(this,Y,{...m(this,Y),...At}),f(this,W,ie).call(this,{[it(e)]:r})}get preferCmcd(){var e;return(e=this.getAttribute(d.PREFER_CMCD))!=null?e:void 0}set preferCmcd(e){e!==this.preferCmcd&&(e?Tt.includes(e)?this.setAttribute(d.PREFER_CMCD,e):N(`Invalid value for preferCmcd. Must be one of ${Tt.join()}`):this.removeAttribute(d.PREFER_CMCD))}get hasPlayed(){var e,i;return(i=(e=this.mediaController)==null?void 0:e.hasAttribute("media-has-played"))!=null?i:!1}get inLiveWindow(){var e;return(e=this.mediaController)==null?void 0:e.hasAttribute("media-time-is-live")}get _hls(){var e;return(e=this.media)==null?void 0:e._hls}get mux(){var e;return(e=this.media)==null?void 0:e.mux}get theme(){var e;return(e=this.getAttribute(s.THEME))!=null?e:""}set theme(e){this.setAttribute(s.THEME,`${e}`)}get playbackId(){var e;return(e=this.getAttribute(d.PLAYBACK_ID))!=null?e:void 0}set playbackId(e){e?this.setAttribute(d.PLAYBACK_ID,e):this.removeAttribute(d.PLAYBACK_ID)}get src(){var e,i;return this.playbackId?(e=U(this,M.SRC))!=null?e:void 0:(i=this.getAttribute(M.SRC))!=null?i:void 0}set src(e){e?this.setAttribute(M.SRC,e):this.removeAttribute(M.SRC)}get poster(){var i;let e=this.getAttribute(M.POSTER);if(e!=null)return e;if(this.playbackId&&!this.audio)return tt(this.playbackId,{domain:this.customDomain,thumbnailTime:(i=this.thumbnailTime)!=null?i:this.startTime,token:this.tokens.thumbnail})}set poster(e){e||e===""?this.setAttribute(M.POSTER,e):this.removeAttribute(M.POSTER)}get storyboardSrc(){var e;return(e=this.getAttribute(s.STORYBOARD_SRC))!=null?e:void 0}set storyboardSrc(e){e?this.setAttribute(s.STORYBOARD_SRC,e):this.removeAttribute(s.STORYBOARD_SRC)}get storyboard(){if(!this.audio&&(!this.streamType||![C.LIVE,C.LL_LIVE,C.DVR,C.LL_DVR].includes(this.streamType))){if(this.storyboardSrc&&!this.tokens.storyboard)return this.storyboardSrc;if(this.playbackId)return at(this.playbackId,{domain:this.customDomain,token:this.tokens.storyboard})}}get audio(){return this.hasAttribute(s.AUDIO)}set audio(e){if(!e){this.removeAttribute(s.AUDIO);return}this.setAttribute(s.AUDIO,"")}get hotkeys(){return m(this,ne)}get nohotkeys(){return this.hasAttribute(s.NOHOTKEYS)}set nohotkeys(e){if(!e){this.removeAttribute(s.NOHOTKEYS);return}this.setAttribute(s.NOHOTKEYS,"")}get thumbnailTime(){return R(this.getAttribute(s.THUMBNAIL_TIME))}set thumbnailTime(e){this.setAttribute(s.THUMBNAIL_TIME,`${e}`)}get title(){var e;return(e=this.getAttribute(s.TITLE))!=null?e:""}set title(e){e!==this.title&&(e?this.setAttribute(s.TITLE,e):this.removeAttribute("title"),super.title=e)}get placeholder(){var e;return(e=U(this,s.PLACEHOLDER))!=null?e:""}set placeholder(e){this.setAttribute(s.PLACEHOLDER,`${e}`)}get primaryColor(){var i,r;let e=this.getAttribute(s.PRIMARY_COLOR);if(e!=null||this.mediaTheme&&(e=(r=(i=p.getComputedStyle(this.mediaTheme))==null?void 0:i.getPropertyValue("--_primary-color"))==null?void 0:r.trim(),e))return e}set primaryColor(e){this.setAttribute(s.PRIMARY_COLOR,`${e}`)}get secondaryColor(){var i,r;let e=this.getAttribute(s.SECONDARY_COLOR);if(e!=null||this.mediaTheme&&(e=(r=(i=p.getComputedStyle(this.mediaTheme))==null?void 0:i.getPropertyValue("--_secondary-color"))==null?void 0:r.trim(),e))return e}set secondaryColor(e){this.setAttribute(s.SECONDARY_COLOR,`${e}`)}get defaultShowRemainingTime(){return this.hasAttribute(s.DEFAULT_SHOW_REMAINING_TIME)}set defaultShowRemainingTime(e){e?this.setAttribute(s.DEFAULT_SHOW_REMAINING_TIME,""):this.removeAttribute(s.DEFAULT_SHOW_REMAINING_TIME)}get playbackRates(){if(!!this.hasAttribute(s.PLAYBACK_RATES))return this.getAttribute(s.PLAYBACK_RATES).trim().split(/\s*,?\s+/).map(e=>Number(e)).filter(e=>!Number.isNaN(e)).sort((e,i)=>e-i)}set playbackRates(e){if(!e){this.removeAttribute(s.PLAYBACK_RATES);return}this.setAttribute(s.PLAYBACK_RATES,e.join(" "))}get forwardSeekOffset(){var e;return(e=R(this.getAttribute(s.FORWARD_SEEK_OFFSET)))!=null?e:10}set forwardSeekOffset(e){this.setAttribute(s.FORWARD_SEEK_OFFSET,`${e}`)}get backwardSeekOffset(){var e;return(e=R(this.getAttribute(s.BACKWARD_SEEK_OFFSET)))!=null?e:10}set backwardSeekOffset(e){this.setAttribute(s.BACKWARD_SEEK_OFFSET,`${e}`)}get defaultHiddenCaptions(){return this.hasAttribute(s.DEFAULT_HIDDEN_CAPTIONS)}set defaultHiddenCaptions(e){e?this.setAttribute(s.DEFAULT_HIDDEN_CAPTIONS,""):this.removeAttribute(s.DEFAULT_HIDDEN_CAPTIONS)}get playerSoftwareName(){var e;return(e=this.getAttribute(d.PLAYER_SOFTWARE_NAME))!=null?e:pa}get playerSoftwareVersion(){var e;return(e=this.getAttribute(d.PLAYER_SOFTWARE_VERSION))!=null?e:ca}get beaconCollectionDomain(){var e;return(e=this.getAttribute(d.BEACON_COLLECTION_DOMAIN))!=null?e:void 0}set beaconCollectionDomain(e){e!==this.beaconCollectionDomain&&(e?this.setAttribute(d.BEACON_COLLECTION_DOMAIN,e):this.removeAttribute(d.BEACON_COLLECTION_DOMAIN))}get maxResolution(){var e;return(e=this.getAttribute(d.MAX_RESOLUTION))!=null?e:void 0}set maxResolution(e){e!==this.maxResolution&&(e?this.setAttribute(d.MAX_RESOLUTION,e):this.removeAttribute(d.MAX_RESOLUTION))}get customDomain(){var e;return(e=this.getAttribute(d.CUSTOM_DOMAIN))!=null?e:void 0}set customDomain(e){e!==this.customDomain&&(e?this.setAttribute(d.CUSTOM_DOMAIN,e):this.removeAttribute(d.CUSTOM_DOMAIN))}get envKey(){var e;return(e=U(this,d.ENV_KEY))!=null?e:void 0}set envKey(e){this.setAttribute(d.ENV_KEY,`${e}`)}get debug(){return U(this,d.DEBUG)!=null}set debug(e){e?this.setAttribute(d.DEBUG,""):this.removeAttribute(d.DEBUG)}get disableCookies(){return U(this,d.DISABLE_COOKIES)!=null}set disableCookies(e){e?this.setAttribute(d.DISABLE_COOKIES,""):this.removeAttribute(d.DISABLE_COOKIES)}get streamType(){return U(this,d.STREAM_TYPE)}set streamType(e){this.setAttribute(d.STREAM_TYPE,`${e}`)}get startTime(){return R(U(this,d.START_TIME))}set startTime(e){this.setAttribute(d.START_TIME,`${e}`)}get preferPlayback(){let e=this.getAttribute(d.PREFER_PLAYBACK);if(e===ke.MSE||e===ke.NATIVE)return e}set preferPlayback(e){e!==this.preferPlayback&&(e===ke.MSE||e===ke.NATIVE?this.setAttribute(d.PREFER_PLAYBACK,e):this.removeAttribute(d.PREFER_PLAYBACK))}get metadata(){var e;return(e=this.media)==null?void 0:e.metadata}set metadata(e){if(m(this,V)||f(this,Z,ae).call(this),!this.media){x("underlying media element missing when trying to set metadata. metadata will not be set.");return}this.media.metadata={...this.metadataFromAttrs,...e}}async addCuePoints(e){var i;if(m(this,V)||f(this,Z,ae).call(this),!this.media){x("underlying media element missing when trying to addCuePoints. cuePoints will not be added.");return}return(i=this.media)==null?void 0:i.addCuePoints(e)}get activeCuePoint(){var e;return(e=this.media)==null?void 0:e.activeCuePoint}get cuePoints(){var e,i;return(i=(e=this.media)==null?void 0:e.cuePoints)!=null?i:[]}get tokens(){let e=this.getAttribute(s.PLAYBACK_TOKEN),i=this.getAttribute(s.THUMBNAIL_TOKEN),r=this.getAttribute(s.STORYBOARD_TOKEN);return{...m(this,oe),...e!=null?{playback:e}:{},...i!=null?{thumbnail:i}:{},...r!=null?{storyboard:r}:{}}}set tokens(e){T(this,oe,e!=null?e:{})}get playbackToken(){var e;return(e=this.getAttribute(s.PLAYBACK_TOKEN))!=null?e:void 0}set playbackToken(e){this.setAttribute(s.PLAYBACK_TOKEN,`${e}`)}get thumbnailToken(){var e;return(e=this.getAttribute(s.THUMBNAIL_TOKEN))!=null?e:void 0}set thumbnailToken(e){this.setAttribute(s.THUMBNAIL_TOKEN,`${e}`)}get storyboardToken(){var e;return(e=this.getAttribute(s.STORYBOARD_TOKEN))!=null?e:void 0}set storyboardToken(e){this.setAttribute(s.STORYBOARD_TOKEN,`${e}`)}addTextTrack(e,i,r,o){var u;let n=(u=this.media)==null?void 0:u.nativeEl;if(!!n)return ia(n,e,i,r,o)}removeTextTrack(e){var r;let i=(r=this.media)==null?void 0:r.nativeEl;if(!!i)return ra(i,e)}get textTracks(){var e;return(e=this.media)==null?void 0:e.textTracks}};V=new WeakMap,oe=new WeakMap,P=new WeakMap,ne=new WeakMap,Y=new WeakMap,Z=new WeakSet,ae=function(){var e,i;if(!m(this,V)){T(this,V,!0),f(this,W,ie).call(this);try{if(customElements.upgrade(this.mediaTheme),!(this.mediaTheme instanceof p.HTMLElement))throw""}catch{x("<media-theme> failed to upgrade!")}try{if(customElements.upgrade(this.media),!(this.media instanceof aa))throw""}catch{x("<mux-video> failed to upgrade!")}try{if(customElements.upgrade(this.mediaController),!(this.mediaController instanceof ta))throw""}catch{x("<media-controller> failed to upgrade!")}st(this),f(this,Te,wt).call(this),f(this,Ae,Ot).call(this),T(this,P,(i=(e=this.mediaController)==null?void 0:e.hasAttribute("user-inactive"))!=null?i:!0),f(this,xe,Lt).call(this)}},Ee=new WeakSet,xt=function(){var e,i;try{(e=window==null?void 0:window.CSS)==null||e.registerProperty({name:"--media-primary-color",syntax:"<color>",inherits:!0}),(i=window==null?void 0:window.CSS)==null||i.registerProperty({name:"--media-secondary-color",syntax:"<color>",inherits:!0})}catch{}},se=new WeakSet,Ie=function(e){Object.assign(m(this,Y),e),f(this,W,ie).call(this)},W=new WeakSet,ie=function(e={}){yt(ft(na(this,{...m(this,Y),...e})),this.shadowRoot)},Te=new WeakSet,wt=function(){var i;let e=r=>{let{detail:o}=r;if(o instanceof ve||(o=new ve(o.message,o.code,o.fatal)),!(o!=null&&o.fatal)){N(o),o.data&&N(`${o.name} data:`,o.data);return}let{dialog:n,devlog:u}=fe(o,!window.navigator.onLine,this.playbackId,this.playbackToken);u.message&&ce(u),x(o),o.data&&x(`${o.name} data:`,o.data),f(this,se,Ie).call(this,{isDialogOpen:!0,dialog:n})};this.addEventListener("error",e),this.media&&(this.media.errorTranslator=(r={})=>{var n,u,h;if(!(((n=this.media)==null?void 0:n.error)instanceof ve))return r;let{devlog:o}=fe((u=this.media)==null?void 0:u.error,!window.navigator.onLine,this.playbackId,this.playbackToken,!1);return{player_error_code:(h=this.media)==null?void 0:h.error.code,player_error_message:o.message?String(o.message):r.player_error_message,player_error_context:o.context?String(o.context):r.player_error_context}}),(i=this.media)==null||i.addEventListener("error",r=>{var n,u;let{detail:o}=r;if(!o){let{message:h,code:A}=(u=(n=this.media)==null?void 0:n.error)!=null?u:{};o=new ve(h,A)}!(o!=null&&o.fatal)||this.dispatchEvent(new CustomEvent("error",{detail:o}))})},Ae=new WeakSet,Ot=function(){var i,r,o,n;let e=()=>f(this,W,ie).call(this);(r=(i=this.media)==null?void 0:i.textTracks)==null||r.addEventListener("addtrack",e),(n=(o=this.media)==null?void 0:o.textTracks)==null||n.addEventListener("removetrack",e)},xe=new WeakSet,Lt=function(){var k,B,_;let e=this.mediaController,i=/.*Version\/.*Safari\/.*/.test(navigator.userAgent);if(i)return;let r,o=new WeakMap,n=()=>this.streamType&&[C.LIVE,C.LL_LIVE].includes(this.streamType)&&!this.secondaryColor&&this.offsetWidth>=800,u=(b,w,O=!1)=>{if(n())return;Array.from(b&&b.activeCues||[]).forEach(g=>{if(!(!g.snapToLines||g.line<-5||g.line>=0&&g.line<10))if(!w||this.paused){let le=g.text.split(`
+`).length,G=i?-2:-3;this.streamType&&[C.LIVE,C.LL_LIVE].includes(this.streamType)&&(G=i?-1:-2);let j=G-le;if(g.line===j&&!O)return;o.has(g)||o.set(g,g.line),g.line=j-1,g.line=j}else setTimeout(()=>{g.line=o.get(g)||"auto"},500)})},h=()=>{var b;u(r,(b=e==null?void 0:e.hasAttribute("user-inactive"))!=null?b:!1)},A=()=>{var O;let w=Array.from(((O=e==null?void 0:e.media)==null?void 0:O.textTracks)||[]).filter(L=>["subtitles","captions"].includes(L.kind)&&L.mode==="showing")[0];w!==r&&(r==null||r.removeEventListener("cuechange",h)),r=w,r==null||r.addEventListener("cuechange",h),u(r,m(this,P))};if(A(),(k=e==null?void 0:e.media)==null||k.textTracks.addEventListener("change",A),(B=e==null?void 0:e.media)==null||B.textTracks.addEventListener("addtrack",A),navigator.userAgent.includes("Chrome/")){let b=()=>{u(r,m(this,P),!0),this.paused||window.requestAnimationFrame(b)};(_=e==null?void 0:e.media)==null||_.addEventListener("playing",()=>{b()})}e==null||e.addEventListener("userinactivechange",()=>{let b=e==null?void 0:e.hasAttribute("user-inactive");m(this,P)!==b&&(T(this,P,b),u(r,m(this,P)))})};function U(t,a){return t.media?t.media.getAttribute(a):t.getAttribute(a)}p.customElements.get("mux-player")||(p.customElements.define("mux-player",re),p.MuxPlayerElement=re);var hi=re;export{ve as MediaError,hi as default,U as getVideoAttribute};