@banou/media-player 0.7.0 → 0.8.0
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/README.md +3 -2
- package/dist/index.d.ts +3 -1
- package/dist/index.js +329 -285
- package/dist/react/components/chrome.d.ts +5 -2
- package/dist/react/hooks/use-playback.d.ts +4 -2
- package/dist/react/hooks/use-thumbnails.d.ts +3 -2
- package/dist/react/media.d.ts +98 -0
- package/dist/react/player.d.ts +7 -6
- package/dist/react/source-feature.d.ts +35 -13
- package/dist/react/video-player.d.ts +45 -5
- package/dist/utils/track-label.d.ts +12 -0
- package/package.json +13 -4
- package/src/lib/index.tsx +16 -1
- package/src/lib/react/components/chrome.tsx +7 -3
- package/src/lib/react/components/overlay.tsx +14 -10
- package/src/lib/react/components/progress-bar.tsx +29 -26
- package/src/lib/react/components/settings.tsx +22 -29
- package/src/lib/react/components/sound.tsx +1 -1
- package/src/lib/react/components/tooltip-display.tsx +4 -4
- package/src/lib/react/hooks/use-playback.ts +34 -22
- package/src/lib/react/hooks/use-thumbnails.ts +4 -3
- package/src/lib/react/media.ts +124 -0
- package/src/lib/react/source-feature.ts +31 -13
- package/src/lib/react/video-player.tsx +118 -14
- package/src/lib/utils/fonts.ts +66 -66
- package/src/lib/utils/track-label.ts +15 -0
package/dist/index.js
CHANGED
|
@@ -5,51 +5,76 @@ import { createPlayer as f, useContainerAttach as p, useMediaAttach as m } from
|
|
|
5
5
|
import { definePlayerFeature as h, videoFeatures as g } from "@videojs/core/dom";
|
|
6
6
|
import { Fragment as _, jsx as v, jsxs as y } from "@emotion/react/jsx-runtime";
|
|
7
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
|
|
8
|
+
import { Tooltip as j } from "react-tooltip";
|
|
9
9
|
//#region src/lib/react/source-feature.ts
|
|
10
|
-
var
|
|
10
|
+
var ee = {
|
|
11
11
|
indexes: [],
|
|
12
12
|
thumbnails: [],
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
13
|
+
subtitleTracks: [],
|
|
14
|
+
selectedSubtitleTrack: void 0,
|
|
15
|
+
selectSubtitleTrack: () => {},
|
|
16
|
+
audioTracks: [],
|
|
17
|
+
selectedAudioTrack: void 0,
|
|
18
|
+
selectAudioTrack: () => {},
|
|
19
19
|
hideUI: !1,
|
|
20
20
|
setHideUI: () => {},
|
|
21
21
|
togglePictureInPicture: () => {},
|
|
22
22
|
playbackError: null,
|
|
23
23
|
ready: !1,
|
|
24
24
|
setSourceState: () => {}
|
|
25
|
-
},
|
|
25
|
+
}, M = h({
|
|
26
26
|
name: "source",
|
|
27
|
-
state: () => ({ ...
|
|
27
|
+
state: () => ({ ...ee }),
|
|
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
|
-
}),
|
|
35
|
-
features: [...g,
|
|
34
|
+
}), N = f({
|
|
35
|
+
features: [...g, M],
|
|
36
36
|
displayName: "MediaPlayer"
|
|
37
|
-
}),
|
|
38
|
-
|
|
37
|
+
}), P = N.usePlayer, te = (e) => {
|
|
38
|
+
if (!(!e || e === "und")) try {
|
|
39
|
+
return new Intl.DisplayNames([navigator.language || "en"], {
|
|
40
|
+
type: "language",
|
|
41
|
+
fallback: "none"
|
|
42
|
+
}).of(e) || void 0;
|
|
43
|
+
} catch {
|
|
44
|
+
return;
|
|
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) => ({
|
|
48
|
+
...e,
|
|
49
|
+
[t]: (e[t] ?? 0) + 1
|
|
50
|
+
}), {});
|
|
51
|
+
return e.map((e, r) => {
|
|
52
|
+
let i = t[r], a = F(e.title);
|
|
53
|
+
return {
|
|
54
|
+
track: e,
|
|
55
|
+
label: (n[i] ?? 0) > 1 && a && a !== i ? `${i} (${a})` : i
|
|
56
|
+
};
|
|
57
|
+
});
|
|
58
|
+
}, I = (e) => ne(e).map(({ track: e, label: t }) => ({
|
|
59
|
+
id: e.streamIndex,
|
|
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);
|
|
39
63
|
w.current = s;
|
|
40
|
-
let T = c(r
|
|
41
|
-
T.current = r
|
|
42
|
-
let E = c(r
|
|
43
|
-
E.current = r
|
|
64
|
+
let T = c(r?.onSeek);
|
|
65
|
+
T.current = r?.onSeek;
|
|
66
|
+
let E = c(r?.onPlaybackError);
|
|
67
|
+
E.current = r?.onPlaybackError;
|
|
44
68
|
let D = a((e) => {
|
|
45
|
-
|
|
69
|
+
let t = typeof e == "number" ? e : void 0;
|
|
70
|
+
C.current = !0, i.setSourceState({ selectedSubtitleTrack: t }), x.current?.selectSubtitleStream(t);
|
|
46
71
|
}, [i]), O = a((e) => {
|
|
47
|
-
i.setSourceState({
|
|
48
|
-
}, [i]), k =
|
|
72
|
+
typeof e == "number" && (i.setSourceState({ selectedAudioTrack: e }), b(e));
|
|
73
|
+
}, [i]), k = P((e) => e.setSourceState);
|
|
49
74
|
o(() => {
|
|
50
75
|
k({
|
|
51
|
-
|
|
52
|
-
|
|
76
|
+
selectSubtitleTrack: D,
|
|
77
|
+
selectAudioTrack: O
|
|
53
78
|
});
|
|
54
79
|
}, [
|
|
55
80
|
k,
|
|
@@ -90,14 +115,14 @@ var te = {
|
|
|
90
115
|
onSeek: (e) => T.current?.(e),
|
|
91
116
|
onSubtitleStreams: (e) => {
|
|
92
117
|
r || i.setSourceState({
|
|
93
|
-
|
|
94
|
-
...C.current ? {} : {
|
|
118
|
+
subtitleTracks: I(e),
|
|
119
|
+
...C.current ? {} : { selectedSubtitleTrack: e[0]?.streamIndex }
|
|
95
120
|
});
|
|
96
121
|
},
|
|
97
122
|
onAudioStreams: (e, t) => {
|
|
98
123
|
r || i.setSourceState({
|
|
99
|
-
|
|
100
|
-
|
|
124
|
+
audioTracks: I(e),
|
|
125
|
+
selectedAudioTrack: t
|
|
101
126
|
});
|
|
102
127
|
}
|
|
103
128
|
});
|
|
@@ -106,8 +131,8 @@ var te = {
|
|
|
106
131
|
return;
|
|
107
132
|
}
|
|
108
133
|
x.current = o, i.setSourceState({ indexes: o.indexes });
|
|
109
|
-
let s = i.
|
|
110
|
-
s
|
|
134
|
+
let s = i.selectedSubtitleTrack;
|
|
135
|
+
typeof s == "number" && o.selectSubtitleStream(s);
|
|
111
136
|
} catch (e) {
|
|
112
137
|
a(e);
|
|
113
138
|
}
|
|
@@ -119,7 +144,6 @@ var te = {
|
|
|
119
144
|
t,
|
|
120
145
|
n,
|
|
121
146
|
u,
|
|
122
|
-
s,
|
|
123
147
|
d,
|
|
124
148
|
f,
|
|
125
149
|
p,
|
|
@@ -130,13 +154,13 @@ var te = {
|
|
|
130
154
|
y,
|
|
131
155
|
v
|
|
132
156
|
]);
|
|
133
|
-
},
|
|
157
|
+
}, L = 5e3, R = 6e4, z = ({ publicPath: e, workerUrl: n, length: r, read: i, downloadedRanges: a }) => {
|
|
134
158
|
let [u, d] = l([]), f = c(null), p = c(i);
|
|
135
159
|
p.current = i;
|
|
136
160
|
let m = s(() => a?.map(({ startByteOffset: e, endByteOffset: t }) => [e, t]), [a?.map(({ startByteOffset: e, endByteOffset: t }) => `${e}-${t}`).join(",")]), h = c(m);
|
|
137
161
|
return h.current = m, o(() => {
|
|
138
|
-
if (!r || !i) return;
|
|
139
|
-
let a = !1, o = null, s, c =
|
|
162
|
+
if (!r || !i || !e || !n) return;
|
|
163
|
+
let a = !1, o = null, s, c = L, l = () => {
|
|
140
164
|
t({
|
|
141
165
|
publicPath: e,
|
|
142
166
|
workerUrl: n,
|
|
@@ -152,7 +176,7 @@ var te = {
|
|
|
152
176
|
}
|
|
153
177
|
o = e, f.current = e, e.update(h.current);
|
|
154
178
|
}, () => {
|
|
155
|
-
a || (s = setTimeout(l, c), c = Math.min(c * 2,
|
|
179
|
+
a || (s = setTimeout(l, c), c = Math.min(c * 2, R));
|
|
156
180
|
});
|
|
157
181
|
};
|
|
158
182
|
return l(), () => {
|
|
@@ -165,8 +189,8 @@ var te = {
|
|
|
165
189
|
]), o(() => {
|
|
166
190
|
f.current?.update(m);
|
|
167
191
|
}, [m]), u;
|
|
168
|
-
},
|
|
169
|
-
let n =
|
|
192
|
+
}, B = (e, t) => {
|
|
193
|
+
let n = P(), r = c(null);
|
|
170
194
|
return o(() => {
|
|
171
195
|
if (!e || !t) return;
|
|
172
196
|
let a = i({
|
|
@@ -186,49 +210,49 @@ var te = {
|
|
|
186
210
|
console.warn("picture in picture was refused", e);
|
|
187
211
|
});
|
|
188
212
|
}, []);
|
|
189
|
-
},
|
|
213
|
+
}, V = {
|
|
190
214
|
headings: {
|
|
191
|
-
large: "\n font-weight: 600;\n font-size: 2.
|
|
192
|
-
medium: "\n font-weight: 600;\n font-size: 2.
|
|
193
|
-
small: "\n font-weight: 500;\n font-size: 1.
|
|
194
|
-
extraSmall: "\n font-weight: 500;\n font-size: 1.
|
|
215
|
+
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 ",
|
|
216
|
+
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 ",
|
|
217
|
+
small: "\n font-weight: 500;\n font-size: calc(1.8 * var(--mp-unit));\n line-height: calc(1.9 * var(--mp-unit));\n @media (min-width: 960px) {\n font-size: calc(1.8 * var(--mp-unit));\n line-height: calc(2.2 * var(--mp-unit));\n }\n @media (min-width: 2560px) {\n font-size: calc(2.2 * var(--mp-unit));\n line-height: calc(2.6 * var(--mp-unit));\n }\n ",
|
|
218
|
+
extraSmall: "\n font-weight: 500;\n font-size: calc(1.4 * var(--mp-unit));\n line-height: calc(1.7 * var(--mp-unit));\n @media (min-width: 960px) {\n font-size: calc(1.6 * var(--mp-unit));\n line-height: calc(1.9 * var(--mp-unit));\n }\n "
|
|
195
219
|
},
|
|
196
220
|
bLarge: {
|
|
197
|
-
bold: "\n font-weight: 600;\n font-size: 1.
|
|
198
|
-
medium: "\n font-weight: 500;\n font-size: 1.
|
|
199
|
-
regular: "\n font-weight: 400;\n font-size: 1.
|
|
221
|
+
bold: "\n font-weight: 600;\n font-size: calc(1.4 * var(--mp-unit));\n line-height: calc(2 * var(--mp-unit));\n @media (min-width: 960px) {\n font-size: calc(1.6 * var(--mp-unit));\n line-height: calc(2.2 * var(--mp-unit));\n }\n ",
|
|
222
|
+
medium: "\n font-weight: 500;\n font-size: calc(1.4 * var(--mp-unit));\n line-height: calc(2 * var(--mp-unit));\n @media (min-width: 960px) {\n font-size: calc(1.6 * var(--mp-unit));\n line-height: calc(2.2 * var(--mp-unit));\n }\n ",
|
|
223
|
+
regular: "\n font-weight: 400;\n font-size: calc(1.4 * var(--mp-unit));\n line-height: calc(2 * var(--mp-unit));\n @media (min-width: 960px) {\n font-size: calc(1.6 * var(--mp-unit));\n line-height: calc(2.2 * var(--mp-unit));\n }\n "
|
|
200
224
|
},
|
|
201
225
|
bMedium: {
|
|
202
|
-
bold: "\n font-weight: 600;\n font-size: 1.
|
|
203
|
-
medium: "\n font-weight: 500;\n font-size: 1.
|
|
204
|
-
regular: "\n font-weight: 400;\n font-size: 1.
|
|
226
|
+
bold: "\n font-weight: 600;\n font-size: calc(1.2 * var(--mp-unit));\n line-height: calc(1.7 * var(--mp-unit));\n @media (min-width: 960px) {\n font-size: calc(1.4 * var(--mp-unit));\n line-height: calc(2 * var(--mp-unit));\n }\n ",
|
|
227
|
+
medium: "\n font-weight: 500;\n font-size: calc(1.2 * var(--mp-unit));\n line-height: calc(1.7 * var(--mp-unit));\n @media (min-width: 960px) {\n font-size: calc(1.4 * var(--mp-unit));\n line-height: calc(2 * var(--mp-unit));\n }\n ",
|
|
228
|
+
regular: "\n font-weight: 400;\n font-size: calc(1.2 * var(--mp-unit));\n line-height: calc(1.7 * var(--mp-unit));\n @media (min-width: 960px) {\n font-size: calc(1.4 * var(--mp-unit));\n line-height: calc(2 * var(--mp-unit));\n }\n "
|
|
205
229
|
},
|
|
206
230
|
bSmall: {
|
|
207
|
-
bold: "\n font-weight: 600;\n font-size:
|
|
208
|
-
medium: "\n font-weight: 500;\n font-size:
|
|
209
|
-
regular: "\n font-weight: 400;\n font-size:
|
|
231
|
+
bold: "\n font-weight: 600;\n font-size: calc(1 * var(--mp-unit));\n line-height: calc(1.4 * var(--mp-unit));\n @media (min-width: 960px) {\n font-size: calc(1.2 * var(--mp-unit));\n line-height: calc(1.7 * var(--mp-unit));\n }\n ",
|
|
232
|
+
medium: "\n font-weight: 500;\n font-size: calc(1 * var(--mp-unit));\n line-height: calc(1.4 * var(--mp-unit));\n @media (min-width: 960px) {\n font-size: calc(1.2 * var(--mp-unit));\n line-height: calc(1.7 * var(--mp-unit));\n }\n ",
|
|
233
|
+
regular: "\n font-weight: 400;\n font-size: calc(1 * var(--mp-unit));\n line-height: calc(1.4 * var(--mp-unit));\n @media (min-width: 960px) {\n font-size: calc(1.2 * var(--mp-unit));\n line-height: calc(1.7 * var(--mp-unit));\n }\n "
|
|
210
234
|
},
|
|
211
235
|
bExtraSmall: {
|
|
212
|
-
bold: "\n font-weight: 600;\n font-size: 0.
|
|
213
|
-
medium: "\n font-weight: 500;\n font-size: 0.
|
|
214
|
-
regular: "\n font-weight: 400;\n font-size: 0.
|
|
236
|
+
bold: "\n font-weight: 600;\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 ",
|
|
237
|
+
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 ",
|
|
238
|
+
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 "
|
|
215
239
|
}
|
|
216
|
-
},
|
|
240
|
+
}, ie = u`
|
|
217
241
|
top: unset !important;
|
|
218
242
|
left: unset !important;
|
|
219
243
|
width: 100%;
|
|
220
244
|
height: 100%;
|
|
221
245
|
margin: auto;
|
|
222
246
|
pointer-events: none;
|
|
223
|
-
`,
|
|
247
|
+
`, ae = u`
|
|
224
248
|
position: absolute;
|
|
225
249
|
top: 0;
|
|
226
250
|
left: 0;
|
|
227
251
|
width: 100%;
|
|
228
|
-
padding: 1.
|
|
252
|
+
padding: calc(1.2 * var(--mp-unit)) calc(1.6 * var(--mp-unit));
|
|
229
253
|
/* clears a notch once the player is fullscreen; resolves to zero everywhere else */
|
|
230
|
-
padding-top: calc(1.
|
|
231
|
-
${
|
|
254
|
+
padding-top: calc(calc(1.2 * var(--mp-unit)) + env(safe-area-inset-top, 0px));
|
|
255
|
+
${V.headings.small}
|
|
232
256
|
color: white;
|
|
233
257
|
text-shadow: 0 0 4px rgba(0, 0, 0, 1);
|
|
234
258
|
z-index: 2;
|
|
@@ -241,8 +265,8 @@ var te = {
|
|
|
241
265
|
text-overflow: ellipsis;
|
|
242
266
|
|
|
243
267
|
@media (min-width: 768px) {
|
|
244
|
-
padding: 2.
|
|
245
|
-
padding-top: calc(2.
|
|
268
|
+
padding: calc(2.4 * var(--mp-unit));
|
|
269
|
+
padding-top: calc(calc(2.4 * var(--mp-unit)) + env(safe-area-inset-top, 0px));
|
|
246
270
|
white-space: normal;
|
|
247
271
|
overflow: visible;
|
|
248
272
|
}
|
|
@@ -260,8 +284,8 @@ var te = {
|
|
|
260
284
|
|
|
261
285
|
::after {
|
|
262
286
|
content: '';
|
|
263
|
-
width:
|
|
264
|
-
height:
|
|
287
|
+
width: calc(4 * var(--mp-unit));
|
|
288
|
+
height: calc(4 * var(--mp-unit));
|
|
265
289
|
border-radius: 50%;
|
|
266
290
|
border: 3px solid rgba(255, 255, 255, 0.25);
|
|
267
291
|
border-top-color: #fff;
|
|
@@ -273,60 +297,60 @@ var te = {
|
|
|
273
297
|
position: absolute;
|
|
274
298
|
inset: auto 0 20%;
|
|
275
299
|
z-index: 3;
|
|
276
|
-
padding: 0
|
|
300
|
+
padding: 0 calc(2 * var(--mp-unit));
|
|
277
301
|
text-align: center;
|
|
278
302
|
color: #fff;
|
|
279
|
-
${
|
|
303
|
+
${V.bLarge.regular}
|
|
280
304
|
text-shadow: 0 0 4px rgba(0, 0, 0, 1);
|
|
281
305
|
pointer-events: none;
|
|
282
306
|
`, ce = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", le = ({ onCanvasRef: e }) => {
|
|
283
|
-
let t =
|
|
307
|
+
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);
|
|
284
308
|
return /* @__PURE__ */ y(_, { children: [
|
|
285
309
|
t ? /* @__PURE__ */ v("div", {
|
|
286
|
-
css:
|
|
310
|
+
css: ae,
|
|
287
311
|
style: { ...n ? {
|
|
288
312
|
opacity: "0",
|
|
289
313
|
pointerEvents: "none"
|
|
290
314
|
} : {} },
|
|
291
315
|
children: t
|
|
292
316
|
}) : void 0,
|
|
293
|
-
a
|
|
317
|
+
(a ? !i : o) && !r ? /* @__PURE__ */ v("div", { css: oe }) : void 0,
|
|
294
318
|
r ? /* @__PURE__ */ v("div", {
|
|
295
319
|
css: se,
|
|
296
320
|
children: ce(r)
|
|
297
321
|
}) : void 0,
|
|
298
322
|
/* @__PURE__ */ v("canvas", {
|
|
299
323
|
ref: e,
|
|
300
|
-
css:
|
|
324
|
+
css: ie
|
|
301
325
|
})
|
|
302
326
|
] });
|
|
303
|
-
},
|
|
327
|
+
}, 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) => {
|
|
304
328
|
if (e === void 0) return "0:00";
|
|
305
329
|
let t = Math.floor(e / 3600), n = Math.floor(e % 3600 / 60), r = Math.floor(e % 60);
|
|
306
330
|
return t > 0 ? `${t}:${n < 10 ? "0" : ""}${n}:${r < 10 ? "0" : ""}${r}` : `${n}:${r < 10 ? "0" : ""}${r}`;
|
|
307
|
-
},
|
|
331
|
+
}, ue = (e, t) => `${K(e)} / ${K(t)}`, de = (e) => u`
|
|
308
332
|
display: flex;
|
|
309
333
|
justify-content: flex-end;
|
|
310
334
|
|
|
311
|
-
border-radius: 0.
|
|
335
|
+
border-radius: calc(0.4 * var(--mp-unit));
|
|
312
336
|
user-select: none;
|
|
313
337
|
|
|
314
338
|
z-index: 3;
|
|
315
339
|
|
|
316
340
|
* {
|
|
317
|
-
${
|
|
341
|
+
${V.bMedium.regular}
|
|
318
342
|
}
|
|
319
343
|
|
|
320
344
|
${e === "sm" && u`
|
|
321
|
-
padding: 0.
|
|
345
|
+
padding: calc(0.4 * var(--mp-unit))!important;
|
|
322
346
|
`}
|
|
323
347
|
${e === "md" && u`
|
|
324
|
-
padding: 0.
|
|
348
|
+
padding: calc(0.6 * var(--mp-unit))!important;
|
|
325
349
|
`}
|
|
326
350
|
${e === "lg" && u`
|
|
327
|
-
padding: 1.
|
|
351
|
+
padding: calc(1.2 * var(--mp-unit))!important;
|
|
328
352
|
`}
|
|
329
|
-
`,
|
|
353
|
+
`, 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", {
|
|
330
354
|
"data-tooltip-id": e,
|
|
331
355
|
"data-open": !0,
|
|
332
356
|
"data-tooltip-offset": a,
|
|
@@ -334,12 +358,12 @@ var te = {
|
|
|
334
358
|
"data-tooltip-delay-hide": i,
|
|
335
359
|
"data-tooltip-place": o,
|
|
336
360
|
children: n
|
|
337
|
-
}), !s && /* @__PURE__ */ v(
|
|
338
|
-
css:
|
|
361
|
+
}), !s && /* @__PURE__ */ v(j, {
|
|
362
|
+
css: de(c),
|
|
339
363
|
id: e,
|
|
340
364
|
noArrow: !0,
|
|
341
365
|
children: t
|
|
342
|
-
})] }),
|
|
366
|
+
})] }), J = ({ ref: e, onChange: t, orientation: n = "horizontal", disabled: r = !1 }) => {
|
|
343
367
|
let [i, s] = l(!1), u = c(t);
|
|
344
368
|
u.current = t;
|
|
345
369
|
let d = c(null), f = a((t, r) => {
|
|
@@ -366,12 +390,12 @@ var te = {
|
|
|
366
390
|
style: { touchAction: "none" }
|
|
367
391
|
}
|
|
368
392
|
};
|
|
369
|
-
},
|
|
393
|
+
}, fe = u`
|
|
370
394
|
position: relative;
|
|
371
|
-
height: .
|
|
395
|
+
height: calc(.4 * var(--mp-unit));
|
|
372
396
|
|
|
373
|
-
--thumbnail-width:
|
|
374
|
-
--thumbnail-half: 12.
|
|
397
|
+
--thumbnail-width: calc(25 * var(--mp-unit));
|
|
398
|
+
--thumbnail-half: calc(12.5 * var(--mp-unit));
|
|
375
399
|
|
|
376
400
|
transition: transform .2s ease-in-out;
|
|
377
401
|
|
|
@@ -392,7 +416,7 @@ var te = {
|
|
|
392
416
|
}
|
|
393
417
|
.loaded {
|
|
394
418
|
transform: scaleY(1.5);
|
|
395
|
-
top: -.
|
|
419
|
+
top: calc(-.1 * var(--mp-unit));
|
|
396
420
|
}
|
|
397
421
|
.play-container {
|
|
398
422
|
transform: scaleY(1.5);
|
|
@@ -411,13 +435,13 @@ var te = {
|
|
|
411
435
|
justify-content: center;
|
|
412
436
|
|
|
413
437
|
text-shadow: 0 0 4px rgba(0, 0, 0, 1);
|
|
414
|
-
${
|
|
438
|
+
${V.bMedium.bold}
|
|
415
439
|
|
|
416
440
|
position: absolute;
|
|
417
|
-
top: -2.
|
|
418
|
-
width:
|
|
441
|
+
top: calc(-2.5 * var(--mp-unit));
|
|
442
|
+
width: calc(5 * var(--mp-unit));
|
|
419
443
|
|
|
420
|
-
margin-left: -2.
|
|
444
|
+
margin-left: calc(-2.5 * var(--mp-unit));
|
|
421
445
|
pointer-events: none;
|
|
422
446
|
}
|
|
423
447
|
|
|
@@ -425,12 +449,12 @@ var te = {
|
|
|
425
449
|
transform-origin: 0 0;
|
|
426
450
|
position: absolute;
|
|
427
451
|
bottom: 0;
|
|
428
|
-
height: .
|
|
452
|
+
height: calc(.4 * var(--mp-unit));
|
|
429
453
|
width: 100%;
|
|
430
454
|
.loaded-part {
|
|
431
455
|
transform-origin: 0 0;
|
|
432
456
|
bottom: 0;
|
|
433
|
-
height: .
|
|
457
|
+
height: calc(.4 * var(--mp-unit));
|
|
434
458
|
width: 100%;
|
|
435
459
|
position: absolute;
|
|
436
460
|
background-color: hsla(0, 100%, 100%, .4);
|
|
@@ -441,7 +465,7 @@ var te = {
|
|
|
441
465
|
position: absolute;
|
|
442
466
|
bottom: 0;
|
|
443
467
|
width: 100%;
|
|
444
|
-
height: .
|
|
468
|
+
height: calc(.4 * var(--mp-unit));
|
|
445
469
|
}
|
|
446
470
|
|
|
447
471
|
.play {
|
|
@@ -449,14 +473,14 @@ var te = {
|
|
|
449
473
|
background-color: #f03;
|
|
450
474
|
position: absolute;
|
|
451
475
|
bottom: 0;
|
|
452
|
-
height: .
|
|
476
|
+
height: calc(.4 * var(--mp-unit));
|
|
453
477
|
width: 100%;
|
|
454
478
|
}
|
|
455
479
|
|
|
456
480
|
.padding {
|
|
457
481
|
position: absolute;
|
|
458
482
|
bottom: -7.5px;
|
|
459
|
-
height:
|
|
483
|
+
height: calc(2 * var(--mp-unit));
|
|
460
484
|
width: 100%;
|
|
461
485
|
}
|
|
462
486
|
|
|
@@ -465,7 +489,7 @@ var te = {
|
|
|
465
489
|
justify-content: center;
|
|
466
490
|
|
|
467
491
|
position: absolute;
|
|
468
|
-
top: calc(-3.
|
|
492
|
+
top: calc(calc(-3.4375 * var(--mp-unit)) - var(--thumbnail-width) * 9/16);
|
|
469
493
|
height: calc(var(--thumbnail-width) * 9/16);
|
|
470
494
|
width: var(--thumbnail-width);
|
|
471
495
|
|
|
@@ -473,8 +497,8 @@ var te = {
|
|
|
473
497
|
pointer-events: none;
|
|
474
498
|
|
|
475
499
|
img {
|
|
476
|
-
border-radius: .
|
|
477
|
-
box-shadow: 0 0
|
|
500
|
+
border-radius: calc(.4 * var(--mp-unit));
|
|
501
|
+
box-shadow: 0 0 calc(1 * var(--mp-unit)) rgba(0, 0, 0, .5);
|
|
478
502
|
|
|
479
503
|
width: 100%;
|
|
480
504
|
height: 100%;
|
|
@@ -482,9 +506,9 @@ var te = {
|
|
|
482
506
|
}
|
|
483
507
|
}
|
|
484
508
|
|
|
485
|
-
/* a thumb is far wider than a cursor, so the hit strip grows to 44px and the track
|
|
509
|
+
/* a thumb is far wider than a cursor, so the hit strip grows to 44px and the track thickens */
|
|
486
510
|
@media (pointer: coarse) {
|
|
487
|
-
height: .
|
|
511
|
+
height: calc(.6 * var(--mp-unit));
|
|
488
512
|
|
|
489
513
|
/* press feedback, coarse only: a finger has no hover, so without this the bar gives no sign
|
|
490
514
|
it is being dragged */
|
|
@@ -495,18 +519,18 @@ var te = {
|
|
|
495
519
|
}
|
|
496
520
|
|
|
497
521
|
.loaded {
|
|
498
|
-
height: .
|
|
522
|
+
height: calc(.6 * var(--mp-unit));
|
|
499
523
|
.loaded-part {
|
|
500
|
-
height: .
|
|
524
|
+
height: calc(.6 * var(--mp-unit));
|
|
501
525
|
}
|
|
502
526
|
}
|
|
503
527
|
|
|
504
528
|
.play-container {
|
|
505
|
-
height: .
|
|
529
|
+
height: calc(.6 * var(--mp-unit));
|
|
506
530
|
}
|
|
507
531
|
|
|
508
532
|
.play {
|
|
509
|
-
height: .
|
|
533
|
+
height: calc(.6 * var(--mp-unit));
|
|
510
534
|
}
|
|
511
535
|
|
|
512
536
|
/* grows upward into the video: centred, it would hang over the control row and win hit
|
|
@@ -520,28 +544,28 @@ var te = {
|
|
|
520
544
|
/* the clamp only holds the preview inside the bar while the bar is the wider of the two, so
|
|
521
545
|
below that the preview is narrowed instead */
|
|
522
546
|
@media (max-width: 480px) {
|
|
523
|
-
--thumbnail-width:
|
|
524
|
-
--thumbnail-half:
|
|
547
|
+
--thumbnail-width: calc(18 * var(--mp-unit));
|
|
548
|
+
--thumbnail-half: calc(9 * var(--mp-unit));
|
|
525
549
|
}
|
|
526
|
-
`,
|
|
527
|
-
let e =
|
|
528
|
-
ref:
|
|
550
|
+
`, pe = () => {
|
|
551
|
+
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({
|
|
552
|
+
ref: f,
|
|
529
553
|
onChange: (e) => {
|
|
530
|
-
|
|
554
|
+
m(e), _.current !== "mouse" && g(e * n);
|
|
531
555
|
}
|
|
532
|
-
}),
|
|
533
|
-
|
|
534
|
-
}, S = (e) => {
|
|
535
|
-
b.onPointerUp(e), e.pointerType !== "mouse" && h(void 0);
|
|
556
|
+
}), S = (e) => {
|
|
557
|
+
_.current = e.pointerType, x.onPointerDown(e);
|
|
536
558
|
}, C = (e) => {
|
|
537
|
-
|
|
538
|
-
let { left: t, right: r } = d.current.getBoundingClientRect();
|
|
539
|
-
return Math.min(Math.max((e - t) / (r - t), 0), 1) * n;
|
|
559
|
+
x.onPointerUp(e), e.pointerType !== "mouse" && g(void 0);
|
|
540
560
|
}, w = (e) => {
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
},
|
|
561
|
+
if (!f.current) return;
|
|
562
|
+
let { left: t, right: r } = f.current.getBoundingClientRect();
|
|
563
|
+
return Math.min(Math.max((e - t) / (r - t), 0), 1) * n;
|
|
564
|
+
}, T = (e) => {
|
|
565
|
+
g(w(e.clientX));
|
|
566
|
+
}, E = () => {
|
|
567
|
+
f.current && g(void 0);
|
|
568
|
+
}, D = (e) => n ? e / n * 100 : 0, O = s(() => i?.map((e, t) => {
|
|
545
569
|
if (!r || !n) return null;
|
|
546
570
|
let i = a.filter((t) => e.startByteOffset <= t.pos && t.pos <= e.endByteOffset), o = i.at(0), s = i.at(-1);
|
|
547
571
|
if (!o || !s) return null;
|
|
@@ -557,87 +581,73 @@ var te = {
|
|
|
557
581
|
n,
|
|
558
582
|
a.length,
|
|
559
583
|
i?.map(({ startByteOffset: e, endByteOffset: t }) => `${e}/${t}`).join(",")
|
|
560
|
-
]),
|
|
561
|
-
if (!
|
|
562
|
-
let e = Math.floor(
|
|
584
|
+
]), k = s(() => {
|
|
585
|
+
if (!h || h < 0) return;
|
|
586
|
+
let e = Math.floor(h / 3600), t = Math.floor((h - e * 3600) / 60), n = Math.floor(h - e * 3600 - t * 60);
|
|
563
587
|
return `${e > 0 ? `${e}:` : ""}${t < 10 ? "0" : ""}${t}:${n < 10 ? "0" : ""}${n}`;
|
|
564
|
-
}, [
|
|
588
|
+
}, [h]);
|
|
565
589
|
o(() => {
|
|
566
|
-
if (
|
|
567
|
-
let t =
|
|
590
|
+
if (p === void 0 || !n) return;
|
|
591
|
+
let t = p * n;
|
|
568
592
|
e.seek(t);
|
|
569
593
|
}, [
|
|
570
594
|
e,
|
|
571
|
-
|
|
595
|
+
p,
|
|
572
596
|
n
|
|
573
597
|
]);
|
|
574
|
-
let
|
|
575
|
-
if (
|
|
576
|
-
|
|
598
|
+
let A = s(() => !n || typeof t != "number" ? 0 : t / n, [n, t]), j = s(() => {
|
|
599
|
+
if (h) {
|
|
600
|
+
if (d) return d(h);
|
|
601
|
+
if (u.length) return u.find(({ startTime: e, endTime: t }) => e <= h && h < t);
|
|
602
|
+
}
|
|
603
|
+
}, [
|
|
604
|
+
u,
|
|
605
|
+
d,
|
|
606
|
+
h
|
|
607
|
+
]);
|
|
577
608
|
return /* @__PURE__ */ y("div", {
|
|
578
|
-
css:
|
|
579
|
-
ref:
|
|
580
|
-
className:
|
|
581
|
-
onMouseMove:
|
|
582
|
-
onMouseOut:
|
|
609
|
+
css: fe,
|
|
610
|
+
ref: f,
|
|
611
|
+
className: b ? "progress-bar dragging" : "progress-bar",
|
|
612
|
+
onMouseMove: T,
|
|
613
|
+
onMouseOut: E,
|
|
583
614
|
children: [
|
|
584
615
|
/* @__PURE__ */ v("div", { className: "background-bar" }),
|
|
585
|
-
|
|
616
|
+
h ? /* @__PURE__ */ v("div", {
|
|
586
617
|
className: "cursor-time",
|
|
587
|
-
style: { left: `clamp(1.
|
|
588
|
-
children:
|
|
618
|
+
style: { left: `clamp(calc(1.8 * var(--mp-unit)), ${D(h)}%, calc(100% - calc(1.8 * var(--mp-unit))))` },
|
|
619
|
+
children: k
|
|
589
620
|
}) : void 0,
|
|
590
621
|
/* @__PURE__ */ v("div", { className: "progress" }),
|
|
591
622
|
/* @__PURE__ */ v("div", {
|
|
592
623
|
className: "loaded",
|
|
593
|
-
children:
|
|
624
|
+
children: O
|
|
594
625
|
}),
|
|
595
626
|
/* @__PURE__ */ v("div", { className: "hover" }),
|
|
596
627
|
/* @__PURE__ */ v("div", {
|
|
597
628
|
className: "play-container",
|
|
598
629
|
children: /* @__PURE__ */ v("div", {
|
|
599
630
|
className: "play",
|
|
600
|
-
style: { transform: `scaleX(${
|
|
631
|
+
style: { transform: `scaleX(${A})` }
|
|
601
632
|
})
|
|
602
633
|
}),
|
|
603
634
|
/* @__PURE__ */ v("div", { className: "chapters" }),
|
|
604
635
|
/* @__PURE__ */ v("div", { className: "scrubber" }),
|
|
605
636
|
/* @__PURE__ */ v("div", {
|
|
606
637
|
className: "padding",
|
|
607
|
-
...
|
|
608
|
-
onPointerDown:
|
|
609
|
-
onPointerUp:
|
|
610
|
-
onPointerCancel:
|
|
638
|
+
...x,
|
|
639
|
+
onPointerDown: S,
|
|
640
|
+
onPointerUp: C,
|
|
641
|
+
onPointerCancel: C
|
|
611
642
|
}),
|
|
612
643
|
/* @__PURE__ */ v("div", {
|
|
613
644
|
className: "thumbnail",
|
|
614
|
-
style: { left: `clamp(var(--thumbnail-half), ${
|
|
615
|
-
children:
|
|
645
|
+
style: { left: `clamp(var(--thumbnail-half), ${D(h ?? 1)}%, calc(100% - var(--thumbnail-half)))` },
|
|
646
|
+
children: j?.url ? /* @__PURE__ */ v("img", { src: j.url }) : void 0
|
|
616
647
|
})
|
|
617
648
|
]
|
|
618
649
|
});
|
|
619
|
-
},
|
|
620
|
-
if (!(!e || e === "und")) try {
|
|
621
|
-
return new Intl.DisplayNames([navigator.language || "en"], {
|
|
622
|
-
type: "language",
|
|
623
|
-
fallback: "none"
|
|
624
|
-
}).of(e) || void 0;
|
|
625
|
-
} catch {
|
|
626
|
-
return;
|
|
627
|
-
}
|
|
628
|
-
}, q = (e) => e?.replace(/_/g, " ").trim() || void 0, me = (e) => {
|
|
629
|
-
let t = e.map((e) => pe(e.language) ?? q(e.title) ?? `Track ${e.streamIndex}`), n = t.reduce((e, t) => ({
|
|
630
|
-
...e,
|
|
631
|
-
[t]: (e[t] ?? 0) + 1
|
|
632
|
-
}), {});
|
|
633
|
-
return e.map((e, r) => {
|
|
634
|
-
let i = t[r], a = q(e.title);
|
|
635
|
-
return {
|
|
636
|
-
track: e,
|
|
637
|
-
label: (n[i] ?? 0) > 1 && a && a !== i ? `${i} (${a})` : i
|
|
638
|
-
};
|
|
639
|
-
});
|
|
640
|
-
}, he = u`
|
|
650
|
+
}, 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`
|
|
641
651
|
display: flex;
|
|
642
652
|
align-items: center;
|
|
643
653
|
justify-content: center;
|
|
@@ -691,7 +701,7 @@ width: 100%;
|
|
|
691
701
|
}
|
|
692
702
|
}
|
|
693
703
|
`, ge = () => {
|
|
694
|
-
let e =
|
|
704
|
+
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({
|
|
695
705
|
ref: r,
|
|
696
706
|
onChange: (t) => e.setPlaybackRate(d(t))
|
|
697
707
|
}), p = (t) => {
|
|
@@ -763,7 +773,7 @@ position: relative;
|
|
|
763
773
|
|
|
764
774
|
border-radius: 8px;
|
|
765
775
|
background-color: rgba(28,28,28,0.95);
|
|
766
|
-
${
|
|
776
|
+
${V.bMedium.regular}
|
|
767
777
|
|
|
768
778
|
z-index: 4;
|
|
769
779
|
|
|
@@ -806,7 +816,7 @@ position: relative;
|
|
|
806
816
|
|
|
807
817
|
.secondary {
|
|
808
818
|
color: #eee;
|
|
809
|
-
${
|
|
819
|
+
${V.bSmall.regular}
|
|
810
820
|
}
|
|
811
821
|
}
|
|
812
822
|
}
|
|
@@ -874,10 +884,7 @@ position: relative;
|
|
|
874
884
|
word-break: break-word;
|
|
875
885
|
}
|
|
876
886
|
}
|
|
877
|
-
`,
|
|
878
|
-
streamIndex: e.streamIndex,
|
|
879
|
-
label: t
|
|
880
|
-
})), Y = ({ title: e, tracks: t, selected: n, onSelect: r, onBack: i, allowDisable: a }) => /* @__PURE__ */ y("div", {
|
|
887
|
+
`, Y = ({ title: e, tracks: t, selected: n, onSelect: r, onBack: i, allowDisable: a }) => /* @__PURE__ */ y("div", {
|
|
881
888
|
className: "popover track-list",
|
|
882
889
|
children: [
|
|
883
890
|
/* @__PURE__ */ y("div", {
|
|
@@ -889,59 +896,59 @@ position: relative;
|
|
|
889
896
|
onClick: () => r(void 0),
|
|
890
897
|
children: [/* @__PURE__ */ v("span", { children: "Disable" }), /* @__PURE__ */ v("span", { children: n === void 0 ? "✓" : "" })]
|
|
891
898
|
}) : null,
|
|
892
|
-
t.map(({
|
|
899
|
+
t.map(({ id: e, label: t }) => /* @__PURE__ */ y("div", {
|
|
893
900
|
onClick: () => r(e),
|
|
894
901
|
className: "description",
|
|
895
902
|
children: [/* @__PURE__ */ v("span", { children: t }), /* @__PURE__ */ v("span", { children: n === e ? "✓" : "" })]
|
|
896
903
|
}, e))
|
|
897
904
|
]
|
|
898
905
|
}), ve = () => {
|
|
899
|
-
let e =
|
|
900
|
-
|
|
901
|
-
},
|
|
902
|
-
e.setPlaybackRate(t),
|
|
906
|
+
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 = () => {
|
|
907
|
+
f(!d), m(0);
|
|
908
|
+
}, _ = (t) => {
|
|
909
|
+
e.setPlaybackRate(t), m(0);
|
|
903
910
|
};
|
|
904
911
|
o(() => {
|
|
905
912
|
let e = (e) => {
|
|
906
|
-
|
|
913
|
+
d && h.current && !h.current.contains(e.target) && g();
|
|
907
914
|
};
|
|
908
915
|
return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
|
|
909
|
-
}, [
|
|
910
|
-
let
|
|
911
|
-
i(e),
|
|
912
|
-
},
|
|
913
|
-
e !== void 0 &&
|
|
914
|
-
},
|
|
915
|
-
|
|
916
|
+
}, [d]);
|
|
917
|
+
let S = (e) => {
|
|
918
|
+
i(e), g();
|
|
919
|
+
}, C = (e) => {
|
|
920
|
+
e !== void 0 && u(e), g();
|
|
921
|
+
}, w = (e) => () => {
|
|
922
|
+
m(e);
|
|
916
923
|
};
|
|
917
924
|
return /* @__PURE__ */ y("div", {
|
|
918
925
|
css: _e,
|
|
919
|
-
ref:
|
|
926
|
+
ref: h,
|
|
920
927
|
children: [
|
|
921
|
-
/* @__PURE__ */ v(
|
|
928
|
+
/* @__PURE__ */ v(q, {
|
|
922
929
|
id: "settings",
|
|
923
|
-
disabled:
|
|
930
|
+
disabled: d,
|
|
924
931
|
text: /* @__PURE__ */ v("button", {
|
|
925
932
|
className: "settings",
|
|
926
933
|
type: "button",
|
|
927
|
-
onClick:
|
|
934
|
+
onClick: g,
|
|
928
935
|
children: /* @__PURE__ */ v(D, {})
|
|
929
936
|
}),
|
|
930
937
|
toolTipText: /* @__PURE__ */ v("span", { children: "Settings" })
|
|
931
938
|
}),
|
|
932
|
-
|
|
939
|
+
d && p === 0 && /* @__PURE__ */ y("div", {
|
|
933
940
|
className: "popover menu",
|
|
934
941
|
children: [
|
|
935
|
-
|
|
936
|
-
onClick:
|
|
942
|
+
a.length > 1 ? /* @__PURE__ */ y("div", {
|
|
943
|
+
onClick: w(3),
|
|
937
944
|
children: [/* @__PURE__ */ v("div", { children: "Audio" }), /* @__PURE__ */ v("div", { children: /* @__PURE__ */ v(x, {}) })]
|
|
938
945
|
}) : null,
|
|
939
|
-
|
|
940
|
-
onClick:
|
|
946
|
+
n.length > 0 ? /* @__PURE__ */ y("div", {
|
|
947
|
+
onClick: w(2),
|
|
941
948
|
children: [/* @__PURE__ */ v("div", { children: "Subtitles" }), /* @__PURE__ */ v("div", { children: /* @__PURE__ */ v(x, {}) })]
|
|
942
949
|
}) : null,
|
|
943
950
|
/* @__PURE__ */ y("div", {
|
|
944
|
-
onClick:
|
|
951
|
+
onClick: w(1),
|
|
945
952
|
children: [/* @__PURE__ */ v("div", { children: "Playback speed" }), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("span", {
|
|
946
953
|
className: "secondary",
|
|
947
954
|
children: t === 1 ? "(Default)" : t.toFixed(2)
|
|
@@ -949,12 +956,12 @@ position: relative;
|
|
|
949
956
|
})
|
|
950
957
|
]
|
|
951
958
|
}),
|
|
952
|
-
|
|
959
|
+
d && p === 1 && /* @__PURE__ */ y("div", {
|
|
953
960
|
className: "popover playback-rate",
|
|
954
961
|
children: [
|
|
955
962
|
/* @__PURE__ */ y("div", {
|
|
956
963
|
className: "back",
|
|
957
|
-
onClick:
|
|
964
|
+
onClick: w(0),
|
|
958
965
|
children: [/* @__PURE__ */ v(b, {}), /* @__PURE__ */ v("span", { children: "Playback speed" })]
|
|
959
966
|
}),
|
|
960
967
|
/* @__PURE__ */ v("div", {
|
|
@@ -965,39 +972,39 @@ position: relative;
|
|
|
965
972
|
className: "options no-hover",
|
|
966
973
|
children: [
|
|
967
974
|
/* @__PURE__ */ v("div", {
|
|
968
|
-
onClick: () =>
|
|
975
|
+
onClick: () => _(.5),
|
|
969
976
|
children: "0.5x"
|
|
970
977
|
}),
|
|
971
978
|
/* @__PURE__ */ v("div", {
|
|
972
|
-
onClick: () =>
|
|
979
|
+
onClick: () => _(1),
|
|
973
980
|
children: "1x"
|
|
974
981
|
}),
|
|
975
982
|
/* @__PURE__ */ v("div", {
|
|
976
|
-
onClick: () =>
|
|
983
|
+
onClick: () => _(1.5),
|
|
977
984
|
children: "1.5x"
|
|
978
985
|
}),
|
|
979
986
|
/* @__PURE__ */ v("div", {
|
|
980
|
-
onClick: () =>
|
|
987
|
+
onClick: () => _(2),
|
|
981
988
|
children: "2x"
|
|
982
989
|
})
|
|
983
990
|
]
|
|
984
991
|
})
|
|
985
992
|
]
|
|
986
993
|
}),
|
|
987
|
-
|
|
994
|
+
d && p === 2 && /* @__PURE__ */ v(Y, {
|
|
988
995
|
title: "Subtitles",
|
|
989
|
-
tracks:
|
|
996
|
+
tracks: n,
|
|
990
997
|
selected: r,
|
|
991
|
-
onSelect:
|
|
992
|
-
onBack:
|
|
998
|
+
onSelect: S,
|
|
999
|
+
onBack: w(0),
|
|
993
1000
|
allowDisable: !0
|
|
994
1001
|
}),
|
|
995
|
-
|
|
1002
|
+
d && p === 3 && /* @__PURE__ */ v(Y, {
|
|
996
1003
|
title: "Audio",
|
|
997
|
-
tracks:
|
|
998
|
-
selected:
|
|
999
|
-
onSelect:
|
|
1000
|
-
onBack:
|
|
1004
|
+
tracks: a,
|
|
1005
|
+
selected: s,
|
|
1006
|
+
onSelect: C,
|
|
1007
|
+
onBack: w(0)
|
|
1001
1008
|
})
|
|
1002
1009
|
]
|
|
1003
1010
|
});
|
|
@@ -1051,7 +1058,7 @@ position: relative;
|
|
|
1051
1058
|
height: 10px;
|
|
1052
1059
|
}
|
|
1053
1060
|
`, xe = ({ value: e, onChange: t }) => {
|
|
1054
|
-
let n =
|
|
1061
|
+
let n = P((e) => e.volume), r = P((e) => e.muted), i = c(null), a = c(null), { handlers: l } = J({
|
|
1055
1062
|
ref: a,
|
|
1056
1063
|
onChange: t
|
|
1057
1064
|
}), u = (n) => {
|
|
@@ -1065,8 +1072,8 @@ position: relative;
|
|
|
1065
1072
|
e && e.removeEventListener("wheel", u);
|
|
1066
1073
|
};
|
|
1067
1074
|
}, [e]);
|
|
1068
|
-
let d = e * 100, f = s(() => Math.round(r ? 0 :
|
|
1069
|
-
return /* @__PURE__ */ v(
|
|
1075
|
+
let d = e * 100, f = s(() => Math.round(r ? 0 : G(n) * 100), [n, r]);
|
|
1076
|
+
return /* @__PURE__ */ v(q, {
|
|
1070
1077
|
id: "volume-slider",
|
|
1071
1078
|
text: /* @__PURE__ */ v("div", {
|
|
1072
1079
|
ref: i,
|
|
@@ -1114,14 +1121,14 @@ position: relative;
|
|
|
1114
1121
|
border-radius: 4px;
|
|
1115
1122
|
|
|
1116
1123
|
.volume-value {
|
|
1117
|
-
${
|
|
1124
|
+
${V.bMedium.regular};
|
|
1118
1125
|
color: #ffffff;
|
|
1119
1126
|
}
|
|
1120
1127
|
}
|
|
1121
1128
|
}
|
|
1122
1129
|
|
|
1123
1130
|
&:hover .volume-slider-container {
|
|
1124
|
-
width:
|
|
1131
|
+
width: calc(9 * var(--mp-unit));
|
|
1125
1132
|
|
|
1126
1133
|
transition: margin .2s cubic-bezier(0,0,0.2,1), width .2s cubic-bezier(0,0,0.2,1);
|
|
1127
1134
|
-webkit-transition: margin .2s cubic-bezier(0,0,0.2,1), width .2s cubic-bezier(0,0,0.2,1);
|
|
@@ -1153,10 +1160,10 @@ position: relative;
|
|
|
1153
1160
|
}
|
|
1154
1161
|
|
|
1155
1162
|
`, Ce = ({ ref: e }) => {
|
|
1156
|
-
let t =
|
|
1163
|
+
let t = P(), n = P((e) => e.volume), r = P((e) => e.muted), i = s(() => G(n), [n]);
|
|
1157
1164
|
return /* @__PURE__ */ y("div", {
|
|
1158
1165
|
css: Se,
|
|
1159
|
-
children: [/* @__PURE__ */ v(
|
|
1166
|
+
children: [/* @__PURE__ */ v(q, {
|
|
1160
1167
|
id: "sound",
|
|
1161
1168
|
text: /* @__PURE__ */ v("button", {
|
|
1162
1169
|
className: "sound",
|
|
@@ -1176,7 +1183,7 @@ position: relative;
|
|
|
1176
1183
|
children: /* @__PURE__ */ v(xe, {
|
|
1177
1184
|
value: r ? 0 : i,
|
|
1178
1185
|
onChange: (e) => {
|
|
1179
|
-
t.setVolume(
|
|
1186
|
+
t.setVolume(W(e));
|
|
1180
1187
|
}
|
|
1181
1188
|
})
|
|
1182
1189
|
})
|
|
@@ -1283,7 +1290,7 @@ position: relative;
|
|
|
1283
1290
|
|
|
1284
1291
|
.left {
|
|
1285
1292
|
.time {
|
|
1286
|
-
${
|
|
1293
|
+
${V.bMedium.regular}
|
|
1287
1294
|
text-shadow: 0 0 4px rgba(0, 0, 0, 1);
|
|
1288
1295
|
}
|
|
1289
1296
|
}
|
|
@@ -1305,9 +1312,9 @@ position: relative;
|
|
|
1305
1312
|
}
|
|
1306
1313
|
}
|
|
1307
1314
|
`, Te = () => {
|
|
1308
|
-
let e =
|
|
1309
|
-
let r =
|
|
1310
|
-
e.setVolume(
|
|
1315
|
+
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 }) => {
|
|
1316
|
+
let r = G(e.volume), i = t === "up" ? n : -n, a = Math.max(0, Math.min(1, r + i)), o = e.muted;
|
|
1317
|
+
e.setVolume(W(a)), o && !e.muted && e.toggleMuted();
|
|
1311
1318
|
}, [e]);
|
|
1312
1319
|
o(() => {
|
|
1313
1320
|
let t = (t) => {
|
|
@@ -1351,12 +1358,12 @@ position: relative;
|
|
|
1351
1358
|
opacity: "0",
|
|
1352
1359
|
pointerEvents: "none"
|
|
1353
1360
|
} : {} },
|
|
1354
|
-
children: [/* @__PURE__ */ v(
|
|
1361
|
+
children: [/* @__PURE__ */ v(pe, {}), /* @__PURE__ */ y("div", {
|
|
1355
1362
|
className: "actions",
|
|
1356
1363
|
children: [/* @__PURE__ */ y("div", {
|
|
1357
1364
|
className: "left",
|
|
1358
1365
|
children: [
|
|
1359
|
-
/* @__PURE__ */ v(
|
|
1366
|
+
/* @__PURE__ */ v(q, {
|
|
1360
1367
|
id: "play",
|
|
1361
1368
|
tooltipPlace: "top-start",
|
|
1362
1369
|
text: /* @__PURE__ */ v("button", {
|
|
@@ -1370,24 +1377,24 @@ position: relative;
|
|
|
1370
1377
|
/* @__PURE__ */ v(Ce, { ref: d }),
|
|
1371
1378
|
/* @__PURE__ */ v("div", {
|
|
1372
1379
|
className: "time",
|
|
1373
|
-
children:
|
|
1380
|
+
children: ue(n, r)
|
|
1374
1381
|
})
|
|
1375
1382
|
]
|
|
1376
1383
|
}), /* @__PURE__ */ y("div", {
|
|
1377
1384
|
className: "right",
|
|
1378
1385
|
children: [
|
|
1379
1386
|
/* @__PURE__ */ v(ve, {}),
|
|
1380
|
-
/* @__PURE__ */ v(
|
|
1387
|
+
/* @__PURE__ */ v(q, {
|
|
1381
1388
|
id: "picture-in-picture",
|
|
1382
1389
|
text: /* @__PURE__ */ v("button", {
|
|
1383
1390
|
className: "picture-in-picture",
|
|
1384
1391
|
type: "button",
|
|
1385
1392
|
onClick: c,
|
|
1386
|
-
children: /* @__PURE__ */ v("img", { src:
|
|
1393
|
+
children: /* @__PURE__ */ v("img", { src: me })
|
|
1387
1394
|
}),
|
|
1388
1395
|
toolTipText: /* @__PURE__ */ v("span", { children: "Picture in picture" })
|
|
1389
1396
|
}),
|
|
1390
|
-
/* @__PURE__ */ v(
|
|
1397
|
+
/* @__PURE__ */ v(q, {
|
|
1391
1398
|
id: "full-screen",
|
|
1392
1399
|
tooltipPlace: "top-end",
|
|
1393
1400
|
text: /* @__PURE__ */ v("button", {
|
|
@@ -1434,84 +1441,121 @@ position: relative;
|
|
|
1434
1441
|
&.hide {
|
|
1435
1442
|
cursor: none;
|
|
1436
1443
|
}
|
|
1437
|
-
`, Oe = ({ ref: e, onVideoRef: t, onCanvasRef: n,
|
|
1438
|
-
let
|
|
1439
|
-
o(() => () => clearTimeout(
|
|
1440
|
-
let
|
|
1441
|
-
|
|
1444
|
+
`, Oe = ({ ref: e, onVideoRef: t, onCanvasRef: n, overlay: r, children: i }) => {
|
|
1445
|
+
let a = P(), s = P((e) => e.hideUI), l = P((e) => e.setHideUI), u = c(void 0), d = c("mouse");
|
|
1446
|
+
o(() => () => clearTimeout(u.current), []);
|
|
1447
|
+
let f = () => {
|
|
1448
|
+
l(!1), clearTimeout(u.current), u.current = setTimeout(() => l(!0), Ee);
|
|
1442
1449
|
};
|
|
1443
1450
|
return /* @__PURE__ */ y("div", {
|
|
1444
1451
|
css: De,
|
|
1445
1452
|
ref: e,
|
|
1446
1453
|
onPointerMove: (e) => {
|
|
1447
|
-
|
|
1454
|
+
d.current = e.pointerType, e.pointerType === "mouse" && f();
|
|
1448
1455
|
},
|
|
1449
1456
|
onPointerDown: (e) => {
|
|
1450
|
-
|
|
1457
|
+
d.current = e.pointerType;
|
|
1451
1458
|
},
|
|
1452
1459
|
onMouseOut: (e) => {
|
|
1453
1460
|
let t = e.relatedTarget;
|
|
1454
1461
|
if (t && e.currentTarget.contains(t)) return;
|
|
1455
1462
|
let { left: n, right: r, top: i, bottom: a } = e.currentTarget.getBoundingClientRect();
|
|
1456
|
-
e.clientX >= n && e.clientX < r && e.clientY >= i && e.clientY < a || (clearTimeout(
|
|
1463
|
+
e.clientX >= n && e.clientX < r && e.clientY >= i && e.clientY < a || (clearTimeout(u.current), l(!0));
|
|
1457
1464
|
},
|
|
1458
|
-
className:
|
|
1465
|
+
className: s ? "hide" : "",
|
|
1459
1466
|
children: [
|
|
1460
1467
|
/* @__PURE__ */ v(le, { onCanvasRef: n }),
|
|
1468
|
+
r,
|
|
1461
1469
|
/* @__PURE__ */ v(Te, {}),
|
|
1462
1470
|
/* @__PURE__ */ y("div", {
|
|
1463
1471
|
className: "video",
|
|
1464
1472
|
onClick: () => {
|
|
1465
|
-
if (
|
|
1466
|
-
|
|
1473
|
+
if (d.current === "mouse") {
|
|
1474
|
+
a.togglePaused();
|
|
1467
1475
|
return;
|
|
1468
1476
|
}
|
|
1469
|
-
|
|
1477
|
+
s ? f() : (clearTimeout(u.current), l(!0));
|
|
1470
1478
|
},
|
|
1471
|
-
children: [/* @__PURE__ */ v("video", {
|
|
1479
|
+
children: [t ? /* @__PURE__ */ v("video", {
|
|
1472
1480
|
ref: t,
|
|
1473
1481
|
playsInline: !0
|
|
1474
|
-
}),
|
|
1482
|
+
}) : null, i]
|
|
1475
1483
|
})
|
|
1476
1484
|
]
|
|
1477
1485
|
});
|
|
1478
|
-
},
|
|
1479
|
-
let { title:
|
|
1480
|
-
o(() => (
|
|
1481
|
-
let
|
|
1482
|
-
publicPath:
|
|
1483
|
-
workerUrl:
|
|
1484
|
-
length:
|
|
1485
|
-
read:
|
|
1486
|
-
downloadedRanges:
|
|
1487
|
-
}),
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
title:
|
|
1491
|
-
size:
|
|
1492
|
-
downloadedRanges:
|
|
1486
|
+
}, Q = ({ options: e, children: t }) => {
|
|
1487
|
+
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;
|
|
1488
|
+
o(() => (g?.(C), () => g?.(null)), [C, g]), re(y, x, r);
|
|
1489
|
+
let w = z({
|
|
1490
|
+
publicPath: c,
|
|
1491
|
+
workerUrl: u,
|
|
1492
|
+
length: h === !1 ? void 0 : a,
|
|
1493
|
+
read: f ?? d,
|
|
1494
|
+
downloadedRanges: s
|
|
1495
|
+
}), T = n?.thumbnails?.all ?? w, E = B(y, x), D = P((e) => e.setSourceState);
|
|
1496
|
+
o(() => {
|
|
1497
|
+
D({
|
|
1498
|
+
title: i,
|
|
1499
|
+
size: a,
|
|
1500
|
+
downloadedRanges: s
|
|
1493
1501
|
});
|
|
1494
1502
|
}, [
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
])
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
+
D,
|
|
1504
|
+
i,
|
|
1505
|
+
a,
|
|
1506
|
+
s
|
|
1507
|
+
]);
|
|
1508
|
+
let O = n?.thumbnails?.at;
|
|
1509
|
+
o(() => {
|
|
1510
|
+
D({
|
|
1511
|
+
thumbnails: T,
|
|
1512
|
+
thumbnailAt: O,
|
|
1513
|
+
togglePictureInPicture: E
|
|
1503
1514
|
});
|
|
1504
1515
|
}, [
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1516
|
+
D,
|
|
1517
|
+
T,
|
|
1518
|
+
O,
|
|
1519
|
+
E
|
|
1520
|
+
]);
|
|
1521
|
+
let k = n?.subtitles?.selection, A = n?.audioTracks?.selection;
|
|
1522
|
+
return o(() => {
|
|
1523
|
+
k && D({
|
|
1524
|
+
subtitleTracks: k.options.map(({ id: e, label: t }) => ({
|
|
1525
|
+
id: e,
|
|
1526
|
+
label: t
|
|
1527
|
+
})),
|
|
1528
|
+
selectedSubtitleTrack: k.selectedId ?? void 0,
|
|
1529
|
+
selectSubtitleTrack: (e) => k.select(e == null ? null : String(e))
|
|
1530
|
+
});
|
|
1531
|
+
}, [D, k]), o(() => {
|
|
1532
|
+
A && D({
|
|
1533
|
+
audioTracks: A.options.map(({ id: e, label: t }) => ({
|
|
1534
|
+
id: e,
|
|
1535
|
+
label: t
|
|
1536
|
+
})),
|
|
1537
|
+
selectedAudioTrack: A.selectedId ?? void 0,
|
|
1538
|
+
selectAudioTrack: (e) => A.select(String(e))
|
|
1539
|
+
});
|
|
1540
|
+
}, [D, A]), /* @__PURE__ */ v(Oe, {
|
|
1541
|
+
ref: _,
|
|
1542
|
+
onVideoRef: n ? void 0 : b,
|
|
1543
|
+
onCanvasRef: S,
|
|
1544
|
+
overlay: e.overlay,
|
|
1512
1545
|
children: t
|
|
1513
1546
|
});
|
|
1514
|
-
},
|
|
1547
|
+
}, ke = u`
|
|
1548
|
+
/**
|
|
1549
|
+
* The chrome's whole scale, in one place.
|
|
1550
|
+
*
|
|
1551
|
+
* Everything inside is sized against this rather than against \`rem\`, because \`rem\` is root
|
|
1552
|
+
* relative and a library cannot own the host page's root font. The old contract was that the host
|
|
1553
|
+
* set \`html { font-size: 62.5% }\`, which silently rendered every control 1.6x too large in any app
|
|
1554
|
+
* that did not, and could not be met by an app whose own screens are sized against the default.
|
|
1555
|
+
* Override it on the player element to rescale the whole chrome.
|
|
1556
|
+
*/
|
|
1557
|
+
--mp-unit: 10px;
|
|
1558
|
+
|
|
1515
1559
|
display: flex;
|
|
1516
1560
|
justify-content: center;
|
|
1517
1561
|
background-color: #111;
|
|
@@ -1519,16 +1563,16 @@ position: relative;
|
|
|
1519
1563
|
width: 100%;
|
|
1520
1564
|
overflow: hidden;
|
|
1521
1565
|
`, $ = (e) => /* @__PURE__ */ v("div", {
|
|
1522
|
-
css:
|
|
1523
|
-
children: /* @__PURE__ */ v(
|
|
1566
|
+
css: ke,
|
|
1567
|
+
children: /* @__PURE__ */ v(N.Provider, { children: /* @__PURE__ */ v(Q, {
|
|
1524
1568
|
options: e,
|
|
1525
1569
|
children: e.children
|
|
1526
1570
|
}) })
|
|
1527
|
-
}), Ae = ({ blob: e, name: t }) => ({
|
|
1571
|
+
}), Ae = (e) => !!e && typeof e == "object" && "at" in e, je = (e) => !!e && typeof e == "object" && "selection" in e, Me = ({ blob: e, name: t }) => ({
|
|
1528
1572
|
length: e.size,
|
|
1529
1573
|
name: t ?? (e instanceof File ? e.name : void 0),
|
|
1530
1574
|
read: (t, n) => e.slice(t, t + n).arrayBuffer()
|
|
1531
|
-
}),
|
|
1575
|
+
}), Ne = async (e, t) => {
|
|
1532
1576
|
let n = await fetch(e, {
|
|
1533
1577
|
headers: { Range: "bytes=0-1" },
|
|
1534
1578
|
credentials: t
|
|
@@ -1538,8 +1582,8 @@ position: relative;
|
|
|
1538
1582
|
if (!Number.isFinite(i) || i <= 0) throw Error("The source did not report its length");
|
|
1539
1583
|
if (!r && n.status !== 206) throw Error("The source does not support range requests");
|
|
1540
1584
|
return i;
|
|
1541
|
-
},
|
|
1542
|
-
let i = t ?? await
|
|
1585
|
+
}, Pe = async ({ url: e, length: t, name: n, credentials: r }) => {
|
|
1586
|
+
let i = t ?? await Ne(e, r);
|
|
1543
1587
|
return {
|
|
1544
1588
|
length: i,
|
|
1545
1589
|
name: n,
|
|
@@ -1552,9 +1596,9 @@ position: relative;
|
|
|
1552
1596
|
return a.arrayBuffer();
|
|
1553
1597
|
}
|
|
1554
1598
|
};
|
|
1555
|
-
},
|
|
1556
|
-
if ("blob" in e) return
|
|
1557
|
-
if ("url" in e) return
|
|
1599
|
+
}, Fe = async (e) => {
|
|
1600
|
+
if ("blob" in e) return Me(e);
|
|
1601
|
+
if ("url" in e) return Pe(e);
|
|
1558
1602
|
if ("read" in e) return {
|
|
1559
1603
|
length: e.length,
|
|
1560
1604
|
name: e.name,
|
|
@@ -1563,4 +1607,4 @@ position: relative;
|
|
|
1563
1607
|
throw Error(`Unknown source type: ${e}`);
|
|
1564
1608
|
};
|
|
1565
1609
|
//#endregion
|
|
1566
|
-
export { $ as MediaPlayer, $ as default,
|
|
1610
|
+
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 };
|