@grizzshutsdown/simpleplayer 0.1.7 → 0.1.8

package/README.md

@@ -97,7 +97,7 @@ declare module 'react' {
 - `src`: video URL.
 - `aspect-ratio`: player aspect ratio. Default: `16 / 9`.
 - `preload-margin`: lazy-load margin before the video enters view. Default: `360px 0px`.
-- `controls`: add a controls tray with volume, Picture-in-Picture, and fullscreen buttons.
+- `controls`: add a controls tray with volume, Picture-in-Picture, and fullscreen buttons. The volume control automatically disables itself if the video has no audio track.
 - `disable-autoplay`: turn off default autoplay. Autoplay starts muted so browsers allow it.
 - `show-time`: dual-mode timestamp. When used with `controls`, shows a pinned glass timestamp tray in the bottom-left alongside the controls tray. When used without `controls`, shows a hover tooltip above the scrubber as you drag or hover it. Clicking the timestamp toggles between elapsed and remaining time.
 

package/dist/simple-player.js

@@ -861,7 +861,7 @@ const C = `
     position: relative;
     right: auto;
     bottom: auto;
-    width: calc(var(--sp-tray-time-width, 40px) + (var(--sp-control-tray-padding) * 2));
+    width: calc(var(--sp-tray-time-width, max-content) + (var(--sp-control-tray-padding) * 2));
     height: calc(var(--sp-control-slot-size) + (var(--sp-control-tray-padding) * 2));
     transition: width 240ms cubic-bezier(0.23, 1, 0.32, 1);
     overflow: hidden;
@@ -1135,12 +1135,12 @@ class A extends HTMLElement {
   #V;
   #j;
   #oe;
-  #m;
+  #c;
   #ss;
   #Es;
   #o;
   #z;
-  #p;
+  #d;
   #O;
   #Z;
   #K = [];
@@ -1293,7 +1293,7 @@ class A extends HTMLElement {
     this.#us("fullscreen", t);
   }
   connectedCallback() {
-    this.#s = this.#r.querySelector("[data-sp-player]"), this.#t = this.#r.querySelector("[data-sp-video]"), this.#M = this.#r.querySelector("[data-sp-button]"), this.#i = this.#r.querySelector("[data-sp-progress-track]"), this.#V = this.#r.querySelector("[data-sp-control-tray]"), this.#j = this.#r.querySelector("[data-sp-control-tray-slots]"), this.#oe = this.#r.querySelector("[data-sp-tray-time]"), this.#m = this.#r.querySelector("[data-sp-tray-time-text]"), this.#ss = this.#r.querySelector("[data-sp-time]"), this.#Es = this.#r.querySelector("[data-sp-time-text]"), this.#o = this.#r.querySelector("[data-sp-volume-control]"), this.#z = this.#r.querySelector("[data-sp-volume-popover]"), this.#p = this.#r.querySelector("[data-sp-volume-track]"), this.#O = this.#r.querySelector("[data-sp-picture-in-picture-control]"), this.#Z = this.#r.querySelector("[data-sp-fullscreen-control]"), this.#K = [this.#o, this.#O, this.#Z], this.#Ms(), this.#ts || (this.#ge(), this.#ts = !0), this.#Bt(), this.#ms(), this.#ps(), this.#ds(), this.#w(), this.#y(), this.#Tt(), this.#Qt(), this.#u();
+    this.#s = this.#r.querySelector("[data-sp-player]"), this.#t = this.#r.querySelector("[data-sp-video]"), this.#M = this.#r.querySelector("[data-sp-button]"), this.#i = this.#r.querySelector("[data-sp-progress-track]"), this.#V = this.#r.querySelector("[data-sp-control-tray]"), this.#j = this.#r.querySelector("[data-sp-control-tray-slots]"), this.#oe = this.#r.querySelector("[data-sp-tray-time]"), this.#c = this.#r.querySelector("[data-sp-tray-time-text]"), this.#ss = this.#r.querySelector("[data-sp-time]"), this.#Es = this.#r.querySelector("[data-sp-time-text]"), this.#o = this.#r.querySelector("[data-sp-volume-control]"), this.#z = this.#r.querySelector("[data-sp-volume-popover]"), this.#d = this.#r.querySelector("[data-sp-volume-track]"), this.#O = this.#r.querySelector("[data-sp-picture-in-picture-control]"), this.#Z = this.#r.querySelector("[data-sp-fullscreen-control]"), this.#K = [this.#o, this.#O, this.#Z], this.#Ms(), this.#ts || (this.#ge(), this.#ts = !0), this.#Bt(), this.#ms(), this.#ps(), this.#ds(), this.#w(), this.#y(), this.#Tt(), this.#Qt(), this.#p();
   }
   disconnectedCallback() {
     this.#E?.disconnect(), this.#E = null, this.#At.forEach((t) => t()), this.#At = [], this.#ts = !1, this.#P(), this.#$s(), this.#Ot(), this.#gs(), this.#rt(), this.#Zt(), this.#Ct(), this.#Us(), this.#vs(), this.#s.classList.remove("is-volume-icon-animating"), this.#j.style.removeProperty("--sp-control-hover-offset"), this.style.removeProperty("--sp-touch-control-hover-offset"), this.#xt(), this.#v = !1, this.#s.classList.remove("is-progress-hovering"), this.#F = !1, this.#N = !1, this.#U = !1, this.#n = null, this.#o.classList.remove("is-volume-open"), this.#K.forEach((t) => t.classList.remove("is-control-tap-active")), this.#s.classList.remove("is-pointer-active"), this.#kt();
@@ -1313,7 +1313,7 @@ class A extends HTMLElement {
         return;
       }
       if ((t === "disable-autoplay" || t === "no-autoplay") && this.isConnected) {
-        this.#Bt(), this.#y(), this.#u();
+        this.#Bt(), this.#y(), this.#p();
         return;
       }
       if (t === "show-time" && this.isConnected) {
@@ -1368,17 +1368,20 @@ class A extends HTMLElement {
     this.#s && (this.#s.classList.toggle("has-pinned-time", this.#bt), this.#bt && this.#wt());
   }
   #ge() {
-    this.#e(this.#M, "click", this.#_e), this.#e(this, "pointerenter", this.#_t), this.#e(this, "pointermove", this.#Wt), this.#e(this, "pointerleave", this.#jt), this.#e(this, "mouseenter", this.#_t), this.#e(this, "mousemove", this.#Wt), this.#e(this, "mouseleave", this.#jt), this.#e(this.#s, "pointerenter", this.#_t), this.#e(this.#s, "pointermove", this.#Wt), this.#e(this.#s, "pointerleave", this.#jt), this.#e(this.#s, "mouseenter", this.#_t), this.#e(this.#s, "mousemove", this.#Wt), this.#e(this.#s, "mouseleave", this.#jt), this.#e(this.#M, "pointerenter", this.#et), this.#e(this.#M, "pointerleave", this.#it), this.#e(this.#M, "mouseenter", this.#et), this.#e(this.#M, "mouseleave", this.#it), this.#e(this.#i, "pointerenter", this.#et), this.#e(this.#i, "pointerleave", this.#it), this.#e(this.#i, "mouseenter", this.#et), this.#e(this.#i, "mouseleave", this.#it), this.#e(this.#i, "pointerenter", this.#ie), this.#e(this.#i, "pointerleave", this.#re), this.#e(this.#i, "mouseenter", this.#ie), this.#e(this.#i, "mouseleave", this.#re), this.#e(this.#V, "pointerenter", this.#et), this.#e(this.#V, "pointerleave", this.#it), this.#e(this.#V, "mouseenter", this.#et), this.#e(this.#V, "mouseleave", this.#it), this.#e(this.#r, "focusin", this.#Hs), this.#e(this.#r, "focusout", this.#xe), this.#e(this.#s, "pointerdown", this.#We), this.#e(this.#s, "dragstart", this.#Ut), this.#e(this.#s, "selectstart", this.#Ut), this.#e(this.#t, "dragstart", this.#Ut), this.#e(this.#t, "selectstart", this.#Ut), this.#e(this.#i, "pointerdown", this.#ei), this.#e(this.#i, "pointermove", this.#ri), this.#e(this.#i, "pointerup", this.#oi), this.#e(this.#i, "pointercancel", this.#ni), this.#e(this.#i, "keydown", this.#ii), this.#e(this.#o, "pointerenter", this.#se), this.#e(this.#o, "pointerleave", this.#ee), this.#e(this.#o, "click", this.#Oe), this.#e(this.#z, "pointerenter", this.#se), this.#e(this.#z, "pointerleave", this.#ee), this.#e(this.#p, "pointerdown", this.#Ze), this.#e(this.#p, "pointermove", this.#Ke), this.#e(this.#p, "pointerup", this.#Ge), this.#e(this.#p, "pointercancel", this.#Je), this.#e(this.#p, "click", this.#je), this.#e(this.#p, "keydown", this.#Qe), this.#e(this.#O, "click", this.#ti), this.#e(this.#Z, "click", this.#si), this.#e(this.#m, "click", this.#Xe);
+    this.#e(this.#M, "click", this.#_e), this.#e(this, "pointerenter", this.#_t), this.#e(this, "pointermove", this.#Wt), this.#e(this, "pointerleave", this.#jt), this.#e(this, "mouseenter", this.#_t), this.#e(this, "mousemove", this.#Wt), this.#e(this, "mouseleave", this.#jt), this.#e(this.#s, "pointerenter", this.#_t), this.#e(this.#s, "pointermove", this.#Wt), this.#e(this.#s, "pointerleave", this.#jt), this.#e(this.#s, "mouseenter", this.#_t), this.#e(this.#s, "mousemove", this.#Wt), this.#e(this.#s, "mouseleave", this.#jt), this.#e(this.#M, "pointerenter", this.#et), this.#e(this.#M, "pointerleave", this.#it), this.#e(this.#M, "mouseenter", this.#et), this.#e(this.#M, "mouseleave", this.#it), this.#e(this.#i, "pointerenter", this.#et), this.#e(this.#i, "pointerleave", this.#it), this.#e(this.#i, "mouseenter", this.#et), this.#e(this.#i, "mouseleave", this.#it), this.#e(this.#i, "pointerenter", this.#ie), this.#e(this.#i, "pointerleave", this.#re), this.#e(this.#i, "mouseenter", this.#ie), this.#e(this.#i, "mouseleave", this.#re), this.#e(this.#V, "pointerenter", this.#et), this.#e(this.#V, "pointerleave", this.#it), this.#e(this.#V, "mouseenter", this.#et), this.#e(this.#V, "mouseleave", this.#it), this.#e(this.#r, "focusin", this.#Hs), this.#e(this.#r, "focusout", this.#xe), this.#e(this.#s, "pointerdown", this.#We), this.#e(this.#s, "dragstart", this.#Ut), this.#e(this.#s, "selectstart", this.#Ut), this.#e(this.#t, "dragstart", this.#Ut), this.#e(this.#t, "selectstart", this.#Ut), this.#e(this.#i, "pointerdown", this.#ei), this.#e(this.#i, "pointermove", this.#ri), this.#e(this.#i, "pointerup", this.#oi), this.#e(this.#i, "pointercancel", this.#ni), this.#e(this.#i, "keydown", this.#ii), this.#e(this.#o, "pointerenter", this.#se), this.#e(this.#o, "pointerleave", this.#ee), this.#e(this.#o, "click", this.#Oe), this.#e(this.#z, "pointerenter", this.#se), this.#e(this.#z, "pointerleave", this.#ee), this.#e(this.#d, "pointerdown", this.#Ze), this.#e(this.#d, "pointermove", this.#Ke), this.#e(this.#d, "pointerup", this.#Ge), this.#e(this.#d, "pointercancel", this.#Je), this.#e(this.#d, "click", this.#je), this.#e(this.#d, "keydown", this.#Qe), this.#e(this.#O, "click", this.#ti), this.#e(this.#Z, "click", this.#si), this.#e(this.#c, "click", this.#Xe);
     for (const t of this.#K)
       this.#e(t, "pointerenter", this.#qs), this.#e(t, "mouseenter", this.#qs), this.#e(t, "pointerdown", this.#ke);
     "ResizeObserver" in window && (this.#Mt = new ResizeObserver(() => {
       this.#$t();
-    }), this.#Mt.observe(this.#m), this.#At.push(() => {
+    }), this.#Mt.observe(this.#c), this.#At.push(() => {
       this.#Mt?.disconnect(), this.#Mt = null;
     })), this.#e(document, "pointerup", this.#ai), this.#e(document, "pointercancel", this.#li), this.#e(document, "pointermove", this.#Ds), this.#e(document, "mousemove", this.#Ds), this.#e(document, "fullscreenchange", this.#Et), this.#e(document, "webkitfullscreenchange", this.#Et), this.#e(document, "mozfullscreenchange", this.#Et), this.#e(document, "MSFullscreenChange", this.#Et), this.#e(this.#r, "fullscreenchange", this.#Et), this.#e(window, "blur", this.#hi), this.#e(window, "focus", this.#ci), this.#e(this.#t, "play", this.#ui), this.#e(this.#t, "pause", this.#pi), this.#e(this.#t, "ended", this.#di), this.#e(this.#t, "loadstart", this.#mi), this.#e(this.#t, "waiting", this.#Ts), this.#e(this.#t, "stalled", this.#Ts), this.#e(this.#t, "seeking", this.#Ts), this.#e(this.#t, "loadeddata", this.#Kt), this.#e(this.#t, "loadedmetadata", this.#fi), this.#e(this.#t, "canplay", this.#Kt), this.#e(this.#t, "canplaythrough", this.#Kt), this.#e(this.#t, "playing", this.#bi), this.#e(this.#t, "seeked", this.#vi), this.#e(this.#t, "error", this.#gi), this.#e(this.#t, "progress", this.#w), this.#e(this.#t, "suspend", this.#w), this.#e(this.#t, "timeupdate", this.#yi), this.#e(this.#t, "volumechange", this.#wi), this.#e(this.#t, "enterpictureinpicture", this.#Tt), this.#e(this.#t, "leavepictureinpicture", this.#Tt);
   }
   #$t() {
-    !this.#s || !this.#m || this.#s.style.setProperty("--sp-tray-time-width", `${Math.ceil(this.#m.scrollWidth)}px`);
+    if (!this.#s || !this.#c) return;
+    this.#c.style.width = "fit-content";
+    const t = Math.ceil(this.#c.scrollWidth);
+    this.#c.style.width = "", this.#s.style.setProperty("--sp-tray-time-width", `${t}px`);
   }
   #e(t, s, e) {
     t.addEventListener(s, e), this.#At.push(() => t.removeEventListener(s, e));
@@ -1402,26 +1405,26 @@ class A extends HTMLElement {
   }
   #ye = () => {
     if (this.#at = 0, !(this.#x || this.#a || this.#F)) {
-      if (this.#d()) {
+      if (this.#m()) {
         this.#s.classList.remove("is-controls-visible");
         return;
       }
       this.#U || this.#s.classList.remove("is-pointer-active");
     }
   };
-  #Nt(t = this.#d() ? this.#Ss : this.#Ht) {
+  #Nt(t = this.#m() ? this.#Ss : this.#Ht) {
     this.#P(), this.#at = window.setTimeout(this.#ye, t);
   }
   #R() {
-    this.#d() && this.#Nt(this.#Ss);
+    this.#m() && this.#Nt(this.#Ss);
   }
   #D() {
-    if (!this.#d()) return !1;
+    if (!this.#m()) return !1;
     const t = this.#s.classList.contains("is-controls-visible");
     return this.#s.classList.add("is-controls-visible"), this.#R(), !t;
   }
   #fs(t = !1) {
-    !t && this.#d() || (this.#s.classList.add("is-pointer-active"), this.#U ? this.#P() : this.#Nt(t ? this.#Ht : void 0));
+    !t && this.#m() || (this.#s.classList.add("is-pointer-active"), this.#U ? this.#P() : this.#Nt(t ? this.#Ht : void 0));
   }
   #Yt() {
     this.#U = !1, this.#P(), this.#s.classList.remove("is-pointer-active");
@@ -1443,8 +1446,8 @@ class A extends HTMLElement {
     this.#v && (this.#v = !1, this.#s.classList.remove("is-progress-hovering"), this.#xt(), this.#wt());
   }
   #Is(t, s) {
-    if (this.#d()) return;
-    !this.#c() && this.#Vs(this.#i, t, s) ? (this.#v = !0, this.#s.classList.add("is-progress-hovering"), this.#W(t, !1, !1)) : this.#c() || this.#zs();
+    if (this.#m()) return;
+    !this.#u() && this.#Vs(this.#i, t, s) ? (this.#v = !0, this.#s.classList.add("is-progress-hovering"), this.#W(t, !1, !1)) : this.#u() || this.#zs();
     const e = this.#K.find((r) => !r.hidden && !this.#bs(r) && this.#Vs(r, t, s)) ?? null;
     if (!e) return;
     const i = Number(e.dataset.spControlIndex ?? 0);
@@ -1454,7 +1457,7 @@ class A extends HTMLElement {
     return this.#s.classList.contains("is-controls-visible") || this.#s.classList.contains("is-pointer-active") || this.#r.activeElement instanceof HTMLElement;
   }
   #Xt() {
-    return this.#d() && performance.now() < this.#rs;
+    return this.#m() && performance.now() < this.#rs;
   }
   #bs(t) {
     return t instanceof HTMLButtonElement && (t.disabled || t === this.#o && !this.#T());
@@ -1485,7 +1488,7 @@ class A extends HTMLElement {
     this.#U = !1, this.#Nt(this.#Ht);
   };
   #Hs = () => {
-    this.#d() ? this.#s.classList.add("is-controls-visible") : this.#s.classList.add("is-pointer-active"), this.#P();
+    this.#m() ? this.#s.classList.add("is-controls-visible") : this.#s.classList.add("is-pointer-active"), this.#P();
   };
   #xe = () => {
     this.#Nt(this.#Ht);
@@ -1535,7 +1538,7 @@ class A extends HTMLElement {
         this.#s.classList.remove("is-progress-settling");
         return;
       }
-      this.#ht = !0, this.#As = performance.now() + this.#pe, this.#c() || this.#l(), this.#g(), this.#s.classList.remove("is-progress-settling"), this.#u();
+      this.#ht = !0, this.#As = performance.now() + this.#pe, this.#u() || this.#l(), this.#g(), this.#s.classList.remove("is-progress-settling"), this.#p();
     }
   };
   #Te() {
@@ -1600,7 +1603,7 @@ class A extends HTMLElement {
   #Ce() {
     return this.#C && !this.#t.error && this.#A && (this.#t.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA || this.#t.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && !this.#s.classList.contains("is-loading"));
   }
-  #c() {
+  #u() {
     return this.#x || this.#a || this.#I;
   }
   #Ae() {
