@banou/media-player 0.8.1 → 0.8.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.
Files changed (7) hide show
  1. package/dist/index.js +356 -317
  2. package/dist/react/components/chrome.d.ts +1 -1
  3. package/dist/react/video-player.d.ts +20 -2
  4. package/package.json +1 -1
  5. package/src/lib/react/components/chrome.tsx +55 -3
  6. package/src/lib/react/components/overlay.tsx +3 -0
  7. package/src/lib/react/video-player.tsx +33 -2
package/dist/index.js CHANGED
@@ -1,13 +1,13 @@
1
1
  import { i as e, n as t, o as n, s as r, t as i } from "./engine-Dmc7JSd9.js";
2
- import { useCallback as a, useEffect as o, useMemo as s, useRef as c, useState as l } from "react";
3
- import { css as u, keyframes as d } from "@emotion/react";
4
- import { createPlayer as f, useContainerAttach as p, useMediaAttach as m } from "@videojs/react";
5
- import { definePlayerFeature as h, videoFeatures as g } from "@videojs/core/dom";
6
- import { Fragment as _, jsx as v, jsxs as y } from "@emotion/react/jsx-runtime";
7
- import { ChevronLeft as b, ChevronRight as x, Maximize as S, Minimize as C, Pause as w, Play as T, RotateCcw as E, Settings as D, Volume1 as O, Volume2 as k, VolumeX as A } from "react-feather";
8
- import { Tooltip as j } from "react-tooltip";
2
+ import { Children as a, Fragment as o, isValidElement as s, useCallback as c, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
3
+ import { css as p, keyframes as m } from "@emotion/react";
4
+ import { createPlayer as h, useContainerAttach as g, useMediaAttach as _ } from "@videojs/react";
5
+ import { definePlayerFeature as v, videoFeatures as y } from "@videojs/core/dom";
6
+ import { Fragment as b, jsx as x, jsxs as S } from "@emotion/react/jsx-runtime";
7
+ import { ChevronLeft as C, ChevronRight as w, Maximize as T, Minimize as E, Pause as D, Play as O, RotateCcw as k, Settings as A, Volume1 as j, Volume2 as ee, VolumeX as te } from "react-feather";
8
+ import { Tooltip as ne } from "react-tooltip";
9
9
  //#region src/lib/react/source-feature.ts
10
- var ee = {
10
+ var re = {
11
11
  indexes: [],
12
12
  thumbnails: [],
13
13
  subtitleTracks: [],
@@ -22,19 +22,19 @@ var ee = {
22
22
  playbackError: null,
23
23
  ready: !1,
24
24
  setSourceState: () => {}
25
- }, M = h({
25
+ }, M = v({
26
26
  name: "source",
27
- state: () => ({ ...ee }),
27
+ state: () => ({ ...re }),
28
28
  attach({ set: e }) {
29
29
  e({
30
30
  setSourceState: (t) => e(t),
31
31
  setHideUI: (t) => e({ hideUI: t })
32
32
  });
33
33
  }
34
- }), N = f({
35
- features: [...g, M],
34
+ }), N = h({
35
+ features: [...y, M],
36
36
  displayName: "MediaPlayer"
37
- }), P = N.usePlayer, te = (e) => {
37
+ }), P = N.usePlayer, ie = (e) => {
38
38
  if (!(!e || e === "und")) try {
39
39
  return new Intl.DisplayNames([navigator.language || "en"], {
40
40
  type: "language",
@@ -43,8 +43,8 @@ var ee = {
43
43
  } catch {
44
44
  return;
45
45
  }
46
- }, F = (e) => e?.replace(/_/g, " ").trim() || void 0, ne = (e) => {
47
- let t = e.map((e) => te(e.language) ?? F(e.title) ?? `Track ${e.streamIndex}`), n = t.reduce((e, t) => ({
46
+ }, F = (e) => e?.replace(/_/g, " ").trim() || void 0, ae = (e) => {
47
+ let t = e.map((e) => ie(e.language) ?? F(e.title) ?? `Track ${e.streamIndex}`), n = t.reduce((e, t) => ({
48
48
  ...e,
49
49
  [t]: (e[t] ?? 0) + 1
50
50
  }), {});
@@ -55,23 +55,23 @@ var ee = {
55
55
  label: (n[i] ?? 0) > 1 && a && a !== i ? `${i} (${a})` : i
56
56
  };
57
57
  });
58
- }, I = (e) => ne(e).map(({ track: e, label: t }) => ({
58
+ }, I = (e) => ae(e).map(({ track: e, label: t }) => ({
59
59
  id: e.streamIndex,
60
60
  label: t
61
- })), re = (t, n, r) => {
62
- let i = P(), { read: s, size: u, publicPath: d = "", libavWorkerUrl: f = "", jassubWorkerUrl: p = "", jassubWasmUrl: m = "", jassubLegacyWasmUrl: h, defaultFontUrl: g, bufferSize: _, autoplay: v = !1 } = r ?? {}, [y, b] = l(void 0), x = c(null), S = c(0), C = c(!1), w = c(s);
63
- w.current = s;
64
- let T = c(r?.onSeek);
61
+ })), oe = (t, n, r) => {
62
+ let i = P(), { read: a, size: o, publicPath: s = "", libavWorkerUrl: u = "", jassubWorkerUrl: p = "", jassubWasmUrl: m = "", jassubLegacyWasmUrl: h, defaultFontUrl: g, bufferSize: _, autoplay: v = !1 } = r ?? {}, [y, b] = f(void 0), x = d(null), S = d(0), C = d(!1), w = d(a);
63
+ w.current = a;
64
+ let T = d(r?.onSeek);
65
65
  T.current = r?.onSeek;
66
- let E = c(r?.onPlaybackError);
66
+ let E = d(r?.onPlaybackError);
67
67
  E.current = r?.onPlaybackError;
68
- let D = a((e) => {
68
+ let D = c((e) => {
69
69
  let t = typeof e == "number" ? e : void 0;
70
70
  C.current = !0, i.setSourceState({ selectedSubtitleTrack: t }), x.current?.selectSubtitleStream(t);
71
- }, [i]), O = a((e) => {
71
+ }, [i]), O = c((e) => {
72
72
  typeof e == "number" && (i.setSourceState({ selectedAudioTrack: e }), b(e));
73
73
  }, [i]), k = P((e) => e.setSourceState);
74
- o(() => {
74
+ l(() => {
75
75
  k({
76
76
  selectSubtitleTrack: D,
77
77
  selectAudioTrack: O
@@ -80,25 +80,25 @@ var ee = {
80
80
  k,
81
81
  D,
82
82
  O
83
- ]), o(() => {
84
- if (!t || !n || !u || !s) return;
83
+ ]), l(() => {
84
+ if (!t || !n || !o || !a) return;
85
85
  let r = !1;
86
86
  i.setSourceState({
87
87
  playbackError: null,
88
88
  ready: !1
89
89
  });
90
- let a = (e) => {
90
+ let c = (e) => {
91
91
  r || (console.error("playback failed", e), i.setSourceState({ playbackError: e }), E.current?.(e));
92
92
  };
93
93
  return (async () => {
94
94
  try {
95
- let o = await e({
95
+ let a = await e({
96
96
  videoElement: t,
97
97
  canvasElement: n,
98
98
  read: (e, t) => w.current(e, t),
99
- length: u,
100
- publicPath: d,
101
- libavWorkerUrl: f,
99
+ length: o,
100
+ publicPath: s,
101
+ libavWorkerUrl: u,
102
102
  jassubWorkerUrl: p,
103
103
  jassubWasmUrl: m,
104
104
  jassubLegacyWasmUrl: h,
@@ -108,7 +108,7 @@ var ee = {
108
108
  onReady: () => {
109
109
  r || (i.setSourceState({ ready: !0 }), S.current > 0 && (t.currentTime = S.current, S.current = 0), v && t.play().catch(() => {}));
110
110
  },
111
- onError: a,
111
+ onError: c,
112
112
  onRecovered: () => {
113
113
  r || i.setSourceState({ playbackError: null });
114
114
  },
@@ -127,14 +127,14 @@ var ee = {
127
127
  }
128
128
  });
129
129
  if (r) {
130
- o.destroy();
130
+ a.destroy();
131
131
  return;
132
132
  }
133
- x.current = o, i.setSourceState({ indexes: o.indexes });
134
- let s = i.selectedSubtitleTrack;
135
- typeof s == "number" && o.selectSubtitleStream(s);
133
+ x.current = a, i.setSourceState({ indexes: a.indexes });
134
+ let l = i.selectedSubtitleTrack;
135
+ typeof l == "number" && a.selectSubtitleStream(l);
136
136
  } catch (e) {
137
- a(e);
137
+ c(e);
138
138
  }
139
139
  })(), () => {
140
140
  r = !0, S.current = t.currentTime, x.current?.destroy(), x.current = null, i.setSourceState({ ready: !1 });
@@ -143,9 +143,9 @@ var ee = {
143
143
  i,
144
144
  t,
145
145
  n,
146
+ o,
147
+ s,
146
148
  u,
147
- d,
148
- f,
149
149
  p,
150
150
  m,
151
151
  h,
@@ -154,44 +154,44 @@ var ee = {
154
154
  y,
155
155
  v
156
156
  ]);
157
- }, L = 5e3, R = 6e4, z = ({ publicPath: e, workerUrl: n, length: r, read: i, downloadedRanges: a }) => {
158
- let [u, d] = l([]), f = c(null), p = c(i);
157
+ }, se = 5e3, ce = 6e4, L = ({ publicPath: e, workerUrl: n, length: r, read: i, downloadedRanges: a }) => {
158
+ let [o, s] = f([]), c = d(null), p = d(i);
159
159
  p.current = i;
160
- let m = s(() => a?.map(({ startByteOffset: e, endByteOffset: t }) => [e, t]), [a?.map(({ startByteOffset: e, endByteOffset: t }) => `${e}-${t}`).join(",")]), h = c(m);
161
- return h.current = m, o(() => {
160
+ let m = u(() => a?.map(({ startByteOffset: e, endByteOffset: t }) => [e, t]), [a?.map(({ startByteOffset: e, endByteOffset: t }) => `${e}-${t}`).join(",")]), h = d(m);
161
+ return h.current = m, l(() => {
162
162
  if (!r || !i || !e || !n) return;
163
- let a = !1, o = null, s, c = L, l = () => {
163
+ let a = !1, o = null, l, u = se, d = () => {
164
164
  t({
165
165
  publicPath: e,
166
166
  workerUrl: n,
167
167
  length: r,
168
168
  read: (e, t) => p.current(e, t),
169
169
  onThumbnails: (e) => {
170
- a || d(e);
170
+ a || s(e);
171
171
  }
172
172
  }).then((e) => {
173
173
  if (a) {
174
174
  e.destroy();
175
175
  return;
176
176
  }
177
- o = e, f.current = e, e.update(h.current);
177
+ o = e, c.current = e, e.update(h.current);
178
178
  }, () => {
179
- a || (s = setTimeout(l, c), c = Math.min(c * 2, R));
179
+ a || (l = setTimeout(d, u), u = Math.min(u * 2, ce));
180
180
  });
181
181
  };
182
- return l(), () => {
183
- a = !0, clearTimeout(s), f.current = null, o?.destroy(), d([]);
182
+ return d(), () => {
183
+ a = !0, clearTimeout(l), c.current = null, o?.destroy(), s([]);
184
184
  };
185
185
  }, [
186
186
  r,
187
187
  e,
188
188
  n
189
- ]), o(() => {
190
- f.current?.update(m);
191
- }, [m]), u;
192
- }, B = (e, t) => {
193
- let n = P(), r = c(null);
194
- o(() => {
189
+ ]), l(() => {
190
+ c.current?.update(m);
191
+ }, [m]), o;
192
+ }, R = (e, t) => {
193
+ let n = P(), r = d(null);
194
+ l(() => {
195
195
  if (!e || !t) return;
196
196
  let a = i({
197
197
  video: e,
@@ -206,13 +206,13 @@ var ee = {
206
206
  t,
207
207
  n
208
208
  ]);
209
- let s = a(() => {
209
+ let a = c(() => {
210
210
  r.current?.toggle().catch((e) => {
211
211
  console.warn("picture in picture was refused", e);
212
212
  });
213
213
  }, []);
214
- return e && t ? s : null;
215
- }, V = {
214
+ return e && t ? a : null;
215
+ }, z = {
216
216
  headings: {
217
217
  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 ",
218
218
  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 ",
@@ -239,14 +239,14 @@ var ee = {
239
239
  medium: "\n font-weight: 500;\n font-size: calc(0.8 * var(--mp-unit));\n line-height: calc(1.1 * var(--mp-unit));\n @media (min-width: 960px) {\n font-size: calc(1 * var(--mp-unit));\n line-height: calc(1.4 * var(--mp-unit));\n }\n ",
240
240
  regular: "\n font-weight: 400;\n font-size: calc(0.8 * var(--mp-unit));\n line-height: calc(1.1 * var(--mp-unit));\n @media (min-width: 960px) {\n font-size: calc(1 * var(--mp-unit));\n line-height: calc(1.4 * var(--mp-unit));\n }\n "
241
241
  }
242
- }, ie = u`
242
+ }, le = p`
243
243
  top: unset !important;
244
244
  left: unset !important;
245
245
  width: 100%;
246
246
  height: 100%;
247
247
  margin: auto;
248
248
  pointer-events: none;
249
- `, ae = u`
249
+ `, ue = p`
250
250
  position: absolute;
251
251
  top: 0;
252
252
  left: 0;
@@ -254,7 +254,7 @@ var ee = {
254
254
  padding: calc(1.2 * var(--mp-unit)) calc(1.6 * var(--mp-unit));
255
255
  /* clears a notch once the player is fullscreen; resolves to zero everywhere else */
256
256
  padding-top: calc(calc(1.2 * var(--mp-unit)) + env(safe-area-inset-top, 0px));
257
- ${V.headings.small}
257
+ ${z.headings.small}
258
258
  color: white;
259
259
  text-shadow: 0 0 4px rgba(0, 0, 0, 1);
260
260
  z-index: 2;
@@ -275,7 +275,7 @@ var ee = {
275
275
 
276
276
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.1) 80%, transparent 100%);
277
277
  transition: opacity 0.1s cubic-bezier(.4,0,1,1);
278
- `, oe = u`
278
+ `, de = p`
279
279
  position: absolute;
280
280
  inset: 0;
281
281
  z-index: 2;
@@ -291,46 +291,47 @@ var ee = {
291
291
  border-radius: 50%;
292
292
  border: 3px solid rgba(255, 255, 255, 0.25);
293
293
  border-top-color: #fff;
294
- animation: ${d`
294
+ animation: ${m`
295
295
  to { transform: rotate(360deg); }
296
296
  `} 0.8s linear infinite;
297
297
  }
298
- `, se = u`
298
+ `, fe = p`
299
299
  position: absolute;
300
300
  inset: auto 0 20%;
301
301
  z-index: 3;
302
302
  padding: 0 calc(2 * var(--mp-unit));
303
303
  text-align: center;
304
304
  color: #fff;
305
- ${V.bLarge.regular}
305
+ ${z.bLarge.regular}
306
306
  text-shadow: 0 0 4px rgba(0, 0, 0, 1);
307
307
  pointer-events: none;
308
- `, ce = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", le = ({ onCanvasRef: e }) => {
308
+ `, pe = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", B = ({ onCanvasRef: e }) => {
309
309
  let t = P((e) => e.title), n = P((e) => e.hideUI), r = P((e) => e.playbackError), i = P((e) => e.ready), a = P((e) => e.size), o = P((e) => e.waiting);
310
- return /* @__PURE__ */ y(_, { children: [
311
- t ? /* @__PURE__ */ v("div", {
312
- css: ae,
310
+ return /* @__PURE__ */ S(b, { children: [
311
+ t ? /* @__PURE__ */ x("div", {
312
+ className: "title",
313
+ css: ue,
313
314
  style: { ...n ? {
314
315
  opacity: "0",
315
316
  pointerEvents: "none"
316
317
  } : {} },
317
318
  children: t
318
319
  }) : void 0,
319
- (a ? !i : o) && !r ? /* @__PURE__ */ v("div", { css: oe }) : void 0,
320
- r ? /* @__PURE__ */ v("div", {
321
- css: se,
322
- children: ce(r)
320
+ (a ? !i : o) && !r ? /* @__PURE__ */ x("div", { css: de }) : void 0,
321
+ r ? /* @__PURE__ */ x("div", {
322
+ css: fe,
323
+ children: pe(r)
323
324
  }) : void 0,
324
- /* @__PURE__ */ v("canvas", {
325
+ /* @__PURE__ */ x("canvas", {
325
326
  ref: e,
326
- css: ie
327
+ css: le
327
328
  })
328
329
  ] });
329
- }, H = 1e-4, U = 1, W = (e) => Math.max(H, Math.min(U, e)) ** 2, G = (e) => Math.max(H, Math.min(U, e)) ** (U / 2), K = (e) => {
330
+ }, V = 1e-4, H = 1, U = (e) => Math.max(V, Math.min(H, e)) ** 2, W = (e) => Math.max(V, Math.min(H, e)) ** (H / 2), G = (e) => {
330
331
  if (e === void 0) return "0:00";
331
332
  let t = Math.floor(e / 3600), n = Math.floor(e % 3600 / 60), r = Math.floor(e % 60);
332
333
  return t > 0 ? `${t}:${n < 10 ? "0" : ""}${n}:${r < 10 ? "0" : ""}${r}` : `${n}:${r < 10 ? "0" : ""}${r}`;
333
- }, ue = (e, t) => `${K(e)} / ${K(t)}`, de = (e) => u`
334
+ }, me = (e, t) => `${G(e)} / ${G(t)}`, he = (e) => p`
334
335
  display: flex;
335
336
  justify-content: flex-end;
336
337
 
@@ -340,19 +341,19 @@ var ee = {
340
341
  z-index: 3;
341
342
 
342
343
  * {
343
- ${V.bMedium.regular}
344
+ ${z.bMedium.regular}
344
345
  }
345
346
 
346
- ${e === "sm" && u`
347
+ ${e === "sm" && p`
347
348
  padding: calc(0.4 * var(--mp-unit))!important;
348
349
  `}
349
- ${e === "md" && u`
350
+ ${e === "md" && p`
350
351
  padding: calc(0.6 * var(--mp-unit))!important;
351
352
  `}
352
- ${e === "lg" && u`
353
+ ${e === "lg" && p`
353
354
  padding: calc(1.2 * var(--mp-unit))!important;
354
355
  `}
355
- `, q = ({ id: e, toolTipText: t, text: n, delayShow: r = 0, closeDelay: i = 0, offset: a = 20, tooltipPlace: o = "top", disabled: s = !1, size: c = "md" }) => /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v("div", {
356
+ `, K = ({ id: e, toolTipText: t, text: n, delayShow: r = 0, closeDelay: i = 0, offset: a = 20, tooltipPlace: o = "top", disabled: s = !1, size: c = "md" }) => /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x("div", {
356
357
  "data-tooltip-id": e,
357
358
  "data-open": !0,
358
359
  "data-tooltip-offset": a,
@@ -360,28 +361,28 @@ var ee = {
360
361
  "data-tooltip-delay-hide": i,
361
362
  "data-tooltip-place": o,
362
363
  children: n
363
- }), !s && /* @__PURE__ */ v(j, {
364
- css: de(c),
364
+ }), !s && /* @__PURE__ */ x(ne, {
365
+ css: he(c),
365
366
  id: e,
366
367
  noArrow: !0,
367
368
  children: t
368
- })] }), J = ({ ref: e, onChange: t, orientation: n = "horizontal", disabled: r = !1 }) => {
369
- let [i, s] = l(!1), u = c(t);
370
- u.current = t;
371
- let d = c(null), f = a((t, r) => {
369
+ })] }), q = ({ ref: e, onChange: t, orientation: n = "horizontal", disabled: r = !1 }) => {
370
+ let [i, a] = f(!1), o = d(t);
371
+ o.current = t;
372
+ let s = d(null), u = c((t, r) => {
372
373
  let i = e.current;
373
374
  if (!i) return 0;
374
375
  let { left: a, right: o, top: s, bottom: c } = i.getBoundingClientRect(), l = n === "horizontal" ? (t - a) / (o - a) : (c - r) / (c - s);
375
376
  return Math.min(Math.max(l, 0), 1);
376
- }, [e, n]), p = a((e) => {
377
- r || e.button > 0 || (d.current = e.pointerId, e.currentTarget.setPointerCapture?.(e.pointerId), s(!0), u.current(f(e.clientX, e.clientY)));
378
- }, [r, f]), m = a((e) => {
379
- d.current === e.pointerId && u.current(f(e.clientX, e.clientY));
380
- }, [f]), h = a((e) => {
381
- d.current === e.pointerId && (d.current = null, e.currentTarget.releasePointerCapture?.(e.pointerId), s(!1));
377
+ }, [e, n]), p = c((e) => {
378
+ r || e.button > 0 || (s.current = e.pointerId, e.currentTarget.setPointerCapture?.(e.pointerId), a(!0), o.current(u(e.clientX, e.clientY)));
379
+ }, [r, u]), m = c((e) => {
380
+ s.current === e.pointerId && o.current(u(e.clientX, e.clientY));
381
+ }, [u]), h = c((e) => {
382
+ s.current === e.pointerId && (s.current = null, e.currentTarget.releasePointerCapture?.(e.pointerId), a(!1));
382
383
  }, []);
383
- return o(() => {
384
- r && (d.current = null, s(!1));
384
+ return l(() => {
385
+ r && (s.current = null, a(!1));
385
386
  }, [r]), {
386
387
  dragging: i,
387
388
  handlers: {
@@ -392,7 +393,7 @@ var ee = {
392
393
  style: { touchAction: "none" }
393
394
  }
394
395
  };
395
- }, fe = u`
396
+ }, ge = p`
396
397
  position: relative;
397
398
  height: calc(.4 * var(--mp-unit));
398
399
 
@@ -437,7 +438,7 @@ var ee = {
437
438
  justify-content: center;
438
439
 
439
440
  text-shadow: 0 0 4px rgba(0, 0, 0, 1);
440
- ${V.bMedium.bold}
441
+ ${z.bMedium.bold}
441
442
 
442
443
  position: absolute;
443
444
  top: calc(-2.5 * var(--mp-unit));
@@ -549,30 +550,30 @@ var ee = {
549
550
  --thumbnail-width: calc(18 * var(--mp-unit));
550
551
  --thumbnail-half: calc(9 * var(--mp-unit));
551
552
  }
552
- `, pe = () => {
553
- let e = P(), t = P((e) => e.currentTime), n = P((e) => e.duration), r = P((e) => e.size), i = P((e) => e.downloadedRanges), a = P((e) => e.indexes), u = P((e) => e.thumbnails), d = P((e) => e.thumbnailAt), f = c(null), [p, m] = l(void 0), [h, g] = l(void 0), _ = c(void 0), { dragging: b, handlers: x } = J({
554
- ref: f,
553
+ `, J = () => {
554
+ let e = P(), t = P((e) => e.currentTime), n = P((e) => e.duration), r = P((e) => e.size), i = P((e) => e.downloadedRanges), a = P((e) => e.indexes), o = P((e) => e.thumbnails), s = P((e) => e.thumbnailAt), c = d(null), [p, m] = f(void 0), [h, g] = f(void 0), _ = d(void 0), { dragging: v, handlers: y } = q({
555
+ ref: c,
555
556
  onChange: (e) => {
556
557
  m(e), _.current !== "mouse" && g(e * n);
557
558
  }
558
- }), S = (e) => {
559
- _.current = e.pointerType, x.onPointerDown(e);
559
+ }), b = (e) => {
560
+ _.current = e.pointerType, y.onPointerDown(e);
560
561
  }, C = (e) => {
561
- x.onPointerUp(e), e.pointerType !== "mouse" && g(void 0);
562
+ y.onPointerUp(e), e.pointerType !== "mouse" && g(void 0);
562
563
  }, w = (e) => {
563
- if (!f.current) return;
564
- let { left: t, right: r } = f.current.getBoundingClientRect();
564
+ if (!c.current) return;
565
+ let { left: t, right: r } = c.current.getBoundingClientRect();
565
566
  return Math.min(Math.max((e - t) / (r - t), 0), 1) * n;
566
567
  }, T = (e) => {
567
568
  g(w(e.clientX));
568
569
  }, E = () => {
569
- f.current && g(void 0);
570
- }, D = (e) => n ? e / n * 100 : 0, O = s(() => i?.map((e, t) => {
570
+ c.current && g(void 0);
571
+ }, D = (e) => n ? e / n * 100 : 0, O = u(() => i?.map((e, t) => {
571
572
  if (!r || !n) return null;
572
573
  let i = a.filter((t) => e.startByteOffset <= t.pos && t.pos <= e.endByteOffset), o = i.at(0), s = i.at(-1);
573
574
  if (!o || !s) return null;
574
575
  let c = o.timestamp / n, l = s.timestamp / n, u = Number((l - c).toFixed(2)), d = c * 100;
575
- return /* @__PURE__ */ v("div", {
576
+ return /* @__PURE__ */ x("div", {
576
577
  className: "loaded-part",
577
578
  style: {
578
579
  transform: `scaleX(${u})`,
@@ -583,12 +584,12 @@ var ee = {
583
584
  n,
584
585
  a.length,
585
586
  i?.map(({ startByteOffset: e, endByteOffset: t }) => `${e}/${t}`).join(",")
586
- ]), k = s(() => {
587
+ ]), k = u(() => {
587
588
  if (!h || h < 0) return;
588
589
  let e = Math.floor(h / 3600), t = Math.floor((h - e * 3600) / 60), n = Math.floor(h - e * 3600 - t * 60);
589
590
  return `${e > 0 ? `${e}:` : ""}${t < 10 ? "0" : ""}${t}:${n < 10 ? "0" : ""}${n}`;
590
591
  }, [h]);
591
- o(() => {
592
+ l(() => {
592
593
  if (p === void 0 || !n) return;
593
594
  let t = p * n;
594
595
  e.seek(t);
@@ -597,59 +598,59 @@ var ee = {
597
598
  p,
598
599
  n
599
600
  ]);
600
- let A = s(() => !n || typeof t != "number" ? 0 : t / n, [n, t]), j = s(() => {
601
+ let A = u(() => !n || typeof t != "number" ? 0 : t / n, [n, t]), j = u(() => {
601
602
  if (h) {
602
- if (d) return d(h);
603
- if (u.length) return u.find(({ startTime: e, endTime: t }) => e <= h && h < t);
603
+ if (s) return s(h);
604
+ if (o.length) return o.find(({ startTime: e, endTime: t }) => e <= h && h < t);
604
605
  }
605
606
  }, [
606
- u,
607
- d,
607
+ o,
608
+ s,
608
609
  h
609
610
  ]);
610
- return /* @__PURE__ */ y("div", {
611
- css: fe,
612
- ref: f,
613
- className: b ? "progress-bar dragging" : "progress-bar",
611
+ return /* @__PURE__ */ S("div", {
612
+ css: ge,
613
+ ref: c,
614
+ className: v ? "progress-bar dragging" : "progress-bar",
614
615
  onMouseMove: T,
615
616
  onMouseOut: E,
616
617
  children: [
617
- /* @__PURE__ */ v("div", { className: "background-bar" }),
618
- h ? /* @__PURE__ */ v("div", {
618
+ /* @__PURE__ */ x("div", { className: "background-bar" }),
619
+ h ? /* @__PURE__ */ x("div", {
619
620
  className: "cursor-time",
620
621
  style: { left: `clamp(calc(1.8 * var(--mp-unit)), ${D(h)}%, calc(100% - calc(1.8 * var(--mp-unit))))` },
621
622
  children: k
622
623
  }) : void 0,
623
- /* @__PURE__ */ v("div", { className: "progress" }),
624
- /* @__PURE__ */ v("div", {
624
+ /* @__PURE__ */ x("div", { className: "progress" }),
625
+ /* @__PURE__ */ x("div", {
625
626
  className: "loaded",
626
627
  children: O
627
628
  }),
628
- /* @__PURE__ */ v("div", { className: "hover" }),
629
- /* @__PURE__ */ v("div", {
629
+ /* @__PURE__ */ x("div", { className: "hover" }),
630
+ /* @__PURE__ */ x("div", {
630
631
  className: "play-container",
631
- children: /* @__PURE__ */ v("div", {
632
+ children: /* @__PURE__ */ x("div", {
632
633
  className: "play",
633
634
  style: { transform: `scaleX(${A})` }
634
635
  })
635
636
  }),
636
- /* @__PURE__ */ v("div", { className: "chapters" }),
637
- /* @__PURE__ */ v("div", { className: "scrubber" }),
638
- /* @__PURE__ */ v("div", {
637
+ /* @__PURE__ */ x("div", { className: "chapters" }),
638
+ /* @__PURE__ */ x("div", { className: "scrubber" }),
639
+ /* @__PURE__ */ x("div", {
639
640
  className: "padding",
640
- ...x,
641
- onPointerDown: S,
641
+ ...y,
642
+ onPointerDown: b,
642
643
  onPointerUp: C,
643
644
  onPointerCancel: C
644
645
  }),
645
- /* @__PURE__ */ v("div", {
646
+ /* @__PURE__ */ x("div", {
646
647
  className: "thumbnail",
647
648
  style: { left: `clamp(var(--thumbnail-half), ${D(h ?? 1)}%, calc(100% - var(--thumbnail-half)))` },
648
- children: j?.url ? /* @__PURE__ */ v("img", { src: j.url }) : void 0
649
+ children: j?.url ? /* @__PURE__ */ x("img", { src: j.url }) : void 0
649
650
  })
650
651
  ]
651
652
  });
652
- }, me = "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", he = u`
653
+ }, _e = "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", ve = p`
653
654
  display: flex;
654
655
  align-items: center;
655
656
  justify-content: center;
@@ -702,42 +703,42 @@ width: 100%;
702
703
  }
703
704
  }
704
705
  }
705
- `, ge = () => {
706
- let e = P(), t = P((e) => e.playbackRate), n = c(null), r = c(null), i = .25, a = 3 - i, s = (e, t = .05) => Math.round(e / t) * t, l = s(t || 1), u = (e) => (e - i) / a * 100, d = (e) => s(i + e * a), { handlers: f } = J({
706
+ `, ye = () => {
707
+ let e = P(), t = P((e) => e.playbackRate), n = d(null), r = d(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, u = (e) => o(i + e * a), { handlers: f } = q({
707
708
  ref: r,
708
- onChange: (t) => e.setPlaybackRate(d(t))
709
+ onChange: (t) => e.setPlaybackRate(u(t))
709
710
  }), p = (t) => {
710
711
  t.preventDefault();
711
- let n = .05, r = l;
712
+ let n = .05, r = s;
712
713
  r = t.deltaY < 0 ? Math.min(3, r + n) : Math.max(i, r - n), e.setPlaybackRate(r);
713
714
  };
714
- o(() => {
715
+ l(() => {
715
716
  let e = n.current;
716
717
  return e && e.addEventListener("wheel", p, { passive: !1 }), () => {
717
718
  e && e.removeEventListener("wheel", p);
718
719
  };
719
720
  }, [t]);
720
- let m = u(l);
721
- return /* @__PURE__ */ y("div", {
722
- css: he,
723
- children: [/* @__PURE__ */ y("div", { children: [l.toFixed(2), "x"] }), /* @__PURE__ */ v("div", {
721
+ let m = c(s);
722
+ return /* @__PURE__ */ S("div", {
723
+ css: ve,
724
+ children: [/* @__PURE__ */ S("div", { children: [s.toFixed(2), "x"] }), /* @__PURE__ */ x("div", {
724
725
  className: "playback-slider",
725
726
  ref: n,
726
727
  ...f,
727
- children: /* @__PURE__ */ v("div", {
728
+ children: /* @__PURE__ */ x("div", {
728
729
  ref: r,
729
730
  style: { background: `linear-gradient(to right,
730
731
  #fff 0% ${m}%,
731
732
  #3A3A3A ${m}% 100%
732
733
  )` },
733
- children: /* @__PURE__ */ v("div", {
734
+ children: /* @__PURE__ */ x("div", {
734
735
  className: "playback-handle",
735
736
  style: { left: `${m}%` }
736
737
  })
737
738
  })
738
739
  })]
739
740
  });
740
- }, _e = u`
741
+ }, be = p`
741
742
  position: relative;
742
743
 
743
744
  .settings {
@@ -775,7 +776,7 @@ position: relative;
775
776
 
776
777
  border-radius: 8px;
777
778
  background-color: rgba(28,28,28,0.95);
778
- ${V.bMedium.regular}
779
+ ${z.bMedium.regular}
779
780
 
780
781
  z-index: 4;
781
782
 
@@ -818,7 +819,7 @@ position: relative;
818
819
 
819
820
  .secondary {
820
821
  color: #eee;
821
- ${V.bSmall.regular}
822
+ ${z.bSmall.regular}
822
823
  }
823
824
  }
824
825
  }
@@ -886,106 +887,106 @@ position: relative;
886
887
  word-break: break-word;
887
888
  }
888
889
  }
889
- `, Y = ({ title: e, tracks: t, selected: n, onSelect: r, onBack: i, allowDisable: a }) => /* @__PURE__ */ y("div", {
890
+ `, Y = ({ title: e, tracks: t, selected: n, onSelect: r, onBack: i, allowDisable: a }) => /* @__PURE__ */ S("div", {
890
891
  className: "popover track-list",
891
892
  children: [
892
- /* @__PURE__ */ y("div", {
893
+ /* @__PURE__ */ S("div", {
893
894
  className: "back",
894
895
  onClick: i,
895
- children: [/* @__PURE__ */ v(b, {}), /* @__PURE__ */ v("span", { children: e })]
896
+ children: [/* @__PURE__ */ x(C, {}), /* @__PURE__ */ x("span", { children: e })]
896
897
  }),
897
- a ? /* @__PURE__ */ y("div", {
898
+ a ? /* @__PURE__ */ S("div", {
898
899
  onClick: () => r(void 0),
899
- children: [/* @__PURE__ */ v("span", { children: "Disable" }), /* @__PURE__ */ v("span", { children: n === void 0 ? "✓" : "" })]
900
+ children: [/* @__PURE__ */ x("span", { children: "Disable" }), /* @__PURE__ */ x("span", { children: n === void 0 ? "✓" : "" })]
900
901
  }) : null,
901
- t.map(({ id: e, label: t }) => /* @__PURE__ */ y("div", {
902
+ t.map(({ id: e, label: t }) => /* @__PURE__ */ S("div", {
902
903
  onClick: () => r(e),
903
904
  className: "description",
904
- children: [/* @__PURE__ */ v("span", { children: t }), /* @__PURE__ */ v("span", { children: n === e ? "✓" : "" })]
905
+ children: [/* @__PURE__ */ x("span", { children: t }), /* @__PURE__ */ x("span", { children: n === e ? "✓" : "" })]
905
906
  }, e))
906
907
  ]
907
- }), ve = () => {
908
- let e = P(), t = P((e) => e.playbackRate), n = P((e) => e.subtitleTracks), r = P((e) => e.selectedSubtitleTrack), i = P((e) => e.selectSubtitleTrack), a = P((e) => e.audioTracks), s = P((e) => e.selectedAudioTrack), u = P((e) => e.selectAudioTrack), [d, f] = l(!1), [p, m] = l(0), h = c(null), g = () => {
909
- f(!d), m(0);
908
+ }), xe = () => {
909
+ let e = P(), t = P((e) => e.playbackRate), n = P((e) => e.subtitleTracks), r = P((e) => e.selectedSubtitleTrack), i = P((e) => e.selectSubtitleTrack), a = P((e) => e.audioTracks), o = P((e) => e.selectedAudioTrack), s = P((e) => e.selectAudioTrack), [c, u] = f(!1), [p, m] = f(0), h = d(null), g = () => {
910
+ u(!c), m(0);
910
911
  }, _ = (t) => {
911
912
  e.setPlaybackRate(t), m(0);
912
913
  };
913
- o(() => {
914
+ l(() => {
914
915
  let e = (e) => {
915
- d && h.current && !h.current.contains(e.target) && g();
916
+ c && h.current && !h.current.contains(e.target) && g();
916
917
  };
917
918
  return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
918
- }, [d]);
919
- let S = (e) => {
919
+ }, [c]);
920
+ let v = (e) => {
920
921
  i(e), g();
921
- }, C = (e) => {
922
- e !== void 0 && u(e), g();
923
- }, w = (e) => () => {
922
+ }, y = (e) => {
923
+ e !== void 0 && s(e), g();
924
+ }, b = (e) => () => {
924
925
  m(e);
925
926
  };
926
- return /* @__PURE__ */ y("div", {
927
- css: _e,
927
+ return /* @__PURE__ */ S("div", {
928
+ css: be,
928
929
  ref: h,
929
930
  children: [
930
- /* @__PURE__ */ v(q, {
931
+ /* @__PURE__ */ x(K, {
931
932
  id: "settings",
932
- disabled: d,
933
- text: /* @__PURE__ */ v("button", {
933
+ disabled: c,
934
+ text: /* @__PURE__ */ x("button", {
934
935
  className: "settings",
935
936
  type: "button",
936
937
  onClick: g,
937
- children: /* @__PURE__ */ v(D, {})
938
+ children: /* @__PURE__ */ x(A, {})
938
939
  }),
939
- toolTipText: /* @__PURE__ */ v("span", { children: "Settings" })
940
+ toolTipText: /* @__PURE__ */ x("span", { children: "Settings" })
940
941
  }),
941
- d && p === 0 && /* @__PURE__ */ y("div", {
942
+ c && p === 0 && /* @__PURE__ */ S("div", {
942
943
  className: "popover menu",
943
944
  children: [
944
- a.length > 1 ? /* @__PURE__ */ y("div", {
945
- onClick: w(3),
946
- children: [/* @__PURE__ */ v("div", { children: "Audio" }), /* @__PURE__ */ v("div", { children: /* @__PURE__ */ v(x, {}) })]
945
+ a.length > 1 ? /* @__PURE__ */ S("div", {
946
+ onClick: b(3),
947
+ children: [/* @__PURE__ */ x("div", { children: "Audio" }), /* @__PURE__ */ x("div", { children: /* @__PURE__ */ x(w, {}) })]
947
948
  }) : null,
948
- n.length > 0 ? /* @__PURE__ */ y("div", {
949
- onClick: w(2),
950
- children: [/* @__PURE__ */ v("div", { children: "Subtitles" }), /* @__PURE__ */ v("div", { children: /* @__PURE__ */ v(x, {}) })]
949
+ n.length > 0 ? /* @__PURE__ */ S("div", {
950
+ onClick: b(2),
951
+ children: [/* @__PURE__ */ x("div", { children: "Subtitles" }), /* @__PURE__ */ x("div", { children: /* @__PURE__ */ x(w, {}) })]
951
952
  }) : null,
952
- /* @__PURE__ */ y("div", {
953
- onClick: w(1),
954
- children: [/* @__PURE__ */ v("div", { children: "Playback speed" }), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("span", {
953
+ /* @__PURE__ */ S("div", {
954
+ onClick: b(1),
955
+ children: [/* @__PURE__ */ x("div", { children: "Playback speed" }), /* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("span", {
955
956
  className: "secondary",
956
957
  children: t === 1 ? "(Default)" : t.toFixed(2)
957
- }), /* @__PURE__ */ v(x, {})] })]
958
+ }), /* @__PURE__ */ x(w, {})] })]
958
959
  })
959
960
  ]
960
961
  }),
961
- d && p === 1 && /* @__PURE__ */ y("div", {
962
+ c && p === 1 && /* @__PURE__ */ S("div", {
962
963
  className: "popover playback-rate",
963
964
  children: [
964
- /* @__PURE__ */ y("div", {
965
+ /* @__PURE__ */ S("div", {
965
966
  className: "back",
966
- onClick: w(0),
967
- children: [/* @__PURE__ */ v(b, {}), /* @__PURE__ */ v("span", { children: "Playback speed" })]
967
+ onClick: b(0),
968
+ children: [/* @__PURE__ */ x(C, {}), /* @__PURE__ */ x("span", { children: "Playback speed" })]
968
969
  }),
969
- /* @__PURE__ */ v("div", {
970
+ /* @__PURE__ */ x("div", {
970
971
  className: "slider no-hover",
971
- children: /* @__PURE__ */ v(ge, {})
972
+ children: /* @__PURE__ */ x(ye, {})
972
973
  }),
973
- /* @__PURE__ */ y("div", {
974
+ /* @__PURE__ */ S("div", {
974
975
  className: "options no-hover",
975
976
  children: [
976
- /* @__PURE__ */ v("div", {
977
+ /* @__PURE__ */ x("div", {
977
978
  onClick: () => _(.5),
978
979
  children: "0.5x"
979
980
  }),
980
- /* @__PURE__ */ v("div", {
981
+ /* @__PURE__ */ x("div", {
981
982
  onClick: () => _(1),
982
983
  children: "1x"
983
984
  }),
984
- /* @__PURE__ */ v("div", {
985
+ /* @__PURE__ */ x("div", {
985
986
  onClick: () => _(1.5),
986
987
  children: "1.5x"
987
988
  }),
988
- /* @__PURE__ */ v("div", {
989
+ /* @__PURE__ */ x("div", {
989
990
  onClick: () => _(2),
990
991
  children: "2x"
991
992
  })
@@ -993,30 +994,30 @@ position: relative;
993
994
  })
994
995
  ]
995
996
  }),
996
- d && p === 2 && /* @__PURE__ */ v(Y, {
997
+ c && p === 2 && /* @__PURE__ */ x(Y, {
997
998
  title: "Subtitles",
998
999
  tracks: n,
999
1000
  selected: r,
1000
- onSelect: S,
1001
- onBack: w(0),
1001
+ onSelect: v,
1002
+ onBack: b(0),
1002
1003
  allowDisable: !0
1003
1004
  }),
1004
- d && p === 3 && /* @__PURE__ */ v(Y, {
1005
+ c && p === 3 && /* @__PURE__ */ x(Y, {
1005
1006
  title: "Audio",
1006
1007
  tracks: a,
1007
- selected: s,
1008
- onSelect: C,
1009
- onBack: w(0)
1008
+ selected: o,
1009
+ onSelect: y,
1010
+ onBack: b(0)
1010
1011
  })
1011
1012
  ]
1012
1013
  });
1013
- }, ye = {
1014
+ }, Se = {
1014
1015
  primary: "#EAEBEE",
1015
1016
  secondary: "#D0D0D9",
1016
1017
  hover: "rgba(255, 255, 255, 0.13)",
1017
1018
  borderPrimary: "#384F70",
1018
1019
  backgroundTooltip: "#222222"
1019
- }, be = u`
1020
+ }, Ce = p`
1020
1021
  display: flex;
1021
1022
  align-items: center;
1022
1023
 
@@ -1059,46 +1060,46 @@ position: relative;
1059
1060
  width: 10px;
1060
1061
  height: 10px;
1061
1062
  }
1062
- `, xe = ({ value: e, onChange: t }) => {
1063
- let n = P((e) => e.volume), r = P((e) => e.muted), i = c(null), a = c(null), { handlers: l } = J({
1063
+ `, we = ({ value: e, onChange: t }) => {
1064
+ let n = P((e) => e.volume), r = P((e) => e.muted), i = d(null), a = d(null), { handlers: o } = q({
1064
1065
  ref: a,
1065
1066
  onChange: t
1066
- }), u = (n) => {
1067
+ }), s = (n) => {
1067
1068
  n.preventDefault();
1068
1069
  let r = .05, i = e;
1069
1070
  i = n.deltaY < 0 ? Math.min(1, i + r) : Math.max(0, i - r), t(i);
1070
1071
  };
1071
- o(() => {
1072
+ l(() => {
1072
1073
  let e = i.current;
1073
- return e && e.addEventListener("wheel", u, { passive: !1 }), () => {
1074
- e && e.removeEventListener("wheel", u);
1074
+ return e && e.addEventListener("wheel", s, { passive: !1 }), () => {
1075
+ e && e.removeEventListener("wheel", s);
1075
1076
  };
1076
1077
  }, [e]);
1077
- let d = e * 100, f = s(() => Math.round(r ? 0 : G(n) * 100), [n, r]);
1078
- return /* @__PURE__ */ v(q, {
1078
+ let c = e * 100, f = u(() => Math.round(r ? 0 : W(n) * 100), [n, r]);
1079
+ return /* @__PURE__ */ x(K, {
1079
1080
  id: "volume-slider",
1080
- text: /* @__PURE__ */ v("div", {
1081
+ text: /* @__PURE__ */ x("div", {
1081
1082
  ref: i,
1082
- css: be,
1083
- ...l,
1084
- children: /* @__PURE__ */ v("div", {
1083
+ css: Ce,
1084
+ ...o,
1085
+ children: /* @__PURE__ */ x("div", {
1085
1086
  ref: a,
1086
1087
  style: { background: `linear-gradient(to right,
1087
- #fff 0% ${d}%,
1088
- #3A3A3A ${d}% 100%
1088
+ #fff 0% ${c}%,
1089
+ #3A3A3A ${c}% 100%
1089
1090
  )` },
1090
- children: /* @__PURE__ */ v("div", {
1091
+ children: /* @__PURE__ */ x("div", {
1091
1092
  className: "volume-handle",
1092
1093
  style: { left: `${e * 100}%` }
1093
1094
  })
1094
1095
  })
1095
1096
  }),
1096
- toolTipText: /* @__PURE__ */ y("div", {
1097
+ toolTipText: /* @__PURE__ */ S("div", {
1097
1098
  className: "volume-value",
1098
1099
  children: [f, "%"]
1099
1100
  })
1100
1101
  });
1101
- }, Se = u`
1102
+ }, Te = p`
1102
1103
  position: relative;
1103
1104
  display: flex;
1104
1105
  align-items: center;
@@ -1123,7 +1124,7 @@ position: relative;
1123
1124
  border-radius: 4px;
1124
1125
 
1125
1126
  .volume-value {
1126
- ${V.bMedium.regular};
1127
+ ${z.bMedium.regular};
1127
1128
  color: #ffffff;
1128
1129
  }
1129
1130
  }
@@ -1161,37 +1162,37 @@ position: relative;
1161
1162
  }
1162
1163
  }
1163
1164
 
1164
- `, Ce = ({ ref: e }) => {
1165
- let t = P(), n = P((e) => e.volume), r = P((e) => e.muted), i = s(() => G(n), [n]);
1166
- return /* @__PURE__ */ y("div", {
1167
- css: Se,
1168
- children: [/* @__PURE__ */ v(q, {
1165
+ `, Ee = ({ ref: e }) => {
1166
+ let t = P(), n = P((e) => e.volume), r = P((e) => e.muted), i = u(() => W(n), [n]);
1167
+ return /* @__PURE__ */ S("div", {
1168
+ css: Te,
1169
+ children: [/* @__PURE__ */ x(K, {
1169
1170
  id: "sound",
1170
- text: /* @__PURE__ */ v("button", {
1171
+ text: /* @__PURE__ */ x("button", {
1171
1172
  className: "sound",
1172
1173
  type: "button",
1173
1174
  onClick: () => t.toggleMuted(),
1174
1175
  ref: e,
1175
- children: v(r || n === 0 ? A : n <= .5 ? O : k, {
1176
+ children: x(r || n === 0 ? te : n <= .5 ? j : ee, {
1176
1177
  size: 18,
1177
1178
  color: "#fff"
1178
1179
  })
1179
1180
  }),
1180
- toolTipText: /* @__PURE__ */ v("span", { children: r ? "Unmute (m)" : "Mute (m)" })
1181
- }), /* @__PURE__ */ v("div", {
1181
+ toolTipText: /* @__PURE__ */ x("span", { children: r ? "Unmute (m)" : "Mute (m)" })
1182
+ }), /* @__PURE__ */ x("div", {
1182
1183
  className: "volume-slider-container",
1183
- children: /* @__PURE__ */ v("div", {
1184
+ children: /* @__PURE__ */ x("div", {
1184
1185
  className: "volume-slider-background",
1185
- children: /* @__PURE__ */ v(xe, {
1186
+ children: /* @__PURE__ */ x(we, {
1186
1187
  value: r ? 0 : i,
1187
1188
  onChange: (e) => {
1188
- t.setVolume(W(e));
1189
+ t.setVolume(U(e));
1189
1190
  }
1190
1191
  })
1191
1192
  })
1192
1193
  })]
1193
1194
  });
1194
- }, X = .05, Z = 5, we = u`
1195
+ }, X = .05, Z = 5, De = p`
1195
1196
  position: absolute;
1196
1197
  bottom: 0;
1197
1198
  width: 100%;
@@ -1275,7 +1276,7 @@ position: relative;
1275
1276
  cursor: pointer;
1276
1277
 
1277
1278
  :hover {
1278
- background-color: ${ye.hover};
1279
+ background-color: ${Se.hover};
1279
1280
  }
1280
1281
 
1281
1282
  /* the hit area grows, the icon does not, keyed on the pointer because a narrow desktop
@@ -1292,7 +1293,7 @@ position: relative;
1292
1293
 
1293
1294
  .left {
1294
1295
  .time {
1295
- ${V.bMedium.regular}
1296
+ ${z.bMedium.regular}
1296
1297
  text-shadow: 0 0 4px rgba(0, 0, 0, 1);
1297
1298
  }
1298
1299
  }
@@ -1313,12 +1314,12 @@ position: relative;
1313
1314
  }
1314
1315
  }
1315
1316
  }
1316
- `, Te = () => {
1317
- let e = P(), t = P((e) => e.paused), n = P((e) => e.currentTime), r = P((e) => e.duration), i = P((e) => e.fullscreen), s = P((e) => e.hideUI), c = P((e) => e.togglePictureInPicture), [u, d] = l(null), f = r > 0 && n === r, p = a(({ direction: t, stepSize: n }) => {
1318
- let r = G(e.volume), i = t === "up" ? n : -n, a = Math.max(0, Math.min(1, r + i)), o = e.muted;
1319
- e.setVolume(W(a)), o && !e.muted && e.toggleMuted();
1317
+ `, Oe = () => {
1318
+ let e = P(), t = P((e) => e.paused), n = P((e) => e.currentTime), r = P((e) => e.duration), i = P((e) => e.fullscreen), a = P((e) => e.hideUI), o = P((e) => e.togglePictureInPicture), [s, u] = f(null), d = r > 0 && n === r, p = c(({ direction: t, stepSize: n }) => {
1319
+ let r = W(e.volume), i = t === "up" ? n : -n, a = Math.max(0, Math.min(1, r + i)), o = e.muted;
1320
+ e.setVolume(U(a)), o && !e.muted && e.toggleMuted();
1320
1321
  }, [e]);
1321
- o(() => {
1322
+ l(() => {
1322
1323
  let t = (t) => {
1323
1324
  let n = t.target;
1324
1325
  if (n?.isContentEditable || /^(input|textarea|select)$/i.test(n?.tagName ?? "")) return;
@@ -1343,7 +1344,7 @@ position: relative;
1343
1344
  };
1344
1345
  return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
1345
1346
  }, [e, p]);
1346
- let m = a((e) => {
1347
+ let m = c((e) => {
1347
1348
  e.preventDefault(), e.deltaY < 0 ? p({
1348
1349
  direction: "up",
1349
1350
  stepSize: X
@@ -1352,66 +1353,77 @@ position: relative;
1352
1353
  stepSize: X
1353
1354
  });
1354
1355
  }, [p]);
1355
- return o(() => {
1356
- if (u) return u.addEventListener("wheel", m, { passive: !1 }), () => u.removeEventListener("wheel", m);
1357
- }, [u, m]), /* @__PURE__ */ y("div", {
1358
- css: we,
1359
- style: { ...s ? {
1356
+ return l(() => {
1357
+ if (s) return s.addEventListener("wheel", m, { passive: !1 }), () => s.removeEventListener("wheel", m);
1358
+ }, [s, m]), /* @__PURE__ */ S("div", {
1359
+ css: De,
1360
+ style: { ...a ? {
1360
1361
  opacity: "0",
1361
1362
  pointerEvents: "none"
1362
1363
  } : {} },
1363
- children: [/* @__PURE__ */ v(pe, {}), /* @__PURE__ */ y("div", {
1364
+ children: [/* @__PURE__ */ x(J, {}), /* @__PURE__ */ S("div", {
1364
1365
  className: "actions",
1365
- children: [/* @__PURE__ */ y("div", {
1366
+ children: [/* @__PURE__ */ S("div", {
1366
1367
  className: "left",
1367
1368
  children: [
1368
- /* @__PURE__ */ v(q, {
1369
+ /* @__PURE__ */ x(K, {
1369
1370
  id: "play",
1370
1371
  tooltipPlace: "top-start",
1371
- text: /* @__PURE__ */ v("button", {
1372
+ text: /* @__PURE__ */ x("button", {
1372
1373
  className: "play",
1373
1374
  type: "button",
1374
1375
  onClick: () => e.togglePaused(),
1375
- children: v(f ? E : t ? T : w, {})
1376
+ children: x(d ? k : t ? O : D, {})
1376
1377
  }),
1377
- toolTipText: /* @__PURE__ */ v("span", { children: f ? "Replay (k)" : t ? "Play (k)" : "Pause (k)" })
1378
+ toolTipText: /* @__PURE__ */ x("span", { children: d ? "Replay (k)" : t ? "Play (k)" : "Pause (k)" })
1378
1379
  }),
1379
- /* @__PURE__ */ v(Ce, { ref: d }),
1380
- /* @__PURE__ */ v("div", {
1380
+ /* @__PURE__ */ x(Ee, { ref: u }),
1381
+ /* @__PURE__ */ x("div", {
1381
1382
  className: "time",
1382
- children: ue(n, r)
1383
+ children: me(n, r)
1383
1384
  })
1384
1385
  ]
1385
- }), /* @__PURE__ */ y("div", {
1386
+ }), /* @__PURE__ */ S("div", {
1386
1387
  className: "right",
1387
1388
  children: [
1388
- /* @__PURE__ */ v(ve, {}),
1389
- c ? /* @__PURE__ */ v(q, {
1389
+ /* @__PURE__ */ x(xe, {}),
1390
+ o ? /* @__PURE__ */ x(K, {
1390
1391
  id: "picture-in-picture",
1391
- text: /* @__PURE__ */ v("button", {
1392
+ text: /* @__PURE__ */ x("button", {
1392
1393
  className: "picture-in-picture",
1393
1394
  type: "button",
1394
- onClick: c,
1395
- children: /* @__PURE__ */ v("img", { src: me })
1395
+ onClick: o,
1396
+ children: /* @__PURE__ */ x("img", { src: _e })
1396
1397
  }),
1397
- toolTipText: /* @__PURE__ */ v("span", { children: "Picture in picture" })
1398
+ toolTipText: /* @__PURE__ */ x("span", { children: "Picture in picture" })
1398
1399
  }) : null,
1399
- /* @__PURE__ */ v(q, {
1400
+ /* @__PURE__ */ x(K, {
1400
1401
  id: "full-screen",
1401
1402
  tooltipPlace: "top-end",
1402
- text: /* @__PURE__ */ v("button", {
1403
+ text: /* @__PURE__ */ x("button", {
1403
1404
  className: "full-screen",
1404
1405
  type: "button",
1405
1406
  onClick: () => e.toggleFullscreen(),
1406
- children: v(i ? C : S, {})
1407
+ children: x(i ? E : T, {})
1407
1408
  }),
1408
- toolTipText: /* @__PURE__ */ v("span", { children: i ? "Exit full screen (f)" : "Full screen (f)" })
1409
+ toolTipText: /* @__PURE__ */ x("span", { children: i ? "Exit full screen (f)" : "Full screen (f)" })
1409
1410
  })
1410
1411
  ]
1411
1412
  })]
1412
1413
  })]
1413
1414
  });
1414
- }, Ee = 3e3, De = u`
1415
+ }, ke = 3e3, Ae = p`
1416
+ position: absolute;
1417
+ inset: 0;
1418
+ z-index: 2;
1419
+ /* Never eats a click: click-to-pause still reaches the video underneath, and an item that needs a
1420
+ pointer (a tooltip anchor, a button) sets \`pointer-events: auto\` on itself. */
1421
+ pointer-events: none;
1422
+ /* visibility, not only opacity: an item that took pointer events back would otherwise stay
1423
+ hoverable while faded out, popping a tooltip over nothing. It cascades where pointer-events does
1424
+ not, and transitioning it holds the item on screen for the length of the fade. */
1425
+ transition: opacity 0.1s cubic-bezier(.4,0,1,1), visibility 0.1s;
1426
+ `, je = p`
1415
1427
  position: relative;
1416
1428
  background-color: black;
1417
1429
  display: flex;
@@ -1443,72 +1455,86 @@ position: relative;
1443
1455
  &.hide {
1444
1456
  cursor: none;
1445
1457
  }
1446
- `, Oe = ({ ref: e, onVideoRef: t, onCanvasRef: n, overlay: r, children: i }) => {
1447
- let a = P(), s = P((e) => e.hideUI), l = P((e) => e.setHideUI), u = c(void 0), d = c("mouse");
1448
- o(() => () => clearTimeout(u.current), []);
1458
+ `, Q = (e, t = "") => a.toArray(e).flatMap((e, n) => {
1459
+ let r = `${t}${s(e) && e.key != null ? e.key : n}`;
1460
+ return s(e) && e.type === o ? Q(e.props.children, `${r}/`) : [{
1461
+ key: r,
1462
+ item: e
1463
+ }];
1464
+ }), Me = ({ ref: e, onVideoRef: t, onCanvasRef: n, overlay: r, children: i }) => {
1465
+ let a = P(), o = P((e) => e.hideUI), s = P((e) => e.setHideUI), c = d(void 0), u = d("mouse");
1466
+ l(() => () => clearTimeout(c.current), []);
1449
1467
  let f = () => {
1450
- l(!1), clearTimeout(u.current), u.current = setTimeout(() => l(!0), Ee);
1468
+ s(!1), clearTimeout(c.current), c.current = setTimeout(() => s(!0), ke);
1451
1469
  };
1452
- return /* @__PURE__ */ y("div", {
1453
- css: De,
1470
+ return /* @__PURE__ */ S("div", {
1471
+ css: je,
1454
1472
  ref: e,
1455
1473
  onPointerMove: (e) => {
1456
- d.current = e.pointerType, e.pointerType === "mouse" && f();
1474
+ u.current = e.pointerType, e.pointerType === "mouse" && f();
1457
1475
  },
1458
1476
  onPointerDown: (e) => {
1459
- d.current = e.pointerType;
1477
+ u.current = e.pointerType;
1460
1478
  },
1461
1479
  onMouseOut: (e) => {
1462
1480
  let t = e.relatedTarget;
1463
1481
  if (t && e.currentTarget.contains(t)) return;
1464
1482
  let { left: n, right: r, top: i, bottom: a } = e.currentTarget.getBoundingClientRect();
1465
- e.clientX >= n && e.clientX < r && e.clientY >= i && e.clientY < a || (clearTimeout(u.current), l(!0));
1483
+ e.clientX >= n && e.clientX < r && e.clientY >= i && e.clientY < a || (clearTimeout(c.current), s(!0));
1466
1484
  },
1467
- className: s ? "hide" : "",
1485
+ className: o ? "hide" : "",
1468
1486
  children: [
1469
- /* @__PURE__ */ v(le, { onCanvasRef: n }),
1470
- r,
1471
- /* @__PURE__ */ v(Te, {}),
1472
- /* @__PURE__ */ y("div", {
1487
+ /* @__PURE__ */ x(B, { onCanvasRef: n }),
1488
+ Q(r).map(({ key: e, item: t }) => /* @__PURE__ */ x("div", {
1489
+ css: Ae,
1490
+ style: { ...o ? {
1491
+ opacity: "0",
1492
+ visibility: "hidden",
1493
+ pointerEvents: "none"
1494
+ } : {} },
1495
+ children: t
1496
+ }, e)),
1497
+ /* @__PURE__ */ x(Oe, {}),
1498
+ /* @__PURE__ */ S("div", {
1473
1499
  className: "video",
1474
1500
  onClick: () => {
1475
- if (d.current === "mouse") {
1501
+ if (u.current === "mouse") {
1476
1502
  a.togglePaused();
1477
1503
  return;
1478
1504
  }
1479
- s ? f() : (clearTimeout(u.current), l(!0));
1505
+ o ? f() : (clearTimeout(c.current), s(!0));
1480
1506
  },
1481
- children: [t ? /* @__PURE__ */ v("video", {
1507
+ children: [t ? /* @__PURE__ */ x("video", {
1482
1508
  ref: t,
1483
1509
  playsInline: !0
1484
1510
  }) : null, i]
1485
1511
  })
1486
1512
  ]
1487
1513
  });
1488
- }, Q = ({ options: e, children: t }) => {
1489
- let n = "media" in e ? e : null, r = n ? null : e, { title: i } = e, { size: a, downloadedRanges: s, publicPath: c, libavWorkerUrl: u, read: d, thumbnailRead: f, thumbnailsEnabled: h } = r ?? {}, g = m(), _ = p(), [y, b] = l(null), [x, S] = l(null), C = n?.media ?? y;
1490
- o(() => (g?.(C), () => g?.(null)), [C, g]), re(y, x, r);
1491
- let w = z({
1492
- publicPath: c,
1493
- workerUrl: u,
1494
- length: h === !1 ? void 0 : a,
1495
- read: f ?? d,
1496
- downloadedRanges: s
1497
- }), T = n?.thumbnails?.all ?? w, E = B(y, x), D = P((e) => e.setSourceState);
1498
- o(() => {
1514
+ }, Ne = ({ options: e, children: t }) => {
1515
+ let n = "media" in e ? e : null, r = n ? null : e, { title: i } = e, { size: a, downloadedRanges: o, publicPath: s, libavWorkerUrl: c, read: u, thumbnailRead: d, thumbnailsEnabled: p } = r ?? {}, m = _(), h = g(), [v, y] = f(null), [b, S] = f(null), C = n?.media ?? v;
1516
+ l(() => (m?.(C), () => m?.(null)), [C, m]), oe(v, b, r);
1517
+ let w = L({
1518
+ publicPath: s,
1519
+ workerUrl: c,
1520
+ length: p === !1 ? void 0 : a,
1521
+ read: d ?? u,
1522
+ downloadedRanges: o
1523
+ }), T = n?.thumbnails?.all ?? w, E = R(v, b), D = P((e) => e.setSourceState);
1524
+ l(() => {
1499
1525
  D({
1500
1526
  title: i,
1501
1527
  size: a,
1502
- downloadedRanges: s
1528
+ downloadedRanges: o
1503
1529
  });
1504
1530
  }, [
1505
1531
  D,
1506
1532
  i,
1507
1533
  a,
1508
- s
1534
+ o
1509
1535
  ]);
1510
1536
  let O = n?.thumbnails?.at;
1511
- o(() => {
1537
+ l(() => {
1512
1538
  D({
1513
1539
  thumbnails: T,
1514
1540
  thumbnailAt: O,
@@ -1521,7 +1547,7 @@ position: relative;
1521
1547
  E
1522
1548
  ]);
1523
1549
  let k = n?.subtitles?.selection, A = n?.audioTracks?.selection;
1524
- return o(() => {
1550
+ return l(() => {
1525
1551
  k && D({
1526
1552
  subtitleTracks: k.options.map(({ id: e, label: t }) => ({
1527
1553
  id: e,
@@ -1530,7 +1556,7 @@ position: relative;
1530
1556
  selectedSubtitleTrack: k.selectedId ?? void 0,
1531
1557
  selectSubtitleTrack: (e) => k.select(e == null ? null : String(e))
1532
1558
  });
1533
- }, [D, k]), o(() => {
1559
+ }, [D, k]), l(() => {
1534
1560
  A && D({
1535
1561
  audioTracks: A.options.map(({ id: e, label: t }) => ({
1536
1562
  id: e,
@@ -1539,14 +1565,14 @@ position: relative;
1539
1565
  selectedAudioTrack: A.selectedId ?? void 0,
1540
1566
  selectAudioTrack: (e) => A.select(String(e))
1541
1567
  });
1542
- }, [D, A]), /* @__PURE__ */ v(Oe, {
1543
- ref: _,
1544
- onVideoRef: n ? void 0 : b,
1568
+ }, [D, A]), /* @__PURE__ */ x(Me, {
1569
+ ref: h,
1570
+ onVideoRef: n ? void 0 : y,
1545
1571
  onCanvasRef: S,
1546
1572
  overlay: e.overlay,
1547
1573
  children: t
1548
1574
  });
1549
- }, ke = u`
1575
+ }, Pe = p`
1550
1576
  /**
1551
1577
  * The chrome's whole scale, in one place.
1552
1578
  *
@@ -1558,23 +1584,36 @@ position: relative;
1558
1584
  */
1559
1585
  --mp-unit: 10px;
1560
1586
 
1587
+ /**
1588
+ * The other half of owning the chrome's own scale.
1589
+ *
1590
+ * Every control here is authored against a border box, which this library's dev app sets globally
1591
+ * and a host page has no reason to. Shipped without it, anything that is \`width: 100%\` AND carries
1592
+ * padding overflows its own box: the top bar ran 32px past the player and clipped the right end of
1593
+ * whatever the app had put there. Scoped to the player's subtree so it cannot reach the host's
1594
+ * layout, and only \`box-sizing\`, because zeroing margins here would reach the app's own content.
1595
+ */
1596
+ &, & *, & *::before, & *::after {
1597
+ box-sizing: border-box;
1598
+ }
1599
+
1561
1600
  display: flex;
1562
1601
  justify-content: center;
1563
1602
  background-color: #111;
1564
1603
  height: 100%;
1565
1604
  width: 100%;
1566
1605
  overflow: hidden;
1567
- `, $ = (e) => /* @__PURE__ */ v("div", {
1568
- css: ke,
1569
- children: /* @__PURE__ */ v(N.Provider, { children: /* @__PURE__ */ v(Q, {
1606
+ `, $ = (e) => /* @__PURE__ */ x("div", {
1607
+ css: Pe,
1608
+ children: /* @__PURE__ */ x(N.Provider, { children: /* @__PURE__ */ x(Ne, {
1570
1609
  options: e,
1571
1610
  children: e.children
1572
1611
  }) })
1573
- }), Ae = (e) => !!e && typeof e == "object" && "at" in e, je = (e) => !!e && typeof e == "object" && "selection" in e, Me = ({ blob: e, name: t }) => ({
1612
+ }), Fe = (e) => !!e && typeof e == "object" && "at" in e, Ie = (e) => !!e && typeof e == "object" && "selection" in e, Le = ({ blob: e, name: t }) => ({
1574
1613
  length: e.size,
1575
1614
  name: t ?? (e instanceof File ? e.name : void 0),
1576
1615
  read: (t, n) => e.slice(t, t + n).arrayBuffer()
1577
- }), Ne = async (e, t) => {
1616
+ }), Re = async (e, t) => {
1578
1617
  let n = await fetch(e, {
1579
1618
  headers: { Range: "bytes=0-1" },
1580
1619
  credentials: t
@@ -1584,8 +1623,8 @@ position: relative;
1584
1623
  if (!Number.isFinite(i) || i <= 0) throw Error("The source did not report its length");
1585
1624
  if (!r && n.status !== 206) throw Error("The source does not support range requests");
1586
1625
  return i;
1587
- }, Pe = async ({ url: e, length: t, name: n, credentials: r }) => {
1588
- let i = t ?? await Ne(e, r);
1626
+ }, ze = async ({ url: e, length: t, name: n, credentials: r }) => {
1627
+ let i = t ?? await Re(e, r);
1589
1628
  return {
1590
1629
  length: i,
1591
1630
  name: n,
@@ -1598,9 +1637,9 @@ position: relative;
1598
1637
  return a.arrayBuffer();
1599
1638
  }
1600
1639
  };
1601
- }, Fe = async (e) => {
1602
- if ("blob" in e) return Me(e);
1603
- if ("url" in e) return Pe(e);
1640
+ }, Be = async (e) => {
1641
+ if ("blob" in e) return Le(e);
1642
+ if ("url" in e) return ze(e);
1604
1643
  if ("read" in e) return {
1605
1644
  length: e.length,
1606
1645
  name: e.name,
@@ -1609,4 +1648,4 @@ position: relative;
1609
1648
  throw Error(`Unknown source type: ${e}`);
1610
1649
  };
1611
1650
  //#endregion
1612
- export { $ as MediaPlayer, $ as default, N as Player, n as SUBTITLES_OFF, i as createPictureInPicture, r as createSubtitleRenderer, t as createThumbnailGenerator, Fe as inputToRemuxerInput, je as isDelegatedTracks, Ae as isExternalThumbnails, M as sourceFeature, e as startPlayback, B as usePictureInPicture, P as usePlayer, z as useSeekThumbnails };
1651
+ export { $ as MediaPlayer, $ as default, N as Player, n as SUBTITLES_OFF, i as createPictureInPicture, r as createSubtitleRenderer, t as createThumbnailGenerator, Be as inputToRemuxerInput, Ie as isDelegatedTracks, Fe as isExternalThumbnails, M as sourceFeature, e as startPlayback, R as usePictureInPicture, P as usePlayer, L as useSeekThumbnails };