@vindral/web-sdk 4.2.1 → 4.3.0-1-gdda4d0a0

package/{ST3epwLf.js → D79t40sZ.js}

@@ -1,11 +1,11 @@
 import { n as e, t } from "./BsfwXDui.js";
-import { _ as n, a as r, c as i, d as a, f as o, g as s, h as c, i as ee, l, m as te, n as u, o as ne, p as re, r as ie, s as ae, t as oe, u as se, v as ce } from "./TRlsfsv0.js";
+import { _ as n, a as r, c as i, d as a, f as o, g as s, h as c, i as ee, l, m as te, n as u, o as ne, p as re, r as ie, s as ae, t as oe, u as se, v as ce } from "./Dl8nU3da.js";
 import { M as le } from "./C01DcfYu.js";
 import { a as d, i as f, n as p, r as m, t as h } from "./B7hT-BKr.js";
 import { n as ue, t as de } from "./DeYmk5AL.js";
 import { t as fe } from "./FYiEDBC4.js";
-import { _ as pe, a as me, c as he, d as ge, f as _e, g, h as _, i as v, l as ve, m as ye, n as y, o as b, p as be, r as x, s as xe, t as Se, u as Ce, v as we, y as Te } from "./CF-41rJe.js";
-import { t as Ee } from "./D5iA4gy8.js";
+import { _ as pe, a as me, c as he, d as ge, f as _e, g, h as _, i as v, l as ve, m as ye, n as y, o as b, p as be, r as x, s as xe, t as Se, u as Ce, v as we, y as Te } from "./CjPLLJi5.js";
+import { t as Ee } from "./BdFcdkj1.js";
 //#region ../../libs/utils/src/mediaMetadata.ts
 var De = ({ title: e, subTitle: t = "Live stream", poster: n }) => {
 	document.title = e, "mediaSession" in navigator && (navigator.mediaSession.metadata = new MediaMetadata({
@@ -118,7 +118,7 @@ e(Ge, "observedAttributes", [...y(Ve, "observedAttributes", Ve), g.RENDITION_LEV
 //#endregion
 //#region ../../libs/player-next/src/components/AdvancedRenditionMenuList.ts
 var qe = document.createElement("template");
-qe.innerHTML = "\n  <style>\n    :host {\n      font: inherit;\n      cursor: default;\n      padding: var(--padding-2);\n      padding-top: var(--padding-3);\n      border-radius: 0.25em;\n      position: absolute;\n      min-width: 220px;\n      background: var(--bg-subtle);\n      z-index: 1;\n      overflow: auto;\n    }\n\n    :host([list-position=\"top\"]) {\n      bottom: calc(100% + 0.5em);\n      transform: translate(-50%);\n    }\n\n    :host([list-position=\"bottom\"]) {\n      top: calc(100% + 0.5em);\n    }\n\n    :host::-webkit-scrollbar {\n      width: 5px;\n      padding-right: 5px;\n    }\n\n    :host::-webkit-scrollbar-thumb {\n      background-color: var(--fg-extra-subtle);\n      border-radius: 10px;\n      border: 0;\n    }\n\n    :host::-webkit-scrollbar-track {\n      border-radius: 10px;\n      background-color: transparent;\n    }\n\n    .mode-toggle {\n      display: flex;\n      gap: var(--padding-1);\n      margin-bottom: var(--padding-2);\n    }\n\n    .mode-btn {\n      flex: 1;\n      padding: var(--padding-1) var(--padding-2);\n      border: none;\n      border-radius: 4px;\n      font-size: 11px;\n      font-weight: 500;\n      cursor: pointer;\n      background: var(--bg-component);\n      color: var(--fg-default);\n      transition: background 0.15s;\n    }\n\n    .mode-btn:hover {\n      background: var(--bg-component-hover);\n    }\n\n    .mode-btn[data-active=\"true\"] {\n      background: #549ce0;\n      color: #ffffff;\n    }\n\n    .setting-row {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--padding-2);\n      margin-bottom: var(--padding-2);\n      padding: 0 var(--padding-1);\n    }\n\n    .setting-label {\n      font-size: 10px;\n      color: var(--fg-subtle);\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n    }\n\n    .setting-toggle-btn {\n      border: none;\n      border-radius: 999px;\n      background: var(--bg-component);\n      color: var(--fg-default);\n      font-size: 10px;\n      font-weight: 600;\n      min-width: 44px;\n      padding: 4px 10px;\n      cursor: pointer;\n      transition: background 0.15s;\n    }\n\n    .setting-toggle-btn[data-active=\"true\"] {\n      background: #549ce0;\n      color: #ffffff;\n    }\n\n    .setting-toggle-btn:disabled {\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n\n    .quality-status-text {\n      font-size: 10px;\n      color: var(--fg-subtle);\n      margin-bottom: var(--padding-2);\n      padding: 0 var(--padding-1);\n      font-style: italic;\n    }\n\n    .menu {\n      display: grid;\n      gap: var(--padding-1);\n    }\n\n    .menu-item {\n      display: flex;\n      align-items: center;\n      gap: var(--padding-2);\n      padding: var(--padding-2);\n      border-radius: 4px;\n      cursor: pointer;\n      font-size: 13px;\n      position: relative;\n    }\n\n    .menu-item:hover {\n      background: var(--bg-component-hover);\n    }\n\n    .menu-item[data-selected=\"true\"] {\n      background: var(--bg-component-active);\n      border: 1px solid var(--fg-extra-subtle);\n    }\n\n    .menu-item[data-capped=\"true\"] {\n      opacity: 0.5;\n    }\n\n    .menu-item:focus-visible {\n      box-shadow: inset 0 0 0 2px var(--fg-strong);\n      outline: 0;\n    }\n\n    .menu-item-info {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .menu-item-title {\n      font-weight: 500;\n    }\n\n    .menu-item-subtitle {\n      font-size: 10px;\n      opacity: 0.6;\n    }\n\n    .current-label {\n      font-size: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      color: #549ce0;\n      margin-left: auto;\n      display: none;\n    }\n\n    .menu-item[data-playing=\"true\"] .current-label {\n      display: block;\n    }\n  </style>\n\n  <slot>\n    <div class=\"mode-toggle\">\n      <button class=\"mode-btn\" data-mode=\"auto\">Auto (ABR)</button>\n      <button class=\"mode-btn\" data-mode=\"fixed\">Fixed</button>\n    </div>\n    <div class=\"setting-row\">\n      <span class=\"setting-label\">Size cap</span>\n      <button id=\"size-cap-toggle\" class=\"setting-toggle-btn\" type=\"button\"></button>\n    </div>\n    <div class=\"quality-status-text\" id=\"quality-status-text\"></div>\n    <div class=\"menu\" role=\"menu\" aria-label=\"Quality options\"></div>\n  </slot>\n";
+qe.innerHTML = "\n  <style>\n    :host {\n      font: inherit;\n      cursor: default;\n      padding: var(--padding-2) !important;\n      padding-top: var(--padding-3) !important;\n      border-radius: 0.25em;\n      position: absolute;\n      min-width: 220px !important;\n      background: var(--bg-subtle);\n      z-index: 1;\n      overflow: auto;\n    }\n\n    :host([list-position=\"top\"]) {\n      bottom: calc(100% + 0.5em);\n      transform: translate(-50%);\n    }\n\n    :host([list-position=\"bottom\"]) {\n      top: calc(100% + 0.5em);\n    }\n\n    :host::-webkit-scrollbar {\n      width: 5px;\n      padding-right: 5px;\n    }\n\n    :host::-webkit-scrollbar-thumb {\n      background-color: var(--fg-extra-subtle);\n      border-radius: 10px;\n      border: 0;\n    }\n\n    :host::-webkit-scrollbar-track {\n      border-radius: 10px;\n      background-color: transparent;\n    }\n\n    .mode-toggle {\n      display: flex;\n      gap: var(--padding-1);\n      margin-bottom: var(--padding-2);\n    }\n\n    .mode-btn {\n      flex: 1;\n      padding: var(--padding-1) var(--padding-2);\n      border: none;\n      border-radius: 4px;\n      font-size: 11px;\n      font-weight: 500;\n      cursor: pointer;\n      background: var(--bg-component);\n      color: var(--fg-default);\n      transition: background 0.15s;\n    }\n\n    .mode-btn:hover {\n      background: var(--bg-component-hover);\n    }\n\n    .mode-btn[data-active=\"true\"] {\n      background: var(--accent);\n      color: #ffffff;\n    }\n\n    .setting-row {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--padding-2);\n      margin-bottom: var(--padding-2);\n      padding: 0 var(--padding-1);\n    }\n\n    .setting-label {\n      font-size: 10px;\n      color: var(--fg-subtle);\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n    }\n\n    .setting-toggle-btn {\n      border: none;\n      border-radius: 999px;\n      background: var(--bg-component);\n      color: var(--fg-default);\n      font-size: 10px;\n      font-weight: 600;\n      min-width: 44px;\n      padding: 4px 10px;\n      cursor: pointer;\n      transition: background 0.15s;\n    }\n\n    .setting-toggle-btn[data-active=\"true\"] {\n      background: var(--accent);\n      color: #ffffff;\n    }\n\n    .setting-toggle-btn:disabled {\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n\n    .quality-status-text {\n      font-size: 10px;\n      color: var(--fg-subtle);\n      margin-bottom: var(--padding-2);\n      padding: 0 var(--padding-1);\n      font-style: italic;\n    }\n\n    .menu {\n      display: grid;\n      gap: var(--padding-1);\n    }\n\n    .menu-item {\n      display: flex;\n      align-items: center;\n      gap: var(--padding-2);\n      padding: var(--padding-2);\n      border-radius: 4px;\n      cursor: pointer;\n      font-size: 13px;\n      position: relative;\n    }\n\n    .menu-item:hover {\n      background: var(--bg-component-hover);\n    }\n\n    .menu-item[data-selected=\"true\"] {\n      background: var(--bg-component-active);\n      border: 1px solid var(--fg-extra-subtle);\n    }\n\n    .menu-item[data-capped=\"true\"] {\n      opacity: 0.5;\n    }\n\n    .menu-item:focus-visible {\n      box-shadow: inset 0 0 0 2px var(--fg-strong);\n      outline: 0;\n    }\n\n    .menu-item-info {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .menu-item-title {\n      font-weight: 500;\n    }\n\n    .menu-item-subtitle {\n      font-size: 10px;\n      opacity: 0.6;\n    }\n\n    .current-label {\n      font-size: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      color: var(--accent);\n      margin-left: auto;\n      display: none;\n    }\n\n    .menu-item[data-playing=\"true\"] .current-label {\n      display: block;\n    }\n  </style>\n\n  <slot>\n    <div class=\"mode-toggle\">\n      <button class=\"mode-btn\" data-mode=\"auto\">Auto (ABR)</button>\n      <button class=\"mode-btn\" data-mode=\"fixed\">Fixed</button>\n    </div>\n    <div class=\"setting-row\">\n      <span class=\"setting-label\">Size cap</span>\n      <button id=\"size-cap-toggle\" class=\"setting-toggle-btn\" type=\"button\"></button>\n    </div>\n    <div class=\"quality-status-text\" id=\"quality-status-text\"></div>\n    <div class=\"menu\" role=\"menu\" aria-label=\"Quality options\"></div>\n  </slot>\n";
 var Je = /* @__PURE__ */ new WeakMap(), Ye = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), Xe = /* @__PURE__ */ new WeakMap(), Ze = /* @__PURE__ */ new WeakMap(), Qe = /* @__PURE__ */ new WeakMap(), $e = /* @__PURE__ */ new WeakMap(), et = /* @__PURE__ */ new WeakMap(), tt = /* @__PURE__ */ new WeakMap(), nt = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new WeakSet(), rt = class extends HTMLElement {
 	constructor() {
 		super(), h(this, w), d(this, Je, []), d(this, Ye, 2 ** 53 - 1), d(this, C, !1), d(this, Xe, !0), d(this, Ze, null), d(this, Qe, null), d(this, $e, []), d(this, et, null), d(this, tt, null), d(this, nt, null), e(this, "handleEvent", (e) => {
@@ -609,7 +609,7 @@ Lt.innerHTML = `
       width: 100%;
       font-size: 20px;
       text-align: center;
-      padding: 5% 0;
+      padding: 5% 0 !important;
       box-shadow: 0px 0px 20px black;
       background: rgba(0, 0, 0, 0.5);
       color: white;
@@ -666,7 +666,7 @@ function Vt(e = document) {
 //#endregion
 //#region ../../libs/player-next/src/components/ChannelGridItem.ts
 var Ht = document.createElement("template");
-Ht.innerHTML = "\n  <style>\n    :host {\n      position: relative;\n      aspect-ratio: 16 / 9;\n      object-fit: cover;\n      cursor: pointer;\n      border-radius: 6px;\n      box-sizing: border-box;\n\n      background-size: cover;\n      background-position: center;\n\n      transition-property: background-image;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 200ms;\n\n      background-color: rgba(0, 0, 0, 0.5);\n      background-blend-mode: multiply;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    :host([aria-selected=\"true\"]) {\n      box-shadow: inset 0 0 0 2px var(--fg-strong);\n      background-color: rgba(0, 0, 0, 0);\n    }\n\n    :host(:focus),\n    :host(:focus-visible) {\n      outline: none;\n    }\n\n    :host([offline]) {\n      display: var(--grid-item-offline-display);\n      background-image: repeating-linear-gradient(-45deg, #3d3d3d 0, #3d3d3d 4px, #1c2024 4px, #1c2024 8px) !important;\n      pointer-events: none;\n    }\n\n    :host::before {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: rgba(255, 255, 255, 0);\n      transition: background 0.2s ease;\n    }\n\n    :host(:hover)::before {\n      background: rgba(255, 255, 255, 0.1);\n    }\n\n    .channel-title {\n      position: absolute;\n      bottom: var(--padding-2);\n      left: var(--padding-2);\n      padding: var(--padding-1) var(--padding-2);\n      color: white;\n      font-size: 15px;\n      font-weight: 500;\n      text-overflow: ellipsis;\n      border-radius: 4px;\n\n      @container (max-width: 480px) {\n        font-size: 13px;\n      }\n    }\n  </style>\n  <slot></slot>\n";
+Ht.innerHTML = "\n  <style>\n    :host {\n      position: relative;\n      aspect-ratio: 16 / 9;\n      object-fit: cover;\n      cursor: pointer;\n      border-radius: 6px;\n      box-sizing: border-box !important;\n\n      background-size: cover;\n      background-position: center;\n\n      transition-property: background-image;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 200ms;\n\n      background-color: rgba(0, 0, 0, 0.5);\n      background-blend-mode: multiply;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    :host([aria-selected=\"true\"]) {\n      box-shadow: inset 0 0 0 2px var(--fg-strong);\n      background-color: rgba(0, 0, 0, 0);\n    }\n\n    :host(:focus),\n    :host(:focus-visible) {\n      outline: none;\n    }\n\n    :host([offline]) {\n      display: var(--grid-item-offline-display);\n      background-image: repeating-linear-gradient(-45deg, #3d3d3d 0, #3d3d3d 4px, #1c2024 4px, #1c2024 8px) !important;\n      pointer-events: none;\n    }\n\n    :host::before {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: rgba(255, 255, 255, 0);\n      transition: background 0.2s ease;\n    }\n\n    :host(:hover)::before {\n      background: rgba(255, 255, 255, 0.1);\n    }\n\n    .channel-title {\n      position: absolute;\n      bottom: var(--padding-2);\n      left: var(--padding-2);\n      padding: var(--padding-1) var(--padding-2);\n      color: white;\n      font-size: 15px;\n      font-weight: 500;\n      text-overflow: ellipsis;\n      border-radius: 4px;\n\n      @container (max-width: 480px) {\n        font-size: 13px;\n      }\n    }\n  </style>\n  <slot></slot>\n";
 var Ut = /* @__PURE__ */ new WeakMap(), Wt = class extends HTMLElement {
 	constructor() {
 		super(), d(this, Ut, void 0), e(this, "lastThumbnailUpdate", void 0);
@@ -700,7 +700,7 @@ e(Wt, "observedAttributes", [
 //#endregion
 //#region ../../libs/player-next/src/components/ChannelGrid.ts
 var Gt = document.createElement("template");
-Gt.innerHTML = "\n  <style>\n    :host {\n      cursor: default;\n      display: flex;\n      flex-direction: column;\n      box-sizing: border-box;\n      border-radius: 4px;\n      background-color: var(--bg-subtle);\n      padding: var(--padding-2);\n\n      position: absolute;\n      bottom: 0;\n      right: 0;\n\n      z-index: 5;\n      width: 100%;\n      max-height: 75%;\n\n      @container (width < 768px) {\n        padding: var(--padding-1);\n      }\n    }\n\n    :host([hidden]) {\n      display: none;\n    }\n\n    .wrapper {\n      overflow: auto;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n      height: 100%;\n    }\n\n    .wrapper::-webkit-scrollbar {\n      display: none;\n    }\n\n    slot#grid {\n      display: grid;\n      gap: var(--padding-2);\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n\n      @container (width < 768px) {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: var(--padding-1);\n      }\n      @container (width < 1024px) and (width >= 768px) {\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n      }\n      @container (width >= 1024px) {\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n      }\n    }\n\n    /* Smart TV */\n    @media (width < 1024px) and (width >= 768px) and (-webkit-min-device-pixel-ratio: 2) {\n      slot#grid {\n        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;\n      }\n    }\n\n    :host([mode=\"list\"]) slot#grid {\n      grid-template-columns: repeat(1, minmax(0, 1fr));\n    }\n  </style>\n\n  <div class=\"wrapper\">\n    <slot name=\"grid\" id=\"grid\"></slot>\n  </div>\n";
+Gt.innerHTML = "\n  <style>\n    :host {\n      cursor: default;\n      display: flex;\n      flex-direction: column;\n      box-sizing: border-box !important;\n      border-radius: 4px;\n      background-color: var(--bg-subtle);\n      padding: var(--padding-2) !important;\n\n      position: absolute;\n      bottom: 0;\n      right: 0;\n\n      z-index: 5;\n      width: 100%;\n      max-height: 75%;\n\n      @container (width < 768px) {\n        padding: var(--padding-1) !important;\n      }\n    }\n\n    :host([hidden]) {\n      display: none;\n    }\n\n    .wrapper {\n      overflow: auto;\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n      height: 100%;\n    }\n\n    .wrapper::-webkit-scrollbar {\n      display: none;\n    }\n\n    slot#grid {\n      display: grid;\n      gap: var(--padding-2);\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n\n      @container (width < 768px) {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: var(--padding-1);\n      }\n      @container (width < 1024px) and (width >= 768px) {\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n      }\n      @container (width >= 1024px) {\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n      }\n    }\n\n    /* Smart TV */\n    @media (width < 1024px) and (width >= 768px) and (-webkit-min-device-pixel-ratio: 2) {\n      slot#grid {\n        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;\n      }\n    }\n\n    :host([mode=\"list\"]) slot#grid {\n      grid-template-columns: repeat(1, minmax(0, 1fr));\n    }\n  </style>\n\n  <div class=\"wrapper\">\n    <slot name=\"grid\" id=\"grid\"></slot>\n  </div>\n";
 var Kt = /* @__PURE__ */ new WeakMap(), qt = /* @__PURE__ */ new WeakMap(), Jt = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), Yt = /* @__PURE__ */ new WeakMap(), Xt = /* @__PURE__ */ new WeakMap(), Zt = /* @__PURE__ */ new WeakMap(), Qt = /* @__PURE__ */ new WeakMap(), $t = /* @__PURE__ */ new WeakMap(), D = /* @__PURE__ */ new WeakSet(), en = class extends HTMLElement {
 	constructor() {
 		super(), h(this, D), d(this, Kt, null), d(this, qt, null), d(this, Jt, []), d(this, T, []), d(this, E, void 0), d(this, Yt, void 0), d(this, Xt, void 0), d(this, Zt, void 0), d(this, Qt, void 0), d(this, $t, void 0), e(this, "handleEvent", (e) => {
@@ -1035,7 +1035,7 @@ var In = class extends fe {
 				default: break;
 			}
 		}), e(this, "onAirPlayPlaybackChanged", () => {
-			window.clearTimeout(this.connectingTimeout), this.element.webkitCurrentPlaybackTargetIsWireless ? (this.emit("connected"), this.element.style.display = "block", this.element.paused && this.element.play()) : (this.emit("disconnected"), this.element.pause(), this.element.src = "", this.element.src = this.hlsUrl, this.element.style.display = "none");
+			window.clearTimeout(this.connectingTimeout), this.element.webkitCurrentPlaybackTargetIsWireless ? (this.emit("connected"), this.element.style.display = "block", this.element.paused && this.element.play().catch(le)) : (this.emit("disconnected"), this.element.pause(), this.element.src = "", this.element.src = this.hlsUrl, this.element.style.display = "none");
 		}), this.config = t, this.hlsUrl = this.getHlsUrl(), this.element = document.createElement("video"), this.element.style.position = "absolute", this.element.style.top = "0", this.element.style.bottom = "0", this.element.style.left = "0", this.element.style.right = "0", this.element.style.width = "100%", this.element.style.height = "100%", this.element.style.zIndex = "1001", this.element.style.display = "none", this.element.id = "vindral-airplay-element", this.element.slot = "overlay", this.element.playsInline = !0, this.element.controls = !0, this.element.preload = "metadata", this.element.addEventListener("webkitplaybacktargetavailabilitychanged", this.onAirPlayAvailable), this.element.addEventListener("webkitcurrentplaybacktargetiswirelesschanged", this.onAirPlayPlaybackChanged), this.config.container.appendChild(this.element);
 	}
 	get casting() {
@@ -1560,6 +1560,7 @@ Mr.innerHTML = `
       --bg-component: var(--vindral-bg-component, #222222);
       --bg-component-hover: var(--vindral-bg-component-hover, #2a2a2a);
       --bg-component-active: var(--vindral-bg-component-active, #313131);
+      --accent: var(--vindral-accent, oklch(54.6% 0.245 262.881));
 
       --padding-1: var(--vindral-padding-1, 4px);
       --padding-2: var(--vindral-padding-2, 8px);
@@ -1704,7 +1705,7 @@ Mr.innerHTML = `
       ):not([${g.IS_CASTING}]
       ):not([${g.MEDIA}="audio"])
     )
-    #ui > * {
+    #ui > slot::slotted(*) {
       pointer-events: none;
     }
 
@@ -1761,7 +1762,7 @@ var Nr = [
 ], Pr = /* @__PURE__ */ new WeakMap(), Fr = /* @__PURE__ */ new WeakMap(), Ir = /* @__PURE__ */ new WeakMap(), Lr = /* @__PURE__ */ new WeakMap(), Rr = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), zr = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), Br = /* @__PURE__ */ new WeakMap(), Vr = /* @__PURE__ */ new WeakMap(), Hr = /* @__PURE__ */ new WeakMap(), Ur = /* @__PURE__ */ new WeakMap(), Wr = /* @__PURE__ */ new WeakMap(), R = /* @__PURE__ */ new WeakMap(), Gr = /* @__PURE__ */ new WeakMap(), Kr = /* @__PURE__ */ new WeakMap(), qr = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), Jr = /* @__PURE__ */ new WeakMap(), Yr = /* @__PURE__ */ new WeakMap(), Xr = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), Zr = /* @__PURE__ */ new WeakMap(), Qr = /* @__PURE__ */ new WeakMap(), $r = /* @__PURE__ */ new WeakMap(), V = /* @__PURE__ */ new WeakSet(), ei = /* @__PURE__ */ new WeakMap(), ti = /* @__PURE__ */ new WeakMap(), ni = /* @__PURE__ */ new WeakMap(), ri = /* @__PURE__ */ new WeakMap(), ii = /* @__PURE__ */ new WeakMap(), ai = /* @__PURE__ */ new WeakMap(), oi = /* @__PURE__ */ new WeakMap(), si = /* @__PURE__ */ new WeakMap(), ci = /* @__PURE__ */ new WeakMap(), li = /* @__PURE__ */ new WeakMap(), ui = /* @__PURE__ */ new WeakMap(), di = /* @__PURE__ */ new WeakMap(), fi = /* @__PURE__ */ new WeakMap(), pi = /* @__PURE__ */ new WeakMap(), mi = /* @__PURE__ */ new WeakMap(), hi = /* @__PURE__ */ new WeakMap(), gi = /* @__PURE__ */ new WeakMap(), _i = /* @__PURE__ */ new WeakMap(), vi = /* @__PURE__ */ new WeakMap(), yi = /* @__PURE__ */ new WeakMap(), bi = /* @__PURE__ */ new WeakMap(), xi = /* @__PURE__ */ new WeakMap(), Si = /* @__PURE__ */ new WeakMap(), Ci = /* @__PURE__ */ new WeakMap(), wi = /* @__PURE__ */ new WeakMap(), Ti = /* @__PURE__ */ new WeakMap(), Ei = /* @__PURE__ */ new WeakMap(), Di = /* @__PURE__ */ new WeakMap(), Oi = /* @__PURE__ */ new WeakMap(), ki = /* @__PURE__ */ new WeakMap(), Ai = /* @__PURE__ */ new WeakMap(), ji = /* @__PURE__ */ new WeakMap(), Mi = class extends HTMLElement {
 	constructor() {
 		var t;
-		super(), h(this, V), d(this, Pr, /* @__PURE__ */ new Map()), d(this, Fr, 2e3), d(this, Ir, null), d(this, Lr, null), d(this, Rr, void 0), d(this, F, void 0), d(this, I, void 0), d(this, zr, void 0), d(this, L, void 0), d(this, Br, va._), d(this, Vr, void 0), d(this, Hr, void 0), d(this, Ur, void 0), d(this, Wr, void 0), d(this, R, void 0), d(this, Gr, void 0), d(this, Kr, void 0), d(this, qr, void 0), d(this, z, void 0), d(this, Jr, void 0), d(this, Yr, void 0), d(this, Xr, void 0), d(this, B, void 0), d(this, Zr, null), d(this, Qr, !1), d(this, $r, null), d(this, ei, (e) => {
+		super(), h(this, V), d(this, Pr, /* @__PURE__ */ new Map()), d(this, Fr, 2e3), d(this, Ir, null), d(this, Lr, null), d(this, Rr, void 0), d(this, F, void 0), d(this, I, void 0), d(this, zr, void 0), d(this, L, void 0), d(this, Br, ya._), d(this, Vr, void 0), d(this, Hr, void 0), d(this, Ur, void 0), d(this, Wr, void 0), d(this, R, void 0), d(this, Gr, void 0), d(this, Kr, void 0), d(this, qr, void 0), d(this, z, void 0), d(this, Jr, void 0), d(this, Yr, void 0), d(this, Xr, void 0), d(this, B, void 0), d(this, Zr, null), d(this, Qr, !1), d(this, $r, null), d(this, ei, (e) => {
 			let t = e.filter((e) => {
 				var t;
 				return (t = e.video) == null ? void 0 : t.width;
@@ -1847,7 +1848,7 @@ var Nr = [
 					m(Qr, this, !1);
 					return;
 				}
-				m(Qr, this, !1), f(V, this, ca).call(this);
+				m(Qr, this, !1), f(V, this, la).call(this);
 			}
 		}), d(this, xi, 0), e(this, "handleEvent", (e) => {
 			switch (e.type) {
@@ -1861,19 +1862,19 @@ var Nr = [
 					f(V, this, $i).call(this, e);
 					break;
 				case "mouseleave":
-					f(V, this, oa).call(this);
+					f(V, this, sa).call(this);
 					break;
 				case "dblclick":
-					f(V, this, ea).call(this, e);
+					f(V, this, ta).call(this, e);
 					break;
 				case "mousemove":
-					f(V, this, ta).call(this, e);
+					f(V, this, na).call(this, e);
 					break;
 				case "keydown":
 					p(wi, this).call(this, e);
 					break;
 				case "keyup":
-					f(V, this, oa).call(this), p(Ci, this).call(this, e);
+					f(V, this, sa).call(this), p(Ci, this).call(this, e);
 					break;
 			}
 		}), d(this, Si, (e) => {
@@ -1921,7 +1922,7 @@ var Nr = [
 					}
 					break;
 				case _.CHANNEL_GRID_OPENED:
-					p(Zr, this) === null && f(V, this, ra).call(this);
+					p(Zr, this) === null && f(V, this, ia).call(this);
 					break;
 				case _.CHANNEL_GRID_CLOSED:
 					p(Zr, this) !== null && (clearTimeout(p(Zr, this)), m(Zr, this, null));
@@ -1973,7 +1974,7 @@ var Nr = [
 				this.removeEventListener("keyup", this);
 				return;
 			}
-			f(V, this, na).call(this, e);
+			f(V, this, ra).call(this, e);
 		}), d(this, wi, (e) => {
 			let { metaKey: t, altKey: n, key: r } = e;
 			t || n || !Nr.includes(r) || this.addEventListener("keyup", this, { once: !0 });
@@ -1981,11 +1982,11 @@ var Nr = [
 			this.removeAttribute(g.TIMESHIFT_POSITION), this.handleTimeShiftUpdate(!1);
 		}), d(this, Ei, (e) => {
 			var t;
-			p(L, this) || f(V, this, Li).call(this), p(I, this) !== p(L, this) && (e && f(V, this, la).call(this), m(I, this, p(L, this)), f(V, this, Fi).call(this), f(V, this, Ii).call(this), f(V, this, Vi).call(this), (t = p(F, this)) == null || t.pause(), m(Qr, this, e));
+			p(L, this) || f(V, this, Li).call(this), p(I, this) !== p(L, this) && (e && f(V, this, ua).call(this), m(I, this, p(L, this)), f(V, this, Fi).call(this), f(V, this, Ii).call(this), f(V, this, Vi).call(this), (t = p(F, this)) == null || t.pause(), m(Qr, this, e));
 		}), d(this, Di, (e) => {
 			var t, n, r, i;
-			e && f(V, this, la).call(this), (t = p(L, this)) == null || t.hide(), m(I, this, p(zr, this)), f(V, this, Vi).call(this), this.hasAttribute(g.PAUSED) ? (n = p(I, this)) == null || n.pause() : (r = p(I, this)) == null || r.play(), f(V, this, zi).call(this), f(V, this, Pi).call(this), (i = p(L, this)) == null || i.pause(), e && (m(Qr, this, !1), setTimeout(() => {
-				f(V, this, ca).call(this);
+			e && f(V, this, ua).call(this), (t = p(L, this)) == null || t.hide(), m(I, this, p(zr, this)), f(V, this, Vi).call(this), this.hasAttribute(g.PAUSED) ? (n = p(I, this)) == null || n.pause() : (r = p(I, this)) == null || r.play(), f(V, this, zi).call(this), f(V, this, Pi).call(this), (i = p(L, this)) == null || i.pause(), e && (m(Qr, this, !1), setTimeout(() => {
+				f(V, this, la).call(this);
 			}, 100));
 		}), e(this, "handleTimeShiftUpdate", (e) => {
 			let t = this.hasAttribute(g.IS_PIP);
@@ -2020,7 +2021,7 @@ var Nr = [
 	}
 	disconnectedCallback() {
 		var e, t, n, r, i;
-		f(V, this, Zi).call(this), f(V, this, ga).call(this), (e = p(F, this)) == null || e.unload(), (t = p(R, this)) == null || t.unload(), (n = p(Gr, this)) == null || n.unload(), (r = p(Kr, this)) == null || r.unload(), (i = p(z, this)) == null || i.unload(), f(V, this, Ri).call(this);
+		f(V, this, Zi).call(this), f(V, this, _a).call(this), (e = p(F, this)) == null || e.unload(), (t = p(R, this)) == null || t.unload(), (n = p(Gr, this)) == null || n.unload(), (r = p(Kr, this)) == null || r.unload(), (i = p(z, this)) == null || i.unload(), f(V, this, Ri).call(this);
 		for (let e of Object.values(_)) this.removeEventListener(e, p(Si, this));
 		f(V, this, Fi).call(this), p(Ir, this) && (clearTimeout(p(Ir, this)), m(Ir, this, null)), this.disconnectListener(this);
 	}
@@ -2068,7 +2069,7 @@ var Nr = [
 					}
 					break;
 				case g.DEBUG_PANEL_OPEN:
-					v(n) ? f(V, this, H).call(this, g.DEBUG_PANEL_OPEN, "") : f(V, this, U).call(this, g.DEBUG_PANEL_OPEN), f(V, this, ma).call(this);
+					v(n) ? f(V, this, H).call(this, g.DEBUG_PANEL_OPEN, "") : f(V, this, U).call(this, g.DEBUG_PANEL_OPEN), f(V, this, ha).call(this);
 					break;
 				case "user-interacting":
 					v(n) ? f(V, this, H).call(this, g.USER_INTERACTING, "") : f(V, this, U).call(this, g.USER_INTERACTING);
@@ -2089,10 +2090,10 @@ var Nr = [
 					}
 					break;
 				case "ui-locked":
-					v(n) ? f(V, this, aa).call(this) : f(V, this, oa).call(this);
+					v(n) ? f(V, this, oa).call(this) : f(V, this, sa).call(this);
 					break;
 				case "is-fullscreen":
-					v(n) ? f(V, this, ua).call(this) : f(V, this, da).call(this);
+					v(n) ? f(V, this, da).call(this) : f(V, this, fa).call(this);
 					break;
 				case "abr-enabled":
 					{
@@ -2113,7 +2114,7 @@ var Nr = [
 					m(Wr, this, n), v(n) ? f(V, this, H).call(this, g.MAX_INITIAL_BITRATE, n) : f(V, this, U).call(this, g.MAX_INITIAL_BITRATE);
 					break;
 				case "is-pip":
-					v(n) ? f(V, this, ca).call(this) : f(V, this, la).call(this);
+					v(n) ? f(V, this, la).call(this) : f(V, this, ua).call(this);
 					break;
 				case "is-airplaying":
 					if (v(n)) {
@@ -2127,7 +2128,7 @@ var Nr = [
 				case "is-casting":
 					if (v(n)) {
 						var te, u;
-						(te = p(Gr, this)) != null && te.isFullscreen() && f(V, this, da).call(this), (u = p(F, this)) == null || u.pause();
+						(te = p(Gr, this)) != null && te.isFullscreen() && f(V, this, fa).call(this), (u = p(F, this)) == null || u.pause();
 					} else if (!document.hidden) {
 						var ne;
 						(ne = p(F, this)) == null || ne.play();
@@ -2186,7 +2187,7 @@ var Nr = [
 				g.USER_INTERACTING,
 				g.PAUSED,
 				g.HIDE_UI_ON_PAUSE
-			].includes(e) && f(V, this, sa).call(this);
+			].includes(e) && f(V, this, ca).call(this);
 		}
 	}
 	connectListener(e) {
@@ -2433,7 +2434,7 @@ function Yi(e) {
 	}
 }
 function Xi() {
-	let e = () => (customElements.get("vindral-debug-panel") || import("./ABGzdpO4.js").then((e) => e.n).then(({ registerDebugComponents: e }) => e()), this.setAttribute(g.DEBUG_PANEL_OPEN, ""), p(F, this));
+	let e = () => (customElements.get("vindral-debug-panel") || import("./BFPgdE3l.js").then((e) => e.n).then(({ registerDebugComponents: e }) => e()), this.setAttribute(g.DEBUG_PANEL_OPEN, ""), p(F, this));
 	window._vindralDebug = e, m($r, this, e);
 }
 function Zi() {
@@ -2441,19 +2442,25 @@ function Zi() {
 	p($r, this) && e._vindralDebug === p($r, this) && delete e._vindralDebug, m($r, this, null);
 }
 function Qi(e) {
-	e.pointerType !== "mouse" && e.timeStamp - p(xi, this) < 250 || (f(V, this, aa).call(this), p(Ir, this) && clearTimeout(p(Ir, this)), e.target instanceof HTMLElement && ([this, p(Lr, this)].includes(e.target) || e.target.localName === "vindral-scroll-overlay") && f(V, this, oa).call(this));
+	e.pointerType !== "mouse" && e.timeStamp - p(xi, this) < 250 || (f(V, this, oa).call(this), p(Ir, this) && clearTimeout(p(Ir, this)), e.target instanceof HTMLElement && ([this, p(Lr, this)].includes(e.target) || e.target.localName === "vindral-scroll-overlay") && f(V, this, sa).call(this));
 }
 function $i(e) {
 	let t = this.hasAttribute(g.USER_INTERACTING);
-	e.pointerType === "touch" && e.target instanceof HTMLElement ? [this, p(Lr, this)].includes(e.target) && t ? f(V, this, ia).call(this) : f(V, this, oa).call(this) : e.composedPath().some((e) => e instanceof HTMLElement && ["vindral-play-button"].includes(e == null ? void 0 : e.localName)) && f(V, this, oa).call(this);
+	e.pointerType === "touch" && e.target instanceof HTMLElement ? [this, p(Lr, this)].includes(e.target) && t ? f(V, this, aa).call(this) : f(V, this, sa).call(this) : e.composedPath().some((e) => e instanceof HTMLElement && ["vindral-play-button"].includes(e == null ? void 0 : e.localName)) && f(V, this, sa).call(this);
 }
 function ea(e) {
-	!p(Gr, this) || e.target instanceof x || e.target instanceof Re || e.target instanceof jr || (this.hasAttribute(g.FULLSCREEN) ? this.removeAttribute(g.FULLSCREEN) : this.setAttribute(g.FULLSCREEN, ""));
+	switch (e) {
+		case "dblclick-fullscreen": return b(this.getAttribute(g.DOUBLE_CLICK_FULLSCREEN_ENABLED), !0);
+		default: return !0;
+	}
 }
 function ta(e) {
-	this.hasAttribute(g.USER_INTERACTING) || f(V, this, oa).call(this);
+	f(V, this, ea).call(this, "dblclick-fullscreen") && (!p(Gr, this) || e.target instanceof x || e.target instanceof Re || e.target instanceof jr || (this.hasAttribute(g.FULLSCREEN) ? this.removeAttribute(g.FULLSCREEN) : this.setAttribute(g.FULLSCREEN, "")));
 }
 function na(e) {
+	this.hasAttribute(g.USER_INTERACTING) || f(V, this, sa).call(this);
+}
+function ra(e) {
 	var t;
 	let { metaKey: n, altKey: r, key: i } = e;
 	if (n || r || !Nr.includes(i)) return;
@@ -2474,7 +2481,7 @@ function na(e) {
 			break;
 	}
 }
-function ra() {
+function ia() {
 	var e = this;
 	return t(function* () {
 		if (!p(F, e) || !p(Hr, e)) return;
@@ -2485,17 +2492,17 @@ function ra() {
 			let n = yield p(F, e).getApiClient().getChannels(p(Hr, e));
 			f(V, e, H).call(e, g.CHANNELS, JSON.stringify(n));
 		}
-		m(Zr, e, window.setTimeout(() => void f(V, e, ra).call(e), 1e4));
+		m(Zr, e, window.setTimeout(() => void f(V, e, ia).call(e), 1e4));
 	})();
 }
-function ia() {
+function aa() {
 	!this.hasAttribute(g.USER_INTERACTING) || this.hasAttribute(g.UI_LOCKED) || (this.dispatchEvent(new CustomEvent("user-interacting", {
 		bubbles: !0,
 		composed: !0,
 		detail: { active: !1 }
 	})), this.removeAttribute(g.USER_INTERACTING));
 }
-function aa() {
+function oa() {
 	this.hasAttribute(g.USER_INTERACTING) || requestAnimationFrame(() => {
 		this.setAttribute(g.USER_INTERACTING, ""), this.dispatchEvent(new CustomEvent("user-interacting", {
 			bubbles: !0,
@@ -2504,41 +2511,41 @@ function aa() {
 		}));
 	});
 }
-function oa() {
-	f(V, this, aa).call(this), p(Ir, this) && clearTimeout(p(Ir, this)), p(Fr, this) && m(Ir, this, self.setTimeout(() => {
-		f(V, this, ia).call(this);
+function sa() {
+	f(V, this, oa).call(this), p(Ir, this) && clearTimeout(p(Ir, this)), p(Fr, this) && m(Ir, this, self.setTimeout(() => {
+		f(V, this, aa).call(this);
 	}, p(Fr, this)));
 }
-function sa() {
+function ca() {
 	var e;
 	let t = getComputedStyle(this).getPropertyValue("--vindral-subtitle-offset") || "0px";
 	(e = p(F, this)) == null || (e = e.mediaElement) == null || e.style.setProperty("--vindral-subtitle-offset", t);
 }
-function ca() {
+function la() {
 	var e;
-	f(V, this, Vi).call(this), f(V, this, fa).call(this), (e = p(R, this)) == null || e.request().catch((e) => {
+	f(V, this, Vi).call(this), f(V, this, pa).call(this), (e = p(R, this)) == null || e.request().catch((e) => {
 		p(B, this).warn("Failed to enter picture in picture:", e);
 	});
 }
-function la() {
+function ua() {
 	var e;
 	(e = p(R, this)) == null || e.exit().catch((e) => {
 		p(B, this).warn("Failed to exit picture in picture:", e);
 	});
 }
-function ua() {
+function da() {
 	let e = f(V, this, Wi).call(this);
 	if (!e) {
 		console.warn("No fullscreen target available"), this.setAttribute(g.FULLSCREEN_FALLBACK, ""), f(V, this, H).call(this, g.FULLSCREEN, "");
 		return;
 	}
-	e != null && e.isFullscreenApiSupported() ? (f(V, this, fa).call(this), e == null || e.request().then(() => {
+	e != null && e.isFullscreenApiSupported() ? (f(V, this, pa).call(this), e == null || e.request().then(() => {
 		p(ki, this).call(this);
 	}).catch((e) => {
 		p(B, this).warn("Failed to enter fullscreen:", e);
 	})) : (this.setAttribute(g.FULLSCREEN_FALLBACK, ""), f(V, this, H).call(this, g.FULLSCREEN, ""));
 }
-function da() {
+function fa() {
 	let e = f(V, this, Wi).call(this);
 	e != null && e.isFullscreenApiSupported() ? e == null || e.exit().then(() => {
 		p(Ai, this).call(this);
@@ -2546,22 +2553,22 @@ function da() {
 		p(B, this).warn("Failed to exit fullscreen:", e);
 	}) : (this.removeAttribute(g.FULLSCREEN_FALLBACK), f(V, this, U).call(this, g.FULLSCREEN));
 }
-function fa() {
-	p(F, this) && p(F, this).emitter.emit("ios-hack: reset size");
-}
 function pa() {
-	return this.hasAttribute(g.DEBUG_PANEL_OPEN);
+	p(F, this) && p(F, this).emitter.emit("ios-hack: reset size");
 }
 function ma() {
-	f(V, this, pa).call(this) ? f(V, this, ha).call(this) : f(V, this, ga).call(this);
+	return this.hasAttribute(g.DEBUG_PANEL_OPEN);
 }
 function ha() {
-	p(ji, this) === null && (f(V, this, _a).call(this), m(ji, this, window.setInterval(() => f(V, this, _a).call(this), 1e3)));
+	f(V, this, ma).call(this) ? f(V, this, ga).call(this) : f(V, this, _a).call(this);
 }
 function ga() {
-	p(ji, this) && (clearInterval(p(ji, this)), m(ji, this, null)), this.removeAttribute(g.DRIFT), f(V, this, U).call(this, g.DRIFT), f(V, this, U).call(this, g.PLAYBACK_LATENCY), f(V, this, U).call(this, g.CONNECTION_STATE);
+	p(ji, this) === null && (f(V, this, va).call(this), m(ji, this, window.setInterval(() => f(V, this, va).call(this), 1e3)));
 }
 function _a() {
+	p(ji, this) && (clearInterval(p(ji, this)), m(ji, this, null)), this.removeAttribute(g.DRIFT), f(V, this, U).call(this, g.DRIFT), f(V, this, U).call(this, g.PLAYBACK_LATENCY), f(V, this, U).call(this, g.CONNECTION_STATE);
+}
+function va() {
 	if (!p(F, this)) return;
 	try {
 		let e = p(F, this).getStatistics().drift;
@@ -2623,8 +2630,8 @@ e(Mi, "observedAttributes", [
 	"auto-instance-enabled",
 	"language"
 ]);
-var va = { _: "https://lb.cdn.vindral.com" }, ya, ba = document.createElement("template");
-ba.innerHTML = `
+var ya = { _: "https://lb.cdn.vindral.com" }, ba, xa = document.createElement("template");
+xa.innerHTML = `
   <style>
     :host {
       display: var(--fullscreen-button-display);
@@ -2648,10 +2655,10 @@ ba.innerHTML = `
 </slot>
   </slot>
 `;
-var xa = class extends x {
+var Sa = class extends x {
 	constructor() {
 		var e;
-		super(), (e = this.shadowRoot) == null || e.appendChild(ba.content.cloneNode(!0));
+		super(), (e = this.shadowRoot) == null || e.appendChild(xa.content.cloneNode(!0));
 	}
 	connectedCallback() {
 		super.connectedCallback(), this.setAttribute("aria-label", this.isFullscreen ? "Exit fullscreen" : "Enter fullscreen");
@@ -2676,57 +2683,57 @@ var xa = class extends x {
 		}));
 	}
 };
-ya = xa, e(xa, "observedAttributes", [...y(ya, "observedAttributes", ya), g.FULLSCREEN]);
+ba = Sa, e(Sa, "observedAttributes", [...y(ba, "observedAttributes", ba), g.FULLSCREEN]);
 //#endregion
 //#region ../../libs/player-next/src/components/LanguageMenu.ts
-var Sa, Ca = "\n    <svg  xmlns=\"http://www.w3.org/2000/svg\"  width=\"24\"  height=\"24\"  viewBox=\"0 0 24 24\"  fill=\"none\"  stroke=\"currentColor\"  stroke-width=\"2\"  stroke-linecap=\"round\"  stroke-linejoin=\"round\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M4 5h7\" /><path d=\"M9 3v2c0 4.418 -2.239 8 -5 8\" /><path d=\"M5 9c0 2.144 2.952 3.908 6.7 4\" /><path d=\"M12 20l4 -9l4 9\" /><path d=\"M19.1 18h-6.2\" /></svg>\n", wa = document.createElement("template");
-wa.innerHTML = `
+var Ca, wa = "\n    <svg  xmlns=\"http://www.w3.org/2000/svg\"  width=\"24\"  height=\"24\"  viewBox=\"0 0 24 24\"  fill=\"none\"  stroke=\"currentColor\"  stroke-width=\"2\"  stroke-linecap=\"round\"  stroke-linejoin=\"round\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M4 5h7\" /><path d=\"M9 3v2c0 4.418 -2.239 8 -5 8\" /><path d=\"M5 9c0 2.144 2.952 3.908 6.7 4\" /><path d=\"M12 20l4 -9l4 9\" /><path d=\"M19.1 18h-6.2\" /></svg>\n", Ta = document.createElement("template");
+Ta.innerHTML = `
   <style>
     :host(:not([hidden])) {
       display: var(--language-menu-display);
     }
   </style>
 
-  <slot name="button">${Ca}</slot>
+  <slot name="button">${wa}</slot>
   <slot name="listbox" hidden>
     <vindral-language-menu-list id="listbox" part="listbox"></vindral-language-menu-list>
   </slot>
 `;
-var Ta = /* @__PURE__ */ new WeakSet(), Ea = class extends Re {
+var Ea = /* @__PURE__ */ new WeakSet(), Da = class extends Re {
 	constructor() {
 		var e, t, n, r;
-		super(), h(this, Ta), (e = this.shadowRoot) == null || e.appendChild(wa.content.cloneNode(!0)), this.button = (t = this.shadowRoot) == null ? void 0 : t.querySelector("slot[name=button]"), this.listbox = (n = this.shadowRoot) == null ? void 0 : n.querySelector("[part=listbox]"), this.listboxSlot = (r = this.shadowRoot) == null ? void 0 : r.querySelector("slot[name=listbox]");
+		super(), h(this, Ea), (e = this.shadowRoot) == null || e.appendChild(Ta.content.cloneNode(!0)), this.button = (t = this.shadowRoot) == null ? void 0 : t.querySelector("slot[name=button]"), this.listbox = (n = this.shadowRoot) == null ? void 0 : n.querySelector("[part=listbox]"), this.listboxSlot = (r = this.shadowRoot) == null ? void 0 : r.querySelector("slot[name=listbox]");
 	}
 	connectedCallback() {
-		super.connectedCallback(), f(Ta, this, Da).call(this), this.setAttribute("aria-label", "Languages");
+		super.connectedCallback(), f(Ea, this, Oa).call(this), this.setAttribute("aria-label", "Languages");
 	}
 	attributeChangedCallback(e, t, n) {
-		super.attributeChangedCallback(e, t, n), (e === g.LANGUAGES || e === g.TEXT_TRACKS) && f(Ta, this, Da).call(this);
+		super.attributeChangedCallback(e, t, n), (e === g.LANGUAGES || e === g.TEXT_TRACKS) && f(Ea, this, Oa).call(this);
 	}
 };
-Sa = Ea;
-function Da() {
+Ca = Da;
+function Oa() {
 	let e = (e) => (e ? JSON.parse(e) : []).length < 2, t = e(this.getAttribute(g.LANGUAGES)), n = e(this.getAttribute(g.TEXT_TRACKS));
 	t && n ? this.setAttribute("hidden", "") : this.removeAttribute("hidden");
 }
-e(Ea, "observedAttributes", [
-	...y(Sa, "observedAttributes", Sa),
+e(Da, "observedAttributes", [
+	...y(Ca, "observedAttributes", Ca),
 	g.LANGUAGES,
 	g.TEXT_TRACKS
 ]);
 //#endregion
 //#region ../../libs/player-next/src/components/LanguageMenuList.ts
-var Oa = document.createElement("template");
-Oa.innerHTML = `
+var ka = document.createElement("template");
+ka.innerHTML = `
   <style>
     :host {
       font: inherit;
       cursor: default;
-      padding: var(--padding-2);
-      padding-top: var(--padding-3);
+      padding: var(--padding-2) !important;
+      padding-top: var(--padding-3) !important;
       border-radius: 0.25em;
       position: absolute;
-      min-width: 140px;
+      min-width: 140px !important;
       background: var(--bg-subtle);
       z-index: 1;
       overflow: auto;
@@ -2831,21 +2838,21 @@ Oa.innerHTML = `
     <div class="menu"></div>
   </div>
 `;
-var ka = /* @__PURE__ */ new WeakMap(), Aa = /* @__PURE__ */ new WeakMap(), ja = /* @__PURE__ */ new WeakMap(), Ma = /* @__PURE__ */ new WeakMap(), Na = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), Pa = /* @__PURE__ */ new WeakMap(), Fa = /* @__PURE__ */ new WeakMap(), Ia = /* @__PURE__ */ new WeakMap(), La = /* @__PURE__ */ new WeakMap(), Ra = /* @__PURE__ */ new WeakMap(), za = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakSet(), Ba = class extends HTMLElement {
+var Aa = /* @__PURE__ */ new WeakMap(), ja = /* @__PURE__ */ new WeakMap(), Ma = /* @__PURE__ */ new WeakMap(), Na = /* @__PURE__ */ new WeakMap(), Pa = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), Fa = /* @__PURE__ */ new WeakMap(), Ia = /* @__PURE__ */ new WeakMap(), La = /* @__PURE__ */ new WeakMap(), Ra = /* @__PURE__ */ new WeakMap(), za = /* @__PURE__ */ new WeakMap(), Ba = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakSet(), Va = class extends HTMLElement {
 	constructor() {
-		super(), h(this, G), d(this, ka, []), d(this, Aa, []), d(this, ja, void 0), d(this, Ma, void 0), d(this, Na, []), d(this, W, []), d(this, Pa, null), d(this, Fa, null), d(this, Ia, null), d(this, La, null), d(this, Ra, null), d(this, za, null), e(this, "handleEvent", (e) => {
+		super(), h(this, G), d(this, Aa, []), d(this, ja, []), d(this, Ma, void 0), d(this, Na, void 0), d(this, Pa, []), d(this, W, []), d(this, Fa, null), d(this, Ia, null), d(this, La, null), d(this, Ra, null), d(this, za, null), d(this, Ba, null), e(this, "handleEvent", (e) => {
 			switch (e.type) {
 				case "keydown":
-					f(G, this, Ya).call(this, e);
+					f(G, this, Xa).call(this, e);
 					break;
 			}
-		}), this.attachShadow({ mode: "open" }).appendChild(Oa.content.cloneNode(!0));
+		}), this.attachShadow({ mode: "open" }).appendChild(ka.content.cloneNode(!0));
 	}
 	connectedCallback() {
 		let e = this.getRootNode();
 		if (e instanceof ShadowRoot) {
 			var t, n, r;
-			m(Ia, this, e.host.closest("vindral-controller")), (t = p(Ia, this)) == null || t.connectListener(this), m(Pa, this, (n = this.shadowRoot) == null ? void 0 : n.querySelector("#languages .menu")), m(Fa, this, (r = this.shadowRoot) == null ? void 0 : r.querySelector("#text-tracks .menu")), f(G, this, Va).call(this), f(G, this, Ha).call(this), m(La, this, e.host), this.addEventListener("keydown", this);
+			m(La, this, e.host.closest("vindral-controller")), (t = p(La, this)) == null || t.connectListener(this), m(Fa, this, (n = this.shadowRoot) == null ? void 0 : n.querySelector("#languages .menu")), m(Ia, this, (r = this.shadowRoot) == null ? void 0 : r.querySelector("#text-tracks .menu")), f(G, this, Ha).call(this), f(G, this, Ua).call(this), m(Ra, this, e.host), this.addEventListener("keydown", this);
 		}
 	}
 	disconnectedCallback() {
@@ -2855,16 +2862,16 @@ var ka = /* @__PURE__ */ new WeakMap(), Aa = /* @__PURE__ */ new WeakMap(), ja =
 		t !== n && (e === g.LANGUAGES && n && (this.languages = JSON.parse(n)), e === g.TEXT_TRACKS && n && (this.textTracks = JSON.parse(n)), e === g.LANGUAGE && (this.language = n), e === g.TEXT_TRACK && (this.textTrack = n));
 	}
 	set languages(e) {
-		m(ka, this, e), f(G, this, Wa).call(this), f(G, this, Ka).call(this);
+		m(Aa, this, e), f(G, this, Ga).call(this), f(G, this, qa).call(this);
 	}
 	set textTracks(e) {
-		m(Aa, this, e), f(G, this, Ua).call(this), f(G, this, qa).call(this);
+		m(ja, this, e), f(G, this, Wa).call(this), f(G, this, Ja).call(this);
 	}
 	set language(e) {
-		m(ja, this, e), f(G, this, Ka).call(this);
+		m(Ma, this, e), f(G, this, qa).call(this);
 	}
 	set textTrack(e) {
-		m(Ma, this, e), f(G, this, qa).call(this);
+		m(Na, this, e), f(G, this, Ja).call(this);
 	}
 	get keysUsed() {
 		return [
@@ -2881,10 +2888,10 @@ var ka = /* @__PURE__ */ new WeakMap(), Aa = /* @__PURE__ */ new WeakMap(), ja =
 		];
 	}
 	focus() {
-		p(Ra, this) ? p(Ra, this).focus() : p(za, this) && p(za, this).focus();
+		p(za, this) ? p(za, this).focus() : p(Ba, this) && p(Ba, this).focus();
 	}
 };
-function Va() {
+function Ha() {
 	new IntersectionObserver((e) => {
 		e.forEach((e) => {
 			if (e.intersectionRatio !== 1) if (e.intersectionRatio > 0) {
@@ -2893,55 +2900,55 @@ function Va() {
 			} else this.style.height = "auto";
 		});
 	}, {
-		root: p(Ia, this),
+		root: p(La, this),
 		threshold: 0
 	}).observe(this);
 }
-function Ha() {
-	p(Pa, this) && (f(G, this, Wa).call(this), f(G, this, Ka).call(this)), p(Fa, this) && (f(G, this, Ua).call(this), f(G, this, qa).call(this));
-}
 function Ua() {
-	p(Fa, this).innerHTML = "", m(W, this, []);
-	let e = f(G, this, Ga).call(this, "Off", "textTrack", void 0);
-	p(Fa, this).appendChild(e), p(W, this).push({
+	p(Fa, this) && (f(G, this, Ga).call(this), f(G, this, qa).call(this)), p(Ia, this) && (f(G, this, Wa).call(this), f(G, this, Ja).call(this));
+}
+function Wa() {
+	p(Ia, this).innerHTML = "", m(W, this, []);
+	let e = f(G, this, Ka).call(this, "Off", "textTrack", void 0);
+	p(Ia, this).appendChild(e), p(W, this).push({
 		element: e,
 		value: void 0
-	}), p(Aa, this).forEach((e) => {
-		let t = f(G, this, Ga).call(this, e, "textTrack", e);
-		p(Fa, this).appendChild(t), p(W, this).push({
+	}), p(ja, this).forEach((e) => {
+		let t = f(G, this, Ka).call(this, e, "textTrack", e);
+		p(Ia, this).appendChild(t), p(W, this).push({
 			element: t,
 			value: e
 		});
-	}), f(G, this, qa).call(this);
+	}), f(G, this, Ja).call(this);
 }
-function Wa() {
-	p(Pa, this).innerHTML = "", m(Na, this, []), p(ka, this).forEach((e) => {
-		let t = f(G, this, Ga).call(this, e, "language", e);
-		p(Pa, this).appendChild(t), p(Na, this).push({
+function Ga() {
+	p(Fa, this).innerHTML = "", m(Pa, this, []), p(Aa, this).forEach((e) => {
+		let t = f(G, this, Ka).call(this, e, "language", e);
+		p(Fa, this).appendChild(t), p(Pa, this).push({
 			element: t,
 			value: e
 		});
-	}), f(G, this, Ka).call(this);
+	}), f(G, this, qa).call(this);
 }
-function Ga(e, t, n) {
+function Ka(e, t, n) {
 	let r = document.createElement("div");
-	return r.setAttribute("role", "menuitem"), r.textContent = e, r.addEventListener("click", () => f(G, this, Ja).call(this, n, t)), r;
-}
-function Ka() {
-	p(Ra, this) && (p(Ra, this).removeAttribute("aria-selected"), p(Ra, this).tabIndex = -1);
-	let e = p(Na, this).find((e) => e.value === p(ja, this));
-	e && (e.element.setAttribute("aria-selected", "true"), e.element.tabIndex = 0, m(Ra, this, e.element));
+	return r.setAttribute("role", "menuitem"), r.textContent = e, r.addEventListener("click", () => f(G, this, Ya).call(this, n, t)), r;
 }
 function qa() {
 	p(za, this) && (p(za, this).removeAttribute("aria-selected"), p(za, this).tabIndex = -1);
-	let e = p(W, this).find((e) => e.value === p(Ma, this));
-	if (e) e.element.setAttribute("aria-selected", "true"), e.element.tabIndex = 0, m(za, this, e.element);
+	let e = p(Pa, this).find((e) => e.value === p(Ma, this));
+	e && (e.element.setAttribute("aria-selected", "true"), e.element.tabIndex = 0, m(za, this, e.element));
+}
+function Ja() {
+	p(Ba, this) && (p(Ba, this).removeAttribute("aria-selected"), p(Ba, this).tabIndex = -1);
+	let e = p(W, this).find((e) => e.value === p(Na, this));
+	if (e) e.element.setAttribute("aria-selected", "true"), e.element.tabIndex = 0, m(Ba, this, e.element);
 	else {
 		let e = p(W, this).find((e) => e.value === void 0);
-		e && (e.element.setAttribute("aria-selected", "true"), e.element.tabIndex = 0, m(za, this, e.element));
+		e && (e.element.setAttribute("aria-selected", "true"), e.element.tabIndex = 0, m(Ba, this, e.element));
 	}
 }
-function Ja(e, t) {
+function Ya(e, t) {
 	this.dispatchEvent(new Event("change", {
 		bubbles: !0,
 		composed: !0
@@ -2953,36 +2960,36 @@ function Ja(e, t) {
 		detail: e
 	}));
 }
-function Ya(e) {
+function Xa(e) {
 	let { key: t, ctrlKey: n, altKey: r, metaKey: i } = e;
 	if (!(n || r || i) && this.keysUsed.includes(t)) if (e.preventDefault(), e.stopPropagation(), t === "Tab" || t === "Escape") {
 		var a;
-		(a = p(La, this)) == null || a.hide();
+		(a = p(Ra, this)) == null || a.hide();
 	} else if (t === "Enter" || t === " ") {
 		var o;
-		(o = f(G, this, Qa).call(this)) == null || (o = o.element) == null || o.click();
-	} else f(G, this, Xa).call(this, e);
+		(o = f(G, this, $a).call(this)) == null || (o = o.element) == null || o.click();
+	} else f(G, this, Za).call(this, e);
 }
-function Xa(e) {
+function Za(e) {
 	var t;
-	let { key: n } = e, r = [...p(Na, this), ...p(W, this)], i = (t = f(G, this, Qa).call(this)) == null ? r[0] : t;
+	let { key: n } = e, r = [...p(Pa, this), ...p(W, this)], i = (t = f(G, this, $a).call(this)) == null ? r[0] : t;
 	if (!i) return;
 	let a = r.indexOf(i), o = Math.max(0, a);
-	n === "ArrowDown" ? o++ : n === "ArrowUp" ? o-- : n === "ArrowLeft" ? o = f(G, this, Za).call(this, a, "left") : n === "ArrowRight" ? o = f(G, this, Za).call(this, a, "right") : e.key === "Home" ? o = 0 : e.key === "End" && (o = r.length - 1), o < 0 && (o = r.length - 1), o > r.length - 1 && (o = 0);
+	n === "ArrowDown" ? o++ : n === "ArrowUp" ? o-- : n === "ArrowLeft" ? o = f(G, this, Qa).call(this, a, "left") : n === "ArrowRight" ? o = f(G, this, Qa).call(this, a, "right") : e.key === "Home" ? o = 0 : e.key === "End" && (o = r.length - 1), o < 0 && (o = r.length - 1), o > r.length - 1 && (o = 0);
 	let s = r[o];
-	s && (f(G, this, $a).call(this, s.value), s.element.focus());
+	s && (f(G, this, eo).call(this, s.value), s.element.focus());
 }
-function Za(e, t) {
-	let n = p(Na, this).length, r = p(W, this).length;
+function Qa(e, t) {
+	let n = p(Pa, this).length, r = p(W, this).length;
 	return t === "left" ? e < n ? n + r - 1 : e - n - 1 : e >= n ? 0 : e + n;
 }
-function Qa() {
-	return [...p(Na, this), ...p(W, this)].find((e) => e.element.tabIndex === 0);
+function $a() {
+	return [...p(Pa, this), ...p(W, this)].find((e) => e.element.tabIndex === 0);
 }
-function $a(e) {
-	for (let t of [...p(Na, this), ...p(W, this)]) t.element.tabIndex = t.value === e ? 0 : -1;
+function eo(e) {
+	for (let t of [...p(Pa, this), ...p(W, this)]) t.element.tabIndex = t.value === e ? 0 : -1;
 }
-e(Ba, "observedAttributes", [
+e(Va, "observedAttributes", [
 	g.LANGUAGES,
 	g.TEXT_TRACKS,
 	g.LANGUAGE,
@@ -2990,12 +2997,12 @@ e(Ba, "observedAttributes", [
 ]);
 //#endregion
 //#region ../../libs/player-next/src/components/LiveButton.ts
-var eo, to = document.createElement("template");
-to.innerHTML = "\n  <style>\n    :host {\n      display: var(--live-button-display, flex);\n      color: var(--vindral-fg-strong, #eee);\n      border: 1px solid transparent;\n      font-size: 12px;\n      font-weight: bold;\n      cursor: pointer;\n      transition: all 0.2s;\n      min-width: 50px;\n      text-align: center;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .live-text {\n      display: inline-block;\n      vertical-align: middle;\n      margin-left: 4px;\n    }\n\n    slot[name=\"icon\"] svg {\n      width: 5px;\n      height: 5px;\n      flex-shrink: 0;\n    }\n\n    .live-dot {\n      fill: var(--vindral-fg-subtle, #b4b4b4);\n      transition: fill 0.2s;\n      transform-origin: center;\n    }\n\n    /* Red pulsing dot when live */\n    :host(:not([timeshift-position])) .live-dot {\n      fill: #ff0000;\n      animation: pulse-dot 2s ease-in-out infinite alternate;\n    }\n\n    @keyframes pulse-dot {\n      0% {\n        opacity: 0.8;\n        transform: scale(0.9);\n      }\n      100% {\n        opacity: 1;\n        transform: scale(1);\n      }\n    }\n\n    :host([disabled]) {\n      cursor: default;\n      opacity: 1;\n    }\n\n    :host([hidden]) {\n      display: none !important;\n    }\n  </style>\n\n  <slot name=\"icon\">\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"currentColor\">\n    <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" class=\"live-dot\"/>\n  </svg>\n</slot>\n  <span class=\"live-text\">LIVE</span>\n";
-var no = class extends x {
+var to, no = document.createElement("template");
+no.innerHTML = "\n  <style>\n    :host {\n      display: var(--live-button-display, flex);\n      color: var(--vindral-fg-strong, #eee);\n      border: 1px solid transparent !important;\n      font-size: 12px;\n      font-weight: bold;\n      cursor: pointer;\n      transition: all 0.2s;\n      min-width: 50px !important;\n      text-align: center;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .live-text {\n      display: inline-block;\n      vertical-align: middle;\n      margin-left: 4px;\n    }\n\n    slot[name=\"icon\"] svg {\n      width: 5px;\n      height: 5px;\n      flex-shrink: 0;\n    }\n\n    .live-dot {\n      fill: var(--vindral-fg-subtle, #b4b4b4);\n      transition: fill 0.2s;\n      transform-origin: center;\n    }\n\n    /* Red pulsing dot when live */\n    :host(:not([timeshift-position])) .live-dot {\n      fill: #ff0000;\n      animation: pulse-dot 2s ease-in-out infinite alternate;\n    }\n\n    @keyframes pulse-dot {\n      0% {\n        opacity: 0.8;\n        transform: scale(0.9);\n      }\n      100% {\n        opacity: 1;\n        transform: scale(1);\n      }\n    }\n\n    :host([disabled]) {\n      cursor: default;\n      opacity: 1;\n    }\n\n    :host([hidden]) {\n      display: none !important;\n    }\n  </style>\n\n  <slot name=\"icon\">\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"5\" height=\"5\" viewBox=\"0 0 5 5\" fill=\"currentColor\">\n    <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" class=\"live-dot\"/>\n  </svg>\n</slot>\n  <span class=\"live-text\">LIVE</span>\n";
+var ro = class extends x {
 	constructor() {
 		var e;
-		super(), (e = this.shadowRoot) == null || e.appendChild(to.content.cloneNode(!0));
+		super(), (e = this.shadowRoot) == null || e.appendChild(no.content.cloneNode(!0));
 	}
 	connectedCallback() {
 		super.connectedCallback(), this.updateState();
@@ -3026,15 +3033,15 @@ var no = class extends x {
 		}));
 	}
 };
-eo = no, e(no, "observedAttributes", [
-	...y(eo, "observedAttributes", eo),
+to = ro, e(ro, "observedAttributes", [
+	...y(to, "observedAttributes", to),
 	g.TIMESHIFT_POSITION,
 	g.DURATION
 ]);
 //#endregion
 //#region ../../libs/player-next/src/components/MuteButton.ts
-var ro, io = document.createElement("template");
-io.innerHTML = `
+var io, ao = document.createElement("template");
+ao.innerHTML = `
   <style>
     :host {
       display: var(--mute-button-display);
@@ -3062,10 +3069,10 @@ io.innerHTML = `
 </slot>
   </slot>
 `;
-var ao = class extends x {
+var oo = class extends x {
 	constructor() {
 		var e;
-		super(), (e = this.shadowRoot) == null || e.appendChild(io.content.cloneNode(!0));
+		super(), (e = this.shadowRoot) == null || e.appendChild(ao.content.cloneNode(!0));
 	}
 	connectedCallback() {
 		super.connectedCallback(), this.setAttribute("aria-label", this.muted ? "UnMute" : "Mute");
@@ -3090,11 +3097,11 @@ var ao = class extends x {
 		}));
 	}
 };
-ro = ao, e(ao, "observedAttributes", [...y(ro, "observedAttributes", ro), g.MUTED]);
+io = oo, e(oo, "observedAttributes", [...y(io, "observedAttributes", io), g.MUTED]);
 //#endregion
 //#region ../../libs/player-next/src/components/PictureInPictureButton.ts
-var oo, so = document.createElement("template");
-so.innerHTML = `
+var so, co = document.createElement("template");
+co.innerHTML = `
   <style>
     :host {
       display: var(--pip-button-display);
@@ -3108,10 +3115,10 @@ so.innerHTML = `
     <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19 4a3 3 0 0 1 3 3v4a1 1 0 0 1 -2 0v-4a1 1 0 0 0 -1 -1h-14a1 1 0 0 0 -1 1v10a1 1 0 0 0 1 1h6a1 1 0 0 1 0 2h-6a3 3 0 0 1 -3 -3v-10a3 3 0 0 1 3 -3z" /><path d="M20 13a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-5a2 2 0 0 1 -2 -2v-3a2 2 0 0 1 2 -2z" /></svg>
 </slot>
 `;
-var co = class extends x {
+var lo = class extends x {
 	constructor() {
 		var e;
-		super(), (e = this.shadowRoot) == null || e.appendChild(so.content.cloneNode(!0));
+		super(), (e = this.shadowRoot) == null || e.appendChild(co.content.cloneNode(!0));
 	}
 	connectedCallback() {
 		super.connectedCallback(), this.setAttribute("aria-label", this.isPictureInPictureActive ? "Exit picture in picture" : "Enter picture in picture");
@@ -3136,15 +3143,15 @@ var co = class extends x {
 		}));
 	}
 };
-oo = co, e(co, "observedAttributes", [
-	...y(oo, "observedAttributes", oo),
+so = lo, e(lo, "observedAttributes", [
+	...y(so, "observedAttributes", so),
 	g.IS_PIP,
 	g.PIP_AVAILABLE
 ]);
 //#endregion
 //#region ../../libs/player-next/src/components/PlayButton.ts
-var lo, uo = document.createElement("template");
-uo.innerHTML = `
+var uo, fo = document.createElement("template");
+fo.innerHTML = `
   <style>
     :host {
       display: var(--play-button-display);
@@ -3168,10 +3175,10 @@ uo.innerHTML = `
 </slot>
   </slot>
 `;
-var fo = class extends x {
+var po = class extends x {
 	constructor() {
 		var e;
-		super(), (e = this.shadowRoot) == null || e.appendChild(uo.content.cloneNode(!0));
+		super(), (e = this.shadowRoot) == null || e.appendChild(fo.content.cloneNode(!0));
 	}
 	connectedCallback() {
 		super.connectedCallback(), this.setAttribute("aria-label", this.paused ? "Play" : "Pause");
@@ -3196,7 +3203,7 @@ var fo = class extends x {
 		}));
 	}
 };
-lo = fo, e(fo, "observedAttributes", [...y(lo, "observedAttributes", lo), g.PAUSED]);
+uo = po, e(po, "observedAttributes", [...y(uo, "observedAttributes", uo), g.PAUSED]);
 //#endregion
 //#region ../../libs/player-next/src/PlayerAttributes.ts
 var K = {
@@ -3205,55 +3212,55 @@ var K = {
 	ADVANCED_RENDITION_MENU_ENABLED: "advanced-rendition-menu-enabled",
 	REFRESH_POSTER_ENABLED: "refresh-poster-enabled",
 	STREAM_POLL_ENABLED: "stream-poll-enabled"
-}, po = Object.values(K), mo = /* @__PURE__ */ new WeakMap(), ho = /* @__PURE__ */ new WeakMap(), go = /* @__PURE__ */ new WeakMap(), _o = /* @__PURE__ */ new WeakMap(), vo = /* @__PURE__ */ new WeakMap(), yo = /* @__PURE__ */ new WeakMap(), bo = /* @__PURE__ */ new WeakMap(), xo = /* @__PURE__ */ new WeakSet(), So = class extends fe {
+}, mo = Object.values(K), ho = /* @__PURE__ */ new WeakMap(), go = /* @__PURE__ */ new WeakMap(), _o = /* @__PURE__ */ new WeakMap(), vo = /* @__PURE__ */ new WeakMap(), yo = /* @__PURE__ */ new WeakMap(), bo = /* @__PURE__ */ new WeakMap(), xo = /* @__PURE__ */ new WeakMap(), So = /* @__PURE__ */ new WeakSet(), Co = class extends fe {
 	constructor(e) {
-		super(), h(this, xo), d(this, mo, void 0), d(this, ho, void 0), d(this, go, !1), d(this, _o, !1), d(this, vo, !0), d(this, yo, null), d(this, bo, null), m(ho, this, e), m(mo, this, new de({
+		super(), h(this, So), d(this, ho, void 0), d(this, go, void 0), d(this, _o, !1), d(this, vo, !1), d(this, yo, !0), d(this, bo, null), d(this, xo, null), m(go, this, e), m(ho, this, new de({
 			publicEndpoint: e.url,
 			tokenFactory: () => e.authenticationToken
 		}));
 	}
 	start(e = 5e3) {
-		p(bo, this) && clearInterval(p(bo, this)), m(go, this, !1), m(_o, this, !1), f(xo, this, Eo).call(this), f(xo, this, Co).call(this), m(bo, this, window.setInterval(() => {
-			!p(_o, this) && !p(ho, this).infiniteReconnect && !p(yo, this) && p(vo, this) && m(yo, this, window.setTimeout(() => f(xo, this, wo).call(this), 300 * 1e3)), !p(_o, this) && p(vo, this) && f(xo, this, Co).call(this);
+		p(xo, this) && clearInterval(p(xo, this)), m(_o, this, !1), m(vo, this, !1), f(So, this, Do).call(this), f(So, this, wo).call(this), m(xo, this, window.setInterval(() => {
+			!p(vo, this) && !p(go, this).infiniteReconnect && !p(bo, this) && p(yo, this) && m(bo, this, window.setTimeout(() => f(So, this, To).call(this), 300 * 1e3)), !p(vo, this) && p(yo, this) && f(So, this, wo).call(this);
 		}, e));
 	}
 	stop() {
-		f(xo, this, To).call(this), p(bo, this) && (window.clearInterval(p(bo, this)), m(bo, this, null));
+		f(So, this, Eo).call(this), p(xo, this) && (window.clearInterval(p(xo, this)), m(xo, this, null));
 	}
 };
-function Co() {
+function wo() {
 	var e = this;
 	return t(function* () {
-		if (p(go, e)) return;
-		m(go, e, !0);
+		if (p(_o, e)) return;
+		m(_o, e, !0);
 		let t = "Stream is offline", n = "Please stand by";
 		try {
-			let t = yield p(mo, e).getChannel(p(ho, e).channelId);
+			let t = yield p(ho, e).getChannel(p(go, e).channelId);
 			if (t.isLive) {
-				m(_o, e, !0), f(xo, e, Eo).call(e), e.emit("live", t), m(go, e, !1);
+				m(vo, e, !0), f(So, e, Do).call(e), e.emit("live", t), m(_o, e, !1);
 				return;
 			}
 		} catch (e) {
 			ue(e) && (e.status === 403 || e.status === 401) && (t = "Forbidden", n = "You do not have permission to view this stream");
 		}
-		p(vo, e) && e.emit("error", {
+		p(yo, e) && e.emit("error", {
 			title: t,
 			message: n
-		}), m(go, e, !1);
+		}), m(_o, e, !1);
 	})();
 }
-function wo() {
-	this.stop(), m(vo, this, !1), this.emit("timeout");
-}
 function To() {
-	p(yo, this) && (window.clearTimeout(p(yo, this)), m(yo, this, null));
+	this.stop(), m(yo, this, !1), this.emit("timeout");
 }
 function Eo() {
-	f(xo, this, To).call(this), m(vo, this, !0);
+	p(bo, this) && (window.clearTimeout(p(bo, this)), m(bo, this, null));
+}
+function Do() {
+	f(So, this, Eo).call(this), m(yo, this, !0);
 }
 //#endregion
 //#region ../../libs/player-next/src/utils/browser.ts
-var Do = /\/Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune\//i, Oo = navigator.userAgent.toLowerCase(), ko = Do.test(Oo), Ao = (e) => Mi.observedAttributes.includes(e), jo = `
+var Oo = /\/Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune\//i, ko = navigator.userAgent.toLowerCase(), Ao = Oo.test(ko), jo = (e) => Mi.observedAttributes.includes(e), Mo = `
   <style>
     :host {
       container-type: inline-size;
@@ -3263,7 +3270,7 @@ var Do = /\/Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Si
       display: flex;
       justify-content: center;
 
-      --vindral-volume-range-display: ${ko ? "none" : "flex"};
+      --vindral-volume-range-display: ${Ao ? "none" : "flex"};
       --vindral-airplay-button-display: none;
       --vindral-play-overlay-display: none;
       --vindral-grid-item-offline-display: none;
@@ -3344,10 +3351,10 @@ var Do = /\/Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Si
       --vindral-subtitle-offset: -48px;
     }
   </style>
-`, Mo = (e) => {
+`, No = (e) => {
 	let t = e ? "vindral-advanced-rendition-menu" : "vindral-rendition-levels-menu";
 	return `
-    ${jo}
+    ${Mo}
 
     <vindral-controller>
       <vindral-control-bar slot="top-bar">
@@ -3379,12 +3386,14 @@ var Do = /\/Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Si
       <vindral-user-input-play-overlay slot="overlay"></vindral-user-input-play-overlay>
       <vindral-poster-overlay slot="overlay" disabled></vindral-poster-overlay>
 
-      <vindral-play-overlay id="play-overlay" slot="overlay" hidden></vindral-play-overlay>
-      <vindral-message id="vindral-message" slot="overlay" hidden></vindral-message>
+      <vindral-center-overlay id="center-overlay" slot="overlay">
+        <vindral-message id="vindral-message" hidden></vindral-message>
+        <vindral-play-overlay id="play-overlay" hidden></vindral-play-overlay>
+      </vindral-center-overlay>
     </vindral-controller>
   `;
-}, No = `
-  ${jo}
+}, Po = `
+  ${Mo}
 
   <style>
     #control-bar {
@@ -3403,55 +3412,57 @@ var Do = /\/Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Si
       <vindral-buffering-icon></vindral-buffering-icon>
     </div>
 
-    <vindral-play-overlay id="play-overlay" slot="overlay" hidden></vindral-play-overlay>
-    <vindral-message id="vindral-message" slot="overlay" hidden></vindral-message>
+    <vindral-center-overlay id="center-overlay" slot="overlay" disable-backdrop>
+      <vindral-message id="vindral-message" hidden></vindral-message>
+      <vindral-play-overlay id="play-overlay" hidden></vindral-play-overlay>
+    </vindral-center-overlay>
   </vindral-controller>
-`, Po = document.createElement("template"), Fo = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), J = /* @__PURE__ */ new WeakMap(), Io = /* @__PURE__ */ new WeakMap(), Lo = /* @__PURE__ */ new WeakMap(), Ro = /* @__PURE__ */ new WeakMap(), zo = /* @__PURE__ */ new WeakMap(), Bo = /* @__PURE__ */ new WeakMap(), Y = /* @__PURE__ */ new WeakSet(), Vo = /* @__PURE__ */ new WeakMap(), Ho = /* @__PURE__ */ new WeakMap(), Uo = /* @__PURE__ */ new WeakMap(), Wo = class extends HTMLElement {
+`, Fo = document.createElement("template"), Io = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), Lo = /* @__PURE__ */ new WeakMap(), Ro = /* @__PURE__ */ new WeakMap(), zo = /* @__PURE__ */ new WeakMap(), Bo = /* @__PURE__ */ new WeakMap(), Vo = /* @__PURE__ */ new WeakMap(), Ho = /* @__PURE__ */ new WeakMap(), Uo = /* @__PURE__ */ new WeakMap(), J = /* @__PURE__ */ new WeakSet(), Wo = /* @__PURE__ */ new WeakMap(), Go = /* @__PURE__ */ new WeakMap(), Ko = /* @__PURE__ */ new WeakMap(), qo = class extends HTMLElement {
 	constructor() {
-		super(), h(this, Y), d(this, Fo, void 0), d(this, q, void 0), d(this, J, void 0), d(this, Io, void 0), d(this, Lo, void 0), d(this, Ro, /* @__PURE__ */ new Set()), d(this, zo, () => {
+		super(), h(this, J), d(this, Io, void 0), d(this, q, void 0), d(this, Lo, void 0), d(this, Ro, void 0), d(this, zo, void 0), d(this, Bo, void 0), d(this, Vo, /* @__PURE__ */ new Set()), d(this, Ho, () => {
 			Array.from(this.attributes).forEach((e) => {
-				p(Bo, this).call(this, e.name, e.value);
+				p(Uo, this).call(this, e.name, e.value);
 			});
-		}), d(this, Bo, (e, t) => {
-			Ao(e) && (v(t) ? p(q, this).setAttribute(e, t) : p(q, this).removeAttribute(e));
-		}), d(this, Vo, () => {
+		}), d(this, Uo, (e, t) => {
+			jo(e) && (v(t) ? p(q, this).setAttribute(e, t) : p(q, this).removeAttribute(e));
+		}), d(this, Wo, () => {
 			Array.from(this.children).forEach((e) => {
-				p(Ro, this).add(e);
+				p(Vo, this).add(e);
 			});
-		}), d(this, Ho, () => {
+		}), d(this, Go, () => {
 			let e = p(q, this).instance;
 			e && (e.on("is live", (e) => {
-				e ? (this.removeAttribute(K.OFFLINE), p(J, this).setAttribute("hidden", "")) : (this.setAttribute(K.OFFLINE, ""), p(J, this).removeAttribute("hidden"), f(Y, this, Yo).call(this, "Stream is offline", "Please stand by"));
+				e ? (this.removeAttribute(K.OFFLINE), f(J, this, $o).call(this)) : (this.setAttribute(K.OFFLINE, ""), f(J, this, Qo).call(this, "Stream is offline", "Please stand by"));
 			}), e.on("channels", (e) => {
 				let t = p(q, this).getAttribute("channel-id"), n = e.find((e) => e.channelId === t);
-				n && f(Y, this, Jo).call(this, n);
+				n && f(J, this, Zo).call(this, n);
 			}), e.on("channel switch", ({ channelId: t }) => {
 				let n = e.channels.find((e) => e.channelId === t);
-				n && f(Y, this, Jo).call(this, n);
+				n && f(J, this, Zo).call(this, n);
 			}), e.on("error", (e) => {
 				if (e.code() === "connection_failed") {
-					f(Y, this, Yo).call(this, "Stream is offline", "Please stand by");
+					f(J, this, Qo).call(this, "Stream is offline", "Please stand by");
 					return;
 				}
-				e.isFatal() && (e.code() === "access_forbidden" ? f(Y, this, Yo).call(this, "Forbidden", "You do not have permission to view this stream") : e.code() === "connection_failed_will_not_attempt_again" ? f(Y, this, Yo).call(this, "Stream is offline", "Please stand by") : f(Y, this, Yo).call(this, "An error occurred", e.message), p(Io, this).removeAttribute("hidden"), this.setAttribute(K.OFFLINE, ""), p(q, this).dispatchEvent(new CustomEvent(_.EXIT_FULLSCREEN)), p(q, this).dispatchEvent(new CustomEvent(_.EXIT_PIP)));
+				e.isFatal() && (e.code() === "access_forbidden" ? f(J, this, Qo).call(this, "Forbidden", "You do not have permission to view this stream") : e.code() === "connection_failed_will_not_attempt_again" ? f(J, this, Qo).call(this, "Stream is offline", "Please stand by") : f(J, this, Qo).call(this, "An error occurred", e.message), p(Ro, this).removeAttribute("hidden"), this.setAttribute(K.OFFLINE, ""), p(q, this).dispatchEvent(new CustomEvent(_.EXIT_FULLSCREEN)), p(q, this).dispatchEvent(new CustomEvent(_.EXIT_PIP)));
 			}));
-		}), d(this, Uo, () => {
-			p(q, this).connect(), p(Io, this).setAttribute("hidden", ""), p(J, this).setAttribute("hidden", ""), p(q, this).focus();
-		}), m(Fo, this, this.attachShadow({ mode: "open" })), f(Y, this, Ko).call(this), m(q, this, p(Fo, this).querySelector("vindral-controller")), m(J, this, p(Fo, this).querySelector("#vindral-message")), m(Io, this, p(Fo, this).querySelector("#play-overlay"));
+		}), d(this, Ko, () => {
+			p(q, this).connect(), p(Ro, this).setAttribute("hidden", ""), f(J, this, $o).call(this), p(q, this).focus();
+		}), m(Io, this, this.attachShadow({ mode: "open" })), f(J, this, Yo).call(this), m(q, this, p(Io, this).querySelector("vindral-controller")), m(Lo, this, p(Io, this).querySelector("#vindral-message")), m(Ro, this, p(Io, this).querySelector("#play-overlay")), m(zo, this, p(Io, this).querySelector("#center-overlay"));
 	}
 	connectedCallback() {
-		this.setAttribute(K.OFFLINE, ""), p(q, this).addEventListener("vindral-instance-ready", p(Ho, this)), f(Y, this, qo).call(this);
+		this.setAttribute(K.OFFLINE, ""), p(q, this).addEventListener("vindral-instance-ready", p(Go, this)), f(J, this, Xo).call(this);
 	}
 	disconnectedCallback() {
 		var e;
-		p(q, this).removeEventListener("vindral-instance-ready", p(Ho, this)), p(Io, this).removeEventListener("click", p(Uo, this)), (e = p(Lo, this)) == null || e.stop();
+		p(q, this).removeEventListener("vindral-instance-ready", p(Go, this)), p(Ro, this).removeEventListener("click", p(Ko, this)), (e = p(Bo, this)) == null || e.stop();
 	}
 	attributeChangedCallback(e, t, n) {
-		if (t !== n) if (e === g.MEDIA || e === K.ADVANCED_RENDITION_MENU_ENABLED) f(Y, this, Ko).call(this);
+		if (t !== n) if (e === g.MEDIA || e === K.ADVANCED_RENDITION_MENU_ENABLED) f(J, this, Yo).call(this);
 		else if (e === K.REFRESH_POSTER_ENABLED) {
-			let e = p(Fo, this).querySelector("vindral-poster-overlay");
+			let e = p(Io, this).querySelector("vindral-poster-overlay");
 			e && (e.disabled = b(this.getAttribute(K.REFRESH_POSTER_ENABLED), !1) === !1);
-		} else p(Bo, this).call(this, e, n);
+		} else p(Uo, this).call(this, e, n);
 	}
 	get instance() {
 		return p(q, this).instance;
@@ -3460,40 +3471,40 @@ var Do = /\/Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Si
 		return p(q, this).airPlay;
 	}
 };
-function Go() {
+function Jo() {
 	let e = ge(this.getAttribute(g.MEDIA)), t = b(this.getAttribute(K.ADVANCED_RENDITION_MENU_ENABLED), !1);
-	return e === "audio" ? No : Mo(t);
+	return e === "audio" ? Po : No(t);
 }
-function Ko() {
-	let e = p(Fo, this).hasChildNodes(), t = e ? p(q, this) : void 0, n = e ? p(Io, this) : void 0;
-	this.isConnected && t && t.removeEventListener("vindral-instance-ready", p(Ho, this)), this.isConnected && n && p(Lo, this) && n.removeEventListener("click", p(Uo, this)), Po.innerHTML = f(Y, this, Go).call(this);
-	let r = Po.content.cloneNode(!0);
-	m(q, this, r.querySelector("vindral-controller")), m(J, this, r.querySelector("#vindral-message")), m(Io, this, r.querySelector("#play-overlay")), p(Vo, this).call(this), p(Ro, this).forEach((e) => {
+function Yo() {
+	let e = p(Io, this).hasChildNodes(), t = e ? p(q, this) : void 0, n = e ? p(Ro, this) : void 0;
+	this.isConnected && t && t.removeEventListener("vindral-instance-ready", p(Go, this)), this.isConnected && n && p(Bo, this) && n.removeEventListener("click", p(Ko, this)), Fo.innerHTML = f(J, this, Jo).call(this);
+	let r = Fo.content.cloneNode(!0);
+	m(q, this, r.querySelector("vindral-controller")), m(Lo, this, r.querySelector("#vindral-message")), m(Ro, this, r.querySelector("#play-overlay")), m(zo, this, r.querySelector("#center-overlay")), p(Wo, this).call(this), p(Vo, this).forEach((e) => {
 		p(q, this).appendChild(e);
-	}), p(zo, this).call(this), p(Fo, this).innerHTML = "", p(Fo, this).appendChild(r), this.isConnected && (p(q, this).addEventListener("vindral-instance-ready", p(Ho, this)), p(Lo, this) && p(Io, this).addEventListener("click", p(Uo, this)));
+	}), p(Ho, this).call(this), p(Io, this).innerHTML = "", p(Io, this).appendChild(r), this.isConnected && (p(q, this).addEventListener("vindral-instance-ready", p(Go, this)), p(Bo, this) && p(Ro, this).addEventListener("click", p(Ko, this)));
 }
-function qo() {
+function Xo() {
 	var e;
 	if (b(this.getAttribute(K.STREAM_POLL_ENABLED), !0) === !1) return;
 	let t = this.getAttribute("url"), n = this.getAttribute("channel-id"), r = (e = this.getAttribute("authentication-token")) == null ? void 0 : e, i = this.hasAttribute("infinite-reconnect");
 	if (!t || !n) {
-		this.setAttribute(K.OFFLINE, ""), f(Y, this, Yo).call(this, "Invalid options", "Please enter at least a channel id and url to start the stream");
+		this.setAttribute(K.OFFLINE, ""), f(J, this, Qo).call(this, "Invalid options", "Please enter at least a channel id and url to start the stream");
 		return;
 	}
-	m(Lo, this, new So({
+	m(Bo, this, new Co({
 		url: t,
 		channelId: n,
 		authenticationToken: r,
 		infiniteReconnect: i
-	})), p(Lo, this).on("live", (e) => {
-		p(q, this).connect(), this.removeAttribute("offline"), p(J, this).setAttribute("hidden", ""), f(Y, this, Jo).call(this, e);
-	}), p(Lo, this).on("timeout", () => {
-		p(J, this).setAttribute("hidden", ""), p(Io, this).removeAttribute("hidden");
-	}), p(Lo, this).on("error", (e) => {
-		this.setAttribute(K.OFFLINE, ""), f(Y, this, Yo).call(this, e.title, e.message);
-	}), p(Io, this).addEventListener("click", p(Uo, this)), this.hasAttribute("paused") && p(Lo, this).start();
-}
-function Jo(e) {
+	})), p(Bo, this).on("live", (e) => {
+		p(q, this).connect(), this.removeAttribute("offline"), f(J, this, $o).call(this), f(J, this, Zo).call(this, e);
+	}), p(Bo, this).on("timeout", () => {
+		f(J, this, $o).call(this), p(Ro, this).removeAttribute("hidden");
+	}), p(Bo, this).on("error", (e) => {
+		this.setAttribute(K.OFFLINE, ""), f(J, this, Qo).call(this, e.title, e.message);
+	}), p(Ro, this).addEventListener("click", p(Ko, this)), this.hasAttribute("paused") && p(Bo, this).start();
+}
+function Zo(e) {
 	let t = xe(this.getAttribute("title"), !1);
 	if (!t) return;
 	let n = this.getAttribute("poster"), r = typeof t == "string" ? t : e.name, i;
@@ -3507,16 +3518,19 @@ function Jo(e) {
 		poster: i
 	});
 }
-function Yo(e, t) {
-	p(J, this).setAttribute("title", e), p(J, this).setAttribute("description", t);
+function Qo(e, t) {
+	p(Lo, this).setAttribute("title", e), p(Lo, this).setAttribute("description", t), p(Lo, this).removeAttribute("hidden");
 	let n = this.getAttribute("poster");
-	n && p(J, this).setAttribute("background-image", n), p(J, this).removeAttribute("hidden");
+	n ? p(zo, this).setAttribute("poster", n) : p(zo, this).removeAttribute("poster"), p(zo, this).setAttribute("backdrop", "");
+}
+function $o() {
+	p(Lo, this).setAttribute("hidden", ""), p(zo, this).removeAttribute("backdrop");
 }
-e(Wo, "observedAttributes", [...Mi.observedAttributes, ...po]);
+e(qo, "observedAttributes", [...Mi.observedAttributes, ...mo]);
 //#endregion
 //#region ../../libs/player-next/src/components/PosterOverlay.ts
-var Xo = document.createElement("template");
-Xo.innerHTML = `
+var es = document.createElement("template");
+es.innerHTML = `
   <style>
     :host {
       display: var(--poster-overlay-display);
@@ -3525,8 +3539,8 @@ Xo.innerHTML = `
       left: 0;
       max-width: 100%;
       max-height: 100%;
-      min-width: 100%;
-      min-height: 100%;
+      min-width: 100% !important;
+      min-height: 100% !important;
       background-repeat: no-repeat;
       background-position: 50% 50%;
       background-size: contain;
@@ -3551,26 +3565,26 @@ Xo.innerHTML = `
     }
   </style>
 `;
-var Zo = 6e3, Qo = /* @__PURE__ */ new WeakMap(), $o = /* @__PURE__ */ new WeakMap(), es = /* @__PURE__ */ new WeakMap(), ts = /* @__PURE__ */ new WeakMap(), ns = /* @__PURE__ */ new WeakSet(), rs = /* @__PURE__ */ new WeakMap(), is = class extends HTMLElement {
+var ts = 6e3, ns = /* @__PURE__ */ new WeakMap(), rs = /* @__PURE__ */ new WeakMap(), is = /* @__PURE__ */ new WeakMap(), as = /* @__PURE__ */ new WeakMap(), os = /* @__PURE__ */ new WeakSet(), ss = /* @__PURE__ */ new WeakMap(), cs = class extends HTMLElement {
 	constructor() {
-		super(), h(this, ns), d(this, Qo, null), d(this, $o, null), d(this, es, null), d(this, ts, () => {
-			!document.hidden && this.hasAttribute("intersecting") && this.paused && !this.disabled ? f(ns, this, as).call(this) : f(ns, this, os).call(this);
-		}), d(this, rs, (e) => {
+		super(), h(this, os), d(this, ns, null), d(this, rs, null), d(this, is, null), d(this, as, () => {
+			!document.hidden && this.hasAttribute("intersecting") && this.paused && !this.disabled ? f(os, this, ls).call(this) : f(os, this, us).call(this);
+		}), d(this, ss, (e) => {
 			e.forEach((e) => {
 				e.isIntersecting ? this.setAttribute("intersecting", "") : this.removeAttribute("intersecting");
 			});
-		}), this.attachShadow({ mode: "open" }).appendChild(Xo.content.cloneNode(!0));
+		}), this.attachShadow({ mode: "open" }).appendChild(es.content.cloneNode(!0));
 	}
 	connectedCallback() {
 		var e;
-		m(Qo, this, this.closest("vindral-controller")), (e = p(Qo, this)) == null || e.connectListener(this), document.addEventListener("visibilitychange", p(ts, this)), m(es, this, new IntersectionObserver(p(rs, this))), p(es, this).observe(this);
+		m(ns, this, this.closest("vindral-controller")), (e = p(ns, this)) == null || e.connectListener(this), document.addEventListener("visibilitychange", p(as, this)), m(is, this, new IntersectionObserver(p(ss, this))), p(is, this).observe(this);
 	}
 	disconnectedCallback() {
 		var e, t;
-		(e = p(Qo, this)) == null || e.disconnectListener(this), document.removeEventListener("visibilitychange", p(ts, this)), (t = p(es, this)) == null || t.disconnect(), m(es, this, null), f(ns, this, os).call(this);
+		(e = p(ns, this)) == null || e.disconnectListener(this), document.removeEventListener("visibilitychange", p(as, this)), (t = p(is, this)) == null || t.disconnect(), m(is, this, null), f(os, this, us).call(this);
 	}
 	attributeChangedCallback(e, t, n) {
-		t !== n && (e === g.POSTER_SRC && this.paused && !this.disabled && f(ns, this, ss).call(this), (e === g.PAUSED || e === "disabled" || e === "intersecting") && p(ts, this).call(this));
+		t !== n && (e === g.POSTER_SRC && this.paused && !this.disabled && f(os, this, ds).call(this), (e === g.PAUSED || e === "disabled" || e === "intersecting") && p(as, this).call(this));
 	}
 	get disabled() {
 		return this.hasAttribute("disabled");
@@ -3585,18 +3599,18 @@ var Zo = 6e3, Qo = /* @__PURE__ */ new WeakMap(), $o = /* @__PURE__ */ new WeakM
 		return this.hasAttribute(g.PAUSED);
 	}
 };
-function as() {
-	p($o, this) === null && (f(ns, this, os).call(this), m($o, this, window.setInterval(() => f(ns, this, ss).call(this), Zo)));
+function ls() {
+	p(rs, this) === null && (f(os, this, us).call(this), m(rs, this, window.setInterval(() => f(os, this, ds).call(this), ts)));
 }
-function os() {
-	p($o, this) !== null && (clearInterval(p($o, this)), m($o, this, null)), this.style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAQAAACRI2S5AAAAEElEQVR42mNkIAAYRxWAAQAG9gAKqv6+AwAAAABJRU5ErkJggg==')";
+function us() {
+	p(rs, this) !== null && (clearInterval(p(rs, this)), m(rs, this, null)), this.style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAQAAACRI2S5AAAAEElEQVR42mNkIAAYRxWAAQAG9gAKqv6+AwAAAABJRU5ErkJggg==')";
 }
-function ss() {
+function ds() {
 	if (!this.posterSrc) return;
 	let e = new URL(this.posterSrc), t = new Image();
 	e.searchParams.set("t", Date.now().toString()), t.src = e.toString(), t.onload = () => this.style.backgroundImage = `url(${e.toString()})`;
 }
-e(is, "observedAttributes", [
+e(cs, "observedAttributes", [
 	g.POSTER_SRC,
 	g.PAUSED,
 	"disabled",
@@ -3604,70 +3618,70 @@ e(is, "observedAttributes", [
 ]);
 //#endregion
 //#region ../../libs/player-next/src/components/RenditionLevelsMenu.ts
-var cs, ls = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon icon-tabler icon-tabler-settings-filled\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"#2c3e50\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n  <path d=\"M14.647 4.081a.724 .724 0 0 0 1.08 .448c2.439 -1.485 5.23 1.305 3.745 3.744a.724 .724 0 0 0 .447 1.08c2.775 .673 2.775 4.62 0 5.294a.724 .724 0 0 0 -.448 1.08c1.485 2.439 -1.305 5.23 -3.744 3.745a.724 .724 0 0 0 -1.08 .447c-.673 2.775 -4.62 2.775 -5.294 0a.724 .724 0 0 0 -1.08 -.448c-2.439 1.485 -5.23 -1.305 -3.745 -3.744a.724 .724 0 0 0 -.447 -1.08c-2.775 -.673 -2.775 -4.62 0 -5.294a.724 .724 0 0 0 .448 -1.08c-1.485 -2.439 1.305 -5.23 3.744 -3.745a.722 .722 0 0 0 1.08 -.447c.673 -2.775 4.62 -2.775 5.294 0zm-2.647 4.919a3 3 0 1 0 0 6a3 3 0 0 0 0 -6z\" stroke-width=\"0\" fill=\"currentColor\" />\n</svg>\n", us = document.createElement("template");
-us.innerHTML = `
+var fs, ps = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon icon-tabler icon-tabler-settings-filled\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"#2c3e50\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n  <path d=\"M14.647 4.081a.724 .724 0 0 0 1.08 .448c2.439 -1.485 5.23 1.305 3.745 3.744a.724 .724 0 0 0 .447 1.08c2.775 .673 2.775 4.62 0 5.294a.724 .724 0 0 0 -.448 1.08c1.485 2.439 -1.305 5.23 -3.744 3.745a.724 .724 0 0 0 -1.08 .447c-.673 2.775 -4.62 2.775 -5.294 0a.724 .724 0 0 0 -1.08 -.448c-2.439 1.485 -5.23 -1.305 -3.745 -3.744a.724 .724 0 0 0 -.447 -1.08c-2.775 -.673 -2.775 -4.62 0 -5.294a.724 .724 0 0 0 .448 -1.08c-1.485 -2.439 1.305 -5.23 3.744 -3.745a.722 .722 0 0 0 1.08 -.447c.673 -2.775 4.62 -2.775 5.294 0zm-2.647 4.919a3 3 0 1 0 0 6a3 3 0 0 0 0 -6z\" stroke-width=\"0\" fill=\"currentColor\" />\n</svg>\n", ms = document.createElement("template");
+ms.innerHTML = `
   <style>
     :host {
       display: var(--rendition-menu-display);
     }
   </style>
 
-  <slot name="button">${ls}</slot>
+  <slot name="button">${ps}</slot>
   <slot name="listbox" hidden>
     <vindral-rendition-levels-menu-list id="listbox" part="listbox"></vindral-rendition-levels-menu-list>
   </slot>
 `;
-var ds = /* @__PURE__ */ new WeakSet(), fs = class extends Re {
+var hs = /* @__PURE__ */ new WeakSet(), gs = class extends Re {
 	constructor() {
 		var e, t, n, r;
-		super(), h(this, ds), (e = this.shadowRoot) == null || e.appendChild(us.content.cloneNode(!0)), this.button = (t = this.shadowRoot) == null ? void 0 : t.querySelector("slot[name=button]"), this.listbox = (n = this.shadowRoot) == null ? void 0 : n.querySelector("[part=listbox]"), this.listboxSlot = (r = this.shadowRoot) == null ? void 0 : r.querySelector("slot[name=listbox]");
+		super(), h(this, hs), (e = this.shadowRoot) == null || e.appendChild(ms.content.cloneNode(!0)), this.button = (t = this.shadowRoot) == null ? void 0 : t.querySelector("slot[name=button]"), this.listbox = (n = this.shadowRoot) == null ? void 0 : n.querySelector("[part=listbox]"), this.listboxSlot = (r = this.shadowRoot) == null ? void 0 : r.querySelector("slot[name=listbox]");
 	}
 	connectedCallback() {
-		super.connectedCallback(), f(ds, this, ps).call(this), this.setAttribute("aria-label", "Rendition levels");
+		super.connectedCallback(), f(hs, this, _s).call(this), this.setAttribute("aria-label", "Rendition levels");
 	}
 	attributeChangedCallback(e, t, n) {
-		super.attributeChangedCallback(e, t, n), e === g.RENDITION_LEVELS && f(ds, this, ps).call(this);
+		super.attributeChangedCallback(e, t, n), e === g.RENDITION_LEVELS && f(hs, this, _s).call(this);
 	}
 };
-cs = fs;
-function ps() {
+fs = gs;
+function _s() {
 	let e = this.getAttribute(g.RENDITION_LEVELS);
 	!e || e === "[]" ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
 }
-e(fs, "observedAttributes", [...y(cs, "observedAttributes", cs), g.RENDITION_LEVELS]);
+e(gs, "observedAttributes", [...y(fs, "observedAttributes", fs), g.RENDITION_LEVELS]);
 //#endregion
 //#region ../../libs/player-next/src/components/RenditionLevelsMenuList.ts
-var ms = document.createElement("template");
-ms.innerHTML = "\n  <style>\n    :host {\n      font: inherit;\n      cursor: default;\n      padding: var(--padding-2);\n      padding-top: var(--padding-3);\n      border-radius: 0.25em;\n      position: absolute;\n      min-width: 140px;\n      background: var(--bg-subtle);\n      z-index: 1;\n      overflow: auto;\n    }\n\n    :host([list-position=\"top\"]) {\n      bottom: calc(100% + 0.5em);\n      transform: translate(-50%);\n    }\n\n    :host([list-position=\"bottom\"]) {\n      top: calc(100% + 0.5em);\n    }\n\n    :host::-webkit-scrollbar {\n      width: 5px;\n      padding-right: 5px;\n    }\n\n    :host::-webkit-scrollbar-thumb {\n      background-color: var(--fg-extra-subtle);\n      border-radius: 10px;\n      border: 0;\n    }\n\n    :host::-webkit-scrollbar-track {\n      border-radius: 10px;\n      background-color: transparent;\n    }\n\n    .menu {\n      display: grid;\n      gap: var(--padding-1);\n    }\n\n    [role=\"menuitem\"] {\n      flex: 1;\n      position: relative;\n      cursor: pointer;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      height: 44px;\n      padding: 0 var(--padding-5);\n      border-radius: 4px;\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 500;\n      line-height: normal;\n      white-space: nowrap;\n      text-align: left;\n    }\n\n    [role=\"menuitem\"]:hover {\n      background: var(--bg-component-hover);\n    }\n\n    [role=\"menuitem\"][aria-selected=\"true\"] {\n      background: var(--bg-component-active);\n    }\n\n    [role=\"menuitem\"][aria-selected=\"true\"]::before {\n      content: url(\"data:image/svg+xml,%0A%20%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2078.369%2078.369%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20d%3D%22M78.049%2019.015%2029.458%2067.606a1.094%201.094%200%200%201-1.548%200L.32%2040.015a1.094%201.094%200%200%201%200-1.547l6.704-6.704a1.095%201.095%200%200%201%201.548%200l20.113%2020.112%2041.113-41.113a1.095%201.095%200%200%201%201.548%200l6.703%206.704a1.094%201.094%200%200%201%200%201.548z%22%2F%3E%3C%2Fsvg%3E%0A\");\n      position: absolute;\n      left: calc(var(--padding-3) - var(--padding-1));\n      top: calc(50% - 8px);\n    }\n\n    [role=\"menuitem\"]:focus-visible {\n      box-shadow: inset 0 0 0 2px var(--fg-strong);\n      outline: 0;\n    }\n\n    .menu-item-subtitle {\n      font-size: 11px;\n      opacity: 0.6;\n    }\n\n    .heading {\n      text-transform: uppercase;\n      margin-bottom: var(--padding-2);\n      padding: 0 var(--padding-3);\n      font-size: 11px;\n      font-weight: bold;\n    }\n  </style>\n\n  <slot>\n    <div class=\"heading\">Max quality</div>\n    <div class=\"menu\"></div>\n  </slot>\n";
-var hs = /* @__PURE__ */ new WeakMap(), gs = /* @__PURE__ */ new WeakMap(), _s = /* @__PURE__ */ new WeakMap(), vs = /* @__PURE__ */ new WeakMap(), ys = /* @__PURE__ */ new WeakMap(), bs = /* @__PURE__ */ new WeakMap(), X = /* @__PURE__ */ new WeakSet(), xs = class extends HTMLElement {
+var vs = document.createElement("template");
+vs.innerHTML = "\n  <style>\n    :host {\n      font: inherit;\n      cursor: default;\n      padding: var(--padding-2) !important;\n      padding-top: var(--padding-3) !important;\n      border-radius: 0.25em;\n      position: absolute;\n      min-width: 140px !important;\n      background: var(--bg-subtle);\n      z-index: 1;\n      overflow: auto;\n    }\n\n    :host([list-position=\"top\"]) {\n      bottom: calc(100% + 0.5em);\n      transform: translate(-50%);\n    }\n\n    :host([list-position=\"bottom\"]) {\n      top: calc(100% + 0.5em);\n    }\n\n    :host::-webkit-scrollbar {\n      width: 5px;\n      padding-right: 5px;\n    }\n\n    :host::-webkit-scrollbar-thumb {\n      background-color: var(--fg-extra-subtle);\n      border-radius: 10px;\n      border: 0;\n    }\n\n    :host::-webkit-scrollbar-track {\n      border-radius: 10px;\n      background-color: transparent;\n    }\n\n    .menu {\n      display: grid;\n      gap: var(--padding-1);\n    }\n\n    [role=\"menuitem\"] {\n      flex: 1;\n      position: relative;\n      cursor: pointer;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      height: 44px;\n      padding: 0 var(--padding-5);\n      border-radius: 4px;\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 500;\n      line-height: normal;\n      white-space: nowrap;\n      text-align: left;\n    }\n\n    [role=\"menuitem\"]:hover {\n      background: var(--bg-component-hover);\n    }\n\n    [role=\"menuitem\"][aria-selected=\"true\"] {\n      background: var(--bg-component-active);\n    }\n\n    [role=\"menuitem\"][aria-selected=\"true\"]::before {\n      content: url(\"data:image/svg+xml,%0A%20%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2078.369%2078.369%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20d%3D%22M78.049%2019.015%2029.458%2067.606a1.094%201.094%200%200%201-1.548%200L.32%2040.015a1.094%201.094%200%200%201%200-1.547l6.704-6.704a1.095%201.095%200%200%201%201.548%200l20.113%2020.112%2041.113-41.113a1.095%201.095%200%200%201%201.548%200l6.703%206.704a1.094%201.094%200%200%201%200%201.548z%22%2F%3E%3C%2Fsvg%3E%0A\");\n      position: absolute;\n      left: calc(var(--padding-3) - var(--padding-1));\n      top: calc(50% - 8px);\n    }\n\n    [role=\"menuitem\"]:focus-visible {\n      box-shadow: inset 0 0 0 2px var(--fg-strong);\n      outline: 0;\n    }\n\n    .menu-item-subtitle {\n      font-size: 11px;\n      opacity: 0.6;\n    }\n\n    .heading {\n      text-transform: uppercase;\n      margin-bottom: var(--padding-2);\n      padding: 0 var(--padding-3);\n      font-size: 11px;\n      font-weight: bold;\n    }\n  </style>\n\n  <slot>\n    <div class=\"heading\">Max quality</div>\n    <div class=\"menu\"></div>\n  </slot>\n";
+var ys = /* @__PURE__ */ new WeakMap(), bs = /* @__PURE__ */ new WeakMap(), xs = /* @__PURE__ */ new WeakMap(), Ss = /* @__PURE__ */ new WeakMap(), Cs = /* @__PURE__ */ new WeakMap(), ws = /* @__PURE__ */ new WeakMap(), Y = /* @__PURE__ */ new WeakSet(), Ts = class extends HTMLElement {
 	constructor() {
-		super(), h(this, X), d(this, hs, []), d(this, gs, 2 ** 53 - 1), d(this, _s, null), d(this, vs, []), d(this, ys, null), d(this, bs, null), e(this, "handleEvent", (e) => {
+		super(), h(this, Y), d(this, ys, []), d(this, bs, 2 ** 53 - 1), d(this, xs, null), d(this, Ss, []), d(this, Cs, null), d(this, ws, null), e(this, "handleEvent", (e) => {
 			switch (e.type) {
 				case "keydown":
-					f(X, this, Ds).call(this, e);
+					f(Y, this, js).call(this, e);
 					break;
 			}
-		}), this.attachShadow({ mode: "open" }).appendChild(ms.content.cloneNode(!0));
+		}), this.attachShadow({ mode: "open" }).appendChild(vs.content.cloneNode(!0));
 	}
 	connectedCallback() {
 		let e = this.getRootNode();
 		if (e instanceof ShadowRoot) {
 			var t;
-			m(ys, this, e.host.closest("vindral-controller")), (t = p(ys, this)) == null || t.connectListener(this), f(X, this, Ss).call(this), f(X, this, Cs).call(this), m(bs, this, e.host), this.addEventListener("keydown", this);
+			m(Cs, this, e.host.closest("vindral-controller")), (t = p(Cs, this)) == null || t.connectListener(this), f(Y, this, Es).call(this), f(Y, this, Ds).call(this), m(ws, this, e.host), this.addEventListener("keydown", this);
 		}
 	}
 	disconnectedCallback() {
 		var e;
-		(e = p(ys, this)) == null || e.disconnectListener(this), this.removeEventListener("keydown", this);
+		(e = p(Cs, this)) == null || e.disconnectListener(this), this.removeEventListener("keydown", this);
 	}
 	attributeChangedCallback(e, t, n) {
 		t !== n && (e === g.RENDITION_LEVELS && n && (this.list = JSON.parse(n)), e === g.MAX_VIDEO_BITRATE && n && (this.maxVideoBitrate = n ? parseInt(n, 10) : 2 ** 53 - 1));
 	}
 	set list(e) {
-		m(hs, this, e), f(X, this, Cs).call(this);
+		m(ys, this, e), f(Y, this, Ds).call(this);
 	}
 	set maxVideoBitrate(e) {
-		m(gs, this, e), f(X, this, Ts).call(this);
+		m(bs, this, e), f(Y, this, ks).call(this);
 	}
 	get keysUsed() {
 		return [
@@ -3683,10 +3697,10 @@ var hs = /* @__PURE__ */ new WeakMap(), gs = /* @__PURE__ */ new WeakMap(), _s =
 	}
 	focus() {
 		var e;
-		(e = p(_s, this)) == null || e.focus();
+		(e = p(xs, this)) == null || e.focus();
 	}
 };
-function Ss() {
+function Es() {
 	new IntersectionObserver((e) => {
 		e.forEach((e) => {
 			if (e.intersectionRatio !== 1) if (e.intersectionRatio > 0) {
@@ -3695,50 +3709,50 @@ function Ss() {
 			} else this.style.height = "auto";
 		});
 	}, {
-		root: p(ys, this),
+		root: p(Cs, this),
 		threshold: 0
 	}).observe(this);
 }
-function Cs() {
+function Ds() {
 	var e;
 	let t = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".menu");
-	t && (m(vs, this, []), t.innerHTML = "", p(hs, this).sort((e, t) => {
+	t && (m(Ss, this, []), t.innerHTML = "", p(ys, this).sort((e, t) => {
 		var n, r;
 		return (n = e.video) != null && n.bitRate && (r = t.video) != null && r.bitRate ? t.video.bitRate - e.video.bitRate : 0;
 	}).forEach((e) => {
 		var n, r, i, a, o, s, c, ee;
 		let l = document.createElement("div");
 		l.setAttribute("role", "menuitem"), l.setAttribute("value", String((n = e.video) == null ? void 0 : n.height)), l.classList.add("menu-item"), l.tabIndex = -1;
-		let te = f(X, this, ws).call(this, (r = e.video) == null ? void 0 : r.frameRate);
+		let te = f(Y, this, Os).call(this, (r = e.video) == null ? void 0 : r.frameRate);
 		l.textContent = e.video ? Te(e.video) : "";
 		let u = document.createElement("span");
-		u.classList.add("menu-item-subtitle"), u.textContent = `${we(((i = (a = e.video) == null ? void 0 : a.bitRate) == null ? 0 : i) + ((o = (s = e.audio) == null ? void 0 : s.bitRate) == null ? 0 : o))}, ${te}p`, l.appendChild(u), l.addEventListener("click", () => f(X, this, Es).call(this, e)), p(vs, this).push({
+		u.classList.add("menu-item-subtitle"), u.textContent = `${we(((i = (a = e.video) == null ? void 0 : a.bitRate) == null ? 0 : i) + ((o = (s = e.audio) == null ? void 0 : s.bitRate) == null ? 0 : o))}, ${te}p`, l.appendChild(u), l.addEventListener("click", () => f(Y, this, As).call(this, e)), p(Ss, this).push({
 			el: l,
 			id: (c = (ee = e.video) == null ? void 0 : ee.id) == null ? -1 : c
 		}), t.appendChild(l);
-	}), f(X, this, Ts).call(this));
+	}), f(Y, this, ks).call(this));
 }
-function ws(e) {
+function Os(e) {
 	return e ? e[0] % e[1] === 0 ? (e[0] / e[1]).toString() : (e[0] / e[1]).toFixed(2) : "";
 }
-function Ts() {
-	p(_s, this) && (p(_s, this).removeAttribute("aria-selected"), p(_s, this).tabIndex = -1);
-	let e = p(hs, this).sort((e, t) => {
+function ks() {
+	p(xs, this) && (p(xs, this).removeAttribute("aria-selected"), p(xs, this).tabIndex = -1);
+	let e = p(ys, this).sort((e, t) => {
 		var n, r;
 		return (n = e.video) != null && n.bitRate && (r = t.video) != null && r.bitRate ? t.video.bitRate - e.video.bitRate : 0;
-	}), t = p(hs, this).filter((e) => {
+	}), t = p(ys, this).filter((e) => {
 		var t;
-		return ((t = e.video) == null ? void 0 : t.bitRate) && e.video.bitRate <= p(gs, this);
+		return ((t = e.video) == null ? void 0 : t.bitRate) && e.video.bitRate <= p(bs, this);
 	})[0] || e[e.length - 1];
 	if (t) {
-		let e = p(vs, this).find((e) => {
+		let e = p(Ss, this).find((e) => {
 			var n;
 			return e.id === ((n = t.video) == null ? void 0 : n.id);
 		});
-		e && (e.el.tabIndex = 0, e.el.setAttribute("aria-selected", "true"), m(_s, this, e.el));
+		e && (e.el.tabIndex = 0, e.el.setAttribute("aria-selected", "true"), m(xs, this, e.el));
 	}
 }
-function Es(e) {
+function As(e) {
 	this.dispatchEvent(new Event("change", {
 		bubbles: !0,
 		composed: !0
@@ -3748,36 +3762,36 @@ function Es(e) {
 		detail: e
 	}));
 }
-function Ds(e) {
+function js(e) {
 	let { key: t, ctrlKey: n, altKey: r, metaKey: i } = e;
 	if (!(n || r || i) && this.keysUsed.includes(t)) if (e.preventDefault(), e.stopPropagation(), t === "Tab" || t === "Escape") {
 		var a;
-		(a = p(bs, this)) == null || a.hide();
+		(a = p(ws, this)) == null || a.hide();
 	} else if (t === "Enter" || t === " ") {
 		var o;
-		(o = f(X, this, ks).call(this)) == null || (o = o.el) == null || o.click();
-	} else f(X, this, Os).call(this, e);
+		(o = f(Y, this, Ns).call(this)) == null || (o = o.el) == null || o.click();
+	} else f(Y, this, Ms).call(this, e);
 }
-function Os(e) {
+function Ms(e) {
 	var t;
-	let { key: n } = e, r = p(vs, this), i = (t = f(X, this, ks).call(this)) == null ? r[0] : t;
+	let { key: n } = e, r = p(Ss, this), i = (t = f(Y, this, Ns).call(this)) == null ? r[0] : t;
 	if (!i) return;
 	let a = r.indexOf(i), o = Math.max(0, a);
 	n === "ArrowDown" ? o++ : n === "ArrowUp" ? o-- : e.key === "Home" ? o = 0 : e.key === "End" && (o = r.length - 1), o < 0 && (o = r.length - 1), o > r.length - 1 && (o = 0);
 	let s = r[o];
-	s && (f(X, this, As).call(this, s.id), s.el.focus());
+	s && (f(Y, this, Ps).call(this, s.id), s.el.focus());
 }
-function ks() {
-	return p(vs, this).find((e) => e.el.tabIndex === 0);
+function Ns() {
+	return p(Ss, this).find((e) => e.el.tabIndex === 0);
 }
-function As(e) {
-	for (let t of p(vs, this)) t.el.tabIndex = t.id === e ? 0 : -1;
+function Ps(e) {
+	for (let t of p(Ss, this)) t.el.tabIndex = t.id === e ? 0 : -1;
 }
-e(xs, "observedAttributes", [g.RENDITION_LEVELS, g.MAX_VIDEO_BITRATE]);
+e(Ts, "observedAttributes", [g.RENDITION_LEVELS, g.MAX_VIDEO_BITRATE]);
 //#endregion
 //#region ../../libs/player-next/src/components/ScrollOverlay.ts
-var js = document.createElement("template");
-js.innerHTML = `
+var Fs = document.createElement("template");
+Fs.innerHTML = `
   <style>
     :host {
       --scroll-overlay-offset: var(--vindral-scroll-overlay-offset, 0px);
@@ -3845,71 +3859,71 @@ js.innerHTML = `
   <div id="scroll-area"></div>
   <slot id="content"></slot>
 `;
-var Ms = /* @__PURE__ */ new WeakMap(), Ns = /* @__PURE__ */ new WeakMap(), Ps = /* @__PURE__ */ new WeakMap(), Fs = /* @__PURE__ */ new WeakMap(), Is = /* @__PURE__ */ new WeakMap(), Ls = /* @__PURE__ */ new WeakMap(), Rs = /* @__PURE__ */ new WeakMap(), Z = /* @__PURE__ */ new WeakSet(), zs = /* @__PURE__ */ new WeakMap(), Bs = class extends HTMLElement {
+var X = /* @__PURE__ */ new WeakMap(), Is = /* @__PURE__ */ new WeakMap(), Ls = /* @__PURE__ */ new WeakMap(), Rs = /* @__PURE__ */ new WeakMap(), zs = /* @__PURE__ */ new WeakMap(), Bs = /* @__PURE__ */ new WeakMap(), Vs = /* @__PURE__ */ new WeakMap(), Z = /* @__PURE__ */ new WeakSet(), Hs = /* @__PURE__ */ new WeakMap(), Us = class extends HTMLElement {
 	constructor() {
-		super(), h(this, Z), d(this, Ms, null), d(this, Ns, null), d(this, Ps, !1), d(this, Fs, !1), d(this, Is, !1), d(this, Ls, () => {
+		super(), h(this, Z), d(this, X, null), d(this, Is, null), d(this, Ls, !1), d(this, Rs, !1), d(this, zs, !1), d(this, Bs, () => {
 			this.open && (this.open = !1);
-		}), d(this, Rs, null), e(this, "handleEvent", (e) => {
+		}), d(this, Vs, null), e(this, "handleEvent", (e) => {
 			switch (e.type) {
 				case "touchstart":
-					f(Z, this, Hs).call(this, e);
+					f(Z, this, Gs).call(this, e);
 					break;
 				case "touchmove":
-					f(Z, this, Us).call(this, e);
+					f(Z, this, Ks).call(this, e);
 					break;
 				case "touchend":
-					f(Z, this, Ws).call(this, e);
+					f(Z, this, qs).call(this, e);
 					break;
 			}
-		}), d(this, zs, () => {
-			let e = p(Is, this);
+		}), d(this, Hs, () => {
+			let e = p(zs, this);
 			if (this.scrollTop === 0) {
-				f(Z, this, Qs).call(this, e);
+				f(Z, this, tc).call(this, e);
 				return;
 			}
-			if (!e && !f(Z, this, Gs).call(this)) {
-				f(Z, this, Xs).call(this), f(Z, this, Qs).call(this);
+			if (!e && !f(Z, this, Js).call(this)) {
+				f(Z, this, $s).call(this), f(Z, this, tc).call(this);
 				return;
 			}
-			!this.visible && this.scrollTop > 0 && !p(Ps, this) ? f(Z, this, $s).call(this) : !p(Ps, this) && f(Z, this, qs).call(this) && (this.open || (this.open = !0), e && !this.hasAttribute("snap-touch") && this.setAttribute("snap-touch", ""));
-		}), this.attachShadow({ mode: "open" }).appendChild(js.content.cloneNode(!0));
+			!this.visible && this.scrollTop > 0 && !p(Ls, this) ? f(Z, this, nc).call(this) : !p(Ls, this) && f(Z, this, Xs).call(this) && (this.open || (this.open = !0), e && !this.hasAttribute("snap-touch") && this.setAttribute("snap-touch", ""));
+		}), this.attachShadow({ mode: "open" }).appendChild(Fs.content.cloneNode(!0));
 	}
 	connectedCallback() {
 		let e = this.getRootNode();
 		if (e instanceof Document || e instanceof ShadowRoot) {
 			var t, n, r;
-			m(Ms, this, e.querySelector("vindral-controller")), (t = p(Ms, this)) == null || t.connectListener(this), m(Ns, this, (n = this.shadowRoot) == null ? void 0 : n.querySelector("#scroll-area")), (r = p(Ns, this)) == null || r.addEventListener("click", p(Ls, this));
+			m(X, this, e.querySelector("vindral-controller")), (t = p(X, this)) == null || t.connectListener(this), m(Is, this, (n = this.shadowRoot) == null ? void 0 : n.querySelector("#scroll-area")), (r = p(Is, this)) == null || r.addEventListener("click", p(Bs, this));
 			let s = this.hasAttribute("touch-enabled");
-			if (m(Is, this, ce() && s), !p(Is, this)) this.setAttribute("snap", "");
+			if (m(zs, this, ce() && s), !p(zs, this)) this.setAttribute("snap", "");
 			else {
 				var i, a, o;
-				(i = p(Ms, this)) == null || i.addEventListener("touchstart", this, { passive: !0 }), (a = p(Ms, this)) == null || a.addEventListener("touchmove", this, { passive: !1 }), (o = p(Ms, this)) == null || o.addEventListener("touchend", this, { passive: !0 });
+				(i = p(X, this)) == null || i.addEventListener("touchstart", this, { passive: !0 }), (a = p(X, this)) == null || a.addEventListener("touchmove", this, { passive: !1 }), (o = p(X, this)) == null || o.addEventListener("touchend", this, { passive: !0 });
 			}
-			this.addEventListener("scroll", p(zs, this));
+			this.addEventListener("scroll", p(Hs, this));
 		}
 	}
 	disconnectedCallback() {
 		var e, t, n, r, i;
-		(e = p(Ns, this)) == null || e.removeEventListener("click", p(Ls, this)), this.removeEventListener("scroll", p(zs, this)), (t = p(Ms, this)) == null || t.removeEventListener("touchstart", this), (n = p(Ms, this)) == null || n.removeEventListener("touchmove", this), (r = p(Ms, this)) == null || r.removeEventListener("touchend", this), (i = p(Ms, this)) == null || i.disconnectListener(this);
+		(e = p(Is, this)) == null || e.removeEventListener("click", p(Bs, this)), this.removeEventListener("scroll", p(Hs, this)), (t = p(X, this)) == null || t.removeEventListener("touchstart", this), (n = p(X, this)) == null || n.removeEventListener("touchmove", this), (r = p(X, this)) == null || r.removeEventListener("touchend", this), (i = p(X, this)) == null || i.disconnectListener(this);
 	}
 	attributeChangedCallback(e, t, n) {
-		if (t !== n && (e === g.USER_INTERACTING && n === null && f(Z, this, Ks).call(this) && setTimeout(() => {
+		if (t !== n && (e === g.USER_INTERACTING && n === null && f(Z, this, Ys).call(this) && setTimeout(() => {
 			this.open = !1;
 		}, 300), e === "open")) if (n !== null) {
 			var r;
-			m(Ps, this, !1), this.scrollTop > 0 && f(Z, this, $s).call(this), this.scrollTo({
-				top: (r = p(Ns, this)) == null ? void 0 : r.clientHeight,
+			m(Ls, this, !1), this.scrollTop > 0 && f(Z, this, nc).call(this), this.scrollTo({
+				top: (r = p(Is, this)) == null ? void 0 : r.clientHeight,
 				behavior: "smooth"
 			});
-		} else f(Z, this, Zs).call(this);
+		} else f(Z, this, ec).call(this);
 	}
 	set open(e) {
 		if (e) {
 			this.setAttribute("open", "");
 			return;
 		}
-		let t = this.hasAttribute("open"), n = this.visible || f(Z, this, Ks).call(this);
-		t ? this.removeAttribute("open") : n ? f(Z, this, Zs).call(this) : (m(Ps, this, !1), this.removeAttribute("snap-touch"));
+		let t = this.hasAttribute("open"), n = this.visible || f(Z, this, Ys).call(this);
+		t ? this.removeAttribute("open") : n ? f(Z, this, ec).call(this) : (m(Ls, this, !1), this.removeAttribute("snap-touch"));
 	}
 	get open() {
 		return this.hasAttribute("open");
@@ -3921,124 +3935,124 @@ var Ms = /* @__PURE__ */ new WeakMap(), Ns = /* @__PURE__ */ new WeakMap(), Ps =
 		return this.hasAttribute("visible");
 	}
 };
-function Vs() {
-	return f(Z, this, Gs).call(this) || f(Z, this, Ys).call(this) || f(Z, this, Ks).call(this);
+function Ws() {
+	return f(Z, this, Js).call(this) || f(Z, this, Qs).call(this) || f(Z, this, Ys).call(this);
 }
-function Hs(e) {
+function Gs(e) {
 	let t = e.touches[0];
-	t && (m(Fs, this, f(Z, this, Vs).call(this)), p(Fs, this) && (m(Ps, this, !1), m(Rs, this, t.clientY)));
+	t && (m(Rs, this, f(Z, this, Ws).call(this)), p(Rs, this) && (m(Ls, this, !1), m(Vs, this, t.clientY)));
 }
-function Us(e) {
-	if (!(!p(Fs, this) || p(Rs, this) === null || this.hasAttribute("snap-touch") && this.open) && (e.preventDefault(), e.touches[0])) {
-		let t = e.touches[0].clientY, n = p(Rs, this) - t;
+function Ks(e) {
+	if (!(!p(Rs, this) || p(Vs, this) === null || this.hasAttribute("snap-touch") && this.open) && (e.preventDefault(), e.touches[0])) {
+		let t = e.touches[0].clientY, n = p(Vs, this) - t;
 		this.scrollTop = Math.max(0, n);
 	}
 }
-function Ws(e) {
-	p(Fs, this) && !p(Ps, this) && f(Z, this, Ks).call(this) && (!this.hasAttribute("snap-touch") || !this.open) && (this.open = !0), m(Rs, this, null), m(Fs, this, !1);
+function qs(e) {
+	p(Rs, this) && !p(Ls, this) && f(Z, this, Ys).call(this) && (!this.hasAttribute("snap-touch") || !this.open) && (this.open = !0), m(Vs, this, null), m(Rs, this, !1);
 }
-function Gs() {
+function Js() {
 	return this.hasAttribute(g.USER_INTERACTING);
 }
-function Ks() {
+function Ys() {
 	return this.scrollTop > 0;
 }
-function qs() {
+function Xs() {
 	var e;
-	return Math.round(this.scrollTop) === this.scrollHeight - this.clientHeight || Math.round(this.scrollTop) === ((e = p(Ns, this)) == null ? void 0 : e.clientHeight);
+	return Math.round(this.scrollTop) === this.scrollHeight - this.clientHeight || Math.round(this.scrollTop) === ((e = p(Is, this)) == null ? void 0 : e.clientHeight);
 }
-function Js() {
+function Zs() {
 	var e;
-	let t = (e = p(Ns, this)) == null ? void 0 : e.clientHeight;
+	let t = (e = p(Is, this)) == null ? void 0 : e.clientHeight;
 	return !t || this.clientHeight <= 0 ? 0 : Math.max(this.clientHeight - t, 0);
 }
-function Ys() {
+function Qs() {
 	let e = getComputedStyle(this), t = Number.parseFloat(e.getPropertyValue("--vindral-scroll-overlay-offset"));
-	return Number.isNaN(t) ? f(Z, this, Js).call(this) > 0 : t > 0;
+	return Number.isNaN(t) ? f(Z, this, Zs).call(this) > 0 : t > 0;
 }
-function Xs() {
+function $s() {
 	let e = this.style.scrollBehavior;
 	this.style.scrollBehavior = "auto", this.scrollTo({
 		top: 0,
 		behavior: "auto"
 	}), this.style.scrollBehavior = e;
 }
-function Zs() {
-	m(Ps, this, !0), this.removeAttribute("snap-touch"), f(Z, this, ec).call(this), this.scrollTo({
+function ec() {
+	m(Ls, this, !0), this.removeAttribute("snap-touch"), f(Z, this, rc).call(this), this.scrollTo({
 		top: 0,
 		behavior: "smooth"
 	});
 }
-function Qs(e = !1) {
-	this.open = !1, e && this.removeAttribute("snap-touch"), m(Ps, this, !1), f(Z, this, ec).call(this);
+function tc(e = !1) {
+	this.open = !1, e && this.removeAttribute("snap-touch"), m(Ls, this, !1), f(Z, this, rc).call(this);
 }
-function $s() {
+function nc() {
 	this.visible || (this.visible = !0, this.dispatchEvent(new CustomEvent(_.LOCK_UI, {
 		bubbles: !0,
 		composed: !0
 	})));
 }
-function ec() {
+function rc() {
 	this.visible && (this.visible = !1, this.dispatchEvent(new CustomEvent(_.UNLOCK_UI, {
 		bubbles: !0,
 		composed: !0
 	})));
 }
-e(Bs, "observedAttributes", [
+e(Us, "observedAttributes", [
 	g.USER_INTERACTING,
 	"open",
 	"touch-enabled"
 ]);
 //#endregion
 //#region ../../libs/player-next/src/components/SeekBar.ts
-var tc = document.createElement("template");
-tc.innerHTML = "\n  <style>\n    :host {\n      --buffered: 0;\n      --vindral-range-thickness: 3px;\n      --vindral-range-hover-thickness: 5px;\n      --vindral-range-thumb-size: 10px;\n      --vindral-range-thumb-hover-size: 15px;\n      --vindral-range-fill-color: linear-gradient(\n        90deg,\n        #03a9f4 0%,\n        #03a9f4 calc(100% - min(20%, 150px)),\n        #b3e5fc 100%\n      );\n      --vindral-range-thumb-color: #03a9f4;\n      display: var(--seek-bar-display);\n      position: relative;\n    }\n\n    :host([data-no-duration]) {\n      display: none;\n    }\n\n    #hover-preview {\n      position: absolute;\n      background-color: rgba(255, 255, 255, 0.6);\n      opacity: 0;\n      pointer-events: none;\n      z-index: 1;\n    }\n\n    #time-tooltip {\n      position: absolute;\n      bottom: 100%;\n      left: 50%;\n      transform: translateX(-50%) translateY(-8px);\n      background: rgba(0, 0, 0, 0.8);\n      color: white;\n      padding: 4px 8px;\n      border-radius: 4px;\n      font-size: 12px;\n      white-space: nowrap;\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity 0.2s;\n      z-index: 10;\n    }\n\n    @media (hover: none) {\n      #time-tooltip {\n        display: none;\n      }\n    }\n  </style>\n\n  <div id=\"buffered-track\"></div>\n  <div id=\"hover-preview\"></div>\n  <div id=\"time-tooltip\"></div>\n";
-var Q = /* @__PURE__ */ new WeakMap(), nc = /* @__PURE__ */ new WeakMap(), rc = /* @__PURE__ */ new WeakMap(), ic = /* @__PURE__ */ new WeakMap(), ac = /* @__PURE__ */ new WeakMap(), oc = /* @__PURE__ */ new WeakMap(), sc = /* @__PURE__ */ new WeakMap(), cc = /* @__PURE__ */ new WeakMap(), $ = /* @__PURE__ */ new WeakSet(), lc = /* @__PURE__ */ new WeakMap(), uc = /* @__PURE__ */ new WeakMap(), dc = /* @__PURE__ */ new WeakMap(), fc = /* @__PURE__ */ new WeakMap(), pc = /* @__PURE__ */ new WeakMap(), mc = /* @__PURE__ */ new WeakMap(), hc = class extends jr {
+var ic = document.createElement("template");
+ic.innerHTML = "\n  <style>\n    :host {\n      --buffered: 0;\n      --vindral-range-thickness: 3px;\n      --vindral-range-hover-thickness: 5px;\n      --vindral-range-thumb-size: 10px;\n      --vindral-range-thumb-hover-size: 15px;\n      --vindral-range-fill-color: linear-gradient(\n        90deg,\n        #03a9f4 0%,\n        #03a9f4 calc(100% - min(20%, 150px)),\n        #b3e5fc 100%\n      );\n      --vindral-range-thumb-color: #03a9f4;\n      display: var(--seek-bar-display);\n      position: relative;\n    }\n\n    :host([data-no-duration]) {\n      display: none;\n    }\n\n    #hover-preview {\n      position: absolute;\n      background-color: rgba(255, 255, 255, 0.6);\n      opacity: 0;\n      pointer-events: none;\n      z-index: 1;\n    }\n\n    #time-tooltip {\n      position: absolute;\n      bottom: 100%;\n      left: 50%;\n      transform: translateX(-50%) translateY(-8px);\n      background: rgba(0, 0, 0, 0.8);\n      color: white;\n      padding: 4px 8px;\n      border-radius: 4px;\n      font-size: 12px;\n      white-space: nowrap;\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity 0.2s;\n      z-index: 10;\n    }\n\n    @media (hover: none) {\n      #time-tooltip {\n        display: none;\n      }\n    }\n  </style>\n\n  <div id=\"buffered-track\"></div>\n  <div id=\"hover-preview\"></div>\n  <div id=\"time-tooltip\"></div>\n";
+var Q = /* @__PURE__ */ new WeakMap(), ac = /* @__PURE__ */ new WeakMap(), oc = /* @__PURE__ */ new WeakMap(), sc = /* @__PURE__ */ new WeakMap(), cc = /* @__PURE__ */ new WeakMap(), lc = /* @__PURE__ */ new WeakMap(), uc = /* @__PURE__ */ new WeakMap(), dc = /* @__PURE__ */ new WeakMap(), $ = /* @__PURE__ */ new WeakSet(), fc = /* @__PURE__ */ new WeakMap(), pc = /* @__PURE__ */ new WeakMap(), mc = /* @__PURE__ */ new WeakMap(), hc = /* @__PURE__ */ new WeakMap(), gc = /* @__PURE__ */ new WeakMap(), _c = /* @__PURE__ */ new WeakMap(), vc = class extends jr {
 	constructor() {
 		var e, t, n;
-		super(), h(this, $), d(this, Q, void 0), d(this, nc, void 0), d(this, rc, void 0), d(this, ic, !1), d(this, ac, null), d(this, oc, null), d(this, sc, !1), d(this, cc, !1), d(this, lc, (e) => {
-			if (!f($, this, _c).call(this) || f($, this, vc).call(this)) {
+		super(), h(this, $), d(this, Q, void 0), d(this, ac, void 0), d(this, oc, void 0), d(this, sc, !1), d(this, cc, null), d(this, lc, null), d(this, uc, !1), d(this, dc, !1), d(this, fc, (e) => {
+			if (!f($, this, bc).call(this) || f($, this, xc).call(this)) {
 				e.preventDefault();
 				return;
 			}
-			m(ic, this, !0), m(oc, this, e.pointerId);
+			m(sc, this, !0), m(lc, this, e.pointerId);
 			try {
 				this.setPointerCapture(e.pointerId);
 			} catch (e) {}
-			f($, this, xc).call(this, e);
-		}), d(this, uc, (e) => {
-			if (!(!f($, this, _c).call(this) || f($, this, vc).call(this))) {
-				if (p(ac, this) && (cancelAnimationFrame(p(ac, this)), m(ac, this, null)), p(ic, this) && e.pointerId === p(oc, this)) {
-					e.preventDefault(), f($, this, xc).call(this, e);
+			f($, this, wc).call(this, e);
+		}), d(this, pc, (e) => {
+			if (!(!f($, this, bc).call(this) || f($, this, xc).call(this))) {
+				if (p(cc, this) && (cancelAnimationFrame(p(cc, this)), m(cc, this, null)), p(sc, this) && e.pointerId === p(lc, this)) {
+					e.preventDefault(), f($, this, wc).call(this, e);
 					return;
 				}
-				m(ac, this, requestAnimationFrame(() => {
-					if (e.pointerType !== "mouse" || p(ic, this) || !this.duration) {
-						p(rc, this).style.opacity = "0", m(ac, this, null);
+				m(cc, this, requestAnimationFrame(() => {
+					if (e.pointerType !== "mouse" || p(sc, this) || !this.duration) {
+						p(oc, this).style.opacity = "0", m(cc, this, null);
 						return;
 					}
-					let t = f($, this, bc).call(this, e.clientX);
-					if (f($, this, Cc).call(this, t, e.clientX), t > this.range.valueAsNumber) {
+					let t = f($, this, Cc).call(this, e.clientX);
+					if (f($, this, Ec).call(this, t, e.clientX), t > this.range.valueAsNumber) {
 						let e = this.range.valueAsNumber * 100, n = (t - this.range.valueAsNumber) * 100;
-						p(rc, this).style.transform = `translateX(${e}%) scaleX(${n / 100})`, p(rc, this).style.opacity = "1";
-					} else p(rc, this).style.opacity = "0";
-					m(ac, this, null);
+						p(oc, this).style.transform = `translateX(${e}%) scaleX(${n / 100})`, p(oc, this).style.opacity = "1";
+					} else p(oc, this).style.opacity = "0";
+					m(cc, this, null);
 				}));
 			}
-		}), d(this, dc, (e) => {
-			if (e.pointerId === p(oc, this)) {
+		}), d(this, mc, (e) => {
+			if (e.pointerId === p(lc, this)) {
 				try {
 					this.releasePointerCapture(e.pointerId);
 				} catch (e) {}
-				m(ic, this, !1), m(oc, this, null), e.pointerType !== "mouse" && (p(nc, this).style.opacity = "0"), p(cc, this) && f($, this, Ec).call(this) && (m(sc, this, !1), m(cc, this, !1));
+				m(sc, this, !1), m(lc, this, null), e.pointerType !== "mouse" && (p(ac, this).style.opacity = "0"), p(dc, this) && f($, this, kc).call(this) && (m(uc, this, !1), m(dc, this, !1));
 			}
-		}), d(this, fc, () => {
-			this.duration && !f($, this, vc).call(this) && (p(nc, this).style.opacity = "1");
-		}), d(this, pc, () => {
-			p(nc, this).style.opacity = "0", p(rc, this).style.opacity = "0";
-		}), d(this, mc, (e) => {
-			if (f($, this, vc).call(this) || !p(Q, this) || p(Q, this) <= 0 || !Number.isFinite(p(Q, this))) return;
-			let t = f($, this, gc).call(this);
+		}), d(this, hc, () => {
+			this.duration && !f($, this, xc).call(this) && (p(ac, this).style.opacity = "1");
+		}), d(this, gc, () => {
+			p(ac, this).style.opacity = "0", p(oc, this).style.opacity = "0";
+		}), d(this, _c, (e) => {
+			if (f($, this, xc).call(this) || !p(Q, this) || p(Q, this) <= 0 || !Number.isFinite(p(Q, this))) return;
+			let t = f($, this, yc).call(this);
 			if (t <= 0) return;
 			let n = this.range.valueAsNumber * t, r = n;
 			switch (e.preventDefault(), e.key) {
@@ -4046,43 +4060,43 @@ var Q = /* @__PURE__ */ new WeakMap(), nc = /* @__PURE__ */ new WeakMap(), rc =
 					r = Math.max(0, n - 5);
 					break;
 				case "ArrowRight":
-					if (f($, this, Ec).call(this)) return;
+					if (f($, this, kc).call(this)) return;
 					r = Math.min(t, n + 5);
 					break;
 				case "Home":
 					r = 0;
 					break;
 				case "End":
-					if (f($, this, Ec).call(this)) return;
+					if (f($, this, kc).call(this)) return;
 					r = t;
 					break;
 				default: return;
 			}
 			let i = Math.min(r / t, 1);
-			f($, this, Sc).call(this, i);
-		}), (e = this.shadowRoot) == null || e.appendChild(tc.content.cloneNode(!0)), m(nc, this, (t = this.shadowRoot) == null ? void 0 : t.getElementById("time-tooltip")), m(rc, this, (n = this.shadowRoot) == null ? void 0 : n.getElementById("hover-preview")), this.addEventListener("pointerdown", p(lc, this)), this.addEventListener("pointermove", p(uc, this)), this.addEventListener("pointerup", p(dc, this)), this.addEventListener("pointercancel", p(dc, this)), this.addEventListener("mouseenter", p(fc, this)), this.addEventListener("mouseleave", p(pc, this));
+			f($, this, Tc).call(this, i);
+		}), (e = this.shadowRoot) == null || e.appendChild(ic.content.cloneNode(!0)), m(ac, this, (t = this.shadowRoot) == null ? void 0 : t.getElementById("time-tooltip")), m(oc, this, (n = this.shadowRoot) == null ? void 0 : n.getElementById("hover-preview")), this.addEventListener("pointerdown", p(fc, this)), this.addEventListener("pointermove", p(pc, this)), this.addEventListener("pointerup", p(mc, this)), this.addEventListener("pointercancel", p(mc, this)), this.addEventListener("mouseenter", p(hc, this)), this.addEventListener("mouseleave", p(gc, this));
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.setAttribute("aria-label", "Seek video position"), this.setAttribute("role", "slider"), f($, this, yc).call(this), this.addEventListener("keydown", p(mc, this)), f($, this, Ec).call(this) && (this.range.value = "1", f($, this, yc).call(this));
+		super.connectedCallback(), this.setAttribute("aria-label", "Seek video position"), this.setAttribute("role", "slider"), f($, this, Sc).call(this), this.addEventListener("keydown", p(_c, this)), f($, this, kc).call(this) && (this.range.value = "1", f($, this, Sc).call(this));
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeEventListener("pointerdown", p(lc, this)), this.removeEventListener("pointermove", p(uc, this)), this.removeEventListener("pointerup", p(dc, this)), this.removeEventListener("pointercancel", p(dc, this)), this.removeEventListener("mouseenter", p(fc, this)), this.removeEventListener("mouseleave", p(pc, this)), this.removeEventListener("keydown", p(mc, this)), m(oc, this, null);
+		super.disconnectedCallback(), this.removeEventListener("pointerdown", p(fc, this)), this.removeEventListener("pointermove", p(pc, this)), this.removeEventListener("pointerup", p(mc, this)), this.removeEventListener("pointercancel", p(mc, this)), this.removeEventListener("mouseenter", p(hc, this)), this.removeEventListener("mouseleave", p(gc, this)), this.removeEventListener("keydown", p(_c, this)), m(lc, this, null);
 	}
 	attributeChangedCallback(e, t, n) {
 		if (super.attributeChangedCallback(e, t, n), t !== n) switch (e) {
 			case g.TIMESHIFT_POSITION:
-				if (f($, this, Ec).call(this)) {
-					p(ic, this) ? m(cc, this, !0) : (m(sc, this, !1), m(cc, this, !1)), this.range.value = "1", f($, this, yc).call(this);
+				if (f($, this, kc).call(this)) {
+					p(sc, this) ? m(dc, this, !0) : (m(uc, this, !1), m(dc, this, !1)), this.range.value = "1", f($, this, Sc).call(this);
 					return;
 				}
 				if (p(Q, this)) {
-					m(cc, this, !1);
+					m(dc, this, !1);
 					let e = Math.max(parseFloat(n) / p(Q, this), 0);
-					this.range.value = e.toString(), f($, this, yc).call(this);
+					this.range.value = e.toString(), f($, this, Sc).call(this);
 				}
 				break;
 			case g.DURATION:
-				m(Q, this, parseFloat(n) || 0), f($, this, yc).call(this);
+				m(Q, this, parseFloat(n) || 0), f($, this, Sc).call(this);
 				break;
 		}
 	}
@@ -4100,68 +4114,68 @@ var Q = /* @__PURE__ */ new WeakMap(), nc = /* @__PURE__ */ new WeakMap(), rc =
 		this.setAttribute(g.DURATION, e.toString());
 	}
 };
-function gc() {
+function yc() {
 	return p(Q, this) ? p(Q, this) : 1;
 }
-function _c() {
+function bc() {
 	return !!p(Q, this) && p(Q, this) > 0 && Number.isFinite(p(Q, this));
 }
-function vc() {
-	return p(sc, this);
+function xc() {
+	return p(uc, this);
 }
-function yc() {
-	let e = f($, this, gc).call(this);
-	!p(Q, this) || p(Q, this) <= 0 || !Number.isFinite(p(Q, this)) ? this.setAttribute("data-no-duration", "") : this.removeAttribute("data-no-duration"), p(ic, this) || (this.updateBar(), this.setAttribute("aria-valuetext", `${f($, this, Dc).call(this, this.range.valueAsNumber * e)} of ${f($, this, Dc).call(this, e)}`), !p(ic, this) && !f($, this, vc).call(this) && f($, this, Tc).call(this, this.range.valueAsNumber));
+function Sc() {
+	let e = f($, this, yc).call(this);
+	!p(Q, this) || p(Q, this) <= 0 || !Number.isFinite(p(Q, this)) ? this.setAttribute("data-no-duration", "") : this.removeAttribute("data-no-duration"), p(sc, this) || (this.updateBar(), this.setAttribute("aria-valuetext", `${f($, this, Ac).call(this, this.range.valueAsNumber * e)} of ${f($, this, Ac).call(this, e)}`), !p(sc, this) && !f($, this, xc).call(this) && f($, this, Oc).call(this, this.range.valueAsNumber));
 }
-function bc(e) {
+function Cc(e) {
 	let t = this.getBoundingClientRect(), n = (e - t.left) / t.width;
 	return Math.max(0, Math.min(1, n));
 }
-function xc(e) {
-	let t = f($, this, bc).call(this, e.clientX);
-	f($, this, Cc).call(this, t, e.clientX), p(ic, this) || (p(nc, this).style.opacity = "1"), f($, this, Sc).call(this, t);
+function wc(e) {
+	let t = f($, this, Cc).call(this, e.clientX);
+	f($, this, Ec).call(this, t, e.clientX), p(sc, this) || (p(ac, this).style.opacity = "1"), f($, this, Tc).call(this, t);
 }
-function Sc(e) {
-	if (f($, this, vc).call(this) || f($, this, Tc).call(this, e)) return;
-	let t = e * f($, this, gc).call(this);
-	this.range.value = e.toString(), this.updateBar(), f($, this, wc).call(this, t);
+function Tc(e) {
+	if (f($, this, xc).call(this) || f($, this, Oc).call(this, e)) return;
+	let t = e * f($, this, yc).call(this);
+	this.range.value = e.toString(), this.updateBar(), f($, this, Dc).call(this, t);
 }
-function Cc(e, t) {
+function Ec(e, t) {
 	if (!p(Q, this) || !Number.isFinite(p(Q, this))) return;
 	let n = e * p(Q, this), r = p(Q, this) - n;
-	p(nc, this).textContent = `-${f($, this, Dc).call(this, r)}`;
+	p(ac, this).textContent = `-${f($, this, Ac).call(this, r)}`;
 	let i = this.getBoundingClientRect(), a = (t - i.left) / i.width * 100;
-	p(nc, this).style.left = `${Math.min(Math.max(a, 2), 98)}%`;
+	p(ac, this).style.left = `${Math.min(Math.max(a, 2), 98)}%`;
 }
-function wc(e) {
+function Dc(e) {
 	this.dispatchEvent(new CustomEvent("seek", {
 		bubbles: !0,
 		composed: !0,
 		detail: e
 	}));
 }
-function Tc(e) {
-	return p(sc, this) || f($, this, Ec).call(this) || e < .999 ? !1 : (m(sc, this, !0), m(cc, this, !1), this.dispatchEvent(new CustomEvent(_.GO_LIVE, {
+function Oc(e) {
+	return p(uc, this) || f($, this, kc).call(this) || e < .999 ? !1 : (m(uc, this, !0), m(dc, this, !1), this.dispatchEvent(new CustomEvent(_.GO_LIVE, {
 		bubbles: !0,
 		composed: !0
 	})), !0);
 }
-function Ec() {
+function kc() {
 	return !this.hasAttribute(g.TIMESHIFT_POSITION);
 }
-function Dc(e) {
+function Ac(e) {
 	let t = Math.floor(e / 3600), n = Math.floor(e % 3600 / 60), r = Math.floor(e % 60);
 	return p(Q, this) && p(Q, this) >= 3600 ? `${t}:${n.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}` : `${n}:${r.toString().padStart(2, "0")}`;
 }
-e(hc, "observedAttributes", [
+e(vc, "observedAttributes", [
 	...jr.observedAttributes,
 	g.TIMESHIFT_POSITION,
 	g.DURATION
 ]);
 //#endregion
 //#region ../../libs/player-next/src/components/UserInputPlayOverlay.ts
-var Oc = document.createElement("template");
-Oc.innerHTML = `
+var jc = document.createElement("template");
+jc.innerHTML = `
   <style>
     :host {
       display: var(--play-overlay-display);
@@ -4221,123 +4235,140 @@ Oc.innerHTML = `
 </slot>
   </slot>
 `;
-var kc = /* @__PURE__ */ new WeakMap(), Ac = /* @__PURE__ */ new WeakMap(), jc = /* @__PURE__ */ new WeakMap(), Mc = /* @__PURE__ */ new WeakMap(), Nc = class extends HTMLElement {
+var Mc = /* @__PURE__ */ new WeakMap(), Nc = /* @__PURE__ */ new WeakMap(), Pc = /* @__PURE__ */ new WeakMap(), Fc = /* @__PURE__ */ new WeakMap(), Ic = class extends HTMLElement {
 	constructor() {
-		super(), d(this, kc, null), d(this, Ac, () => {
+		super(), d(this, Mc, null), d(this, Nc, () => {
 			this.dispatchEvent(new CustomEvent(_.REQUEST_USER_INPUT, {
 				bubbles: !0,
 				composed: !0
 			}));
-		}), d(this, jc, (e) => {
+		}), d(this, Pc, (e) => {
 			let { key: t } = e;
 			if (!this.keysUsed.includes(t)) {
-				this.removeEventListener("keyup", p(jc, this));
+				this.removeEventListener("keyup", p(Pc, this));
 				return;
 			}
 			this.dispatchEvent(new CustomEvent(_.REQUEST_USER_INPUT, {
 				bubbles: !0,
 				composed: !0
 			}));
-		}), d(this, Mc, (e) => {
+		}), d(this, Fc, (e) => {
 			let { metaKey: t, altKey: n, key: r } = e;
 			if (t || n || !this.keysUsed.includes(r)) {
-				this.removeEventListener("keyup", p(jc, this));
+				this.removeEventListener("keyup", p(Pc, this));
 				return;
 			}
-			this.addEventListener("keyup", p(jc, this), { once: !0 });
-		}), this.attachShadow({ mode: "open" }).appendChild(Oc.content.cloneNode(!0));
+			this.addEventListener("keyup", p(Pc, this), { once: !0 });
+		}), this.attachShadow({ mode: "open" }).appendChild(jc.content.cloneNode(!0));
 	}
 	get keysUsed() {
 		return ["Enter", " "];
 	}
 	connectedCallback() {
 		var e;
-		m(kc, this, this.closest("vindral-controller")), (e = p(kc, this)) == null || e.connectListener(this), this.setAttribute("aria-label", "Play"), this.setAttribute("role", "button"), this.enable();
+		m(Mc, this, this.closest("vindral-controller")), (e = p(Mc, this)) == null || e.connectListener(this), this.setAttribute("aria-label", "Play"), this.setAttribute("role", "button"), this.enable();
 	}
 	enable() {
-		this.addEventListener("click", p(Ac, this)), this.addEventListener("keydown", p(Mc, this)), this.tabIndex = 0;
+		this.addEventListener("click", p(Nc, this)), this.addEventListener("keydown", p(Fc, this)), this.tabIndex = 0;
 	}
 	disable() {
-		this.removeEventListener("click", p(Ac, this)), this.removeEventListener("keydown", p(Mc, this)), this.removeEventListener("keyup", p(jc, this)), this.tabIndex = -1;
+		this.removeEventListener("click", p(Nc, this)), this.removeEventListener("keydown", p(Fc, this)), this.removeEventListener("keyup", p(Pc, this)), this.tabIndex = -1;
 	}
 	disconnectedCallback() {
 		var e;
-		(e = p(kc, this)) == null || e.disconnectListener(this), this.disable();
+		(e = p(Mc, this)) == null || e.disconnectListener(this), this.disable();
 	}
 };
-e(Nc, "observedAttributes", [
+e(Ic, "observedAttributes", [
 	"hidden",
 	g.NEEDS_USER_INPUT_VIDEO,
 	g.NEEDS_USER_INPUT_AUDIO,
 	g.PAUSED
 ]);
 //#endregion
+//#region ../../libs/player-next/src/components/VindralCenterOverlay.ts
+var Lc = document.createElement("template");
+Lc.innerHTML = "\n  <style>\n    :host {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 16px;\n      pointer-events: none;\n      z-index: 1;\n    }\n\n    :host::before {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      z-index: -1;\n      background-color: rgba(0, 0, 0, 0.3);\n      background-image: var(--_backdrop-image, none);\n      background-repeat: no-repeat;\n      background-position: 50% 50%;\n      background-size: contain;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity 100ms;\n    }\n\n    :host([backdrop]:not([disable-backdrop]))::before {\n      opacity: 1;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host::before {\n        transition: none;\n      }\n    }\n  </style>\n\n  <slot></slot>\n";
+var Rc = class extends HTMLElement {
+	constructor() {
+		super(), this.attachShadow({ mode: "open" }).appendChild(Lc.content.cloneNode(!0));
+	}
+	attributeChangedCallback(e, t, n) {
+		t !== n && e === "poster" && this.style.setProperty("--_backdrop-image", n ? `url("${n}")` : "none");
+	}
+};
+e(Rc, "observedAttributes", [
+	"backdrop",
+	"poster",
+	"disable-backdrop"
+]);
+//#endregion
 //#region ../../libs/player-next/src/components/VindralMessage.ts
-var Pc = document.createElement("template");
-Pc.innerHTML = "\n  <style>\n    :host,\n    #background {\n      position: absolute;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      width: 100%;\n      top: 0;\n      left: 0;\n      background-repeat: no-repeat;\n      background-position: 50% 50%;\n      background-size: contain;\n      font-size: 20px;\n      color: var(--fg-strong);\n      pointer-events: none;\n      transition: opacity 100ms;\n      background-color: rgba(0, 0, 0, 0.3);\n    }\n\n    :host([hidden]) {\n      opacity: 0;\n    }\n\n    #message-container {\n      position: absolute;\n      left: 50%;\n      bottom: calc(50% + var(--play-overlay-icon-size));\n      transform: translateX(-50%);\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      width: max-content;\n      max-width: 90%;\n      pointer-events: none;\n    }\n\n    #title,\n    #description {\n      text-align: center;\n      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);\n      margin: 0;\n    }\n\n    #title {\n      margin-bottom: var(--padding-2);\n    }\n\n    @container (max-width: 600px) {\n      :host {\n        font-size: 15px;\n      }\n      #message-container {\n        bottom: 0;\n        top: var(--padding-1);\n      }\n    }\n\n    @container (max-width: 400px) {\n      :host {\n        font-size: 12px;\n      }\n      #title {\n        margin-bottom: 0;\n      }\n    }\n\n    @container (max-width: 150px) {\n      :host {\n        font-size: 10px;\n      }\n      #title,\n      #description {\n        font-size: 1.2em;\n        margin: 0;\n      }\n    }\n  </style>\n\n  <div id=\"background\"></div>\n  <div id=\"message-container\">\n    <h1 id=\"title\"></h1>\n    <p id=\"description\"></p>\n  </div>\n";
-var Fc = /* @__PURE__ */ new WeakMap(), Ic = /* @__PURE__ */ new WeakMap(), Lc = /* @__PURE__ */ new WeakMap(), Rc = class extends HTMLElement {
+var zc = document.createElement("template");
+zc.innerHTML = "\n  <style>\n    :host {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      max-width: 90%;\n      color: var(--fg-strong);\n      font-size: 20px;\n      pointer-events: none;\n      opacity: 1;\n      transition:\n        opacity 100ms,\n        display 100ms allow-discrete;\n    }\n\n    :host([hidden]) {\n      display: none;\n      opacity: 0;\n    }\n\n    @starting-style {\n      :host(:not([hidden])) {\n        opacity: 0;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host {\n        transition: none;\n      }\n    }\n\n    #title,\n    #description {\n      text-align: center;\n      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);\n      margin: 0;\n    }\n\n    #title {\n      margin-bottom: var(--padding-2);\n    }\n\n    @container (max-width: 600px) {\n      :host {\n        font-size: 15px;\n      }\n    }\n\n    @container (max-width: 400px) {\n      :host {\n        font-size: 12px;\n      }\n      #title {\n        margin-bottom: 0;\n      }\n    }\n\n    @container (max-width: 150px) {\n      :host {\n        font-size: 10px;\n      }\n      #title,\n      #description {\n        font-size: 1.2em;\n        margin: 0;\n      }\n    }\n  </style>\n\n  <h1 id=\"title\"></h1>\n  <p id=\"description\"></p>\n";
+var Bc = /* @__PURE__ */ new WeakMap(), Vc = /* @__PURE__ */ new WeakMap(), Hc = class extends HTMLElement {
 	constructor() {
-		super(), d(this, Fc, void 0), d(this, Ic, void 0), d(this, Lc, void 0);
+		super(), d(this, Bc, void 0), d(this, Vc, void 0);
 		let e = this.attachShadow({ mode: "open" });
-		e.appendChild(Pc.content.cloneNode(!0)), m(Fc, this, e.querySelector("#title")), m(Ic, this, e.querySelector("#description")), m(Lc, this, e.querySelector("#background"));
+		e.appendChild(zc.content.cloneNode(!0)), m(Bc, this, e.querySelector("#title")), m(Vc, this, e.querySelector("#description"));
+	}
+	connectedCallback() {
+		this.hasAttribute("role") || (this.setAttribute("role", "alert"), this.setAttribute("aria-atomic", "true"));
 	}
-	connectedCallback() {}
-	disconnectedCallback() {}
 	attributeChangedCallback(e, t, n) {
-		t !== n && (e === "title" ? p(Fc, this).textContent = n : e === "description" ? p(Ic, this).textContent = n : e === "background-image" && (p(Lc, this).style.backgroundImage = `url(${n})`));
+		t !== n && (e === "title" ? p(Bc, this).textContent = n : e === "description" && (p(Vc, this).textContent = n));
 	}
 };
-e(Rc, "observedAttributes", [
+e(Hc, "observedAttributes", [
 	"title",
 	"description",
-	"background-image",
 	"hidden"
 ]);
 //#endregion
 //#region ../../libs/player-next/src/components/VindralPlayOverlay.ts
-var zc = document.createElement("template");
-zc.innerHTML = "\n  <style>\n    :host {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      z-index: 1;\n      pointer-events: none;\n    }\n\n    :host([hidden]) {\n      display: none;\n    }\n\n    :host(:focus-visible) {\n      outline: none;\n      outline: 0;\n    }\n\n    :host(:focus-visible) svg {\n      outline: 0;\n    }\n\n    :host(:where(:focus)) svg {\n      box-shadow: none;\n      outline: 0;\n    }\n\n    :host(:active) svg {\n      scale: 0.9;\n    }\n\n    slot#play {\n      color: var(--fg-strong);\n      pointer-events: auto;\n      cursor: pointer;\n    }\n\n    slot#play > svg {\n      width: var(--play-overlay-icon-size);\n      height: var(--play-overlay-icon-size);\n    }\n  </style>\n\n  <slot id=\"play\" name=\"icon\">\n  <svg  xmlns=\"http://www.w3.org/2000/svg\"  width=\"24\"  height=\"24\"  viewBox=\"0 0 24 24\"  fill=\"currentColor\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M6 4v16a1 1 0 0 0 1.524 .852l13 -8a1 1 0 0 0 0 -1.704l-13 -8a1 1 0 0 0 -1.524 .852z\" /></svg>\n</slot>\n";
-var Bc = /* @__PURE__ */ new WeakMap(), Vc = class extends HTMLElement {
+var Uc = document.createElement("template");
+Uc.innerHTML = "\n  <style>\n    :host {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      pointer-events: none;\n      opacity: 1;\n      transition:\n        opacity 100ms,\n        display 100ms allow-discrete;\n    }\n\n    :host([hidden]) {\n      display: none;\n      opacity: 0;\n    }\n\n    @starting-style {\n      :host(:not([hidden])) {\n        opacity: 0;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host {\n        transition: none;\n      }\n    }\n\n    :host(:focus-visible) {\n      outline: none;\n      outline: 0;\n    }\n\n    :host(:focus-visible) svg {\n      outline: 0;\n    }\n\n    :host(:where(:focus)) svg {\n      box-shadow: none;\n      outline: 0;\n    }\n\n    :host(:active) svg {\n      scale: 0.9;\n    }\n\n    slot#play {\n      color: var(--fg-strong);\n      pointer-events: auto;\n      cursor: pointer;\n    }\n\n    slot#play > svg {\n      width: var(--play-overlay-icon-size);\n      height: var(--play-overlay-icon-size);\n    }\n  </style>\n\n  <slot id=\"play\" name=\"icon\">\n  <svg  xmlns=\"http://www.w3.org/2000/svg\"  width=\"24\"  height=\"24\"  viewBox=\"0 0 24 24\"  fill=\"currentColor\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M6 4v16a1 1 0 0 0 1.524 .852l13 -8a1 1 0 0 0 0 -1.704l-13 -8a1 1 0 0 0 -1.524 .852z\" /></svg>\n</slot>\n";
+var Wc = /* @__PURE__ */ new WeakMap(), Gc = class extends HTMLElement {
 	constructor() {
-		super(), d(this, Bc, null), this.attachShadow({ mode: "open" }).appendChild(zc.content.cloneNode(!0));
+		super(), d(this, Wc, null), this.attachShadow({ mode: "open" }).appendChild(Uc.content.cloneNode(!0));
 	}
 	connectedCallback() {
 		var e;
-		m(Bc, this, this.closest("vindral-controller")), (e = p(Bc, this)) == null || e.connectListener(this), this.setAttribute("aria-label", "Play"), this.setAttribute("role", "button"), this.tabIndex = 0;
+		m(Wc, this, this.closest("vindral-controller")), (e = p(Wc, this)) == null || e.connectListener(this), this.setAttribute("aria-label", "Play"), this.setAttribute("role", "button"), this.tabIndex = 0;
 	}
 	disconnectedCallback() {
 		var e;
-		(e = p(Bc, this)) == null || e.disconnectListener(this);
+		(e = p(Wc, this)) == null || e.disconnectListener(this);
 	}
 	attributeChangedCallback(e, t, n) {
 		t !== n && e === "hidden" && !v(n) && this.focus();
 	}
 };
-e(Vc, "observedAttributes", ["hidden"]);
+e(Gc, "observedAttributes", ["hidden"]);
 //#endregion
 //#region ../../libs/player-next/src/components/VolumeRange.ts
-var Hc, Uc = document.createElement("template");
-Uc.innerHTML = "\n  <style>\n    :host {\n      display: var(--volume-range-display);\n      width: 80px;\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n      :host(:hover) {\n        background: rgba(255, 255, 255, 0.15);\n      }\n    }\n\n    :host(:active) {\n      background: rgba(255, 255, 255, 0.25);\n    }\n  </style>\n";
-var Wc = (e) => `${Math.round(e * 100)}%`, Gc = /* @__PURE__ */ new WeakMap(), Kc = class extends jr {
+var Kc, qc = document.createElement("template");
+qc.innerHTML = "\n  <style>\n    :host {\n      display: var(--volume-range-display);\n      width: 80px;\n    }\n\n    @media (hover: hover) and (pointer: fine) {\n      :host(:hover) {\n        background: rgba(255, 255, 255, 0.15);\n      }\n    }\n\n    :host(:active) {\n      background: rgba(255, 255, 255, 0.25);\n    }\n  </style>\n";
+var Jc = (e) => `${Math.round(e * 100)}%`, Yc = /* @__PURE__ */ new WeakMap(), Xc = class extends jr {
 	constructor() {
 		var e;
-		super(), d(this, Gc, () => {
+		super(), d(this, Yc, () => {
 			let e = this.range.valueAsNumber;
 			this.dispatchEvent(new CustomEvent(_.SET_VOLUME, {
 				bubbles: !0,
 				composed: !0,
 				detail: e
 			}));
-		}), (e = this.shadowRoot) == null || e.appendChild(Uc.content.cloneNode(!0));
+		}), (e = this.shadowRoot) == null || e.appendChild(qc.content.cloneNode(!0));
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.range.addEventListener("input", p(Gc, this)), this.range.setAttribute("aria-label", "volume");
+		super.connectedCallback(), this.range.addEventListener("input", p(Yc, this)), this.range.setAttribute("aria-label", "volume");
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.range.removeEventListener("input", p(Gc, this));
+		super.disconnectedCallback(), this.range.removeEventListener("input", p(Yc, this));
 	}
 	attributeChangedCallback(e, t, n) {
-		super.attributeChangedCallback(e, t, n), (e === g.MUTED || e === g.VOLUME) && (this.range.valueAsNumber = this.muted ? 0 : parseFloat(this.volume), this.range.setAttribute("aria-valuetext", Wc(this.range.valueAsNumber)), this.updateBar());
+		super.attributeChangedCallback(e, t, n), (e === g.MUTED || e === g.VOLUME) && (this.range.valueAsNumber = this.muted ? 0 : parseFloat(this.volume), this.range.setAttribute("aria-valuetext", Jc(this.range.valueAsNumber)), this.updateBar());
 	}
 	get volume() {
 		var e;
@@ -4347,15 +4378,15 @@ var Wc = (e) => `${Math.round(e * 100)}%`, Gc = /* @__PURE__ */ new WeakMap(), K
 		return this.hasAttribute(g.MUTED);
 	}
 };
-Hc = Kc, e(Kc, "observedAttributes", [
-	...y(Hc, "observedAttributes", Hc),
+Kc = Xc, e(Xc, "observedAttributes", [
+	...y(Kc, "observedAttributes", Kc),
 	g.MUTED,
 	g.VOLUME
 ]);
 //#endregion
 //#region ../../libs/player-next/src/registerComponents.ts
-function qc() {
-	customElements.define("vindral-controller", Mi), customElements.define("vindral-control-bar", Fn), customElements.define("vindral-advanced-rendition-menu", Ge), customElements.define("vindral-advanced-rendition-menu-list", rt), customElements.define("vindral-play-button", fo), customElements.define("vindral-mute-button", ao), customElements.define("vindral-buffering-overlay", At), customElements.define("vindral-scroll-overlay", Bs), customElements.define("vindral-play-overlay", Vc), customElements.define("vindral-user-input-play-overlay", Nc), customElements.define("vindral-fullscreen-button", xa), customElements.define("vindral-rendition-levels-menu", fs), customElements.define("vindral-rendition-levels-menu-list", xs), customElements.define("vindral-channel-grid-button", On), customElements.define("vindral-channel-grid", en), customElements.define("vindral-channel-grid-item", Wt), customElements.define("vindral-pip-button", co), customElements.define("vindral-airplay-button", Ct), customElements.define("vindral-cast-button", Pt), customElements.define("vindral-cast-overlay", Bt), customElements.define("vindral-buffering-icon", Dt), customElements.define("vindral-language-menu", Ea), customElements.define("vindral-language-menu-list", Ba), customElements.define("vindral-message", Rc), customElements.define("vindral-volume-range", Kc), customElements.define("vindral-poster-overlay", is), customElements.define("vindral-player", Wo), customElements.define("vindral-seek-bar", hc), customElements.define("vindral-live-button", no);
+function Zc() {
+	customElements.define("vindral-controller", Mi), customElements.define("vindral-control-bar", Fn), customElements.define("vindral-advanced-rendition-menu", Ge), customElements.define("vindral-advanced-rendition-menu-list", rt), customElements.define("vindral-play-button", po), customElements.define("vindral-mute-button", oo), customElements.define("vindral-buffering-overlay", At), customElements.define("vindral-scroll-overlay", Us), customElements.define("vindral-play-overlay", Gc), customElements.define("vindral-user-input-play-overlay", Ic), customElements.define("vindral-fullscreen-button", Sa), customElements.define("vindral-rendition-levels-menu", gs), customElements.define("vindral-rendition-levels-menu-list", Ts), customElements.define("vindral-channel-grid-button", On), customElements.define("vindral-channel-grid", en), customElements.define("vindral-channel-grid-item", Wt), customElements.define("vindral-pip-button", lo), customElements.define("vindral-airplay-button", Ct), customElements.define("vindral-cast-button", Pt), customElements.define("vindral-cast-overlay", Bt), customElements.define("vindral-buffering-icon", Dt), customElements.define("vindral-language-menu", Da), customElements.define("vindral-language-menu-list", Va), customElements.define("vindral-center-overlay", Rc), customElements.define("vindral-message", Hc), customElements.define("vindral-volume-range", Xc), customElements.define("vindral-poster-overlay", cs), customElements.define("vindral-player", qo), customElements.define("vindral-seek-bar", vc), customElements.define("vindral-live-button", ro);
 }
 //#endregion
-export { qc as t };
+export { Zc as t };