itube-modern-player 0.8.2 → 0.8.3

package/dist/core.js

@@ -55,9 +55,9 @@ function J(r) {
 `).split(/\n\n+/);
   for (const i of e) {
     const s = i.split(`
-`).filter((f) => f.trim() !== "");
+`).filter((v) => v.trim() !== "");
     if (s.length === 0) continue;
-    let n = s.findIndex((f) => f.includes("-->"));
+    let n = s.findIndex((v) => v.includes("-->"));
     if (n === -1) continue;
     const [o, l] = s[n].split("-->"), h = H(o), c = H((l ?? "").split(" ")[1] ?? l ?? "") ?? H(l ?? "");
     if (h === null || c === null) continue;
@@ -203,12 +203,12 @@ function ut(r, t = 1, e = 1e3, i = 100) {
   const s = r.length;
   if (s === 0) return "";
   const n = e / (s - 1 || 1), o = Math.max(0, t) / 6, l = (u) => {
-    const f = Math.min(s - 1, Math.max(0, u));
-    return [f * n, i - r[f] * i];
+    const v = Math.min(s - 1, Math.max(0, u));
+    return [v * n, i - r[v] * i];
   }, [, 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 [v, p] = l(u - 1), [m, f] = l(u), [y, d] = l(u + 1), [k, C] = l(u + 2), A = m + (y - v) * o, O = Math.min(i, Math.max(0, f + (d - p) * o)), P = y - (k - m) * o, R = Math.min(i, Math.max(0, d - (C - f) * 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;
@@ -230,9 +230,9 @@ async function tt(r, t, e, i, s) {
   const n = new AbortController(), o = setTimeout(() => n.abort(), e.requestTimeout);
   let l;
   try {
-    const v = await fetch(t, { signal: n.signal, credentials: "omit" });
-    if (!v.ok) throw new Error(`VAST request failed (${v.status})`);
-    l = await v.text();
+    const f = await fetch(t, { signal: n.signal, credentials: "omit" });
+    if (!f.ok) throw new Error(`VAST request failed (${f.status})`);
+    l = await f.text();
   } finally {
     clearTimeout(o);
   }
@@ -243,15 +243,15 @@ 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"));
-    if (!v) throw new Error("VAST wrapper without VASTAdTagURI");
-    return tt(r, v, e, i + 1, s);
+    const f = S(u.querySelector("VASTAdTagURI"));
+    if (!f) throw new Error("VAST wrapper without VASTAdTagURI");
+    return tt(r, f, e, i + 1, s);
   }
-  const f = c.querySelector(":scope > InLine");
-  if (!f) throw new Error("VAST ad has neither InLine nor Wrapper");
-  const p = f.querySelector("Creatives > Creative > Linear");
+  const v = c.querySelector(":scope > InLine");
+  if (!v) throw new Error("VAST ad has neither InLine nor Wrapper");
+  const p = v.querySelector("Creatives > Creative > Linear");
   if (!p) throw new Error("VAST ad has no Linear creative");
-  const m = ft(p);
+  const m = vt(p);
   if (!m) throw new Error("VAST ad has no playable MediaFile");
   return {
     roll: r.roll,
@@ -259,13 +259,13 @@ async function tt(r, t, e, i, s) {
     mediaType: m.type,
     clickThrough: S(p.querySelector("VideoClicks > ClickThrough")) ?? r.clickUrl,
     duration: D(S(p.querySelector(":scope > Duration"))),
-    skipOffset: vt(
+    skipOffset: ft(
       p.getAttribute("skipoffset"),
       D(S(p.querySelector(":scope > Duration")))
     ),
     impressions: s.impressions,
     tracking: s.tracking,
-    adTitle: S(f.querySelector(":scope > AdTitle")) ?? void 0
+    adTitle: S(v.querySelector(":scope > AdTitle")) ?? void 0
   };
 }
 function mt(r, t) {
@@ -283,7 +283,7 @@ function mt(r, t) {
     n && ((i = t.tracking).click ?? (i.click = [])).push(n);
   }
 }
-function ft(r) {
+function vt(r) {
   const e = [...r.querySelectorAll("MediaFiles > MediaFile")].map((o) => ({
     url: S(o) ?? "",
     type: o.getAttribute("type") ?? void 0,
@@ -304,7 +304,7 @@ function D(r) {
   if (t)
     return (t[1] ? Number(t[1]) * 3600 : 0) + Number(t[2]) * 60 + Number(t[3]) + (t[4] ? Number(t[4].padEnd(3, "0")) / 1e3 : 0);
 }
-function vt(r, t) {
+function ft(r, t) {
   if (!r) return;
   const e = r.trim().match(/^(\d+(?:\.\d+)?)%$/);
   return e ? t !== void 0 ? Number(e[1]) / 100 * t : void 0 : D(r);
@@ -408,13 +408,13 @@ class gt {
       n.src = t.mediaUrl, n.muted = this.host.contentVideo.muted, n.volume = this.host.contentVideo.volume;
       const h = a("div", "imp-spinner imp-ad__spinner"), c = a("div", "imp-ad__hud"), u = a("span", "imp-ad__badge");
       u.textContent = t.adTitle ? `${i.adLabel} · ${t.adTitle}` : i.adLabel;
-      const f = a("span", "imp-ad__countdown");
-      c.append(u, f);
+      const v = a("span", "imp-ad__countdown");
+      c.append(u, v);
       const p = a("div", "imp-ad__actions");
       let m = null;
       t.clickThrough && (m = a("button", "imp-ad__visit", { type: "button" }), m.textContent = i.visitAdvertiser, p.append(m));
-      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 f = a("button", "imp-ad__skip", { type: "button" });
+      f.hidden = !0, p.append(f), 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]));
       };
@@ -445,16 +445,16 @@ class gt {
         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 && (v.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) {
           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);
+          U > 0 ? (f.hidden = !1, f.disabled = !0, f.textContent = `${i.skipAdIn} ${U}`) : (f.hidden = !1, f.disabled = !1, f.textContent = i.skipAd);
         }
       }, { signal: l }), n.addEventListener("ended", () => R(!1), { signal: l }), n.addEventListener("error", () => {
         this.host.emitter.emit("aderror", {
           roll: { roll: t.roll },
           error: new Error("Ad media failed to play")
         }), P();
-      }, { signal: l }), v.addEventListener("click", () => R(!0));
+      }, { signal: l }), f.addEventListener("click", () => R(!0));
       const z = () => {
         t.clickThrough && (k("click"), this.host.emitter.emit("adclick", { ad: t }), window.open(t.clickThrough, "_blank", "noopener"), n.pause());
       };
@@ -555,8 +555,8 @@ function xt(r, t, e, i) {
       label: c.height ? `${c.height}p` : `${Math.round(c.bitrate / 1e3)} kbps`
     })).reverse(), i.onLevels(n.levels);
   }), s.on(r.Events.LEVEL_SWITCHED, (c, u) => {
-    const f = s.levels[u.level];
-    f && i.onLevelSwitch(f.height ? `${f.height}p` : `${Math.round(f.bitrate / 1e3)} kbps`);
+    const v = s.levels[u.level];
+    v && i.onLevelSwitch(v.height ? `${v.height}p` : `${Math.round(v.bitrate / 1e3)} kbps`);
   });
   let o = 0, l = 0, h = !1;
   return s.on(r.Events.FRAG_BUFFERED, () => {
@@ -813,8 +813,8 @@ class Tt {
     this.rightGroup = l;
     const h = a("div", "imp-controls__spacer");
     this.chapterLabel = a("div", "imp-controls__chapter"), n.append(o, h, l), h.append(this.chapterLabel);
-    const c = typeof s.seekButtons == "object" ? s.seekButtons : {}, u = c.back ?? t.seekStep, f = c.forward ?? t.seekStep;
-    if (this.seekLabelFn = c.label, s.playlist && t.hasPlaylist && !s.hidePrev && (this.prevBtn = b("imp-btn--prev", e.previous, i.previous), this.prevBtn.addEventListener("click", () => t.previous()), o.append(this.prevBtn)), s.seekButtons && (this.seekBackBtn = b("imp-btn--seek-back", `${e.seekBack} ${u}s`, i.seekBack), this.addStepBadge(this.seekBackBtn, u, "back"), this.seekBackBtn.addEventListener("click", () => t.skip(-u)), o.append(this.seekBackBtn)), s.play && (this.playBtn = b("imp-btn--play", e.play, i.play), this.playBtn.addEventListener("click", () => t.togglePlay()), o.append(this.playBtn)), s.seekButtons && (this.seekFwdBtn = b("imp-btn--seek-forward", `${e.seekForward} ${f}s`, i.seekForward), this.addStepBadge(this.seekFwdBtn, f, "forward"), this.seekFwdBtn.addEventListener("click", () => t.skip(f)), o.append(this.seekFwdBtn)), s.playlist && t.hasPlaylist && !s.hideNext && (this.nextBtn = b("imp-btn--next", e.next, i.next), this.nextBtn.addEventListener("click", () => t.next()), o.append(this.nextBtn)), s.volume) {
+    const c = typeof s.seekButtons == "object" ? s.seekButtons : {}, u = c.back ?? t.seekStep, v = c.forward ?? t.seekStep;
+    if (this.seekLabelFn = c.label, s.playlist && t.hasPlaylist && !s.hidePrev && (this.prevBtn = b("imp-btn--prev", e.previous, i.previous), this.prevBtn.addEventListener("click", () => t.previous()), o.append(this.prevBtn)), s.seekButtons && (this.seekBackBtn = b("imp-btn--seek-back", `${e.seekBack} ${u}s`, i.seekBack), this.addStepBadge(this.seekBackBtn, u, "back"), this.seekBackBtn.addEventListener("click", () => t.skip(-u)), o.append(this.seekBackBtn)), s.play && (this.playBtn = b("imp-btn--play", e.play, i.play), this.playBtn.addEventListener("click", () => t.togglePlay()), o.append(this.playBtn)), s.seekButtons && (this.seekFwdBtn = b("imp-btn--seek-forward", `${e.seekForward} ${v}s`, i.seekForward), this.addStepBadge(this.seekFwdBtn, v, "forward"), this.seekFwdBtn.addEventListener("click", () => t.skip(v)), o.append(this.seekFwdBtn)), s.playlist && t.hasPlaylist && !s.hideNext && (this.nextBtn = b("imp-btn--next", e.next, i.next), this.nextBtn.addEventListener("click", () => t.next()), o.append(this.nextBtn)), s.volume) {
       const d = a("div", "imp-volume");
       this.muteBtn = b("imp-btn--mute", e.mute, i.volumeHigh), this.muteBtn.addEventListener("click", () => t.toggleMute()), this.volumeSlider = a("input", "imp-volume__slider", {
         type: "range",
@@ -837,8 +837,8 @@ class Tt {
         section: () => this.simpleSection(`custom:${d.id}`, d.title, d.icon ?? i.more, () => t.emit("customaction", { id: d.id }))
       });
     }
-    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") {
+    const p = (d) => d === !1 ? "off" : d === "bar" ? "bar" : "gear", m = p(s.subtitles), f = p(s.quality), y = p(s.speed);
+    if (this.gear = { speed: y === "gear", quality: f === "gear", subtitles: m === "gear" }, m === "bar") {
       this.subtitlesBtn = b("imp-btn--subtitles", e.subtitles, i.subtitles), this.subtitlesMenu = new M(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({
@@ -849,7 +849,7 @@ class Tt {
         section: () => this.subtitlesSection()
       });
     }
-    if (v === "bar") {
+    if (f === "bar") {
       this.qualityBtn = b("imp-btn--quality", e.quality, i.settings), this.qualityMenu = new M(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({
@@ -937,7 +937,7 @@ class Tt {
         el: d,
         priority: 82,
         available: () => Number.isFinite(t.duration) && t.duration > 0,
-        section: () => this.simpleSection("seekFwd", `${e.seekForward} ${f}s`, i.seekForward, () => t.skip(f))
+        section: () => this.simpleSection("seekFwd", `${e.seekForward} ${v}s`, i.seekForward, () => t.skip(v))
       });
     }
     if (this.center = a("div", "imp-center-controls"), s.playlist && t.hasPlaylist && (this.centerPrevBtn = this.makeCenterButton("prev", e.previous, i.previous), this.centerPrevBtn.addEventListener("click", () => t.previous()), this.center.append(this.centerPrevBtn)), s.seekButtons) {
@@ -945,8 +945,8 @@ class Tt {
       this.addStepBadge(d, u, "back"), d.addEventListener("click", () => t.skip(-u)), this.center.append(d);
     }
     if (s.play && (this.centerPlayBtn = this.makeCenterButton("play", e.play, i.play), this.centerPlayBtn.addEventListener("click", () => t.togglePlay()), this.center.append(this.centerPlayBtn)), s.seekButtons) {
-      const d = this.makeCenterButton("seek-forward", `${e.seekForward} ${f}s`, i.seekForward);
-      this.addStepBadge(d, f, "forward"), d.addEventListener("click", () => t.skip(f)), this.center.append(d);
+      const d = this.makeCenterButton("seek-forward", `${e.seekForward} ${v}s`, i.seekForward);
+      this.addStepBadge(d, v, "forward"), d.addEventListener("click", () => t.skip(v)), 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);
@@ -1088,10 +1088,10 @@ class Tt {
     n.textContent = this.player.labels.next, e.append(n);
     const o = q(s.poster);
     if (i.thumbnail && o) {
-      const m = a("div", "imp-next-preview__thumb"), v = T(o);
-      if (v.addEventListener("error", () => {
+      const m = a("div", "imp-next-preview__thumb"), f = T(o);
+      if (f.addEventListener("error", () => {
         this.player.markSourceDead(s), this.nextPreviewEl && !this.nextPreviewEl.hidden && this.showNextPreview(t);
-      }, { once: !0 }), m.append(v), i.duration && s.duration) {
+      }, { once: !0 }), m.append(f), i.duration && s.duration) {
         const y = a("span", "imp-next-preview__duration");
         y.textContent = _(s.duration), m.append(y);
       }
@@ -1102,7 +1102,7 @@ class Tt {
       m.textContent = s.title, e.append(m);
     }
     i.meta && s.previewMeta?.length && e.append(X(s.previewMeta, "imp-next-preview")), e.hidden = !1;
-    const l = this.player.container.getBoundingClientRect(), h = t.getBoundingClientRect(), c = 8, u = e.offsetWidth, f = h.left - l.left + h.width / 2 - u / 2, p = Math.max(c, Math.min(f, l.width - u - c));
+    const l = this.player.container.getBoundingClientRect(), h = t.getBoundingClientRect(), c = 8, u = e.offsetWidth, v = h.left - l.left + h.width / 2 - u / 2, p = Math.max(c, Math.min(v, l.width - u - c));
     e.style.left = `${p}px`, e.style.bottom = `${l.height - (h.top - l.top) + 10}px`;
   }
   hideNextPreview() {
@@ -1644,7 +1644,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");
@@ -1653,16 +1658,16 @@ class Ht {
     u.textContent = this.labels.tryAgain, this.retryBtn.append(u, a("span", "imp-error__retry-spinner")), this.retryBtn.addEventListener("click", () => this.retry()), this.errorNextBtn = a("button", "imp-error__next", { type: "button" }), this.errorNextBtn.textContent = this.labels.nextVideo, this.errorNextBtn.addEventListener("click", () => {
       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");
+    const v = a("div", "imp-error__actions");
+    v.append(this.retryBtn, this.errorNextBtn), this.errorBox.append(this.errorText, v), 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");
     const p = a("div", "imp-layer__middle");
     p.append(this.spinner, this.errorBox, this.controls.center);
     const m = a("div", "imp-layer__bottom");
     m.append(this.controls.root), c.append(this.pauseScreen.root, this.related.root, this.upNext.root, p, m), this.container.append(this.video, c, this.poster.root, this.playlistPanel.root, this.scenesPanel.root), this.mount.append(this.container), e.pauseScreen instanceof HTMLElement ? this.pauseScreen.setCustomContent(e.pauseScreen) : typeof e.pauseScreen == "function" ? this.pauseScreen.setCustomContent(e.pauseScreen(this)) : e.pauseScreen && typeof e.pauseScreen == "object" && this.pauseScreen.setVisibility(e.pauseScreen);
-    const v = e.adConfig ?? e.ads;
-    v && v.adList.length > 0 && (this.adManager = new gt(
+    const f = e.adConfig ?? e.ads;
+    f && f.adList.length > 0 && (this.adManager = new gt(
       { container: this.container, contentVideo: this.video, emitter: this.emitter, labels: this.labels, closeIcon: this.icons.close },
-      v
+      f
     )), this.emitter.on("error", ({ fatal: y }) => {
       if (!y) return;
       const d = this.lastPlayheadTime || this.video.currentTime;
@@ -2120,15 +2125,15 @@ class Ht {
       }, { once: !0, signal: this.abort.signal });
     else if (n.chapters) {
       const p = (m) => {
-        const v = () => {
+        const f = () => {
           s === this.loadToken && (this.chapters = j(m, this.knownDuration), this.controls.progress.setChapters(this.chapters), this.controls.syncFeatureButtons(), this.scenesPanel.visible && this.scenesPanel.rebuild());
         };
-        Number.isFinite(this.video.duration) && this.video.duration > 0 ? v() : this.video.addEventListener("loadedmetadata", v, { once: !0, signal: this.abort.signal });
+        Number.isFinite(this.video.duration) && this.video.duration > 0 ? f() : this.video.addEventListener("loadedmetadata", f, { once: !0, signal: this.abort.signal });
       };
       typeof n.chapters == "string" ? yt(n.chapters).then((m) => p(m)).catch((m) => this.emitter.emit("error", { message: "Failed to load chapters track", cause: m })) : p(n.chapters);
     }
-    const c = n.heatmap, u = c && !Array.isArray(c), f = u ? c.values.length > 0 : !!(c && c.length > 0);
-    if (c && f && this.controlsOptions.heatmap) {
+    const c = n.heatmap, u = c && !Array.isArray(c), v = u ? c.values.length > 0 : !!(c && c.length > 0);
+    if (c && v && this.controlsOptions.heatmap) {
       const p = () => {
         if (s !== this.loadToken) return;
         const m = u ? dt(c.values, c.mode) : ct(c, this.video.duration);