@@ -1612,7 +1615,7 @@ class A extends HTMLElement {
     return this.#I ? (this.#I = !1, this.#nt = !1, this.#l(), this.#g(), !0) : !1;
   }
   #Ws() {
-    return this.#Ot(), !this.#s.classList.contains("has-loaded-once") && this.#Te(), this.#s.classList.add("has-loaded-once"), this.#s.classList.add("has-visible-frame"), this.#w(), this.#b = null, this.#I ? (this.#_s(), !0) : (this.#c() || this.#l(), this.#g(), !0);
+    return this.#Ot(), !this.#s.classList.contains("has-loaded-once") && this.#Te(), this.#s.classList.add("has-loaded-once"), this.#s.classList.add("has-visible-frame"), this.#w(), this.#b = null, this.#I ? (this.#_s(), !0) : (this.#u() || this.#l(), this.#g(), !0);
   }
   #Le() {
     if (this.#A || this.#q || this.#t.error) return;
@@ -1623,9 +1626,9 @@ class A extends HTMLElement {
           if (this.#B || this.#L) return;
           this.#B = !0, window.requestAnimationFrame(() => {
             window.requestAnimationFrame(() => {
-              t === this.#$ && (this.#B = !1, this.#L = !0, this.#Ws(), this.#u());
+              t === this.#$ && (this.#B = !1, this.#L = !0, this.#Ws(), this.#p());
             });
-          }), this.#u();
+          }), this.#p();
           return;
         }
         this.#w();
