@ekolabs/eko-gallery-react 3.0.39-users-management-1145636.0 → 4.0.0

package/README.md

@@ -38,17 +38,63 @@ import { EkoGallery } from '@ekolabs/eko-gallery-react';
 
 This component accepts the following props:
 
-| Prop | Type | Description |
-| ---- | ---- | ----------- |
-| className | String | _Optional._ class names to add to the `EkoGallery` component, for styling purposes for example. |
-| config | Object | The eko gallery configuration. This object will be published via the eko platform and exposed via an api endpoint (see below). |
-| variantId | String | _Optional._ The selected variant (if applicable). It is used to switch to the relevant variant gallery assets when the product variant changes. |
-| activeItemIndex | Number | _Optional._ Updates the displayed item of the EkoGallery. |
-| ref | Object | _Optional._ Exposes the next() and prev() functions that allow navigation between the steps |
-| onEvent | Function | _Optional._ Handler for events occurred in the eko gallery, for third party tools tracking for example. |
+| Prop       | Type     | Description                                                                                                                                     |
+|------------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------|
+| className  | String   | _Optional._ class names to add to the `EkoGallery` component, for styling purposes for example.                                                 |
+| config     | Object   | The eko gallery configuration. This object will be published via the eko platform and exposed via an api endpoint (see below).                  |
+| variantId  | String   | _Optional._ The selected variant (if applicable). It is used to switch to the relevant variant gallery assets when the product variant changes. |
+| activeItem | Object   | _Optional._ Updates the displayed item and step of the EkoGallery.                                                                              |
+| ref        | Object   | _Optional._ Exposes the next() and prev() functions that allow navigation between the steps                                                     |
+| onEvent    | Function | _Optional._ Handler for events occurred in the eko gallery, for third party tools tracking for example.                                         |
 
 > When passing the `onEvent` prop, make sure to use the `useCallback()` hook to avoid unnecessary re-renders.
 
+### Enabling SSR
+
+To enable SSR of the EkoGallery you'll need to add the `ssrHtml` prop to `<EkoGallery>`.
+
+To get `ssrHtml` on the server, import `getSsrHtml` from `@ekolabs/eko-gallery-react/server` and pass it to `<EkoGallery>`.
+
+```jsx
+// Next.js example
+import { EkoGallery } from '@ekolabs/eko-gallery-react';
+
+export async function getStaticProps({ params: { id } }) {
+    const { getSsrHtml } = await import('@ekolabs/eko-gallery-react/server');
+
+    const ekoProductConfig = await getEkoProductConfig(); // more on this in the Config data fetching section
+    const config = ekoProductConfig[id];
+    const { ssrHtml } = await getSsrHtml(config);
+    return {
+        props: {
+            ekoGalleryProps: {
+                config,
+                ssrHtml
+            }
+        }
+    };
+}
+
+export default function ProductPage({ ekoGalleryProps }) {
+    return (
+        <EkoGallery
+            {...ekoGalleryProps}
+            // rest of EkoGallery props...
+        >
+    );
+}
+```
+
+The dynamic import in `getStaticProps` ensures that `@ekolabs/eko-gallery-react/server` doesn't get bundled into your next.js client's code.
+
+#### getSsrHtml(config, isForMobile)
+
+| Arg         | Type    | Description                                                                                                         |
+|-------------|---------|---------------------------------------------------------------------------------------------------------------------|
+| config      | Object  | The config for the product as recieved from eko                                                                     |
+| isForMobile | Boolean | If you know on the server that the client is a mobile device pass `true` so the resulting layout will be for mobile |
+
+
 ### Switching the gallery's active item externally example
 
 First, initialize a variable using React's `useRef()` hook.

package/dist/debug-overlay-BIxN1VnC.esm.js

