@mattebox/player-diagnostics 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Josep Boix Requesens
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/NOTICE

@@ -0,0 +1,24 @@
+@mattebox/player-diagnostics carries a glyph copied from media-icons
+(https://github.com/vidstack/media-icons), used under the MIT License:
+
+MIT License
+
+Copyright (c) 2023 Rahim Alwer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,45 @@
+# @mattebox/player-diagnostics
+
+`<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.
+
+```sh
+npm install @mattebox/player-diagnostics @mattebox/player mattebox
+```
+
+```html
+<mattebox-player src="https://example.com/vod/master.m3u8" controls="custom">
+  <mbx-control-bar>
+    <mbx-play-button></mbx-play-button>
+    <mbx-seek-bar></mbx-seek-bar>
+    <mbx-spacer></mbx-spacer>
+    <mbx-diagnostics></mbx-diagnostics>
+  </mbx-control-bar>
+</mattebox-player>
+
+<script type="module">
+  import '@mattebox/player';
+  import '@mattebox/player-diagnostics';
+</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:
+
+```ts
+player.addEventListener('report', (event) => {
+  navigator.sendBeacon('/diagnostics', JSON.stringify(event.detail));
+});
+```
+
+The [guide](https://github.com/jboix/mattebox-player/blob/main/docs/guide/05-diagnostics.md)
+covers the rest.

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

@@ -0,0 +1,124 @@
+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})({});

package/dist/charts.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The five charts, on one canvas: the buffer per source buffer over media
+ * time, and over wall time the throughput, the stalls, the frames and the
+ * switches. Drawn the way the engine's playground draws them, in a copy
+ * that reads the sampler and needs no DOM of its own beyond the canvas,
+ * the legend and the readout it is given. Colours come from the element,
+ * read off its custom properties, so a page's tokens reach the canvas.
+ */
+import type { Mattebox } from 'mattebox';
+import type { Counters, Mark, Sample } from './sampler.js';
+export type ChartTab = 'buffer' | 'throughput' | 'stalls' | 'frames' | 'switches';
+export declare const CHART_TABS: readonly ChartTab[];
+export interface Palette {
+    readonly ink: string;
+    readonly muted: string;
+    readonly accent: string;
+    readonly warn: string;
+    readonly series: readonly string[];
+}
+export interface ChartInput {
+    readonly tab: ChartTab;
+    /** Seconds of wall time across the plot. */
+    readonly window: number;
+    readonly samples: readonly Sample[];
+    readonly marks: readonly Mark[];
+    readonly counters: Counters;
+    readonly video: HTMLVideoElement;
+    readonly engine: Mattebox | null;
+    readonly palette: Palette;
+}
+export interface Charts {
+    draw(input: ChartInput): void;
+}
+export declare function createCharts(canvas: HTMLCanvasElement, legend: HTMLElement, readout: HTMLElement): Charts;
+//# sourceMappingURL=charts.d.ts.map

package/dist/charts.d.ts.map

@@ -0,0 +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"}