mediaquad-sound-component
Version:
This component is built on the [wavesurfer](https://wavesurfer.xyz) library.
1,415 lines • 53.2 kB
JavaScript
import { openBlock as b, createElementBlock as w, normalizeStyle as W, normalizeClass as B, toDisplayString as O, createCommentVNode as S, createElementVNode as m, defineComponent as U, useCssVars as Y, resolveComponent as Z, createBlock as J, createVNode as K } from "vue";
function k(n, t, e, i) {
return new (e || (e = Promise))(function(r, s) {
function o(h) {
try {
u(i.next(h));
} catch (l) {
s(l);
}
}
function a(h) {
try {
u(i.throw(h));
} catch (l) {
s(l);
}
}
function u(h) {
var l;
h.done ? r(h.value) : (l = h.value, l instanceof e ? l : new e(function(c) {
c(l);
})).then(o, a);
}
u((i = i.apply(n, t || [])).next());
});
}
class $ {
constructor() {
this.listeners = {};
}
on(t, e, i) {
if (this.listeners[t] || (this.listeners[t] = /* @__PURE__ */ new Set()), this.listeners[t].add(e), i == null ? void 0 : i.once) {
const r = () => {
this.un(t, r), this.un(t, e);
};
return this.on(t, r), r;
}
return () => this.un(t, e);
}
un(t, e) {
var i;
(i = this.listeners[t]) === null || i === void 0 || i.delete(e);
}
once(t, e) {
return this.on(t, e, { once: !0 });
}
unAll() {
this.listeners = {};
}
emit(t, ...e) {
this.listeners[t] && this.listeners[t].forEach((i) => i(...e));
}
}
const A = { decode: function(n, t) {
return k(this, void 0, void 0, function* () {
const e = new AudioContext({ sampleRate: t });
return e.decodeAudioData(n).finally(() => e.close());
});
}, createBuffer: function(n, t) {
return typeof n[0] == "number" && (n = [n]), function(e) {
const i = e[0];
if (i.some((r) => r > 1 || r < -1)) {
const r = i.length;
let s = 0;
for (let o = 0; o < r; o++) {
const a = Math.abs(i[o]);
a > s && (s = a);
}
for (const o of e) for (let a = 0; a < r; a++) o[a] /= s;
}
}(n), { duration: t, length: n[0].length, sampleRate: n[0].length / t, numberOfChannels: n.length, getChannelData: (e) => n == null ? void 0 : n[e], copyFromChannel: AudioBuffer.prototype.copyFromChannel, copyToChannel: AudioBuffer.prototype.copyToChannel };
} };
function G(n, t) {
const e = t.xmlns ? document.createElementNS(t.xmlns, n) : document.createElement(n);
for (const [i, r] of Object.entries(t)) if (i === "children") for (const [s, o] of Object.entries(t)) typeof o == "string" ? e.appendChild(document.createTextNode(o)) : e.appendChild(G(s, o));
else i === "style" ? Object.assign(e.style, r) : i === "textContent" ? e.textContent = r : e.setAttribute(i, r.toString());
return e;
}
function j(n, t, e) {
const i = G(n, t || {});
return e == null || e.appendChild(i), i;
}
var Q = Object.freeze({ __proto__: null, createElement: j, default: j });
const tt = { fetchBlob: function(n, t, e) {
return k(this, void 0, void 0, function* () {
const i = yield fetch(n, e);
if (i.status >= 400) throw new Error(`Failed to fetch ${n}: ${i.status} (${i.statusText})`);
return function(r, s) {
k(this, void 0, void 0, function* () {
if (!r.body || !r.headers) return;
const o = r.body.getReader(), a = Number(r.headers.get("Content-Length")) || 0;
let u = 0;
const h = (c) => k(this, void 0, void 0, function* () {
u += (c == null ? void 0 : c.length) || 0;
const d = Math.round(u / a * 100);
s(d);
}), l = () => k(this, void 0, void 0, function* () {
let c;
try {
c = yield o.read();
} catch {
return;
}
c.done || (h(c.value), yield l());
});
l();
});
}(i.clone(), t), i.blob();
});
} };
class et extends $ {
constructor(t) {
super(), this.isExternalMedia = !1, t.media ? (this.media = t.media, this.isExternalMedia = !0) : this.media = document.createElement("audio"), t.mediaControls && (this.media.controls = !0), t.autoplay && (this.media.autoplay = !0), t.playbackRate != null && this.onMediaEvent("canplay", () => {
t.playbackRate != null && (this.media.playbackRate = t.playbackRate);
}, { once: !0 });
}
onMediaEvent(t, e, i) {
return this.media.addEventListener(t, e, i), () => this.media.removeEventListener(t, e, i);
}
getSrc() {
return this.media.currentSrc || this.media.src || "";
}
revokeSrc() {
const t = this.getSrc();
t.startsWith("blob:") && URL.revokeObjectURL(t);
}
canPlayType(t) {
return this.media.canPlayType(t) !== "";
}
setSrc(t, e) {
const i = this.getSrc();
if (t && i === t) return;
this.revokeSrc();
const r = e instanceof Blob && (this.canPlayType(e.type) || !t) ? URL.createObjectURL(e) : t;
try {
this.media.src = r;
} catch {
this.media.src = t;
}
}
destroy() {
this.media.pause(), this.isExternalMedia || (this.media.remove(), this.revokeSrc(), this.media.src = "", this.media.load());
}
setMediaElement(t) {
this.media = t;
}
play() {
return k(this, void 0, void 0, function* () {
return this.media.play();
});
}
pause() {
this.media.pause();
}
isPlaying() {
return !this.media.paused && !this.media.ended;
}
setTime(t) {
this.media.currentTime = t;
}
getDuration() {
return this.media.duration;
}
getCurrentTime() {
return this.media.currentTime;
}
getVolume() {
return this.media.volume;
}
setVolume(t) {
this.media.volume = t;
}
getMuted() {
return this.media.muted;
}
setMuted(t) {
this.media.muted = t;
}
getPlaybackRate() {
return this.media.playbackRate;
}
isSeeking() {
return this.media.seeking;
}
setPlaybackRate(t, e) {
e != null && (this.media.preservesPitch = e), this.media.playbackRate = t;
}
getMediaElement() {
return this.media;
}
setSinkId(t) {
return this.media.setSinkId(t);
}
}
class N extends $ {
constructor(t, e) {
super(), this.timeouts = [], this.isScrollable = !1, this.audioData = null, this.resizeObserver = null, this.lastContainerWidth = 0, this.isDragging = !1, this.subscriptions = [], this.unsubscribeOnScroll = [], this.subscriptions = [], this.options = t;
const i = this.parentFromOptionsContainer(t.container);
this.parent = i;
const [r, s] = this.initHtml();
i.appendChild(r), this.container = r, this.scrollContainer = s.querySelector(".scroll"), this.wrapper = s.querySelector(".wrapper"), this.canvasWrapper = s.querySelector(".canvases"), this.progressWrapper = s.querySelector(".progress"), this.cursor = s.querySelector(".cursor"), e && s.appendChild(e), this.initEvents();
}
parentFromOptionsContainer(t) {
let e;
if (typeof t == "string" ? e = document.querySelector(t) : t instanceof HTMLElement && (e = t), !e) throw new Error("Container not found");
return e;
}
initEvents() {
const t = (e) => {
const i = this.wrapper.getBoundingClientRect(), r = e.clientX - i.left, s = e.clientY - i.top;
return [r / i.width, s / i.height];
};
if (this.wrapper.addEventListener("click", (e) => {
const [i, r] = t(e);
this.emit("click", i, r);
}), this.wrapper.addEventListener("dblclick", (e) => {
const [i, r] = t(e);
this.emit("dblclick", i, r);
}), this.options.dragToSeek !== !0 && typeof this.options.dragToSeek != "object" || this.initDrag(), this.scrollContainer.addEventListener("scroll", () => {
const { scrollLeft: e, scrollWidth: i, clientWidth: r } = this.scrollContainer, s = e / i, o = (e + r) / i;
this.emit("scroll", s, o, e, e + r);
}), typeof ResizeObserver == "function") {
const e = this.createDelay(100);
this.resizeObserver = new ResizeObserver(() => {
e().then(() => this.onContainerResize()).catch(() => {
});
}), this.resizeObserver.observe(this.scrollContainer);
}
}
onContainerResize() {
const t = this.parent.clientWidth;
t === this.lastContainerWidth && this.options.height !== "auto" || (this.lastContainerWidth = t, this.reRender());
}
initDrag() {
this.subscriptions.push(function(t, e, i, r, s = 3, o = 0, a = 100) {
if (!t) return () => {
};
const u = matchMedia("(pointer: coarse)").matches;
let h = () => {
};
const l = (c) => {
if (c.button !== o) return;
c.preventDefault(), c.stopPropagation();
let d = c.clientX, p = c.clientY, f = !1;
const T = Date.now(), g = (v) => {
if (v.preventDefault(), v.stopPropagation(), u && Date.now() - T < a) return;
const M = v.clientX, L = v.clientY, P = M - d, D = L - p;
if (f || Math.abs(P) > s || Math.abs(D) > s) {
const R = t.getBoundingClientRect(), { left: z, top: _ } = R;
f || (i == null || i(d - z, p - _), f = !0), e(P, D, M - z, L - _), d = M, p = L;
}
}, y = (v) => {
if (f) {
const M = v.clientX, L = v.clientY, P = t.getBoundingClientRect(), { left: D, top: R } = P;
r == null || r(M - D, L - R);
}
h();
}, C = (v) => {
v.relatedTarget && v.relatedTarget !== document.documentElement || y(v);
}, E = (v) => {
f && (v.stopPropagation(), v.preventDefault());
}, x = (v) => {
f && v.preventDefault();
};
document.addEventListener("pointermove", g), document.addEventListener("pointerup", y), document.addEventListener("pointerout", C), document.addEventListener("pointercancel", C), document.addEventListener("touchmove", x, { passive: !1 }), document.addEventListener("click", E, { capture: !0 }), h = () => {
document.removeEventListener("pointermove", g), document.removeEventListener("pointerup", y), document.removeEventListener("pointerout", C), document.removeEventListener("pointercancel", C), document.removeEventListener("touchmove", x), setTimeout(() => {
document.removeEventListener("click", E, { capture: !0 });
}, 10);
};
};
return t.addEventListener("pointerdown", l), () => {
h(), t.removeEventListener("pointerdown", l);
};
}(this.wrapper, (t, e, i) => {
this.emit("drag", Math.max(0, Math.min(1, i / this.wrapper.getBoundingClientRect().width)));
}, (t) => {
this.isDragging = !0, this.emit("dragstart", Math.max(0, Math.min(1, t / this.wrapper.getBoundingClientRect().width)));
}, (t) => {
this.isDragging = !1, this.emit("dragend", Math.max(0, Math.min(1, t / this.wrapper.getBoundingClientRect().width)));
}));
}
getHeight(t, e) {
var i;
const r = ((i = this.audioData) === null || i === void 0 ? void 0 : i.numberOfChannels) || 1;
if (t == null) return 128;
if (!isNaN(Number(t))) return Number(t);
if (t === "auto") {
const s = this.parent.clientHeight || 128;
return e != null && e.every((o) => !o.overlay) ? s / r : s;
}
return 128;
}
initHtml() {
const t = document.createElement("div"), e = t.attachShadow({ mode: "open" }), i = this.options.cspNonce && typeof this.options.cspNonce == "string" ? this.options.cspNonce.replace(/"/g, "") : "";
return e.innerHTML = `
<style${i ? ` nonce="${i}"` : ""}>
:host {
user-select: none;
min-width: 1px;
}
:host audio {
display: block;
width: 100%;
}
:host .scroll {
overflow-x: auto;
overflow-y: hidden;
width: 100%;
position: relative;
}
:host .noScrollbar {
scrollbar-color: transparent;
scrollbar-width: none;
}
:host .noScrollbar::-webkit-scrollbar {
display: none;
-webkit-appearance: none;
}
:host .wrapper {
position: relative;
overflow: visible;
z-index: 2;
}
:host .canvases {
min-height: ${this.getHeight(this.options.height, this.options.splitChannels)}px;
}
:host .canvases > div {
position: relative;
}
:host canvas {
display: block;
position: absolute;
top: 0;
image-rendering: pixelated;
}
:host .progress {
pointer-events: none;
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 0;
height: 100%;
overflow: hidden;
}
:host .progress > div {
position: relative;
}
:host .cursor {
pointer-events: none;
position: absolute;
z-index: 5;
top: 0;
left: 0;
height: 100%;
border-radius: 2px;
}
</style>
<div class="scroll" part="scroll">
<div class="wrapper" part="wrapper">
<div class="canvases" part="canvases"></div>
<div class="progress" part="progress"></div>
<div class="cursor" part="cursor"></div>
</div>
</div>
`, [t, e];
}
setOptions(t) {
if (this.options.container !== t.container) {
const e = this.parentFromOptionsContainer(t.container);
e.appendChild(this.container), this.parent = e;
}
t.dragToSeek !== !0 && typeof this.options.dragToSeek != "object" || this.initDrag(), this.options = t, this.reRender();
}
getWrapper() {
return this.wrapper;
}
getWidth() {
return this.scrollContainer.clientWidth;
}
getScroll() {
return this.scrollContainer.scrollLeft;
}
setScroll(t) {
this.scrollContainer.scrollLeft = t;
}
setScrollPercentage(t) {
const { scrollWidth: e } = this.scrollContainer, i = e * t;
this.setScroll(i);
}
destroy() {
var t, e;
this.subscriptions.forEach((i) => i()), this.container.remove(), (t = this.resizeObserver) === null || t === void 0 || t.disconnect(), (e = this.unsubscribeOnScroll) === null || e === void 0 || e.forEach((i) => i()), this.unsubscribeOnScroll = [];
}
createDelay(t = 10) {
let e, i;
const r = () => {
e && clearTimeout(e), i && i();
};
return this.timeouts.push(r), () => new Promise((s, o) => {
r(), i = o, e = setTimeout(() => {
e = void 0, i = void 0, s();
}, t);
});
}
convertColorValues(t) {
if (!Array.isArray(t)) return t || "";
if (t.length < 2) return t[0] || "";
const e = document.createElement("canvas"), i = e.getContext("2d"), r = e.height * (window.devicePixelRatio || 1), s = i.createLinearGradient(0, 0, 0, r), o = 1 / (t.length - 1);
return t.forEach((a, u) => {
const h = u * o;
s.addColorStop(h, a);
}), s;
}
getPixelRatio() {
return Math.max(1, window.devicePixelRatio || 1);
}
renderBarWaveform(t, e, i, r) {
const s = t[0], o = t[1] || t[0], a = s.length, { width: u, height: h } = i.canvas, l = h / 2, c = this.getPixelRatio(), d = e.barWidth ? e.barWidth * c : 1, p = e.barGap ? e.barGap * c : e.barWidth ? d / 2 : 0, f = e.barRadius || 0, T = u / (d + p) / a, g = f && "roundRect" in i ? "roundRect" : "rect";
i.beginPath();
let y = 0, C = 0, E = 0;
for (let x = 0; x <= a; x++) {
const v = Math.round(x * T);
if (v > y) {
const P = Math.round(C * l * r), D = P + Math.round(E * l * r) || 1;
let R = l - P;
e.barAlign === "top" ? R = 0 : e.barAlign === "bottom" && (R = h - D), i[g](y * (d + p), R, d, D, f), y = v, C = 0, E = 0;
}
const M = Math.abs(s[x] || 0), L = Math.abs(o[x] || 0);
M > C && (C = M), L > E && (E = L);
}
i.fill(), i.closePath();
}
renderLineWaveform(t, e, i, r) {
const s = (o) => {
const a = t[o] || t[0], u = a.length, { height: h } = i.canvas, l = h / 2, c = i.canvas.width / u;
i.moveTo(0, l);
let d = 0, p = 0;
for (let f = 0; f <= u; f++) {
const T = Math.round(f * c);
if (T > d) {
const y = l + (Math.round(p * l * r) || 1) * (o === 0 ? -1 : 1);
i.lineTo(d, y), d = T, p = 0;
}
const g = Math.abs(a[f] || 0);
g > p && (p = g);
}
i.lineTo(d, l);
};
i.beginPath(), s(0), s(1), i.fill(), i.closePath();
}
renderWaveform(t, e, i) {
if (i.fillStyle = this.convertColorValues(e.waveColor), e.renderFunction) return void e.renderFunction(t, i);
let r = e.barHeight || 1;
if (e.normalize) {
const s = Array.from(t[0]).reduce((o, a) => Math.max(o, Math.abs(a)), 0);
r = s ? 1 / s : 1;
}
e.barWidth || e.barGap || e.barAlign ? this.renderBarWaveform(t, e, i, r) : this.renderLineWaveform(t, e, i, r);
}
renderSingleCanvas(t, e, i, r, s, o, a) {
const u = this.getPixelRatio(), h = document.createElement("canvas");
h.width = Math.round(i * u), h.height = Math.round(r * u), h.style.width = `${i}px`, h.style.height = `${r}px`, h.style.left = `${Math.round(s)}px`, o.appendChild(h);
const l = h.getContext("2d");
if (this.renderWaveform(t, e, l), h.width > 0 && h.height > 0) {
const c = h.cloneNode(), d = c.getContext("2d");
d.drawImage(h, 0, 0), d.globalCompositeOperation = "source-in", d.fillStyle = this.convertColorValues(e.progressColor), d.fillRect(0, 0, h.width, h.height), a.appendChild(c);
}
}
renderMultiCanvas(t, e, i, r, s, o) {
const a = this.getPixelRatio(), { clientWidth: u } = this.scrollContainer, h = i / a;
let l = Math.min(N.MAX_CANVAS_WIDTH, u, h), c = {};
if (l === 0) return;
if (e.barWidth || e.barGap) {
const g = e.barWidth || 0.5, y = g + (e.barGap || g / 2);
l % y != 0 && (l = Math.floor(l / y) * y);
}
const d = (g) => {
if (g < 0 || g >= p || c[g]) return;
c[g] = !0;
const y = g * l, C = Math.min(h - y, l);
if (C <= 0) return;
const E = t.map((x) => {
const v = Math.floor(y / h * x.length), M = Math.floor((y + C) / h * x.length);
return x.slice(v, M);
});
this.renderSingleCanvas(E, e, C, r, y, s, o);
}, p = Math.ceil(h / l);
if (!this.isScrollable) {
for (let g = 0; g < p; g++) d(g);
return;
}
const f = this.scrollContainer.scrollLeft / h, T = Math.floor(f * p);
if (d(T - 1), d(T), d(T + 1), p > 1) {
const g = this.on("scroll", () => {
const { scrollLeft: y } = this.scrollContainer, C = Math.floor(y / h * p);
Object.keys(c).length > N.MAX_NODES && (s.innerHTML = "", o.innerHTML = "", c = {}), d(C - 1), d(C), d(C + 1);
});
this.unsubscribeOnScroll.push(g);
}
}
renderChannel(t, e, i, r) {
var { overlay: s } = e, o = function(l, c) {
var d = {};
for (var p in l) Object.prototype.hasOwnProperty.call(l, p) && c.indexOf(p) < 0 && (d[p] = l[p]);
if (l != null && typeof Object.getOwnPropertySymbols == "function") {
var f = 0;
for (p = Object.getOwnPropertySymbols(l); f < p.length; f++) c.indexOf(p[f]) < 0 && Object.prototype.propertyIsEnumerable.call(l, p[f]) && (d[p[f]] = l[p[f]]);
}
return d;
}(e, ["overlay"]);
const a = document.createElement("div"), u = this.getHeight(o.height, o.splitChannels);
a.style.height = `${u}px`, s && r > 0 && (a.style.marginTop = `-${u}px`), this.canvasWrapper.style.minHeight = `${u}px`, this.canvasWrapper.appendChild(a);
const h = a.cloneNode();
this.progressWrapper.appendChild(h), this.renderMultiCanvas(t, o, i, u, a, h);
}
render(t) {
return k(this, void 0, void 0, function* () {
var e;
this.timeouts.forEach((u) => u()), this.timeouts = [], this.canvasWrapper.innerHTML = "", this.progressWrapper.innerHTML = "", this.options.width != null && (this.scrollContainer.style.width = typeof this.options.width == "number" ? `${this.options.width}px` : this.options.width);
const i = this.getPixelRatio(), r = this.scrollContainer.clientWidth, s = Math.ceil(t.duration * (this.options.minPxPerSec || 0));
this.isScrollable = s > r;
const o = this.options.fillParent && !this.isScrollable, a = (o ? r : s) * i;
if (this.wrapper.style.width = o ? "100%" : `${s}px`, this.scrollContainer.style.overflowX = this.isScrollable ? "auto" : "hidden", this.scrollContainer.classList.toggle("noScrollbar", !!this.options.hideScrollbar), this.cursor.style.backgroundColor = `${this.options.cursorColor || this.options.progressColor}`, this.cursor.style.width = `${this.options.cursorWidth}px`, this.audioData = t, this.emit("render"), this.options.splitChannels) for (let u = 0; u < t.numberOfChannels; u++) {
const h = Object.assign(Object.assign({}, this.options), (e = this.options.splitChannels) === null || e === void 0 ? void 0 : e[u]);
this.renderChannel([t.getChannelData(u)], h, a, u);
}
else {
const u = [t.getChannelData(0)];
t.numberOfChannels > 1 && u.push(t.getChannelData(1)), this.renderChannel(u, this.options, a, 0);
}
Promise.resolve().then(() => this.emit("rendered"));
});
}
reRender() {
if (this.unsubscribeOnScroll.forEach((i) => i()), this.unsubscribeOnScroll = [], !this.audioData) return;
const { scrollWidth: t } = this.scrollContainer, { right: e } = this.progressWrapper.getBoundingClientRect();
if (this.render(this.audioData), this.isScrollable && t !== this.scrollContainer.scrollWidth) {
const { right: i } = this.progressWrapper.getBoundingClientRect();
let r = i - e;
r *= 2, r = r < 0 ? Math.floor(r) : Math.ceil(r), r /= 2, this.scrollContainer.scrollLeft += r;
}
}
zoom(t) {
this.options.minPxPerSec = t, this.reRender();
}
scrollIntoView(t, e = !1) {
const { scrollLeft: i, scrollWidth: r, clientWidth: s } = this.scrollContainer, o = t * r, a = i, u = i + s, h = s / 2;
if (this.isDragging)
o + 30 > u ? this.scrollContainer.scrollLeft += 30 : o - 30 < a && (this.scrollContainer.scrollLeft -= 30);
else {
(o < a || o > u) && (this.scrollContainer.scrollLeft = o - (this.options.autoCenter ? h : 0));
const l = o - i - h;
e && this.options.autoCenter && l > 0 && (this.scrollContainer.scrollLeft += Math.min(l, 10));
}
{
const l = this.scrollContainer.scrollLeft, c = l / r, d = (l + s) / r;
this.emit("scroll", c, d, l, l + s);
}
}
renderProgress(t, e) {
if (isNaN(t)) return;
const i = 100 * t;
this.canvasWrapper.style.clipPath = `polygon(${i}% 0, 100% 0, 100% 100%, ${i}% 100%)`, this.progressWrapper.style.width = `${i}%`, this.cursor.style.left = `${i}%`, this.cursor.style.transform = `translateX(-${Math.round(i) === 100 ? this.options.cursorWidth : 0}px)`, this.isScrollable && this.options.autoScroll && this.scrollIntoView(t, e);
}
exportImage(t, e, i) {
return k(this, void 0, void 0, function* () {
const r = this.canvasWrapper.querySelectorAll("canvas");
if (!r.length) throw new Error("No waveform data");
if (i === "dataURL") {
const s = Array.from(r).map((o) => o.toDataURL(t, e));
return Promise.resolve(s);
}
return Promise.all(Array.from(r).map((s) => new Promise((o, a) => {
s.toBlob((u) => {
u ? o(u) : a(new Error("Could not export image"));
}, t, e);
})));
});
}
}
N.MAX_CANVAS_WIDTH = 8e3, N.MAX_NODES = 10;
class it extends $ {
constructor() {
super(...arguments), this.unsubscribe = () => {
};
}
start() {
this.unsubscribe = this.on("tick", () => {
requestAnimationFrame(() => {
this.emit("tick");
});
}), this.emit("tick");
}
stop() {
this.unsubscribe();
}
destroy() {
this.unsubscribe();
}
}
class V extends $ {
constructor(t = new AudioContext()) {
super(), this.bufferNode = null, this.playStartTime = 0, this.playedDuration = 0, this._muted = !1, this._playbackRate = 1, this._duration = void 0, this.buffer = null, this.currentSrc = "", this.paused = !0, this.crossOrigin = null, this.seeking = !1, this.autoplay = !1, this.addEventListener = this.on, this.removeEventListener = this.un, this.audioContext = t, this.gainNode = this.audioContext.createGain(), this.gainNode.connect(this.audioContext.destination);
}
load() {
return k(this, void 0, void 0, function* () {
});
}
get src() {
return this.currentSrc;
}
set src(t) {
if (this.currentSrc = t, this._duration = void 0, !t) return this.buffer = null, void this.emit("emptied");
fetch(t).then((e) => {
if (e.status >= 400) throw new Error(`Failed to fetch ${t}: ${e.status} (${e.statusText})`);
return e.arrayBuffer();
}).then((e) => this.currentSrc !== t ? null : this.audioContext.decodeAudioData(e)).then((e) => {
this.currentSrc === t && (this.buffer = e, this.emit("loadedmetadata"), this.emit("canplay"), this.autoplay && this.play());
});
}
_play() {
var t;
if (!this.paused) return;
this.paused = !1, (t = this.bufferNode) === null || t === void 0 || t.disconnect(), this.bufferNode = this.audioContext.createBufferSource(), this.buffer && (this.bufferNode.buffer = this.buffer), this.bufferNode.playbackRate.value = this._playbackRate, this.bufferNode.connect(this.gainNode);
let e = this.playedDuration * this._playbackRate;
e >= this.duration && (e = 0, this.playedDuration = 0), this.bufferNode.start(this.audioContext.currentTime, e), this.playStartTime = this.audioContext.currentTime, this.bufferNode.onended = () => {
this.currentTime >= this.duration && (this.pause(), this.emit("ended"));
};
}
_pause() {
var t;
this.paused = !0, (t = this.bufferNode) === null || t === void 0 || t.stop(), this.playedDuration += this.audioContext.currentTime - this.playStartTime;
}
play() {
return k(this, void 0, void 0, function* () {
this.paused && (this._play(), this.emit("play"));
});
}
pause() {
this.paused || (this._pause(), this.emit("pause"));
}
stopAt(t) {
var e, i;
const r = t - this.currentTime;
(e = this.bufferNode) === null || e === void 0 || e.stop(this.audioContext.currentTime + r), (i = this.bufferNode) === null || i === void 0 || i.addEventListener("ended", () => {
this.bufferNode = null, this.pause();
}, { once: !0 });
}
setSinkId(t) {
return k(this, void 0, void 0, function* () {
return this.audioContext.setSinkId(t);
});
}
get playbackRate() {
return this._playbackRate;
}
set playbackRate(t) {
this._playbackRate = t, this.bufferNode && (this.bufferNode.playbackRate.value = t);
}
get currentTime() {
return (this.paused ? this.playedDuration : this.playedDuration + (this.audioContext.currentTime - this.playStartTime)) * this._playbackRate;
}
set currentTime(t) {
const e = !this.paused;
e && this._pause(), this.playedDuration = t / this._playbackRate, e && this._play(), this.emit("seeking"), this.emit("timeupdate");
}
get duration() {
var t, e;
return (t = this._duration) !== null && t !== void 0 ? t : ((e = this.buffer) === null || e === void 0 ? void 0 : e.duration) || 0;
}
set duration(t) {
this._duration = t;
}
get volume() {
return this.gainNode.gain.value;
}
set volume(t) {
this.gainNode.gain.value = t, this.emit("volumechange");
}
get muted() {
return this._muted;
}
set muted(t) {
this._muted !== t && (this._muted = t, this._muted ? this.gainNode.disconnect() : this.gainNode.connect(this.audioContext.destination));
}
canPlayType(t) {
return /^(audio|video)\//.test(t);
}
getGainNode() {
return this.gainNode;
}
getChannelData() {
const t = [];
if (!this.buffer) return t;
const e = this.buffer.numberOfChannels;
for (let i = 0; i < e; i++) t.push(this.buffer.getChannelData(i));
return t;
}
}
const nt = { waveColor: "#999", progressColor: "#555", cursorWidth: 1, minPxPerSec: 0, fillParent: !0, interact: !0, dragToSeek: !1, autoScroll: !0, autoCenter: !0, sampleRate: 8e3 };
class I extends et {
static create(t) {
return new I(t);
}
constructor(t) {
const e = t.media || (t.backend === "WebAudio" ? new V() : void 0);
super({ media: e, mediaControls: t.mediaControls, autoplay: t.autoplay, playbackRate: t.audioRate }), this.plugins = [], this.decodedData = null, this.subscriptions = [], this.mediaSubscriptions = [], this.abortController = null, this.options = Object.assign({}, nt, t), this.timer = new it();
const i = e ? void 0 : this.getMediaElement();
this.renderer = new N(this.options, i), this.initPlayerEvents(), this.initRendererEvents(), this.initTimerEvents(), this.initPlugins();
const r = this.options.url || this.getSrc() || "";
Promise.resolve().then(() => {
this.emit("init");
const { peaks: s, duration: o } = this.options;
(r || s && o) && this.load(r, s, o).catch(() => null);
});
}
updateProgress(t = this.getCurrentTime()) {
return this.renderer.renderProgress(t / this.getDuration(), this.isPlaying()), t;
}
initTimerEvents() {
this.subscriptions.push(this.timer.on("tick", () => {
if (!this.isSeeking()) {
const t = this.updateProgress();
this.emit("timeupdate", t), this.emit("audioprocess", t);
}
}));
}
initPlayerEvents() {
this.isPlaying() && (this.emit("play"), this.timer.start()), this.mediaSubscriptions.push(this.onMediaEvent("timeupdate", () => {
const t = this.updateProgress();
this.emit("timeupdate", t);
}), this.onMediaEvent("play", () => {
this.emit("play"), this.timer.start();
}), this.onMediaEvent("pause", () => {
this.emit("pause"), this.timer.stop();
}), this.onMediaEvent("emptied", () => {
this.timer.stop();
}), this.onMediaEvent("ended", () => {
this.emit("timeupdate", this.getDuration()), this.emit("finish");
}), this.onMediaEvent("seeking", () => {
this.emit("seeking", this.getCurrentTime());
}), this.onMediaEvent("error", (t) => {
var e;
this.emit("error", (e = this.getMediaElement().error) !== null && e !== void 0 ? e : new Error("Media error"));
}));
}
initRendererEvents() {
this.subscriptions.push(this.renderer.on("click", (t, e) => {
this.options.interact && (this.seekTo(t), this.emit("interaction", t * this.getDuration()), this.emit("click", t, e));
}), this.renderer.on("dblclick", (t, e) => {
this.emit("dblclick", t, e);
}), this.renderer.on("scroll", (t, e, i, r) => {
const s = this.getDuration();
this.emit("scroll", t * s, e * s, i, r);
}), this.renderer.on("render", () => {
this.emit("redraw");
}), this.renderer.on("rendered", () => {
this.emit("redrawcomplete");
}), this.renderer.on("dragstart", (t) => {
this.emit("dragstart", t);
}), this.renderer.on("dragend", (t) => {
this.emit("dragend", t);
}));
{
let t;
this.subscriptions.push(this.renderer.on("drag", (e) => {
if (!this.options.interact) return;
let i;
this.renderer.renderProgress(e), clearTimeout(t), this.isPlaying() ? i = 0 : this.options.dragToSeek === !0 ? i = 200 : typeof this.options.dragToSeek == "object" && this.options.dragToSeek !== void 0 && (i = this.options.dragToSeek.debounceTime), t = setTimeout(() => {
this.seekTo(e);
}, i), this.emit("interaction", e * this.getDuration()), this.emit("drag", e);
}));
}
}
initPlugins() {
var t;
!((t = this.options.plugins) === null || t === void 0) && t.length && this.options.plugins.forEach((e) => {
this.registerPlugin(e);
});
}
unsubscribePlayerEvents() {
this.mediaSubscriptions.forEach((t) => t()), this.mediaSubscriptions = [];
}
setOptions(t) {
this.options = Object.assign({}, this.options, t), t.duration && !t.peaks && (this.decodedData = A.createBuffer(this.exportPeaks(), t.duration)), t.peaks && t.duration && (this.decodedData = A.createBuffer(t.peaks, t.duration)), this.renderer.setOptions(this.options), t.audioRate && this.setPlaybackRate(t.audioRate), t.mediaControls != null && (this.getMediaElement().controls = t.mediaControls);
}
registerPlugin(t) {
return t._init(this), this.plugins.push(t), this.subscriptions.push(t.once("destroy", () => {
this.plugins = this.plugins.filter((e) => e !== t);
})), t;
}
getWrapper() {
return this.renderer.getWrapper();
}
getWidth() {
return this.renderer.getWidth();
}
getScroll() {
return this.renderer.getScroll();
}
setScroll(t) {
return this.renderer.setScroll(t);
}
setScrollTime(t) {
const e = t / this.getDuration();
this.renderer.setScrollPercentage(e);
}
getActivePlugins() {
return this.plugins;
}
loadAudio(t, e, i, r) {
return k(this, void 0, void 0, function* () {
var s;
if (this.emit("load", t), !this.options.media && this.isPlaying() && this.pause(), this.decodedData = null, !e && !i) {
const a = this.options.fetchParams || {};
window.AbortController && !a.signal && (this.abortController = new AbortController(), a.signal = (s = this.abortController) === null || s === void 0 ? void 0 : s.signal);
const u = (l) => this.emit("loading", l);
e = yield tt.fetchBlob(t, u, a);
const h = this.options.blobMimeType;
h && (e = new Blob([e], { type: h }));
}
this.setSrc(t, e);
const o = yield new Promise((a) => {
const u = r || this.getDuration();
u ? a(u) : this.mediaSubscriptions.push(this.onMediaEvent("loadedmetadata", () => a(this.getDuration()), { once: !0 }));
});
if (!t && !e) {
const a = this.getMediaElement();
a instanceof V && (a.duration = o);
}
if (i) this.decodedData = A.createBuffer(i, o || 0);
else if (e) {
const a = yield e.arrayBuffer();
this.decodedData = yield A.decode(a, this.options.sampleRate);
}
this.decodedData && (this.emit("decode", this.getDuration()), this.renderer.render(this.decodedData)), this.emit("ready", this.getDuration());
});
}
load(t, e, i) {
return k(this, void 0, void 0, function* () {
try {
return yield this.loadAudio(t, void 0, e, i);
} catch (r) {
throw this.emit("error", r), r;
}
});
}
loadBlob(t, e, i) {
return k(this, void 0, void 0, function* () {
try {
return yield this.loadAudio("", t, e, i);
} catch (r) {
throw this.emit("error", r), r;
}
});
}
zoom(t) {
if (!this.decodedData) throw new Error("No audio loaded");
this.renderer.zoom(t), this.emit("zoom", t);
}
getDecodedData() {
return this.decodedData;
}
exportPeaks({ channels: t = 2, maxLength: e = 8e3, precision: i = 1e4 } = {}) {
if (!this.decodedData) throw new Error("The audio has not been decoded yet");
const r = Math.min(t, this.decodedData.numberOfChannels), s = [];
for (let o = 0; o < r; o++) {
const a = this.decodedData.getChannelData(o), u = [], h = a.length / e;
for (let l = 0; l < e; l++) {
const c = a.slice(Math.floor(l * h), Math.ceil((l + 1) * h));
let d = 0;
for (let p = 0; p < c.length; p++) {
const f = c[p];
Math.abs(f) > Math.abs(d) && (d = f);
}
u.push(Math.round(d * i) / i);
}
s.push(u);
}
return s;
}
getDuration() {
let t = super.getDuration() || 0;
return t !== 0 && t !== 1 / 0 || !this.decodedData || (t = this.decodedData.duration), t;
}
toggleInteraction(t) {
this.options.interact = t;
}
setTime(t) {
super.setTime(t), this.updateProgress(t), this.emit("timeupdate", t);
}
seekTo(t) {
const e = this.getDuration() * t;
this.setTime(e);
}
playPause() {
return k(this, void 0, void 0, function* () {
return this.isPlaying() ? this.pause() : this.play();
});
}
stop() {
this.pause(), this.setTime(0);
}
skip(t) {
this.setTime(this.getCurrentTime() + t);
}
empty() {
this.load("", [[0]], 1e-3);
}
setMediaElement(t) {
this.unsubscribePlayerEvents(), super.setMediaElement(t), this.initPlayerEvents();
}
exportImage() {
return k(this, arguments, void 0, function* (t = "image/png", e = 1, i = "dataURL") {
return this.renderer.exportImage(t, e, i);
});
}
destroy() {
var t;
this.emit("destroy"), (t = this.abortController) === null || t === void 0 || t.abort(), this.plugins.forEach((e) => e.destroy()), this.subscriptions.forEach((e) => e()), this.unsubscribePlayerEvents(), this.timer.destroy(), this.renderer.destroy(), super.destroy();
}
}
I.BasePlugin = class extends $ {
constructor(n) {
super(), this.subscriptions = [], this.options = n;
}
onInit() {
}
_init(n) {
this.wavesurfer = n, this.onInit();
}
destroy() {
this.emit("destroy"), this.subscriptions.forEach((n) => n());
}
}, I.dom = Q;
var rt = (
/** @class */
/* @__PURE__ */ function() {
function n() {
this.buttonColor = "#ffffff", this.buttonHoverColor = "#ff00ff", this.waveColor = "#ff4e00", this.progressColor = "#dd5e98", this.cursorColor = "#ddd5e9", this.backgroundColor = "#ffffff", this.textColor = "lightgrey";
}
return n;
}()
), st = (
/** @class */
/* @__PURE__ */ function() {
function n() {
this.playBtn = !0, this.nextChapterBtn = !0, this.prevChapterBtn = !0, this.timer = !0;
}
return n;
}()
), ot = (
/** @class */
/* @__PURE__ */ function() {
function n() {
this.showCover = !0, this.showTitle = !0, this.showDescription = !0, this.defaultVolume = 1, this.autoPlaylist = !1, this.dragToSeek = !0, this.sampleRate = 8e3, this.height = 20, this.cursorWidth = 2, this.barWidth = 2, this.barGap = 2, this.barRadius = 2;
}
return n;
}()
);
function at(n) {
var t = n instanceof HTMLElement ? n : document.getElementById(n);
if (t) {
var e = t.getBoundingClientRect();
return { width: e.width, height: e.height };
}
return { width: 0, height: 0 };
}
function lt(n) {
var t = Math.floor(n / 3600), e = Math.floor(n % 3600 / 60), i = Math.floor(n % 60), r = t > 0 ? "".concat(t.toString().padStart(2, "0"), ":") : "", s = "".concat(e.toString().padStart(2, "0"), ":"), o = i.toString().padStart(2, "0");
return "".concat(r).concat(s).concat(o);
}
var ht = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" enable-background="new 0 0 64 64"><path d="m53.213 10.788c-11.715-11.717-30.711-11.717-42.426 0-11.716 11.715-11.716 30.71 0 42.425 11.715 11.715 30.711 11.715 42.426 0 11.716-11.715 11.716-30.711 0-42.425m-28.213 41.224v-40.023l20 20.011-20 20.012" fill="currentColor"/></svg>
`, ut = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" enable-background="new 0 0 64 64"><path d="m32 2c-16.568 0-30 13.432-30 30 0 16.569 13.432 30 30 30s30-13.431 30-30c0-16.568-13.432-30-30-30m-4 48h-8v-36h8v36m16 0h-8v-36h8v36" fill="currentColor"/></svg>
`, dt = `
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" id="volume-up">
<path fill="currentColor" d="M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z"></path>
</svg>
`, ct = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" enable-background="new 0 0 64 64">
<path d="M 52 46 L 46.781 46 L 46.781 32 L 29.391 46 L 29.391 32 L 12 46 L 12 18 L 29.392 32 L 29.392 18 L 46.782 32 L 46.782 18 L 52 18 L 52 46 Z"
transform="matrix(0.9999999999999999, 0, 0, 0.9999999999999999, 0, -8.881784197001252e-16)"/>
</svg>
`, pt = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" enable-background="new 0 0 64 64">
<path d="M 52 46 L 46.781 46 L 46.781 32 L 29.391 46 L 29.391 32 L 12 46 L 12 18 L 29.392 32 L 29.392 18 L 46.782 32 L 46.782 18 L 52 18 L 52 46 Z"
style="transform-box: fill-box; transform-origin: 50% 50%;" transform="matrix(-1, 0, 0, -1, 0, 0.000001)"></path>
</svg>
`;
function ft(n, t) {
t === void 0 && (t = "");
var e = "";
switch (n) {
case "play":
e = ht;
break;
case "pause":
e = ut;
break;
case "volume":
e = dt;
break;
case "next":
e = ct;
break;
case "prev":
e = pt;
break;
default:
e = "";
}
return e.replaceAll("currentColor", t);
}
const mt = {
name: "Loader-Component",
props: {
size: {
type: String,
required: !1,
default: "100px"
},
color: {
type: String,
required: !1,
default: "#FF156D"
},
progress: {
type: Number,
required: !1,
default: 0
},
className: {
type: String,
default: "absolute-center"
}
}
}, X = (n, t) => {
const e = n.__vccOpts || n;
for (const [i, r] of t)
e[i] = r;
return e;
}, gt = {
key: 0,
class: "absolute-center z-20"
}, vt = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 200 200"
}, yt = {
id: "a10",
cx: ".66",
fx: ".66",
cy: ".3125",
fy: ".3125",
gradientTransform: "scale(1.5)"
}, bt = ["stop-color"], wt = ["stop-color"], Ct = ["stop-color"], kt = ["stop-color"], St = ["stop-color"], xt = ["stroke"];
function Tt(n, t, e, i, r, s) {
return b(), w("div", {
style: W({ width: `${e.size}`, height: `${e.size}` }),
class: B(["z-10", e.className])
}, [
e.progress ? (b(), w("div", gt, O(e.progress) + "%", 1)) : S("", !0),
(b(), w("svg", vt, [
m("radialGradient", yt, [
m("stop", {
offset: "0",
"stop-color": e.color
}, null, 8, bt),
m("stop", {
offset: ".3",
"stop-color": e.color,
"stop-opacity": ".9"
}, null, 8, wt),
m("stop", {
offset: ".6",
"stop-color": e.color,
"stop-opacity": ".6"
}, null, 8, Ct),
m("stop", {
offset: ".8",
"stop-color": e.color,
"stop-opacity": ".3"
}, null, 8, kt),
m("stop", {
offset: "1",
"stop-color": e.color,
"stop-opacity": "0"
}, null, 8, St)
]),
t[0] || (t[0] = m("circle", {
"transform-origin": "center",
fill: "none",
stroke: "url(#a10)",
"stroke-width": "16",
"stroke-linecap": "round",
"stroke-dasharray": "200 1000",
"stroke-dashoffset": "0",
cx: "100",
cy: "100",
r: "70"
}, [
m("animateTransform", {
type: "rotate",
attributeName: "transform",
calcMode: "spline",
dur: "2",
values: "360;0",
keyTimes: "0;1",
keySplines: "0 0 1 1",
repeatCount: "indefinite"
})
], -1)),
m("circle", {
"transform-origin": "center",
fill: "none",
opacity: ".2",
stroke: e.color,
"stroke-width": "16",
"stroke-linecap": "round",
cx: "100",
cy: "100",
r: "70"
}, null, 8, xt)
]))
], 6);
}
const Mt = /* @__PURE__ */ X(mt, [["render", Tt]]);
var H = U({
components: {
Loader: Mt
},
props: {
playlist: {
type: Array,
required: !0
},
colors: {
type: Object,
default: function() {
return new rt();
}
},
buttons: {
type: Object,
default: function() {
return new st();
}
},
options: {
type: Object,
default: function() {
return new ot();
}
}
},
setup: function() {
return {
formatTime: lt,
getIcon: ft
};
},
data: function() {
return {
currentIndex: 0,
containerElem: null,
parentContainer: null,
wavesurfer: null,
ready: !1,
currentTime: 0,
duration: 0,
loadingProgress: 0,
volume: 0,
redrawComplete: !1,
paused: void 0,
covers: new Array(),
parentRect: { width: 0, height: 0 }
};
},
computed: {
isPlaylist: function() {
return this.playlist.length > 1;
},
compact: function() {
return this.parentRect.width <= 200;
},
maxTitleWidth: function() {
var n = this.parentRect.width - 46 - 8 - 58 - (this.options.showCover && !this.compact ? 150 : 0) - 10;
return this.compact ? this.parentRect.width - 4 : n;
},
current: function() {
var n = this, t = this.playlist[this.currentIndex].cover;
if (!this.covers.includes(t)) {
var e = new Image();
e.onload = function() {
n.covers.push(t);
}, e.src = t;
}
return this.playlist[this.currentIndex];
}
},
methods: {
next: function() {
var n = this.currentIndex + 1;
n > this.playlist.length - 1 && (n = 0), this.currentIndex = n, this.ready = !1, this.load();
},
prev: function() {
var n = this.currentIndex - 1;
n < 0 && (n = this.playlist.length), this.currentIndex = n, this.ready = !1, this.load();
},
load: function() {
var n = this;
this.wavesurfer && this.wavesurfer.destroy(), this.parentRect = at(this.parentContainer), this.paused = void 0, this.redrawComplete = !1, this.currentTime = 0, this.duration = 0, this.wavesurfer = I.create({
container: this.containerElem,
waveColor: this.colors.waveColor,
progressColor: this.colors.progressColor,
cursorColor: this.colors.cursorColor,
cursorWidth: this.options.cursorWidth,
barWidth: this.options.barWidth,
barRadius: this.options.barRadius,
barGap: this.options.barGap,
dragToSeek: this.options.dragToSeek,
backend: "WebAudio",
mediaControls: !0,
height: this.options.height,
normalize: !0
}), this.volume = this.options.defaultVolume, this.wavesurfer.setVolume(this.volume), this.wavesurfer.on("audioprocess", function() {
n.wavesurfer && (n.currentTime = n.wavesurfer.getCurrentTime());
}), this.wavesurfer.once("decode", function(t) {
n.duration = t, n.currentTime = 0, n.ready = !0;
}), this.wavesurfer.on("loading", function(t) {
n.loadingProgress = t;
}), this.wavesurfer.once("redrawcomplete", function() {
n.redrawComplete = !0;
}), this.wavesurfer.once("redraw", function() {
n.redrawComplete = !1;
}), this.wavesurfer.load(this.current.url);
},
play: function() {
this.wavesurfer && (this.paused || this.paused === void 0 ? (this.wavesurfer.play(), this.paused = !1) : (this.wavesurfer.pause(), this.paused = !0));
}
},
unmounted: function() {
this.wavesurfer && (this.wavesurfer.isPlaying() && this.wavesurfer.stop(), this.wavesurfer.destroy());
},
mounted: function() {
this.containerElem = this.$refs.container, this.parentContainer = this.$refs["parent-container"], this.load();
}
}), q = function() {
Y(function(n) {
return {
bf7772c8: n.colors.buttonColor,
"2ecc5fee": n.colors.buttonHoverColor
};
});
}, F = H.setup;
H.setup = F ? function(n, t) {
return q(), F(n, t);
} : q;
const Et = ["src", "alt"], Lt = {
key: 1,
class: "w-full flex justify-center"
}, Pt = { class: "p-1 flex flex-col w-full" }, Dt = { class: "flex items-center gap-x-2" }, Rt = ["innerHTML"], Wt = { key: 1 }, Bt = ["innerHTML"], Ot = ["innerHTML"], Nt = ["innerHTML"], It = {
key: 0,
class: "flex gap-x-2 items-end"
}, $t = ["innerHTML"], At = ["innerHTML"], Ht = {
ref: "container",
class: "w-full mt-1"
}, zt = { class: "flex flex-col gap-x-2 mt-1 pt-1" };
function _t(n, t, e, i, r, s) {
const o = Z("Loader");
return b(), w("div", {
class: "full-size relative",
ref: "parent-container",
style: W(`background-color:${n.colors.backgroundColor}`)
}, [
n.ready ? S("", !0) : (b(), J(o, {
key: 0,
size: "100px",
color: n.colors.progressColor,
progress: n.loadingProgress
}, null, 8, ["color", "progress"])),
m("div", {
class: B(["flex full-size", { invisible: !n.ready, "flex-col": n.compact }])
}, [
n.options.showCover ? (b(), w("div", {
key: 0,
class: B([{ "w-[150px]": !n.compact, "w-full": n.compact }, "p-1"])
}, [
n.covers.includes(n.current.cover) ? (b(), w("img", {
key: 0,
class: "w-full border",
src: n.current.cover,
alt: n.current.title
}, null, 8, Et)) : (b(), w("div", Lt, [
K(o, {
size: "50px",
"class-name": "relative opacity-30",
color: "lightgary"
})
]))
], 2)) : S("", !0),
m("div", Pt, [
m("div", {
class: B(["flex py-1 items-center w-full", { "flex-col": n.compact, "justify-center": n.compact, "justify-between": !n.compact }])
}, [
m("div", {
class: B(["flex w-full", { "flex-col": n.compact, "items-center": n.compact, "items-start": !n.compact }])
}, [
m("div", Dt, [
n.compact && n.buttons.prevChapterBtn ? (b(), w("div", {
key: 0,
class: "btn w-[35px] h-[35px]",
onClick: t[0] || (t[0] = (...a) => n.prev && n.prev(...a))
}, [
m("span", {
innerHTML: n.getIcon("prev")
}, null, 8, Rt)
])) : S("", !0),
n.buttons.playBtn ? (b(), w("div", Wt, [
n.paused === !1 ? (b(), w("div", {
key: 0,
class: "btn w-[46px] h-[46px]",
onClick: t[1] || (t[1] = () => n.play())
}, [
m("span", {
innerHTML: n.getIcon("pause")
}, null, 8, Bt)
])) : S("", !0),
n.paused === void 0 || n.paused === !0 ? (b(), w("div", {
key: 1,
class: "btn w-[46px] h-[46px]",
onClick: t[2] || (t[2] = () => n.play())
}, [
m("span", {
innerHTML: n.getIcon("play")
}, null, 8, Ot)
])) : S("", !0)
])) : S("", !0),
n.compact && n.buttons.nextChapterBtn ? (b(), w("div", {
key: 2,
class: "btn w-[35px] h-[35px]",
onClick: t[3] || (t[3] = (...a) => n.next && n.next(...a))
}, [
m("span", {
innerHTML: n.getIcon("next")
}, null, 8, Nt)
])) : S("", !0)
]),
n.options.showTitle ? (b(), w("div", {
key: 0,
class: B(["flex flex-col ml-2 gap-x-0", { "text-center": n.compact, "items-center": n.compact }]),
style: W({ color: n.colors.textColor })
}, [
m("div", {
class: "font-semibold truncate text-nowrap",
style: W({ width: `${n.maxTitleWidth}px` })
}, O(n.current.title), 5),
n.current.artist ? (b(), w("div", {
key: 0,
class: "text-sm truncate text-nowrap",
style: W({ width: `${n.maxTitleWidth}px` })
}, O(n.current.artist), 5)) : S("", !0)
], 6)) : S("", !0)
], 2),
n.isPlaylist && !n.compact ? (b(), w("div", It, [
n.buttons.prevChapterBtn ? (b(), w("div", {
key: 0,
class: "btn w-[25px] h-[25px]",
onClick: t[4] || (t[4] = (...a) => n.prev && n.prev(...a))
}, [
m("span", {
innerHTML: n.getIcon("prev")
}, null, 8, $t)
])) : S("", !0),
n.buttons.nextChapterBtn ? (b(), w("div", {
key: 1,
class: "btn w-[25px] h-[25px]",
onClick: t[5] || (t[5] = (...a) => n.next && n.next(...a))
}, [
m("span", {
innerHTML: n.getIcon("next")
}, null, 8, At)
])) : S("", !0)
])) : S("", !0)
], 2),
m("div", Ht, null, 512),
m("div", zt, [
n.ready && n.buttons.timer ? (b(), w("div", {
key: 0,
class: "text-sm",
style: W(`color:${n.colors.textColor}`)
}, O(n.formatTime(n.currentTime)) + " / " + O(n.formatTime(n.duration)), 5)) : S("", !0),
n.options.showDescription && n.current.description ? (b(), w("div", {
key: 1,
class: "text-sm py-2",
style: W(`color:${n.colors.textColor}`)
}, O(n.current.description), 5)) : S("", !0)
])
])
], 2)
], 4);
}
const jt = /* @__PURE__ */ X(H, [["render", _t], ["__scopeId", "data-v-0cac8886"]]);
var Vt = function(n) {
n.component("b-upload-files-modal", jt);
};
const Ft = { install: Vt };
export {
jt as Player,
Ft as default
};