@@ -1675,7 +1678,7 @@ class A extends HTMLElement {
   }
   #X() {
     if (!Number.isFinite(this.#t.duration) || this.#t.duration <= 0) return this.#t.currentTime || 0;
-    if (this.#c()) return this.#f;
+    if (this.#u()) return this.#f;
     if (this.#k !== null) return this.#k;
     if (!this.#js()) return this.#t.currentTime || 0;
     if (this.#zt || !this.#ht || performance.now() < this.#As)
@@ -1721,7 +1724,7 @@ class A extends HTMLElement {
     } : { percent: e, targetTime: r };
   }
   #wt(t = this.#X()) {
-    !this.#bt || this.#v || this.#c() || (this.#m.textContent = this.#ks(t), this.#$t());
+    !this.#bt || this.#v || this.#u() || (this.#c.textContent = this.#ks(t), this.#$t());
   }
   #g(t = this.#X()) {
     const s = Number.isFinite(this.#t.duration) && this.#t.duration > 0;
@@ -1742,7 +1745,7 @@ class A extends HTMLElement {
   #W(t, s = this.#a, e = !0) {
     if (!Number.isFinite(this.#t.duration) || this.#t.duration <= 0) return this.#t.currentTime;
     const i = this.#i.getBoundingClientRect(), r = this.#Ve(t, i), n = this.#Ie(t, i, r, s);
-    return e && this.#_(n.percent), this.#bt || this.#s.style.setProperty("--sp-scrub-preview-left", `${this.#Gt(n.percent, i)}px`), this.#Es.textContent = a(n.targetTime), this.#m.textContent = this.#ks(n.targetTime), this.#$t(), e && (this.#i.setAttribute("aria-valuenow", `${n.targetTime}`), this.#i.setAttribute(
+    return e && this.#_(n.percent), this.#bt || this.#s.style.setProperty("--sp-scrub-preview-left", `${this.#Gt(n.percent, i)}px`), this.#Es.textContent = a(n.targetTime), this.#c.textContent = this.#ks(n.targetTime), this.#$t(), e && (this.#i.setAttribute("aria-valuenow", `${n.targetTime}`), this.#i.setAttribute(
       "aria-valuetext",
       `${a(n.targetTime)} of ${a(this.#t.duration)}`
     )), this.#Re(), n.targetTime;
@@ -1768,7 +1771,7 @@ class A extends HTMLElement {
     };
     this.#ot = window.requestAnimationFrame(t);
   }
-  #u() {
+  #p() {
     const t = !this.#t.paused && (!this.#t.ended || this.#t.loop) || this.#a && this.#G, s = this.#b ? this.#b === "playing" : t;
     if (this.#s.classList.toggle("is-playing", s), this.#M.setAttribute("aria-label", s ? "Pause video" : "Play video"), this.#a) {
       this.#kt();
@@ -1801,18 +1804,18 @@ class A extends HTMLElement {
     this.#as && this.#as !== n && this.#Pe(), this.#as = n, this.#s.classList.toggle("is-volume-unavailable", !s), this.#s.classList.toggle("is-volume-muted", e), this.#s.classList.toggle("is-volume-sound", !e), this.#s.style.setProperty("--sp-volume-level", `${r}%`), this.#o.disabled = !s, this.#o.setAttribute("aria-disabled", `${!s}`), this.#o.setAttribute(
       "aria-label",
       s ? e ? "Unmute video" : "Mute video" : "Video has no audio"
-    ), this.#p.setAttribute("aria-valuenow", `${r}`), this.#p.setAttribute("aria-valuetext", `${r}%`), s || this.#S(), t === s && this.#ps();
+    ), this.#d.setAttribute("aria-valuenow", `${r}`), this.#d.setAttribute("aria-valuetext", `${r}%`), s || this.#S(), t === s && this.#ps();
   };
   #Zs(t) {
     if (!this.#T()) return;
-    const s = this.#p.getBoundingClientRect(), e = Math.min(1, Math.max(0, 1 - (t - s.top) / s.height)), i = Math.round(e * 100) / 100;
+    const s = this.#d.getBoundingClientRect(), e = Math.min(1, Math.max(0, 1 - (t - s.top) / s.height)), i = Math.round(e * 100) / 100;
     this.#t.volume = i, this.#t.muted = i <= 0, this.#y();
   }
   #Jt(t) {
-    t !== null && this.#p.hasPointerCapture(t) && this.#p.releasePointerCapture(t);
+    t !== null && this.#d.hasPointerCapture(t) && this.#d.releasePointerCapture(t);
   }
   #Pt(t) {
-    this.#F = !1, this.#n = null, this.#z.classList.remove("is-scrubbing-volume"), this.#p.blur(), this.#Jt(t), this.#te(260);
+    this.#F = !1, this.#n = null, this.#z.classList.remove("is-scrubbing-volume"), this.#d.blur(), this.#Jt(t), this.#te(260);
   }
   #Tt = () => {
     const t = document.pictureInPictureElement === this.#t, s = this.#t, e = !!(this.pictureInPictureEnabled && document.pictureInPictureEnabled && s.requestPictureInPicture);
@@ -1847,7 +1850,7 @@ class A extends HTMLElement {
     s instanceof HTMLElement && s.blur(), t ? this.#Rs() : this.#Yt();
   }
   #Gs = () => {
-    !this.#x || this.#a || (this.#H(), this.#P(), this.#rt(), this.#a = !0, this.#s.classList.add("is-scrubbing"), this.#f = this.#W(this.#es, !0), this.#G && this.#t.pause(), this.#t.currentTime = this.#f, this.#l(this.#f), this.#g(this.#f), this.#kt(), this.#u());
+    !this.#x || this.#a || (this.#H(), this.#P(), this.#rt(), this.#a = !0, this.#s.classList.add("is-scrubbing"), this.#f = this.#W(this.#es, !0), this.#G && this.#t.pause(), this.#t.currentTime = this.#f, this.#l(this.#f), this.#g(this.#f), this.#kt(), this.#p());
   };
   #ws(t) {
     t !== null && this.#i.hasPointerCapture(t) && this.#i.releasePointerCapture(t);
@@ -1869,20 +1872,20 @@ class A extends HTMLElement {
     this.#ft && (window.clearTimeout(this.#ft), this.#ft = 0);
   }
   #Ye() {
-    this.#Ne(), this.#m.classList.remove("is-time-animating"), this.#m.offsetWidth, this.#m.classList.add("is-time-animating"), this.#ft = window.setTimeout(() => {
-      this.#ft = 0, this.#m.classList.remove("is-time-animating");
+    this.#Ne(), this.#c.classList.remove("is-time-animating"), this.#c.offsetWidth, this.#c.classList.add("is-time-animating"), this.#ft = window.setTimeout(() => {
+      this.#ft = 0, this.#c.classList.remove("is-time-animating");
     }, 240);
   }
   #Xe = (t) => {
