@vindral/web-sdk 4.1.2 → 4.1.3-1-g2e4861d2

package/player.js

@@ -24,11 +24,11 @@ var G = (d, a, t) => new Promise((i, s) => {
   }, u = (v) => v.done ? i(v.value) : Promise.resolve(v.value).then(o, p);
   u((t = t.apply(d, a)).next());
 });
-import { L as jr, V as Vr, i as Yr, A as Jr, C as Qr, a as Wr } from "./ZD9OGvpf.js";
+import { L as jr, V as Vr, i as Yr, C as Jr, A as Qr, a as Wr, b as Zr } from "./DPN_1qqU.js";
 import { E as li } from "./Bx7s5QdT.js";
-import { CastSender as Zr } from "./cast-sender.js";
-import { A as to, d as eo } from "./hRzek83o.js";
-const Xi = 1e3, ji = Xi * 1e3, $s = ji * 1e3, Bi = (d, a, t) => d % a === 0 ? d / a : (d / a).toFixed(t), io = (d, a = 1) => d >= $s ? `${Bi(d, $s, a)} Gbit/s` : d >= ji ? `${Bi(d, ji, a)} Mbit/s` : d >= Xi ? `${Bi(d, Xi, a)} Kbit/s` : `${d} bit/s`, so = ({ width: d, height: a }) => `${d}x${a}`, no = ({
+import { CastSender as to } from "./cast-sender.js";
+import { A as eo, d as io } from "./Bs3ZbgIy.js";
+const Xi = 1e3, ji = Xi * 1e3, $s = ji * 1e3, Bi = (d, a, t) => d % a === 0 ? d / a : (d / a).toFixed(t), so = (d, a = 1) => d >= $s ? `${Bi(d, $s, a)} Gbit/s` : d >= ji ? `${Bi(d, ji, a)} Mbit/s` : d >= Xi ? `${Bi(d, Xi, a)} Kbit/s` : `${d} bit/s`, no = ({ width: d, height: a }) => `${d}x${a}`, ro = ({
   title: d,
   subTitle: a = "Live stream",
   poster: t
@@ -102,14 +102,14 @@ function Vs(d) {
 function Ki(d) {
   return d === "trace" || d === "debug" || d === "info" || d === "warn" || d === "error" || d === "off" ? d : "off";
 }
-function ro(d) {
+function oo(d) {
   if (d === null)
     return;
   const a = d.split(",").map((t) => t.trim()).filter((t) => t === "h264" || t === "av1");
   if (a.length !== 0)
     return a;
 }
-function oo(d) {
+function ao(d) {
   if (d !== null)
     try {
       const a = JSON.parse(d);
@@ -122,7 +122,7 @@ function oo(d) {
       return;
     }
 }
-function ao(d) {
+function lo(d) {
   if (d !== null)
     try {
       const a = JSON.parse(d);
@@ -148,7 +148,7 @@ function bi(d) {
 function L(d) {
   return typeof d == "string";
 }
-function S(d, a) {
+function N(d, a) {
   if (d === null)
     return a != null ? a : void 0;
   const t = d.toLowerCase();
@@ -336,7 +336,7 @@ Se = new WeakSet(), Yi = function() {
   n.IS_AIRPLAYING
 ]);
 let Vi = me;
-const Ws = document.createElement("template"), lo = (
+const Ws = document.createElement("template"), ho = (
   /* SVG */
   `
 <svg width="24" height="24" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
@@ -391,7 +391,7 @@ Ws.innerHTML = /* HTML */
     }
   </style>
 
-  <slot name="icon">${lo}</slot>
+  <slot name="icon">${ho}</slot>
 `;
 var $t;
 class Zs extends HTMLElement {
@@ -784,13 +784,13 @@ hn.innerHTML = /* HTML */
     <slot name="grid" id="grid"></slot>
   </div>
 `;
-var bt, mt, Xt, O, T, jt, Ne, Ue, Re, k, cn, un, pn, Wi, bn, mn, vn, gn, fn, En, An, ce;
+var mt, vt, Xt, O, T, jt, Ne, Ue, Re, k, cn, un, pn, Wi, bn, mn, vn, gn, fn, En, An, ce;
 class dn extends HTMLElement {
   constructor() {
     super();
     l(this, k);
-    l(this, bt, null);
     l(this, mt, null);
+    l(this, vt, null);
     l(this, Xt, []);
     l(this, O, []);
     l(this, T);
@@ -809,13 +809,13 @@ class dn extends HTMLElement {
   }
   connectedCallback() {
     var t, i, s;
-    c(this, mt, this.closest("vindral-controller")), (t = e(this, mt)) == null || t.connectListener(this), r(this, k, cn).call(this), (s = e(this, bt)) == null || s.observe((i = this.shadowRoot) == null ? void 0 : i.querySelector(".wrapper")), r(this, k, Wi).call(this), c(this, Ne, window.setInterval(() => {
+    c(this, vt, this.closest("vindral-controller")), (t = e(this, vt)) == null || t.connectListener(this), r(this, k, cn).call(this), (s = e(this, mt)) == null || s.observe((i = this.shadowRoot) == null ? void 0 : i.querySelector(".wrapper")), r(this, k, Wi).call(this), c(this, Ne, window.setInterval(() => {
       r(this, k, gn).call(this);
     }, 1e4));
   }
   disconnectedCallback() {
     var t;
-    clearInterval(e(this, Ne)), this.removeEventListener("keydown", this), (t = e(this, bt)) == null || t.disconnect();
+    clearInterval(e(this, Ne)), this.removeEventListener("keydown", this), (t = e(this, mt)) == null || t.disconnect();
   }
   attributeChangedCallback(t, i, s) {
     if (i !== s)
@@ -840,8 +840,8 @@ class dn extends HTMLElement {
     c(this, Ue, an()), (t = e(this, T)) == null || t.focus();
   }
 }
-bt = new WeakMap(), mt = new WeakMap(), Xt = new WeakMap(), O = new WeakMap(), T = new WeakMap(), jt = new WeakMap(), Ne = new WeakMap(), Ue = new WeakMap(), Re = new WeakMap(), k = new WeakSet(), cn = function() {
-  c(this, bt, new IntersectionObserver(
+mt = new WeakMap(), vt = new WeakMap(), Xt = new WeakMap(), O = new WeakMap(), T = new WeakMap(), jt = new WeakMap(), Ne = new WeakMap(), Ue = new WeakMap(), Re = new WeakMap(), k = new WeakSet(), cn = function() {
+  c(this, mt, new IntersectionObserver(
     (t) => {
       t.forEach((i) => {
         const { target: s, isIntersecting: o } = i;
@@ -849,7 +849,7 @@ bt = new WeakMap(), mt = new WeakMap(), Xt = new WeakMap(), O = new WeakMap(), T
       });
     },
     {
-      root: e(this, mt)
+      root: e(this, vt)
     }
   ));
 }, un = function(t) {
@@ -876,10 +876,10 @@ bt = new WeakMap(), mt = new WeakMap(), Xt = new WeakMap(), O = new WeakMap(), T
     if (u)
       return r(this, k, bn).call(this, u.element, p), u;
     const v = r(this, k, mn).call(this, p, s);
-    return (g = e(this, bt)) == null || g.observe(v.element), t.contains(v.element) || t.appendChild(v.element), v;
+    return (g = e(this, mt)) == null || g.observe(v.element), t.contains(v.element) || t.appendChild(v.element), v;
   })), i.forEach((p, u) => {
     var v;
-    e(this, Xt).some((g) => g.channelId === u) || ((v = e(this, bt)) == null || v.unobserve(p.element), p.element.remove());
+    e(this, Xt).some((g) => g.channelId === u) || ((v = e(this, mt)) == null || v.unobserve(p.element), p.element.remove());
   }), e(this, O).sort((p, u) => p.element.hasAttribute("offline") && !u.element.hasAttribute("offline") ? 1 : -1).forEach((p) => {
     t.contains(p.element) || t.appendChild(p.element);
   });
@@ -896,11 +896,11 @@ bt = new WeakMap(), mt = new WeakMap(), Xt = new WeakMap(), O = new WeakMap(), T
   this.hasAttribute("hidden") || e(this, O).forEach((t) => t.element.updateThumbnail());
 }, fn = function(t) {
   var i;
-  (i = e(this, mt)) == null || i.setAttribute("channel-id", t.channelId);
+  (i = e(this, vt)) == null || i.setAttribute("channel-id", t.channelId);
 }, En = function(t) {
   var u, v, g;
   const { key: i, ctrlKey: s, altKey: o, metaKey: p } = t;
-  s || o || p || this.keysUsed.includes(i) && (t.preventDefault(), t.stopPropagation(), i === "Tab" || i === "Escape" ? ((u = this.parentElement) == null || u.removeAttribute("open"), (v = e(this, mt)) == null || v.focus()) : i === "Enter" || i === " " ? (g = e(this, T)) == null || g.click() : r(this, k, An).call(this, t));
+  s || o || p || this.keysUsed.includes(i) && (t.preventDefault(), t.stopPropagation(), i === "Tab" || i === "Escape" ? ((u = this.parentElement) == null || u.removeAttribute("open"), (v = e(this, vt)) == null || v.focus()) : i === "Enter" || i === " " ? (g = e(this, T)) == null || g.click() : r(this, k, An).call(this, t));
 }, An = function(t) {
   var u;
   if (!e(this, T)) return;
@@ -953,7 +953,7 @@ bt = new WeakMap(), mt = new WeakMap(), Xt = new WeakMap(), O = new WeakMap(), T
   "mode",
   "hidden"
 ]);
-const ho = (
+const co = (
   /* 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">
@@ -979,7 +979,7 @@ yn.innerHTML = /* HTML */
       display: none;
     }
   </style>
-  <slot name="button">${ho}</slot>
+  <slot name="button">${co}</slot>
 `;
 var Vt, _, j, wi, R, kn, ts, gi, es, is;
 const ge = class ge extends tt {
@@ -1088,7 +1088,7 @@ class In extends HTMLElement {
   }
 }
 m(In, "observedAttributes", []);
-class co extends li {
+class uo extends li {
   constructor(t) {
     super();
     m(this, "config");
@@ -1217,7 +1217,7 @@ const St = class St extends li {
 m(St, "isFullscreenApiSupported", (t) => (t.requestFullscreen || t.webkitRequestFullscreen || t.webkitEnterFullscreen || t.mozRequestFullScreen) !== void 0);
 let be = St;
 var Ii, Ci, Li, Ti, Yt, xi, Si, _e, Jt;
-class uo extends li {
+class po extends li {
   constructor(t) {
     super();
     m(this, "unload", () => {
@@ -1247,7 +1247,7 @@ class uo extends li {
     l(this, Li, () => G(this, null, function* () {
       yield this.element.requestPictureInPicture();
     }));
-    l(this, Ti, () => G(this, null, function* () {
+    l(this, Ti, () => G(null, null, function* () {
       yield document.exitPictureInPicture();
     }));
     l(this, Yt, () => !!this.element.requestPictureInPicture && !!document.pictureInPictureEnabled);
@@ -1617,17 +1617,20 @@ Sn.innerHTML = /* HTML */
       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;
+      pointer-events: none;
     }
 
     #ui > * {
-      pointer-events: auto;
       display: var(--ui-display);
     }
 
+    #ui > slot::slotted(*) {
+      pointer-events: auto;
+      z-index: 10;
+      // Ensure the #ui element is above the video element on Safari
+      // and that we can layer things under, between, and above ui and video
+    }
+
     #video {
       cursor: none;
       display: flex;
@@ -1635,6 +1638,10 @@ Sn.innerHTML = /* HTML */
       z-index: 0;
     }
 
+    :host([user-interacting]) #video {
+      cursor: auto;
+    }
+
     #video > canvas {
       object-fit: contain;
     }
@@ -1645,12 +1652,11 @@ Sn.innerHTML = /* HTML */
       flex-grow: 1;
     }
 
-    slot#top-bar {
+    #top-bar::slotted(*) {
       background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
       padding: var(--control-padding);
     }
-
-    slot#bottom-bar {
+    #bottom-bar::slotted(*) {
       padding: var(--control-padding);
       background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
     }
@@ -1722,15 +1728,15 @@ Sn.innerHTML = /* HTML */
   </div>
 `;
 const qi = ["ArrowDown", "ArrowLeft", "ArrowRight", "Tab", "Enter", " ", "f", "m"];
-var Ri, it, Oe, vt, gt, b, Fe, st, nt, ee, rt, B, V, F, ot, He, ze, U, ft, h, ss, Nn, Un, Rn, ns, _n, Pn, Mn, Ge, Dn, On, Fn, Hn, $e, _i, Pi, zn, Rt, rs, os, fi, pt, Gn, $n, Bn, as, Mi, Di, ls, A, w;
+var Ri, it, Oe, gt, ft, b, Fe, st, nt, ee, rt, B, V, F, ot, He, ze, U, Et, h, ss, Nn, Un, Rn, ns, _n, Pn, Mn, Ge, Dn, On, Fn, Hn, $e, _i, Pi, zn, Rt, rs, os, fi, pt, Gn, $n, Bn, as, Mi, Di, ls, A, w;
 const fe = class fe extends HTMLElement {
   constructor() {
     super();
     l(this, h);
     l(this, it, /* @__PURE__ */ new Map());
     l(this, Oe, 2e3);
-    l(this, vt, null);
     l(this, gt, null);
+    l(this, ft, null);
     l(this, b);
     l(this, Fe, e(fe, Ri));
     l(this, st);
@@ -1744,7 +1750,7 @@ const fe = class fe extends HTMLElement {
     l(this, He);
     l(this, ze);
     l(this, U);
-    l(this, ft, null);
+    l(this, Et, null);
     l(this, Ge, 0);
     m(this, "handleEvent", (t) => {
       switch (t.type) {
@@ -1809,11 +1815,11 @@ const fe = class fe extends HTMLElement {
             }
             break;
           case f.CHANNEL_GRID_OPENED: {
-            e(this, ft) === null && r(this, h, rs).call(this);
+            e(this, Et) === null && r(this, h, rs).call(this);
             break;
           }
           case f.CHANNEL_GRID_CLOSED: {
-            e(this, ft) !== null && (clearTimeout(e(this, ft)), c(this, ft, null));
+            e(this, Et) !== null && (clearTimeout(e(this, Et)), c(this, Et, null));
             break;
           }
           case f.ENTER_PIP:
@@ -1872,7 +1878,7 @@ const fe = class fe extends HTMLElement {
   }
   connectedCallback() {
     return G(this, null, function* () {
-      S(this.getAttribute("auto-instance-enabled"), !0) && (yield r(this, h, ss).call(this));
+      N(this.getAttribute("auto-instance-enabled"), !0) && (yield r(this, h, ss).call(this));
       for (const i of Object.values(f))
         this.addEventListener(i, e(this, $e));
       window.PointerEvent ? (this.addEventListener("pointerdown", this), this.addEventListener("pointermove", this), this.addEventListener("pointerup", this)) : this.addEventListener("mousemove", this), this.addEventListener("mouseleave", this), this.addEventListener("keydown", this), this.addEventListener("resize", this), this.addEventListener("dblclick", this), this.connectListener(this), this.tabIndex = 0, this.focus({ preventScroll: !0 });
@@ -1886,7 +1892,7 @@ const fe = class fe extends HTMLElement {
     this.disconnectListener(this);
   }
   attributeChangedCallback(t, i, s) {
-    var o, p, u, v, g, P, et, J, Ct, Lt, Tt, hi, di, ci, ui;
+    var o, p, u, v, g, P, et, J, Lt, Tt, xt, hi, di, ci, ui;
     if (i != s)
       switch (e(this, U).debug("Attribute changed", { name: t, oldValue: i, newValue: s }), t) {
         case "channel-id":
@@ -1929,7 +1935,7 @@ const fe = class fe extends HTMLElement {
           L(s) ? ((P = e(this, b)) != null && P.mediaElement && (e(this, b).mediaElement.style.display = "hidden"), (et = e(this, b)) == null || et.pause()) : (J = e(this, b)) != null && J.mediaElement && (e(this, b).mediaElement.style.display = "block");
           break;
         case "is-casting":
-          L(s) ? ((Ct = e(this, B)) != null && Ct.isFullscreen() && r(this, h, as).call(this), (Lt = e(this, b)) == null || Lt.pause()) : document.hidden || (Tt = e(this, b)) == null || Tt.play();
+          L(s) ? ((Lt = e(this, B)) != null && Lt.isFullscreen() && r(this, h, as).call(this), (Tt = e(this, b)) == null || Tt.pause()) : document.hidden || (xt = e(this, b)) == null || xt.play();
           break;
         case "cast-receiver-id":
           c(this, He, s);
@@ -2016,12 +2022,12 @@ const fe = class fe extends HTMLElement {
     r(this, h, ss).call(this);
   }
 };
-Ri = new WeakMap(), it = new WeakMap(), Oe = new WeakMap(), vt = new WeakMap(), gt = new WeakMap(), b = new WeakMap(), Fe = new WeakMap(), st = new WeakMap(), nt = new WeakMap(), ee = new WeakMap(), rt = new WeakMap(), B = new WeakMap(), V = new WeakMap(), F = new WeakMap(), ot = new WeakMap(), He = new WeakMap(), ze = new WeakMap(), U = new WeakMap(), ft = new WeakMap(), h = new WeakSet(), ss = function() {
+Ri = new WeakMap(), it = new WeakMap(), Oe = new WeakMap(), gt = new WeakMap(), ft = new WeakMap(), b = new WeakMap(), Fe = new WeakMap(), st = new WeakMap(), nt = new WeakMap(), ee = new WeakMap(), rt = new WeakMap(), B = new WeakMap(), V = new WeakMap(), F = new WeakMap(), ot = new WeakMap(), He = new WeakMap(), ze = new WeakMap(), U = new WeakMap(), Et = new WeakMap(), h = new WeakSet(), ss = function() {
   return G(this, null, function* () {
     var Hs, zs;
     if (!e(this, st)) return;
     yield (Hs = e(this, b)) == null ? void 0 : Hs.unload();
-    const t = this.hasAttribute(n.PAUSED), i = this.hasAttribute(n.MUTED), s = Vs(this.getAttribute(n.MEDIA)), o = this.getAttribute(n.TEXT_TRACK) || void 0, p = this.getAttribute("edge-url") || void 0, u = this.getAttribute("authentication-token") || void 0, v = bi(this.getAttribute("max-video-bit-rate")), g = oo(this.getAttribute("max-size")), P = bi(this.getAttribute("min-buffer-time")), et = bi(this.getAttribute("max-buffer-time")), J = S(this.getAttribute("burst-enabled")), Ct = S(this.getAttribute("mse-enabled")), Lt = S(this.getAttribute("mse-opus-enabled")), Tt = S(this.getAttribute("ios-background-play-enabled")), hi = S(this.getAttribute("ios-wake-lock-enabled")), di = S(this.getAttribute("ios-media-element-enabled")), ci = S(this.getAttribute("abr-enabled")), ui = S(this.getAttribute("size-based-resolution-cap-enabled")), z = S(this.getAttribute("telemetry-enabled")), Ur = ro(this.getAttribute("video-codecs")), Os = Ys(this.getAttribute("poster")), Rr = ao(this.getAttribute("advanced")), _r = Ki(this.getAttribute("log-level")), Pr = {
+    const t = this.hasAttribute(n.PAUSED), i = this.hasAttribute(n.MUTED), s = Vs(this.getAttribute(n.MEDIA)), o = this.getAttribute(n.TEXT_TRACK) || void 0, p = this.getAttribute("edge-url") || void 0, u = this.getAttribute("authentication-token") || void 0, v = bi(this.getAttribute("max-video-bit-rate")), g = ao(this.getAttribute("max-size")), P = bi(this.getAttribute("min-buffer-time")), et = bi(this.getAttribute("max-buffer-time")), J = N(this.getAttribute("burst-enabled")), Lt = N(this.getAttribute("mse-enabled")), Tt = N(this.getAttribute("mse-opus-enabled")), xt = N(this.getAttribute("ios-background-play-enabled")), hi = N(this.getAttribute("ios-wake-lock-enabled")), di = N(this.getAttribute("ios-media-element-enabled")), ci = N(this.getAttribute("abr-enabled")), ui = N(this.getAttribute("size-based-resolution-cap-enabled")), z = N(this.getAttribute("telemetry-enabled")), Ur = oo(this.getAttribute("video-codecs")), Os = Ys(this.getAttribute("poster")), Rr = lo(this.getAttribute("advanced")), _r = Ki(this.getAttribute("log-level")), Pr = {
       headers: mi(this.getAttribute("drm-headers")),
       queryParams: mi(this.getAttribute("drm-queryparams")),
       widevine: {
@@ -2032,7 +2038,7 @@ Ri = new WeakMap(), it = new WeakMap(), Oe = new WeakMap(), vt = new WeakMap(),
         videoRobustness: vi(this.getAttribute("drm-playready-video-robustness")),
         audioRobustness: vi(this.getAttribute("drm-playready-audio-robustness"))
       }
-    }, Mr = S(this.getAttribute("webtransport-enabled")), Fs = bi(this.getAttribute("reconnect-retries")), Dr = Fs !== void 0 ? (y) => y.reconnectRetries < Fs : void 0, Or = this.getAttribute("language") || void 0;
+    }, Mr = N(this.getAttribute("webtransport-enabled")), Fs = bi(this.getAttribute("reconnect-retries")), Dr = Fs !== void 0 ? (y) => y.reconnectRetries < Fs : void 0, Or = this.getAttribute("language") || void 0;
     c(this, b, new Vr({
       url: e(this, Fe),
       channelId: e(this, st),
@@ -2046,9 +2052,9 @@ Ri = new WeakMap(), it = new WeakMap(), Oe = new WeakMap(), vt = new WeakMap(),
       minBufferTime: P,
       maxBufferTime: et,
       burstEnabled: J,
-      mseEnabled: Ct,
-      mseOpusEnabled: Lt,
-      iosBackgroundPlayEnabled: Tt,
+      mseEnabled: Lt,
+      mseOpusEnabled: Tt,
+      iosBackgroundPlayEnabled: xt,
       iosWakeLockEnabled: hi,
       iosMediaElementEnabled: di,
       abrEnabled: ci,
@@ -2103,14 +2109,14 @@ Ri = new WeakMap(), it = new WeakMap(), Oe = new WeakMap(), vt = new WeakMap(),
       y != null && y.forVideo ? (r(this, h, A).call(this, n.NEEDS_USER_INPUT_VIDEO, ""), r(this, h, w).call(this, n.NEEDS_USER_INPUT_AUDIO)) : y != null && y.forAudio && (r(this, h, A).call(this, n.NEEDS_USER_INPUT_AUDIO, ""), r(this, h, w).call(this, n.NEEDS_USER_INPUT_VIDEO));
     }), e(this, b).on("is live", (y) => {
       y || r(this, h, w).call(this, n.BUFFERING);
-    }), c(this, gt, (zs = this.shadowRoot) == null ? void 0 : zs.querySelector("#video")), e(this, gt) && e(this, b).attach(e(this, gt)), this.setAttribute(n.MEDIA, e(this, b).media), e(this, b).muted && r(this, h, A).call(this, n.MUTED, ""), r(this, h, A).call(this, n.VOLUME, e(this, b).volume.toString()), L(Os) || r(this, h, A).call(this, n.POSTER_SRC, e(this, b).getThumbnailUrl());
-    const Fr = S(this.getAttribute(n.AIRPLAY_ENABLED), !1), Hr = S(this.getAttribute(n.CAST_ENABLED), !0), zr = S(this.getAttribute(n.FULLSCREEN_ENABLED), !0), Gr = S(this.getAttribute(n.PIP_ENABLED), !0), $r = S(this.getAttribute(n.VU_METER_ENABLED), !1);
+    }), c(this, ft, (zs = this.shadowRoot) == null ? void 0 : zs.querySelector("#video")), e(this, ft) && e(this, b).attach(e(this, ft)), this.setAttribute(n.MEDIA, e(this, b).media), e(this, b).muted && r(this, h, A).call(this, n.MUTED, ""), r(this, h, A).call(this, n.VOLUME, e(this, b).volume.toString()), L(Os) || r(this, h, A).call(this, n.POSTER_SRC, e(this, b).getThumbnailUrl());
+    const Fr = N(this.getAttribute(n.AIRPLAY_ENABLED), !1), Hr = N(this.getAttribute(n.CAST_ENABLED), !0), zr = N(this.getAttribute(n.FULLSCREEN_ENABLED), !0), Gr = N(this.getAttribute(n.PIP_ENABLED), !0), $r = N(this.getAttribute(n.VU_METER_ENABLED), !1);
     Fr && r(this, h, Pn).call(this, e(this, b)), Hr && r(this, h, Rn).call(this, e(this, b)), zr && r(this, h, Un).call(this, e(this, b)), Gr && r(this, h, Nn).call(this, e(this, b)), t || e(this, b).play(), $r && r(this, h, Mn).call(this, e(this, b)), this.dispatchEvent(
       new CustomEvent("vindral-instance-ready", { bubbles: !0, composed: !0, detail: e(this, b) })
     );
   });
 }, Nn = function(t) {
-  t.mediaElement instanceof HTMLVideoElement && (c(this, rt, new uo(t.mediaElement)), e(this, rt).isSupported() && (e(this, U).debug("PIP is supported"), r(this, h, A).call(this, n.PIP_AVAILABLE, "")), e(this, rt).on("on picture in picture change", (i) => {
+  t.mediaElement instanceof HTMLVideoElement && (c(this, rt, new po(t.mediaElement)), e(this, rt).isSupported() && (e(this, U).debug("PIP is supported"), r(this, h, A).call(this, n.PIP_AVAILABLE, "")), e(this, rt).on("on picture in picture change", (i) => {
     i ? r(this, h, A).call(this, n.IS_PIP, "") : r(this, h, w).call(this, n.IS_PIP);
   }));
 }, Un = function(t) {
@@ -2119,7 +2125,7 @@ Ri = new WeakMap(), it = new WeakMap(), Oe = new WeakMap(), vt = new WeakMap(),
     s ? r(this, h, A).call(this, n.FULLSCREEN, "") : r(this, h, w).call(this, n.FULLSCREEN);
   });
 }, Rn = function(t) {
-  c(this, ot, new Zr({
+  c(this, ot, new to({
     background: e(this, ze),
     receiverApplicationId: e(this, He),
     options: t.getCastOptions()
@@ -2140,7 +2146,7 @@ Ri = new WeakMap(), it = new WeakMap(), Oe = new WeakMap(), vt = new WeakMap(),
   var s;
   (s = e(this, V)) == null || s.unload();
   const i = t.getCastOptions();
-  c(this, V, new co({
+  c(this, V, new uo({
     url: i.url,
     channelId: i.channelId,
     authenticationToken: i.authenticationToken,
@@ -2166,10 +2172,10 @@ Ri = new WeakMap(), it = new WeakMap(), Oe = new WeakMap(), vt = new WeakMap(),
     }), r(this, h, A).call(this, n.VOLUME_LEVEL, JSON.stringify({ left: null, right: null })), (!e(this, F).isMediaElementSource || !this.hasAttribute(n.MUTED)) && e(this, F).start();
   }
 }, Ge = new WeakMap(), Dn = function(t) {
-  t.pointerType !== "mouse" && t.timeStamp - e(this, Ge) < 250 || (r(this, h, fi).call(this), e(this, vt) && clearTimeout(e(this, vt)), t.target instanceof HTMLElement && ([this, e(this, gt)].includes(t.target) || t.target.localName === "vindral-scroll-overlay") && r(this, h, pt).call(this));
+  t.pointerType !== "mouse" && t.timeStamp - e(this, Ge) < 250 || (r(this, h, fi).call(this), e(this, gt) && clearTimeout(e(this, gt)), t.target instanceof HTMLElement && ([this, e(this, ft)].includes(t.target) || t.target.localName === "vindral-scroll-overlay") && r(this, h, pt).call(this));
 }, On = function(t) {
   const i = this.hasAttribute(n.USER_INTERACTING);
-  t.pointerType === "touch" && t.target instanceof HTMLElement ? [this, e(this, gt)].includes(t.target) && i ? r(this, h, os).call(this) : r(this, h, pt).call(this) : t.composedPath().some((s) => s instanceof HTMLElement && ["vindral-play-button"].includes(s == null ? void 0 : s.localName)) && r(this, h, pt).call(this);
+  t.pointerType === "touch" && t.target instanceof HTMLElement ? [this, e(this, ft)].includes(t.target) && i ? r(this, h, os).call(this) : r(this, h, pt).call(this) : t.composedPath().some((s) => s instanceof HTMLElement && ["vindral-play-button"].includes(s == null ? void 0 : s.localName)) && r(this, h, pt).call(this);
 }, Fn = function(t) {
   !e(this, B) || t.target instanceof tt || t.target instanceof Ms || t.target instanceof Ds || (this.hasAttribute(n.FULLSCREEN) ? this.removeAttribute(n.FULLSCREEN) : this.setAttribute(n.FULLSCREEN, ""));
 }, Hn = function(t) {
@@ -2201,7 +2207,7 @@ Ri = new WeakMap(), it = new WeakMap(), Oe = new WeakMap(), vt = new WeakMap(),
       const i = yield e(this, b).getApiClient().getChannels(e(this, nt));
       r(this, h, A).call(this, n.CHANNELS, JSON.stringify(i));
     }
-    c(this, ft, window.setTimeout(() => void r(this, h, rs).call(this), 1e4));
+    c(this, Et, window.setTimeout(() => void r(this, h, rs).call(this), 1e4));
   });
 }, os = function() {
   !this.hasAttribute(n.USER_INTERACTING) || this.hasAttribute(n.UI_LOCKED) || (this.dispatchEvent(
@@ -2214,7 +2220,7 @@ Ri = new WeakMap(), it = new WeakMap(), Oe = new WeakMap(), vt = new WeakMap(),
     );
   });
 }, pt = function() {
-  r(this, h, fi).call(this), e(this, vt) && clearTimeout(e(this, vt)), e(this, Oe) && c(this, vt, self.setTimeout(() => {
+  r(this, h, fi).call(this), e(this, gt) && clearTimeout(e(this, gt)), e(this, Oe) && c(this, gt, self.setTimeout(() => {
     r(this, h, os).call(this);
   }, e(this, Oe)));
 }, Gn = function() {
@@ -2286,12 +2292,12 @@ Ri = new WeakMap(), it = new WeakMap(), Oe = new WeakMap(), vt = new WeakMap(),
   "language"
 ]), l(fe, Ri, "https://lb.cdn.vindral.com");
 let Le = fe;
-const Kn = document.createElement("template"), po = (
+const Kn = document.createElement("template"), bo = (
   /* SVG */
   `
   <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-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>
 `
-), bo = (
+), mo = (
   /* SVG */
   `
   <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  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>
@@ -2314,8 +2320,8 @@ Kn.innerHTML = /* HTML */
   </style>
 
   <slot name="icon">
-    <slot name="enter">${po}</slot>
-    <slot name="exit">${bo}</slot>
+    <slot name="enter">${bo}</slot>
+    <slot name="exit">${mo}</slot>
   </slot>
 `;
 const Ee = class Ee extends tt {
@@ -2345,7 +2351,7 @@ const Ee = class Ee extends tt {
 };
 m(Ee, "observedAttributes", [...q(Ee, Ee, "observedAttributes"), n.FULLSCREEN]);
 let hs = Ee;
-const mo = (
+const vo = (
   /* 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>
@@ -2359,7 +2365,7 @@ qn.innerHTML = /* HTML */
     }
   </style>
 
-  <slot name="button">${mo}</slot>
+  <slot name="button">${vo}</slot>
   <slot name="listbox" hidden>
     <vindral-language-menu-list id="listbox" part="listbox"></vindral-language-menu-list>
   </slot>
@@ -2384,7 +2390,7 @@ Be = new WeakSet(), cs = function() {
   i && s ? this.setAttribute("hidden", "") : this.removeAttribute("hidden");
 }, m(Ae, "observedAttributes", [...q(Ae, Ae, "observedAttributes"), n.LANGUAGES, n.TEXT_TRACKS]);
 let ds = Ae;
-const Xn = document.createElement("template"), vo = (
+const Xn = document.createElement("template"), go = (
   /* 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>
@@ -2466,7 +2472,7 @@ Xn.innerHTML = /* HTML */
     }
 
     [role="menuitem"][aria-selected="true"]::before {
-      content: url("data:image/svg+xml,${encodeURIComponent(vo)}");
+      content: url("data:image/svg+xml,${encodeURIComponent(go)}");
       position: absolute;
       left: var(--padding-3);
       top: calc(50% - 8px);
@@ -2505,7 +2511,7 @@ Xn.innerHTML = /* HTML */
     <div class="menu"></div>
   </div>
 `;
-var Ke, qe, Xe, je, Q, K, _t, Et, ie, Ve, at, W, E, Vn, Yn, us, ps, Ei, ue, pe, Jn, Qn, Wn, bs, ms, Zn;
+var Ke, qe, Xe, je, Q, K, _t, At, ie, Ve, at, W, E, Vn, Yn, us, ps, Ei, ue, pe, Jn, Qn, Wn, bs, ms, Zn;
 class jn extends HTMLElement {
   constructor() {
     super();
@@ -2517,7 +2523,7 @@ class jn extends HTMLElement {
     l(this, Q, []);
     l(this, K, []);
     l(this, _t, null);
-    l(this, Et, null);
+    l(this, At, null);
     l(this, ie, null);
     l(this, Ve, null);
     l(this, at, null);
@@ -2534,7 +2540,7 @@ class jn extends HTMLElement {
   connectedCallback() {
     var i, s, o;
     const t = this.getRootNode();
-    t instanceof ShadowRoot && (c(this, ie, t.host.closest("vindral-controller")), (i = e(this, ie)) == null || i.connectListener(this), c(this, _t, (s = this.shadowRoot) == null ? void 0 : s.querySelector("#languages .menu")), c(this, Et, (o = this.shadowRoot) == null ? void 0 : o.querySelector("#text-tracks .menu")), r(this, E, Vn).call(this), r(this, E, Yn).call(this), c(this, Ve, t.host), this.addEventListener("keydown", this));
+    t instanceof ShadowRoot && (c(this, ie, t.host.closest("vindral-controller")), (i = e(this, ie)) == null || i.connectListener(this), c(this, _t, (s = this.shadowRoot) == null ? void 0 : s.querySelector("#languages .menu")), c(this, At, (o = this.shadowRoot) == null ? void 0 : o.querySelector("#text-tracks .menu")), r(this, E, Vn).call(this), r(this, E, Yn).call(this), c(this, Ve, t.host), this.addEventListener("keydown", this));
   }
   disconnectedCallback() {
     this.removeEventListener("keydown", this);
@@ -2561,7 +2567,7 @@ class jn extends HTMLElement {
     e(this, at) ? e(this, at).focus() : e(this, W) && e(this, W).focus();
   }
 }
-Ke = new WeakMap(), qe = new WeakMap(), Xe = new WeakMap(), je = new WeakMap(), Q = new WeakMap(), K = new WeakMap(), _t = new WeakMap(), Et = new WeakMap(), ie = new WeakMap(), Ve = new WeakMap(), at = new WeakMap(), W = new WeakMap(), E = new WeakSet(), Vn = function() {
+Ke = new WeakMap(), qe = new WeakMap(), Xe = new WeakMap(), je = new WeakMap(), Q = new WeakMap(), K = new WeakMap(), _t = new WeakMap(), At = new WeakMap(), ie = new WeakMap(), Ve = new WeakMap(), at = new WeakMap(), W = new WeakMap(), E = new WeakSet(), Vn = function() {
   const t = (s) => {
     s.forEach((o) => {
       if (o.intersectionRatio !== 1)
@@ -2579,13 +2585,13 @@ Ke = new WeakMap(), qe = new WeakMap(), Xe = new WeakMap(), je = new WeakMap(),
     // 0 means any intersection is enough to be considered "inside"
   }).observe(this);
 }, Yn = function() {
-  e(this, _t) && (r(this, E, ps).call(this), r(this, E, ue).call(this)), e(this, Et) && (r(this, E, us).call(this), r(this, E, pe).call(this));
+  e(this, _t) && (r(this, E, ps).call(this), r(this, E, ue).call(this)), e(this, At) && (r(this, E, us).call(this), r(this, E, pe).call(this));
 }, us = function() {
-  e(this, Et).innerHTML = "", c(this, K, []);
+  e(this, At).innerHTML = "", c(this, K, []);
   const t = r(this, E, Ei).call(this, "Off", "textTrack", void 0);
-  e(this, Et).appendChild(t), e(this, K).push({ element: t, value: void 0 }), e(this, qe).forEach((i) => {
+  e(this, At).appendChild(t), e(this, K).push({ element: t, value: void 0 }), e(this, qe).forEach((i) => {
     const s = r(this, E, Ei).call(this, i, "textTrack", i);
-    e(this, Et).appendChild(s), e(this, K).push({ element: s, value: i });
+    e(this, At).appendChild(s), e(this, K).push({ element: s, value: i });
   }), r(this, E, pe).call(this);
 }, ps = function() {
   e(this, _t).innerHTML = "", c(this, Q, []), e(this, Ke).forEach((t) => {
@@ -2639,7 +2645,7 @@ Ke = new WeakMap(), qe = new WeakMap(), Xe = new WeakMap(), je = new WeakMap(),
   n.LANGUAGE,
   n.TEXT_TRACK
 ]);
-const tr = document.createElement("template"), go = (
+const tr = document.createElement("template"), fo = (
   /* SVG */
   `
 <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  <g fill="none" stroke="currentColor">
@@ -2647,7 +2653,7 @@ const tr = document.createElement("template"), go = (
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2" />
 </g></svg>
 `
-), fo = (
+), Eo = (
   /* SVG */
   `
   <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  <g fill="none" stroke="currentColor">
@@ -2671,8 +2677,8 @@ tr.innerHTML = /* HTML */
   </style>
 
   <slot name="icon">
-    <slot name="mute">${go}</slot>
-    <slot name="unmute">${fo}</slot>
+    <slot name="mute">${fo}</slot>
+    <slot name="unmute">${Eo}</slot>
   </slot>
 `;
 const ye = class ye extends tt {
@@ -2702,7 +2708,7 @@ const ye = class ye extends tt {
 };
 m(ye, "observedAttributes", [...q(ye, ye, "observedAttributes"), n.MUTED]);
 let vs = ye;
-const er = document.createElement("template"), Eo = (
+const er = document.createElement("template"), Ao = (
   /* SVG */
   `
     <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="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>
@@ -2719,7 +2725,7 @@ er.innerHTML = /* HTML */
       display: none !important;
     }
   </style>
-  <slot name="icon">${Eo}</slot>
+  <slot name="icon">${Ao}</slot>
 `;
 const ke = class ke extends tt {
   constructor() {
@@ -2754,12 +2760,12 @@ const ke = class ke extends tt {
 };
 m(ke, "observedAttributes", [...q(ke, ke, "observedAttributes"), n.IS_PIP, n.PIP_AVAILABLE]);
 let gs = ke;
-const ir = document.createElement("template"), Ao = (
+const ir = document.createElement("template"), yo = (
   /* SVG */
   `
   <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="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>
 `
-), yo = (
+), ko = (
   /* 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>
@@ -2782,8 +2788,8 @@ ir.innerHTML = /* HTML */
   </style>
 
   <slot name="icon">
-    <slot name="play">${Ao}</slot>
-    <slot name="pause">${yo}</slot>
+    <slot name="play">${yo}</slot>
+    <slot name="pause">${ko}</slot>
   </slot>
 `;
 const we = class we extends tt {
@@ -2818,61 +2824,61 @@ const X = {
   OFFLINE: "offline",
   REFRESH_POSTER_ENABLED: "refresh-poster-enabled",
   STREAM_POLL_ENABLED: "stream-poll-enabled"
-}, ko = Object.values(X);
-var Ye, se, At, Pt, yt, kt, lt, H, Es, sr, As, ys;
-class wo extends li {
+}, wo = Object.values(X);
+var Ye, se, yt, Pt, kt, wt, lt, H, Es, sr, As, ys;
+class Io extends li {
   constructor(t) {
     super();
     l(this, H);
     l(this, Ye);
     l(this, se);
-    l(this, At, !1);
+    l(this, yt, !1);
     l(this, Pt, !1);
-    l(this, yt, !0);
-    l(this, kt, null);
+    l(this, kt, !0);
+    l(this, wt, null);
     l(this, lt, null);
-    c(this, se, t), c(this, Ye, new to({
+    c(this, se, t), c(this, Ye, new eo({
       publicEndpoint: t.url,
       tokenFactory: () => t.authenticationToken
     }));
   }
   start(t = 5e3) {
-    e(this, lt) && clearInterval(e(this, lt)), c(this, At, !1), c(this, Pt, !1), r(this, H, ys).call(this), r(this, H, Es).call(this), c(this, lt, window.setInterval(() => {
-      !e(this, Pt) && !e(this, se).infiniteReconnect && !e(this, kt) && e(this, yt) && c(this, kt, window.setTimeout(() => r(this, H, sr).call(this), 5 * 60 * 1e3)), !e(this, Pt) && e(this, yt) && r(this, H, Es).call(this);
+    e(this, lt) && clearInterval(e(this, lt)), c(this, yt, !1), c(this, Pt, !1), r(this, H, ys).call(this), r(this, H, Es).call(this), c(this, lt, window.setInterval(() => {
+      !e(this, Pt) && !e(this, se).infiniteReconnect && !e(this, wt) && e(this, kt) && c(this, wt, window.setTimeout(() => r(this, H, sr).call(this), 300 * 1e3)), !e(this, Pt) && e(this, kt) && r(this, H, Es).call(this);
     }, t));
   }
   stop() {
     r(this, H, As).call(this), e(this, lt) && (window.clearInterval(e(this, lt)), c(this, lt, null));
   }
 }
-Ye = new WeakMap(), se = new WeakMap(), At = new WeakMap(), Pt = new WeakMap(), yt = new WeakMap(), kt = new WeakMap(), lt = new WeakMap(), H = new WeakSet(), Es = function() {
+Ye = new WeakMap(), se = new WeakMap(), yt = new WeakMap(), Pt = new WeakMap(), kt = new WeakMap(), wt = new WeakMap(), lt = new WeakMap(), H = new WeakSet(), Es = function() {
   return G(this, null, function* () {
-    if (e(this, At))
+    if (e(this, yt))
       return;
-    c(this, At, !0);
+    c(this, yt, !0);
     let t = "Stream is offline", i = "Please stand by";
     try {
       const s = yield e(this, Ye).getChannel(e(this, se).channelId);
       if (s.isLive) {
-        c(this, Pt, !0), r(this, H, ys).call(this), this.emit("live", s), c(this, At, !1);
+        c(this, Pt, !0), r(this, H, ys).call(this), this.emit("live", s), c(this, yt, !1);
         return;
       }
     } catch (s) {
-      eo(s) && (s.status === 403 || s.status === 401) && (t = "Forbidden", i = "You do not have permission to view this stream");
+      io(s) && (s.status === 403 || s.status === 401) && (t = "Forbidden", i = "You do not have permission to view this stream");
     }
-    e(this, yt) && this.emit("error", { title: t, message: i }), c(this, At, !1);
+    e(this, kt) && this.emit("error", { title: t, message: i }), c(this, yt, !1);
   });
 }, sr = function() {
-  this.stop(), c(this, yt, !1), this.emit("timeout");
+  this.stop(), c(this, kt, !1), this.emit("timeout");
 }, As = function() {
-  e(this, kt) && (window.clearTimeout(e(this, kt)), c(this, kt, null));
+  e(this, wt) && (window.clearTimeout(e(this, wt)), c(this, wt, null));
 }, ys = function() {
-  r(this, H, As).call(this), c(this, yt, !0);
+  r(this, H, As).call(this), c(this, kt, !0);
 };
-const Io = new RegExp(
+const Co = 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"
-), Co = navigator.userAgent.toLowerCase(), Lo = Io.test(Co), To = (d) => Le.observedAttributes.includes(d), nr = (
+), Lo = navigator.userAgent.toLowerCase(), To = Co.test(Lo), xo = (d) => Le.observedAttributes.includes(d), nr = (
   /* HTML */
   `
   <style>
@@ -2884,7 +2890,7 @@ const Io = new RegExp(
       display: flex;
       justify-content: center;
 
-      --vindral-volume-range-display: ${Lo ? "none" : "flex"};
+      --vindral-volume-range-display: ${To ? "none" : "flex"};
       --vindral-airplay-button-display: none;
       --vindral-play-overlay-display: none;
       --vindral-grid-item-offline-display: none;
@@ -2913,6 +2919,11 @@ const Io = new RegExp(
       }
     }
 
+    vindral-scroll-overlay {
+      z-index: 20;
+      // needs to be higher than bottom bar/UI
+    }
+
     :host([${X.OFFLINE}]) {
       aspect-ratio: 16 / 9;
       vindral-controller {
@@ -2947,7 +2958,7 @@ const Io = new RegExp(
     }
   </style>
 `
-), xo = (
+), So = (
   /* HTML */
   `
   ${nr}
@@ -2982,7 +2993,7 @@ const Io = new RegExp(
     <vindral-message id="vindral-message" slot="overlay" hidden></vindral-message>
   </vindral-controller>
 `
-), So = (
+), No = (
   /* HTML */
   `
   ${nr}
@@ -3009,11 +3020,11 @@ const Io = new RegExp(
   </vindral-controller>
 `
 ), Xs = document.createElement("template");
-var Z, x, M, ht, dt, Oi, Je, Fi, N, ks, or, Qe, Ai, xt;
+var Z, x, M, ht, dt, Oi, Je, Fi, S, ks, or, Qe, Ai, bt;
 class rr extends HTMLElement {
   constructor() {
     super();
-    l(this, N);
+    l(this, S);
     l(this, Z);
     l(this, x);
     l(this, M);
@@ -3025,28 +3036,31 @@ class rr extends HTMLElement {
       });
     });
     l(this, Je, (t, i) => {
-      To(t) && (L(i) ? e(this, x).setAttribute(t, i) : e(this, x).removeAttribute(t));
+      xo(t) && (L(i) ? e(this, x).setAttribute(t, i) : e(this, x).removeAttribute(t));
     });
-    l(this, Fi, () => Vs(this.getAttribute(n.MEDIA)) === "audio" ? So : xo);
+    l(this, Fi, () => Vs(this.getAttribute(n.MEDIA)) === "audio" ? No : So);
     l(this, Qe, () => {
       const t = e(this, x).instance;
       t && (t.on("is live", (i) => {
-        i ? (this.removeAttribute(X.OFFLINE), e(this, M).setAttribute("hidden", "")) : (this.setAttribute(X.OFFLINE, ""), e(this, M).removeAttribute("hidden"), r(this, N, xt).call(this, "Stream is offline", "Please stand by"));
+        i ? (this.removeAttribute(X.OFFLINE), e(this, M).setAttribute("hidden", "")) : (this.setAttribute(X.OFFLINE, ""), e(this, M).removeAttribute("hidden"), r(this, S, bt).call(this, "Stream is offline", "Please stand by"));
       }), t.on("channels", (i) => {
         const s = e(this, x).getAttribute("channel-id"), o = i.find((p) => p.channelId === s);
-        o && r(this, N, Ai).call(this, o);
+        o && r(this, S, Ai).call(this, o);
       }), t.on("channel switch", ({ channelId: i }) => {
         const s = t.channels.find((o) => o.channelId === i);
-        s && r(this, N, Ai).call(this, s);
+        s && r(this, S, Ai).call(this, s);
       }), t.on("error", (i) => {
-        let s = "Stream is offline", o = "Please stand by";
-        i.isFatal() ? (i.code() === Jr ? (s = "Forbidden", o = "You do not have permission to view this stream", r(this, N, xt).call(this, s, o)) : r(this, N, xt).call(this, "An error occurred", i.message), e(this, ht).removeAttribute("hidden"), this.setAttribute(X.OFFLINE, ""), e(this, x).dispatchEvent(new CustomEvent(f.EXIT_FULLSCREEN)), e(this, x).dispatchEvent(new CustomEvent(f.EXIT_PIP))) : i.code() === Qr && r(this, N, xt).call(this, s, o);
+        if (i.code() === Jr) {
+          r(this, S, bt).call(this, "Stream is offline", "Please stand by");
+          return;
+        }
+        i.isFatal() && (i.code() === Qr ? r(this, S, bt).call(this, "Forbidden", "You do not have permission to view this stream") : i.code() === Wr ? r(this, S, bt).call(this, "Stream is offline", "Please stand by") : r(this, S, bt).call(this, "An error occurred", i.message), e(this, ht).removeAttribute("hidden"), this.setAttribute(X.OFFLINE, ""), e(this, x).dispatchEvent(new CustomEvent(f.EXIT_FULLSCREEN)), e(this, x).dispatchEvent(new CustomEvent(f.EXIT_PIP)));
       }));
     });
-    c(this, Z, this.attachShadow({ mode: "open" })), r(this, N, ks).call(this), c(this, x, e(this, Z).querySelector("vindral-controller")), c(this, M, e(this, Z).querySelector("#vindral-message")), c(this, ht, e(this, Z).querySelector("#play-overlay"));
+    c(this, Z, this.attachShadow({ mode: "open" })), r(this, S, ks).call(this), c(this, x, e(this, Z).querySelector("vindral-controller")), c(this, M, e(this, Z).querySelector("#vindral-message")), c(this, ht, e(this, Z).querySelector("#play-overlay"));
   }
   connectedCallback() {
-    this.setAttribute(X.OFFLINE, ""), e(this, x).addEventListener("vindral-instance-ready", e(this, Qe)), r(this, N, or).call(this);
+    this.setAttribute(X.OFFLINE, ""), e(this, x).addEventListener("vindral-instance-ready", e(this, Qe)), r(this, S, or).call(this);
   }
   disconnectedCallback() {
     var t;
@@ -3055,10 +3069,10 @@ class rr extends HTMLElement {
   attributeChangedCallback(t, i, s) {
     if (i !== s)
       if (t === n.MEDIA)
-        r(this, N, ks).call(this);
+        r(this, S, ks).call(this);
       else if (t === X.REFRESH_POSTER_ENABLED) {
         const o = e(this, Z).querySelector("vindral-poster-overlay");
-        o && (o.disabled = S(this.getAttribute(X.REFRESH_POSTER_ENABLED), !1) === !1);
+        o && (o.disabled = N(this.getAttribute(X.REFRESH_POSTER_ENABLED), !1) === !1);
       } else
         e(this, Je).call(this, t, s);
   }
@@ -3069,7 +3083,7 @@ class rr extends HTMLElement {
     return e(this, x).airPlay;
   }
 }
-Z = new WeakMap(), x = new WeakMap(), M = new WeakMap(), ht = new WeakMap(), dt = new WeakMap(), Oi = new WeakMap(), Je = new WeakMap(), Fi = new WeakMap(), N = new WeakSet(), ks = function() {
+Z = new WeakMap(), x = new WeakMap(), M = new WeakMap(), ht = new WeakMap(), dt = new WeakMap(), Oi = new WeakMap(), Je = new WeakMap(), Fi = new WeakMap(), S = new WeakSet(), ks = function() {
   Xs.innerHTML = e(this, Fi).call(this);
   const t = Xs.content.cloneNode(!0);
   c(this, x, t.querySelector("vindral-controller")), c(this, M, t.querySelector("#vindral-message")), c(this, ht, t.querySelector("#play-overlay")), this.children.length > 0 && Array.from(this.children).forEach((i) => {
@@ -3077,24 +3091,24 @@ Z = new WeakMap(), x = new WeakMap(), M = new WeakMap(), ht = new WeakMap(), dt
   }), e(this, Oi).call(this), e(this, Z).innerHTML = "", e(this, Z).appendChild(t);
 }, or = function() {
   var p;
-  if (S(this.getAttribute(X.STREAM_POLL_ENABLED), !0) === !1)
+  if (N(this.getAttribute(X.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");
   if (!t || !i) {
-    this.setAttribute(X.OFFLINE, ""), r(this, N, xt).call(this, "Invalid options", "Please enter at least a channel id and url to start the stream");
+    this.setAttribute(X.OFFLINE, ""), r(this, S, bt).call(this, "Invalid options", "Please enter at least a channel id and url to start the stream");
     return;
   }
-  c(this, dt, new wo({
+  c(this, dt, new Io({
     url: t,
     channelId: i,
     authenticationToken: s,
     infiniteReconnect: o
   })), e(this, dt).on("live", (u) => {
-    e(this, x).connect(), this.removeAttribute("offline"), e(this, M).setAttribute("hidden", ""), r(this, N, Ai).call(this, u);
+    e(this, x).connect(), this.removeAttribute("offline"), e(this, M).setAttribute("hidden", ""), r(this, S, Ai).call(this, u);
   }), e(this, dt).on("timeout", () => {
     e(this, M).setAttribute("hidden", ""), e(this, ht).removeAttribute("hidden");
   }), e(this, dt).on("error", (u) => {
-    this.setAttribute(X.OFFLINE, ""), r(this, N, xt).call(this, u.title, u.message);
+    this.setAttribute(X.OFFLINE, ""), r(this, S, bt).call(this, u.title, u.message);
   }), e(this, ht).addEventListener("click", () => {
     e(this, x).connect(), e(this, ht).setAttribute("hidden", ""), e(this, M).setAttribute("hidden", ""), e(this, x).focus();
   }), this.hasAttribute("paused") && e(this, dt).start();
@@ -3104,15 +3118,15 @@ Z = new WeakMap(), x = new WeakMap(), M = new WeakMap(), ht = new WeakMap(), dt
   if (!i) return;
   const s = this.getAttribute("poster"), o = typeof i == "string" ? i : t.name;
   let p;
-  typeof s == "string" ? p = s : p = (v = (u = this.instance) == null ? void 0 : u.getThumbnailUrl()) != null ? v : t.thumbnailUrls.length ? t.thumbnailUrls[0] : void 0, no({
+  typeof s == "string" ? p = s : p = (v = (u = this.instance) == null ? void 0 : u.getThumbnailUrl()) != null ? v : t.thumbnailUrls.length ? t.thumbnailUrls[0] : void 0, ro({
     title: o,
     poster: p
   });
-}, xt = function(t, i) {
+}, bt = function(t, i) {
   e(this, M).setAttribute("title", t), e(this, M).setAttribute("description", i);
   const s = this.getAttribute("poster");
   s && e(this, M).setAttribute("background-image", s), e(this, M).removeAttribute("hidden");
-}, m(rr, "observedAttributes", [...Le.observedAttributes, ...ko]);
+}, m(rr, "observedAttributes", [...Le.observedAttributes, ...wo]);
 const ar = document.createElement("template");
 ar.innerHTML = /* HTML */
 `
@@ -3150,14 +3164,14 @@ ar.innerHTML = /* HTML */
     }
   </style>
 `;
-const No = 6e3;
-var ne, wt, Mt, re, Y, hr, yi, ws, Hi;
+const Uo = 6e3;
+var ne, It, Mt, re, Y, hr, yi, ws, Hi;
 class lr extends HTMLElement {
   constructor() {
     super();
     l(this, Y);
     l(this, ne, null);
-    l(this, wt, null);
+    l(this, It, null);
     l(this, Mt, null);
     l(this, re, () => {
       !document.hidden && this.hasAttribute("intersecting") && this.paused && !this.disabled ? r(this, Y, hr).call(this) : r(this, Y, yi).call(this);
@@ -3193,10 +3207,10 @@ class lr extends HTMLElement {
     return this.hasAttribute(n.PAUSED);
   }
 }
-ne = new WeakMap(), wt = new WeakMap(), Mt = new WeakMap(), re = new WeakMap(), Y = new WeakSet(), hr = function() {
-  e(this, wt) === null && (r(this, Y, yi).call(this), c(this, wt, window.setInterval(() => r(this, Y, ws).call(this), No)));
+ne = new WeakMap(), It = new WeakMap(), Mt = new WeakMap(), re = new WeakMap(), Y = new WeakSet(), hr = function() {
+  e(this, It) === null && (r(this, Y, yi).call(this), c(this, It, window.setInterval(() => r(this, Y, ws).call(this), Uo)));
 }, yi = function() {
-  e(this, wt) !== null && (clearInterval(e(this, wt)), c(this, wt, null)), this.style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAQAAACRI2S5AAAAEElEQVR42mNkIAAYRxWAAQAG9gAKqv6+AwAAAABJRU5ErkJggg==')";
+  e(this, It) !== null && (clearInterval(e(this, It)), c(this, It, null)), this.style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAQAAACRI2S5AAAAEElEQVR42mNkIAAYRxWAAQAG9gAKqv6+AwAAAABJRU5ErkJggg==')";
 }, ws = function() {
   if (!this.posterSrc) return;
   const t = new URL(this.posterSrc), i = new Image();
@@ -3207,7 +3221,7 @@ ne = new WeakMap(), wt = new WeakMap(), Mt = new WeakMap(), re = new WeakMap(),
   "disabled",
   "intersecting"
 ]);
-const Uo = (
+const Ro = (
   /* SVG */
   `
 <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-settings-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
@@ -3224,7 +3238,7 @@ dr.innerHTML = /* HTML */
     }
   </style>
 
-  <slot name="button">${Uo}</slot>
+  <slot name="button">${Ro}</slot>
   <slot name="listbox" hidden>
     <vindral-rendition-levels-menu-list id="listbox" part="listbox"></vindral-rendition-levels-menu-list>
   </slot>
@@ -3249,7 +3263,7 @@ We = new WeakSet(), Cs = function() {
   !t || t === "[]" ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
 }, m(Ie, "observedAttributes", [...q(Ie, Ie, "observedAttributes"), n.RENDITION_LEVELS]);
 let Is = Ie;
-const cr = document.createElement("template"), Ro = (
+const cr = document.createElement("template"), _o = (
   /* 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>
@@ -3328,7 +3342,7 @@ cr.innerHTML = /* HTML */
     }
 
     [role="menuitem"][aria-selected="true"]::before {
-      content: url("data:image/svg+xml,${encodeURIComponent(Ro)}");
+      content: url("data:image/svg+xml,${encodeURIComponent(_o)}");
       position: absolute;
       left: calc(var(--padding-3) - var(--padding-1));
       top: calc(50% - 8px);
@@ -3358,14 +3372,14 @@ cr.innerHTML = /* HTML */
     <div class="menu"></div>
   </slot>
 `;
-var Dt, Ze, It, ct, Ot, ti, C, pr, Ls, br, Ts, mr, vr, gr, xs, fr;
+var Dt, Ze, Ct, ct, Ot, ti, C, pr, Ls, br, Ts, mr, vr, gr, xs, fr;
 class ur extends HTMLElement {
   constructor() {
     super();
     l(this, C);
     l(this, Dt, []);
     l(this, Ze, Number.MAX_SAFE_INTEGER);
-    l(this, It, null);
+    l(this, Ct, null);
     l(this, ct, []);
     l(this, Ot, null);
     l(this, ti, null);
@@ -3401,10 +3415,10 @@ class ur extends HTMLElement {
   }
   focus() {
     var t;
-    (t = e(this, It)) == null || t.focus();
+    (t = e(this, Ct)) == null || t.focus();
   }
 }
-Dt = new WeakMap(), Ze = new WeakMap(), It = new WeakMap(), ct = new WeakMap(), Ot = new WeakMap(), ti = new WeakMap(), C = new WeakSet(), pr = function() {
+Dt = new WeakMap(), Ze = new WeakMap(), Ct = new WeakMap(), ct = new WeakMap(), Ot = new WeakMap(), ti = new WeakMap(), C = new WeakSet(), pr = function() {
   const t = (s) => {
     s.forEach((o) => {
       if (o.intersectionRatio !== 1)
@@ -3428,18 +3442,18 @@ Dt = new WeakMap(), Ze = new WeakMap(), It = new WeakMap(), ct = new WeakMap(),
     var p, u;
     return (p = s.video) != null && p.bitRate && ((u = o.video) != null && u.bitRate) ? o.video.bitRate - s.video.bitRate : 0;
   }).forEach((s) => {
-    var v, g, P, et, J, Ct, Lt, Tt;
+    var v, g, P, et, J, Lt, Tt, xt;
     const o = document.createElement("div");
     o.setAttribute("role", "menuitem"), o.setAttribute("value", String((v = s.video) == null ? void 0 : v.height)), o.classList.add("menu-item"), o.tabIndex = -1;
     const p = r(this, C, br).call(this, (g = s.video) == null ? void 0 : g.frameRate);
-    o.textContent = s.video ? so(s.video) : "";
+    o.textContent = s.video ? no(s.video) : "";
     const u = document.createElement("span");
-    u.classList.add("menu-item-subtitle"), u.textContent = `${io(((et = (P = s.video) == null ? void 0 : P.bitRate) != null ? et : 0) + ((Ct = (J = s.audio) == null ? void 0 : J.bitRate) != null ? Ct : 0))}, ${p}p`, o.appendChild(u), o.addEventListener("click", () => r(this, C, mr).call(this, s)), e(this, ct).push({ el: o, id: (Tt = (Lt = s.video) == null ? void 0 : Lt.id) != null ? Tt : -1 }), t.appendChild(o);
+    u.classList.add("menu-item-subtitle"), u.textContent = `${so(((et = (P = s.video) == null ? void 0 : P.bitRate) != null ? et : 0) + ((Lt = (J = s.audio) == null ? void 0 : J.bitRate) != null ? Lt : 0))}, ${p}p`, o.appendChild(u), o.addEventListener("click", () => r(this, C, mr).call(this, s)), e(this, ct).push({ el: o, id: (xt = (Tt = s.video) == null ? void 0 : Tt.id) != null ? xt : -1 }), t.appendChild(o);
   }), r(this, C, Ts).call(this));
 }, br = function(t) {
   return t ? t[0] % t[1] === 0 ? (t[0] / t[1]).toString() : (t[0] / t[1]).toFixed(2) : "";
 }, Ts = function() {
-  e(this, It) && (e(this, It).removeAttribute("aria-selected"), e(this, It).tabIndex = -1);
+  e(this, Ct) && (e(this, Ct).removeAttribute("aria-selected"), e(this, Ct).tabIndex = -1);
   const t = e(this, Dt).sort(
     (s, o) => {
       var p, u;
@@ -3456,7 +3470,7 @@ Dt = new WeakMap(), Ze = new WeakMap(), It = new WeakMap(), ct = new WeakMap(),
       var p;
       return o.id === ((p = i.video) == null ? void 0 : p.id);
     });
-    s && (s.el.tabIndex = 0, s.el.setAttribute("aria-selected", "true"), c(this, It, s.el));
+    s && (s.el.tabIndex = 0, s.el.setAttribute("aria-selected", "true"), c(this, Ct, s.el));
   }
 }, mr = function(t) {
   this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 })), this.dispatchEvent(
@@ -3531,6 +3545,7 @@ Er.innerHTML = /* HTML */
       pointer-events: auto;
       scroll-snap-align: start;
       min-height: 1px;
+      -webkit-tap-highlight-color: transparent;
     }
 
     slot#content {
@@ -3596,7 +3611,7 @@ class Ar extends HTMLElement {
         this.open && (this.open = !1);
       });
       const g = this.hasAttribute("touch-enabled");
-      if (!Wr() || !g) {
+      if (!Zr() || !g) {
         this.setAttribute("snap", ""), this.addEventListener("scroll", e(this, Gi));
         return;
       }
@@ -3647,12 +3662,12 @@ ut = new WeakMap(), Ft = new WeakMap(), oe = new WeakMap(), ei = new WeakMap(),
 }, Rs = function() {
   this.visible = !1, this.dispatchEvent(new CustomEvent(f.UNLOCK_UI, { bubbles: !0, composed: !0 }));
 }, m(Ar, "observedAttributes", [n.USER_INTERACTING, "open", "touch-enabled"]);
-const Ir = document.createElement("template"), _o = (
+const Ir = document.createElement("template"), Po = (
   /* SVG */
   `
   <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 4v16a1 1 0 0 0 1.524 .852l13 -8a1 1 0 0 0 0 -1.704l-13 -8a1 1 0 0 0 -1.524 .852z" /></svg>
 `
-), Po = (
+), Mo = (
   /* 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>
@@ -3711,8 +3726,8 @@ Ir.innerHTML = /* HTML */
   </style>
 
   <slot name="icon">
-    <slot name="play">${_o}</slot>
-    <slot name="unmute">${Po}</slot>
+    <slot name="play">${Po}</slot>
+    <slot name="unmute">${Mo}</slot>
   </slot>
 `;
 var ae, ii, Ht, si;
@@ -3785,14 +3800,12 @@ Lr.innerHTML = /* HTML */
       font-size: 20px;
       color: var(--fg-strong);
       pointer-events: none;
+      transition: opacity 100ms;
+      background-color: rgba(0, 0, 0, 0.3);
     }
 
     :host([hidden]) {
-      display: none;
-    }
-
-    #background {
-      opacity: 0.7;
+      opacity: 0;
     }
 
     #message-container {
@@ -3810,12 +3823,9 @@ Lr.innerHTML = /* HTML */
 
     #title,
     #description {
-      position: static;
-      width: 100%;
       text-align: center;
       text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
       margin: 0;
-      pointer-events: none;
     }
 
     #title {
@@ -3878,7 +3888,7 @@ class Tr extends HTMLElement {
   }
 }
 ni = new WeakMap(), ri = new WeakMap(), oi = new WeakMap(), m(Tr, "observedAttributes", ["title", "description", "background-image", "hidden"]);
-const xr = document.createElement("template"), Mo = (
+const xr = document.createElement("template"), Do = (
   /* 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>
@@ -3934,7 +3944,7 @@ xr.innerHTML = /* HTML */
     }
   </style>
 
-  <slot id="play" name="icon">${Mo}</slot>
+  <slot id="play" name="icon">${Do}</slot>
 `;
 var le;
 class Sr extends HTMLElement {
@@ -3966,7 +3976,7 @@ Nr.innerHTML = /* HTML */
     }
   </style>
 `;
-const Do = (d) => `${Math.round(d * 100)}%`;
+const Oo = (d) => `${Math.round(d * 100)}%`;
 var ai;
 const Ce = class Ce extends Ds {
   constructor() {
@@ -3985,7 +3995,7 @@ const Ce = class Ce extends Ds {
     super.disconnectedCallback(), this.range.removeEventListener("input", e(this, ai));
   }
   attributeChangedCallback(t, i, s) {
-    super.attributeChangedCallback(t, i, s), (t === n.MUTED || t === n.VOLUME) && (this.range.valueAsNumber = this.muted ? 0 : parseFloat(this.volume), this.range.setAttribute("aria-valuetext", Do(this.range.valueAsNumber)), this.updateBar());
+    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", Oo(this.range.valueAsNumber)), this.updateBar());
   }
   get volume() {
     var t;
@@ -3997,9 +4007,9 @@ const Ce = class Ce extends Ds {
 };
 ai = new WeakMap(), m(Ce, "observedAttributes", [...q(Ce, Ce, "observedAttributes"), n.MUTED, n.VOLUME]);
 let _s = Ce;
-function $o() {
+function Bo() {
   customElements.define("vindral-controller", Le), customElements.define("vindral-control-bar", In), customElements.define("vindral-play-button", fs), customElements.define("vindral-mute-button", vs), customElements.define("vindral-buffering-overlay", en), customElements.define("vindral-scroll-overlay", Ar), customElements.define("vindral-play-overlay", Sr), customElements.define("vindral-user-input-play-overlay", Cr), customElements.define("vindral-fullscreen-button", hs), customElements.define("vindral-rendition-levels-menu", Is), customElements.define("vindral-rendition-levels-menu-list", ur), customElements.define("vindral-channel-grid-button", Zi), customElements.define("vindral-channel-grid", dn), customElements.define("vindral-channel-grid-item", Ps), customElements.define("vindral-pip-button", gs), customElements.define("vindral-airplay-button", Vi), customElements.define("vindral-cast-button", Ji), customElements.define("vindral-cast-overlay", on), customElements.define("vindral-buffering-icon", Zs), customElements.define("vindral-language-menu", ds), customElements.define("vindral-language-menu-list", jn), customElements.define("vindral-message", Tr), customElements.define("vindral-volume-range", _s), customElements.define("vindral-poster-overlay", lr), customElements.define("vindral-player", rr);
 }
 export {
-  $o as registerComponents
+  Bo as registerComponents
 };