@mattebox/player-diagnostics 0.3.0 → 0.5.0

package/README.md

@@ -4,12 +4,14 @@
 </h1>
 
 `<mbx-diagnostics>` for the
-[Mattebox player](https://github.com/jboix/mattebox-player): what the
-session is doing and what the browser can do, inside the player, and a
-report to send when something goes wrong. In the bar it is a button that
-opens a panel over the picture; anywhere else in the player, the panel
-itself, in flow under the video. Importing the package registers the
-element.
+[Mattebox player](https://github.com/jboix/mattebox-player). The element
+shows, inside the player, what the session is doing and what the browser
+supports. It also builds a report a page sends when playback fails.
+
+- Inside the bar, the element is a button that opens a panel over the picture.
+- Anywhere else in the player, the element is the panel itself, under the video.
+
+The import registers the element.
 
 ```sh
 npm install @mattebox/player-diagnostics @mattebox/player mattebox
@@ -31,12 +33,17 @@ npm install @mattebox/player-diagnostics @mattebox/player mattebox
 </script>
 ```
 
-The panel has four pages: the playback facts, the charts of the buffer,
-the throughput, the stalls, the frames and the quality switches, the
-engine's state, and the browser's support for codecs and DRM. The Copy
-button puts the report on the clipboard, `element.report()` returns it,
-and every fatal error dispatches it as a `report` event on the element,
-bubbling through the player:
+The panel has four pages:
+
+- The playback facts.
+- The charts of the buffer, the throughput, the stalls, the frames and the quality switches.
+- The state of the engine.
+- The browser's support for codecs and DRM.
+
+The report is available in three ways. The Copy button puts it on the
+clipboard. `element.report()` returns it. Every fatal error dispatches it
+as a `report` event on the element, and the event bubbles through the
+player:
 
 ```ts
 player.addEventListener('report', (event) => {
@@ -45,4 +52,4 @@ player.addEventListener('report', (event) => {
 ```
 
 The [guide](https://github.com/jboix/mattebox-player/blob/main/docs/guide/05-diagnostics.md)
-covers the rest.
+explains the rest.

package/dist/cdn/mattebox-player-diagnostics.min.js

@@ -1,124 +1 @@
-var matteboxPlayerDiagnostics=(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function t(e){return!Number.isFinite(e)||e<=0?`0 bps`:e>=1e6?`${(e/1e6).toFixed(e>=1e7?0:1)} Mbps`:e>=1e3?`${Math.round(e/1e3)} kbps`:`${Math.round(e)} bps`}function n(e){if(!Number.isFinite(e))return`–`;let t=Math.max(0,Math.floor(e)),n=Math.floor(t/3600),r=Math.floor(t%3600/60),i=t%60,a=e=>e<10?`0${e}`:`${e}`;return n>0?`${n}:${a(r)}:${a(i)}`:`${r}:${a(i)}`}function r(e,t=1){return e==null||!Number.isFinite(e)?`–`:e.toFixed(t)}function i(e,t){return t>0?`${(e/t*100).toFixed(2)}%`:`0%`}function a(e){return e.length===0?`none`:e.map(e=>`${e.start.toFixed(1)}–${e.end.toFixed(1)}`).join(`, `)}function o(e){return e===null?`–`:e.height===void 0?t(e.bitrate):`${e.height}p, ${t(e.bitrate)}`}let s=[`buffer`,`throughput`,`stalls`,`frames`,`switches`];function c(e,t){let n=e/Math.max(t,1),r=Math.pow(10,Math.floor(Math.log10(Math.max(n,1e-9))));for(let e of[1,2,5,10])if(n<=e*r)return e*r;return 10*r}function l(e,t){let n=document.createElement(`canvas`).getContext(`2d`);if(n===null)return e;n.fillStyle=e;let r=n.fillStyle;return/^#[0-9a-f]{6}$/i.test(r)?`rgba(${Number.parseInt(r.slice(1,3),16)}, ${Number.parseInt(r.slice(3,5),16)}, ${Number.parseInt(r.slice(5,7),16)}, ${t})`:e}function u(e,r,i){function a(){let t=e.getContext(`2d`);if(t===null)return null;let n=window.devicePixelRatio||1,r=e.clientWidth,i=e.clientHeight;if(r===0||i===0)return null;let a=Math.round(r*n),o=Math.round(i*n);return(e.width!==a||e.height!==o)&&(e.width=a,e.height=o),t.setTransform(n,0,0,n,0,0),t.clearRect(0,0,r,i),t.font=`10px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`,{ctx:t,w:r,h:i,left:44,right:r-8,top:8,bottom:i-18}}function o(e,t,r,i){let a=n=>e.left+(n-t)/(r-t)*(e.right-e.left),o=(r-t)/1e3,s=c(o,6);e.ctx.strokeStyle=l(i.muted,.25),e.ctx.fillStyle=i.muted,e.ctx.textAlign=`center`,e.ctx.textBaseline=`top`;for(let t=0;t<=o;t+=s){let i=a(r-t*1e3);e.ctx.beginPath(),e.ctx.moveTo(i,e.top),e.ctx.lineTo(i,e.bottom),e.ctx.stroke();let o=t===0?`now`:t<60?`-${t}s`:`-${n(t)}`;e.ctx.fillText(o,i,e.bottom+3)}return a}function s(e,t,n,r){let i=n=>e.bottom-n/t*(e.bottom-e.top),a=c(t,4);e.ctx.strokeStyle=l(r.muted,.25),e.ctx.fillStyle=r.muted,e.ctx.textAlign=`right`,e.ctx.textBaseline=`middle`;for(let r=0;r<=t;r+=a){let t=i(r);e.ctx.beginPath(),e.ctx.moveTo(e.left,t),e.ctx.lineTo(e.right,t),e.ctx.stroke(),e.ctx.fillText(n(r),e.left-4,t)}return i}function u(e,t,n,r={}){var i;if(t.length===0)return;e.ctx.save(),e.ctx.strokeStyle=n,e.ctx.lineWidth=(i=r.width)==null?2:i,e.ctx.setLineDash(r.dashed===!0?[4,4]:[]),e.ctx.beginPath();let a;for(let n of t)a===void 0?e.ctx.moveTo(n[0],n[1]):(r.step===!0&&e.ctx.lineTo(n[0],a[1]),e.ctx.lineTo(n[0],n[1])),a=n;e.ctx.stroke(),e.ctx.restore()}function d(e,t,n,r,i=2.5){e.ctx.fillStyle=r,e.ctx.beginPath(),e.ctx.arc(t,n,i,0,Math.PI*2),e.ctx.fill()}function f(e,t,n,r){e.ctx.save(),e.ctx.strokeStyle=n,e.ctx.lineWidth=1,e.ctx.setLineDash([2,3]),e.ctx.beginPath(),e.ctx.moveTo(t,e.top),e.ctx.lineTo(t,e.bottom),e.ctx.stroke(),e.ctx.restore(),e.ctx.fillStyle=n,e.ctx.textAlign=`center`,e.ctx.textBaseline=`top`,e.ctx.fillText(r,t,e.top)}function p(e){r.replaceChildren();for(let[t,n]of e){let e=document.createElement(`span`);e.setAttribute(`part`,`legend-item`);let i=document.createElement(`span`);i.setAttribute(`part`,`swatch`),i.style.background=n,e.append(i,t),r.append(e)}}function m(e,t){let n=e.findIndex(e=>e.t>=t);return n<0?e.length>0?[e[e.length-1]]:[]:e.slice(Math.max(0,n-1))}function h(e){var t;return(t=e==null?void 0:e.quality.renditions)==null?[]:t}function g(e,r){var a,o,s,c,u,d;let{video:m,engine:g,palette:_}=r,v=(a=g==null?void 0:g.stats.snapshot())==null?null:a,y=(o=v==null||(s=v.presentation)==null?void 0:s.duration)==null?m.duration:o,b=(c=v==null?void 0:v.live)==null?null:c,x=m.currentTime,S=0,C=Number.isFinite(y)&&y>0?y:Math.max(x+10,10);b===null?C>600&&(S=Math.max(0,x-60),C=x+180):(S=b.span.start,C=Math.max(b.span.end,x+10));let w=t=>e.left+(t-S)/(C-S)*(e.right-e.left),T=v===null?[{label:`video`,ranges:Array.from({length:m.buffered.length},(e,t)=>({start:m.buffered.start(t),end:m.buffered.end(t)}))}]:[...v.buffers.entries()].map(([e,t])=>({label:e.replace(`sb:`,``),ranges:t.ranges}));T.length===0&&T.push({label:`video`,ranges:[]});let E=h(g),D=Math.min(34,(e.bottom-e.top-8*(T.length-1))/T.length);e.ctx.textAlign=`left`,e.ctx.textBaseline=`middle`,T.forEach((t,n)=>{let r=e.top+n*(D+8);if(e.ctx.fillStyle=l(_.muted,.15),e.ctx.fillRect(e.left,r,e.right-e.left,D),v!==null)for(let[t,n]of v.quality.appendLog){var i;let a=E.findIndex(e=>e.id===n);e.ctx.fillStyle=l((i=_.series[Math.max(0,a)%_.series.length])==null?_.accent:i,.3),e.ctx.fillRect(w(t.start),r,Math.max(1,w(t.end)-w(t.start)),D)}e.ctx.fillStyle=_.ink;for(let n of t.ranges)e.ctx.fillRect(w(n.start),r+D-4,Math.max(1,w(n.end)-w(n.start)),3);e.ctx.fillStyle=_.muted,e.ctx.fillText(t.label,e.left+4,r+D/2)}),b!==null&&f(e,w(b.edge),_.warn,`edge`),e.ctx.fillStyle=_.accent,e.ctx.fillRect(w(x)-1,e.top,2,e.bottom-e.top),e.ctx.fillStyle=_.muted,e.ctx.textAlign=`left`,e.ctx.textBaseline=`top`,e.ctx.fillText(n(S),e.left,e.bottom+3),e.ctx.textAlign=`right`,e.ctx.fillText(n(C),e.right,e.bottom+3),p([...E.map((e,n)=>{var r;return[e.height===void 0?t(e.bitrate):`${e.height}p`,(r=_.series[n%_.series.length])==null?_.accent:r]}),[`buffered`,_.ink],[`playhead`,_.accent]]);let O=(u=(d=r.samples[r.samples.length-1])==null?void 0:d.ahead)==null?0:u;i.textContent=`${n(x)} of ${n(C)}, ${O.toFixed(1)}s buffered ahead${b===null?``:`, window ${n(b.span.start)} to ${n(b.span.end)}`}`}function _(e,n,r,a){var c,l,f,h,g,_;let v=n.palette,y=m(n.samples,r),b=n.marks.filter(e=>e.kind===`segment`&&e.t>=r),x=s(e,Math.max(1e6,...y.map(e=>Math.max(e.slow,e.fast,e.playingBitrate)),...b.map(e=>e.value))*1.15,e=>(e/1e6).toFixed(e>=1e7?0:1),v),S=o(e,r,a,v);for(let t of b){var C,w,T;let n=((C=t.trackId)==null?void 0:C.startsWith(`aud`))===!0||((w=t.trackId)==null?void 0:w.includes(`audio`))===!0;d(e,S(t.t),x(t.value),(T=n?v.series[4]:v.series[0])==null?v.accent:T)}u(e,y.map(e=>[S(e.t),x(e.slow)]),(c=v.series[1])==null?v.accent:c),u(e,y.map(e=>[S(e.t),x(e.fast)]),(l=v.series[2])==null?v.accent:l,{dashed:!0}),u(e,y.map(e=>[S(e.t),x(e.playingBitrate)]),v.muted,{step:!0,width:1.5}),p([[`video segment`,(f=v.series[0])==null?v.accent:f],[`audio segment`,(h=v.series[4])==null?v.accent:h],[`slow estimate`,(g=v.series[1])==null?v.accent:g],[`fast estimate`,(_=v.series[2])==null?v.accent:_],[`playing bitrate`,v.muted]]);let E=y[y.length-1];i.textContent=E===void 0?`Mbps`:`Mbps. Now: slow ${t(E.slow)}, fast ${t(E.fast)}, playing ${t(E.playingBitrate)}`}function v(e,t,n,r){var a,c,d,h,g;let _=t.palette,v=m(t.samples,n),y=s(e,Math.max(5,...v.map(e=>e.ahead))*1.15,e=>`${e.toFixed(0)}s`,_),b=o(e,n,r,_);e.ctx.fillStyle=l((a=_.series[3])==null?_.accent:a,.25);let x=null;for(let[t,n]of v.entries()){n.stalled&&x===null&&(x=n.t);let r=t===v.length-1;(!n.stalled||r)&&x!==null&&(e.ctx.fillRect(b(x),e.top,Math.max(2,b(n.t)-b(x)),e.bottom-e.top),x=null)}u(e,v.map(e=>[b(e.t),y(e.ahead)]),(c=_.series[0])==null?_.accent:c);for(let r of t.marks)r.t<n||r.kind===`segment`||r.kind===`switch`||(r.kind===`stall`?f(e,b(r.t),_.accent,`!`):r.kind===`seek`?f(e,b(r.t),_.muted,`>`):f(e,b(r.t),_.warn,r.kind.charAt(0).toUpperCase()));p([[`buffered ahead`,(d=_.series[0])==null?_.accent:d],[`stalled`,(h=_.series[3])==null?_.accent:h],[`! stall`,_.accent],[`> seek`,_.muted],[`N F S G recovery`,_.warn]]);let S=t.counters,C=((g=v[v.length-1])==null?void 0:g.stalled)===!0?`, stalled now`:``;i.textContent=`${S.stalls} stalls, ${S.stalledSeconds.toFixed(1)}s stalled in total${C}`}function y(e,t,n,r){var a,c;let l=t.palette,d=m(t.samples,n),f=d.map((e,t)=>{let n=d[t-1],r=n===void 0?.5:Math.max((e.t-n.t)/1e3,.05);return e.decoded/r}),h=s(e,Math.max(30,...f)*1.15,e=>e.toFixed(0),l),g=o(e,n,r,l),_=Math.max(1,...d.map(e=>e.dropped));e.ctx.fillStyle=l.accent;for(let t of d){if(t.dropped===0)continue;let n=t.dropped/_*(e.bottom-e.top)*.6;e.ctx.fillRect(g(t.t)-1.5,e.bottom-n,3,n)}u(e,d.map((e,t)=>{var n;return[g(e.t),h((n=f[t])==null?0:n)]}),(a=l.series[0])==null?l.accent:a),p([[`decoded per second`,(c=l.series[0])==null?l.accent:c],[`dropped, relative`,l.accent]]);let v=t.counters,y=v.decoded>0?(v.dropped/v.decoded*100).toFixed(2):`0.00`;i.textContent=`${v.decoded} decoded, ${v.dropped} dropped (${y}%) this session`}function b(e,n,r,a){var s,c;let d=n.palette,g=m(n.samples,r),_=h(n.engine),v=_.some(e=>e.height!==void 0),y=_.map(e=>{var t;return v?(t=e.height)==null?0:t:e.bitrate}),b=Math.max(1,...y,...g.map(e=>v?e.playingHeight:e.playingBitrate))*1.15,x=t=>e.bottom-t/b*(e.bottom-e.top);e.ctx.strokeStyle=l(d.muted,.25),e.ctx.fillStyle=d.muted,e.ctx.textAlign=`right`,e.ctx.textBaseline=`middle`;for(let n of y){let r=x(n);e.ctx.beginPath(),e.ctx.moveTo(e.left,r),e.ctx.lineTo(e.right,r),e.ctx.stroke(),e.ctx.fillText(v?`${n}p`:t(n),e.left-4,r)}let S=o(e,r,a,d);u(e,g.map(e=>[S(e.t),x(v?e.playingHeight:e.playingBitrate)]),(s=d.series[0])==null?d.accent:s,{step:!0});for(let t of n.marks)t.kind===`switch`&&t.t>=r&&f(e,S(t.t),d.warn,`S`);p([[`playing`,(c=d.series[0])==null?d.accent:c],[`S switch`,d.warn]]);let C=g[g.length-1],w=C===void 0||C.playingId===null?`–`:v?`${C.playingHeight}p`:t(C.playingBitrate);i.textContent=`${n.counters.switches} switches this session, now ${w}`}return{draw(e){let t=a();if(t===null)return;if(e.engine===null&&(e.tab===`throughput`||e.tab===`switches`)){p([]),i.textContent=`A native session: the browser holds this, and says nothing.`;return}let n=performance.now(),r=n-e.window*1e3;switch(e.tab){case`buffer`:g(t,e);break;case`throughput`:_(t,e,r,n);break;case`stalls`:v(t,e,r,n);break;case`frames`:y(t,e,r,n);break;case`switches`:b(t,e,r,n)}}}}function d(e){let t=e.parentNode;return t===null?e instanceof ShadowRoot?e.host:null:t}function f(e){let t=e;for(;t!==null;){if(t instanceof HTMLElement&&t.localName===`mattebox-player`)return t;t=d(t)}return null}function p(e,t){let n=!0,r=()=>{n&&(n=!1,customElements.upgrade(e),`video`in e&&t(e))};return`video`in e?r():customElements.whenDefined(`mattebox-player`).then(r),()=>{n=!1}}let m=`http://www.w3.org/2000/svg`;function h(){let e=document.createElementNS(m,`svg`);e.setAttribute(`viewBox`,`0 0 32 32`),e.setAttribute(`aria-hidden`,`true`),e.setAttribute(`part`,`icon`);let t=document.createElementNS(m,`path`);return t.setAttribute(`fill-rule`,`evenodd`),t.setAttribute(`d`,`M17.534 10.6674C17.534 11.5143 16.8475 12.2008 16.0006 12.2008C15.1538 12.2008 14.4673 11.5143 14.4673 10.6674C14.4673 9.82061 15.1538 9.13411 16.0006 9.13411C16.8475 9.13411 17.534 9.82061 17.534 10.6674Z M14.6678 14.2005C14.6678 13.8323 14.9663 13.5339 15.3345 13.5339H16.6678C17.036 13.5339 17.3345 13.8323 17.3345 14.2005V22.2005C17.3345 22.5687 17.036 22.8672 16.6678 22.8672H15.3345C14.9663 22.8672 14.6678 22.5687 14.6678 22.2005V14.2005Z M28 16C28 22.6274 22.6274 28 16 28C9.37258 28 4 22.6274 4 16C4 9.37258 9.37258 4 16 4C22.6274 4 28 9.37258 28 16ZM24.9333 16C24.9333 20.9337 20.9337 24.9333 16 24.9333C11.0663 24.9333 7.06667 20.9337 7.06667 16C7.06667 11.0663 11.0663 7.06667 16 7.06667C20.9337 7.06667 24.9333 11.0663 24.9333 16Z`),e.append(t),e}function g(e){return Array.from({length:e.length},(t,n)=>({start:e.start(n),end:e.end(n)}))}function _(e){var t;let n=(t=e.getVideoPlaybackQuality)==null?void 0:t.call(e);return{currentTime:e.currentTime,duration:e.duration,paused:e.paused,ended:e.ended,seeking:e.seeking,readyState:e.readyState,networkState:e.networkState,playbackRate:e.playbackRate,volume:e.volume,muted:e.muted,videoWidth:e.videoWidth,videoHeight:e.videoHeight,buffered:g(e.buffered),seekable:g(e.seekable),frames:n===void 0?null:{decoded:n.totalVideoFrames,dropped:n.droppedVideoFrames},mediaError:e.error===null?null:{code:e.error.code,message:e.error.message}}}function v(e){var t,n,r,i,a,o,s;let c=e.stats.snapshot(),l=e,u=e.error;return{phase:c.lifecycle.phase,capabilities:[...e.capabilities()],throughput:{slow:c.stats.throughputEwma,fast:c.stats.throughputFastEwma},bufferGoal:c.scheduling.bufferGoal,buffers:[...c.buffers.entries()].map(([e,t])=>({id:e,codecs:t.codecs,ranges:t.ranges.map(e=>({start:e.start,end:e.end}))})),inflight:[...c.scheduling.inflight.values()].map(e=>({trackId:e.trackId,seq:e.seq,url:e.url})),live:c.live===null?null:{start:c.live.span.start,end:c.live.span.end,edge:c.live.edge,latency:(t=(n=l.live)==null?void 0:n.latency)==null?null:t},tracks:{active:Object.fromEntries([`video`,`audio`,`text`].map(t=>{var n,r;return[t,(n=(r=e.tracks.active(t))==null?void 0:r.id)==null?null:n]})),available:e.tracks.available.map(e=>{var t,n;return{id:e.id,contentType:e.contentType,mimeType:e.mimeType,lang:(t=e.lang)==null?null:t,role:(n=e.role)==null?null:n,renditions:e.renditions.length}})},quality:{playing:(r=(i=e.quality.playing)==null?void 0:i.id)==null?null:r,active:(a=(o=e.quality.active)==null?void 0:o.id)==null?null:a,pinned:e.quality.pinned,allowed:e.quality.allowed.map(e=>e.id),renditions:e.quality.renditions.map(e=>{var t,n,r;return{id:e.id,bitrate:e.bitrate,width:(t=e.width)==null?null:t,height:(n=e.height)==null?null:n,frameRate:(r=e.frameRate)==null?null:r,codecs:e.codecs}})},drm:l.drm===void 0?null:{keySystem:l.drm.keySystem,sessions:[...l.drm.sessions]},error:u===null?null:{category:u.category,code:u.code,fatal:u.fatal,recoverable:u.recoverable,context:(s=u.context)==null?null:s}}}function y(e){var t,n;let{player:r}=e,i=r.engine,a=e.samples.slice(-240),o=performance.now()-12e4;return{at:new Date().toISOString(),userAgent:navigator.userAgent,source:{url:r.getAttribute(`src`),type:r.getAttribute(`type`),handler:(t=(n=r.player)==null||(n=n.session)==null?void 0:n.handler)==null?null:t},playback:_(r.video),error:r.error,engine:i===null?null:v(i),counters:e.counters,samples:a,marks:e.marks.filter(e=>e.t>=o),support:e.support,trace:i===null?null:e.history}}function b(e){"@babel/helpers - typeof";return b=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},b(e)}function x(e,t){if(b(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(b(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function S(e){var t=x(e,`string`);return b(t)==`symbol`?t:t+``}function C(e,t,n){return(t=S(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function w(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function T(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?w(Object(n),!0).forEach(function(t){C(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):w(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function E(e){return Array.isArray(e)?e.length:typeof e==`object`&&e&&`kind`in e?String(e.kind):0}function D(e){var t,n;return{id:e.id,isLive:e.isLive,duration:(t=e.duration)==null?null:t,live:(n=e.live)==null?null:n,periods:e.periods.map(e=>{var t;return{id:e.id,start:e.start,duration:(t=e.duration)==null?null:t,tracks:e.tracks.map(e=>{var t,n;return{id:e.id,contentType:e.contentType,mimeType:e.mimeType,lang:(t=e.lang)==null?null:t,role:(n=e.role)==null?null:n,protected:e.protection!==null&&e.protection.schemes.length>0,renditions:e.renditions.map(e=>{var t,n;return{id:e.id,bitrate:e.bitrate,width:(t=e.width)==null?null:t,height:(n=e.height)==null?null:n,codecs:e.codecs,segments:E(e.segments)}})}})}})}}function O(e){switch(e.type){case`MANIFEST_LOADED`:return{type:e.type,presentation:D(e.presentation)};case`PLAYLIST_REFRESHED`:return T(T({},e),{},{segments:E(e.segments)});case`SEGMENT_LOADED`:return T(T({},e),{},{bytes:k(e.bytes)});default:return e}}function k(e){return e instanceof ArrayBuffer||ArrayBuffer.isView(e)?e.byteLength:e}function A(e){if(e.kind===`emit`&&e.event===`tracks:changed`)return{kind:e.kind,event:e.event};if(e.kind===`schedule`)return T(T({},e),{},{then:O(e.then)});let t={};for(let[n,r]of Object.entries(e))t[n]=k(r);return t}function j(e,t){return t instanceof ArrayBuffer||ArrayBuffer.isView(t)?t.byteLength:t instanceof Map?Object.fromEntries(t):t instanceof Set?[...t]:typeof t==`function`?`[function]`:typeof Node<`u`&&t instanceof Node?`[${t.nodeName}]`:t}function M(e){let t={t:e.t,msg:O(e.msg),effects:e.effects.map(A),digest:e.digest};return JSON.parse(JSON.stringify(t,j))}let N=2400,ee=new Set([`nudge`,`flush`,`skip`,`gap-jump`]);function te(e){return e.height===void 0?`${Math.round(e.bitrate/1e3)} kbps`:`${e.height}p`}function ne(){let e=[],t=[],n=[],r=new WeakSet,i=null,a=null,o=0,s=null,c=null,l=null,u=0,d=0,f=0,p=0,m=0;function h(e){t.push(e),t.length>N*2&&t.splice(0,t.length-N*2)}function g(e){let t=e.stats.trace(),n=0;if(a!==null){let e=t.indexOf(a);n=e>=0?e+1:t.findIndex(e=>e.t>o),n<0&&(n=t.length)}let r=t[t.length-1];return r!==void 0&&(a=r,o=r.t),t.slice(n)}function _(e,t){if(!r.has(e)){r.add(e),n.push(M(e)),n.length>500&&n.splice(0,n.length-500);{let n=e.msg;n.type===`SEGMENT_LOADED`&&n.trackId!==`manifest`&&n.size>0?h({t:e.t,kind:`segment`,value:n.size*8e3/Math.max(n.rtt,1),label:`${n.trackId} #${n.seq}`,trackId:n.trackId}):n.type===`STALLED`?h({t:e.t,kind:`stall`,value:n.at,label:`stalled at ${n.at.toFixed(1)}s`}):n.type===`SEEKING`&&h({t:e.t,kind:`seek`,value:n.to,label:`seek to ${n.to.toFixed(1)}s`});for(let n of e.effects){if(n.kind!==`emit`)continue;let r=n.event.replace(`recovery:`,``);ee.has(r)&&h({t:e.t,kind:r,value:t.currentTime,label:`recovery ${r}`})}}}}function v(){e=[],t=[],n=[],r=new WeakSet,a=null,o=0,s=null,c=null,l=null,u=0,d=0,f=0,p=0,m=0}function y(){i==null||i(),i=null}return{attach(e,t){y(),v(),t!==null&&(i=t.on(`trace`,t=>{_(t,e)}))},release:y,poll(t,n){var r,i,a,o,v,y,b,x,S,C;let w=performance.now();if(n!==null)for(let e of g(n))_(e,t);let T=(r=n==null?void 0:n.stats.snapshot())==null?null:r,E=(i=n==null?void 0:n.quality.playing)==null?null:i,D=(a=t.getVideoPlaybackQuality)==null?void 0:a.call(t);p=(o=D==null?void 0:D.totalVideoFrames)==null?0:o,m=(v=D==null?void 0:D.droppedVideoFrames)==null?0:v;let O=s===null?0:Math.max(0,m-s.dropped),k=s===null?0:Math.max(0,p-s.decoded);s={dropped:m,decoded:p};let A=0;for(let e=0;e<t.buffered.length;e+=1)t.buffered.start(e)<=t.currentTime+.25&&t.buffered.end(e)>t.currentTime&&(A=t.buffered.end(e)-t.currentTime);let j=!t.paused&&!t.ended&&!t.seeking&&t.readyState<3&&t.currentTime>0;if(j&&l===null?(l=w,u+=1):!j&&l!==null&&(d+=(w-l)/1e3,l=null),E!==null&&c!==null&&E.id!==c){var M;f+=1,h({t:w,kind:`switch`,value:(M=E.height)==null?E.bitrate:M,label:`now ${te(E)}`})}E!==null&&(c=E.id),e.push({t:w,currentTime:t.currentTime,slow:(y=T==null?void 0:T.stats.throughputEwma)==null?0:y,fast:(b=T==null?void 0:T.stats.throughputFastEwma)==null?0:b,ahead:A,stalled:j,dropped:O,decoded:k,playingId:(x=E==null?void 0:E.id)==null?null:x,playingBitrate:(S=E==null?void 0:E.bitrate)==null?0:S,playingHeight:(C=E==null?void 0:E.height)==null?0:C}),e.length>N&&e.splice(0,e.length-N)},get samples(){return e},get marks(){return t},get history(){return n},get counters(){let e=l===null?0:(performance.now()-l)/1e3;return{stalls:u,stalledSeconds:d+e,switches:f,decoded:p,dropped:m}}}}function P(e,t,n,r,i,a,o){try{var s=e[a](o),c=s.value}catch(e){n(e);return}s.done?t(c):Promise.resolve(c).then(r,i)}function F(e){return function(){var t=this,n=arguments;return new Promise(function(r,i){var a=e.apply(t,n);function o(e){P(a,r,i,o,s,`next`,e)}function s(e){P(a,r,i,o,s,`throw`,e)}o(void 0)})}}let re=[{label:`H.264 High 4.0`,codec:`avc1.640028`,kind:`video`,containers:[`mp4`]},{label:`H.264 Baseline`,codec:`avc1.42e01e`,kind:`video`,containers:[`mp4`]},{label:`H.265 / HEVC Main`,codec:`hvc1.1.6.L123.B0`,kind:`video`,containers:[`mp4`]},{label:`VP9 Profile 0`,codec:`vp09.00.40.08`,kind:`video`,containers:[`mp4`,`webm`]},{label:`AV1 Main`,codec:`av01.0.08M.08`,kind:`video`,containers:[`mp4`,`webm`]},{label:`AAC-LC`,codec:`mp4a.40.2`,kind:`audio`,containers:[`mp4`]},{label:`HE-AAC`,codec:`mp4a.40.5`,kind:`audio`,containers:[`mp4`]},{label:`Opus`,codec:`opus`,kind:`audio`,containers:[`mp4`,`webm`]},{label:`FLAC`,codec:`flac`,kind:`audio`,containers:[`mp4`]},{label:`AC-3`,codec:`ac-3`,kind:`audio`,containers:[`mp4`]},{label:`E-AC-3`,codec:`ec-3`,kind:`audio`,containers:[`mp4`]}],ie=[{label:`Widevine`,keySystems:[`com.widevine.alpha`],levels:[[`HW_SECURE_ALL`,`L1`],[`HW_SECURE_DECODE`,`L1`],[`HW_SECURE_CRYPTO`,`L2`],[`SW_SECURE_DECODE`,`L3`],[`SW_SECURE_CRYPTO`,`L3`]]},{label:`PlayReady`,keySystems:[`com.microsoft.playready.recommendation`,`com.microsoft.playready`],levels:[[`3000`,`SL3000`],[`2000`,`SL2000`],[`150`,`SL150`]]},{label:`FairPlay`,keySystems:[`com.apple.fps`,`com.apple.fps.1_0`],levels:[]},{label:`ClearKey`,keySystems:[`org.w3.clearkey`],levels:[]}],ae=[`1.0`,`1.1`,`1.2`,`1.3`,`1.4`,`2.0`,`2.1`,`2.2`,`2.3`];function I(e,t,n=4e3){return new Promise(r=>{let i=setTimeout(()=>r(t),n);e.then(e=>{clearTimeout(i),r(e)},()=>{clearTimeout(i),r(t)})})}function L(e){return e in globalThis?`yes`:`no`}function oe(){let e=`no`;try{typeof MediaSource<`u`&&`changeType`in SourceBuffer.prototype&&(e=`yes`)}catch(t){e=`no`}return[{label:`Secure context`,value:window.isSecureContext?`yes`:`no`},{label:`MediaSource`,value:L(`MediaSource`)},{label:`ManagedMediaSource`,value:L(`ManagedMediaSource`)},{label:`SourceBuffer.changeType`,value:e},{label:`Encrypted Media (EME)`,value:L(`MediaKeys`)},{label:`MediaCapabilities`,value:navigator.mediaCapabilities===void 0?`no`:`yes`},{label:`WebCodecs`,value:L(`VideoDecoder`)}]}function se(e){try{return typeof MediaSource<`u`&&MediaSource.isTypeSupported(e)}catch(e){return!1}}function ce(e){let t=document.createElement(`video`).canPlayType(e);return t===`probably`?`yes`:t===`maybe`?`maybe`:`no`}function le(e){return R.apply(this,arguments)}function R(){return R=F(function*(e){let t=navigator.mediaCapabilities;if((t==null?void 0:t.decodingInfo)===void 0)return{smooth:`na`,efficient:`na`};let n=`${e.kind}/${e.containers[0]}; codecs="${e.codec}"`,r=e.kind===`video`?{type:`media-source`,video:{contentType:n,width:1920,height:1080,bitrate:6e6,framerate:30}}:{type:`media-source`,audio:{contentType:n,channels:`2`,bitrate:128e3}},i=yield I(t.decodingInfo(r),null);return i===null?{smooth:`na`,efficient:`na`}:i.supported?{smooth:i.smooth?`yes`:`no`,efficient:i.powerEfficient?`yes`:`no`}:{smooth:`no`,efficient:`no`}}),R.apply(this,arguments)}function z(e){return B.apply(this,arguments)}function B(){return B=F(function*(e){let t=t=>e.containers.includes(t)?se(`${e.kind}/${t}; codecs="${e.codec}"`)?`yes`:`no`:`na`,{smooth:n,efficient:r}=yield le(e);return{label:e.label,codec:e.codec,kind:e.kind,mse:t(`mp4`),webm:t(`webm`),element:ce(`${e.kind}/${e.containers[0]}; codecs="${e.codec}"`),smooth:n,efficient:r}}),B.apply(this,arguments)}function V(e={}){return[T({contentType:`video/mp4; codecs="avc1.42e01e"`},e),T({contentType:`video/mp4; codecs="vp09.00.10.08"`},e)]}function H(e={}){return T({initDataTypes:[`cenc`,`keyids`,`sinf`,`skd`],videoCapabilities:V(),audioCapabilities:[{contentType:`audio/mp4; codecs="mp4a.40.2"`},{contentType:`audio/mp4; codecs="opus"`}]},e)}function U(e,t){return typeof navigator.requestMediaKeySystemAccess==`function`?I(navigator.requestMediaKeySystemAccess(e,[t]).then(e=>e,()=>null),null):Promise.resolve(null)}let ue=e=>({label:e,keySystem:null,level:`na`,schemes:`na`,persistent:`na`,identifier:`na`,hdcp:`na`});function de(e){return W.apply(this,arguments)}function W(){return W=F(function*(e){let t=null,n=null;for(let r of e.keySystems)if(n=yield U(r,H()),n!==null){t=r;break}if(t===null||n===null)return ue(e.label);let r=e.levels.length===0?`n/a for this system`:`none granted`;for(let[n,i]of e.levels)if((yield U(t,H({videoCapabilities:V({robustness:n})})))!==null){r=`${i} (${n})`;break}let i=[],a=!1;for(let e of[`cenc`,`cbcs`]){var o;let n=yield U(t,H({videoCapabilities:V({encryptionScheme:e})})),r=n==null||(o=n.getConfiguration().videoCapabilities)==null||(o=o.find(e=>e.contentType!==``))==null?void 0:o.encryptionScheme;r!=null&&(a=!0),r===e&&i.push(e)}let s=a?i.length===0?`none`:i.join(`, `):`unknown (no API)`,c=yield U(t,H({persistentState:`required`,sessionTypes:[`persistent-license`]})),l=yield U(t,H({distinctiveIdentifier:`required`})),u=`na`;try{let e=yield I(n.createMediaKeys(),null);if(e!==null&&typeof e.getStatusForPolicy==`function`){let t=null;for(let n of ae){if((yield I(e.getStatusForPolicy({minHdcpVersion:n}),`unknown`))!==`usable`)break;t=n}u=t===null?`no output protection`:`up to ${t}`}}catch(e){u=`na`}return{label:e.label,keySystem:t,level:r,schemes:s,persistent:c===null?`no`:`yes`,identifier:l===null?`no`:`yes`,hdcp:u}}),W.apply(this,arguments)}let G=null;function K(){return G===null&&(G=F(function*(){return{userAgent:navigator.userAgent,platform:oe(),codecs:yield Promise.all(re.map(z)),drm:yield Promise.all(ie.map(de))}})()),G}let q=[30,60,120,300,600],J=[`playback`,`charts`,`engine`,`browser`],fe={playback:`Playback`,charts:`Charts`,engine:`Engine`,browser:`Browser`},pe=[`nothing`,`metadata`,`current data`,`future data`,`enough data`],me=[`empty`,`idle`,`loading`,`no source`];function Y(e,t,n){let r=document.createElement(e);return r.setAttribute(`part`,t),n!==void 0&&(r.textContent=n),r}function X(e,t){let n=Y(`button`,e,t);return n.type=`button`,n}function Z(e){switch(e){case`yes`:return[`✓`,`cell ok`];case`no`:return[`✕`,`cell bad`];case`na`:return[`–`,`cell na`];case`maybe`:return[`maybe`,`cell maybe`];default:return[e,`cell`]}}var Q=class extends HTMLElement{static get observedAttributes(){return[`label`,`label-copy`,`label-copied`,`window`]}constructor(){super(),this.player=null,this.cancel=null,this.offs=[],this.sampler=ne(),this.timer=void 0,this.drawer=void 0,this.copied=void 0,this.tab=`playback`,this.chartTab=`buffer`,this.support=null,this.probing=!1;let e=this.attachShadow({mode:`open`}),t=document.createElement(`style`);t.textContent=`
-:host {
-  display: inline-flex;
-  position: relative;
-  --mbx-chart-1: #5aa9e0;
-  --mbx-chart-2: #6fbf8f;
-  --mbx-chart-3: #d9a83f;
-  --mbx-chart-4: #e05a6e;
-  --mbx-chart-5: #a98fe0;
-}
-:host([hidden]) { display: none; }
-:host([inline]) { display: block; }
-[part~="button"] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: 40px;
-  height: 40px;
-  padding: 0;
-  font: inherit;
-  color: inherit;
-  background: transparent;
-  border: 0;
-  border-radius: var(--mbx-radius);
-  cursor: pointer;
-  opacity: 0.9;
-}
-[part~="button"]:hover { opacity: 1; }
-[part~="button"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
-[part~="icon"], ::slotted(*) { width: 1.75em; height: 1.75em; fill: currentColor; }
-:host([inline]) [part~="button"] { display: none; }
-[part~="panel"] {
-  position: absolute;
-  right: 0;
-  bottom: 100%;
-  box-sizing: border-box;
-  width: 560px;
-  margin-bottom: 8px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  color: var(--mbx-text, #f2f3f5);
-  background: rgba(16, 17, 20, 0.95);
-  border-radius: var(--mbx-radius, 4px);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
-  font: 400 12px/1.5 var(--mbx-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
-  text-align: left;
-  white-space: normal;
-}
-[part~="panel"][hidden] { display: none; }
-:host([inline]) [part~="panel"] {
-  position: static;
-  width: auto;
-  max-height: none;
-  margin: 0;
-  box-shadow: none;
-  border-radius: 0;
-}
-[part~="head"] {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 6px 8px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
-}
-[part~="tab"], [part~="chart-tab"] {
-  font: inherit;
-  color: var(--mbx-muted, #9aa0a6);
-  background: transparent;
-  border: 0;
-  border-radius: var(--mbx-radius, 4px);
-  padding: 3px 8px;
-  cursor: pointer;
-}
-[part~="tab"][aria-selected="true"], [part~="chart-tab"][aria-selected="true"] {
-  color: var(--mbx-text, #f2f3f5);
-  background: rgba(255, 255, 255, 0.12);
-}
-[part~="copy"], [part~="close"], [part~="window"] {
-  font: inherit;
-  color: inherit;
-  background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.25);
-  border-radius: var(--mbx-radius, 4px);
-  padding: 2px 8px;
-  cursor: pointer;
-}
-[part~="copy"] { margin-left: auto; }
-[part~="window"] { margin-left: auto; }
-[part~="window"] option { color: #000; }
-[part~="tab"]:focus-visible, [part~="chart-tab"]:focus-visible, [part~="copy"]:focus-visible,
-[part~="close"]:focus-visible, [part~="window"]:focus-visible {
-  outline: 2px solid var(--mbx-accent, #5b8cff);
-  outline-offset: -2px;
-}
-[part~="body"] { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 8px; }
-[part~="page"][hidden] { display: none; }
-[part~="rows"] { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0; }
-[part~="key"] { color: var(--mbx-muted, #9aa0a6); white-space: nowrap; }
-[part~="value"] { margin: 0; overflow-wrap: anywhere; }
-[part~="heading"] {
-  margin: 10px 0 4px;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--mbx-muted, #9aa0a6);
-}
-[part~="heading"]:first-child { margin-top: 0; }
-[part~="note"] { margin: 0; color: var(--mbx-muted, #9aa0a6); }
-[part~="chart-tabs"] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 6px; }
-[part~="chart"] { display: block; width: 100%; height: 160px; }
-[part~="legend"] { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px; color: var(--mbx-muted, #9aa0a6); }
-[part~="swatch"] { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 2px; vertical-align: middle; }
-[part~="readout"] { margin-top: 4px; }
-[part~="table"] { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
-[part~="cell"] { padding: 2px 6px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.08); white-space: nowrap; font-weight: 400; }
-[part~="label"] { color: var(--mbx-muted, #9aa0a6); }
-[part~="ok"] { color: var(--mbx-chart-2); }
-[part~="bad"] { color: var(--mbx-chart-4); }
-[part~="na"] { color: var(--mbx-muted, #9aa0a6); }
-[part~="ok"], [part~="bad"], [part~="na"], [part~="maybe"] { font-weight: 600; }
-`,this.toggle=X(`button`),this.toggle.setAttribute(`aria-haspopup`,`dialog`),this.toggle.setAttribute(`aria-expanded`,`false`);let n=document.createElement(`slot`);n.name=`icon`,n.append(h()),this.toggle.append(n),this.toggle.addEventListener(`click`,()=>{this.panel.hidden?this.show():this.hide()}),this.panel=Y(`div`,`panel`),this.panel.setAttribute(`role`,`dialog`),this.panel.hidden=!0,this.panel.addEventListener(`keydown`,e=>{e.key!==`Escape`||this.hasAttribute(`inline`)||(e.preventDefault(),this.hide(),this.toggle.focus())});let r=Y(`div`,`head`);r.setAttribute(`role`,`tablist`),this.tabs={},this.pages={},this.body=Y(`div`,`body`);for(let e of J){let t=X(`tab tab-${e}`,fe[e]);t.setAttribute(`role`,`tab`),t.addEventListener(`click`,()=>{this.select(e)}),this.tabs[e]=t,r.append(t);let n=Y(`div`,`page page-${e}`);n.setAttribute(`role`,`tabpanel`),n.hidden=!0,this.pages[e]=n,this.body.append(n)}this.copy=X(`copy`),this.copy.addEventListener(`click`,()=>{this.copyReport()});let i=X(`close`,`✕`);i.setAttribute(`aria-label`,`Close`),i.addEventListener(`click`,()=>{this.hide(),this.toggle.focus()}),r.append(this.copy,i);let a=Y(`div`,`chart-tabs`);a.setAttribute(`role`,`tablist`),this.chartTabs={};for(let e of s){let t=X(`chart-tab chart-tab-${e}`,e);t.setAttribute(`role`,`tab`),t.addEventListener(`click`,()=>{this.chartTab=e,this.markChartTab(),this.draw()}),this.chartTabs[e]=t,a.append(t)}this.windowSelect=Y(`select`,`window`),this.windowSelect.setAttribute(`aria-label`,`Window`);for(let e of q){let t=document.createElement(`option`);t.value=String(e),t.textContent=e<60?`${e} s`:`${e/60} min`,this.windowSelect.append(t)}this.windowSelect.addEventListener(`change`,()=>{this.draw()}),a.append(this.windowSelect),this.canvas=Y(`canvas`,`chart`);let o=Y(`div`,`legend`),c=Y(`p`,`readout`);this.pages.charts.append(a,this.canvas,o,c),this.charts=u(this.canvas,o,c),this.outside=e=>{e.composedPath().includes(this)||this.hide()},this.refit=()=>{this.fit()},this.panel.append(r,this.body),e.append(t,this.toggle,this.panel),this.markTab(),this.markChartTab(),this.renderLabels()}connectedCallback(){var e,t;this.toggleAttribute(`inline`,((e=this.parentElement)==null?void 0:e.localName)!==`mbx-control-bar`);let n=f(this);n!==null&&((t=this.cancel)==null||t.call(this),this.cancel=p(n,e=>{this.isConnected&&this.attach(e)}))}disconnectedCallback(){var e;(e=this.cancel)==null||e.call(this),this.cancel=null,this.detach()}attributeChangedCallback(){this.renderLabels()}attach(e){this.player=e,this.sampler.attach(e.video,e.engine);let t=(e,t,n)=>{e.addEventListener(t,n),this.offs.push(()=>{e.removeEventListener(t,n)})};t(e,`sourcechange`,()=>{this.sampler.attach(e.video,e.engine),this.poll()}),t(e,`error`,e=>{e.detail.fatal&&this.dispatchEvent(new CustomEvent(`report`,{detail:this.report(),bubbles:!0,composed:!0}))}),this.timer=setInterval(()=>{this.poll()},500),this.poll(),this.hasAttribute(`inline`)&&this.show()}detach(){for(let e of this.offs)e();this.offs=[],clearInterval(this.timer),this.timer=void 0,this.sampler.release(),this.hide(),this.player=null}report(){let e=this.player;if(e===null)throw Error(`mbx-diagnostics is not inside a player`);return y({player:e,samples:this.sampler.samples,marks:this.sampler.marks,counters:this.sampler.counters,history:this.sampler.history,support:this.support})}poll(){let e=this.player;e!==null&&(this.sampler.poll(e.video,e.engine),this.panel.hidden||this.paint())}show(){this.panel.hidden&&(this.panel.hidden=!1,this.hasAttribute(`inline`)||(this.setAttribute(`open`,``),this.toggle.setAttribute(`aria-expanded`,`true`),document.addEventListener(`pointerdown`,this.outside,!0),window.addEventListener(`resize`,this.refit),this.fit()),this.paint(),this.drawer=setInterval(()=>{this.draw()},250),this.hasAttribute(`inline`)||this.tabs[this.tab].focus())}hide(){clearInterval(this.drawer),this.drawer=void 0,!this.panel.hidden&&(this.panel.hidden=!0,this.removeAttribute(`open`),this.toggle.setAttribute(`aria-expanded`,`false`),document.removeEventListener(`pointerdown`,this.outside,!0),window.removeEventListener(`resize`,this.refit))}fit(){let e=this.player;if(e===null)return;let t=e.getBoundingClientRect(),n=this.getBoundingClientRect(),r=e.video.getBoundingClientRect().top,i=n.top-r-8;this.panel.style.maxHeight=`${Math.max(120,Math.floor(i))}px`;let a=Math.min(560,Math.max(200,t.width-16));this.panel.style.width=`${a}px`;let o=Math.max(t.left+8,Math.min(n.right-a,t.right-8-a));this.panel.style.right=`auto`,this.panel.style.left=`${o-n.left}px`}select(e){this.tab=e,this.markTab(),this.tabs[e].focus(),this.paint(),this.draw()}markTab(){for(let e of J)this.tabs[e].setAttribute(`aria-selected`,String(e===this.tab)),this.tabs[e].tabIndex=e===this.tab?0:-1,this.pages[e].hidden=e!==this.tab}markChartTab(){for(let e of s)this.chartTabs[e].setAttribute(`aria-selected`,String(e===this.chartTab))}renderLabels(){var e,t;if(this.toggle.setAttribute(`aria-label`,(e=this.getAttribute(`label`))==null?`Diagnostics`:e),this.panel.setAttribute(`aria-label`,(t=this.getAttribute(`label`))==null?`Diagnostics`:t),this.copied===void 0){var n;this.copy.textContent=(n=this.getAttribute(`label-copy`))==null?`Copy report`:n}let r=Number(this.getAttribute(`window`)),i=Number.isFinite(r)&&r>0?r:120;if(!q.includes(i)){let e=document.createElement(`option`);e.value=String(i),e.textContent=`${i} s`,this.windowSelect.append(e)}this.windowSelect.value=String(i)}copyReport(){var e=this;return F(function*(){var t;let n=JSON.stringify(e.report(),null,2);try{yield navigator.clipboard.writeText(n)}catch(e){return}e.copy.textContent=(t=e.getAttribute(`label-copied`))==null?`Copied`:t,clearTimeout(e.copied),e.copied=setTimeout(()=>{e.copied=void 0,e.renderLabels()},1500)})()}palette(){let e=getComputedStyle(this),t=(t,n)=>e.getPropertyValue(t).trim()||n;return{ink:t(`--mbx-text`,`#f2f3f5`),muted:t(`--mbx-muted`,`#9aa0a6`),accent:t(`--mbx-accent`,`#5b8cff`),warn:t(`--mbx-chart-3`,`#d9a83f`),series:[1,2,3,4,5].map(e=>t(`--mbx-chart-${e}`,`#888`))}}draw(){let e=this.player;e===null||this.panel.hidden||this.tab!==`charts`||this.charts.draw({tab:this.chartTab,window:Number(this.windowSelect.value)||120,samples:this.sampler.samples,marks:this.sampler.marks,counters:this.sampler.counters,video:e.video,engine:e.engine,palette:this.palette()})}paint(){let e=this.player;if(!(e===null||this.panel.hidden))switch(this.tab){case`playback`:this.sections(this.pages.playback,this.playbackSections(e));break;case`engine`:this.sections(this.pages.engine,this.engineSections(e.engine));break;case`browser`:this.browser()}}playbackSections(e){var s,c,l,u,d,f,p,m;let h=e.video,g=e.engine,_=(s=h.getVideoPlaybackQuality)==null?void 0:s.call(h),v=this.sampler.counters,y=this.sampler.samples[this.sampler.samples.length-1],b=h.paused?h.ended?`ended`:`paused`:`playing`,x=[[`source`,(c=e.getAttribute(`src`))==null?`–`:c],[`type`,(l=e.getAttribute(`type`))==null?`–`:l],[`handler`,(u=(d=e.player)==null||(d=d.session)==null?void 0:d.handler)==null?`–`:u]];g!==null&&x.push([`phase`,g.stats.snapshot().lifecycle.phase]),e.error===null?h.error!==null&&x.push([`media error`,`${h.error.code} ${h.error.message}`]):x.push([`error`,`${e.error.category}: ${e.error.code}`]);let S=[[`time`,`${n(h.currentTime)} of ${n(h.duration)}`],[`state`,`${b}, ${(f=pe[h.readyState])==null?h.readyState:f}, network ${(p=me[h.networkState])==null?h.networkState:p}`],[`rate`,`${h.playbackRate}×`],[`picture`,h.videoWidth>0?`${h.videoWidth}×${h.videoHeight}`:`–`],[`frames`,_===void 0?`–`:`${_.totalVideoFrames} decoded, ${_.droppedVideoFrames} dropped (${i(_.droppedVideoFrames,_.totalVideoFrames)})`],[`buffered`,`${r((m=y==null?void 0:y.ahead)==null?0:m)}s ahead: ${a(he(h))}`],[`stalls`,`${v.stalls}, ${v.stalledSeconds.toFixed(1)}s in total`]];if(g!==null){let e=g.stats.snapshot();S.push([`throughput`,`slow ${t(e.stats.throughputEwma)}, fast ${t(e.stats.throughputFastEwma)}`],[`playing`,o(g.quality.playing)],[`switches`,String(v.switches)])}return[{title:`Source`,rows:x},{title:`Playback`,rows:S}]}engineSections(e){var r,i,o,s,c,l,u;if(e===null)return[{title:null,rows:[],note:`A native session: the browser plays this, and there is no engine to ask.`}];let d=e.stats.snapshot(),f=e,p=d.live,m=[[`capabilities`,[...e.capabilities()].join(`, `)||`none`],[`phase`,d.lifecycle.phase],[`buffer goal`,`${d.scheduling.bufferGoal}s`],[`throughput`,`slow ${t(d.stats.throughputEwma)}, fast ${t(d.stats.throughputFastEwma)}`],[`in flight`,[...d.scheduling.inflight.values()].map(e=>`${e.trackId} #${e.seq}`).join(`, `)||`none`],[`live`,p===null?`VOD`:`window ${n(p.span.start)} to ${n(p.span.end)}, edge ${n(p.edge)}${((r=f.live)==null?void 0:r.latency)===null||((i=f.live)==null?void 0:i.latency)===void 0?``:`, ${f.live.latency.toFixed(1)}s behind`}`],[`trace`,`${e.stats.trace().length} entries`]],h=e.error;h!==null&&m.push([`last error`,`${h.category}: ${h.code}`]);let g=[...d.buffers.entries()].map(([e,t])=>[e.replace(`sb:`,``),`${t.codecs}: ${a(t.ranges)}${t.pendingAppends>0?`, ${t.pendingAppends} pending`:``}`]),_=e.tracks.available.map(t=>{var n;let r=((n=e.tracks.active(t.contentType))==null?void 0:n.id)===t.id,i=[t.lang,t.role].filter(e=>e!==void 0).join(` · `);return[`${t.contentType}${r?` ●`:``}`,`${t.id}${i===``?``:` (${i})`}, ${t.renditions.length} renditions`]}),v=(o=(s=e.quality.playing)==null?void 0:s.id)==null?null:o,y=(c=(l=e.quality.active)==null?void 0:l.id)==null?null:c,b=new Set(e.quality.allowed.map(e=>e.id)),x=e.quality.renditions.map(n=>{var r;let i=[n.id===v?`playing`:``,n.id===y&&y!==v?`next`:``,n.id===e.quality.pinned?`pinned`:``,b.has(n.id)?``:`capped`].filter(e=>e!==``),a=[n.width!==void 0&&n.height!==void 0?`${n.width}×${n.height}`:``,t(n.bitrate),n.frameRate===void 0?``:`${n.frameRate} fps`,(r=n.codecs)==null?``:r].filter(e=>e!==``).join(`, `);return[n.id,`${a}${i.length>0?` [${i.join(`, `)}]`:``}`]}),S=f.drm===void 0?[]:[[`key system`,(u=f.drm.keySystem)==null?`none yet`:u],[`keys`,f.drm.sessions.length===0?`none yet`:f.drm.sessions.map(e=>`${e.keyId}: ${e.status}`).join(`, `)]];return[{title:`Engine`,rows:m},{title:`Source buffers`,rows:g,note:g.length===0?`none yet`:void 0},{title:`Tracks`,rows:_,note:_.length===0?`none yet`:void 0},{title:`Renditions`,rows:x,note:x.length===0?`none yet`:void 0},...f.drm===void 0?[]:[{title:`DRM`,rows:S}]]}sections(e,t){var n;let r=t.flatMap(e=>{let t=[];return e.title!==null&&t.push([`heading`,e.title]),e.note!==void 0&&e.rows.length===0?t.push([`note`,e.note]):t.push([`rows`,e.rows]),t});for(;e.childElementCount>r.length;)(n=e.lastElementChild)==null||n.remove();r.forEach(([t,n],r)=>{var i;let a=e.children[r],o=t===`heading`?`h3`:t===`note`?`p`:`dl`;if(a===void 0||a.localName!==o){let n=Y(o,t);a===void 0?e.append(n):a.replaceWith(n),a=n}if(typeof n==`string`){a.textContent!==n&&(a.textContent=n);return}for(;a.childElementCount>n.length*2;)(i=a.lastElementChild)==null||i.remove();n.forEach(([e,t],n)=>{let r=a.children[n*2],i=a.children[n*2+1];(r===void 0||i===void 0)&&(r=Y(`dt`,`key`),i=Y(`dd`,`value`),a.append(r,i)),r.textContent!==e&&(r.textContent=e),i.textContent!==t&&(i.textContent=t)})})}browser(){let e=this.pages.browser;this.support!==null||this.probing||(this.probing=!0,e.replaceChildren(Y(`p`,`note`,`Probing the browser…`)),K().then(t=>{this.support=t,this.probing=!1,this.tables(e,t)}))}tables(e,t){e.replaceChildren(),e.append(Y(`h3`,`heading`,`Platform`),Y(`p`,`note`,t.userAgent));let n=Y(`table`,`table`);for(let e of t.platform){let t=document.createElement(`tr`),[r,i]=Z(e.value);t.append(Y(`th`,`cell label`,e.label),Y(`td`,i,r)),n.append(t)}e.append(n),e.append(Y(`h3`,`heading`,`Codecs`));let r=Y(`table`,`table`),i=document.createElement(`tr`);for(let e of[`Codec`,`MSE fMP4`,`MSE WebM`,`<video>`,`Smooth`,`Efficient`])i.append(Y(`th`,`cell label`,e));r.append(i);for(let e of t.codecs){let t=document.createElement(`tr`),n=Y(`th`,`cell label`,e.label);n.title=e.codec,t.append(n);for(let n of[e.mse,e.webm,e.element,e.smooth,e.efficient]){let[e,r]=Z(n);t.append(Y(`td`,r,e))}r.append(t)}e.append(r),e.append(Y(`h3`,`heading`,`DRM`));let a=Y(`table`,`table`),o=document.createElement(`tr`);for(let e of[`System`,`Available`,`Level`,`Schemes`,`Persistent`,`Identifier`,`HDCP`])o.append(Y(`th`,`cell label`,e));a.append(o);for(let e of t.drm){let t=document.createElement(`tr`),n=Y(`th`,`cell label`,e.label);e.keySystem!==null&&(n.title=e.keySystem),t.append(n);let r=[e.keySystem===null?`no`:`yes`,e.level,e.schemes,e.persistent,e.identifier,e.hdcp];for(let e of r){let[n,r]=Z(e);t.append(Y(`td`,r,n))}a.append(t)}e.append(a)}};function he(e){return Array.from({length:e.buffered.length},(t,n)=>({start:e.buffered.start(n),end:e.buffered.end(n)}))}let $=`mbx-diagnostics`;return customElements.get(`mbx-diagnostics`)===void 0&&customElements.define($,Q),e.DIAGNOSTICS=$,e.MbxDiagnostics=Q,e.probeSupport=K,e})({});
+var matteboxPlayerDiagnostics=(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function t(e,...t){for(;e.firstChild!==null;)e.firstChild.remove();e.append(...t)}function n(e){return!Number.isFinite(e)||e<=0?`0 bps`:e>=1e6?`${(e/1e6).toFixed(e>=1e7?0:1)} Mbps`:e>=1e3?`${Math.round(e/1e3)} kbps`:`${Math.round(e)} bps`}function r(e){if(!Number.isFinite(e))return`–`;let t=Math.max(0,Math.floor(e)),n=Math.floor(t/3600),r=Math.floor(t%3600/60),i=t%60,a=e=>e<10?`0${e}`:`${e}`;return n>0?`${n}:${a(r)}:${a(i)}`:`${r}:${a(i)}`}function i(e,t=1){return e==null||!Number.isFinite(e)?`–`:e.toFixed(t)}function a(e,t){return t>0?`${(e/t*100).toFixed(2)}%`:`0%`}function o(e){return e.length===0?`none`:e.map(e=>`${e.start.toFixed(1)}–${e.end.toFixed(1)}`).join(`, `)}function s(e){return e===null?`–`:e.height===void 0?n(e.bitrate):`${e.height}p, ${n(e.bitrate)}`}let c=[`buffer`,`throughput`,`stalls`,`frames`,`switches`];function l(e,t){let n=e/Math.max(t,1),r=Math.pow(10,Math.floor(Math.log10(Math.max(n,1e-9))));for(let e of[1,2,5,10])if(n<=e*r)return e*r;return 10*r}function u(e,t){let n=document.createElement(`canvas`).getContext(`2d`);if(n===null)return e;n.fillStyle=e;let r=n.fillStyle;return/^#[0-9a-f]{6}$/i.test(r)?`rgba(${Number.parseInt(r.slice(1,3),16)}, ${Number.parseInt(r.slice(3,5),16)}, ${Number.parseInt(r.slice(5,7),16)}, ${t})`:e}function d(e,i,a){function o(){let t=e.getContext(`2d`);if(t===null)return null;let n=window.devicePixelRatio||1,r=e.clientWidth,i=e.clientHeight;if(r===0||i===0)return null;let a=Math.round(r*n),o=Math.round(i*n);return(e.width!==a||e.height!==o)&&(e.width=a,e.height=o),t.setTransform(n,0,0,n,0,0),t.clearRect(0,0,r,i),t.font=`10px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`,{ctx:t,w:r,h:i,left:44,right:r-8,top:8,bottom:i-18}}function s(e,t,n,i){let a=r=>e.left+(r-t)/(n-t)*(e.right-e.left),o=(n-t)/1e3,s=l(o,6);e.ctx.strokeStyle=u(i.muted,.25),e.ctx.fillStyle=i.muted,e.ctx.textAlign=`center`,e.ctx.textBaseline=`top`;for(let t=0;t<=o;t+=s){let i=a(n-t*1e3);e.ctx.beginPath(),e.ctx.moveTo(i,e.top),e.ctx.lineTo(i,e.bottom),e.ctx.stroke();let o=t===0?`now`:t<60?`-${t}s`:`-${r(t)}`;e.ctx.fillText(o,i,e.bottom+3)}return a}function c(e,t,n,r){let i=n=>e.bottom-n/t*(e.bottom-e.top),a=l(t,4);e.ctx.strokeStyle=u(r.muted,.25),e.ctx.fillStyle=r.muted,e.ctx.textAlign=`right`,e.ctx.textBaseline=`middle`;for(let r=0;r<=t;r+=a){let t=i(r);e.ctx.beginPath(),e.ctx.moveTo(e.left,t),e.ctx.lineTo(e.right,t),e.ctx.stroke(),e.ctx.fillText(n(r),e.left-4,t)}return i}function d(e,t,n,r={}){var i;if(t.length===0)return;e.ctx.save(),e.ctx.strokeStyle=n,e.ctx.lineWidth=(i=r.width)==null?2:i,e.ctx.setLineDash(r.dashed===!0?[4,4]:[]),e.ctx.beginPath();let a;for(let n of t)a===void 0?e.ctx.moveTo(n[0],n[1]):(r.step===!0&&e.ctx.lineTo(n[0],a[1]),e.ctx.lineTo(n[0],n[1])),a=n;e.ctx.stroke(),e.ctx.restore()}function f(e,t,n,r,i=2.5){e.ctx.fillStyle=r,e.ctx.beginPath(),e.ctx.arc(t,n,i,0,Math.PI*2),e.ctx.fill()}function p(e,t,n,r){e.ctx.save(),e.ctx.strokeStyle=n,e.ctx.lineWidth=1,e.ctx.setLineDash([2,3]),e.ctx.beginPath(),e.ctx.moveTo(t,e.top),e.ctx.lineTo(t,e.bottom),e.ctx.stroke(),e.ctx.restore(),e.ctx.fillStyle=n,e.ctx.textAlign=`center`,e.ctx.textBaseline=`top`,e.ctx.fillText(r,t,e.top)}function m(e){t(i);for(let[t,n]of e){let e=document.createElement(`span`);e.setAttribute(`part`,`legend-item`);let r=document.createElement(`span`);r.setAttribute(`part`,`swatch`),r.style.background=n,e.append(r,t),i.append(e)}}function h(e,t){let n=e.findIndex(e=>e.t>=t);return n<0?e.length>0?[e[e.length-1]]:[]:e.slice(Math.max(0,n-1))}function g(e){var t;return(t=e==null?void 0:e.quality.renditions)==null?[]:t}function _(e,t){var i,o,s,c,l,d;let{video:f,engine:h,palette:_}=t,v=(i=h==null?void 0:h.stats.snapshot())==null?null:i,y=(o=v==null||(s=v.presentation)==null?void 0:s.duration)==null?f.duration:o,b=(c=v==null?void 0:v.live)==null?null:c,x=f.currentTime,S=0,C=Number.isFinite(y)&&y>0?y:Math.max(x+10,10);b===null?C>600&&(S=Math.max(0,x-60),C=x+180):(S=b.span.start,C=Math.max(b.span.end,x+10));let w=t=>e.left+(t-S)/(C-S)*(e.right-e.left),T=v===null?[{label:`video`,ranges:Array.from({length:f.buffered.length},(e,t)=>({start:f.buffered.start(t),end:f.buffered.end(t)}))}]:[...v.buffers.entries()].map(([e,t])=>({label:e.replace(`sb:`,``),ranges:t.ranges}));T.length===0&&T.push({label:`video`,ranges:[]});let E=g(h),D=Math.min(34,(e.bottom-e.top-8*(T.length-1))/T.length);e.ctx.textAlign=`left`,e.ctx.textBaseline=`middle`,T.forEach((t,n)=>{let r=e.top+n*(D+8);if(e.ctx.fillStyle=u(_.muted,.15),e.ctx.fillRect(e.left,r,e.right-e.left,D),v!==null)for(let[t,n]of v.quality.appendLog){var i;let a=E.findIndex(e=>e.id===n);e.ctx.fillStyle=u((i=_.series[Math.max(0,a)%_.series.length])==null?_.accent:i,.3),e.ctx.fillRect(w(t.start),r,Math.max(1,w(t.end)-w(t.start)),D)}e.ctx.fillStyle=_.ink;for(let n of t.ranges)e.ctx.fillRect(w(n.start),r+D-4,Math.max(1,w(n.end)-w(n.start)),3);e.ctx.fillStyle=_.muted,e.ctx.fillText(t.label,e.left+4,r+D/2)}),b!==null&&p(e,w(b.edge),_.warn,`edge`),e.ctx.fillStyle=_.accent,e.ctx.fillRect(w(x)-1,e.top,2,e.bottom-e.top),e.ctx.fillStyle=_.muted,e.ctx.textAlign=`left`,e.ctx.textBaseline=`top`,e.ctx.fillText(r(S),e.left,e.bottom+3),e.ctx.textAlign=`right`,e.ctx.fillText(r(C),e.right,e.bottom+3),m([...E.map((e,t)=>{var r;return[e.height===void 0?n(e.bitrate):`${e.height}p`,(r=_.series[t%_.series.length])==null?_.accent:r]}),[`buffered`,_.ink],[`playhead`,_.accent]]);let O=(l=(d=t.samples[t.samples.length-1])==null?void 0:d.ahead)==null?0:l;a.textContent=`${r(x)} of ${r(C)}, ${O.toFixed(1)}s buffered ahead${b===null?``:`, window ${r(b.span.start)} to ${r(b.span.end)}`}`}function v(e,t,r,i){var o,l,u,p,g,_;let v=t.palette,y=h(t.samples,r),b=t.marks.filter(e=>e.kind===`segment`&&e.t>=r),x=c(e,Math.max(1e6,...y.map(e=>Math.max(e.slow,e.fast,e.playingBitrate)),...b.map(e=>e.value))*1.15,e=>(e/1e6).toFixed(e>=1e7?0:1),v),S=s(e,r,i,v);for(let t of b){var C,w,T;let n=((C=t.trackId)==null?void 0:C.startsWith(`aud`))===!0||((w=t.trackId)==null?void 0:w.includes(`audio`))===!0;f(e,S(t.t),x(t.value),(T=n?v.series[4]:v.series[0])==null?v.accent:T)}d(e,y.map(e=>[S(e.t),x(e.slow)]),(o=v.series[1])==null?v.accent:o),d(e,y.map(e=>[S(e.t),x(e.fast)]),(l=v.series[2])==null?v.accent:l,{dashed:!0}),d(e,y.map(e=>[S(e.t),x(e.playingBitrate)]),v.muted,{step:!0,width:1.5}),m([[`video segment`,(u=v.series[0])==null?v.accent:u],[`audio segment`,(p=v.series[4])==null?v.accent:p],[`slow estimate`,(g=v.series[1])==null?v.accent:g],[`fast estimate`,(_=v.series[2])==null?v.accent:_],[`playing bitrate`,v.muted]]);let E=y[y.length-1];a.textContent=E===void 0?`Mbps`:`Mbps. Now: slow ${n(E.slow)}, fast ${n(E.fast)}, playing ${n(E.playingBitrate)}`}function y(e,t,n,r){var i,o,l,f,g;let _=t.palette,v=h(t.samples,n),y=c(e,Math.max(5,...v.map(e=>e.ahead))*1.15,e=>`${e.toFixed(0)}s`,_),b=s(e,n,r,_);e.ctx.fillStyle=u((i=_.series[3])==null?_.accent:i,.25);let x=null;for(let[t,n]of v.entries()){n.stalled&&x===null&&(x=n.t);let r=t===v.length-1;(!n.stalled||r)&&x!==null&&(e.ctx.fillRect(b(x),e.top,Math.max(2,b(n.t)-b(x)),e.bottom-e.top),x=null)}d(e,v.map(e=>[b(e.t),y(e.ahead)]),(o=_.series[0])==null?_.accent:o);for(let r of t.marks)r.t<n||r.kind===`segment`||r.kind===`switch`||(r.kind===`stall`?p(e,b(r.t),_.accent,`!`):r.kind===`seek`?p(e,b(r.t),_.muted,`>`):p(e,b(r.t),_.warn,r.kind.charAt(0).toUpperCase()));m([[`buffered ahead`,(l=_.series[0])==null?_.accent:l],[`stalled`,(f=_.series[3])==null?_.accent:f],[`! stall`,_.accent],[`> seek`,_.muted],[`N F S G recovery`,_.warn]]);let S=t.counters,C=((g=v[v.length-1])==null?void 0:g.stalled)===!0?`, stalled now`:``;a.textContent=`${S.stalls} stalls, ${S.stalledSeconds.toFixed(1)}s stalled in total${C}`}function b(e,t,n,r){var i,o;let l=t.palette,u=h(t.samples,n),f=u.map((e,t)=>{let n=u[t-1],r=n===void 0?.5:Math.max((e.t-n.t)/1e3,.05);return e.decoded/r}),p=c(e,Math.max(30,...f)*1.15,e=>e.toFixed(0),l),g=s(e,n,r,l),_=Math.max(1,...u.map(e=>e.dropped));e.ctx.fillStyle=l.accent;for(let t of u){if(t.dropped===0)continue;let n=t.dropped/_*(e.bottom-e.top)*.6;e.ctx.fillRect(g(t.t)-1.5,e.bottom-n,3,n)}d(e,u.map((e,t)=>{var n;return[g(e.t),p((n=f[t])==null?0:n)]}),(i=l.series[0])==null?l.accent:i),m([[`decoded per second`,(o=l.series[0])==null?l.accent:o],[`dropped, relative`,l.accent]]);let v=t.counters,y=v.decoded>0?(v.dropped/v.decoded*100).toFixed(2):`0.00`;a.textContent=`${v.decoded} decoded, ${v.dropped} dropped (${y}%) this session`}function x(e,t,r,i){var o,c;let l=t.palette,f=h(t.samples,r),_=g(t.engine),v=_.some(e=>e.height!==void 0),y=_.map(e=>{var t;return v?(t=e.height)==null?0:t:e.bitrate}),b=Math.max(1,...y,...f.map(e=>v?e.playingHeight:e.playingBitrate))*1.15,x=t=>e.bottom-t/b*(e.bottom-e.top);e.ctx.strokeStyle=u(l.muted,.25),e.ctx.fillStyle=l.muted,e.ctx.textAlign=`right`,e.ctx.textBaseline=`middle`;for(let t of y){let r=x(t);e.ctx.beginPath(),e.ctx.moveTo(e.left,r),e.ctx.lineTo(e.right,r),e.ctx.stroke(),e.ctx.fillText(v?`${t}p`:n(t),e.left-4,r)}let S=s(e,r,i,l);d(e,f.map(e=>[S(e.t),x(v?e.playingHeight:e.playingBitrate)]),(o=l.series[0])==null?l.accent:o,{step:!0});for(let n of t.marks)n.kind===`switch`&&n.t>=r&&p(e,S(n.t),l.warn,`S`);m([[`playing`,(c=l.series[0])==null?l.accent:c],[`S switch`,l.warn]]);let C=f[f.length-1],w=C===void 0||C.playingId===null?`–`:v?`${C.playingHeight}p`:n(C.playingBitrate);a.textContent=`${t.counters.switches} switches this session, now ${w}`}return{draw(e){let t=o();if(t===null)return;if(e.engine===null&&(e.tab===`throughput`||e.tab===`switches`)){m([]),a.textContent=`A native session: the browser holds this, and says nothing.`;return}let n=performance.now(),r=n-e.window*1e3;switch(e.tab){case`buffer`:_(t,e);break;case`throughput`:v(t,e,r,n);break;case`stalls`:y(t,e,r,n);break;case`frames`:b(t,e,r,n);break;case`switches`:x(t,e,r,n)}}}}function f(e){let t=e.parentNode;return t===null?e instanceof ShadowRoot?e.host:null:t}function p(e){let t=e;for(;t!==null;){if(t instanceof HTMLElement&&t.localName===`mattebox-player`)return t;t=f(t)}return null}function m(e,t){let n=!0,r=()=>{n&&(n=!1,customElements.upgrade(e),`video`in e&&t(e))};return`video`in e?r():customElements.whenDefined(`mattebox-player`).then(r),()=>{n=!1}}let h=`http://www.w3.org/2000/svg`;function g(){let e=document.createElementNS(h,`svg`);e.setAttribute(`viewBox`,`0 0 32 32`),e.setAttribute(`aria-hidden`,`true`),e.setAttribute(`part`,`icon`);let t=document.createElementNS(h,`path`);return t.setAttribute(`fill-rule`,`evenodd`),t.setAttribute(`d`,`M17.534 10.6674C17.534 11.5143 16.8475 12.2008 16.0006 12.2008C15.1538 12.2008 14.4673 11.5143 14.4673 10.6674C14.4673 9.82061 15.1538 9.13411 16.0006 9.13411C16.8475 9.13411 17.534 9.82061 17.534 10.6674Z M14.6678 14.2005C14.6678 13.8323 14.9663 13.5339 15.3345 13.5339H16.6678C17.036 13.5339 17.3345 13.8323 17.3345 14.2005V22.2005C17.3345 22.5687 17.036 22.8672 16.6678 22.8672H15.3345C14.9663 22.8672 14.6678 22.5687 14.6678 22.2005V14.2005Z M28 16C28 22.6274 22.6274 28 16 28C9.37258 28 4 22.6274 4 16C4 9.37258 9.37258 4 16 4C22.6274 4 28 9.37258 28 16ZM24.9333 16C24.9333 20.9337 20.9337 24.9333 16 24.9333C11.0663 24.9333 7.06667 20.9337 7.06667 16C7.06667 11.0663 11.0663 7.06667 16 7.06667C20.9337 7.06667 24.9333 11.0663 24.9333 16Z`),e.append(t),e}function _(e){return Array.from({length:e.length},(t,n)=>({start:e.start(n),end:e.end(n)}))}function v(e){var t;let n=(t=e.getVideoPlaybackQuality)==null?void 0:t.call(e);return{currentTime:e.currentTime,duration:e.duration,paused:e.paused,ended:e.ended,seeking:e.seeking,readyState:e.readyState,networkState:e.networkState,playbackRate:e.playbackRate,volume:e.volume,muted:e.muted,videoWidth:e.videoWidth,videoHeight:e.videoHeight,buffered:_(e.buffered),seekable:_(e.seekable),frames:n===void 0?null:{decoded:n.totalVideoFrames,dropped:n.droppedVideoFrames},mediaError:e.error===null?null:{code:e.error.code,message:e.error.message}}}function y(e){var t,n,r,i,a,o,s;let c=e.stats.snapshot(),l=e,u=e.error;return{phase:c.lifecycle.phase,capabilities:[...e.capabilities()],throughput:{slow:c.stats.throughputEwma,fast:c.stats.throughputFastEwma},bufferGoal:c.scheduling.bufferGoal,buffers:[...c.buffers.entries()].map(([e,t])=>({id:e,codecs:t.codecs,ranges:t.ranges.map(e=>({start:e.start,end:e.end}))})),inflight:[...c.scheduling.inflight.values()].map(e=>({trackId:e.trackId,seq:e.seq,url:e.url})),live:c.live===null?null:{start:c.live.span.start,end:c.live.span.end,edge:c.live.edge,latency:(t=(n=l.live)==null?void 0:n.latency)==null?null:t},tracks:{active:Object.fromEntries([`video`,`audio`,`text`].map(t=>{var n,r;return[t,(n=(r=e.tracks.active(t))==null?void 0:r.id)==null?null:n]})),available:e.tracks.available.map(e=>{var t,n;return{id:e.id,contentType:e.contentType,mimeType:e.mimeType,lang:(t=e.lang)==null?null:t,role:(n=e.role)==null?null:n,renditions:e.renditions.length}})},quality:{playing:(r=(i=e.quality.playing)==null?void 0:i.id)==null?null:r,active:(a=(o=e.quality.active)==null?void 0:o.id)==null?null:a,pinned:e.quality.pinned,allowed:e.quality.allowed.map(e=>e.id),renditions:e.quality.renditions.map(e=>{var t,n,r;return{id:e.id,bitrate:e.bitrate,width:(t=e.width)==null?null:t,height:(n=e.height)==null?null:n,frameRate:(r=e.frameRate)==null?null:r,codecs:e.codecs}})},drm:l.drm===void 0?null:{keySystem:l.drm.keySystem,sessions:[...l.drm.sessions]},error:u===null?null:{category:u.category,code:u.code,fatal:u.fatal,recoverable:u.recoverable,context:(s=u.context)==null?null:s}}}function b(e){var t,n;let{player:r}=e,i=r.engine,a=e.samples.slice(-240),o=performance.now()-12e4;return{at:(/* @__PURE__ */ new Date()).toISOString(),userAgent:navigator.userAgent,source:{url:r.getAttribute(`src`),type:r.getAttribute(`type`),handler:(t=(n=r.player)==null||(n=n.session)==null?void 0:n.handler)==null?null:t},playback:v(r.video),error:r.error,engine:i===null?null:y(i),counters:e.counters,samples:a,marks:e.marks.filter(e=>e.t>=o),support:e.support,trace:i===null?null:e.history}}function x(e){"@babel/helpers - typeof";return x=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},x(e)}function S(e,t){if(x(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(x(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function C(e){var t=S(e,`string`);return x(t)==`symbol`?t:t+``}function w(e,t,n){return(t=C(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function T(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function E(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?T(Object(n),!0).forEach(function(t){w(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):T(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function D(e){return Array.isArray(e)?e.length:typeof e==`object`&&e&&`kind`in e?String(e.kind):0}function O(e){var t,n;return{id:e.id,isLive:e.isLive,duration:(t=e.duration)==null?null:t,live:(n=e.live)==null?null:n,periods:e.periods.map(e=>{var t;return{id:e.id,start:e.start,duration:(t=e.duration)==null?null:t,tracks:e.tracks.map(e=>{var t,n;return{id:e.id,contentType:e.contentType,mimeType:e.mimeType,lang:(t=e.lang)==null?null:t,role:(n=e.role)==null?null:n,protected:e.protection!==null&&e.protection.schemes.length>0,renditions:e.renditions.map(e=>{var t,n;return{id:e.id,bitrate:e.bitrate,width:(t=e.width)==null?null:t,height:(n=e.height)==null?null:n,codecs:e.codecs,segments:D(e.segments)}})}})}})}}function k(e){switch(e.type){case`MANIFEST_LOADED`:return{type:e.type,presentation:O(e.presentation)};case`PLAYLIST_REFRESHED`:return E(E({},e),{},{segments:D(e.segments)});case`SEGMENT_LOADED`:return E(E({},e),{},{bytes:A(e.bytes)});default:return e}}function A(e){return e instanceof ArrayBuffer||ArrayBuffer.isView(e)?e.byteLength:e}function j(e){if(e.kind===`emit`&&e.event===`tracks:changed`)return{kind:e.kind,event:e.event};if(e.kind===`schedule`)return E(E({},e),{},{then:k(e.then)});let t={};for(let[n,r]of Object.entries(e))t[n]=A(r);return t}function M(e,t){return t instanceof ArrayBuffer||ArrayBuffer.isView(t)?t.byteLength:t instanceof Map?Object.fromEntries(t):t instanceof Set?[...t]:typeof t==`function`?`[function]`:typeof Node<`u`&&t instanceof Node?`[${t.nodeName}]`:t}function ee(e){let t={t:e.t,msg:k(e.msg),effects:e.effects.map(j),digest:e.digest};return JSON.parse(JSON.stringify(t,M))}let N=2400,te=/* @__PURE__ */ new Set([`nudge`,`flush`,`skip`,`gap-jump`]);function ne(e){return e.height===void 0?`${Math.round(e.bitrate/1e3)} kbps`:`${e.height}p`}function re(){let e=[],t=[],n=[],r=/* @__PURE__ */ new WeakSet,i=null,a=null,o=0,s=null,c=null,l=null,u=0,d=0,f=0,p=0,m=0;function h(e){t.push(e),t.length>N*2&&t.splice(0,t.length-N*2)}function g(e){let t=e.stats.trace(),n=0;if(a!==null){let e=t.indexOf(a);n=e>=0?e+1:t.findIndex(e=>e.t>o),n<0&&(n=t.length)}let r=t[t.length-1];return r!==void 0&&(a=r,o=r.t),t.slice(n)}function _(e,t){if(!r.has(e)){r.add(e),n.push(ee(e)),n.length>500&&n.splice(0,n.length-500);{let n=e.msg;n.type===`SEGMENT_LOADED`&&n.trackId!==`manifest`&&n.size>0?h({t:e.t,kind:`segment`,value:n.size*8e3/Math.max(n.rtt,1),label:`${n.trackId} #${n.seq}`,trackId:n.trackId}):n.type===`STALLED`?h({t:e.t,kind:`stall`,value:n.at,label:`stalled at ${n.at.toFixed(1)}s`}):n.type===`SEEKING`&&h({t:e.t,kind:`seek`,value:n.to,label:`seek to ${n.to.toFixed(1)}s`});for(let n of e.effects){if(n.kind!==`emit`)continue;let r=n.event.replace(`recovery:`,``);te.has(r)&&h({t:e.t,kind:r,value:t.currentTime,label:`recovery ${r}`})}}}}function v(){e=[],t=[],n=[],r=/* @__PURE__ */ new WeakSet,a=null,o=0,s=null,c=null,l=null,u=0,d=0,f=0,p=0,m=0}function y(){i==null||i(),i=null}return{attach(e,t){y(),v(),t!==null&&(i=t.on(`trace`,t=>{_(t,e)}))},release:y,poll(t,n){var r,i,a,o,v,y,b,x,S,C;let w=performance.now();if(n!==null)for(let e of g(n))_(e,t);let T=(r=n==null?void 0:n.stats.snapshot())==null?null:r,E=(i=n==null?void 0:n.quality.playing)==null?null:i,D=(a=t.getVideoPlaybackQuality)==null?void 0:a.call(t);p=(o=D==null?void 0:D.totalVideoFrames)==null?0:o,m=(v=D==null?void 0:D.droppedVideoFrames)==null?0:v;let O=s===null?0:Math.max(0,m-s.dropped),k=s===null?0:Math.max(0,p-s.decoded);s={dropped:m,decoded:p};let A=0;for(let e=0;e<t.buffered.length;e+=1)t.buffered.start(e)<=t.currentTime+.25&&t.buffered.end(e)>t.currentTime&&(A=t.buffered.end(e)-t.currentTime);let j=!t.paused&&!t.ended&&!t.seeking&&t.readyState<3&&t.currentTime>0;if(j&&l===null?(l=w,u+=1):!j&&l!==null&&(d+=(w-l)/1e3,l=null),E!==null&&c!==null&&E.id!==c){var M;f+=1,h({t:w,kind:`switch`,value:(M=E.height)==null?E.bitrate:M,label:`now ${ne(E)}`})}E!==null&&(c=E.id),e.push({t:w,currentTime:t.currentTime,slow:(y=T==null?void 0:T.stats.throughputEwma)==null?0:y,fast:(b=T==null?void 0:T.stats.throughputFastEwma)==null?0:b,ahead:A,stalled:j,dropped:O,decoded:k,playingId:(x=E==null?void 0:E.id)==null?null:x,playingBitrate:(S=E==null?void 0:E.bitrate)==null?0:S,playingHeight:(C=E==null?void 0:E.height)==null?0:C}),e.length>N&&e.splice(0,e.length-N)},get samples(){return e},get marks(){return t},get history(){return n},get counters(){let e=l===null?0:(performance.now()-l)/1e3;return{stalls:u,stalledSeconds:d+e,switches:f,decoded:p,dropped:m}}}}function P(e,t,n,r,i,a,o){try{var s=e[a](o),c=s.value}catch(e){n(e);return}s.done?t(c):Promise.resolve(c).then(r,i)}function F(e){return function(){var t=this,n=arguments;return new Promise(function(r,i){var a=e.apply(t,n);function o(e){P(a,r,i,o,s,`next`,e)}function s(e){P(a,r,i,o,s,`throw`,e)}o(void 0)})}}let I=[{label:`H.264 High 4.0`,codec:`avc1.640028`,kind:`video`,containers:[`mp4`]},{label:`H.264 Baseline`,codec:`avc1.42e01e`,kind:`video`,containers:[`mp4`]},{label:`H.265 / HEVC Main`,codec:`hvc1.1.6.L123.B0`,kind:`video`,containers:[`mp4`]},{label:`VP9 Profile 0`,codec:`vp09.00.40.08`,kind:`video`,containers:[`mp4`,`webm`]},{label:`AV1 Main`,codec:`av01.0.08M.08`,kind:`video`,containers:[`mp4`,`webm`]},{label:`AAC-LC`,codec:`mp4a.40.2`,kind:`audio`,containers:[`mp4`]},{label:`HE-AAC`,codec:`mp4a.40.5`,kind:`audio`,containers:[`mp4`]},{label:`Opus`,codec:`opus`,kind:`audio`,containers:[`mp4`,`webm`]},{label:`FLAC`,codec:`flac`,kind:`audio`,containers:[`mp4`]},{label:`AC-3`,codec:`ac-3`,kind:`audio`,containers:[`mp4`]},{label:`E-AC-3`,codec:`ec-3`,kind:`audio`,containers:[`mp4`]}],ie=[{label:`Widevine`,keySystems:[`com.widevine.alpha`],levels:[[`HW_SECURE_ALL`,`L1`],[`HW_SECURE_DECODE`,`L1`],[`HW_SECURE_CRYPTO`,`L2`],[`SW_SECURE_DECODE`,`L3`],[`SW_SECURE_CRYPTO`,`L3`]]},{label:`PlayReady`,keySystems:[`com.microsoft.playready.recommendation`,`com.microsoft.playready`],levels:[[`3000`,`SL3000`],[`2000`,`SL2000`],[`150`,`SL150`]]},{label:`FairPlay`,keySystems:[`com.apple.fps`,`com.apple.fps.1_0`],levels:[]},{label:`ClearKey`,keySystems:[`org.w3.clearkey`],levels:[]}],ae=[`1.0`,`1.1`,`1.2`,`1.3`,`1.4`,`2.0`,`2.1`,`2.2`,`2.3`];function L(e,t,n=4e3){return new Promise(r=>{let i=setTimeout(()=>r(t),n);e.then(e=>{clearTimeout(i),r(e)},()=>{clearTimeout(i),r(t)})})}function R(e){return e in globalThis?`yes`:`no`}function oe(){let e=`no`;try{typeof MediaSource<`u`&&`changeType`in SourceBuffer.prototype&&(e=`yes`)}catch(t){e=`no`}return[{label:`Secure context`,value:window.isSecureContext?`yes`:`no`},{label:`MediaSource`,value:R(`MediaSource`)},{label:`ManagedMediaSource`,value:R(`ManagedMediaSource`)},{label:`SourceBuffer.changeType`,value:e},{label:`Encrypted Media (EME)`,value:R(`MediaKeys`)},{label:`MediaCapabilities`,value:navigator.mediaCapabilities===void 0?`no`:`yes`},{label:`WebCodecs`,value:R(`VideoDecoder`)}]}function se(e){try{return typeof MediaSource<`u`&&MediaSource.isTypeSupported(e)}catch(e){return!1}}function ce(e){let t=document.createElement(`video`).canPlayType(e);return t===`probably`?`yes`:t===`maybe`?`maybe`:`no`}function le(e){return z.apply(this,arguments)}function z(){return z=F(function*(e){let t=navigator.mediaCapabilities;if((t==null?void 0:t.decodingInfo)===void 0)return{smooth:`na`,efficient:`na`};let n=`${e.kind}/${e.containers[0]}; codecs="${e.codec}"`,r=e.kind===`video`?{type:`media-source`,video:{contentType:n,width:1920,height:1080,bitrate:6e6,framerate:30}}:{type:`media-source`,audio:{contentType:n,channels:`2`,bitrate:128e3}},i=yield L(t.decodingInfo(r),null);return i===null?{smooth:`na`,efficient:`na`}:i.supported?{smooth:i.smooth?`yes`:`no`,efficient:i.powerEfficient?`yes`:`no`}:{smooth:`no`,efficient:`no`}}),z.apply(this,arguments)}function ue(e){return B.apply(this,arguments)}function B(){return B=F(function*(e){let t=t=>e.containers.includes(t)?se(`${e.kind}/${t}; codecs="${e.codec}"`)?`yes`:`no`:`na`,{smooth:n,efficient:r}=yield le(e);return{label:e.label,codec:e.codec,kind:e.kind,mse:t(`mp4`),webm:t(`webm`),element:ce(`${e.kind}/${e.containers[0]}; codecs="${e.codec}"`),smooth:n,efficient:r}}),B.apply(this,arguments)}function V(e={}){return[E({contentType:`video/mp4; codecs="avc1.42e01e"`},e),E({contentType:`video/mp4; codecs="vp09.00.10.08"`},e)]}function H(e={}){return E({initDataTypes:[`cenc`,`keyids`,`sinf`,`skd`],videoCapabilities:V(),audioCapabilities:[{contentType:`audio/mp4; codecs="mp4a.40.2"`},{contentType:`audio/mp4; codecs="opus"`}]},e)}function U(e,t){return typeof navigator.requestMediaKeySystemAccess==`function`?L(navigator.requestMediaKeySystemAccess(e,[t]).then(e=>e,()=>null),null):Promise.resolve(null)}let de=e=>({label:e,keySystem:null,level:`na`,schemes:`na`,persistent:`na`,identifier:`na`,hdcp:`na`});function fe(e){return W.apply(this,arguments)}function W(){return W=F(function*(e){let t=null,n=null;for(let r of e.keySystems)if(n=yield U(r,H()),n!==null){t=r;break}if(t===null||n===null)return de(e.label);let r=e.levels.length===0?`n/a for this system`:`none granted`;for(let[n,i]of e.levels)if((yield U(t,H({videoCapabilities:V({robustness:n})})))!==null){r=`${i} (${n})`;break}let i=[],a=!1;for(let e of[`cenc`,`cbcs`]){var o;let n=yield U(t,H({videoCapabilities:V({encryptionScheme:e})})),r=n==null||(o=n.getConfiguration().videoCapabilities)==null||(o=o.find(e=>e.contentType!==``))==null?void 0:o.encryptionScheme;r!=null&&(a=!0),r===e&&i.push(e)}let s=a?i.length===0?`none`:i.join(`, `):`unknown (no API)`,c=yield U(t,H({persistentState:`required`,sessionTypes:[`persistent-license`]})),l=yield U(t,H({distinctiveIdentifier:`required`})),u=`na`;try{let e=yield L(n.createMediaKeys(),null);if(e!==null&&typeof e.getStatusForPolicy==`function`){let t=null;for(let n of ae){if((yield L(e.getStatusForPolicy({minHdcpVersion:n}),`unknown`))!==`usable`)break;t=n}u=t===null?`no output protection`:`up to ${t}`}}catch(e){u=`na`}return{label:e.label,keySystem:t,level:r,schemes:s,persistent:c===null?`no`:`yes`,identifier:l===null?`no`:`yes`,hdcp:u}}),W.apply(this,arguments)}let G=null;function K(){return G===null&&(G=F(function*(){return{userAgent:navigator.userAgent,platform:oe(),codecs:yield Promise.all(I.map(ue)),drm:yield Promise.all(ie.map(fe))}})()),G}let q=[30,60,120,300,600],J=[`playback`,`charts`,`engine`,`browser`],pe={playback:`Playback`,charts:`Charts`,engine:`Engine`,browser:`Browser`},me=[`nothing`,`metadata`,`current data`,`future data`,`enough data`],he=[`empty`,`idle`,`loading`,`no source`];function Y(e,t,n){let r=document.createElement(e);return r.setAttribute(`part`,t),n!==void 0&&(r.textContent=n),r}function X(e,t){let n=Y(`button`,e,t);return n.type=`button`,n}function Z(e){switch(e){case`yes`:return[`✓`,`cell ok`];case`no`:return[`✕`,`cell bad`];case`na`:return[`–`,`cell na`];case`maybe`:return[`maybe`,`cell maybe`];default:return[e,`cell`]}}var Q=class extends HTMLElement{static get observedAttributes(){return[`label`,`label-copy`,`label-copied`,`window`]}constructor(){super(),this.player=null,this.cancel=null,this.offs=[],this.sampler=re(),this.timer=void 0,this.drawer=void 0,this.copied=void 0,this.tab=`playback`,this.chartTab=`buffer`,this.support=null,this.probing=!1;let e=this.attachShadow({mode:`open`}),t=document.createElement(`style`);t.textContent=`:host{--mbx-chart-1:#5aa9e0;--mbx-chart-2:#6fbf8f;--mbx-chart-3:#d9a83f;--mbx-chart-4:#e05a6e;--mbx-chart-5:#a98fe0;display:inline-flex;position:relative}:host([hidden]){display:none}:host([inline]){display:block}[part~=button]{width:40px;height:40px;font:inherit;color:inherit;border-radius:var(--mbx-radius);cursor:pointer;opacity:.9;background:0 0;border:0;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}[part~=button]:hover{opacity:1}[part~=button]:focus{outline:2px solid var(--mbx-accent);outline-offset:-2px}[part~=button]:focus:not(:focus-visible){outline:none}[part~=icon],::slotted(*){fill:currentColor;width:1.75em;height:1.75em}:host([inline]) [part~=button]{display:none}[part~=panel]{box-sizing:border-box;width:560px;color:var(--mbx-text,#f2f3f5);border-radius:var(--mbx-radius,4px);font:400 12px / 1.5 var(--mbx-mono,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);text-align:left;white-space:normal;background:#101114f2;flex-direction:column;margin-bottom:8px;display:flex;position:absolute;bottom:100%;right:0;overflow:hidden;box-shadow:0 4px 16px #00000080}[part~=panel][hidden]{display:none}:host([inline]) [part~=panel]{width:auto;max-height:none;box-shadow:none;border-radius:0;margin:0;position:static}[part~=head]{border-bottom:1px solid #ffffff1f;align-items:center;padding:6px;display:flex}[part~=tab],[part~=chart-tab]{font:inherit;color:var(--mbx-muted,#9aa0a6);border-radius:var(--mbx-radius,4px);cursor:pointer;background:0 0;border:0;padding:3px 8px}[part~=tab][aria-selected=true],[part~=chart-tab][aria-selected=true]{color:var(--mbx-text,#f2f3f5);background:#ffffff1f}[part~=copy],[part~=close],[part~=window]{font:inherit;color:inherit;border-radius:var(--mbx-radius,4px);cursor:pointer;background:0 0;border:1px solid #ffffff40;padding:2px 8px}[part~=head]>*{margin:0 2px}[part~=head]>[part~=copy],[part~=chart-tabs]>[part~=window]{margin-left:auto}[part~=window] option{color:#000}[part~=tab]:focus,[part~=chart-tab]:focus,[part~=copy]:focus,[part~=close]:focus,[part~=window]:focus{outline:2px solid var(--mbx-accent,#5b8cff);outline-offset:-2px}[part~=tab]:focus:not(:focus-visible){outline:none}[part~=chart-tab]:focus:not(:focus-visible){outline:none}[part~=copy]:focus:not(:focus-visible){outline:none}[part~=close]:focus:not(:focus-visible){outline:none}[part~=window]:focus:not(:focus-visible){outline:none}[part~=body]{overscroll-behavior:contain;min-height:0;padding:8px;overflow:auto}[part~=page][hidden]{display:none}[part~=rows]{grid-template-columns:max-content 1fr;gap:2px 12px;margin:0;display:grid}[part~=key]{color:var(--mbx-muted,#9aa0a6);white-space:nowrap}[part~=value]{overflow-wrap:anywhere;margin:0}[part~=heading]{letter-spacing:.06em;text-transform:uppercase;color:var(--mbx-muted,#9aa0a6);margin:10px 0 4px;font-size:11px;font-weight:600}[part~=heading]:first-child{margin-top:0}[part~=note]{color:var(--mbx-muted,#9aa0a6);margin:0}[part~=chart-tabs]{flex-wrap:wrap;align-items:center;margin:-2px -2px 4px;display:flex}[part~=chart-tabs]>*{margin:2px}[part~=chart]{width:100%;height:160px;display:block}[part~=legend]{color:var(--mbx-muted,#9aa0a6);flex-wrap:wrap;margin:3px -6px -1px;display:flex}[part~=legend]>*{margin:1px 6px}[part~=swatch]{vertical-align:middle;border-radius:2px;width:10px;height:10px;margin-right:4px;display:inline-block}[part~=readout]{margin-top:4px}[part~=table]{border-collapse:collapse;width:100%;margin-bottom:4px}[part~=cell]{text-align:left;white-space:nowrap;border-bottom:1px solid #ffffff14;padding:2px 6px;font-weight:400}[part~=label]{color:var(--mbx-muted,#9aa0a6)}[part~=ok]{color:var(--mbx-chart-2)}[part~=bad]{color:var(--mbx-chart-4)}[part~=na]{color:var(--mbx-muted,#9aa0a6)}[part~=ok],[part~=bad],[part~=na],[part~=maybe]{font-weight:600}`,this.toggle=X(`button`),this.toggle.setAttribute(`aria-haspopup`,`dialog`),this.toggle.setAttribute(`aria-expanded`,`false`);let n=document.createElement(`slot`);n.name=`icon`,n.append(g()),this.toggle.append(n),this.toggle.addEventListener(`click`,()=>{this.panel.hidden?this.show():this.hide()}),this.panel=Y(`div`,`panel`),this.panel.setAttribute(`role`,`dialog`),this.panel.hidden=!0,this.panel.addEventListener(`keydown`,e=>{e.key!==`Escape`||this.hasAttribute(`inline`)||(e.preventDefault(),this.hide(),this.toggle.focus())});let r=Y(`div`,`head`);r.setAttribute(`role`,`tablist`),this.tabs={},this.pages={},this.body=Y(`div`,`body`);for(let e of J){let t=X(`tab tab-${e}`,pe[e]);t.setAttribute(`role`,`tab`),t.addEventListener(`click`,()=>{this.select(e)}),this.tabs[e]=t,r.append(t);let n=Y(`div`,`page page-${e}`);n.setAttribute(`role`,`tabpanel`),n.hidden=!0,this.pages[e]=n,this.body.append(n)}this.copy=X(`copy`),this.copy.addEventListener(`click`,()=>{this.copyReport()});let i=X(`close`,`✕`);i.setAttribute(`aria-label`,`Close`),i.addEventListener(`click`,()=>{this.hide(),this.toggle.focus()}),r.append(this.copy,i);let a=Y(`div`,`chart-tabs`);a.setAttribute(`role`,`tablist`),this.chartTabs={};for(let e of c){let t=X(`chart-tab chart-tab-${e}`,e);t.setAttribute(`role`,`tab`),t.addEventListener(`click`,()=>{this.chartTab=e,this.markChartTab(),this.draw()}),this.chartTabs[e]=t,a.append(t)}this.windowSelect=Y(`select`,`window`),this.windowSelect.setAttribute(`aria-label`,`Window`);for(let e of q){let t=document.createElement(`option`);t.value=String(e),t.textContent=e<60?`${e} s`:`${e/60} min`,this.windowSelect.append(t)}this.windowSelect.addEventListener(`change`,()=>{this.draw()}),a.append(this.windowSelect),this.canvas=Y(`canvas`,`chart`);let o=Y(`div`,`legend`),s=Y(`p`,`readout`);this.pages.charts.append(a,this.canvas,o,s),this.charts=d(this.canvas,o,s),this.outside=e=>{e.composedPath().includes(this)||this.hide()},this.refit=()=>{this.fit()},this.panel.append(r,this.body),e.append(t,this.toggle,this.panel),this.markTab(),this.markChartTab(),this.renderLabels()}connectedCallback(){var e,t;this.toggleAttribute(`inline`,((e=this.parentElement)==null?void 0:e.localName)!==`mbx-control-bar`);let n=p(this);n!==null&&((t=this.cancel)==null||t.call(this),this.cancel=m(n,e=>{this.isConnected&&this.attach(e)}))}disconnectedCallback(){var e;(e=this.cancel)==null||e.call(this),this.cancel=null,this.detach()}attributeChangedCallback(){this.renderLabels()}attach(e){this.player=e,this.sampler.attach(e.video,e.engine);let t=(e,t,n)=>{e.addEventListener(t,n),this.offs.push(()=>{e.removeEventListener(t,n)})};t(e,`sourcechange`,()=>{this.sampler.attach(e.video,e.engine),this.poll()}),t(e,`error`,e=>{e.detail.fatal&&this.dispatchEvent(new CustomEvent(`report`,{detail:this.report(),bubbles:!0,composed:!0}))}),this.timer=setInterval(()=>{this.poll()},500),this.poll(),this.hasAttribute(`inline`)&&this.show()}detach(){for(let e of this.offs)e();this.offs=[],clearInterval(this.timer),this.timer=void 0,this.sampler.release(),this.hide(),this.player=null}report(){let e=this.player;if(e===null)throw Error(`mbx-diagnostics is not inside a player`);return b({player:e,samples:this.sampler.samples,marks:this.sampler.marks,counters:this.sampler.counters,history:this.sampler.history,support:this.support})}poll(){let e=this.player;e!==null&&(this.sampler.poll(e.video,e.engine),this.panel.hidden||this.paint())}show(){this.panel.hidden&&(this.panel.hidden=!1,this.hasAttribute(`inline`)||(this.setAttribute(`open`,``),this.toggle.setAttribute(`aria-expanded`,`true`),document.addEventListener(`pointerdown`,this.outside,!0),window.addEventListener(`resize`,this.refit),this.fit()),this.paint(),this.drawer=setInterval(()=>{this.draw()},250),this.hasAttribute(`inline`)||this.tabs[this.tab].focus())}hide(){clearInterval(this.drawer),this.drawer=void 0,!this.panel.hidden&&(this.panel.hidden=!0,this.removeAttribute(`open`),this.toggle.setAttribute(`aria-expanded`,`false`),document.removeEventListener(`pointerdown`,this.outside,!0),window.removeEventListener(`resize`,this.refit))}fit(){let e=this.player;if(e===null)return;let t=e.getBoundingClientRect(),n=this.getBoundingClientRect(),r=e.video.getBoundingClientRect().top,i=n.top-r-8;this.panel.style.maxHeight=`${Math.max(120,Math.floor(i))}px`;let a=Math.min(560,Math.max(200,t.width-16));this.panel.style.width=`${a}px`;let o=Math.max(t.left+8,Math.min(n.right-a,t.right-8-a));this.panel.style.right=`auto`,this.panel.style.left=`${o-n.left}px`}select(e){this.tab=e,this.markTab(),this.tabs[e].focus(),this.paint(),this.draw()}markTab(){for(let e of J)this.tabs[e].setAttribute(`aria-selected`,String(e===this.tab)),this.tabs[e].tabIndex=e===this.tab?0:-1,this.pages[e].hidden=e!==this.tab}markChartTab(){for(let e of c)this.chartTabs[e].setAttribute(`aria-selected`,String(e===this.chartTab))}renderLabels(){var e,t;if(this.toggle.setAttribute(`aria-label`,(e=this.getAttribute(`label`))==null?`Diagnostics`:e),this.panel.setAttribute(`aria-label`,(t=this.getAttribute(`label`))==null?`Diagnostics`:t),this.copied===void 0){var n;this.copy.textContent=(n=this.getAttribute(`label-copy`))==null?`Copy report`:n}let r=Number(this.getAttribute(`window`)),i=Number.isFinite(r)&&r>0?r:120;if(!q.includes(i)){let e=document.createElement(`option`);e.value=String(i),e.textContent=`${i} s`,this.windowSelect.append(e)}this.windowSelect.value=String(i)}copyReport(){var e=this;return F(function*(){var t;let n=JSON.stringify(e.report(),null,2);try{yield navigator.clipboard.writeText(n)}catch(e){return}e.copy.textContent=(t=e.getAttribute(`label-copied`))==null?`Copied`:t,clearTimeout(e.copied),e.copied=setTimeout(()=>{e.copied=void 0,e.renderLabels()},1500)})()}palette(){let e=getComputedStyle(this),t=(t,n)=>e.getPropertyValue(t).trim()||n;return{ink:t(`--mbx-text`,`#f2f3f5`),muted:t(`--mbx-muted`,`#9aa0a6`),accent:t(`--mbx-accent`,`#5b8cff`),warn:t(`--mbx-chart-3`,`#d9a83f`),series:[1,2,3,4,5].map(e=>t(`--mbx-chart-${e}`,`#888`))}}draw(){let e=this.player;e===null||this.panel.hidden||this.tab!==`charts`||this.charts.draw({tab:this.chartTab,window:Number(this.windowSelect.value)||120,samples:this.sampler.samples,marks:this.sampler.marks,counters:this.sampler.counters,video:e.video,engine:e.engine,palette:this.palette()})}paint(){let e=this.player;if(!(e===null||this.panel.hidden))switch(this.tab){case`playback`:this.sections(this.pages.playback,this.playbackSections(e));break;case`engine`:this.sections(this.pages.engine,this.engineSections(e.engine));break;case`browser`:this.browser()}}playbackSections(e){var t,c,l,u,d,f,p,m;let h=e.video,g=e.engine,_=(t=h.getVideoPlaybackQuality)==null?void 0:t.call(h),v=this.sampler.counters,y=this.sampler.samples[this.sampler.samples.length-1],b=h.paused?h.ended?`ended`:`paused`:`playing`,x=[[`source`,(c=e.getAttribute(`src`))==null?`–`:c],[`type`,(l=e.getAttribute(`type`))==null?`–`:l],[`handler`,(u=(d=e.player)==null||(d=d.session)==null?void 0:d.handler)==null?`–`:u]];g!==null&&x.push([`phase`,g.stats.snapshot().lifecycle.phase]),e.error===null?h.error!==null&&x.push([`media error`,`${h.error.code} ${h.error.message}`]):x.push([`error`,`${e.error.category}: ${e.error.code}`]);let S=[[`time`,`${r(h.currentTime)} of ${r(h.duration)}`],[`state`,`${b}, ${(f=me[h.readyState])==null?h.readyState:f}, network ${(p=he[h.networkState])==null?h.networkState:p}`],[`rate`,`${h.playbackRate}×`],[`picture`,h.videoWidth>0?`${h.videoWidth}×${h.videoHeight}`:`–`],[`frames`,_===void 0?`–`:`${_.totalVideoFrames} decoded, ${_.droppedVideoFrames} dropped (${a(_.droppedVideoFrames,_.totalVideoFrames)})`],[`buffered`,`${i((m=y==null?void 0:y.ahead)==null?0:m)}s ahead: ${o(ge(h))}`],[`stalls`,`${v.stalls}, ${v.stalledSeconds.toFixed(1)}s in total`]];if(g!==null){let e=g.stats.snapshot();S.push([`throughput`,`slow ${n(e.stats.throughputEwma)}, fast ${n(e.stats.throughputFastEwma)}`],[`playing`,s(g.quality.playing)],[`switches`,String(v.switches)])}return[{title:`Source`,rows:x},{title:`Playback`,rows:S}]}engineSections(e){var t,i,a,s,c,l,u;if(e===null)return[{title:null,rows:[],note:`A native session: the browser plays this, and there is no engine to ask.`}];let d=e.stats.snapshot(),f=e,p=d.live,m=[[`capabilities`,[...e.capabilities()].join(`, `)||`none`],[`phase`,d.lifecycle.phase],[`buffer goal`,`${d.scheduling.bufferGoal}s`],[`throughput`,`slow ${n(d.stats.throughputEwma)}, fast ${n(d.stats.throughputFastEwma)}`],[`in flight`,[...d.scheduling.inflight.values()].map(e=>`${e.trackId} #${e.seq}`).join(`, `)||`none`],[`live`,p===null?`VOD`:`window ${r(p.span.start)} to ${r(p.span.end)}, edge ${r(p.edge)}${((t=f.live)==null?void 0:t.latency)===null||((i=f.live)==null?void 0:i.latency)===void 0?``:`, ${f.live.latency.toFixed(1)}s behind`}`],[`trace`,`${e.stats.trace().length} entries`]],h=e.error;h!==null&&m.push([`last error`,`${h.category}: ${h.code}`]);let g=[...d.buffers.entries()].map(([e,t])=>[e.replace(`sb:`,``),`${t.codecs}: ${o(t.ranges)}${t.pendingAppends>0?`, ${t.pendingAppends} pending`:``}`]),_=e.tracks.available.map(t=>{var n;let r=((n=e.tracks.active(t.contentType))==null?void 0:n.id)===t.id,i=[t.lang,t.role].filter(e=>e!==void 0).join(` · `);return[`${t.contentType}${r?` ●`:``}`,`${t.id}${i===``?``:` (${i})`}, ${t.renditions.length} renditions`]}),v=(a=(s=e.quality.playing)==null?void 0:s.id)==null?null:a,y=(c=(l=e.quality.active)==null?void 0:l.id)==null?null:c,b=new Set(e.quality.allowed.map(e=>e.id)),x=e.quality.renditions.map(t=>{var r;let i=[t.id===v?`playing`:``,t.id===y&&y!==v?`next`:``,t.id===e.quality.pinned?`pinned`:``,b.has(t.id)?``:`capped`].filter(e=>e!==``),a=[t.width!==void 0&&t.height!==void 0?`${t.width}×${t.height}`:``,n(t.bitrate),t.frameRate===void 0?``:`${t.frameRate} fps`,(r=t.codecs)==null?``:r].filter(e=>e!==``).join(`, `);return[t.id,`${a}${i.length>0?` [${i.join(`, `)}]`:``}`]}),S=f.drm===void 0?[]:[[`key system`,(u=f.drm.keySystem)==null?`none yet`:u],[`keys`,f.drm.sessions.length===0?`none yet`:f.drm.sessions.map(e=>`${e.keyId}: ${e.status}`).join(`, `)]];return[{title:`Engine`,rows:m},{title:`Source buffers`,rows:g,note:g.length===0?`none yet`:void 0},{title:`Tracks`,rows:_,note:_.length===0?`none yet`:void 0},{title:`Renditions`,rows:x,note:x.length===0?`none yet`:void 0},...f.drm===void 0?[]:[{title:`DRM`,rows:S}]]}sections(e,t){var n;let r=t.flatMap(e=>{let t=[];return e.title!==null&&t.push([`heading`,e.title]),e.note!==void 0&&e.rows.length===0?t.push([`note`,e.note]):t.push([`rows`,e.rows]),t});for(;e.childElementCount>r.length;)(n=e.lastElementChild)==null||n.remove();r.forEach(([t,n],r)=>{var i;let a=e.children[r],o=t===`heading`?`h3`:t===`note`?`p`:`dl`;if(a===void 0||a.localName!==o){let n=Y(o,t);a===void 0?e.append(n):a.replaceWith(n),a=n}if(typeof n==`string`){a.textContent!==n&&(a.textContent=n);return}for(;a.childElementCount>n.length*2;)(i=a.lastElementChild)==null||i.remove();n.forEach(([e,t],n)=>{let r=a.children[n*2],i=a.children[n*2+1];(r===void 0||i===void 0)&&(r=Y(`dt`,`key`),i=Y(`dd`,`value`),a.append(r,i)),r.textContent!==e&&(r.textContent=e),i.textContent!==t&&(i.textContent=t)})})}browser(){let e=this.pages.browser;this.support!==null||this.probing||(this.probing=!0,t(e,Y(`p`,`note`,`Probing the browser…`)),K().then(t=>{this.support=t,this.probing=!1,this.tables(e,t)}))}tables(e,n){t(e),e.append(Y(`h3`,`heading`,`Platform`),Y(`p`,`note`,n.userAgent));let r=Y(`table`,`table`);for(let e of n.platform){let t=document.createElement(`tr`),[n,i]=Z(e.value);t.append(Y(`th`,`cell label`,e.label),Y(`td`,i,n)),r.append(t)}e.append(r),e.append(Y(`h3`,`heading`,`Codecs`));let i=Y(`table`,`table`),a=document.createElement(`tr`);for(let e of[`Codec`,`MSE fMP4`,`MSE WebM`,`<video>`,`Smooth`,`Efficient`])a.append(Y(`th`,`cell label`,e));i.append(a);for(let e of n.codecs){let t=document.createElement(`tr`),n=Y(`th`,`cell label`,e.label);n.title=e.codec,t.append(n);for(let n of[e.mse,e.webm,e.element,e.smooth,e.efficient]){let[e,r]=Z(n);t.append(Y(`td`,r,e))}i.append(t)}e.append(i),e.append(Y(`h3`,`heading`,`DRM`));let o=Y(`table`,`table`),s=document.createElement(`tr`);for(let e of[`System`,`Available`,`Level`,`Schemes`,`Persistent`,`Identifier`,`HDCP`])s.append(Y(`th`,`cell label`,e));o.append(s);for(let e of n.drm){let t=document.createElement(`tr`),n=Y(`th`,`cell label`,e.label);e.keySystem!==null&&(n.title=e.keySystem),t.append(n);let r=[e.keySystem===null?`no`:`yes`,e.level,e.schemes,e.persistent,e.identifier,e.hdcp];for(let e of r){let[n,r]=Z(e);t.append(Y(`td`,r,n))}o.append(t)}e.append(o)}};function ge(e){return Array.from({length:e.buffered.length},(t,n)=>({start:e.buffered.start(n),end:e.buffered.end(n)}))}let $=`mbx-diagnostics`;return customElements.get(`mbx-diagnostics`)===void 0&&customElements.define($,Q),e.DIAGNOSTICS=$,e.MbxDiagnostics=Q,e.probeSupport=K,e})({});

package/dist/charts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"charts.d.ts","sourceRoot":"","sources":["../src/charts.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAa,MAAM,UAAU,CAAC;AAEpD,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAE3D,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,YAAY,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC;AAElF,eAAO,MAAM,UAAU,EAAE,SAAS,QAAQ,EAMzC,CAAC;AAEF,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;CACpC;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,GAAG,EAAE,QAAQ,CAAC;IACvB,4CAA4C;IAC5C,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IAChC,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC5B,QAAQ,CAAC,KAAK,EAAE,gBAAgB,CAAC;IACjC,QAAQ,CAAC,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,MAAM;IACrB,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;CAC/B;AAmCD,wBAAgB,YAAY,CAC1B,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,WAAW,GACnB,MAAM,CA6ZR"}
+{"version":3,"file":"charts.d.ts","sourceRoot":"","sources":["../src/charts.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAa,MAAM,UAAU,CAAC;AAGpD,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAE3D,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,YAAY,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC;AAElF,eAAO,MAAM,UAAU,EAAE,SAAS,QAAQ,EAMzC,CAAC;AAEF,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;CACpC;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,GAAG,EAAE,QAAQ,CAAC;IACvB,4CAA4C;IAC5C,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IAChC,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC5B,QAAQ,CAAC,KAAK,EAAE,gBAAgB,CAAC;IACjC,QAAQ,CAAC,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,MAAM;IACrB,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;CAC/B;AAmCD,wBAAgB,YAAY,CAC1B,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,WAAW,GACnB,MAAM,CA6ZR"}