@vonage/vivid 5.15.1 → 5.17.0

package/audio-player/index.js

@@ -1,336 +1,268 @@
-import { B as b, b as f } from "../bundled/definition3.js";
-import { S as k, s as g } from "../bundled/definition5.js";
-import { M as v, m as B } from "../bundled/definition6.js";
-import { V as $, O as l, a as n, h as c, c as w, d as A } from "../bundled/vivid-element.js";
-import { M as L, m as T } from "../bundled/definition7.js";
-import { M as u } from "../bundled/enums.js";
-import { L as S } from "../bundled/localized.js";
-import { g as R } from "../bundled/playbackRates.js";
-import { w as p } from "../bundled/when.js";
-import { r as C } from "../bundled/repeat.js";
-import { c as F } from "../bundled/class-names.js";
-const P = ':host{display:block}.wrapper{container-type:inline-size}.base{display:inline-flex;box-sizing:border-box;align-items:center;padding:8px;color:var(--vvd-color-canvas-text);gap:8px;inline-size:100%;user-select:none}.base.disabled{color:var(--vvd-color-neutral-300)}.base .slider{flex:1;grid-area:slider}.base .controls{display:flex;align-items:center;justify-content:center;gap:8px;grid-area:controls}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{margin-inline:6px;min-inline-size:32px}.base .playback-button{grid-area:playback}@container (max-width: 500px){.base.two-lines{display:inline-grid;grid-template:auto auto/1fr;grid-template-areas:"slider" "controls";inline-size:100%;row-gap:4px}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-areas:"slider slider" "controls playback";grid-template-columns:1fr auto}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}';
-var E = Object.defineProperty, o = (a, e, t, r) => {
-  for (var i = void 0, d = a.length - 1, h; d >= 0; d--)
-    (h = a[d]) && (i = h(e, t, i) || i);
-  return i && E(e, t, i), i;
+import { t as e } from "../bundled/localized.js";
+import { d as t, l as n, o as r, s as i, t as a, w as o } from "../bundled/vivid-element.js";
+import { n as s } from "../bundled/repeat.js";
+import { t as c } from "../bundled/when.js";
+import { r as l } from "../bundled/enums.js";
+import "../bundled/definition2.js";
+import { t as u } from "../bundled/decorate.js";
+import { t as d } from "../bundled/playbackRates.js";
+import { t as f } from "../bundled/class-names.js";
+import { n as p, r as m } from "../bundled/definition3.js";
+import { i as h, t as g } from "../bundled/definition6.js";
+import { i as _, t as v } from "../bundled/definition20.js";
+import { r as y, t as b } from "../bundled/definition21.js";
+//#region src/lib/audio-player/audio-player.scss?inline
+var x = ":host{display:block}.wrapper{container-type:inline-size}.base{box-sizing:border-box;color:var(--vvd-color-canvas-text);user-select:none;align-items:center;gap:8px;inline-size:100%;padding:8px;display:inline-flex}.base.disabled{color:var(--vvd-color-neutral-300)}.base .slider{flex:1;grid-area:slider}.base .controls{grid-area:controls;justify-content:center;align-items:center;gap:8px;display:flex}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{min-inline-size:32px;margin-inline:6px}.base .playback-button{grid-area:playback}@container (width<=500px){.base.two-lines{grid-template:\"slider\"\"controls\"/1fr;row-gap:4px;inline-size:100%;display:inline-grid}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-columns:1fr auto;grid-template-areas:\"slider slider\"\"controls playback\"}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}", S = {
+	FORWARD: 1,
+	BACKWARD: -1
 };
-const y = {
-  FORWARD: 1,
-  BACKWARD: -1
-};
-function m(a) {
-  if (!a || Number.isNaN(a))
-    return "0:00";
-  const e = Math.floor(a / 60), t = Math.floor(a % 60);
-  return e + ":" + (t < 10 ? "0" + t : t);
+function C(e) {
+	if (!e || Number.isNaN(e)) return "0:00";
+	let t = Math.floor(e / 60), n = Math.floor(e % 60);
+	return t + ":" + (n < 10 ? "0" + n : n);
 }
-const D = !0, I = !1, z = {
-  toView(a) {
-    return a;
-  },
-  fromView(a) {
-    return Object.values(u).includes(a) ? a : void 0;
-  }
+var w = !0, T = !1, E = {
+	toView(e) {
+		return e;
+	},
+	fromView(e) {
+		return Object.values(l).includes(e) ? e : void 0;
+	}
+}, D = class extends e(a) {
+	srcChanged() {
+		this.src === void 0 ? this.setSrc("") : this.setSrc(this.src);
+	}
+	revokeSrc() {
+		let e = this.getCurrentSrc();
+		e && e.startsWith("blob:") && URL.revokeObjectURL(e);
+	}
+	getCurrentSrc() {
+		return this.#i.currentSrc || this.#i.src || "";
+	}
+	canPlayType(e) {
+		return this.#i.canPlayType(e) !== "";
+	}
+	setSrc(e, t) {
+		let n = this.getCurrentSrc();
+		this.revokeSrc(), this.#e = void 0, this.#t &&= (this.#t.abort(), void 0);
+		let r = t && (this.canPlayType(t.type) || !e) ? URL.createObjectURL(t) : e;
+		if (n && this.#i.removeAttribute("src"), r || e) try {
+			this.#i.src = r;
+		} catch (t) {
+			console.log("Falling back to original URL due to error:", t), this.#i.src = e;
+		}
+	}
+	get playbackRate() {
+		return o.track(this, "playbackRate"), this.#i.playbackRate;
+	}
+	set playbackRate(e) {
+		this.#i.playbackRate = e, o.notify(this, "playbackRate");
+	}
+	get paused() {
+		return o.track(this, "paused"), this.#i.paused;
+	}
+	set paused(e) {}
+	#e;
+	#t;
+	async #n() {
+		if (this.#e || !this.src) return;
+		this.#t = new AbortController();
+		let e = this.#t.signal;
+		try {
+			let t = await (await fetch(this.src, { signal: e })).blob();
+			this.setSrc(this.src, t);
+			let n = await t.arrayBuffer(), r = new window.AudioContext(), i = await r.decodeAudioData(n);
+			r.close(), this.#e = i, o.notify(this, "duration");
+		} catch (e) {
+			/* v8 ignore else -- @preserve */
+			e instanceof Error && e.name !== "AbortError" && console.error("Error loading audio:", e);
+		} finally {
+			this.#t = void 0;
+		}
+	}
+	get duration() {
+		o.track(this, "duration");
+		let e = this.#i.duration;
+		return Number.isFinite(e) && e > 0 ? e : this.#e && this.#e.duration > 0 ? this.#e.duration : e;
+	}
+	set duration(e) {}
+	get currentTime() {
+		return o.track(this, "currentTime"), this.#i.currentTime;
+	}
+	set currentTime(e) {
+		this.#i.currentTime = e;
+	}
+	get #r() {
+		return this.shadowRoot.querySelector(".slider");
+	}
+	#i = new Audio();
+	#a = !1;
+	constructor() {
+		super(), this.playButtonAriaLabel = null, this.pauseButtonAriaLabel = null, this.sliderAriaLabel = null, this.skipForwardButtonAriaLabel = null, this.skipBackwardButtonAriaLabel = null, this.disabled = !1, this.notime = !1, this.playbackRates = null, this.durationFallback = !1;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.#i.addEventListener("timeupdate", this.#u), this.#i.addEventListener("loadedmetadata", this.#d), this.#i.addEventListener("durationchange", this.#d), this.#i.addEventListener("play", this.#o), this.#i.addEventListener("pause", this.#s), this.#c(), this.#m(), this.#u();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#c(!1), this.pause(), this.#i.removeEventListener("timeupdate", this.#u), this.#i.removeEventListener("loadedmetadata", this.#d), this.#i.removeEventListener("durationchange", this.#d), this.#i.removeEventListener("play", this.#o), this.#i.removeEventListener("pause", this.#s);
+	}
+	play() {
+		this.#l(T);
+	}
+	pause() {
+		this.#l(w);
+	}
+	#o = () => {
+		this.#r?.isDragging || this.$emit("play", void 0, { bubbles: !1 });
+	};
+	#s = () => {
+		this.#r?.isDragging || this.$emit("pause", void 0, { bubbles: !1 });
+	};
+	#c(e = !0) {
+		let t = e ? "addEventListener" : "removeEventListener";
+		/* v8 ignore else -- @preserve */
+		this.#r && this.#r[t]("change", this.#p);
+	}
+	#l = (e) => {
+		if (e === this.paused) {
+			this.#m();
+			return;
+		}
+		this.paused ? (this.#u(), this.#i.play()) : this.#i.pause(), this.#m();
+	};
+	#u = () => {
+		o.notify(this, "currentTime");
+		let e = this.duration, t = this.currentTime, n = Number.isFinite(e) && e > 0 && Number.isFinite(t) && t >= 0, r = n ? t / e * 100 : 0;
+		this.#r && (this.#a = !0, this.#r.value = r.toString(), this.#a = !1), n && r === 100 && this.pause();
+	};
+	#d = () => {
+		o.notify(this, "duration"), (!Number.isFinite(this.#i.duration) || this.#i.duration <= 0) && this.durationFallback && this.#n();
+	};
+	#f;
+	#p = () => {
+		!this.paused && this.#r.isDragging && (this.pause(), this.#f = window.setInterval(() => {
+			(!this.#r.isDragging || !this.isConnected) && (clearInterval(this.#f), this.isConnected && this.play());
+		}, 0)), !this.#a && this.#i && (this.currentTime = this.duration * Number(this.#r.value) / 100);
+	};
+	#m = () => {
+		o.notify(this, "paused");
+	};
+	skip(e) {
+		let t = this.currentTime + parseInt(this.skipBy) * e;
+		this.currentTime = Math.max(0, Math.min(this.duration, t));
+	}
 };