@@ -0,0 +1 @@
+import{_ as e,a as t,b as n,c as o,d as i}from"./index.esm.js";import"react";const r="undefined"!=typeof self&&self||"undefined"!=typeof window&&window||"undefined"!=typeof global&&global||{},l=r&&r.performance,s=l&&"function"==typeof l.now?()=>l.now():()=>Date.now(),a=Object.freeze({NODE_ADD:"node:add",NODE_CHILDREN_CHANGED:"node:childrenchanged",NODE_LOADED:"node:loaded",NODE_LOAD_ERROR:"node:loaderror",PLACEMENT_ADDED:"placement:added",RENDER_PLACEMENT_ADDED:"renderplacement:added",TIMELINE_TIME_UPDATE:"timeline:timeupdate",TIMELINE_STATE_CHANGE:"statechange",TIMELINE_SEEKING:"seeking",TIMELINE_SEEKED:"seeked",TIMELINE_RESET:"timeline:reset",TIMELINE_PLAYER_STATE:"player:state",TIMELINE_CUEPOINT:"cuepoint",VISUAL_FRAMES_AVAILABLE:"visualframesavailable",TRACK_BUFFER_UPDATE:"track:bufferupdate",TRACK_READY:"track:ready",TRACK_UNDERFLOW:"track:underflow",CLOCK_TICK:"tick",DECODE_READY:"decode:ready",DECODE_ERROR:"decode:error",DECODER_AUDIO:"decoder:audio",DECODER_FRAME:"decoder:frame",DECODER_INIT:"decoder:init",DECODER_ERROR:"decoder:error",QOE_SCORE:"qoescore",QOE_STATUS:"qoestatus",CONTAINER_RESIZE:"containerresize"}),d=["ui-monospace,","SFMono-Regular,","Menlo,","Monaco,","Consolas,",'"Liberation Mono",','"Courier New",',"monospace"].join(" "),c=`11px ${d}`,u=`12px ${d}`;function p(e){return"number"==typeof e&&Number.isFinite(e)}function f(e){return p(e)&&e>0}function y(e){return p(e)?Math.min(1,Math.max(0,e)):0}function h(e,t=3){return p(e)?e.toFixed(t):String(e)}function m(e,t){const n=Number(e),o=Number(t);return!Number.isFinite(n)||!Number.isFinite(o)||n<=0||o<=0?"n/a":`${Math.round(n)}x${Math.round(o)}`}var v=new WeakMap,g=new WeakMap,b=new WeakMap,E=new WeakMap,w=new WeakMap,x=new WeakMap,I=new WeakMap,C=new WeakSet;class A{constructor({width:i=220,height:l=48,windowMs:s=6e4,maxValue:a=60,autoScale:d=!1,formatValue:c}={}){e(this,C),t(this,v,void 0),t(this,g,void 0),t(this,b,[]),t(this,E,void 0),t(this,w,void 0),t(this,x,void 0),t(this,I,void 0);const u=null==r?void 0:r.document;if(!u||"function"!=typeof u.createElement)throw new Error("Debug overlay graph requires document.createElement.");n(v,this,u.createElement("canvas")),o(v,this).width=i,o(v,this).height=l,o(v,this).style.width=`${i}px`,o(v,this).style.height=`${l}px`,o(v,this).style.borderRadius="6px",o(v,this).style.background="#111",n(g,this,o(v,this).getContext("2d")),n(E,this,s),n(w,this,a),n(x,this,!!d),n(I,this,"function"==typeof c?c:null)}get element(){return o(v,this)}push(e,t){if(o(v,this)&&o(g,this)&&Number.isFinite(e)&&Number.isFinite(t)){for(o(b,this).push({t:t,v:e});o(b,this).length&&t-o(b,this)[0].t>o(E,this);)o(b,this).shift();i(C,this,N).call(this)}}dispose(){n(b,this,[]),n(g,this,null),n(v,this,null)}}function N(){const e=o(g,this),t=o(v,this);if(!e||!t)return;const n=t.width,i=t.height;if(!n||!i)return;if(e.clearRect(0,0,n,i),e.fillStyle="#111",e.fillRect(0,0,n,i),!o(b,this).length)return;const r=o(b,this)[0].t;if(!(o(b,this)[o(b,this).length-1].t>r))return;const l=o(x,this)?o(b,this).reduce(((e,t)=>t.v>e?t.v:e),0):o(w,this),s=l>0?l:o(w,this);e.strokeStyle="#0f0",e.lineWidth=2,e.beginPath();for(let t=0;t<o(b,this).length;t+=1){const l=o(b,this)[t],a=(l.t-r)/o(E,this)*n,d=i-(s>0?Math.min(1,Math.max(0,l.v/s)):0)*i;0===t?e.moveTo(a,d):e.lineTo(a,d)}e.stroke();const a=o(b,this).length?o(b,this)[o(b,this).length-1]:null,d=Number.isFinite(null==a?void 0:a.v)?a.v:null;if(null===d)return;const u=o(I,this)?o(I,this).call(this,d):d.toFixed(1);if("string"!=typeof u||!u)return;e.font=c,e.textAlign="right",e.textBaseline="top";const p=e.measureText(u),f=Math.ceil(p.width)+8,y=n-f-2;e.fillStyle="rgba(0,0,0,0.55)",e.fillRect(y,2,f,14),e.fillStyle="#fff",e.fillText(u,n-2-4,4)}const T=new Intl.NumberFormat("en-US");function k(e,t){const n=(null==e?void 0:e.trackId)||"",o=(null==t?void 0:t.trackId)||"";if(n!==o)return n<o?-1:1;const i=(null==e?void 0:e.nodeId)||"",r=(null==t?void 0:t.nodeId)||"";if(i!==r)return i<r?-1:1;const l=(null==e?void 0:e.segmentId)||"",s=(null==t?void 0:t.segmentId)||"";return l!==s?l<s?-1:1:("number"==typeof(null==e?void 0:e.presentationTime)?e.presentationTime:0)-("number"==typeof(null==t?void 0:t.presentationTime)?t.presentationTime:0)}function R(e,t){for(e.push(t);e.length&&t-e[0]>1e3;)e.shift();if(e.length<2)return 0;const n=e[e.length-1]-e[0];return n<=0?0:1e3*(e.length-1)/n}function M(e,t){if("function"!=typeof e||!t)return;const n=e(t.nodeId),o=null==n?void 0:n.tracks;if(!Array.isArray(o))return;const i=o.find((e=>(null==e?void 0:e.id)===t.trackId)),r=null==i?void 0:i.segments;return Array.isArray(r)?r.find((e=>(null==e?void 0:e.id)===t.segmentId)):void 0}function D(e,t){var n;const o=M(e,t);return(null==o?void 0:o.abrDecision)||(null==o||null===(n=o.chosenRepresentation)||void 0===n?void 0:n.abrDecision)}function S(e){const t=Number(e);return!Number.isFinite(t)||t<=0?"n/a":`${T.format(Math.round(t))}kbps`}function $(e){const t=Number(e);return!Number.isFinite(t)||t<=0?"n/a":`${T.format(Math.round(t/1e3))}kbps`}function L(e,t=3){const n=Number(e);return Number.isFinite(n)?n.toLocaleString("en-US",{minimumFractionDigits:t,maximumFractionDigits:t}):String(e)}function F(e,t){var n;if("function"!=typeof e||!t)return;const o=e(t.nodeId),i=null==o||null===(n=o.manifestRef)||void 0===n?void 0:n.encodeProfile;return"string"==typeof i&&i?i:void 0}function B(e,t){if("function"!=typeof e||!t)return;const n=e(t.nodeId);return!0===(null==n?void 0:n.imageFallbackActive)?"image":void 0}function _(e,t){const n=function(e){if(!e)return;const t=[[e.displayWidth,e.displayHeight],[e.codedWidth,e.codedHeight],[e.videoWidth,e.videoHeight],[e.naturalWidth,e.naturalHeight],[e.width,e.height]];for(let e=0;e<t.length;e+=1){const[n,o]=t[e],i=Number(n),r=Number(o);if(Number.isFinite(i)&&Number.isFinite(r)&&i>0&&r>0)return{width:i,height:r}}}(null==t?void 0:t.frame)||{},o=Number.isFinite(null==t?void 0:t.width)?t.width:n.width,i=Number.isFinite(null==t?void 0:t.height)?t.height:n.height,r=null===(l=M(e,t))||void 0===l?void 0:l.chosenRepresentation;var l;if(!r)return p(o)&&p(i)?{width:o,height:i}:null;const s=r.width||r.codedWidth||o,a=r.height||r.codedHeight||i;return{id:r.id,codecs:r.codecs,mime:r.mime,bandwidth:r.bandwidth,width:s,height:a}}function P(e){const t=Number(e);if(Number.isFinite(t)&&!(t<=0))return t/1e3}function O(e,t){const n=Number(null==e?void 0:e.bandwidthKbps),o=Number(null==t?void 0:t.bandwidthKbps),i=Number.isFinite(n)&&n>0,r=Number.isFinite(o)&&o>0;if(i&&r&&n!==o)return n-o;if(i!==r)return i?-1:1;const l=(null==e?void 0:e.id)||"",s=(null==t?void 0:t.id)||"";return l===s?0:l<s?-1:1}function W(e,t,n,o){const i=[];if(Array.isArray(null==o?void 0:o.availableRepresentations)&&o.availableRepresentations.forEach((e=>{const t="string"==typeof(null==e?void 0:e.id)&&e.id?e.id:void 0;if(!t)return;const n=Number(null==e?void 0:e.bandwidthKbps);i.push({id:t,bandwidthKbps:Number.isFinite(n)&&n>0?n:void 0})})),!i.length){const n=M(e,t);(Array.isArray(null==n?void 0:n.representations)?n.representations:[]).forEach((e=>{const t="string"==typeof(null==e?void 0:e.id)&&e.id?e.id:void 0;t&&i.push({id:t,bandwidthKbps:P(null==e?void 0:e.bandwidth)})}))}!i.length&&(null==n?void 0:n.id)&&i.push({id:n.id,bandwidthKbps:P(n.bandwidth)});const r=new Map;return i.forEach((e=>{const t=null==e?void 0:e.id;t&&!r.has(t)&&r.set(t,e)})),Array.from(r.values()).sort(O)}const q=1024,H=1048576,V=1073741824;function j(e){return p(e)?e>=1e3?`${h(e/1e3,1)} Mbps`:`${h(e,1)} kbps`:"n/a"}function K({downloadSpeed:e,downloadEvents:t}={}){const n=r.document,o="function"==typeof(null==e?void 0:e.getKbps)?e.getKbps():void 0;let i=0;const{metricsRow:l,setInitial:s,setTotal:a}=function(e){const t=e.createElement("div");t.style.display="grid",t.style.gridTemplateColumns="1fr 1fr",t.style.gap="8px",t.style.font=u;const n=e.createElement("div"),o=e.createElement("div");return t.appendChild(n),t.appendChild(o),{metricsRow:t,setInitial:e=>{n.textContent=`initial=${j(e)}`},setTotal:e=>{var t;o.textContent="total="+(p(t=e)?t<q?`${Math.round(t)} B`:t<H?`${h(t/q,1)} KB`:t<V?`${h(t/H,2)} MB`:`${h(t/V,2)} GB`:"n/a")}}}(n),{graphWrap:d,speedGraph:f}=function(e,t){const n=e.createElement("div");n.style.marginTop="10px";const o=e.createElement("div");o.textContent="download speed",o.style.font=c,o.style.opacity="0.9";const i=p(t)&&t>0?t:1,r=new A({autoScale:!0,maxValue:i,formatValue:j});return n.appendChild(o),n.appendChild(r.element),{graphWrap:n,speedGraph:r}}(n,o);s(o),a(i);const y=e=>{const t=Number(null==e?void 0:e.kbps);Number.isFinite(t)&&f.push(t,null!=r&&r.performance&&"function"==typeof r.performance.now?r.performance.now():Date.now())},m=e=>{const t=Number(null==e?void 0:e.bytes);Number.isFinite(t)&&(i+=t,a(i))};return e&&"function"==typeof e.on&&e.on("download:speed",y),t&&"function"==typeof t.on&&t.on("download:sample",m),{id:"downloads",title:"Downloads",render:e=>{e.appendChild(l),e.appendChild(d)},dispose:()=>{e&&"function"==typeof e.off&&e.off("download:speed",y),t&&"function"==typeof t.off&&t.off("download:sample",m),f.dispose()}}}function U(e){return p(e)?h(e,3):"n/a"}function G(){return null!=r&&r.performance&&"function"==typeof r.performance.now?r.performance.now():Date.now()}const z=18,Y="rgba(83,170,255,0.9)",Q={pending:"rgba(255,255,255,0.55)",resolving:"rgba(255,200,87,0.9)",ready:"rgba(102,214,141,0.9)",failed:"rgba(255,92,92,0.9)",missing:"rgba(160,160,160,0.9)"};function X(e,t){if(f(null==e?void 0:e.nodeDurationOverride))return e.nodeDurationOverride;if("function"!=typeof t)return null;const n=t(null==e?void 0:e.nodeId),o=null==n?void 0:n.duration;return f(o)?o:null}function J(e){const t=Number(null==e?void 0:e.duration);return t===Number.POSITIVE_INFINITY?Number.POSITIVE_INFINITY:f(t)?t:null}function Z(e){return e===Number.POSITIVE_INFINITY}function ee(e){return p(e)?String(e):""}function te(e=[],t=[],n){return`${function(e=[],t){return Array.isArray(e)&&e.length?e.map((e=>e?["string"==typeof e.placementId?e.placementId:"","string"==typeof e.nodeId?e.nodeId:"",ee(e.offset),ee(X(e,t)),!0===e.offsetPending?"1":"0",ee(e.nodeOffsetOverride),ee(e.nodeDurationOverride)].join("|"):"null")).join(";"):""}(e,n)}::${function(e=[]){return Array.isArray(e)&&e.length?e.map((e=>{if(!e)return"null";const t="string"==typeof e.renderPlacementId?e.renderPlacementId:"",n="string"==typeof e.type?e.type:"",o=ee(e.offset),i=J(e);return[t,n,o,i===Number.POSITIVE_INFINITY?"inf":ee(i),!0===e.offsetPending?"1":"0"].join("|")})).join(";"):""}(t)}`}function ne(e=[],t){if(!Array.isArray(e)||!e.length)return!1;for(let n=0;n<e.length;n+=1){const o=e[n];if(!o||!0===o.offsetPending)continue;if(f(o.nodeDurationOverride))continue;if("function"!=typeof t)return!0;const i=t(o.nodeId);if(!f(null==i?void 0:i.duration))return!0}return!1}function oe(e=[]){return!(!Array.isArray(e)||!e.length)&&e.some((e=>!0===(null==e?void 0:e.offsetPending)))}function ie(e=[],t=[]){return oe(e)||oe(t)}function re(e,t=[],n){if(!e||!Array.isArray(t)||!t.length)return;const o=e.querySelector('[data-segment-boundary="true"]');t.forEach((t=>{if(!t||!p(t.startRatio)||!p(t.endRatio))return;const i=y(t.startRatio),l=y(t.endRatio);if(!(l>i))return;const s=r.document.createElement("div");s.dataset.bufferedSegment="true",s.style.position="absolute",s.style.top="0",s.style.bottom="0",s.style.left=100*i+"%",s.style.width=100*(l-i)+"%",s.style.background=n,s.style.opacity="0.8",s.style.pointerEvents="none",s.style.zIndex="0",o?e.insertBefore(s,o):e.appendChild(s)}))}function le(e,t){if(!e)return;const n=e.querySelector('[data-active-highlight="true"]');if(!t)return void(n&&n.remove());if(n)return;const o=r.document.createElement("div");o.dataset.activeHighlight="true",o.style.position="absolute",o.style.top="0",o.style.bottom="0",o.style.left="0",o.style.right="0",o.style.border="1px solid rgba(255,255,255,0.9)",o.style.borderRadius="4px",o.style.pointerEvents="none",o.style.zIndex="1",e.appendChild(o)}function se({timeline:e,getNode:t}={}){const n=null==r?void 0:r.document;if(!n||"function"!=typeof n.createElement)throw new Error("Debug overlay timeline tab requires document.createElement.");const o=n.createElement("div");o.style.display="flex",o.style.flexDirection="column",o.style.gap="8px",o.style.position="relative";const i=n.createElement("div");i.style.position="absolute",i.style.display="none",i.style.pointerEvents="none",i.style.zIndex="2",i.style.padding="4px 6px",i.style.borderRadius="6px",i.style.background="rgba(0,0,0,0.8)",i.style.border="1px solid rgba(255,255,255,0.2)",i.style.color="#fff",i.style.font=c,i.style.maxWidth="220px",i.style.whiteSpace="nowrap",i.style.overflow="hidden",i.style.textOverflow="ellipsis";const l=n.createElement("div");l.dataset.timelineHoverDetails="true",l.style.position="absolute",l.style.display="none",l.style.pointerEvents="none",l.style.zIndex="3",l.style.padding="6px 8px",l.style.borderRadius="8px",l.style.background="rgba(0,0,0,0.85)",l.style.border="1px solid rgba(255,255,255,0.25)",l.style.color="#fff",l.style.font=c,l.style.maxWidth="260px",l.style.flexDirection="column",l.style.gap="6px";const s=n.createElement("div");s.style.font=u,s.style.opacity="0.95";const a=n.createElement("div");a.style.font=c,a.style.opacity="0.7",a.style.textTransform="uppercase",a.style.marginTop="4px";const d=n.createElement("div");d.style.display="flex",d.style.flexDirection="column",d.style.gap="4px",l.appendChild(s),l.appendChild(a),l.appendChild(d);const m=n.createElement("div");m.style.display="flex",m.style.justifyContent="space-between",m.style.alignItems="center";const v=n.createElement("div");v.style.display="flex",v.style.alignItems="baseline",v.style.gap="10px";const g=n.createElement("div");g.style.font=u,g.style.opacity="0.9";const b=n.createElement("div");b.style.font=c,b.style.opacity="0.65",v.appendChild(g),v.appendChild(b);const E=n.createElement("label");E.style.display="inline-flex",E.style.alignItems="center",E.style.gap="6px",E.style.font=c,E.style.cursor="pointer";const w=n.createElement("input");w.type="checkbox",w.checked=!1;const x=n.createElement("span");x.textContent="Click to seek",E.appendChild(w),E.appendChild(x),m.appendChild(v),m.appendChild(E);const I=n.createElement("div");function C(e,t,{alignTop:o=!1}={}){const i=n.createElement("div");i.style.display="grid",i.style.gridTemplateColumns="64px 1fr",i.style.alignItems=o?"start":"center",i.style.gap="8px";const r=n.createElement("div");r.textContent=e,r.style.font=c,r.style.opacity="0.8",o&&(r.style.paddingTop="2px");const l=n.createElement("div");l.style.position="relative",l.style.borderRadius="6px",l.style.background="rgba(255,255,255,0.08)",l.style.overflow="hidden",t&&(l.dataset.timelineLane=t);const s=n.createElement("div");return s.style.position="absolute",s.style.top="0",s.style.bottom="0",s.style.width="2px",s.style.background="rgba(255,255,255,0.8)",l.appendChild(s),i.appendChild(r),i.appendChild(l),I.appendChild(i),{track:l,indicator:s}}I.style.display="grid",I.style.gridTemplateRows="auto auto",I.style.gap="8px",o.appendChild(m),o.appendChild(I),o.appendChild(i),o.appendChild(l);const A=C("Nodes","nodes",{alignTop:!0}),N=C("Render","render");let T=[],k=[],R=0,M=!1,D=1;const S=new Map,$=new Map,L=new Map,F=new Map;let B=new Set,_=null,P=!1,O="",W=!1,q=0,H=0,V=null;function j(e){for(;e.childNodes.length>1;)e.removeChild(e.lastChild)}function K(){V&&(clearTimeout(V),V=null)}function U(){return!!W||!!e&&(Array.isArray(e.placements)||Array.isArray(e.renderPlacements))}function G(){if(!e)return!1;const t=Array.isArray(e.placements),n=Array.isArray(e.renderPlacements);if(!t&&!n)return!1;const o=t?e.placements:[],i=n?e.renderPlacements:[];return(o.length!==q||i.length!==H)&&(be(o,i),!0)}function ee(){if(!W)return!1;const e=te(T,k,t);return e!==O&&(O=e,he(),ge(),!0)}function oe(){U()?V=function({shouldSchedule:e,isScheduled:t,intervalMs:n,onTick:o}){return t?null:setTimeout(o,n)}({shouldSchedule:!0,isScheduled:!!V,intervalMs:W?100:250,onTick:()=>{V=null,U()&&(G()||ee()||oe())}}):K()}function se(e,t){const n=t>0?R/t:0;e.style.left=100*y(n)+"%",e.style.transform="translateX(-1px)"}function ae(){i.style.display="none"}function de(e,t){if(!e)return void ae();i.textContent=e,i.style.display="block";const n=o.getBoundingClientRect(),r=i.getBoundingClientRect(),l=((null==t?void 0:t.clientX)||0)-n.left+12,s=((null==t?void 0:t.clientY)||0)-n.top+12,a=n.width-r.width-8,d=n.height-r.height-8,c=Math.max(8,Math.min(l,a)),u=Math.max(8,Math.min(s,d));i.style.left=`${c}px`,i.style.top=`${u}px`}function ce(){l.style.display="none"}function ue(e,i){const r="function"==typeof t&&e?t(e):null,c=Array.isArray(null==r?void 0:r.children)?r.children:[];if(!c.length)return void ce();if(s.textContent=e,a.textContent="children",function(){for(;d.firstChild;)d.removeChild(d.firstChild)}(),c.forEach((e=>{e&&e.nodeId&&d.appendChild(function(e){const o=n.createElement("div");o.style.display="grid",o.style.gridTemplateColumns="10px 1fr auto auto",o.style.alignItems="center",o.style.gap="6px";const i="string"==typeof(null==e?void 0:e.nodeId)?e.nodeId:"",r=f(null==e?void 0:e.weight)?e.weight:1,l=function(e){if(!e||"function"!=typeof t)return"missing";const n=t(e);if(!n)return"missing";const o="string"==typeof n.state?n.state.trim().toLowerCase():"";return"pending"===o||"resolving"===o||"ready"===o||"failed"===o?o:"pending"}(i);o.dataset.childId=i,o.dataset.childStatus=l;const s=n.createElement("span");s.dataset.statusIndicator=l,s.style.width="8px",s.style.height="8px",s.style.borderRadius="999px",s.style.background=Q[l]||Q.pending,s.style.display="inline-block";const a=n.createElement("span");a.textContent=i||"unknown",a.style.overflow="hidden",a.style.textOverflow="ellipsis",a.style.whiteSpace="nowrap";const d=n.createElement("span");d.textContent=`w=${h(r,0)}`,d.style.opacity="0.8";const c=n.createElement("span");return c.textContent=l,c.style.opacity="0.75",o.appendChild(s),o.appendChild(a),o.appendChild(d),o.appendChild(c),o}(e))})),!d.childNodes.length)return void ce();l.style.display="flex";const u=o.getBoundingClientRect(),p=l.getBoundingClientRect(),y=((null==i?void 0:i.clientX)||0)-u.left+12,m=((null==i?void 0:i.clientY)||0)-u.top+12,v=u.width-p.width-8,g=u.height-p.height-8,b=Math.max(8,Math.min(y,v)),E=Math.max(8,Math.min(m,g));l.style.left=`${b}px`,l.style.top=`${E}px`}function pe(){const t=R;if(e&&"function"==typeof e.getPlacementsActiveAtTime){const n=e.getPlacementsActiveAtTime(t),o=new Set(n.map((e=>null==e?void 0:e.placementId)).filter((e=>"string"==typeof e&&e.length)));B.forEach((e=>{o.has(e)||le(L.get(e),!1)})),o.forEach((e=>{B.has(e)||le(L.get(e),!0)})),B=o}else A.track.querySelectorAll('[data-timeline-item="nodes"]').forEach((e=>{const n="true"===e.dataset.hasDuration,o=Number(e.dataset.start),i=Number(e.dataset.end);le(e,n&&p(t)&&t>=o&&t<i)}));if(e&&"function"==typeof e.getActiveRenderPlacement){const n=e.getActiveRenderPlacement(t),o=null==n?void 0:n.renderPlacementId;_&&_!==o&&le(F.get(_),!1),o&&_!==o&&le(F.get(o),!0),_=o||null}else N.track.querySelectorAll('[data-timeline-item="render"]').forEach((e=>{const n="true"===e.dataset.hasDuration,o=Number(e.dataset.start),i=Number(e.dataset.end);le(e,n&&p(t)&&t>=o&&t<i)}))}function fe(e){const n=X(e,t);if(!f(n)||"function"!=typeof t)return{boundaries:[],buffered:[]};const o=t(null==e?void 0:e.nodeId),i=function(e){const t=Array.isArray(null==e?void 0:e.tracks)?e.tracks:[];if(!t.length)return null;if(null!=e&&e.mainTrackId){const n=t.find((t=>(null==t?void 0:t.id)===e.mainTrackId));if(n)return n}return t.find((e=>Array.isArray(null==e?void 0:e.segments)&&e.segments.length))||null}(o);if(!i)return{boundaries:[],buffered:[]};const r=e=>{if(!e)return 0;const t=Number(null==e?void 0:e.bufferedRatio);if(Number.isFinite(t))return y(t);const n=Number(null==e?void 0:e.retainedByteLength);if(!f(n))return 0;const o=null==e?void 0:e.chosenRepresentation,i=f(null==o?void 0:o.sizeBytes)?o.sizeBytes:null;return f(i)?y(n/i):1},l=Array.isArray(i.segments)?i.segments:[],s=p(null==i?void 0:i.offset)?i.offset:0,a=p(null==e?void 0:e.nodeOffsetOverride)?e.nodeOffsetOverride:0;if(!l.length){const e=null==o?void 0:o.buffered,t=p(null==e?void 0:e.start)?e.start-a:0,i=p(null==e?void 0:e.end)?e.end-a:0,r=Math.max(0,t),l=Math.min(n,i);return l>r?{boundaries:[],buffered:[{startRatio:r/n,endRatio:l/n}]}:{boundaries:[],buffered:[]}}if("image"===(null==i?void 0:i.type)){const e=l.find((e=>e&&!e.isInit))||l[0],t=e?r(e):0;return t>0?{boundaries:[],buffered:[{startRatio:0,endRatio:y(t)}]}:{boundaries:[],buffered:[]}}return function(e,t,n,o,i){const r=[],l=[];let s=0;return e.forEach((e=>{if(null!=e&&e.isInit)return;p(null==e?void 0:e.offset)&&(s=e.offset);const a=s;if(!p(a))return;const d=p(null==e?void 0:e.duration)?e.duration:0,c=n+a-o,u=n+(a+d)-o;c>0&&c<t&&r.push(c/t);const f="function"==typeof i?i(e):0;if(d>0&&u>0&&c<t&&f>0){const e=Math.max(0,c),n=Math.min(t,u);if(n>e){const o=e+(n-e)*y(f);l.push({startRatio:e/t,endRatio:o/t})}}d>0&&(p(null==e?void 0:e.offset)?s=e.offset+d:s+=d)})),{boundaries:r,buffered:l}}(l,n,s,a,r)}function ye(){const e=Array.isArray(T)?T:[],t=new Map(e.map((e=>[null==e?void 0:e.placementId,e])));for(const[e,n]of L.entries()){if(!e)continue;const o=t.get(e);o&&(n.querySelectorAll('[data-buffered-segment="true"]').forEach((e=>e.remove())),re(n,fe(o).buffered,Y))}}function he(){const e=new Set(T.map((e=>null==e?void 0:e.nodeId)).filter((e=>"string"==typeof e&&e.length)));e.forEach((e=>{if($.has(e))return;const n="function"==typeof t?t(e):null;if(!n||"function"!=typeof n.on)return;const o=e=>function(e={}){if(!e||e.isInit)return;const t=null==e?void 0:e.nodeId,n=null==e?void 0:e.segmentId,o=Number(null==e?void 0:e.loaded),i=Number(null==e?void 0:e.total);if(!t||!n||!p(o))return;const l=`${t}:${n}`,s=S.get(l)||{},a={loaded:Math.max(p(s.loaded)?s.loaded:0,o),total:f(i)?i:s.total};S.set(l,a),function(){if(P)return;P=!0;const e=null==r?void 0:r.requestAnimationFrame;"function"!=typeof e?((null==r?void 0:r.setTimeout)||setTimeout)((()=>{P=!1,ye()}),0):e((()=>{P=!1,ye()}))}()}(e);n.on("segment:chunk",o),$.set(e,{node:n,handler:o})}));for(const[t,n]of $.entries())e.has(t)||(null!=n&&n.node&&"function"==typeof n.node.off&&n.node.off("segment:chunk",n.handler),$.delete(t))}function me({track:e,color:t,start:o,duration:i,startTime:l,durationSeconds:s,segmentRatios:a,bufferedSegments:d,placementId:u,nodeId:h,label:m,rowIndex:v=0,rowHeight:g=18,rowGap:b=0,laneId:E,isClickable:w,isActive:x,tooltip:I,hoverDetailsNodeId:C,showLabel:A,onClick:N}){const T=n.createElement("div");var k,R;R=t,(k=T).style.position="absolute",k.style.borderRadius="4px",k.style.background=R,k.style.opacity="0.9",k.style.font=c,k.style.color="#fff",k.style.display="flex",k.style.alignItems="center",k.style.whiteSpace="nowrap",k.style.overflow="hidden",k.style.textOverflow="ellipsis",function(e,{startRatio:t,durationRatio:n,rowIndex:o=0,rowHeight:i=18,rowGap:r=0}={}){const l=o*(i+r)+2,s=Math.max(1,i-4);e.style.top=`${l}px`,e.style.height=`${s}px`;const a=y(t);if(f(n)){const t=Math.max(0,Math.min(n,1-a));return e.style.left=100*a+"%",e.style.width=100*t+"%",void(e.style.padding="0 4px")}e.style.left=100*a+"%",e.style.width="2px",e.style.padding="0"}(T,{startRatio:o,durationRatio:i,rowIndex:v,rowHeight:g,rowGap:b}),function(e,{laneId:t,label:n,isClickable:o,shouldShowLabel:i,onClick:l}={}){if(t&&(e.dataset.timelineItem=t),i&&n){const t=r.document.createElement("span");t.textContent=n,t.style.position="relative",t.style.zIndex="2",t.style.pointerEvents="none",e.appendChild(t)}o&&(e.style.cursor="pointer"),"function"==typeof l&&e.addEventListener("click",l)}(T,{laneId:E,label:m,isClickable:w,shouldShowLabel:"boolean"==typeof A?A:f(i),onClick:N}),I&&(T.title=I),p(l)&&(T.dataset.start=String(l)),f(s)||Z(s)?(T.dataset.end=String(l+s),T.dataset.hasDuration="true"):(T.dataset.end="",T.dataset.hasDuration="false"),u&&(T.dataset.placementId=u),h&&(T.dataset.nodeId=h),T.style.pointerEvents="auto",re(T,d,Y),function(e,t=[]){e&&Array.isArray(t)&&t.length&&t.forEach((t=>{if(!p(t)||t<=0||t>=1)return;const n=r.document.createElement("div");n.dataset.segmentBoundary="true",n.style.position="absolute",n.style.top="2px",n.style.bottom="2px",n.style.width="1px",n.style.left=100*y(t)+"%",n.style.transform="translateX(-0.5px)",n.style.background="rgba(255,255,255,0.35)",n.style.pointerEvents="none",n.style.zIndex="1",e.appendChild(n)}))}(T,a),le(T,x),I&&(T.addEventListener("mouseenter",(e=>de(I,e))),T.addEventListener("mousemove",(e=>de(I,e))),T.addEventListener("mouseleave",ae)),C&&(T.addEventListener("mouseenter",(e=>ue(C,e))),T.addEventListener("mousemove",(e=>ue(C,e))),T.addEventListener("mouseleave",ce)),e.appendChild(T),"nodes"===E&&u?L.set(u,T):"render"===E&&u&&F.set(u,T)}function ve(){let e=0;const n=Array.isArray(T)?T:[],o=Array.isArray(k)?k.filter((e=>!0!==(null==e?void 0:e.offsetPending))):[];return n.forEach((n=>{if(!0===(null==n?void 0:n.offsetPending))return;const o=p(null==n?void 0:n.offset)?n.offset:void 0;if(!p(o))return;const i=X(n,t);e=f(i)?Math.max(e,o+i):Math.max(e,o)})),o.forEach((t=>{const n=p(null==t?void 0:t.offset)?t.offset:0,o=J(t);e=f(o)?Math.max(e,n+o):Math.max(e,n)})),f(e)?e:1}function ge(){const n=ve();D=n,g.textContent=`t=${h(R)}s`,b.textContent=`range=0-${h(n)}s`,ae(),ce(),j(A.track),j(N.track),L.clear(),F.clear(),B=new Set,_=null,P=!1;const o=Array.isArray(T)?T:[],i=Array.isArray(k)?k:[],l=function(n){const o=(Array.isArray(n)?n.slice():[]).map((e=>{if(!0===(null==e?void 0:e.offsetPending))return null;const n=p(null==e?void 0:e.offset)?e.offset:void 0;if(!p(n))return null;const o=X(e,t);return{placement:e,offset:n,duration:o,end:f(o)?n+o:n,rowIndex:0}})).filter(Boolean).sort(((e,t)=>{var n,o,i,r;const l=e.offset-t.offset;if(0!==l)return l;const s="string"==typeof(null===(n=e.placement)||void 0===n?void 0:n.nodeId)?e.placement.nodeId:"",a="string"==typeof(null===(o=t.placement)||void 0===o?void 0:o.nodeId)?t.placement.nodeId:"";if(s!==a)return s.localeCompare(a);const d="string"==typeof(null===(i=e.placement)||void 0===i?void 0:i.placementId)?e.placement.placementId:"",c="string"==typeof(null===(r=t.placement)||void 0===r?void 0:r.placementId)?t.placement.placementId:"";return d.localeCompare(c)})),i=[],r=function(e,t){const n=Number(null==e||null===(t=e.settings)||void 0===t?void 0:t.snapToFps);return!Number.isFinite(n)||n<=0?0:.5/n}(e);return o.forEach((e=>{const t=e.offset,n=p(e.end)?e.end:t;let o=-1;for(let e=0;e<i.length;e+=1)if(i[e]<=t+r){o=e;break}-1===o?(o=i.length,i.push(n)):i[o]=Math.max(i[o],n),e.rowIndex=o})),{items:o,rowCount:Math.max(1,i.length)}}(o);var s;!function(e){const t=e.rowCount*z+4*(e.rowCount-1);A.track.style.height=`${t}px`,N.track.style.height="18px",A.track.style.cursor=M?"pointer":"default",A.track.style.pointerEvents="auto",N.track.style.pointerEvents="auto"}(l),s=n,l.items.forEach((e=>{const t=e.placement,n=e.offset,o=e.duration,i=(null==t?void 0:t.nodeId)||(null==t?void 0:t.placementId)||"node",r=!!p(R)&&R>=n&&(!f(o)||R<n+o),l=fe(t);me({track:A.track,color:"rgba(255,255,255,0.16)",start:y(n/s),duration:f(o)?y(o/s):null,startTime:n,durationSeconds:o,segmentRatios:l.boundaries,bufferedSegments:l.buffered,placementId:null==t?void 0:t.placementId,nodeId:null==t?void 0:t.nodeId,label:i,rowIndex:e.rowIndex,rowHeight:z,rowGap:4,laneId:"nodes",isClickable:M,isActive:r,tooltip:(null==t?void 0:t.nodeId)||(null==t?void 0:t.placementId),hoverDetailsNodeId:null==t?void 0:t.nodeId})})),function(e,t){e.forEach((e=>{const n=p(null==e?void 0:e.offset)?e.offset:void 0;if(!p(n))return;const o=J(e),i=Z(o),l=(null==e?void 0:e.type)||(null==e?void 0:e.renderPlacementId)||"render",s=function(e){const t="string"==typeof e?e.trim().toLowerCase():"";return"switch"===t||"switching"===t||"switchingrendernode"===t}(null==e?void 0:e.type),a=s?()=>{"function"==typeof(null==r?void 0:r.switchTo)&&r.switchTo("next")}:void 0;let d=!1;p(R)&&(i?d=R>=n:f(o)&&(d=R>=n&&R<n+o));const c=i&&f(t)?y((t-n)/t):f(o)?y(o/t):null;me({track:N.track,color:"rgba(248,162,62,0.9)",start:y(n/t),duration:c,startTime:n,durationSeconds:o,label:l,placementId:null==e?void 0:e.renderPlacementId,rowIndex:0,rowHeight:z,rowGap:0,laneId:"render",isClickable:!!s,isActive:d,tooltip:(null==e?void 0:e.type)||(null==e?void 0:e.renderPlacementId),showLabel:f(o)||i,onClick:a})}))}(i,n),se(A.indicator,n),se(N.indicator,n),pe(),ye(),W=ie(T,k)||ne(T,t),O=W?te(T,k,t):"",q=Array.isArray(T)?T.length:0,H=Array.isArray(k)?k.length:0,oe()}function be(e,n){T=Array.isArray(e)?e.slice():[],k=Array.isArray(n)?n.slice():[],W=ie(T,k)||ne(T,t),he(),ge()}return w.addEventListener("change",(()=>{M=w.checked,ge()})),A.track.addEventListener("click",(t=>{!function(t,n,o){if(!M||!e)return;if(!f(n)||!o)return;const i="function"==typeof o.getBoundingClientRect?o.getBoundingClientRect():null,r=f(null==i?void 0:i.width)?i.width:o.clientWidth;if(!f(r))return;const l=p(null==i?void 0:i.left)?i.left:0,s=y(((p(null==t?void 0:t.clientX)?t.clientX:0)-l)/r)*n;p(s)&&(e.currentTime=s)}(t,ve(),A.track)})),{id:"timeline",title:"Timeline",render:e=>{e.appendChild(o),ge()},updatePlacements:be,updateTime:function(e){if(R=p(e)?e:R,G())return;if(W&&ee())return;const t=D;p(t)&&(g.textContent=`t=${h(R)}s`,b.textContent=`range=0-${h(t)}s`,se(A.indicator,t),se(N.indicator,t),pe())},refresh:()=>ge(),dispose:()=>{K();for(const e of $.values())(null==e?void 0:e.node)&&"function"==typeof e.node.off&&e.node.off("segment:chunk",e.handler);$.clear(),S.clear()}}}const ae=1024,de=1048576,ce=1073741824;function ue(e){return p(e)?e<ae?`${Math.round(e)} B`:e<de?`${h(e/ae,1)} KB`:e<ce?`${h(e/de,2)} MB`:`${h(e/ce,2)} GB`:"n/a"}const pe="ekoplayer-debug-overlay";var fe=new WeakMap,ye=new WeakMap,he=new WeakMap,me=new WeakMap,ve=new WeakSet;class ge{constructor({tabBarEl:o,contentEl:i}){e(this,ve),t(this,fe,[]),t(this,ye,void 0),t(this,he,void 0),t(this,me,void 0),n(he,this,o),n(me,this,i)}registerTab(e){e&&"string"==typeof e.id&&"string"==typeof e.title&&"function"==typeof e.render&&(o(fe,this).some((t=>t.id===e.id))||(o(fe,this).push(e),i(ve,this,be).call(this),o(ye,this)||this.selectTab(e.id)))}selectTab(e){o(fe,this).find((t=>t.id===e))&&(n(ye,this,e),i(ve,this,be).call(this),i(ve,this,Ee).call(this))}dispose(){o(he,this)&&(o(he,this).innerHTML=""),o(me,this)&&(o(me,this).innerHTML=""),n(fe,this,[]),n(he,this,null),n(me,this,null)}}function be(){const e=o(he,this);e&&(e.innerHTML="",o(fe,this).forEach((t=>{const n=r.document.createElement("button");n.type="button",n.textContent=t.title,n.style.cursor="pointer",n.style.padding="6px 10px",n.style.borderRadius="6px",n.style.border="1px solid rgba(255,255,255,0.2)",n.style.background=t.id===o(ye,this)?"rgba(255,255,255,0.18)":"rgba(0,0,0,0.2)",n.style.color="#fff",n.style.font=u,n.addEventListener("click",(()=>this.selectTab(t.id))),e.appendChild(n)})))}function Ee(){const e=o(me,this);if(!e)return;e.innerHTML="";const t=o(fe,this).find((e=>e.id===o(ye,this)));t&&t.render(e)}function we({mountElement:e,canvasElement:t,timeline:n,getNode:o,listNodes:i,downloadSpeed:l,downloadEvents:d,qoe:f,qoeEvents:y,options:v={},playbackStartedAtMs:g,playerVersion:b}={}){if(!e)throw new Error("Debug overlay requires mountElement.");if(!n||"function"!=typeof n.on)throw new Error("Debug overlay requires a Timeline with .on/.off.");!function(e){if(!e||!e.style)return;const t=null==r?void 0:r.window,n=t&&"function"==typeof t.getComputedStyle?t.getComputedStyle(e):null,o=n?n.position:e.style.position;o&&"static"!==o||(e.style.position="relative")}(e);const E=r.document.getElementById(pe);E&&E.parentNode&&E.parentNode.removeChild(E);const w=function({mountElement:e,playerVersion:t}){const n=null==r?void 0:r.document;if(!n||"function"!=typeof n.createElement)throw new Error("Debug overlay requires document.createElement.");const o=n.createElement("div");o.id=pe,o.style.position="absolute",o.style.inset="0",o.style.zIndex="999999",o.style.pointerEvents="none";const i=n.createElement("div");i.style.position="absolute",i.style.top="8px",i.style.left="8px",i.style.width="460px",i.style.maxWidth="calc(100% - 16px)",i.style.background="rgba(0,0,0,0.65)",i.style.border="1px solid rgba(255,255,255,0.18)",i.style.borderRadius="10px",i.style.padding="10px",i.style.color="#fff",i.style.pointerEvents="auto",i.style.backdropFilter="blur(6px)";const l=n.createElement("div");l.style.display="flex",l.style.justifyContent="space-between",l.style.alignItems="center",l.style.gap="10px";const s=n.createElement("div");s.textContent="EkoPlayer Debug",s.style.font="600 13px ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial";const a=n.createElement("button");a.type="button",a.textContent="Hide",a.style.cursor="pointer",a.style.padding="6px 10px",a.style.borderRadius="8px",a.style.border="1px solid rgba(255,255,255,0.2)",a.style.background="rgba(0,0,0,0.2)",a.style.color="#fff",l.appendChild(s),l.appendChild(a);const d=n.createElement("div");d.style.display="flex",d.style.gap="8px",d.style.marginTop="10px";const u=n.createElement("div");u.style.marginTop="10px";const p=n.createElement("div");p.style.marginTop="10px",p.style.font=c,p.style.display="flex",p.style.justifyContent="space-between",p.style.alignItems="center",p.style.gap="10px";const f=n.createElement("div");f.style.color="rgba(140, 224, 255, 0.9)",f.textContent="Playback started @ --";const y=n.createElement("div");y.style.opacity="0.7",y.style.marginLeft="auto",y.textContent=t?`version ${t}`:"version n/a",p.appendChild(f),p.appendChild(y);const h=n.createElement("button");return h.type="button",h.textContent="Debug",h.style.position="absolute",h.style.top="8px",h.style.left="8px",h.style.cursor="pointer",h.style.padding="6px 10px",h.style.borderRadius="10px",h.style.border="1px solid rgba(255,255,255,0.25)",h.style.background="rgba(0,0,0,0.55)",h.style.color="#fff",h.style.pointerEvents="auto",h.style.display="none",i.appendChild(l),i.appendChild(d),i.appendChild(u),i.appendChild(p),o.appendChild(i),o.appendChild(h),e.appendChild(o),{overlayRoot:o,panel:i,tabBar:d,content:u,hideBtn:a,showBtn:h,footerPlayback:f}}({mountElement:e,playerVersion:b||(null==v?void 0:v.playerVersion)}),x=new ge({tabBarEl:w.tabBar,contentEl:w.content});let I=!0;function C(){I=!1,w.panel.style.display="none",w.showBtn.style.display="inline-block"}function N(){I=!0,w.panel.style.display="block",w.showBtn.style.display="none"}w.hideBtn.addEventListener("click",C),w.showBtn.addEventListener("click",N);const T=se({timeline:n,getNode:o}),M=function({getNode:e}){const t=r.document,n=t.createElement("pre");n.style.margin="0",n.style.whiteSpace="pre-wrap",n.style.font=u,n.style.lineHeight="1.35";const o=t.createElement("div");o.style.display="flex",o.style.flexDirection="column",o.style.gap="8px",o.style.marginTop="6px";const i=t.createElement("div");i.style.display="flex",i.style.gap="10px",i.style.marginTop="10px",i.style.alignItems="center",i.style.flexWrap="wrap";const l=new A({maxValue:60}),s=new A({maxValue:60}),a=t.createElement("div"),d=t.createElement("div");d.textContent="browserfps",d.style.font=c,d.style.opacity="0.9",a.appendChild(d),a.appendChild(l.element);const p=t.createElement("div"),f=t.createElement("div");return f.textContent="fps",f.style.font=d.style.font,f.style.opacity="0.9",p.appendChild(f),p.appendChild(s.element),i.appendChild(a),i.appendChild(p),{id:"frames",title:"Frames",render:e=>{e.appendChild(n),e.appendChild(o),e.appendChild(i)},pushBrowserFps:(e,t)=>l.push(e,t),pushVisualFps:(e,t)=>s.push(e,t),updateInfo:function({time:i,entries:r}){const l=Array.isArray(r)?r.slice().sort(k):[];if(!l.length)return n.textContent="",void(o.innerHTML="");n.textContent=`t=${L(i)}s  tracks=${l.length}`,o.innerHTML="";for(let n=0;n<l.length;n+=1){const i=l[n],r=_(e,i),s=(null==r?void 0:r.id)||"n/a",a=(null==r?void 0:r.codecs)||(null==r?void 0:r.mime)||"n/a",d=$(null==r?void 0:r.bandwidth),c=m(null==r?void 0:r.width,null==r?void 0:r.height),p=F(e,i)||"n/a",f=B(e,i),y=f?`  fallback=${f}`:"",h=D(e,i),v=(null==h?void 0:h.strategy)||"n/a",g=(null==h?void 0:h.decisionReason)||"n/a",b=S(null==h?void 0:h.measuredDownloadSpeedKbps),E=S(null==h?void 0:h.safeBandwidthKbps),w=t.createElement("div");w.style.display="flex",w.style.flexDirection="column",w.style.gap="2px";const x=t.createElement("pre");x.style.margin="0",x.style.whiteSpace="pre-wrap",x.style.font=u,x.style.lineHeight="1.35",x.textContent=[`${(null==i?void 0:i.nodeId)||"?"}  ${(null==i?void 0:i.trackId)||"?"}  ${(null==i?void 0:i.segmentId)||"?"}  pts=${L(null==i?void 0:i.presentationTime)}s`,`rep=${s}  encodeProfile=${p}${y}  res=${c}  codec=${a}  repBW=${d}`,`abr=strategy:${v} reason:${g} measuredBW:${b} safeBW:${E}`].join("\n"),w.appendChild(x);const I=(null==h?void 0:h.selectedRepresentationId)||(null==r?void 0:r.id),C=W(e,i,r,h);if(C.length){const e=t.createElement("div");e.style.display="flex",e.style.alignItems="center",e.dataset.abrLadderRow="true",e.dataset.trackId=(null==i?void 0:i.trackId)||"",e.dataset.segmentId=(null==i?void 0:i.segmentId)||"";const n=t.createElement("div");n.style.display="inline-flex",n.style.alignItems="center",n.style.gap="2px",n.dataset.abrLadder="true",C.forEach((e=>{const o=t.createElement("span"),i=!!I&&e.id===I;o.dataset.abrLadderBlock="true",o.dataset.repId=e.id||"",o.dataset.selected=i?"true":"false",o.style.display="inline-block",o.style.width="10px",o.style.height="8px",o.style.borderRadius="2px",o.style.border="1px solid rgba(255,255,255,0.35)",o.style.background=i?"rgba(74, 222, 128, 0.95)":"rgba(156, 163, 175, 0.55)",o.title=`${e.id||"?"} ${S(e.bandwidthKbps)}`,n.appendChild(o)})),e.appendChild(n),w.appendChild(e)}o.appendChild(w)}},dispose:()=>{l.dispose(),s.dispose()}}}({getNode:o}),P=K({downloadSpeed:l,downloadEvents:d}),O=function({qoe:e,qoeEvents:t}={}){const n=null==r?void 0:r.document;if(!n||"function"!=typeof n.createElement)throw new Error("Debug overlay QoE tab requires document.createElement.");const o=n.createElement("pre");o.style.margin="0",o.style.whiteSpace="pre-wrap",o.style.font=u;const{graphWrap:i,graph:l}=function(e){const t=e.createElement("div");t.style.marginTop="10px";const n=e.createElement("div");n.textContent="qoe score",n.style.font=c,n.style.opacity="0.9";const o=new A({maxValue:1,windowMs:3e4,formatValue:e=>U(e)});return t.appendChild(n),t.appendChild(o.element),{graphWrap:t,graph:o}}(n);let s=null;const a=()=>{o.textContent=function(e){if(!e)return"QoE unavailable";const t="string"==typeof e.status?e.status:"n/a";return[`score=${U(e.score)}`,`status=${t}`,`streamQualityScore=${U(e.streamQualityScore)}`,`fpsScore=${U(e.fpsScore)}`,`browserFps=${U(e.browserFps)}`,`waitingSeconds=${U(e.waitingSeconds)}`,`playingSeconds=${U(e.playingSeconds)}`].join("\n")}(e)},d=()=>{if(!e)return;const t=Number(e.score);Number.isFinite(t)&&l.push(t,G())},p=e=>{const t=Number(e);Number.isFinite(t)&&l.push(t,G()),a()},f=()=>{a()};if(a(),d(),t&&"function"==typeof t.on&&(t.on("qoescore",p),t.on("qoestatus",f)),e){const e="function"==typeof(null==r?void 0:r.setInterval)?r.setInterval:setInterval;s=e((()=>{d(),a()}),1e3)}return{id:"qoe",title:"QoE",render:e=>{e.appendChild(o),e.appendChild(i)},dispose:()=>{t&&"function"==typeof t.off&&(t.off("qoescore",p),t.off("qoestatus",f)),s&&(("function"==typeof(null==r?void 0:r.clearInterval)?r.clearInterval:clearInterval)(s),s=null),l.dispose()}}}({qoe:f,qoeEvents:y}),q=function({timeline:e,getNode:t,listNodes:n,options:o}={}){const i=null==r?void 0:r.document;if(!i||"function"!=typeof i.createElement)throw new Error("Debug overlay Memory tab requires document.createElement.");const l=i.createElement("pre");l.style.margin="0",l.style.whiteSpace="pre-wrap",l.style.font=u;const s=i.createElement("div");s.textContent="nodes",s.style.marginTop="10px",s.style.font=c,s.style.opacity="0.9";const a=i.createElement("pre");a.style.margin="6px 0 0 0",a.style.whiteSpace="pre-wrap",a.style.font=u;let d=null;const f=()=>{const i=function({timeline:e,getNode:t,listNodes:n}){const o=[];let i=0;if("function"==typeof n){let e;try{e=n()}catch(t){e=null}if(Array.isArray(e))return e.forEach((e=>{const t=null==e?void 0:e.id;if("string"!=typeof t||!t.length)return;const n=Number(null==e?void 0:e.retainedByteLength);Number.isFinite(n)&&(i+=n,o.push({nodeId:t,bytes:n}))})),o.sort(((e,t)=>t.bytes-e.bytes)),{totalBytes:i,nodes:o,available:!0}}if(!e||"function"!=typeof t)return{totalBytes:0,nodes:[],available:!1};const r=Array.isArray(e.placements)?e.placements:[];return new Set(r.map((e=>null==e?void 0:e.nodeId)).filter((e=>"string"==typeof e&&e.length))).forEach((e=>{const n=t(e),r=Number(null==n?void 0:n.retainedByteLength);Number.isFinite(r)&&(i+=r,o.push({nodeId:e,bytes:r}))})),o.sort(((e,t)=>t.bytes-e.bytes)),{totalBytes:i,nodes:o,available:!0}}({timeline:e,getNode:t,listNodes:n}),r=function({timeline:e}){if(!e||"function"!=typeof e.getDecodedFrameStats)return{totalBytes:0,frames:0,available:!1};try{const t=e.getDecodedFrameStats(),n=Number(null==t?void 0:t.totalBytes),o=Number(null==t?void 0:t.frames);return{totalBytes:Number.isFinite(n)?n:0,frames:Number.isFinite(o)?o:0,available:!1!==(null==t?void 0:t.available)}}catch(e){return{totalBytes:0,frames:0,available:!1}}}({timeline:e}),s=function(e,t,n,o){const i=Number(null!==(n=null==e||null===(o=e.publicOptions)||void 0===o?void 0:o.segmentEvictionMaxRetainedBytes)&&void 0!==n?n:null==e?void 0:e.segmentEvictionMaxRetainedBytes),r=p(i)&&i>=0,l=r?ue(i):"n/a";return{active:r&&p(t)&&t>i,thresholdLabel:l}}(o,i.available?i.totalBytes:NaN),d=s.active?"on":"off",c=r.available?ue(r.totalBytes):"n/a",u=r.available?r.frames:"n/a";if(!i.available)return l.textContent=[`decoded=${c}  decodedFrames=${u}`,`retained=n/a  eviction=${d}  threshold=${s.thresholdLabel}`].join("\n"),void(a.textContent="");if(l.textContent=[`decoded=${c}  decodedFrames=${u}`,[`retained=${ue(i.totalBytes)}`,`nodes=${i.nodes.length}`,`eviction=${d}`,`threshold=${s.thresholdLabel}`].join("  ")].join("\n"),!i.nodes.length)return void(a.textContent="none");const f=i.nodes.slice(0,8).map((e=>`${e.nodeId}: ${ue(e.bytes)}`));a.textContent=f.join("\n")};f();const y="function"==typeof(null==r?void 0:r.setInterval)?r.setInterval:setInterval;return d=y(f,1e3),{id:"memory",title:"Memory",render:e=>{e.appendChild(l),e.appendChild(s),e.appendChild(a)},refresh:f,dispose:()=>{d&&(("function"==typeof(null==r?void 0:r.clearInterval)?r.clearInterval:clearInterval)(d),d=null)}}}({timeline:n,getNode:o,listNodes:i,options:v});x.registerTab(T),x.registerTab(M),x.registerTab(P),x.registerTab(O),x.registerTab(q),x.registerTab(function({options:e}={}){const t=null==r?void 0:r.document;if(!t||"function"!=typeof t.createElement)throw new Error("Debug overlay options tab requires document.createElement.");const n=t.createElement("pre");n.style.margin="0",n.style.font=u,n.style.whiteSpace="pre-wrap",n.style.wordBreak="break-word";const o=null==e?void 0:e.publicOptions,i=o&&"object"==typeof o?Object.keys(o):[];if(i.length){const e=i.map((e=>`${e}=${function(e){if(null===e)return"null";if(void 0===e)return"undefined";const t=typeof e;if("string"===t)return e;if("number"===t||"boolean"===t)return String(e);try{return JSON.stringify(e)}catch(t){return String(e)}}(o[e])}`));n.textContent=e.join("\n")}else n.textContent="publicOptions unavailable";return{id:"options",title:"Options",render:e=>{e.appendChild(n)}}}({options:v}));const H=[],V=[];let j=0,z=0,Y=null,Q=!1,X=0,J=null;function Z(e){const t=Number(e);Number.isFinite(t)&&(t-X<250||(X=t,M.pushBrowserFps(j,t),M.pushVisualFps(z,t)))}r.window&&"function"==typeof r.window.requestAnimationFrame&&(Y=r.window.requestAnimationFrame((function e(t){Q||(j=R(H,t),Z(t),Y=r.window.requestAnimationFrame(e))})));const ee=(e={})=>{if(Q||!I)return;const t=Array.isArray(e.frames)?e.frames:[];if(!t.length)return void(J=null);const n=null!=r&&r.performance&&"function"==typeof r.performance.now?r.performance.now():Date.now(),o=t.map((e=>`${null==e?void 0:e.nodeId}:${null==e?void 0:e.trackId}:${null==e?void 0:e.segmentId}@${null==e?void 0:e.presentationTime}`)).join("|");o!==J&&(z=R(V,n),J=o),M.updateInfo({time:e.time,entries:t}),Z(n)};let te=Number.isFinite(g)?g:void 0;if(Number.isFinite(te)&&w.footerPlayback){const e=te/1e3;w.footerPlayback.textContent=`Playback started @ ${h(e)}s`}const ne=(e={})=>{if(!Q&&void 0===te&&"playing"===(null==e?void 0:e.event)&&(te=s(),w.footerPlayback)){const e=te/1e3;w.footerPlayback.textContent=`Playback started @ ${h(e)}s`}},oe=()=>{const e=Array.isArray(null==n?void 0:n.placements)?n.placements:[],t=Array.isArray(null==n?void 0:n.renderPlacements)?n.renderPlacements:[];T.updatePlacements(e,t)},ie=(e={})=>{if(Q)return;const t=Number.isFinite(null==e?void 0:e.time)?e.time:null==n?void 0:n.currentTime;T.updateTime(t),q&&"function"==typeof q.refresh&&q.refresh()},re=()=>{Q||oe()},le=()=>{Q||oe()},ae=null==n?void 0:n.trackBuffers,de=()=>{Q||("function"==typeof T.refresh?T.refresh():oe(),q&&"function"==typeof q.refresh&&q.refresh())};return n.on(a.VISUAL_FRAMES_AVAILABLE,ee),n.on(a.TIMELINE_TIME_UPDATE,ie),n.on(a.PLACEMENT_ADDED,re),n.on(a.RENDER_PLACEMENT_ADDED,le),n.on(a.TIMELINE_PLAYER_STATE,ne),ae&&"function"==typeof ae.on&&ae.on("track:bufferupdate",de),oe(),T.updateTime(null==n?void 0:n.currentTime),{show:N,hide:C,dispose:function(){Q||(Q=!0,Y&&r.window&&"function"==typeof r.window.cancelAnimationFrame&&r.window.cancelAnimationFrame(Y),Y=null,n&&"function"==typeof n.off&&(n.off(a.VISUAL_FRAMES_AVAILABLE,ee),n.off(a.TIMELINE_TIME_UPDATE,ie),n.off(a.PLACEMENT_ADDED,re),n.off(a.RENDER_PLACEMENT_ADDED,le),n.off(a.TIMELINE_PLAYER_STATE,ne)),ae&&"function"==typeof ae.off&&ae.off("track:bufferupdate",de),M&&"function"==typeof M.dispose&&M.dispose(),T&&"function"==typeof T.dispose&&T.dispose(),P&&"function"==typeof P.dispose&&P.dispose(),O&&"function"==typeof O.dispose&&O.dispose(),q&&"function"==typeof q.dispose&&q.dispose(),x.dispose(),w.overlayRoot&&w.overlayRoot.parentNode&&w.overlayRoot.parentNode.removeChild(w.overlayRoot))},registerTab:function(e){x.registerTab(e)},selectTab:function(e){x.selectTab(e)}}}export{we as createDebugOverlay,we as default};