@vindral/web-sdk 4.0.0 → 4.1.0-2-gc61db412

package/player.js

@@ -1,44 +1,44 @@
-var Dn = Object.defineProperty;
-var Fn = Object.getPrototypeOf;
-var Hn = Reflect.get;
-var Qi = (d) => {
+var Br = Object.defineProperty;
+var Kr = Object.getPrototypeOf;
+var qr = Reflect.get;
+var Fs = (d) => {
   throw TypeError(d);
 };
-var On = (d, r, t) => r in d ? Dn(d, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[r] = t;
-var p = (d, r, t) => On(d, typeof r != "symbol" ? r + "" : r, t), ai = (d, r, t) => r.has(d) || Qi("Cannot " + t);
-var e = (d, r, t) => (ai(d, r, "read from private field"), t ? t.call(d) : r.get(d)), l = (d, r, t) => r.has(d) ? Qi("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(d) : r.set(d, t), h = (d, r, t, n) => (ai(d, r, "write to private field"), n ? n.call(d, t) : r.set(d, t), t), o = (d, r, t) => (ai(d, r, "access private method"), t);
-var _ = (d, r, t) => Hn(Fn(d), t, r);
-var P = (d, r, t) => new Promise((n, i) => {
-  var a = (f) => {
+var Xr = (d, a, t) => a in d ? Br(d, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[a] = t;
+var m = (d, a, t) => Xr(d, typeof a != "symbol" ? a + "" : a, t), Hi = (d, a, t) => a.has(d) || Fs("Cannot " + t);
+var e = (d, a, t) => (Hi(d, a, "read from private field"), t ? t.call(d) : a.get(d)), l = (d, a, t) => a.has(d) ? Fs("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(d) : a.set(d, t), c = (d, a, t, i) => (Hi(d, a, "write to private field"), i ? i.call(d, t) : a.set(d, t), t), r = (d, a, t) => (Hi(d, a, "access private method"), t);
+var q = (d, a, t) => qr(Kr(d), t, a);
+var G = (d, a, t) => new Promise((i, s) => {
+  var o = (v) => {
     try {
-      m(t.next(f));
-    } catch (E) {
-      i(E);
+      u(t.next(v));
+    } catch (g) {
+      s(g);
     }
-  }, b = (f) => {
+  }, p = (v) => {
     try {
-      m(t.throw(f));
-    } catch (E) {
-      i(E);
+      u(t.throw(v));
+    } catch (g) {
+      s(g);
     }
-  }, m = (f) => f.done ? n(f.value) : Promise.resolve(f.value).then(a, b);
-  m((t = t.apply(d, r)).next());
+  }, u = (v) => v.done ? i(v.value) : Promise.resolve(v.value).then(o, p);
+  u((t = t.apply(d, a)).next());
 });
-import { L as Gn, V as $n, i as zn } from "./DwDXQwR0.js";
-import { E as ri } from "./BTxJOjm9.js";
-import { CastSender as Bn } from "./cast-sender.js";
-import { A as qn } from "./B7jz034g.js";
-const di = 1e3, hi = di * 1e3, Zi = hi * 1e3, li = (d, r, t) => d % r === 0 ? d / r : (d / r).toFixed(t), Kn = (d, r = 1) => d >= Zi ? `${li(d, Zi, r)} Gbit/s` : d >= hi ? `${li(d, hi, r)} Mbit/s` : d >= di ? `${li(d, di, r)} Kbit/s` : `${d} bit/s`, Xn = ({ width: d, height: r }) => `${d}x${r}`, jn = ({
+import { L as Vr, V as jr, i as Yr, A as Jr, C as Qr, a as Wr } from "./Ds9gK5k6.js";
+import { E as li } from "./Bx7s5QdT.js";
+import { CastSender as Zr } from "./cast-sender.js";
+import { A as to, d as eo } from "./hRzek83o.js";
+const Bi = 1e3, Ki = Bi * 1e3, Hs = Ki * 1e3, zi = (d, a, t) => d % a === 0 ? d / a : (d / a).toFixed(t), io = (d, a = 1) => d >= Hs ? `${zi(d, Hs, a)} Gbit/s` : d >= Ki ? `${zi(d, Ki, a)} Mbit/s` : d >= Bi ? `${zi(d, Bi, a)} Kbit/s` : `${d} bit/s`, so = ({ width: d, height: a }) => `${d}x${a}`, no = ({
   title: d,
-  subTitle: r = "Live stream",
+  subTitle: a = "Live stream",
   poster: t
 }) => {
   document.title = d, "mediaSession" in navigator && (navigator.mediaSession.metadata = new MediaMetadata({
     title: d,
-    artist: r,
+    artist: a,
     artwork: t ? [{ src: t }] : []
   }));
-}, s = {
+}, n = {
   PAUSED: "paused",
   MUTED: "muted",
   USER_INTERACTING: "user-interacting",
@@ -47,6 +47,7 @@ const di = 1e3, hi = di * 1e3, Zi = hi * 1e3, li = (d, r, t) => d % r === 0 ? d
   CAST_RECEIVER_NAME: "cast-receiver-name",
   BUFFERING: "buffering",
   UI_LOCKED: "ui-locked",
+  HIDE_UI_ON_PAUSE: "hide-ui-on-pause",
   FULLSCREEN: "is-fullscreen",
   FULLSCREEN_FALLBACK: "is-fullscreen-fallback",
   RENDITION_LEVELS: "rendition-levels",
@@ -55,7 +56,8 @@ const di = 1e3, hi = di * 1e3, Zi = hi * 1e3, li = (d, r, t) => d % r === 0 ? d
   CHANNELS: "channels",
   CHANNEL_ID: "channel-id",
   CHANNEL_GROUP_ID: "channel-group-id",
-  PICTURE_IN_PICTURE: "picture-in-picture",
+  PIP_AVAILABLE: "pip-available",
+  IS_PIP: "is-pip",
   AIRPLAY_AVAILABLE: "airplay-available",
   IS_AIRPLAYING: "is-airplaying",
   MEDIA: "media",
@@ -63,14 +65,18 @@ const di = 1e3, hi = di * 1e3, Zi = hi * 1e3, li = (d, r, t) => d % r === 0 ? d
   LANGUAGE: "language",
   TEXT_TRACKS: "text-tracks",
   TEXT_TRACK: "text-track",
-  NEEDS_USER_INPUT: "needs-user-input",
+  NEEDS_USER_INPUT_VIDEO: "needs-user-input-video",
+  NEEDS_USER_INPUT_AUDIO: "needs-user-input-audio",
   AUTHENTICATION_TOKEN: "authentication-token",
   VOLUME: "volume",
+  VOLUME_LEVEL: "volume-level",
   CAST_ENABLED: "cast",
   AIRPLAY_ENABLED: "airplay",
   PIP_ENABLED: "pip",
-  FULLSCREEN_ENABLED: "fullscreen"
-}, ns = Object.values(s), v = {
+  FULLSCREEN_ENABLED: "fullscreen",
+  VU_METER_ENABLED: "vu-meter",
+  POSTER_SRC: "poster-src"
+}, Ks = Object.values(n), f = {
   PLAY: "play",
   PAUSE: "pause",
   MUTE: "mute",
@@ -81,6 +87,7 @@ const di = 1e3, hi = di * 1e3, Zi = hi * 1e3, li = (d, r, t) => d % r === 0 ? d
   EXIT_FULLSCREEN: "exit-fullscreen",
   SET_RENDITION: "set-rendition",
   CHANNEL_GRID_OPENED: "channel-grid-opened",
+  CHANNEL_GRID_CLOSED: "channel-grid-closed",
   ENTER_PIP: "enter-pip",
   EXIT_PIP: "exit-pip",
   REQUEST_AIRPLAY: "request-airplay",
@@ -89,50 +96,80 @@ const di = 1e3, hi = di * 1e3, Zi = hi * 1e3, li = (d, r, t) => d % r === 0 ? d
   REQUEST_USER_INPUT: "request-user-input",
   SET_VOLUME: "set-volume"
 };
-function os(d) {
+function qs(d) {
   return d === "audio" || d === "video" || d === "audio+video" ? d : "audio+video";
 }
-function ts(d) {
+function Gi(d) {
   return d === "trace" || d === "debug" || d === "info" || d === "warn" || d === "error" || d === "off" ? d : "off";
 }
-function Yn(d) {
-  if (d !== null)
-    return d.split(",").map((r) => r.trim());
+function ro(d) {
+  if (d === null)
+    return;
+  const a = d.split(",").map((t) => t.trim()).filter((t) => t === "h264" || t === "av1");
+  if (a.length !== 0)
+    return a;
 }
-function rs(d) {
+function Xs(d) {
   if (d !== null)
     return d === "" ? !0 : d;
 }
-function Vn(d) {
+function oo(d) {
   if (d !== null)
     try {
-      const r = JSON.parse(d);
-      if (typeof r == "object" && r !== null) {
-        const t = r;
+      const a = JSON.parse(d);
+      if (typeof a == "object" && a !== null) {
+        const t = a;
         if (typeof t.width == "number" && typeof t.height == "number")
           return t;
       }
-    } catch (r) {
+    } catch (a) {
+      return;
+    }
+}
+function ao(d) {
+  if (d !== null)
+    try {
+      const a = JSON.parse(d);
+      if (typeof a == "object" && a !== null) {
+        const t = a;
+        if (t.wasmDecodingConstraint) {
+          const i = t.wasmDecodingConstraint;
+          if (typeof i.width != "number" || typeof i.height != "number" || typeof i.bitRate != "number")
+            return;
+        }
+        return t;
+      }
+    } catch (a) {
       return;
     }
 }
-function ci(d) {
+function ui(d) {
   if (d === null)
     return;
-  const r = parseInt(d, 10);
-  return isNaN(r) ? void 0 : r;
+  const a = parseInt(d, 10);
+  return isNaN(a) ? void 0 : a;
 }
-function T(d) {
+function L(d) {
   return typeof d == "string";
 }
-function w(d, r) {
+function x(d, a) {
   if (d === null)
-    return r != null ? r : void 0;
+    return a != null ? a : void 0;
   const t = d.toLowerCase();
-  return t === "false" ? !1 : t === "true" || t === "" ? !0 : r != null ? r : !0;
+  return t === "false" ? !1 : t === "true" || t === "" ? !0 : a != null ? a : !0;
+}
+function pi(d) {
+  if (d === null)
+    return;
+  const a = {}, t = d.split(",");
+  for (const i of t) {
+    const [s, o] = i.split(":");
+    s && o && (a[s.trim()] = o.trim());
+  }
+  return Object.keys(a).length > 0 ? a : void 0;
 }
-const as = document.createElement("template");
-as.innerHTML = /* HTML */
+const Vs = document.createElement("template");
+Vs.innerHTML = /* HTML */
 `
   <style>
     :host {
@@ -172,129 +209,204 @@ as.innerHTML = /* HTML */
       opacity: 0.5;
       background: transparent;
     }
+
+    slot > svg {
+      display: block;
+      width: var(--button-icon-size);
+      height: var(--button-icon-size);
+    }
   </style>
 `;
-var Ct, de, bt, he;
-class B extends HTMLElement {
+var Gt, Te, Nt, xe;
+class tt extends HTMLElement {
   constructor() {
     super();
-    l(this, Ct, null);
-    l(this, de, (t) => {
+    l(this, Gt, null);
+    l(this, Te, (t) => {
       this.handleClick(t);
     });
-    l(this, bt, (t) => {
-      const { key: n } = t;
-      if (!this.keysUsed.includes(n)) {
-        this.removeEventListener("keyup", e(this, bt));
+    l(this, Nt, (t) => {
+      const { key: i } = t;
+      if (!this.keysUsed.includes(i)) {
+        this.removeEventListener("keyup", e(this, Nt));
         return;
       }
       this.handleClick(t);
     });
-    l(this, he, (t) => {
-      const { metaKey: n, altKey: i, key: a } = t;
-      if (n || i || !this.keysUsed.includes(a)) {
-        this.removeEventListener("keyup", e(this, bt));
+    l(this, xe, (t) => {
+      const { metaKey: i, altKey: s, key: o } = t;
+      if (i || s || !this.keysUsed.includes(o)) {
+        this.removeEventListener("keyup", e(this, Nt));
         return;
       }
-      this.addEventListener("keyup", e(this, bt), { once: !0 });
+      this.addEventListener("keyup", e(this, Nt), { once: !0 });
     });
-    this.attachShadow({ mode: "open" }).appendChild(as.content.cloneNode(!0));
+    this.attachShadow({ mode: "open" }).appendChild(Vs.content.cloneNode(!0));
   }
   get keysUsed() {
     return ["Enter", " "];
   }
   connectedCallback() {
-    var n;
-    const t = this.getRootNode();
-    (t instanceof Document || t instanceof ShadowRoot) && (h(this, Ct, t.querySelector("vindral-controller")), (n = e(this, Ct)) == null || n.connectListener(this)), this.hasAttribute("disabled") || this.enable(), this.setAttribute("role", "button");
+    var t;
+    c(this, Gt, this.closest("vindral-controller")), (t = e(this, Gt)) == null || t.connectListener(this), this.hasAttribute("disabled") || this.enable(), this.setAttribute("role", "button");
   }
   enable() {
-    this.addEventListener("click", e(this, de)), this.addEventListener("keydown", e(this, he)), this.tabIndex = 0;
+    this.addEventListener("click", e(this, Te)), this.addEventListener("keydown", e(this, xe)), this.tabIndex = 0;
   }
   disable() {
-    this.removeEventListener("click", e(this, de)), this.removeEventListener("keydown", e(this, he)), this.removeEventListener("keyup", e(this, bt)), this.tabIndex = -1;
+    this.removeEventListener("click", e(this, Te)), this.removeEventListener("keydown", e(this, xe)), this.removeEventListener("keyup", e(this, Nt)), this.tabIndex = -1;
   }
   disconnectedCallback() {
     var t;
-    (t = e(this, Ct)) == null || t.disconnectListener(this);
+    (t = e(this, Gt)) == null || t.disconnectListener(this);
   }
-  attributeChangedCallback(t, n, i) {
-    t === "disabled" && (T(i) ? this.disable() : this.enable());
+  attributeChangedCallback(t, i, s) {
+    t === "disabled" && (L(s) ? this.disable() : this.enable());
   }
 }
-Ct = new WeakMap(), de = new WeakMap(), bt = new WeakMap(), he = new WeakMap(), p(B, "observedAttributes", ["disabled"]);
-const ls = document.createElement("template"), es = (
+Gt = new WeakMap(), Te = new WeakMap(), Nt = new WeakMap(), xe = new WeakMap(), m(tt, "observedAttributes", ["disabled"]);
+const js = document.createElement("template"), zs = (
   /* SVG */
   `
     <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="M18 18a3 3 0 0 0 3 -3v-8a3 3 0 0 0 -3 -3h-12a3 3 0 0 0 -3 3v8a3 3 0 0 0 3 3" /><path d="M9 20h6l-3 -5z" /></svg>
 `
 );
-ls.innerHTML = /* HTML */
+js.innerHTML = /* HTML */
 `
   <style>
     :host {
       display: var(--airplay-button-display);
     }
 
-    slot > svg {
-      display: block;
-    }
-
-    :host(:not([${s.AIRPLAY_AVAILABLE}])) {
+    :host(:not([${n.AIRPLAY_AVAILABLE}])) {
       display: none !important;
     }
 
-    :host([${s.IS_AIRPLAYING}]) slot[name="exit"] {
+    :host([${n.IS_AIRPLAYING}]) slot[name="exit"] {
       display: none !important;
     }
 
-    :host(:not([${s.IS_AIRPLAYING}])) slot[name="enter"] {
+    :host(:not([${n.IS_AIRPLAYING}])) slot[name="enter"] {
       display: none !important;
     }
   </style>
 
   <slot name="icon">
-    <slot name="enter">${es}</slot>
-    <slot name="exit">${es}</slot>
+    <slot name="enter">${zs}</slot>
+    <slot name="exit">${zs}</slot>
   </slot>
 `;
-var ue, pi;
-const Wt = class Wt extends B {
+var Se, Xi;
+const me = class me extends tt {
   constructor() {
     var t;
     super();
-    l(this, ue);
-    (t = this.shadowRoot) == null || t.appendChild(ls.content.cloneNode(!0));
+    l(this, Se);
+    (t = this.shadowRoot) == null || t.appendChild(js.content.cloneNode(!0));
   }
   connectedCallback() {
-    super.connectedCallback(), o(this, ue, pi).call(this);
+    super.connectedCallback(), r(this, Se, Xi).call(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
   }
-  attributeChangedCallback(t, n, i) {
-    super.attributeChangedCallback(t, n, i), t === s.IS_AIRPLAYING && o(this, ue, pi).call(this);
+  attributeChangedCallback(t, i, s) {
+    super.attributeChangedCallback(t, i, s), t === n.IS_AIRPLAYING && r(this, Se, Xi).call(this);
   }
   set isAirPlaying(t) {
-    t ? this.setAttribute(s.IS_AIRPLAYING, "") : this.removeAttribute(s.IS_AIRPLAYING);
+    t ? this.setAttribute(n.IS_AIRPLAYING, "") : this.removeAttribute(n.IS_AIRPLAYING);
   }
   get isAirPlaying() {
-    return this.hasAttribute(s.IS_AIRPLAYING);
+    return this.hasAttribute(n.IS_AIRPLAYING);
   }
   handleClick(t) {
-    this.dispatchEvent(new CustomEvent(v.REQUEST_AIRPLAY, { bubbles: !0, composed: !0 }));
+    this.dispatchEvent(new CustomEvent(f.REQUEST_AIRPLAY, { bubbles: !0, composed: !0 }));
   }
 };
-ue = new WeakSet(), pi = function() {
+Se = new WeakSet(), Xi = function() {
   this.setAttribute("aria-label", this.isAirPlaying ? "Exit airplay" : "Enter airplay");
-}, p(Wt, "observedAttributes", [
-  ..._(Wt, Wt, "observedAttributes"),
-  s.AIRPLAY_AVAILABLE,
-  s.IS_AIRPLAYING
+}, m(me, "observedAttributes", [
+  ...q(me, me, "observedAttributes"),
+  n.AIRPLAY_AVAILABLE,
+  n.IS_AIRPLAYING
 ]);
-let ui = Wt;
-const cs = document.createElement("template");
-cs.innerHTML = /* HTML */
+let qi = me;
+const Ys = document.createElement("template"), lo = (
+  /* SVG */
+  `
+<svg width="24" height="24" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    .spinner-container {
+      transform-origin: center;
+      animation: rotate 2s linear infinite;
+    }
+    .spinner-circle {
+      stroke-linecap: round;
+      animation: dash 1.5s ease-in-out infinite;
+    }
+    @keyframes rotate {
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+    @keyframes dash {
+      0% {
+        stroke-dasharray: 0 150;
+        stroke-dashoffset: 0;
+      }
+      47.5% {
+        stroke-dasharray: 42 150;
+        stroke-dashoffset: -16;
+      }
+      95%, 100% {
+        stroke-dasharray: 42 150;
+        stroke-dashoffset: -59;
+      }
+    }
+  </style>
+  <g class="spinner-container">
+    <circle class="spinner-circle" cx="12" cy="12" r="9.5" fill="none" stroke-width="3"></circle>
+  </g>
+</svg>
+`
+);
+Ys.innerHTML = /* HTML */
+`
+  <style>
+    :host {
+      color: var(--fg-strong);
+    }
+
+    slot > svg {
+      display: block;
+    }
+
+    :host(:not([${n.BUFFERING}])) {
+      visibility: hidden !important;
+    }
+  </style>
+
+  <slot name="icon">${lo}</slot>
+`;
+var $t;
+class Js extends HTMLElement {
+  constructor() {
+    super();
+    l(this, $t, null);
+    this.attachShadow({ mode: "open" }).appendChild(Ys.content.cloneNode(!0));
+  }
+  connectedCallback() {
+    var t;
+    c(this, $t, this.closest("vindral-controller")), (t = e(this, $t)) == null || t.connectListener(this);
+  }
+  disconnectedCallback() {
+    var t;
+    (t = e(this, $t)) == null || t.disconnectListener(this);
+  }
+}
+$t = new WeakMap(), m(Js, "observedAttributes", [n.BUFFERING]);
+const Qs = document.createElement("template");
+Qs.innerHTML = /* HTML */
 `
   <style>
     :host {
@@ -344,7 +456,7 @@ cs.innerHTML = /* HTML */
       }
     }
 
-    :host(:not([${s.BUFFERING}])) {
+    :host(:not([${n.BUFFERING}])) {
       transition-delay: 0s;
       opacity: 0 !important;
     }
@@ -352,26 +464,25 @@ cs.innerHTML = /* HTML */
 
   <div id="buffering-indicator"></div>
 `;
-var Tt;
-class ds extends HTMLElement {
+var Bt;
+class Ws extends HTMLElement {
   constructor() {
     super();
-    l(this, Tt, null);
-    this.attachShadow({ mode: "open" }).appendChild(cs.content.cloneNode(!0));
+    l(this, Bt, null);
+    this.attachShadow({ mode: "open" }).appendChild(Qs.content.cloneNode(!0));
   }
   connectedCallback() {
-    var n;
-    const t = this.getRootNode();
-    (t instanceof Document || t instanceof ShadowRoot) && (h(this, Tt, t.querySelector("vindral-controller")), (n = e(this, Tt)) == null || n.connectListener(this));
+    var t;
+    c(this, Bt, this.closest("vindral-controller")), (t = e(this, Bt)) == null || t.connectListener(this);
   }
   disconnectedCallback() {
     var t;
-    (t = e(this, Tt)) == null || t.disconnectListener(this);
+    (t = e(this, Bt)) == null || t.disconnectListener(this);
   }
 }
-Tt = new WeakMap(), p(ds, "observedAttributes", [s.BUFFERING]);
-const hs = document.createElement("template");
-hs.innerHTML = /* HTML */
+Bt = new WeakMap(), m(Ws, "observedAttributes", [n.BUFFERING]);
+const Zs = document.createElement("template");
+Zs.innerHTML = /* HTML */
 `
   <style>
     :host {
@@ -380,8 +491,8 @@ hs.innerHTML = /* HTML */
 
     google-cast-launcher {
       display: block;
-      width: 24px;
-      height: 24px;
+      width: var(--button-icon-size);
+      height: var(--button-icon-size);
       cursor: pointer;
       --connected-color: var(--fg-strong);
       --disconnected-color: var(--fg-strong);
@@ -391,53 +502,53 @@ hs.innerHTML = /* HTML */
       transform: scale(0.9);
     }
 
-    :host(:not([${s.CAST_AVAILABLE}])) {
+    :host(:not([${n.CAST_AVAILABLE}])) {
       display: none !important;
     }
   </style>
 `;
-var kt, mi, us;
-const Qt = class Qt extends B {
+var zt, ji, tn;
+const ve = class ve extends tt {
   constructor() {
     var t;
     super();
-    l(this, kt);
-    (t = this.shadowRoot) == null || t.appendChild(hs.content.cloneNode(!0));
+    l(this, zt);
+    (t = this.shadowRoot) == null || t.appendChild(Zs.content.cloneNode(!0));
   }
   connectedCallback() {
-    super.connectedCallback(), o(this, kt, mi).call(this);
+    super.connectedCallback(), r(this, zt, ji).call(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
   }
-  attributeChangedCallback(t, n, i) {
-    super.attributeChangedCallback(t, n, i), t === s.CAST_AVAILABLE && o(this, kt, us).call(this), t === s.IS_CASTING && o(this, kt, mi).call(this);
+  attributeChangedCallback(t, i, s) {
+    super.attributeChangedCallback(t, i, s), t === n.CAST_AVAILABLE && r(this, zt, tn).call(this), t === n.IS_CASTING && r(this, zt, ji).call(this);
   }
   set isCasting(t) {
-    t ? this.setAttribute(s.IS_CASTING, "") : this.removeAttribute(s.IS_CASTING);
+    t ? this.setAttribute(n.IS_CASTING, "") : this.removeAttribute(n.IS_CASTING);
   }
   get isCasting() {
-    return this.hasAttribute(s.IS_CASTING);
+    return this.hasAttribute(n.IS_CASTING);
   }
   handleClick(t) {
   }
 };
-kt = new WeakSet(), mi = function() {
+zt = new WeakSet(), ji = function() {
   this.setAttribute("aria-label", this.isCasting ? "Exit cast" : "Enter cast");
-}, us = function() {
-  var t, n;
+}, tn = function() {
+  var t, i;
   if (!((t = this.shadowRoot) != null && t.querySelector("google-cast-launcher"))) {
-    const i = document.createElement("google-cast-launcher");
-    (n = this.shadowRoot) == null || n.appendChild(i);
+    const s = document.createElement("google-cast-launcher");
+    (i = this.shadowRoot) == null || i.appendChild(s);
   }
-}, p(Qt, "observedAttributes", [
-  ..._(Qt, Qt, "observedAttributes"),
-  s.CAST_AVAILABLE,
-  s.IS_CASTING
+}, m(ve, "observedAttributes", [
+  ...q(ve, ve, "observedAttributes"),
+  n.CAST_AVAILABLE,
+  n.IS_CASTING
 ]);
-let bi = Qt;
-const ps = document.createElement("template");
-ps.innerHTML = /* HTML */
+let Vi = ve;
+const en = document.createElement("template");
+en.innerHTML = /* HTML */
 `
   <style>
     :host {
@@ -462,7 +573,7 @@ ps.innerHTML = /* HTML */
       }
     }
 
-    :host(:not([${s.IS_CASTING}])) {
+    :host(:not([${n.IS_CASTING}])) {
       display: none;
     }
 
@@ -473,30 +584,38 @@ ps.innerHTML = /* HTML */
   </style>
   <span id="text"></span>
 `;
-var wt, It;
-class bs extends HTMLElement {
+var Kt, qt;
+class sn extends HTMLElement {
   constructor() {
     super();
-    l(this, wt, null);
-    l(this, It, null);
-    this.attachShadow({ mode: "open" }).appendChild(ps.content.cloneNode(!0));
+    l(this, Kt, null);
+    l(this, qt, null);
+    this.attachShadow({ mode: "open" }).appendChild(en.content.cloneNode(!0));
   }
   connectedCallback() {
-    var n, i;
-    const t = this.getRootNode();
-    (t instanceof Document || t instanceof ShadowRoot) && (h(this, wt, t.querySelector("vindral-controller")), (n = e(this, wt)) == null || n.connectListener(this)), h(this, It, (i = this.shadowRoot) == null ? void 0 : i.querySelector("#text"));
+    var t, i;
+    c(this, Kt, this.closest("vindral-controller")), (t = e(this, Kt)) == null || t.connectListener(this), c(this, qt, (i = this.shadowRoot) == null ? void 0 : i.querySelector("#text"));
   }
   disconnectedCallback() {
     var t;
-    (t = e(this, wt)) == null || t.disconnectListener(this);
+    (t = e(this, Kt)) == null || t.disconnectListener(this);
   }
-  attributeChangedCallback(t, n, i) {
-    n === i || !e(this, It) || t === "cast-receiver-name" && typeof i == "string" && (e(this, It).innerText = `Casting to ${i || "device"}`);
+  attributeChangedCallback(t, i, s) {
+    i === s || !e(this, qt) || t === "cast-receiver-name" && typeof s == "string" && (e(this, qt).innerText = `Casting to ${s || "device"}`);
   }
 }
-wt = new WeakMap(), It = new WeakMap(), p(bs, "observedAttributes", [s.IS_CASTING, s.CAST_RECEIVER_NAME]);
-const ms = document.createElement("template");
-ms.innerHTML = /* HTML */
+Kt = new WeakMap(), qt = new WeakMap(), m(sn, "observedAttributes", [n.IS_CASTING, n.CAST_RECEIVER_NAME]);
+function nn(d = document) {
+  const a = d == null ? void 0 : d.activeElement;
+  if (!a) return null;
+  if (a.shadowRoot) {
+    const t = nn(a.shadowRoot);
+    return t != null ? t : a;
+  }
+  return a;
+}
+const rn = document.createElement("template");
+rn.innerHTML = /* HTML */
 `
   <style>
     :host {
@@ -563,36 +682,36 @@ ms.innerHTML = /* HTML */
   </style>
   <slot></slot>
 `;
-var mt;
-class ji extends HTMLElement {
+var Rt;
+class Rs extends HTMLElement {
   constructor() {
     super();
-    l(this, mt);
-    p(this, "lastThumbnailUpdate");
+    l(this, Rt);
+    m(this, "lastThumbnailUpdate");
     const t = this.attachShadow({ mode: "open" });
-    h(this, mt, document.createElement("span")), e(this, mt).className = "channel-title", t.appendChild(e(this, mt)), t.appendChild(ms.content.cloneNode(!0));
+    c(this, Rt, document.createElement("span")), e(this, Rt).className = "channel-title", t.appendChild(e(this, Rt)), t.appendChild(rn.content.cloneNode(!0));
   }
-  attributeChangedCallback(t, n, i) {
-    if (n !== i)
+  attributeChangedCallback(t, i, s) {
+    if (i !== s)
       switch (t) {
         case "url":
           this.updateThumbnail();
           break;
         case "title":
-          e(this, mt).textContent = i;
+          e(this, Rt).textContent = s;
           break;
       }
   }
   updateThumbnail() {
-    const t = this.getAttribute("url"), n = this.hasAttribute("offline"), i = this.hasAttribute("visible");
-    if (n || !t || !i || this.lastThumbnailUpdate && Date.now() - this.lastThumbnailUpdate < 1e4) return;
-    const a = new URL(t), b = new Image(), m = this.getAttribute("authentication-token");
-    m && a.searchParams.set("auth.token", m), a.searchParams.set("t", Date.now().toString()), b.src = a.toString(), b.onload = () => this.style.backgroundImage = `url(${a.toString()})`;
+    const t = this.getAttribute("url"), i = this.hasAttribute("offline"), s = this.hasAttribute("visible");
+    if (i || !t || !s || this.lastThumbnailUpdate && Date.now() - this.lastThumbnailUpdate < 1e4) return;
+    const o = new URL(t), p = new Image(), u = this.getAttribute("authentication-token");
+    u && o.searchParams.set("auth.token", u), o.searchParams.set("t", Date.now().toString()), p.src = o.toString(), p.onload = () => this.style.backgroundImage = `url(${o.toString()})`;
   }
 }
-mt = new WeakMap(), p(ji, "observedAttributes", ["url", "title", "offline", "authentication-token", "visible"]);
-const vs = document.createElement("template");
-vs.innerHTML = /* HTML */
+Rt = new WeakMap(), m(Rs, "observedAttributes", ["url", "title", "offline", "authentication-token", "visible"]);
+const on = document.createElement("template");
+on.innerHTML = /* HTML */
 `
   <style>
     :host {
@@ -631,6 +750,7 @@ vs.innerHTML = /* HTML */
     slot#grid {
       display: grid;
       gap: var(--padding-2);
+      grid-template-columns: repeat(4, minmax(0, 1fr));
 
       @container (width < 768px) {
         grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -643,6 +763,13 @@ vs.innerHTML = /* HTML */
       }
     }
 
+    /* Smart TV */
+    @media (width < 1024px) and (width >= 768px) and (-webkit-min-device-pixel-ratio: 2) {
+      slot#grid {
+        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
+      }
+    }
+
     :host([mode="list"]) slot#grid {
       grid-template-columns: repeat(1, minmax(0, 1fr));
     }
@@ -652,82 +779,176 @@ vs.innerHTML = /* HTML */
     <slot name="grid" id="grid"></slot>
   </div>
 `;
-var vt, xt, pe, Q, Lt, Nt, be, H, fs, vi, Es, As;
-class gs extends HTMLElement {
+var bt, mt, Xt, O, T, Vt, Ne, Re, Ue, k, ln, hn, dn, Yi, cn, un, pn, bn, mn, vn, gn, ce;
+class an extends HTMLElement {
   constructor() {
     super();
-    l(this, H);
-    l(this, vt, null);
-    l(this, xt, null);
-    l(this, pe, []);
-    l(this, Q, []);
-    l(this, Lt);
-    l(this, Nt);
-    l(this, be);
-    this.attachShadow({ mode: "open" }).appendChild(vs.content.cloneNode(!0));
+    l(this, k);
+    l(this, bt, null);
+    l(this, mt, null);
+    l(this, Xt, []);
+    l(this, O, []);
+    l(this, T);
+    l(this, Vt);
+    l(this, Ne);
+    l(this, Re);
+    l(this, Ue);
+    m(this, "handleEvent", (t) => {
+      switch (t.type) {
+        case "keydown":
+          r(this, k, vn).call(this, t);
+          break;
+      }
+    });
+    this.attachShadow({ mode: "open" }).appendChild(on.content.cloneNode(!0));
   }
   connectedCallback() {
-    var n;
-    const t = this.getRootNode();
-    (t instanceof Document || t instanceof ShadowRoot) && (h(this, xt, t.querySelector("vindral-controller")), (n = e(this, xt)) == null || n.connectListener(this)), o(this, H, fs).call(this), o(this, H, vi).call(this), h(this, be, window.setInterval(() => {
-      o(this, H, Es).call(this);
+    var t, i, s;
+    c(this, mt, this.closest("vindral-controller")), (t = e(this, mt)) == null || t.connectListener(this), r(this, k, ln).call(this), (s = e(this, bt)) == null || s.observe((i = this.shadowRoot) == null ? void 0 : i.querySelector(".wrapper")), r(this, k, Yi).call(this), c(this, Ne, window.setInterval(() => {
+      r(this, k, bn).call(this);
     }, 1e4));
   }
   disconnectedCallback() {
     var t;
-    clearInterval(e(this, be)), (t = e(this, vt)) == null || t.disconnect();
+    clearInterval(e(this, Ne)), this.removeEventListener("keydown", this), (t = e(this, bt)) == null || t.disconnect();
   }
-  attributeChangedCallback(t, n, i) {
-    var a;
-    switch (t) {
-      case s.CHANNEL_ID: {
-        const b = e(this, Q).find((m) => m.id === i);
-        b == null || b.element.setAttribute("aria-selected", "true"), (a = e(this, Lt)) == null || a.setAttribute("aria-selected", "false"), h(this, Lt, b == null ? void 0 : b.element);
-        break;
+  attributeChangedCallback(t, i, s) {
+    if (i !== s)
+      switch (t) {
+        case n.CHANNEL_ID: {
+          r(this, k, pn).call(this, s);
+          break;
+        }
+        case n.CHANNELS:
+          c(this, Xt, JSON.parse(s)), r(this, k, Yi).call(this);
+          break;
+        case "authentication-token":
+          c(this, Vt, s);
+          break;
       }
-      case s.CHANNELS:
-        h(this, pe, JSON.parse(i)), o(this, H, vi).call(this);
-        break;
-      case "hidden":
-        this.hasAttribute("hidden") && this.dispatchEvent(new CustomEvent(v.CHANNEL_GRID_OPENED, { bubbles: !0, composed: !0 }));
-        break;
-      case "authentication-token":
-        h(this, Nt, i);
-        break;
-    }
+  }
+  get keysUsed() {
+    return ["Enter", "Escape", "Tab", " ", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight", "Home", "End"];
+  }
+  focus() {
+    var t;
+    c(this, Re, nn()), (t = e(this, T)) == null || t.focus();
   }
 }
-vt = new WeakMap(), xt = new WeakMap(), pe = new WeakMap(), Q = new WeakMap(), Lt = new WeakMap(), Nt = new WeakMap(), be = new WeakMap(), H = new WeakSet(), fs = function() {
-  h(this, vt, new IntersectionObserver((t) => {
-    t.forEach((n) => {
-      const { intersectionRatio: i, target: a } = n;
-      a instanceof ji && (i > 0 ? (a.setAttribute("visible", ""), (!a.lastThumbnailUpdate || Date.now() - a.lastThumbnailUpdate >= 1e4) && (a.updateThumbnail(), a.lastThumbnailUpdate = Date.now())) : a.removeAttribute("visible"));
-    });
-  }));
-}, vi = function() {
-  var n;
-  const t = (n = this.shadowRoot) == null ? void 0 : n.querySelector("slot[name=grid]");
-  t.innerHTML = "", e(this, Q).forEach((i) => {
-    var a;
-    return (a = e(this, vt)) == null ? void 0 : a.unobserve(i.element);
-  }), h(this, Q, []), e(this, pe).sort((i, a) => i.isLive && !a.isLive ? -1 : 1).forEach((i) => {
-    var m;
-    const a = document.createElement("vindral-channel-grid-item"), b = i.thumbnailUrls[0] || "";
-    e(this, Nt) && a.setAttribute("authentication-token", e(this, Nt)), a.setAttribute("url", b), a.setAttribute("title", i.name), a.onclick = () => o(this, H, As).call(this, i), i.isLive || a.setAttribute("offline", ""), i.channelId === this.getAttribute("channel-id") && (a.setAttribute("aria-selected", "true"), h(this, Lt, a)), t.appendChild(a), e(this, Q).push({ element: a, thumbnail: b, id: i.channelId }), (m = e(this, vt)) == null || m.observe(a);
+bt = new WeakMap(), mt = new WeakMap(), Xt = new WeakMap(), O = new WeakMap(), T = new WeakMap(), Vt = new WeakMap(), Ne = new WeakMap(), Re = new WeakMap(), Ue = new WeakMap(), k = new WeakSet(), ln = function() {
+  c(this, bt, new IntersectionObserver(
+    (t) => {
+      t.forEach((i) => {
+        const { target: s, isIntersecting: o } = i;
+        s instanceof Rs ? r(this, k, dn).call(this, s, o) : r(this, k, hn).call(this, o);
+      });
+    },
+    {
+      root: e(this, mt)
+    }
+  ));
+}, hn = function(t) {
+  var i, s;
+  if (t) {
+    this.dispatchEvent(new CustomEvent(f.CHANNEL_GRID_OPENED, { bubbles: !0, composed: !0 }));
+    const o = () => {
+      window.clearTimeout(e(this, Ue)), c(this, Ue, window.setTimeout(() => {
+        var p;
+        this.focus(), (p = this.parentElement) == null || p.removeEventListener("scroll", o);
+      }, 100));
+    };
+    (i = this.parentElement) == null || i.addEventListener("scroll", o), this.addEventListener("keydown", this), e(this, T) && (e(this, T).tabIndex = 0);
+  } else
+    e(this, T) && (e(this, T).tabIndex = -1), this.dispatchEvent(new CustomEvent(f.CHANNEL_GRID_CLOSED, { bubbles: !0, composed: !0 })), (s = e(this, Re)) == null || s.focus(), this.removeEventListener("keydown", this);
+}, dn = function(t, i) {
+  i ? (t.setAttribute("visible", ""), (!t.lastThumbnailUpdate || Date.now() - t.lastThumbnailUpdate >= 1e4) && (t.updateThumbnail(), t.lastThumbnailUpdate = Date.now())) : t.removeAttribute("visible");
+}, Yi = function() {
+  var o;
+  const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector("slot[name=grid]"), i = new Map(e(this, O).map((p) => [p.id, p])), s = this.getAttribute("channel-id");
+  c(this, O, e(this, Xt).map((p) => {
+    var g;
+    const u = i.get(p.channelId);
+    if (u)
+      return r(this, k, cn).call(this, u.element, p), u;
+    const v = r(this, k, un).call(this, p, s);
+    return (g = e(this, bt)) == null || g.observe(v.element), t.contains(v.element) || t.appendChild(v.element), v;
+  })), i.forEach((p, u) => {
+    var v;
+    e(this, Xt).some((g) => g.channelId === u) || ((v = e(this, bt)) == null || v.unobserve(p.element), p.element.remove());
+  }), e(this, O).sort((p, u) => p.element.hasAttribute("offline") && !u.element.hasAttribute("offline") ? 1 : -1).forEach((p) => {
+    t.contains(p.element) || t.appendChild(p.element);
   });
-}, Es = function() {
-  this.hasAttribute("hidden") || e(this, Q).forEach((t) => t.element.updateThumbnail());
-}, As = function(t) {
-  var n;
-  (n = e(this, xt)) == null || n.setAttribute("channel-id", t.channelId);
-}, p(gs, "observedAttributes", [
-  s.CHANNELS,
-  s.CHANNEL_ID,
-  s.AUTHENTICATION_TOKEN,
+}, cn = function(t, i) {
+  i.isLive ? t.removeAttribute("offline") : t.setAttribute("offline", ""), t.setAttribute("url", i.thumbnailUrls[0] || ""), t.setAttribute("title", i.name);
+}, un = function(t, i) {
+  const s = document.createElement("vindral-channel-grid-item");
+  return s.setAttribute("url", t.thumbnailUrls[0] || ""), s.setAttribute("title", t.name), e(this, Vt) && s.setAttribute("authentication-token", e(this, Vt)), t.isLive || s.setAttribute("offline", ""), t.channelId === i && (s.setAttribute("aria-selected", "true"), c(this, T, s)), s.tabIndex = -1, s.onclick = () => r(this, k, mn).call(this, t), { element: s, thumbnail: t.thumbnailUrls[0] || "", id: t.channelId };
+}, pn = function(t) {
+  e(this, O).forEach((i) => {
+    i.id === t ? (i.element.setAttribute("aria-selected", "true"), i.element.tabIndex = 0, c(this, T, i.element)) : (i.element.tabIndex = -1, i.element.setAttribute("aria-selected", "false"));
+  });
+}, bn = function() {
+  this.hasAttribute("hidden") || e(this, O).forEach((t) => t.element.updateThumbnail());
+}, mn = function(t) {
+  var i;
+  (i = e(this, mt)) == null || i.setAttribute("channel-id", t.channelId);
+}, vn = function(t) {
+  var u, v, g;
+  const { key: i, ctrlKey: s, altKey: o, metaKey: p } = t;
+  s || o || p || this.keysUsed.includes(i) && (t.preventDefault(), t.stopPropagation(), i === "Tab" || i === "Escape" ? ((u = this.parentElement) == null || u.removeAttribute("open"), (v = e(this, mt)) == null || v.focus()) : i === "Enter" || i === " " ? (g = e(this, T)) == null || g.click() : r(this, k, gn).call(this, t));
+}, gn = function(t) {
+  var u;
+  if (!e(this, T)) return;
+  const { key: i } = t;
+  let o = e(this, O).findIndex((v) => v.element === e(this, T));
+  const p = e(this, T).getBoundingClientRect();
+  switch (i) {
+    case "ArrowUp":
+      if (o = r(this, k, ce).call(this, p, -1, 0), o < 0) {
+        (u = this.parentElement) == null || u.removeAttribute("open");
+        return;
+      }
+      break;
+    case "ArrowDown":
+      o = r(this, k, ce).call(this, p, 1, 0);
+      break;
+    case "ArrowLeft":
+      o = r(this, k, ce).call(this, p, 0, -1);
+      break;
+    case "ArrowRight":
+      o = r(this, k, ce).call(this, p, 0, 1);
+      break;
+    case "Home":
+      o = 0;
+      break;
+    case "End":
+      o = e(this, O).length - 1;
+      break;
+  }
+  if (o >= 0 && o < e(this, O).length) {
+    const v = e(this, O)[o];
+    if (!v) return;
+    e(this, T).setAttribute("aria-selected", "false"), e(this, T).tabIndex = -1, c(this, T, v.element), e(this, T).setAttribute("aria-selected", "true"), e(this, T).tabIndex = 0, e(this, T).focus();
+  }
+}, ce = function(t, i, s) {
+  let o = -1, p = 1 / 0;
+  return e(this, O).filter((u) => u.element.getBoundingClientRect().width > 0).forEach((u, v) => {
+    const g = u.element.getBoundingClientRect(), P = i === 0 || i < 0 && g.top < t.top || i > 0 && g.top > t.top, et = s === 0 || s < 0 && g.left < t.left || s > 0 && g.left > t.left;
+    if (P && et) {
+      const Y = Math.sqrt(
+        Math.pow(g.top - t.top, 2) + Math.pow(g.left - t.left, 2)
+      );
+      Y < p && (p = Y, o = v);
+    }
+  }), o;
+}, m(an, "observedAttributes", [
+  n.CHANNELS,
+  n.CHANNEL_ID,
+  n.AUTHENTICATION_TOKEN,
   "mode",
   "hidden"
 ]);
-const Jn = (
+const ho = (
   /* SVG */
   `
 <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-layout-grid" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="currentColor" stroke-linecap="round" stroke-linejoin="round">
@@ -738,8 +959,8 @@ const Jn = (
   <path d="M14 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" />
 </svg>
 `
-), ys = document.createElement("template");
-ys.innerHTML = /* HTML */
+), fn = document.createElement("template");
+fn.innerHTML = /* HTML */
 `
   <style>
     :host {
@@ -752,76 +973,78 @@ ys.innerHTML = /* HTML */
     :host([hidden]) {
       display: none;
     }
-
-    slot > svg {
-      display: block;
-    }
   </style>
-  <slot name="button">${Jn}</slot>
+  <slot name="button">${ho}</slot>
 `;
-var St, I, O, qe, x, ks, fi, He, Ei;
-const Zt = class Zt extends B {
+var jt, _, V, Ai, U, En, Qi, bi, Wi, Zi;
+const ge = class ge extends tt {
   constructor() {
-    var t, n;
+    var t, i;
     super();
-    l(this, x);
-    l(this, St);
-    l(this, I);
-    l(this, O);
-    l(this, qe, (t) => {
-      t.composedPath().includes(this) || o(this, x, He).call(this);
+    l(this, U);
+    l(this, jt);
+    l(this, _);
+    l(this, V);
+    l(this, Ai, (t) => {
+      t.composedPath().includes(this) || r(this, U, bi).call(this);
     });
-    (t = this.shadowRoot) == null || t.appendChild(ys.content.cloneNode(!0)), h(this, St, (n = this.shadowRoot) == null ? void 0 : n.querySelector("slot[name=button]"));
+    (t = this.shadowRoot) == null || t.appendChild(fn.content.cloneNode(!0)), c(this, jt, (i = this.shadowRoot) == null ? void 0 : i.querySelector("slot[name=button]"));
   }
   connectedCallback() {
-    var n;
-    super.connectedCallback(), this.setAttribute("aria-haspopup", "listbox"), this.enable(), o(this, x, Ei).call(this);
+    var i;
+    super.connectedCallback(), this.setAttribute("aria-haspopup", "listbox"), this.enable(), r(this, U, Wi).call(this);
     const t = this.getRootNode();
-    (t instanceof Document || t instanceof ShadowRoot) && (h(this, I, t.querySelector("vindral-channel-grid")), ((n = e(this, I).parentElement) == null ? void 0 : n.localName) === "vindral-scroll-overlay" && (e(this, I).hidden = !1, e(this, I).style.position = "relative", h(this, O, e(this, I).parentElement)));
+    (t instanceof Document || t instanceof ShadowRoot) && (c(this, _, t.querySelector("vindral-channel-grid")), ((i = e(this, _).parentElement) == null ? void 0 : i.localName) === "vindral-scroll-overlay" && (e(this, _).hidden = !1, e(this, _).style.position = "relative", c(this, V, e(this, _).parentElement))), r(this, U, Zi).call(this);
   }
   disconnectedCallback() {
   }
-  attributeChangedCallback(t, n, i) {
-    super.attributeChangedCallback(t, n, i), (t === s.CHANNEL_GROUP_ID || t === s.CHANNELS) && o(this, x, Ei).call(this);
+  attributeChangedCallback(t, i, s) {
+    super.attributeChangedCallback(t, i, s), (t === n.CHANNEL_GROUP_ID || t === n.CHANNELS) && r(this, U, Wi).call(this);
   }
   enable() {
-    super.enable(), document.addEventListener("click", e(this, qe));
+    super.enable(), document.addEventListener("click", e(this, Ai));
   }
   handleClick(t) {
-    o(this, x, ks).call(this);
+    r(this, U, En).call(this);
+  }
+  get isOpen() {
+    var t, i;
+    return ((t = e(this, V)) == null ? void 0 : t.hasAttribute("open")) || !((i = e(this, _)) != null && i.hidden);
   }
 };
-St = new WeakMap(), I = new WeakMap(), O = new WeakMap(), qe = new WeakMap(), x = new WeakSet(), ks = function() {
+jt = new WeakMap(), _ = new WeakMap(), V = new WeakMap(), Ai = new WeakMap(), U = new WeakSet(), En = function() {
   var t;
-  e(this, O) ? e(this, O).hasAttribute("open") ? o(this, x, He).call(this) : o(this, x, fi).call(this) : (t = e(this, I)) != null && t.hidden ? o(this, x, fi).call(this) : o(this, x, He).call(this);
-}, fi = function() {
+  e(this, V) ? e(this, V).hasAttribute("open") ? r(this, U, bi).call(this) : r(this, U, Qi).call(this) : (t = e(this, _)) != null && t.hidden ? r(this, U, Qi).call(this) : r(this, U, bi).call(this), r(this, U, Zi).call(this);
+}, Qi = function() {
   var t;
-  if (e(this, O))
-    e(this, O).setAttribute("open", "");
+  if (e(this, V))
+    e(this, V).setAttribute("open", "");
   else {
-    if (!((t = e(this, I)) != null && t.hidden)) return;
-    e(this, I).hidden = !1, e(this, I).focus();
+    if (!((t = e(this, _)) != null && t.hidden)) return;
+    e(this, _).hidden = !1, e(this, _).focus();
   }
-  e(this, St).setAttribute("aria-expanded", "true");
-}, He = function() {
-  if (e(this, O))
-    e(this, O).removeAttribute("open");
+  e(this, jt).setAttribute("aria-expanded", "true");
+}, bi = function() {
+  if (e(this, V))
+    e(this, V).removeAttribute("open");
   else {
-    if (!e(this, I) || e(this, I).hidden) return;
-    e(this, I).hidden = !0;
-  }
-  e(this, St).setAttribute("aria-expanded", "false");
-}, Ei = function() {
-  this.getAttribute(s.CHANNEL_GROUP_ID) ? this.removeAttribute("hidden") : this.setAttribute("hidden", ""), this.hasAttribute(s.CHANNELS) ? this.removeAttribute("disabled") : this.setAttribute("disabled", "");
-}, p(Zt, "observedAttributes", [
-  ..._(Zt, Zt, "observedAttributes"),
-  s.CHANNEL_GROUP_ID,
-  s.CHANNELS,
+    if (!e(this, _) || e(this, _).hidden) return;
+    e(this, _).hidden = !0;
+  }
+  e(this, jt).setAttribute("aria-expanded", "false");
+}, Wi = function() {
+  this.getAttribute(n.CHANNEL_GROUP_ID) ? this.removeAttribute("hidden") : this.setAttribute("hidden", ""), this.hasAttribute(n.CHANNELS) ? this.removeAttribute("disabled") : this.setAttribute("disabled", "");
+}, Zi = function() {
+  this.setAttribute("aria-label", this.isOpen ? "Exit grid" : "Enter grid");
+}, m(ge, "observedAttributes", [
+  ...q(ge, ge, "observedAttributes"),
+  n.CHANNEL_GROUP_ID,
+  n.CHANNELS,
   "hidden"
 ]);
-let gi = Zt;
-const Cs = document.createElement("template");
-Cs.innerHTML = /* HTML */
+let Ji = ge;
+const An = document.createElement("template");
+An.innerHTML = /* HTML */
 `
   <style>
     :host {
@@ -850,48 +1073,48 @@ Cs.innerHTML = /* HTML */
     <slot name="right"></slot>
   </slot>
 `;
-class Ts extends HTMLElement {
+class yn extends HTMLElement {
   constructor() {
-    super(), this.attachShadow({ mode: "open" }).appendChild(Cs.content.cloneNode(!0));
+    super(), this.attachShadow({ mode: "open" }).appendChild(An.content.cloneNode(!0));
   }
   connectedCallback() {
   }
   disconnectedCallback() {
   }
 }
-p(Ts, "observedAttributes", []);
-class Wn extends ri {
+m(yn, "observedAttributes", []);
+class co extends li {
   constructor(t) {
     super();
-    p(this, "config");
-    p(this, "hlsUrl");
-    p(this, "element");
-    p(this, "connectingTimeout");
+    m(this, "config");
+    m(this, "hlsUrl");
+    m(this, "element");
+    m(this, "connectingTimeout");
     /**
      * Update authentication token on an already established and authenticated connection.
      */
-    p(this, "updateAuthenticationToken", (t) => {
+    m(this, "updateAuthenticationToken", (t) => {
     });
     /**
      * Fully unloads the instance. This disconnects the current listeners.
      */
-    p(this, "unload", () => {
+    m(this, "unload", () => {
       this.element && (this.element.removeEventListener("webkitplaybacktargetavailabilitychanged", this.onAirPlayAvailable), this.element.removeEventListener("webkitcurrentplaybacktargetiswirelesschanged", this.onAirPlayPlaybackChanged), this.element.remove());
     });
-    p(this, "onAirPlayAvailable", (t) => {
+    m(this, "onAirPlayAvailable", (t) => {
       switch (t.availability) {
         case "available": {
-          this.element.src !== this.hlsUrl && this.checkHlsUrl(this.hlsUrl).then((i) => {
-            i && (this.element.src = this.hlsUrl, this.emit("available"));
+          this.element.src !== this.hlsUrl && this.checkHlsUrl(this.hlsUrl).then((s) => {
+            s && (this.element.src = this.hlsUrl, this.emit("available"));
           });
           break;
         }
       }
     });
-    p(this, "onAirPlayPlaybackChanged", () => {
+    m(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");
     });
-    this.hlsUrl = new URL(`/api/hls?channelId=${t.channelId}`, t.url).toString(), this.config = t, 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.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);
+    this.hlsUrl = new URL(`/api/hls?channelId=${t.channelId}`, t.url).toString(), this.config = t, 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);
   }
   /**
    * True if the instance is casting right now.
@@ -920,55 +1143,55 @@ class Wn extends ri {
     return !!window.WebKitPlaybackTargetAvailabilityEvent;
   }
   checkHlsUrl(t) {
-    return P(this, null, function* () {
+    return G(this, null, function* () {
       try {
         return (yield fetch(t, { method: "HEAD" })).ok;
-      } catch (n) {
+      } catch (i) {
         return !1;
       }
     });
   }
   /* eslint-enable @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-call */
 }
-const pt = class pt extends ri {
+const St = class St extends li {
   constructor(t) {
     super();
-    p(this, "container");
-    p(this, "unload", () => {
+    m(this, "container");
+    m(this, "unload", () => {
       document.removeEventListener("webkitfullscreenchange", this.onChange), document.removeEventListener("mozfullscreenchange", this.onChange), document.removeEventListener("fullscreenchange", this.onChange), this.container.removeEventListener("webkitendfullscreen", this.onChange);
     });
-    p(this, "request", () => P(this, null, function* () {
+    m(this, "request", () => G(this, null, function* () {
       try {
         yield this.requestFn();
       } catch (t) {
         throw this.onChange(), t;
       }
     }));
-    p(this, "exit", () => P(this, null, function* () {
+    m(this, "exit", () => G(this, null, function* () {
       try {
         yield this.exitFn();
       } catch (t) {
         throw this.onChange(), t;
       }
     }));
-    p(this, "onChange", () => this.emit("on fullscreen change", this.isFullscreen()));
+    m(this, "onChange", () => this.emit("on fullscreen change", this.isFullscreen()));
     // into the yolo zone
     /* eslint-disable @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call,@typescript-eslint/unbound-method */
-    p(this, "isFullscreen", () => !!(document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen));
-    p(this, "isSupported", () => pt.isFullscreenApiSupported(this.container) || !this.isInIframe());
-    p(this, "isFullscreenApiSupported", () => pt.isFullscreenApiSupported(this.container));
-    p(this, "isInIframe", () => window.location !== window.parent.location);
+    m(this, "isFullscreen", () => !!(document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen));
+    m(this, "isSupported", () => St.isFullscreenApiSupported(this.container) || !this.isInIframe());
+    m(this, "isFullscreenApiSupported", () => St.isFullscreenApiSupported(this.container));
+    m(this, "isInIframe", () => window.location !== window.parent.location);
     this.container = t, document.addEventListener("webkitfullscreenchange", this.onChange), document.addEventListener("mozfullscreenchange", this.onChange), document.addEventListener("fullscreenchange", this.onChange), this.container.addEventListener("webkitendfullscreen", this.onChange);
   }
   get requestFn() {
-    return pt.isFullscreenApiSupported(this.container) ? (this.container.requestFullscreen || this.container.webkitRequestFullscreen || this.container.webkitEnterFullscreen || this.container.mozRequestFullScreen).bind(this.container) : () => new Promise((t) => {
+    return St.isFullscreenApiSupported(this.container) ? (this.container.requestFullscreen || this.container.webkitRequestFullscreen || this.container.webkitEnterFullscreen || this.container.mozRequestFullScreen).bind(this.container) : () => new Promise((t) => {
       t();
     });
   }
   get exitFn() {
-    if (pt.isFullscreenApiSupported(this.container) && this.isFullscreen()) {
-      const t = document.exitFullscreen, n = document.webkitFullscreenElement && document.webkitExitFullscreen, i = document.mozFullscreenElement && document.mozCancelFullScreen, a = t || n || i;
-      return a ? a.bind(document) : this.container.webkitExitFullscreen.bind(this.container);
+    if (St.isFullscreenApiSupported(this.container) && this.isFullscreen()) {
+      const t = document.exitFullscreen, i = document.webkitFullscreenElement && document.webkitExitFullscreen, s = document.mozFullscreenElement && document.mozCancelFullScreen, o = t || i || s;
+      return o ? o.bind(document) : this.container.webkitExitFullscreen.bind(this.container);
     }
     return () => new Promise((t) => {
       t();
@@ -976,166 +1199,373 @@ const pt = class pt extends ri {
   }
   /* eslint-enable @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call,@typescript-eslint/unbound-method */
 };
-p(pt, "isFullscreenApiSupported", (t) => (t.requestFullscreen || t.webkitRequestFullscreen || t.webkitEnterFullscreen || t.mozRequestFullScreen) !== void 0);
-let Vt = pt;
-var Ke, Xe, je, Ye, Rt, Ve, Je, me, Ut;
-class Qn extends ri {
+m(St, "isFullscreenApiSupported", (t) => (t.requestFullscreen || t.webkitRequestFullscreen || t.webkitEnterFullscreen || t.mozRequestFullScreen) !== void 0);
+let be = St;
+var yi, ki, wi, Ii, Yt, Ci, Li, _e, Jt;
+class uo extends li {
   constructor(t) {
     super();
-    p(this, "unload", () => {
+    m(this, "unload", () => {
       this.element.removeEventListener("enterpictureinpicture", this.onChange), this.element.removeEventListener("leavepictureinpicture", this.onChange);
     });
-    p(this, "request", () => P(this, null, function* () {
+    m(this, "request", () => G(this, null, function* () {
       try {
-        return yield e(this, Ke).call(this);
+        return yield e(this, yi).call(this);
       } catch (t) {
         throw this.onChange(), t;
       }
     }));
-    p(this, "exit", () => P(this, null, function* () {
+    m(this, "exit", () => G(this, null, function* () {
       try {
-        return yield e(this, Xe).call(this);
+        return yield e(this, ki).call(this);
       } catch (t) {
         throw this.onChange(), t;
       }
     }));
-    p(this, "onChange", () => {
+    m(this, "onChange", () => {
       this.emit("on picture in picture change", this.isPictureInPictureActive());
     });
-    p(this, "isPictureInPictureActive", () => e(this, Je).call(this) || e(this, Ve).call(this));
-    p(this, "isSupported", () => e(this, Ut).call(this) || e(this, Rt).call(this));
-    l(this, Ke, () => e(this, Rt).call(this) ? e(this, je).call(this) : e(this, Ut).call(this) ? e(this, me).call(this, "picture-in-picture") : Promise.resolve());
-    l(this, Xe, () => this.isPictureInPictureActive() ? e(this, Rt).call(this) ? e(this, Ye).call(this) : e(this, Ut).call(this) ? e(this, me).call(this, "inline") : Promise.resolve() : Promise.resolve());
-    l(this, je, () => P(this, null, function* () {
+    m(this, "isPictureInPictureActive", () => e(this, Li).call(this) || e(this, Ci).call(this));
+    m(this, "isSupported", () => e(this, Jt).call(this) || e(this, Yt).call(this));
+    l(this, yi, () => e(this, Yt).call(this) ? e(this, wi).call(this) : e(this, Jt).call(this) ? e(this, _e).call(this, "picture-in-picture") : Promise.resolve());
+    l(this, ki, () => this.isPictureInPictureActive() ? e(this, Yt).call(this) ? e(this, Ii).call(this) : e(this, Jt).call(this) ? e(this, _e).call(this, "inline") : Promise.resolve() : Promise.resolve());
+    l(this, wi, () => G(this, null, function* () {
       yield this.element.requestPictureInPicture();
     }));
-    l(this, Ye, () => P(this, null, function* () {
+    l(this, Ii, () => G(this, null, function* () {
       yield document.exitPictureInPicture();
     }));
-    l(this, Rt, () => !!this.element.requestPictureInPicture && !!document.pictureInPictureEnabled);
-    l(this, Ve, () => !!document.pictureInPictureElement);
-    l(this, Je, () => this.element.webkitPresentationMode === "picture-in-picture");
-    l(this, me, (t) => (this.element.webkitSetPresentationMode && this.element.webkitSetPresentationMode(t), Promise.resolve()));
-    l(this, Ut, () => !!this.element.webkitSetPresentationMode);
+    l(this, Yt, () => !!this.element.requestPictureInPicture && !!document.pictureInPictureEnabled);
+    l(this, Ci, () => !!document.pictureInPictureElement);
+    l(this, Li, () => this.element.webkitPresentationMode === "picture-in-picture");
+    l(this, _e, (t) => (this.element.webkitSetPresentationMode && this.element.webkitSetPresentationMode(t), Promise.resolve()));
+    l(this, Jt, () => !!this.element.webkitSetPresentationMode);
     this.element = t, this.element.addEventListener("enterpictureinpicture", this.onChange), this.element.addEventListener("leavepictureinpicture", this.onChange), this.element.setAttribute("autopictureinpicture", "");
   }
 }
-Ke = new WeakMap(), Xe = new WeakMap(), je = new WeakMap(), Ye = new WeakMap(), Rt = new WeakMap(), Ve = new WeakMap(), Je = new WeakMap(), me = new WeakMap(), Ut = new WeakMap();
-const is = (d) => {
+yi = new WeakMap(), ki = new WeakMap(), wi = new WeakMap(), Ii = new WeakMap(), Yt = new WeakMap(), Ci = new WeakMap(), Li = new WeakMap(), _e = new WeakMap(), Jt = new WeakMap();
+class Gs extends li {
+  constructor(t) {
+    super();
+    m(this, "audioContext");
+    m(this, "audioNode");
+    m(this, "bufferLength");
+    m(this, "animationFrameId", null);
+    m(this, "canUseFloatTimeDomainData");
+    m(this, "byteSampleBuffer", null);
+    m(this, "floatSampleBuffer", null);
+    m(this, "leftAnalyser");
+    m(this, "rightAnalyser");
+    m(this, "mediaElementSource", null);
+    m(this, "update", () => {
+      const t = this.getDecibel(this.leftAnalyser, this.floatSampleBuffer || this.byteSampleBuffer), i = this.getDecibel(this.rightAnalyser, this.floatSampleBuffer || this.byteSampleBuffer);
+      this.emit("on decibel change", { left: t, right: i }), this.animationFrameId = requestAnimationFrame(this.update);
+    });
+    if (this.source = t, t instanceof HTMLMediaElement) {
+      const i = new AudioContext();
+      this.mediaElementSource = i.createMediaElementSource(t), this.audioNode = i.createChannelSplitter(2), this.mediaElementSource.connect(this.audioNode), this.audioContext = i, this.mediaElementSource.connect(this.audioContext.destination);
+    } else
+      this.audioNode = t, this.audioContext = this.audioNode.context;
+    this.leftAnalyser = this.audioNode.context.createAnalyser(), this.rightAnalyser = this.audioNode.context.createAnalyser(), this.audioNode.connect(this.leftAnalyser, 0), this.audioNode.connect(this.rightAnalyser, 1), this.canUseFloatTimeDomainData = typeof this.leftAnalyser.getFloatTimeDomainData == "function", this.leftAnalyser.fftSize = 1024, this.rightAnalyser.fftSize = 1024, this.bufferLength = this.leftAnalyser.fftSize, this.canUseFloatTimeDomainData ? this.floatSampleBuffer = new Float32Array(this.bufferLength) : this.byteSampleBuffer = new Uint8Array(this.bufferLength);
+  }
+  getDecibel(t, i) {
+    let s = 0;
+    if (this.canUseFloatTimeDomainData) {
+      t.getFloatTimeDomainData(i);
+      for (let o = 0; o < i.length; o++) {
+        const p = i[o];
+        if (p) {
+          const u = p ** 2;
+          s = Math.max(u, s);
+        }
+      }
+    } else {
+      t.getByteTimeDomainData(i);
+      for (let o = 0; o < i.length; o++) {
+        const p = i[o];
+        if (p) {
+          const u = (p / 128 - 1) ** 2;
+          s = Math.max(u, s);
+        }
+      }
+    }
+    return 10 * Math.log10(s);
+  }
+  start() {
+    this.animationFrameId === null && (this.audioContext instanceof AudioContext && this.audioContext.state === "suspended" ? this.audioContext.resume().then(() => {
+      this.update();
+    }) : this.update());
+  }
+  stop() {
+    this.animationFrameId !== null && (cancelAnimationFrame(this.animationFrameId), this.animationFrameId = null);
+  }
+  unload() {
+    var t;
+    this.stop(), (t = this.mediaElementSource) == null || t.disconnect(), this.leftAnalyser.disconnect(), this.rightAnalyser.disconnect(), this.audioNode.disconnect();
+  }
+  get isMediaElementSource() {
+    return this.source instanceof HTMLMediaElement;
+  }
+}
+const $s = (d) => {
   var t;
-  let r = "observedAttributes" in d.constructor ? d.constructor.observedAttributes : void 0;
-  return !r && ((t = d.nodeName) != null && t.includes("-")) && (globalThis.customElements.upgrade(d), r = "observedAttributes" in d.constructor ? d.constructor.observedAttributes : void 0), Array.isArray(r) ? r.filter((n) => ns.includes(n)) : [];
-}, ws = document.createElement("template");
-ws.innerHTML = /* HTML */
+  let a = "observedAttributes" in d.constructor ? d.constructor.observedAttributes : void 0;
+  return !a && ((t = d.nodeName) != null && t.includes("-")) && (globalThis.customElements.upgrade(d), a = "observedAttributes" in d.constructor ? d.constructor.observedAttributes : void 0), Array.isArray(a) ? a.filter((i) => Ks.includes(i)) : [];
+}, kn = document.createElement("template");
+kn.innerHTML = /* HTML */
 `
   <style>
     :host {
       position: relative;
     }
 
-    slot > svg {
-      display: block;
-    }
-
     :host([hidden]) {
       display: none;
     }
   </style>
 `;
-var _t, Pt, M, ve, We, Qe, z, Is, xs, Oe;
-class Yi extends B {
+var Qt, Wt, $, Pe, Ti, xi, he, wn, In;
+class Us extends tt {
   constructor() {
     var t;
     super();
-    l(this, z);
-    l(this, _t);
-    l(this, Pt);
-    l(this, M);
-    l(this, ve, null);
-    l(this, We, (t) => {
-      t.composedPath().includes(this) || o(this, z, Oe).call(this);
+    l(this, he);
+    l(this, Qt);
+    l(this, Wt);
+    l(this, $);
+    l(this, Pe, null);
+    l(this, Ti, (t) => {
+      t.composedPath().includes(this) || this.hide();
     });
-    l(this, Qe, () => {
-      o(this, z, Oe).call(this);
+    l(this, xi, () => {
+      this.hide();
     });
-    (t = this.shadowRoot) == null || t.appendChild(ws.content.cloneNode(!0));
+    (t = this.shadowRoot) == null || t.appendChild(kn.content.cloneNode(!0));
   }
   connectedCallback() {
-    var b, m, f, E;
+    var p, u, v, g;
     super.connectedCallback(), this.setAttribute("role", "button"), this.setAttribute("aria-haspopup", "listbox");
-    const t = (b = this.getAttribute("list-position")) != null ? b : "top";
-    (m = e(this, Pt)) == null || m.setAttribute("list-position", t);
-    const n = this.getRootNode(), a = [...(E = (f = this.shadowRoot) == null ? void 0 : f.querySelectorAll(":not(:defined)")) != null ? E : []].map((U) => customElements.whenDefined(U.localName));
-    Promise.all(a).then(() => {
-      var U;
-      (n instanceof Document || n instanceof ShadowRoot) && (h(this, ve, n.querySelector("vindral-controller")), (U = e(this, ve)) == null || U.connectListener(this));
+    const t = (p = this.getAttribute("list-position")) != null ? p : "top";
+    (u = e(this, Wt)) == null || u.setAttribute("list-position", t);
+    const i = this.getRootNode(), o = [...(g = (v = this.shadowRoot) == null ? void 0 : v.querySelectorAll(":not(:defined)")) != null ? g : []].map((P) => customElements.whenDefined(P.localName));
+    Promise.all(o).then(() => {
+      var P;
+      (i instanceof Document || i instanceof ShadowRoot) && (c(this, Pe, i.querySelector("vindral-controller")), (P = e(this, Pe)) == null || P.connectListener(this));
     });
   }
   set button(t) {
-    h(this, _t, t);
+    c(this, Qt, t);
   }
   set listbox(t) {
-    h(this, Pt, t);
+    c(this, Wt, t);
   }
   set listboxSlot(t) {
-    h(this, M, t);
+    c(this, $, t);
   }
   enable() {
-    super.enable(), this.addEventListener("change", e(this, Qe)), document.addEventListener("click", e(this, We));
+    super.enable(), this.addEventListener("change", e(this, xi)), document.addEventListener("click", e(this, Ti));
+  }
+  hide() {
+    var t, i;
+    !e(this, $) || (t = e(this, $)) != null && t.hidden || (e(this, $).hidden = !0, (i = e(this, Qt)) == null || i.setAttribute("aria-expanded", "false"), this.dispatchEvent(new CustomEvent(f.UNLOCK_UI, { bubbles: !0, composed: !0 })), this.focus());
   }
   handleClick(t) {
-    e(this, M) && !t.composedPath().includes(e(this, M)) && o(this, z, Is).call(this);
+    e(this, $) && !t.composedPath().includes(e(this, $)) && r(this, he, wn).call(this);
   }
 }
-_t = new WeakMap(), Pt = new WeakMap(), M = new WeakMap(), ve = new WeakMap(), We = new WeakMap(), Qe = new WeakMap(), z = new WeakSet(), Is = function() {
+Qt = new WeakMap(), Wt = new WeakMap(), $ = new WeakMap(), Pe = new WeakMap(), Ti = new WeakMap(), xi = new WeakMap(), he = new WeakSet(), wn = function() {
   var t;
-  (t = e(this, M)) != null && t.hidden ? o(this, z, xs).call(this) : o(this, z, Oe).call(this);
-}, xs = function() {
-  var t, n, i;
-  (t = e(this, M)) != null && t.hidden && (e(this, M).hidden = !1, (n = e(this, _t)) == null || n.setAttribute("aria-expanded", "true"), (i = e(this, Pt)) == null || i.focus(), this.dispatchEvent(new CustomEvent(v.LOCK_UI, { bubbles: !0, composed: !0 })));
-}, Oe = function() {
-  var t, n;
-  !e(this, M) || (t = e(this, M)) != null && t.hidden || (e(this, M).hidden = !0, (n = e(this, _t)) == null || n.setAttribute("aria-expanded", "false"), this.dispatchEvent(new CustomEvent(v.UNLOCK_UI, { bubbles: !0, composed: !0 })));
+  (t = e(this, $)) != null && t.hidden ? r(this, he, In).call(this) : this.hide();
+}, In = function() {
+  var t, i, s;
+  (t = e(this, $)) != null && t.hidden && (e(this, $).hidden = !1, (i = e(this, Qt)) == null || i.setAttribute("aria-expanded", "true"), (s = e(this, Wt)) == null || s.focus(), this.dispatchEvent(new CustomEvent(f.LOCK_UI, { bubbles: !0, composed: !0 })));
 };
-const Ls = document.createElement("template");
-Ls.innerHTML = /* HTML */
+const Cn = document.createElement("template");
+Cn.innerHTML = /* HTML */
 `
   <style>
     :host {
-      --fg-strong: var(--vindral-fg-strong, #eeeeee);
-      --fg-subtle: var(--vindral-fg-subtle, #b4b4b4);
-      --fg-extra-subtle: var(--vindral-fg-extra-subtle, #7b7b7b);
-
-      --bg-strong: var(--vindral-bg-strong, #111111);
-      --bg-subtle: var(--vindral-bg-subtle, #191919);
-      --bg-extra-subtle: var(--vindral-bg-extra-subtle, #222222);
+      --value: 0;
+      --_focus-box-shadow: none;
+      height: calc(var(--button-icon-size) + 2 * var(--button-padding));
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      margin: 0;
+      position: relative;
+      cursor: pointer;
+      pointer-events: auto;
+      touch-action: none;
+      box-shadow: var(--_focus-visible-box-shadow, none);
+      outline: 0;
+      background: transparent;
+      transition: background 0.2s linear;
+    }
 
-      --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);
+    #range {
+      -webkit-appearance: none;
+      appearance: none;
 
-      --padding-1: var(--vindral-padding-1, 4px);
-      --padding-2: var(--vindral-padding-2, 8px);
-      --padding-3: var(--vindral-padding-3, 16px);
-      --padding-4: var(--vindral-padding-4, 24px);
-      --padding-5: var(--vindral-padding-5, 32px);
+      height: 4px;
+      width: 100%;
+      margin: 0;
+      padding: 0;
 
-      --control-padding: var(--vindral-control-padding, var(--padding-1));
+      background-color: #00000000;
+      outline: none;
+      z-index: 1;
+      cursor: pointer;
+    }
 
-      --button-padding: var(--vindral-button-padding, var(--padding-2));
+    #range-track {
+      position: absolute;
+      top: calc(50% - 2px);
+      left: 1px;
+      width: calc(100% - 1px);
+      height: 4px;
+      background-color: rgb(255 255 255 / 0.2);
+      overflow: hidden;
+      cursor: pointer;
+    }
 
-      --ui-font: var(
-        --vindral-ui-font,
-        -apple-system,
-        BlinkMacSystemFont,
-        "Segoe UI",
-        Roboto,
-        "Helvetica Neue",
-        Arial,
-        sans-serif
-      );
-      --ui-display: var(--vindral-ui-display, flex);
+    #range-track::before {
+      position: absolute;
+      content: "";
+      left: calc(-100%);
+      top: 0;
+      width: calc(100%);
+      height: 100%;
+      background-color: var(--fg-strong);
+      transition: background-color 300ms ease-out;
+      transform-origin: 100% 0%;
+      transform: translateX(calc(var(--value) * 100%)) scaleX(1.2);
+    }
 
+    #range::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background-color: var(--fg-strong);
+      cursor: pointer;
+      z-index: 1;
+    }
+
+    #range::-moz-range-thumb {
+      -moz-appearance: none;
+      appearance: none;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background-color: var(--fg-strong);
+      cursor: pointer;
+      z-index: 1;
+    }
+
+    :host(:focus-visible) {
+      box-shadow: inset 0 0 0 2px var(--fg-strong);
+      outline: 0;
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      :host(:hover) {
+        background: rgba(255, 255, 255, 0.15);
+      }
+    }
+
+    :host(:active) {
+      background: rgba(255, 255, 255, 0.25);
+    }
+  </style>
+
+  <input type="range" id="range" min="0" max="1" step="any" value="0" />
+  <div id="range-track"></div>
+`;
+var Zt, te, Me, De;
+class _s extends HTMLElement {
+  constructor() {
+    super();
+    l(this, Zt, null);
+    l(this, te);
+    m(this, "range");
+    l(this, Me, () => {
+      this.range.matches(":focus-visible") && this.style.setProperty("--_focus-visible-box-shadow", "inset 0 0 0 2px var(--fg-strong)");
+    });
+    l(this, De, () => {
+      this.style.removeProperty("--_focus-visible-box-shadow");
+    });
+    c(this, te, this.attachShadow({ mode: "open" })), e(this, te).appendChild(Cn.content.cloneNode(!0)), this.range = e(this, te).getElementById("range");
+  }
+  connectedCallback() {
+    var t;
+    c(this, Zt, this.closest("vindral-controller")), (t = e(this, Zt)) == null || t.connectListener(this), this.hasAttribute("disabled") || this.enable(), this.range.addEventListener("focusin", e(this, Me)), this.range.addEventListener("focusout", e(this, De));
+  }
+  disconnectedCallback() {
+    var t;
+    (t = e(this, Zt)) == null || t.disconnectListener(this), this.range.removeEventListener("focusin", e(this, Me)), this.range.removeEventListener("focusout", e(this, De));
+  }
+  attributeChangedCallback(t, i, s) {
+    i !== s && (t === "disabled" && s ? this.disable() : this.enable(), this.updateBar());
+  }
+  enable() {
+    this.addEventListener("input", this);
+  }
+  disable() {
+    this.range.removeEventListener("input", this);
+  }
+  handleEvent(t) {
+    t.type === "input" && this.updateBar();
+  }
+  updateBar() {
+    this.style.setProperty("--value", this.range.value);
+  }
+  get keysUsed() {
+    return ["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"];
+  }
+}
+Zt = new WeakMap(), te = new WeakMap(), Me = new WeakMap(), De = new WeakMap(), m(_s, "observedAttributes", ["disabled"]);
+const Ln = document.createElement("template");
+Ln.innerHTML = /* HTML */
+`
+  <style>
+    :host {
+      --fg-strong: var(--vindral-fg-strong, #eeeeee);
+      --fg-subtle: var(--vindral-fg-subtle, #b4b4b4);
+      --fg-extra-subtle: var(--vindral-fg-extra-subtle, #7b7b7b);
+      --bg-strong: var(--vindral-bg-strong, #111111);
+      --bg-subtle: var(--vindral-bg-subtle, #191919);
+      --bg-extra-subtle: var(--vindral-bg-extra-subtle, #222222);
+      --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);
+
+      --padding-1: var(--vindral-padding-1, 4px);
+      --padding-2: var(--vindral-padding-2, 8px);
+      --padding-3: var(--vindral-padding-3, 16px);
+      --padding-4: var(--vindral-padding-4, 24px);
+      --padding-5: var(--vindral-padding-5, 32px);
+      --padding-6: var(--vindral-padding-6, 40px);
+      --control-padding: var(--vindral-control-padding, var(--padding-1));
+
+      --ui-font: var(
+        --vindral-ui-font,
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        Roboto,
+        "Helvetica Neue",
+        Arial,
+        sans-serif
+      );
+
+      --button-padding: var(--vindral-button-padding, var(--padding-2));
+      --button-icon-size: var(--vindral-button-icon-size, 24px);
+      --play-overlay-icon-size: var(--vindral-play-overlay-icon-size, 72px);
+
+      --ui-display: var(--vindral-ui-display, flex);
       --play-button-display: var(--vindral-play-button-display, flex);
       --mute-button-display: var(--vindral-mute-button-display, flex);
       --airplay-button-display: var(--vindral-airplay-button-display, flex);
@@ -1145,10 +1575,12 @@ Ls.innerHTML = /* HTML */
       --grid-button-display: var(--vindral-grid-button-display, flex);
       --grid-item-offline-display: var(--vindral-grid-item-offline-display, flex);
       --volume-range-display: var(--vindral-volume-range-display, flex);
+      --volume-meter-display: var(--vindral-volume-meter-display, flex);
       --rendition-menu-display: var(--vindral-rendition-menu-display, flex);
       --language-menu-display: var(--vindral-language-menu-display, flex);
       --play-overlay-display: var(--vindral-play-overlay-display, flex);
       --buffering-overlay-display: var(--vindral-buffering-overlay-display, flex);
+      --poster-overlay-display: var(--vindral-poster-overlay-display, flex);
 
       position: relative;
       display: flex;
@@ -1208,11 +1640,15 @@ Ls.innerHTML = /* HTML */
       background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
     }
 
+    :host(:focus-visible) {
+      outline: none;
+    }
+
     :host(
-        :not([${s.USER_INTERACTING}]
-        ):not([${s.PAUSED}]
-        ):not([${s.IS_CASTING}]
-        ):not([${s.MEDIA}="audio"])
+        :not([${n.USER_INTERACTING}]
+        ):not([${n.PAUSED}]:not([${n.HIDE_UI_ON_PAUSE}])
+        ):not([${n.IS_CASTING}]
+        ):not([${n.MEDIA}="audio"])
       )
       #ui {
       opacity: 0;
@@ -1221,16 +1657,16 @@ Ls.innerHTML = /* HTML */
     }
 
     :host(
-      :not([${s.USER_INTERACTING}]
-      ):not([${s.PAUSED}]
-      ):not([${s.IS_CASTING}]
-      ):not([${s.MEDIA}="audio"])
+      :not([${n.USER_INTERACTING}]
+      ):not([${n.PAUSED}]:not([${n.HIDE_UI_ON_PAUSE}])
+      ):not([${n.IS_CASTING}]
+      ):not([${n.MEDIA}="audio"])
     )
     #ui > * {
       pointer-events: none;
     }
 
-    :host([${s.FULLSCREEN}][${s.FULLSCREEN_FALLBACK}]) {
+    :host([${n.FULLSCREEN}][${n.FULLSCREEN_FALLBACK}]) {
       position: fixed !important;
       inset: 0 !important;
       margin: 0 !important;
@@ -1253,7 +1689,7 @@ Ls.innerHTML = /* HTML */
       object-fit: contain;
     }
 
-    :host([${s.MEDIA}="audio"]) {
+    :host([${n.MEDIA}="audio"]) {
       min-height: 100px;
       overflow: visible;
     }
@@ -1270,437 +1706,526 @@ Ls.innerHTML = /* HTML */
     <slot id="overlay-interactive" name="overlay-interactive"></slot>
   </div>
 `;
-var Ze, K, ge, Z, tt, u, fe, et, X, Mt, it, D, st, j, Ee, Ae, N, c, Ai, Ns, Ss, Rs, yi, Us, _s, ye, Ps, Ms, Ds, Fs, ke, Hs, ki, Ge, ut, Os, Gs, $s, Ci, ti, ei, Ti, g, k;
-const te = class te extends HTMLElement {
+const $i = ["ArrowDown", "ArrowLeft", "ArrowRight", "Tab", "Enter", " ", "f", "m"];
+var Si, it, Oe, vt, gt, b, Fe, st, nt, ee, rt, B, J, F, ot, He, ze, N, ft, h, ts, Tn, xn, Sn, es, Nn, Rn, Un, Ge, _n, Pn, Mn, Dn, $e, Ni, Ri, On, Ut, is, ss, mi, pt, Fn, Hn, zn, ns, Ui, _i, rs, A, w;
+const fe = class fe extends HTMLElement {
   constructor() {
     super();
-    l(this, c);
-    l(this, K, /* @__PURE__ */ new Map());
-    l(this, ge, 2e3);
-    l(this, Z, null);
-    l(this, tt, null);
-    l(this, u);
-    l(this, fe, e(te, Ze));
-    l(this, et);
-    l(this, X);
-    l(this, Mt);
-    l(this, it);
-    l(this, D);
+    l(this, h);
+    l(this, it, /* @__PURE__ */ new Map());
+    l(this, Oe, 2e3);
+    l(this, vt, null);
+    l(this, gt, null);
+    l(this, b);
+    l(this, Fe, e(fe, Si));
     l(this, st);
-    l(this, j);
-    l(this, Ee);
-    l(this, Ae);
+    l(this, nt);
+    l(this, ee);
+    l(this, rt);
+    l(this, B);
+    l(this, J);
+    l(this, F);
+    l(this, ot);
+    l(this, He);
+    l(this, ze);
     l(this, N);
-    l(this, ye, 0);
-    p(this, "handleEvent", (t) => {
+    l(this, ft, null);
+    l(this, Ge, 0);
+    m(this, "handleEvent", (t) => {
       switch (t.type) {
         case "pointerdown":
-          h(this, ye, t.timeStamp);
+          c(this, Ge, t.timeStamp);
           break;
         case "pointermove":
-          o(this, c, Ps).call(this, t);
+          r(this, h, _n).call(this, t);
           break;
         case "pointerup":
-          o(this, c, Ms).call(this, t);
+          r(this, h, Pn).call(this, t);
           break;
         case "mouseleave":
-          o(this, c, ut).call(this);
+          r(this, h, pt).call(this);
           break;
         case "dblclick":
-          o(this, c, Ds).call(this, t);
+          r(this, h, Mn).call(this, t);
           break;
         case "mousemove":
-          o(this, c, Fs).call(this, t);
+          r(this, h, Dn).call(this, t);
+          break;
+        case "keydown":
+          e(this, Ri).call(this, t);
+          break;
+        case "keyup":
+          r(this, h, pt).call(this), e(this, Ni).call(this, t);
           break;
       }
     });
-    l(this, ke, (t) => {
-      var n;
-      if (e(this, u) && (e(this, N).debug("Vindral event", { type: t.type }), t instanceof CustomEvent))
+    l(this, $e, (t) => {
+      var i;
+      if (e(this, b) && (e(this, N).debug("Vindral event", { type: t.type }), t instanceof CustomEvent))
         switch (t.type) {
-          case v.PLAY:
-            this.removeAttribute(s.PAUSED);
+          case f.PLAY:
+            this.removeAttribute(n.PAUSED);
             break;
-          case v.PAUSE:
-            this.setAttribute(s.PAUSED, "");
+          case f.PAUSE:
+            this.setAttribute(n.PAUSED, "");
             break;
-          case v.MUTE:
-            this.setAttribute(s.MUTED, "");
+          case f.MUTE:
+            this.setAttribute(n.MUTED, "");
             break;
-          case v.UNMUTE:
-            this.removeAttribute(s.MUTED);
+          case f.UNMUTE:
+            this.removeAttribute(n.MUTED);
             break;
-          case v.LOCK_UI:
-            this.setAttribute(s.UI_LOCKED, "");
+          case f.LOCK_UI:
+            this.setAttribute(n.UI_LOCKED, "");
             break;
-          case v.UNLOCK_UI:
-            this.removeAttribute(s.UI_LOCKED);
+          case f.UNLOCK_UI:
+            this.removeAttribute(n.UI_LOCKED);
             break;
-          case v.ENTER_FULLSCREEN:
-            this.setAttribute(s.FULLSCREEN, "");
+          case f.ENTER_FULLSCREEN:
+            this.setAttribute(n.FULLSCREEN, "");
             break;
-          case v.EXIT_FULLSCREEN:
-            this.removeAttribute(s.FULLSCREEN);
+          case f.EXIT_FULLSCREEN:
+            this.removeAttribute(n.FULLSCREEN);
             break;
-          case v.SET_RENDITION:
+          case f.SET_RENDITION:
             {
-              const i = t.detail;
-              i.audio && (e(this, u).maxAudioBitRate = i.audio.bitRate), i.video && (e(this, u).maxVideoBitRate = i.video.bitRate, e(this, u).maxSize = i.video, this.setAttribute(s.MAX_VIDEO_BITRATE, String(i.video.bitRate)));
+              const s = t.detail;
+              s.audio && (e(this, b).maxAudioBitRate = s.audio.bitRate), s.video && (e(this, b).maxVideoBitRate = s.video.bitRate, e(this, b).maxSize = s.video, this.setAttribute(n.MAX_VIDEO_BITRATE, String(s.video.bitRate)));
             }
             break;
-          case v.CHANNEL_GRID_OPENED: {
-            o(this, c, Hs).call(this);
+          case f.CHANNEL_GRID_OPENED: {
+            e(this, ft) === null && r(this, h, is).call(this);
             break;
           }
-          case v.ENTER_PIP:
-            this.setAttribute(s.PICTURE_IN_PICTURE, "");
+          case f.CHANNEL_GRID_CLOSED: {
+            e(this, ft) !== null && (clearTimeout(e(this, ft)), c(this, ft, null));
             break;
-          case v.EXIT_PIP:
-            this.removeAttribute(s.PICTURE_IN_PICTURE);
+          }
+          case f.ENTER_PIP:
+            this.setAttribute(n.IS_PIP, "");
+            break;
+          case f.EXIT_PIP:
+            this.removeAttribute(n.IS_PIP);
             break;
-          case v.REQUEST_AIRPLAY:
-            (n = e(this, st)) == null || n.showPlaybackTargetPicker();
+          case f.REQUEST_AIRPLAY:
+            (i = e(this, J)) == null || i.showPlaybackTargetPicker();
             break;
-          case v.SET_LANGUAGE:
-            T(t.detail) ? this.setAttribute(s.LANGUAGE, t.detail) : this.removeAttribute(s.LANGUAGE);
+          case f.SET_LANGUAGE:
+            L(t.detail) ? this.setAttribute(n.LANGUAGE, t.detail) : this.removeAttribute(n.LANGUAGE);
             break;
-          case v.SET_TEXT_TRACK:
-            T(t.detail) ? this.setAttribute(s.TEXT_TRACK, t.detail) : this.removeAttribute(s.TEXT_TRACK);
+          case f.SET_TEXT_TRACK:
+            L(t.detail) ? this.setAttribute(n.TEXT_TRACK, t.detail) : this.removeAttribute(n.TEXT_TRACK);
             break;
-          case v.REQUEST_USER_INPUT:
-            o(this, c, k).call(this, s.NEEDS_USER_INPUT), e(this, u).play();
+          case f.REQUEST_USER_INPUT:
+            e(this, b).play(), e(this, b).muted = !1;
             break;
-          case v.SET_VOLUME:
+          case f.SET_VOLUME:
             {
-              const i = t.detail;
-              e(this, u).muted && i > 0 ? e(this, u).muted = !1 : i === 0 && (e(this, u).muted = !0), this.setAttribute(s.VOLUME, i.toString());
+              const s = t.detail;
+              e(this, b).muted && s > 0 ? e(this, b).muted = !1 : s === 0 && (e(this, b).muted = !0), this.setAttribute(n.VOLUME, s.toString());
             }
             break;
         }
     });
-    l(this, ti, () => {
-      var n, i, a;
+    l(this, Ni, (t) => {
+      const { key: i } = t;
+      if (!$i.includes(i)) {
+        this.removeEventListener("keyup", this);
+        return;
+      }
+      r(this, h, On).call(this, t);
+    });
+    l(this, Ri, (t) => {
+      const { metaKey: i, altKey: s, key: o } = t;
+      i || s || !$i.includes(o) || this.addEventListener("keyup", this, { once: !0 });
+    });
+    l(this, Ut, null);
+    l(this, Ui, () => {
+      var i, s, o;
       if (!("orientation" in screen) || !screen.orientation.lock)
         return;
-      const t = (n = e(this, u)) == null ? void 0 : n.currentRenditionLevel;
-      t != null && t.video && screen.orientation.lock(((i = t == null ? void 0 : t.video) == null ? void 0 : i.width) > ((a = t == null ? void 0 : t.video) == null ? void 0 : a.height) ? "landscape-primary" : "portrait-primary").catch(() => {
+      const t = (i = e(this, b)) == null ? void 0 : i.currentRenditionLevel;
+      t != null && t.video && screen.orientation.lock(((s = t == null ? void 0 : t.video) == null ? void 0 : s.width) > ((o = t == null ? void 0 : t.video) == null ? void 0 : o.height) ? "landscape-primary" : "portrait-primary").catch(() => {
       });
     });
-    l(this, ei, () => {
+    l(this, _i, () => {
       !("orientation" in screen) || !screen.orientation.unlock || screen.orientation.unlock();
     });
-    this.attachShadow({ mode: "open" }).appendChild(Ls.content.cloneNode(!0));
-    const n = ts(this.getAttribute("log-level"));
-    h(this, N, Gn.get().createContext("VindralController")), e(this, N).setLevel(n);
+    this.attachShadow({ mode: "open" }).appendChild(Ln.content.cloneNode(!0));
+    const i = Gi(this.getAttribute("log-level"));
+    c(this, N, Vr.get().createContext("VindralController")), e(this, N).setLevel(i);
   }
   connectedCallback() {
-    return P(this, null, function* () {
-      w(this.getAttribute("auto-instance-enabled"), !0) && (yield o(this, c, Ai).call(this));
-      for (const n of Object.values(v))
-        this.addEventListener(n, e(this, ke));
-      window.PointerEvent ? (this.addEventListener("pointerdown", this), this.addEventListener("pointermove", this), this.addEventListener("pointerup", this)) : this.addEventListener("mousemove", this), this.addEventListener("mouseleave", this), this.addEventListener("keyup", this), this.addEventListener("resize", this), this.addEventListener("dblclick", this), this.connectListener(this);
+    return G(this, null, function* () {
+      x(this.getAttribute("auto-instance-enabled"), !0) && (yield r(this, h, ts).call(this));
+      for (const i of Object.values(f))
+        this.addEventListener(i, e(this, $e));
+      window.PointerEvent ? (this.addEventListener("pointerdown", this), this.addEventListener("pointermove", this), this.addEventListener("pointerup", this)) : this.addEventListener("mousemove", this), this.addEventListener("mouseleave", this), this.addEventListener("keydown", this), this.addEventListener("resize", this), this.addEventListener("dblclick", this), this.connectListener(this);
     });
   }
   disconnectedCallback() {
-    var t, n, i;
-    (t = e(this, u)) == null || t.unload(), (n = e(this, it)) == null || n.unload(), (i = e(this, D)) == null || i.unload();
-    for (const a of Object.values(v))
-      this.removeEventListener(a, e(this, ke));
+    var t, i, s, o;
+    (t = e(this, b)) == null || t.unload(), (i = e(this, rt)) == null || i.unload(), (s = e(this, B)) == null || s.unload(), (o = e(this, F)) == null || o.unload();
+    for (const p of Object.values(f))
+      this.removeEventListener(p, e(this, $e));
     this.disconnectListener(this);
   }
-  attributeChangedCallback(t, n, i) {
-    var a, b, m, f, E, U, ct, dt;
-    if (n != i)
-      switch (e(this, N).debug("Attribute changed", { name: t, oldValue: n, newValue: i }), t) {
+  attributeChangedCallback(t, i, s) {
+    var o, p, u, v, g, P, et, Y, Ct, Lt, Tt, hi, di;
+    if (i != s)
+      switch (e(this, N).debug("Attribute changed", { name: t, oldValue: i, newValue: s }), t) {
         case "channel-id":
-          h(this, et, i), e(this, u) && i && (e(this, u).channelId = i, e(this, u).play(), o(this, c, g).call(this, s.BUFFERING, ""), o(this, c, g).call(this, s.CHANNEL_ID, i));
+          c(this, st, s), e(this, b) && s && (e(this, b).channelId = s, e(this, b).play(), r(this, h, A).call(this, n.BUFFERING, ""), r(this, h, A).call(this, n.CHANNEL_ID, s), r(this, h, A).call(this, n.POSTER_SRC, e(this, b).getThumbnailUrl()));
           break;
         case "channel-group-id":
-          h(this, X, i);
+          c(this, nt, s);
           break;
         case "url":
-          i && h(this, fe, i);
+          s && c(this, Fe, s);
           break;
         case "paused":
-          T(i) ? (a = e(this, u)) == null || a.pause() : (b = e(this, u)) == null || b.play();
+          L(s) ? (o = e(this, b)) == null || o.pause() : (r(this, h, w).call(this, n.NEEDS_USER_INPUT_VIDEO), (p = e(this, b)) == null || p.play());
           break;
         case "target-buffer-time":
-          if (e(this, u) && i) {
-            const q = parseInt(i, 10);
-            Number.isNaN(q) || (e(this, u).targetBufferTime = q);
+          if (e(this, b) && s) {
+            const z = parseInt(s, 10);
+            Number.isNaN(z) || (e(this, b).targetBufferTime = z);
           }
           break;
         case "user-interacting":
-          T(i) ? o(this, c, g).call(this, s.USER_INTERACTING, "") : o(this, c, k).call(this, s.USER_INTERACTING);
+          L(s) ? r(this, h, A).call(this, n.USER_INTERACTING, "") : r(this, h, w).call(this, n.USER_INTERACTING);
           break;
         case "muted":
-          e(this, u) && (T(i) ? (e(this, u).muted = !0, o(this, c, g).call(this, s.MUTED, "")) : (e(this, u).muted = !1, o(this, c, k).call(this, s.MUTED), e(this, u).volume === 0 && (e(this, u).volume = 0.3)));
+          e(this, b) && (L(s) ? (e(this, b).muted = !0, r(this, h, A).call(this, n.MUTED, ""), (u = e(this, F)) != null && u.isMediaElementSource && ((v = e(this, F)) == null || v.stop(), r(this, h, A).call(this, n.VOLUME_LEVEL, JSON.stringify({ left: null, right: null })))) : (e(this, b).muted = !1, r(this, h, w).call(this, n.MUTED), r(this, h, w).call(this, n.NEEDS_USER_INPUT_AUDIO), e(this, b).volume === 0 && (e(this, b).volume = 0.3), (g = e(this, F)) == null || g.start()));
           break;
         case "ui-locked":
-          T(i) ? o(this, c, Ge).call(this) : o(this, c, ut).call(this);
+          L(s) ? r(this, h, mi).call(this) : r(this, h, pt).call(this);
           break;
         case "is-fullscreen":
-          T(i) ? o(this, c, $s).call(this) : o(this, c, Ci).call(this);
+          L(s) ? r(this, h, zn).call(this) : r(this, h, ns).call(this);
           break;
         case "max-video-bit-rate":
-          h(this, Mt, i), T(i) ? o(this, c, g).call(this, s.MAX_VIDEO_BITRATE, i) : o(this, c, k).call(this, s.MAX_VIDEO_BITRATE);
+          c(this, ee, s), L(s) ? r(this, h, A).call(this, n.MAX_VIDEO_BITRATE, s) : r(this, h, w).call(this, n.MAX_VIDEO_BITRATE);
           break;
-        case "picture-in-picture":
-          T(i) ? o(this, c, Os).call(this) : o(this, c, Gs).call(this);
+        case "is-pip":
+          L(s) ? r(this, h, Fn).call(this) : r(this, h, Hn).call(this);
           break;
         case "is-airplaying":
-          T(i) ? ((m = e(this, u)) != null && m.mediaElement && (e(this, u).mediaElement.style.display = "hidden"), (f = e(this, u)) == null || f.pause()) : (E = e(this, u)) != null && E.mediaElement && (e(this, u).mediaElement.style.display = "block");
+          L(s) ? ((P = e(this, b)) != null && P.mediaElement && (e(this, b).mediaElement.style.display = "hidden"), (et = e(this, b)) == null || et.pause()) : (Y = e(this, b)) != null && Y.mediaElement && (e(this, b).mediaElement.style.display = "block");
           break;
         case "is-casting":
-          T(i) ? ((U = e(this, D)) != null && U.isFullscreen() && o(this, c, Ci).call(this), (ct = e(this, u)) == null || ct.pause()) : document.hidden || (dt = e(this, u)) == null || dt.play();
+          L(s) ? ((Ct = e(this, B)) != null && Ct.isFullscreen() && r(this, h, ns).call(this), (Lt = e(this, b)) == null || Lt.pause()) : document.hidden || (Tt = e(this, b)) == null || Tt.play();
           break;
         case "cast-receiver-id":
-          h(this, Ee, i);
+          c(this, He, s);
           break;
         case "cast-background":
-          h(this, Ae, i);
+          c(this, ze, s);
           break;
         case "language":
-          e(this, u) && (e(this, u).language = i, T(i) ? o(this, c, g).call(this, s.LANGUAGE, i) : o(this, c, k).call(this, s.LANGUAGE));
+          e(this, b) && (e(this, b).language = s, L(s) ? r(this, h, A).call(this, n.LANGUAGE, s) : r(this, h, w).call(this, n.LANGUAGE));
           break;
         case "text-track":
-          e(this, u) && (e(this, u).textTrack = i, T(i) ? o(this, c, g).call(this, s.TEXT_TRACK, i) : o(this, c, k).call(this, s.TEXT_TRACK));
+          e(this, b) && (e(this, b).textTrack = s, L(s) ? r(this, h, A).call(this, n.TEXT_TRACK, s) : r(this, h, w).call(this, n.TEXT_TRACK));
           break;
         case "log-level":
-          T(i) && e(this, N).setLevel(ts(i));
+          L(s) && e(this, N).setLevel(Gi(s));
           break;
         case "authentication-token":
-          T(i) ? o(this, c, g).call(this, s.AUTHENTICATION_TOKEN, i) : o(this, c, k).call(this, s.AUTHENTICATION_TOKEN);
+          L(s) ? r(this, h, A).call(this, n.AUTHENTICATION_TOKEN, s) : r(this, h, w).call(this, n.AUTHENTICATION_TOKEN);
           break;
         case "volume":
-          if (e(this, u) && T(i)) {
-            const q = parseFloat(i);
-            e(this, u).volume = q;
+          if (e(this, b) && L(s)) {
+            const z = parseFloat(s);
+            e(this, b).volume = z;
+          }
+          break;
+        case "drm-headers":
+          if (L(s)) {
+            const z = pi(s);
+            z ? (hi = e(this, b)) == null || hi.drm.setHeaders(z) : e(this, N).warn("Invalid DRM headers format:", s);
+          }
+          break;
+        case "drm-queryparams":
+          if (L(s)) {
+            const z = pi(s);
+            z ? (di = e(this, b)) == null || di.drm.setQueryParams(z) : e(this, N).warn("Invalid DRM query parameters format:", s);
           }
           break;
       }
   }
   connectListener(t) {
-    is(t).forEach((i) => {
-      var b, m;
-      const a = e(this, K).get(i);
-      switch (a ? a.push(t) : e(this, K).set(i, [t]), i) {
-        case s.PAUSED:
-          (((b = e(this, u)) == null ? void 0 : b.playbackState) === "paused" || this.hasAttribute(s.PAUSED)) && t.setAttribute(s.PAUSED, "");
+    $s(t).forEach((s) => {
+      var p, u;
+      const o = e(this, it).get(s);
+      switch (o ? o.push(t) : e(this, it).set(s, [t]), s) {
+        case n.PAUSED:
+          (((p = e(this, b)) == null ? void 0 : p.playbackState) === "paused" || this.hasAttribute(n.PAUSED)) && t.setAttribute(n.PAUSED, "");
           break;
-        case s.MUTED:
-          ((m = e(this, u)) != null && m.muted || this.hasAttribute(s.MUTED)) && t.setAttribute(s.MUTED, "");
+        case n.MUTED:
+          ((u = e(this, b)) != null && u.muted || this.hasAttribute(n.MUTED)) && t.setAttribute(n.MUTED, "");
           break;
-        case s.MAX_VIDEO_BITRATE:
-          e(this, Mt) && t.setAttribute(s.MAX_VIDEO_BITRATE, e(this, Mt));
+        case n.MAX_VIDEO_BITRATE:
+          e(this, ee) && t.setAttribute(n.MAX_VIDEO_BITRATE, e(this, ee));
           break;
-        case s.CHANNEL_ID:
-          e(this, et) && t.setAttribute(s.CHANNEL_ID, e(this, et));
+        case n.CHANNEL_ID:
+          e(this, st) && t.setAttribute(n.CHANNEL_ID, e(this, st));
           break;
-        case s.CHANNEL_GROUP_ID:
-          e(this, X) && t.setAttribute(s.CHANNEL_GROUP_ID, e(this, X));
+        case n.CHANNEL_GROUP_ID:
+          e(this, nt) && t.setAttribute(n.CHANNEL_GROUP_ID, e(this, nt));
           break;
-        case s.AUTHENTICATION_TOKEN: {
-          const f = this.getAttribute("authentication-token");
-          f && t.setAttribute(s.AUTHENTICATION_TOKEN, f);
+        case n.AUTHENTICATION_TOKEN: {
+          const v = this.getAttribute("authentication-token");
+          v && t.setAttribute(n.AUTHENTICATION_TOKEN, v);
           break;
         }
       }
     });
   }
   disconnectListener(t) {
-    is(t).forEach((i) => {
-      const a = e(this, K).get(i);
-      a && e(this, K).set(
-        i,
-        a.filter((b) => b != t)
+    $s(t).forEach((s) => {
+      const o = e(this, it).get(s);
+      o && e(this, it).set(
+        s,
+        o.filter((p) => p != t)
       );
     });
   }
   get instance() {
-    return e(this, u);
+    return e(this, b);
+  }
+  get airPlay() {
+    return e(this, J);
   }
   connect() {
-    o(this, c, Ai).call(this);
+    r(this, h, ts).call(this);
   }
 };
-Ze = new WeakMap(), K = new WeakMap(), ge = new WeakMap(), Z = new WeakMap(), tt = new WeakMap(), u = new WeakMap(), fe = new WeakMap(), et = new WeakMap(), X = new WeakMap(), Mt = new WeakMap(), it = new WeakMap(), D = new WeakMap(), st = new WeakMap(), j = new WeakMap(), Ee = new WeakMap(), Ae = new WeakMap(), N = new WeakMap(), c = new WeakSet(), Ai = function() {
-  return P(this, null, function* () {
-    var Ji, Wi;
-    if (!e(this, et)) return;
-    yield (Ji = e(this, u)) == null ? void 0 : Ji.unload();
-    const t = this.hasAttribute(s.PAUSED), n = this.hasAttribute(s.MUTED), i = os(this.getAttribute(s.MEDIA)), a = this.getAttribute(s.TEXT_TRACK) || void 0, b = this.getAttribute("edge-url") || void 0, m = this.getAttribute("authentication-token") || void 0, f = ci(this.getAttribute("max-video-bit-rate")), E = Vn(this.getAttribute("max-size")), U = ci(this.getAttribute("min-buffer-time")), ct = ci(this.getAttribute("max-buffer-time")), dt = w(this.getAttribute("burst-enabled")), q = w(this.getAttribute("mse-enabled")), De = w(this.getAttribute("mse-opus-enabled")), Tn = w(this.getAttribute("ios-background-play-enabled")), wn = w(this.getAttribute("ios-wake-lock-enabled")), In = w(this.getAttribute("ios-media-element-enabled")), xn = w(this.getAttribute("abr-enabled")), Ln = w(this.getAttribute("size-based-resolution-cap-enabled")), Nn = w(this.getAttribute("telemetry-enabled")), Sn = Yn(this.getAttribute("video-codecs")), Rn = rs(this.getAttribute("poster"));
-    h(this, u, new $n({
-      url: e(this, fe),
-      channelId: e(this, et),
-      channelGroupId: e(this, X),
-      edgeUrl: b,
-      authenticationToken: m,
-      muted: n,
-      media: i,
-      maxSize: E,
-      maxVideoBitRate: f,
-      minBufferTime: U,
-      maxBufferTime: ct,
-      burstEnabled: dt,
-      mseEnabled: q,
-      mseOpusEnabled: De,
-      iosBackgroundPlayEnabled: Tn,
-      iosWakeLockEnabled: wn,
-      iosMediaElementEnabled: In,
-      abrEnabled: xn,
-      sizeBasedResolutionCapEnabled: Ln,
-      telemetryEnabled: Nn,
-      videoCodecs: Sn,
-      poster: Rn,
-      textTrack: a
-    })), e(this, u).on("rendition levels", (C) => {
-      const ht = C.filter((Fe) => {
-        var Xt;
-        return (Xt = Fe.video) == null ? void 0 : Xt.width;
+Si = new WeakMap(), it = new WeakMap(), Oe = new WeakMap(), vt = new WeakMap(), gt = new WeakMap(), b = new WeakMap(), Fe = new WeakMap(), st = new WeakMap(), nt = new WeakMap(), ee = new WeakMap(), rt = new WeakMap(), B = new WeakMap(), J = new WeakMap(), F = new WeakMap(), ot = new WeakMap(), He = new WeakMap(), ze = new WeakMap(), N = new WeakMap(), ft = new WeakMap(), h = new WeakSet(), ts = function() {
+  return G(this, null, function* () {
+    var Ds, Os;
+    if (!e(this, st)) return;
+    yield (Ds = e(this, b)) == null ? void 0 : Ds.unload();
+    const t = this.hasAttribute(n.PAUSED), i = this.hasAttribute(n.MUTED), s = qs(this.getAttribute(n.MEDIA)), o = this.getAttribute(n.TEXT_TRACK) || void 0, p = this.getAttribute("edge-url") || void 0, u = this.getAttribute("authentication-token") || void 0, v = ui(this.getAttribute("max-video-bit-rate")), g = oo(this.getAttribute("max-size")), P = ui(this.getAttribute("min-buffer-time")), et = ui(this.getAttribute("max-buffer-time")), Y = x(this.getAttribute("burst-enabled")), Ct = x(this.getAttribute("mse-enabled")), Lt = x(this.getAttribute("mse-opus-enabled")), Tt = x(this.getAttribute("ios-background-play-enabled")), hi = x(this.getAttribute("ios-wake-lock-enabled")), di = x(this.getAttribute("ios-media-element-enabled")), z = x(this.getAttribute("abr-enabled")), xr = x(this.getAttribute("size-based-resolution-cap-enabled")), Sr = x(this.getAttribute("telemetry-enabled")), Nr = ro(this.getAttribute("video-codecs")), Ps = Xs(this.getAttribute("poster")), Rr = ao(this.getAttribute("advanced")), Ur = Gi(this.getAttribute("log-level")), _r = pi(this.getAttribute("drm-headers")), Pr = pi(this.getAttribute("drm-queryparams")), Mr = x(this.getAttribute("webtransport-enabled")), Ms = ui(this.getAttribute("reconnect-retries")), Dr = Ms !== void 0 ? (y) => y.reconnectRetries < Ms : void 0, Or = this.getAttribute("language") || void 0;
+    c(this, b, new jr({
+      url: e(this, Fe),
+      channelId: e(this, st),
+      channelGroupId: e(this, nt),
+      edgeUrl: p,
+      authenticationToken: u,
+      muted: i,
+      media: s,
+      maxSize: g,
+      maxVideoBitRate: v,
+      minBufferTime: P,
+      maxBufferTime: et,
+      burstEnabled: Y,
+      mseEnabled: Ct,
+      mseOpusEnabled: Lt,
+      iosBackgroundPlayEnabled: Tt,
+      iosWakeLockEnabled: hi,
+      iosMediaElementEnabled: di,
+      abrEnabled: z,
+      sizeBasedResolutionCapEnabled: xr,
+      telemetryEnabled: Sr,
+      videoCodecs: Nr,
+      poster: Ps,
+      textTrack: o,
+      advanced: Rr,
+      logLevel: Ur,
+      language: Or,
+      drm: { headers: _r, queryParams: Pr },
+      webtransportEnabled: Mr,
+      reconnectHandler: Dr
+    })), e(this, b).on("rendition levels", (y) => {
+      const D = y.filter((ci) => {
+        var de;
+        return (de = ci.video) == null ? void 0 : de.width;
       });
-      o(this, c, g).call(this, s.RENDITION_LEVELS, JSON.stringify(ht));
-    }), e(this, u).on("rendition level", (C) => {
-      o(this, c, g).call(this, s.RENDITION_LEVEL, JSON.stringify(C));
-    }), e(this, u).on("playback state", (C) => {
-      switch (C) {
+      r(this, h, A).call(this, n.RENDITION_LEVELS, JSON.stringify(D));
+    }), e(this, b).on("rendition level", (y) => {
+      r(this, h, A).call(this, n.RENDITION_LEVEL, JSON.stringify(y));
+    }), e(this, b).on("playback state", (y) => {
+      switch (y) {
         case "playing":
-          o(this, c, k).call(this, s.PAUSED), o(this, c, k).call(this, s.BUFFERING);
+          r(this, h, w).call(this, n.PAUSED), r(this, h, w).call(this, n.BUFFERING);
           break;
         case "paused":
-          o(this, c, g).call(this, s.PAUSED, ""), o(this, c, k).call(this, s.BUFFERING);
+          r(this, h, A).call(this, n.PAUSED, ""), r(this, h, w).call(this, n.BUFFERING);
           break;
         case "buffering":
-          o(this, c, k).call(this, s.PAUSED), o(this, c, g).call(this, s.BUFFERING, "");
+          r(this, h, w).call(this, n.PAUSED), r(this, h, A).call(this, n.BUFFERING, "");
           break;
       }
-    }), e(this, u).on("volume state", (C) => {
-      o(this, c, g).call(this, s.VOLUME, C.volume.toString()), C.isMuted ? o(this, c, g).call(this, s.MUTED, "") : o(this, c, k).call(this, s.MUTED);
-    }), e(this, u).on("channel switch", () => {
-      var C;
-      ((C = e(this, u)) == null ? void 0 : C.playbackState) !== "buffering" && o(this, c, k).call(this, s.BUFFERING);
-    }), e(this, u).on("channels", (C) => {
-      o(this, c, g).call(this, s.CHANNELS, JSON.stringify(C));
-    }), e(this, u).on("languages", (C) => {
-      var ht;
-      o(this, c, g).call(this, s.LANGUAGES, JSON.stringify(C)), (ht = e(this, u)) != null && ht.language && o(this, c, g).call(this, s.LANGUAGE, e(this, u).language);
-    }), e(this, u).on("text tracks", (C) => {
-      var ht, Fe, Xt;
-      o(this, c, g).call(this, s.TEXT_TRACKS, JSON.stringify(C)), (ht = e(this, u)) != null && ht.textTrack && o(this, c, g).call(this, s.TEXT_TRACK, (Xt = (Fe = e(this, u)) == null ? void 0 : Fe.textTrack) != null ? Xt : "");
-    }), e(this, u).on("needs user input", () => {
-      o(this, c, g).call(this, s.NEEDS_USER_INPUT, "");
-    }), h(this, tt, (Wi = this.shadowRoot) == null ? void 0 : Wi.querySelector("#video")), e(this, tt) && e(this, u).attach(e(this, tt)), this.setAttribute(s.MEDIA, e(this, u).media), e(this, u).muted && o(this, c, g).call(this, s.MUTED, ""), o(this, c, g).call(this, s.VOLUME, e(this, u).volume.toString());
-    const Un = w(this.getAttribute(s.AIRPLAY_ENABLED), !1), _n = w(this.getAttribute(s.CAST_ENABLED), !0), Pn = w(this.getAttribute(s.FULLSCREEN_ENABLED), !0), Mn = w(this.getAttribute(s.PIP_ENABLED), !0);
-    Un && o(this, c, _s).call(this, e(this, u)), _n && o(this, c, Rs).call(this, e(this, u)), Pn && o(this, c, Ss).call(this, e(this, u)), Mn && o(this, c, Ns).call(this, e(this, u)), t || e(this, u).play(), this.dispatchEvent(
-      new CustomEvent("vindral-instance-ready", { bubbles: !0, composed: !0, detail: e(this, u) })
+    }), e(this, b).on("volume state", (y) => {
+      r(this, h, A).call(this, n.VOLUME, y.volume.toString()), y.isMuted ? r(this, h, A).call(this, n.MUTED, "") : r(this, h, w).call(this, n.MUTED);
+    }), e(this, b).on("channel switch failed", ({ channelId: y }) => {
+      var D;
+      this.setAttribute(n.CHANNEL_ID, y), ((D = e(this, b)) == null ? void 0 : D.playbackState) !== "buffering" && r(this, h, w).call(this, n.BUFFERING);
+    }), e(this, b).on("channel switch", ({ channelId: y }) => {
+      var D;
+      e(this, st) !== y && this.setAttribute(n.CHANNEL_ID, y), ((D = e(this, b)) == null ? void 0 : D.playbackState) !== "buffering" && r(this, h, w).call(this, n.BUFFERING);
+    }), e(this, b).on("channels", (y) => {
+      c(this, Ut, Date.now()), r(this, h, A).call(this, n.CHANNELS, JSON.stringify(y));
+    }), e(this, b).on("languages", (y) => {
+      var D;
+      r(this, h, A).call(this, n.LANGUAGES, JSON.stringify(y)), (D = e(this, b)) != null && D.language && r(this, h, A).call(this, n.LANGUAGE, e(this, b).language);
+    }), e(this, b).on("text tracks", (y) => {
+      var D, ci, de;
+      r(this, h, A).call(this, n.TEXT_TRACKS, JSON.stringify(y)), (D = e(this, b)) != null && D.textTrack && r(this, h, A).call(this, n.TEXT_TRACK, (de = (ci = e(this, b)) == null ? void 0 : ci.textTrack) != null ? de : "");
+    }), e(this, b).on("needs user input", (y) => {
+      y != null && y.forVideo ? (r(this, h, A).call(this, n.NEEDS_USER_INPUT_VIDEO, ""), r(this, h, w).call(this, n.NEEDS_USER_INPUT_AUDIO)) : y != null && y.forAudio && (r(this, h, A).call(this, n.NEEDS_USER_INPUT_AUDIO, ""), r(this, h, w).call(this, n.NEEDS_USER_INPUT_VIDEO));
+    }), e(this, b).on("is live", (y) => {
+      y || r(this, h, w).call(this, n.BUFFERING);
+    }), c(this, gt, (Os = this.shadowRoot) == null ? void 0 : Os.querySelector("#video")), e(this, gt) && e(this, b).attach(e(this, gt)), this.setAttribute(n.MEDIA, e(this, b).media), e(this, b).muted && r(this, h, A).call(this, n.MUTED, ""), r(this, h, A).call(this, n.VOLUME, e(this, b).volume.toString()), L(Ps) || r(this, h, A).call(this, n.POSTER_SRC, e(this, b).getThumbnailUrl());
+    const Fr = x(this.getAttribute(n.AIRPLAY_ENABLED), !1), Hr = x(this.getAttribute(n.CAST_ENABLED), !0), zr = x(this.getAttribute(n.FULLSCREEN_ENABLED), !0), Gr = x(this.getAttribute(n.PIP_ENABLED), !0), $r = x(this.getAttribute(n.VU_METER_ENABLED), !1);
+    Fr && r(this, h, Rn).call(this, e(this, b)), Hr && r(this, h, Sn).call(this, e(this, b)), zr && r(this, h, xn).call(this, e(this, b)), Gr && r(this, h, Tn).call(this, e(this, b)), t || e(this, b).play(), $r && r(this, h, Un).call(this, e(this, b)), this.dispatchEvent(
+      new CustomEvent("vindral-instance-ready", { bubbles: !0, composed: !0, detail: e(this, b) })
     );
   });
-}, Ns = function(t) {
-  t.mediaElement instanceof HTMLVideoElement && (h(this, it, new Qn(t.mediaElement)), e(this, it).on("on picture in picture change", (n) => {
-    n ? o(this, c, g).call(this, s.PICTURE_IN_PICTURE, "") : o(this, c, k).call(this, s.PICTURE_IN_PICTURE);
+}, Tn = function(t) {
+  t.mediaElement instanceof HTMLVideoElement && (c(this, rt, new uo(t.mediaElement)), e(this, rt).isSupported() && (e(this, N).debug("PIP is supported"), r(this, h, A).call(this, n.PIP_AVAILABLE, "")), e(this, rt).on("on picture in picture change", (i) => {
+    i ? r(this, h, A).call(this, n.IS_PIP, "") : r(this, h, w).call(this, n.IS_PIP);
   }));
-}, Ss = function(t) {
-  const n = !Vt.isFullscreenApiSupported(this) && Vt.isFullscreenApiSupported(t.mediaElement) ? t.mediaElement : this;
-  h(this, D, new Vt(n)), e(this, D).on("on fullscreen change", (i) => {
-    i ? o(this, c, g).call(this, s.FULLSCREEN, "") : o(this, c, k).call(this, s.FULLSCREEN);
+}, xn = function(t) {
+  const i = !be.isFullscreenApiSupported(this) && be.isFullscreenApiSupported(t.mediaElement) ? t.mediaElement : this;
+  c(this, B, new be(i)), e(this, B).on("on fullscreen change", (s) => {
+    s ? r(this, h, A).call(this, n.FULLSCREEN, "") : r(this, h, w).call(this, n.FULLSCREEN);
   });
-}, Rs = function(t) {
-  h(this, j, new Bn({
-    background: e(this, Ae),
-    receiverApplicationId: e(this, Ee),
+}, Sn = function(t) {
+  c(this, ot, new Zr({
+    background: e(this, ze),
+    receiverApplicationId: e(this, He),
     options: t.getCastOptions()
-  })), e(this, j).init().then(() => {
-    var n, i, a;
-    o(this, c, g).call(this, s.CAST_AVAILABLE, ""), (n = e(this, j)) == null || n.on("connected", o(this, c, yi).bind(this)), (i = e(this, j)) == null || i.on("resumed", o(this, c, yi).bind(this)), (a = e(this, j)) == null || a.on("disconnected", o(this, c, Us).bind(this));
-  }).catch((n) => {
-    e(this, N).warn("Failed to initialize CastSender", n);
+  })), e(this, ot).init().then(() => {
+    var i, s, o;
+    r(this, h, A).call(this, n.CAST_AVAILABLE, ""), (i = e(this, ot)) == null || i.on("connected", r(this, h, es).bind(this)), (s = e(this, ot)) == null || s.on("resumed", r(this, h, es).bind(this)), (o = e(this, ot)) == null || o.on("disconnected", r(this, h, Nn).bind(this));
+  }).catch((i) => {
+    e(this, N).warn("Failed to initialize CastSender", i);
   });
-}, yi = function() {
-  var n, i;
-  o(this, c, g).call(this, s.IS_CASTING, "");
-  const t = (i = (n = e(this, j)) == null ? void 0 : n.getReceiverName()) != null ? i : "device";
-  o(this, c, g).call(this, s.CAST_RECEIVER_NAME, t);
-}, Us = function() {
-  o(this, c, k).call(this, s.IS_CASTING), o(this, c, k).call(this, s.CAST_RECEIVER_NAME);
-}, _s = function(t) {
-  const n = t.getCastOptions();
-  h(this, st, new Wn({
-    url: n.url,
-    channelId: n.channelId,
-    authenticationToken: n.authenticationToken,
+}, es = function() {
+  var i, s;
+  r(this, h, A).call(this, n.IS_CASTING, "");
+  const t = (s = (i = e(this, ot)) == null ? void 0 : i.getReceiverName()) != null ? s : "device";
+  r(this, h, A).call(this, n.CAST_RECEIVER_NAME, t);
+}, Nn = function() {
+  r(this, h, w).call(this, n.IS_CASTING), r(this, h, w).call(this, n.CAST_RECEIVER_NAME);
+}, Rn = function(t) {
+  var s;
+  (s = e(this, J)) == null || s.unload();
+  const i = t.getCastOptions();
+  c(this, J, new co({
+    url: i.url,
+    channelId: i.channelId,
+    authenticationToken: i.authenticationToken,
     container: this
-  })), e(this, st).once("available", () => {
-    o(this, c, g).call(this, s.AIRPLAY_AVAILABLE, "");
-  }), e(this, st).on("connected", () => {
-    o(this, c, g).call(this, s.IS_AIRPLAYING, "");
-  }), e(this, st).on("disconnected", () => {
-    o(this, c, k).call(this, s.IS_AIRPLAYING);
+  })), e(this, J).once("available", () => {
+    r(this, h, A).call(this, n.AIRPLAY_AVAILABLE, "");
+  }), e(this, J).on("connected", () => {
+    r(this, h, A).call(this, n.IS_AIRPLAYING, "");
+  }), e(this, J).on("disconnected", () => {
+    r(this, h, w).call(this, n.IS_AIRPLAYING);
   });
-}, ye = new WeakMap(), Ps = function(t) {
-  t.pointerType !== "mouse" && t.timeStamp - e(this, ye) < 250 || (o(this, c, Ge).call(this), e(this, Z) && clearTimeout(e(this, Z)), t.target instanceof HTMLElement && ([this, e(this, tt)].includes(t.target) || t.target.localName === "vindral-scroll-overlay") && o(this, c, ut).call(this));
-}, Ms = function(t) {
-  const n = this.hasAttribute(s.USER_INTERACTING);
-  t.pointerType === "touch" && t.target instanceof HTMLElement ? [this, e(this, tt)].includes(t.target) && n ? o(this, c, ki).call(this) : o(this, c, ut).call(this) : t.composedPath().some((i) => i instanceof HTMLElement && ["vindral-play-button"].includes(i == null ? void 0 : i.localName)) && o(this, c, ut).call(this);
-}, Ds = function(t) {
-  !e(this, D) || t.target instanceof B || t.target instanceof Yi || (this.hasAttribute(s.FULLSCREEN) ? this.removeAttribute(s.FULLSCREEN) : this.setAttribute(s.FULLSCREEN, ""));
-}, Fs = function(t) {
-  this.hasAttribute(s.USER_INTERACTING) || o(this, c, ut).call(this);
-}, ke = new WeakMap(), Hs = function() {
-  return P(this, null, function* () {
-    if (!e(this, u) || !e(this, X))
+}, Un = function(t) {
+  var i;
+  if ((i = e(this, F)) == null || i.unload(), !Yr()) {
+    if (t.audioNode)
+      c(this, F, new Gs(t.audioNode));
+    else if (t.mediaElement instanceof HTMLMediaElement)
+      c(this, F, new Gs(t.mediaElement));
+    else
+      return;
+    e(this, F).on("on decibel change", (s) => {
+      r(this, h, A).call(this, n.VOLUME_LEVEL, JSON.stringify(s));
+    }), r(this, h, A).call(this, n.VOLUME_LEVEL, JSON.stringify({ left: null, right: null })), (!e(this, F).isMediaElementSource || !this.hasAttribute(n.MUTED)) && e(this, F).start();
+  }
+}, Ge = new WeakMap(), _n = function(t) {
+  t.pointerType !== "mouse" && t.timeStamp - e(this, Ge) < 250 || (r(this, h, mi).call(this), e(this, vt) && clearTimeout(e(this, vt)), t.target instanceof HTMLElement && ([this, e(this, gt)].includes(t.target) || t.target.localName === "vindral-scroll-overlay") && r(this, h, pt).call(this));
+}, Pn = function(t) {
+  const i = this.hasAttribute(n.USER_INTERACTING);
+  t.pointerType === "touch" && t.target instanceof HTMLElement ? [this, e(this, gt)].includes(t.target) && i ? r(this, h, ss).call(this) : r(this, h, pt).call(this) : t.composedPath().some((s) => s instanceof HTMLElement && ["vindral-play-button"].includes(s == null ? void 0 : s.localName)) && r(this, h, pt).call(this);
+}, Mn = function(t) {
+  !e(this, B) || t.target instanceof tt || t.target instanceof Us || t.target instanceof _s || (this.hasAttribute(n.FULLSCREEN) ? this.removeAttribute(n.FULLSCREEN) : this.setAttribute(n.FULLSCREEN, ""));
+}, Dn = function(t) {
+  this.hasAttribute(n.USER_INTERACTING) || r(this, h, pt).call(this);
+}, $e = new WeakMap(), Ni = new WeakMap(), Ri = new WeakMap(), On = function(t) {
+  var u, v;
+  const { metaKey: i, altKey: s, key: o } = t;
+  if (!(i || s || !$i.includes(o) || (((u = t.target) == null ? void 0 : u.keysUsed) || []).includes(o)))
+    switch (o) {
+      case "f":
+        this.hasAttribute(n.FULLSCREEN) ? this.removeAttribute(n.FULLSCREEN) : this.setAttribute(n.FULLSCREEN, "");
+        break;
+      case "m":
+        this.hasAttribute(n.MUTED) ? this.removeAttribute(n.MUTED) : this.setAttribute(n.MUTED, "");
+        break;
+      case "ArrowDown":
+        (v = this.querySelector("vindral-scroll-overlay")) == null || v.setAttribute("open", "");
+        break;
+    }
+}, Ut = new WeakMap(), is = function() {
+  return G(this, null, function* () {
+    if (!e(this, b) || !e(this, nt))
       return;
-    const t = yield e(this, u).getApiClient().getChannels(e(this, X));
-    o(this, c, g).call(this, s.CHANNELS, JSON.stringify(t));
+    const t = Date.now();
+    if (e(this, Ut) && t - e(this, Ut) < 1e4)
+      e(this, N).debug("Skipping channel update, last update was less than 10 seconds ago.");
+    else {
+      c(this, Ut, t);
+      const i = yield e(this, b).getApiClient().getChannels(e(this, nt));
+      r(this, h, A).call(this, n.CHANNELS, JSON.stringify(i));
+    }
+    c(this, ft, window.setTimeout(() => void r(this, h, is).call(this), 1e4));
   });
-}, ki = function() {
-  !this.hasAttribute(s.USER_INTERACTING) || this.hasAttribute(s.UI_LOCKED) || (this.dispatchEvent(
+}, ss = function() {
+  !this.hasAttribute(n.USER_INTERACTING) || this.hasAttribute(n.UI_LOCKED) || (this.dispatchEvent(
     new CustomEvent("user-interacting", { bubbles: !0, composed: !0, detail: { active: !1 } })
-  ), this.removeAttribute(s.USER_INTERACTING));
-}, Ge = function() {
-  this.hasAttribute(s.USER_INTERACTING) || requestAnimationFrame(() => {
-    this.setAttribute(s.USER_INTERACTING, ""), this.dispatchEvent(
+  ), this.removeAttribute(n.USER_INTERACTING));
+}, mi = function() {
+  this.hasAttribute(n.USER_INTERACTING) || requestAnimationFrame(() => {
+    this.setAttribute(n.USER_INTERACTING, ""), this.dispatchEvent(
       new CustomEvent("user-interacting", { bubbles: !0, composed: !0, detail: { active: !0 } })
     );
   });
-}, ut = function() {
-  o(this, c, Ge).call(this), e(this, Z) && clearTimeout(e(this, Z)), e(this, ge) && h(this, Z, self.setTimeout(() => {
-    o(this, c, ki).call(this);
-  }, e(this, ge)));
-}, Os = function() {
+}, pt = function() {
+  r(this, h, mi).call(this), e(this, vt) && clearTimeout(e(this, vt)), e(this, Oe) && c(this, vt, self.setTimeout(() => {
+    r(this, h, ss).call(this);
+  }, e(this, Oe)));
+}, Fn = function() {
   var t;
-  o(this, c, Ti).call(this), (t = e(this, it)) == null || t.request().catch((n) => {
-    e(this, N).warn("Failed to enter picture in picture:", n);
+  r(this, h, rs).call(this), (t = e(this, rt)) == null || t.request().catch((i) => {
+    e(this, N).warn("Failed to enter picture in picture:", i);
   });
-}, Gs = function() {
+}, Hn = function() {
   var t;
-  (t = e(this, it)) == null || t.exit().catch((n) => {
-    e(this, N).warn("Failed to exit picture in picture:", n);
+  (t = e(this, rt)) == null || t.exit().catch((i) => {
+    e(this, N).warn("Failed to exit picture in picture:", i);
   });
-}, $s = function() {
-  var t, n;
-  (t = e(this, D)) != null && t.isFullscreenApiSupported() ? (o(this, c, Ti).call(this), (n = e(this, D)) == null || n.request().then(() => {
-    e(this, ti).call(this);
-  }).catch((i) => {
-    e(this, N).warn("Failed to enter fullscreen:", i);
-  })) : (this.setAttribute(s.FULLSCREEN_FALLBACK, ""), o(this, c, g).call(this, s.FULLSCREEN, ""));
-}, Ci = function() {
-  var t, n;
-  (t = e(this, D)) != null && t.isFullscreenApiSupported() ? (n = e(this, D)) == null || n.exit().then(() => {
-    e(this, ei).call(this);
-  }).catch((i) => {
-    e(this, N).warn("Failed to exit fullscreen:", i);
-  }) : (this.removeAttribute(s.FULLSCREEN_FALLBACK), o(this, c, k).call(this, s.FULLSCREEN));
-}, ti = new WeakMap(), ei = new WeakMap(), Ti = function() {
-  if (!e(this, u)) return;
-  e(this, u).emitter.emit("ios-hack: reset size");
-}, g = function(t, n) {
+}, zn = function() {
+  var t, i;
+  (t = e(this, B)) != null && t.isFullscreenApiSupported() ? (r(this, h, rs).call(this), (i = e(this, B)) == null || i.request().then(() => {
+    e(this, Ui).call(this);
+  }).catch((s) => {
+    e(this, N).warn("Failed to enter fullscreen:", s);
+  })) : (this.setAttribute(n.FULLSCREEN_FALLBACK, ""), r(this, h, A).call(this, n.FULLSCREEN, ""));
+}, ns = function() {
+  var t, i;
+  (t = e(this, B)) != null && t.isFullscreenApiSupported() ? (i = e(this, B)) == null || i.exit().then(() => {
+    e(this, _i).call(this);
+  }).catch((s) => {
+    e(this, N).warn("Failed to exit fullscreen:", s);
+  }) : (this.removeAttribute(n.FULLSCREEN_FALLBACK), r(this, h, w).call(this, n.FULLSCREEN));
+}, Ui = new WeakMap(), _i = new WeakMap(), rs = function() {
+  if (!e(this, b)) return;
+  e(this, b).emitter.emit("ios-hack: reset size");
+}, A = function(t, i) {
+  var s;
+  (s = e(this, it).get(t)) == null || s.forEach((o) => o.setAttribute(t, i));
+}, w = function(t) {
   var i;
-  (i = e(this, K).get(t)) == null || i.forEach((a) => a.setAttribute(t, n));
-}, k = function(t) {
-  var n;
-  (n = e(this, K).get(t)) == null || n.forEach((i) => i.removeAttribute(t));
-}, p(te, "observedAttributes", [
-  ...ns,
+  (i = e(this, it).get(t)) == null || i.forEach((s) => s.removeAttribute(t));
+}, m(fe, "observedAttributes", [
+  ...Ks,
   "url",
   "edge-url",
   "target-buffer-time",
@@ -1722,49 +2247,51 @@ Ze = new WeakMap(), K = new WeakMap(), ge = new WeakMap(), Z = new WeakMap(), tt
   "telemetry-enabled",
   "video-codecs",
   "poster",
-  "auto-instance-enabled"
-]), l(te, Ze, "https://lb.cdn.vindral.com");
-let ce = te;
-const zs = document.createElement("template"), Zn = (
+  "advanced",
+  "drm-headers",
+  "drm-queryparams",
+  "webtransport-enabled",
+  "reconnect-retries",
+  "auto-instance-enabled",
+  "language"
+]), l(fe, Si, "https://lb.cdn.vindral.com");
+let Le = fe;
+const Gn = document.createElement("template"), po = (
   /* SVG */
   `
   <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"  class="icon icon-tabler icons-tabler-outline icon-tabler-maximize"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 8v-2a2 2 0 0 1 2 -2h2" /><path d="M4 16v2a2 2 0 0 0 2 2h2" /><path d="M16 4h2a2 2 0 0 1 2 2v2" /><path d="M16 20h2a2 2 0 0 0 2 -2v-2" /></svg>
 `
-), to = (
+), bo = (
   /* SVG */
   `
   <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"  class="icon icon-tabler icons-tabler-outline icon-tabler-minimize"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 19v-2a2 2 0 0 1 2 -2h2" /><path d="M15 5v2a2 2 0 0 0 2 2h2" /><path d="M5 15h2a2 2 0 0 1 2 2v2" /><path d="M5 9h2a2 2 0 0 0 2 -2v-2" /></svg>
 `
 );
-zs.innerHTML = /* HTML */
+Gn.innerHTML = /* HTML */
 `
   <style>
     :host {
       display: var(--fullscreen-button-display);
     }
 
-    slot > svg {
-      display: block;
-    }
-
-    :host([${s.FULLSCREEN}]) slot[name="enter"] {
+    :host([${n.FULLSCREEN}]) slot[name="enter"] {
       display: none !important;
     }
 
-    :host(:not([${s.FULLSCREEN}])) slot[name="exit"] {
+    :host(:not([${n.FULLSCREEN}])) slot[name="exit"] {
       display: none !important;
     }
   </style>
 
   <slot name="icon">
-    <slot name="enter">${Zn}</slot>
-    <slot name="exit">${to}</slot>
+    <slot name="enter">${po}</slot>
+    <slot name="exit">${bo}</slot>
   </slot>
 `;
-const ee = class ee extends B {
+const Ee = class Ee extends tt {
   constructor() {
-    var r;
-    super(), (r = this.shadowRoot) == null || r.appendChild(zs.content.cloneNode(!0));
+    var a;
+    super(), (a = this.shadowRoot) == null || a.appendChild(Gn.content.cloneNode(!0));
   }
   connectedCallback() {
     super.connectedCallback(), this.setAttribute("aria-label", this.isFullscreen ? "Exit fullscreen" : "Enter fullscreen");
@@ -1772,29 +2299,29 @@ const ee = class ee extends B {
   disconnectedCallback() {
     super.disconnectedCallback();
   }
-  attributeChangedCallback(r, t, n) {
-    super.attributeChangedCallback(r, t, n), r === s.FULLSCREEN && this.setAttribute("aria-label", this.isFullscreen ? "Exit fullscreen" : "Enter fullscreen");
+  attributeChangedCallback(a, t, i) {
+    super.attributeChangedCallback(a, t, i), a === n.FULLSCREEN && this.setAttribute("aria-label", this.isFullscreen ? "Exit fullscreen" : "Enter fullscreen");
   }
-  set isFullscreen(r) {
-    r ? this.setAttribute(s.FULLSCREEN, "") : this.removeAttribute(s.FULLSCREEN);
+  set isFullscreen(a) {
+    a ? this.setAttribute(n.FULLSCREEN, "") : this.removeAttribute(n.FULLSCREEN);
   }
   get isFullscreen() {
-    return this.hasAttribute(s.FULLSCREEN);
+    return this.hasAttribute(n.FULLSCREEN);
   }
-  handleClick(r) {
-    const t = this.isFullscreen ? v.EXIT_FULLSCREEN : v.ENTER_FULLSCREEN;
+  handleClick(a) {
+    const t = this.isFullscreen ? f.EXIT_FULLSCREEN : f.ENTER_FULLSCREEN;
     this.dispatchEvent(new CustomEvent(t, { bubbles: !0, composed: !0 }));
   }
 };
-p(ee, "observedAttributes", [..._(ee, ee, "observedAttributes"), s.FULLSCREEN]);
-let wi = ee;
-const eo = (
+m(Ee, "observedAttributes", [...q(Ee, Ee, "observedAttributes"), n.FULLSCREEN]);
+let os = Ee;
+const mo = (
   /* SVG */
   `
     <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>
 `
-), Bs = document.createElement("template");
-Bs.innerHTML = /* HTML */
+), $n = document.createElement("template");
+$n.innerHTML = /* HTML */
 `
   <style>
     :host(:not([hidden])) {
@@ -1802,38 +2329,38 @@ Bs.innerHTML = /* HTML */
     }
   </style>
 
-  <slot name="button">${eo}</slot>
+  <slot name="button">${mo}</slot>
   <slot name="listbox" hidden>
     <vindral-language-menu-list id="listbox" part="listbox"></vindral-language-menu-list>
   </slot>
 `;
-var Ce, xi;
-const ie = class ie extends Yi {
+var Be, ls;
+const Ae = class Ae extends Us {
   constructor() {
-    var t, n, i, a;
+    var t, i, s, o;
     super();
-    l(this, Ce);
-    (t = this.shadowRoot) == null || t.appendChild(Bs.content.cloneNode(!0)), this.button = (n = this.shadowRoot) == null ? void 0 : n.querySelector("slot[name=button]"), this.listbox = (i = this.shadowRoot) == null ? void 0 : i.querySelector("[part=listbox]"), this.listboxSlot = (a = this.shadowRoot) == null ? void 0 : a.querySelector("slot[name=listbox]");
+    l(this, Be);
+    (t = this.shadowRoot) == null || t.appendChild($n.content.cloneNode(!0)), this.button = (i = this.shadowRoot) == null ? void 0 : i.querySelector("slot[name=button]"), this.listbox = (s = this.shadowRoot) == null ? void 0 : s.querySelector("[part=listbox]"), this.listboxSlot = (o = this.shadowRoot) == null ? void 0 : o.querySelector("slot[name=listbox]");
   }
   connectedCallback() {
-    super.connectedCallback(), o(this, Ce, xi).call(this);
+    super.connectedCallback(), r(this, Be, ls).call(this), this.setAttribute("aria-label", "Languages");
   }
-  attributeChangedCallback(t, n, i) {
-    super.attributeChangedCallback(t, n, i), (t === s.LANGUAGES || t === s.TEXT_TRACKS) && o(this, Ce, xi).call(this);
+  attributeChangedCallback(t, i, s) {
+    super.attributeChangedCallback(t, i, s), (t === n.LANGUAGES || t === n.TEXT_TRACKS) && r(this, Be, ls).call(this);
   }
 };
-Ce = new WeakSet(), xi = function() {
-  const t = this.getAttribute(s.LANGUAGES), n = this.getAttribute(s.TEXT_TRACKS);
-  (!t || t === "[]") && (!n || n === "[]") ? this.setAttribute("hidden", "") : this.removeAttribute("hidden");
-}, p(ie, "observedAttributes", [..._(ie, ie, "observedAttributes"), s.LANGUAGES, s.TEXT_TRACKS]);
-let Ii = ie;
-const qs = document.createElement("template"), io = (
+Be = new WeakSet(), ls = function() {
+  const t = (o) => (o ? JSON.parse(o) : []).length < 2, i = t(this.getAttribute(n.LANGUAGES)), s = t(this.getAttribute(n.TEXT_TRACKS));
+  i && s ? this.setAttribute("hidden", "") : this.removeAttribute("hidden");
+}, m(Ae, "observedAttributes", [...q(Ae, Ae, "observedAttributes"), n.LANGUAGES, n.TEXT_TRACKS]);
+let as = Ae;
+const Bn = document.createElement("template"), vo = (
   /* SVG */
   `
   <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="#fff" viewBox="0 0 78.369 78.369" xml:space="preserve"><path d="M78.049 19.015 29.458 67.606a1.094 1.094 0 0 1-1.548 0L.32 40.015a1.094 1.094 0 0 1 0-1.547l6.704-6.704a1.095 1.095 0 0 1 1.548 0l20.113 20.112 41.113-41.113a1.095 1.095 0 0 1 1.548 0l6.703 6.704a1.094 1.094 0 0 1 0 1.548z"/></svg>
 `
 );
-qs.innerHTML = /* HTML */
+Bn.innerHTML = /* HTML */
 `
   <style>
     :host {
@@ -1893,12 +2420,11 @@ qs.innerHTML = /* HTML */
       cursor: pointer;
       display: flex;
       align-items: center;
-      justify-content: center;
       height: 44px;
       padding: 0 var(--padding-3);
+      padding-left: var(--padding-6);
       border-radius: 4px;
       font-size: 14px;
-      text-transform: capitalize;
     }
 
     [role="menuitem"]:hover {
@@ -1910,12 +2436,17 @@ qs.innerHTML = /* HTML */
     }
 
     [role="menuitem"][aria-selected="true"]::before {
-      content: url("data:image/svg+xml,${encodeURIComponent(io)}");
+      content: url("data:image/svg+xml,${encodeURIComponent(vo)}");
       position: absolute;
       left: var(--padding-3);
       top: calc(50% - 8px);
     }
 
+    [role="menuitem"]:focus-visible {
+      box-shadow: inset 0 0 0 2px var(--fg-strong);
+      outline: 0;
+    }
+
     .heading {
       text-transform: uppercase;
       margin-bottom: var(--padding-2);
@@ -1924,13 +2455,13 @@ qs.innerHTML = /* HTML */
       font-weight: bold;
     }
 
-    :host([${s.LANGUAGES}="[]"]) #languages,
-    :host(:not([${s.LANGUAGES}])) #languages {
+    :host([${n.LANGUAGES}="[]"]) #languages,
+    :host(:not([${n.LANGUAGES}])) #languages {
       display: none;
     }
 
-    :host([${s.TEXT_TRACKS}="[]"]) #text-tracks,
-    :host(:not([${s.TEXT_TRACKS}])) #text-tracks {
+    :host([${n.TEXT_TRACKS}="[]"]) #text-tracks,
+    :host(:not([${n.TEXT_TRACKS}])) #text-tracks {
       display: none;
     }
   </style>
@@ -1944,103 +2475,141 @@ qs.innerHTML = /* HTML */
     <div class="menu"></div>
   </div>
 `;
-var Te, we, Ie, xe, gt, Y, ft, nt, Dt, A, Xs, js, Li, Ni, $e, jt, Yt, Ys;
-class Ks extends HTMLElement {
+var Ke, qe, Xe, Ve, Q, K, _t, Et, ie, je, at, W, E, qn, Xn, hs, ds, vi, ue, pe, Vn, jn, Yn, cs, us, Jn;
+class Kn extends HTMLElement {
   constructor() {
     super();
-    l(this, A);
-    l(this, Te, []);
-    l(this, we, []);
-    l(this, Ie);
-    l(this, xe);
-    l(this, gt, []);
-    l(this, Y, []);
-    l(this, ft, null);
-    l(this, nt, null);
-    l(this, Dt, null);
-    this.attachShadow({ mode: "open" }).appendChild(qs.content.cloneNode(!0));
+    l(this, E);
+    l(this, Ke, []);
+    l(this, qe, []);
+    l(this, Xe);
+    l(this, Ve);
+    l(this, Q, []);
+    l(this, K, []);
+    l(this, _t, null);
+    l(this, Et, null);
+    l(this, ie, null);
+    l(this, je, null);
+    l(this, at, null);
+    l(this, W, null);
+    m(this, "handleEvent", (t) => {
+      switch (t.type) {
+        case "keydown":
+          r(this, E, jn).call(this, t);
+          break;
+      }
+    });
+    this.attachShadow({ mode: "open" }).appendChild(Bn.content.cloneNode(!0));
   }
   connectedCallback() {
-    var n, i, a;
+    var i, s, o;
     const t = this.getRootNode();
-    t instanceof ShadowRoot && (h(this, Dt, t.host.closest("vindral-controller")), (n = e(this, Dt)) == null || n.connectListener(this), h(this, ft, (i = this.shadowRoot) == null ? void 0 : i.querySelector("#languages .menu")), h(this, nt, (a = this.shadowRoot) == null ? void 0 : a.querySelector("#text-tracks .menu")), o(this, A, Xs).call(this), o(this, A, js).call(this));
+    t instanceof ShadowRoot && (c(this, ie, t.host.closest("vindral-controller")), (i = e(this, ie)) == null || i.connectListener(this), c(this, _t, (s = this.shadowRoot) == null ? void 0 : s.querySelector("#languages .menu")), c(this, Et, (o = this.shadowRoot) == null ? void 0 : o.querySelector("#text-tracks .menu")), r(this, E, qn).call(this), r(this, E, Xn).call(this), c(this, je, t.host), this.addEventListener("keydown", this));
+  }
+  disconnectedCallback() {
+    this.removeEventListener("keydown", this);
   }
-  attributeChangedCallback(t, n, i) {
-    n !== i && (t === s.LANGUAGES && i && (this.languages = JSON.parse(i)), t === s.TEXT_TRACKS && i && (this.textTracks = JSON.parse(i)), t === s.LANGUAGE && (this.language = i), t === s.TEXT_TRACK && (this.textTrack = i));
+  attributeChangedCallback(t, i, s) {
+    i !== s && (t === n.LANGUAGES && s && (this.languages = JSON.parse(s)), t === n.TEXT_TRACKS && s && (this.textTracks = JSON.parse(s)), t === n.LANGUAGE && (this.language = s), t === n.TEXT_TRACK && (this.textTrack = s));
   }
   set languages(t) {
-    h(this, Te, t), o(this, A, Ni).call(this), o(this, A, jt).call(this);
+    c(this, Ke, t), r(this, E, ds).call(this), r(this, E, ue).call(this);
   }
   set textTracks(t) {
-    h(this, we, t), o(this, A, Li).call(this), o(this, A, Yt).call(this);
+    c(this, qe, t), r(this, E, hs).call(this), r(this, E, pe).call(this);
   }
   set language(t) {
-    h(this, Ie, t), o(this, A, jt).call(this);
+    c(this, Xe, t), r(this, E, ue).call(this);
   }
   set textTrack(t) {
-    h(this, xe, t), o(this, A, Yt).call(this);
+    c(this, Ve, t), r(this, E, pe).call(this);
+  }
+  get keysUsed() {
+    return ["Enter", "Escape", "Tab", " ", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight", "Home", "End"];
+  }
+  focus() {
+    e(this, at) ? e(this, at).focus() : e(this, W) && e(this, W).focus();
   }
 }
-Te = new WeakMap(), we = new WeakMap(), Ie = new WeakMap(), xe = new WeakMap(), gt = new WeakMap(), Y = new WeakMap(), ft = new WeakMap(), nt = new WeakMap(), Dt = new WeakMap(), A = new WeakSet(), Xs = function() {
-  const t = (i) => {
-    i.forEach((a) => {
-      if (a.intersectionRatio !== 1)
-        if (a.intersectionRatio > 0) {
-          const b = this.offsetHeight, m = a.intersectionRatio, E = b * m - 24;
-          this.style.height = `${E}px`;
+Ke = new WeakMap(), qe = new WeakMap(), Xe = new WeakMap(), Ve = new WeakMap(), Q = new WeakMap(), K = new WeakMap(), _t = new WeakMap(), Et = new WeakMap(), ie = new WeakMap(), je = new WeakMap(), at = new WeakMap(), W = new WeakMap(), E = new WeakSet(), qn = function() {
+  const t = (s) => {
+    s.forEach((o) => {
+      if (o.intersectionRatio !== 1)
+        if (o.intersectionRatio > 0) {
+          const p = this.offsetHeight, u = o.intersectionRatio, g = p * u - 24;
+          this.style.height = `${g}px`;
         } else
           this.style.height = "auto";
     });
   };
   new IntersectionObserver(t, {
-    root: e(this, Dt),
+    root: e(this, ie),
     // The parent element to use as the viewport
     threshold: 0
     // 0 means any intersection is enough to be considered "inside"
   }).observe(this);
-}, js = function() {
-  e(this, ft) && (o(this, A, Ni).call(this), o(this, A, jt).call(this)), e(this, nt) && (o(this, A, Li).call(this), o(this, A, Yt).call(this));
-}, Li = function() {
-  e(this, nt).innerHTML = "", h(this, Y, []);
-  const t = o(this, A, $e).call(this, "off", "textTrack", void 0);
-  e(this, nt).appendChild(t), e(this, Y).push({ element: t, value: void 0 }), e(this, we).forEach((n) => {
-    const i = o(this, A, $e).call(this, n, "textTrack", n);
-    e(this, nt).appendChild(i), e(this, Y).push({ element: i, value: n });
-  }), o(this, A, Yt).call(this);
-}, Ni = function() {
-  e(this, ft).innerHTML = "", h(this, gt, []), e(this, Te).forEach((t) => {
-    const n = o(this, A, $e).call(this, t, "language", t);
-    e(this, ft).appendChild(n), e(this, gt).push({ element: n, value: t });
-  }), o(this, A, jt).call(this);
-}, $e = function(t, n, i) {
-  const a = document.createElement("div");
-  return a.setAttribute("role", "menuitem"), a.textContent = t, a.addEventListener("click", () => o(this, A, Ys).call(this, i, n)), a;
-}, jt = function() {
-  const t = e(this, gt).find((i) => i.element.getAttribute("aria-selected") === "true");
-  t && t.element.removeAttribute("aria-selected");
-  const n = e(this, gt).find((i) => i.value === e(this, Ie));
-  n == null || n.element.setAttribute("aria-selected", "true");
-}, Yt = function() {
-  const t = e(this, Y).find((i) => i.element.getAttribute("aria-selected") === "true");
-  t && t.element.removeAttribute("aria-selected");
-  const n = e(this, Y).find((i) => i.value === e(this, xe));
-  if (n)
-    n.element.setAttribute("aria-selected", "true");
+}, Xn = function() {
+  e(this, _t) && (r(this, E, ds).call(this), r(this, E, ue).call(this)), e(this, Et) && (r(this, E, hs).call(this), r(this, E, pe).call(this));
+}, hs = function() {
+  e(this, Et).innerHTML = "", c(this, K, []);
+  const t = r(this, E, vi).call(this, "Off", "textTrack", void 0);
+  e(this, Et).appendChild(t), e(this, K).push({ element: t, value: void 0 }), e(this, qe).forEach((i) => {
+    const s = r(this, E, vi).call(this, i, "textTrack", i);
+    e(this, Et).appendChild(s), e(this, K).push({ element: s, value: i });
+  }), r(this, E, pe).call(this);
+}, ds = function() {
+  e(this, _t).innerHTML = "", c(this, Q, []), e(this, Ke).forEach((t) => {
+    const i = r(this, E, vi).call(this, t, "language", t);
+    e(this, _t).appendChild(i), e(this, Q).push({ element: i, value: t });
+  }), r(this, E, ue).call(this);
+}, vi = function(t, i, s) {
+  const o = document.createElement("div");
+  return o.setAttribute("role", "menuitem"), o.textContent = t, o.addEventListener("click", () => r(this, E, Vn).call(this, s, i)), o;
+}, ue = function() {
+  e(this, at) && (e(this, at).removeAttribute("aria-selected"), e(this, at).tabIndex = -1);
+  const t = e(this, Q).find((i) => i.value === e(this, Xe));
+  t && (t.element.setAttribute("aria-selected", "true"), t.element.tabIndex = 0, c(this, at, t.element));
+}, pe = function() {
+  e(this, W) && (e(this, W).removeAttribute("aria-selected"), e(this, W).tabIndex = -1);
+  const t = e(this, K).find((i) => i.value === e(this, Ve));
+  if (t)
+    t.element.setAttribute("aria-selected", "true"), t.element.tabIndex = 0, c(this, W, t.element);
   else {
-    const i = e(this, Y).find((a) => a.value === void 0);
-    i == null || i.element.setAttribute("aria-selected", "true");
+    const i = e(this, K).find((s) => s.value === void 0);
+    i && (i.element.setAttribute("aria-selected", "true"), i.element.tabIndex = 0, c(this, W, i.element));
   }
-}, Ys = function(t, n) {
+}, Vn = function(t, i) {
   this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 }));
-  const i = n === "language" ? v.SET_LANGUAGE : v.SET_TEXT_TRACK;
-  this.dispatchEvent(new CustomEvent(i, { bubbles: !0, composed: !0, detail: t }));
-}, p(Ks, "observedAttributes", [
-  s.LANGUAGES,
-  s.TEXT_TRACKS,
-  s.LANGUAGE,
-  s.TEXT_TRACK
+  const s = i === "language" ? f.SET_LANGUAGE : f.SET_TEXT_TRACK;
+  this.dispatchEvent(new CustomEvent(s, { bubbles: !0, composed: !0, detail: t }));
+}, jn = function(t) {
+  var u, v, g;
+  const { key: i, ctrlKey: s, altKey: o, metaKey: p } = t;
+  s || o || p || this.keysUsed.includes(i) && (t.preventDefault(), t.stopPropagation(), i === "Tab" || i === "Escape" ? (u = e(this, je)) == null || u.hide() : i === "Enter" || i === " " ? (g = (v = r(this, E, us).call(this)) == null ? void 0 : v.element) == null || g.click() : r(this, E, Yn).call(this, t));
+}, Yn = function(t) {
+  var g;
+  const { key: i } = t, s = [...e(this, Q), ...e(this, K)], o = (g = r(this, E, us).call(this)) != null ? g : s[0];
+  if (!o) return;
+  const p = s.indexOf(o);
+  let u = Math.max(0, p);
+  i === "ArrowDown" ? u++ : i === "ArrowUp" ? u-- : i === "ArrowLeft" ? u = r(this, E, cs).call(this, p, "left") : i === "ArrowRight" ? u = r(this, E, cs).call(this, p, "right") : t.key === "Home" ? u = 0 : t.key === "End" && (u = s.length - 1), u < 0 && (u = s.length - 1), u > s.length - 1 && (u = 0);
+  const v = s[u];
+  v && (r(this, E, Jn).call(this, v.value), v.element.focus());
+}, cs = function(t, i) {
+  const s = e(this, Q).length, o = e(this, K).length;
+  return i === "left" ? t < s ? s + o - 1 : t - s - 1 : t >= s ? 0 : t + s;
+}, us = function() {
+  return [...e(this, Q), ...e(this, K)].find((t) => t.element.tabIndex === 0);
+}, Jn = function(t) {
+  for (const i of [...e(this, Q), ...e(this, K)])
+    i.element.tabIndex = i.value === t ? 0 : -1;
+}, m(Kn, "observedAttributes", [
+  n.LANGUAGES,
+  n.TEXT_TRACKS,
+  n.LANGUAGE,
+  n.TEXT_TRACK
 ]);
-const Vs = document.createElement("template"), so = (
+const Qn = document.createElement("template"), go = (
   /* SVG */
   `
 <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  <g fill="none" stroke="currentColor">
@@ -2048,42 +2617,38 @@ const Vs = document.createElement("template"), so = (
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2" />
 </g></svg>
 `
-), no = (
+), fo = (
   /* SVG */
   `
   <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  <g fill="none" stroke="currentColor">
   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" /></svg>
 `
 );
-Vs.innerHTML = /* HTML */
+Qn.innerHTML = /* HTML */
 `
   <style>
     :host {
       display: var(--mute-button-display);
     }
 
-    slot > svg {
-      display: block;
-    }
-
-    :host([${s.MUTED}]) slot[name="unmute"] {
+    :host([${n.MUTED}]) slot[name="unmute"] {
       display: none !important;
     }
 
-    :host(:not([${s.MUTED}])) slot[name="mute"] {
+    :host(:not([${n.MUTED}])) slot[name="mute"] {
       display: none !important;
     }
   </style>
 
   <slot name="icon">
-    <slot name="mute">${so}</slot>
-    <slot name="unmute">${no}</slot>
+    <slot name="mute">${go}</slot>
+    <slot name="unmute">${fo}</slot>
   </slot>
 `;
-const se = class se extends B {
+const ye = class ye extends tt {
   constructor() {
-    var r;
-    super(), (r = this.shadowRoot) == null || r.appendChild(Vs.content.cloneNode(!0));
+    var a;
+    super(), (a = this.shadowRoot) == null || a.appendChild(Qn.content.cloneNode(!0));
   }
   connectedCallback() {
     super.connectedCallback(), this.setAttribute("aria-label", this.muted ? "UnMute" : "Mute");
@@ -2091,45 +2656,45 @@ const se = class se extends B {
   disconnectedCallback() {
     super.disconnectedCallback();
   }
-  attributeChangedCallback(r, t, n) {
-    super.attributeChangedCallback(r, t, n), r === s.MUTED && this.setAttribute("aria-label", this.muted ? "UnMute" : "Mute");
+  attributeChangedCallback(a, t, i) {
+    super.attributeChangedCallback(a, t, i), a === n.MUTED && this.setAttribute("aria-label", this.muted ? "UnMute" : "Mute");
   }
-  set muted(r) {
-    r ? this.setAttribute(s.MUTED, "") : this.removeAttribute(s.MUTED);
+  set muted(a) {
+    a ? this.setAttribute(n.MUTED, "") : this.removeAttribute(n.MUTED);
   }
   get muted() {
-    return this.hasAttribute(s.MUTED);
+    return this.hasAttribute(n.MUTED);
   }
-  handleClick(r) {
-    const t = this.muted ? v.UNMUTE : v.MUTE;
+  handleClick(a) {
+    const t = this.muted ? f.UNMUTE : f.MUTE;
     this.dispatchEvent(new CustomEvent(t, { bubbles: !0, composed: !0 }));
   }
 };
-p(se, "observedAttributes", [..._(se, se, "observedAttributes"), s.MUTED]);
-let Si = se;
-const Js = document.createElement("template"), oo = (
+m(ye, "observedAttributes", [...q(ye, ye, "observedAttributes"), n.MUTED]);
+let ps = ye;
+const Wn = document.createElement("template"), Eo = (
   /* SVG */
   `
     <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>
 `
 );
-Js.innerHTML = /* HTML */
+Wn.innerHTML = /* HTML */
 `
   <style>
     :host {
       display: var(--pip-button-display);
     }
 
-    slot > svg {
-      display: block;
+    :host(:not([${n.PIP_AVAILABLE}])) {
+      display: none !important;
     }
   </style>
-  <slot name="icon">${oo}</slot>
+  <slot name="icon">${Eo}</slot>
 `;
-const ne = class ne extends B {
+const ke = class ke extends tt {
   constructor() {
-    var r;
-    super(), (r = this.shadowRoot) == null || r.appendChild(Js.content.cloneNode(!0));
+    var a;
+    super(), (a = this.shadowRoot) == null || a.appendChild(Wn.content.cloneNode(!0));
   }
   connectedCallback() {
     super.connectedCallback(), this.setAttribute(
@@ -2140,65 +2705,61 @@ const ne = class ne extends B {
   disconnectedCallback() {
     super.disconnectedCallback();
   }
-  attributeChangedCallback(r, t, n) {
-    super.attributeChangedCallback(r, t, n), r === s.PICTURE_IN_PICTURE && this.setAttribute(
+  attributeChangedCallback(a, t, i) {
+    super.attributeChangedCallback(a, t, i), a === n.IS_PIP && this.setAttribute(
       "aria-label",
       this.isPictureInPictureActive ? "Exit picture in picture" : "Enter picture in picture"
     );
   }
-  set isPictureInPictureActive(r) {
-    r ? this.setAttribute(s.PICTURE_IN_PICTURE, "") : this.removeAttribute(s.PICTURE_IN_PICTURE);
+  set isPictureInPictureActive(a) {
+    a ? this.setAttribute(n.IS_PIP, "") : this.removeAttribute(n.IS_PIP);
   }
   get isPictureInPictureActive() {
-    return this.hasAttribute(s.PICTURE_IN_PICTURE);
+    return this.hasAttribute(n.IS_PIP);
   }
-  handleClick(r) {
-    const t = this.isPictureInPictureActive ? v.EXIT_PIP : v.ENTER_PIP;
+  handleClick(a) {
+    const t = this.isPictureInPictureActive ? f.EXIT_PIP : f.ENTER_PIP;
     this.dispatchEvent(new CustomEvent(t, { bubbles: !0, composed: !0 }));
   }
 };
-p(ne, "observedAttributes", [..._(ne, ne, "observedAttributes"), s.PICTURE_IN_PICTURE]);
-let Ri = ne;
-const Ws = document.createElement("template"), ro = (
+m(ke, "observedAttributes", [...q(ke, ke, "observedAttributes"), n.IS_PIP, n.PIP_AVAILABLE]);
+let bs = ke;
+const Zn = document.createElement("template"), Ao = (
   /* SVG */
   `
   <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>
 `
-), ao = (
+), yo = (
   /* SVG */
   `
   <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="M9 4h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h2a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2z" /><path d="M17 4h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h2a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2z" /></svg>
 `
 );
-Ws.innerHTML = /* HTML */
+Zn.innerHTML = /* HTML */
 `
   <style>
     :host {
       display: var(--play-button-display);
     }
 
-    slot > svg {
-      display: block;
-    }
-
-    :host([${s.PAUSED}]) slot[name="pause"] {
+    :host([${n.PAUSED}]) slot[name="pause"] {
       display: none !important;
     }
 
-    :host(:not([${s.PAUSED}])) slot[name="play"] {
+    :host(:not([${n.PAUSED}])) slot[name="play"] {
       display: none !important;
     }
   </style>
 
   <slot name="icon">
-    <slot name="play">${ro}</slot>
-    <slot name="pause">${ao}</slot>
+    <slot name="play">${Ao}</slot>
+    <slot name="pause">${yo}</slot>
   </slot>
 `;
-const oe = class oe extends B {
+const we = class we extends tt {
   constructor() {
-    var r;
-    super(), (r = this.shadowRoot) == null || r.appendChild(Ws.content.cloneNode(!0));
+    var a;
+    super(), (a = this.shadowRoot) == null || a.appendChild(Zn.content.cloneNode(!0));
   }
   connectedCallback() {
     super.connectedCallback(), this.setAttribute("aria-label", this.paused ? "Play" : "Pause");
@@ -2206,81 +2767,82 @@ const oe = class oe extends B {
   disconnectedCallback() {
     super.disconnectedCallback();
   }
-  attributeChangedCallback(r, t, n) {
-    super.attributeChangedCallback(r, t, n), r === s.PAUSED && this.setAttribute("aria-label", this.paused ? "Play" : "Pause");
+  attributeChangedCallback(a, t, i) {
+    super.attributeChangedCallback(a, t, i), a === n.PAUSED && this.setAttribute("aria-label", this.paused ? "Play" : "Pause");
   }
-  set paused(r) {
-    r ? this.setAttribute(s.PAUSED, "") : this.removeAttribute(s.PAUSED);
+  set paused(a) {
+    a ? this.setAttribute(n.PAUSED, "") : this.removeAttribute(n.PAUSED);
   }
   get paused() {
-    return this.hasAttribute(s.PAUSED);
+    return this.hasAttribute(n.PAUSED);
   }
-  handleClick(r) {
-    const t = this.paused ? v.PLAY : v.PAUSE;
+  handleClick(a) {
+    const t = this.paused ? f.PLAY : f.PAUSE;
     this.dispatchEvent(new CustomEvent(t, { bubbles: !0, composed: !0 }));
   }
 };
-p(oe, "observedAttributes", [..._(oe, oe, "observedAttributes"), s.PAUSED]);
-let Ui = oe;
-const Jt = {
+m(we, "observedAttributes", [...q(we, we, "observedAttributes"), n.PAUSED]);
+let ms = we;
+const X = {
   TITLE: "title",
-  OFFLINE: "offline"
-}, lo = Object.values(Jt);
-var Le, Ft, ot, Et, rt, at, V, R, _i, Qs, Pi, Mi;
-class co extends ri {
+  OFFLINE: "offline",
+  REFRESH_POSTER_ENABLED: "refresh-poster-enabled",
+  STREAM_POLL_ENABLED: "stream-poll-enabled"
+}, ko = Object.values(X);
+var Ye, se, At, Pt, yt, kt, lt, H, vs, tr, gs, fs;
+class wo extends li {
   constructor(t) {
     super();
-    l(this, R);
-    l(this, Le);
-    l(this, Ft);
-    l(this, ot, !1);
-    l(this, Et, !1);
-    l(this, rt, !0);
-    l(this, at, null);
-    l(this, V, null);
-    h(this, Ft, t), h(this, Le, new qn({
+    l(this, H);
+    l(this, Ye);
+    l(this, se);
+    l(this, At, !1);
+    l(this, Pt, !1);
+    l(this, yt, !0);
+    l(this, kt, null);
+    l(this, lt, null);
+    c(this, se, t), c(this, Ye, new to({
       publicEndpoint: t.url,
       tokenFactory: () => t.authenticationToken
     }));
   }
   start(t = 5e3) {
-    e(this, V) && clearInterval(e(this, V)), h(this, ot, !1), h(this, Et, !1), o(this, R, Mi).call(this), o(this, R, _i).call(this), h(this, V, window.setInterval(() => {
-      !e(this, Et) && !e(this, Ft).infiniteReconnect && !e(this, at) && e(this, rt) && h(this, at, window.setTimeout(() => o(this, R, Qs).call(this), 5 * 60 * 1e3)), !e(this, Et) && e(this, rt) && o(this, R, _i).call(this);
+    e(this, lt) && clearInterval(e(this, lt)), c(this, At, !1), c(this, Pt, !1), r(this, H, fs).call(this), r(this, H, vs).call(this), c(this, lt, window.setInterval(() => {
+      !e(this, Pt) && !e(this, se).infiniteReconnect && !e(this, kt) && e(this, yt) && c(this, kt, window.setTimeout(() => r(this, H, tr).call(this), 5 * 60 * 1e3)), !e(this, Pt) && e(this, yt) && r(this, H, vs).call(this);
     }, t));
   }
   stop() {
-    o(this, R, Pi).call(this), e(this, V) && (window.clearInterval(e(this, V)), h(this, V, null));
+    r(this, H, gs).call(this), e(this, lt) && (window.clearInterval(e(this, lt)), c(this, lt, null));
   }
 }
-Le = new WeakMap(), Ft = new WeakMap(), ot = new WeakMap(), Et = new WeakMap(), rt = new WeakMap(), at = new WeakMap(), V = new WeakMap(), R = new WeakSet(), _i = function() {
-  return P(this, null, function* () {
-    var i;
-    if (e(this, ot))
+Ye = new WeakMap(), se = new WeakMap(), At = new WeakMap(), Pt = new WeakMap(), yt = new WeakMap(), kt = new WeakMap(), lt = new WeakMap(), H = new WeakSet(), vs = function() {
+  return G(this, null, function* () {
+    if (e(this, At))
       return;
-    h(this, ot, !0);
-    let t = "Stream is offline", n = "Please stand by";
+    c(this, At, !0);
+    let t = "Stream is offline", i = "Please stand by";
     try {
-      const a = yield e(this, Le).getChannel(e(this, Ft).channelId);
-      if (a.isLive) {
-        h(this, Et, !0), o(this, R, Mi).call(this), this.emit("live", a), h(this, ot, !1);
+      const s = yield e(this, Ye).getChannel(e(this, se).channelId);
+      if (s.isLive) {
+        c(this, Pt, !0), r(this, H, fs).call(this), this.emit("live", s), c(this, At, !1);
         return;
       }
-    } catch (a) {
-      a.status === 403 && (t = "Forbidden", n = (i = a.message) != null ? i : "You do not have permission to view this stream");
+    } catch (s) {
+      eo(s) && (s.status === 403 || s.status === 401) && (t = "Forbidden", i = "You do not have permission to view this stream");
     }
-    e(this, rt) && this.emit("error", { title: t, message: n }), h(this, ot, !1);
+    e(this, yt) && this.emit("error", { title: t, message: i }), c(this, At, !1);
   });
-}, Qs = function() {
-  this.stop(), h(this, rt, !1), this.emit("timeout");
-}, Pi = function() {
-  e(this, at) && (window.clearTimeout(e(this, at)), h(this, at, null));
-}, Mi = function() {
-  o(this, R, Pi).call(this), h(this, rt, !0);
+}, tr = function() {
+  this.stop(), c(this, yt, !1), this.emit("timeout");
+}, gs = function() {
+  e(this, kt) && (window.clearTimeout(e(this, kt)), c(this, kt, null));
+}, fs = function() {
+  r(this, H, gs).call(this), c(this, yt, !0);
 };
-const ho = new RegExp(
+const Io = new RegExp(
   "/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"
-), uo = navigator.userAgent.toLowerCase(), po = ho.test(uo), bo = (d) => ce.observedAttributes.includes(d), Zs = (
+), Co = navigator.userAgent.toLowerCase(), Lo = Io.test(Co), To = (d) => Le.observedAttributes.includes(d), er = (
   /* HTML */
   `
   <style>
@@ -2292,7 +2854,7 @@ const ho = new RegExp(
       display: flex;
       justify-content: center;
 
-      --vindral-volume-range-display: ${po ? "none" : "flex"};
+      --vindral-volume-range-display: ${Lo ? "none" : "flex"};
       --vindral-airplay-button-display: none;
       --vindral-play-overlay-display: none;
       --vindral-grid-item-offline-display: none;
@@ -2307,6 +2869,7 @@ const ho = new RegExp(
         --vindral-volume-range-display: none;
         --vindral-control-padding: 0px;
         --vindral-button-padding: 4px;
+        --vindral-play-overlay-icon-size: 40px;
       }
 
       vindral-control-bar[slot="top-bar"] {
@@ -2320,45 +2883,46 @@ const ho = new RegExp(
       }
     }
 
-    :host([${Jt.OFFLINE}]) {
+    :host([${X.OFFLINE}]) {
       aspect-ratio: 16 / 9;
       vindral-controller {
         --vindral-ui-display: none;
+        --vindral-play-overlay-display: none;
       }
     }
 
-    :host([${s.AIRPLAY_ENABLED}="false"]) {
+    :host([${n.AIRPLAY_ENABLED}="false"]) {
       --vindral-airplay-button-display: none;
     }
 
-    :host([${s.CAST_ENABLED}="false"]) {
+    :host([${n.CAST_ENABLED}="false"]) {
       --vindral-cast-button-display: none;
     }
 
-    :host([${s.FULLSCREEN_ENABLED}="false"]) {
+    :host([${n.FULLSCREEN_ENABLED}="false"]) {
       --vindral-fullscreen-button-display: none;
     }
 
-    :host([${s.PIP_ENABLED}="false"]) {
+    :host([${n.PIP_ENABLED}="false"]) {
       --vindral-pip-button-display: none;
     }
 
-    :host(:not([${s.CHANNEL_GROUP_ID}])) vindral-scroll-overlay {
+    :host(:not([${n.CHANNEL_GROUP_ID}])) vindral-scroll-overlay {
       display: none;
     }
 
-    :host([${s.MEDIA}="video"]) vindral-mute-button,
-    :host([${s.MEDIA}="video"]) vindral-volume-range {
+    :host([${n.MEDIA}="video"]) vindral-mute-button,
+    :host([${n.MEDIA}="video"]) vindral-volume-range {
       display: none;
     }
   </style>
 `
-), mo = (
+), xo = (
   /* HTML */
   `
-  ${Zs}
+  ${er}
 
-  <vindral-controller auto-instance-enabled="false">
+  <vindral-controller>
     <vindral-control-bar slot="top-bar">
       <vindral-rendition-levels-menu list-position="bottom"></vindral-rendition-levels-menu>
       <vindral-cast-button></vindral-cast-button>
@@ -2376,23 +2940,22 @@ const ho = new RegExp(
       <vindral-airplay-button slot="right"></vindral-airplay-button>
       <vindral-fullscreen-button slot="right"></vindral-fullscreen-button>
     </vindral-control-bar>
-    <vindral-scroll-overlay slot="overlay-interactive">
+    <vindral-scroll-overlay slot="overlay">
       <vindral-channel-grid id="listbox" part="listbox"></vindral-channel-grid>
     </vindral-scroll-overlay>
     <vindral-cast-overlay slot="overlay"></vindral-cast-overlay>
     <vindral-buffering-overlay slot="overlay"></vindral-buffering-overlay>
     <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>
-
-    <slot slot="overlay"></slot>
   </vindral-controller>
 `
-), vo = (
+), So = (
   /* HTML */
   `
-  ${Zs}
+  ${er}
 
   <style>
     #control-bar {
@@ -2403,7 +2966,7 @@ const ho = new RegExp(
     }
   </style>
 
-  <vindral-controller auto-instance-enabled="false">
+  <vindral-controller>
     <div id="control-bar" slot="middle">
       <vindral-play-button></vindral-play-button>
       <vindral-mute-button></vindral-mute-button>
@@ -2415,82 +2978,203 @@ const ho = new RegExp(
     <vindral-message id="vindral-message" slot="overlay" hidden></vindral-message>
   </vindral-controller>
 `
-), ss = document.createElement("template");
-var J, G, F, lt, $, Ne, ii, S, Di, en, sn, ze;
-class tn extends HTMLElement {
+), Bs = document.createElement("template");
+var Z, R, M, ht, dt, Pi, Je, Mi, S, Es, sr, Qe, gi, xt;
+class ir extends HTMLElement {
   constructor() {
     super();
     l(this, S);
-    l(this, J);
-    l(this, G);
-    l(this, F);
-    l(this, lt);
-    l(this, $);
-    l(this, Ne, () => {
+    l(this, Z);
+    l(this, R);
+    l(this, M);
+    l(this, ht);
+    l(this, dt);
+    l(this, Pi, () => {
       Array.from(this.attributes).forEach((t) => {
-        bo(t.name) && e(this, G).setAttribute(t.name, t.value);
+        e(this, Je).call(this, t.name, t.value);
       });
     });
-    l(this, ii, () => os(this.getAttribute(s.MEDIA)) === "audio" ? vo : mo);
-    h(this, J, this.attachShadow({ mode: "open" })), o(this, S, Di).call(this), h(this, G, e(this, J).querySelector("vindral-controller")), h(this, F, e(this, J).querySelector("#vindral-message")), h(this, lt, e(this, J).querySelector("#play-overlay"));
+    l(this, Je, (t, i) => {
+      To(t) && (L(i) ? e(this, R).setAttribute(t, i) : e(this, R).removeAttribute(t));
+    });
+    l(this, Mi, () => qs(this.getAttribute(n.MEDIA)) === "audio" ? So : xo);
+    l(this, Qe, () => {
+      const t = e(this, R).instance;
+      t && (t.on("is live", (i) => {
+        i ? (this.removeAttribute(X.OFFLINE), e(this, M).setAttribute("hidden", "")) : (this.setAttribute(X.OFFLINE, ""), e(this, M).removeAttribute("hidden"), r(this, S, xt).call(this, "Stream is offline", "Please stand by"));
+      }), t.on("channels", (i) => {
+        const s = e(this, R).getAttribute("channel-id"), o = i.find((p) => p.channelId === s);
+        o && r(this, S, gi).call(this, o.name);
+      }), t.on("channel switch", ({ channelId: i }) => {
+        const s = t.channels.find((o) => o.channelId === i);
+        s && r(this, S, gi).call(this, s.name);
+      }), t.on("error", (i) => {
+        let s = "Stream is offline", o = "Please stand by";
+        i.isFatal() ? (i.code() === Jr ? (s = "Forbidden", o = "You do not have permission to view this stream", r(this, S, xt).call(this, s, o)) : r(this, S, xt).call(this, "An error occurred", i.message), e(this, ht).removeAttribute("hidden"), this.setAttribute(X.OFFLINE, "")) : i.code() === Qr && r(this, S, xt).call(this, s, o);
+      }));
+    });
+    c(this, Z, this.attachShadow({ mode: "open" })), r(this, S, Es).call(this), c(this, R, e(this, Z).querySelector("vindral-controller")), c(this, M, e(this, Z).querySelector("#vindral-message")), c(this, ht, e(this, Z).querySelector("#play-overlay"));
   }
   connectedCallback() {
-    this.setAttribute(Jt.OFFLINE, ""), e(this, G).addEventListener("vindral-instance-ready", () => o(this, S, sn).call(this)), o(this, S, en).call(this);
+    this.setAttribute(X.OFFLINE, ""), e(this, R).addEventListener("vindral-instance-ready", e(this, Qe)), r(this, S, sr).call(this);
   }
   disconnectedCallback() {
     var t;
-    (t = e(this, $)) == null || t.stop();
-  }
-  attributeChangedCallback(t, n, i) {
-    n !== i && (t === s.MEDIA ? o(this, S, Di).call(this) : e(this, Ne).call(this));
+    e(this, R).removeEventListener("vindral-instance-ready", e(this, Qe)), (t = e(this, dt)) == null || t.stop();
+  }
+  attributeChangedCallback(t, i, s) {
+    if (i !== s)
+      if (t === n.MEDIA)
+        r(this, S, Es).call(this);
+      else if (t === X.REFRESH_POSTER_ENABLED) {
+        const o = e(this, Z).querySelector("vindral-poster-overlay");
+        o && (o.disabled = x(this.getAttribute(X.REFRESH_POSTER_ENABLED), !1) === !1);
+      } else
+        e(this, Je).call(this, t, s);
   }
   get instance() {
-    return e(this, G).instance;
+    return e(this, R).instance;
+  }
+  get airPlay() {
+    return e(this, R).airPlay;
   }
 }
-J = new WeakMap(), G = new WeakMap(), F = new WeakMap(), lt = new WeakMap(), $ = new WeakMap(), Ne = new WeakMap(), ii = new WeakMap(), S = new WeakSet(), Di = function() {
-  ss.innerHTML = e(this, ii).call(this);
-  const t = ss.content.cloneNode(!0);
-  h(this, G, t.querySelector("vindral-controller")), h(this, F, t.querySelector("#vindral-message")), h(this, lt, t.querySelector("#play-overlay")), e(this, Ne).call(this), e(this, J).innerHTML = "", e(this, J).appendChild(t);
-}, en = function() {
-  var f;
-  const t = this.getAttribute("url"), n = this.getAttribute("channel-id"), i = (f = this.getAttribute("authentication-token")) != null ? f : void 0, a = this.hasAttribute("infinite-reconnect"), b = w(this.getAttribute("title"), !0), m = rs(this.getAttribute("poster"));
-  if (!t || !n) {
-    this.setAttribute(Jt.OFFLINE, ""), o(this, S, ze).call(this, "Invalid options", "Please enter at least a channel id and url to start the stream");
+Z = new WeakMap(), R = new WeakMap(), M = new WeakMap(), ht = new WeakMap(), dt = new WeakMap(), Pi = new WeakMap(), Je = new WeakMap(), Mi = new WeakMap(), S = new WeakSet(), Es = function() {
+  Bs.innerHTML = e(this, Mi).call(this);
+  const t = Bs.content.cloneNode(!0);
+  c(this, R, t.querySelector("vindral-controller")), c(this, M, t.querySelector("#vindral-message")), c(this, ht, t.querySelector("#play-overlay")), this.children.length > 0 && Array.from(this.children).forEach((i) => {
+    e(this, R).appendChild(i);
+  }), e(this, Pi).call(this), e(this, Z).innerHTML = "", e(this, Z).appendChild(t);
+}, sr = function() {
+  var u;
+  if (x(this.getAttribute(X.STREAM_POLL_ENABLED), !0) === !1)
+    return;
+  const t = this.getAttribute("url"), i = this.getAttribute("channel-id"), s = (u = this.getAttribute("authentication-token")) != null ? u : void 0, o = this.hasAttribute("infinite-reconnect"), p = x(this.getAttribute("title"), !1);
+  if (!t || !i) {
+    this.setAttribute(X.OFFLINE, ""), r(this, S, xt).call(this, "Invalid options", "Please enter at least a channel id and url to start the stream");
     return;
   }
-  h(this, $, new co({
+  c(this, dt, new wo({
     url: t,
-    channelId: n,
-    authenticationToken: i,
-    infiniteReconnect: a
-  })), e(this, $).on("live", (E) => {
-    e(this, G).connect(), this.removeAttribute("offline"), e(this, F).setAttribute("hidden", ""), b && jn({
-      title: E.name,
-      poster: typeof m == "string" ? m : void 0
-    });
-  }), e(this, $).on("timeout", () => {
-    e(this, F).setAttribute("hidden", ""), e(this, lt).removeAttribute("hidden");
-  }), e(this, $).on("error", (E) => {
-    this.setAttribute(Jt.OFFLINE, ""), o(this, S, ze).call(this, E.title, E.message);
-  }), e(this, lt).addEventListener("click", () => {
-    var E;
-    (E = e(this, $)) == null || E.start(), e(this, lt).setAttribute("hidden", "");
-  }), e(this, $).start();
-}, sn = function() {
-  var t;
-  (t = e(this, G).instance) == null || t.on("error", (n) => {
-    if (n.isFatal()) {
-      let i = "Stream is offline", a = "Please stand by";
-      n.code() === "access_forbidden" && (i = "Forbidden", a = "You do not have permission to view this stream"), o(this, S, ze).call(this, i, a);
-    }
+    channelId: i,
+    authenticationToken: s,
+    infiniteReconnect: o
+  })), e(this, dt).on("live", (v) => {
+    e(this, R).connect(), this.removeAttribute("offline"), e(this, M).setAttribute("hidden", ""), p && r(this, S, gi).call(this, v.name);
+  }), e(this, dt).on("timeout", () => {
+    e(this, M).setAttribute("hidden", ""), e(this, ht).removeAttribute("hidden");
+  }), e(this, dt).on("error", (v) => {
+    this.setAttribute(X.OFFLINE, ""), r(this, S, xt).call(this, v.title, v.message);
+  }), e(this, ht).addEventListener("click", () => {
+    e(this, R).connect(), e(this, ht).setAttribute("hidden", ""), e(this, M).setAttribute("hidden", ""), e(this, R).focus();
+  }), this.hasAttribute("paused") && e(this, dt).start();
+}, Qe = new WeakMap(), gi = function(t) {
+  if (!x(this.getAttribute("title"), !0)) return;
+  const i = Xs(this.getAttribute("poster"));
+  no({
+    title: t,
+    poster: typeof i == "string" ? i : void 0
   });
-}, ze = function(t, n) {
-  e(this, F).setAttribute("title", t), e(this, F).setAttribute("description", n);
-  const i = this.getAttribute("poster");
-  i && e(this, F).setAttribute("background-image", i), e(this, F).removeAttribute("hidden");
-}, p(tn, "observedAttributes", [...ce.observedAttributes, ...lo]);
-const go = (
+}, xt = function(t, i) {
+  e(this, M).setAttribute("title", t), e(this, M).setAttribute("description", i);
+  const s = this.getAttribute("poster");
+  s && e(this, M).setAttribute("background-image", s), e(this, M).removeAttribute("hidden");
+}, m(ir, "observedAttributes", [...Le.observedAttributes, ...ko]);
+const nr = document.createElement("template");
+nr.innerHTML = /* HTML */
+`
+  <style>
+    :host {
+      display: var(--poster-overlay-display);
+      position: absolute;
+      top: 0;
+      left: 0;
+      max-width: 100%;
+      max-height: 100%;
+      min-width: 100%;
+      min-height: 100%;
+      background-repeat: no-repeat;
+      background-position: 50% 50%;
+      background-size: contain;
+      transition-property: background-image;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 200ms;
+    }
+
+    :host::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(255, 255, 255, 0);
+      transition: background 0.2s ease;
+    }
+
+    :host(:not([${n.PAUSED}])) {
+      display: none;
+    }
+  </style>
+`;
+const No = 6e3;
+var ne, wt, Mt, re, j, or, fi, As, Di;
+class rr extends HTMLElement {
+  constructor() {
+    super();
+    l(this, j);
+    l(this, ne, null);
+    l(this, wt, null);
+    l(this, Mt, null);
+    l(this, re, () => {
+      !document.hidden && this.hasAttribute("intersecting") && this.paused && !this.disabled ? r(this, j, or).call(this) : r(this, j, fi).call(this);
+    });
+    l(this, Di, (t) => {
+      t.forEach((i) => {
+        i.isIntersecting ? this.setAttribute("intersecting", "") : this.removeAttribute("intersecting");
+      });
+    });
+    this.attachShadow({ mode: "open" }).appendChild(nr.content.cloneNode(!0));
+  }
+  connectedCallback() {
+    var t;
+    c(this, ne, this.closest("vindral-controller")), (t = e(this, ne)) == null || t.connectListener(this), document.addEventListener("visibilitychange", e(this, re)), c(this, Mt, new IntersectionObserver(e(this, Di))), e(this, Mt).observe(this);
+  }
+  disconnectedCallback() {
+    var t, i;
+    (t = e(this, ne)) == null || t.disconnectListener(this), document.removeEventListener("visibilitychange", e(this, re)), (i = e(this, Mt)) == null || i.disconnect(), c(this, Mt, null), r(this, j, fi).call(this);
+  }
+  attributeChangedCallback(t, i, s) {
+    i !== s && (t === n.POSTER_SRC && this.paused && !this.disabled && r(this, j, As).call(this), (t === n.PAUSED || t === "disabled" || t === "intersecting") && e(this, re).call(this));
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  get posterSrc() {
+    return this.getAttribute(n.POSTER_SRC);
+  }
+  get paused() {
+    return this.hasAttribute(n.PAUSED);
+  }
+}
+ne = new WeakMap(), wt = new WeakMap(), Mt = new WeakMap(), re = new WeakMap(), j = new WeakSet(), or = function() {
+  e(this, wt) === null && (r(this, j, fi).call(this), c(this, wt, window.setInterval(() => r(this, j, As).call(this), No)));
+}, fi = function() {
+  e(this, wt) !== null && (clearInterval(e(this, wt)), c(this, wt, null)), this.style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAQAAACRI2S5AAAAEElEQVR42mNkIAAYRxWAAQAG9gAKqv6+AwAAAABJRU5ErkJggg==')";
+}, As = function() {
+  if (!this.posterSrc) return;
+  const t = new URL(this.posterSrc), i = new Image();
+  t.searchParams.set("t", Date.now().toString()), i.src = t.toString(), i.onload = () => this.style.backgroundImage = `url(${t.toString()})`;
+}, Di = new WeakMap(), m(rr, "observedAttributes", [
+  n.POSTER_SRC,
+  n.PAUSED,
+  "disabled",
+  "intersecting"
+]);
+const Ro = (
   /* SVG */
   `
 <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">
@@ -2498,8 +3182,8 @@ const go = (
   <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" />
 </svg>
 `
-), nn = document.createElement("template");
-nn.innerHTML = /* HTML */
+), ar = document.createElement("template");
+ar.innerHTML = /* HTML */
 `
   <style>
     :host {
@@ -2507,38 +3191,38 @@ nn.innerHTML = /* HTML */
     }
   </style>
 
-  <slot name="button">${go}</slot>
+  <slot name="button">${Ro}</slot>
   <slot name="listbox" hidden>
     <vindral-rendition-levels-menu-list id="listbox" part="listbox"></vindral-rendition-levels-menu-list>
   </slot>
 `;
-var Se, Hi;
-const re = class re extends Yi {
+var We, ks;
+const Ie = class Ie extends Us {
   constructor() {
-    var t, n, i, a;
+    var t, i, s, o;
     super();
-    l(this, Se);
-    (t = this.shadowRoot) == null || t.appendChild(nn.content.cloneNode(!0)), this.button = (n = this.shadowRoot) == null ? void 0 : n.querySelector("slot[name=button]"), this.listbox = (i = this.shadowRoot) == null ? void 0 : i.querySelector("[part=listbox]"), this.listboxSlot = (a = this.shadowRoot) == null ? void 0 : a.querySelector("slot[name=listbox]");
+    l(this, We);
+    (t = this.shadowRoot) == null || t.appendChild(ar.content.cloneNode(!0)), this.button = (i = this.shadowRoot) == null ? void 0 : i.querySelector("slot[name=button]"), this.listbox = (s = this.shadowRoot) == null ? void 0 : s.querySelector("[part=listbox]"), this.listboxSlot = (o = this.shadowRoot) == null ? void 0 : o.querySelector("slot[name=listbox]");
   }
   connectedCallback() {
-    super.connectedCallback(), o(this, Se, Hi).call(this);
+    super.connectedCallback(), r(this, We, ks).call(this), this.setAttribute("aria-label", "Rendition levels");
   }
-  attributeChangedCallback(t, n, i) {
-    super.attributeChangedCallback(t, n, i), t === s.RENDITION_LEVELS && o(this, Se, Hi).call(this);
+  attributeChangedCallback(t, i, s) {
+    super.attributeChangedCallback(t, i, s), t === n.RENDITION_LEVELS && r(this, We, ks).call(this);
   }
 };
-Se = new WeakSet(), Hi = function() {
-  const t = this.getAttribute(s.RENDITION_LEVELS);
+We = new WeakSet(), ks = function() {
+  const t = this.getAttribute(n.RENDITION_LEVELS);
   !t || t === "[]" ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
-}, p(re, "observedAttributes", [..._(re, re, "observedAttributes"), s.RENDITION_LEVELS]);
-let Fi = re;
-const on = document.createElement("template"), fo = (
+}, m(Ie, "observedAttributes", [...q(Ie, Ie, "observedAttributes"), n.RENDITION_LEVELS]);
+let ys = Ie;
+const lr = document.createElement("template"), Uo = (
   /* SVG */
   `
   <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="#fff" viewBox="0 0 78.369 78.369" xml:space="preserve"><path d="M78.049 19.015 29.458 67.606a1.094 1.094 0 0 1-1.548 0L.32 40.015a1.094 1.094 0 0 1 0-1.547l6.704-6.704a1.095 1.095 0 0 1 1.548 0l20.113 20.112 41.113-41.113a1.095 1.095 0 0 1 1.548 0l6.703 6.704a1.094 1.094 0 0 1 0 1.548z"/></svg>
 `
 );
-on.innerHTML = /* HTML */
+lr.innerHTML = /* HTML */
 `
   <style>
     :host {
@@ -2611,12 +3295,17 @@ on.innerHTML = /* HTML */
     }
 
     [role="menuitem"][aria-selected="true"]::before {
-      content: url("data:image/svg+xml,${encodeURIComponent(fo)}");
+      content: url("data:image/svg+xml,${encodeURIComponent(Uo)}");
       position: absolute;
       left: calc(var(--padding-3) - var(--padding-1));
       top: calc(50% - 8px);
     }
 
+    [role="menuitem"]:focus-visible {
+      box-shadow: inset 0 0 0 2px var(--fg-strong);
+      outline: 0;
+    }
+
     .menu-item-subtitle {
       font-size: 11px;
       opacity: 0.6;
@@ -2636,94 +3325,131 @@ on.innerHTML = /* HTML */
     <div class="menu"></div>
   </slot>
 `;
-var At, Re, Ht, Ot, Gt, L, an, Oi, ln, Gi, cn;
-class rn extends HTMLElement {
+var Dt, Ze, It, ct, Ot, ti, C, dr, ws, cr, Is, ur, pr, br, Cs, mr;
+class hr extends HTMLElement {
   constructor() {
     super();
-    l(this, L);
-    l(this, At, []);
-    l(this, Re, Number.MAX_SAFE_INTEGER);
-    l(this, Ht, null);
-    l(this, Ot, []);
-    l(this, Gt, null);
-    this.attachShadow({ mode: "open" }).appendChild(on.content.cloneNode(!0));
-  }
-  connectedCallback() {
-    var n;
-    const t = this.getRootNode();
-    t instanceof ShadowRoot && (h(this, Gt, t.host.closest("vindral-controller")), (n = e(this, Gt)) == null || n.connectListener(this), o(this, L, an).call(this), o(this, L, Oi).call(this));
-  }
-  attributeChangedCallback(t, n, i) {
-    n !== i && (t === s.RENDITION_LEVELS && i && (this.list = JSON.parse(i)), t === s.MAX_VIDEO_BITRATE && i && (this.maxVideoBitrate = i ? parseInt(i) : Number.MAX_SAFE_INTEGER));
+    l(this, C);
+    l(this, Dt, []);
+    l(this, Ze, Number.MAX_SAFE_INTEGER);
+    l(this, It, null);
+    l(this, ct, []);
+    l(this, Ot, null);
+    l(this, ti, null);
+    m(this, "handleEvent", (t) => {
+      switch (t.type) {
+        case "keydown":
+          r(this, C, pr).call(this, t);
+          break;
+      }
+    });
+    this.attachShadow({ mode: "open" }).appendChild(lr.content.cloneNode(!0));
+  }
+  connectedCallback() {
+    var i;
+    const t = this.getRootNode();
+    t instanceof ShadowRoot && (c(this, Ot, t.host.closest("vindral-controller")), (i = e(this, Ot)) == null || i.connectListener(this), r(this, C, dr).call(this), r(this, C, ws).call(this), c(this, ti, t.host), this.addEventListener("keydown", this));
+  }
+  disconnectedCallback() {
+    var t;
+    (t = e(this, Ot)) == null || t.disconnectListener(this), this.removeEventListener("keydown", this);
+  }
+  attributeChangedCallback(t, i, s) {
+    i !== s && (t === n.RENDITION_LEVELS && s && (this.list = JSON.parse(s)), t === n.MAX_VIDEO_BITRATE && s && (this.maxVideoBitrate = s ? parseInt(s) : Number.MAX_SAFE_INTEGER));
   }
   set list(t) {
-    h(this, At, t), o(this, L, Oi).call(this);
+    c(this, Dt, t), r(this, C, ws).call(this);
   }
   set maxVideoBitrate(t) {
-    h(this, Re, t), o(this, L, Gi).call(this);
+    c(this, Ze, t), r(this, C, Is).call(this);
+  }
+  get keysUsed() {
+    return ["Enter", "Escape", "Tab", " ", "ArrowDown", "ArrowUp", "Home", "End"];
+  }
+  focus() {
+    var t;
+    (t = e(this, It)) == null || t.focus();
   }
 }
-At = new WeakMap(), Re = new WeakMap(), Ht = new WeakMap(), Ot = new WeakMap(), Gt = new WeakMap(), L = new WeakSet(), an = function() {
-  const t = (i) => {
-    i.forEach((a) => {
-      if (a.intersectionRatio !== 1)
-        if (a.intersectionRatio > 0) {
-          const b = this.offsetHeight, m = a.intersectionRatio, E = b * m - 24;
-          this.style.height = `${E}px`;
+Dt = new WeakMap(), Ze = new WeakMap(), It = new WeakMap(), ct = new WeakMap(), Ot = new WeakMap(), ti = new WeakMap(), C = new WeakSet(), dr = function() {
+  const t = (s) => {
+    s.forEach((o) => {
+      if (o.intersectionRatio !== 1)
+        if (o.intersectionRatio > 0) {
+          const p = this.offsetHeight, u = o.intersectionRatio, g = p * u - 24;
+          this.style.height = `${g}px`;
         } else
           this.style.height = "auto";
     });
   };
   new IntersectionObserver(t, {
-    root: e(this, Gt),
+    root: e(this, Ot),
     // The parent element to use as the viewport
     threshold: 0
     // 0 means any intersection is enough to be considered "inside"
   }).observe(this);
-}, Oi = function() {
-  var n;
-  const t = (n = this.shadowRoot) == null ? void 0 : n.querySelector(".menu");
-  t && (h(this, Ot, []), t.innerHTML = "", e(this, At).sort((i, a) => {
-    var b, m;
-    return (b = i.video) != null && b.bitRate && ((m = a.video) != null && m.bitRate) ? a.video.bitRate - i.video.bitRate : 0;
-  }).forEach((i) => {
-    var f, E, U, ct, dt, q, De;
-    const a = document.createElement("div");
-    a.setAttribute("role", "menuitem"), a.setAttribute("value", String((f = i.video) == null ? void 0 : f.height)), a.classList.add("menu-item");
-    const b = o(this, L, ln).call(this, (E = i.video) == null ? void 0 : E.frameRate);
-    a.textContent = i.video ? Xn(i.video) : "";
-    const m = document.createElement("span");
-    m.classList.add("menu-item-subtitle"), m.textContent = `${Kn(((ct = (U = i.video) == null ? void 0 : U.bitRate) != null ? ct : 0) + ((q = (dt = i.audio) == null ? void 0 : dt.bitRate) != null ? q : 0))}, ${b}p`, a.appendChild(m), a.addEventListener("click", () => o(this, L, cn).call(this, i)), e(this, Ot).push({ el: a, id: ((De = i.video) == null ? void 0 : De.id) || -1 }), t.appendChild(a);
-  }), o(this, L, Gi).call(this));
-}, ln = function(t) {
+}, ws = function() {
+  var i;
+  const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".menu");
+  t && (c(this, ct, []), t.innerHTML = "", e(this, Dt).sort((s, o) => {
+    var p, u;
+    return (p = s.video) != null && p.bitRate && ((u = o.video) != null && u.bitRate) ? o.video.bitRate - s.video.bitRate : 0;
+  }).forEach((s) => {
+    var v, g, P, et, Y, Ct, Lt, Tt;
+    const o = document.createElement("div");
+    o.setAttribute("role", "menuitem"), o.setAttribute("value", String((v = s.video) == null ? void 0 : v.height)), o.classList.add("menu-item"), o.tabIndex = -1;
+    const p = r(this, C, cr).call(this, (g = s.video) == null ? void 0 : g.frameRate);
+    o.textContent = s.video ? so(s.video) : "";
+    const u = document.createElement("span");
+    u.classList.add("menu-item-subtitle"), u.textContent = `${io(((et = (P = s.video) == null ? void 0 : P.bitRate) != null ? et : 0) + ((Ct = (Y = s.audio) == null ? void 0 : Y.bitRate) != null ? Ct : 0))}, ${p}p`, o.appendChild(u), o.addEventListener("click", () => r(this, C, ur).call(this, s)), e(this, ct).push({ el: o, id: (Tt = (Lt = s.video) == null ? void 0 : Lt.id) != null ? Tt : -1 }), t.appendChild(o);
+  }), r(this, C, Is).call(this));
+}, cr = function(t) {
   return t ? t[0] % t[1] === 0 ? (t[0] / t[1]).toString() : (t[0] / t[1]).toFixed(2) : "";
-}, Gi = function() {
-  e(this, Ht) && e(this, Ht).removeAttribute("aria-selected");
-  const t = e(this, At).sort(
-    (i, a) => {
-      var b, m;
-      return (b = i.video) != null && b.bitRate && ((m = a.video) != null && m.bitRate) ? a.video.bitRate - i.video.bitRate : 0;
-    }
-  ), n = e(this, At).filter(
-    (i) => {
-      var a;
-      return ((a = i.video) == null ? void 0 : a.bitRate) && i.video.bitRate <= e(this, Re);
+}, Is = function() {
+  e(this, It) && (e(this, It).removeAttribute("aria-selected"), e(this, It).tabIndex = -1);
+  const t = e(this, Dt).sort(
+    (s, o) => {
+      var p, u;
+      return (p = s.video) != null && p.bitRate && ((u = o.video) != null && u.bitRate) ? o.video.bitRate - s.video.bitRate : 0;
+    }
+  ), i = e(this, Dt).filter(
+    (s) => {
+      var o;
+      return ((o = s.video) == null ? void 0 : o.bitRate) && s.video.bitRate <= e(this, Ze);
     }
   )[0] || t[t.length - 1];
-  if (n) {
-    const i = e(this, Ot).find((a) => {
-      var b;
-      return a.id === ((b = n.video) == null ? void 0 : b.id);
+  if (i) {
+    const s = e(this, ct).find((o) => {
+      var p;
+      return o.id === ((p = i.video) == null ? void 0 : p.id);
     });
-    i && (i.el.setAttribute("aria-selected", "true"), h(this, Ht, i.el));
+    s && (s.el.tabIndex = 0, s.el.setAttribute("aria-selected", "true"), c(this, It, s.el));
   }
-}, cn = function(t) {
+}, ur = function(t) {
   this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 })), this.dispatchEvent(
-    new CustomEvent(v.SET_RENDITION, { bubbles: !0, composed: !0, detail: t })
+    new CustomEvent(f.SET_RENDITION, { bubbles: !0, composed: !0, detail: t })
   );
-}, p(rn, "observedAttributes", [s.RENDITION_LEVELS, s.MAX_VIDEO_BITRATE]);
-const dn = document.createElement("template");
-dn.innerHTML = /* HTML */
+}, pr = function(t) {
+  var u, v, g;
+  const { key: i, ctrlKey: s, altKey: o, metaKey: p } = t;
+  s || o || p || this.keysUsed.includes(i) && (t.preventDefault(), t.stopPropagation(), i === "Tab" || i === "Escape" ? (u = e(this, ti)) == null || u.hide() : i === "Enter" || i === " " ? (g = (v = r(this, C, Cs).call(this)) == null ? void 0 : v.el) == null || g.click() : r(this, C, br).call(this, t));
+}, br = function(t) {
+  var g;
+  const { key: i } = t, s = e(this, ct), o = (g = r(this, C, Cs).call(this)) != null ? g : s[0];
+  if (!o) return;
+  const p = s.indexOf(o);
+  let u = Math.max(0, p);
+  i === "ArrowDown" ? u++ : i === "ArrowUp" ? u-- : t.key === "Home" ? u = 0 : t.key === "End" && (u = s.length - 1), u < 0 && (u = s.length - 1), u > s.length - 1 && (u = 0);
+  const v = s[u];
+  v && (r(this, C, mr).call(this, v.id), v.el.focus());
+}, Cs = function() {
+  return e(this, ct).find((t) => t.el.tabIndex === 0);
+}, mr = function(t) {
+  for (const i of e(this, ct))
+    i.el.tabIndex = i.id === t ? 0 : -1;
+}, m(hr, "observedAttributes", [n.RENDITION_LEVELS, n.MAX_VIDEO_BITRATE]);
+const vr = document.createElement("template");
+vr.innerHTML = /* HTML */
 `
   <style>
     :host {
@@ -2771,6 +3497,7 @@ dn.innerHTML = /* HTML */
       height: calc(100% - var(--scroll-overlay-offset));
       pointer-events: auto;
       scroll-snap-align: start;
+      min-height: 1px;
     }
 
     slot#content {
@@ -2782,7 +3509,7 @@ dn.innerHTML = /* HTML */
       flex-direction: column;
     }
 
-    :host(:not([${s.USER_INTERACTING}])) {
+    :host(:not([${n.USER_INTERACTING}])) {
       overflow: hidden !important;
     }
   </style>
@@ -2790,66 +3517,68 @@ dn.innerHTML = /* HTML */
   <div id="scroll-area"></div>
   <slot id="content"></slot>
 `;
-var W, yt, $t, y, un, pn, bn, si, ni, Be, $i, zi, Bi, qi;
-class hn extends HTMLElement {
+var ut, Ft, oe, ei, I, fr, Er, Ar, Oi, Fi, Ei, Ls, Ts, xs, Ss;
+class gr extends HTMLElement {
   constructor() {
     super();
-    l(this, y);
-    l(this, W, null);
-    l(this, yt, null);
-    l(this, $t, null);
-    p(this, "handleEvent", (t) => {
+    l(this, I);
+    l(this, ut, null);
+    l(this, Ft, null);
+    l(this, oe, null);
+    l(this, ei, 0);
+    m(this, "handleEvent", (t) => {
       switch (t.type) {
         case "touchstart":
-          o(this, y, un).call(this, t);
+          r(this, I, fr).call(this, t);
           break;
         case "touchmove":
-          o(this, y, pn).call(this, t);
+          r(this, I, Er).call(this, t);
           break;
         case "touchend":
-          o(this, y, bn).call(this, t);
+          r(this, I, Ar).call(this, t);
           break;
       }
     });
-    l(this, si, () => {
-      this.scrollTop === 0 ? (this.open = !1, this.removeAttribute("snap-touch"), o(this, y, qi).call(this)) : !this.visible && this.scrollTop > 0 ? o(this, y, Bi).call(this) : (
+    l(this, Oi, () => {
+      this.scrollTop === 0 ? (this.open = !1, this.removeAttribute("snap-touch"), r(this, I, Ss).call(this)) : !this.visible && this.scrollTop > 0 ? r(this, I, xs).call(this) : (
         // fully open
-        !this.hasAttribute("snap-touch") && o(this, y, zi).call(this) && (this.open = !0, this.setAttribute("snap-touch", ""))
+        !this.hasAttribute("snap-touch") && r(this, I, Ts).call(this) && (this.open = !0, this.setAttribute("snap-touch", ""))
       );
     });
-    l(this, ni, () => {
-      if (!o(this, y, Be).call(this)) {
+    l(this, Fi, () => {
+      const t = e(this, ei);
+      if (c(this, ei, this.scrollTop), !r(this, I, Ei).call(this)) {
         this.scrollTop = 0;
         return;
       }
-      this.scrollTop === 0 ? (this.open = !1, o(this, y, qi).call(this)) : !this.visible && this.scrollTop > 0 ? o(this, y, Bi).call(this) : o(this, y, zi).call(this) && (this.open = !0);
+      this.scrollTop === 0 ? (this.open = !1, r(this, I, Ss).call(this)) : !this.visible && this.scrollTop > 0 ? r(this, I, xs).call(this) : r(this, I, Ts).call(this) && t <= this.scrollTop && (this.open = !0);
     });
-    this.attachShadow({ mode: "open" }).appendChild(dn.content.cloneNode(!0));
+    this.attachShadow({ mode: "open" }).appendChild(vr.content.cloneNode(!0));
   }
   connectedCallback() {
-    var n, i, a, b, m, f;
+    var i, s, o, p, u, v;
     const t = this.getRootNode();
     if (t instanceof Document || t instanceof ShadowRoot) {
-      h(this, W, t.querySelector("vindral-controller")), (n = e(this, W)) == null || n.connectListener(this), h(this, yt, (i = this.shadowRoot) == null ? void 0 : i.querySelector("#scroll-area")), (a = e(this, yt)) == null || a.addEventListener("click", () => {
+      c(this, ut, t.querySelector("vindral-controller")), (i = e(this, ut)) == null || i.connectListener(this), c(this, Ft, (s = this.shadowRoot) == null ? void 0 : s.querySelector("#scroll-area")), (o = e(this, Ft)) == null || o.addEventListener("click", () => {
         this.open && (this.open = !1);
       });
-      const E = this.hasAttribute("touch-enabled");
-      if (!zn() || !E) {
-        this.setAttribute("snap", ""), this.addEventListener("scroll", e(this, ni));
+      const g = this.hasAttribute("touch-enabled");
+      if (!Wr() || !g) {
+        this.setAttribute("snap", ""), this.addEventListener("scroll", e(this, Fi));
         return;
       }
-      this.addEventListener("scroll", e(this, si)), (b = e(this, W)) == null || b.addEventListener("touchstart", this, { passive: !0 }), (m = e(this, W)) == null || m.addEventListener("touchmove", this, { passive: !1 }), (f = e(this, W)) == null || f.addEventListener("touchend", this, { passive: !0 });
+      this.addEventListener("scroll", e(this, Oi)), (p = e(this, ut)) == null || p.addEventListener("touchstart", this, { passive: !0 }), (u = e(this, ut)) == null || u.addEventListener("touchmove", this, { passive: !1 }), (v = e(this, ut)) == null || v.addEventListener("touchend", this, { passive: !0 });
     }
   }
   disconnectedCallback() {
     var t;
-    (t = e(this, W)) == null || t.disconnectListener(this);
+    (t = e(this, ut)) == null || t.disconnectListener(this);
   }
-  attributeChangedCallback(t, n, i) {
-    var a;
-    n !== i && (t === s.USER_INTERACTING && i === null && o(this, y, $i).call(this) && setTimeout(() => {
+  attributeChangedCallback(t, i, s) {
+    var o;
+    i !== s && (t === n.USER_INTERACTING && s === null && r(this, I, Ls).call(this) && setTimeout(() => {
       this.open = !1;
-    }, 300), t === "open" && this.scrollTo({ top: i === null ? 0 : (a = e(this, yt)) == null ? void 0 : a.clientHeight, behavior: "smooth" }));
+    }, 300), t === "open" && this.scrollTo({ top: s === null ? 0 : (o = e(this, Ft)) == null ? void 0 : o.clientHeight, behavior: "smooth" }));
   }
   set open(t) {
     t ? this.setAttribute("open", "") : this.removeAttribute("open");
@@ -2864,269 +3593,265 @@ class hn extends HTMLElement {
     return this.hasAttribute("visible");
   }
 }
-W = new WeakMap(), yt = new WeakMap(), $t = new WeakMap(), y = new WeakSet(), un = function(t) {
-  o(this, y, Be).call(this) && t.touches[0] && h(this, $t, t.touches[0].clientY);
-}, pn = function(t) {
-  if (!(!o(this, y, Be).call(this) || !e(this, $t) || this.hasAttribute("snap-touch")) && (t.preventDefault(), t.touches[0])) {
-    const n = t.touches[0].clientY, i = e(this, $t) - n;
-    this.scrollTop = i;
-  }
-}, bn = function(t) {
-  o(this, y, $i).call(this) && !this.hasAttribute("snap-touch") && (this.open = !0);
-}, si = new WeakMap(), ni = new WeakMap(), Be = function() {
-  return this.hasAttribute(s.USER_INTERACTING);
-}, $i = function() {
+ut = new WeakMap(), Ft = new WeakMap(), oe = new WeakMap(), ei = new WeakMap(), I = new WeakSet(), fr = function(t) {
+  r(this, I, Ei).call(this) && t.touches[0] && c(this, oe, t.touches[0].clientY);
+}, Er = function(t) {
+  if (!(!r(this, I, Ei).call(this) || !e(this, oe) || this.hasAttribute("snap-touch")) && (t.preventDefault(), t.touches[0])) {
+    const i = t.touches[0].clientY, s = e(this, oe) - i;
+    this.scrollTop = s;
+  }
+}, Ar = function(t) {
+  r(this, I, Ls).call(this) && !this.hasAttribute("snap-touch") && (this.open = !0);
+}, Oi = new WeakMap(), Fi = new WeakMap(), Ei = function() {
+  return this.hasAttribute(n.USER_INTERACTING);
+}, Ls = function() {
   return this.scrollTop > 0;
-}, zi = function() {
+}, Ts = function() {
   var t;
-  return Math.round(this.scrollTop) === this.scrollHeight - this.clientHeight || Math.round(this.scrollTop) === ((t = e(this, yt)) == null ? void 0 : t.clientHeight);
-}, Bi = function() {
-  this.visible = !0, this.dispatchEvent(new CustomEvent(v.LOCK_UI, { bubbles: !0, composed: !0 }));
-}, qi = function() {
-  this.visible = !1, this.dispatchEvent(new CustomEvent(v.UNLOCK_UI, { bubbles: !0, composed: !0 }));
-}, p(hn, "observedAttributes", [s.USER_INTERACTING, "open", "touch-enabled"]);
-const mn = document.createElement("template");
-mn.innerHTML = /* HTML */
+  return Math.round(this.scrollTop) === this.scrollHeight - this.clientHeight || Math.round(this.scrollTop) === ((t = e(this, Ft)) == null ? void 0 : t.clientHeight);
+}, xs = function() {
+  this.visible = !0, this.dispatchEvent(new CustomEvent(f.LOCK_UI, { bubbles: !0, composed: !0 }));
+}, Ss = function() {
+  this.visible = !1, this.dispatchEvent(new CustomEvent(f.UNLOCK_UI, { bubbles: !0, composed: !0 }));
+}, m(gr, "observedAttributes", [n.USER_INTERACTING, "open", "touch-enabled"]);
+const yr = document.createElement("template"), _o = (
+  /* SVG */
+  `
+  <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>
+`
+), Po = (
+  /* SVG */
+  `
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" clip-rule="evenodd" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2" /></g></svg>
+`
+);
+yr.innerHTML = /* HTML */
 `
   <style>
     :host {
-      --value: 0;
-
-      width: 100%;
-      height: 5px;
-      display: flex;
+      display: var(--play-overlay-display);
       align-items: center;
       justify-content: center;
-      padding: 0;
-      margin: 0;
-      position: relative;
-      cursor: pointer;
-      pointer-events: auto;
-      touch-action: none;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: 1;
+      pointer-events: none;
     }
 
-    #range {
-      -webkit-appearance: none;
-      appearance: none;
+    :host([hidden]) {
+      display: none;
+    }
 
-      height: 4px;
-      width: 100%;
-      margin: 0;
-      padding: 0;
+    /* Make icon slots clickable */
+    slot[name="play"],
+    slot[name="unmute"] {
+      color: var(--fg-strong);
+      pointer-events: auto;
+      cursor: pointer;
+    }
 
-      background-color: #00000000;
-      outline: none;
-      z-index: 1;
+    :host(:focus-visible) svg {
+      box-shadow: inset 0 0 0 2px var(--fg-strong);
+      outline: 0;
     }
 
-    #range-track {
-      position: absolute;
-      top: calc(50% - 2px);
-      left: 1px;
-      width: calc(100% - 1px);
-      height: 4px;
-      background-color: rgb(255 255 255 / 0.2);
-      overflow: hidden;
-      cursor: pointer;
+    :host(:active) svg {
+      scale: 0.9;
     }
 
-    #range-track::before {
-      position: absolute;
-      content: "";
-      left: calc(-100%);
-      top: 0;
-      width: calc(100%);
-      height: 100%;
-      background-color: var(--fg-strong);
-      transition: background-color 300ms ease-out;
-      transform-origin: 100% 0%;
-      transform: translateX(calc(var(--value) * 100%)) scaleX(1.2);
+    slot > svg {
+      width: var(--play-overlay-icon-size);
+      height: var(--play-overlay-icon-size);
     }
 
-    #range::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      appearance: none;
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-      background-color: var(--fg-strong);
-      cursor: pointer;
-      z-index: 1;
+    :host(:not([${n.NEEDS_USER_INPUT_VIDEO}]):not([${n.PAUSED}])) slot[name="play"] {
+      display: none !important;
     }
 
-    #range::-moz-range-thumb {
-      -moz-appearance: none;
-      appearance: none;
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-      background-color: var(--fg-strong);
-      cursor: pointer;
-      z-index: 1;
+    :host([${n.PAUSED}]) slot[name="unmute"],
+    :host(:not([${n.NEEDS_USER_INPUT_AUDIO}])) slot[name="unmute"] {
+      display: none !important;
     }
   </style>
 
-  <input type="range" id="range" min="0" max="1" step="any" value="0" />
-  <div id="range-track"></div>
+  <slot name="icon">
+    <slot name="play">${_o}</slot>
+    <slot name="unmute">${Po}</slot>
+  </slot>
 `;
-var zt, Bt;
-class vn extends HTMLElement {
+var ae, ii, Ht, si;
+class kr extends HTMLElement {
   constructor() {
     super();
-    l(this, zt, null);
-    l(this, Bt);
-    p(this, "range");
-    h(this, Bt, this.attachShadow({ mode: "open" })), e(this, Bt).appendChild(mn.content.cloneNode(!0)), this.range = e(this, Bt).getElementById("range");
+    l(this, ae, null);
+    l(this, ii, () => {
+      this.dispatchEvent(new CustomEvent(f.REQUEST_USER_INPUT, { bubbles: !0, composed: !0 }));
+    });
+    l(this, Ht, (t) => {
+      const { key: i } = t;
+      if (!this.keysUsed.includes(i)) {
+        this.removeEventListener("keyup", e(this, Ht));
+        return;
+      }
+      this.dispatchEvent(new CustomEvent(f.REQUEST_USER_INPUT, { bubbles: !0, composed: !0 }));
+    });
+    l(this, si, (t) => {
+      const { metaKey: i, altKey: s, key: o } = t;
+      if (i || s || !this.keysUsed.includes(o)) {
+        this.removeEventListener("keyup", e(this, Ht));
+        return;
+      }
+      this.addEventListener("keyup", e(this, Ht), { once: !0 });
+    });
+    this.attachShadow({ mode: "open" }).appendChild(yr.content.cloneNode(!0));
   }
-  connectedCallback() {
-    var n;
-    const t = this.getRootNode();
-    (t instanceof Document || t instanceof ShadowRoot) && (h(this, zt, t.querySelector("vindral-controller")), (n = e(this, zt)) == null || n.connectListener(this)), this.hasAttribute("disabled") || this.enable();
+  get keysUsed() {
+    return ["Enter", " "];
   }
-  disconnectedCallback() {
+  connectedCallback() {
     var t;
-    (t = e(this, zt)) == null || t.disconnectListener(this);
-  }
-  attributeChangedCallback(t, n, i) {
-    n !== i && (t === "disabled" && i ? this.disable() : this.enable(), this.updateBar());
+    c(this, ae, this.closest("vindral-controller")), (t = e(this, ae)) == null || t.connectListener(this), this.setAttribute("aria-label", "Play"), this.setAttribute("role", "button"), this.enable();
   }
   enable() {
-    this.range.addEventListener("input", this);
+    this.addEventListener("click", e(this, ii)), this.addEventListener("keydown", e(this, si)), this.tabIndex = 0;
   }
   disable() {
-    this.range.removeEventListener("input", this);
-  }
-  handleEvent(t) {
-    t.type === "input" && this.updateBar();
+    this.removeEventListener("click", e(this, ii)), this.removeEventListener("keydown", e(this, si)), this.removeEventListener("keyup", e(this, Ht)), this.tabIndex = -1;
   }
-  updateBar() {
-    this.style.setProperty("--value", this.range.value);
+  disconnectedCallback() {
+    var t;
+    (t = e(this, ae)) == null || t.disconnectListener(this), this.disable();
   }
 }
-zt = new WeakMap(), Bt = new WeakMap(), p(vn, "observedAttributes", ["disabled"]);
-const gn = document.createElement("template");
-gn.innerHTML = /* HTML */
+ae = new WeakMap(), ii = new WeakMap(), Ht = new WeakMap(), si = new WeakMap(), m(kr, "observedAttributes", [
+  "hidden",
+  n.NEEDS_USER_INPUT_VIDEO,
+  n.NEEDS_USER_INPUT_AUDIO,
+  n.PAUSED
+]);
+const wr = document.createElement("template");
+wr.innerHTML = /* HTML */
 `
   <style>
-    :host {
-      display: var(--volume-range-display);
-      width: 80px;
+    :host,
+    #background {
+      position: absolute;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      width: 100%;
+      top: 0;
+      left: 0;
+      background-repeat: no-repeat;
+      background-position: 50% 50%;
+      background-size: contain;
+      font-size: 20px;
+      color: var(--fg-strong);
+      pointer-events: none;
     }
-  </style>
-`;
-const Eo = (d) => `${Math.round(d * 100)}%`;
-var Ue;
-const ae = class ae extends vn {
-  constructor() {
-    var t;
-    super();
-    l(this, Ue, () => {
-      const t = this.range.valueAsNumber;
-      this.dispatchEvent(new CustomEvent(v.SET_VOLUME, { bubbles: !0, composed: !0, detail: t }));
-    });
-    (t = this.shadowRoot) == null || t.appendChild(gn.content.cloneNode(!0));
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.range.addEventListener("input", e(this, Ue)), this.range.setAttribute("aria-label", "volume");
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.range.removeEventListener("input", e(this, Ue));
-  }
-  attributeChangedCallback(t, n, i) {
-    super.attributeChangedCallback(t, n, i), (t === s.MUTED || t === s.VOLUME) && (this.range.valueAsNumber = this.muted ? 0 : parseFloat(this.volume), this.range.setAttribute("aria-valuetext", Eo(this.range.valueAsNumber)), this.updateBar());
-  }
-  get volume() {
-    var t;
-    return (t = this.getAttribute(s.VOLUME)) != null ? t : "1";
-  }
-  get muted() {
-    return this.hasAttribute(s.MUTED);
-  }
-};
-Ue = new WeakMap(), p(ae, "observedAttributes", [..._(ae, ae, "observedAttributes"), s.MUTED, s.VOLUME]);
-let Ki = ae;
-const fn = document.createElement("template"), Ao = (
-  /* SVG */
-  `
-<svg width="24" height="24" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <style>
-    .spinner-container {
-      transform-origin: center;
-      animation: rotate 2s linear infinite;
+
+    :host([hidden]) {
+      display: none;
     }
-    .spinner-circle {
-      stroke-linecap: round;
-      animation: dash 1.5s ease-in-out infinite;
+
+    #background {
+      opacity: 0.7;
     }
-    @keyframes rotate {
-      100% {
-        transform: rotate(360deg);
-      }
+
+    #message-container {
+      position: absolute;
+      left: 50%;
+      bottom: calc(50% + var(--play-overlay-icon-size));
+      transform: translateX(-50%);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: max-content;
+      max-width: 90%;
+      pointer-events: none;
     }
-    @keyframes dash {
-      0% {
-        stroke-dasharray: 0 150;
-        stroke-dashoffset: 0;
-      }
-      47.5% {
-        stroke-dasharray: 42 150;
-        stroke-dashoffset: -16;
+
+    #title,
+    #description {
+      position: static;
+      width: 100%;
+      text-align: center;
+      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+      margin: 0;
+      pointer-events: none;
+    }
+
+    #title {
+      margin-bottom: var(--padding-2);
+    }
+
+    @container (max-width: 600px) {
+      :host {
+        font-size: 15px;
       }
-      95%, 100% {
-        stroke-dasharray: 42 150;
-        stroke-dashoffset: -59;
+      #message-container {
+        bottom: 0;
+        top: var(--padding-1);
       }
     }
-  </style>
-  <g class="spinner-container">
-    <circle class="spinner-circle" cx="12" cy="12" r="9.5" fill="none" stroke-width="3"></circle>
-  </g>
-</svg>
-`
-);
-fn.innerHTML = /* HTML */
-`
-  <style>
-    :host {
-      color: var(--fg-strong);
-    }
 
-    slot > svg {
-      display: block;
+    @container (max-width: 400px) {
+      :host {
+        font-size: 12px;
+      }
+      #title {
+        margin-bottom: 0;
+      }
     }
 
-    :host(:not([${s.BUFFERING}])) {
-      visibility: hidden !important;
+    @container (max-width: 150px) {
+      :host {
+        font-size: 10px;
+      }
+      #title,
+      #description {
+        font-size: 1.2em;
+        margin: 0;
+      }
     }
   </style>
 
-  <slot name="icon">${Ao}</slot>
+  <div id="background"></div>
+  <div id="message-container">
+    <h1 id="title"></h1>
+    <p id="description"></p>
+  </div>
 `;
-var qt;
-class En extends HTMLElement {
+var ni, ri, oi;
+class Ir extends HTMLElement {
   constructor() {
     super();
-    l(this, qt, null);
-    this.attachShadow({ mode: "open" }).appendChild(fn.content.cloneNode(!0));
+    l(this, ni);
+    l(this, ri);
+    l(this, oi);
+    const t = this.attachShadow({ mode: "open" });
+    t.appendChild(wr.content.cloneNode(!0)), c(this, ni, t.querySelector("#title")), c(this, ri, t.querySelector("#description")), c(this, oi, t.querySelector("#background"));
   }
   connectedCallback() {
-    var n;
-    const t = this.getRootNode();
-    (t instanceof Document || t instanceof ShadowRoot) && (h(this, qt, t.querySelector("vindral-controller")), (n = e(this, qt)) == null || n.connectListener(this));
   }
   disconnectedCallback() {
-    var t;
-    (t = e(this, qt)) == null || t.disconnectListener(this);
+  }
+  attributeChangedCallback(t, i, s) {
+    i !== s && (t === "title" ? e(this, ni).textContent = s : t === "description" ? e(this, ri).textContent = s : t === "background-image" && (e(this, oi).style.backgroundImage = `url(${s})`));
   }
 }
-qt = new WeakMap(), p(En, "observedAttributes", [s.BUFFERING]);
-const An = document.createElement("template"), yo = (
+ni = new WeakMap(), ri = new WeakMap(), oi = new WeakMap(), m(Ir, "observedAttributes", ["title", "description", "background-image", "hidden"]);
+const Cr = document.createElement("template"), Mo = (
   /* SVG */
   `
   <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>
 `
 );
-An.innerHTML = /* HTML */
+Cr.innerHTML = /* HTML */
 `
   <style>
     :host {
@@ -3146,165 +3871,97 @@ An.innerHTML = /* HTML */
       display: none;
     }
 
+    :host(:focus-visible) {
+      outline: none;
+    }
+
+    :host(:focus-visible) svg {
+      box-shadow: inset 0 0 0 2px var(--fg-strong);
+      outline: 0;
+    }
+
+    :host(:active) svg {
+      scale: 0.9;
+    }
+
     slot#play {
+      color: var(--fg-strong);
       pointer-events: auto;
       cursor: pointer;
-      color: var(--fg-strong);
     }
 
     slot#play > svg {
-      width: 48px;
-      height: 48px;
+      width: var(--play-overlay-icon-size);
+      height: var(--play-overlay-icon-size);
     }
   </style>
 
-  <slot id="play" name="icon">${yo}</slot>
+  <slot id="play" name="icon">${Mo}</slot>
 `;
-var Kt;
-class Vi extends HTMLElement {
+var le;
+class Lr extends HTMLElement {
   constructor() {
     super();
-    l(this, Kt, null);
-    this.attachShadow({ mode: "open" }).appendChild(An.content.cloneNode(!0));
+    l(this, le, null);
+    this.attachShadow({ mode: "open" }).appendChild(Cr.content.cloneNode(!0));
   }
   connectedCallback() {
-    var n;
-    const t = this.getRootNode();
-    (t instanceof Document || t instanceof ShadowRoot) && (h(this, Kt, t.querySelector("vindral-controller")), (n = e(this, Kt)) == null || n.connectListener(this)), this.setAttribute("arial-label", "Play");
+    var t;
+    c(this, le, this.closest("vindral-controller")), (t = e(this, le)) == null || t.connectListener(this), this.setAttribute("aria-label", "Play"), this.setAttribute("role", "button"), this.tabIndex = 0;
   }
   disconnectedCallback() {
     var t;
-    (t = e(this, Kt)) == null || t.disconnectListener(this);
+    (t = e(this, le)) == null || t.disconnectListener(this);
+  }
+  attributeChangedCallback(t, i, s) {
+    i !== s && t === "hidden" && !L(s) && this.focus();
   }
 }
-Kt = new WeakMap(), p(Vi, "observedAttributes", ["hidden"]);
-const yn = document.createElement("template");
-yn.innerHTML = /* HTML */
+le = new WeakMap(), m(Lr, "observedAttributes", ["hidden"]);
+const Tr = document.createElement("template");
+Tr.innerHTML = /* HTML */
 `
   <style>
     :host {
-      display: var(--play-overlay-display);
-    }
-
-    :host(:not([${s.NEEDS_USER_INPUT}]):not([${s.PAUSED}])) #play {
-      display: none;
+      display: var(--volume-range-display);
+      width: 80px;
     }
   </style>
 `;
-var oi;
-const le = class le extends Vi {
+const Do = (d) => `${Math.round(d * 100)}%`;
+var ai;
+const Ce = class Ce extends _s {
   constructor() {
     var t;
     super();
-    l(this, oi, () => {
-      this.dispatchEvent(new CustomEvent(v.REQUEST_USER_INPUT, { bubbles: !0, composed: !0 }));
+    l(this, ai, () => {
+      const t = this.range.valueAsNumber;
+      this.dispatchEvent(new CustomEvent(f.SET_VOLUME, { bubbles: !0, composed: !0, detail: t }));
     });
-    (t = this.shadowRoot) == null || t.appendChild(yn.content.cloneNode(!0));
+    (t = this.shadowRoot) == null || t.appendChild(Tr.content.cloneNode(!0));
   }
   connectedCallback() {
-    super.connectedCallback(), this.addEventListener("click", e(this, oi));
+    super.connectedCallback(), this.range.addEventListener("input", e(this, ai)), this.range.setAttribute("aria-label", "volume");
   }
   disconnectedCallback() {
-    super.disconnectedCallback();
+    super.disconnectedCallback(), this.range.removeEventListener("input", e(this, ai));
   }
-};
-oi = new WeakMap(), p(le, "observedAttributes", [
-  ..._(le, le, "observedAttributes"),
-  s.NEEDS_USER_INPUT,
-  s.PAUSED
-]);
-let Xi = le;
-const kn = document.createElement("template");
-kn.innerHTML = /* HTML */
-`
-  <style>
-    :host,
-    #background {
-      position: absolute;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      width: 100%;
-      top: 0;
-      left: 0;
-      justify-content: center;
-      align-items: center;
-      background-repeat: no-repeat;
-      background-position: 50% 50%;
-      background-size: contain;
-      font-size: 20px;
-      color: var(--fg-strong);
-      pointer-events: none;
-    }
-
-    :host([hidden]) {
-      display: none;
-    }
-
-    #background {
-      opacity: 0.7;
-    }
-
-    #title,
-    #description {
-      position: relative;
-      text-align: center;
-    }
-
-    @container (max-width: 600px) {
-      :host {
-        font-size: 15px;
-      }
-    }
-
-    @container (max-width: 400px) {
-      :host {
-        font-size: 12px;
-      }
-      #title {
-        margin: 0;
-      }
-    }
-
-    @container (max-width: 150px) {
-      :host {
-        font-size: 10px;
-      }
-      #title,
-      #description {
-        font-size: 1.2em;
-        margin: 0;
-      }
-    }
-  </style>
-
-  <div id="background"></div>
-  <h1 id="title"></h1>
-  <p id="description"></p>
-`;
-var _e, Pe, Me;
-class Cn extends HTMLElement {
-  constructor() {
-    super();
-    l(this, _e);
-    l(this, Pe);
-    l(this, Me);
-    const t = this.attachShadow({ mode: "open" });
-    t.appendChild(kn.content.cloneNode(!0)), h(this, _e, t.querySelector("#title")), h(this, Pe, t.querySelector("#description")), h(this, Me, t.querySelector("#background"));
+  attributeChangedCallback(t, i, s) {
+    super.attributeChangedCallback(t, i, s), (t === n.MUTED || t === n.VOLUME) && (this.range.valueAsNumber = this.muted ? 0 : parseFloat(this.volume), this.range.setAttribute("aria-valuetext", Do(this.range.valueAsNumber)), this.updateBar());
   }
-  connectedCallback() {
-  }
-  disconnectedCallback() {
+  get volume() {
+    var t;
+    return (t = this.getAttribute(n.VOLUME)) != null ? t : "1";
   }
-  attributeChangedCallback(t, n, i) {
-    n !== i && (t === "title" ? e(this, _e).textContent = i : t === "description" ? e(this, Pe).textContent = i : t === "background-image" && (e(this, Me).style.backgroundImage = `url(${i})`));
+  get muted() {
+    return this.hasAttribute(n.MUTED);
   }
-}
-_e = new WeakMap(), Pe = new WeakMap(), Me = new WeakMap(), p(Cn, "observedAttributes", ["title", "description", "background-image", "hidden"]);
-function xo() {
-  customElements.define("vindral-controller", ce), customElements.define("vindral-control-bar", Ts), customElements.define("vindral-play-button", Ui), customElements.define("vindral-mute-button", Si), customElements.define("vindral-buffering-overlay", ds), customElements.define("vindral-scroll-overlay", hn), customElements.define("vindral-play-overlay", Vi), customElements.define("vindral-user-input-play-overlay", Xi), customElements.define("vindral-fullscreen-button", wi), customElements.define("vindral-rendition-levels-menu", Fi), customElements.define("vindral-rendition-levels-menu-list", rn), customElements.define("vindral-channel-grid-button", gi), customElements.define("vindral-channel-grid", gs), customElements.define("vindral-channel-grid-item", ji), customElements.define("vindral-pip-button", Ri), customElements.define("vindral-airplay-button", ui), customElements.define("vindral-cast-button", bi), customElements.define("vindral-cast-overlay", bs), customElements.define("vindral-buffering-icon", En), customElements.define("vindral-language-menu", Ii), customElements.define("vindral-language-menu-list", Ks), customElements.define("vindral-message", Cn), customElements.define("vindral-volume-range", Ki), customElements.define("vindral-player", tn);
+};
+ai = new WeakMap(), m(Ce, "observedAttributes", [...q(Ce, Ce, "observedAttributes"), n.MUTED, n.VOLUME]);
+let Ns = Ce;
+function $o() {
+  customElements.define("vindral-controller", Le), customElements.define("vindral-control-bar", yn), customElements.define("vindral-play-button", ms), customElements.define("vindral-mute-button", ps), customElements.define("vindral-buffering-overlay", Ws), customElements.define("vindral-scroll-overlay", gr), customElements.define("vindral-play-overlay", Lr), customElements.define("vindral-user-input-play-overlay", kr), customElements.define("vindral-fullscreen-button", os), customElements.define("vindral-rendition-levels-menu", ys), customElements.define("vindral-rendition-levels-menu-list", hr), customElements.define("vindral-channel-grid-button", Ji), customElements.define("vindral-channel-grid", an), customElements.define("vindral-channel-grid-item", Rs), customElements.define("vindral-pip-button", bs), customElements.define("vindral-airplay-button", qi), customElements.define("vindral-cast-button", Vi), customElements.define("vindral-cast-overlay", sn), customElements.define("vindral-buffering-icon", Js), customElements.define("vindral-language-menu", as), customElements.define("vindral-language-menu-list", Kn), customElements.define("vindral-message", Ir), customElements.define("vindral-volume-range", Ns), customElements.define("vindral-poster-overlay", rr), customElements.define("vindral-player", ir);
 }
 export {
-  xo as registerComponents
+  $o as registerComponents
 };