-class s extends S($) {
-  constructor() {
-    super(), this.playButtonAriaLabel = null, this.pauseButtonAriaLabel = null, this.sliderAriaLabel = null, this.skipForwardButtonAriaLabel = null, this.skipBackwardButtonAriaLabel = null, this.disabled = !1, this.notime = !1, this.playbackRates = null, this.#t = new Audio(), this.#n = !1, this.durationFallback = !1, this.#l = (e) => {
-      if (e === this.paused) {
-        this.#o();
-        return;
-      }
-      this.paused ? (this.#r(), this.#t.play()) : this.#t.pause(), this.#o();
-    }, this.#r = () => {
-      l.notify(this, "currentTime");
-      const e = this.duration, t = this.currentTime, r = Number.isFinite(e) && e > 0 && Number.isFinite(t) && t >= 0, i = r ? t / e * 100 : 0;
-      this.#e && (this.#n = !0, this.#e.value = i.toString(), this.#n = !1), r && i === 100 && this.pause();
-    }, this.#s = () => {
-      l.notify(this, "duration"), (!Number.isFinite(this.#t.duration) || this.#t.duration <= 0) && this.durationFallback && this.#p();
-    }, this.#u = () => {
-      !this.paused && this.#e.isDragging && (this.pause(), this.#d = window.setInterval(() => {
-        this.#e.isDragging || (clearInterval(this.#d), this.play());
-      }, 0)), !this.#n && this.#t && (this.currentTime = this.duration * Number(this.#e.value) / 100);
-    }, this.#o = () => {
-      l.notify(this, "paused");
-    };
-  }
-  srcChanged() {
-    this.src === void 0 ? this.setSrc("") : this.setSrc(this.src);
-  }
-  revokeSrc() {
-    const e = this.getCurrentSrc();
-    e && e.startsWith("blob:") && URL.revokeObjectURL(e);
-  }
-  getCurrentSrc() {
-    return this.#t.currentSrc || this.#t.src || "";
-  }
-  canPlayType(e) {
-    return this.#t.canPlayType(e) !== "";
-  }
-  setSrc(e, t) {
-    const r = this.getCurrentSrc();
-    this.revokeSrc(), this.#a = void 0, this.#i && (this.#i.abort(), this.#i = void 0);
-    const i = t && (this.canPlayType(t.type) || !e) ? URL.createObjectURL(t) : e;
-    if (r && this.#t.removeAttribute("src"), i || e)
-      try {
-        this.#t.src = i;
-      } catch (d) {
-        console.log("Falling back to original URL due to error:", d), this.#t.src = e;
-      }
-  }
-  get playbackRate() {
-    return l.track(this, "playbackRate"), this.#t.playbackRate;
-  }
-  set playbackRate(e) {
-    this.#t.playbackRate = e, l.notify(this, "playbackRate");
-  }
-  get paused() {
-    return l.track(this, "paused"), this.#t.paused;
-  }
-  set paused(e) {
-  }
-  #a;
-  #i;
-  async #p() {
-    if (this.#a || !this.src) return;
-    this.#i = new AbortController();
-    const e = this.#i.signal;
-    try {
-      const r = await (await fetch(this.src, { signal: e })).blob();
-      this.setSrc(this.src, r);
-      const i = await r.arrayBuffer(), d = new window.AudioContext(), h = await d.decodeAudioData(i);
-      d.close(), this.#a = h, l.notify(this, "duration");
-    } catch (t) {
-      t instanceof Error && t.name !== "AbortError" && console.error("Error loading audio:", t);
-    } finally {
-      this.#i = void 0;
-    }
-  }
-  get duration() {
-    l.track(this, "duration");
-    const e = this.#t.duration;
-    return Number.isFinite(e) && e > 0 ? e : this.#a && this.#a.duration > 0 ? this.#a.duration : e;
-  }
-  set duration(e) {
-  }
-  get currentTime() {
-    return l.track(this, "currentTime"), this.#t.currentTime;
-  }
-  set currentTime(e) {
-    this.#t.currentTime = e;
-  }
-  get #e() {
-    return this.shadowRoot.querySelector(".slider");
-  }
-  #t;
-  #n;
-  connectedCallback() {
-    super.connectedCallback(), this.#t.addEventListener("timeupdate", this.#r), this.#t.addEventListener("loadedmetadata", this.#s), this.#t.addEventListener("durationchange", this.#s), this.#c(), this.#o(), this.#r();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.#c(!1), this.pause(), this.#t.removeEventListener("timeupdate", this.#r), this.#t.removeEventListener("loadedmetadata", this.#s), this.#t.removeEventListener("durationchange", this.#s);
-  }
-  play() {
-    this.#l(I);
-  }
-  pause() {
-    this.#l(D);
-  }
-  #c(e = !0) {
-    const t = e ? "addEventListener" : "removeEventListener";
-    this.#e && this.#e[t]("change", this.#u);
-  }
-  #l;
-  #r;
-  #s;
-  #d;
-  #u;
-  #o;
-  /**
-   * Skips the current time by the skipBy value
-   *
-   * @param skipDirection - the direction to skip
-   *
-   * @internal
-   */
-  skip(e) {
-    const t = this.currentTime, r = parseInt(this.skipBy) * e, i = t + r;
-    this.currentTime = Math.max(0, Math.min(this.duration, i));
-  }
-}
-o([
-  n({ attribute: "play-button-aria-label" })
-], s.prototype, "playButtonAriaLabel");
-o([
-  n({ attribute: "pause-button-aria-label" })
-], s.prototype, "pauseButtonAriaLabel");
-o([
-  n({ attribute: "slider-aria-label" })
-], s.prototype, "sliderAriaLabel");
-o([
-  n({ attribute: "skip-forward-aria-label" })
-], s.prototype, "skipForwardButtonAriaLabel");
-o([
-  n({ attribute: "skip-backward-aria-label" })
-], s.prototype, "skipBackwardButtonAriaLabel");
-o([
-  n
-], s.prototype, "connotation");
-o([
-  n
-], s.prototype, "src");
-o([
-  n({ mode: "boolean" })
-], s.prototype, "disabled");
-o([
-  n({ mode: "boolean" })
-], s.prototype, "notime");
-o([
-  n({
-    attribute: "skip-by",
-    converter: z
-  })
-], s.prototype, "skipBy");
-o([
-  n({ attribute: "playback-rates" })
-], s.prototype, "playbackRates");
-o([
-  n({ mode: "boolean", attribute: "duration-fallback" })
-], s.prototype, "durationFallback");
-const M = ({
-  notime: a,
-  disabled: e,
-  duration: t,
-  skipBy: r,
-  playbackRates: i
-}) => F(
-  ["disabled", !!e || !t],
-  [
-    "two-lines",
-    !a && (!!Number(r) || !!i)
-  ],
-  ["playback", !!i]
-), N = (a, { parent: e }) => a === e.playbackRate;
-function O(a) {
-  const e = a.tagFor(b);
-  return c`<${e} class="pause" @click="${(t) => t.paused ? t.play() : t.pause()}"
-	icon="${(t) => t.paused ? "play-solid" : "pause-solid"}"
-	aria-label="${(t) => t.paused ? t.playButtonAriaLabel || t.locale.audioPlayer.playButtonLabel : t.pauseButtonAriaLabel || t.locale.audioPlayer.pauseButtonLabel}"
+u([n({ attribute: "play-button-aria-label" })], D.prototype, "playButtonAriaLabel", void 0), u([n({ attribute: "pause-button-aria-label" })], D.prototype, "pauseButtonAriaLabel", void 0), u([n({ attribute: "slider-aria-label" })], D.prototype, "sliderAriaLabel", void 0), u([n({ attribute: "skip-forward-aria-label" })], D.prototype, "skipForwardButtonAriaLabel", void 0), u([n({ attribute: "skip-backward-aria-label" })], D.prototype, "skipBackwardButtonAriaLabel", void 0), u([n], D.prototype, "connotation", void 0), u([n], D.prototype, "src", void 0), u([n({ mode: "boolean" })], D.prototype, "disabled", void 0), u([n({ mode: "boolean" })], D.prototype, "notime", void 0), u([n({
+	attribute: "skip-by",
+	converter: E
+})], D.prototype, "skipBy", void 0), u([n({ attribute: "playback-rates" })], D.prototype, "playbackRates", void 0), u([n({
+	mode: "boolean",
+	attribute: "duration-fallback"
+})], D.prototype, "durationFallback", void 0);
+//#endregion
+//#region src/lib/audio-player/audio-player.template.ts
+var O = ({ notime: e, disabled: t, duration: n, skipBy: r, playbackRates: i }) => f(["disabled", !!t || !n], ["two-lines", !e && (!!Number(r) || !!i)], ["playback", !!i]), k = (e, { parent: t }) => e === t.playbackRate;
+function A(e) {
+	let n = e.tagFor(h);
+	return t`<${n} class="pause" @click="${(e) => e.paused ? e.play() : e.pause()}"
+	icon="${(e) => e.paused ? "play-solid" : "pause-solid"}"
+	aria-label="${(e) => e.paused ? e.playButtonAriaLabel || e.locale.audioPlayer.playButtonLabel : e.pauseButtonAriaLabel || e.locale.audioPlayer.pauseButtonLabel}"
 	size='condensed'
-	connotation="${(t) => t.connotation}"
-	?disabled="${(t) => t.disabled || !t.duration}"
-  ></${e}>`;
+	connotation="${(e) => e.connotation}"
+	?disabled="${(e) => e.disabled || !e.duration}"
+  ></${n}>`;
 }
