@44-audio/components 0.1.0-dev.15 → 0.1.0-dev.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/player.es.js +3450 -157
- package/dist/recorder.es.js +519 -521
- package/dist/time-BmemrSJ4.mjs +2850 -0
- package/package.json +2 -2
- package/dist/AudioPlayer-BnKA5uw-.mjs +0 -2649
package/dist/player.es.js
CHANGED
|
@@ -1,222 +1,3515 @@
|
|
|
1
|
-
import {
|
|
2
|
-
function
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
import { b as rt, E as mt, a as at, n as Qe, d as Wt, h as Ue, c as ot, e as Bt, f as bt, g as $e, s as wt, U as At, i as qt, j as Nt, p as xt, k as _t, l as ue, m as pe, o as be, q as u, r as F, t as H, u as te, v as Le, w as e, x as W, y as x, z as ge, A as c, B as de, C as me, D as q, F as m, G as ee, H as J, I as K, J as G, K as N, L as ye, M as Ce, N as ze, O as Pe, P as je, Q as Ve, R as pt, S as Dt, T as Fe, V as Ee, W as Z, X as Be, Y as Me, Z as nt, _ as Ae, $ as Ne, a0 as Ot, a1 as gt, a2 as Ie, a3 as yt, a4 as Xe, a5 as Ut, a6 as Ft } from "./time-BmemrSJ4.mjs";
|
|
2
|
+
function Ge(y, t, ...p) {
|
|
3
|
+
var i = y, o = Qe, r;
|
|
4
|
+
rt(() => {
|
|
5
|
+
o !== (o = t()) && (r && (Wt(r), r = null), r = at(() => (
|
|
6
|
+
/** @type {SnippetFn} */
|
|
7
|
+
o(i, ...p)
|
|
8
|
+
)));
|
|
9
|
+
}, mt), Ue && (i = ot);
|
|
10
|
+
}
|
|
11
|
+
function Gt(y, t, p) {
|
|
12
|
+
Ue && _t();
|
|
13
|
+
var i = y, o = At, r, a, n = null, s = Nt() ? Bt : qt;
|
|
14
|
+
function _() {
|
|
15
|
+
r && xt(r), n !== null && (n.lastChild.remove(), i.before(n), n = null), r = a;
|
|
16
|
+
}
|
|
17
|
+
rt(() => {
|
|
18
|
+
if (s(o, o = t())) {
|
|
19
|
+
var d = i, I = wt();
|
|
20
|
+
I && (n = document.createDocumentFragment(), n.append(d = bt())), a = at(() => p(d)), I ? $e.add_callback(_) : _();
|
|
21
|
+
}
|
|
22
|
+
}), Ue && (i = ot);
|
|
23
|
+
}
|
|
24
|
+
function Kt(y, t, p) {
|
|
25
|
+
Ue && _t();
|
|
26
|
+
var i = y, o, r, a = null, n = null;
|
|
27
|
+
function s() {
|
|
28
|
+
r && (xt(r), r = null), a && (a.lastChild.remove(), i.before(a), a = null), r = n, n = null;
|
|
29
|
+
}
|
|
30
|
+
rt(() => {
|
|
31
|
+
if (o !== (o = t())) {
|
|
32
|
+
var _ = wt();
|
|
33
|
+
if (o) {
|
|
34
|
+
var d = i;
|
|
35
|
+
_ && (a = document.createDocumentFragment(), a.append(d = bt()), r && $e.skipped_effects.add(r)), n = at(() => p(d, o));
|
|
36
|
+
}
|
|
37
|
+
_ ? $e.add_callback(s) : s();
|
|
38
|
+
}
|
|
39
|
+
}, mt), Ue && (i = ot);
|
|
40
|
+
}
|
|
41
|
+
var Vt = F("<fortyfour-player></fortyfour-player>", 2);
|
|
42
|
+
const Xt = { hash: "svelte-1uea9wj", code: ":host {display:block;}" };
|
|
43
|
+
function Yt(y, t) {
|
|
44
|
+
pe(t, !0), be(y, Xt);
|
|
45
|
+
let p = u(t, "recordingId", 7), i = u(t, "theme", 7, ""), o = u(t, "apiHost", 7, "api.44.audio");
|
|
46
|
+
const r = W(() => {
|
|
47
|
+
if (!i())
|
|
48
|
+
return "";
|
|
49
|
+
const s = i().split(",").map((d) => d.trim()), _ = [];
|
|
50
|
+
return s[0] && _.push(`--fortyfour-player-background: ${s[0]}`), s[1] && _.push(`--fortyfour-player-text: ${s[1]}`), s[2] && _.push(`--fortyfour-player-accent: ${s[2]}`), s[4] && _.push(`--fortyfour-player-muted: ${s[4]}`), s[5] && _.push(`--fortyfour-player-border: ${s[5]}`), s[0] && _.push(`--fortyfour-player-surface: ${s[0]}`), _.join("; ");
|
|
51
|
+
});
|
|
52
|
+
var a = {
|
|
53
|
+
get recordingId() {
|
|
54
|
+
return p();
|
|
55
|
+
},
|
|
56
|
+
set recordingId(s) {
|
|
57
|
+
p(s), c();
|
|
58
|
+
},
|
|
59
|
+
get theme() {
|
|
60
|
+
return i();
|
|
61
|
+
},
|
|
62
|
+
set theme(s = "") {
|
|
63
|
+
i(s), c();
|
|
64
|
+
},
|
|
65
|
+
get apiHost() {
|
|
66
|
+
return o();
|
|
67
|
+
},
|
|
68
|
+
set apiHost(s = "api.44.audio") {
|
|
69
|
+
o(s), c();
|
|
70
|
+
}
|
|
71
|
+
}, n = Vt();
|
|
72
|
+
return H(() => te(n, "api-host", o())), H(() => te(n, "recording-id", p())), te(n, "preload", "metadata"), H(() => Le(n, e(r))), x(y, n), ge(a);
|
|
73
|
+
}
|
|
74
|
+
customElements.define("fortyfour-audio-player", ue(
|
|
75
|
+
Yt,
|
|
76
|
+
{
|
|
77
|
+
apiHost: { attribute: "api-host" },
|
|
78
|
+
recordingId: { attribute: "recording-id" },
|
|
79
|
+
theme: { attribute: "theme" }
|
|
80
|
+
},
|
|
81
|
+
[],
|
|
82
|
+
[],
|
|
83
|
+
!1
|
|
84
|
+
));
|
|
85
|
+
var Zt = F("<fortyfour-mini-player></fortyfour-mini-player>", 2);
|
|
86
|
+
const Jt = {
|
|
87
|
+
hash: "svelte-1pz3muj",
|
|
88
|
+
code: ":host {--fortyfour-player-mini-background-color: #3b82f6;--fortyfour-player-mini-icon-color: #ffffff;--fortyfour-player-mini-ring-track-color: transparent;display:inline-block;}fortyfour-mini-player.svelte-1pz3muj {--fortyfour-mini-player-background: var(--fortyfour-player-mini-background-color);--fortyfour-mini-player-accent: var(--fortyfour-player-mini-icon-color);--fortyfour-mini-player-ring: var(--fortyfour-player-mini-ring-track-color);}"
|
|
89
|
+
};
|
|
90
|
+
function Qt(y, t) {
|
|
91
|
+
pe(t, !0), be(y, Jt);
|
|
92
|
+
let p = u(t, "apiHost", 7, "api.44.audio"), i = u(t, "recordingId", 7), o = u(t, "visualization", 7, "none"), r = u(t, "rippleIntensity", 7, 1), a = u(t, "hover", 7, "none"), n = u(t, "preload", 7, "none"), s = u(t, "shape", 7, "circle"), _ = u(t, "blobAnimate", 7, !1), d = u(t, "blobSpeed", 7, 20);
|
|
93
|
+
var I = {
|
|
94
|
+
get apiHost() {
|
|
95
|
+
return p();
|
|
96
|
+
},
|
|
97
|
+
set apiHost(l = "api.44.audio") {
|
|
98
|
+
p(l), c();
|
|
99
|
+
},
|
|
100
|
+
get recordingId() {
|
|
101
|
+
return i();
|
|
102
|
+
},
|
|
103
|
+
set recordingId(l) {
|
|
104
|
+
i(l), c();
|
|
105
|
+
},
|
|
106
|
+
get visualization() {
|
|
107
|
+
return o();
|
|
108
|
+
},
|
|
109
|
+
set visualization(l = "none") {
|
|
110
|
+
o(l), c();
|
|
111
|
+
},
|
|
112
|
+
get rippleIntensity() {
|
|
113
|
+
return r();
|
|
114
|
+
},
|
|
115
|
+
set rippleIntensity(l = 1) {
|
|
116
|
+
r(l), c();
|
|
117
|
+
},
|
|
118
|
+
get hover() {
|
|
119
|
+
return a();
|
|
120
|
+
},
|
|
121
|
+
set hover(l = "none") {
|
|
122
|
+
a(l), c();
|
|
123
|
+
},
|
|
124
|
+
get preload() {
|
|
125
|
+
return n();
|
|
126
|
+
},
|
|
127
|
+
set preload(l = "none") {
|
|
128
|
+
n(l), c();
|
|
129
|
+
},
|
|
130
|
+
get shape() {
|
|
131
|
+
return s();
|
|
132
|
+
},
|
|
133
|
+
set shape(l = "circle") {
|
|
134
|
+
s(l), c();
|
|
135
|
+
},
|
|
136
|
+
get blobAnimate() {
|
|
137
|
+
return _();
|
|
138
|
+
},
|
|
139
|
+
set blobAnimate(l = !1) {
|
|
140
|
+
_(l), c();
|
|
141
|
+
},
|
|
142
|
+
get blobSpeed() {
|
|
143
|
+
return d();
|
|
144
|
+
},
|
|
145
|
+
set blobSpeed(l = 20) {
|
|
146
|
+
d(l), c();
|
|
147
|
+
}
|
|
148
|
+
}, f = Zt();
|
|
149
|
+
return H(() => te(f, "api-host", p())), H(() => te(f, "recording-id", i())), H(() => te(f, "preload", n())), de(f, 1, "svelte-1pz3muj"), x(y, f), ge(I);
|
|
150
|
+
}
|
|
151
|
+
customElements.define("fortyfour-player-mini", ue(
|
|
152
|
+
Qt,
|
|
153
|
+
{
|
|
154
|
+
apiHost: { attribute: "api-host" },
|
|
155
|
+
recordingId: { attribute: "recording-id" },
|
|
156
|
+
visualization: { attribute: "visualization" },
|
|
157
|
+
rippleIntensity: { attribute: "ripple-intensity" },
|
|
158
|
+
hover: { attribute: "hover" },
|
|
159
|
+
preload: { attribute: "preload" },
|
|
160
|
+
shape: { attribute: "shape" },
|
|
161
|
+
blobAnimate: { attribute: "blob-animate", type: "Boolean" },
|
|
162
|
+
blobSpeed: { attribute: "blob-speed" }
|
|
163
|
+
},
|
|
164
|
+
[],
|
|
165
|
+
[],
|
|
166
|
+
!0
|
|
167
|
+
));
|
|
168
|
+
function it(y, t = 200) {
|
|
169
|
+
let p = q(!1);
|
|
170
|
+
return me(() => {
|
|
171
|
+
if (y()) {
|
|
172
|
+
const i = setTimeout(() => m(p, !0), t);
|
|
173
|
+
return () => clearTimeout(i);
|
|
174
|
+
} else
|
|
175
|
+
m(p, !1);
|
|
176
|
+
}), () => e(p);
|
|
177
|
+
}
|
|
178
|
+
function lt(y, t, p) {
|
|
179
|
+
me(() => {
|
|
180
|
+
p() ? y.setAttribute(t, "") : y.removeAttribute(t);
|
|
181
|
+
});
|
|
182
|
+
}
|
|
183
|
+
var $t = F('<div part="separator" class="separator svelte-38lkst">/</div>'), er = F('<div part="elapsed" class="elapsed svelte-38lkst"> </div> <!> <div part="total" class="total svelte-38lkst"> </div>', 1), tr = F('<div part="elapsed" class="elapsed svelte-38lkst">-:--</div> <div part="separator" class="separator svelte-38lkst">/</div> <div part="total" class="total svelte-38lkst">-:--</div>', 1), rr = F('<div part="duration" class="duration svelte-38lkst"><!></div>'), ar = F("<span> </span>"), or = F("<span>--</span>"), nr = F('<div part="duration" class="duration svelte-38lkst"><!></div>');
|
|
184
|
+
const ir = {
|
|
185
|
+
hash: "svelte-38lkst",
|
|
186
|
+
code: ":host {--fortyfour-player-duration-font-size: inherit;--fortyfour-player-duration-color: inherit;--fortyfour-player-duration-elapsed-color: inherit;--fortyfour-player-duration-total-color: inherit;--fortyfour-player-duration-separator-color: inherit;display:inline-flex;font-variant-numeric:tabular-nums;}.duration.svelte-38lkst {display:flex;align-items:center;gap:0.25em;font-size:var(--fortyfour-player-duration-font-size);color:var(--fortyfour-player-duration-color);}.elapsed.svelte-38lkst {color:var(--fortyfour-player-duration-elapsed-color);}.total.svelte-38lkst {color:var(--fortyfour-player-duration-total-color);}.separator.svelte-38lkst {color:var(--fortyfour-player-duration-separator-color);}"
|
|
187
|
+
};
|
|
188
|
+
function lr(y, t) {
|
|
189
|
+
pe(t, !0), be(y, ir);
|
|
190
|
+
const p = t.$$host;
|
|
191
|
+
let i = u(t, "format", 7, "-remaining"), o = u(t, "for", 7, ""), r = q(0), a = q(0), n = q("none");
|
|
192
|
+
const s = it(() => e(a) === 0, 200), _ = W(() => e(a) !== 0 ? !1 : e(n) === "none" ? !0 : s()), d = W(() => Ve(e(r))), I = W(() => Ve(e(a))), f = W(() => {
|
|
193
|
+
if (e(a) === 0)
|
|
194
|
+
return "";
|
|
195
|
+
switch (i()) {
|
|
196
|
+
case "-remaining":
|
|
197
|
+
return "-" + Ve(Math.max(0, e(a) - e(r)));
|
|
198
|
+
case "remaining":
|
|
199
|
+
return Ve(Math.max(0, e(a) - e(r)));
|
|
200
|
+
case "elapsed":
|
|
201
|
+
return e(d);
|
|
202
|
+
case "elapsed-text":
|
|
203
|
+
return pt(e(r));
|
|
204
|
+
case "total":
|
|
205
|
+
return e(I);
|
|
206
|
+
case "remaining-text":
|
|
207
|
+
return pt(Math.max(0, e(a) - e(r)));
|
|
208
|
+
case "%":
|
|
209
|
+
return Math.min(100, Math.ceil(e(r) / e(a) * 100)) + "%";
|
|
210
|
+
default:
|
|
211
|
+
return null;
|
|
212
|
+
}
|
|
213
|
+
});
|
|
214
|
+
me(() => {
|
|
215
|
+
if (!o()) {
|
|
216
|
+
console.warn("fortyfour-player-duration: 'for' attribute is required to link to a player");
|
|
217
|
+
return;
|
|
218
|
+
}
|
|
219
|
+
const B = document.getElementById(o());
|
|
220
|
+
if (!B) {
|
|
221
|
+
console.warn("fortyfour-player-duration: No parent player found");
|
|
222
|
+
return;
|
|
223
|
+
}
|
|
224
|
+
m(n, B.getAttribute("preload") || "none", !0), B.duration && m(a, B.duration, !0), B.currentTime && m(r, B.currentTime, !0);
|
|
225
|
+
function A(R) {
|
|
226
|
+
m(a, R.detail.duration, !0);
|
|
227
|
+
}
|
|
228
|
+
function X(R) {
|
|
229
|
+
m(r, R.detail.currentTime, !0), m(a, R.detail.duration, !0);
|
|
230
|
+
}
|
|
231
|
+
return B.addEventListener("loadedmetadata", A), B.addEventListener("timeupdate", X), () => {
|
|
232
|
+
B.removeEventListener("loadedmetadata", A), B.removeEventListener("timeupdate", X);
|
|
233
|
+
};
|
|
234
|
+
}), lt(p, "data-placeholder", () => e(_));
|
|
235
|
+
var l = {
|
|
236
|
+
get format() {
|
|
237
|
+
return i();
|
|
238
|
+
},
|
|
239
|
+
set format(B = "-remaining") {
|
|
240
|
+
i(B), c();
|
|
241
|
+
},
|
|
242
|
+
get for() {
|
|
243
|
+
return o();
|
|
244
|
+
},
|
|
245
|
+
set for(B = "") {
|
|
246
|
+
o(B), c();
|
|
247
|
+
}
|
|
248
|
+
}, P = ee(), b = J(P);
|
|
249
|
+
{
|
|
250
|
+
var j = (B) => {
|
|
251
|
+
var A = rr(), X = G(A);
|
|
252
|
+
{
|
|
253
|
+
var R = (k) => {
|
|
254
|
+
var D = er(), T = J(D), L = G(T, !0);
|
|
255
|
+
N(T);
|
|
256
|
+
var M = ye(T, 2);
|
|
257
|
+
Ce(M, t, "separator", {}, (E) => {
|
|
258
|
+
var Q = $t();
|
|
259
|
+
ze(1, Q, () => Pe, () => ({ duration: 400 })), x(E, Q);
|
|
260
|
+
});
|
|
261
|
+
var z = ye(M, 2), g = G(z, !0);
|
|
262
|
+
N(z), H(() => {
|
|
263
|
+
je(L, e(d)), je(g, e(I));
|
|
264
|
+
}), ze(1, T, () => Pe, () => ({ duration: 400 })), ze(1, z, () => Pe, () => ({ duration: 400 })), x(k, D);
|
|
265
|
+
}, V = (k) => {
|
|
266
|
+
var D = ee(), T = J(D);
|
|
267
|
+
{
|
|
268
|
+
var L = (M) => {
|
|
269
|
+
var z = ee(), g = J(z);
|
|
270
|
+
Ce(g, t, "placeholder", {}, (E) => {
|
|
271
|
+
var Q = tr();
|
|
272
|
+
Dt(4), x(E, Q);
|
|
273
|
+
}), x(M, z);
|
|
274
|
+
};
|
|
275
|
+
K(
|
|
276
|
+
T,
|
|
277
|
+
(M) => {
|
|
278
|
+
e(_) && M(L);
|
|
279
|
+
},
|
|
280
|
+
!0
|
|
281
|
+
);
|
|
282
|
+
}
|
|
283
|
+
x(k, D);
|
|
284
|
+
};
|
|
285
|
+
K(X, (k) => {
|
|
286
|
+
e(a) !== 0 ? k(R) : k(V, !1);
|
|
287
|
+
});
|
|
288
|
+
}
|
|
289
|
+
N(A), x(B, A);
|
|
290
|
+
}, C = (B) => {
|
|
291
|
+
var A = nr(), X = G(A);
|
|
292
|
+
{
|
|
293
|
+
var R = (k) => {
|
|
294
|
+
var D = ar(), T = G(D, !0);
|
|
295
|
+
N(D), H(() => je(T, e(f))), ze(1, D, () => Pe, () => ({ duration: 400 })), x(k, D);
|
|
296
|
+
}, V = (k) => {
|
|
297
|
+
var D = ee(), T = J(D);
|
|
298
|
+
{
|
|
299
|
+
var L = (M) => {
|
|
300
|
+
var z = ee(), g = J(z);
|
|
301
|
+
Ce(g, t, "placeholder", {}, (E) => {
|
|
302
|
+
var Q = or();
|
|
303
|
+
x(E, Q);
|
|
304
|
+
}), x(M, z);
|
|
305
|
+
};
|
|
306
|
+
K(
|
|
307
|
+
T,
|
|
308
|
+
(M) => {
|
|
309
|
+
e(_) && M(L);
|
|
310
|
+
},
|
|
311
|
+
!0
|
|
312
|
+
);
|
|
313
|
+
}
|
|
314
|
+
x(k, D);
|
|
315
|
+
};
|
|
316
|
+
K(X, (k) => {
|
|
317
|
+
e(a) !== 0 ? k(R) : k(V, !1);
|
|
318
|
+
});
|
|
319
|
+
}
|
|
320
|
+
N(A), x(B, A);
|
|
321
|
+
};
|
|
322
|
+
K(b, (B) => {
|
|
323
|
+
i() === "elapsed/total" ? B(j) : B(C, !1);
|
|
324
|
+
});
|
|
325
|
+
}
|
|
326
|
+
return x(y, P), ge(l);
|
|
327
|
+
}
|
|
328
|
+
customElements.define("fortyfour-player-duration", ue(lr, { format: { attribute: "format" }, for: { attribute: "for" } }, ["separator", "placeholder"], [], !0));
|
|
329
|
+
var sr = Me('<rect style="rx: var(--fortyfour-player-waveform-bar-radius, 1px)"></rect>'), ur = F('<div class="container svelte-7i2lww"><svg width="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="svelte-7i2lww"><!></svg></div>');
|
|
330
|
+
const cr = {
|
|
331
|
+
hash: "svelte-7i2lww",
|
|
332
|
+
code: "svg.svelte-7i2lww {box-sizing:border-box;margin:0;padding:0;}.container.svelte-7i2lww {flex:1;height:100%;box-sizing:border-box;margin:0;padding:0;display:flex;align-items:center;}.bar.svelte-7i2lww {transition:fill 0.2s;}.progress.svelte-7i2lww {fill:var(--fortyfour-player-waveform-progress-color);}.track.svelte-7i2lww {fill:var(--fortyfour-player-waveform-track-color);}"
|
|
333
|
+
};
|
|
334
|
+
function kt(y, t) {
|
|
335
|
+
pe(t, !0), be(y, cr);
|
|
336
|
+
function p(k, D) {
|
|
337
|
+
const T = k.length / D, L = [];
|
|
338
|
+
for (let M = 0; M < D; M++) {
|
|
339
|
+
const z = Math.floor(M * T), g = Math.floor((M + 1) * T), E = k.slice(z, Math.max(z + 1, g)), Q = E.reduce((w, h) => w + h * h, 0), oe = Math.sqrt(Q / E.length);
|
|
340
|
+
L.push(oe);
|
|
341
|
+
}
|
|
342
|
+
return L;
|
|
343
|
+
}
|
|
344
|
+
let i = u(t, "data", 7), o = u(t, "timeMs", 7, null), r = u(t, "barWidth", 7, 3), a = u(t, "spacing", 7, 1), n = u(t, "minHeight", 7, 3), s = q(0), _ = q(56), d = q(!1), I = null;
|
|
345
|
+
Fe(() => {
|
|
346
|
+
const k = new ResizeObserver((D) => {
|
|
347
|
+
for (let T of D)
|
|
348
|
+
T.contentBoxSize ? (m(s, T.contentBoxSize[0]?.inlineSize || T.contentBoxSize.inlineSize, !0), m(_, T.contentBoxSize[0]?.blockSize || T.contentBoxSize.blockSize || 56, !0)) : (m(s, T.contentRect.width, !0), m(_, T.contentRect.height || 56, !0)), m(d, !0);
|
|
349
|
+
});
|
|
350
|
+
return I && k.observe(I), () => {
|
|
351
|
+
k.disconnect();
|
|
352
|
+
};
|
|
353
|
+
});
|
|
354
|
+
const f = 100, l = W(() => Math.floor(e(s) / (r() + a()))), P = W(() => p(i(), e(l))), b = W(() => e(P).length ? i().length / e(P).length : 1), j = W(() => f * e(b)), C = W(() => e(P).map((k) => {
|
|
355
|
+
const D = Math.max(n(), Math.round(k / 100 * (e(_) - n()) + n()));
|
|
356
|
+
return D % 2 === 0 ? D + 1 : D;
|
|
357
|
+
}));
|
|
358
|
+
var B = {
|
|
359
|
+
get data() {
|
|
360
|
+
return i();
|
|
361
|
+
},
|
|
362
|
+
set data(k) {
|
|
363
|
+
i(k), c();
|
|
364
|
+
},
|
|
365
|
+
get timeMs() {
|
|
366
|
+
return o();
|
|
367
|
+
},
|
|
368
|
+
set timeMs(k = null) {
|
|
369
|
+
o(k), c();
|
|
370
|
+
},
|
|
371
|
+
get barWidth() {
|
|
372
|
+
return r();
|
|
373
|
+
},
|
|
374
|
+
set barWidth(k = 3) {
|
|
375
|
+
r(k), c();
|
|
376
|
+
},
|
|
377
|
+
get spacing() {
|
|
378
|
+
return a();
|
|
379
|
+
},
|
|
380
|
+
set spacing(k = 1) {
|
|
381
|
+
a(k), c();
|
|
382
|
+
},
|
|
383
|
+
get minHeight() {
|
|
384
|
+
return n();
|
|
385
|
+
},
|
|
386
|
+
set minHeight(k = 3) {
|
|
387
|
+
n(k), c();
|
|
388
|
+
}
|
|
389
|
+
}, A = ur(), X = G(A), R = G(X);
|
|
390
|
+
{
|
|
391
|
+
var V = (k) => {
|
|
392
|
+
var D = ee(), T = J(D);
|
|
393
|
+
Be(T, 17, () => e(C), Ae, (L, M, z) => {
|
|
394
|
+
const g = W(() => z * e(j) < o());
|
|
395
|
+
var E = sr();
|
|
396
|
+
H(() => {
|
|
397
|
+
de(E, 0, nt(["bar", e(g) ? "progress" : "track"]), "svelte-7i2lww"), Z(E, "x", z * (r() + a())), Z(E, "y", e(_) / 4 - e(M) / 2), Z(E, "width", r() - 1), Z(E, "height", e(M));
|
|
398
|
+
}), x(L, E);
|
|
399
|
+
}), x(k, D);
|
|
400
|
+
};
|
|
401
|
+
K(R, (k) => {
|
|
402
|
+
e(d) && k(V);
|
|
403
|
+
});
|
|
404
|
+
}
|
|
405
|
+
return N(X), N(A), Ee(A, (k) => I = k, () => I), H(() => {
|
|
406
|
+
Z(X, "height", e(_)), Z(X, "viewBox", `0 0 ${e(s)} ${e(_) / 2}`);
|
|
407
|
+
}), x(y, A), ge(B);
|
|
408
|
+
}
|
|
409
|
+
ue(
|
|
410
|
+
kt,
|
|
411
|
+
{
|
|
412
|
+
data: {},
|
|
413
|
+
timeMs: {},
|
|
414
|
+
barWidth: {},
|
|
415
|
+
spacing: {},
|
|
416
|
+
minHeight: {}
|
|
417
|
+
},
|
|
418
|
+
[],
|
|
419
|
+
[],
|
|
420
|
+
!0
|
|
421
|
+
);
|
|
422
|
+
var fr = F('<div class="track svelte-11a7nsg"><div class="progress svelte-11a7nsg"></div></div>'), dr = F('<div class="container svelte-11a7nsg"><!></div>');
|
|
423
|
+
const vr = {
|
|
424
|
+
hash: "svelte-11a7nsg",
|
|
425
|
+
code: ".container.svelte-11a7nsg {flex:1;display:flex;align-items:center;height:100%;}.track.svelte-11a7nsg {width:100%;background:var(--fortyfour-player-waveform-track-color);overflow:hidden;}.progress.svelte-11a7nsg {height:100%;background:var(--fortyfour-player-waveform-progress-color);transition:width 0.1s linear;}"
|
|
426
|
+
};
|
|
427
|
+
function zt(y, t) {
|
|
428
|
+
pe(t, !0), be(y, vr);
|
|
429
|
+
let p = u(t, "data", 7), i = u(t, "timeMs", 7, null), o = u(t, "lineWidth", 7, 4), r = q(0), a = q(!1), n = null;
|
|
430
|
+
Fe(() => {
|
|
431
|
+
const P = new ResizeObserver((b) => {
|
|
432
|
+
for (let j of b)
|
|
433
|
+
j.contentBoxSize ? m(r, j.contentBoxSize[0]?.inlineSize || j.contentBoxSize.inlineSize, !0) : m(r, j.contentRect.width, !0), m(a, !0);
|
|
434
|
+
});
|
|
435
|
+
return n && P.observe(n), () => {
|
|
436
|
+
P.disconnect();
|
|
437
|
+
};
|
|
438
|
+
});
|
|
439
|
+
const s = 100, _ = W(() => {
|
|
440
|
+
if (i() === null || i() === 0 || !p().length) return 0;
|
|
441
|
+
const P = p().length * s;
|
|
442
|
+
return Math.min(100, i() / P * 100);
|
|
443
|
+
});
|
|
444
|
+
var d = {
|
|
445
|
+
get data() {
|
|
446
|
+
return p();
|
|
447
|
+
},
|
|
448
|
+
set data(P) {
|
|
449
|
+
p(P), c();
|
|
450
|
+
},
|
|
451
|
+
get timeMs() {
|
|
452
|
+
return i();
|
|
453
|
+
},
|
|
454
|
+
set timeMs(P = null) {
|
|
455
|
+
i(P), c();
|
|
456
|
+
},
|
|
457
|
+
get lineWidth() {
|
|
458
|
+
return o();
|
|
459
|
+
},
|
|
460
|
+
set lineWidth(P = 4) {
|
|
461
|
+
o(P), c();
|
|
462
|
+
}
|
|
463
|
+
}, I = dr(), f = G(I);
|
|
464
|
+
{
|
|
465
|
+
var l = (P) => {
|
|
466
|
+
var b = fr(), j = G(b);
|
|
467
|
+
N(b), H(() => {
|
|
468
|
+
Le(b, `height: ${o() ?? ""}px; border-radius: ${o() / 2}px`), Le(j, `width: ${e(_) ?? ""}%; border-radius: ${o() / 2}px`);
|
|
469
|
+
}), x(P, b);
|
|
470
|
+
};
|
|
471
|
+
K(f, (P) => {
|
|
472
|
+
e(a) && P(l);
|
|
473
|
+
});
|
|
474
|
+
}
|
|
475
|
+
return N(I), Ee(I, (P) => n = P, () => n), x(y, I), ge(d);
|
|
476
|
+
}
|
|
477
|
+
ue(zt, { data: {}, timeMs: {}, lineWidth: {} }, [], [], !0);
|
|
478
|
+
var pr = Me('<path class="waveform-line progress svelte-189wzd8"></path>'), gr = Me('<path class="waveform-line track svelte-189wzd8"></path><!>', 1), yr = F('<div class="container svelte-189wzd8"><svg width="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" preserveAspectRatio="none" class="svelte-189wzd8"><!></svg></div>');
|
|
479
|
+
const hr = {
|
|
480
|
+
hash: "svelte-189wzd8",
|
|
481
|
+
code: "svg.svelte-189wzd8 {box-sizing:border-box;margin:0;padding:0;}.container.svelte-189wzd8 {flex:1;height:100%;box-sizing:border-box;margin:0;padding:0;display:flex;align-items:center;}.waveform-line.svelte-189wzd8 {fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke 0.2s;}.track.svelte-189wzd8 {stroke:var(--fortyfour-player-waveform-track-color);}.progress.svelte-189wzd8 {stroke:var(--fortyfour-player-waveform-progress-color);}"
|
|
482
|
+
};
|
|
483
|
+
function Pt(y, t) {
|
|
484
|
+
pe(t, !0), be(y, hr);
|
|
485
|
+
function p(L, M) {
|
|
486
|
+
const z = L.length / M, g = [];
|
|
487
|
+
for (let E = 0; E < M; E++) {
|
|
488
|
+
const Q = Math.floor(E * z), oe = Math.floor((E + 1) * z), w = L.slice(Q, Math.max(Q + 1, oe)), h = w.reduce((S, O) => S + O * O, 0), v = Math.sqrt(h / w.length);
|
|
489
|
+
g.push(v);
|
|
490
|
+
}
|
|
491
|
+
return g;
|
|
492
|
+
}
|
|
493
|
+
let i = u(t, "data", 7), o = u(t, "timeMs", 7, null), r = u(t, "lineWidth", 7, 2), a = q(0), n = q(56), s = q(!1), _ = null;
|
|
494
|
+
Fe(() => {
|
|
495
|
+
const L = new ResizeObserver((M) => {
|
|
496
|
+
for (let z of M)
|
|
497
|
+
z.contentBoxSize ? (m(a, z.contentBoxSize[0]?.inlineSize || z.contentBoxSize.inlineSize, !0), m(n, z.contentBoxSize[0]?.blockSize || z.contentBoxSize.blockSize || 56, !0)) : (m(a, z.contentRect.width, !0), m(n, z.contentRect.height || 56, !0)), m(s, !0);
|
|
498
|
+
});
|
|
499
|
+
return _ && L.observe(_), () => {
|
|
500
|
+
L.disconnect();
|
|
501
|
+
};
|
|
502
|
+
});
|
|
503
|
+
const d = W(() => e(n) / 2), I = W(() => e(n) / 2 * 0.8), f = 100, l = 0.15, P = W(() => Math.max(2, Math.floor(e(a) * l))), b = W(() => p(i(), e(P))), j = W(() => {
|
|
504
|
+
if (o() === null || o() === 0) return 0;
|
|
505
|
+
const L = i().length * f, M = Math.min(1, o() / L), z = r() / 2, g = e(a) - z * 2;
|
|
506
|
+
return z + M * g;
|
|
507
|
+
}), C = W(() => {
|
|
508
|
+
if (!e(b).length || e(a) === 0) return [];
|
|
509
|
+
const L = r() / 2, M = e(a) - L * 2;
|
|
510
|
+
return e(b).map((z, g) => {
|
|
511
|
+
const E = L + g / (e(b).length - 1) * M, Q = Math.max(0.05, z / 100), oe = g % 2 === 0 ? -1 : 1, w = e(d) + oe * Q * e(I);
|
|
512
|
+
return { x: E, y: w };
|
|
513
|
+
});
|
|
514
|
+
});
|
|
515
|
+
function B(L) {
|
|
516
|
+
if (L.length === 0) return "";
|
|
517
|
+
let M = `M ${L[0].x} ${L[0].y}`;
|
|
518
|
+
for (let z = 1; z < L.length; z++) {
|
|
519
|
+
const g = L[z - 1], E = L[z], Q = g.x + (E.x - g.x) / 3, oe = g.y, w = g.x + (E.x - g.x) * 2 / 3, h = E.y;
|
|
520
|
+
M += ` C ${Q} ${oe}, ${w} ${h}, ${E.x} ${E.y}`;
|
|
521
|
+
}
|
|
522
|
+
return M;
|
|
523
|
+
}
|
|
524
|
+
const A = W(() => B(e(C))), X = W(() => {
|
|
525
|
+
if (e(C).length === 0 || e(j) <= 0) return "";
|
|
526
|
+
const L = [];
|
|
527
|
+
let M = null;
|
|
528
|
+
for (let g = 0; g < e(C).length; g++)
|
|
529
|
+
if (e(C)[g].x <= e(j))
|
|
530
|
+
L.push(e(C)[g]);
|
|
531
|
+
else {
|
|
532
|
+
M = e(C)[g];
|
|
533
|
+
break;
|
|
534
|
+
}
|
|
535
|
+
if (L.length === 0) return "";
|
|
536
|
+
const z = L[L.length - 1];
|
|
537
|
+
if (M && z.x < e(j)) {
|
|
538
|
+
const g = (e(j) - z.x) / (M.x - z.x), E = z.y + g * (M.y - z.y);
|
|
539
|
+
L.push({ x: e(j), y: E });
|
|
540
|
+
}
|
|
541
|
+
return B(L);
|
|
542
|
+
});
|
|
543
|
+
var R = {
|
|
544
|
+
get data() {
|
|
545
|
+
return i();
|
|
546
|
+
},
|
|
547
|
+
set data(L) {
|
|
548
|
+
i(L), c();
|
|
549
|
+
},
|
|
550
|
+
get timeMs() {
|
|
551
|
+
return o();
|
|
552
|
+
},
|
|
553
|
+
set timeMs(L = null) {
|
|
554
|
+
o(L), c();
|
|
555
|
+
},
|
|
556
|
+
get lineWidth() {
|
|
557
|
+
return r();
|
|
558
|
+
},
|
|
559
|
+
set lineWidth(L = 2) {
|
|
560
|
+
r(L), c();
|
|
561
|
+
}
|
|
562
|
+
}, V = yr(), k = G(V), D = G(k);
|
|
563
|
+
{
|
|
564
|
+
var T = (L) => {
|
|
565
|
+
var M = gr(), z = J(M), g = ye(z);
|
|
566
|
+
{
|
|
567
|
+
var E = (Q) => {
|
|
568
|
+
var oe = pr();
|
|
569
|
+
H(() => {
|
|
570
|
+
Z(oe, "d", e(X)), Z(oe, "stroke-width", r());
|
|
571
|
+
}), x(Q, oe);
|
|
572
|
+
};
|
|
573
|
+
K(g, (Q) => {
|
|
574
|
+
e(X) && Q(E);
|
|
575
|
+
});
|
|
576
|
+
}
|
|
577
|
+
H(() => {
|
|
578
|
+
Z(z, "d", e(A)), Z(z, "stroke-width", r());
|
|
579
|
+
}), x(L, M);
|
|
580
|
+
};
|
|
581
|
+
K(D, (L) => {
|
|
582
|
+
e(s) && e(A) && L(T);
|
|
583
|
+
});
|
|
584
|
+
}
|
|
585
|
+
return N(k), N(V), Ee(V, (L) => _ = L, () => _), H(() => {
|
|
586
|
+
Z(k, "height", e(n)), Z(k, "viewBox", `0 0 ${e(a)} ${e(n)}`);
|
|
587
|
+
}), x(y, V), ge(R);
|
|
588
|
+
}
|
|
589
|
+
ue(Pt, { data: {}, timeMs: {}, lineWidth: {} }, [], [], !0);
|
|
590
|
+
var mr = F('<div class="waveform-wrapper svelte-h4vbiy"><!></div>'), br = F('<div part="placeholder" class="waveform-wrapper svelte-h4vbiy"><!></div>'), wr = F('<div part="container" class="container svelte-h4vbiy"><!></div>');
|
|
591
|
+
const xr = {
|
|
592
|
+
hash: "svelte-h4vbiy",
|
|
593
|
+
code: ":host {--fortyfour-player-waveform-height: 56px;--fortyfour-player-waveform-progress-color: #3b82f6;--fortyfour-player-waveform-track-color: #d1d5db;--fortyfour-player-waveform-bar-radius: 1px;display:block;width:100%;}.container.svelte-h4vbiy {width:100%;height:var(--fortyfour-player-waveform-height);display:flex;align-items:center;}.waveform-wrapper.svelte-h4vbiy {flex:1;height:100%;display:flex;align-items:center;}"
|
|
594
|
+
};
|
|
595
|
+
function _r(y, t) {
|
|
596
|
+
pe(t, !0), be(y, xr);
|
|
597
|
+
const p = (R, V = Qe, k = Qe) => {
|
|
598
|
+
var D = ee(), T = J(D);
|
|
599
|
+
{
|
|
600
|
+
var L = (z) => {
|
|
601
|
+
zt(z, {
|
|
602
|
+
get data() {
|
|
603
|
+
return V();
|
|
604
|
+
},
|
|
605
|
+
get timeMs() {
|
|
606
|
+
return k();
|
|
607
|
+
},
|
|
608
|
+
get lineWidth() {
|
|
609
|
+
return s();
|
|
610
|
+
}
|
|
611
|
+
});
|
|
612
|
+
}, M = (z) => {
|
|
613
|
+
var g = ee(), E = J(g);
|
|
614
|
+
{
|
|
615
|
+
var Q = (w) => {
|
|
616
|
+
Pt(w, {
|
|
617
|
+
get data() {
|
|
618
|
+
return V();
|
|
619
|
+
},
|
|
620
|
+
get timeMs() {
|
|
621
|
+
return k();
|
|
622
|
+
},
|
|
623
|
+
get lineWidth() {
|
|
624
|
+
return s();
|
|
625
|
+
}
|
|
626
|
+
});
|
|
627
|
+
}, oe = (w) => {
|
|
628
|
+
kt(w, {
|
|
629
|
+
get data() {
|
|
630
|
+
return V();
|
|
631
|
+
},
|
|
632
|
+
get timeMs() {
|
|
633
|
+
return k();
|
|
634
|
+
},
|
|
635
|
+
get barWidth() {
|
|
636
|
+
return a();
|
|
637
|
+
},
|
|
638
|
+
get spacing() {
|
|
639
|
+
return n();
|
|
640
|
+
},
|
|
641
|
+
get minHeight() {
|
|
642
|
+
return _();
|
|
643
|
+
}
|
|
644
|
+
});
|
|
645
|
+
};
|
|
646
|
+
K(
|
|
647
|
+
E,
|
|
648
|
+
(w) => {
|
|
649
|
+
r() === "smooth" ? w(Q) : w(oe, !1);
|
|
650
|
+
},
|
|
651
|
+
!0
|
|
652
|
+
);
|
|
653
|
+
}
|
|
654
|
+
x(z, g);
|
|
655
|
+
};
|
|
656
|
+
K(T, (z) => {
|
|
657
|
+
r() === "progress" ? z(L) : z(M, !1);
|
|
658
|
+
});
|
|
659
|
+
}
|
|
660
|
+
x(R, D);
|
|
661
|
+
}, i = t.$$host;
|
|
662
|
+
let o = u(t, "for", 7, ""), r = u(t, "type", 7, "bars"), a = u(t, "barWidth", 7, 3), n = u(t, "barSpacing", 7, 1), s = u(t, "lineWidth", 7, 4), _ = u(t, "barMinHeight", 7, 3), d = q(null), I = q(0), f = q("none");
|
|
663
|
+
const l = it(() => e(d) === null, 200), P = W(() => e(d) !== null && e(d).length > 0 ? !1 : e(f) === "none" ? !0 : l());
|
|
664
|
+
me(() => {
|
|
665
|
+
if (!o()) {
|
|
666
|
+
console.warn("fortyfour-player-waveform: 'for' attribute is required to link to a player");
|
|
667
|
+
return;
|
|
668
|
+
}
|
|
669
|
+
const R = document.getElementById(o());
|
|
670
|
+
if (!R) {
|
|
671
|
+
console.warn(`fortyfour-player-waveform: No player found with id '${o()}'`);
|
|
672
|
+
return;
|
|
673
|
+
}
|
|
674
|
+
m(f, R.getAttribute("preload") || "none", !0), R.waveform && R.waveform.length > 0 && m(d, R.waveform, !0), R.currentTime && m(I, R.currentTime, !0);
|
|
675
|
+
function V(D) {
|
|
676
|
+
m(d, D.detail?.waveform, !0);
|
|
677
|
+
}
|
|
678
|
+
function k(D) {
|
|
679
|
+
m(I, D.detail.currentTime, !0);
|
|
680
|
+
}
|
|
681
|
+
return R.addEventListener("loadedmetadata", V), R.addEventListener("timeupdate", k), () => {
|
|
682
|
+
R.removeEventListener("loadedmetadata", V), R.removeEventListener("timeupdate", k);
|
|
683
|
+
};
|
|
684
|
+
}), lt(i, "data-placeholder", () => e(P));
|
|
685
|
+
const b = Array(100).fill(0);
|
|
686
|
+
var j = {
|
|
687
|
+
get for() {
|
|
688
|
+
return o();
|
|
689
|
+
},
|
|
690
|
+
set for(R = "") {
|
|
691
|
+
o(R), c();
|
|
692
|
+
},
|
|
693
|
+
get type() {
|
|
694
|
+
return r();
|
|
695
|
+
},
|
|
696
|
+
set type(R = "bars") {
|
|
697
|
+
r(R), c();
|
|
698
|
+
},
|
|
699
|
+
get barWidth() {
|
|
700
|
+
return a();
|
|
701
|
+
},
|
|
702
|
+
set barWidth(R = 3) {
|
|
703
|
+
a(R), c();
|
|
704
|
+
},
|
|
705
|
+
get barSpacing() {
|
|
706
|
+
return n();
|
|
707
|
+
},
|
|
708
|
+
set barSpacing(R = 1) {
|
|
709
|
+
n(R), c();
|
|
710
|
+
},
|
|
711
|
+
get lineWidth() {
|
|
712
|
+
return s();
|
|
713
|
+
},
|
|
714
|
+
set lineWidth(R = 4) {
|
|
715
|
+
s(R), c();
|
|
716
|
+
},
|
|
717
|
+
get barMinHeight() {
|
|
718
|
+
return _();
|
|
719
|
+
},
|
|
720
|
+
set barMinHeight(R = 3) {
|
|
721
|
+
_(R), c();
|
|
722
|
+
}
|
|
723
|
+
}, C = wr(), B = G(C);
|
|
724
|
+
{
|
|
725
|
+
var A = (R) => {
|
|
726
|
+
var V = mr(), k = G(V);
|
|
727
|
+
p(k, () => e(d), () => e(I)), N(V), ze(1, V, () => Pe, () => ({ duration: 400 })), x(R, V);
|
|
728
|
+
}, X = (R) => {
|
|
729
|
+
var V = ee(), k = J(V);
|
|
730
|
+
{
|
|
731
|
+
var D = (T) => {
|
|
732
|
+
var L = ee(), M = J(L);
|
|
733
|
+
Ce(M, t, "placeholder", {}, (z) => {
|
|
734
|
+
var g = br(), E = G(g);
|
|
735
|
+
p(E, () => b, () => 0), N(g), x(z, g);
|
|
736
|
+
}), x(T, L);
|
|
737
|
+
};
|
|
738
|
+
K(
|
|
739
|
+
k,
|
|
740
|
+
(T) => {
|
|
741
|
+
e(P) && T(D);
|
|
742
|
+
},
|
|
743
|
+
!0
|
|
744
|
+
);
|
|
745
|
+
}
|
|
746
|
+
x(R, V);
|
|
747
|
+
};
|
|
748
|
+
K(B, (R) => {
|
|
749
|
+
e(d) && e(d).length > 0 ? R(A) : R(X, !1);
|
|
750
|
+
});
|
|
751
|
+
}
|
|
752
|
+
return N(C), x(y, C), ge(j);
|
|
753
|
+
}
|
|
754
|
+
customElements.define("fortyfour-player-waveform", ue(
|
|
755
|
+
_r,
|
|
756
|
+
{
|
|
757
|
+
for: { attribute: "for" },
|
|
758
|
+
type: { attribute: "type" },
|
|
759
|
+
barWidth: { attribute: "bar-width", type: "Number" },
|
|
760
|
+
barSpacing: { attribute: "bar-spacing", type: "Number" },
|
|
761
|
+
lineWidth: { attribute: "line-width", type: "Number" },
|
|
762
|
+
barMinHeight: { attribute: "bar-min-height", type: "Number" }
|
|
763
|
+
},
|
|
764
|
+
["placeholder"],
|
|
765
|
+
[],
|
|
766
|
+
!0
|
|
767
|
+
));
|
|
768
|
+
var kr = (y, t) => m(t, y.target.value !== "original"), zr = F('<div class="language-select svelte-1cjx9l7"><select class="svelte-1cjx9l7"><option>Original</option><option>English</option></select></div>'), Pr = F('<div class="content svelte-1cjx9l7"><div class="text svelte-1cjx9l7"> </div></div>'), Lr = F("<span> </span>"), jr = F('<div class="content svelte-1cjx9l7"><div class="text caption-text svelte-1cjx9l7"></div></div>'), Ir = F("<span> </span>"), Er = F('<div class="text caption-text subtitle svelte-1cjx9l7"></div>'), Mr = F('<div class="content subtitle-content svelte-1cjx9l7"><!></div>'), Sr = F("<span> </span>"), Tr = F('<div class="content svelte-1cjx9l7"><div class="text caption-text svelte-1cjx9l7"></div></div>'), Rr = (y, t) => m(t, !0), Cr = F('... <button class="toggle-btn svelte-1cjx9l7">Show more</button>', 1), Hr = (y, t) => m(t, !1), Wr = F('<button class="toggle-btn svelte-1cjx9l7">Show less</button>'), Br = F('<div class="content svelte-1cjx9l7"><div class="text svelte-1cjx9l7"> <!></div></div>'), Ar = F('<div class="placeholder-lines svelte-1cjx9l7"><span class="placeholder-line svelte-1cjx9l7"></span> <span class="placeholder-line short svelte-1cjx9l7"></span></div>'), qr = F('<div class="container svelte-1cjx9l7"><!> <!></div>');
|
|
769
|
+
const Nr = {
|
|
770
|
+
hash: "svelte-1cjx9l7",
|
|
771
|
+
code: `:host {--fortyfour-player-transcription-placeholder-color: #e5e7eb;--fortyfour-player-transcription-color: #64748b;--fortyfour-player-transcription-active-color: #1e293b;--fortyfour-player-transcription-active-bg: #fef08a;--fortyfour-player-transcription-past-color: #1e293b;display:block;}.container.svelte-1cjx9l7 {width:100%;}.content.svelte-1cjx9l7 {width:100%;}.text.svelte-1cjx9l7 {white-space:pre-wrap;word-wrap:break-word;}.caption-text.svelte-1cjx9l7 {white-space:normal;color:var(--fortyfour-player-transcription-color);}.word.svelte-1cjx9l7 {transition:color 0.15s ease,
|
|
772
|
+
background-color 0.15s ease;border-radius:2px;padding:0 1px;margin:0 -1px;}.word.active[data-type="word"].svelte-1cjx9l7 {color:var(--fortyfour-player-transcription-active-color);background-color:var(--fortyfour-player-transcription-active-bg);}.word.past[data-type="word"].svelte-1cjx9l7 {color:var(--fortyfour-player-transcription-past-color);}.subtitle-content.svelte-1cjx9l7 {min-height:2em;display:flex;align-items:center;justify-content:center;}.subtitle.svelte-1cjx9l7 {text-align:center;}.toggle-btn.svelte-1cjx9l7 {font-size:0.75em;padding:0.25em 0.5em;margin-left:0.5em;border:1px solid currentColor;border-radius:4px;background:transparent;color:inherit;cursor:pointer;opacity:0.7;}.toggle-btn.svelte-1cjx9l7:hover {opacity:1;}.language-select.svelte-1cjx9l7 {margin-bottom:0.5em;}.language-select.svelte-1cjx9l7 select:where(.svelte-1cjx9l7) {font-size:0.75em;padding:0.25em 0.5em;border:1px solid currentColor;border-radius:4px;background:transparent;color:inherit;cursor:pointer;opacity:0.7;}.language-select.svelte-1cjx9l7 select:where(.svelte-1cjx9l7):hover {opacity:1;}.placeholder-lines.svelte-1cjx9l7 {display:flex;flex-direction:column;gap:0.5em;}.placeholder-line.svelte-1cjx9l7 {display:block;height:1em;background-color:var(--fortyfour-player-transcription-placeholder-color);border-radius:4px;}.placeholder-line.short.svelte-1cjx9l7 {width:60%;}`
|
|
773
|
+
};
|
|
774
|
+
function Dr(y, t) {
|
|
775
|
+
pe(t, !0), be(y, Nr);
|
|
776
|
+
const p = t.$$host;
|
|
777
|
+
let i = u(t, "for", 7, ""), o = u(t, "truncate", 7, 200), r = u(t, "mode", 7, "static"), a = q(null), n = q(null), s = q(null), _ = q(!1), d = q(!1), I = q("none"), f = q(0);
|
|
778
|
+
const l = it(() => e(a) === null, 200), P = W(() => e(a) !== null ? !1 : e(I) === "none" ? !0 : l()), b = W(() => e(_) && e(n) ? e(n) : e(a)), j = W(() => r() === "static" && o() > 0 && e(b) && e(b).length > o()), C = W(() => e(b) ? e(j) && !e(d) ? e(b).slice(0, o()) : e(b) : ""), B = W(() => e(n) !== null && e(n) !== ""), A = W(() => e(s) !== null && e(s).length > 0), X = W(() => !e(A) || r() === "static" ? -1 : e(s).findIndex((w) => e(f) >= w.start && e(f) <= w.end));
|
|
779
|
+
function R(w) {
|
|
780
|
+
const h = [];
|
|
781
|
+
let v = { words: [], start: 0, end: 0 };
|
|
782
|
+
for (const S of w) {
|
|
783
|
+
v.words.length === 0 && (v.start = S.start), v.words.push(S), v.end = S.end;
|
|
784
|
+
const O = S.text.trim();
|
|
785
|
+
(O.endsWith(".") || O.endsWith("?") || O.endsWith("!")) && (h.push(v), v = { words: [], start: 0, end: 0 });
|
|
786
|
+
}
|
|
787
|
+
return v.words.length > 0 && h.push(v), h;
|
|
788
|
+
}
|
|
789
|
+
const V = W(() => e(A) ? R(e(s)) : []), k = W(() => r() !== "subtitle" || e(V).length === 0 ? null : e(V).find((w) => e(f) >= w.start && e(f) <= w.end) ?? null);
|
|
790
|
+
function D(w) {
|
|
791
|
+
return e(f) >= w.start && e(f) <= w.end;
|
|
792
|
+
}
|
|
793
|
+
function T(w) {
|
|
794
|
+
return e(f) > w.end;
|
|
795
|
+
}
|
|
796
|
+
me(() => {
|
|
797
|
+
if (!i()) {
|
|
798
|
+
console.warn("fortyfour-player-transcription: 'for' attribute is required");
|
|
799
|
+
return;
|
|
800
|
+
}
|
|
801
|
+
const w = document.getElementById(i());
|
|
802
|
+
if (!w) {
|
|
803
|
+
console.warn(`fortyfour-player-transcription: No player found with id '${i()}'`);
|
|
804
|
+
return;
|
|
805
|
+
}
|
|
806
|
+
m(I, w.getAttribute("preload") || "none", !0), w.transcription && m(a, w.transcription, !0), w.translation && m(n, w.translation, !0), w.words && m(s, w.words, !0), w.currentTime && m(f, w.currentTime, !0);
|
|
807
|
+
function h(S) {
|
|
808
|
+
m(a, S.detail?.transcription ?? null, !0), m(n, S.detail?.translation ?? null, !0), m(s, S.detail?.words ?? null, !0);
|
|
809
|
+
}
|
|
810
|
+
function v(S) {
|
|
811
|
+
m(f, S.detail.currentTime, !0);
|
|
812
|
+
}
|
|
813
|
+
return w.addEventListener("loadedmetadata", h), w.addEventListener("timeupdate", v), () => {
|
|
814
|
+
w.removeEventListener("loadedmetadata", h), w.removeEventListener("timeupdate", v);
|
|
815
|
+
};
|
|
816
|
+
}), lt(p, "data-placeholder", () => e(P));
|
|
817
|
+
var L = {
|
|
818
|
+
get for() {
|
|
819
|
+
return i();
|
|
820
|
+
},
|
|
821
|
+
set for(w = "") {
|
|
822
|
+
i(w), c();
|
|
823
|
+
},
|
|
824
|
+
get truncate() {
|
|
825
|
+
return o();
|
|
826
|
+
},
|
|
827
|
+
set truncate(w = 200) {
|
|
828
|
+
o(w), c();
|
|
829
|
+
},
|
|
830
|
+
get mode() {
|
|
831
|
+
return r();
|
|
832
|
+
},
|
|
833
|
+
set mode(w = "static") {
|
|
834
|
+
r(w), c();
|
|
835
|
+
}
|
|
836
|
+
}, M = qr(), z = G(M);
|
|
837
|
+
{
|
|
838
|
+
var g = (w) => {
|
|
839
|
+
var h = zr(), v = G(h);
|
|
840
|
+
v.__change = [kr, _];
|
|
841
|
+
var S = G(v);
|
|
842
|
+
S.value = S.__value = "original";
|
|
843
|
+
var O = ye(S);
|
|
844
|
+
O.value = O.__value = "en", N(v), N(h), x(w, h);
|
|
845
|
+
};
|
|
846
|
+
K(z, (w) => {
|
|
847
|
+
e(B) && w(g);
|
|
848
|
+
});
|
|
849
|
+
}
|
|
850
|
+
var E = ye(z, 2);
|
|
851
|
+
{
|
|
852
|
+
var Q = (w) => {
|
|
853
|
+
var h = Pr(), v = G(h), S = G(v, !0);
|
|
854
|
+
N(v), N(h), H(() => je(S, e(n))), ze(1, h, () => Pe, () => ({ duration: 400 })), x(w, h);
|
|
855
|
+
}, oe = (w) => {
|
|
856
|
+
var h = ee(), v = J(h);
|
|
857
|
+
{
|
|
858
|
+
var S = ($) => {
|
|
859
|
+
var Y = jr(), ce = G(Y);
|
|
860
|
+
Be(ce, 21, () => e(s), Ae, (U, re, ne) => {
|
|
861
|
+
var ie = Lr();
|
|
862
|
+
let ve;
|
|
863
|
+
var fe = G(ie, !0);
|
|
864
|
+
N(ie), H(
|
|
865
|
+
(ae) => {
|
|
866
|
+
ve = de(ie, 1, "word svelte-1cjx9l7", null, ve, ae), Z(ie, "data-type", e(re).type), je(fe, e(re).text);
|
|
867
|
+
},
|
|
868
|
+
[
|
|
869
|
+
() => ({
|
|
870
|
+
active: ne === e(X),
|
|
871
|
+
past: ne < e(X)
|
|
872
|
+
})
|
|
873
|
+
]
|
|
874
|
+
), x(U, ie);
|
|
875
|
+
}), N(ce), N(Y), ze(1, Y, () => Pe, () => ({ duration: 400 })), x($, Y);
|
|
876
|
+
}, O = ($) => {
|
|
877
|
+
var Y = ee(), ce = J(Y);
|
|
878
|
+
{
|
|
879
|
+
var U = (ne) => {
|
|
880
|
+
var ie = Mr(), ve = G(ie);
|
|
881
|
+
{
|
|
882
|
+
var fe = (ae) => {
|
|
883
|
+
var he = Er();
|
|
884
|
+
Be(he, 21, () => e(k).words, Ae, (le, se) => {
|
|
885
|
+
var xe = Ir();
|
|
886
|
+
let _e;
|
|
887
|
+
var we = G(xe, !0);
|
|
888
|
+
N(xe), H(
|
|
889
|
+
(ke) => {
|
|
890
|
+
_e = de(xe, 1, "word svelte-1cjx9l7", null, _e, ke), Z(xe, "data-type", e(se).type), je(we, e(se).text);
|
|
891
|
+
},
|
|
892
|
+
[
|
|
893
|
+
() => ({
|
|
894
|
+
active: D(e(se)),
|
|
895
|
+
past: T(e(se))
|
|
896
|
+
})
|
|
897
|
+
]
|
|
898
|
+
), x(le, xe);
|
|
899
|
+
}), N(he), ze(1, he, () => Pe, () => ({ duration: 200 })), x(ae, he);
|
|
900
|
+
};
|
|
901
|
+
K(ve, (ae) => {
|
|
902
|
+
e(k) && ae(fe);
|
|
903
|
+
});
|
|
904
|
+
}
|
|
905
|
+
N(ie), x(ne, ie);
|
|
906
|
+
}, re = (ne) => {
|
|
907
|
+
var ie = ee(), ve = J(ie);
|
|
908
|
+
{
|
|
909
|
+
var fe = (he) => {
|
|
910
|
+
var le = Tr(), se = G(le);
|
|
911
|
+
Be(se, 21, () => e(s), Ae, (xe, _e, we) => {
|
|
912
|
+
var ke = ee(), Se = J(ke);
|
|
913
|
+
{
|
|
914
|
+
var He = (Re) => {
|
|
915
|
+
var Te = Sr();
|
|
916
|
+
let Ke;
|
|
917
|
+
var We = G(Te, !0);
|
|
918
|
+
N(Te), H(
|
|
919
|
+
(qe) => {
|
|
920
|
+
Ke = de(Te, 1, "word svelte-1cjx9l7", null, Ke, qe), Z(Te, "data-type", e(_e).type), je(We, e(_e).text);
|
|
921
|
+
},
|
|
922
|
+
[() => ({ active: we === e(X) })]
|
|
923
|
+
), ze(1, Te, () => Pe, () => ({ duration: 150 })), x(Re, Te);
|
|
924
|
+
};
|
|
925
|
+
K(Se, (Re) => {
|
|
926
|
+
e(f) >= e(_e).start && Re(He);
|
|
927
|
+
});
|
|
928
|
+
}
|
|
929
|
+
x(xe, ke);
|
|
930
|
+
}), N(se), N(le), ze(1, le, () => Pe, () => ({ duration: 400 })), x(he, le);
|
|
931
|
+
}, ae = (he) => {
|
|
932
|
+
var le = ee(), se = J(le);
|
|
933
|
+
{
|
|
934
|
+
var xe = (we) => {
|
|
935
|
+
var ke = Br(), Se = G(ke), He = G(Se, !0), Re = ye(He);
|
|
936
|
+
{
|
|
937
|
+
var Te = (We) => {
|
|
938
|
+
var qe = Cr(), Ze = ye(J(qe));
|
|
939
|
+
Ze.__click = [Rr, d], x(We, qe);
|
|
940
|
+
}, Ke = (We) => {
|
|
941
|
+
var qe = ee(), Ze = J(qe);
|
|
942
|
+
{
|
|
943
|
+
var Ht = (Je) => {
|
|
944
|
+
var vt = Wr();
|
|
945
|
+
vt.__click = [Hr, d], x(Je, vt);
|
|
946
|
+
};
|
|
947
|
+
K(
|
|
948
|
+
Ze,
|
|
949
|
+
(Je) => {
|
|
950
|
+
e(j) && e(d) && Je(Ht);
|
|
951
|
+
},
|
|
952
|
+
!0
|
|
953
|
+
);
|
|
954
|
+
}
|
|
955
|
+
x(We, qe);
|
|
956
|
+
};
|
|
957
|
+
K(Re, (We) => {
|
|
958
|
+
e(j) && !e(d) ? We(Te) : We(Ke, !1);
|
|
959
|
+
});
|
|
960
|
+
}
|
|
961
|
+
N(Se), N(ke), H(() => je(He, e(C))), ze(1, ke, () => Pe, () => ({ duration: 400 })), x(we, ke);
|
|
962
|
+
}, _e = (we) => {
|
|
963
|
+
var ke = ee(), Se = J(ke);
|
|
964
|
+
{
|
|
965
|
+
var He = (Re) => {
|
|
966
|
+
var Te = Ar();
|
|
967
|
+
x(Re, Te);
|
|
968
|
+
};
|
|
969
|
+
K(
|
|
970
|
+
Se,
|
|
971
|
+
(Re) => {
|
|
972
|
+
e(P) && Re(He);
|
|
973
|
+
},
|
|
974
|
+
!0
|
|
975
|
+
);
|
|
976
|
+
}
|
|
977
|
+
x(we, ke);
|
|
978
|
+
};
|
|
979
|
+
K(
|
|
980
|
+
se,
|
|
981
|
+
(we) => {
|
|
982
|
+
e(a) ? we(xe) : we(_e, !1);
|
|
983
|
+
},
|
|
984
|
+
!0
|
|
985
|
+
);
|
|
986
|
+
}
|
|
987
|
+
x(he, le);
|
|
988
|
+
};
|
|
989
|
+
K(
|
|
990
|
+
ve,
|
|
991
|
+
(he) => {
|
|
992
|
+
r() === "progressive" && e(A) ? he(fe) : he(ae, !1);
|
|
993
|
+
},
|
|
994
|
+
!0
|
|
995
|
+
);
|
|
996
|
+
}
|
|
997
|
+
x(ne, ie);
|
|
998
|
+
};
|
|
999
|
+
K(
|
|
1000
|
+
ce,
|
|
1001
|
+
(ne) => {
|
|
1002
|
+
r() === "subtitle" && e(A) ? ne(U) : ne(re, !1);
|
|
1003
|
+
},
|
|
1004
|
+
!0
|
|
1005
|
+
);
|
|
1006
|
+
}
|
|
1007
|
+
x($, Y);
|
|
1008
|
+
};
|
|
1009
|
+
K(
|
|
1010
|
+
v,
|
|
1011
|
+
($) => {
|
|
1012
|
+
r() === "karaoke" && e(A) ? $(S) : $(O, !1);
|
|
1013
|
+
},
|
|
1014
|
+
!0
|
|
1015
|
+
);
|
|
1016
|
+
}
|
|
1017
|
+
x(w, h);
|
|
1018
|
+
};
|
|
1019
|
+
K(E, (w) => {
|
|
1020
|
+
e(_) && e(B) ? w(Q) : w(oe, !1);
|
|
1021
|
+
});
|
|
1022
|
+
}
|
|
1023
|
+
return N(M), x(y, M), ge(L);
|
|
1024
|
+
}
|
|
1025
|
+
Ne(["change", "click"]);
|
|
1026
|
+
customElements.define("fortyfour-player-transcription", ue(
|
|
1027
|
+
Dr,
|
|
1028
|
+
{
|
|
1029
|
+
for: { attribute: "for" },
|
|
1030
|
+
truncate: { attribute: "truncate", type: "Number" },
|
|
1031
|
+
mode: { attribute: "mode" }
|
|
1032
|
+
},
|
|
1033
|
+
[],
|
|
1034
|
+
[],
|
|
1035
|
+
!0
|
|
1036
|
+
));
|
|
1037
|
+
const et = {
|
|
1038
|
+
delay: 0
|
|
1039
|
+
};
|
|
1040
|
+
typeof window < "u" && (window.__44_dev = et);
|
|
1041
|
+
function Or(y) {
|
|
1042
|
+
return new Promise((t) => setTimeout(t, y));
|
|
1043
|
+
}
|
|
1044
|
+
async function Ur(y, t, p) {
|
|
1045
|
+
const i = `https://${t}/v1/recordings/${p}/player`;
|
|
1046
|
+
et.delay > 0 && await Or(et.delay);
|
|
1047
|
+
const o = await fetch(i, { signal: y });
|
|
1048
|
+
if (!o.ok)
|
|
1049
|
+
throw o.status === 404 ? new Error(`Recording not found: ${p}`) : new Error(`Failed to fetch recording (${o.status})`);
|
|
1050
|
+
const r = await o.json();
|
|
1051
|
+
if (r.status !== "ready")
|
|
1052
|
+
throw new Error(`Recording not ready: ${p}`);
|
|
1053
|
+
return r;
|
|
1054
|
+
}
|
|
1055
|
+
var Fr = F("<audio hidden></audio>");
|
|
1056
|
+
function Gr(y, t) {
|
|
1057
|
+
pe(t, !0);
|
|
1058
|
+
const p = t.$$host;
|
|
1059
|
+
let i = u(t, "recordingId", 7), o = u(t, "apiHost", 7, "api.44.audio"), r = u(t, "preload", 7, "none"), a = q(null), n = q(null), s = q(0), _ = q(0), d = q("idle"), I = null, f = null;
|
|
1060
|
+
const l = W(() => ({
|
|
1061
|
+
waveform: e(a)?.waveform ?? [],
|
|
1062
|
+
transcription: e(a)?.transcription ?? null,
|
|
1063
|
+
translation: e(a)?.translation ?? null,
|
|
1064
|
+
words: e(a)?.words ?? null
|
|
1065
|
+
}));
|
|
1066
|
+
function P() {
|
|
1067
|
+
p.duration = e(_), p.currentTime = e(s), p.state = e(d), p.metadata = e(l), p.setAttribute("data-state", e(d));
|
|
1068
|
+
}
|
|
1069
|
+
function b(g) {
|
|
1070
|
+
P(), p.dispatchEvent(new CustomEvent(g, { bubbles: !0, composed: !0 }));
|
|
1071
|
+
}
|
|
1072
|
+
function j() {
|
|
1073
|
+
if (!e(n)) {
|
|
1074
|
+
f = null;
|
|
1075
|
+
return;
|
|
1076
|
+
}
|
|
1077
|
+
m(s, Math.floor(e(n).currentTime * 1e3), !0), b("timeupdate"), f = requestAnimationFrame(j);
|
|
1078
|
+
}
|
|
1079
|
+
async function C() {
|
|
1080
|
+
if (e(d) === "idle") {
|
|
1081
|
+
if (!i()) {
|
|
1082
|
+
console.warn("fortyfour-recording: recording-id attribute is required");
|
|
1083
|
+
return;
|
|
1084
|
+
}
|
|
1085
|
+
I = new AbortController(), m(d, "loading"), b("loading");
|
|
1086
|
+
try {
|
|
1087
|
+
const g = await Ur(I.signal, o(), i());
|
|
1088
|
+
m(a, g, !0), m(_, g.duration, !0), m(d, "ready"), b("loadedmetadata");
|
|
1089
|
+
} catch (g) {
|
|
1090
|
+
if (g.name === "AbortError")
|
|
1091
|
+
return;
|
|
1092
|
+
console.warn(`fortyfour-recording: ${g.message}`), m(d, "error"), b("error");
|
|
1093
|
+
}
|
|
1094
|
+
}
|
|
1095
|
+
}
|
|
1096
|
+
async function B() {
|
|
1097
|
+
if (!e(n)) {
|
|
1098
|
+
console.warn("fortyfour-recording: play() called but audio element not ready");
|
|
1099
|
+
return;
|
|
1100
|
+
}
|
|
1101
|
+
try {
|
|
1102
|
+
await e(n).play(), m(d, "playing"), b("play"), f || j();
|
|
1103
|
+
} catch {
|
|
1104
|
+
m(d, "error"), b("error");
|
|
1105
|
+
}
|
|
1106
|
+
}
|
|
1107
|
+
function A() {
|
|
1108
|
+
if (!e(n)) {
|
|
1109
|
+
console.warn("fortyfour-recording: pause() called but audio element not ready");
|
|
1110
|
+
return;
|
|
1111
|
+
}
|
|
1112
|
+
e(n).pause(), m(d, "paused"), cancelAnimationFrame(f), f = null, b("pause");
|
|
1113
|
+
}
|
|
1114
|
+
async function X() {
|
|
1115
|
+
if (e(d) === "error") {
|
|
1116
|
+
console.warn("fortyfour-recording: togglePlay() called while in error state");
|
|
1117
|
+
return;
|
|
1118
|
+
}
|
|
1119
|
+
e(d) !== "loading" && (e(d) === "playing" ? A() : e(d) === "idle" ? (await C(), await gt(), e(d) === "ready" && await B()) : await B());
|
|
1120
|
+
}
|
|
1121
|
+
function R(g) {
|
|
1122
|
+
if (!e(n)) {
|
|
1123
|
+
console.warn("fortyfour-recording: seek() called but audio element not ready");
|
|
1124
|
+
return;
|
|
1125
|
+
}
|
|
1126
|
+
if (typeof g != "number" || Number.isNaN(g)) {
|
|
1127
|
+
console.warn("fortyfour-recording: seek() called with invalid time:", g);
|
|
1128
|
+
return;
|
|
1129
|
+
}
|
|
1130
|
+
if (g < 0 || g > e(_)) {
|
|
1131
|
+
console.warn("fortyfour-recording: seek() time out of range:", g, "duration:", e(_));
|
|
1132
|
+
return;
|
|
1133
|
+
}
|
|
1134
|
+
e(n).currentTime = g / 1e3, m(s, Math.floor(g), !0), b("timeupdate");
|
|
1135
|
+
}
|
|
1136
|
+
async function V() {
|
|
1137
|
+
cancelAnimationFrame(f), f = null, m(s, e(_), !0), b("timeupdate"), await gt(), m(s, 0), e(n).currentTime = 0, b("timeupdate"), m(d, "ready"), b("ended");
|
|
1138
|
+
}
|
|
1139
|
+
function k() {
|
|
1140
|
+
m(d, "error"), b("error");
|
|
1141
|
+
}
|
|
1142
|
+
function D() {
|
|
1143
|
+
I?.abort(), cancelAnimationFrame(f), f = null, e(n)?.pause(), m(a, null), m(s, 0), m(_, 0), m(d, "idle"), T = i(), b("timeupdate");
|
|
1144
|
+
}
|
|
1145
|
+
let T = i();
|
|
1146
|
+
me(() => {
|
|
1147
|
+
i() !== T && D(), e(d) === "idle" && (r() === "auto" || r() === "metadata") && C();
|
|
1148
|
+
}), p.togglePlay = X, p.seek = R, P(), Ot(() => {
|
|
1149
|
+
I?.abort(), e(n)?.pause(), cancelAnimationFrame(f);
|
|
1150
|
+
});
|
|
1151
|
+
var L = {
|
|
15
1152
|
get recordingId() {
|
|
1153
|
+
return i();
|
|
1154
|
+
},
|
|
1155
|
+
set recordingId(g) {
|
|
1156
|
+
i(g), c();
|
|
1157
|
+
},
|
|
1158
|
+
get apiHost() {
|
|
1159
|
+
return o();
|
|
1160
|
+
},
|
|
1161
|
+
set apiHost(g = "api.44.audio") {
|
|
1162
|
+
o(g), c();
|
|
1163
|
+
},
|
|
1164
|
+
get preload() {
|
|
1165
|
+
return r();
|
|
1166
|
+
},
|
|
1167
|
+
set preload(g = "none") {
|
|
1168
|
+
r(g), c();
|
|
1169
|
+
}
|
|
1170
|
+
}, M = ee(), z = J(M);
|
|
1171
|
+
return Gt(z, i, (g) => {
|
|
1172
|
+
var E = ee(), Q = J(E);
|
|
1173
|
+
{
|
|
1174
|
+
var oe = (w) => {
|
|
1175
|
+
var h = Fr();
|
|
1176
|
+
Ee(h, (v) => m(n, v), () => e(n)), H(() => {
|
|
1177
|
+
Z(h, "src", e(a).audioUrl), Z(h, "preload", r() === "auto" ? "auto" : "none");
|
|
1178
|
+
}), Ie("ended", h, V), Ie("error", h, k), x(w, h);
|
|
1179
|
+
};
|
|
1180
|
+
K(Q, (w) => {
|
|
1181
|
+
e(a)?.audioUrl && w(oe);
|
|
1182
|
+
});
|
|
1183
|
+
}
|
|
1184
|
+
x(g, E);
|
|
1185
|
+
}), x(y, M), ge(L);
|
|
1186
|
+
}
|
|
1187
|
+
customElements.define("fortyfour-recording", ue(
|
|
1188
|
+
Gr,
|
|
1189
|
+
{
|
|
1190
|
+
apiHost: { attribute: "api-host", reflect: !0 },
|
|
1191
|
+
recordingId: { attribute: "recording-id", reflect: !0 },
|
|
1192
|
+
preload: { reflect: !0 }
|
|
1193
|
+
},
|
|
1194
|
+
[],
|
|
1195
|
+
[],
|
|
1196
|
+
!1
|
|
1197
|
+
));
|
|
1198
|
+
function De(y) {
|
|
1199
|
+
if (isNaN(y) || y < 0)
|
|
1200
|
+
return "-:--";
|
|
1201
|
+
const t = Math.floor(y / 3600), p = Math.floor(y % 3600 / 60), i = y % 60;
|
|
1202
|
+
return t > 0 ? `${t}:${p.toString().padStart(2, "0")}:${i.toString().padStart(2, "0")}` : `${p}:${i.toString().padStart(2, "0")}`;
|
|
1203
|
+
}
|
|
1204
|
+
function ht(y) {
|
|
1205
|
+
if (isNaN(y) || y < 0)
|
|
1206
|
+
return "--";
|
|
1207
|
+
const t = Math.floor(y / 1e3), p = Math.floor(t / 60), i = t % 60;
|
|
1208
|
+
return p > 0 ? `${p}m ${i}s` : `${i}s`;
|
|
1209
|
+
}
|
|
1210
|
+
function st(y, t = 200) {
|
|
1211
|
+
let p = q(!1);
|
|
1212
|
+
return me(() => {
|
|
1213
|
+
if (y()) {
|
|
1214
|
+
const i = setTimeout(() => m(p, !0), t);
|
|
1215
|
+
return () => clearTimeout(i);
|
|
1216
|
+
} else
|
|
1217
|
+
m(p, !1);
|
|
1218
|
+
}), () => e(p);
|
|
1219
|
+
}
|
|
1220
|
+
function Oe(y, t, p) {
|
|
1221
|
+
me(() => {
|
|
1222
|
+
p() ? y.setAttribute(t, "") : y.removeAttribute(t);
|
|
1223
|
+
});
|
|
1224
|
+
}
|
|
1225
|
+
const Kr = {
|
|
1226
|
+
hash: "svelte-hrw77x",
|
|
1227
|
+
code: `:host {--fortyfour-duration-font-family: system-ui, sans-serif;--fortyfour-duration-font-size: 14px;--fortyfour-duration-color: #1f2937;display:flex;align-items:center;justify-content:center;font-family:var(--fortyfour-duration-font-family);font-size:var(--fortyfour-duration-font-size);font-variant-numeric:tabular-nums;color:var(--fortyfour-duration-color);min-height:1lh;white-space:nowrap;}
|
|
1228
|
+
|
|
1229
|
+
@media (prefers-color-scheme: dark) {:host {--fortyfour-duration-color: #f3f4f6;}
|
|
1230
|
+
}`
|
|
1231
|
+
};
|
|
1232
|
+
function Vr(y, t) {
|
|
1233
|
+
pe(t, !0), be(y, Kr);
|
|
1234
|
+
const p = t.$$host;
|
|
1235
|
+
let i = u(t, "for", 7, ""), o = u(t, "format", 7, "elapsed/total"), r = q(0), a = q(0);
|
|
1236
|
+
function n(P, b, j) {
|
|
1237
|
+
const C = Math.floor(P / 1e3), B = Math.floor(b / 1e3), A = Math.max(0, B - C);
|
|
1238
|
+
switch (j) {
|
|
1239
|
+
case "-remaining":
|
|
1240
|
+
return "-" + De(A);
|
|
1241
|
+
case "remaining":
|
|
1242
|
+
return De(A);
|
|
1243
|
+
case "elapsed":
|
|
1244
|
+
return De(C);
|
|
1245
|
+
case "elapsed-text":
|
|
1246
|
+
return ht(P);
|
|
1247
|
+
case "total":
|
|
1248
|
+
return De(B);
|
|
1249
|
+
case "elapsed/total":
|
|
1250
|
+
return De(C) + " / " + De(B);
|
|
1251
|
+
case "remaining-text":
|
|
1252
|
+
return ht(Math.max(0, b - P));
|
|
1253
|
+
case "%":
|
|
1254
|
+
return Math.min(100, Math.ceil(P / b * 100)) + "%";
|
|
1255
|
+
default:
|
|
1256
|
+
return console.warn(`fortyfour-duration: invalid format "${j}"`), null;
|
|
1257
|
+
}
|
|
1258
|
+
}
|
|
1259
|
+
function s(P) {
|
|
1260
|
+
switch (P) {
|
|
1261
|
+
case "-remaining":
|
|
1262
|
+
return "-0:00";
|
|
1263
|
+
case "remaining":
|
|
1264
|
+
case "elapsed":
|
|
1265
|
+
case "total":
|
|
1266
|
+
return "0:00";
|
|
1267
|
+
case "elapsed/total":
|
|
1268
|
+
return "0:00 / 0:00";
|
|
1269
|
+
case "%":
|
|
1270
|
+
return "0%";
|
|
1271
|
+
default:
|
|
1272
|
+
return "0";
|
|
1273
|
+
}
|
|
1274
|
+
}
|
|
1275
|
+
Oe(p, "data-placeholder", () => e(a) === 0), me(() => {
|
|
1276
|
+
if (!i()) {
|
|
1277
|
+
console.warn("fortyfour-duration: for attribute is required");
|
|
1278
|
+
return;
|
|
1279
|
+
}
|
|
1280
|
+
const b = p.getRootNode().getElementById(i());
|
|
1281
|
+
if (!b) {
|
|
1282
|
+
console.warn(`fortyfour-duration: element with id "${i()}" not found`);
|
|
1283
|
+
return;
|
|
1284
|
+
}
|
|
1285
|
+
m(a, b.duration || 0, !0), m(r, b.currentTime || 0, !0);
|
|
1286
|
+
function j() {
|
|
1287
|
+
m(r, b.currentTime, !0), m(a, b.duration, !0);
|
|
1288
|
+
}
|
|
1289
|
+
return b.addEventListener("loadedmetadata", j), b.addEventListener("timeupdate", j), () => {
|
|
1290
|
+
b.removeEventListener("loadedmetadata", j), b.removeEventListener("timeupdate", j);
|
|
1291
|
+
};
|
|
1292
|
+
});
|
|
1293
|
+
var _ = {
|
|
1294
|
+
get for() {
|
|
1295
|
+
return i();
|
|
1296
|
+
},
|
|
1297
|
+
set for(P = "") {
|
|
1298
|
+
i(P), c();
|
|
1299
|
+
},
|
|
1300
|
+
get format() {
|
|
1301
|
+
return o();
|
|
1302
|
+
},
|
|
1303
|
+
set format(P = "elapsed/total") {
|
|
1304
|
+
o(P), c();
|
|
1305
|
+
}
|
|
1306
|
+
}, d = ee(), I = J(d);
|
|
1307
|
+
{
|
|
1308
|
+
var f = (P) => {
|
|
1309
|
+
var b = yt();
|
|
1310
|
+
H((j) => je(b, j), [
|
|
1311
|
+
() => n(e(r), e(a), o())
|
|
1312
|
+
]), x(P, b);
|
|
1313
|
+
}, l = (P) => {
|
|
1314
|
+
var b = ee(), j = J(b);
|
|
1315
|
+
Ce(j, t, "placeholder", {}, (C) => {
|
|
1316
|
+
var B = yt();
|
|
1317
|
+
H((A) => je(B, A), [() => s(o())]), x(C, B);
|
|
1318
|
+
}), x(P, b);
|
|
1319
|
+
};
|
|
1320
|
+
K(I, (P) => {
|
|
1321
|
+
e(a) !== 0 ? P(f) : P(l, !1);
|
|
1322
|
+
});
|
|
1323
|
+
}
|
|
1324
|
+
return x(y, d), ge(_);
|
|
1325
|
+
}
|
|
1326
|
+
customElements.define("fortyfour-duration", ue(
|
|
1327
|
+
Vr,
|
|
1328
|
+
{
|
|
1329
|
+
for: { attribute: "for", reflect: !0 },
|
|
1330
|
+
format: { attribute: "format", reflect: !0 }
|
|
1331
|
+
},
|
|
1332
|
+
["placeholder"],
|
|
1333
|
+
[],
|
|
1334
|
+
!0
|
|
1335
|
+
));
|
|
1336
|
+
var Xr = F('<div part="ring" class="ring-progress svelte-qaqt0h"><div class="ring-inner svelte-qaqt0h"></div></div>');
|
|
1337
|
+
const Yr = {
|
|
1338
|
+
hash: "svelte-qaqt0h",
|
|
1339
|
+
code: `.ring-progress.svelte-qaqt0h {position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;background:conic-gradient(
|
|
1340
|
+
from 0deg,
|
|
1341
|
+
var(--fortyfour-play-button-ring-fill-color) var(--progress-deg),
|
|
1342
|
+
var(--fortyfour-play-button-ring-track-color) var(--progress-deg)
|
|
1343
|
+
);}.ring-inner.svelte-qaqt0h {position:absolute;inset:var(--fortyfour-play-button-ring-width);border-radius:inherit;background:var(--fortyfour-play-button-background-color);}`
|
|
1344
|
+
};
|
|
1345
|
+
function ut(y, t) {
|
|
1346
|
+
pe(t, !0), be(y, Yr);
|
|
1347
|
+
let p = u(t, "progress", 7, 0);
|
|
1348
|
+
const i = W(() => p() * 360);
|
|
1349
|
+
var o = {
|
|
1350
|
+
get progress() {
|
|
1351
|
+
return p();
|
|
1352
|
+
},
|
|
1353
|
+
set progress(a = 0) {
|
|
1354
|
+
p(a), c();
|
|
1355
|
+
}
|
|
1356
|
+
}, r = Xr();
|
|
1357
|
+
return H(() => Le(r, `--progress-deg: ${e(i) ?? ""}deg`)), x(y, r), ge(o);
|
|
1358
|
+
}
|
|
1359
|
+
ue(ut, { progress: {} }, [], [], !0);
|
|
1360
|
+
var Zr = F('<div part="ripple" class="ripple ripple-small svelte-lgp3pt"></div>'), Jr = F('<div part="ripple" class="ripple ripple-medium svelte-lgp3pt"></div>'), Qr = F('<div part="ripple" class="ripple ripple-large svelte-lgp3pt"></div>'), $r = F("<!> <!> <!>", 1);
|
|
1361
|
+
const ea = {
|
|
1362
|
+
hash: "svelte-lgp3pt",
|
|
1363
|
+
code: `.ripple.svelte-lgp3pt {position:absolute;inset:0;border-radius:inherit;border:2px solid var(--fortyfour-play-button-background-color);pointer-events:none;
|
|
1364
|
+
animation: ripple 1.5s ease-out infinite;}.ripple-small.svelte-lgp3pt {
|
|
1365
|
+
animation-name: svelte-lgp3pt-ripple-small;}.ripple-medium.svelte-lgp3pt {
|
|
1366
|
+
animation-name: svelte-lgp3pt-ripple-medium;}.ripple-large.svelte-lgp3pt {
|
|
1367
|
+
animation-name: svelte-lgp3pt-ripple-large;}
|
|
1368
|
+
|
|
1369
|
+
@keyframes svelte-lgp3pt-ripple-small {
|
|
1370
|
+
0% {
|
|
1371
|
+
transform: scale(1);
|
|
1372
|
+
opacity: 0.4;
|
|
1373
|
+
}
|
|
1374
|
+
100% {
|
|
1375
|
+
transform: scale(calc(1 + 0.15 * var(--intensity, 1)));
|
|
1376
|
+
opacity: 0;
|
|
1377
|
+
}
|
|
1378
|
+
}
|
|
1379
|
+
|
|
1380
|
+
@keyframes svelte-lgp3pt-ripple-medium {
|
|
1381
|
+
0% {
|
|
1382
|
+
transform: scale(1);
|
|
1383
|
+
opacity: 0.5;
|
|
1384
|
+
}
|
|
1385
|
+
100% {
|
|
1386
|
+
transform: scale(calc(1 + 0.3 * var(--intensity, 1)));
|
|
1387
|
+
opacity: 0;
|
|
1388
|
+
}
|
|
1389
|
+
}
|
|
1390
|
+
|
|
1391
|
+
@keyframes svelte-lgp3pt-ripple-large {
|
|
1392
|
+
0% {
|
|
1393
|
+
transform: scale(1);
|
|
1394
|
+
opacity: 0.6;
|
|
1395
|
+
}
|
|
1396
|
+
100% {
|
|
1397
|
+
transform: scale(calc(1 + 0.5 * var(--intensity, 1)));
|
|
1398
|
+
opacity: 0;
|
|
1399
|
+
}
|
|
1400
|
+
}
|
|
1401
|
+
|
|
1402
|
+
@media (prefers-reduced-motion: reduce) {.ripple.svelte-lgp3pt {
|
|
1403
|
+
animation: none;}
|
|
1404
|
+
}`
|
|
1405
|
+
};
|
|
1406
|
+
function ct(y, t) {
|
|
1407
|
+
pe(t, !0), be(y, ea);
|
|
1408
|
+
let p = u(t, "isPlaying", 7, !1), i = u(t, "amplitude", 7, 0), o = u(t, "intensity", 7, 1), r = q(Xe({ small: !1, medium: !1, large: !1 }));
|
|
1409
|
+
function a(j) {
|
|
1410
|
+
return j < 33 ? "small" : j < 66 ? "medium" : "large";
|
|
1411
|
+
}
|
|
1412
|
+
me(() => {
|
|
1413
|
+
if (!p()) {
|
|
1414
|
+
m(r, { small: !1, medium: !1, large: !1 }, !0);
|
|
1415
|
+
return;
|
|
1416
|
+
}
|
|
1417
|
+
const j = a(i());
|
|
1418
|
+
e(r)[j] || (e(r)[j] = !0);
|
|
1419
|
+
});
|
|
1420
|
+
function n(j) {
|
|
1421
|
+
e(r)[j] = !1;
|
|
1422
|
+
}
|
|
1423
|
+
var s = {
|
|
1424
|
+
get isPlaying() {
|
|
1425
|
+
return p();
|
|
1426
|
+
},
|
|
1427
|
+
set isPlaying(j = !1) {
|
|
1428
|
+
p(j), c();
|
|
1429
|
+
},
|
|
1430
|
+
get amplitude() {
|
|
1431
|
+
return i();
|
|
1432
|
+
},
|
|
1433
|
+
set amplitude(j = 0) {
|
|
1434
|
+
i(j), c();
|
|
1435
|
+
},
|
|
1436
|
+
get intensity() {
|
|
1437
|
+
return o();
|
|
1438
|
+
},
|
|
1439
|
+
set intensity(j = 1) {
|
|
1440
|
+
o(j), c();
|
|
1441
|
+
}
|
|
1442
|
+
}, _ = $r(), d = J(_);
|
|
1443
|
+
{
|
|
1444
|
+
var I = (j) => {
|
|
1445
|
+
var C = Zr();
|
|
1446
|
+
H(() => Le(C, `--intensity: ${o() ?? ""};`)), Ie("animationend", C, () => n("small")), x(j, C);
|
|
1447
|
+
};
|
|
1448
|
+
K(d, (j) => {
|
|
1449
|
+
e(r).small && j(I);
|
|
1450
|
+
});
|
|
1451
|
+
}
|
|
1452
|
+
var f = ye(d, 2);
|
|
1453
|
+
{
|
|
1454
|
+
var l = (j) => {
|
|
1455
|
+
var C = Jr();
|
|
1456
|
+
H(() => Le(C, `--intensity: ${o() ?? ""};`)), Ie("animationend", C, () => n("medium")), x(j, C);
|
|
1457
|
+
};
|
|
1458
|
+
K(f, (j) => {
|
|
1459
|
+
e(r).medium && j(l);
|
|
1460
|
+
});
|
|
1461
|
+
}
|
|
1462
|
+
var P = ye(f, 2);
|
|
1463
|
+
{
|
|
1464
|
+
var b = (j) => {
|
|
1465
|
+
var C = Qr();
|
|
1466
|
+
H(() => Le(C, `--intensity: ${o() ?? ""};`)), Ie("animationend", C, () => n("large")), x(j, C);
|
|
1467
|
+
};
|
|
1468
|
+
K(P, (j) => {
|
|
1469
|
+
e(r).large && j(b);
|
|
1470
|
+
});
|
|
1471
|
+
}
|
|
1472
|
+
return x(y, _), ge(s);
|
|
1473
|
+
}
|
|
1474
|
+
ue(ct, { isPlaying: {}, amplitude: {}, intensity: {} }, [], [], !0);
|
|
1475
|
+
var ta = (y, t) => {
|
|
1476
|
+
y.currentTarget.focus({ preventScroll: !0 }), t()?.(y);
|
|
1477
|
+
}, ra = F('<div class="shape-wrapper svelte-nzw87g"><!> <button part="button"><!> <span part="icon" class="icon svelte-nzw87g"><!></span></button></div>');
|
|
1478
|
+
const aa = {
|
|
1479
|
+
hash: "svelte-nzw87g",
|
|
1480
|
+
code: ".shape-wrapper.svelte-nzw87g {position:relative;width:var(--fortyfour-play-button-size, 48px);height:var(--fortyfour-play-button-size, 48px);font-size:var(--fortyfour-play-button-size, 48px);}.play-button.svelte-nzw87g {position:relative;width:100%;height:100%;border:var(--fortyfour-play-button-border-width) solid var(--fortyfour-play-button-border-color);cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--fortyfour-play-button-background-color);color:var(--fortyfour-play-button-icon-color);}.play-button.svelte-nzw87g:focus-visible {outline:var(--fortyfour-play-button-focus-width) solid var(--fortyfour-play-button-focus-color);outline-offset:var(--fortyfour-play-button-focus-offset);}.play-button.svelte-nzw87g:disabled {opacity:0.5;cursor:not-allowed;}.play-button.has-ring-progress.svelte-nzw87g {border:none;}.icon.svelte-nzw87g {position:relative;z-index:1;width:1em;height:1em;display:flex;align-items:center;justify-content:center;}.icon.svelte-nzw87g svg {width:100%;height:100%;fill:currentColor;}"
|
|
1481
|
+
};
|
|
1482
|
+
function Ye(y, t) {
|
|
1483
|
+
pe(t, !0), be(y, aa);
|
|
1484
|
+
let p = u(t, "onclick", 7), i = u(t, "disabled", 7, !1), o = u(t, "loading", 7, !1), r = u(t, "visualization", 7, "none"), a = u(t, "progressPercent", 7, 0), n = u(t, "isPlaying", 7, !1), s = u(t, "amplitude", 7, 0), _ = u(t, "rippleIntensity", 7, 1), d = u(t, "ariaLabel", 7, "Play"), I = u(t, "borderRadius", 7, "50%"), f = u(t, "children", 7);
|
|
1485
|
+
var l = {
|
|
1486
|
+
get onclick() {
|
|
1487
|
+
return p();
|
|
1488
|
+
},
|
|
1489
|
+
set onclick(k) {
|
|
1490
|
+
p(k), c();
|
|
1491
|
+
},
|
|
1492
|
+
get disabled() {
|
|
1493
|
+
return i();
|
|
1494
|
+
},
|
|
1495
|
+
set disabled(k = !1) {
|
|
1496
|
+
i(k), c();
|
|
1497
|
+
},
|
|
1498
|
+
get loading() {
|
|
1499
|
+
return o();
|
|
1500
|
+
},
|
|
1501
|
+
set loading(k = !1) {
|
|
1502
|
+
o(k), c();
|
|
1503
|
+
},
|
|
1504
|
+
get visualization() {
|
|
1505
|
+
return r();
|
|
1506
|
+
},
|
|
1507
|
+
set visualization(k = "none") {
|
|
1508
|
+
r(k), c();
|
|
1509
|
+
},
|
|
1510
|
+
get progressPercent() {
|
|
1511
|
+
return a();
|
|
1512
|
+
},
|
|
1513
|
+
set progressPercent(k = 0) {
|
|
1514
|
+
a(k), c();
|
|
1515
|
+
},
|
|
1516
|
+
get isPlaying() {
|
|
1517
|
+
return n();
|
|
1518
|
+
},
|
|
1519
|
+
set isPlaying(k = !1) {
|
|
1520
|
+
n(k), c();
|
|
1521
|
+
},
|
|
1522
|
+
get amplitude() {
|
|
1523
|
+
return s();
|
|
1524
|
+
},
|
|
1525
|
+
set amplitude(k = 0) {
|
|
1526
|
+
s(k), c();
|
|
1527
|
+
},
|
|
1528
|
+
get rippleIntensity() {
|
|
1529
|
+
return _();
|
|
1530
|
+
},
|
|
1531
|
+
set rippleIntensity(k = 1) {
|
|
1532
|
+
_(k), c();
|
|
1533
|
+
},
|
|
1534
|
+
get ariaLabel() {
|
|
1535
|
+
return d();
|
|
1536
|
+
},
|
|
1537
|
+
set ariaLabel(k = "Play") {
|
|
1538
|
+
d(k), c();
|
|
1539
|
+
},
|
|
1540
|
+
get borderRadius() {
|
|
1541
|
+
return I();
|
|
1542
|
+
},
|
|
1543
|
+
set borderRadius(k = "50%") {
|
|
1544
|
+
I(k), c();
|
|
1545
|
+
},
|
|
1546
|
+
get children() {
|
|
1547
|
+
return f();
|
|
1548
|
+
},
|
|
1549
|
+
set children(k) {
|
|
1550
|
+
f(k), c();
|
|
1551
|
+
}
|
|
1552
|
+
}, P = ra(), b = G(P);
|
|
1553
|
+
{
|
|
1554
|
+
var j = (k) => {
|
|
1555
|
+
ct(k, {
|
|
1556
|
+
get isPlaying() {
|
|
1557
|
+
return n();
|
|
1558
|
+
},
|
|
1559
|
+
get amplitude() {
|
|
1560
|
+
return s();
|
|
1561
|
+
},
|
|
1562
|
+
get intensity() {
|
|
1563
|
+
return _();
|
|
1564
|
+
}
|
|
1565
|
+
});
|
|
1566
|
+
};
|
|
1567
|
+
K(b, (k) => {
|
|
1568
|
+
r() === "ripple" && k(j);
|
|
1569
|
+
});
|
|
1570
|
+
}
|
|
1571
|
+
var C = ye(b, 2);
|
|
1572
|
+
let B;
|
|
1573
|
+
C.__click = [ta, p];
|
|
1574
|
+
var A = G(C);
|
|
1575
|
+
{
|
|
1576
|
+
var X = (k) => {
|
|
1577
|
+
ut(k, {
|
|
1578
|
+
get progress() {
|
|
1579
|
+
return a();
|
|
1580
|
+
}
|
|
1581
|
+
});
|
|
1582
|
+
};
|
|
1583
|
+
K(A, (k) => {
|
|
1584
|
+
r() === "ring" && k(X);
|
|
1585
|
+
});
|
|
1586
|
+
}
|
|
1587
|
+
var R = ye(A, 2), V = G(R);
|
|
1588
|
+
return Ge(V, f), N(R), N(C), N(P), H(
|
|
1589
|
+
(k) => {
|
|
1590
|
+
Le(P, `border-radius: ${I() ?? ""}`), B = de(C, 1, "play-button svelte-nzw87g", null, B, k), C.disabled = i(), Z(C, "aria-label", d()), Z(C, "aria-busy", o()), Le(C, `border-radius: ${I() ?? ""}`);
|
|
1591
|
+
},
|
|
1592
|
+
[() => ({ "has-ring-progress": r() === "ring" })]
|
|
1593
|
+
), x(y, P), ge(l);
|
|
1594
|
+
}
|
|
1595
|
+
Ne(["click"]);
|
|
1596
|
+
ue(
|
|
1597
|
+
Ye,
|
|
1598
|
+
{
|
|
1599
|
+
onclick: {},
|
|
1600
|
+
disabled: {},
|
|
1601
|
+
loading: {},
|
|
1602
|
+
visualization: {},
|
|
1603
|
+
progressPercent: {},
|
|
1604
|
+
isPlaying: {},
|
|
1605
|
+
amplitude: {},
|
|
1606
|
+
rippleIntensity: {},
|
|
1607
|
+
ariaLabel: {},
|
|
1608
|
+
borderRadius: {},
|
|
1609
|
+
children: {}
|
|
1610
|
+
},
|
|
1611
|
+
[],
|
|
1612
|
+
[],
|
|
1613
|
+
!0
|
|
1614
|
+
);
|
|
1615
|
+
function tt(y, t) {
|
|
1616
|
+
pe(t, !0);
|
|
1617
|
+
let p = u(t, "onclick", 7), i = u(t, "disabled", 7, !1), o = u(t, "loading", 7, !1), r = u(t, "visualization", 7, "none"), a = u(t, "progressPercent", 7, 0), n = u(t, "isPlaying", 7, !1), s = u(t, "amplitude", 7, 0), _ = u(t, "rippleIntensity", 7, 1), d = u(t, "ariaLabel", 7, "Play"), I = u(t, "children", 7);
|
|
1618
|
+
var f = {
|
|
1619
|
+
get onclick() {
|
|
1620
|
+
return p();
|
|
1621
|
+
},
|
|
1622
|
+
set onclick(l) {
|
|
1623
|
+
p(l), c();
|
|
1624
|
+
},
|
|
1625
|
+
get disabled() {
|
|
1626
|
+
return i();
|
|
1627
|
+
},
|
|
1628
|
+
set disabled(l = !1) {
|
|
1629
|
+
i(l), c();
|
|
1630
|
+
},
|
|
1631
|
+
get loading() {
|
|
1632
|
+
return o();
|
|
1633
|
+
},
|
|
1634
|
+
set loading(l = !1) {
|
|
1635
|
+
o(l), c();
|
|
1636
|
+
},
|
|
1637
|
+
get visualization() {
|
|
1638
|
+
return r();
|
|
1639
|
+
},
|
|
1640
|
+
set visualization(l = "none") {
|
|
1641
|
+
r(l), c();
|
|
1642
|
+
},
|
|
1643
|
+
get progressPercent() {
|
|
1644
|
+
return a();
|
|
1645
|
+
},
|
|
1646
|
+
set progressPercent(l = 0) {
|
|
1647
|
+
a(l), c();
|
|
1648
|
+
},
|
|
1649
|
+
get isPlaying() {
|
|
1650
|
+
return n();
|
|
1651
|
+
},
|
|
1652
|
+
set isPlaying(l = !1) {
|
|
1653
|
+
n(l), c();
|
|
1654
|
+
},
|
|
1655
|
+
get amplitude() {
|
|
1656
|
+
return s();
|
|
1657
|
+
},
|
|
1658
|
+
set amplitude(l = 0) {
|
|
1659
|
+
s(l), c();
|
|
1660
|
+
},
|
|
1661
|
+
get rippleIntensity() {
|
|
1662
|
+
return _();
|
|
1663
|
+
},
|
|
1664
|
+
set rippleIntensity(l = 1) {
|
|
1665
|
+
_(l), c();
|
|
1666
|
+
},
|
|
1667
|
+
get ariaLabel() {
|
|
1668
|
+
return d();
|
|
1669
|
+
},
|
|
1670
|
+
set ariaLabel(l = "Play") {
|
|
1671
|
+
d(l), c();
|
|
1672
|
+
},
|
|
1673
|
+
get children() {
|
|
1674
|
+
return I();
|
|
1675
|
+
},
|
|
1676
|
+
set children(l) {
|
|
1677
|
+
I(l), c();
|
|
1678
|
+
}
|
|
1679
|
+
};
|
|
1680
|
+
return Ye(y, {
|
|
1681
|
+
get onclick() {
|
|
1682
|
+
return p();
|
|
1683
|
+
},
|
|
1684
|
+
get disabled() {
|
|
1685
|
+
return i();
|
|
1686
|
+
},
|
|
1687
|
+
get loading() {
|
|
1688
|
+
return o();
|
|
1689
|
+
},
|
|
1690
|
+
get visualization() {
|
|
1691
|
+
return r();
|
|
1692
|
+
},
|
|
1693
|
+
get progressPercent() {
|
|
1694
|
+
return a();
|
|
1695
|
+
},
|
|
1696
|
+
get isPlaying() {
|
|
1697
|
+
return n();
|
|
1698
|
+
},
|
|
1699
|
+
get amplitude() {
|
|
1700
|
+
return s();
|
|
1701
|
+
},
|
|
1702
|
+
get rippleIntensity() {
|
|
1703
|
+
return _();
|
|
1704
|
+
},
|
|
1705
|
+
get ariaLabel() {
|
|
1706
|
+
return d();
|
|
1707
|
+
},
|
|
1708
|
+
borderRadius: "50%",
|
|
1709
|
+
children: (l, P) => {
|
|
1710
|
+
var b = ee(), j = J(b);
|
|
1711
|
+
Ge(j, I), x(l, b);
|
|
1712
|
+
},
|
|
1713
|
+
$$slots: { default: !0 }
|
|
1714
|
+
}), ge(f);
|
|
1715
|
+
}
|
|
1716
|
+
ue(
|
|
1717
|
+
tt,
|
|
1718
|
+
{
|
|
1719
|
+
onclick: {},
|
|
1720
|
+
disabled: {},
|
|
1721
|
+
loading: {},
|
|
1722
|
+
visualization: {},
|
|
1723
|
+
progressPercent: {},
|
|
1724
|
+
isPlaying: {},
|
|
1725
|
+
amplitude: {},
|
|
1726
|
+
rippleIntensity: {},
|
|
1727
|
+
ariaLabel: {},
|
|
1728
|
+
children: {}
|
|
1729
|
+
},
|
|
1730
|
+
[],
|
|
1731
|
+
[],
|
|
1732
|
+
!0
|
|
1733
|
+
);
|
|
1734
|
+
function Lt(y, t) {
|
|
1735
|
+
pe(t, !0);
|
|
1736
|
+
let p = u(t, "onclick", 7), i = u(t, "disabled", 7, !1), o = u(t, "loading", 7, !1), r = u(t, "visualization", 7, "none"), a = u(t, "progressPercent", 7, 0), n = u(t, "isPlaying", 7, !1), s = u(t, "amplitude", 7, 0), _ = u(t, "rippleIntensity", 7, 1), d = u(t, "ariaLabel", 7, "Play"), I = u(t, "children", 7);
|
|
1737
|
+
var f = {
|
|
1738
|
+
get onclick() {
|
|
1739
|
+
return p();
|
|
1740
|
+
},
|
|
1741
|
+
set onclick(l) {
|
|
1742
|
+
p(l), c();
|
|
1743
|
+
},
|
|
1744
|
+
get disabled() {
|
|
1745
|
+
return i();
|
|
1746
|
+
},
|
|
1747
|
+
set disabled(l = !1) {
|
|
1748
|
+
i(l), c();
|
|
1749
|
+
},
|
|
1750
|
+
get loading() {
|
|
1751
|
+
return o();
|
|
1752
|
+
},
|
|
1753
|
+
set loading(l = !1) {
|
|
1754
|
+
o(l), c();
|
|
1755
|
+
},
|
|
1756
|
+
get visualization() {
|
|
1757
|
+
return r();
|
|
1758
|
+
},
|
|
1759
|
+
set visualization(l = "none") {
|
|
1760
|
+
r(l), c();
|
|
1761
|
+
},
|
|
1762
|
+
get progressPercent() {
|
|
1763
|
+
return a();
|
|
1764
|
+
},
|
|
1765
|
+
set progressPercent(l = 0) {
|
|
1766
|
+
a(l), c();
|
|
1767
|
+
},
|
|
1768
|
+
get isPlaying() {
|
|
1769
|
+
return n();
|
|
1770
|
+
},
|
|
1771
|
+
set isPlaying(l = !1) {
|
|
1772
|
+
n(l), c();
|
|
1773
|
+
},
|
|
1774
|
+
get amplitude() {
|
|
1775
|
+
return s();
|
|
1776
|
+
},
|
|
1777
|
+
set amplitude(l = 0) {
|
|
1778
|
+
s(l), c();
|
|
1779
|
+
},
|
|
1780
|
+
get rippleIntensity() {
|
|
1781
|
+
return _();
|
|
1782
|
+
},
|
|
1783
|
+
set rippleIntensity(l = 1) {
|
|
1784
|
+
_(l), c();
|
|
1785
|
+
},
|
|
1786
|
+
get ariaLabel() {
|
|
1787
|
+
return d();
|
|
1788
|
+
},
|
|
1789
|
+
set ariaLabel(l = "Play") {
|
|
1790
|
+
d(l), c();
|
|
1791
|
+
},
|
|
1792
|
+
get children() {
|
|
1793
|
+
return I();
|
|
1794
|
+
},
|
|
1795
|
+
set children(l) {
|
|
1796
|
+
I(l), c();
|
|
1797
|
+
}
|
|
1798
|
+
};
|
|
1799
|
+
return Ye(y, {
|
|
1800
|
+
get onclick() {
|
|
1801
|
+
return p();
|
|
1802
|
+
},
|
|
1803
|
+
get disabled() {
|
|
1804
|
+
return i();
|
|
1805
|
+
},
|
|
1806
|
+
get loading() {
|
|
1807
|
+
return o();
|
|
1808
|
+
},
|
|
1809
|
+
get visualization() {
|
|
1810
|
+
return r();
|
|
1811
|
+
},
|
|
1812
|
+
get progressPercent() {
|
|
1813
|
+
return a();
|
|
1814
|
+
},
|
|
1815
|
+
get isPlaying() {
|
|
1816
|
+
return n();
|
|
1817
|
+
},
|
|
1818
|
+
get amplitude() {
|
|
1819
|
+
return s();
|
|
1820
|
+
},
|
|
1821
|
+
get rippleIntensity() {
|
|
1822
|
+
return _();
|
|
1823
|
+
},
|
|
1824
|
+
get ariaLabel() {
|
|
1825
|
+
return d();
|
|
1826
|
+
},
|
|
1827
|
+
borderRadius: "0",
|
|
1828
|
+
children: (l, P) => {
|
|
1829
|
+
var b = ee(), j = J(b);
|
|
1830
|
+
Ge(j, I), x(l, b);
|
|
1831
|
+
},
|
|
1832
|
+
$$slots: { default: !0 }
|
|
1833
|
+
}), ge(f);
|
|
1834
|
+
}
|
|
1835
|
+
ue(
|
|
1836
|
+
Lt,
|
|
1837
|
+
{
|
|
1838
|
+
onclick: {},
|
|
1839
|
+
disabled: {},
|
|
1840
|
+
loading: {},
|
|
1841
|
+
visualization: {},
|
|
1842
|
+
progressPercent: {},
|
|
1843
|
+
isPlaying: {},
|
|
1844
|
+
amplitude: {},
|
|
1845
|
+
rippleIntensity: {},
|
|
1846
|
+
ariaLabel: {},
|
|
1847
|
+
children: {}
|
|
1848
|
+
},
|
|
1849
|
+
[],
|
|
1850
|
+
[],
|
|
1851
|
+
!0
|
|
1852
|
+
);
|
|
1853
|
+
function jt(y, t) {
|
|
1854
|
+
pe(t, !0);
|
|
1855
|
+
let p = u(t, "onclick", 7), i = u(t, "disabled", 7, !1), o = u(t, "loading", 7, !1), r = u(t, "visualization", 7, "none"), a = u(t, "progressPercent", 7, 0), n = u(t, "isPlaying", 7, !1), s = u(t, "amplitude", 7, 0), _ = u(t, "rippleIntensity", 7, 1), d = u(t, "ariaLabel", 7, "Play"), I = u(t, "children", 7);
|
|
1856
|
+
var f = {
|
|
1857
|
+
get onclick() {
|
|
1858
|
+
return p();
|
|
1859
|
+
},
|
|
1860
|
+
set onclick(l) {
|
|
1861
|
+
p(l), c();
|
|
1862
|
+
},
|
|
1863
|
+
get disabled() {
|
|
1864
|
+
return i();
|
|
1865
|
+
},
|
|
1866
|
+
set disabled(l = !1) {
|
|
1867
|
+
i(l), c();
|
|
1868
|
+
},
|
|
1869
|
+
get loading() {
|
|
1870
|
+
return o();
|
|
1871
|
+
},
|
|
1872
|
+
set loading(l = !1) {
|
|
1873
|
+
o(l), c();
|
|
1874
|
+
},
|
|
1875
|
+
get visualization() {
|
|
1876
|
+
return r();
|
|
1877
|
+
},
|
|
1878
|
+
set visualization(l = "none") {
|
|
1879
|
+
r(l), c();
|
|
1880
|
+
},
|
|
1881
|
+
get progressPercent() {
|
|
1882
|
+
return a();
|
|
1883
|
+
},
|
|
1884
|
+
set progressPercent(l = 0) {
|
|
1885
|
+
a(l), c();
|
|
1886
|
+
},
|
|
1887
|
+
get isPlaying() {
|
|
1888
|
+
return n();
|
|
1889
|
+
},
|
|
1890
|
+
set isPlaying(l = !1) {
|
|
1891
|
+
n(l), c();
|
|
1892
|
+
},
|
|
1893
|
+
get amplitude() {
|
|
1894
|
+
return s();
|
|
1895
|
+
},
|
|
1896
|
+
set amplitude(l = 0) {
|
|
1897
|
+
s(l), c();
|
|
1898
|
+
},
|
|
1899
|
+
get rippleIntensity() {
|
|
1900
|
+
return _();
|
|
1901
|
+
},
|
|
1902
|
+
set rippleIntensity(l = 1) {
|
|
1903
|
+
_(l), c();
|
|
1904
|
+
},
|
|
1905
|
+
get ariaLabel() {
|
|
1906
|
+
return d();
|
|
1907
|
+
},
|
|
1908
|
+
set ariaLabel(l = "Play") {
|
|
1909
|
+
d(l), c();
|
|
1910
|
+
},
|
|
1911
|
+
get children() {
|
|
1912
|
+
return I();
|
|
1913
|
+
},
|
|
1914
|
+
set children(l) {
|
|
1915
|
+
I(l), c();
|
|
1916
|
+
}
|
|
1917
|
+
};
|
|
1918
|
+
return Ye(y, {
|
|
1919
|
+
get onclick() {
|
|
1920
|
+
return p();
|
|
1921
|
+
},
|
|
1922
|
+
get disabled() {
|
|
1923
|
+
return i();
|
|
1924
|
+
},
|
|
1925
|
+
get loading() {
|
|
1926
|
+
return o();
|
|
1927
|
+
},
|
|
1928
|
+
get visualization() {
|
|
1929
|
+
return r();
|
|
1930
|
+
},
|
|
1931
|
+
get progressPercent() {
|
|
1932
|
+
return a();
|
|
1933
|
+
},
|
|
1934
|
+
get isPlaying() {
|
|
1935
|
+
return n();
|
|
1936
|
+
},
|
|
1937
|
+
get amplitude() {
|
|
1938
|
+
return s();
|
|
1939
|
+
},
|
|
1940
|
+
get rippleIntensity() {
|
|
1941
|
+
return _();
|
|
1942
|
+
},
|
|
1943
|
+
get ariaLabel() {
|
|
1944
|
+
return d();
|
|
1945
|
+
},
|
|
1946
|
+
borderRadius: "var(--fortyfour-play-button-border-radius)",
|
|
1947
|
+
children: (l, P) => {
|
|
1948
|
+
var b = ee(), j = J(b);
|
|
1949
|
+
Ge(j, I), x(l, b);
|
|
1950
|
+
},
|
|
1951
|
+
$$slots: { default: !0 }
|
|
1952
|
+
}), ge(f);
|
|
1953
|
+
}
|
|
1954
|
+
ue(
|
|
1955
|
+
jt,
|
|
1956
|
+
{
|
|
1957
|
+
onclick: {},
|
|
1958
|
+
disabled: {},
|
|
1959
|
+
loading: {},
|
|
1960
|
+
visualization: {},
|
|
1961
|
+
progressPercent: {},
|
|
1962
|
+
isPlaying: {},
|
|
1963
|
+
amplitude: {},
|
|
1964
|
+
rippleIntensity: {},
|
|
1965
|
+
ariaLabel: {},
|
|
1966
|
+
children: {}
|
|
1967
|
+
},
|
|
1968
|
+
[],
|
|
1969
|
+
[],
|
|
1970
|
+
!0
|
|
1971
|
+
);
|
|
1972
|
+
var oa = F('<div class="shape-wrapper svelte-jokk6x"><!> <button part="button" class="play-button svelte-jokk6x"><div aria-hidden="true"><!></div> <span part="icon" class="icon svelte-jokk6x"><!></span></button></div>');
|
|
1973
|
+
const na = {
|
|
1974
|
+
hash: "svelte-jokk6x",
|
|
1975
|
+
code: ".shape-wrapper.svelte-jokk6x {position:relative;width:var(--fortyfour-play-button-size, 48px);height:var(--fortyfour-play-button-size, 48px);font-size:var(--fortyfour-play-button-size, 48px);}.play-button.svelte-jokk6x {position:relative;width:100%;height:100%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--fortyfour-play-button-icon-color);padding:0;}.play-button.svelte-jokk6x:focus-visible {outline:var(--fortyfour-play-button-focus-width) solid var(--fortyfour-play-button-focus-color);outline-offset:var(--fortyfour-play-button-focus-offset);}.play-button.svelte-jokk6x:disabled {opacity:0.5;cursor:not-allowed;}.blob-background.svelte-jokk6x {position:absolute;inset:0;background:var(--fortyfour-play-button-background-color);border:var(--fortyfour-play-button-border-width) solid var(--fortyfour-play-button-border-color);overflow:hidden;}.blob-background.has-ring.svelte-jokk6x {border:none;}.icon.svelte-jokk6x {position:relative;z-index:1;width:1em;height:1em;display:flex;align-items:center;justify-content:center;}.icon.svelte-jokk6x svg {width:100%;height:100%;fill:currentColor;}"
|
|
1976
|
+
};
|
|
1977
|
+
function It(y, t) {
|
|
1978
|
+
pe(t, !0), be(y, na);
|
|
1979
|
+
let p = u(t, "onclick", 7), i = u(t, "disabled", 7, !1), o = u(t, "loading", 7, !1), r = u(t, "visualization", 7, "none"), a = u(t, "progressPercent", 7, 0), n = u(t, "isPlaying", 7, !1), s = u(t, "amplitude", 7, 0), _ = u(t, "rippleIntensity", 7, 1), d = u(t, "ariaLabel", 7, "Play"), I = u(t, "animate", 7, !1), f = u(t, "speed", 7, 20), l = u(t, "children", 7);
|
|
1980
|
+
function P(v, S) {
|
|
1981
|
+
return Math.floor(v + Math.random() * (S - v));
|
|
1982
|
+
}
|
|
1983
|
+
function b() {
|
|
1984
|
+
const S = ($) => 100 - $;
|
|
1985
|
+
let O = [];
|
|
1986
|
+
for (let $ = 0; $ < 4; $++) {
|
|
1987
|
+
let Y = P(25, S(25));
|
|
1988
|
+
O.push(Y), O.push(S(Y));
|
|
1989
|
+
}
|
|
1990
|
+
return `${O[0]}% ${O[1]}% ${O[2]}% ${O[3]}% / ${O[4]}% ${O[6]}% ${O[7]}% ${O[5]}%`;
|
|
1991
|
+
}
|
|
1992
|
+
const j = b(), C = [
|
|
1993
|
+
{ borderRadius: j, offset: 0 },
|
|
1994
|
+
{ borderRadius: b(), offset: 0.15 },
|
|
1995
|
+
{ borderRadius: b(), offset: 0.3 },
|
|
1996
|
+
{ borderRadius: b(), offset: 0.45 },
|
|
1997
|
+
{ borderRadius: b(), offset: 0.6 },
|
|
1998
|
+
{ borderRadius: b(), offset: 0.75 },
|
|
1999
|
+
{ borderRadius: b(), offset: 0.9 },
|
|
2000
|
+
{ borderRadius: j, offset: 1 }
|
|
2001
|
+
], B = j;
|
|
2002
|
+
let A = q(null), X = null;
|
|
2003
|
+
const R = typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
2004
|
+
me(() => (e(A) && I() && !R && (X = e(A).animate(C, {
|
|
2005
|
+
duration: f() * 1e3,
|
|
2006
|
+
iterations: 1 / 0,
|
|
2007
|
+
easing: "ease"
|
|
2008
|
+
})), () => {
|
|
2009
|
+
X && (X.cancel(), X = null);
|
|
2010
|
+
}));
|
|
2011
|
+
var V = {
|
|
2012
|
+
get onclick() {
|
|
2013
|
+
return p();
|
|
2014
|
+
},
|
|
2015
|
+
set onclick(v) {
|
|
2016
|
+
p(v), c();
|
|
2017
|
+
},
|
|
2018
|
+
get disabled() {
|
|
2019
|
+
return i();
|
|
2020
|
+
},
|
|
2021
|
+
set disabled(v = !1) {
|
|
2022
|
+
i(v), c();
|
|
2023
|
+
},
|
|
2024
|
+
get loading() {
|
|
2025
|
+
return o();
|
|
2026
|
+
},
|
|
2027
|
+
set loading(v = !1) {
|
|
2028
|
+
o(v), c();
|
|
2029
|
+
},
|
|
2030
|
+
get visualization() {
|
|
2031
|
+
return r();
|
|
2032
|
+
},
|
|
2033
|
+
set visualization(v = "none") {
|
|
2034
|
+
r(v), c();
|
|
2035
|
+
},
|
|
2036
|
+
get progressPercent() {
|
|
2037
|
+
return a();
|
|
2038
|
+
},
|
|
2039
|
+
set progressPercent(v = 0) {
|
|
2040
|
+
a(v), c();
|
|
2041
|
+
},
|
|
2042
|
+
get isPlaying() {
|
|
2043
|
+
return n();
|
|
2044
|
+
},
|
|
2045
|
+
set isPlaying(v = !1) {
|
|
2046
|
+
n(v), c();
|
|
2047
|
+
},
|
|
2048
|
+
get amplitude() {
|
|
2049
|
+
return s();
|
|
2050
|
+
},
|
|
2051
|
+
set amplitude(v = 0) {
|
|
2052
|
+
s(v), c();
|
|
2053
|
+
},
|
|
2054
|
+
get rippleIntensity() {
|
|
2055
|
+
return _();
|
|
2056
|
+
},
|
|
2057
|
+
set rippleIntensity(v = 1) {
|
|
2058
|
+
_(v), c();
|
|
2059
|
+
},
|
|
2060
|
+
get ariaLabel() {
|
|
2061
|
+
return d();
|
|
2062
|
+
},
|
|
2063
|
+
set ariaLabel(v = "Play") {
|
|
2064
|
+
d(v), c();
|
|
2065
|
+
},
|
|
2066
|
+
get animate() {
|
|
2067
|
+
return I();
|
|
2068
|
+
},
|
|
2069
|
+
set animate(v = !1) {
|
|
2070
|
+
I(v), c();
|
|
2071
|
+
},
|
|
2072
|
+
get speed() {
|
|
2073
|
+
return f();
|
|
2074
|
+
},
|
|
2075
|
+
set speed(v = 20) {
|
|
2076
|
+
f(v), c();
|
|
2077
|
+
},
|
|
2078
|
+
get children() {
|
|
16
2079
|
return l();
|
|
17
2080
|
},
|
|
18
|
-
set
|
|
19
|
-
l(
|
|
2081
|
+
set children(v) {
|
|
2082
|
+
l(v), c();
|
|
2083
|
+
}
|
|
2084
|
+
}, k = oa();
|
|
2085
|
+
let D;
|
|
2086
|
+
var T = G(k);
|
|
2087
|
+
{
|
|
2088
|
+
var L = (v) => {
|
|
2089
|
+
ct(v, {
|
|
2090
|
+
get isPlaying() {
|
|
2091
|
+
return n();
|
|
2092
|
+
},
|
|
2093
|
+
get amplitude() {
|
|
2094
|
+
return s();
|
|
2095
|
+
},
|
|
2096
|
+
get intensity() {
|
|
2097
|
+
return _();
|
|
2098
|
+
}
|
|
2099
|
+
});
|
|
2100
|
+
};
|
|
2101
|
+
K(T, (v) => {
|
|
2102
|
+
r() === "ripple" && v(L);
|
|
2103
|
+
});
|
|
2104
|
+
}
|
|
2105
|
+
var M = ye(T, 2);
|
|
2106
|
+
M.__click = function(...v) {
|
|
2107
|
+
p()?.apply(this, v);
|
|
2108
|
+
};
|
|
2109
|
+
var z = G(M);
|
|
2110
|
+
let g, E;
|
|
2111
|
+
var Q = G(z);
|
|
2112
|
+
{
|
|
2113
|
+
var oe = (v) => {
|
|
2114
|
+
ut(v, {
|
|
2115
|
+
get progress() {
|
|
2116
|
+
return a();
|
|
2117
|
+
}
|
|
2118
|
+
});
|
|
2119
|
+
};
|
|
2120
|
+
K(Q, (v) => {
|
|
2121
|
+
r() === "ring" && v(oe);
|
|
2122
|
+
});
|
|
2123
|
+
}
|
|
2124
|
+
N(z), Ee(z, (v) => m(A, v), () => e(A));
|
|
2125
|
+
var w = ye(z, 2), h = G(w);
|
|
2126
|
+
return Ge(h, l), N(w), N(M), N(k), H(
|
|
2127
|
+
(v, S, O) => {
|
|
2128
|
+
D = Le(k, "", D, v), M.disabled = i(), Z(M, "aria-label", d()), Z(M, "aria-busy", o()), g = de(z, 1, "blob-background svelte-jokk6x", null, g, S), E = Le(z, "", E, O);
|
|
2129
|
+
},
|
|
2130
|
+
[
|
|
2131
|
+
() => ({ "border-radius": B }),
|
|
2132
|
+
() => ({ "has-ring": r() === "ring" }),
|
|
2133
|
+
() => ({ "border-radius": B })
|
|
2134
|
+
]
|
|
2135
|
+
), x(y, k), ge(V);
|
|
2136
|
+
}
|
|
2137
|
+
Ne(["click"]);
|
|
2138
|
+
ue(
|
|
2139
|
+
It,
|
|
2140
|
+
{
|
|
2141
|
+
onclick: {},
|
|
2142
|
+
disabled: {},
|
|
2143
|
+
loading: {},
|
|
2144
|
+
visualization: {},
|
|
2145
|
+
progressPercent: {},
|
|
2146
|
+
isPlaying: {},
|
|
2147
|
+
amplitude: {},
|
|
2148
|
+
rippleIntensity: {},
|
|
2149
|
+
ariaLabel: {},
|
|
2150
|
+
animate: {},
|
|
2151
|
+
speed: {},
|
|
2152
|
+
children: {}
|
|
2153
|
+
},
|
|
2154
|
+
[],
|
|
2155
|
+
[],
|
|
2156
|
+
!0
|
|
2157
|
+
);
|
|
2158
|
+
Ut();
|
|
2159
|
+
var ia = Me('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true"><path d="M187.2 100.9C174.8 94.1 159.8 94.4 147.6 101.6C135.4 108.8 128 121.9 128 136L128 504C128 518.1 135.5 531.2 147.6 538.4C159.7 545.6 174.8 545.9 187.2 539.1L523.2 355.1C536 348.1 544 334.6 544 320C544 305.4 536 291.9 523.2 284.9L187.2 100.9z" fill="currentColor"></path></svg>');
|
|
2160
|
+
function Et(y) {
|
|
2161
|
+
var t = ia();
|
|
2162
|
+
x(y, t);
|
|
2163
|
+
}
|
|
2164
|
+
ue(Et, {}, [], [], !0);
|
|
2165
|
+
var la = Me('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true"><path d="M176 96C149.5 96 128 117.5 128 144L128 496C128 522.5 149.5 544 176 544L240 544C266.5 544 288 522.5 288 496L288 144C288 117.5 266.5 96 240 96L176 96zM400 96C373.5 96 352 117.5 352 144L352 496C352 522.5 373.5 544 400 544L464 544C490.5 544 512 522.5 512 496L512 144C512 117.5 490.5 96 464 96L400 96z" fill="currentColor"></path></svg>');
|
|
2166
|
+
function Mt(y) {
|
|
2167
|
+
var t = la();
|
|
2168
|
+
x(y, t);
|
|
2169
|
+
}
|
|
2170
|
+
ue(Mt, {}, [], [], !0);
|
|
2171
|
+
var sa = Me(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true"><style>circle {
|
|
2172
|
+
animation: fade 1s ease-in-out infinite;
|
|
2173
|
+
}
|
|
2174
|
+
circle:nth-child(2) {
|
|
2175
|
+
animation-delay: 0.2s;
|
|
2176
|
+
}
|
|
2177
|
+
circle:nth-child(3) {
|
|
2178
|
+
animation-delay: 0.4s;
|
|
2179
|
+
}
|
|
2180
|
+
@keyframes fade {
|
|
2181
|
+
0%,
|
|
2182
|
+
100% {
|
|
2183
|
+
opacity: 0.2;
|
|
2184
|
+
}
|
|
2185
|
+
50% {
|
|
2186
|
+
opacity: 1;
|
|
2187
|
+
}
|
|
2188
|
+
}
|
|
2189
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2190
|
+
circle {
|
|
2191
|
+
animation: none;
|
|
2192
|
+
opacity: 0.6;
|
|
2193
|
+
}
|
|
2194
|
+
}</style><circle cx="160" cy="320" r="56"></circle><circle cx="320" cy="320" r="56"></circle><circle cx="480" cy="320" r="56"></circle></svg>`);
|
|
2195
|
+
function St(y) {
|
|
2196
|
+
var t = sa();
|
|
2197
|
+
x(y, t);
|
|
2198
|
+
}
|
|
2199
|
+
ue(St, {}, [], [], !0);
|
|
2200
|
+
var ua = Me('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true"><path d="M320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64zM288 192C288 174.3 302.3 160 320 160C337.7 160 352 174.3 352 192L352 352C352 369.7 337.7 384 320 384C302.3 384 288 369.7 288 352L288 192zM320 480C302.3 480 288 465.7 288 448C288 430.3 302.3 416 320 416C337.7 416 352 430.3 352 448C352 465.7 337.7 480 320 480z"></path></svg>');
|
|
2201
|
+
function Tt(y) {
|
|
2202
|
+
var t = ua();
|
|
2203
|
+
x(y, t);
|
|
2204
|
+
}
|
|
2205
|
+
ue(Tt, {}, [], [], !0);
|
|
2206
|
+
const ca = {
|
|
2207
|
+
hash: "svelte-1urg1ua",
|
|
2208
|
+
code: `:host {--fortyfour-play-button-size: 48px;--fortyfour-play-button-background-color: #3b82f6;--fortyfour-play-button-icon-color: #ffffff;--fortyfour-play-button-border-width: 2px;--fortyfour-play-button-border-color: #ffffff;--fortyfour-play-button-border-radius: 12px;--fortyfour-play-button-ring-width: var(--fortyfour-play-button-border-width);--fortyfour-play-button-ring-fill-color: #ffffff;--fortyfour-play-button-ring-track-color: transparent;--fortyfour-play-button-hover-scale: 1.04;--fortyfour-play-button-hover-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);--fortyfour-play-button-focus-color: var(--fortyfour-play-button-background-color);--fortyfour-play-button-focus-width: 2px;--fortyfour-play-button-focus-offset: 2px;display:inline-block;font-size:var(--fortyfour-play-button-size);}:host([hover="scale"]) {transition:transform 0.15s ease-out;}:host([hover="scale"]:hover:not([disabled])) {transform:scale(var(--fortyfour-play-button-hover-scale));}:host([hover="glow"]) {transition:filter 0.15s ease-out;}:host([hover="glow"]:hover:not([disabled])) {filter:drop-shadow(var(--fortyfour-play-button-hover-shadow));}:host([hover="lift"]) {transition:transform 0.15s ease-out,
|
|
2209
|
+
filter 0.15s ease-out;}:host([hover="lift"]:hover:not([disabled])) {transform:scale(var(--fortyfour-play-button-hover-scale));filter:drop-shadow(var(--fortyfour-play-button-hover-shadow));}
|
|
2210
|
+
|
|
2211
|
+
@media (prefers-reduced-motion: reduce) {:host([hover="scale"]),
|
|
2212
|
+
:host([hover="glow"]),
|
|
2213
|
+
:host([hover="lift"]) {transition:none;}
|
|
2214
|
+
}`
|
|
2215
|
+
};
|
|
2216
|
+
function fa(y, t) {
|
|
2217
|
+
pe(t, !0), be(y, ca);
|
|
2218
|
+
const p = (g) => {
|
|
2219
|
+
var E = ee(), Q = J(E);
|
|
2220
|
+
{
|
|
2221
|
+
var oe = (h) => {
|
|
2222
|
+
var v = ee(), S = J(v);
|
|
2223
|
+
Ce(S, t, "icon-error", {}, (O) => {
|
|
2224
|
+
Tt(O);
|
|
2225
|
+
}), x(h, v);
|
|
2226
|
+
}, w = (h) => {
|
|
2227
|
+
var v = ee(), S = J(v);
|
|
2228
|
+
{
|
|
2229
|
+
var O = (Y) => {
|
|
2230
|
+
var ce = ee(), U = J(ce);
|
|
2231
|
+
Ce(U, t, "icon-loading", {}, (re) => {
|
|
2232
|
+
St(re);
|
|
2233
|
+
}), x(Y, ce);
|
|
2234
|
+
}, $ = (Y) => {
|
|
2235
|
+
var ce = ee(), U = J(ce);
|
|
2236
|
+
{
|
|
2237
|
+
var re = (ie) => {
|
|
2238
|
+
var ve = ee(), fe = J(ve);
|
|
2239
|
+
Ce(fe, t, "icon-playing", {}, (ae) => {
|
|
2240
|
+
Mt(ae);
|
|
2241
|
+
}), x(ie, ve);
|
|
2242
|
+
}, ne = (ie) => {
|
|
2243
|
+
var ve = ee(), fe = J(ve);
|
|
2244
|
+
Ce(fe, t, "icon-paused", {}, (ae) => {
|
|
2245
|
+
Et(ae);
|
|
2246
|
+
}), x(ie, ve);
|
|
2247
|
+
};
|
|
2248
|
+
K(
|
|
2249
|
+
U,
|
|
2250
|
+
(ie) => {
|
|
2251
|
+
e(B) ? ie(re) : ie(ne, !1);
|
|
2252
|
+
},
|
|
2253
|
+
!0
|
|
2254
|
+
);
|
|
2255
|
+
}
|
|
2256
|
+
x(Y, ce);
|
|
2257
|
+
};
|
|
2258
|
+
K(
|
|
2259
|
+
S,
|
|
2260
|
+
(Y) => {
|
|
2261
|
+
V() ? Y(O) : Y($, !1);
|
|
2262
|
+
},
|
|
2263
|
+
!0
|
|
2264
|
+
);
|
|
2265
|
+
}
|
|
2266
|
+
x(h, v);
|
|
2267
|
+
};
|
|
2268
|
+
K(Q, (h) => {
|
|
2269
|
+
e(X) ? h(oe) : h(w, !1);
|
|
2270
|
+
});
|
|
2271
|
+
}
|
|
2272
|
+
x(g, E);
|
|
2273
|
+
}, i = t.$$host;
|
|
2274
|
+
let o = u(t, "for", 7, ""), r = u(t, "shape", 7, "circle"), a = u(t, "visualization", 7, "none"), n = u(t, "hover", 7, "none"), s = u(t, "rippleIntensity", 7, 1), _ = u(t, "blobAnimate", 7, !1), d = u(t, "blobSpeed", 7, 20);
|
|
2275
|
+
const I = {
|
|
2276
|
+
circle: tt,
|
|
2277
|
+
square: Lt,
|
|
2278
|
+
"rounded-square": jt,
|
|
2279
|
+
blob: It
|
|
2280
|
+
};
|
|
2281
|
+
let f = q(null), l = q("idle"), P = q(0), b = q(0), j = q(Xe([]));
|
|
2282
|
+
const C = W(() => I[r()] ?? tt), B = W(() => e(l) === "playing"), A = W(() => e(l) === "loading"), X = W(() => e(l) === "error"), R = W(() => e(b) > 0 ? e(P) / e(b) : 0), V = st(() => e(A), 200), k = W(() => {
|
|
2283
|
+
if (!e(j).length || e(b) === 0)
|
|
2284
|
+
return 0;
|
|
2285
|
+
const g = Math.floor(e(P) / e(b) * e(j).length), E = 3, Q = Math.max(0, g - Math.floor(E / 2)), oe = Math.min(e(j).length, Q + E), w = e(j).slice(Q, oe), h = w.reduce((v, S) => v + S * S, 0);
|
|
2286
|
+
return Math.sqrt(h / w.length);
|
|
2287
|
+
}), D = W(() => ({
|
|
2288
|
+
onclick: T,
|
|
2289
|
+
disabled: !o() || e(X),
|
|
2290
|
+
loading: e(A),
|
|
2291
|
+
visualization: a(),
|
|
2292
|
+
progressPercent: e(R),
|
|
2293
|
+
isPlaying: e(B),
|
|
2294
|
+
amplitude: e(k),
|
|
2295
|
+
rippleIntensity: s(),
|
|
2296
|
+
ariaLabel: e(B) ? "Pause" : "Play",
|
|
2297
|
+
...r() === "blob" ? { animate: _(), speed: d() } : {}
|
|
2298
|
+
}));
|
|
2299
|
+
me(() => {
|
|
2300
|
+
if (!o()) {
|
|
2301
|
+
console.warn("fortyfour-play-button: 'for' attribute is required");
|
|
2302
|
+
return;
|
|
2303
|
+
}
|
|
2304
|
+
const g = i.getRootNode();
|
|
2305
|
+
if (m(f, g.getElementById(o()), !0), !e(f)) {
|
|
2306
|
+
console.warn(`fortyfour-play-button: element with id "${o()}" not found`);
|
|
2307
|
+
return;
|
|
2308
|
+
}
|
|
2309
|
+
function E() {
|
|
2310
|
+
m(l, e(f).state, !0), m(P, e(f).currentTime, !0), m(b, e(f).duration, !0), m(j, e(f).metadata?.waveform ?? [], !0);
|
|
2311
|
+
}
|
|
2312
|
+
return E(), e(f).addEventListener("loading", E), e(f).addEventListener("loadedmetadata", E), e(f).addEventListener("play", E), e(f).addEventListener("pause", E), e(f).addEventListener("ended", E), e(f).addEventListener("error", E), e(f).addEventListener("timeupdate", E), () => {
|
|
2313
|
+
e(f).removeEventListener("loading", E), e(f).removeEventListener("loadedmetadata", E), e(f).removeEventListener("play", E), e(f).removeEventListener("pause", E), e(f).removeEventListener("ended", E), e(f).removeEventListener("error", E), e(f).removeEventListener("timeupdate", E);
|
|
2314
|
+
};
|
|
2315
|
+
});
|
|
2316
|
+
function T() {
|
|
2317
|
+
e(f)?.togglePlay();
|
|
2318
|
+
}
|
|
2319
|
+
Oe(i, "data-playing", () => e(B)), Oe(i, "data-loading", V), Oe(i, "data-error", () => e(X));
|
|
2320
|
+
var L = {
|
|
2321
|
+
get for() {
|
|
2322
|
+
return o();
|
|
2323
|
+
},
|
|
2324
|
+
set for(g = "") {
|
|
2325
|
+
o(g), c();
|
|
20
2326
|
},
|
|
21
|
-
get
|
|
2327
|
+
get shape() {
|
|
2328
|
+
return r();
|
|
2329
|
+
},
|
|
2330
|
+
set shape(g = "circle") {
|
|
2331
|
+
r(g), c();
|
|
2332
|
+
},
|
|
2333
|
+
get visualization() {
|
|
22
2334
|
return a();
|
|
23
2335
|
},
|
|
24
|
-
set
|
|
25
|
-
a(
|
|
2336
|
+
set visualization(g = "none") {
|
|
2337
|
+
a(g), c();
|
|
26
2338
|
},
|
|
27
|
-
get
|
|
28
|
-
return
|
|
2339
|
+
get hover() {
|
|
2340
|
+
return n();
|
|
29
2341
|
},
|
|
30
|
-
set
|
|
31
|
-
|
|
2342
|
+
set hover(g = "none") {
|
|
2343
|
+
n(g), c();
|
|
32
2344
|
},
|
|
33
|
-
get
|
|
34
|
-
return
|
|
2345
|
+
get rippleIntensity() {
|
|
2346
|
+
return s();
|
|
35
2347
|
},
|
|
36
|
-
set
|
|
37
|
-
|
|
2348
|
+
set rippleIntensity(g = 1) {
|
|
2349
|
+
s(g), c();
|
|
38
2350
|
},
|
|
39
|
-
get
|
|
40
|
-
return
|
|
2351
|
+
get blobAnimate() {
|
|
2352
|
+
return _();
|
|
41
2353
|
},
|
|
42
|
-
set
|
|
43
|
-
|
|
2354
|
+
set blobAnimate(g = !1) {
|
|
2355
|
+
_(g), c();
|
|
2356
|
+
},
|
|
2357
|
+
get blobSpeed() {
|
|
2358
|
+
return d();
|
|
2359
|
+
},
|
|
2360
|
+
set blobSpeed(g = 20) {
|
|
2361
|
+
d(g), c();
|
|
44
2362
|
}
|
|
45
|
-
},
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
ft(Z, {
|
|
51
|
-
get audioURL() {
|
|
52
|
-
return n(t);
|
|
2363
|
+
}, M = ee(), z = J(M);
|
|
2364
|
+
return Kt(z, () => e(C), (g, E) => {
|
|
2365
|
+
E(g, Ft(() => e(D), {
|
|
2366
|
+
children: (Q, oe) => {
|
|
2367
|
+
p(Q);
|
|
53
2368
|
},
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
2369
|
+
$$slots: { default: !0 }
|
|
2370
|
+
}));
|
|
2371
|
+
}), x(y, M), ge(L);
|
|
2372
|
+
}
|
|
2373
|
+
customElements.define("fortyfour-play-button", ue(
|
|
2374
|
+
fa,
|
|
2375
|
+
{
|
|
2376
|
+
for: { attribute: "for", reflect: !0 },
|
|
2377
|
+
shape: { attribute: "shape", reflect: !0 },
|
|
2378
|
+
visualization: { attribute: "visualization", reflect: !0 },
|
|
2379
|
+
hover: { attribute: "hover", reflect: !0 },
|
|
2380
|
+
rippleIntensity: { attribute: "ripple-intensity", reflect: !0 },
|
|
2381
|
+
blobAnimate: { attribute: "blob-animate", reflect: !0, type: "Boolean" },
|
|
2382
|
+
blobSpeed: { attribute: "blob-speed", reflect: !0 }
|
|
2383
|
+
},
|
|
2384
|
+
["icon-error", "icon-loading", "icon-playing", "icon-paused"],
|
|
2385
|
+
[],
|
|
2386
|
+
!0
|
|
2387
|
+
));
|
|
2388
|
+
function Rt(y, t) {
|
|
2389
|
+
if (!y.length || t <= 0)
|
|
2390
|
+
return [];
|
|
2391
|
+
const p = y.length / t, i = [];
|
|
2392
|
+
for (let o = 0; o < t; o++) {
|
|
2393
|
+
const r = Math.floor(o * p), a = Math.floor((o + 1) * p), n = y.slice(r, Math.max(r + 1, a)), s = n.reduce((d, I) => d + I * I, 0), _ = Math.sqrt(s / n.length);
|
|
2394
|
+
i.push(_);
|
|
2395
|
+
}
|
|
2396
|
+
return i;
|
|
2397
|
+
}
|
|
2398
|
+
function ft(y, t, p) {
|
|
2399
|
+
return function(o) {
|
|
2400
|
+
const r = y(), a = t(), n = p();
|
|
2401
|
+
if (!r || !n || a <= 0)
|
|
2402
|
+
return;
|
|
2403
|
+
const s = o.clientX - n.left, d = Math.max(0, Math.min(1, s / n.width)) * a;
|
|
2404
|
+
r.seek(d);
|
|
2405
|
+
};
|
|
2406
|
+
}
|
|
2407
|
+
function dt(y, t, p) {
|
|
2408
|
+
return function(o) {
|
|
2409
|
+
const r = y(), a = t(), n = p();
|
|
2410
|
+
if (!r || a <= 0)
|
|
2411
|
+
return;
|
|
2412
|
+
const s = a * 0.05;
|
|
2413
|
+
o.key === "ArrowRight" ? r.seek(Math.min(a, n + s)) : o.key === "ArrowLeft" && r.seek(Math.max(0, n - s));
|
|
2414
|
+
};
|
|
2415
|
+
}
|
|
2416
|
+
var da = Me("<rect></rect>"), va = F('<div class="waveform svelte-kt0w9q" role="slider" tabindex="0" aria-valuemin="0" aria-label="Audio playback position"><svg width="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="svelte-kt0w9q"><!></svg></div>');
|
|
2417
|
+
const pa = {
|
|
2418
|
+
hash: "svelte-kt0w9q",
|
|
2419
|
+
code: ":host {display:flex;flex:1;--waveform-progress-color: #3b82f6;--waveform-track-color: #e5e7eb;--waveform-focus-color: #3b82f6;--waveform-focus-width: 2px;--waveform-focus-offset: 2px;--waveform-focus-radius: 4px;}.waveform.svelte-kt0w9q {flex:1;height:100%;display:flex;align-items:center;cursor:pointer;border-radius:var(--waveform-focus-radius);}.waveform.svelte-kt0w9q:focus-visible {outline:var(--waveform-focus-width) solid var(--waveform-focus-color);outline-offset:var(--waveform-focus-offset);}svg.svelte-kt0w9q {display:block;}.bar.svelte-kt0w9q {transition:fill 0.15s;}.progress.svelte-kt0w9q {fill:var(--waveform-progress-color);}.track.svelte-kt0w9q {fill:var(--waveform-track-color);}"
|
|
2420
|
+
};
|
|
2421
|
+
function ga(y, t) {
|
|
2422
|
+
pe(t, !0), be(y, pa);
|
|
2423
|
+
const p = t.$$host;
|
|
2424
|
+
let i = u(t, "for", 7, ""), o = u(t, "barWidth", 7, 3), r = u(t, "barGap", 7, 1), a = u(t, "barRadius", 7, 1), n = u(t, "minBarHeight", 7, 3), s = u(t, "height", 7, 56), _ = q(Xe([])), d = q(0), I = q(0), f = q(null), l = q(0), P = q(!1), b = q(null);
|
|
2425
|
+
p.style.height = `${s()}px`, Fe(() => {
|
|
2426
|
+
const z = new ResizeObserver((g) => {
|
|
2427
|
+
for (let E of g)
|
|
2428
|
+
m(l, E.contentRect.width || 0, !0), m(P, !0);
|
|
2429
|
+
});
|
|
2430
|
+
return e(b) && z.observe(e(b)), () => {
|
|
2431
|
+
z.disconnect();
|
|
2432
|
+
};
|
|
2433
|
+
}), me(() => {
|
|
2434
|
+
if (!i()) {
|
|
2435
|
+
console.warn("fortyfour-bar-waveform: 'for' attribute is required");
|
|
2436
|
+
return;
|
|
2437
|
+
}
|
|
2438
|
+
const z = p.getRootNode();
|
|
2439
|
+
if (m(f, z.getElementById(i()), !0), !e(f)) {
|
|
2440
|
+
console.warn(`fortyfour-bar-waveform: element with id "${i()}" not found`);
|
|
2441
|
+
return;
|
|
2442
|
+
}
|
|
2443
|
+
e(f).metadata?.waveform && m(_, e(f).metadata.waveform, !0), e(f).duration && m(I, e(f).duration, !0), e(f).currentTime && m(d, e(f).currentTime, !0);
|
|
2444
|
+
function g() {
|
|
2445
|
+
m(_, e(f).metadata?.waveform || [], !0), m(I, e(f).duration, !0);
|
|
2446
|
+
}
|
|
2447
|
+
function E() {
|
|
2448
|
+
m(d, e(f).currentTime, !0);
|
|
2449
|
+
}
|
|
2450
|
+
return e(f).addEventListener("loadedmetadata", g), e(f).addEventListener("timeupdate", E), () => {
|
|
2451
|
+
e(f).removeEventListener("loadedmetadata", g), e(f).removeEventListener("timeupdate", E);
|
|
2452
|
+
};
|
|
2453
|
+
});
|
|
2454
|
+
const j = W(() => Math.max(1, Math.floor(e(l) / (o() + r())))), C = W(() => e(_).length > 0), B = W(() => e(C) ? Rt(e(_), e(j)) : Array(e(j)).fill(0)), A = W(() => e(I) > 0 ? e(d) / e(I) : 0), X = W(() => e(B).map((z) => {
|
|
2455
|
+
const g = Math.max(n(), Math.round(z / 100 * (s() - n()) + n()));
|
|
2456
|
+
return g % 2 === 0 ? g + 1 : g;
|
|
2457
|
+
}));
|
|
2458
|
+
me(() => {
|
|
2459
|
+
e(C) ? p.removeAttribute("data-placeholder") : p.setAttribute("data-placeholder", "");
|
|
2460
|
+
});
|
|
2461
|
+
const R = ft(() => e(f), () => e(I), () => p.getBoundingClientRect()), V = dt(() => e(f), () => e(I), () => e(d));
|
|
2462
|
+
var k = {
|
|
2463
|
+
get for() {
|
|
2464
|
+
return i();
|
|
2465
|
+
},
|
|
2466
|
+
set for(z = "") {
|
|
2467
|
+
i(z), c();
|
|
2468
|
+
},
|
|
2469
|
+
get barWidth() {
|
|
2470
|
+
return o();
|
|
2471
|
+
},
|
|
2472
|
+
set barWidth(z = 3) {
|
|
2473
|
+
o(z), c();
|
|
2474
|
+
},
|
|
2475
|
+
get barGap() {
|
|
2476
|
+
return r();
|
|
2477
|
+
},
|
|
2478
|
+
set barGap(z = 1) {
|
|
2479
|
+
r(z), c();
|
|
2480
|
+
},
|
|
2481
|
+
get barRadius() {
|
|
2482
|
+
return a();
|
|
2483
|
+
},
|
|
2484
|
+
set barRadius(z = 1) {
|
|
2485
|
+
a(z), c();
|
|
2486
|
+
},
|
|
2487
|
+
get minBarHeight() {
|
|
2488
|
+
return n();
|
|
2489
|
+
},
|
|
2490
|
+
set minBarHeight(z = 3) {
|
|
2491
|
+
n(z), c();
|
|
2492
|
+
},
|
|
2493
|
+
get height() {
|
|
2494
|
+
return s();
|
|
2495
|
+
},
|
|
2496
|
+
set height(z = 56) {
|
|
2497
|
+
s(z), c();
|
|
2498
|
+
}
|
|
2499
|
+
}, D = va();
|
|
2500
|
+
D.__click = R, D.__keydown = V;
|
|
2501
|
+
var T = G(D), L = G(T);
|
|
2502
|
+
{
|
|
2503
|
+
var M = (z) => {
|
|
2504
|
+
var g = ee(), E = J(g);
|
|
2505
|
+
Be(E, 17, () => e(X), Ae, (Q, oe, w) => {
|
|
2506
|
+
const h = W(() => (w + 1) / e(X).length), v = W(() => e(h) <= e(A));
|
|
2507
|
+
var S = da();
|
|
2508
|
+
H(
|
|
2509
|
+
(O) => {
|
|
2510
|
+
de(S, 0, nt(["bar", e(v) ? "progress" : "track"]), "svelte-kt0w9q"), Z(S, "x", w * (o() + r())), Z(S, "y", s() / 4 - e(oe) / 2), Z(S, "width", O), Z(S, "height", e(oe)), Z(S, "rx", a());
|
|
2511
|
+
},
|
|
2512
|
+
[() => Math.max(1, o() - 1)]
|
|
2513
|
+
), x(Q, S);
|
|
2514
|
+
}), x(z, g);
|
|
2515
|
+
};
|
|
2516
|
+
K(L, (z) => {
|
|
2517
|
+
e(P) && z(M);
|
|
57
2518
|
});
|
|
58
2519
|
}
|
|
59
|
-
m(
|
|
60
|
-
|
|
2520
|
+
return N(T), N(D), Ee(D, (z) => m(b, z), () => e(b)), H(() => {
|
|
2521
|
+
Z(D, "aria-valuemax", e(I)), Z(D, "aria-valuenow", e(d)), Z(T, "height", s()), Z(T, "viewBox", `0 0 ${e(l)} ${s() / 2}`);
|
|
2522
|
+
}), x(y, D), ge(k);
|
|
2523
|
+
}
|
|
2524
|
+
Ne(["click", "keydown"]);
|
|
2525
|
+
customElements.define("fortyfour-bar-waveform", ue(
|
|
2526
|
+
ga,
|
|
61
2527
|
{
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
2528
|
+
for: { attribute: "for", reflect: !0 },
|
|
2529
|
+
barWidth: { attribute: "bar-width", reflect: !0, type: "Number" },
|
|
2530
|
+
barGap: { attribute: "bar-gap", reflect: !0, type: "Number" },
|
|
2531
|
+
barRadius: { attribute: "bar-radius", reflect: !0, type: "Number" },
|
|
2532
|
+
minBarHeight: { attribute: "min-bar-height", reflect: !0, type: "Number" },
|
|
2533
|
+
height: { attribute: "height", reflect: !0, type: "Number" }
|
|
2534
|
+
},
|
|
2535
|
+
[],
|
|
2536
|
+
[],
|
|
2537
|
+
!0
|
|
2538
|
+
));
|
|
2539
|
+
var ya = Me("<path></path>"), ha = Me("<path></path><!>", 1), ma = Me('<line class="line track svelte-1j1dyl9" stroke-linecap="round"></line>'), ba = F('<div class="waveform svelte-1j1dyl9" role="slider" tabindex="0" aria-valuemin="0" aria-label="Audio playback position"><svg width="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" preserveAspectRatio="none" class="svelte-1j1dyl9"><!></svg></div>');
|
|
2540
|
+
const wa = {
|
|
2541
|
+
hash: "svelte-1j1dyl9",
|
|
2542
|
+
code: `:host {--fortyfour-line-waveform-track-color: #d1d5db;--fortyfour-line-waveform-progress-color: #3b82f6;--fortyfour-line-waveform-focus-color: #3b82f6;--fortyfour-line-waveform-focus-width: 2px;--fortyfour-line-waveform-focus-offset: 2px;--fortyfour-line-waveform-focus-radius: 4px;display:flex;flex:1;}
|
|
2543
|
+
|
|
2544
|
+
@media (prefers-color-scheme: dark) {:host {--fortyfour-line-waveform-track-color: #374151;--fortyfour-line-waveform-progress-color: #60a5fa;--fortyfour-line-waveform-focus-color: #60a5fa;}
|
|
2545
|
+
}.waveform.svelte-1j1dyl9 {flex:1;height:100%;display:flex;align-items:center;cursor:pointer;border-radius:var(--fortyfour-line-waveform-focus-radius);}.waveform.svelte-1j1dyl9:focus-visible {outline:var(--fortyfour-line-waveform-focus-width) solid var(--fortyfour-line-waveform-focus-color);outline-offset:var(--fortyfour-line-waveform-focus-offset);}svg.svelte-1j1dyl9 {display:block;}.line.svelte-1j1dyl9 {fill:none;stroke-linecap:round;stroke-linejoin:round;}.line.sharp.svelte-1j1dyl9 {stroke-linecap:square;stroke-linejoin:miter;}.track.svelte-1j1dyl9 {stroke:var(--fortyfour-line-waveform-track-color);}.progress.svelte-1j1dyl9 {stroke:var(--fortyfour-line-waveform-progress-color);}`
|
|
2546
|
+
};
|
|
2547
|
+
function xa(y, t) {
|
|
2548
|
+
pe(t, !0), be(y, wa);
|
|
2549
|
+
const p = t.$$host;
|
|
2550
|
+
let i = u(t, "for", 7, ""), o = u(t, "lineWidth", 7, 2), r = u(t, "height", 7, 56), a = u(t, "sharp", 7, !1), n = q(Xe([])), s = q(0), _ = q(0), d = q(null), I = q(0), f = q(!1), l = q(null);
|
|
2551
|
+
p.style.height = `${r()}px`, Fe(() => {
|
|
2552
|
+
const h = new ResizeObserver((v) => {
|
|
2553
|
+
for (let S of v)
|
|
2554
|
+
m(I, S.contentRect.width || 0, !0), m(f, !0);
|
|
2555
|
+
});
|
|
2556
|
+
return e(l) && h.observe(e(l)), () => {
|
|
2557
|
+
h.disconnect();
|
|
2558
|
+
};
|
|
2559
|
+
}), me(() => {
|
|
2560
|
+
if (!i()) {
|
|
2561
|
+
console.warn("fortyfour-line-waveform: 'for' attribute is required");
|
|
2562
|
+
return;
|
|
2563
|
+
}
|
|
2564
|
+
const h = p.getRootNode();
|
|
2565
|
+
if (m(d, h.getElementById(i()), !0), !e(d)) {
|
|
2566
|
+
console.warn(`fortyfour-line-waveform: element with id "${i()}" not found`);
|
|
2567
|
+
return;
|
|
2568
|
+
}
|
|
2569
|
+
e(d).metadata?.waveform && m(n, e(d).metadata.waveform, !0), e(d).duration && m(_, e(d).duration, !0), e(d).currentTime && m(s, e(d).currentTime, !0);
|
|
2570
|
+
function v() {
|
|
2571
|
+
m(n, e(d).metadata?.waveform || [], !0), m(_, e(d).duration, !0);
|
|
2572
|
+
}
|
|
2573
|
+
function S() {
|
|
2574
|
+
m(s, e(d).currentTime, !0);
|
|
2575
|
+
}
|
|
2576
|
+
return e(d).addEventListener("loadedmetadata", v), e(d).addEventListener("timeupdate", S), () => {
|
|
2577
|
+
e(d).removeEventListener("loadedmetadata", v), e(d).removeEventListener("timeupdate", S);
|
|
65
2578
|
};
|
|
66
|
-
|
|
67
|
-
|
|
2579
|
+
});
|
|
2580
|
+
const P = 0.15, b = W(() => Math.max(2, Math.floor(e(I) * P))), j = W(() => e(n).length > 0), C = W(() => e(j) ? Rt(e(n), e(b)) : []), B = W(() => e(_) > 0 ? e(s) / e(_) : 0), A = W(() => r() / 2), X = W(() => r() / 2 * 0.8), R = W(() => {
|
|
2581
|
+
if (!e(C).length || e(I) === 0)
|
|
2582
|
+
return [];
|
|
2583
|
+
const h = o() / 2, v = e(I) - h * 2;
|
|
2584
|
+
return e(C).map((S, O) => {
|
|
2585
|
+
const $ = h + O / (e(C).length - 1) * v, Y = Math.max(0.05, S / 100), ce = O % 2 === 0 ? -1 : 1, U = e(A) + ce * Y * e(X);
|
|
2586
|
+
return { x: $, y: U };
|
|
68
2587
|
});
|
|
2588
|
+
});
|
|
2589
|
+
function V(h, v) {
|
|
2590
|
+
if (h.length === 0)
|
|
2591
|
+
return "";
|
|
2592
|
+
let S = `M ${h[0].x} ${h[0].y}`;
|
|
2593
|
+
for (let O = 1; O < h.length; O++) {
|
|
2594
|
+
const $ = h[O - 1], Y = h[O];
|
|
2595
|
+
if (v) {
|
|
2596
|
+
const ce = $.x + (Y.x - $.x) / 3, U = $.y, re = $.x + (Y.x - $.x) * 2 / 3, ne = Y.y;
|
|
2597
|
+
S += ` C ${ce} ${U}, ${re} ${ne}, ${Y.x} ${Y.y}`;
|
|
2598
|
+
} else
|
|
2599
|
+
S += ` L ${Y.x} ${Y.y}`;
|
|
2600
|
+
}
|
|
2601
|
+
return S;
|
|
69
2602
|
}
|
|
70
|
-
|
|
2603
|
+
const k = W(() => V(e(R), !a())), D = W(() => {
|
|
2604
|
+
if (e(B) <= 0 || e(I) === 0)
|
|
2605
|
+
return 0;
|
|
2606
|
+
const h = o() / 2, v = e(I) - h * 2;
|
|
2607
|
+
return h + e(B) * v;
|
|
2608
|
+
}), T = W(() => {
|
|
2609
|
+
if (e(R).length === 0 || e(D) <= 0)
|
|
2610
|
+
return "";
|
|
2611
|
+
const h = [];
|
|
2612
|
+
let v = null;
|
|
2613
|
+
for (let O = 0; O < e(R).length; O++)
|
|
2614
|
+
if (e(R)[O].x <= e(D))
|
|
2615
|
+
h.push(e(R)[O]);
|
|
2616
|
+
else {
|
|
2617
|
+
v = e(R)[O];
|
|
2618
|
+
break;
|
|
2619
|
+
}
|
|
2620
|
+
if (h.length === 0)
|
|
2621
|
+
return "";
|
|
2622
|
+
const S = h[h.length - 1];
|
|
2623
|
+
if (v && S.x < e(D)) {
|
|
2624
|
+
const O = (e(D) - S.x) / (v.x - S.x), $ = S.y + O * (v.y - S.y);
|
|
2625
|
+
h.push({ x: e(D), y: $ });
|
|
2626
|
+
}
|
|
2627
|
+
return V(h, !a());
|
|
2628
|
+
});
|
|
2629
|
+
me(() => {
|
|
2630
|
+
e(j) ? p.removeAttribute("data-placeholder") : p.setAttribute("data-placeholder", "");
|
|
2631
|
+
});
|
|
2632
|
+
const L = ft(() => e(d), () => e(_), () => e(l).getBoundingClientRect()), M = dt(() => e(d), () => e(_), () => e(s));
|
|
2633
|
+
var z = {
|
|
2634
|
+
get for() {
|
|
2635
|
+
return i();
|
|
2636
|
+
},
|
|
2637
|
+
set for(h = "") {
|
|
2638
|
+
i(h), c();
|
|
2639
|
+
},
|
|
2640
|
+
get lineWidth() {
|
|
2641
|
+
return o();
|
|
2642
|
+
},
|
|
2643
|
+
set lineWidth(h = 2) {
|
|
2644
|
+
o(h), c();
|
|
2645
|
+
},
|
|
2646
|
+
get height() {
|
|
2647
|
+
return r();
|
|
2648
|
+
},
|
|
2649
|
+
set height(h = 56) {
|
|
2650
|
+
r(h), c();
|
|
2651
|
+
},
|
|
2652
|
+
get sharp() {
|
|
2653
|
+
return a();
|
|
2654
|
+
},
|
|
2655
|
+
set sharp(h = !1) {
|
|
2656
|
+
a(h), c();
|
|
2657
|
+
}
|
|
2658
|
+
}, g = ba();
|
|
2659
|
+
g.__click = L, g.__keydown = M;
|
|
2660
|
+
var E = G(g), Q = G(E);
|
|
71
2661
|
{
|
|
72
|
-
var
|
|
73
|
-
var
|
|
74
|
-
|
|
75
|
-
var
|
|
76
|
-
|
|
2662
|
+
var oe = (h) => {
|
|
2663
|
+
var v = ha(), S = J(v);
|
|
2664
|
+
let O;
|
|
2665
|
+
var $ = ye(S);
|
|
2666
|
+
{
|
|
2667
|
+
var Y = (ce) => {
|
|
2668
|
+
var U = ya();
|
|
2669
|
+
let re;
|
|
2670
|
+
H(
|
|
2671
|
+
(ne) => {
|
|
2672
|
+
re = de(U, 0, "line progress svelte-1j1dyl9", null, re, ne), Z(U, "d", e(T)), Z(U, "stroke-width", o());
|
|
2673
|
+
},
|
|
2674
|
+
[() => ({ sharp: a() })]
|
|
2675
|
+
), x(ce, U);
|
|
2676
|
+
};
|
|
2677
|
+
K($, (ce) => {
|
|
2678
|
+
e(T) && ce(Y);
|
|
2679
|
+
});
|
|
2680
|
+
}
|
|
2681
|
+
H(
|
|
2682
|
+
(ce) => {
|
|
2683
|
+
O = de(S, 0, "line track svelte-1j1dyl9", null, O, ce), Z(S, "d", e(k)), Z(S, "stroke-width", o());
|
|
2684
|
+
},
|
|
2685
|
+
[() => ({ sharp: a() })]
|
|
2686
|
+
), x(h, v);
|
|
2687
|
+
}, w = (h) => {
|
|
2688
|
+
var v = ee(), S = J(v);
|
|
2689
|
+
{
|
|
2690
|
+
var O = ($) => {
|
|
2691
|
+
var Y = ma();
|
|
2692
|
+
H(() => {
|
|
2693
|
+
Z(Y, "x1", o() / 2), Z(Y, "y1", r() / 2), Z(Y, "x2", e(I) - o() / 2), Z(Y, "y2", r() / 2), Z(Y, "stroke-width", o());
|
|
2694
|
+
}), x($, Y);
|
|
2695
|
+
};
|
|
2696
|
+
K(
|
|
2697
|
+
S,
|
|
2698
|
+
($) => {
|
|
2699
|
+
e(f) && $(O);
|
|
2700
|
+
},
|
|
2701
|
+
!0
|
|
2702
|
+
);
|
|
2703
|
+
}
|
|
2704
|
+
x(h, v);
|
|
77
2705
|
};
|
|
78
|
-
|
|
79
|
-
|
|
2706
|
+
K(Q, (h) => {
|
|
2707
|
+
e(f) && e(k) ? h(oe) : h(w, !1);
|
|
80
2708
|
});
|
|
81
2709
|
}
|
|
82
|
-
m(
|
|
83
|
-
|
|
2710
|
+
return N(E), N(g), Ee(g, (h) => m(l, h), () => e(l)), H(() => {
|
|
2711
|
+
Z(g, "aria-valuemax", e(_)), Z(g, "aria-valuenow", e(s)), Z(E, "height", r()), Z(E, "viewBox", `0 0 ${e(I)} ${r()}`);
|
|
2712
|
+
}), x(y, g), ge(z);
|
|
2713
|
+
}
|
|
2714
|
+
Ne(["click", "keydown"]);
|
|
2715
|
+
customElements.define("fortyfour-line-waveform", ue(
|
|
2716
|
+
xa,
|
|
2717
|
+
{
|
|
2718
|
+
for: { attribute: "for", reflect: !0 },
|
|
2719
|
+
lineWidth: { attribute: "line-width", reflect: !0, type: "Number" },
|
|
2720
|
+
height: { attribute: "height", reflect: !0, type: "Number" },
|
|
2721
|
+
sharp: { attribute: "sharp", reflect: !0, type: "Boolean" }
|
|
2722
|
+
},
|
|
2723
|
+
[],
|
|
2724
|
+
[],
|
|
2725
|
+
!0
|
|
2726
|
+
));
|
|
2727
|
+
var _a = F('<div class="container svelte-1xpmvj3" role="slider" tabindex="0" aria-valuemin="0" aria-label="Audio playback position"><div class="track svelte-1xpmvj3"><div class="progress svelte-1xpmvj3"></div></div></div>');
|
|
2728
|
+
const ka = {
|
|
2729
|
+
hash: "svelte-1xpmvj3",
|
|
2730
|
+
code: `:host {--fortyfour-progress-bar-track-color: #e5e7eb;--fortyfour-progress-bar-progress-color: #3b82f6;--fortyfour-progress-bar-focus-color: #3b82f6;--fortyfour-progress-bar-focus-width: 2px;--fortyfour-progress-bar-focus-offset: 2px;display:flex;flex:1;}
|
|
2731
|
+
|
|
2732
|
+
@media (prefers-color-scheme: dark) {:host {--fortyfour-progress-bar-track-color: #374151;--fortyfour-progress-bar-progress-color: #60a5fa;--fortyfour-progress-bar-focus-color: #60a5fa;}
|
|
2733
|
+
}.container.svelte-1xpmvj3 {flex:1;display:flex;align-items:center;cursor:pointer;border-radius:4px;}.container.svelte-1xpmvj3:focus-visible {outline:var(--fortyfour-progress-bar-focus-width) solid var(--fortyfour-progress-bar-focus-color);outline-offset:var(--fortyfour-progress-bar-focus-offset);}.track.svelte-1xpmvj3 {width:100%;background:var(--fortyfour-progress-bar-track-color);overflow:hidden;}.progress.svelte-1xpmvj3 {height:100%;background:var(--fortyfour-progress-bar-progress-color);transition:width 0.1s linear;}`
|
|
2734
|
+
};
|
|
2735
|
+
function za(y, t) {
|
|
2736
|
+
pe(t, !0), be(y, ka);
|
|
2737
|
+
const p = t.$$host;
|
|
2738
|
+
let i = u(t, "for", 7, ""), o = u(t, "barHeight", 7, 4), r = u(t, "barRadius", 7, 2), a = q(0), n = q(0), s = q(null), _ = q(null);
|
|
2739
|
+
me(() => {
|
|
2740
|
+
if (!i()) {
|
|
2741
|
+
console.warn("fortyfour-progress-bar: 'for' attribute is required");
|
|
2742
|
+
return;
|
|
2743
|
+
}
|
|
2744
|
+
const A = p.getRootNode();
|
|
2745
|
+
if (m(s, A.getElementById(i()), !0), !e(s)) {
|
|
2746
|
+
console.warn(`fortyfour-progress-bar: element with id "${i()}" not found`);
|
|
2747
|
+
return;
|
|
2748
|
+
}
|
|
2749
|
+
e(s).duration && m(n, e(s).duration, !0), e(s).currentTime && m(a, e(s).currentTime, !0);
|
|
2750
|
+
function X() {
|
|
2751
|
+
m(n, e(s).duration, !0);
|
|
2752
|
+
}
|
|
2753
|
+
function R() {
|
|
2754
|
+
m(a, e(s).currentTime, !0);
|
|
2755
|
+
}
|
|
2756
|
+
return e(s).addEventListener("loadedmetadata", X), e(s).addEventListener("timeupdate", R), () => {
|
|
2757
|
+
e(s).removeEventListener("loadedmetadata", X), e(s).removeEventListener("timeupdate", R);
|
|
2758
|
+
};
|
|
2759
|
+
});
|
|
2760
|
+
const d = W(() => e(n) > 0 ? e(a) / e(n) * 100 : 0), I = ft(() => e(s), () => e(n), () => e(_)?.getBoundingClientRect()), f = dt(() => e(s), () => e(n), () => e(a));
|
|
2761
|
+
var l = {
|
|
2762
|
+
get for() {
|
|
2763
|
+
return i();
|
|
2764
|
+
},
|
|
2765
|
+
set for(A = "") {
|
|
2766
|
+
i(A), c();
|
|
2767
|
+
},
|
|
2768
|
+
get barHeight() {
|
|
2769
|
+
return o();
|
|
2770
|
+
},
|
|
2771
|
+
set barHeight(A = 4) {
|
|
2772
|
+
o(A), c();
|
|
2773
|
+
},
|
|
2774
|
+
get barRadius() {
|
|
2775
|
+
return r();
|
|
2776
|
+
},
|
|
2777
|
+
set barRadius(A = 2) {
|
|
2778
|
+
r(A), c();
|
|
2779
|
+
}
|
|
2780
|
+
}, P = _a();
|
|
2781
|
+
P.__click = I, P.__keydown = f;
|
|
2782
|
+
var b = G(P);
|
|
2783
|
+
let j;
|
|
2784
|
+
var C = G(b);
|
|
2785
|
+
let B;
|
|
2786
|
+
return N(b), Ee(b, (A) => m(_, A), () => e(_)), N(P), H(
|
|
2787
|
+
(A, X) => {
|
|
2788
|
+
Z(P, "aria-valuemax", e(n)), Z(P, "aria-valuenow", e(a)), j = Le(b, "", j, A), B = Le(C, "", B, X);
|
|
2789
|
+
},
|
|
2790
|
+
[
|
|
2791
|
+
() => ({
|
|
2792
|
+
height: `${o() ?? ""}px`,
|
|
2793
|
+
"border-radius": `${r() ?? ""}px`
|
|
2794
|
+
}),
|
|
2795
|
+
() => ({
|
|
2796
|
+
width: `${e(d) ?? ""}%`,
|
|
2797
|
+
"border-radius": `${r() ?? ""}px`
|
|
2798
|
+
})
|
|
2799
|
+
]
|
|
2800
|
+
), x(y, P), ge(l);
|
|
2801
|
+
}
|
|
2802
|
+
Ne(["click", "keydown"]);
|
|
2803
|
+
customElements.define("fortyfour-progress-bar", ue(
|
|
2804
|
+
za,
|
|
2805
|
+
{
|
|
2806
|
+
for: { attribute: "for", reflect: !0 },
|
|
2807
|
+
barHeight: { attribute: "bar-height", reflect: !0, type: "Number" },
|
|
2808
|
+
barRadius: { attribute: "bar-radius", reflect: !0, type: "Number" }
|
|
2809
|
+
},
|
|
2810
|
+
[],
|
|
2811
|
+
[],
|
|
2812
|
+
!0
|
|
2813
|
+
));
|
|
2814
|
+
var Pa = F("<span> </span>"), La = F('<div class="content svelte-1lixazt"><div class="text caption-text svelte-1lixazt"></div></div>'), ja = F("<span> </span>"), Ia = F('<div class="text caption-text subtitle svelte-1lixazt"></div>'), Ea = F('<div class="content subtitle-content svelte-1lixazt"><!></div>'), Ma = F("<span> </span>"), Sa = F('<div class="content svelte-1lixazt"><div class="text caption-text svelte-1lixazt"></div></div>'), Ta = F('<div class="content svelte-1lixazt"><div class="text svelte-1lixazt"> </div></div>'), Ra = F('<div class="placeholder-lines svelte-1lixazt"><span class="placeholder-line svelte-1lixazt"></span> <span class="placeholder-line short svelte-1lixazt"></span></div>'), Ca = F("<div><div><!></div></div>");
|
|
2815
|
+
const Ha = {
|
|
2816
|
+
hash: "svelte-1lixazt",
|
|
2817
|
+
code: `:host {--fortyfour-transcription-font-family: system-ui, sans-serif;--fortyfour-transcription-font-size: 14px;--fortyfour-transcription-color: #64748b;--fortyfour-transcription-active-color: #1e293b;--fortyfour-transcription-active-bg: #fef08a;--fortyfour-transcription-past-color: #1e293b;--fortyfour-transcription-placeholder-color: #e5e7eb;--fortyfour-transcription-fade-color: white;--fortyfour-transcription-scrollbar-thumb: #d1d5db;--fortyfour-transcription-scrollbar-thumb-hover: #9ca3af;--fortyfour-transcription-focus-color: #3b82f6;display:flex;font-family:var(--fortyfour-transcription-font-family);font-size:var(--fortyfour-transcription-font-size);}
|
|
2818
|
+
|
|
2819
|
+
@media (prefers-color-scheme: dark) {:host {--fortyfour-transcription-color: #94a3b8;--fortyfour-transcription-active-color: #fef08a;--fortyfour-transcription-active-bg: #422006;--fortyfour-transcription-past-color: #e2e8f0;--fortyfour-transcription-placeholder-color: #374151;--fortyfour-transcription-scrollbar-thumb: #4b5563;--fortyfour-transcription-scrollbar-thumb-hover: #6b7280;--fortyfour-transcription-focus-color: #60a5fa;}
|
|
2820
|
+
}.wrapper.svelte-1lixazt {position:relative;width:100%;}.wrapper.scrollable.svelte-1lixazt::before,
|
|
2821
|
+
.wrapper.scrollable.svelte-1lixazt::after {content:"";position:absolute;left:0;right:0;height:24px;pointer-events:none;opacity:0;transition:opacity 0.15s ease;}.wrapper.scrollable.svelte-1lixazt::before {top:0;background:linear-gradient(to top, transparent, var(--fortyfour-transcription-fade-color));z-index:1;}.wrapper.scrollable.svelte-1lixazt::after {bottom:0;background:linear-gradient(to bottom, transparent, var(--fortyfour-transcription-fade-color));}.wrapper.can-scroll-up.svelte-1lixazt::before {opacity:1;}.wrapper.can-scroll-down.svelte-1lixazt::after {opacity:1;}.container.svelte-1lixazt {width:100%;}.container.scrollable.svelte-1lixazt {overflow-y:auto;scroll-behavior:smooth;padding-bottom:24px;scrollbar-width:thin;scrollbar-color:var(--fortyfour-transcription-scrollbar-thumb) transparent;}.container.scrollable.svelte-1lixazt::-webkit-scrollbar {width:6px;}.container.scrollable.svelte-1lixazt::-webkit-scrollbar-track {background:transparent;}.container.scrollable.svelte-1lixazt::-webkit-scrollbar-thumb {background-color:var(--fortyfour-transcription-scrollbar-thumb);border-radius:3px;}.container.scrollable.svelte-1lixazt::-webkit-scrollbar-thumb:hover {background-color:var(--fortyfour-transcription-scrollbar-thumb-hover);}.container.scrollable.svelte-1lixazt:focus-visible {outline:2px solid var(--fortyfour-transcription-focus-color);outline-offset:2px;}.content.svelte-1lixazt {width:100%;}.text.svelte-1lixazt {white-space:pre-wrap;word-wrap:break-word;}.caption-text.svelte-1lixazt {white-space:normal;color:var(--fortyfour-transcription-color);}.word.svelte-1lixazt {transition:color 0.15s ease,
|
|
2822
|
+
background-color 0.15s ease;border-radius:2px;padding:0 1px;margin:0 -1px;}.word.active[data-type="word"].svelte-1lixazt {color:var(--fortyfour-transcription-active-color);background-color:var(--fortyfour-transcription-active-bg);}.word.past[data-type="word"].svelte-1lixazt {color:var(--fortyfour-transcription-past-color);}.subtitle-content.svelte-1lixazt {min-height:2em;display:flex;align-items:center;justify-content:center;}.subtitle.svelte-1lixazt {text-align:center;}.placeholder-lines.svelte-1lixazt {display:flex;flex-direction:column;gap:0.5em;}.placeholder-line.svelte-1lixazt {display:block;height:1em;background-color:var(--fortyfour-transcription-placeholder-color);border-radius:4px;}.placeholder-line.short.svelte-1lixazt {width:60%;}`
|
|
2823
|
+
};
|
|
2824
|
+
function Wa(y, t) {
|
|
2825
|
+
pe(t, !0), be(y, Ha);
|
|
2826
|
+
const p = t.$$host;
|
|
2827
|
+
let i = u(t, "for", 7, ""), o = u(t, "mode", 7, "static"), r = u(t, "maxHeight", 7, 0), a = q(null);
|
|
2828
|
+
const n = W(() => r() > 0);
|
|
2829
|
+
let s = q(!1), _ = q(!1);
|
|
2830
|
+
function d() {
|
|
2831
|
+
if (!e(a) || !e(n)) {
|
|
2832
|
+
m(s, !1), m(_, !1);
|
|
2833
|
+
return;
|
|
2834
|
+
}
|
|
2835
|
+
const { scrollTop: w, scrollHeight: h, clientHeight: v } = e(a);
|
|
2836
|
+
m(s, w > 1), m(_, w + v < h - 1);
|
|
2837
|
+
}
|
|
2838
|
+
let I = q(null), f = q(null), l = q("none"), P = q(0);
|
|
2839
|
+
const b = st(() => e(I) === null, 200), j = W(() => e(I) !== null ? !1 : e(l) === "none" ? !0 : b()), C = W(() => e(f) !== null && e(f).length > 0), B = W(() => !e(C) || o() === "static" ? -1 : e(f).findIndex((w) => e(P) >= w.start && e(P) <= w.end));
|
|
2840
|
+
function A(w) {
|
|
2841
|
+
const h = [];
|
|
2842
|
+
let v = { words: [], start: 0, end: 0 };
|
|
2843
|
+
for (const S of w) {
|
|
2844
|
+
v.words.length === 0 && (v.start = S.start), v.words.push(S), v.end = S.end;
|
|
2845
|
+
const O = S.text.trim();
|
|
2846
|
+
(O.endsWith(".") || O.endsWith("?") || O.endsWith("!")) && (h.push(v), v = { words: [], start: 0, end: 0 });
|
|
2847
|
+
}
|
|
2848
|
+
return v.words.length > 0 && h.push(v), h;
|
|
2849
|
+
}
|
|
2850
|
+
const X = W(() => e(C) ? A(e(f)) : []), R = W(() => o() !== "subtitle" || e(X).length === 0 ? null : e(X).find((w) => e(P) >= w.start && e(P) <= w.end) ?? null);
|
|
2851
|
+
function V(w) {
|
|
2852
|
+
return e(P) >= w.start && e(P) <= w.end;
|
|
2853
|
+
}
|
|
2854
|
+
function k(w) {
|
|
2855
|
+
return e(P) > w.end;
|
|
2856
|
+
}
|
|
2857
|
+
me(() => {
|
|
2858
|
+
if (!i()) {
|
|
2859
|
+
console.warn("fortyfour-transcription: 'for' attribute is required");
|
|
2860
|
+
return;
|
|
2861
|
+
}
|
|
2862
|
+
const h = p.getRootNode().getElementById(i());
|
|
2863
|
+
if (!h) {
|
|
2864
|
+
console.warn(`fortyfour-transcription: element with id "${i()}" not found`);
|
|
2865
|
+
return;
|
|
2866
|
+
}
|
|
2867
|
+
m(l, h.getAttribute("preload") || "none", !0);
|
|
2868
|
+
const v = h.metadata;
|
|
2869
|
+
v && (m(I, v.transcription ?? null, !0), m(f, v.words ?? null, !0)), h.currentTime && m(P, h.currentTime, !0);
|
|
2870
|
+
function S() {
|
|
2871
|
+
const $ = h.metadata;
|
|
2872
|
+
m(I, $?.transcription ?? null, !0), m(f, $?.words ?? null, !0);
|
|
2873
|
+
}
|
|
2874
|
+
function O() {
|
|
2875
|
+
m(P, h.currentTime, !0);
|
|
2876
|
+
}
|
|
2877
|
+
return h.addEventListener("loadedmetadata", S), h.addEventListener("timeupdate", O), () => {
|
|
2878
|
+
h.removeEventListener("loadedmetadata", S), h.removeEventListener("timeupdate", O);
|
|
2879
|
+
};
|
|
2880
|
+
}), Oe(p, "data-placeholder", () => e(j)), me(() => {
|
|
2881
|
+
if (!e(a) || !e(n))
|
|
2882
|
+
return;
|
|
2883
|
+
d(), e(a).addEventListener("scroll", d);
|
|
2884
|
+
const w = new ResizeObserver(d);
|
|
2885
|
+
return w.observe(e(a)), () => {
|
|
2886
|
+
e(a).removeEventListener("scroll", d), w.disconnect();
|
|
2887
|
+
};
|
|
2888
|
+
}), me(() => {
|
|
2889
|
+
if (!e(n) || o() !== "karaoke")
|
|
2890
|
+
return;
|
|
2891
|
+
if (e(P) < 0.1) {
|
|
2892
|
+
e(a)?.scrollTo({ top: 0, behavior: "smooth" });
|
|
2893
|
+
return;
|
|
2894
|
+
}
|
|
2895
|
+
if (e(B) < 0)
|
|
2896
|
+
return;
|
|
2897
|
+
const w = e(a)?.querySelector(".word.active");
|
|
2898
|
+
if (w) {
|
|
2899
|
+
const h = e(a).getBoundingClientRect(), v = w.getBoundingClientRect(), S = e(a).scrollTop + (v.top - h.top) - h.height / 2 + v.height / 2;
|
|
2900
|
+
e(a).scrollTo({ top: S, behavior: "smooth" });
|
|
2901
|
+
}
|
|
2902
|
+
});
|
|
2903
|
+
var D = {
|
|
2904
|
+
get for() {
|
|
2905
|
+
return i();
|
|
2906
|
+
},
|
|
2907
|
+
set for(w = "") {
|
|
2908
|
+
i(w), c();
|
|
2909
|
+
},
|
|
2910
|
+
get mode() {
|
|
2911
|
+
return o();
|
|
2912
|
+
},
|
|
2913
|
+
set mode(w = "static") {
|
|
2914
|
+
o(w), c();
|
|
2915
|
+
},
|
|
2916
|
+
get maxHeight() {
|
|
2917
|
+
return r();
|
|
2918
|
+
},
|
|
2919
|
+
set maxHeight(w = 0) {
|
|
2920
|
+
r(w), c();
|
|
2921
|
+
}
|
|
2922
|
+
}, T = Ca();
|
|
2923
|
+
let L;
|
|
2924
|
+
var M = G(T);
|
|
2925
|
+
let z, g;
|
|
2926
|
+
var E = G(M);
|
|
84
2927
|
{
|
|
85
|
-
var
|
|
86
|
-
var
|
|
2928
|
+
var Q = (w) => {
|
|
2929
|
+
var h = La(), v = G(h);
|
|
2930
|
+
Be(v, 21, () => e(f), Ae, (S, O, $) => {
|
|
2931
|
+
var Y = Pa();
|
|
2932
|
+
let ce;
|
|
2933
|
+
var U = G(Y, !0);
|
|
2934
|
+
N(Y), H(
|
|
2935
|
+
(re) => {
|
|
2936
|
+
ce = de(Y, 1, "word svelte-1lixazt", null, ce, re), Z(Y, "data-type", e(O).type), je(U, e(O).text);
|
|
2937
|
+
},
|
|
2938
|
+
[
|
|
2939
|
+
() => ({
|
|
2940
|
+
active: $ === e(B),
|
|
2941
|
+
past: $ < e(B)
|
|
2942
|
+
})
|
|
2943
|
+
]
|
|
2944
|
+
), x(S, Y);
|
|
2945
|
+
}), N(v), N(h), ze(1, h, () => Pe, () => ({ duration: 400 })), x(w, h);
|
|
2946
|
+
}, oe = (w) => {
|
|
2947
|
+
var h = ee(), v = J(h);
|
|
87
2948
|
{
|
|
88
|
-
var
|
|
89
|
-
var
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
2949
|
+
var S = ($) => {
|
|
2950
|
+
var Y = Ea(), ce = G(Y);
|
|
2951
|
+
{
|
|
2952
|
+
var U = (re) => {
|
|
2953
|
+
var ne = Ia();
|
|
2954
|
+
Be(ne, 21, () => e(R).words, Ae, (ie, ve) => {
|
|
2955
|
+
var fe = ja();
|
|
2956
|
+
let ae;
|
|
2957
|
+
var he = G(fe, !0);
|
|
2958
|
+
N(fe), H(
|
|
2959
|
+
(le) => {
|
|
2960
|
+
ae = de(fe, 1, "word svelte-1lixazt", null, ae, le), Z(fe, "data-type", e(ve).type), je(he, e(ve).text);
|
|
2961
|
+
},
|
|
2962
|
+
[
|
|
2963
|
+
() => ({
|
|
2964
|
+
active: V(e(ve)),
|
|
2965
|
+
past: k(e(ve))
|
|
2966
|
+
})
|
|
2967
|
+
]
|
|
2968
|
+
), x(ie, fe);
|
|
2969
|
+
}), N(ne), ze(1, ne, () => Pe, () => ({ duration: 200 })), x(re, ne);
|
|
2970
|
+
};
|
|
2971
|
+
K(ce, (re) => {
|
|
2972
|
+
e(R) && re(U);
|
|
2973
|
+
});
|
|
2974
|
+
}
|
|
2975
|
+
N(Y), x($, Y);
|
|
2976
|
+
}, O = ($) => {
|
|
2977
|
+
var Y = ee(), ce = J(Y);
|
|
93
2978
|
{
|
|
94
|
-
var
|
|
95
|
-
var
|
|
2979
|
+
var U = (ne) => {
|
|
2980
|
+
var ie = Sa(), ve = G(ie);
|
|
2981
|
+
Be(ve, 21, () => e(f), Ae, (fe, ae, he) => {
|
|
2982
|
+
var le = ee(), se = J(le);
|
|
2983
|
+
{
|
|
2984
|
+
var xe = (_e) => {
|
|
2985
|
+
var we = Ma();
|
|
2986
|
+
let ke;
|
|
2987
|
+
var Se = G(we, !0);
|
|
2988
|
+
N(we), H(
|
|
2989
|
+
(He) => {
|
|
2990
|
+
ke = de(we, 1, "word svelte-1lixazt", null, ke, He), Z(we, "data-type", e(ae).type), je(Se, e(ae).text);
|
|
2991
|
+
},
|
|
2992
|
+
[() => ({ active: he === e(B) })]
|
|
2993
|
+
), ze(1, we, () => Pe, () => ({ duration: 150 })), x(_e, we);
|
|
2994
|
+
};
|
|
2995
|
+
K(se, (_e) => {
|
|
2996
|
+
e(P) >= e(ae).start && _e(xe);
|
|
2997
|
+
});
|
|
2998
|
+
}
|
|
2999
|
+
x(fe, le);
|
|
3000
|
+
}), N(ve), N(ie), ze(1, ie, () => Pe, () => ({ duration: 400 })), x(ne, ie);
|
|
3001
|
+
}, re = (ne) => {
|
|
3002
|
+
var ie = ee(), ve = J(ie);
|
|
96
3003
|
{
|
|
97
|
-
var
|
|
98
|
-
var
|
|
99
|
-
|
|
100
|
-
},
|
|
101
|
-
var
|
|
102
|
-
|
|
3004
|
+
var fe = (he) => {
|
|
3005
|
+
var le = Ta(), se = G(le), xe = G(se, !0);
|
|
3006
|
+
N(se), N(le), H(() => je(xe, e(I))), ze(1, le, () => Pe, () => ({ duration: 400 })), x(he, le);
|
|
3007
|
+
}, ae = (he) => {
|
|
3008
|
+
var le = ee(), se = J(le);
|
|
3009
|
+
{
|
|
3010
|
+
var xe = (_e) => {
|
|
3011
|
+
var we = Ra();
|
|
3012
|
+
let ke;
|
|
3013
|
+
H((Se) => ke = Le(we, "", ke, Se), [
|
|
3014
|
+
() => ({ height: e(n) ? `${r()}px` : void 0 })
|
|
3015
|
+
]), x(_e, we);
|
|
3016
|
+
};
|
|
3017
|
+
K(
|
|
3018
|
+
se,
|
|
3019
|
+
(_e) => {
|
|
3020
|
+
e(j) && _e(xe);
|
|
3021
|
+
},
|
|
3022
|
+
!0
|
|
3023
|
+
);
|
|
3024
|
+
}
|
|
3025
|
+
x(he, le);
|
|
103
3026
|
};
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
3027
|
+
K(
|
|
3028
|
+
ve,
|
|
3029
|
+
(he) => {
|
|
3030
|
+
e(I) ? he(fe) : he(ae, !1);
|
|
3031
|
+
},
|
|
3032
|
+
!0
|
|
3033
|
+
);
|
|
107
3034
|
}
|
|
108
|
-
|
|
109
|
-
}, st = (I) => {
|
|
110
|
-
var E = N();
|
|
111
|
-
h(() => F(E, a().transcription)), i(I, E);
|
|
3035
|
+
x(ne, ie);
|
|
112
3036
|
};
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
(
|
|
116
|
-
|
|
3037
|
+
K(
|
|
3038
|
+
ce,
|
|
3039
|
+
(ne) => {
|
|
3040
|
+
o() === "progressive" && e(C) ? ne(U) : ne(re, !1);
|
|
117
3041
|
},
|
|
118
3042
|
!0
|
|
119
3043
|
);
|
|
120
3044
|
}
|
|
121
|
-
|
|
3045
|
+
x($, Y);
|
|
122
3046
|
};
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
3047
|
+
K(
|
|
3048
|
+
v,
|
|
3049
|
+
($) => {
|
|
3050
|
+
o() === "subtitle" && e(C) ? $(S) : $(O, !1);
|
|
3051
|
+
},
|
|
3052
|
+
!0
|
|
3053
|
+
);
|
|
126
3054
|
}
|
|
127
|
-
|
|
128
|
-
}, ot = (t) => {
|
|
129
|
-
var s = It();
|
|
130
|
-
i(t, s);
|
|
3055
|
+
x(w, h);
|
|
131
3056
|
};
|
|
132
|
-
|
|
133
|
-
|
|
3057
|
+
K(E, (w) => {
|
|
3058
|
+
o() === "karaoke" && e(C) ? w(Q) : w(oe, !1);
|
|
134
3059
|
});
|
|
135
3060
|
}
|
|
136
|
-
return
|
|
3061
|
+
return N(M), Ee(M, (w) => m(a, w), () => e(a)), N(T), H(
|
|
3062
|
+
(w, h, v) => {
|
|
3063
|
+
L = de(T, 1, "wrapper svelte-1lixazt", null, L, w), z = de(M, 1, "container svelte-1lixazt", null, z, h), g = Le(M, "", g, v);
|
|
3064
|
+
},
|
|
3065
|
+
[
|
|
3066
|
+
() => ({
|
|
3067
|
+
scrollable: e(n),
|
|
3068
|
+
"can-scroll-up": e(s),
|
|
3069
|
+
"can-scroll-down": e(_)
|
|
3070
|
+
}),
|
|
3071
|
+
() => ({ scrollable: e(n) }),
|
|
3072
|
+
() => ({
|
|
3073
|
+
"max-height": e(n) ? `${r()}px` : void 0
|
|
3074
|
+
})
|
|
3075
|
+
]
|
|
3076
|
+
), x(y, T), ge(D);
|
|
137
3077
|
}
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
Y,
|
|
3078
|
+
customElements.define("fortyfour-transcription", ue(
|
|
3079
|
+
Wa,
|
|
141
3080
|
{
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
error: {},
|
|
146
|
-
apiHost: {}
|
|
3081
|
+
for: { attribute: "for", reflect: !0 },
|
|
3082
|
+
mode: { attribute: "mode", reflect: !0 },
|
|
3083
|
+
maxHeight: { attribute: "max-height", reflect: !0, type: "Number" }
|
|
147
3084
|
},
|
|
148
3085
|
[],
|
|
149
3086
|
[],
|
|
150
3087
|
!0
|
|
151
|
-
);
|
|
152
|
-
var
|
|
153
|
-
const
|
|
154
|
-
hash: "svelte-
|
|
155
|
-
code:
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
3088
|
+
));
|
|
3089
|
+
var Ba = F('<div class="content svelte-z1j7sg"><div class="text svelte-z1j7sg"> </div></div>'), Aa = F('<div class="placeholder-lines svelte-z1j7sg"><span class="placeholder-line svelte-z1j7sg"></span> <span class="placeholder-line short svelte-z1j7sg"></span></div>'), qa = F("<div><div><!></div></div>");
|
|
3090
|
+
const Na = {
|
|
3091
|
+
hash: "svelte-z1j7sg",
|
|
3092
|
+
code: `:host {--fortyfour-translation-font-family: system-ui, sans-serif;--fortyfour-translation-font-size: 14px;--fortyfour-translation-placeholder-color: #e5e7eb;--fortyfour-translation-fade-color: white;--fortyfour-translation-scrollbar-thumb: #d1d5db;--fortyfour-translation-scrollbar-thumb-hover: #9ca3af;--fortyfour-translation-focus-color: #3b82f6;display:flex;font-family:var(--fortyfour-translation-font-family);font-size:var(--fortyfour-translation-font-size);}
|
|
3093
|
+
|
|
3094
|
+
@media (prefers-color-scheme: dark) {:host {--fortyfour-translation-placeholder-color: #374151;--fortyfour-translation-scrollbar-thumb: #4b5563;--fortyfour-translation-scrollbar-thumb-hover: #6b7280;--fortyfour-translation-focus-color: #60a5fa;}
|
|
3095
|
+
}.wrapper.svelte-z1j7sg {position:relative;width:100%;}.wrapper.scrollable.svelte-z1j7sg::before,
|
|
3096
|
+
.wrapper.scrollable.svelte-z1j7sg::after {content:"";position:absolute;left:0;right:0;height:24px;pointer-events:none;opacity:0;transition:opacity 0.15s ease;}.wrapper.scrollable.svelte-z1j7sg::before {top:0;background:linear-gradient(to top, transparent, var(--fortyfour-translation-fade-color));z-index:1;}.wrapper.scrollable.svelte-z1j7sg::after {bottom:0;background:linear-gradient(to bottom, transparent, var(--fortyfour-translation-fade-color));}.wrapper.can-scroll-up.svelte-z1j7sg::before {opacity:1;}.wrapper.can-scroll-down.svelte-z1j7sg::after {opacity:1;}.container.svelte-z1j7sg {width:100%;}.container.scrollable.svelte-z1j7sg {overflow-y:auto;scroll-behavior:smooth;padding-bottom:24px;scrollbar-width:thin;scrollbar-color:var(--fortyfour-translation-scrollbar-thumb) transparent;}.container.scrollable.svelte-z1j7sg::-webkit-scrollbar {width:6px;}.container.scrollable.svelte-z1j7sg::-webkit-scrollbar-track {background:transparent;}.container.scrollable.svelte-z1j7sg::-webkit-scrollbar-thumb {background-color:var(--fortyfour-translation-scrollbar-thumb);border-radius:3px;}.container.scrollable.svelte-z1j7sg::-webkit-scrollbar-thumb:hover {background-color:var(--fortyfour-translation-scrollbar-thumb-hover);}.container.scrollable.svelte-z1j7sg:focus-visible {outline:2px solid var(--fortyfour-translation-focus-color);outline-offset:2px;}.content.svelte-z1j7sg {width:100%;}.text.svelte-z1j7sg {white-space:pre-wrap;word-wrap:break-word;}.placeholder-lines.svelte-z1j7sg {display:flex;flex-direction:column;gap:0.5em;}.placeholder-line.svelte-z1j7sg {display:block;height:1em;background-color:var(--fortyfour-translation-placeholder-color);border-radius:4px;}.placeholder-line.short.svelte-z1j7sg {width:60%;}`
|
|
3097
|
+
};
|
|
3098
|
+
function Da(y, t) {
|
|
3099
|
+
pe(t, !0), be(y, Na);
|
|
3100
|
+
const p = t.$$host;
|
|
3101
|
+
let i = u(t, "for", 7, ""), o = u(t, "maxHeight", 7, 0), r = q(null);
|
|
3102
|
+
const a = W(() => o() > 0);
|
|
3103
|
+
let n = q(!1), s = q(!1);
|
|
3104
|
+
function _() {
|
|
3105
|
+
if (!e(r) || !e(a)) {
|
|
3106
|
+
m(n, !1), m(s, !1);
|
|
3107
|
+
return;
|
|
3108
|
+
}
|
|
3109
|
+
const { scrollTop: T, scrollHeight: L, clientHeight: M } = e(r);
|
|
3110
|
+
m(n, T > 1), m(s, T + M < L - 1);
|
|
3111
|
+
}
|
|
3112
|
+
let d = q(null), I = q("none");
|
|
3113
|
+
function f(T) {
|
|
3114
|
+
if (!T)
|
|
3115
|
+
return T;
|
|
3116
|
+
const L = document.createElement("textarea");
|
|
3117
|
+
return L.innerHTML = T, L.value;
|
|
3118
|
+
}
|
|
3119
|
+
const l = W(() => f(e(d))), P = st(() => e(d) === null, 200), b = W(() => e(d) !== null ? !1 : e(I) === "none" ? !0 : P());
|
|
3120
|
+
me(() => {
|
|
3121
|
+
if (!i()) {
|
|
3122
|
+
console.warn("fortyfour-translation: 'for' attribute is required");
|
|
3123
|
+
return;
|
|
3124
|
+
}
|
|
3125
|
+
const L = p.getRootNode().getElementById(i());
|
|
3126
|
+
if (!L) {
|
|
3127
|
+
console.warn(`fortyfour-translation: element with id "${i()}" not found`);
|
|
3128
|
+
return;
|
|
3129
|
+
}
|
|
3130
|
+
m(I, L.getAttribute("preload") || "none", !0);
|
|
3131
|
+
const M = L.metadata;
|
|
3132
|
+
M && m(d, M.translation ?? null, !0);
|
|
3133
|
+
function z() {
|
|
3134
|
+
const g = L.metadata;
|
|
3135
|
+
m(d, g?.translation ?? null, !0);
|
|
3136
|
+
}
|
|
3137
|
+
return L.addEventListener("loadedmetadata", z), () => {
|
|
3138
|
+
L.removeEventListener("loadedmetadata", z);
|
|
3139
|
+
};
|
|
3140
|
+
}), Oe(p, "data-placeholder", () => e(b)), me(() => {
|
|
3141
|
+
if (!e(r) || !e(a))
|
|
3142
|
+
return;
|
|
3143
|
+
_(), e(r).addEventListener("scroll", _);
|
|
3144
|
+
const T = new ResizeObserver(_);
|
|
3145
|
+
return T.observe(e(r)), () => {
|
|
3146
|
+
e(r).removeEventListener("scroll", _), T.disconnect();
|
|
3147
|
+
};
|
|
3148
|
+
});
|
|
3149
|
+
var j = {
|
|
3150
|
+
get for() {
|
|
3151
|
+
return i();
|
|
3152
|
+
},
|
|
3153
|
+
set for(T = "") {
|
|
3154
|
+
i(T), c();
|
|
3155
|
+
},
|
|
3156
|
+
get maxHeight() {
|
|
3157
|
+
return o();
|
|
3158
|
+
},
|
|
3159
|
+
set maxHeight(T = 0) {
|
|
3160
|
+
o(T), c();
|
|
3161
|
+
}
|
|
3162
|
+
}, C = qa();
|
|
3163
|
+
let B;
|
|
3164
|
+
var A = G(C);
|
|
3165
|
+
let X, R;
|
|
3166
|
+
var V = G(A);
|
|
3167
|
+
{
|
|
3168
|
+
var k = (T) => {
|
|
3169
|
+
var L = Ba(), M = G(L), z = G(M, !0);
|
|
3170
|
+
N(M), N(L), H(() => je(z, e(l))), ze(1, L, () => Pe, () => ({ duration: 400 })), x(T, L);
|
|
3171
|
+
}, D = (T) => {
|
|
3172
|
+
var L = ee(), M = J(L);
|
|
3173
|
+
{
|
|
3174
|
+
var z = (g) => {
|
|
3175
|
+
var E = Aa();
|
|
3176
|
+
let Q;
|
|
3177
|
+
H((oe) => Q = Le(E, "", Q, oe), [
|
|
3178
|
+
() => ({ height: e(a) ? `${o()}px` : void 0 })
|
|
3179
|
+
]), x(g, E);
|
|
3180
|
+
};
|
|
3181
|
+
K(
|
|
3182
|
+
M,
|
|
3183
|
+
(g) => {
|
|
3184
|
+
e(b) && g(z);
|
|
3185
|
+
},
|
|
3186
|
+
!0
|
|
3187
|
+
);
|
|
3188
|
+
}
|
|
3189
|
+
x(T, L);
|
|
3190
|
+
};
|
|
3191
|
+
K(V, (T) => {
|
|
3192
|
+
e(l) ? T(k) : T(D, !1);
|
|
3193
|
+
});
|
|
3194
|
+
}
|
|
3195
|
+
return N(A), Ee(A, (T) => m(r, T), () => e(r)), N(C), H(
|
|
3196
|
+
(T, L, M) => {
|
|
3197
|
+
B = de(C, 1, "wrapper svelte-z1j7sg", null, B, T), X = de(A, 1, "container svelte-z1j7sg", null, X, L), R = Le(A, "", R, M);
|
|
3198
|
+
},
|
|
3199
|
+
[
|
|
3200
|
+
() => ({
|
|
3201
|
+
scrollable: e(a),
|
|
3202
|
+
"can-scroll-up": e(n),
|
|
3203
|
+
"can-scroll-down": e(s)
|
|
3204
|
+
}),
|
|
3205
|
+
() => ({ scrollable: e(a) }),
|
|
3206
|
+
() => ({
|
|
3207
|
+
"max-height": e(a) ? `${o()}px` : void 0
|
|
3208
|
+
})
|
|
3209
|
+
]
|
|
3210
|
+
), x(y, C), ge(j);
|
|
3211
|
+
}
|
|
3212
|
+
customElements.define("fortyfour-translation", ue(
|
|
3213
|
+
Da,
|
|
3214
|
+
{
|
|
3215
|
+
for: { attribute: "for", reflect: !0 },
|
|
3216
|
+
maxHeight: { attribute: "max-height", reflect: !0, type: "Number" }
|
|
3217
|
+
},
|
|
3218
|
+
[],
|
|
3219
|
+
[],
|
|
3220
|
+
!0
|
|
3221
|
+
));
|
|
3222
|
+
var Oa = Me('<svg viewBox="0 0 359 254" aria-label="44" fill="currentColor"><path d="M92,300 C92.2666667,290.933333 92.8,280.533333 93.6,268.8 C93.8666667,262.666667 94,258.4 94,256 L6,256 L6,161.2 C7.33333333,159.333333 9.2,156.533333 11.6,152.8 C27.0666667,129.866667 39.3333333,110.733333 48.4,95.4 C57.4666667,80.0666667 65.2,63.8666667 71.6,46.8 L186,46.8 C128.4,122.533333 85.8666667,187.066667 58.4,240.4 L94,240.4 C94,240.133333 94,239.6 94,238.8 C93.4666667,228.666667 92.8,219.6 92,211.6 L185.2,72.4 C181.733333,91.0666667 180,127.333333 180,181.2 C180,235.066667 181.733333,274.666667 185.2,300 L92,300 Z" transform="translate(-6, -46)"></path><path d="M271,300 C271.266667,290.933333 271.8,280.533333 272.6,268.8 C272.866667,262.666667 273,258.4 273,256 L185,256 L185,161.2 C186.333333,159.333333 188.2,156.533333 190.6,152.8 C206.066667,129.866667 218.333333,110.733333 227.4,95.4 C236.466667,80.0666667 244.2,63.8666667 250.6,46.8 L365,46.8 C307.4,122.533333 264.866667,187.066667 237.4,240.4 L273,240.4 C273,240.133333 273,239.6 273,238.8 C272.466667,228.666667 271.8,219.6 271,211.6 L364.2,72.4 C360.733333,91.0666667 359,127.333333 359,181.2 C359,235.066667 360.733333,274.666667 364.2,300 L271,300 Z" transform="translate(-6, -46)"></path></svg>');
|
|
3223
|
+
function Ct(y, t) {
|
|
3224
|
+
pe(t, !0);
|
|
3225
|
+
let p = u(t, "class", 7, ""), i = u(t, "height", 7, "1em"), o = u(t, "width", 7, "auto");
|
|
3226
|
+
var r = {
|
|
3227
|
+
get class() {
|
|
3228
|
+
return p();
|
|
3229
|
+
},
|
|
3230
|
+
set class(n = "") {
|
|
3231
|
+
p(n), c();
|
|
3232
|
+
},
|
|
3233
|
+
get height() {
|
|
3234
|
+
return i();
|
|
3235
|
+
},
|
|
3236
|
+
set height(n = "1em") {
|
|
3237
|
+
i(n), c();
|
|
3238
|
+
},
|
|
3239
|
+
get width() {
|
|
3240
|
+
return o();
|
|
3241
|
+
},
|
|
3242
|
+
set width(n = "auto") {
|
|
3243
|
+
o(n), c();
|
|
3244
|
+
}
|
|
3245
|
+
}, a = Oa();
|
|
3246
|
+
return H(() => {
|
|
3247
|
+
de(a, 0, nt(p())), Z(a, "height", i()), Z(a, "width", o());
|
|
3248
|
+
}), x(y, a), ge(r);
|
|
3249
|
+
}
|
|
3250
|
+
ue(Ct, { class: {}, height: {}, width: {} }, [], [], !0);
|
|
3251
|
+
var Ua = F("<fortyfour-progress-bar></fortyfour-progress-bar>", 2), Fa = F("<fortyfour-line-waveform></fortyfour-line-waveform>", 2), Ga = F("<fortyfour-bar-waveform></fortyfour-bar-waveform>", 2), Ka = (y, t) => m(t, !e(t)), Va = F('<span class="label-separator svelte-1s8pfav">•</span> <button class="translation-toggle svelte-1s8pfav"> </button>', 1), Xa = F("<fortyfour-translation></fortyfour-translation>", 2), Ya = F("<fortyfour-transcription></fortyfour-transcription>", 2), Za = F('<div class="transcription-box svelte-1s8pfav"><div class="transcription-header svelte-1s8pfav"><span class="transcription-label svelte-1s8pfav">TRANSCRIPT</span> <!></div> <!></div>'), Ja = F('<a class="branding svelte-1s8pfav" href="https://44.audio" target="_blank" rel="noopener noreferrer"><span class="branding-text svelte-1s8pfav">powered by</span> <!></a>'), Qa = F('<fortyfour-recording></fortyfour-recording> <div><div class="player svelte-1s8pfav"><fortyfour-play-button></fortyfour-play-button> <!> <div class="duration svelte-1s8pfav"><fortyfour-duration><span slot="placeholder">0:00</span></fortyfour-duration> <span class="separator svelte-1s8pfav">/</span> <fortyfour-duration><span slot="placeholder">0:00</span></fortyfour-duration></div></div> <!></div> <!>', 3);
|
|
3252
|
+
const $a = {
|
|
3253
|
+
hash: "svelte-1s8pfav",
|
|
3254
|
+
code: `:host {--fortyfour-player-font-family: system-ui, sans-serif;--fortyfour-player-font-size: 14px;--fortyfour-player-accent: #c4956a;--fortyfour-player-background: #faf8f5;--fortyfour-player-surface: #f0ede8;--fortyfour-player-text: #2c2620;--fortyfour-player-muted: #8c8279;--fortyfour-player-border: #d9d4cc;display:block;font-family:var(--fortyfour-player-font-family);font-size:var(--fortyfour-player-font-size);}
|
|
3255
|
+
|
|
3256
|
+
@media (prefers-color-scheme: dark) {:host {--fortyfour-player-accent: #d4a574;--fortyfour-player-background: #1c1917;--fortyfour-player-surface: #262220;--fortyfour-player-text: #e7e0d5;--fortyfour-player-muted: #9c938a;--fortyfour-player-border: #3d3632;}
|
|
3257
|
+
}.container.svelte-1s8pfav {border:1px solid var(--fortyfour-player-border);border-radius:12px;background:var(--fortyfour-player-background);overflow:hidden;}.container.square.svelte-1s8pfav {border-radius:0;}.container.compact.svelte-1s8pfav .player:where(.svelte-1s8pfav) {height:44px;padding:0.5rem 0.75rem;gap:0.75rem;}.container.compact.svelte-1s8pfav .transcription-box:where(.svelte-1s8pfav) {padding:0.5rem 0.75rem;}.container.compact.svelte-1s8pfav fortyfour-play-button:where(.svelte-1s8pfav) {--fortyfour-play-button-size: 40px;}.container.comfortable.svelte-1s8pfav .player:where(.svelte-1s8pfav) {height:68px;padding:1rem 1.25rem;gap:1.25rem;}.container.comfortable.svelte-1s8pfav .transcription-box:where(.svelte-1s8pfav) {padding:1rem 1.25rem;}.container.comfortable.svelte-1s8pfav fortyfour-play-button:where(.svelte-1s8pfav) {--fortyfour-play-button-size: 56px;}.player.svelte-1s8pfav {display:flex;align-items:center;gap:1rem;height:56px;padding:0.75rem 1rem;}fortyfour-play-button.svelte-1s8pfav {--fortyfour-play-button-size: 48px;--fortyfour-play-button-background-color: var(--fortyfour-player-accent);--fortyfour-play-button-icon-color: var(--fortyfour-player-background);--fortyfour-play-button-border-width: 0;--fortyfour-play-button-focus-color: var(--fortyfour-player-accent);flex-shrink:0;}fortyfour-bar-waveform.svelte-1s8pfav,
|
|
3258
|
+
fortyfour-line-waveform.svelte-1s8pfav,
|
|
3259
|
+
fortyfour-progress-bar.svelte-1s8pfav {height:100%;flex:1;}fortyfour-bar-waveform.svelte-1s8pfav {--waveform-progress-color: var(--fortyfour-player-accent);--waveform-track-color: var(--fortyfour-player-border);--waveform-focus-color: var(--fortyfour-player-accent);}fortyfour-line-waveform.svelte-1s8pfav {--fortyfour-line-waveform-progress-color: var(--fortyfour-player-accent);--fortyfour-line-waveform-track-color: var(--fortyfour-player-border);--fortyfour-line-waveform-focus-color: var(--fortyfour-player-accent);}fortyfour-progress-bar.svelte-1s8pfav {--fortyfour-progress-bar-progress-color: var(--fortyfour-player-accent);--fortyfour-progress-bar-track-color: var(--fortyfour-player-border);--fortyfour-progress-bar-focus-color: var(--fortyfour-player-accent);}.duration.svelte-1s8pfav {display:flex;align-items:center;gap:0.25rem;flex-shrink:0;}.elapsed.svelte-1s8pfav {--fortyfour-duration-font-family: var(--fortyfour-player-font-family);--fortyfour-duration-font-size: 1em;--fortyfour-duration-color: var(--fortyfour-player-text);font-weight:500;}.separator.svelte-1s8pfav {font-size:1em;color:var(--fortyfour-player-muted);}.total.svelte-1s8pfav {--fortyfour-duration-font-family: var(--fortyfour-player-font-family);--fortyfour-duration-font-size: 1em;--fortyfour-duration-color: var(--fortyfour-player-muted);}.transcription-box.svelte-1s8pfav {background:var(--fortyfour-player-surface);padding:0.75rem 1rem;border-top:1px solid var(--fortyfour-player-border);}.transcription-header.svelte-1s8pfav {display:flex;align-items:center;gap:0.5em;margin-bottom:0.5rem;}.transcription-label.svelte-1s8pfav {font-size:0.7em;font-weight:600;letter-spacing:0.05em;color:var(--fortyfour-player-muted);}.label-separator.svelte-1s8pfav {font-size:0.7em;color:var(--fortyfour-player-muted);}.translation-toggle.svelte-1s8pfav {font-size:0.7em;font-weight:600;letter-spacing:0.05em;color:var(--fortyfour-player-accent);background:none;border:none;padding:0;cursor:pointer;}.translation-toggle.svelte-1s8pfav:hover {text-decoration:underline;}.translation-toggle.svelte-1s8pfav:focus-visible {outline:2px solid var(--fortyfour-player-accent);outline-offset:2px;border-radius:2px;}fortyfour-transcription.svelte-1s8pfav,
|
|
3260
|
+
fortyfour-translation.svelte-1s8pfav {display:block;line-height:1.5;color:var(--fortyfour-player-text);--fortyfour-transcription-font-family: var(--fortyfour-player-font-family);--fortyfour-transcription-font-size: 1em;--fortyfour-translation-font-family: var(--fortyfour-player-font-family);--fortyfour-translation-font-size: 1em;--fortyfour-transcription-color: var(--fortyfour-player-muted);--fortyfour-transcription-active-color: var(--fortyfour-player-background);--fortyfour-transcription-active-bg: var(--fortyfour-player-accent);--fortyfour-transcription-past-color: var(--fortyfour-player-text);--fortyfour-transcription-fade-color: var(--fortyfour-player-surface);--fortyfour-transcription-placeholder-color: var(--fortyfour-player-border);--fortyfour-transcription-scrollbar-thumb: var(--fortyfour-player-border);--fortyfour-transcription-scrollbar-thumb-hover: var(--fortyfour-player-muted);--fortyfour-transcription-focus-color: var(--fortyfour-player-accent);--fortyfour-translation-fade-color: var(--fortyfour-player-surface);--fortyfour-translation-placeholder-color: var(--fortyfour-player-border);--fortyfour-translation-scrollbar-thumb: var(--fortyfour-player-border);--fortyfour-translation-scrollbar-thumb-hover: var(--fortyfour-player-muted);--fortyfour-translation-focus-color: var(--fortyfour-player-accent);}.branding.svelte-1s8pfav {display:flex;align-items:center;gap:0.3em;width:fit-content;margin-left:auto;margin-top:0.5rem;margin-right:1rem;text-decoration:none;color:var(--fortyfour-player-muted);border-radius:4px;}.branding.svelte-1s8pfav:focus-visible {outline:2px solid var(--fortyfour-player-accent);outline-offset:2px;}.branding-text.svelte-1s8pfav {font-size:0.7em;font-weight:400;letter-spacing:0.01em;}`
|
|
3261
|
+
};
|
|
3262
|
+
function eo(y, t) {
|
|
3263
|
+
pe(t, !0), be(y, $a);
|
|
3264
|
+
const p = t.$$host;
|
|
3265
|
+
let i = u(t, "recordingId", 7), o = u(t, "apiHost", 7, "api.44.audio"), r = u(t, "shape", 7, "rounded"), a = u(t, "preload", 7, "none"), n = u(t, "spacing", 7, "default"), s = u(t, "progress", 7, "bar-waveform"), _ = u(t, "hideTranscript", 7, !1), d = u(t, "hideTranslation", 7, !1), I = u(t, "hideBranding", 7, !1);
|
|
3266
|
+
const f = `fortyfour-player-${crypto.randomUUID().slice(0, 8)}`;
|
|
3267
|
+
let l = q(null), P = q(!1), b = q(!1);
|
|
3268
|
+
const j = W(() => r() === "square"), C = W(() => e(j) ? "square" : "circle"), B = W(() => e(j) ? "0" : "2"), A = W(() => s() || "bar-waveform"), X = W(() => n() === "compact" ? 28 : n() === "comfortable" ? 48 : 40), R = W(() => n() === "compact" ? 4 : n() === "comfortable" ? 8 : 6);
|
|
3269
|
+
function V() {
|
|
3270
|
+
const U = e(l)?.state ?? "idle";
|
|
3271
|
+
p.setAttribute("data-state", U);
|
|
3272
|
+
}
|
|
3273
|
+
function k() {
|
|
3274
|
+
const U = e(l)?.metadata?.translation;
|
|
3275
|
+
m(P, U != null && U !== "", !0);
|
|
3276
|
+
}
|
|
3277
|
+
me(() => {
|
|
3278
|
+
e(l) && (V(), k());
|
|
3279
|
+
});
|
|
3280
|
+
var D = {
|
|
177
3281
|
get recordingId() {
|
|
178
|
-
return
|
|
3282
|
+
return i();
|
|
179
3283
|
},
|
|
180
|
-
set recordingId(
|
|
181
|
-
|
|
3284
|
+
set recordingId(U) {
|
|
3285
|
+
i(U), c();
|
|
182
3286
|
},
|
|
183
|
-
get
|
|
3287
|
+
get apiHost() {
|
|
3288
|
+
return o();
|
|
3289
|
+
},
|
|
3290
|
+
set apiHost(U = "api.44.audio") {
|
|
3291
|
+
o(U), c();
|
|
3292
|
+
},
|
|
3293
|
+
get shape() {
|
|
3294
|
+
return r();
|
|
3295
|
+
},
|
|
3296
|
+
set shape(U = "rounded") {
|
|
3297
|
+
r(U), c();
|
|
3298
|
+
},
|
|
3299
|
+
get preload() {
|
|
184
3300
|
return a();
|
|
185
3301
|
},
|
|
186
|
-
set
|
|
187
|
-
a(
|
|
3302
|
+
set preload(U = "none") {
|
|
3303
|
+
a(U), c();
|
|
188
3304
|
},
|
|
189
|
-
get
|
|
190
|
-
return
|
|
3305
|
+
get spacing() {
|
|
3306
|
+
return n();
|
|
3307
|
+
},
|
|
3308
|
+
set spacing(U = "default") {
|
|
3309
|
+
n(U), c();
|
|
3310
|
+
},
|
|
3311
|
+
get progress() {
|
|
3312
|
+
return s();
|
|
3313
|
+
},
|
|
3314
|
+
set progress(U = "bar-waveform") {
|
|
3315
|
+
s(U), c();
|
|
3316
|
+
},
|
|
3317
|
+
get hideTranscript() {
|
|
3318
|
+
return _();
|
|
3319
|
+
},
|
|
3320
|
+
set hideTranscript(U = !1) {
|
|
3321
|
+
_(U), c();
|
|
191
3322
|
},
|
|
192
|
-
|
|
193
|
-
|
|
3323
|
+
get hideTranslation() {
|
|
3324
|
+
return d();
|
|
3325
|
+
},
|
|
3326
|
+
set hideTranslation(U = !1) {
|
|
3327
|
+
d(U), c();
|
|
3328
|
+
},
|
|
3329
|
+
get hideBranding() {
|
|
3330
|
+
return I();
|
|
3331
|
+
},
|
|
3332
|
+
set hideBranding(U = !1) {
|
|
3333
|
+
I(U), c();
|
|
194
3334
|
}
|
|
195
|
-
},
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
3335
|
+
}, T = Qa(), L = J(T);
|
|
3336
|
+
H(() => te(L, "id", f)), H(() => te(L, "api-host", o())), H(() => te(L, "recording-id", i())), H(() => te(L, "preload", a())), Ee(L, (U) => m(l, U), () => e(l));
|
|
3337
|
+
var M = ye(L, 2);
|
|
3338
|
+
let z;
|
|
3339
|
+
var g = G(M), E = G(g);
|
|
3340
|
+
H(() => te(E, "for", f)), H(() => te(E, "shape", e(C))), de(E, 1, "svelte-1s8pfav");
|
|
3341
|
+
var Q = ye(E, 2);
|
|
3342
|
+
{
|
|
3343
|
+
var oe = (U) => {
|
|
3344
|
+
var re = Ua();
|
|
3345
|
+
H(() => te(re, "for", f)), H(() => te(re, "bar-height", e(R))), H(() => te(re, "bar-radius", e(B))), de(re, 1, "svelte-1s8pfav"), x(U, re);
|
|
3346
|
+
}, w = (U) => {
|
|
3347
|
+
var re = ee(), ne = J(re);
|
|
3348
|
+
{
|
|
3349
|
+
var ie = (fe) => {
|
|
3350
|
+
var ae = Fa();
|
|
3351
|
+
H(() => te(ae, "for", f)), te(ae, "line-width", "2"), H(() => te(ae, "height", e(X))), H(() => te(ae, "sharp", e(j))), de(ae, 1, "svelte-1s8pfav"), x(fe, ae);
|
|
3352
|
+
}, ve = (fe) => {
|
|
3353
|
+
var ae = Ga();
|
|
3354
|
+
H(() => te(ae, "for", f)), te(ae, "bar-width", "4"), te(ae, "bar-gap", "2"), H(() => te(ae, "bar-radius", e(B))), H(() => te(ae, "height", e(X))), de(ae, 1, "svelte-1s8pfav"), x(fe, ae);
|
|
3355
|
+
};
|
|
3356
|
+
K(
|
|
3357
|
+
ne,
|
|
3358
|
+
(fe) => {
|
|
3359
|
+
e(A) === "line-waveform" ? fe(ie) : fe(ve, !1);
|
|
3360
|
+
},
|
|
3361
|
+
!0
|
|
3362
|
+
);
|
|
3363
|
+
}
|
|
3364
|
+
x(U, re);
|
|
3365
|
+
};
|
|
3366
|
+
K(Q, (U) => {
|
|
3367
|
+
e(A) === "progress-bar" ? U(oe) : U(w, !1);
|
|
3368
|
+
});
|
|
3369
|
+
}
|
|
3370
|
+
var h = ye(Q, 2), v = G(h);
|
|
3371
|
+
de(v, 1, "elapsed svelte-1s8pfav"), H(() => te(v, "for", f)), te(v, "format", "elapsed");
|
|
3372
|
+
var S = ye(v, 4);
|
|
3373
|
+
de(S, 1, "total svelte-1s8pfav"), H(() => te(S, "for", f)), te(S, "format", "total"), N(h), N(g);
|
|
3374
|
+
var O = ye(g, 2);
|
|
3375
|
+
{
|
|
3376
|
+
var $ = (U) => {
|
|
3377
|
+
var re = Za(), ne = G(re), ie = ye(G(ne), 2);
|
|
3378
|
+
{
|
|
3379
|
+
var ve = (le) => {
|
|
3380
|
+
var se = Va(), xe = ye(J(se), 2);
|
|
3381
|
+
xe.__click = [Ka, b];
|
|
3382
|
+
var _e = G(xe, !0);
|
|
3383
|
+
N(xe), H(() => je(_e, e(b) ? "ORIGINAL" : "TRANSLATION")), x(le, se);
|
|
3384
|
+
};
|
|
3385
|
+
K(ie, (le) => {
|
|
3386
|
+
e(P) && !d() && le(ve);
|
|
3387
|
+
});
|
|
3388
|
+
}
|
|
3389
|
+
N(ne);
|
|
3390
|
+
var fe = ye(ne, 2);
|
|
3391
|
+
{
|
|
3392
|
+
var ae = (le) => {
|
|
3393
|
+
var se = Xa();
|
|
3394
|
+
H(() => te(se, "for", f)), te(se, "max-height", "96"), de(se, 1, "svelte-1s8pfav"), x(le, se);
|
|
3395
|
+
}, he = (le) => {
|
|
3396
|
+
var se = Ya();
|
|
3397
|
+
H(() => te(se, "for", f)), te(se, "mode", "karaoke"), te(se, "max-height", "96"), de(se, 1, "svelte-1s8pfav"), x(le, se);
|
|
3398
|
+
};
|
|
3399
|
+
K(fe, (le) => {
|
|
3400
|
+
e(b) && !d() ? le(ae) : le(he, !1);
|
|
3401
|
+
});
|
|
3402
|
+
}
|
|
3403
|
+
N(re), x(U, re);
|
|
3404
|
+
};
|
|
3405
|
+
K(O, (U) => {
|
|
3406
|
+
_() || U($);
|
|
3407
|
+
});
|
|
3408
|
+
}
|
|
3409
|
+
N(M);
|
|
3410
|
+
var Y = ye(M, 2);
|
|
3411
|
+
{
|
|
3412
|
+
var ce = (U) => {
|
|
3413
|
+
var re = Ja(), ne = ye(G(re), 2);
|
|
3414
|
+
Ct(ne, { class: "branding-logo", height: "0.65em" }), N(re), x(U, re);
|
|
3415
|
+
};
|
|
3416
|
+
K(Y, (U) => {
|
|
3417
|
+
I() || U(ce);
|
|
3418
|
+
});
|
|
3419
|
+
}
|
|
3420
|
+
return H((U) => z = de(M, 1, "container svelte-1s8pfav", null, z, U), [
|
|
3421
|
+
() => ({
|
|
3422
|
+
square: e(j),
|
|
3423
|
+
compact: n() === "compact",
|
|
3424
|
+
comfortable: n() === "comfortable"
|
|
3425
|
+
})
|
|
3426
|
+
]), Ie("loadedmetadata", L, () => {
|
|
3427
|
+
V(), k();
|
|
3428
|
+
}), Ie("play", L, V), Ie("pause", L, V), Ie("error", L, V), Ie("ended", L, V), x(y, T), ge(D);
|
|
3429
|
+
}
|
|
3430
|
+
Ne(["click"]);
|
|
3431
|
+
customElements.define("fortyfour-player", ue(
|
|
3432
|
+
eo,
|
|
3433
|
+
{
|
|
3434
|
+
apiHost: { attribute: "api-host", reflect: !0 },
|
|
3435
|
+
recordingId: { attribute: "recording-id", reflect: !0 },
|
|
3436
|
+
shape: { attribute: "shape", reflect: !0 },
|
|
3437
|
+
preload: { attribute: "preload", reflect: !0 },
|
|
3438
|
+
spacing: { attribute: "spacing", reflect: !0 },
|
|
3439
|
+
progress: { attribute: "progress", reflect: !0 },
|
|
3440
|
+
hideTranscript: { attribute: "hide-transcript", reflect: !0, type: "Boolean" },
|
|
3441
|
+
hideTranslation: {
|
|
3442
|
+
attribute: "hide-translation",
|
|
3443
|
+
reflect: !0,
|
|
3444
|
+
type: "Boolean"
|
|
199
3445
|
},
|
|
3446
|
+
hideBranding: { attribute: "hide-branding", reflect: !0, type: "Boolean" }
|
|
3447
|
+
},
|
|
3448
|
+
[],
|
|
3449
|
+
[],
|
|
3450
|
+
!0
|
|
3451
|
+
));
|
|
3452
|
+
var to = F("<fortyfour-recording></fortyfour-recording> <fortyfour-play-button></fortyfour-play-button>", 3);
|
|
3453
|
+
const ro = {
|
|
3454
|
+
hash: "svelte-1i43bu9",
|
|
3455
|
+
code: `:host {--fortyfour-mini-player-accent: #c4956a;--fortyfour-mini-player-background: #faf8f5;display:inline-block;}
|
|
3456
|
+
|
|
3457
|
+
@media (prefers-color-scheme: dark) {:host {--fortyfour-mini-player-accent: #d4a574;--fortyfour-mini-player-background: #1c1917;}
|
|
3458
|
+
}fortyfour-play-button.svelte-1i43bu9 {--fortyfour-play-button-size: 48px;--fortyfour-play-button-background-color: var(--fortyfour-mini-player-background);--fortyfour-play-button-icon-color: var(--fortyfour-mini-player-accent);--fortyfour-play-button-border-width: 0;--fortyfour-play-button-ring-width: 3px;--fortyfour-play-button-ring-fill-color: var(--fortyfour-mini-player-accent);--fortyfour-play-button-ring-track-color: var(--fortyfour-mini-player-background);--fortyfour-play-button-focus-color: var(--fortyfour-mini-player-accent);}fortyfour-play-button.small.svelte-1i43bu9 {--fortyfour-play-button-size: 32px;--fortyfour-play-button-ring-width: 2px;}fortyfour-play-button.large.svelte-1i43bu9 {--fortyfour-play-button-size: 64px;--fortyfour-play-button-ring-width: 4px;}`
|
|
3459
|
+
};
|
|
3460
|
+
function ao(y, t) {
|
|
3461
|
+
pe(t, !0), be(y, ro);
|
|
3462
|
+
const p = t.$$host;
|
|
3463
|
+
let i = u(t, "recordingId", 7), o = u(t, "apiHost", 7, "api.44.audio"), r = u(t, "size", 7, "medium"), a = u(t, "preload", 7, "none");
|
|
3464
|
+
const n = `fortyfour-mini-player-${crypto.randomUUID().slice(0, 8)}`;
|
|
3465
|
+
let s = q(null);
|
|
3466
|
+
function _() {
|
|
3467
|
+
const b = e(s)?.state ?? "idle";
|
|
3468
|
+
p.setAttribute("data-state", b);
|
|
3469
|
+
}
|
|
3470
|
+
me(() => {
|
|
3471
|
+
e(s) && _();
|
|
3472
|
+
});
|
|
3473
|
+
var d = {
|
|
200
3474
|
get recordingId() {
|
|
201
|
-
return
|
|
3475
|
+
return i();
|
|
202
3476
|
},
|
|
203
|
-
|
|
204
|
-
|
|
3477
|
+
set recordingId(b) {
|
|
3478
|
+
i(b), c();
|
|
205
3479
|
},
|
|
206
|
-
get
|
|
207
|
-
return
|
|
3480
|
+
get apiHost() {
|
|
3481
|
+
return o();
|
|
208
3482
|
},
|
|
209
|
-
|
|
210
|
-
|
|
3483
|
+
set apiHost(b = "api.44.audio") {
|
|
3484
|
+
o(b), c();
|
|
3485
|
+
},
|
|
3486
|
+
get size() {
|
|
3487
|
+
return r();
|
|
3488
|
+
},
|
|
3489
|
+
set size(b = "medium") {
|
|
3490
|
+
r(b), c();
|
|
3491
|
+
},
|
|
3492
|
+
get preload() {
|
|
3493
|
+
return a();
|
|
3494
|
+
},
|
|
3495
|
+
set preload(b = "none") {
|
|
3496
|
+
a(b), c();
|
|
211
3497
|
}
|
|
212
|
-
}
|
|
3498
|
+
}, I = to(), f = J(I);
|
|
3499
|
+
H(() => te(f, "id", n)), H(() => te(f, "api-host", o())), H(() => te(f, "recording-id", i())), H(() => te(f, "preload", a())), Ee(f, (b) => m(s, b), () => e(s));
|
|
3500
|
+
var l = ye(f, 2);
|
|
3501
|
+
let P;
|
|
3502
|
+
return H(() => te(l, "for", n)), te(l, "shape", "circle"), te(l, "visualization", "ring"), H((b) => P = de(l, 1, "button svelte-1i43bu9", null, P, b), [
|
|
3503
|
+
() => ({ small: r() === "small", large: r() === "large" })
|
|
3504
|
+
]), Ie("loadedmetadata", f, _), Ie("play", f, _), Ie("pause", f, _), Ie("error", f, _), Ie("ended", f, _), x(y, I), ge(d);
|
|
213
3505
|
}
|
|
214
|
-
customElements.define("fortyfour-
|
|
215
|
-
|
|
3506
|
+
customElements.define("fortyfour-mini-player", ue(
|
|
3507
|
+
ao,
|
|
216
3508
|
{
|
|
217
|
-
apiHost: { attribute: "api-host" },
|
|
218
|
-
recordingId: { attribute: "recording-id" },
|
|
219
|
-
|
|
3509
|
+
apiHost: { attribute: "api-host", reflect: !0 },
|
|
3510
|
+
recordingId: { attribute: "recording-id", reflect: !0 },
|
|
3511
|
+
size: { attribute: "size", reflect: !0 },
|
|
3512
|
+
preload: { attribute: "preload", reflect: !0 }
|
|
220
3513
|
},
|
|
221
3514
|
[],
|
|
222
3515
|
[],
|