-    t.stopPropagation(), this.#ls = !this.#ls, this.#Ye(), this.#c() || this.#v ? this.#m && (this.#m.textContent = this.#ks(this.#f), this.#$t()) : this.#wt(this.#X());
+    t.stopPropagation(), this.#ls = !this.#ls, this.#Ye(), this.#u() || this.#v ? this.#c && (this.#c.textContent = this.#ks(this.#f), this.#$t()) : this.#wt(this.#X());
   };
   #_e = async () => {
     if (performance.now() < this.#Cs)
       return;
     const t = this.#b ? this.#b !== "playing" : this.#t.paused || this.#t.ended, s = !t || this.#Ce();
-    this.#D(), s && (this.#b = t ? "playing" : "paused", this.#u()), t ? (this.#H(), await this.#Y(), await this.#t.play().catch(() => {
+    this.#D(), s && (this.#b = t ? "playing" : "paused", this.#p()), t ? (this.#H(), await this.#Y(), await this.#t.play().catch(() => {
       this.#b = null;
-    })) : (this.#Fe(), this.#t.pause()), this.#u(), this.#R();
+    })) : (this.#Fe(), this.#t.pause()), this.#p(), this.#R();
   };
   #We = (t) => {
     if (!(t instanceof PointerEvent)) return;
