itube-modern-player 0.8.2 → 0.8.4

package/dist/core.js

@@ -39,7 +39,7 @@ function I(r, t, e) {
 function x(r, t, e) {
   return Math.min(e, Math.max(t, r));
 }
-function _(r) {
+function S(r) {
   if (!Number.isFinite(r) || r < 0) return "0:00";
   const t = Math.floor(r % 60), e = Math.floor(r / 60 % 60), i = Math.floor(r / 3600), s = i > 0 ? String(e).padStart(2, "0") : String(e), n = String(t).padStart(2, "0");
   return i > 0 ? `${i}:${s}:${n}` : `${s}:${n}`;
@@ -142,17 +142,17 @@ const g = (r, t = "0 0 24 24") => `<svg viewBox="${t}" fill="currentColor" aria-
   // Generic "channel" glyph (play badge) for preview meta when a channel is set.
   channel: g('<path d="M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm7 3.5v7l6-3.5-6-3.5Z"/>')
 }, V = { en: G };
-function qt(r, t) {
+function Vt(r, t) {
   V[r] = t;
 }
-function Vt(r) {
+function Ot(r) {
   for (const [t, e] of Object.entries(r))
     e && (V[t] = e);
 }
 function at(r) {
   return r && V[r] || G;
 }
-function Ot() {
+function Ht() {
   return Object.keys(V);
 }
 function lt(r) {
@@ -208,7 +208,7 @@ function ut(r, t = 1, e = 1e3, i = 100) {
   }, [, h] = l(0);
   let c = `M 0 ${i} L 0 ${h.toFixed(1)}`;
   for (let u = 0; u < s - 1; u++) {
-    const [f, p] = l(u - 1), [m, v] = l(u), [y, d] = l(u + 1), [k, C] = l(u + 2), A = m + (y - f) * o, O = Math.min(i, Math.max(0, v + (d - p) * o)), P = y - (k - m) * o, R = Math.min(i, Math.max(0, d - (C - v) * o));
+    const [f, p] = l(u - 1), [m, v] = l(u), [y, d] = l(u + 1), [k, M] = l(u + 2), A = m + (y - f) * o, O = Math.min(i, Math.max(0, v + (d - p) * o)), P = y - (k - m) * o, R = Math.min(i, Math.max(0, d - (M - v) * o));
     c += ` C ${A.toFixed(1)} ${O.toFixed(1)} ${P.toFixed(1)} ${R.toFixed(1)} ${y.toFixed(1)} ${d.toFixed(1)}`;
   }
   return c += ` L ${e} ${i} Z`, c;
@@ -243,7 +243,7 @@ async function tt(r, t, e, i, s) {
   mt(c, s);
   const u = c.querySelector(":scope > Wrapper");
   if (u) {
-    const v = S(u.querySelector("VASTAdTagURI"));
+    const v = _(u.querySelector("VASTAdTagURI"));
     if (!v) throw new Error("VAST wrapper without VASTAdTagURI");
     return tt(r, v, e, i + 1, s);
   }
@@ -257,35 +257,35 @@ async function tt(r, t, e, i, s) {
     roll: r.roll,
     mediaUrl: m.url,
     mediaType: m.type,
-    clickThrough: S(p.querySelector("VideoClicks > ClickThrough")) ?? r.clickUrl,
-    duration: D(S(p.querySelector(":scope > Duration"))),
+    clickThrough: _(p.querySelector("VideoClicks > ClickThrough")) ?? r.clickUrl,
+    duration: D(_(p.querySelector(":scope > Duration"))),
     skipOffset: vt(
       p.getAttribute("skipoffset"),
-      D(S(p.querySelector(":scope > Duration")))
+      D(_(p.querySelector(":scope > Duration")))
     ),
     impressions: s.impressions,
     tracking: s.tracking,
-    adTitle: S(f.querySelector(":scope > AdTitle")) ?? void 0
+    adTitle: _(f.querySelector(":scope > AdTitle")) ?? void 0
   };
 }
 function mt(r, t) {
   var e, i;
   for (const s of r.querySelectorAll("Impression")) {
-    const n = S(s);
+    const n = _(s);
     n && t.impressions.push(n);
   }
   for (const s of r.querySelectorAll("Linear > TrackingEvents > Tracking")) {
-    const n = s.getAttribute("event"), o = S(s);
+    const n = s.getAttribute("event"), o = _(s);
     !n || !o || ["start", "firstQuartile", "midpoint", "thirdQuartile", "complete", "skip", "pause", "resume"].includes(n) && ((e = t.tracking)[n] ?? (e[n] = [])).push(o);
   }
   for (const s of r.querySelectorAll("Linear > VideoClicks > ClickTracking")) {
-    const n = S(s);
+    const n = _(s);
     n && ((i = t.tracking).click ?? (i.click = [])).push(n);
   }
 }
 function ft(r) {
   const e = [...r.querySelectorAll("MediaFiles > MediaFile")].map((o) => ({
-    url: S(o) ?? "",
+    url: _(o) ?? "",
     type: o.getAttribute("type") ?? void 0,
     delivery: o.getAttribute("delivery") ?? "",
     bitrate: Number(o.getAttribute("bitrate") ?? 0),
@@ -309,7 +309,7 @@ function vt(r, t) {
   const e = r.trim().match(/^(\d+(?:\.\d+)?)%$/);
   return e ? t !== void 0 ? Number(e[1]) / 100 * t : void 0 : D(r);
 }
-function F(r) {
+function $(r) {
   if (r)
     for (const t of r)
       try {
@@ -317,7 +317,7 @@ function F(r) {
       } catch {
       }
 }
-function S(r) {
+function _(r) {
   return r?.textContent?.trim().replace(/^<!\[CDATA\[|\]\]>$/g, "").trim() || null;
 }
 class gt {
@@ -416,19 +416,19 @@ class gt {
       const v = a("button", "imp-ad__skip", { type: "button" });
       v.hidden = !0, p.append(v), s.append(n, h, c, p), this.host.container.append(s), this.layer = s;
       const y = t.skipOffset ?? this.opts.skipDelay, d = /* @__PURE__ */ new Set(), k = (w) => {
-        d.has(w) || (d.add(w), F(t.tracking[w]));
+        d.has(w) || (d.add(w), $(t.tracking[w]));
       };
-      let C = Date.now(), A = -1;
+      let M = Date.now(), A = -1;
       const O = setInterval(() => {
         if (n.paused) {
-          C = Date.now();
+          M = Date.now();
           return;
         }
         if (n.currentTime !== A) {
-          A = n.currentTime, C = Date.now();
+          A = n.currentTime, M = Date.now();
           return;
         }
-        Date.now() - C >= this.opts.mediaTimeout && (this.host.emitter.emit("aderror", {
+        Date.now() - M >= this.opts.mediaTimeout && (this.host.emitter.emit("aderror", {
           roll: { roll: t.roll },
           error: new Error(`Ad media stalled for ${this.opts.mediaTimeout} ms — skipping`)
         }), P());
@@ -438,14 +438,14 @@ class gt {
         w ? (k("skip"), this.host.emitter.emit("adskip", { ad: t })) : k("complete"), this.host.emitter.emit("adend", { ad: t }), P();
       };
       n.addEventListener("playing", () => {
-        F(t.impressions), k("start"), this.host.emitter.emit("adstart", { ad: t });
+        $(t.impressions), k("start"), this.host.emitter.emit("adstart", { ad: t });
       }, { once: !0, signal: l }), n.addEventListener("playing", () => {
         h.hidden = !0;
       }, { signal: l }), n.addEventListener("waiting", () => {
         h.hidden = !1;
       }, { signal: l }), n.addEventListener("timeupdate", () => {
         const w = n.currentTime, B = n.duration;
-        if (Number.isFinite(B) && B > 0 && (f.textContent = _(Math.max(0, B - w)), w / B >= 0.25 && k("firstQuartile"), w / B >= 0.5 && k("midpoint"), w / B >= 0.75 && k("thirdQuartile")), y >= 0) {
+        if (Number.isFinite(B) && B > 0 && (f.textContent = S(Math.max(0, B - w)), w / B >= 0.25 && k("firstQuartile"), w / B >= 0.5 && k("midpoint"), w / B >= 0.75 && k("thirdQuartile")), y >= 0) {
           const U = Math.ceil(y - w);
           U > 0 ? (v.hidden = !1, v.disabled = !0, v.textContent = `${i.skipAdIn} ${U}`) : (v.hidden = !1, v.disabled = !1, v.textContent = i.skipAd);
         }
@@ -463,9 +463,9 @@ class gt {
       n.addEventListener("playing", () => {
         Q = !0;
       }, { once: !0, signal: l }), n.addEventListener("pause", () => {
-        n.ended || !s.isConnected || (s.classList.add("imp-ad--paused"), Q && !N && (N = !0, F(t.tracking.pause), this.host.emitter.emit("adpause", { ad: t })));
+        n.ended || !s.isConnected || (s.classList.add("imp-ad--paused"), Q && !N && (N = !0, $(t.tracking.pause), this.host.emitter.emit("adpause", { ad: t })));
       }, { signal: l }), n.addEventListener("play", () => {
-        s.classList.remove("imp-ad--paused"), N && (N = !1, F(t.tracking.resume), this.host.emitter.emit("adresume", { ad: t }));
+        s.classList.remove("imp-ad--paused"), N && (N = !1, $(t.tracking.resume), this.host.emitter.emit("adresume", { ad: t }));
       }, { signal: l }), s.addEventListener("click", (w) => {
         (w.target === s || s.classList.contains("imp-ad--paused")) && n.paused && n.play().catch(() => {
         });
@@ -615,8 +615,8 @@ class W {
     return null;
   }
 }
-const _t = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg>', St = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg>';
-class M {
+const St = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg>', _t = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg>';
+class C {
   constructor(t) {
     this.anchor = t, this.outsideListener = null, this.escListener = null, this.root = a("div", "imp-menu"), this.root.hidden = !0, this.backdrop = a("div", "imp-menu__backdrop"), this.backdrop.hidden = !0, this.backdrop.addEventListener("pointerdown", (e) => {
       e.preventDefault(), this.close();
@@ -654,7 +654,7 @@ class M {
       const o = a("span", "imp-menu__value");
       o.textContent = i.value ?? "";
       const l = a("span", "imp-menu__chevron");
-      l.innerHTML = _t, s.append(n, o, l), s.addEventListener("click", () => this.renderSettingsDetail(t, i)), e.append(s);
+      l.innerHTML = St, s.append(n, o, l), s.addEventListener("click", () => this.renderSettingsDetail(t, i)), e.append(s);
     }
     this.root.append(e);
   }
@@ -676,7 +676,7 @@ class M {
     if (!e.section) return;
     this.root.textContent = "";
     const i = a("button", "imp-menu__item imp-menu__back", { type: "button" }), s = a("span", "imp-menu__chevron");
-    s.innerHTML = St;
+    s.innerHTML = _t;
     const n = a("span", "imp-menu__label");
     n.textContent = e.label, i.append(s, n), i.addEventListener("click", () => this.renderSettingsRoot(t)), this.root.append(i), this.root.append(this.renderSection(e.section())), this.root.scrollTop = 0;
   }
@@ -719,17 +719,19 @@ class M {
     this.close(), this.backdrop.remove(), this.root.remove();
   }
 }
-class Lt {
+let Lt = 0;
+class Tt {
   constructor(t, e = "Seek") {
-    this.cb = t, this.segments = [], this.duration = 0, this.chapters = [], this.thumbnails = null, this.scrubbing = !1, this.root = a("div", "imp-progress", { role: "slider", "aria-label": e, tabindex: "-1" }), this.buffered = a("div", "imp-progress__buffered"), this.track = a("div", "imp-progress__track"), this.handle = a("div", "imp-progress__handle"), this.tooltipThumb = a("div", "imp-progress__thumb"), this.tooltipChapter = a("div", "imp-progress__tooltip-chapter"), this.tooltipTime = a("div", "imp-progress__tooltip-time"), this.tooltipCaption = a("div", "imp-progress__caption"), this.tooltipCaption.append(this.tooltipChapter, this.tooltipTime), this.tooltip = a("div", "imp-progress__tooltip"), this.tooltip.append(this.tooltipThumb, this.tooltipCaption), this.heatmap = a("div", "imp-progress__heatmap"), this.heatmap.hidden = !0, this.root.append(this.heatmap, this.buffered, this.track, this.handle, this.tooltip), this.setChapters([]), this.bindPointer();
+    this.cb = t, this.segments = [], this.duration = 0, this.chapters = [], this.thumbnails = null, this.scrubbing = !1, this.heatmapClipRect = null, this.lastRatio = 0, this.root = a("div", "imp-progress", { role: "slider", "aria-label": e, tabindex: "-1" }), this.buffered = a("div", "imp-progress__buffered"), this.track = a("div", "imp-progress__track"), this.handle = a("div", "imp-progress__handle"), this.tooltipThumb = a("div", "imp-progress__thumb"), this.tooltipChapter = a("div", "imp-progress__tooltip-chapter"), this.tooltipTime = a("div", "imp-progress__tooltip-time"), this.tooltipCaption = a("div", "imp-progress__caption"), this.tooltipCaption.append(this.tooltipChapter, this.tooltipTime), this.tooltip = a("div", "imp-progress__tooltip"), this.tooltip.append(this.tooltipThumb, this.tooltipCaption), this.heatmap = a("div", "imp-progress__heatmap"), this.heatmap.hidden = !0, this.root.append(this.heatmap, this.buffered, this.track, this.handle, this.tooltip), this.setChapters([]), this.bindPointer();
   }
   /** Render the popularity curve (empty array hides it). */
   setHeatmap(t, e = 1) {
     if (t.length === 0) {
-      this.heatmap.hidden = !0, this.heatmap.textContent = "";
+      this.heatmap.hidden = !0, this.heatmap.textContent = "", this.heatmapClipRect = null;
       return;
     }
-    this.heatmap.innerHTML = `<svg viewBox="0 0 1000 100" preserveAspectRatio="none" aria-hidden="true"><path d="${ut(t, e)}"/></svg>`, this.heatmap.hidden = !1;
+    const i = ut(t, e), s = `imp-hm-clip-${++Lt}`;
+    this.heatmap.innerHTML = `<svg viewBox="0 0 1000 100" preserveAspectRatio="none" aria-hidden="true"><defs><clipPath id="${s}"><rect x="0" y="0" width="0" height="100"/></clipPath></defs><path d="${i}"/><path class="imp-progress__heatmap-played" d="${i}" clip-path="url(#${s})"/></svg>`, this.heatmapClipRect = this.heatmap.querySelector("clipPath rect"), this.heatmapClipRect?.setAttribute("width", String(this.lastRatio * 1e3)), this.heatmap.hidden = !1;
   }
   setDuration(t) {
     this.duration = Number.isFinite(t) ? t : 0, this.root.classList.toggle("imp-progress--live", !Number.isFinite(t)), this.chapters.length === 0 && this.setChapters([]);
@@ -755,7 +757,7 @@ class Lt {
     if (e !== this.duration && Number.isFinite(e) && this.setDuration(e), this.scrubbing) return;
     this.render(t);
     const s = this.duration > 0 ? x(i / this.duration, 0, 1) : 0;
-    this.buffered.style.width = `${s * 100}%`, this.root.setAttribute("aria-valuemin", "0"), this.root.setAttribute("aria-valuemax", String(Math.round(this.duration))), this.root.setAttribute("aria-valuenow", String(Math.round(t))), this.root.setAttribute("aria-valuetext", `${_(t)} / ${_(this.duration)}`);
+    this.buffered.style.width = `${s * 100}%`, this.root.setAttribute("aria-valuemin", "0"), this.root.setAttribute("aria-valuemax", String(Math.round(this.duration))), this.root.setAttribute("aria-valuenow", String(Math.round(t))), this.root.setAttribute("aria-valuetext", `${S(t)} / ${S(this.duration)}`);
   }
   render(t) {
     for (const { chapter: i, fill: s } of this.segments) {
@@ -763,7 +765,7 @@ class Lt {
       s.style.transform = `scaleX(${o})`;
     }
     const e = this.duration > 0 ? x(t / this.duration, 0, 1) : 0;
-    this.handle.style.left = `${e * 100}%`;
+    this.handle.style.left = `${e * 100}%`, this.lastRatio = e, this.heatmapClipRect?.setAttribute("width", String(e * 1e3));
   }
   timeFromEvent(t) {
     const e = this.root.getBoundingClientRect();
@@ -782,7 +784,7 @@ class Lt {
   }
   showTooltip(t) {
     const e = this.timeFromEvent(t);
-    this.tooltipTime.textContent = _(e);
+    this.tooltipTime.textContent = S(e);
     const i = et(this.chapters, e), s = !!i?.title;
     this.tooltipChapter.textContent = i?.title ?? "", this.tooltipChapter.hidden = !s, this.tooltipCaption.classList.toggle("imp-progress__caption--time-only", !s);
     const n = this.thumbnails?.cueAt(e) ?? null;
@@ -794,11 +796,11 @@ class Lt {
     this.tooltip.classList.remove("imp-progress__tooltip--visible");
   }
 }
-class Tt {
+class Bt {
   constructor(t) {
     this.player = t, this.rightItems = /* @__PURE__ */ new Map(), this.subtitlesBtn = null, this.settingsBtn = null, this.settingsMenu = null, this.subtitlesMenu = null, this.moreMenu = null, this.moreWrap = null, this.qualityBtn = null, this.qualityMenu = null, this.gearBtn = null, this.gearMenu = null, this.gear = { speed: !1, quality: !1, subtitles: !1 }, this.nextPreviewEl = null, this.nextPreviewOpts = null, this.scenesBtn = null, this.sceneTypeBtn = null, this.sceneTypeMenu = null, this.likeBtn = null, this.dislikeBtn = null, this.likeCountEl = null, this.dislikeCountEl = null, this.prevBtn = null, this.nextBtn = null, this.seekBackBtn = null, this.seekFwdBtn = null, this.centerPlayBtn = null, this.centerPrevBtn = null, this.centerNextBtn = null, this.collapsibles = [], this.overflowed = /* @__PURE__ */ new Set(), this.resizeObserver = null, this.reflowScheduled = !1, this.actionItems = [], this.wasPlayingBeforeScrub = !1, this.disposers = [], this.onWindowResize = null;
     const { labels: e, icons: i } = t, s = t.controlsOptions;
-    this.root = a("div", "imp-controls"), this.progress = new Lt({
+    this.root = a("div", "imp-controls"), this.progress = new Tt({
       onSeek: (d) => t.seek(d),
       onScrubStart: () => {
         t.scrubbing = !0, this.wasPlayingBeforeScrub = !t.paused, t.pause();
@@ -839,7 +841,7 @@ class Tt {
     }
     const p = (d) => d === !1 ? "off" : d === "bar" ? "bar" : "gear", m = p(s.subtitles), v = p(s.quality), y = p(s.speed);
     if (this.gear = { speed: y === "gear", quality: v === "gear", subtitles: m === "gear" }, m === "bar") {
-      this.subtitlesBtn = b("imp-btn--subtitles", e.subtitles, i.subtitles), this.subtitlesMenu = new M(this.subtitlesBtn);
+      this.subtitlesBtn = b("imp-btn--subtitles", e.subtitles, i.subtitles), this.subtitlesMenu = new C(this.subtitlesBtn);
       const d = a("div", "imp-controls__menu-anchor");
       d.append(this.subtitlesBtn, this.subtitlesMenu.root), this.subtitlesBtn.addEventListener("click", () => this.toggleSubtitlesMenu()), this.rightItems.set("subtitles", d), this.registerCollapsible({
         key: "subtitles",
@@ -850,7 +852,7 @@ class Tt {
       });
     }
     if (v === "bar") {
-      this.qualityBtn = b("imp-btn--quality", e.quality, i.settings), this.qualityMenu = new M(this.qualityBtn);
+      this.qualityBtn = b("imp-btn--quality", e.quality, i.settings), this.qualityMenu = new C(this.qualityBtn);
       const d = a("div", "imp-controls__menu-anchor");
       d.append(this.qualityBtn, this.qualityMenu.root), this.qualityBtn.addEventListener("click", () => this.toggleQualityMenu()), this.rightItems.set("quality", d), this.registerCollapsible({
         key: "quality",
@@ -861,7 +863,7 @@ class Tt {
       });
     }
     if (y === "bar") {
-      this.settingsBtn = b("imp-btn--speed", e.speed, i.speed), this.settingsMenu = new M(this.settingsBtn);
+      this.settingsBtn = b("imp-btn--speed", e.speed, i.speed), this.settingsMenu = new C(this.settingsBtn);
       const d = a("div", "imp-controls__menu-anchor");
       d.append(this.settingsBtn, this.settingsMenu.root), this.settingsBtn.addEventListener("click", () => this.toggleSettingsMenu()), this.rightItems.set("speed", d), this.registerCollapsible({
         key: "speed",
@@ -878,7 +880,7 @@ class Tt {
       available: () => t.chapterList.length > 0,
       section: () => this.simpleSection("scenes", e.scenes, i.scenes, () => t.toggleScenesPanel())
     })), s.sceneTypes !== !1) {
-      this.sceneTypeBtn = a("button", "imp-btn imp-btn--scene-types", { type: "button" }), this.sceneTypeMenu = new M(this.sceneTypeBtn);
+      this.sceneTypeBtn = a("button", "imp-btn imp-btn--scene-types", { type: "button" }), this.sceneTypeMenu = new C(this.sceneTypeBtn);
       const d = a("div", "imp-controls__menu-anchor");
       d.append(this.sceneTypeBtn, this.sceneTypeMenu.root), this.sceneTypeBtn.addEventListener("click", () => this.toggleSceneTypeMenu()), this.rightItems.set("sceneTypes", d), this.refreshSceneTypeButton(), this.registerCollapsible({
         key: "sceneTypes",
@@ -949,7 +951,7 @@ class Tt {
       this.addStepBadge(d, f, "forward"), d.addEventListener("click", () => t.skip(f)), this.center.append(d);
     }
     if (s.playlist && t.hasPlaylist && (this.centerNextBtn = this.makeCenterButton("next", e.next, i.next), this.centerNextBtn.addEventListener("click", () => t.next()), this.center.append(this.centerNextBtn)), this.center.style.display = "none", this.setupNextPreview(), this.gear.speed || this.gear.quality || this.gear.subtitles) {
-      this.gearBtn = b("imp-btn--settings", e.settings, i.settings), this.gearMenu = new M(this.gearBtn);
+      this.gearBtn = b("imp-btn--settings", e.settings, i.settings), this.gearMenu = new C(this.gearBtn);
       const d = a("div", "imp-controls__menu-anchor");
       d.append(this.gearBtn, this.gearMenu.root), this.gearBtn.addEventListener("click", () => this.toggleGearMenu()), this.rightItems.set("gear", d), this.registerCollapsible({
         key: "gear",
@@ -1093,7 +1095,7 @@ class Tt {
         this.player.markSourceDead(s), this.nextPreviewEl && !this.nextPreviewEl.hidden && this.showNextPreview(t);
       }, { once: !0 }), m.append(v), i.duration && s.duration) {
         const y = a("span", "imp-next-preview__duration");
-        y.textContent = _(s.duration), m.append(y);
+        y.textContent = S(s.duration), m.append(y);
       }
       e.append(m);
     }
@@ -1159,7 +1161,7 @@ class Tt {
     for (const h of (i.custom ?? []).filter((c) => c.placement !== "bar"))
       this.actionItems.push({ value: `custom:${h.id}`, label: h.title, icon: h.icon, run: () => e.emit("customaction", { id: h.id }) });
     const o = b("imp-btn--more", s.more, n.more);
-    this.moreMenu = new M(o);
+    this.moreMenu = new C(o);
     const l = a("div", "imp-controls__menu-anchor imp-controls__more");
     l.append(o, this.moreMenu.root), o.addEventListener("click", () => {
       this.closeMenus(this.moreMenu), this.moreMenu?.toggle(this.buildMoreSections());
@@ -1271,7 +1273,7 @@ class Tt {
     const t = this.player;
     this.disposers.push(
       t.on("timeupdate", ({ currentTime: e, duration: i }) => {
-        this.progress.update(e, i, t.bufferedEnd), this.timeLabel && (t.live ? (this.timeLabel.hidden = !0, this.liveBadge.hidden = !1) : (this.timeLabel.hidden = !1, this.liveBadge.hidden = !0, this.timeCurrent.textContent = _(e), this.timeTotal.textContent = ` / ${_(i)}`));
+        this.progress.update(e, i, t.bufferedEnd), this.timeLabel && (t.live ? (this.timeLabel.hidden = !0, this.liveBadge.hidden = !1) : (this.timeLabel.hidden = !1, this.liveBadge.hidden = !0, this.timeCurrent.textContent = S(e), this.timeTotal.textContent = ` / ${S(i)}`));
       }),
       t.on("play", () => this.syncPlayState()),
       t.on("pause", () => this.syncPlayState()),
@@ -1330,7 +1332,7 @@ class Tt {
     this.disposers = [], this.resizeObserver?.disconnect(), this.onWindowResize && window.removeEventListener("resize", this.onWindowResize), this.gearMenu?.destroy(), this.sceneTypeMenu?.destroy(), this.settingsMenu?.destroy(), this.subtitlesMenu?.destroy(), this.qualityMenu?.destroy(), this.moreMenu?.destroy(), this.nextPreviewEl?.remove(), this.root.remove();
   }
 }
-class Bt {
+class Et {
   constructor(t) {
     this.root = a("div", "imp-poster"), this.image = a("div", "imp-poster__image"), this.image.hidden = !0, this.img = T(""), this.image.append(this.img);
     const e = b("imp-poster__play", t.labels.play, t.icons.bigPlay);
@@ -1353,7 +1355,7 @@ class Bt {
     this.root.hidden = !0;
   }
 }
-class Et {
+class Ct {
   constructor(t) {
     this.labels = t, this.channelUrl = null, this.custom = null, this.visible = { title: !0, description: !0, sponsor: !0 }, this.root = a("div", "imp-pause-screen"), this.root.hidden = !0, this.defaultContent = a("div", "imp-pause-screen__default"), this.channel = a("button", "imp-channel", { type: "button" }), this.channel.hidden = !0, this.channelAvatar = a("div", "imp-channel__avatar"), this.channelName = a("div", "imp-channel__name"), this.channel.append(this.channelName, this.channelAvatar), this.channel.addEventListener("click", () => {
       this.channelUrl && window.open(this.channelUrl, "_blank", "noopener");
@@ -1439,7 +1441,7 @@ class Mt {
     this.root.hidden = !0;
   }
 }
-class Ct {
+class Pt {
   constructor(t) {
     this.player = t, this.root = a("div", "imp-upnext"), this.root.hidden = !0;
   }
@@ -1463,7 +1465,7 @@ class Ct {
         this.player.markSourceDead(t), this.root.hidden || this.show();
       }, { once: !0 }), l.append(h), t.duration) {
         const u = a("span", "imp-upnext__duration");
-        u.textContent = _(t.duration), l.append(u);
+        u.textContent = S(t.duration), l.append(u);
       }
       const c = a("span", "imp-upnext__thumb-play");
       L(c, this.player.icons.bigPlay), l.append(c), l.addEventListener("click", () => this.player.next()), i.append(l);
@@ -1480,7 +1482,7 @@ class Ct {
     this.root.hidden = !0;
   }
 }
-class Pt {
+class At {
   constructor(t, e = "sidebar", i) {
     this.player = t, this.root = a("div", `imp-playlist imp-playlist--${e}`), this.root.hidden = !0;
     const s = a("div", "imp-playlist__header"), n = a("div", "imp-playlist__heading");
@@ -1512,7 +1514,7 @@ class Pt {
       const o = a("div", "imp-playlist__meta"), l = a("div", "imp-playlist__title");
       if (l.textContent = t.title ?? `#${e + 1}`, o.append(l), t.duration) {
         const h = a("div", "imp-playlist__duration");
-        h.textContent = _(t.duration), o.append(h);
+        h.textContent = S(t.duration), o.append(h);
       }
       i.append(s, o), i.addEventListener("click", () => {
         this.player.playItem(e), window.innerWidth <= 767 && this.hide();
@@ -1532,7 +1534,7 @@ class Pt {
     this.visible ? this.hide() : this.show();
   }
 }
-class At {
+class Rt {
   constructor(t, e = "bottom") {
     this.player = t, this.items = [], this.root = a("div", `imp-playlist imp-scenes imp-playlist--${e}`), this.root.hidden = !0;
     const i = a("div", "imp-playlist__header"), s = a("span");
@@ -1551,9 +1553,9 @@ class At {
         c.style.width = `${n.xywh.w}px`, c.style.height = `${n.xywh.h}px`, c.style.backgroundImage = `url("${n.src}")`, c.style.backgroundPosition = `-${n.xywh.x}px -${n.xywh.y}px`, c.style.setProperty("--imp-sprite-w", String(n.xywh.w)), s.append(c);
       } else n && s.append(T(n.src));
       const o = a("div", "imp-playlist__meta"), l = a("div", "imp-playlist__title");
-      l.textContent = e.title || _(e.start);
+      l.textContent = e.title || S(e.start);
       const h = a("div", "imp-playlist__duration");
-      h.textContent = _(e.start), o.append(l, h), i.append(s, o), i.addEventListener("click", () => {
+      h.textContent = S(e.start), o.append(l, h), i.append(s, o), i.addEventListener("click", () => {
         this.player.seek(e.start), this.player.play(), window.innerWidth <= 767 && this.hide();
       }), this.list.append(i), this.items.push(i);
     }
@@ -1583,19 +1585,19 @@ function st(r) {
   const t = r.reason;
   t?.name === "AbortError" && /interrupted by a (new load request|call to pause)/i.test(t.message ?? "") && r.preventDefault();
 }
-function Rt() {
+function Nt() {
   typeof window < "u" && ++it === 1 && window.addEventListener("unhandledrejection", st);
 }
-function Nt() {
+function It() {
   typeof window < "u" && --it === 0 && window.removeEventListener("unhandledrejection", st);
 }
-function $(r) {
+function F(r) {
   console.debug("[itube-player] play() rejected:", r);
 }
 function K(r) {
   return r ? typeof r == "string" ? [{ src: r, label: "Subtitles" }] : Array.isArray(r) ? r : [r] : [];
 }
-const It = {
+const $t = {
   play: !0,
   progress: !0,
   time: !0,
@@ -1626,14 +1628,14 @@ const It = {
   hideDelay: 2500,
   revealBeforePlay: !0
 };
-class Ht {
+class Zt {
   constructor(t, e = {}) {
     this.scrubbing = !1, this.emitter = new rt(), this.externalAdvance = !1, this.abort = new AbortController(), this.sources = [], this.deadSources = /* @__PURE__ */ new WeakSet(), this.currentIndex = -1, this.sourceController = null, this.loadToken = 0, this.chapters = [], this.currentChapter = null, this.sceneGroupList = [], this.activeSceneGroupId = "", this.progressiveQuality = -1, this.thumbTrack = null, this.shuffleMode = !1, this.autoAdvanceEnabled = !0, this.persistKey = null, this.persistVolume = !1, this.persistAutoAdvance = !1, this.decodeRecoveries = 0, this.adManager = null, this.playedOnce = !1, this.idleTimer = null, this.peekTimer = null, this.lastRetryAt = 0, this.retryTimer = null, this.errorResumeTime = 0, this.lastPlayheadTime = 0, this.pendingSeek = null, this.destroyed = !1, this.persistTimer = null;
     const i = typeof t == "string" ? document.querySelector(t) : t;
     if (!i) throw new Error(`[itube-player] mount target not found: ${String(t)}`);
     this.mount = i, this.options = e, this.labels = { ...G, ...at(e.language), ...e.labels }, this.icons = { ...ot, ...e.icons };
     const s = e.controls ?? {}, n = s.speed ?? s.settings ?? "gear";
-    if (this.controlsOptions = { ...It, ...s, speed: n, settings: n }, this.actionsOptions = e.actions ?? {}, this.playbackRates = e.playbackRates ?? [0.5, 1, 1.5, 2], this.seekStep = e.seekStep ?? 15, this.playlistOptions = { title: "", autoAdvance: !0, loop: !1, shuffle: !1, startIndex: 0, layout: "sidebar", externalAdvance: !1, ...e.playlist }, this.shuffleMode = this.playlistOptions.shuffle, this.externalAdvance = this.playlistOptions.externalAdvance, e.persist) {
+    if (this.controlsOptions = { ...$t, ...s, speed: n, settings: n }, this.actionsOptions = e.actions ?? {}, this.playbackRates = e.playbackRates ?? [0.5, 1, 1.5, 2], this.seekStep = e.seekStep ?? 15, this.playlistOptions = { title: "", autoAdvance: !0, loop: !1, shuffle: !1, startIndex: 0, layout: "sidebar", externalAdvance: !1, ...e.playlist }, this.shuffleMode = this.playlistOptions.shuffle, this.externalAdvance = this.playlistOptions.externalAdvance, e.persist) {
       const y = e.persist === !0 ? {} : e.persist;
       this.persistKey = y.key ?? "itube-player", this.persistVolume = y.volume !== !1, this.persistAutoAdvance = y.autoAdvance !== !1;
     }
@@ -1644,7 +1646,12 @@ class Ht {
       const y = typeof l.borderRadius == "number" ? `${l.borderRadius}px` : l.borderRadius;
       this.container.style.setProperty("--imp-radius", y);
     }
-    l?.playButtonStyle === "inverted" && this.container.classList.add("imp-player--play-inverted"), this.video = e.videoElement ?? a("video", "imp-video"), this.video.classList.add("imp-video"), e.playsInline !== !1 && this.video.setAttribute("playsinline", ""), e.crossOrigin !== void 0 && (this.video.crossOrigin = e.crossOrigin), this.video.preload = "metadata", e.loop && (this.video.loop = !0);
+    if (l?.playButtonStyle === "inverted" && this.container.classList.add("imp-player--play-inverted"), this.video = e.videoElement ?? a("video", "imp-video"), this.video.classList.add("imp-video"), e.videoElement && !e.videoElement.paused)
+      try {
+        e.videoElement.pause();
+      } catch {
+      }
+    e.playsInline !== !1 && this.video.setAttribute("playsinline", ""), e.crossOrigin !== void 0 && (this.video.crossOrigin = e.crossOrigin), this.video.preload = "metadata", e.loop && (this.video.loop = !0);
     const h = this.persistVolume ? o : null;
     this.video.volume = x(h?.volume ?? e.volume ?? 1, 0, 1), (h?.muted ?? e.muted) && (this.video.muted = !0);
     const c = a("div", "imp-layer");
@@ -1654,7 +1661,7 @@ class Ht {
       this.clearError(), this.next();
     });
     const f = a("div", "imp-error__actions");
-    f.append(this.retryBtn, this.errorNextBtn), this.errorBox.append(this.errorText, f), this.pauseScreen = new Et(this.labels), this.poster = new Bt(this), this.related = new Mt(this), this.related.setOptions(e.related), this.upNext = new Ct(this), this.controls = new Tt(this), this.playlistPanel = new Pt(this, this.playlistOptions.layout, this.playlistOptions.title || void 0), this.scenesPanel = new At(this, e.scenes?.layout ?? "bottom");
+    f.append(this.retryBtn, this.errorNextBtn), this.errorBox.append(this.errorText, f), this.pauseScreen = new Ct(this.labels), this.poster = new Et(this), this.related = new Mt(this), this.related.setOptions(e.related), this.upNext = new Pt(this), this.controls = new Bt(this), this.playlistPanel = new At(this, this.playlistOptions.layout, this.playlistOptions.title || void 0), this.scenesPanel = new Rt(this, e.scenes?.layout ?? "bottom");
     const p = a("div", "imp-layer__middle");
     p.append(this.spinner, this.errorBox, this.controls.center);
     const m = a("div", "imp-layer__bottom");
@@ -1667,7 +1674,7 @@ class Ht {
       if (!y) return;
       const d = this.lastPlayheadTime || this.video.currentTime;
       Number.isFinite(d) && d > 0 && (this.errorResumeTime = d), this.errorText.textContent = this.labels.videoNotFound, this.errorNextBtn.hidden = !this.hasNext, this.errorBox.hidden = !1, this.spinner.hidden = !0, this.poster.hide(), this.container.classList.add("imp-player--error");
-    }), Rt(), this.bindVideoEvents(), this.bindIdleHide(), e.keyboard !== !1 && this.bindKeyboard(), this.video.addEventListener("pointerup", (y) => {
+    }), Nt(), this.bindVideoEvents(), this.bindIdleHide(), e.keyboard !== !1 && this.bindKeyboard(), this.video.addEventListener("pointerup", (y) => {
       if (!(this.adPlaying || !this.playedOnce)) {
         if (y.pointerType === "mouse") {
           this.togglePlay();
@@ -1727,11 +1734,11 @@ class Ht {
         if (i === "NotSupportedError" && this.video.readyState === 0) {
           const s = this.loadToken;
           this.video.addEventListener("loadedmetadata", () => {
-            s === this.loadToken && this.video.play().catch($);
+            s === this.loadToken && this.video.play().catch(F);
           }, { once: !0, signal: this.abort.signal });
           return;
         }
-        i !== "AbortError" && ($(e), this.playedOnce || this.poster.show());
+        i !== "AbortError" && (F(e), this.playedOnce || this.poster.show());
       }
   }
   pause() {
@@ -1860,7 +1867,7 @@ class Ht {
           this.video.currentTime = i;
         } catch {
         }
-        s && this.video.play().catch($);
+        s && this.video.play().catch(F);
       }
     }, { once: !0, signal: this.abort.signal }), this.emitter.emit("qualitychange", { label: e[t].label ?? String(e[t].quality ?? t) });
   }
@@ -2077,7 +2084,7 @@ class Ht {
   }
   // === teardown =========================================================
   destroy() {
-    this.destroyed || (this.destroyed = !0, this.loadToken++, this.adManager?.destroy(), this.controls.destroy(), this.sourceController?.destroy(), this.abort.abort(), this.idleTimer && clearTimeout(this.idleTimer), this.peekTimer && clearTimeout(this.peekTimer), this.retryTimer && clearTimeout(this.retryTimer), this.persistTimer && (clearTimeout(this.persistTimer), this.persistTimer = null, this.persistState()), this.container.remove(), Nt(), this.emitter.emit("destroy", void 0), this.emitter.removeAll());
+    this.destroyed || (this.destroyed = !0, this.loadToken++, this.adManager?.destroy(), this.controls.destroy(), this.sourceController?.destroy(), this.abort.abort(), this.idleTimer && clearTimeout(this.idleTimer), this.peekTimer && clearTimeout(this.peekTimer), this.retryTimer && clearTimeout(this.retryTimer), this.persistTimer && (clearTimeout(this.persistTimer), this.persistTimer = null, this.persistState()), this.container.remove(), It(), this.emitter.emit("destroy", void 0), this.emitter.removeAll());
   }
   // === internals ========================================================
   async loadItem(t, e, i = !1) {
@@ -2183,7 +2190,7 @@ class Ht {
             e.currentTime = n;
           } catch {
           }
-          o && e.play().catch($);
+          o && e.play().catch(F);
         };
         e.readyState >= 1 ? l() : e.addEventListener("loadedmetadata", l, { once: !0, signal: this.abort.signal });
         return;
@@ -2304,21 +2311,21 @@ class Ht {
 }
 export {
   rt as Emitter,
-  Ht as Player,
+  Zt as Player,
   W as ThumbnailTrack,
   ct as buildHeatmapValues,
   et as chapterAt,
   ot as defaultIcons,
   G as defaultLabels,
-  _ as formatTime,
+  S as formatTime,
   at as getLocale,
   ut as heatmapPath,
   bt as isHlsSource,
   yt as loadChaptersVtt,
   j as normalizeChapters,
-  qt as registerLocale,
-  Vt as registerLocales,
-  Ot as registeredLanguages,
+  Vt as registerLocale,
+  Ot as registerLocales,
+  Ht as registeredLanguages,
   pt as resolveVast
 };
 //# sourceMappingURL=core.js.map