@oddin-gg/havik-player 2.13.0 → 2.14.0

package/dist/index.d.cts

@@ -224,6 +224,14 @@ export declare interface CreatePlayerOptions {
      * 'custom'.
      */
     statusOverlays?: boolean;
+    /**
+     * Your page's Content-Security-Policy nonce, for the `<style>` tag the
+     * custom control bar injects. Needed only when `style-src` has no
+     * `'unsafe-inline'`: without the nonce the browser blocks the tag and the
+     * controls render unstyled. Pass the same value as your policy's
+     * `'nonce-…'` source. Ignored unless controls is 'custom'.
+     */
+    cspNonce?: string;
     /** Message on the end-of-stream card. Default: "This stream has ended". */
     endedMessage?: string;
     /**

package/dist/index.d.ts

@@ -224,6 +224,14 @@ export declare interface CreatePlayerOptions {
      * 'custom'.
      */
     statusOverlays?: boolean;
+    /**
+     * Your page's Content-Security-Policy nonce, for the `<style>` tag the
+     * custom control bar injects. Needed only when `style-src` has no
+     * `'unsafe-inline'`: without the nonce the browser blocks the tag and the
+     * controls render unstyled. Pass the same value as your policy's
+     * `'nonce-…'` source. Ignored unless controls is 'custom'.
+     */
+    cspNonce?: string;
     /** Message on the end-of-stream card. Default: "This stream has ended". */
     endedMessage?: string;
     /**

package/dist/index.js

@@ -2260,7 +2260,7 @@ async function $t() {
 }
 //#endregion
 //#region src/core/version.ts
-var en = "2.13.0", tn = {
+var en = "2.14.0", tn = {
 	accent: "#E1B600",
 	accentText: "#1B1C23",
 	background: "#0e0f13",
@@ -2293,15 +2293,16 @@ function rn(e, t) {
 }
 //#endregion
 //#region src/ui/styles.ts
-var an = "havik-player-styles", on = "\n.havik-player{position:relative;display:block;width:100%;background:var(--havik-bg,#0e0f13);\n  color:var(--havik-text,#fff);font-family:var(--havik-font,system-ui,sans-serif);\n  overflow:hidden;line-height:1.4;-webkit-tap-highlight-color:transparent}\n.havik-player video{display:block;width:100%;height:auto;aspect-ratio:16/9;\n  object-fit:contain;background:#000;outline:none}\n.havik-player:focus{outline:none}\n.havik-player *{box-sizing:border-box}\n\n.havik-player:fullscreen,.havik-player:-webkit-full-screen{display:flex;align-items:center;\n  justify-content:center;width:100vw;height:100vh;aspect-ratio:auto}\n.havik-player:fullscreen video,.havik-player:-webkit-full-screen video{width:100%;height:100%;\n  aspect-ratio:auto;object-fit:contain}\n\n.havik-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer}\n.havik-gradient{position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;\n  background:linear-gradient(to top,rgba(0,0,0,.78),transparent);\n  opacity:1;transition:opacity .25s}\n.havik-player.havik-hide .havik-gradient,\n.havik-player.havik-hide .havik-bar{opacity:0;pointer-events:none}\n.havik-player.havik-hide{cursor:none}\n\n.havik-center{width:74px;height:74px;border-radius:50%;border:0;cursor:pointer;\n  background:var(--havik-accent,#E1B600);color:var(--havik-accent-text,#1B1C23);\n  display:flex;align-items:center;justify-content:center;\n  box-shadow:0 6px 24px rgba(0,0,0,.45);transition:transform .15s,opacity .15s}\n.havik-center:hover{transform:scale(1.06)}\n.havik-center svg{width:38px;height:38px;margin-left:2px}\n.havik-center.havik-gone{opacity:0;pointer-events:none;transform:scale(.8)}\n\n/* Absolutely centred, NOT a flex sibling of .havik-center: the hidden center\n   button (.havik-gone) still occupies its 74px in the row, which pushed an\n   in-flow spinner 37px right of centre. */\n.havik-spinner{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;\n  border:4px solid rgba(255,255,255,.2);border-top-color:var(--havik-accent,#E1B600);\n  animation:havik-spin .8s linear infinite}\n@keyframes havik-spin{to{transform:rotate(360deg)}}\n\n/* Status card — branded full-bleed overlay for the stopped/pre-play states\n   (ended / fatal error / pre-play / armed-waiting). */\n.havik-status{position:absolute;inset:0;display:flex;flex-direction:column;gap:16px;\n  align-items:center;justify-content:center;background:rgba(14,15,19,.82);text-align:center;padding:24px}\n.havik-status__logo{width:128px;height:46px;background:var(--havik-logo) center/contain no-repeat;opacity:.95}\n.havik-status__msg{color:var(--havik-text,#fff);font-size:15px;font-weight:600;max-width:480px}\n.havik-status__btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;\n  padding:10px 18px;border-radius:var(--havik-radius,8px);font-weight:700;font-size:14px;\n  background:var(--havik-accent,#E1B600);color:var(--havik-accent-text,#1B1C23);transition:transform .15s}\n.havik-status__btn:hover{transform:scale(1.04)}\n.havik-status__btn svg{width:18px;height:18px}\n/* Pre-play: lighter scrim so the poster shows through, and a round play CTA. */\n.havik-status--preplay{background:rgba(14,15,19,.4)}\n.havik-status--preplay .havik-status__btn--play{width:74px;height:74px;border-radius:50%;padding:0;\n  justify-content:center;box-shadow:0 6px 24px rgba(0,0,0,.45)}\n.havik-status--preplay .havik-status__btn--play svg{width:38px;height:38px;margin-left:3px}\n\n.havik-watermark{position:absolute;top:12px;right:14px;height:22px;opacity:.85;pointer-events:none;\n  content:'';background:var(--havik-logo) center/contain no-repeat;width:90px}\n/* A status card carries its own logo — the corner watermark would duplicate it. */\n.havik-player.havik-has-status .havik-watermark{display:none}\n\n.havik-bar{position:absolute;left:0;right:0;bottom:0;padding:0 12px 8px;\n  opacity:1;transition:opacity .25s;z-index:2}\n.havik-seek{position:relative;height:16px;display:flex;align-items:center;cursor:pointer;margin-bottom:2px}\n.havik-seek__track{position:relative;width:100%;height:4px;border-radius:3px;background:rgba(255,255,255,.25)}\n.havik-seek__buffered{position:absolute;left:0;top:0;height:100%;border-radius:3px;background:rgba(255,255,255,.4)}\n.havik-seek__played{position:absolute;left:0;top:0;height:100%;border-radius:3px;background:var(--havik-accent,#E1B600)}\n.havik-seek__thumb{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;\n  background:var(--havik-accent,#E1B600);transform:translate(-50%,-50%) scale(0);transition:transform .1s}\n.havik-seek:hover .havik-seek__thumb{transform:translate(-50%,-50%) scale(1)}\n\n.havik-controls{display:flex;align-items:center;gap:6px;height:40px}\n.havik-spacer{flex:1}\n.havik-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;\n  border:0;background:transparent;color:var(--havik-text,#fff);cursor:pointer;border-radius:var(--havik-radius,8px);\n  padding:0;transition:background .12s,color .12s}\n.havik-btn:hover{background:rgba(255,255,255,.12)}\n.havik-btn:focus-visible{outline:2px solid var(--havik-accent,#E1B600);outline-offset:1px}\n.havik-btn svg{width:22px;height:22px}\n\n/* The volume level is filled in accent up to the thumb, like the seek bar's\n   played span — a native range input paints no \"elapsed\" side, which left the\n   level readable only from the dot's position. --havik-vol (0..1) is set by\n   syncVolume(); the track width and thumb size live here as variables because\n   the WebKit fill has to compute the thumb centre from both. */\n.havik-vol{display:flex;align-items:center}\n.havik-vol__slider{--havik-vol-w:70px;--havik-vol-thumb:12px;--havik-vol:1;\n  --havik-vol-pos:calc(var(--havik-vol-thumb) / 2 + var(--havik-vol) * (var(--havik-vol-w) - var(--havik-vol-thumb)));\n  width:0;opacity:0;transition:width .18s,opacity .18s;height:4px;cursor:pointer;\n  appearance:none;-webkit-appearance:none;background:transparent;border-radius:3px;margin:0 4px}\n.havik-vol:hover .havik-vol__slider,.havik-vol:focus-within .havik-vol__slider{width:var(--havik-vol-w);opacity:1}\n/* WebKit/Blink have no progress pseudo-element: paint the fill as a hard-stop\n   gradient that ends at the thumb centre. */\n.havik-vol__slider::-webkit-slider-runnable-track{height:4px;border-radius:3px;\n  background:linear-gradient(to right,var(--havik-accent,#E1B600) var(--havik-vol-pos),\n  rgba(255,255,255,.3) var(--havik-vol-pos))}\n/* Firefox fills natively, and tracks the thumb exactly. */\n.havik-vol__slider::-moz-range-track{height:4px;border-radius:3px;background:rgba(255,255,255,.3)}\n.havik-vol__slider::-moz-range-progress{height:4px;border-radius:3px;background:var(--havik-accent,#E1B600)}\n.havik-vol__slider::-webkit-slider-thumb{-webkit-appearance:none;width:var(--havik-vol-thumb);\n  height:var(--havik-vol-thumb);border-radius:50%;background:var(--havik-accent,#E1B600);\n  margin-top:calc((4px - var(--havik-vol-thumb)) / 2)}\n.havik-vol__slider::-moz-range-thumb{width:var(--havik-vol-thumb);height:var(--havik-vol-thumb);\n  border:0;border-radius:50%;background:var(--havik-accent,#E1B600)}\n\n.havik-time{font-size:12px;color:var(--havik-text-muted,#9aa0ad);\n  font-variant-numeric:tabular-nums;padding:0 6px;white-space:nowrap}\n.havik-live{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;\n  letter-spacing:.4px;padding:0 8px;color:var(--havik-text,#fff)}\n.havik-live svg{width:9px;height:9px;color:var(--havik-text-muted,#9aa0ad)}\n.havik-live.is-live svg{color:var(--havik-accent,#E1B600)}\n.havik-live__go{margin-left:2px;border:0;cursor:pointer;background:transparent;color:var(--havik-text-muted,#9aa0ad);\n  font:inherit;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 6px;border-radius:6px}\n.havik-live.is-live .havik-live__go{display:none}\n.havik-live__go:hover{color:var(--havik-accent,#E1B600)}\n\n.havik-menu{position:absolute;bottom:54px;right:12px;min-width:170px;max-height:230px;overflow:auto;\n  background:var(--havik-surface,#1B1C23);border:1px solid var(--havik-border,rgba(255,255,255,.1));\n  border-radius:var(--havik-radius,8px);box-shadow:0 10px 30px rgba(0,0,0,.5);padding:6px;z-index:3}\n.havik-menu[hidden]{display:none}\n.havik-menu__title{font-size:11px;text-transform:uppercase;letter-spacing:.6px;\n  color:var(--havik-text-muted,#9aa0ad);padding:6px 8px 4px}\n.havik-menu__item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;\n  border:0;background:transparent;color:var(--havik-text,#fff);cursor:pointer;font:inherit;font-size:13px;\n  text-align:left;padding:7px 8px;border-radius:6px}\n.havik-menu__item:hover{background:var(--havik-surface-muted,#2a2c36)}\n.havik-menu__item[aria-checked=\"true\"]{color:var(--havik-accent,#E1B600);font-weight:600}\n.havik-menu__item[aria-checked=\"true\"]::after{content:'✓'}\n";
-function sn(e = document) {
-	if (e.getElementById(an)) return;
-	let t = e.createElement("style");
-	t.id = an, t.textContent = on, e.head.appendChild(t);
+var an = "havik-player-styles", on = "\n.havik-player{position:relative;display:block;width:100%;background:var(--havik-bg,#0e0f13);\n  color:var(--havik-text,#fff);font-family:var(--havik-font,system-ui,sans-serif);\n  overflow:hidden;line-height:1.4;-webkit-tap-highlight-color:transparent}\n.havik-player video{display:block;width:100%;height:auto;aspect-ratio:16/9;\n  object-fit:contain;background:#000;outline:none}\n.havik-player:focus{outline:none}\n.havik-player *{box-sizing:border-box}\n\n.havik-player:fullscreen,.havik-player:-webkit-full-screen{display:flex;align-items:center;\n  justify-content:center;width:100vw;height:100vh;aspect-ratio:auto}\n.havik-player:fullscreen video,.havik-player:-webkit-full-screen video{width:100%;height:100%;\n  aspect-ratio:auto;object-fit:contain}\n\n.havik-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer}\n.havik-gradient{position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;\n  background:linear-gradient(to top,rgba(0,0,0,.78),transparent);\n  opacity:1;transition:opacity .25s}\n.havik-player.havik-hide .havik-gradient,\n.havik-player.havik-hide .havik-bar{opacity:0;pointer-events:none}\n.havik-player.havik-hide{cursor:none}\n\n.havik-center{width:74px;height:74px;border-radius:50%;border:0;cursor:pointer;\n  background:var(--havik-accent,#E1B600);color:var(--havik-accent-text,#1B1C23);\n  display:flex;align-items:center;justify-content:center;\n  box-shadow:0 6px 24px rgba(0,0,0,.45);transition:transform .15s,opacity .15s}\n.havik-center:hover{transform:scale(1.06)}\n.havik-center svg{width:38px;height:38px;margin-left:2px}\n.havik-center.havik-gone{opacity:0;pointer-events:none;transform:scale(.8)}\n\n/* Absolutely centred, NOT a flex sibling of .havik-center: the hidden center\n   button (.havik-gone) still occupies its 74px in the row, which pushed an\n   in-flow spinner 37px right of centre. */\n.havik-spinner{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;\n  border:4px solid rgba(255,255,255,.2);border-top-color:var(--havik-accent,#E1B600);\n  animation:havik-spin .8s linear infinite}\n@keyframes havik-spin{to{transform:rotate(360deg)}}\n\n/* Status card — branded full-bleed overlay for the stopped/pre-play states\n   (ended / fatal error / pre-play / armed-waiting). */\n.havik-status{position:absolute;inset:0;display:flex;flex-direction:column;gap:16px;\n  align-items:center;justify-content:center;background:rgba(14,15,19,.82);text-align:center;padding:24px}\n.havik-status__logo{width:128px;height:46px;background:var(--havik-logo) center/contain no-repeat;opacity:.95}\n.havik-status__msg{color:var(--havik-text,#fff);font-size:15px;font-weight:600;max-width:480px}\n.havik-status__btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;\n  padding:10px 18px;border-radius:var(--havik-radius,8px);font-weight:700;font-size:14px;\n  background:var(--havik-accent,#E1B600);color:var(--havik-accent-text,#1B1C23);transition:transform .15s}\n.havik-status__btn:hover{transform:scale(1.04)}\n.havik-status__btn svg{width:18px;height:18px}\n/* Pre-play: lighter scrim so the poster shows through, and a round play CTA. */\n.havik-status--preplay{background:rgba(14,15,19,.4)}\n.havik-status--preplay .havik-status__btn--play{width:74px;height:74px;border-radius:50%;padding:0;\n  justify-content:center;box-shadow:0 6px 24px rgba(0,0,0,.45)}\n.havik-status--preplay .havik-status__btn--play svg{width:38px;height:38px;margin-left:3px}\n\n.havik-watermark{position:absolute;top:12px;right:14px;height:22px;opacity:.85;pointer-events:none;\n  content:'';background:var(--havik-logo) center/contain no-repeat;width:90px}\n/* A status card carries its own logo — the corner watermark would duplicate it. */\n.havik-player.havik-has-status .havik-watermark{display:none}\n\n.havik-bar{position:absolute;left:0;right:0;bottom:0;padding:0 12px 8px;\n  opacity:1;transition:opacity .25s;z-index:2}\n.havik-seek{position:relative;height:16px;display:flex;align-items:center;cursor:pointer;margin-bottom:2px}\n.havik-seek__track{position:relative;width:100%;height:4px;border-radius:3px;background:rgba(255,255,255,.25)}\n.havik-seek__buffered{position:absolute;left:0;top:0;height:100%;border-radius:3px;background:rgba(255,255,255,.4)}\n.havik-seek__played{position:absolute;left:0;top:0;height:100%;border-radius:3px;background:var(--havik-accent,#E1B600)}\n.havik-seek__thumb{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;\n  background:var(--havik-accent,#E1B600);transform:translate(-50%,-50%) scale(0);transition:transform .1s}\n.havik-seek:hover .havik-seek__thumb{transform:translate(-50%,-50%) scale(1)}\n\n.havik-controls{display:flex;align-items:center;gap:6px;height:40px}\n.havik-spacer{flex:1}\n.havik-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;\n  border:0;background:transparent;color:var(--havik-text,#fff);cursor:pointer;border-radius:var(--havik-radius,8px);\n  padding:0;transition:background .12s,color .12s}\n.havik-btn:hover{background:rgba(255,255,255,.12)}\n.havik-btn:focus-visible{outline:2px solid var(--havik-accent,#E1B600);outline-offset:1px}\n.havik-btn svg{width:22px;height:22px}\n\n/* The volume level is filled in accent up to the thumb, like the seek bar's\n   played span — a native range input paints no \"elapsed\" side, which left the\n   level readable only from the dot's position. --havik-vol (0..1) is set by\n   syncVolume(); the track width and thumb size live here as variables because\n   the WebKit fill has to compute the thumb centre from both. */\n.havik-vol{display:flex;align-items:center}\n.havik-vol__slider{--havik-vol-w:70px;--havik-vol-thumb:12px;--havik-vol:1;\n  --havik-vol-pos:calc(var(--havik-vol-thumb) / 2 + var(--havik-vol) * (var(--havik-vol-w) - var(--havik-vol-thumb)));\n  width:0;opacity:0;transition:width .18s,opacity .18s;height:4px;cursor:pointer;\n  appearance:none;-webkit-appearance:none;background:transparent;border-radius:3px;margin:0 4px}\n.havik-vol:hover .havik-vol__slider,.havik-vol:focus-within .havik-vol__slider{width:var(--havik-vol-w);opacity:1}\n/* WebKit/Blink have no progress pseudo-element: paint the fill as a hard-stop\n   gradient that ends at the thumb centre. */\n.havik-vol__slider::-webkit-slider-runnable-track{height:4px;border-radius:3px;\n  background:linear-gradient(to right,var(--havik-accent,#E1B600) var(--havik-vol-pos),\n  rgba(255,255,255,.3) var(--havik-vol-pos))}\n/* Firefox fills natively, and tracks the thumb exactly. */\n.havik-vol__slider::-moz-range-track{height:4px;border-radius:3px;background:rgba(255,255,255,.3)}\n.havik-vol__slider::-moz-range-progress{height:4px;border-radius:3px;background:var(--havik-accent,#E1B600)}\n.havik-vol__slider::-webkit-slider-thumb{-webkit-appearance:none;width:var(--havik-vol-thumb);\n  height:var(--havik-vol-thumb);border-radius:50%;background:var(--havik-accent,#E1B600);\n  margin-top:calc((4px - var(--havik-vol-thumb)) / 2)}\n.havik-vol__slider::-moz-range-thumb{width:var(--havik-vol-thumb);height:var(--havik-vol-thumb);\n  border:0;border-radius:50%;background:var(--havik-accent,#E1B600)}\n\n.havik-time{font-size:12px;color:var(--havik-text-muted,#9aa0ad);\n  font-variant-numeric:tabular-nums;padding:0 6px;white-space:nowrap}\n.havik-live{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;\n  letter-spacing:.4px;padding:0 8px;color:var(--havik-text,#fff)}\n.havik-live svg{width:9px;height:9px;color:var(--havik-text-muted,#9aa0ad)}\n.havik-live.is-live svg{color:var(--havik-accent,#E1B600)}\n.havik-live__go{margin-left:2px;border:0;cursor:pointer;background:transparent;color:var(--havik-text-muted,#9aa0ad);\n  font:inherit;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 6px;border-radius:6px}\n.havik-live.is-live .havik-live__go{display:none}\n.havik-live__go:hover{color:var(--havik-accent,#E1B600)}\n\n.havik-menu{position:absolute;bottom:54px;right:12px;min-width:170px;max-height:230px;overflow:auto;\n  background:var(--havik-surface,#1B1C23);border:1px solid var(--havik-border,rgba(255,255,255,.1));\n  border-radius:var(--havik-radius,8px);box-shadow:0 10px 30px rgba(0,0,0,.5);padding:6px;z-index:3}\n.havik-menu[hidden]{display:none}\n.havik-menu__title{font-size:11px;text-transform:uppercase;letter-spacing:.6px;\n  color:var(--havik-text-muted,#9aa0ad);padding:6px 8px 4px}\n.havik-menu__item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;\n  border:0;background:transparent;color:var(--havik-text,#fff);cursor:pointer;font:inherit;font-size:13px;\n  text-align:left;padding:7px 8px;border-radius:6px}\n.havik-menu__item:hover{background:var(--havik-surface-muted,#2a2c36)}\n.havik-menu__item[aria-checked=\"true\"]{color:var(--havik-accent,#E1B600);font-weight:600}\n.havik-menu__item[aria-checked=\"true\"]::after{content:'✓'}\n", sn = /* @__PURE__ */ new WeakMap();
+function cn(e = document, t) {
+	let n = e.querySelector(`style#${an}`);
+	if (n && (!t || sn.get(n) === t)) return;
+	let r = e.createElement("style");
+	r.id = an, t && (r.nonce = t, r.setAttribute("nonce", t)), r.textContent = on, sn.set(r, t), n ? n.replaceWith(r) : e.head.appendChild(r);
 }
 //#endregion
 //#region src/ui/icons.ts
-var cn = {
+var ln = {
 	play: "<path d=\"M8 5v14l11-7z\"/>",
 	pause: "<path d=\"M6 5h4v14H6zM14 5h4v14h-4z\"/>",
 	volumeHigh: "<path d=\"M3 10v4h4l5 5V5L7 10H3zm13.5 2a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zm-2.5-9v2.06A7 7 0 0 1 14 19v2a9 9 0 0 0 0-18z\"/>",
@@ -2315,20 +2316,20 @@ var cn = {
 	retry: "<path d=\"M17.65 6.35A8 8 0 1 0 19.73 13h-2.08A6 6 0 1 1 12 6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"/>"
 };
 function Z(e) {
-	return `<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor">${cn[e]}</svg>`;
+	return `<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor">${ln[e]}</svg>`;
 }
 //#endregion
 //#region src/ui/controls.ts
-var ln = 3e3, un = /* @__PURE__ */ new Set([
+var un = 3e3, dn = /* @__PURE__ */ new Set([
 	"GONE",
 	"NOT_FOUND",
 	"INVALID_URN",
 	"UNAUTHORIZED"
 ]);
-function dn(e) {
-	return new fn(e);
+function fn(e) {
+	return new pn(e);
 }
-var fn = class {
+var pn = class {
 	root;
 	video;
 	player;
@@ -2370,7 +2371,7 @@ var fn = class {
 	scrubbing = !1;
 	offFns = [];
 	constructor(e) {
-		this.root = e.root, this.video = e.video, this.player = e.player, this.doc = e.root.ownerDocument ?? document, this.autoHideMs = e.autoHideMs ?? ln, this.logoUrl = e.logoUrl, this.statusOverlays = e.statusOverlays !== !1, this.endedMessage = e.endedMessage ?? "This stream has ended", this.interruptedMessage = e.interruptedMessage ?? "Reconnecting — please stand by", this.errorMessage = e.errorMessage, sn(this.doc), this.root.classList.add("havik-player"), this.root.hasAttribute("tabindex") || (this.root.tabIndex = 0), this.root.setAttribute("role", "region"), this.root.setAttribute("aria-label", "Video player");
+		this.root = e.root, this.video = e.video, this.player = e.player, this.doc = e.root.ownerDocument ?? document, this.autoHideMs = e.autoHideMs ?? un, this.logoUrl = e.logoUrl, this.statusOverlays = e.statusOverlays !== !1, this.endedMessage = e.endedMessage ?? "This stream has ended", this.interruptedMessage = e.interruptedMessage ?? "Reconnecting — please stand by", this.errorMessage = e.errorMessage, cn(this.doc, e.cspNonce), this.root.classList.add("havik-player"), this.root.hasAttribute("tabindex") || (this.root.tabIndex = 0), this.root.setAttribute("role", "region"), this.root.setAttribute("aria-label", "Video player");
 		let t = (e, t, n) => {
 			let r = this.doc.createElement(e);
 			if (r.className = t, n) for (let [e, t] of Object.entries(n)) r.setAttribute(e, t);
@@ -2461,7 +2462,7 @@ var fn = class {
 			e.type = "button", e.className = "havik-status__btn havik-status__btn--play", e.setAttribute("aria-label", "Play"), e.innerHTML = Z("play"), e.addEventListener("click", () => void this.player.play()), n.append(e);
 		} else {
 			let r = this.doc.createElement("div");
-			if (r.className = "havik-status__msg", r.textContent = t ?? "", n.append(r), e === "error" && this.lastError && !un.has(this.lastError.code)) {
+			if (r.className = "havik-status__msg", r.textContent = t ?? "", n.append(r), e === "error" && this.lastError && !dn.has(this.lastError.code)) {
 				let e = this.doc.createElement("button");
 				e.type = "button", e.className = "havik-status__btn", e.innerHTML = `${Z("retry")}<span>Retry</span>`, e.addEventListener("click", () => void this.player.retry()), n.append(e);
 			}
@@ -2502,7 +2503,7 @@ var fn = class {
 			let n = r.end(r.length - 1), i = Math.min(1, Math.max(0, (n - e.start) / t));
 			this.seekBuffered.style.width = `${(i * 100).toFixed(2)}%`;
 		}
-		!this.player.getStats().isLive && Number.isFinite(this.video.duration) && (this.time.textContent = `${Q(this.video.currentTime)} / ${Q(this.video.duration)}`);
+		!this.player.getStats().isLive && Number.isFinite(this.video.duration) && (this.time.textContent = `${mn(this.video.currentTime)} / ${mn(this.video.duration)}`);
 	}
 	syncLive() {
 		let e = this.player.getStats(), t = e.isLive !== !1;
@@ -2552,17 +2553,17 @@ var fn = class {
 	renderQualityMenu() {
 		let e = this.player.getQualityLevels(), t = this.player.getCurrentQuality(), n = this.doc.createElement("div");
 		n.className = "havik-menu__title", n.textContent = "Quality", this.menu.replaceChildren(n, this.menuItem("Auto", t === -1, () => this.player.setQuality("auto")));
-		for (let n of e) this.menu.append(this.menuItem(pn(n), t === n.index, () => this.player.setQuality(n.index)));
+		for (let n of e) this.menu.append(this.menuItem(hn(n), t === n.index, () => this.player.setQuality(n.index)));
 	}
 	renderAudioMenu() {
 		let e = this.player.getAudioTracks(), t = this.doc.createElement("div");
 		t.className = "havik-menu__title", t.textContent = "Audio", this.menu.replaceChildren(t);
-		for (let t of e) this.menu.append(this.menuItem(mn(t), t.default, () => this.player.setAudioTrack(t.id)));
+		for (let t of e) this.menu.append(this.menuItem(gn(t), t.default, () => this.player.setAudioTrack(t.id)));
 	}
 	renderCcMenu() {
 		let e = this.player.getTextTracks(), t = this.doc.createElement("div");
 		t.className = "havik-menu__title", t.textContent = "Subtitles", this.menu.replaceChildren(t, this.menuItem("Off", !1, () => this.player.setTextTrack(-1)));
-		for (let t of e) this.menu.append(this.menuItem(hn(t), !1, () => this.player.setTextTrack(t.id)));
+		for (let t of e) this.menu.append(this.menuItem(_n(t), !1, () => this.player.setTextTrack(t.id)));
 	}
 	onTracksChanged() {
 		this.openMenu && this.renderMenu(this.openMenu);
@@ -2662,41 +2663,41 @@ var fn = class {
 		this.root.classList.remove("havik-player", "havik-hide", "havik-has-status");
 	}
 };
-function Q(e) {
+function mn(e) {
 	(!Number.isFinite(e) || e < 0) && (e = 0);
 	let t = Math.floor(e % 60), n = Math.floor(e / 60 % 60), r = Math.floor(e / 3600), i = r > 0 ? String(n).padStart(2, "0") : String(n), a = String(t).padStart(2, "0");
 	return r > 0 ? `${r}:${i}:${a}` : `${i}:${a}`;
 }
-function pn(e) {
+function hn(e) {
 	return e.height ? `${e.height}p` : `${Math.round(e.bitrate / 1e3)} kbps`;
 }
-function mn(e) {
+function gn(e) {
 	return e.name || e.lang || `Track ${e.id}`;
 }
-function hn(e) {
+function _n(e) {
 	return e.name || e.lang || `Track ${e.id}`;
 }
 //#endregion
 //#region src/managed/index.ts
-var gn = 6e3, _n = 45e3, vn = 2e3, yn = 3, bn = 2e3, xn = 48e4;
-function Sn(e) {
+var vn = 6e3, yn = 45e3, Q = 2e3, bn = 3, xn = 2e3, Sn = 48e4;
+function Cn(e) {
 	if (e.env !== void 0 && e.baseUrl !== void 0) throw new n("INTERNAL", 0, `createPlayer: pass env OR baseUrl, not both (got env=${JSON.stringify(e.env)} and baseUrl=${JSON.stringify(e.baseUrl)})`);
 	if (e.env !== void 0) return B(e.env);
 	if (!e.baseUrl) throw new n("INTERNAL", 0, "createPlayer: env or baseUrl is required (env: 'integration' | 'production')");
 	return e.baseUrl;
 }
-async function Cn(e) {
+async function wn(e) {
 	if (!e.video || typeof e.video.play != "function") throw new n("INTERNAL", 0, "createPlayer: opts.video must be an HTMLVideoElement");
-	let t = Sn(e);
+	let t = Cn(e);
 	if (!e.matchUrn) throw new n("INVALID_URN", 0, "createPlayer: matchUrn is required");
 	if (!e.credential) throw new n("INTERNAL", 0, "createPlayer: credential is required");
-	let r = new wn({
+	let r = new Tn({
 		...e,
 		baseUrl: t
 	});
 	return await r.start(), r;
 }
-var wn = class {
+var Tn = class {
 	opts;
 	abort = new AbortController();
 	listeners = {};
@@ -2784,7 +2785,7 @@ var wn = class {
 		setTimeout(() => {
 			a || this.destroyed || e !== this.loadGen || this.emit("waiting", {
 				phase: i ? "unavailable" : "tooEarly",
-				retryInMs: _n,
+				retryInMs: yn,
 				attempt: 1,
 				elapsedMs: 0,
 				...!i && f !== void 0 && f > Date.now() ? { ttkMs: f - Date.now() } : {}
@@ -2823,13 +2824,13 @@ var wn = class {
 				!a && !p() && h();
 			}, e);
 		};
-		_(gn), this.armingSub = T({
+		_(vn), this.armingSub = T({
 			eventsBaseUrl: t,
 			matchUrn: this.opts.matchUrn,
 			credential: this.opts.credential,
-			onAlive: () => _(_n),
+			onAlive: () => _(yn),
 			onState: (e) => {
-				a || p() || (e.state === "live" || e.state === "gone") && setTimeout(g, Math.random() * vn);
+				a || p() || (e.state === "live" || e.state === "gone") && setTimeout(g, Math.random() * Q);
 			},
 			onError: () => h()
 		});
@@ -2988,7 +2989,7 @@ var wn = class {
 				r = 0, i = !1;
 			},
 			onError: () => {
-				this.destroyed || e !== this.loadGen || i || this.endedHandled || (r += 1, r >= yn && (i = !0, this.emit("warning", new n("NETWORK", 0, `live-state events unreachable at ${t} after ${r} attempts — end-of-stream detection degraded to the HLS staleness watchdog. Check the events host, the api-key's allowed origins, and CSP connect-src.`))));
+				this.destroyed || e !== this.loadGen || i || this.endedHandled || (r += 1, r >= bn && (i = !0, this.emit("warning", new n("NETWORK", 0, `live-state events unreachable at ${t} after ${r} attempts — end-of-stream detection degraded to the HLS staleness watchdog. Check the events host, the api-key's allowed origins, and CSP connect-src.`))));
 			}
 		});
 	}
@@ -3010,7 +3011,7 @@ var wn = class {
 	scheduleRejoin(e) {
 		this.rejoinEnabled() && !this.rejoinTimer && (this.rejoinTimer = setTimeout(() => {
 			this.rejoinTimer = null, !(this.destroyed || e !== this.loadGen || this._state !== "ended") && this.rejoin();
-		}, Math.random() * vn));
+		}, Math.random() * Q));
 	}
 	cancelRejoin() {
 		this.rejoinTimer &&= (clearTimeout(this.rejoinTimer), null);
@@ -3034,7 +3035,7 @@ var wn = class {
 		}
 		t.controls = !1;
 		let n = (t.ownerDocument ?? document).createElement("div"), r = t.parentNode;
-		r && r.insertBefore(n, t), n.appendChild(t), rn(n, this.opts.theme), this.container = n, this.controlBar = dn({
+		r && r.insertBefore(n, t), n.appendChild(t), rn(n, this.opts.theme), this.container = n, this.controlBar = fn({
 			root: n,
 			video: t,
 			player: this,
@@ -3042,7 +3043,8 @@ var wn = class {
 			statusOverlays: this.opts.statusOverlays,
 			endedMessage: this.opts.endedMessage,
 			interruptedMessage: this.opts.interruptedMessage,
-			errorMessage: this.opts.errorMessage
+			errorMessage: this.opts.errorMessage,
+			cspNonce: this.opts.cspNonce
 		});
 	}
 	unmountControls() {
@@ -3064,7 +3066,7 @@ var wn = class {
 	}
 	startStats() {
 		this.stopStats();
-		let e = Math.max(500, this.opts.statsIntervalMs ?? bn);
+		let e = Math.max(500, this.opts.statsIntervalMs ?? xn);
 		this.statsTimer = setInterval(() => {
 			if (!this.engine) return;
 			let e = this.engine.getStats();
@@ -3076,7 +3078,7 @@ var wn = class {
 	}
 	scheduleLicenseRefresh() {
 		this.stopRefresh();
-		let e = this.opts.licenseRefreshMs ?? xn;
+		let e = this.opts.licenseRefreshMs ?? Sn;
 		e && this._descriptor?.drmEnabled && (this.refreshTimer = setInterval(() => void this.refreshLicense(), e));
 	}
 	stopRefresh() {
@@ -3231,7 +3233,7 @@ function $(e) {
 }
 //#endregion
 //#region src/embed/host.ts
-function Tn(e) {
+function En(e) {
 	if (!e.container || typeof e.container.appendChild != "function") throw Error("mountEmbed: opts.container must be a DOM element");
 	if (!e.src) throw Error("mountEmbed: opts.src is required");
 	if (!e.baseUrl || !e.matchUrn) throw Error("mountEmbed: opts.baseUrl and opts.matchUrn are required");
@@ -3290,15 +3292,15 @@ function Tn(e) {
 }
 //#endregion
 //#region src/embed/page.ts
-var En = /^[A-Za-z0-9:_.-]{1,128}$/;
-function Dn(e) {
+var Dn = /^[A-Za-z0-9:_.-]{1,128}$/;
+function On(e) {
 	if (typeof e == "boolean") return e;
 	if (typeof e == "object" && e) {
 		let t = e.endpoint;
 		return typeof t == "string" ? { endpoint: t } : {};
 	}
 }
-function On() {
+function kn() {
 	let e = window.HAVIK_EMBED_CONFIG;
 	if (e) return {
 		baseUrl: e.baseUrl ?? "",
@@ -3308,7 +3310,7 @@ function On() {
 		autoplay: e.autoplay ?? !0,
 		muted: e.muted ?? !0,
 		waitForLive: e.waitForLive ?? !0,
-		analytics: Dn(e.analytics)
+		analytics: On(e.analytics)
 	};
 	let t = new URLSearchParams(location.search);
 	return {
@@ -3321,9 +3323,9 @@ function On() {
 		waitForLive: !0
 	};
 }
-async function kn() {
-	let e = On();
-	jn();
+async function An() {
+	let e = kn();
+	Mn();
 	let t = document.createElement("video");
 	t.setAttribute("playsinline", ""), t.muted = e.muted ?? !0, t.style.cssText = "width:100%;height:100%;object-fit:contain;background:#000;aspect-ratio:auto", document.body.appendChild(t);
 	let r = e.parentOrigin && e.parentOrigin !== "null" ? e.parentOrigin : null;
@@ -3378,12 +3380,12 @@ async function kn() {
 			code: e.code,
 			message: e.message
 		})), e.on("autoplayblocked", () => {
-			i({ type: "oddin:autoplayblocked" }), An(t, e);
+			i({ type: "oddin:autoplayblocked" }), jn(t, e);
 		});
 	}, s = async (r) => {
 		a?.destroy(), a = null;
 		try {
-			let n = await Cn({
+			let n = await wn({
 				video: t,
 				baseUrl: e.baseUrl,
 				matchUrn: r,
@@ -3445,7 +3447,7 @@ async function kn() {
 				a?.retry();
 				break;
 			case "oddin:load":
-				typeof e.matchUrn == "string" && En.test(e.matchUrn) && s(e.matchUrn);
+				typeof e.matchUrn == "string" && Dn.test(e.matchUrn) && s(e.matchUrn);
 				break;
 			case "oddin:destroy": c();
 		}
@@ -3457,18 +3459,18 @@ async function kn() {
 		protocol: 1
 	});
 }
-function An(e, t) {
+function jn(e, t) {
 	if (document.getElementById("havik-tap")) return;
 	let n = document.createElement("button");
 	n.id = "havik-tap", n.textContent = "▶  Tap to play", n.style.cssText = "position:fixed;inset:0;width:100%;height:100%;border:0;background:rgba(0,0,0,.55);color:#fff;font:600 18px system-ui,sans-serif;cursor:pointer;z-index:9", n.addEventListener("click", () => {
 		n.remove(), t.play();
 	}), document.body.appendChild(n);
 }
-function jn() {
+function Mn() {
 	let e = document.createElement("style");
 	e.textContent = "html,body{margin:0;height:100%;background:#000;overflow:hidden}body{display:flex}", document.head.appendChild(e);
 }
 //#endregion
-export { tn as ODDIN_THEME, n as PlaybackError, rn as applyTheme, B as baseUrlForEnv, kn as bootEmbed, Te as clearDeviceId, Cn as createPlayer, E as deriveEventsBaseUrl, He as detectDrmSupport, C as enterVideoFullscreen, w as exitVideoFullscreen, _e as fetchCatalog, ye as fetchTournament, xe as flattenMatches, k as getDeviceId, We as isLowLatencyManifest, $ as isOddinMessage, De as licenseRequestHeaders, Tn as mountEmbed, de as pollToLive, y as resolveStream, T as subscribeLiveState, S as videoFullscreenActive, Ce as watchStatus };
+export { tn as ODDIN_THEME, n as PlaybackError, rn as applyTheme, B as baseUrlForEnv, An as bootEmbed, Te as clearDeviceId, wn as createPlayer, E as deriveEventsBaseUrl, He as detectDrmSupport, C as enterVideoFullscreen, w as exitVideoFullscreen, _e as fetchCatalog, ye as fetchTournament, xe as flattenMatches, k as getDeviceId, We as isLowLatencyManifest, $ as isOddinMessage, De as licenseRequestHeaders, En as mountEmbed, de as pollToLive, y as resolveStream, T as subscribeLiveState, S as videoFullscreenActive, Ce as watchStatus };
 
 //# sourceMappingURL=index.js.map