@@ -1909,7 +1912,7 @@ class A extends HTMLElement {
     this.#Ct(), this.#pt = window.setTimeout(this.#Ps, t);
   }
   #se = () => {
-    if (!this.#d()) {
+    if (!this.#m()) {
       if (!this.#T() || !this.volumeSliderEnabled) {
         this.#S();
         return;
@@ -1918,7 +1921,7 @@ class A extends HTMLElement {
     }
   };
   #ee = () => {
-    if (!this.#d()) {
+    if (!this.#m()) {
       if (!this.#T() || !this.volumeSliderEnabled) {
         this.#S();
         return;
@@ -1935,11 +1938,11 @@ class A extends HTMLElement {
   };
   #Ze = (t) => {
     if (t instanceof PointerEvent) {
-      if (t.preventDefault(), t.stopPropagation(), !this.#T() || !this.volumeSliderEnabled || this.#d()) {
+      if (t.preventDefault(), t.stopPropagation(), !this.#T() || !this.volumeSliderEnabled || this.#m()) {
         this.#S();
         return;
       }
-      this.#D(), this.#P(), this.#Qs(), this.#F = !0, this.#n = t.pointerId, this.#z.classList.add("is-scrubbing-volume"), this.#p.setPointerCapture(t.pointerId), this.#Zs(t.clientY);
+      this.#D(), this.#P(), this.#Qs(), this.#F = !0, this.#n = t.pointerId, this.#z.classList.add("is-scrubbing-volume"), this.#d.setPointerCapture(t.pointerId), this.#Zs(t.clientY);
     }
   };
   #Ke = (t) => {
@@ -1987,15 +1990,15 @@ class A extends HTMLElement {
     }
   };
   #ie = (t) => {
-    this.#d() || this.#c() || !(t instanceof PointerEvent) && !(t instanceof MouseEvent) || (this.#v = !0, this.#s.classList.add("is-progress-hovering"), this.#W(t.clientX, !1, !1));
+    this.#m() || this.#u() || !(t instanceof PointerEvent) && !(t instanceof MouseEvent) || (this.#v = !0, this.#s.classList.add("is-progress-hovering"), this.#W(t.clientX, !1, !1));
   };
   #re = () => {
-    this.#c() || this.#zs();
+    this.#u() || this.#zs();
   };
   #ei = (t) => {
     if (t instanceof PointerEvent) {
       if (t.preventDefault(), !this.#gt() || this.#Xt()) {
-        this.#D(), this.#d() && (this.#rs = performance.now() + 260);
+        this.#D(), this.#m() && (this.#rs = performance.now() + 260);
         return;
       }
       this.#D(), this.#P(), this.#Ns(), this.#I = !1, this.#nt = !1, this.#ze(this.#X()), this.#x = !0, this.#h = t.pointerId, this.#es = t.clientX, this.#G = !this.#t.paused && !this.#t.ended, this.#i.setPointerCapture(t.pointerId), this.#f = this.#W(t.clientX, !1), this.#rt(), this.#St = window.setTimeout(this.#Gs, this.#he);
@@ -2010,7 +2013,7 @@ class A extends HTMLElement {
   #ri = (t) => {
     if (t instanceof PointerEvent) {
       if (!this.#x) {
-        this.#d() || (this.#v = !0, this.#s.classList.add("is-progress-hovering"), this.#W(t.clientX, !1, !1));
+        this.#m() || (this.#v = !0, this.#s.classList.add("is-progress-hovering"), this.#W(t.clientX, !1, !1));
         return;
       }
       this.#h !== null && t.pointerId !== this.#h || (!this.#a && Math.abs(t.clientX - this.#es) >= this.#ne && this.#Gs(), this.#a && (this.#f = this.#W(t.clientX)));
@@ -2047,13 +2050,13 @@ class A extends HTMLElement {
     this.#ys() || this.#Yt();
   };
   #ui = () => {
-    this.#b = null, this.#H(), this.#c() || this.#l(), this.#u();
+    this.#b = null, this.#H(), this.#u() || this.#l(), this.#p();
   };
   #pi = () => {
-    this.#b = null, this.#c() || this.#Os(), this.#w(), this.#u();
+    this.#b = null, this.#u() || this.#Os(), this.#w(), this.#p();
   };
   #di = () => {
-    this.#b = null, this.#H(), this.#c() || this.#l(), this.#u();
+    this.#b = null, this.#H(), this.#u() || this.#l(), this.#p();
   };
   #mi = () => {
     this.#yt(!0, !0);
@@ -2062,21 +2065,21 @@ class A extends HTMLElement {
     this.#yt(!0);
   };
   #fi = () => {
-    this.#H(), this.#y(), this.#c() || this.#l(), this.#w(), this.#g();
+    this.#H(), this.#y(), this.#u() || this.#l(), this.#w(), this.#g();
   };
   #bi = () => {
     const t = this.#Kt();
-    this.#y(), t && !this.#c() && this.#l(), this.#u();
+    this.#y(), t && !this.#u() && this.#l(), this.#p();
   };
   #vi = () => {
     if (this.#H(), this.#w(), this.#I && (!this.#nt || this.#t.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA)) {
-      this.#_s(), this.#u();
+      this.#_s(), this.#p();
       return;
     }
