@banou/media-player 0.10.2 → 0.10.3
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/engine/index.js +1 -1
- package/dist/{engine-DqyZgmTv.js → engine-CB5J5kah.js} +29 -29
- package/dist/index.js +282 -265
- package/dist/react/player.d.ts +1 -0
- package/dist/react/source-feature.d.ts +24 -0
- package/package.json +1 -1
- package/src/lib/engine/thumbnails.ts +13 -1
- package/src/lib/react/components/control-bar.tsx +3 -1
- package/src/lib/react/components/overlay.tsx +5 -2
- package/src/lib/react/components/progress-bar.tsx +16 -4
- package/src/lib/react/hooks/use-playback.ts +27 -0
- package/src/lib/react/source-feature.ts +13 -0
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { l as e, n as t, o as n, r, s as i, t as a, u as o } from "./engine-
|
|
1
|
+
import { l as e, n as t, o as n, r, s as i, t as a, u as o } from "./engine-CB5J5kah.js";
|
|
2
2
|
import { Children as s, Fragment as c, isValidElement as l, useCallback as u, useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
|
|
3
3
|
import { css as h, keyframes as g } from "@emotion/react";
|
|
4
4
|
import { createPlayer as _, useContainerAttach as v, useMediaAttach as y } from "@videojs/react";
|
|
@@ -60,16 +60,16 @@ var B = {
|
|
|
60
60
|
label: (n[i] ?? 0) > 1 && a && a !== i ? `${i} (${a})` : i
|
|
61
61
|
};
|
|
62
62
|
});
|
|
63
|
-
},
|
|
63
|
+
}, K = (e) => ee(e).map(({ track: e, label: t }) => ({
|
|
64
64
|
id: e.streamIndex,
|
|
65
65
|
label: t
|
|
66
|
-
})),
|
|
66
|
+
})), te = [
|
|
67
67
|
0,
|
|
68
68
|
250,
|
|
69
69
|
1e3,
|
|
70
70
|
3e3,
|
|
71
71
|
1e4
|
|
72
|
-
],
|
|
72
|
+
], ne = 6e4, re = 500, ie = 15e3, ae = (e) => e instanceof Error ? e.message : String(e), oe = (e) => {
|
|
73
73
|
let t = [], n = e?.cause;
|
|
74
74
|
for (let e = 0; n != null && e < 8; e++) {
|
|
75
75
|
if (typeof MediaError < "u" && n instanceof MediaError) {
|
|
@@ -80,7 +80,7 @@ var B = {
|
|
|
80
80
|
}
|
|
81
81
|
return t.length ? t.join("\n") : void 0;
|
|
82
82
|
}, se = (e, t, r) => {
|
|
83
|
-
let a = U(), { read: o, size: s, publicPath: c = "", libavWorkerUrl: l = "", jassubWorkerUrl: f = "", jassubWasmUrl: h = "", jassubLegacyWasmUrl: g, defaultFontUrl: _, bufferSize: v, autoplay: y = !1, chapters: b, seekPrepareBudgetMs: x =
|
|
83
|
+
let a = U(), { read: o, size: s, publicPath: c = "", libavWorkerUrl: l = "", jassubWorkerUrl: f = "", jassubWasmUrl: h = "", jassubLegacyWasmUrl: g, defaultFontUrl: _, bufferSize: v, autoplay: y = !1, chapters: b, seekPrepareBudgetMs: x = re } = r ?? {}, S = p(b);
|
|
84
84
|
S.current = b;
|
|
85
85
|
let [C, w] = m(void 0), [T, E] = m(0), D = p({
|
|
86
86
|
count: 0,
|
|
@@ -113,11 +113,17 @@ var B = {
|
|
|
113
113
|
if (n) for (let t = 0; t < n.buffered.length; t++) n.buffered.start(t) <= e + 1 && e < n.buffered.end(t) && (i = n.buffered.end(t) - e);
|
|
114
114
|
console.warn(`[media-player] seek to ${e.toFixed(2)} moved after ${Math.round(performance.now() - r)}ms via ${o}, runway ${i.toFixed(1)}s${o === "deadline" ? " (EXPOSED: moved before its data was ready)" : ""}`);
|
|
115
115
|
}
|
|
116
|
-
}
|
|
116
|
+
};
|
|
117
|
+
a.setSourceState({ seekingTo: e });
|
|
118
|
+
let c = t.videoElement, l = () => {
|
|
119
|
+
c?.removeEventListener("seeked", l), clearTimeout(u), a.setSourceState({ seekingTo: void 0 });
|
|
120
|
+
}, u = setTimeout(l, ie);
|
|
121
|
+
c?.addEventListener("seeked", l);
|
|
122
|
+
let d = setTimeout(() => {
|
|
117
123
|
o = "deadline", s();
|
|
118
124
|
}, x);
|
|
119
125
|
t.prepareSeek(e).catch(() => {}).finally(() => {
|
|
120
|
-
clearTimeout(
|
|
126
|
+
clearTimeout(d), s();
|
|
121
127
|
});
|
|
122
128
|
}, [a, x]), L = u((e) => {
|
|
123
129
|
typeof e == "number" && (a.setSourceState({ selectedAudioTrack: e }), w(e));
|
|
@@ -166,11 +172,11 @@ var B = {
|
|
|
166
172
|
let t = n(e);
|
|
167
173
|
if (u(e, t), t) {
|
|
168
174
|
let t = performance.now();
|
|
169
|
-
t - D.current.at >
|
|
175
|
+
t - D.current.at > ne && (D.current = {
|
|
170
176
|
count: 0,
|
|
171
177
|
at: t
|
|
172
178
|
});
|
|
173
|
-
let n =
|
|
179
|
+
let n = te[Math.min(D.current.count, te.length - 1)];
|
|
174
180
|
D.current = {
|
|
175
181
|
count: D.current.count + 1,
|
|
176
182
|
at: t
|
|
@@ -207,13 +213,13 @@ var B = {
|
|
|
207
213
|
onSeek: (e) => N.current?.(e),
|
|
208
214
|
onSubtitleStreams: (e) => {
|
|
209
215
|
r || a.setSourceState({
|
|
210
|
-
subtitleTracks:
|
|
216
|
+
subtitleTracks: K(e),
|
|
211
217
|
...j.current ? {} : { selectedSubtitleTrack: e[0]?.streamIndex }
|
|
212
218
|
});
|
|
213
219
|
},
|
|
214
220
|
onAudioStreams: (e, t) => {
|
|
215
221
|
r || a.setSourceState({
|
|
216
|
-
audioTracks:
|
|
222
|
+
audioTracks: K(e),
|
|
217
223
|
selectedAudioTrack: t
|
|
218
224
|
});
|
|
219
225
|
}
|
|
@@ -321,7 +327,7 @@ var B = {
|
|
|
321
327
|
mode: s,
|
|
322
328
|
burnedIn: i
|
|
323
329
|
};
|
|
324
|
-
},
|
|
330
|
+
}, q = {
|
|
325
331
|
headings: {
|
|
326
332
|
large: "\n font-weight: 600;\n font-size: calc(2.8 * var(--mp-unit));\n line-height: calc(3.4 * var(--mp-unit));\n @media (min-width: 960px) {\n font-size: calc(3.4 * var(--mp-unit));\n line-height: calc(4.1 * var(--mp-unit));\n }\n ",
|
|
327
333
|
medium: "\n font-weight: 600;\n font-size: calc(2.4 * var(--mp-unit));\n line-height: calc(2.9 * var(--mp-unit));\n @media (min-width: 960px) {\n font-size: calc(2.8 * var(--mp-unit));\n line-height: calc(3.4 * var(--mp-unit));\n }\n ",
|
|
@@ -369,7 +375,7 @@ var B = {
|
|
|
369
375
|
padding: calc(1.2 * var(--mp-unit)) calc(1.6 * var(--mp-unit));
|
|
370
376
|
/* clears a notch once the player is fullscreen; resolves to zero everywhere else */
|
|
371
377
|
padding-top: calc(calc(1.2 * var(--mp-unit)) + env(safe-area-inset-top, 0px));
|
|
372
|
-
${
|
|
378
|
+
${q.headings.small}
|
|
373
379
|
color: white;
|
|
374
380
|
text-shadow: 0 0 4px rgba(0, 0, 0, 1);
|
|
375
381
|
z-index: 2;
|
|
@@ -417,11 +423,11 @@ var B = {
|
|
|
417
423
|
padding: 0 calc(2 * var(--mp-unit));
|
|
418
424
|
text-align: center;
|
|
419
425
|
color: #fff;
|
|
420
|
-
${
|
|
426
|
+
${q.bLarge.regular}
|
|
421
427
|
text-shadow: 0 0 4px rgba(0, 0, 0, 1);
|
|
422
428
|
pointer-events: none;
|
|
423
429
|
`, ge = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", _e = ({ onSubtitleRef: e }) => {
|
|
424
|
-
let t = U((e) => e.title), n = U((e) => e.hideUI), r = U((e) => e.playbackError), i = U((e) => e.ready), a = U((e) => e.size), o = U((e) => e.waiting);
|
|
430
|
+
let t = U((e) => e.title), n = U((e) => e.hideUI), r = U((e) => e.playbackError), i = U((e) => e.ready), a = U((e) => e.size), o = U((e) => e.waiting), s = U((e) => e.seekingTo);
|
|
425
431
|
return /* @__PURE__ */ w(S, { children: [
|
|
426
432
|
t ? /* @__PURE__ */ C("div", {
|
|
427
433
|
className: "title",
|
|
@@ -432,7 +438,7 @@ var B = {
|
|
|
432
438
|
} : {} },
|
|
433
439
|
children: t
|
|
434
440
|
}) : void 0,
|
|
435
|
-
(a ? !i : o) && !r ? /* @__PURE__ */ C("div", { css: me }) : void 0,
|
|
441
|
+
((a ? !i : o) || s !== void 0) && !r ? /* @__PURE__ */ C("div", { css: me }) : void 0,
|
|
436
442
|
r ? /* @__PURE__ */ C("div", {
|
|
437
443
|
css: he,
|
|
438
444
|
children: ge(r)
|
|
@@ -443,11 +449,11 @@ var B = {
|
|
|
443
449
|
css: fe
|
|
444
450
|
})
|
|
445
451
|
] });
|
|
446
|
-
}, ve = 1e-4,
|
|
452
|
+
}, ve = 1e-4, J = 1, ye = (e) => Math.max(ve, Math.min(J, e)) ** 2, be = (e) => Math.max(ve, Math.min(J, e)) ** (J / 2), Y = (e) => {
|
|
447
453
|
if (e === void 0) return "0:00";
|
|
448
454
|
let t = Math.floor(e / 3600), n = Math.floor(e % 3600 / 60), r = Math.floor(e % 60);
|
|
449
455
|
return t > 0 ? `${t}:${n < 10 ? "0" : ""}${n}:${r < 10 ? "0" : ""}${r}` : `${n}:${r < 10 ? "0" : ""}${r}`;
|
|
450
|
-
},
|
|
456
|
+
}, xe = (e, t) => `${Y(e)} / ${Y(t)}`, Se = (e) => h`
|
|
451
457
|
display: flex;
|
|
452
458
|
justify-content: flex-start;
|
|
453
459
|
|
|
@@ -479,7 +485,7 @@ var B = {
|
|
|
479
485
|
z-index: 3;
|
|
480
486
|
|
|
481
487
|
* {
|
|
482
|
-
${
|
|
488
|
+
${q.bMedium.regular}
|
|
483
489
|
}
|
|
484
490
|
|
|
485
491
|
${e === "sm" && h`
|
|
@@ -495,17 +501,17 @@ var B = {
|
|
|
495
501
|
x: -1,
|
|
496
502
|
y: -1,
|
|
497
503
|
anchors: 0
|
|
498
|
-
},
|
|
504
|
+
}, Ce = (e) => {
|
|
499
505
|
X.x = e.clientX, X.y = e.clientY;
|
|
500
|
-
},
|
|
506
|
+
}, we = () => (X.anchors++ === 0 && window.addEventListener("pointermove", Ce, {
|
|
501
507
|
capture: !0,
|
|
502
508
|
passive: !0
|
|
503
509
|
}), () => {
|
|
504
|
-
--X.anchors === 0 && window.removeEventListener("pointermove",
|
|
510
|
+
--X.anchors === 0 && window.removeEventListener("pointermove", Ce, { capture: !0 });
|
|
505
511
|
}), Z = ({ id: e, toolTipText: t, text: n, delayShow: r = 0, closeDelay: i = 0, offset: a = 20, tooltipPlace: o = "top", disabled: s = !1, size: c = "md" }) => {
|
|
506
512
|
let l = p(null), u = p(null);
|
|
507
513
|
return d(() => {
|
|
508
|
-
let e =
|
|
514
|
+
let e = we(), t = () => {
|
|
509
515
|
let e = l.current;
|
|
510
516
|
if (!e) return;
|
|
511
517
|
let { left: t, right: n, top: r, bottom: i } = e.getBoundingClientRect();
|
|
@@ -527,12 +533,12 @@ var B = {
|
|
|
527
533
|
children: n
|
|
528
534
|
}), !s && /* @__PURE__ */ C(z, {
|
|
529
535
|
ref: u,
|
|
530
|
-
css:
|
|
536
|
+
css: Se(c),
|
|
531
537
|
id: e,
|
|
532
538
|
noArrow: !0,
|
|
533
539
|
children: t
|
|
534
540
|
})] });
|
|
535
|
-
},
|
|
541
|
+
}, Te = ({ ref: e, onChange: t, orientation: n = "horizontal", disabled: r = !1 }) => {
|
|
536
542
|
let [i, a] = m(!1), o = p(t);
|
|
537
543
|
o.current = t;
|
|
538
544
|
let s = p(null), c = u((t, r) => {
|
|
@@ -571,26 +577,26 @@ var B = {
|
|
|
571
577
|
style: { touchAction: "none" }
|
|
572
578
|
}
|
|
573
579
|
};
|
|
574
|
-
},
|
|
580
|
+
}, Ee = 2, De = .005, Oe = "#000", ke = "#0000", Ae = (e, t) => {
|
|
575
581
|
if (!t) return [];
|
|
576
582
|
let n = /* @__PURE__ */ new Set();
|
|
577
583
|
for (let { start: r, end: i } of e) for (let e of [r, i]) {
|
|
578
584
|
let r = e / t;
|
|
579
|
-
r <=
|
|
585
|
+
r <= De || r >= 1 - De || n.add(Number((r * 100).toFixed(4)));
|
|
580
586
|
}
|
|
581
587
|
return n.size ? [
|
|
582
588
|
0,
|
|
583
589
|
...[...n].sort((e, t) => e - t),
|
|
584
590
|
100
|
|
585
591
|
] : [];
|
|
586
|
-
},
|
|
587
|
-
let n =
|
|
592
|
+
}, je = (e, t) => {
|
|
593
|
+
let n = Ee / 2, r = e.length - 2, i = [];
|
|
588
594
|
for (let a = 0; a <= r; a += 1) {
|
|
589
595
|
let o = e[a], s = e[a + 1], c = a === 0 ? "0%" : `calc(${o}% + ${n}px)`, l = a === r ? "100%" : `calc(${s}% - ${n}px)`;
|
|
590
|
-
i.push(`${t(a) ?
|
|
596
|
+
i.push(`${t(a) ? Oe : ke} ${c} ${l}`), a !== r && i.push(`${ke} calc(${s}% - ${n}px) calc(${s}% + ${n}px)`);
|
|
591
597
|
}
|
|
592
598
|
return `linear-gradient(90deg, ${i.join(", ")})`;
|
|
593
|
-
},
|
|
599
|
+
}, Me = /* @__PURE__ */ new Set([
|
|
594
600
|
"op",
|
|
595
601
|
"ops",
|
|
596
602
|
"opening",
|
|
@@ -598,7 +604,7 @@ var B = {
|
|
|
598
604
|
"ncop",
|
|
599
605
|
"オープニング",
|
|
600
606
|
"op主題歌"
|
|
601
|
-
]),
|
|
607
|
+
]), Ne = /* @__PURE__ */ new Set([
|
|
602
608
|
"ed",
|
|
603
609
|
"eds",
|
|
604
610
|
"ending",
|
|
@@ -611,13 +617,13 @@ var B = {
|
|
|
611
617
|
"エンドカード",
|
|
612
618
|
"エンドロール",
|
|
613
619
|
"ed主題歌"
|
|
614
|
-
]),
|
|
620
|
+
]), Pe = /* @__PURE__ */ new Set(["intro", "イントロ"]), Fe = /* @__PURE__ */ new Set(["outro", "アウトロ"]), Ie = {
|
|
615
621
|
"credits start": "ending",
|
|
616
622
|
"credits end": null,
|
|
617
623
|
"preview end": null,
|
|
618
624
|
"end credits": "ending",
|
|
619
625
|
"closing credits": "ending"
|
|
620
|
-
},
|
|
626
|
+
}, Le = /* @__PURE__ */ new Set([
|
|
621
627
|
"theme",
|
|
622
628
|
"themes",
|
|
623
629
|
"song",
|
|
@@ -636,53 +642,53 @@ var B = {
|
|
|
636
642
|
"the",
|
|
637
643
|
"主題歌",
|
|
638
644
|
"ノンクレジット"
|
|
639
|
-
]),
|
|
645
|
+
]), Re = /* @__PURE__ */ new Set([
|
|
640
646
|
"post",
|
|
641
647
|
"pre",
|
|
642
648
|
"after",
|
|
643
649
|
"before",
|
|
644
650
|
"non"
|
|
645
|
-
]),
|
|
646
|
-
if (
|
|
647
|
-
if (
|
|
651
|
+
]), ze = /[-:|~/\\[\]()「」『』【】,.!?"'’]|\s+by\s+/u, Be = (e) => /^chapter\s*\d+$/i.test(e.trim()) || /^\d{1,2}:\d{2}:\d{2}([.,]\d+)?$/.test(e.trim()), Ve = (e) => e.replace(/([a-z-ヿ一-鿿])\s*\d+\s*$/u, "$1").split(/[\s_]+/u).map((e) => e.replace(/^[^\w-ヿ一-鿿]+|[^\w-ヿ一-鿿]+$/gu, "")).filter((e) => e && !/^\d+$/.test(e) && !Le.has(e)), He = (e, t) => {
|
|
652
|
+
if (Me.has(e)) return "opening";
|
|
653
|
+
if (Ne.has(e)) return "ending";
|
|
648
654
|
if (t) {
|
|
649
|
-
if (
|
|
650
|
-
if (
|
|
655
|
+
if (Pe.has(e)) return "opening";
|
|
656
|
+
if (Fe.has(e)) return "ending";
|
|
651
657
|
}
|
|
652
|
-
},
|
|
653
|
-
if (
|
|
658
|
+
}, Ue = (e, t) => {
|
|
659
|
+
if (Be(e)) return;
|
|
654
660
|
let n = e.trim().toLowerCase().replace(/\s+/gu, " ");
|
|
655
|
-
if (n in
|
|
656
|
-
let r = n.split(
|
|
657
|
-
if (r.some((e) => e.split(/[\s_]+/u).some((e) =>
|
|
661
|
+
if (n in Ie) return Ie[n] ?? void 0;
|
|
662
|
+
let r = n.split(ze).map((e) => e.trim()).filter(Boolean);
|
|
663
|
+
if (r.some((e) => e.split(/[\s_]+/u).some((e) => Re.has(e)))) return;
|
|
658
664
|
let i = r.length > 1 ? [r[0], r.at(-1)] : r;
|
|
659
665
|
for (let e of i) {
|
|
660
|
-
let n =
|
|
666
|
+
let n = Ve(e);
|
|
661
667
|
if (n.length !== 1) continue;
|
|
662
|
-
let r =
|
|
668
|
+
let r = He(n[0], t);
|
|
663
669
|
if (r) return r;
|
|
664
670
|
}
|
|
665
|
-
},
|
|
671
|
+
}, We = 15, Ge = 87, Ke = 93, qe = (e) => {
|
|
666
672
|
let t = e.map(() => void 0), n = e.at(-1)?.end ?? 0;
|
|
667
673
|
if (!n) return t;
|
|
668
674
|
let r = e.map((e, t) => ({
|
|
669
675
|
index: t,
|
|
670
676
|
start: e.start,
|
|
671
677
|
length: e.end - e.start
|
|
672
|
-
})).filter(({ length: e }) => e >=
|
|
678
|
+
})).filter(({ length: e }) => e >= Ge && e <= Ke), i = n / 2, a = r.filter(({ start: e }) => e < i), o = r.filter(({ start: e }) => e >= i);
|
|
673
679
|
return a.length === 1 && (t[a[0].index] = "opening"), o.length === 1 && (t[o[0].index] = "ending"), t;
|
|
674
|
-
},
|
|
675
|
-
let t = e.map(({ title: e }) =>
|
|
680
|
+
}, Je = (e) => {
|
|
681
|
+
let t = e.map(({ title: e }) => Ue(e, !1)), n = e.reduce((e, n, r) => e + (t[r] ? n.end - n.start : 0), 0), r = e.reduce((e, t) => e + (t.end - t.start), 0);
|
|
676
682
|
if (r > 0 && n * 2 > r) return e.map(() => void 0);
|
|
677
683
|
let i = e.map((e, n) => {
|
|
678
|
-
if (e.end - e.start <
|
|
684
|
+
if (e.end - e.start < We) return;
|
|
679
685
|
let r = t[n];
|
|
680
686
|
if (r) return r;
|
|
681
|
-
let i =
|
|
687
|
+
let i = Ue(e.title, !0);
|
|
682
688
|
return i && !t.includes(i) ? i : void 0;
|
|
683
689
|
});
|
|
684
|
-
return i.some(Boolean) ? i :
|
|
685
|
-
},
|
|
690
|
+
return i.some(Boolean) ? i : qe(e);
|
|
691
|
+
}, Ye = h`
|
|
686
692
|
position: relative;
|
|
687
693
|
height: calc(.4 * var(--mp-unit));
|
|
688
694
|
|
|
@@ -767,7 +773,7 @@ var B = {
|
|
|
767
773
|
box-shadow: 0 0 calc(1 * var(--mp-unit)) rgba(0, 0, 0, .5);
|
|
768
774
|
|
|
769
775
|
text-shadow: 0 0 4px rgba(0, 0, 0, 1);
|
|
770
|
-
${
|
|
776
|
+
${q.bMedium.bold}
|
|
771
777
|
|
|
772
778
|
gap: calc(.6 * var(--mp-unit));
|
|
773
779
|
|
|
@@ -901,38 +907,38 @@ var B = {
|
|
|
901
907
|
--thumbnail-width: calc(18 * var(--mp-unit));
|
|
902
908
|
--thumbnail-half: calc(9 * var(--mp-unit));
|
|
903
909
|
}
|
|
904
|
-
`,
|
|
905
|
-
let e = U(), t = U((e) => e.currentTime), n = U((e) => e.requestSeek), r = U((e) => e.duration), i = U((e) => e.size), a = U((e) => e.downloadedRanges), o = U((e) => e.indexes), s = U((e) => e.thumbnails), c = U((e) => e.thumbnailAt), l = U((e) => e.requestThumbnail), u = U((e) => e.chapters), h = p(null), [
|
|
906
|
-
|
|
907
|
-
},
|
|
908
|
-
ref:
|
|
910
|
+
`, Xe = 4, Ze = () => {
|
|
911
|
+
let e = U(), t = U((e) => e.currentTime), n = U((e) => e.requestSeek), r = U((e) => e.duration), i = U((e) => e.size), a = U((e) => e.downloadedRanges), o = U((e) => e.indexes), s = U((e) => e.thumbnails), c = U((e) => e.thumbnailAt), l = U((e) => e.requestThumbnail), u = U((e) => e.chapters), h = U((e) => e.seekingTo), g = p(null), [_, v] = m(void 0), [y, b] = m(void 0), x = (e) => {
|
|
912
|
+
b(e), l(e);
|
|
913
|
+
}, S = p(void 0), T = p(0), E = p(void 0), D = p(void 0), O = p(!1), { dragging: k, handlers: A } = Te({
|
|
914
|
+
ref: g,
|
|
909
915
|
onChange: (e) => {
|
|
910
|
-
if (
|
|
911
|
-
else if (!
|
|
912
|
-
let t =
|
|
913
|
-
Math.abs(e -
|
|
916
|
+
if (T.current += 1, E.current = e, D.current === void 0) D.current = e;
|
|
917
|
+
else if (!O.current) {
|
|
918
|
+
let t = g.current?.getBoundingClientRect().width ?? 0;
|
|
919
|
+
Math.abs(e - D.current) * t > Xe && (O.current = !0);
|
|
914
920
|
}
|
|
915
|
-
|
|
921
|
+
v(e), S.current !== "mouse" && x(e * r);
|
|
916
922
|
}
|
|
917
|
-
}),
|
|
918
|
-
|
|
919
|
-
},
|
|
920
|
-
|
|
921
|
-
let i =
|
|
923
|
+
}), j = (e) => {
|
|
924
|
+
S.current = e.pointerType, T.current = 0, D.current = void 0, O.current = !1, A.onPointerDown(e);
|
|
925
|
+
}, M = (t) => {
|
|
926
|
+
A.onPointerUp(t);
|
|
927
|
+
let i = T.current > 0 ? E.current : void 0;
|
|
922
928
|
if (i !== void 0 && r) {
|
|
923
929
|
let t = i * r;
|
|
924
930
|
n ? n(t) : e.seek(t);
|
|
925
931
|
}
|
|
926
|
-
|
|
927
|
-
}, M = (e) => {
|
|
928
|
-
if (!h.current) return;
|
|
929
|
-
let { left: t, right: n } = h.current.getBoundingClientRect();
|
|
930
|
-
return Math.min(Math.max((e - t) / (n - t), 0), 1) * r;
|
|
932
|
+
T.current = 0, O.current = !1, D.current = void 0, t.pointerType !== "mouse" && x(void 0);
|
|
931
933
|
}, N = (e) => {
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
},
|
|
934
|
+
if (!g.current) return;
|
|
935
|
+
let { left: t, right: n } = g.current.getBoundingClientRect();
|
|
936
|
+
return Math.min(Math.max((e - t) / (n - t), 0), 1) * r;
|
|
937
|
+
}, P = (e) => {
|
|
938
|
+
x(N(e.clientX));
|
|
939
|
+
}, F = () => {
|
|
940
|
+
g.current && x(void 0);
|
|
941
|
+
}, I = (e) => r ? e / r * 100 : 0, L = f(() => a?.map((e, t) => {
|
|
936
942
|
if (!i || !r) return null;
|
|
937
943
|
let n = o.filter((t) => e.startByteOffset <= t.pos && t.pos <= e.endByteOffset), a = n.at(0), s = n.at(-1);
|
|
938
944
|
if (!a || !s) return null;
|
|
@@ -950,100 +956,111 @@ var B = {
|
|
|
950
956
|
a?.map(({ startByteOffset: e, endByteOffset: t }) => `${e}/${t}`).join(",")
|
|
951
957
|
]);
|
|
952
958
|
d(() => {
|
|
953
|
-
|
|
959
|
+
_ === void 0 || !r || !k || !O.current || e.seek(_ * r);
|
|
954
960
|
}, [
|
|
955
961
|
e,
|
|
956
|
-
|
|
957
|
-
|
|
962
|
+
k,
|
|
963
|
+
_,
|
|
958
964
|
r
|
|
959
965
|
]);
|
|
960
|
-
let
|
|
961
|
-
if (!
|
|
962
|
-
|
|
963
|
-
|
|
966
|
+
let R = f(() => {
|
|
967
|
+
if (!r) return 0;
|
|
968
|
+
if (k && _ !== void 0) return _;
|
|
969
|
+
let e = h ?? t;
|
|
970
|
+
return typeof e == "number" ? e / r : 0;
|
|
971
|
+
}, [
|
|
972
|
+
r,
|
|
973
|
+
t,
|
|
974
|
+
k,
|
|
975
|
+
_,
|
|
976
|
+
h
|
|
977
|
+
]), z = f(() => Ae(u, r), [u, r]), B = z.length > 0, V = f(() => {
|
|
978
|
+
if (!B || y === void 0 || !r) return -1;
|
|
979
|
+
let e = y / r * 100, t = z.findIndex((t, n) => n < z.length - 1 && e >= t && e < z[n + 1]);
|
|
980
|
+
return t >= 0 ? t : z.length - 2;
|
|
964
981
|
}, [
|
|
982
|
+
B,
|
|
965
983
|
z,
|
|
966
|
-
|
|
967
|
-
v,
|
|
984
|
+
y,
|
|
968
985
|
r
|
|
969
|
-
]),
|
|
986
|
+
]), H = f(() => B ? je(z, (e) => e !== V) : void 0, [
|
|
987
|
+
B,
|
|
970
988
|
z,
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
if (
|
|
978
|
-
if (s.length) return s.find(({ startTime: e, endTime: t }) => e <= v && v < t);
|
|
989
|
+
V
|
|
990
|
+
]), W = f(() => V >= 0 ? je(z, (e) => e === V) : void 0, [z, V]), G = f(() => {
|
|
991
|
+
if (y !== void 0) return u.find(({ start: e, end: t }) => e <= y && y < t);
|
|
992
|
+
}, [u, y]), ee = f(() => {
|
|
993
|
+
if (y) {
|
|
994
|
+
if (c) return c(y);
|
|
995
|
+
if (s.length) return s.find(({ startTime: e, endTime: t }) => e <= y && y < t);
|
|
979
996
|
}
|
|
980
997
|
}, [
|
|
981
998
|
s,
|
|
982
999
|
c,
|
|
983
|
-
|
|
984
|
-
]),
|
|
1000
|
+
y
|
|
1001
|
+
]), K = (e, t) => /* @__PURE__ */ w("div", {
|
|
985
1002
|
className: e ? `track ${e}` : "track",
|
|
986
1003
|
style: t ? { maskImage: t } : void 0,
|
|
987
1004
|
children: [
|
|
988
1005
|
/* @__PURE__ */ C("div", { className: "background-bar" }),
|
|
989
1006
|
/* @__PURE__ */ C("div", {
|
|
990
1007
|
className: "loaded",
|
|
991
|
-
children:
|
|
1008
|
+
children: L
|
|
992
1009
|
}),
|
|
993
1010
|
/* @__PURE__ */ C("div", {
|
|
994
1011
|
className: "play-container",
|
|
995
1012
|
children: /* @__PURE__ */ C("div", {
|
|
996
1013
|
className: "play",
|
|
997
|
-
style: { transform: `scaleX(${
|
|
1014
|
+
style: { transform: `scaleX(${R})` }
|
|
998
1015
|
})
|
|
999
1016
|
})
|
|
1000
1017
|
]
|
|
1001
1018
|
});
|
|
1002
1019
|
return /* @__PURE__ */ w("div", {
|
|
1003
|
-
css:
|
|
1004
|
-
ref:
|
|
1020
|
+
css: Ye,
|
|
1021
|
+
ref: g,
|
|
1005
1022
|
className: [
|
|
1006
1023
|
"progress-bar",
|
|
1007
|
-
|
|
1008
|
-
|
|
1024
|
+
k ? "dragging" : "",
|
|
1025
|
+
B ? "segmented" : ""
|
|
1009
1026
|
].filter(Boolean).join(" "),
|
|
1010
|
-
onMouseMove:
|
|
1011
|
-
onMouseOut:
|
|
1027
|
+
onMouseMove: P,
|
|
1028
|
+
onMouseOut: F,
|
|
1012
1029
|
children: [
|
|
1013
|
-
|
|
1014
|
-
|
|
1030
|
+
K(void 0, H),
|
|
1031
|
+
y ? /* @__PURE__ */ w("div", {
|
|
1015
1032
|
className: "cursor-time",
|
|
1016
1033
|
style: {
|
|
1017
|
-
left:
|
|
1018
|
-
maxWidth:
|
|
1034
|
+
left: G ? `clamp(var(--thumbnail-half), ${I(y)}%, calc(100% - var(--thumbnail-half)))` : `clamp(calc(3 * var(--mp-unit)), ${I(y)}%, calc(100% - calc(3 * var(--mp-unit))))`,
|
|
1035
|
+
maxWidth: G ? "var(--thumbnail-width)" : void 0
|
|
1019
1036
|
},
|
|
1020
1037
|
children: [/* @__PURE__ */ C("span", {
|
|
1021
1038
|
className: "cursor-time-value",
|
|
1022
|
-
children: Y(
|
|
1023
|
-
}),
|
|
1039
|
+
children: Y(y)
|
|
1040
|
+
}), G ? /* @__PURE__ */ C("span", {
|
|
1024
1041
|
className: "chapter-title",
|
|
1025
|
-
children:
|
|
1042
|
+
children: G.title
|
|
1026
1043
|
}) : void 0]
|
|
1027
1044
|
}) : void 0,
|
|
1028
1045
|
/* @__PURE__ */ C("div", { className: "progress" }),
|
|
1029
1046
|
/* @__PURE__ */ C("div", { className: "hover" }),
|
|
1030
|
-
|
|
1047
|
+
W ? K("focus", W) : void 0,
|
|
1031
1048
|
/* @__PURE__ */ C("div", { className: "scrubber" }),
|
|
1032
1049
|
/* @__PURE__ */ C("div", {
|
|
1033
1050
|
className: "padding",
|
|
1034
|
-
...
|
|
1035
|
-
onPointerDown:
|
|
1036
|
-
onPointerUp:
|
|
1037
|
-
onPointerCancel:
|
|
1051
|
+
...A,
|
|
1052
|
+
onPointerDown: j,
|
|
1053
|
+
onPointerUp: M,
|
|
1054
|
+
onPointerCancel: M
|
|
1038
1055
|
}),
|
|
1039
1056
|
/* @__PURE__ */ C("div", {
|
|
1040
1057
|
className: "thumbnail",
|
|
1041
|
-
style: { left: `clamp(var(--thumbnail-half), ${
|
|
1042
|
-
children:
|
|
1058
|
+
style: { left: `clamp(var(--thumbnail-half), ${I(y ?? 1)}%, calc(100% - var(--thumbnail-half)))` },
|
|
1059
|
+
children: ee?.url ? /* @__PURE__ */ C("img", { src: ee.url }) : void 0
|
|
1043
1060
|
})
|
|
1044
1061
|
]
|
|
1045
1062
|
});
|
|
1046
|
-
},
|
|
1063
|
+
}, Qe = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-picture-in-picture'%3e%3cpath%20stroke='none'%20d='M0%200h24v24H0z'%20fill='none'%20/%3e%3cpath%20d='M11%2019h-6a2%202%200%200%201%20-2%20-2v-10a2%202%200%200%201%202%20-2h14a2%202%200%200%201%202%202v4'%20/%3e%3cpath%20d='M14%2014m0%201a1%201%200%200%201%201%20-1h5a1%201%200%200%201%201%201v3a1%201%200%200%201%20-1%201h-5a1%201%200%200%201%20-1%20-1z'%20/%3e%3c/svg%3e", Q = {
|
|
1047
1064
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1048
1065
|
width: 24,
|
|
1049
1066
|
height: 24,
|
|
@@ -1053,7 +1070,7 @@ var B = {
|
|
|
1053
1070
|
strokeWidth: 2,
|
|
1054
1071
|
strokeLinecap: "round",
|
|
1055
1072
|
strokeLinejoin: "round"
|
|
1056
|
-
},
|
|
1073
|
+
}, $e = (e) => /* @__PURE__ */ w("svg", {
|
|
1057
1074
|
...Q,
|
|
1058
1075
|
...e,
|
|
1059
1076
|
children: [/* @__PURE__ */ C("rect", {
|
|
@@ -1064,7 +1081,7 @@ var B = {
|
|
|
1064
1081
|
rx: "2",
|
|
1065
1082
|
ry: "2"
|
|
1066
1083
|
}), /* @__PURE__ */ C("path", { d: "M7 15h4m4 0h2M7 11h2m4 0h4" })]
|
|
1067
|
-
}),
|
|
1084
|
+
}), et = (e) => /* @__PURE__ */ w("svg", {
|
|
1068
1085
|
...Q,
|
|
1069
1086
|
...e,
|
|
1070
1087
|
children: [
|
|
@@ -1084,7 +1101,7 @@ var B = {
|
|
|
1084
1101
|
y2: "22"
|
|
1085
1102
|
})
|
|
1086
1103
|
]
|
|
1087
|
-
}),
|
|
1104
|
+
}), tt = (e) => /* @__PURE__ */ w("svg", {
|
|
1088
1105
|
...Q,
|
|
1089
1106
|
...e,
|
|
1090
1107
|
children: [
|
|
@@ -1099,7 +1116,7 @@ var B = {
|
|
|
1099
1116
|
}),
|
|
1100
1117
|
/* @__PURE__ */ C("path", { d: "M14.5 18.5h2m2 0h1" })
|
|
1101
1118
|
]
|
|
1102
|
-
}),
|
|
1119
|
+
}), nt = (e) => /* @__PURE__ */ w("svg", {
|
|
1103
1120
|
...Q,
|
|
1104
1121
|
...e,
|
|
1105
1122
|
children: [
|
|
@@ -1114,7 +1131,7 @@ var B = {
|
|
|
1114
1131
|
}),
|
|
1115
1132
|
/* @__PURE__ */ C("path", { d: "M6 9h3m2 0h2" })
|
|
1116
1133
|
]
|
|
1117
|
-
}),
|
|
1134
|
+
}), rt = h`
|
|
1118
1135
|
.popover {
|
|
1119
1136
|
position: absolute;
|
|
1120
1137
|
/* Anchored to the PLAYER's right edge, never to the gear. The gear is not the last control in the
|
|
@@ -1153,7 +1170,7 @@ var B = {
|
|
|
1153
1170
|
|
|
1154
1171
|
border-radius: 8px;
|
|
1155
1172
|
background-color: rgba(28,28,28,0.95);
|
|
1156
|
-
${
|
|
1173
|
+
${q.bMedium.regular}
|
|
1157
1174
|
|
|
1158
1175
|
z-index: 4;
|
|
1159
1176
|
|
|
@@ -1196,7 +1213,7 @@ var B = {
|
|
|
1196
1213
|
|
|
1197
1214
|
.secondary {
|
|
1198
1215
|
color: #eee;
|
|
1199
|
-
${
|
|
1216
|
+
${q.bSmall.regular}
|
|
1200
1217
|
}
|
|
1201
1218
|
}
|
|
1202
1219
|
}
|
|
@@ -1238,10 +1255,10 @@ var B = {
|
|
|
1238
1255
|
.failed {
|
|
1239
1256
|
border-bottom: 1px solid #4D4D4E;
|
|
1240
1257
|
color: #f66;
|
|
1241
|
-
${
|
|
1258
|
+
${q.bSmall.regular}
|
|
1242
1259
|
}
|
|
1243
1260
|
}
|
|
1244
|
-
`,
|
|
1261
|
+
`, it = ({ title: e, tracks: t, selected: n, onSelect: r, onBack: i, offLabel: a, pending: o, failed: s }) => {
|
|
1245
1262
|
let c = o !== void 0, l = (e, i, a) => {
|
|
1246
1263
|
let s = c && o === e, l = c || t.find((t) => t.id === e)?.disabled;
|
|
1247
1264
|
return /* @__PURE__ */ w("div", {
|
|
@@ -1268,7 +1285,7 @@ var B = {
|
|
|
1268
1285
|
t.map(({ id: e, label: t }) => l(e, t, "description"))
|
|
1269
1286
|
]
|
|
1270
1287
|
});
|
|
1271
|
-
},
|
|
1288
|
+
}, at = ({ onReset: e } = {}) => {
|
|
1272
1289
|
let t = p(null), [n, r] = m(!1), [i, a] = m(void 0), [o, s] = m(!1), c = p(e);
|
|
1273
1290
|
c.current = e;
|
|
1274
1291
|
let l = () => {
|
|
@@ -1309,7 +1326,7 @@ var B = {
|
|
|
1309
1326
|
});
|
|
1310
1327
|
}
|
|
1311
1328
|
};
|
|
1312
|
-
},
|
|
1329
|
+
}, ot = h`
|
|
1313
1330
|
/* Not a containing block, for the reason given on popoverStyle: the menu anchors to the control bar,
|
|
1314
1331
|
which is the width of the player box, so it can be clamped to it. */
|
|
1315
1332
|
position: static;
|
|
@@ -1325,7 +1342,7 @@ position: static;
|
|
|
1325
1342
|
}
|
|
1326
1343
|
}
|
|
1327
1344
|
|
|
1328
|
-
${
|
|
1345
|
+
${rt}
|
|
1329
1346
|
|
|
1330
1347
|
.popover.error-list {
|
|
1331
1348
|
/* Wider than a track menu and taller, because these rows are sentences rather than labels, and a
|
|
@@ -1353,7 +1370,7 @@ ${nt}
|
|
|
1353
1370
|
|
|
1354
1371
|
color: #fff;
|
|
1355
1372
|
cursor: pointer;
|
|
1356
|
-
${
|
|
1373
|
+
${q.bSmall.regular}
|
|
1357
1374
|
|
|
1358
1375
|
&:hover {
|
|
1359
1376
|
background-color: rgba(255,255,255,.1);
|
|
@@ -1374,7 +1391,7 @@ ${nt}
|
|
|
1374
1391
|
|
|
1375
1392
|
.when {
|
|
1376
1393
|
color: #bbb;
|
|
1377
|
-
${
|
|
1394
|
+
${q.bSmall.regular}
|
|
1378
1395
|
|
|
1379
1396
|
/* the one part of the line worth scanning for, so it is the one part at full brightness */
|
|
1380
1397
|
.count {
|
|
@@ -1393,27 +1410,27 @@ ${nt}
|
|
|
1393
1410
|
color: #ddd;
|
|
1394
1411
|
overflow-wrap: anywhere;
|
|
1395
1412
|
white-space: pre-wrap;
|
|
1396
|
-
${
|
|
1413
|
+
${q.bSmall.regular}
|
|
1397
1414
|
}
|
|
1398
1415
|
}
|
|
1399
1416
|
}
|
|
1400
|
-
`,
|
|
1401
|
-
let n =
|
|
1417
|
+
`, st = (e) => new Date(e).toLocaleTimeString(), ct = (e) => e === void 0 || !Number.isFinite(e) ? void 0 : Y(Math.max(0, e)), lt = (e) => e.reduce((e, t) => e + t.count, 0), ut = (e) => e.map((e, t) => {
|
|
1418
|
+
let n = ct(e.atMediaTime), r = e.count > 1 ? `${new Date(e.at).toISOString()} to ${new Date(e.lastAt).toISOString()} ×${e.count}` : new Date(e.at).toISOString();
|
|
1402
1419
|
return [
|
|
1403
1420
|
`${t + 1}. ${r}${n ? ` (at ${n})` : ""}${e.recovered ? " [recovered]" : ""}`,
|
|
1404
1421
|
e.message,
|
|
1405
1422
|
e.detail
|
|
1406
1423
|
].filter(Boolean).join("\n");
|
|
1407
|
-
}).join("\n\n"),
|
|
1408
|
-
let e = U((e) => e.playbackErrors), { open: t, toggle: n, containerRef: r } =
|
|
1424
|
+
}).join("\n\n"), dt = () => {
|
|
1425
|
+
let e = U((e) => e.playbackErrors), { open: t, toggle: n, containerRef: r } = at(), [i, a] = m(!1);
|
|
1409
1426
|
if (e.length === 0) return null;
|
|
1410
1427
|
let o = () => {
|
|
1411
|
-
navigator.clipboard?.writeText(
|
|
1428
|
+
navigator.clipboard?.writeText(ut(e)).then(() => {
|
|
1412
1429
|
a(!0), setTimeout(() => a(!1), 2e3);
|
|
1413
1430
|
}, (e) => console.warn("[media-player] could not copy the errors:", e));
|
|
1414
|
-
}, s = `Playback errors (${
|
|
1431
|
+
}, s = `Playback errors (${lt(e)})`;
|
|
1415
1432
|
return /* @__PURE__ */ w("div", {
|
|
1416
|
-
css:
|
|
1433
|
+
css: ot,
|
|
1417
1434
|
ref: r,
|
|
1418
1435
|
children: [/* @__PURE__ */ C(Z, {
|
|
1419
1436
|
id: "errors",
|
|
@@ -1444,9 +1461,9 @@ ${nt}
|
|
|
1444
1461
|
/* @__PURE__ */ w("span", {
|
|
1445
1462
|
className: "when",
|
|
1446
1463
|
children: [
|
|
1447
|
-
|
|
1448
|
-
e.count > 1 ? ` to ${
|
|
1449
|
-
|
|
1464
|
+
st(e.at),
|
|
1465
|
+
e.count > 1 ? ` to ${st(e.lastAt)}` : "",
|
|
1466
|
+
ct(e.atMediaTime) ? ` at ${ct(e.atMediaTime)}` : "",
|
|
1450
1467
|
e.recovered ? " recovered" : "",
|
|
1451
1468
|
e.count > 1 ? /* @__PURE__ */ C("span", {
|
|
1452
1469
|
className: "count",
|
|
@@ -1466,7 +1483,7 @@ ${nt}
|
|
|
1466
1483
|
}, `${e.at}-${t}`))]
|
|
1467
1484
|
})]
|
|
1468
1485
|
});
|
|
1469
|
-
},
|
|
1486
|
+
}, ft = h`
|
|
1470
1487
|
display: flex;
|
|
1471
1488
|
align-items: center;
|
|
1472
1489
|
justify-content: center;
|
|
@@ -1519,8 +1536,8 @@ width: 100%;
|
|
|
1519
1536
|
}
|
|
1520
1537
|
}
|
|
1521
1538
|
}
|
|
1522
|
-
`,
|
|
1523
|
-
let e = U(), t = U((e) => e.playbackRate), n = p(null), r = p(null), i = .25, a = 3 - i, o = (e, t = .05) => Math.round(e / t) * t, s = o(t || 1), c = (e) => (e - i) / a * 100, l = (e) => o(i + e * a), { handlers: u } =
|
|
1539
|
+
`, pt = () => {
|
|
1540
|
+
let e = U(), t = U((e) => e.playbackRate), n = p(null), r = p(null), i = .25, a = 3 - i, o = (e, t = .05) => Math.round(e / t) * t, s = o(t || 1), c = (e) => (e - i) / a * 100, l = (e) => o(i + e * a), { handlers: u } = Te({
|
|
1524
1541
|
ref: r,
|
|
1525
1542
|
onChange: (t) => e.setPlaybackRate(l(t))
|
|
1526
1543
|
}), f = (t) => {
|
|
@@ -1536,7 +1553,7 @@ width: 100%;
|
|
|
1536
1553
|
}, [t]);
|
|
1537
1554
|
let m = c(s);
|
|
1538
1555
|
return /* @__PURE__ */ w("div", {
|
|
1539
|
-
css:
|
|
1556
|
+
css: ft,
|
|
1540
1557
|
children: [/* @__PURE__ */ w("div", { children: [s.toFixed(2), "x"] }), /* @__PURE__ */ C("div", {
|
|
1541
1558
|
className: "playback-slider",
|
|
1542
1559
|
ref: n,
|
|
@@ -1554,7 +1571,7 @@ width: 100%;
|
|
|
1554
1571
|
})
|
|
1555
1572
|
})]
|
|
1556
1573
|
});
|
|
1557
|
-
},
|
|
1574
|
+
}, mt = h`
|
|
1558
1575
|
/* Deliberately NOT a containing block. The menu anchors to the control bar instead, which is exactly
|
|
1559
1576
|
as wide as the player box and can therefore be clamped to it. The outside-click check uses
|
|
1560
1577
|
\`contains\` on the ref, which is DOM containment and needs no position, and the bar's other
|
|
@@ -1572,7 +1589,7 @@ position: static;
|
|
|
1572
1589
|
}
|
|
1573
1590
|
}
|
|
1574
1591
|
|
|
1575
|
-
${
|
|
1592
|
+
${rt}
|
|
1576
1593
|
|
|
1577
1594
|
.playback-rate {
|
|
1578
1595
|
.slider {
|
|
@@ -1613,8 +1630,8 @@ ${nt}
|
|
|
1613
1630
|
}
|
|
1614
1631
|
}
|
|
1615
1632
|
|
|
1616
|
-
`,
|
|
1617
|
-
let e = U(), t = U((e) => e.playbackRate), n = U((e) => e.audioTracks), r = U((e) => e.selectedAudioTrack), i = U((e) => e.selectAudioTrack), [a, o] = m(0), { open: s, toggle: c, containerRef: l, pending: u, failed: d, runSelect: f } =
|
|
1633
|
+
`, ht = () => {
|
|
1634
|
+
let e = U(), t = U((e) => e.playbackRate), n = U((e) => e.audioTracks), r = U((e) => e.selectedAudioTrack), i = U((e) => e.selectAudioTrack), [a, o] = m(0), { open: s, toggle: c, containerRef: l, pending: u, failed: d, runSelect: f } = at({ onReset: () => o(0) }), p = (t) => {
|
|
1618
1635
|
e.setPlaybackRate(t), o(0);
|
|
1619
1636
|
}, h = (e) => {
|
|
1620
1637
|
e !== void 0 && f(e, () => i(e));
|
|
@@ -1622,7 +1639,7 @@ ${nt}
|
|
|
1622
1639
|
o(e);
|
|
1623
1640
|
};
|
|
1624
1641
|
return /* @__PURE__ */ w("div", {
|
|
1625
|
-
css:
|
|
1642
|
+
css: mt,
|
|
1626
1643
|
ref: l,
|
|
1627
1644
|
children: [
|
|
1628
1645
|
/* @__PURE__ */ C(Z, {
|
|
@@ -1661,7 +1678,7 @@ ${nt}
|
|
|
1661
1678
|
}),
|
|
1662
1679
|
/* @__PURE__ */ C("div", {
|
|
1663
1680
|
className: "slider no-hover",
|
|
1664
|
-
children: /* @__PURE__ */ C(
|
|
1681
|
+
children: /* @__PURE__ */ C(pt, {})
|
|
1665
1682
|
}),
|
|
1666
1683
|
/* @__PURE__ */ w("div", {
|
|
1667
1684
|
className: "options no-hover",
|
|
@@ -1686,7 +1703,7 @@ ${nt}
|
|
|
1686
1703
|
})
|
|
1687
1704
|
]
|
|
1688
1705
|
}),
|
|
1689
|
-
s && a === 2 && /* @__PURE__ */ C(
|
|
1706
|
+
s && a === 2 && /* @__PURE__ */ C(it, {
|
|
1690
1707
|
title: "Audio",
|
|
1691
1708
|
tracks: n,
|
|
1692
1709
|
selected: r,
|
|
@@ -1697,7 +1714,7 @@ ${nt}
|
|
|
1697
1714
|
})
|
|
1698
1715
|
]
|
|
1699
1716
|
});
|
|
1700
|
-
},
|
|
1717
|
+
}, gt = h`
|
|
1701
1718
|
/* Not a containing block, for the reason given on popoverStyle: the menu anchors to the control bar,
|
|
1702
1719
|
which is the width of the player box, so it can be clamped to it. */
|
|
1703
1720
|
position: static;
|
|
@@ -1713,13 +1730,13 @@ position: static;
|
|
|
1713
1730
|
}
|
|
1714
1731
|
}
|
|
1715
1732
|
|
|
1716
|
-
${
|
|
1717
|
-
`,
|
|
1718
|
-
let e = U((e) => e.subtitleTracks), t = U((e) => e.selectedSubtitleTrack), n = U((e) => e.selectSubtitleTrack), r = U((e) => e.subtitleOffLabel), { open: i, toggle: a, containerRef: o, pending: s, failed: c, runSelect: l } =
|
|
1733
|
+
${rt}
|
|
1734
|
+
`, _t = () => {
|
|
1735
|
+
let e = U((e) => e.subtitleTracks), t = U((e) => e.selectedSubtitleTrack), n = U((e) => e.selectSubtitleTrack), r = U((e) => e.subtitleOffLabel), { open: i, toggle: a, containerRef: o, pending: s, failed: c, runSelect: l } = at();
|
|
1719
1736
|
if (e.length === 0) return null;
|
|
1720
1737
|
let u = t !== void 0;
|
|
1721
1738
|
return /* @__PURE__ */ w("div", {
|
|
1722
|
-
css:
|
|
1739
|
+
css: gt,
|
|
1723
1740
|
ref: o,
|
|
1724
1741
|
children: [/* @__PURE__ */ C(Z, {
|
|
1725
1742
|
id: "subtitles",
|
|
@@ -1731,10 +1748,10 @@ ${nt}
|
|
|
1731
1748
|
"aria-label": "Subtitles",
|
|
1732
1749
|
"aria-expanded": i,
|
|
1733
1750
|
"aria-pressed": u,
|
|
1734
|
-
children: u ? /* @__PURE__ */ C(
|
|
1751
|
+
children: u ? /* @__PURE__ */ C($e, { className: "captions" }) : /* @__PURE__ */ C(et, { className: "captions-off" })
|
|
1735
1752
|
}),
|
|
1736
1753
|
toolTipText: /* @__PURE__ */ C("span", { children: "Subtitles" })
|
|
1737
|
-
}), i && /* @__PURE__ */ C(
|
|
1754
|
+
}), i && /* @__PURE__ */ C(it, {
|
|
1738
1755
|
title: "Subtitles",
|
|
1739
1756
|
tracks: e,
|
|
1740
1757
|
selected: t,
|
|
@@ -1744,13 +1761,13 @@ ${nt}
|
|
|
1744
1761
|
failed: c
|
|
1745
1762
|
})]
|
|
1746
1763
|
});
|
|
1747
|
-
},
|
|
1764
|
+
}, vt = {
|
|
1748
1765
|
primary: "#EAEBEE",
|
|
1749
1766
|
secondary: "#D0D0D9",
|
|
1750
1767
|
hover: "rgba(255, 255, 255, 0.13)",
|
|
1751
1768
|
borderPrimary: "#384F70",
|
|
1752
1769
|
backgroundTooltip: "#222222"
|
|
1753
|
-
},
|
|
1770
|
+
}, yt = h`
|
|
1754
1771
|
display: flex;
|
|
1755
1772
|
align-items: center;
|
|
1756
1773
|
|
|
@@ -1793,8 +1810,8 @@ ${nt}
|
|
|
1793
1810
|
width: 10px;
|
|
1794
1811
|
height: 10px;
|
|
1795
1812
|
}
|
|
1796
|
-
`,
|
|
1797
|
-
let n = U((e) => e.volume), r = U((e) => e.muted), i = p(null), a = p(null), { handlers: o } =
|
|
1813
|
+
`, bt = ({ value: e, onChange: t }) => {
|
|
1814
|
+
let n = U((e) => e.volume), r = U((e) => e.muted), i = p(null), a = p(null), { handlers: o } = Te({
|
|
1798
1815
|
ref: a,
|
|
1799
1816
|
onChange: t
|
|
1800
1817
|
}), s = (n) => {
|
|
@@ -1808,12 +1825,12 @@ ${nt}
|
|
|
1808
1825
|
e && e.removeEventListener("wheel", s);
|
|
1809
1826
|
};
|
|
1810
1827
|
}, [e]);
|
|
1811
|
-
let c = e * 100, l = f(() => Math.round(r ? 0 :
|
|
1828
|
+
let c = e * 100, l = f(() => Math.round(r ? 0 : be(n) * 100), [n, r]);
|
|
1812
1829
|
return /* @__PURE__ */ C(Z, {
|
|
1813
1830
|
id: "volume-slider",
|
|
1814
1831
|
text: /* @__PURE__ */ C("div", {
|
|
1815
1832
|
ref: i,
|
|
1816
|
-
css:
|
|
1833
|
+
css: yt,
|
|
1817
1834
|
...o,
|
|
1818
1835
|
children: /* @__PURE__ */ C("div", {
|
|
1819
1836
|
ref: a,
|
|
@@ -1832,7 +1849,7 @@ ${nt}
|
|
|
1832
1849
|
children: [l, "%"]
|
|
1833
1850
|
})
|
|
1834
1851
|
});
|
|
1835
|
-
},
|
|
1852
|
+
}, xt = h`
|
|
1836
1853
|
position: relative;
|
|
1837
1854
|
display: flex;
|
|
1838
1855
|
align-items: center;
|
|
@@ -1857,7 +1874,7 @@ ${nt}
|
|
|
1857
1874
|
border-radius: 4px;
|
|
1858
1875
|
|
|
1859
1876
|
.volume-value {
|
|
1860
|
-
${
|
|
1877
|
+
${q.bMedium.regular};
|
|
1861
1878
|
color: #ffffff;
|
|
1862
1879
|
}
|
|
1863
1880
|
}
|
|
@@ -1895,10 +1912,10 @@ ${nt}
|
|
|
1895
1912
|
}
|
|
1896
1913
|
}
|
|
1897
1914
|
|
|
1898
|
-
`,
|
|
1899
|
-
let t = U(), n = U((e) => e.volume), r = U((e) => e.muted), i = f(() =>
|
|
1915
|
+
`, St = ({ ref: e }) => {
|
|
1916
|
+
let t = U(), n = U((e) => e.volume), r = U((e) => e.muted), i = f(() => be(n), [n]);
|
|
1900
1917
|
return /* @__PURE__ */ w("div", {
|
|
1901
|
-
css:
|
|
1918
|
+
css: xt,
|
|
1902
1919
|
children: [/* @__PURE__ */ C(Z, {
|
|
1903
1920
|
id: "sound",
|
|
1904
1921
|
text: /* @__PURE__ */ C("button", {
|
|
@@ -1918,7 +1935,7 @@ ${nt}
|
|
|
1918
1935
|
className: "volume-slider-container",
|
|
1919
1936
|
children: /* @__PURE__ */ C("div", {
|
|
1920
1937
|
className: "volume-slider-background",
|
|
1921
|
-
children: /* @__PURE__ */ C(
|
|
1938
|
+
children: /* @__PURE__ */ C(bt, {
|
|
1922
1939
|
value: r ? 0 : i,
|
|
1923
1940
|
onChange: (e) => {
|
|
1924
1941
|
t.setVolume(ye(e));
|
|
@@ -1927,7 +1944,7 @@ ${nt}
|
|
|
1927
1944
|
})
|
|
1928
1945
|
})]
|
|
1929
1946
|
});
|
|
1930
|
-
}, $ = .05,
|
|
1947
|
+
}, $ = .05, Ct = 5, wt = h`
|
|
1931
1948
|
display: flex;
|
|
1932
1949
|
flex-direction: column;
|
|
1933
1950
|
gap: calc(0.4 * var(--mp-unit));
|
|
@@ -1936,7 +1953,7 @@ ${nt}
|
|
|
1936
1953
|
opacity: 0.72;
|
|
1937
1954
|
font-size: 0.9em;
|
|
1938
1955
|
}
|
|
1939
|
-
`,
|
|
1956
|
+
`, Tt = h`
|
|
1940
1957
|
position: absolute;
|
|
1941
1958
|
bottom: 0;
|
|
1942
1959
|
width: 100%;
|
|
@@ -2026,7 +2043,7 @@ ${nt}
|
|
|
2026
2043
|
cursor: pointer;
|
|
2027
2044
|
|
|
2028
2045
|
:hover {
|
|
2029
|
-
background-color: ${
|
|
2046
|
+
background-color: ${vt.hover};
|
|
2030
2047
|
}
|
|
2031
2048
|
|
|
2032
2049
|
/* the hit area grows, the icon does not, keyed on the pointer because a narrow desktop
|
|
@@ -2043,7 +2060,7 @@ ${nt}
|
|
|
2043
2060
|
|
|
2044
2061
|
.left {
|
|
2045
2062
|
.time {
|
|
2046
|
-
${
|
|
2063
|
+
${q.bMedium.regular}
|
|
2047
2064
|
text-shadow: 0 0 4px rgba(0, 0, 0, 1);
|
|
2048
2065
|
}
|
|
2049
2066
|
}
|
|
@@ -2064,13 +2081,13 @@ ${nt}
|
|
|
2064
2081
|
}
|
|
2065
2082
|
}
|
|
2066
2083
|
}
|
|
2067
|
-
`,
|
|
2068
|
-
let e = U(), t = U((e) => e.paused), n = U((e) => e.currentTime), r = U((e) => e.duration), i = U((e) => e.
|
|
2069
|
-
let r =
|
|
2084
|
+
`, Et = () => {
|
|
2085
|
+
let e = U(), t = U((e) => e.paused), n = U((e) => e.currentTime), r = U((e) => e.duration), i = U((e) => e.seekingTo), a = U((e) => e.fullscreen), o = U((e) => e.hideUI), s = U((e) => e.togglePictureInPicture), c = U((e) => e.pictureInPictureMode), l = U((e) => e.burnedInSubtitles), f = U((e) => e.subtitleTracks), p = U((e) => e.requestSeek), [h, g] = m(null), _ = c === "burn-in", v = f.length > 0, y = r > 0 && n === r, b = u(({ direction: t, stepSize: n }) => {
|
|
2086
|
+
let r = be(e.volume), i = t === "up" ? n : -n, a = Math.max(0, Math.min(1, r + i)), o = e.muted;
|
|
2070
2087
|
e.setVolume(ye(a)), o && !e.muted && e.toggleMuted();
|
|
2071
2088
|
}, [e]);
|
|
2072
2089
|
d(() => {
|
|
2073
|
-
let t = (t) =>
|
|
2090
|
+
let t = (t) => p ? p(t) : e.seek(t), n = (n) => {
|
|
2074
2091
|
let r = n.target;
|
|
2075
2092
|
if (r?.isContentEditable || /^(input|textarea|select)$/i.test(r?.tagName ?? "")) return;
|
|
2076
2093
|
let i = !0;
|
|
@@ -2078,44 +2095,44 @@ ${nt}
|
|
|
2078
2095
|
else if (n.key === "k") e.togglePaused();
|
|
2079
2096
|
else if (n.key === " ") e.togglePaused();
|
|
2080
2097
|
else if (n.key === "m") e.toggleMuted();
|
|
2081
|
-
else if (n.key === "ArrowUp")
|
|
2098
|
+
else if (n.key === "ArrowUp") b({
|
|
2082
2099
|
direction: "up",
|
|
2083
2100
|
stepSize: $
|
|
2084
2101
|
});
|
|
2085
|
-
else if (n.key === "ArrowDown")
|
|
2102
|
+
else if (n.key === "ArrowDown") b({
|
|
2086
2103
|
direction: "down",
|
|
2087
2104
|
stepSize: $
|
|
2088
2105
|
});
|
|
2089
2106
|
else if (n.key === "ArrowRight") {
|
|
2090
2107
|
if (!e.duration) return;
|
|
2091
|
-
t(Math.min(e.currentTime +
|
|
2092
|
-
} else n.key === "ArrowLeft" ? t(Math.max(e.currentTime -
|
|
2108
|
+
t(Math.min(e.currentTime + Ct, e.duration));
|
|
2109
|
+
} else n.key === "ArrowLeft" ? t(Math.max(e.currentTime - Ct, 0)) : i = !1;
|
|
2093
2110
|
i && n.preventDefault();
|
|
2094
2111
|
};
|
|
2095
2112
|
return window.addEventListener("keydown", n), () => window.removeEventListener("keydown", n);
|
|
2096
2113
|
}, [
|
|
2097
2114
|
e,
|
|
2098
|
-
|
|
2099
|
-
|
|
2115
|
+
b,
|
|
2116
|
+
p
|
|
2100
2117
|
]);
|
|
2101
|
-
let
|
|
2102
|
-
e.preventDefault(), e.deltaY < 0 ?
|
|
2118
|
+
let x = u((e) => {
|
|
2119
|
+
e.preventDefault(), e.deltaY < 0 ? b({
|
|
2103
2120
|
direction: "up",
|
|
2104
2121
|
stepSize: $
|
|
2105
|
-
}) :
|
|
2122
|
+
}) : b({
|
|
2106
2123
|
direction: "down",
|
|
2107
2124
|
stepSize: $
|
|
2108
2125
|
});
|
|
2109
|
-
}, [
|
|
2126
|
+
}, [b]);
|
|
2110
2127
|
return d(() => {
|
|
2111
|
-
if (
|
|
2112
|
-
}, [
|
|
2113
|
-
css:
|
|
2114
|
-
style: { ...
|
|
2128
|
+
if (h) return h.addEventListener("wheel", x, { passive: !1 }), () => h.removeEventListener("wheel", x);
|
|
2129
|
+
}, [h, x]), /* @__PURE__ */ w("div", {
|
|
2130
|
+
css: Tt,
|
|
2131
|
+
style: { ...o ? {
|
|
2115
2132
|
opacity: "0",
|
|
2116
2133
|
pointerEvents: "none"
|
|
2117
2134
|
} : {} },
|
|
2118
|
-
children: [/* @__PURE__ */ C(
|
|
2135
|
+
children: [/* @__PURE__ */ C(Ze, {}), /* @__PURE__ */ w("div", {
|
|
2119
2136
|
className: "actions",
|
|
2120
2137
|
children: [/* @__PURE__ */ w("div", {
|
|
2121
2138
|
className: "left",
|
|
@@ -2127,44 +2144,44 @@ ${nt}
|
|
|
2127
2144
|
className: "play",
|
|
2128
2145
|
type: "button",
|
|
2129
2146
|
onClick: () => e.togglePaused(),
|
|
2130
|
-
"aria-label":
|
|
2131
|
-
children: C(
|
|
2147
|
+
"aria-label": y ? "Replay" : t ? "Play" : "Pause",
|
|
2148
|
+
children: C(y ? P : t ? N : M, {})
|
|
2132
2149
|
}),
|
|
2133
|
-
toolTipText: /* @__PURE__ */ C("span", { children:
|
|
2150
|
+
toolTipText: /* @__PURE__ */ C("span", { children: y ? "Replay (k)" : t ? "Play (k)" : "Pause (k)" })
|
|
2134
2151
|
}),
|
|
2135
|
-
/* @__PURE__ */ C(
|
|
2152
|
+
/* @__PURE__ */ C(St, { ref: g }),
|
|
2136
2153
|
/* @__PURE__ */ C("div", {
|
|
2137
2154
|
className: "time",
|
|
2138
|
-
children:
|
|
2155
|
+
children: xe(i ?? n, r)
|
|
2139
2156
|
})
|
|
2140
2157
|
]
|
|
2141
2158
|
}), /* @__PURE__ */ w("div", {
|
|
2142
2159
|
className: "right",
|
|
2143
2160
|
children: [
|
|
2144
|
-
/* @__PURE__ */ C(
|
|
2145
|
-
/* @__PURE__ */ C(
|
|
2146
|
-
/* @__PURE__ */ C(
|
|
2147
|
-
|
|
2161
|
+
/* @__PURE__ */ C(dt, {}),
|
|
2162
|
+
/* @__PURE__ */ C(_t, {}),
|
|
2163
|
+
/* @__PURE__ */ C(ht, {}),
|
|
2164
|
+
s ? /* @__PURE__ */ C(Z, {
|
|
2148
2165
|
id: "picture-in-picture",
|
|
2149
2166
|
tooltipPlace: "top-end",
|
|
2150
2167
|
text: /* @__PURE__ */ C("button", {
|
|
2151
2168
|
className: "picture-in-picture",
|
|
2152
2169
|
type: "button",
|
|
2153
|
-
onClick:
|
|
2154
|
-
disabled:
|
|
2155
|
-
"aria-label":
|
|
2156
|
-
"aria-pressed":
|
|
2157
|
-
children:
|
|
2158
|
-
src:
|
|
2170
|
+
onClick: s,
|
|
2171
|
+
disabled: _ && !v,
|
|
2172
|
+
"aria-label": _ ? "Put the subtitles in the video" : "Picture in picture",
|
|
2173
|
+
"aria-pressed": _ ? l : void 0,
|
|
2174
|
+
children: _ ? C(l ? tt : nt, {}) : /* @__PURE__ */ C("img", {
|
|
2175
|
+
src: Qe,
|
|
2159
2176
|
alt: ""
|
|
2160
2177
|
})
|
|
2161
2178
|
}),
|
|
2162
2179
|
toolTipText: /* @__PURE__ */ w("span", {
|
|
2163
|
-
css:
|
|
2180
|
+
css: wt,
|
|
2164
2181
|
children: [/* @__PURE__ */ C("span", {
|
|
2165
2182
|
className: "lead",
|
|
2166
|
-
children:
|
|
2167
|
-
}),
|
|
2183
|
+
children: _ ? v ? l ? "Subtitles are in the picture" : "Put the subtitles in the picture" : "This file has no subtitles" : "Picture in picture"
|
|
2184
|
+
}), _ && v ? /* @__PURE__ */ C("span", {
|
|
2168
2185
|
className: "hint",
|
|
2169
2186
|
children: "Then hover the video and click your browser's own pop out button"
|
|
2170
2187
|
}) : null]
|
|
@@ -2178,16 +2195,16 @@ ${nt}
|
|
|
2178
2195
|
type: "button",
|
|
2179
2196
|
onClick: () => e.toggleFullscreen(),
|
|
2180
2197
|
"aria-label": "Full screen",
|
|
2181
|
-
"aria-pressed":
|
|
2182
|
-
children: C(
|
|
2198
|
+
"aria-pressed": a,
|
|
2199
|
+
children: C(a ? j : A, {})
|
|
2183
2200
|
}),
|
|
2184
|
-
toolTipText: /* @__PURE__ */ C("span", { children:
|
|
2201
|
+
toolTipText: /* @__PURE__ */ C("span", { children: a ? "Exit full screen (f)" : "Full screen (f)" })
|
|
2185
2202
|
})
|
|
2186
2203
|
]
|
|
2187
2204
|
})]
|
|
2188
2205
|
})]
|
|
2189
2206
|
});
|
|
2190
|
-
},
|
|
2207
|
+
}, Dt = 9e3, Ot = h`
|
|
2191
2208
|
position: absolute;
|
|
2192
2209
|
inset: 0;
|
|
2193
2210
|
z-index: 2;
|
|
@@ -2225,12 +2242,12 @@ ${nt}
|
|
|
2225
2242
|
}
|
|
2226
2243
|
|
|
2227
2244
|
.title {
|
|
2228
|
-
${
|
|
2245
|
+
${q.bMedium.bold}
|
|
2229
2246
|
color: #fff;
|
|
2230
2247
|
}
|
|
2231
2248
|
|
|
2232
2249
|
.body {
|
|
2233
|
-
${
|
|
2250
|
+
${q.bSmall.regular}
|
|
2234
2251
|
color: rgba(255, 255, 255, 0.75);
|
|
2235
2252
|
}
|
|
2236
2253
|
|
|
@@ -2241,7 +2258,7 @@ ${nt}
|
|
|
2241
2258
|
line-height: 1;
|
|
2242
2259
|
color: #fff;
|
|
2243
2260
|
}
|
|
2244
|
-
`,
|
|
2261
|
+
`, kt = () => {
|
|
2245
2262
|
let e = U((e) => e.burnedInSubtitles), t = U((e) => e.pictureInPictureMode), [n, r] = m(!1);
|
|
2246
2263
|
return d(() => {
|
|
2247
2264
|
if (t !== "burn-in" || !e) {
|
|
@@ -2249,10 +2266,10 @@ ${nt}
|
|
|
2249
2266
|
return;
|
|
2250
2267
|
}
|
|
2251
2268
|
r(!0);
|
|
2252
|
-
let n = setTimeout(() => r(!1),
|
|
2269
|
+
let n = setTimeout(() => r(!1), Dt);
|
|
2253
2270
|
return () => clearTimeout(n);
|
|
2254
2271
|
}, [t, e]), t !== "burn-in" || !e ? null : /* @__PURE__ */ C("div", {
|
|
2255
|
-
css:
|
|
2272
|
+
css: Ot,
|
|
2256
2273
|
className: n ? "show" : "",
|
|
2257
2274
|
role: "status",
|
|
2258
2275
|
children: /* @__PURE__ */ w("div", {
|
|
@@ -2273,10 +2290,10 @@ ${nt}
|
|
|
2273
2290
|
})]
|
|
2274
2291
|
})
|
|
2275
2292
|
});
|
|
2276
|
-
},
|
|
2293
|
+
}, At = 1, jt = 6e3, Mt = 1, Nt = {
|
|
2277
2294
|
opening: "Skip Opening",
|
|
2278
2295
|
ending: "Skip Ending"
|
|
2279
|
-
},
|
|
2296
|
+
}, Pt = h`
|
|
2280
2297
|
position: absolute;
|
|
2281
2298
|
inset: 0;
|
|
2282
2299
|
z-index: 2;
|
|
@@ -2293,7 +2310,7 @@ ${nt}
|
|
|
2293
2310
|
pointer-events: auto;
|
|
2294
2311
|
cursor: pointer;
|
|
2295
2312
|
|
|
2296
|
-
${
|
|
2313
|
+
${q.bMedium.bold}
|
|
2297
2314
|
color: #fff;
|
|
2298
2315
|
padding: calc(1 * var(--mp-unit)) calc(1.8 * var(--mp-unit));
|
|
2299
2316
|
border: 1px solid rgba(255, 255, 255, .55);
|
|
@@ -2327,10 +2344,10 @@ ${nt}
|
|
|
2327
2344
|
bottom: calc(9 * var(--mp-unit));
|
|
2328
2345
|
}
|
|
2329
2346
|
}
|
|
2330
|
-
`,
|
|
2331
|
-
let e = U((e) => e.chapters), t = U((e) => e.currentTime), n = U((e) => e.requestSeek), r = U(), i = f(() =>
|
|
2347
|
+
`, Ft = () => {
|
|
2348
|
+
let e = U((e) => e.chapters), t = U((e) => e.currentTime), n = U((e) => e.requestSeek), r = U(), i = f(() => Je(e), [e]), a = f(() => {
|
|
2332
2349
|
if (typeof t != "number") return;
|
|
2333
|
-
let n = e.findIndex((e, n) => i[n] !== void 0 && e.start -
|
|
2350
|
+
let n = e.findIndex((e, n) => i[n] !== void 0 && e.start - At <= t && t < e.end), r = n >= 0 ? i[n] : void 0;
|
|
2334
2351
|
return r ? {
|
|
2335
2352
|
kind: r,
|
|
2336
2353
|
end: e[n].end
|
|
@@ -2342,7 +2359,7 @@ ${nt}
|
|
|
2342
2359
|
]), o = p(0), [s, c] = m(0);
|
|
2343
2360
|
d(() => {
|
|
2344
2361
|
let e = typeof t == "number" ? t : 0, n = o.current;
|
|
2345
|
-
o.current = e, e < n -
|
|
2362
|
+
o.current = e, e < n - Mt && c((e) => e + 1);
|
|
2346
2363
|
}, [t]);
|
|
2347
2364
|
let [l, u] = m(!1), h = a ? `${a.kind}@${a.end}` : "";
|
|
2348
2365
|
return d(() => {
|
|
@@ -2351,12 +2368,12 @@ ${nt}
|
|
|
2351
2368
|
return;
|
|
2352
2369
|
}
|
|
2353
2370
|
u(!0);
|
|
2354
|
-
let e = setTimeout(() => u(!1),
|
|
2371
|
+
let e = setTimeout(() => u(!1), jt);
|
|
2355
2372
|
return () => clearTimeout(e);
|
|
2356
2373
|
}, [h, s]), d(() => {
|
|
2357
2374
|
a || u(!1);
|
|
2358
2375
|
}, [a]), a ? /* @__PURE__ */ C("div", {
|
|
2359
|
-
css:
|
|
2376
|
+
css: Pt,
|
|
2360
2377
|
className: l ? "show" : "",
|
|
2361
2378
|
children: /* @__PURE__ */ C("button", {
|
|
2362
2379
|
type: "button",
|
|
@@ -2364,10 +2381,10 @@ ${nt}
|
|
|
2364
2381
|
onClick: () => {
|
|
2365
2382
|
u(!1), n ? n(a.end) : r.seek(a.end);
|
|
2366
2383
|
},
|
|
2367
|
-
children:
|
|
2384
|
+
children: Nt[a.kind]
|
|
2368
2385
|
})
|
|
2369
2386
|
}) : null;
|
|
2370
|
-
},
|
|
2387
|
+
}, It = 3e3, Lt = h`
|
|
2371
2388
|
position: absolute;
|
|
2372
2389
|
inset: 0;
|
|
2373
2390
|
z-index: 2;
|
|
@@ -2378,7 +2395,7 @@ ${nt}
|
|
|
2378
2395
|
hoverable while faded out, popping a tooltip over nothing. It cascades where pointer-events does
|
|
2379
2396
|
not, and transitioning it holds the item on screen for the length of the fade. */
|
|
2380
2397
|
transition: opacity 0.1s cubic-bezier(.4,0,1,1), visibility 0.1s;
|
|
2381
|
-
`,
|
|
2398
|
+
`, Rt = h`
|
|
2382
2399
|
position: relative;
|
|
2383
2400
|
background-color: black;
|
|
2384
2401
|
display: flex;
|
|
@@ -2423,13 +2440,13 @@ ${nt}
|
|
|
2423
2440
|
&.hide {
|
|
2424
2441
|
cursor: none;
|
|
2425
2442
|
}
|
|
2426
|
-
`,
|
|
2443
|
+
`, zt = (e, t = "") => s.toArray(e).flatMap((e, n) => {
|
|
2427
2444
|
let r = `${t}${l(e) && e.key != null ? e.key : n}`;
|
|
2428
|
-
return l(e) && e.type === c ?
|
|
2445
|
+
return l(e) && e.type === c ? zt(e.props.children, `${r}/`) : [{
|
|
2429
2446
|
key: r,
|
|
2430
2447
|
item: e
|
|
2431
2448
|
}];
|
|
2432
|
-
}),
|
|
2449
|
+
}), Bt = ({ ref: e, onVideoRef: t, onSubtitleRef: n, overlay: r, controls: i, children: a }) => {
|
|
2433
2450
|
let o = U(), s = U((e) => e.hideUI), c = U((e) => e.setHideUI), l = p(void 0), u = p("mouse"), f = p({
|
|
2434
2451
|
x: -1,
|
|
2435
2452
|
y: -1
|
|
@@ -2445,15 +2462,15 @@ ${nt}
|
|
|
2445
2462
|
return !!n && m.current.contains(n) && !n.closest(".video");
|
|
2446
2463
|
}, _ = () => {
|
|
2447
2464
|
if (g()) {
|
|
2448
|
-
l.current = setTimeout(_,
|
|
2465
|
+
l.current = setTimeout(_, It);
|
|
2449
2466
|
return;
|
|
2450
2467
|
}
|
|
2451
2468
|
c(!0);
|
|
2452
2469
|
}, v = () => {
|
|
2453
|
-
c(!1), clearTimeout(l.current), l.current = setTimeout(_,
|
|
2470
|
+
c(!1), clearTimeout(l.current), l.current = setTimeout(_, It);
|
|
2454
2471
|
};
|
|
2455
2472
|
return /* @__PURE__ */ w("div", {
|
|
2456
|
-
css:
|
|
2473
|
+
css: Rt,
|
|
2457
2474
|
ref: h,
|
|
2458
2475
|
onPointerMove: (e) => {
|
|
2459
2476
|
u.current = e.pointerType, e.pointerType === "mouse" && (f.current = {
|
|
@@ -2473,8 +2490,8 @@ ${nt}
|
|
|
2473
2490
|
className: s ? "hide" : "",
|
|
2474
2491
|
children: [
|
|
2475
2492
|
/* @__PURE__ */ C(_e, { onSubtitleRef: n }),
|
|
2476
|
-
|
|
2477
|
-
css:
|
|
2493
|
+
zt(r).map(({ key: e, item: t }) => /* @__PURE__ */ C("div", {
|
|
2494
|
+
css: Lt,
|
|
2478
2495
|
style: { ...s ? {
|
|
2479
2496
|
opacity: "0",
|
|
2480
2497
|
visibility: "hidden",
|
|
@@ -2482,9 +2499,9 @@ ${nt}
|
|
|
2482
2499
|
} : {} },
|
|
2483
2500
|
children: t
|
|
2484
2501
|
}, e)),
|
|
2485
|
-
i === !1 ? null : /* @__PURE__ */ C(
|
|
2486
|
-
/* @__PURE__ */ C(
|
|
2487
|
-
/* @__PURE__ */ C(
|
|
2502
|
+
i === !1 ? null : /* @__PURE__ */ C(Et, {}),
|
|
2503
|
+
/* @__PURE__ */ C(kt, {}),
|
|
2504
|
+
/* @__PURE__ */ C(Ft, {}),
|
|
2488
2505
|
/* @__PURE__ */ w("div", {
|
|
2489
2506
|
className: "video",
|
|
2490
2507
|
onClick: () => {
|
|
@@ -2501,7 +2518,7 @@ ${nt}
|
|
|
2501
2518
|
})
|
|
2502
2519
|
]
|
|
2503
2520
|
});
|
|
2504
|
-
},
|
|
2521
|
+
}, Vt = ({ options: e, children: t }) => {
|
|
2505
2522
|
let n = "media" in e ? e : null, r = n ? null : e, { title: i, chapters: a } = e, { size: o, downloadedRanges: s, publicPath: c, libavWorkerUrl: l, read: u, thumbnailRead: f, thumbnailsEnabled: h } = r ?? {}, g = y(), _ = v(), [b, x] = m(null), [S, w] = m(null), T = n?.media ?? b;
|
|
2506
2523
|
d(() => (g?.(T), () => g?.(null)), [T, g]);
|
|
2507
2524
|
let { expose: E } = e, D = E === !0 ? {} : E || void 0, O = p(D);
|
|
@@ -2584,7 +2601,7 @@ ${nt}
|
|
|
2584
2601
|
});
|
|
2585
2602
|
}, [R, V]), d(() => {
|
|
2586
2603
|
a && R({ chapters: a });
|
|
2587
|
-
}, [R, a]), /* @__PURE__ */ C(
|
|
2604
|
+
}, [R, a]), /* @__PURE__ */ C(Bt, {
|
|
2588
2605
|
ref: _,
|
|
2589
2606
|
onVideoRef: n ? void 0 : x,
|
|
2590
2607
|
onSubtitleRef: w,
|
|
@@ -2592,7 +2609,7 @@ ${nt}
|
|
|
2592
2609
|
controls: e.controls,
|
|
2593
2610
|
children: t
|
|
2594
2611
|
});
|
|
2595
|
-
},
|
|
2612
|
+
}, Ht = h`
|
|
2596
2613
|
/**
|
|
2597
2614
|
* The chrome's whole scale, in one place.
|
|
2598
2615
|
*
|
|
@@ -2662,17 +2679,17 @@ ${nt}
|
|
|
2662
2679
|
height: 100%;
|
|
2663
2680
|
width: 100%;
|
|
2664
2681
|
overflow: hidden;
|
|
2665
|
-
`,
|
|
2666
|
-
css:
|
|
2667
|
-
children: /* @__PURE__ */ C(H.Provider, { children: /* @__PURE__ */ C(
|
|
2682
|
+
`, Ut = (e) => /* @__PURE__ */ C("div", {
|
|
2683
|
+
css: Ht,
|
|
2684
|
+
children: /* @__PURE__ */ C(H.Provider, { children: /* @__PURE__ */ C(Vt, {
|
|
2668
2685
|
options: e,
|
|
2669
2686
|
children: e.children
|
|
2670
2687
|
}) })
|
|
2671
|
-
}),
|
|
2688
|
+
}), Wt = (e) => !!e && typeof e == "object" && "at" in e, Gt = (e) => !!e && typeof e == "object" && "selection" in e, Kt = ({ blob: e, name: t }) => ({
|
|
2672
2689
|
length: e.size,
|
|
2673
2690
|
name: t ?? (e instanceof File ? e.name : void 0),
|
|
2674
2691
|
read: (t, n) => e.slice(t, t + n).arrayBuffer()
|
|
2675
|
-
}),
|
|
2692
|
+
}), qt = async (e, t) => {
|
|
2676
2693
|
let n = await fetch(e, {
|
|
2677
2694
|
headers: { Range: "bytes=0-1" },
|
|
2678
2695
|
credentials: t
|
|
@@ -2682,8 +2699,8 @@ ${nt}
|
|
|
2682
2699
|
if (!Number.isFinite(i) || i <= 0) throw Error("The source did not report its length");
|
|
2683
2700
|
if (!r && n.status !== 206) throw Error("The source does not support range requests");
|
|
2684
2701
|
return i;
|
|
2685
|
-
},
|
|
2686
|
-
let i = t ?? await
|
|
2702
|
+
}, Jt = async ({ url: e, length: t, name: n, credentials: r }) => {
|
|
2703
|
+
let i = t ?? await qt(e, r);
|
|
2687
2704
|
return {
|
|
2688
2705
|
length: i,
|
|
2689
2706
|
name: n,
|
|
@@ -2698,9 +2715,9 @@ ${nt}
|
|
|
2698
2715
|
return o.arrayBuffer();
|
|
2699
2716
|
}
|
|
2700
2717
|
};
|
|
2701
|
-
},
|
|
2702
|
-
if ("blob" in e) return
|
|
2703
|
-
if ("url" in e) return
|
|
2718
|
+
}, Yt = async (e) => {
|
|
2719
|
+
if ("blob" in e) return Kt(e);
|
|
2720
|
+
if ("url" in e) return Jt(e);
|
|
2704
2721
|
if ("read" in e) return {
|
|
2705
2722
|
length: e.length,
|
|
2706
2723
|
name: e.name,
|
|
@@ -2709,4 +2726,4 @@ ${nt}
|
|
|
2709
2726
|
throw Error(`Unknown source type: ${e}`);
|
|
2710
2727
|
};
|
|
2711
2728
|
//#endregion
|
|
2712
|
-
export {
|
|
2729
|
+
export { Ut as MediaPlayer, Ut as default, H as Player, e as SUBTITLES_OFF, a as createPictureInPicture, o as createSubtitleRenderer, r as createThumbnailGenerator, Yt as inputToRemuxerInput, Gt as isDelegatedTracks, Wt as isExternalThumbnails, V as sourceFeature, i as startPlayback, de as usePictureInPicture, U as usePlayer, ue as useSeekThumbnails };
|