-function U(a) {
-  const e = a.tagFor(b);
-  return c`
-		<${e} class="skip backward"
-			@click="${(t) => t.skip(y.BACKWARD)}"
-		icon="${(t) => t.skipBy == u.Five ? "5-sec-backward-line" : t.skipBy == u.Thirty ? "30-sec-backward-line" : "10-sec-backward-line"}"
+function j(e) {
+	let n = e.tagFor(h);
+	return t`
+		<${n} class="skip backward"
+			@click="${(e) => e.skip(S.BACKWARD)}"
+		icon="${(e) => e.skipBy == l.Five ? "5-sec-backward-line" : e.skipBy == l.Thirty ? "30-sec-backward-line" : "10-sec-backward-line"}"
 		size='condensed'
-		aria-label="${(t) => t.skipBackwardButtonAriaLabel || t.locale.audioPlayer.skipBackwardButton}"
-		connotation="${(t) => t.connotation}"
-		?disabled="${(t) => t.disabled || !t.duration}"
-		></${e}>
+		aria-label="${(e) => e.skipBackwardButtonAriaLabel || e.locale.audioPlayer.skipBackwardButton}"
+		connotation="${(e) => e.connotation}"
+		?disabled="${(e) => e.disabled || !e.duration}"
+		></${n}>
 	`;
 }
-function V(a) {
-  const e = a.tagFor(b);
-  return c`
-		<${e} class="skip forward"
-		@click="${(t) => t.skip(y.FORWARD)}"
-		icon="${(t) => t.skipBy == u.Five ? "5-sec-forward-line" : t.skipBy == u.Thirty ? "30-sec-forward-line" : "10-sec-forward-line"}"
+function M(e) {
+	let n = e.tagFor(h);
+	return t`
+		<${n} class="skip forward"
+		@click="${(e) => e.skip(S.FORWARD)}"
+		icon="${(e) => e.skipBy == l.Five ? "5-sec-forward-line" : e.skipBy == l.Thirty ? "30-sec-forward-line" : "10-sec-forward-line"}"
 		size='condensed'
-		aria-label="${(t) => t.skipForwardButtonAriaLabel || t.locale.audioPlayer.skipForwardButton}"
-		connotation="${(t) => t.connotation}"
-		?disabled="${(t) => t.disabled || !t.duration}"
-		></${e}>
+		aria-label="${(e) => e.skipForwardButtonAriaLabel || e.locale.audioPlayer.skipForwardButton}"
+		connotation="${(e) => e.connotation}"
+		?disabled="${(e) => e.disabled || !e.duration}"
+		></${n}>
 	`;
 }
-function _(a) {
-  const e = a.tagFor(k);
-  return c`
-	<${e}
+function N(e) {
+	let n = e.tagFor(m);
+	return t`
+	<${n}
 		class="slider"
-		aria-label="${(t) => t.sliderAriaLabel || t.locale.audioPlayer.sliderLabel}"
+		aria-label="${(e) => e.sliderAriaLabel || e.locale.audioPlayer.sliderLabel}"
 		max="100"
-		aria-valuetext="${(t) => m(t.currentTime)}"
-		connotation="${(t) => t.connotation}"
-		?disabled="${(t) => t.disabled || !t.duration}"
+		aria-valuetext="${(e) => C(e.currentTime)}"
+		connotation="${(e) => e.connotation}"
+		?disabled="${(e) => e.disabled || !e.duration}"
 		internal-part>
-	</${e}>`;
+	</${n}>`;
 }
-function j() {
-  return c` <div class="time-stamp">
+function P() {
+	return t` <div class="time-stamp">
 		<span class="current-time"
-			>${(a) => m(a.currentTime || 0)}</span
+			>${(e) => C(e.currentTime || 0)}</span
 		>
-		${p(
-    (a) => a.duration && a.duration !== 1 / 0,
-    c`
+		${c((e) => e.duration && e.duration !== Infinity, t`
 				<span>/</span>
-				<span class="total-time">${(a) => m(a?.duration)}</span>
-			`
-  )}
+				<span class="total-time">${(e) => C(e?.duration)}</span>
+			`)}
 	</div>`;
 }
-function W(a, e) {
-  return e.parent.playbackRate = a, !0;
+function F(e, t) {
+	return t.parent.playbackRate = e, !0;
 }
-const K = (a) => {
-  const e = a.tagFor(v), t = a.tagFor(b), r = a.tagFor(L);
-  return c` <div class="wrapper">
-		<div class="base ${M}">
+//#endregion
+//#region src/lib/audio-player/index.ts
+i(r("audio-player", D, (e) => {
+	let n = e.tagFor(y), r = e.tagFor(h), i = e.tagFor(_);
+	return t` <div class="wrapper">
+		<div class="base ${O}">
 			<div class="controls">
-				${p(
-    (i) => i.skipBy && i.skipBy != u.Zero,
-    U(a)
-  )}
-				${O(a)}
-				${p(
-    (i) => i.skipBy && i.skipBy != u.Zero,
-    V(a)
-  )}
-				${p((i) => !i.notime, j())}
+				${c((e) => e.skipBy && e.skipBy != l.Zero, j(e))}
+				${A(e)}
+				${c((e) => e.skipBy && e.skipBy != l.Zero, M(e))}
+				${c((e) => !e.notime, P())}
 			</div>
-			${_(a)}
-			${p(
-    (i) => !!i.playbackRates,
-    c`
-			<${e} class="playback-rates" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
-				<${t} id="playback-open-button"
+			${N(e)}
+			${c((e) => !!e.playbackRates, t`
+			<${n} class="playback-rates" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
+				<${r} id="playback-open-button"
 							  class="playback-button"
 							  slot="anchor"
 							  icon="playback-speed-line"
 							  aria-label="play back rates"
 							  size='condensed'
-							  connotation="${(i) => i.connotation}"
-							  ?disabled="${(i) => i.disabled || !i.duration}"
-				></${t}>
+							  connotation="${(e) => e.connotation}"
+							  ?disabled="${(e) => e.disabled || !e.duration}"
+				></${r}>
 
-				${C(
-      (i) => R(i.playbackRates),
-      c`<${r} @click="${W}"
+				${s((e) => d(e.playbackRates), t`<${i} @click="${F}"
 																			 control-type="radio"
 																			 class="playback-rate"
-																			 text="${(i) => i}"
+																			 text="${(e) => e}"
 																			 check-appearance="tick-only"
-																			 ?checked="${N}"></${r}>`
-    )}
-			</${e}>`
-  )}
+																			 ?checked="${k}"></${i}>`)}
+			</${n}>`)}
 		</div>
 	</div>`;
-}, Z = A(
-  "audio-player",
-  s,
-  K,
-  [f, g, B, T],
-  {
-    styles: P
-  }
-), q = w(
-  Z
-);
-q();
+}, [
+	g,
+	p,
+	b,
+	v
+], { styles: x }))();
+//#endregion