@vindral/web-sdk 3.4.3 → 4.0.0-100-g47797f66

package/player.js

@@ -0,0 +1,3839 @@
+var Gr = Object.defineProperty;
+var $r = Object.getPrototypeOf;
+var zr = Reflect.get;
+var Ps = (h) => {
+  throw TypeError(h);
+};
+var Br = (h, a, t) => a in h ? Gr(h, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : h[a] = t;
+var m = (h, a, t) => Br(h, typeof a != "symbol" ? a + "" : a, t), Pi = (h, a, t) => a.has(h) || Ps("Cannot " + t);
+var e = (h, a, t) => (Pi(h, a, "read from private field"), t ? t.call(h) : a.get(h)), l = (h, a, t) => a.has(h) ? Ps("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(h) : a.set(h, t), d = (h, a, t, i) => (Pi(h, a, "write to private field"), i ? i.call(h, t) : a.set(h, t), t), r = (h, a, t) => (Pi(h, a, "access private method"), t);
+var G = (h, a, t) => zr($r(h), t, a);
+var $ = (h, a, t) => new Promise((i, s) => {
+  var o = (v) => {
+    try {
+      p(t.next(v));
+    } catch (g) {
+      s(g);
+    }
+  }, u = (v) => {
+    try {
+      p(t.throw(v));
+    } catch (g) {
+      s(g);
+    }
+  }, p = (v) => v.done ? i(v.value) : Promise.resolve(v.value).then(o, u);
+  p((t = t.apply(h, a)).next());
+});
+import { L as Kr, V as qr, f as Xr, A as Vr, C as jr, g as Yr } from "./Bozsjl6j.js";
+import { E as ri } from "./Bx7s5QdT.js";
+import { CastSender as Jr } from "./cast-sender.js";
+import { A as Qr, b as Wr } from "./C80BN8Qb.js";
+const Oi = 1e3, Hi = Oi * 1e3, Ms = Hi * 1e3, Mi = (h, a, t) => h % a === 0 ? h / a : (h / a).toFixed(t), Zr = (h, a = 1) => h >= Ms ? `${Mi(h, Ms, a)} Gbit/s` : h >= Hi ? `${Mi(h, Hi, a)} Mbit/s` : h >= Oi ? `${Mi(h, Oi, a)} Kbit/s` : `${h} bit/s`, to = ({ width: h, height: a }) => `${h}x${a}`, eo = ({
+  title: h,
+  subTitle: a = "Live stream",
+  poster: t
+}) => {
+  document.title = h, "mediaSession" in navigator && (navigator.mediaSession.metadata = new MediaMetadata({
+    title: h,
+    artist: a,
+    artwork: t ? [{ src: t }] : []
+  }));
+}, n = {
+  PAUSED: "paused",
+  MUTED: "muted",
+  USER_INTERACTING: "user-interacting",
+  IS_CASTING: "is-casting",
+  CAST_AVAILABLE: "cast-available",
+  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",
+  RENDITION_LEVEL: "rendition-level",
+  MAX_VIDEO_BITRATE: "max-video-bit-rate",
+  CHANNELS: "channels",
+  CHANNEL_ID: "channel-id",
+  CHANNEL_GROUP_ID: "channel-group-id",
+  PIP_AVAILABLE: "pip-available",
+  IS_PIP: "is-pip",
+  AIRPLAY_AVAILABLE: "airplay-available",
+  IS_AIRPLAYING: "is-airplaying",
+  MEDIA: "media",
+  LANGUAGES: "languages",
+  LANGUAGE: "language",
+  TEXT_TRACKS: "text-tracks",
+  TEXT_TRACK: "text-track",
+  NEEDS_USER_INPUT: "needs-user-input",
+  AUTHENTICATION_TOKEN: "authentication-token",
+  VOLUME: "volume",
+  VOLUME_LEVEL: "volume-level",
+  CAST_ENABLED: "cast",
+  AIRPLAY_ENABLED: "airplay",
+  PIP_ENABLED: "pip",
+  FULLSCREEN_ENABLED: "fullscreen",
+  VU_METER_ENABLED: "vu-meter",
+  POSTER_SRC: "poster-src"
+}, $s = Object.values(n), f = {
+  PLAY: "play",
+  PAUSE: "pause",
+  MUTE: "mute",
+  UNMUTE: "unmute",
+  LOCK_UI: "lock-ui",
+  UNLOCK_UI: "unlock-ui",
+  ENTER_FULLSCREEN: "enter-fullscreen",
+  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",
+  SET_LANGUAGE: "set-language",
+  SET_TEXT_TRACK: "set-text-track",
+  REQUEST_USER_INPUT: "request-user-input",
+  SET_VOLUME: "set-volume"
+};
+function zs(h) {
+  return h === "audio" || h === "video" || h === "audio+video" ? h : "audio+video";
+}
+function Di(h) {
+  return h === "trace" || h === "debug" || h === "info" || h === "warn" || h === "error" || h === "off" ? h : "off";
+}
+function io(h) {
+  if (h === null)
+    return;
+  const a = h.split(",").map((t) => t.trim()).filter((t) => t === "h264" || t === "av1");
+  if (a.length !== 0)
+    return a;
+}
+function Bs(h) {
+  if (h !== null)
+    return h === "" ? !0 : h;
+}
+function so(h) {
+  if (h !== null)
+    try {
+      const a = JSON.parse(h);
+      if (typeof a == "object" && a !== null) {
+        const t = a;
+        if (typeof t.width == "number" && typeof t.height == "number")
+          return t;
+      }
+    } catch (a) {
+      return;
+    }
+}
+function no(h) {
+  if (h !== null)
+    try {
+      const a = JSON.parse(h);
+      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 ai(h) {
+  if (h === null)
+    return;
+  const a = parseInt(h, 10);
+  return isNaN(a) ? void 0 : a;
+}
+function x(h) {
+  return typeof h == "string";
+}
+function T(h, a) {
+  if (h === null)
+    return a != null ? a : void 0;
+  const t = h.toLowerCase();
+  return t === "false" ? !1 : t === "true" || t === "" ? !0 : a != null ? a : !0;
+}
+function Ds(h) {
+  if (h === null)
+    return;
+  const a = {}, t = h.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 Ks = document.createElement("template");
+Ks.innerHTML = /* HTML */
+`
+  <style>
+    :host {
+      cursor: pointer;
+      color: var(--fg-strong);
+      padding: var(--button-padding);
+      background: transparent;
+      transition: background 0.2s linear;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    :host(:focus-visible) {
+      box-shadow: inset 0 0 0 2px var(--fg-strong);
+      outline: 0;
+    }
+
+    :host(:where(:focus)) {
+      box-shadow: none;
+      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);
+    }
+
+    :host(:active) svg {
+      scale: 0.9;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      background: transparent;
+    }
+  </style>
+`;
+var Gt, Le, xt, Te;
+class Z extends HTMLElement {
+  constructor() {
+    super();
+    l(this, Gt, null);
+    l(this, Le, (t) => {
+      this.handleClick(t);
+    });
+    l(this, xt, (t) => {
+      const { key: i } = t;
+      if (!this.keysUsed.includes(i)) {
+        this.removeEventListener("keyup", e(this, xt));
+        return;
+      }
+      this.handleClick(t);
+    });
+    l(this, Te, (t) => {
+      const { metaKey: i, altKey: s, key: o } = t;
+      if (i || s || !this.keysUsed.includes(o)) {
+        this.removeEventListener("keyup", e(this, xt));
+        return;
+      }
+      this.addEventListener("keyup", e(this, xt), { once: !0 });
+    });
+    this.attachShadow({ mode: "open" }).appendChild(Ks.content.cloneNode(!0));
+  }
+  get keysUsed() {
+    return ["Enter", " "];
+  }
+  connectedCallback() {
+    var t;
+    d(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, Le)), this.addEventListener("keydown", e(this, Te)), this.tabIndex = 0;
+  }
+  disable() {
+    this.removeEventListener("click", e(this, Le)), this.removeEventListener("keydown", e(this, Te)), this.removeEventListener("keyup", e(this, xt)), this.tabIndex = -1;
+  }
+  disconnectedCallback() {
+    var t;
+    (t = e(this, Gt)) == null || t.disconnectListener(this);
+  }
+  attributeChangedCallback(t, i, s) {
+    t === "disabled" && (x(s) ? this.disable() : this.enable());
+  }
+}
+Gt = new WeakMap(), Le = new WeakMap(), xt = new WeakMap(), Te = new WeakMap(), m(Z, "observedAttributes", ["disabled"]);
+const qs = document.createElement("template"), Fs = (
+  /* 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>
+`
+);
+qs.innerHTML = /* HTML */
+`
+  <style>
+    :host {
+      display: var(--airplay-button-display);
+    }
+
+    slot > svg {
+      display: block;
+    }
+
+    :host(:not([${n.AIRPLAY_AVAILABLE}])) {
+      display: none !important;
+    }
+
+    :host([${n.IS_AIRPLAYING}]) slot[name="exit"] {
+      display: none !important;
+    }
+
+    :host(:not([${n.IS_AIRPLAYING}])) slot[name="enter"] {
+      display: none !important;
+    }
+  </style>
+
+  <slot name="icon">
+    <slot name="enter">${Fs}</slot>
+    <slot name="exit">${Fs}</slot>
+  </slot>
+`;
+var xe, $i;
+const pe = class pe extends Z {
+  constructor() {
+    var t;
+    super();
+    l(this, xe);
+    (t = this.shadowRoot) == null || t.appendChild(qs.content.cloneNode(!0));
+  }
+  connectedCallback() {
+    super.connectedCallback(), r(this, xe, $i).call(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  attributeChangedCallback(t, i, s) {
+    super.attributeChangedCallback(t, i, s), t === n.IS_AIRPLAYING && r(this, xe, $i).call(this);
+  }
+  set isAirPlaying(t) {
+    t ? this.setAttribute(n.IS_AIRPLAYING, "") : this.removeAttribute(n.IS_AIRPLAYING);
+  }
+  get isAirPlaying() {
+    return this.hasAttribute(n.IS_AIRPLAYING);
+  }
+  handleClick(t) {
+    this.dispatchEvent(new CustomEvent(f.REQUEST_AIRPLAY, { bubbles: !0, composed: !0 }));
+  }
+};
+xe = new WeakSet(), $i = function() {
+  this.setAttribute("aria-label", this.isAirPlaying ? "Exit airplay" : "Enter airplay");
+}, m(pe, "observedAttributes", [
+  ...G(pe, pe, "observedAttributes"),
+  n.AIRPLAY_AVAILABLE,
+  n.IS_AIRPLAYING
+]);
+let Gi = pe;
+const Xs = document.createElement("template");
+Xs.innerHTML = /* HTML */
+`
+  <style>
+    :host {
+      display: var(--buffering-overlay-display);
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: rgba(0, 0, 0, 0.3);
+      transition: opacity 250ms;
+      transition-delay: 1s;
+      opacity: 1;
+      pointer-events: none;
+      z-index: 1;
+    }
+
+    #buffering-indicator {
+      width: 40px;
+      height: 40px;
+      border-radius: 40px;
+      background-color: var(--fg-strong);
+      animation: scaleout 1s infinite ease-in-out;
+    }
+
+    @-webkit-keyframes scaleout {
+      0% {
+        -webkit-transform: scale(0);
+      }
+      100% {
+        -webkit-transform: scale(1);
+        opacity: 0;
+      }
+    }
+
+    @keyframes scaleout {
+      0% {
+        -webkit-transform: scale(0);
+        transform: scale(0);
+      }
+      100% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+        opacity: 0;
+      }
+    }
+
+    :host(:not([${n.BUFFERING}])) {
+      transition-delay: 0s;
+      opacity: 0 !important;
+    }
+  </style>
+
+  <div id="buffering-indicator"></div>
+`;
+var $t;
+class Vs extends HTMLElement {
+  constructor() {
+    super();
+    l(this, $t, null);
+    this.attachShadow({ mode: "open" }).appendChild(Xs.content.cloneNode(!0));
+  }
+  connectedCallback() {
+    var t;
+    d(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(Vs, "observedAttributes", [n.BUFFERING]);
+const js = document.createElement("template");
+js.innerHTML = /* HTML */
+`
+  <style>
+    :host {
+      display: var(--cast-button-display);
+    }
+
+    google-cast-launcher {
+      display: block;
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+      --connected-color: var(--fg-strong);
+      --disconnected-color: var(--fg-strong);
+    }
+
+    :host(:active) google-cast-launcher {
+      transform: scale(0.9);
+    }
+
+    :host(:not([${n.CAST_AVAILABLE}])) {
+      display: none !important;
+    }
+  </style>
+`;
+var Ft, Bi, Ys;
+const be = class be extends Z {
+  constructor() {
+    var t;
+    super();
+    l(this, Ft);
+    (t = this.shadowRoot) == null || t.appendChild(js.content.cloneNode(!0));
+  }
+  connectedCallback() {
+    super.connectedCallback(), r(this, Ft, Bi).call(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  attributeChangedCallback(t, i, s) {
+    super.attributeChangedCallback(t, i, s), t === n.CAST_AVAILABLE && r(this, Ft, Ys).call(this), t === n.IS_CASTING && r(this, Ft, Bi).call(this);
+  }
+  set isCasting(t) {
+    t ? this.setAttribute(n.IS_CASTING, "") : this.removeAttribute(n.IS_CASTING);
+  }
+  get isCasting() {
+    return this.hasAttribute(n.IS_CASTING);
+  }
+  handleClick(t) {
+  }
+};
+Ft = new WeakSet(), Bi = function() {
+  this.setAttribute("aria-label", this.isCasting ? "Exit cast" : "Enter cast");
+}, Ys = function() {
+  var t, i;
+  if (!((t = this.shadowRoot) != null && t.querySelector("google-cast-launcher"))) {
+    const s = document.createElement("google-cast-launcher");
+    (i = this.shadowRoot) == null || i.appendChild(s);
+  }
+}, m(be, "observedAttributes", [
+  ...G(be, be, "observedAttributes"),
+  n.CAST_AVAILABLE,
+  n.IS_CASTING
+]);
+let zi = be;
+const Js = document.createElement("template");
+Js.innerHTML = /* HTML */
+`
+  <style>
+    :host {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      font-size: 20px;
+      text-align: center;
+      padding: 5% 0;
+      box-shadow: 0px 0px 20px black;
+      background: rgba(0, 0, 0, 0.5);
+      color: white;
+      pointer-events: none;
+      z-index: 1;
+      transition: opacity 0.3s ease-in-out;
+    }
+
+    @media only screen and (max-width: 600px) {
+      :host {
+        font-size: 14px;
+      }
+    }
+
+    :host(:not([${n.IS_CASTING}])) {
+      display: none;
+    }
+
+    #text {
+      margin: 0;
+      padding: 0;
+    }
+  </style>
+  <span id="text"></span>
+`;
+var zt, Bt;
+class Qs extends HTMLElement {
+  constructor() {
+    super();
+    l(this, zt, null);
+    l(this, Bt, null);
+    this.attachShadow({ mode: "open" }).appendChild(Js.content.cloneNode(!0));
+  }
+  connectedCallback() {
+    var t, i;
+    d(this, zt, this.closest("vindral-controller")), (t = e(this, zt)) == null || t.connectListener(this), d(this, Bt, (i = this.shadowRoot) == null ? void 0 : i.querySelector("#text"));
+  }
+  disconnectedCallback() {
+    var t;
+    (t = e(this, zt)) == null || t.disconnectListener(this);
+  }
+  attributeChangedCallback(t, i, s) {
+    i === s || !e(this, Bt) || t === "cast-receiver-name" && typeof s == "string" && (e(this, Bt).innerText = `Casting to ${s || "device"}`);
+  }
+}
+zt = new WeakMap(), Bt = new WeakMap(), m(Qs, "observedAttributes", [n.IS_CASTING, n.CAST_RECEIVER_NAME]);
+function Ws(h = document) {
+  const a = h == null ? void 0 : h.activeElement;
+  if (!a) return null;
+  if (a.shadowRoot) {
+    const t = Ws(a.shadowRoot);
+    return t != null ? t : a;
+  }
+  return a;
+}
+const Zs = document.createElement("template");
+Zs.innerHTML = /* HTML */
+`
+  <style>
+    :host {
+      position: relative;
+      aspect-ratio: 16 / 9;
+      object-fit: cover;
+      cursor: pointer;
+      border-radius: 6px;
+      box-sizing: border-box;
+      margin: 2px;
+
+      background-size: cover;
+      background-position: center;
+
+      transition-property: background-image;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 200ms;
+
+      background-color: rgba(0, 0, 0, 0.5);
+      background-blend-mode: multiply;
+    }
+
+    :host([aria-selected="true"]) {
+      outline: 2px solid var(--fg-strong);
+      background-color: rgba(0, 0, 0, 0);
+    }
+
+    :host([offline]) {
+      display: var(--grid-item-offline-display);
+      background-image: repeating-linear-gradient(-45deg, #3d3d3d 0, #3d3d3d 4px, #1c2024 4px, #1c2024 8px) !important;
+      pointer-events: none;
+    }
+
+    :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(:hover)::before {
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    .channel-title {
+      position: absolute;
+      bottom: var(--padding-2);
+      left: var(--padding-2);
+      padding: var(--padding-1) var(--padding-2);
+      color: white;
+      font-size: 15px;
+      font-weight: 500;
+      text-overflow: ellipsis;
+      border-radius: 4px;
+
+      @container (max-width: 480px) {
+        font-size: 13px;
+      }
+    }
+  </style>
+  <slot></slot>
+`;
+var St;
+class Ts extends HTMLElement {
+  constructor() {
+    super();
+    l(this, St);
+    m(this, "lastThumbnailUpdate");
+    const t = this.attachShadow({ mode: "open" });
+    d(this, St, document.createElement("span")), e(this, St).className = "channel-title", t.appendChild(e(this, St)), t.appendChild(Zs.content.cloneNode(!0));
+  }
+  attributeChangedCallback(t, i, s) {
+    if (i !== s)
+      switch (t) {
+        case "url":
+          this.updateThumbnail();
+          break;
+        case "title":
+          e(this, St).textContent = s;
+          break;
+      }
+  }
+  updateThumbnail() {
+    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), u = new Image(), p = this.getAttribute("authentication-token");
+    p && o.searchParams.set("auth.token", p), o.searchParams.set("t", Date.now().toString()), u.src = o.toString(), u.onload = () => this.style.backgroundImage = `url(${o.toString()})`;
+  }
+}
+St = new WeakMap(), m(Ts, "observedAttributes", ["url", "title", "offline", "authentication-token", "visible"]);
+const tn = document.createElement("template");
+tn.innerHTML = /* HTML */
+`
+  <style>
+    :host {
+      cursor: default;
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      border-radius: 4px;
+      background-color: var(--bg-subtle);
+      padding: var(--padding-2);
+
+      position: absolute;
+      bottom: 0;
+      right: 0;
+
+      z-index: 5;
+      width: 100%;
+      max-height: 75%;
+    }
+
+    :host([hidden]) {
+      display: none;
+    }
+
+    .wrapper {
+      overflow: auto;
+      -ms-overflow-style: none;
+      scrollbar-width: none;
+      height: 100%;
+    }
+
+    .wrapper::-webkit-scrollbar {
+      display: none;
+    }
+
+    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));
+      }
+      @container (width < 1024px) and (width >= 768px) {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+      @container (width >= 1024px) {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+      }
+    }
+
+    /* 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));
+    }
+  </style>
+
+  <div class="wrapper">
+    <slot name="grid" id="grid"></slot>
+  </div>
+`;
+var dt, ut, Kt, D, L, qt, Se, Ne, Re, y, sn, nn, rn, Ki, on, an, ln, cn, hn, dn, un, ce;
+class en extends HTMLElement {
+  constructor() {
+    super();
+    l(this, y);
+    l(this, dt, null);
+    l(this, ut, null);
+    l(this, Kt, []);
+    l(this, D, []);
+    l(this, L);
+    l(this, qt);
+    l(this, Se);
+    l(this, Ne);
+    l(this, Re);
+    m(this, "handleEvent", (t) => {
+      switch (t.type) {
+        case "keydown":
+          r(this, y, dn).call(this, t);
+          break;
+      }
+    });
+    this.attachShadow({ mode: "open" }).appendChild(tn.content.cloneNode(!0));
+  }
+  connectedCallback() {
+    var t, i, s;
+    d(this, ut, this.closest("vindral-controller")), (t = e(this, ut)) == null || t.connectListener(this), r(this, y, sn).call(this), (s = e(this, dt)) == null || s.observe((i = this.shadowRoot) == null ? void 0 : i.querySelector(".wrapper")), r(this, y, Ki).call(this), d(this, Se, window.setInterval(() => {
+      r(this, y, cn).call(this);
+    }, 1e4));
+  }
+  disconnectedCallback() {
+    var t;
+    clearInterval(e(this, Se)), this.removeEventListener("keydown", this), (t = e(this, dt)) == null || t.disconnect();
+  }
+  attributeChangedCallback(t, i, s) {
+    if (i !== s)
+      switch (t) {
+        case n.CHANNEL_ID: {
+          r(this, y, ln).call(this, s);
+          break;
+        }
+        case n.CHANNELS:
+          d(this, Kt, JSON.parse(s)), r(this, y, Ki).call(this);
+          break;
+        case "authentication-token":
+          d(this, qt, s);
+          break;
+      }
+  }
+  get keysUsed() {
+    return ["Enter", "Escape", "Tab", " ", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight", "Home", "End"];
+  }
+  focus() {
+    var t;
+    d(this, Ne, Ws()), (t = e(this, L)) == null || t.focus();
+  }
+}
+dt = new WeakMap(), ut = new WeakMap(), Kt = new WeakMap(), D = new WeakMap(), L = new WeakMap(), qt = new WeakMap(), Se = new WeakMap(), Ne = new WeakMap(), Re = new WeakMap(), y = new WeakSet(), sn = function() {
+  d(this, dt, new IntersectionObserver(
+    (t) => {
+      t.forEach((i) => {
+        const { target: s, isIntersecting: o } = i;
+        s instanceof Ts ? r(this, y, rn).call(this, s, o) : r(this, y, nn).call(this, o);
+      });
+    },
+    {
+      root: e(this, ut)
+    }
+  ));
+}, nn = 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, Re)), d(this, Re, window.setTimeout(() => {
+        var u;
+        this.focus(), (u = this.parentElement) == null || u.removeEventListener("scroll", o);
+      }, 100));
+    };
+    (i = this.parentElement) == null || i.addEventListener("scroll", o), this.addEventListener("keydown", this), e(this, L) && (e(this, L).tabIndex = 0);
+  } else
+    e(this, L) && (e(this, L).tabIndex = -1), this.dispatchEvent(new CustomEvent(f.CHANNEL_GRID_CLOSED, { bubbles: !0, composed: !0 })), (s = e(this, Ne)) == null || s.focus(), this.removeEventListener("keydown", this);
+}, rn = function(t, i) {
+  i ? (t.setAttribute("visible", ""), (!t.lastThumbnailUpdate || Date.now() - t.lastThumbnailUpdate >= 1e4) && (t.updateThumbnail(), t.lastThumbnailUpdate = Date.now())) : t.removeAttribute("visible");
+}, Ki = function() {
+  var o;
+  const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector("slot[name=grid]"), i = new Map(e(this, D).map((u) => [u.id, u])), s = this.getAttribute("channel-id");
+  d(this, D, e(this, Kt).map((u) => {
+    var g;
+    const p = i.get(u.channelId);
+    if (p)
+      return r(this, y, on).call(this, p.element, u), p;
+    const v = r(this, y, an).call(this, u, s);
+    return (g = e(this, dt)) == null || g.observe(v.element), t.contains(v.element) || t.appendChild(v.element), v;
+  })), i.forEach((u, p) => {
+    var v;
+    e(this, Kt).some((g) => g.channelId === p) || ((v = e(this, dt)) == null || v.unobserve(u.element), u.element.remove());
+  }), e(this, D).sort((u, p) => u.element.hasAttribute("offline") && !p.element.hasAttribute("offline") ? 1 : -1).forEach((u) => {
+    t.contains(u.element) || t.appendChild(u.element);
+  });
+}, on = function(t, i) {
+  i.isLive ? t.removeAttribute("offline") : t.setAttribute("offline", ""), t.setAttribute("url", i.thumbnailUrls[0] || ""), t.setAttribute("title", i.name);
+}, an = 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, qt) && s.setAttribute("authentication-token", e(this, qt)), t.isLive || s.setAttribute("offline", ""), t.channelId === i && (s.setAttribute("aria-selected", "true"), d(this, L, s)), s.tabIndex = -1, s.onclick = () => r(this, y, hn).call(this, t), { element: s, thumbnail: t.thumbnailUrls[0] || "", id: t.channelId };
+}, ln = function(t) {
+  e(this, D).forEach((i) => {
+    i.id === t ? (i.element.setAttribute("aria-selected", "true"), i.element.tabIndex = 0, d(this, L, i.element)) : (i.element.tabIndex = -1, i.element.setAttribute("aria-selected", "false"));
+  });
+}, cn = function() {
+  this.hasAttribute("hidden") || e(this, D).forEach((t) => t.element.updateThumbnail());
+}, hn = function(t) {
+  var i;
+  (i = e(this, ut)) == null || i.setAttribute("channel-id", t.channelId);
+}, dn = function(t) {
+  var p, v, g;
+  const { key: i, ctrlKey: s, altKey: o, metaKey: u } = t;
+  s || o || u || this.keysUsed.includes(i) && (t.preventDefault(), t.stopPropagation(), i === "Tab" || i === "Escape" ? ((p = this.parentElement) == null || p.removeAttribute("open"), (v = e(this, ut)) == null || v.focus()) : i === "Enter" || i === " " ? (g = e(this, L)) == null || g.click() : r(this, y, un).call(this, t));
+}, un = function(t) {
+  var p;
+  if (!e(this, L)) return;
+  const { key: i } = t;
+  let o = e(this, D).findIndex((v) => v.element === e(this, L));
+  const u = e(this, L).getBoundingClientRect();
+  switch (i) {
+    case "ArrowUp":
+      if (o = r(this, y, ce).call(this, u, -1, 0), o < 0) {
+        (p = this.parentElement) == null || p.removeAttribute("open");
+        return;
+      }
+      break;
+    case "ArrowDown":
+      o = r(this, y, ce).call(this, u, 1, 0);
+      break;
+    case "ArrowLeft":
+      o = r(this, y, ce).call(this, u, 0, -1);
+      break;
+    case "ArrowRight":
+      o = r(this, y, ce).call(this, u, 0, 1);
+      break;
+    case "Home":
+      o = 0;
+      break;
+    case "End":
+      o = e(this, D).length - 1;
+      break;
+  }
+  if (o >= 0 && o < e(this, D).length) {
+    const v = e(this, D)[o];
+    if (!v) return;
+    e(this, L).setAttribute("aria-selected", "false"), e(this, L).tabIndex = -1, d(this, L, v.element), e(this, L).setAttribute("aria-selected", "true"), e(this, L).tabIndex = 0, e(this, L).focus();
+  }
+}, ce = function(t, i, s) {
+  let o = -1, u = 1 / 0;
+  return e(this, D).filter((p) => p.element.getBoundingClientRect().width > 0).forEach((p, v) => {
+    const g = p.element.getBoundingClientRect(), P = i === 0 || i < 0 && g.top < t.top || i > 0 && g.top > t.top, tt = s === 0 || s < 0 && g.left < t.left || s > 0 && g.left > t.left;
+    if (P && tt) {
+      const j = Math.sqrt(
+        Math.pow(g.top - t.top, 2) + Math.pow(g.left - t.left, 2)
+      );
+      j < u && (u = j, o = v);
+    }
+  }), o;
+}, m(en, "observedAttributes", [
+  n.CHANNELS,
+  n.CHANNEL_ID,
+  n.AUTHENTICATION_TOKEN,
+  "mode",
+  "hidden"
+]);
+const ro = (
+  /* 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">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M4 4m0 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" />
+  <path d="M14 4m0 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" />
+  <path d="M4 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" />
+  <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>
+`
+), pn = document.createElement("template");
+pn.innerHTML = /* HTML */
+`
+  <style>
+    :host {
+      display: var(--grid-button-display);
+      cursor: pointer;
+      flex-shrink: 0.5;
+      color: var(--fg-strong);
+    }
+
+    :host([hidden]) {
+      display: none;
+    }
+
+    slot > svg {
+      display: block;
+    }
+  </style>
+  <slot name="button">${ro}</slot>
+`;
+var Xt, R, X, bi, N, bn, Xi, li, Vi, ji;
+const me = class me extends Z {
+  constructor() {
+    var t, i;
+    super();
+    l(this, N);
+    l(this, Xt);
+    l(this, R);
+    l(this, X);
+    l(this, bi, (t) => {
+      t.composedPath().includes(this) || r(this, N, li).call(this);
+    });
+    (t = this.shadowRoot) == null || t.appendChild(pn.content.cloneNode(!0)), d(this, Xt, (i = this.shadowRoot) == null ? void 0 : i.querySelector("slot[name=button]"));
+  }
+  connectedCallback() {
+    var i;
+    super.connectedCallback(), this.setAttribute("aria-haspopup", "listbox"), this.enable(), r(this, N, Vi).call(this);
+    const t = this.getRootNode();
+    (t instanceof Document || t instanceof ShadowRoot) && (d(this, R, t.querySelector("vindral-channel-grid")), ((i = e(this, R).parentElement) == null ? void 0 : i.localName) === "vindral-scroll-overlay" && (e(this, R).hidden = !1, e(this, R).style.position = "relative", d(this, X, e(this, R).parentElement))), r(this, N, ji).call(this);
+  }
+  disconnectedCallback() {
+  }
+  attributeChangedCallback(t, i, s) {
+    super.attributeChangedCallback(t, i, s), (t === n.CHANNEL_GROUP_ID || t === n.CHANNELS) && r(this, N, Vi).call(this);
+  }
+  enable() {
+    super.enable(), document.addEventListener("click", e(this, bi));
+  }
+  handleClick(t) {
+    r(this, N, bn).call(this);
+  }
+  get isOpen() {
+    var t, i;
+    return ((t = e(this, X)) == null ? void 0 : t.hasAttribute("open")) || !((i = e(this, R)) != null && i.hidden);
+  }
+};
+Xt = new WeakMap(), R = new WeakMap(), X = new WeakMap(), bi = new WeakMap(), N = new WeakSet(), bn = function() {
+  var t;
+  e(this, X) ? e(this, X).hasAttribute("open") ? r(this, N, li).call(this) : r(this, N, Xi).call(this) : (t = e(this, R)) != null && t.hidden ? r(this, N, Xi).call(this) : r(this, N, li).call(this), r(this, N, ji).call(this);
+}, Xi = function() {
+  var t;
+  if (e(this, X))
+    e(this, X).setAttribute("open", "");
+  else {
+    if (!((t = e(this, R)) != null && t.hidden)) return;
+    e(this, R).hidden = !1, e(this, R).focus();
+  }
+  e(this, Xt).setAttribute("aria-expanded", "true");
+}, li = function() {
+  if (e(this, X))
+    e(this, X).removeAttribute("open");
+  else {
+    if (!e(this, R) || e(this, R).hidden) return;
+    e(this, R).hidden = !0;
+  }
+  e(this, Xt).setAttribute("aria-expanded", "false");
+}, Vi = function() {
+  this.getAttribute(n.CHANNEL_GROUP_ID) ? this.removeAttribute("hidden") : this.setAttribute("hidden", ""), this.hasAttribute(n.CHANNELS) ? this.removeAttribute("disabled") : this.setAttribute("disabled", "");
+}, ji = function() {
+  this.setAttribute("aria-label", this.isOpen ? "Exit grid" : "Enter grid");
+}, m(me, "observedAttributes", [
+  ...G(me, me, "observedAttributes"),
+  n.CHANNEL_GROUP_ID,
+  n.CHANNELS,
+  "hidden"
+]);
+let qi = me;
+const mn = document.createElement("template");
+mn.innerHTML = /* HTML */
+`
+  <style>
+    :host {
+      display: flex;
+      width: 100%;
+      align-items: center;
+    }
+
+    slot {
+      display: flex;
+      flex-grow: 1;
+      align-items: center;
+    }
+
+    :host([content-center]) slot {
+      justify-content: center;
+    }
+
+    slot[name="right"] {
+      justify-content: flex-end;
+    }
+  </style>
+
+  <slot name="bar">
+    <slot></slot>
+    <slot name="right"></slot>
+  </slot>
+`;
+class vn extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }).appendChild(mn.content.cloneNode(!0));
+  }
+  connectedCallback() {
+  }
+  disconnectedCallback() {
+  }
+}
+m(vn, "observedAttributes", []);
+class oo extends ri {
+  constructor(t) {
+    super();
+    m(this, "config");
+    m(this, "hlsUrl");
+    m(this, "element");
+    m(this, "connectingTimeout");
+    /**
+     * Update authentication token on an already established and authenticated connection.
+     */
+    m(this, "updateAuthenticationToken", (t) => {
+    });
+    /**
+     * Fully unloads the instance. This disconnects the current listeners.
+     */
+    m(this, "unload", () => {
+      this.element && (this.element.removeEventListener("webkitplaybacktargetavailabilitychanged", this.onAirPlayAvailable), this.element.removeEventListener("webkitcurrentplaybacktargetiswirelesschanged", this.onAirPlayPlaybackChanged), this.element.remove());
+    });
+    m(this, "onAirPlayAvailable", (t) => {
+      switch (t.availability) {
+        case "available": {
+          this.element.src !== this.hlsUrl && this.checkHlsUrl(this.hlsUrl).then((s) => {
+            s && (this.element.src = this.hlsUrl, this.emit("available"));
+          });
+          break;
+        }
+      }
+    });
+    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);
+  }
+  /**
+   * True if the instance is casting right now.
+   */
+  get casting() {
+    return this.element.webkitCurrentPlaybackTargetIsWireless;
+  }
+  /**
+   * Set the current channelId.
+   */
+  set channelId(t) {
+  }
+  /* eslint-disable @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-call */
+  /**
+   * Show the AirPlay picker.
+   */
+  showPlaybackTargetPicker() {
+    this.element.paused && (this.element.play(), this.connectingTimeout = window.setTimeout(() => {
+      this.element.webkitCurrentPlaybackTargetIsWireless || (this.element.pause(), this.element.src = "", this.element.src = this.hlsUrl);
+    }, 3e4)), this.element.webkitShowPlaybackTargetPicker();
+  }
+  /**
+   * Returns if AirPlay is supported.
+   */
+  static isAirPlaySupported() {
+    return !!window.WebKitPlaybackTargetAvailabilityEvent;
+  }
+  checkHlsUrl(t) {
+    return $(this, null, function* () {
+      try {
+        return (yield fetch(t, { method: "HEAD" })).ok;
+      } catch (i) {
+        return !1;
+      }
+    });
+  }
+  /* eslint-enable @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-call */
+}
+const Tt = class Tt extends ri {
+  constructor(t) {
+    super();
+    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);
+    });
+    m(this, "request", () => $(this, null, function* () {
+      try {
+        yield this.requestFn();
+      } catch (t) {
+        throw this.onChange(), t;
+      }
+    }));
+    m(this, "exit", () => $(this, null, function* () {
+      try {
+        yield this.exitFn();
+      } catch (t) {
+        throw this.onChange(), t;
+      }
+    }));
+    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 */
+    m(this, "isFullscreen", () => !!(document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen));
+    m(this, "isSupported", () => Tt.isFullscreenApiSupported(this.container) || !this.isInIframe());
+    m(this, "isFullscreenApiSupported", () => Tt.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 Tt.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 (Tt.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();
+    });
+  }
+  /* eslint-enable @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call,@typescript-eslint/unbound-method */
+};
+m(Tt, "isFullscreenApiSupported", (t) => (t.requestFullscreen || t.webkitRequestFullscreen || t.webkitEnterFullscreen || t.mozRequestFullScreen) !== void 0);
+let ue = Tt;
+var mi, vi, gi, fi, Vt, Ei, Ai, Ue, jt;
+class ao extends ri {
+  constructor(t) {
+    super();
+    m(this, "unload", () => {
+      this.element.removeEventListener("enterpictureinpicture", this.onChange), this.element.removeEventListener("leavepictureinpicture", this.onChange);
+    });
+    m(this, "request", () => $(this, null, function* () {
+      try {
+        return yield e(this, mi).call(this);
+      } catch (t) {
+        throw this.onChange(), t;
+      }
+    }));
+    m(this, "exit", () => $(this, null, function* () {
+      try {
+        return yield e(this, vi).call(this);
+      } catch (t) {
+        throw this.onChange(), t;
+      }
+    }));
+    m(this, "onChange", () => {
+      this.emit("on picture in picture change", this.isPictureInPictureActive());
+    });
+    m(this, "isPictureInPictureActive", () => e(this, Ai).call(this) || e(this, Ei).call(this));
+    m(this, "isSupported", () => e(this, jt).call(this) || e(this, Vt).call(this));
+    l(this, mi, () => e(this, Vt).call(this) ? e(this, gi).call(this) : e(this, jt).call(this) ? e(this, Ue).call(this, "picture-in-picture") : Promise.resolve());
+    l(this, vi, () => this.isPictureInPictureActive() ? e(this, Vt).call(this) ? e(this, fi).call(this) : e(this, jt).call(this) ? e(this, Ue).call(this, "inline") : Promise.resolve() : Promise.resolve());
+    l(this, gi, () => $(this, null, function* () {
+      yield this.element.requestPictureInPicture();
+    }));
+    l(this, fi, () => $(this, null, function* () {
+      yield document.exitPictureInPicture();
+    }));
+    l(this, Vt, () => !!this.element.requestPictureInPicture && !!document.pictureInPictureEnabled);
+    l(this, Ei, () => !!document.pictureInPictureElement);
+    l(this, Ai, () => this.element.webkitPresentationMode === "picture-in-picture");
+    l(this, Ue, (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", "");
+  }
+}
+mi = new WeakMap(), vi = new WeakMap(), gi = new WeakMap(), fi = new WeakMap(), Vt = new WeakMap(), Ei = new WeakMap(), Ai = new WeakMap(), Ue = new WeakMap(), jt = new WeakMap();
+class Os extends ri {
+  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 u = i[o];
+        if (u) {
+          const p = u ** 2;
+          s = Math.max(p, s);
+        }
+      }
+    } else {
+      t.getByteTimeDomainData(i);
+      for (let o = 0; o < i.length; o++) {
+        const u = i[o];
+        if (u) {
+          const p = (u / 128 - 1) ** 2;
+          s = Math.max(p, 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 Hs = (h) => {
+  var t;
+  let a = "observedAttributes" in h.constructor ? h.constructor.observedAttributes : void 0;
+  return !a && ((t = h.nodeName) != null && t.includes("-")) && (globalThis.customElements.upgrade(h), a = "observedAttributes" in h.constructor ? h.constructor.observedAttributes : void 0), Array.isArray(a) ? a.filter((i) => $s.includes(i)) : [];
+}, gn = document.createElement("template");
+gn.innerHTML = /* HTML */
+`
+  <style>
+    :host {
+      position: relative;
+    }
+
+    slot > svg {
+      display: block;
+    }
+
+    :host([hidden]) {
+      display: none;
+    }
+  </style>
+`;
+var Yt, Jt, z, _e, yi, ki, ae, fn, En;
+class xs extends Z {
+  constructor() {
+    var t;
+    super();
+    l(this, ae);
+    l(this, Yt);
+    l(this, Jt);
+    l(this, z);
+    l(this, _e, null);
+    l(this, yi, (t) => {
+      t.composedPath().includes(this) || this.hide();
+    });
+    l(this, ki, () => {
+      this.hide();
+    });
+    (t = this.shadowRoot) == null || t.appendChild(gn.content.cloneNode(!0));
+  }
+  connectedCallback() {
+    var u, p, v, g;
+    super.connectedCallback(), this.setAttribute("role", "button"), this.setAttribute("aria-haspopup", "listbox");
+    const t = (u = this.getAttribute("list-position")) != null ? u : "top";
+    (p = e(this, Jt)) == null || p.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) && (d(this, _e, i.querySelector("vindral-controller")), (P = e(this, _e)) == null || P.connectListener(this));
+    });
+  }
+  set button(t) {
+    d(this, Yt, t);
+  }
+  set listbox(t) {
+    d(this, Jt, t);
+  }
+  set listboxSlot(t) {
+    d(this, z, t);
+  }
+  enable() {
+    super.enable(), this.addEventListener("change", e(this, ki)), document.addEventListener("click", e(this, yi));
+  }
+  hide() {
+    var t, i;
+    !e(this, z) || (t = e(this, z)) != null && t.hidden || (e(this, z).hidden = !0, (i = e(this, Yt)) == null || i.setAttribute("aria-expanded", "false"), this.dispatchEvent(new CustomEvent(f.UNLOCK_UI, { bubbles: !0, composed: !0 })), this.focus());
+  }
+  handleClick(t) {
+    e(this, z) && !t.composedPath().includes(e(this, z)) && r(this, ae, fn).call(this);
+  }
+}
+Yt = new WeakMap(), Jt = new WeakMap(), z = new WeakMap(), _e = new WeakMap(), yi = new WeakMap(), ki = new WeakMap(), ae = new WeakSet(), fn = function() {
+  var t;
+  (t = e(this, z)) != null && t.hidden ? r(this, ae, En).call(this) : this.hide();
+}, En = function() {
+  var t, i, s;
+  (t = e(this, z)) != null && t.hidden && (e(this, z).hidden = !1, (i = e(this, Yt)) == null || i.setAttribute("aria-expanded", "true"), (s = e(this, Jt)) == null || s.focus(), this.dispatchEvent(new CustomEvent(f.LOCK_UI, { bubbles: !0, composed: !0 })));
+};
+const An = document.createElement("template");
+An.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));
+
+      --button-padding: var(--vindral-button-padding, var(--padding-2));
+
+      --ui-font: var(
+        --vindral-ui-font,
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        Roboto,
+        "Helvetica Neue",
+        Arial,
+        sans-serif
+      );
+      --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);
+      --pip-button-display: var(--vindral-pip-button-display, flex);
+      --fullscreen-button-display: var(--vindral-fullscreen-button-display, flex);
+      --cast-button-display: var(--vindral-cast-button-display, flex);
+      --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;
+      background-color: var(--bg-strong);
+      width: 100%;
+      container-type: inline-size;
+      overflow: hidden;
+      font-family: var(--ui-font);
+    }
+
+    #ui {
+      position: absolute;
+      display: flex;
+      justify-content: space-between;
+      flex-direction: column;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      transition: opacity 0.5s;
+      user-select: none;
+      pointer-events: auto;
+
+      // Ensure the #ui element is above the video element on Safari
+      z-index: 1;
+    }
+
+    #ui > * {
+      pointer-events: auto;
+      display: var(--ui-display);
+    }
+
+    #video {
+      cursor: none;
+      display: flex;
+      width: 100%;
+      z-index: 0;
+    }
+
+    #video > canvas {
+      object-fit: contain;
+    }
+
+    slot#middle {
+      align-items: center;
+      justify-content: center;
+      flex-grow: 1;
+    }
+
+    slot#top-bar {
+      background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
+      padding: var(--control-padding);
+    }
+
+    slot#bottom-bar {
+      padding: var(--control-padding);
+      background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
+    }
+
+    :host(:focus-visible) {
+      outline: none;
+    }
+
+    :host(
+        :not([${n.USER_INTERACTING}]
+        ):not([${n.PAUSED}]:not([${n.HIDE_UI_ON_PAUSE}])
+        ):not([${n.IS_CASTING}]
+        ):not([${n.MEDIA}="audio"])
+      )
+      #ui {
+      opacity: 0;
+      cursor: none;
+      pointer-events: none;
+    }
+
+    :host(
+      :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([${n.FULLSCREEN}][${n.FULLSCREEN_FALLBACK}]) {
+      position: fixed !important;
+      inset: 0 !important;
+      margin: 0 !important;
+      box-sizing: border-box !important;
+      min-width: 0 !important;
+      max-width: none !important;
+      min-height: 0 !important;
+      max-height: none !important;
+      width: 100% !important;
+      height: 100% !important;
+      transform: none !important;
+      z-index: 1000 !important;
+      background: black;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+
+      /* intentionally not !important */
+      object-fit: contain;
+    }
+
+    :host([${n.MEDIA}="audio"]) {
+      min-height: 100px;
+      overflow: visible;
+    }
+  </style>
+
+  <div id="video"></div>
+
+  <slot id="overlay" name="overlay"></slot>
+
+  <div id="ui">
+    <slot id="top-bar" name="top-bar"></slot>
+    <slot id="middle" name="middle"></slot>
+    <slot id="bottom-bar"></slot>
+    <slot id="overlay-interactive" name="overlay-interactive"></slot>
+  </div>
+`;
+const Fi = ["ArrowDown", "ArrowLeft", "ArrowRight", "Tab", "Enter", " ", "f", "m"];
+var wi, et, Pe, pt, bt, b, Me, it, st, Qt, nt, B, mt, F, rt, De, Fe, U, vt, c, Yi, yn, kn, wn, Ji, In, Cn, Ln, Oe, Tn, xn, Sn, Nn, He, Ii, Ci, Rn, Nt, Qi, Wi, ci, ht, Un, _n, Pn, Zi, Li, Ti, ts, A, C;
+const ve = class ve extends HTMLElement {
+  constructor() {
+    super();
+    l(this, c);
+    l(this, et, /* @__PURE__ */ new Map());
+    l(this, Pe, 2e3);
+    l(this, pt, null);
+    l(this, bt, null);
+    l(this, b);
+    l(this, Me, e(ve, wi));
+    l(this, it);
+    l(this, st);
+    l(this, Qt);
+    l(this, nt);
+    l(this, B);
+    l(this, mt);
+    l(this, F);
+    l(this, rt);
+    l(this, De);
+    l(this, Fe);
+    l(this, U);
+    l(this, vt, null);
+    l(this, Oe, 0);
+    m(this, "handleEvent", (t) => {
+      switch (t.type) {
+        case "pointerdown":
+          d(this, Oe, t.timeStamp);
+          break;
+        case "pointermove":
+          r(this, c, Tn).call(this, t);
+          break;
+        case "pointerup":
+          r(this, c, xn).call(this, t);
+          break;
+        case "mouseleave":
+          r(this, c, ht).call(this);
+          break;
+        case "dblclick":
+          r(this, c, Sn).call(this, t);
+          break;
+        case "mousemove":
+          r(this, c, Nn).call(this, t);
+          break;
+        case "keydown":
+          e(this, Ci).call(this, t);
+          break;
+        case "keyup":
+          r(this, c, ht).call(this), e(this, Ii).call(this, t);
+          break;
+      }
+    });
+    l(this, He, (t) => {
+      var i;
+      if (e(this, b) && (e(this, U).debug("Vindral event", { type: t.type }), t instanceof CustomEvent))
+        switch (t.type) {
+          case f.PLAY:
+            this.removeAttribute(n.PAUSED);
+            break;
+          case f.PAUSE:
+            this.setAttribute(n.PAUSED, "");
+            break;
+          case f.MUTE:
+            this.setAttribute(n.MUTED, "");
+            break;
+          case f.UNMUTE:
+            this.removeAttribute(n.MUTED);
+            break;
+          case f.LOCK_UI:
+            this.setAttribute(n.UI_LOCKED, "");
+            break;
+          case f.UNLOCK_UI:
+            this.removeAttribute(n.UI_LOCKED);
+            break;
+          case f.ENTER_FULLSCREEN:
+            this.setAttribute(n.FULLSCREEN, "");
+            break;
+          case f.EXIT_FULLSCREEN:
+            this.removeAttribute(n.FULLSCREEN);
+            break;
+          case f.SET_RENDITION:
+            {
+              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 f.CHANNEL_GRID_OPENED: {
+            e(this, vt) === null && r(this, c, Qi).call(this);
+            break;
+          }
+          case f.CHANNEL_GRID_CLOSED: {
+            e(this, vt) !== null && (clearTimeout(e(this, vt)), d(this, vt, null));
+            break;
+          }
+          case f.ENTER_PIP:
+            this.setAttribute(n.IS_PIP, "");
+            break;
+          case f.EXIT_PIP:
+            this.removeAttribute(n.IS_PIP);
+            break;
+          case f.REQUEST_AIRPLAY:
+            (i = e(this, mt)) == null || i.showPlaybackTargetPicker();
+            break;
+          case f.SET_LANGUAGE:
+            x(t.detail) ? this.setAttribute(n.LANGUAGE, t.detail) : this.removeAttribute(n.LANGUAGE);
+            break;
+          case f.SET_TEXT_TRACK:
+            x(t.detail) ? this.setAttribute(n.TEXT_TRACK, t.detail) : this.removeAttribute(n.TEXT_TRACK);
+            break;
+          case f.REQUEST_USER_INPUT:
+            r(this, c, C).call(this, n.NEEDS_USER_INPUT), e(this, b).play();
+            break;
+          case f.SET_VOLUME:
+            {
+              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, Ii, (t) => {
+      const { key: i } = t;
+      if (!Fi.includes(i)) {
+        this.removeEventListener("keyup", this);
+        return;
+      }
+      r(this, c, Rn).call(this, t);
+    });
+    l(this, Ci, (t) => {
+      const { metaKey: i, altKey: s, key: o } = t;
+      i || s || !Fi.includes(o) || this.addEventListener("keyup", this, { once: !0 });
+    });
+    l(this, Nt, null);
+    l(this, Li, () => {
+      var i, s, o;
+      if (!("orientation" in screen) || !screen.orientation.lock)
+        return;
+      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, Ti, () => {
+      !("orientation" in screen) || !screen.orientation.unlock || screen.orientation.unlock();
+    });
+    this.attachShadow({ mode: "open" }).appendChild(An.content.cloneNode(!0));
+    const i = Di(this.getAttribute("log-level"));
+    d(this, U, Kr.get().createContext("VindralController")), e(this, U).setLevel(i);
+  }
+  connectedCallback() {
+    return $(this, null, function* () {
+      T(this.getAttribute("auto-instance-enabled"), !0) && (yield r(this, c, Yi).call(this));
+      for (const i of Object.values(f))
+        this.addEventListener(i, e(this, He));
+      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, i, s, o;
+    (t = e(this, b)) == null || t.unload(), (i = e(this, nt)) == null || i.unload(), (s = e(this, B)) == null || s.unload(), (o = e(this, F)) == null || o.unload();
+    for (const u of Object.values(f))
+      this.removeEventListener(u, e(this, He));
+    this.disconnectListener(this);
+  }
+  attributeChangedCallback(t, i, s) {
+    var o, u, p, v, g, P, tt, j, It, Ct, Lt;
+    if (i != s)
+      switch (e(this, U).debug("Attribute changed", { name: t, oldValue: i, newValue: s }), t) {
+        case "channel-id":
+          d(this, it, s), e(this, b) && s && (e(this, b).channelId = s, e(this, b).play(), r(this, c, A).call(this, n.BUFFERING, ""), r(this, c, A).call(this, n.CHANNEL_ID, s), r(this, c, A).call(this, n.POSTER_SRC, e(this, b).getThumbnailUrl()));
+          break;
+        case "channel-group-id":
+          d(this, st, s);
+          break;
+        case "url":
+          s && d(this, Me, s);
+          break;
+        case "paused":
+          x(s) ? (o = e(this, b)) == null || o.pause() : (u = e(this, b)) == null || u.play();
+          break;
+        case "target-buffer-time":
+          if (e(this, b) && s) {
+            const Ot = parseInt(s, 10);
+            Number.isNaN(Ot) || (e(this, b).targetBufferTime = Ot);
+          }
+          break;
+        case "user-interacting":
+          x(s) ? r(this, c, A).call(this, n.USER_INTERACTING, "") : r(this, c, C).call(this, n.USER_INTERACTING);
+          break;
+        case "muted":
+          e(this, b) && (x(s) ? (e(this, b).muted = !0, r(this, c, A).call(this, n.MUTED, ""), (p = e(this, F)) != null && p.isMediaElementSource && ((v = e(this, F)) == null || v.stop(), r(this, c, A).call(this, n.VOLUME_LEVEL, JSON.stringify({ left: null, right: null })))) : (e(this, b).muted = !1, r(this, c, C).call(this, n.MUTED), e(this, b).volume === 0 && (e(this, b).volume = 0.3), (g = e(this, F)) == null || g.start()));
+          break;
+        case "ui-locked":
+          x(s) ? r(this, c, ci).call(this) : r(this, c, ht).call(this);
+          break;
+        case "is-fullscreen":
+          x(s) ? r(this, c, Pn).call(this) : r(this, c, Zi).call(this);
+          break;
+        case "max-video-bit-rate":
+          d(this, Qt, s), x(s) ? r(this, c, A).call(this, n.MAX_VIDEO_BITRATE, s) : r(this, c, C).call(this, n.MAX_VIDEO_BITRATE);
+          break;
+        case "is-pip":
+          x(s) ? r(this, c, Un).call(this) : r(this, c, _n).call(this);
+          break;
+        case "is-airplaying":
+          x(s) ? ((P = e(this, b)) != null && P.mediaElement && (e(this, b).mediaElement.style.display = "hidden"), (tt = e(this, b)) == null || tt.pause()) : (j = e(this, b)) != null && j.mediaElement && (e(this, b).mediaElement.style.display = "block");
+          break;
+        case "is-casting":
+          x(s) ? ((It = e(this, B)) != null && It.isFullscreen() && r(this, c, Zi).call(this), (Ct = e(this, b)) == null || Ct.pause()) : document.hidden || (Lt = e(this, b)) == null || Lt.play();
+          break;
+        case "cast-receiver-id":
+          d(this, De, s);
+          break;
+        case "cast-background":
+          d(this, Fe, s);
+          break;
+        case "language":
+          e(this, b) && (e(this, b).language = s, x(s) ? r(this, c, A).call(this, n.LANGUAGE, s) : r(this, c, C).call(this, n.LANGUAGE));
+          break;
+        case "text-track":
+          e(this, b) && (e(this, b).textTrack = s, x(s) ? r(this, c, A).call(this, n.TEXT_TRACK, s) : r(this, c, C).call(this, n.TEXT_TRACK));
+          break;
+        case "log-level":
+          x(s) && e(this, U).setLevel(Di(s));
+          break;
+        case "authentication-token":
+          x(s) ? r(this, c, A).call(this, n.AUTHENTICATION_TOKEN, s) : r(this, c, C).call(this, n.AUTHENTICATION_TOKEN);
+          break;
+        case "volume":
+          if (e(this, b) && x(s)) {
+            const Ot = parseFloat(s);
+            e(this, b).volume = Ot;
+          }
+          break;
+      }
+  }
+  connectListener(t) {
+    Hs(t).forEach((s) => {
+      var u, p;
+      const o = e(this, et).get(s);
+      switch (o ? o.push(t) : e(this, et).set(s, [t]), s) {
+        case n.PAUSED:
+          (((u = e(this, b)) == null ? void 0 : u.playbackState) === "paused" || this.hasAttribute(n.PAUSED)) && t.setAttribute(n.PAUSED, "");
+          break;
+        case n.MUTED:
+          ((p = e(this, b)) != null && p.muted || this.hasAttribute(n.MUTED)) && t.setAttribute(n.MUTED, "");
+          break;
+        case n.MAX_VIDEO_BITRATE:
+          e(this, Qt) && t.setAttribute(n.MAX_VIDEO_BITRATE, e(this, Qt));
+          break;
+        case n.CHANNEL_ID:
+          e(this, it) && t.setAttribute(n.CHANNEL_ID, e(this, it));
+          break;
+        case n.CHANNEL_GROUP_ID:
+          e(this, st) && t.setAttribute(n.CHANNEL_GROUP_ID, e(this, st));
+          break;
+        case n.AUTHENTICATION_TOKEN: {
+          const v = this.getAttribute("authentication-token");
+          v && t.setAttribute(n.AUTHENTICATION_TOKEN, v);
+          break;
+        }
+      }
+    });
+  }
+  disconnectListener(t) {
+    Hs(t).forEach((s) => {
+      const o = e(this, et).get(s);
+      o && e(this, et).set(
+        s,
+        o.filter((u) => u != t)
+      );
+    });
+  }
+  get instance() {
+    return e(this, b);
+  }
+  connect() {
+    r(this, c, Yi).call(this);
+  }
+};
+wi = new WeakMap(), et = new WeakMap(), Pe = new WeakMap(), pt = new WeakMap(), bt = new WeakMap(), b = new WeakMap(), Me = new WeakMap(), it = new WeakMap(), st = new WeakMap(), Qt = new WeakMap(), nt = new WeakMap(), B = new WeakMap(), mt = new WeakMap(), F = new WeakMap(), rt = new WeakMap(), De = new WeakMap(), Fe = new WeakMap(), U = new WeakMap(), vt = new WeakMap(), c = new WeakSet(), Yi = function() {
+  return $(this, null, function* () {
+    var Us, _s;
+    if (!e(this, it)) return;
+    yield (Us = e(this, b)) == null ? void 0 : Us.unload();
+    const t = this.hasAttribute(n.PAUSED), i = this.hasAttribute(n.MUTED), s = zs(this.getAttribute(n.MEDIA)), o = this.getAttribute(n.TEXT_TRACK) || void 0, u = this.getAttribute("edge-url") || void 0, p = this.getAttribute("authentication-token") || void 0, v = ai(this.getAttribute("max-video-bit-rate")), g = so(this.getAttribute("max-size")), P = ai(this.getAttribute("min-buffer-time")), tt = ai(this.getAttribute("max-buffer-time")), j = T(this.getAttribute("burst-enabled")), It = T(this.getAttribute("mse-enabled")), Ct = T(this.getAttribute("mse-opus-enabled")), Lt = T(this.getAttribute("ios-background-play-enabled")), Ot = T(this.getAttribute("ios-wake-lock-enabled")), Ir = T(this.getAttribute("ios-media-element-enabled")), Cr = T(this.getAttribute("abr-enabled")), Lr = T(this.getAttribute("size-based-resolution-cap-enabled")), Tr = T(this.getAttribute("telemetry-enabled")), xr = io(this.getAttribute("video-codecs")), Ns = Bs(this.getAttribute("poster")), Sr = no(this.getAttribute("advanced")), Nr = Di(this.getAttribute("log-level")), Rr = Ds(this.getAttribute("drm-headers")), Ur = Ds(this.getAttribute("drm-queryparams")), _r = T(this.getAttribute("webtransport-enabled")), Rs = ai(this.getAttribute("reconnect-retries")), Pr = Rs !== void 0 ? (w) => w.reconnectRetries < Rs : void 0;
+    d(this, b, new qr({
+      url: e(this, Me),
+      channelId: e(this, it),
+      channelGroupId: e(this, st),
+      edgeUrl: u,
+      authenticationToken: p,
+      muted: i,
+      media: s,
+      maxSize: g,
+      maxVideoBitRate: v,
+      minBufferTime: P,
+      maxBufferTime: tt,
+      burstEnabled: j,
+      mseEnabled: It,
+      mseOpusEnabled: Ct,
+      iosBackgroundPlayEnabled: Lt,
+      iosWakeLockEnabled: Ot,
+      iosMediaElementEnabled: Ir,
+      abrEnabled: Cr,
+      sizeBasedResolutionCapEnabled: Lr,
+      telemetryEnabled: Tr,
+      videoCodecs: xr,
+      poster: Ns,
+      textTrack: o,
+      advanced: Sr,
+      logLevel: Nr,
+      drm: { headers: Rr, queryParams: Ur },
+      webtransportEnabled: _r,
+      reconnectHandler: Pr
+    })), e(this, b).on("rendition levels", (w) => {
+      const M = w.filter((oi) => {
+        var le;
+        return (le = oi.video) == null ? void 0 : le.width;
+      });
+      r(this, c, A).call(this, n.RENDITION_LEVELS, JSON.stringify(M));
+    }), e(this, b).on("rendition level", (w) => {
+      r(this, c, A).call(this, n.RENDITION_LEVEL, JSON.stringify(w));
+    }), e(this, b).on("playback state", (w) => {
+      switch (w) {
+        case "playing":
+          r(this, c, C).call(this, n.PAUSED), r(this, c, C).call(this, n.BUFFERING);
+          break;
+        case "paused":
+          r(this, c, A).call(this, n.PAUSED, ""), r(this, c, C).call(this, n.BUFFERING);
+          break;
+        case "buffering":
+          r(this, c, C).call(this, n.PAUSED), r(this, c, A).call(this, n.BUFFERING, "");
+          break;
+      }
+    }), e(this, b).on("volume state", (w) => {
+      r(this, c, A).call(this, n.VOLUME, w.volume.toString()), w.isMuted ? r(this, c, A).call(this, n.MUTED, "") : r(this, c, C).call(this, n.MUTED);
+    }), e(this, b).on("channel switch failed", ({ channelId: w }) => {
+      var M;
+      this.setAttribute(n.CHANNEL_ID, w), ((M = e(this, b)) == null ? void 0 : M.playbackState) !== "buffering" && r(this, c, C).call(this, n.BUFFERING);
+    }), e(this, b).on("channel switch", ({ channelId: w }) => {
+      var M;
+      e(this, it) !== w && this.setAttribute(n.CHANNEL_ID, w), ((M = e(this, b)) == null ? void 0 : M.playbackState) !== "buffering" && r(this, c, C).call(this, n.BUFFERING);
+    }), e(this, b).on("channels", (w) => {
+      d(this, Nt, Date.now()), r(this, c, A).call(this, n.CHANNELS, JSON.stringify(w));
+    }), e(this, b).on("languages", (w) => {
+      var M;
+      r(this, c, A).call(this, n.LANGUAGES, JSON.stringify(w)), (M = e(this, b)) != null && M.language && r(this, c, A).call(this, n.LANGUAGE, e(this, b).language);
+    }), e(this, b).on("text tracks", (w) => {
+      var M, oi, le;
+      r(this, c, A).call(this, n.TEXT_TRACKS, JSON.stringify(w)), (M = e(this, b)) != null && M.textTrack && r(this, c, A).call(this, n.TEXT_TRACK, (le = (oi = e(this, b)) == null ? void 0 : oi.textTrack) != null ? le : "");
+    }), e(this, b).on("needs user input", () => {
+      r(this, c, A).call(this, n.NEEDS_USER_INPUT, "");
+    }), e(this, b).on("is live", (w) => {
+      w || r(this, c, C).call(this, n.BUFFERING);
+    }), d(this, bt, (_s = this.shadowRoot) == null ? void 0 : _s.querySelector("#video")), e(this, bt) && e(this, b).attach(e(this, bt)), this.setAttribute(n.MEDIA, e(this, b).media), e(this, b).muted && r(this, c, A).call(this, n.MUTED, ""), r(this, c, A).call(this, n.VOLUME, e(this, b).volume.toString()), x(Ns) || r(this, c, A).call(this, n.POSTER_SRC, e(this, b).getThumbnailUrl());
+    const Mr = T(this.getAttribute(n.AIRPLAY_ENABLED), !1), Dr = T(this.getAttribute(n.CAST_ENABLED), !0), Fr = T(this.getAttribute(n.FULLSCREEN_ENABLED), !0), Or = T(this.getAttribute(n.PIP_ENABLED), !0), Hr = T(this.getAttribute(n.VU_METER_ENABLED), !1);
+    Mr && r(this, c, Cn).call(this, e(this, b)), Dr && r(this, c, wn).call(this, e(this, b)), Fr && r(this, c, kn).call(this, e(this, b)), Or && r(this, c, yn).call(this, e(this, b)), t || e(this, b).play(), Hr && r(this, c, Ln).call(this, e(this, b)), this.dispatchEvent(
+      new CustomEvent("vindral-instance-ready", { bubbles: !0, composed: !0, detail: e(this, b) })
+    );
+  });
+}, yn = function(t) {
+  t.mediaElement instanceof HTMLVideoElement && (d(this, nt, new ao(t.mediaElement)), e(this, nt).isSupported() && (e(this, U).info("PIP is supported"), r(this, c, A).call(this, n.PIP_AVAILABLE, "")), e(this, nt).on("on picture in picture change", (i) => {
+    i ? r(this, c, A).call(this, n.IS_PIP, "") : r(this, c, C).call(this, n.IS_PIP);
+  }));
+}, kn = function(t) {
+  const i = !ue.isFullscreenApiSupported(this) && ue.isFullscreenApiSupported(t.mediaElement) ? t.mediaElement : this;
+  d(this, B, new ue(i)), e(this, B).on("on fullscreen change", (s) => {
+    s ? r(this, c, A).call(this, n.FULLSCREEN, "") : r(this, c, C).call(this, n.FULLSCREEN);
+  });
+}, wn = function(t) {
+  d(this, rt, new Jr({
+    background: e(this, Fe),
+    receiverApplicationId: e(this, De),
+    options: t.getCastOptions()
+  })), e(this, rt).init().then(() => {
+    var i, s, o;
+    r(this, c, A).call(this, n.CAST_AVAILABLE, ""), (i = e(this, rt)) == null || i.on("connected", r(this, c, Ji).bind(this)), (s = e(this, rt)) == null || s.on("resumed", r(this, c, Ji).bind(this)), (o = e(this, rt)) == null || o.on("disconnected", r(this, c, In).bind(this));
+  }).catch((i) => {
+    e(this, U).warn("Failed to initialize CastSender", i);
+  });
+}, Ji = function() {
+  var i, s;
+  r(this, c, A).call(this, n.IS_CASTING, "");
+  const t = (s = (i = e(this, rt)) == null ? void 0 : i.getReceiverName()) != null ? s : "device";
+  r(this, c, A).call(this, n.CAST_RECEIVER_NAME, t);
+}, In = function() {
+  r(this, c, C).call(this, n.IS_CASTING), r(this, c, C).call(this, n.CAST_RECEIVER_NAME);
+}, Cn = function(t) {
+  const i = t.getCastOptions();
+  d(this, mt, new oo({
+    url: i.url,
+    channelId: i.channelId,
+    authenticationToken: i.authenticationToken,
+    container: this
+  })), e(this, mt).once("available", () => {
+    r(this, c, A).call(this, n.AIRPLAY_AVAILABLE, "");
+  }), e(this, mt).on("connected", () => {
+    r(this, c, A).call(this, n.IS_AIRPLAYING, "");
+  }), e(this, mt).on("disconnected", () => {
+    r(this, c, C).call(this, n.IS_AIRPLAYING);
+  });
+}, Ln = function(t) {
+  var i;
+  if ((i = e(this, F)) == null || i.unload(), !Xr()) {
+    if (t.audioNode)
+      d(this, F, new Os(t.audioNode));
+    else if (t.mediaElement instanceof HTMLMediaElement)
+      d(this, F, new Os(t.mediaElement));
+    else
+      return;
+    e(this, F).on("on decibel change", (s) => {
+      r(this, c, A).call(this, n.VOLUME_LEVEL, JSON.stringify(s));
+    }), r(this, c, A).call(this, n.VOLUME_LEVEL, JSON.stringify({ left: null, right: null })), (!e(this, F).isMediaElementSource || !this.hasAttribute(n.MUTED)) && e(this, F).start();
+  }
+}, Oe = new WeakMap(), Tn = function(t) {
+  t.pointerType !== "mouse" && t.timeStamp - e(this, Oe) < 250 || (r(this, c, ci).call(this), e(this, pt) && clearTimeout(e(this, pt)), t.target instanceof HTMLElement && ([this, e(this, bt)].includes(t.target) || t.target.localName === "vindral-scroll-overlay") && r(this, c, ht).call(this));
+}, xn = function(t) {
+  const i = this.hasAttribute(n.USER_INTERACTING);
+  t.pointerType === "touch" && t.target instanceof HTMLElement ? [this, e(this, bt)].includes(t.target) && i ? r(this, c, Wi).call(this) : r(this, c, ht).call(this) : t.composedPath().some((s) => s instanceof HTMLElement && ["vindral-play-button"].includes(s == null ? void 0 : s.localName)) && r(this, c, ht).call(this);
+}, Sn = function(t) {
+  !e(this, B) || t.target instanceof Z || t.target instanceof xs || (this.hasAttribute(n.FULLSCREEN) ? this.removeAttribute(n.FULLSCREEN) : this.setAttribute(n.FULLSCREEN, ""));
+}, Nn = function(t) {
+  this.hasAttribute(n.USER_INTERACTING) || r(this, c, ht).call(this);
+}, He = new WeakMap(), Ii = new WeakMap(), Ci = new WeakMap(), Rn = function(t) {
+  var p, v;
+  const { metaKey: i, altKey: s, key: o } = t;
+  if (!(i || s || !Fi.includes(o) || (((p = t.target) == null ? void 0 : p.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;
+    }
+}, Nt = new WeakMap(), Qi = function() {
+  return $(this, null, function* () {
+    if (!e(this, b) || !e(this, st))
+      return;
+    const t = Date.now();
+    if (e(this, Nt) && t - e(this, Nt) < 1e4)
+      e(this, U).debug("Skipping channel update, last update was less than 10 seconds ago.");
+    else {
+      d(this, Nt, t);
+      const i = yield e(this, b).getApiClient().getChannels(e(this, st));
+      r(this, c, A).call(this, n.CHANNELS, JSON.stringify(i));
+    }
+    d(this, vt, window.setTimeout(() => void r(this, c, Qi).call(this), 1e4));
+  });
+}, Wi = 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(n.USER_INTERACTING));
+}, ci = 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 } })
+    );
+  });
+}, ht = function() {
+  r(this, c, ci).call(this), e(this, pt) && clearTimeout(e(this, pt)), e(this, Pe) && d(this, pt, self.setTimeout(() => {
+    r(this, c, Wi).call(this);
+  }, e(this, Pe)));
+}, Un = function() {
+  var t;
+  r(this, c, ts).call(this), (t = e(this, nt)) == null || t.request().catch((i) => {
+    e(this, U).warn("Failed to enter picture in picture:", i);
+  });
+}, _n = function() {
+  var t;
+  (t = e(this, nt)) == null || t.exit().catch((i) => {
+    e(this, U).warn("Failed to exit picture in picture:", i);
+  });
+}, Pn = function() {
+  var t, i;
+  (t = e(this, B)) != null && t.isFullscreenApiSupported() ? (r(this, c, ts).call(this), (i = e(this, B)) == null || i.request().then(() => {
+    e(this, Li).call(this);
+  }).catch((s) => {
+    e(this, U).warn("Failed to enter fullscreen:", s);
+  })) : (this.setAttribute(n.FULLSCREEN_FALLBACK, ""), r(this, c, A).call(this, n.FULLSCREEN, ""));
+}, Zi = function() {
+  var t, i;
+  (t = e(this, B)) != null && t.isFullscreenApiSupported() ? (i = e(this, B)) == null || i.exit().then(() => {
+    e(this, Ti).call(this);
+  }).catch((s) => {
+    e(this, U).warn("Failed to exit fullscreen:", s);
+  }) : (this.removeAttribute(n.FULLSCREEN_FALLBACK), r(this, c, C).call(this, n.FULLSCREEN));
+}, Li = new WeakMap(), Ti = new WeakMap(), ts = function() {
+  if (!e(this, b)) return;
+  e(this, b).emitter.emit("ios-hack: reset size");
+}, A = function(t, i) {
+  var s;
+  (s = e(this, et).get(t)) == null || s.forEach((o) => o.setAttribute(t, i));
+}, C = function(t) {
+  var i;
+  (i = e(this, et).get(t)) == null || i.forEach((s) => s.removeAttribute(t));
+}, m(ve, "observedAttributes", [
+  ...$s,
+  "url",
+  "edge-url",
+  "target-buffer-time",
+  "cast-receiver-id",
+  "cast-background",
+  "log-level",
+  "max-size",
+  "min-buffer-time",
+  "max-buffer-time",
+  "max-audio-bit-rate",
+  "burst-enabled",
+  "mse-enabled",
+  "mse-opus-enabled",
+  "ios-background-play-enabled",
+  "ios-wake-lock-enabled",
+  "ios-media-element-enabled",
+  "abr-enabled",
+  "size-based-resolution-cap-enabled",
+  "telemetry-enabled",
+  "video-codecs",
+  "poster",
+  "advanced",
+  "drm-headers",
+  "drm-queryparams",
+  "webtransport-enabled",
+  "reconnect-retries",
+  "auto-instance-enabled"
+]), l(ve, wi, "https://lb.cdn.vindral.com");
+let Ce = ve;
+const Mn = document.createElement("template"), lo = (
+  /* 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>
+`
+), co = (
+  /* 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>
+`
+);
+Mn.innerHTML = /* HTML */
+`
+  <style>
+    :host {
+      display: var(--fullscreen-button-display);
+    }
+
+    slot > svg {
+      display: block;
+    }
+
+    :host([${n.FULLSCREEN}]) slot[name="enter"] {
+      display: none !important;
+    }
+
+    :host(:not([${n.FULLSCREEN}])) slot[name="exit"] {
+      display: none !important;
+    }
+  </style>
+
+  <slot name="icon">
+    <slot name="enter">${lo}</slot>
+    <slot name="exit">${co}</slot>
+  </slot>
+`;
+const ge = class ge extends Z {
+  constructor() {
+    var a;
+    super(), (a = this.shadowRoot) == null || a.appendChild(Mn.content.cloneNode(!0));
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("aria-label", this.isFullscreen ? "Exit fullscreen" : "Enter fullscreen");
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  attributeChangedCallback(a, t, i) {
+    super.attributeChangedCallback(a, t, i), a === n.FULLSCREEN && this.setAttribute("aria-label", this.isFullscreen ? "Exit fullscreen" : "Enter fullscreen");
+  }
+  set isFullscreen(a) {
+    a ? this.setAttribute(n.FULLSCREEN, "") : this.removeAttribute(n.FULLSCREEN);
+  }
+  get isFullscreen() {
+    return this.hasAttribute(n.FULLSCREEN);
+  }
+  handleClick(a) {
+    const t = this.isFullscreen ? f.EXIT_FULLSCREEN : f.ENTER_FULLSCREEN;
+    this.dispatchEvent(new CustomEvent(t, { bubbles: !0, composed: !0 }));
+  }
+};
+m(ge, "observedAttributes", [...G(ge, ge, "observedAttributes"), n.FULLSCREEN]);
+let es = ge;
+const ho = (
+  /* 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>
+`
+), Dn = document.createElement("template");
+Dn.innerHTML = /* HTML */
+`
+  <style>
+    :host(:not([hidden])) {
+      display: var(--language-menu-display);
+    }
+  </style>
+
+  <slot name="button">${ho}</slot>
+  <slot name="listbox" hidden>
+    <vindral-language-menu-list id="listbox" part="listbox"></vindral-language-menu-list>
+  </slot>
+`;
+var Ge, ss;
+const fe = class fe extends xs {
+  constructor() {
+    var t, i, s, o;
+    super();
+    l(this, Ge);
+    (t = this.shadowRoot) == null || t.appendChild(Dn.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(), r(this, Ge, ss).call(this), this.setAttribute("aria-label", "Languages");
+  }
+  attributeChangedCallback(t, i, s) {
+    super.attributeChangedCallback(t, i, s), (t === n.LANGUAGES || t === n.TEXT_TRACKS) && r(this, Ge, ss).call(this);
+  }
+};
+Ge = new WeakSet(), ss = function() {
+  const t = this.getAttribute(n.LANGUAGES), i = this.getAttribute(n.TEXT_TRACKS);
+  (!t || t === "[]") && (!i || i === "[]") ? this.setAttribute("hidden", "") : this.removeAttribute("hidden");
+}, m(fe, "observedAttributes", [...G(fe, fe, "observedAttributes"), n.LANGUAGES, n.TEXT_TRACKS]);
+let is = fe;
+const Fn = 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>
+`
+);
+Fn.innerHTML = /* HTML */
+`
+  <style>
+    :host {
+      font: inherit;
+      cursor: default;
+      padding: var(--padding-2);
+      padding-top: var(--padding-3);
+      border-radius: 0.25em;
+      position: absolute;
+      min-width: 140px;
+      background: var(--bg-subtle);
+      z-index: 1;
+      overflow: auto;
+      display: flex;
+      flex-direction: row;
+      gap: var(--padding-3);
+    }
+
+    :host([list-position="top"]) {
+      bottom: calc(100% + 0.5em);
+      transform: translate(-50%);
+    }
+
+    :host([list-position="bottom"]) {
+      top: calc(100% + 0.5em);
+    }
+
+    :host::-webkit-scrollbar {
+      width: 5px;
+      padding-right: 5px;
+    }
+
+    :host::-webkit-scrollbar-thumb {
+      background-color: var(--fg-extra-subtle);
+      border-radius: 10px;
+      border: 0;
+    }
+
+    :host::-webkit-scrollbar-track {
+      border-radius: 10px;
+      background-color: transparent;
+    }
+
+    .menu {
+      display: grid;
+      gap: var(--padding-1);
+    }
+
+    .menu-container {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
+
+    [role="menuitem"] {
+      position: relative;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      height: 44px;
+      padding: 0 var(--padding-3);
+      padding-left: var(--padding-6);
+      border-radius: 4px;
+      font-size: 14px;
+    }
+
+    [role="menuitem"]:hover {
+      background: var(--bg-component-hover);
+    }
+
+    [role="menuitem"][aria-selected="true"] {
+      background: var(--bg-component-active);
+    }
+
+    [role="menuitem"][aria-selected="true"]::before {
+      content: url("data:image/svg+xml,${encodeURIComponent(uo)}");
+      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);
+      padding: 0 var(--padding-3);
+      font-size: 11px;
+      font-weight: bold;
+    }
+
+    :host([${n.LANGUAGES}="[]"]) #languages,
+    :host(:not([${n.LANGUAGES}])) #languages {
+      display: none;
+    }
+
+    :host([${n.TEXT_TRACKS}="[]"]) #text-tracks,
+    :host(:not([${n.TEXT_TRACKS}])) #text-tracks {
+      display: none;
+    }
+  </style>
+
+  <div id="languages" class="menu-container">
+    <div class="heading">Language</div>
+    <div class="menu"></div>
+  </div>
+  <div id="text-tracks" class="menu-container">
+    <div class="heading">Subtitles</div>
+    <div class="menu"></div>
+  </div>
+`;
+var $e, ze, Be, Ke, Y, K, Rt, gt, Wt, qe, ot, J, E, Hn, Gn, ns, rs, hi, he, de, $n, zn, Bn, os, as, Kn;
+class On extends HTMLElement {
+  constructor() {
+    super();
+    l(this, E);
+    l(this, $e, []);
+    l(this, ze, []);
+    l(this, Be);
+    l(this, Ke);
+    l(this, Y, []);
+    l(this, K, []);
+    l(this, Rt, null);
+    l(this, gt, null);
+    l(this, Wt, null);
+    l(this, qe, null);
+    l(this, ot, null);
+    l(this, J, null);
+    m(this, "handleEvent", (t) => {
+      switch (t.type) {
+        case "keydown":
+          r(this, E, zn).call(this, t);
+          break;
+      }
+    });
+    this.attachShadow({ mode: "open" }).appendChild(Fn.content.cloneNode(!0));
+  }
+  connectedCallback() {
+    var i, s, o;
+    const t = this.getRootNode();
+    t instanceof ShadowRoot && (d(this, Wt, t.host.closest("vindral-controller")), (i = e(this, Wt)) == null || i.connectListener(this), d(this, Rt, (s = this.shadowRoot) == null ? void 0 : s.querySelector("#languages .menu")), d(this, gt, (o = this.shadowRoot) == null ? void 0 : o.querySelector("#text-tracks .menu")), r(this, E, Hn).call(this), r(this, E, Gn).call(this), d(this, qe, t.host), this.addEventListener("keydown", this));
+  }
+  disconnectedCallback() {
+    this.removeEventListener("keydown", this);
+  }
+  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) {
+    d(this, $e, t), r(this, E, rs).call(this), r(this, E, he).call(this);
+  }
+  set textTracks(t) {
+    d(this, ze, t), r(this, E, ns).call(this), r(this, E, de).call(this);
+  }
+  set language(t) {
+    d(this, Be, t), r(this, E, he).call(this);
+  }
+  set textTrack(t) {
+    d(this, Ke, t), r(this, E, de).call(this);
+  }
+  get keysUsed() {
+    return ["Enter", "Escape", "Tab", " ", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight", "Home", "End"];
+  }
+  focus() {
+    e(this, ot) ? e(this, ot).focus() : e(this, J) && e(this, J).focus();
+  }
+}
+$e = new WeakMap(), ze = new WeakMap(), Be = new WeakMap(), Ke = new WeakMap(), Y = new WeakMap(), K = new WeakMap(), Rt = new WeakMap(), gt = new WeakMap(), Wt = new WeakMap(), qe = new WeakMap(), ot = new WeakMap(), J = new WeakMap(), E = new WeakSet(), Hn = function() {
+  const t = (s) => {
+    s.forEach((o) => {
+      if (o.intersectionRatio !== 1)
+        if (o.intersectionRatio > 0) {
+          const u = this.offsetHeight, p = o.intersectionRatio, g = u * p - 24;
+          this.style.height = `${g}px`;
+        } else
+          this.style.height = "auto";
+    });
+  };
+  new IntersectionObserver(t, {
+    root: e(this, Wt),
+    // The parent element to use as the viewport
+    threshold: 0
+    // 0 means any intersection is enough to be considered "inside"
+  }).observe(this);
+}, Gn = function() {
+  e(this, Rt) && (r(this, E, rs).call(this), r(this, E, he).call(this)), e(this, gt) && (r(this, E, ns).call(this), r(this, E, de).call(this));
+}, ns = function() {
+  e(this, gt).innerHTML = "", d(this, K, []);
+  const t = r(this, E, hi).call(this, "Off", "textTrack", void 0);
+  e(this, gt).appendChild(t), e(this, K).push({ element: t, value: void 0 }), e(this, ze).forEach((i) => {
+    const s = r(this, E, hi).call(this, i, "textTrack", i);
+    e(this, gt).appendChild(s), e(this, K).push({ element: s, value: i });
+  }), r(this, E, de).call(this);
+}, rs = function() {
+  e(this, Rt).innerHTML = "", d(this, Y, []), e(this, $e).forEach((t) => {
+    const i = r(this, E, hi).call(this, t, "language", t);
+    e(this, Rt).appendChild(i), e(this, Y).push({ element: i, value: t });
+  }), r(this, E, he).call(this);
+}, hi = function(t, i, s) {
+  const o = document.createElement("div");
+  return o.setAttribute("role", "menuitem"), o.textContent = t, o.addEventListener("click", () => r(this, E, $n).call(this, s, i)), o;
+}, he = function() {
+  e(this, ot) && (e(this, ot).removeAttribute("aria-selected"), e(this, ot).tabIndex = -1);
+  const t = e(this, Y).find((i) => i.value === e(this, Be));
+  t && (t.element.setAttribute("aria-selected", "true"), t.element.tabIndex = 0, d(this, ot, t.element));
+}, de = function() {
+  e(this, J) && (e(this, J).removeAttribute("aria-selected"), e(this, J).tabIndex = -1);
+  const t = e(this, K).find((i) => i.value === e(this, Ke));
+  if (t)
+    t.element.setAttribute("aria-selected", "true"), t.element.tabIndex = 0, d(this, J, t.element);
+  else {
+    const i = e(this, K).find((s) => s.value === void 0);
+    i && (i.element.setAttribute("aria-selected", "true"), i.element.tabIndex = 0, d(this, J, i.element));
+  }
+}, $n = function(t, i) {
+  this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 }));
+  const s = i === "language" ? f.SET_LANGUAGE : f.SET_TEXT_TRACK;
+  this.dispatchEvent(new CustomEvent(s, { bubbles: !0, composed: !0, detail: t }));
+}, zn = function(t) {
+  var p, v, g;
+  const { key: i, ctrlKey: s, altKey: o, metaKey: u } = t;
+  s || o || u || this.keysUsed.includes(i) && (t.preventDefault(), t.stopPropagation(), i === "Tab" || i === "Escape" ? (p = e(this, qe)) == null || p.hide() : i === "Enter" || i === " " ? (g = (v = r(this, E, as).call(this)) == null ? void 0 : v.element) == null || g.click() : r(this, E, Bn).call(this, t));
+}, Bn = function(t) {
+  var g;
+  const { key: i } = t, s = [...e(this, Y), ...e(this, K)], o = (g = r(this, E, as).call(this)) != null ? g : s[0];
+  if (!o) return;
+  const u = s.indexOf(o);
+  let p = Math.max(0, u);
+  i === "ArrowDown" ? p++ : i === "ArrowUp" ? p-- : i === "ArrowLeft" ? p = r(this, E, os).call(this, u, "left") : i === "ArrowRight" ? p = r(this, E, os).call(this, u, "right") : t.key === "Home" ? p = 0 : t.key === "End" && (p = s.length - 1), p < 0 && (p = s.length - 1), p > s.length - 1 && (p = 0);
+  const v = s[p];
+  v && (r(this, E, Kn).call(this, v.value), v.element.focus());
+}, os = function(t, i) {
+  const s = e(this, Y).length, o = e(this, K).length;
+  return i === "left" ? t < s ? s + o - 1 : t - s - 1 : t >= s ? 0 : t + s;
+}, as = function() {
+  return [...e(this, Y), ...e(this, K)].find((t) => t.element.tabIndex === 0);
+}, Kn = function(t) {
+  for (const i of [...e(this, Y), ...e(this, K)])
+    i.element.tabIndex = i.value === t ? 0 : -1;
+}, m(On, "observedAttributes", [
+  n.LANGUAGES,
+  n.TEXT_TRACKS,
+  n.LANGUAGE,
+  n.TEXT_TRACK
+]);
+const qn = document.createElement("template"), 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>
+`
+), bo = (
+  /* 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>
+`
+);
+qn.innerHTML = /* HTML */
+`
+  <style>
+    :host {
+      display: var(--mute-button-display);
+    }
+
+    slot > svg {
+      display: block;
+    }
+
+    :host([${n.MUTED}]) slot[name="unmute"] {
+      display: none !important;
+    }
+
+    :host(:not([${n.MUTED}])) slot[name="mute"] {
+      display: none !important;
+    }
+  </style>
+
+  <slot name="icon">
+    <slot name="mute">${po}</slot>
+    <slot name="unmute">${bo}</slot>
+  </slot>
+`;
+const Ee = class Ee extends Z {
+  constructor() {
+    var a;
+    super(), (a = this.shadowRoot) == null || a.appendChild(qn.content.cloneNode(!0));
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("aria-label", this.muted ? "UnMute" : "Mute");
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  attributeChangedCallback(a, t, i) {
+    super.attributeChangedCallback(a, t, i), a === n.MUTED && this.setAttribute("aria-label", this.muted ? "UnMute" : "Mute");
+  }
+  set muted(a) {
+    a ? this.setAttribute(n.MUTED, "") : this.removeAttribute(n.MUTED);
+  }
+  get muted() {
+    return this.hasAttribute(n.MUTED);
+  }
+  handleClick(a) {
+    const t = this.muted ? f.UNMUTE : f.MUTE;
+    this.dispatchEvent(new CustomEvent(t, { bubbles: !0, composed: !0 }));
+  }
+};
+m(Ee, "observedAttributes", [...G(Ee, Ee, "observedAttributes"), n.MUTED]);
+let ls = Ee;
+const Xn = 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="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>
+`
+);
+Xn.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">${mo}</slot>
+`;
+const Ae = class Ae extends Z {
+  constructor() {
+    var a;
+    super(), (a = this.shadowRoot) == null || a.appendChild(Xn.content.cloneNode(!0));
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute(
+      "aria-label",
+      this.isPictureInPictureActive ? "Exit picture in picture" : "Enter picture in picture"
+    );
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  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(a) {
+    a ? this.setAttribute(n.IS_PIP, "") : this.removeAttribute(n.IS_PIP);
+  }
+  get isPictureInPictureActive() {
+    return this.hasAttribute(n.IS_PIP);
+  }
+  handleClick(a) {
+    const t = this.isPictureInPictureActive ? f.EXIT_PIP : f.ENTER_PIP;
+    this.dispatchEvent(new CustomEvent(t, { bubbles: !0, composed: !0 }));
+  }
+};
+m(Ae, "observedAttributes", [...G(Ae, Ae, "observedAttributes"), n.IS_PIP, n.PIP_AVAILABLE]);
+let cs = Ae;
+const Vn = document.createElement("template"), vo = (
+  /* 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>
+`
+), go = (
+  /* 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>
+`
+);
+Vn.innerHTML = /* HTML */
+`
+  <style>
+    :host {
+      display: var(--play-button-display);
+    }
+
+    slot > svg {
+      display: block;
+    }
+
+    :host([${n.PAUSED}]) slot[name="pause"] {
+      display: none !important;
+    }
+
+    :host(:not([${n.PAUSED}])) slot[name="play"] {
+      display: none !important;
+    }
+  </style>
+
+  <slot name="icon">
+    <slot name="play">${vo}</slot>
+    <slot name="pause">${go}</slot>
+  </slot>
+`;
+const ye = class ye extends Z {
+  constructor() {
+    var a;
+    super(), (a = this.shadowRoot) == null || a.appendChild(Vn.content.cloneNode(!0));
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("aria-label", this.paused ? "Play" : "Pause");
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  attributeChangedCallback(a, t, i) {
+    super.attributeChangedCallback(a, t, i), a === n.PAUSED && this.setAttribute("aria-label", this.paused ? "Play" : "Pause");
+  }
+  set paused(a) {
+    a ? this.setAttribute(n.PAUSED, "") : this.removeAttribute(n.PAUSED);
+  }
+  get paused() {
+    return this.hasAttribute(n.PAUSED);
+  }
+  handleClick(a) {
+    const t = this.paused ? f.PLAY : f.PAUSE;
+    this.dispatchEvent(new CustomEvent(t, { bubbles: !0, composed: !0 }));
+  }
+};
+m(ye, "observedAttributes", [...G(ye, ye, "observedAttributes"), n.PAUSED]);
+let hs = ye;
+const q = {
+  TITLE: "title",
+  OFFLINE: "offline",
+  REFRESH_POSTER_ENABLED: "refresh-poster-enabled",
+  STREAM_POLL_ENABLED: "stream-poll-enabled"
+}, fo = Object.values(q);
+var Xe, Zt, ft, Ut, Et, At, at, H, ds, jn, us, ps;
+class Eo extends ri {
+  constructor(t) {
+    super();
+    l(this, H);
+    l(this, Xe);
+    l(this, Zt);
+    l(this, ft, !1);
+    l(this, Ut, !1);
+    l(this, Et, !0);
+    l(this, At, null);
+    l(this, at, null);
+    d(this, Zt, t), d(this, Xe, new Qr({
+      publicEndpoint: t.url,
+      tokenFactory: () => t.authenticationToken
+    }));
+  }
+  start(t = 5e3) {
+    e(this, at) && clearInterval(e(this, at)), d(this, ft, !1), d(this, Ut, !1), r(this, H, ps).call(this), r(this, H, ds).call(this), d(this, at, window.setInterval(() => {
+      !e(this, Ut) && !e(this, Zt).infiniteReconnect && !e(this, At) && e(this, Et) && d(this, At, window.setTimeout(() => r(this, H, jn).call(this), 5 * 60 * 1e3)), !e(this, Ut) && e(this, Et) && r(this, H, ds).call(this);
+    }, t));
+  }
+  stop() {
+    r(this, H, us).call(this), e(this, at) && (window.clearInterval(e(this, at)), d(this, at, null));
+  }
+}
+Xe = new WeakMap(), Zt = new WeakMap(), ft = new WeakMap(), Ut = new WeakMap(), Et = new WeakMap(), At = new WeakMap(), at = new WeakMap(), H = new WeakSet(), ds = function() {
+  return $(this, null, function* () {
+    if (e(this, ft))
+      return;
+    d(this, ft, !0);
+    let t = "Stream is offline", i = "Please stand by";
+    try {
+      const s = yield e(this, Xe).getChannel(e(this, Zt).channelId);
+      if (s.isLive) {
+        d(this, Ut, !0), r(this, H, ps).call(this), this.emit("live", s), d(this, ft, !1);
+        return;
+      }
+    } catch (s) {
+      Wr(s) && (s.status === 403 || s.status === 401) && (t = "Forbidden", i = "You do not have permission to view this stream");
+    }
+    e(this, Et) && this.emit("error", { title: t, message: i }), d(this, ft, !1);
+  });
+}, jn = function() {
+  this.stop(), d(this, Et, !1), this.emit("timeout");
+}, us = function() {
+  e(this, At) && (window.clearTimeout(e(this, At)), d(this, At, null));
+}, ps = function() {
+  r(this, H, us).call(this), d(this, Et, !0);
+};
+const Ao = 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"
+), yo = navigator.userAgent.toLowerCase(), ko = Ao.test(yo), wo = (h) => Ce.observedAttributes.includes(h), Yn = (
+  /* HTML */
+  `
+  <style>
+    :host {
+      container-type: inline-size;
+      position: relative;
+      overflow: hidden;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+
+      --vindral-volume-range-display: ${ko ? "none" : "flex"};
+      --vindral-airplay-button-display: none;
+      --vindral-play-overlay-display: none;
+      --vindral-grid-item-offline-display: none;
+    }
+
+    vindral-control-bar[slot="top-bar"] {
+      display: none;
+    }
+
+    @container (max-width: 320px) {
+      vindral-controller {
+        --vindral-volume-range-display: none;
+        --vindral-control-padding: 0px;
+        --vindral-button-padding: 4px;
+      }
+
+      vindral-control-bar[slot="top-bar"] {
+        display: block;
+      }
+
+      vindral-control-bar:not([slot="top-bar"]) vindral-rendition-levels-menu,
+      vindral-control-bar:not([slot="top-bar"]) vindral-cast-button,
+      vindral-control-bar:not([slot="top-bar"]) vindral-airplay-button {
+        display: none;
+      }
+    }
+
+    :host([${q.OFFLINE}]) {
+      aspect-ratio: 16 / 9;
+      vindral-controller {
+        --vindral-ui-display: none;
+      }
+    }
+
+    :host([${n.AIRPLAY_ENABLED}="false"]) {
+      --vindral-airplay-button-display: none;
+    }
+
+    :host([${n.CAST_ENABLED}="false"]) {
+      --vindral-cast-button-display: none;
+    }
+
+    :host([${n.FULLSCREEN_ENABLED}="false"]) {
+      --vindral-fullscreen-button-display: none;
+    }
+
+    :host([${n.PIP_ENABLED}="false"]) {
+      --vindral-pip-button-display: none;
+    }
+
+    :host(:not([${n.CHANNEL_GROUP_ID}])) vindral-scroll-overlay {
+      display: none;
+    }
+
+    :host([${n.MEDIA}="video"]) vindral-mute-button,
+    :host([${n.MEDIA}="video"]) vindral-volume-range {
+      display: none;
+    }
+  </style>
+`
+), Io = (
+  /* HTML */
+  `
+  ${Yn}
+
+  <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>
+      <vindral-airplay-button></vindral-airplay-button>
+    </vindral-control-bar>
+    <vindral-control-bar>
+      <vindral-play-button></vindral-play-button>
+      <vindral-mute-button></vindral-mute-button>
+      <vindral-volume-range></vindral-volume-range>
+      <vindral-channel-grid-button slot="right"></vindral-channel-grid-button>
+      <vindral-language-menu slot="right"></vindral-language-menu>
+      <vindral-rendition-levels-menu slot="right"></vindral-rendition-levels-menu>
+      <vindral-pip-button slot="right"></vindral-pip-button>
+      <vindral-cast-button slot="right"></vindral-cast-button>
+      <vindral-airplay-button slot="right"></vindral-airplay-button>
+      <vindral-fullscreen-button slot="right"></vindral-fullscreen-button>
+    </vindral-control-bar>
+    <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>
+  </vindral-controller>
+`
+), Co = (
+  /* HTML */
+  `
+  ${Yn}
+
+  <style>
+    #control-bar {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: var(--padding-3);
+    }
+  </style>
+
+  <vindral-controller>
+    <div id="control-bar" slot="middle">
+      <vindral-play-button></vindral-play-button>
+      <vindral-mute-button></vindral-mute-button>
+      <vindral-volume-range></vindral-volume-range>
+      <vindral-buffering-icon></vindral-buffering-icon>
+    </div>
+
+    <vindral-play-overlay id="play-overlay" slot="overlay" hidden></vindral-play-overlay>
+    <vindral-message id="vindral-message" slot="overlay" hidden></vindral-message>
+  </vindral-controller>
+`
+), Gs = document.createElement("template");
+var Q, _, O, yt, W, xi, Ve, Si, S, bs, Qn, je, di, Ht;
+class Jn extends HTMLElement {
+  constructor() {
+    super();
+    l(this, S);
+    l(this, Q);
+    l(this, _);
+    l(this, O);
+    l(this, yt);
+    l(this, W);
+    l(this, xi, () => {
+      Array.from(this.attributes).forEach((t) => {
+        e(this, Ve).call(this, t.name, t.value);
+      });
+    });
+    l(this, Ve, (t, i) => {
+      wo(t) && (x(i) ? e(this, _).setAttribute(t, i) : e(this, _).removeAttribute(t));
+    });
+    l(this, Si, () => zs(this.getAttribute(n.MEDIA)) === "audio" ? Co : Io);
+    l(this, je, () => {
+      const t = e(this, _).instance;
+      t && (t.on("is live", (i) => {
+        i ? (this.removeAttribute(q.OFFLINE), e(this, O).setAttribute("hidden", "")) : (this.setAttribute(q.OFFLINE, ""), e(this, O).removeAttribute("hidden"), r(this, S, Ht).call(this, "Stream is offline", "Please stand by"));
+      }), t.on("channels", (i) => {
+        const s = e(this, _).getAttribute("channel-id"), o = i.find((u) => u.channelId === s);
+        o && r(this, S, di).call(this, o.name);
+      }), t.on("channel switch", ({ channelId: i }) => {
+        const s = t.channels.find((o) => o.channelId === i);
+        s && r(this, S, di).call(this, s.name);
+      }), t.on("error", (i) => {
+        var u;
+        let s = "Stream is offline", o = "Please stand by";
+        i.isFatal() ? (i.code() === Vr ? (s = "Forbidden", o = "You do not have permission to view this stream", r(this, S, Ht).call(this, s, o)) : (u = e(this, W)) == null || u.start(), this.setAttribute(q.OFFLINE, "")) : i.code() === jr && r(this, S, Ht).call(this, s, o);
+      }));
+    });
+    d(this, Q, this.attachShadow({ mode: "open" })), r(this, S, bs).call(this), d(this, _, e(this, Q).querySelector("vindral-controller")), d(this, O, e(this, Q).querySelector("#vindral-message")), d(this, yt, e(this, Q).querySelector("#play-overlay"));
+  }
+  connectedCallback() {
+    this.setAttribute(q.OFFLINE, ""), e(this, _).addEventListener("vindral-instance-ready", e(this, je)), r(this, S, Qn).call(this);
+  }
+  disconnectedCallback() {
+    var t;
+    e(this, _).removeEventListener("vindral-instance-ready", e(this, je)), (t = e(this, W)) == null || t.stop();
+  }
+  attributeChangedCallback(t, i, s) {
+    if (i !== s)
+      if (t === n.MEDIA)
+        r(this, S, bs).call(this);
+      else if (t === q.REFRESH_POSTER_ENABLED) {
+        const o = e(this, Q).querySelector("vindral-poster-overlay");
+        o && (o.disabled = T(this.getAttribute(q.REFRESH_POSTER_ENABLED), !1) === !1);
+      } else
+        e(this, Ve).call(this, t, s);
+  }
+  get instance() {
+    return e(this, _).instance;
+  }
+}
+Q = new WeakMap(), _ = new WeakMap(), O = new WeakMap(), yt = new WeakMap(), W = new WeakMap(), xi = new WeakMap(), Ve = new WeakMap(), Si = new WeakMap(), S = new WeakSet(), bs = function() {
+  Gs.innerHTML = e(this, Si).call(this);
+  const t = Gs.content.cloneNode(!0);
+  d(this, _, t.querySelector("vindral-controller")), d(this, O, t.querySelector("#vindral-message")), d(this, yt, t.querySelector("#play-overlay")), this.children.length > 0 && Array.from(this.children).forEach((i) => {
+    e(this, _).appendChild(i);
+  }), e(this, xi).call(this), e(this, Q).innerHTML = "", e(this, Q).appendChild(t);
+}, Qn = function() {
+  var p;
+  if (T(this.getAttribute(q.STREAM_POLL_ENABLED), !0) === !1)
+    return;
+  const t = this.getAttribute("url"), i = this.getAttribute("channel-id"), s = (p = this.getAttribute("authentication-token")) != null ? p : void 0, o = this.hasAttribute("infinite-reconnect"), u = T(this.getAttribute("title"), !1);
+  if (!t || !i) {
+    this.setAttribute(q.OFFLINE, ""), r(this, S, Ht).call(this, "Invalid options", "Please enter at least a channel id and url to start the stream");
+    return;
+  }
+  d(this, W, new Eo({
+    url: t,
+    channelId: i,
+    authenticationToken: s,
+    infiniteReconnect: o
+  })), e(this, W).on("live", (v) => {
+    e(this, _).connect(), this.removeAttribute("offline"), e(this, O).setAttribute("hidden", ""), u && r(this, S, di).call(this, v.name);
+  }), e(this, W).on("timeout", () => {
+    e(this, O).setAttribute("hidden", ""), e(this, yt).removeAttribute("hidden");
+  }), e(this, W).on("error", (v) => {
+    this.setAttribute(q.OFFLINE, ""), r(this, S, Ht).call(this, v.title, v.message);
+  }), e(this, yt).addEventListener("click", () => {
+    e(this, _).connect(), e(this, yt).setAttribute("hidden", "");
+  }), this.hasAttribute("paused") && e(this, W).start();
+}, je = new WeakMap(), di = function(t) {
+  if (!T(this.getAttribute("title"), !0)) return;
+  const i = Bs(this.getAttribute("poster"));
+  eo({
+    title: t,
+    poster: typeof i == "string" ? i : void 0
+  });
+}, Ht = function(t, i) {
+  e(this, O).setAttribute("title", t), e(this, O).setAttribute("description", i);
+  const s = this.getAttribute("poster");
+  s && e(this, O).setAttribute("background-image", s), e(this, O).removeAttribute("hidden");
+}, m(Jn, "observedAttributes", [...Ce.observedAttributes, ...fo]);
+const Wn = document.createElement("template");
+Wn.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 Lo = 6e3;
+var te, kt, _t, ee, V, tr, ui, ms, Ni;
+class Zn extends HTMLElement {
+  constructor() {
+    super();
+    l(this, V);
+    l(this, te, null);
+    l(this, kt, null);
+    l(this, _t, null);
+    l(this, ee, () => {
+      !document.hidden && this.hasAttribute("intersecting") && this.paused && !this.disabled ? r(this, V, tr).call(this) : r(this, V, ui).call(this);
+    });
+    l(this, Ni, (t) => {
+      t.forEach((i) => {
+        i.isIntersecting ? this.setAttribute("intersecting", "") : this.removeAttribute("intersecting");
+      });
+    });
+    this.attachShadow({ mode: "open" }).appendChild(Wn.content.cloneNode(!0));
+  }
+  connectedCallback() {
+    var t;
+    d(this, te, this.closest("vindral-controller")), (t = e(this, te)) == null || t.connectListener(this), document.addEventListener("visibilitychange", e(this, ee)), d(this, _t, new IntersectionObserver(e(this, Ni))), e(this, _t).observe(this);
+  }
+  disconnectedCallback() {
+    var t, i;
+    (t = e(this, te)) == null || t.disconnectListener(this), document.removeEventListener("visibilitychange", e(this, ee)), (i = e(this, _t)) == null || i.disconnect(), d(this, _t, null), r(this, V, ui).call(this);
+  }
+  attributeChangedCallback(t, i, s) {
+    i !== s && (t === n.POSTER_SRC && this.paused && !this.disabled && r(this, V, ms).call(this), (t === n.PAUSED || t === "disabled" || t === "intersecting") && e(this, ee).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);
+  }
+}
+te = new WeakMap(), kt = new WeakMap(), _t = new WeakMap(), ee = new WeakMap(), V = new WeakSet(), tr = function() {
+  e(this, kt) === null && (r(this, V, ui).call(this), d(this, kt, window.setInterval(() => r(this, V, ms).call(this), Lo)));
+}, ui = function() {
+  e(this, kt) !== null && (clearInterval(e(this, kt)), d(this, kt, null)), this.style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAQAAACRI2S5AAAAEElEQVR42mNkIAAYRxWAAQAG9gAKqv6+AwAAAABJRU5ErkJggg==')";
+}, ms = 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()})`;
+}, Ni = new WeakMap(), m(Zn, "observedAttributes", [n.POSTER_SRC, n.PAUSED, "disabled", "intersecting"]);
+const To = (
+  /* 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">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <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>
+`
+), er = document.createElement("template");
+er.innerHTML = /* HTML */
+`
+  <style>
+    :host {
+      display: var(--rendition-menu-display);
+    }
+  </style>
+
+  <slot name="button">${To}</slot>
+  <slot name="listbox" hidden>
+    <vindral-rendition-levels-menu-list id="listbox" part="listbox"></vindral-rendition-levels-menu-list>
+  </slot>
+`;
+var Ye, gs;
+const ke = class ke extends xs {
+  constructor() {
+    var t, i, s, o;
+    super();
+    l(this, Ye);
+    (t = this.shadowRoot) == null || t.appendChild(er.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(), r(this, Ye, gs).call(this), this.setAttribute("aria-label", "Rendition levels");
+  }
+  attributeChangedCallback(t, i, s) {
+    super.attributeChangedCallback(t, i, s), t === n.RENDITION_LEVELS && r(this, Ye, gs).call(this);
+  }
+};
+Ye = new WeakSet(), gs = function() {
+  const t = this.getAttribute(n.RENDITION_LEVELS);
+  !t || t === "[]" ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+}, m(ke, "observedAttributes", [...G(ke, ke, "observedAttributes"), n.RENDITION_LEVELS]);
+let vs = ke;
+const ir = document.createElement("template"), xo = (
+  /* 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>
+`
+);
+ir.innerHTML = /* HTML */
+`
+  <style>
+    :host {
+      font: inherit;
+      cursor: default;
+      padding: var(--padding-2);
+      padding-top: var(--padding-3);
+      border-radius: 0.25em;
+      position: absolute;
+      min-width: 140px;
+      background: var(--bg-subtle);
+      z-index: 1;
+      overflow: auto;
+    }
+
+    :host([list-position="top"]) {
+      bottom: calc(100% + 0.5em);
+      transform: translate(-50%);
+    }
+
+    :host([list-position="bottom"]) {
+      top: calc(100% + 0.5em);
+    }
+
+    :host::-webkit-scrollbar {
+      width: 5px;
+      padding-right: 5px;
+    }
+
+    :host::-webkit-scrollbar-thumb {
+      background-color: var(--fg-extra-subtle);
+      border-radius: 10px;
+      border: 0;
+    }
+
+    :host::-webkit-scrollbar-track {
+      border-radius: 10px;
+      background-color: transparent;
+    }
+
+    .menu {
+      display: grid;
+      gap: var(--padding-1);
+    }
+
+    [role="menuitem"] {
+      flex: 1;
+      position: relative;
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      height: 44px;
+      padding: 0 var(--padding-5);
+      border-radius: 4px;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: normal;
+      white-space: nowrap;
+      text-align: left;
+    }
+
+    [role="menuitem"]:hover {
+      background: var(--bg-component-hover);
+    }
+
+    [role="menuitem"][aria-selected="true"] {
+      background: var(--bg-component-active);
+    }
+
+    [role="menuitem"][aria-selected="true"]::before {
+      content: url("data:image/svg+xml,${encodeURIComponent(xo)}");
+      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;
+    }
+
+    .heading {
+      text-transform: uppercase;
+      margin-bottom: var(--padding-2);
+      padding: 0 var(--padding-3);
+      font-size: 11px;
+      font-weight: bold;
+    }
+  </style>
+
+  <slot>
+    <div class="heading">Max quality</div>
+    <div class="menu"></div>
+  </slot>
+`;
+var Pt, Je, wt, lt, Mt, Qe, I, nr, fs, rr, Es, or, ar, lr, As, cr;
+class sr extends HTMLElement {
+  constructor() {
+    super();
+    l(this, I);
+    l(this, Pt, []);
+    l(this, Je, Number.MAX_SAFE_INTEGER);
+    l(this, wt, null);
+    l(this, lt, []);
+    l(this, Mt, null);
+    l(this, Qe, null);
+    m(this, "handleEvent", (t) => {
+      switch (t.type) {
+        case "keydown":
+          r(this, I, ar).call(this, t);
+          break;
+      }
+    });
+    this.attachShadow({ mode: "open" }).appendChild(ir.content.cloneNode(!0));
+  }
+  connectedCallback() {
+    var i;
+    const t = this.getRootNode();
+    t instanceof ShadowRoot && (d(this, Mt, t.host.closest("vindral-controller")), (i = e(this, Mt)) == null || i.connectListener(this), r(this, I, nr).call(this), r(this, I, fs).call(this), d(this, Qe, t.host), this.addEventListener("keydown", this));
+  }
+  disconnectedCallback() {
+    var t;
+    (t = e(this, Mt)) == 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) {
+    d(this, Pt, t), r(this, I, fs).call(this);
+  }
+  set maxVideoBitrate(t) {
+    d(this, Je, t), r(this, I, Es).call(this);
+  }
+  get keysUsed() {
+    return ["Enter", "Escape", "Tab", " ", "ArrowDown", "ArrowUp", "Home", "End"];
+  }
+  focus() {
+    var t;
+    (t = e(this, wt)) == null || t.focus();
+  }
+}
+Pt = new WeakMap(), Je = new WeakMap(), wt = new WeakMap(), lt = new WeakMap(), Mt = new WeakMap(), Qe = new WeakMap(), I = new WeakSet(), nr = function() {
+  const t = (s) => {
+    s.forEach((o) => {
+      if (o.intersectionRatio !== 1)
+        if (o.intersectionRatio > 0) {
+          const u = this.offsetHeight, p = o.intersectionRatio, g = u * p - 24;
+          this.style.height = `${g}px`;
+        } else
+          this.style.height = "auto";
+    });
+  };
+  new IntersectionObserver(t, {
+    root: e(this, Mt),
+    // The parent element to use as the viewport
+    threshold: 0
+    // 0 means any intersection is enough to be considered "inside"
+  }).observe(this);
+}, fs = function() {
+  var i;
+  const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".menu");
+  t && (d(this, lt, []), t.innerHTML = "", e(this, Pt).sort((s, o) => {
+    var u, p;
+    return (u = s.video) != null && u.bitRate && ((p = o.video) != null && p.bitRate) ? o.video.bitRate - s.video.bitRate : 0;
+  }).forEach((s) => {
+    var v, g, P, tt, j, It, Ct, Lt;
+    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 u = r(this, I, rr).call(this, (g = s.video) == null ? void 0 : g.frameRate);
+    o.textContent = s.video ? to(s.video) : "";
+    const p = document.createElement("span");
+    p.classList.add("menu-item-subtitle"), p.textContent = `${Zr(((tt = (P = s.video) == null ? void 0 : P.bitRate) != null ? tt : 0) + ((It = (j = s.audio) == null ? void 0 : j.bitRate) != null ? It : 0))}, ${u}p`, o.appendChild(p), o.addEventListener("click", () => r(this, I, or).call(this, s)), e(this, lt).push({ el: o, id: (Lt = (Ct = s.video) == null ? void 0 : Ct.id) != null ? Lt : -1 }), t.appendChild(o);
+  }), r(this, I, Es).call(this));
+}, rr = function(t) {
+  return t ? t[0] % t[1] === 0 ? (t[0] / t[1]).toString() : (t[0] / t[1]).toFixed(2) : "";
+}, Es = function() {
+  e(this, wt) && (e(this, wt).removeAttribute("aria-selected"), e(this, wt).tabIndex = -1);
+  const t = e(this, Pt).sort(
+    (s, o) => {
+      var u, p;
+      return (u = s.video) != null && u.bitRate && ((p = o.video) != null && p.bitRate) ? o.video.bitRate - s.video.bitRate : 0;
+    }
+  ), i = e(this, Pt).filter(
+    (s) => {
+      var o;
+      return ((o = s.video) == null ? void 0 : o.bitRate) && s.video.bitRate <= e(this, Je);
+    }
+  )[0] || t[t.length - 1];
+  if (i) {
+    const s = e(this, lt).find((o) => {
+      var u;
+      return o.id === ((u = i.video) == null ? void 0 : u.id);
+    });
+    s && (s.el.tabIndex = 0, s.el.setAttribute("aria-selected", "true"), d(this, wt, s.el));
+  }
+}, or = function(t) {
+  this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 })), this.dispatchEvent(
+    new CustomEvent(f.SET_RENDITION, { bubbles: !0, composed: !0, detail: t })
+  );
+}, ar = function(t) {
+  var p, v, g;
+  const { key: i, ctrlKey: s, altKey: o, metaKey: u } = t;
+  s || o || u || this.keysUsed.includes(i) && (t.preventDefault(), t.stopPropagation(), i === "Tab" || i === "Escape" ? (p = e(this, Qe)) == null || p.hide() : i === "Enter" || i === " " ? (g = (v = r(this, I, As).call(this)) == null ? void 0 : v.el) == null || g.click() : r(this, I, lr).call(this, t));
+}, lr = function(t) {
+  var g;
+  const { key: i } = t, s = e(this, lt), o = (g = r(this, I, As).call(this)) != null ? g : s[0];
+  if (!o) return;
+  const u = s.indexOf(o);
+  let p = Math.max(0, u);
+  i === "ArrowDown" ? p++ : i === "ArrowUp" ? p-- : t.key === "Home" ? p = 0 : t.key === "End" && (p = s.length - 1), p < 0 && (p = s.length - 1), p > s.length - 1 && (p = 0);
+  const v = s[p];
+  v && (r(this, I, cr).call(this, v.id), v.el.focus());
+}, As = function() {
+  return e(this, lt).find((t) => t.el.tabIndex === 0);
+}, cr = function(t) {
+  for (const i of e(this, lt))
+    i.el.tabIndex = i.id === t ? 0 : -1;
+}, m(sr, "observedAttributes", [n.RENDITION_LEVELS, n.MAX_VIDEO_BITRATE]);
+const hr = document.createElement("template");
+hr.innerHTML = /* HTML */
+`
+  <style>
+    :host {
+      --scroll-overlay-offset: var(--vindral-scroll-overlay-offset, 0px);
+
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      overflow-y: scroll !important;
+      pointer-events: none !important;
+      display: block;
+      transition: background-color 0.5s ease-in-out;
+      -ms-overflow-style: none;
+      scrollbar-width: none;
+    }
+
+    :host([snap]) {
+      scroll-snap-type: y mandatory;
+      scroll-behavior: smooth;
+    }
+
+    :host([snap-touch]) {
+      scroll-snap-type: y mandatory;
+      scroll-behavior: smooth;
+      pointer-events: auto !important;
+    }
+
+    :host([open]) #scroll-area {
+      width: 100%;
+      cursor: pointer;
+    }
+
+    :host([open]) {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+
+    :host::-webkit-scrollbar {
+      display: none;
+    }
+
+    #scroll-area {
+      margin: 0 auto;
+      width: 1px;
+      height: calc(100% - var(--scroll-overlay-offset));
+      pointer-events: auto;
+      scroll-snap-align: start;
+      min-height: 1px;
+    }
+
+    slot#content {
+      display: flex;
+      margin: 0 auto;
+      width: 100%;
+      pointer-events: auto;
+      scroll-snap-align: start;
+      flex-direction: column;
+    }
+
+    :host(:not([${n.USER_INTERACTING}])) {
+      overflow: hidden !important;
+    }
+  </style>
+
+  <div id="scroll-area"></div>
+  <slot id="content"></slot>
+`;
+var ct, Dt, ie, We, k, ur, pr, br, Ri, Ui, pi, ys, ks, ws, Is;
+class dr extends HTMLElement {
+  constructor() {
+    super();
+    l(this, k);
+    l(this, ct, null);
+    l(this, Dt, null);
+    l(this, ie, null);
+    l(this, We, 0);
+    m(this, "handleEvent", (t) => {
+      switch (t.type) {
+        case "touchstart":
+          r(this, k, ur).call(this, t);
+          break;
+        case "touchmove":
+          r(this, k, pr).call(this, t);
+          break;
+        case "touchend":
+          r(this, k, br).call(this, t);
+          break;
+      }
+    });
+    l(this, Ri, () => {
+      this.scrollTop === 0 ? (this.open = !1, this.removeAttribute("snap-touch"), r(this, k, Is).call(this)) : !this.visible && this.scrollTop > 0 ? r(this, k, ws).call(this) : (
+        // fully open
+        !this.hasAttribute("snap-touch") && r(this, k, ks).call(this) && (this.open = !0, this.setAttribute("snap-touch", ""))
+      );
+    });
+    l(this, Ui, () => {
+      const t = e(this, We);
+      if (d(this, We, this.scrollTop), !r(this, k, pi).call(this)) {
+        this.scrollTop = 0;
+        return;
+      }
+      this.scrollTop === 0 ? (this.open = !1, r(this, k, Is).call(this)) : !this.visible && this.scrollTop > 0 ? r(this, k, ws).call(this) : r(this, k, ks).call(this) && t <= this.scrollTop && (this.open = !0);
+    });
+    this.attachShadow({ mode: "open" }).appendChild(hr.content.cloneNode(!0));
+  }
+  connectedCallback() {
+    var i, s, o, u, p, v;
+    const t = this.getRootNode();
+    if (t instanceof Document || t instanceof ShadowRoot) {
+      d(this, ct, t.querySelector("vindral-controller")), (i = e(this, ct)) == null || i.connectListener(this), d(this, Dt, (s = this.shadowRoot) == null ? void 0 : s.querySelector("#scroll-area")), (o = e(this, Dt)) == null || o.addEventListener("click", () => {
+        this.open && (this.open = !1);
+      });
+      const g = this.hasAttribute("touch-enabled");
+      if (!Yr() || !g) {
+        this.setAttribute("snap", ""), this.addEventListener("scroll", e(this, Ui));
+        return;
+      }
+      this.addEventListener("scroll", e(this, Ri)), (u = e(this, ct)) == null || u.addEventListener("touchstart", this, { passive: !0 }), (p = e(this, ct)) == null || p.addEventListener("touchmove", this, { passive: !1 }), (v = e(this, ct)) == null || v.addEventListener("touchend", this, { passive: !0 });
+    }
+  }
+  disconnectedCallback() {
+    var t;
+    (t = e(this, ct)) == null || t.disconnectListener(this);
+  }
+  attributeChangedCallback(t, i, s) {
+    var o;
+    i !== s && (t === n.USER_INTERACTING && s === null && r(this, k, ys).call(this) && setTimeout(() => {
+      this.open = !1;
+    }, 300), t === "open" && this.scrollTo({ top: s === null ? 0 : (o = e(this, Dt)) == null ? void 0 : o.clientHeight, behavior: "smooth" }));
+  }
+  set open(t) {
+    t ? this.setAttribute("open", "") : this.removeAttribute("open");
+  }
+  get open() {
+    return this.hasAttribute("open");
+  }
+  set visible(t) {
+    t ? this.setAttribute("visible", "") : this.removeAttribute("visible");
+  }
+  get visible() {
+    return this.hasAttribute("visible");
+  }
+}
+ct = new WeakMap(), Dt = new WeakMap(), ie = new WeakMap(), We = new WeakMap(), k = new WeakSet(), ur = function(t) {
+  r(this, k, pi).call(this) && t.touches[0] && d(this, ie, t.touches[0].clientY);
+}, pr = function(t) {
+  if (!(!r(this, k, pi).call(this) || !e(this, ie) || this.hasAttribute("snap-touch")) && (t.preventDefault(), t.touches[0])) {
+    const i = t.touches[0].clientY, s = e(this, ie) - i;
+    this.scrollTop = s;
+  }
+}, br = function(t) {
+  r(this, k, ys).call(this) && !this.hasAttribute("snap-touch") && (this.open = !0);
+}, Ri = new WeakMap(), Ui = new WeakMap(), pi = function() {
+  return this.hasAttribute(n.USER_INTERACTING);
+}, ys = function() {
+  return this.scrollTop > 0;
+}, ks = function() {
+  var t;
+  return Math.round(this.scrollTop) === this.scrollHeight - this.clientHeight || Math.round(this.scrollTop) === ((t = e(this, Dt)) == null ? void 0 : t.clientHeight);
+}, ws = function() {
+  this.visible = !0, this.dispatchEvent(new CustomEvent(f.LOCK_UI, { bubbles: !0, composed: !0 }));
+}, Is = function() {
+  this.visible = !1, this.dispatchEvent(new CustomEvent(f.UNLOCK_UI, { bubbles: !0, composed: !0 }));
+}, m(dr, "observedAttributes", [n.USER_INTERACTING, "open", "touch-enabled"]);
+const mr = document.createElement("template");
+mr.innerHTML = /* HTML */
+`
+  <style>
+    :host {
+      --value: 0;
+      --_focus-box-shadow: none;
+      height: calc(24px + 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;
+    }
+
+    #range {
+      -webkit-appearance: none;
+      appearance: none;
+
+      height: 4px;
+      width: 100%;
+      margin: 0;
+      padding: 0;
+
+      background-color: #00000000;
+      outline: none;
+      z-index: 1;
+      cursor: pointer;
+    }
+
+    #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;
+    }
+
+    #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 se, ne, Ze, ti;
+class vr extends HTMLElement {
+  constructor() {
+    super();
+    l(this, se, null);
+    l(this, ne);
+    m(this, "range");
+    l(this, Ze, () => {
+      this.range.matches(":focus-visible") && this.style.setProperty("--_focus-visible-box-shadow", "inset 0 0 0 2px var(--fg-strong)");
+    });
+    l(this, ti, () => {
+      this.style.removeProperty("--_focus-visible-box-shadow");
+    });
+    d(this, ne, this.attachShadow({ mode: "open" })), e(this, ne).appendChild(mr.content.cloneNode(!0)), this.range = e(this, ne).getElementById("range");
+  }
+  connectedCallback() {
+    var t;
+    d(this, se, this.closest("vindral-controller")), (t = e(this, se)) == null || t.connectListener(this), this.hasAttribute("disabled") || this.enable(), this.range.addEventListener("focusin", e(this, Ze)), this.range.addEventListener("focusout", e(this, ti));
+  }
+  disconnectedCallback() {
+    var t;
+    (t = e(this, se)) == null || t.disconnectListener(this), this.range.removeEventListener("focusin", e(this, Ze)), this.range.removeEventListener("focusout", e(this, ti));
+  }
+  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"];
+  }
+}
+se = new WeakMap(), ne = new WeakMap(), Ze = new WeakMap(), ti = new WeakMap(), m(vr, "observedAttributes", ["disabled"]);
+const gr = document.createElement("template");
+gr.innerHTML = /* HTML */
+`
+  <style>
+    :host {
+      display: var(--volume-range-display);
+      width: 80px;
+    }
+  </style>
+`;
+const So = (h) => `${Math.round(h * 100)}%`;
+var ei;
+const we = class we extends vr {
+  constructor() {
+    var t;
+    super();
+    l(this, ei, () => {
+      const t = this.range.valueAsNumber;
+      this.dispatchEvent(new CustomEvent(f.SET_VOLUME, { bubbles: !0, composed: !0, detail: t }));
+    });
+    (t = this.shadowRoot) == null || t.appendChild(gr.content.cloneNode(!0));
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.range.addEventListener("input", e(this, ei)), this.range.setAttribute("aria-label", "volume");
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.range.removeEventListener("input", e(this, ei));
+  }
+  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", So(this.range.valueAsNumber)), this.updateBar());
+  }
+  get volume() {
+    var t;
+    return (t = this.getAttribute(n.VOLUME)) != null ? t : "1";
+  }
+  get muted() {
+    return this.hasAttribute(n.MUTED);
+  }
+};
+ei = new WeakMap(), m(we, "observedAttributes", [...G(we, we, "observedAttributes"), n.MUTED, n.VOLUME]);
+let Cs = we;
+const fr = document.createElement("template"), No = (
+  /* 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>
+`
+);
+fr.innerHTML = /* HTML */
+`
+  <style>
+    :host {
+      color: var(--fg-strong);
+    }
+
+    slot > svg {
+      display: block;
+    }
+
+    :host(:not([${n.BUFFERING}])) {
+      visibility: hidden !important;
+    }
+  </style>
+
+  <slot name="icon">${No}</slot>
+`;
+var re;
+class Er extends HTMLElement {
+  constructor() {
+    super();
+    l(this, re, null);
+    this.attachShadow({ mode: "open" }).appendChild(fr.content.cloneNode(!0));
+  }
+  connectedCallback() {
+    var t;
+    d(this, re, this.closest("vindral-controller")), (t = e(this, re)) == null || t.connectListener(this);
+  }
+  disconnectedCallback() {
+    var t;
+    (t = e(this, re)) == null || t.disconnectListener(this);
+  }
+}
+re = new WeakMap(), m(Er, "observedAttributes", [n.BUFFERING]);
+const Ar = document.createElement("template"), Ro = (
+  /* 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>
+`
+);
+Ar.innerHTML = /* HTML */
+`
+  <style>
+    :host {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: 1;
+      pointer-events: none;
+    }
+
+    :host([hidden]) {
+      display: none;
+    }
+
+    slot#play {
+      pointer-events: auto;
+      cursor: pointer;
+      color: var(--fg-strong);
+    }
+
+    slot#play > svg {
+      width: 48px;
+      height: 48px;
+    }
+  </style>
+
+  <slot id="play" name="icon">${Ro}</slot>
+`;
+var oe;
+class Ss extends HTMLElement {
+  constructor() {
+    super();
+    l(this, oe, null);
+    this.attachShadow({ mode: "open" }).appendChild(Ar.content.cloneNode(!0));
+  }
+  connectedCallback() {
+    var t;
+    d(this, oe, this.closest("vindral-controller")), (t = e(this, oe)) == null || t.connectListener(this), this.setAttribute("arial-label", "Play");
+  }
+  disconnectedCallback() {
+    var t;
+    (t = e(this, oe)) == null || t.disconnectListener(this);
+  }
+}
+oe = new WeakMap(), m(Ss, "observedAttributes", ["hidden"]);
+const yr = document.createElement("template");
+yr.innerHTML = /* HTML */
+`
+  <style>
+    :host {
+      display: var(--play-overlay-display);
+    }
+
+    :host(:not([${n.NEEDS_USER_INPUT}]):not([${n.PAUSED}])) #play {
+      display: none;
+    }
+  </style>
+`;
+var _i;
+const Ie = class Ie extends Ss {
+  constructor() {
+    var t;
+    super();
+    l(this, _i, () => {
+      this.dispatchEvent(new CustomEvent(f.REQUEST_USER_INPUT, { bubbles: !0, composed: !0 }));
+    });
+    (t = this.shadowRoot) == null || t.appendChild(yr.content.cloneNode(!0));
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("click", e(this, _i));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+};
+_i = new WeakMap(), m(Ie, "observedAttributes", [
+  ...G(Ie, Ie, "observedAttributes"),
+  n.NEEDS_USER_INPUT,
+  n.PAUSED
+]);
+let Ls = Ie;
+const kr = document.createElement("template");
+kr.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;
+      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+    }
+
+    @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 ii, si, ni;
+class wr extends HTMLElement {
+  constructor() {
+    super();
+    l(this, ii);
+    l(this, si);
+    l(this, ni);
+    const t = this.attachShadow({ mode: "open" });
+    t.appendChild(kr.content.cloneNode(!0)), d(this, ii, t.querySelector("#title")), d(this, si, t.querySelector("#description")), d(this, ni, t.querySelector("#background"));
+  }
+  connectedCallback() {
+  }
+  disconnectedCallback() {
+  }
+  attributeChangedCallback(t, i, s) {
+    i !== s && (t === "title" ? e(this, ii).textContent = s : t === "description" ? e(this, si).textContent = s : t === "background-image" && (e(this, ni).style.backgroundImage = `url(${s})`));
+  }
+}
+ii = new WeakMap(), si = new WeakMap(), ni = new WeakMap(), m(wr, "observedAttributes", ["title", "description", "background-image", "hidden"]);
+function Fo() {
+  customElements.define("vindral-controller", Ce), customElements.define("vindral-control-bar", vn), customElements.define("vindral-play-button", hs), customElements.define("vindral-mute-button", ls), customElements.define("vindral-buffering-overlay", Vs), customElements.define("vindral-scroll-overlay", dr), customElements.define("vindral-play-overlay", Ss), customElements.define("vindral-user-input-play-overlay", Ls), customElements.define("vindral-fullscreen-button", es), customElements.define("vindral-rendition-levels-menu", vs), customElements.define("vindral-rendition-levels-menu-list", sr), customElements.define("vindral-channel-grid-button", qi), customElements.define("vindral-channel-grid", en), customElements.define("vindral-channel-grid-item", Ts), customElements.define("vindral-pip-button", cs), customElements.define("vindral-airplay-button", Gi), customElements.define("vindral-cast-button", zi), customElements.define("vindral-cast-overlay", Qs), customElements.define("vindral-buffering-icon", Er), customElements.define("vindral-language-menu", is), customElements.define("vindral-language-menu-list", On), customElements.define("vindral-message", wr), customElements.define("vindral-volume-range", Cs), customElements.define("vindral-poster-overlay", Zn), customElements.define("vindral-player", Jn);
+}
+export {
+  Fo as registerComponents
+};