-    this.#c() || this.#l(), this.#g();
+    this.#u() || this.#l(), this.#g();
   };
   #gi = () => {
-    this.#b = null, this.#A = !1, this.#L = !1, this.#q = !1, this.#B = !1, this.#$ += 1, this.#s.classList.remove("has-visible-frame"), this.#yt(!0, !0), this.#u(), this.#Ae();
+    this.#b = null, this.#A = !1, this.#L = !1, this.#q = !1, this.#B = !1, this.#$ += 1, this.#s.classList.remove("has-visible-frame"), this.#yt(!0, !0), this.#p(), this.#Ae();
   };
   #yi = () => {
     this.#y(), this.#g();
@@ -2084,11 +2087,11 @@ class A extends HTMLElement {
   #wi = () => {
     this.#y();
   };
-  #d() {
+  #m() {
     return window.matchMedia("(max-width: 768px)").matches && window.matchMedia("(hover: none), (pointer: coarse)").matches;
   }
   #xi() {
-    this.#t && (this.#E?.disconnect(), this.#E = null, this.#Ot(), this.#gs(), this.#C = !1, this.#is = 0, this.#A = !1, this.#L = !1, this.#q = !1, this.#B = !1, this.#$ += 1, this.#ht = !1, this.#ct = 0, this.#H(), this.#Rt = !1, this.#ut = !1, this.#S(), this.#I = !1, this.#nt = !1, this.#b = null, this.#s.classList.remove("has-loaded-once", "has-visible-frame", "is-progress-settling"), this.#t.dataset.src = this.src, this.#t.pause(), this.#t.removeAttribute("src"), this.#t.preload = "none", this.#Bt(), this.#t.load(), this.#_(0), this.#y(), this.#w(), this.#u());
+    this.#t && (this.#E?.disconnect(), this.#E = null, this.#Ot(), this.#gs(), this.#C = !1, this.#is = 0, this.#A = !1, this.#L = !1, this.#q = !1, this.#B = !1, this.#$ += 1, this.#ht = !1, this.#ct = 0, this.#H(), this.#Rt = !1, this.#ut = !1, this.#S(), this.#I = !1, this.#nt = !1, this.#b = null, this.#s.classList.remove("has-loaded-once", "has-visible-frame", "is-progress-settling"), this.#t.dataset.src = this.src, this.#t.pause(), this.#t.removeAttribute("src"), this.#t.preload = "none", this.#Bt(), this.#t.load(), this.#_(0), this.#y(), this.#w(), this.#p());
   }
 }
 customElements.get("simple-player") || customElements.define("simple-player", A);