@lazycatcloud/vue-media-preview 0.1.4 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/video/VideoControls.vue.d.ts +3 -0
- package/dist/components/video/VideoQualityMenu.vue.d.ts +17 -0
- package/dist/core/video/captureVideoFrame.d.ts +3 -1
- package/dist/core/video/frameTransition.d.ts +8 -0
- package/dist/core/video/source/types.d.ts +19 -1
- package/dist/index.d.ts +1 -0
- package/dist/vue-media-preview.cjs +2 -2
- package/dist/vue-media-preview.css +1 -1
- package/dist/vue-media-preview.js +1227 -1056
- package/docs/vue-media-preview.md +11 -1
- package/package.json +1 -1
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import { ref as
|
|
5
|
-
function
|
|
1
|
+
var Qt = Object.defineProperty;
|
|
2
|
+
var Jt = (t, n, r) => n in t ? Qt(t, n, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[n] = r;
|
|
3
|
+
var nt = (t, n, r) => Jt(t, typeof n != "symbol" ? n + "" : n, r);
|
|
4
|
+
import { ref as L, onMounted as qe, watch as te, onBeforeUnmount as Te, shallowRef as it, reactive as mt, computed as V, defineComponent as Le, openBlock as O, createElementBlock as _, createElementVNode as T, normalizeStyle as me, nextTick as Se, Fragment as $e, createBlock as Ue, createCommentVNode as J, withModifiers as ae, unref as p, normalizeClass as De, mergeProps as je, toHandlers as pt, createVNode as ze, renderList as Ye, withKeys as Ze, createTextVNode as Ct, toDisplayString as ue, withDirectives as Lt, vShow as Ft, Teleport as $t, resolveDynamicComponent as en, useAttrs as tn, getCurrentInstance as nn, renderSlot as ct } from "vue";
|
|
5
|
+
function Ne(t, n) {
|
|
6
6
|
return Math.hypot(t.x - n.x, t.y - n.y);
|
|
7
7
|
}
|
|
8
8
|
function yt(t, n) {
|
|
9
9
|
return { x: (t.x + n.x) / 2, y: (t.y + n.y) / 2 };
|
|
10
10
|
}
|
|
11
|
-
function
|
|
11
|
+
function Tt(t, n, r) {
|
|
12
12
|
return Math.hypot(t, n) < 9 ? "pending" : r > 1.01 ? "pan" : Math.abs(t) > Math.abs(n) * 1.1 ? "page" : n > 0 && Math.abs(n) > Math.abs(t) * 1.1 ? "dismiss" : "pending";
|
|
13
13
|
}
|
|
14
|
-
function
|
|
14
|
+
function qt(t, n, r) {
|
|
15
15
|
return t > Math.min(r.width, r.height) * 0.14 || t > 16 && n > 0.35;
|
|
16
16
|
}
|
|
17
|
-
function
|
|
17
|
+
function Bt() {
|
|
18
18
|
let t = { x: 0, y: 0, time: 0 }, n = { x: 0, y: 0 };
|
|
19
19
|
return {
|
|
20
20
|
reset(r, e) {
|
|
@@ -29,7 +29,7 @@ function Ft() {
|
|
|
29
29
|
}
|
|
30
30
|
};
|
|
31
31
|
}
|
|
32
|
-
function
|
|
32
|
+
function an() {
|
|
33
33
|
const t = /* @__PURE__ */ new Map();
|
|
34
34
|
let n = !1;
|
|
35
35
|
function r() {
|
|
@@ -52,7 +52,7 @@ function nn() {
|
|
|
52
52
|
if (a.pointerType === "mouse" && a.button !== 0) return;
|
|
53
53
|
const o = a.target;
|
|
54
54
|
if (o.closest("button, input, a, select")) return;
|
|
55
|
-
const l =
|
|
55
|
+
const l = Bt();
|
|
56
56
|
l.reset({ x: a.clientX, y: a.clientY }, a.timeStamp), t.set(a.pointerId, { down: a, latest: a, target: o, velocity: l }), n || (n = t.size > 1);
|
|
57
57
|
},
|
|
58
58
|
finish(a, o) {
|
|
@@ -61,15 +61,15 @@ function nn() {
|
|
|
61
61
|
return t.delete(a.pointerId), t.size === 0 && r(), !1;
|
|
62
62
|
const l = e();
|
|
63
63
|
if (l.kind === "empty") return !1;
|
|
64
|
-
const u = a.clientX - l.down.clientX,
|
|
65
|
-
return
|
|
64
|
+
const u = a.clientX - l.down.clientX, f = a.clientY - l.down.clientY, c = l.velocity.read(a.timeStamp).y;
|
|
65
|
+
return Tt(u, f, 1) === "dismiss" && qt(f, c, o);
|
|
66
66
|
}
|
|
67
67
|
};
|
|
68
68
|
}
|
|
69
69
|
function Ve(t) {
|
|
70
70
|
return t instanceof Error ? t : new Error(String(t));
|
|
71
71
|
}
|
|
72
|
-
function
|
|
72
|
+
function rn(t) {
|
|
73
73
|
let n = 0, r = () => {
|
|
74
74
|
};
|
|
75
75
|
function e() {
|
|
@@ -90,21 +90,31 @@ function an(t) {
|
|
|
90
90
|
r = l(
|
|
91
91
|
a,
|
|
92
92
|
o,
|
|
93
|
-
(
|
|
94
|
-
u === n && t.error(
|
|
93
|
+
(f) => {
|
|
94
|
+
u === n && t.error(f);
|
|
95
95
|
},
|
|
96
|
-
(
|
|
97
|
-
u === n && t.duration(
|
|
96
|
+
(f) => {
|
|
97
|
+
u === n && t.duration(f);
|
|
98
|
+
},
|
|
99
|
+
(f) => {
|
|
100
|
+
u === n && t.quality(
|
|
101
|
+
f.kind !== "available" ? f : {
|
|
102
|
+
...f,
|
|
103
|
+
select: (c) => {
|
|
104
|
+
u === n && f.select(c);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
);
|
|
98
108
|
}
|
|
99
109
|
);
|
|
100
110
|
}
|
|
101
111
|
};
|
|
102
112
|
}
|
|
103
|
-
const
|
|
113
|
+
const rt = (t, n) => (t.src = n.videoSrc || n.src, () => {
|
|
104
114
|
t.removeAttribute("src"), t.load();
|
|
105
115
|
});
|
|
106
|
-
function
|
|
107
|
-
const a =
|
|
116
|
+
function It(t, n, r, e, i) {
|
|
117
|
+
const a = L(0), o = rn(i);
|
|
108
118
|
let l = () => {
|
|
109
119
|
};
|
|
110
120
|
return qe(() => {
|
|
@@ -119,45 +129,45 @@ function Tt(t, n, r, e, i) {
|
|
|
119
129
|
l(), o.dispose();
|
|
120
130
|
}), () => a.value++;
|
|
121
131
|
}
|
|
122
|
-
function
|
|
132
|
+
function ee(t, n, r) {
|
|
123
133
|
return Math.min(Math.max(t, n), r);
|
|
124
134
|
}
|
|
125
135
|
function wt(t, n = 2) {
|
|
126
136
|
return Number(t.toFixed(n));
|
|
127
137
|
}
|
|
128
|
-
function
|
|
138
|
+
function on(t, n) {
|
|
129
139
|
return t.width <= 0 || t.height <= 0 || n.width <= 0 || n.height <= 0 ? 1 : Math.min(n.width / t.width, n.height / t.height);
|
|
130
140
|
}
|
|
131
141
|
function bt(t) {
|
|
132
142
|
const n = (t % 360 + 360) % 360;
|
|
133
143
|
return n === 90 || n === 180 || n === 270 ? n : 0;
|
|
134
144
|
}
|
|
135
|
-
function
|
|
145
|
+
function ln(t, n) {
|
|
136
146
|
return n === 90 || n === 270 ? { width: t.height, height: t.width } : t;
|
|
137
147
|
}
|
|
138
|
-
function
|
|
148
|
+
function sn(t, n, r) {
|
|
139
149
|
return `translate3d(${wt(t)}px, ${wt(n)}px, 0) scale3d(${r}, ${r}, 1)`;
|
|
140
150
|
}
|
|
141
|
-
function
|
|
151
|
+
function un(t) {
|
|
142
152
|
return 1 - (1 - t) ** 3;
|
|
143
153
|
}
|
|
144
|
-
const
|
|
145
|
-
function
|
|
154
|
+
const cn = 16;
|
|
155
|
+
function dn(t, n) {
|
|
146
156
|
const r = t < 1 ? 1 : n;
|
|
147
157
|
if (t >= 1 && t <= n) return t;
|
|
148
158
|
const e = Math.abs(t - r), i = r * 0.25;
|
|
149
159
|
return r + Math.sign(t - r) * (i * e) / (i + e);
|
|
150
160
|
}
|
|
151
|
-
function
|
|
161
|
+
function fn(t, n) {
|
|
152
162
|
const r = t < 1 ? 1 : n;
|
|
153
163
|
if (t >= 1 && t <= n) return t;
|
|
154
164
|
const e = Math.abs(t - r), i = r * 0.25;
|
|
155
165
|
return r + Math.sign(t - r) * (i * e) / Math.max(Number.EPSILON, i - e);
|
|
156
166
|
}
|
|
157
|
-
function
|
|
167
|
+
function mn(t, n) {
|
|
158
168
|
return t.deltaMode === 1 ? 2 ** (-t.deltaY * 0.05) : t.deltaMode === 2 ? 2 ** -t.deltaY : n || Math.abs(t.deltaY) >= 40 ? 2 ** (-t.deltaY * 2e-3) : Math.exp(-t.deltaY * 8e-3);
|
|
159
169
|
}
|
|
160
|
-
function
|
|
170
|
+
function pn(t, n, r = 650) {
|
|
161
171
|
let e = { kind: "idle" };
|
|
162
172
|
function i() {
|
|
163
173
|
const o = e;
|
|
@@ -174,10 +184,10 @@ function mn(t, n, r = 650) {
|
|
|
174
184
|
return { arm: a, cancel: i };
|
|
175
185
|
}
|
|
176
186
|
function gn(t, n, r) {
|
|
177
|
-
const e =
|
|
187
|
+
const e = ee(t, -n, n);
|
|
178
188
|
return { offsetX: e, pageOffset: r ? t - e : 0 };
|
|
179
189
|
}
|
|
180
|
-
function
|
|
190
|
+
function hn(t = {}) {
|
|
181
191
|
const n = {
|
|
182
192
|
motionActive: () => !1,
|
|
183
193
|
onTap: () => {
|
|
@@ -196,20 +206,20 @@ function pn(t = {}) {
|
|
|
196
206
|
},
|
|
197
207
|
onPageDrag: (d) => {
|
|
198
208
|
},
|
|
199
|
-
onPageRelease: (d,
|
|
209
|
+
onPageRelease: (d, I) => {
|
|
200
210
|
Math.abs(d) < 60 || (d < 0 ? n.onSwipeLeft() : n.onSwipeRight());
|
|
201
211
|
},
|
|
202
212
|
interactive: () => !0,
|
|
203
213
|
zoomable: () => !0,
|
|
204
214
|
doubleTapZoom: () => 2.5,
|
|
205
|
-
zoomLimit: () =>
|
|
215
|
+
zoomLimit: () => cn,
|
|
206
216
|
holdable: () => !1,
|
|
207
217
|
onHoldStart: () => {
|
|
208
218
|
},
|
|
209
219
|
onHoldEnd: () => {
|
|
210
220
|
},
|
|
211
221
|
...t
|
|
212
|
-
}, r =
|
|
222
|
+
}, r = L(), e = L(), i = it(), a = L({ width: 1, height: 1 }), o = L({ width: 1, height: 1 }), l = mt({
|
|
213
223
|
level: 1,
|
|
214
224
|
offsetX: 0,
|
|
215
225
|
offsetY: 0,
|
|
@@ -219,205 +229,205 @@ function pn(t = {}) {
|
|
|
219
229
|
downOffsetX: 0,
|
|
220
230
|
downOffsetY: 0,
|
|
221
231
|
downScale: 1
|
|
222
|
-
}), u = V(() =>
|
|
232
|
+
}), u = V(() => ln(o.value, l.rotation)), f = V(() => on(u.value, a.value)), c = V(() => f.value * l.level), P = V(() => ({
|
|
223
233
|
width: u.value.width * c.value,
|
|
224
234
|
height: u.value.height * c.value
|
|
225
|
-
})),
|
|
226
|
-
transform:
|
|
227
|
-
})),
|
|
228
|
-
() =>
|
|
235
|
+
})), x = V(() => ({
|
|
236
|
+
transform: sn(l.downOffsetX, l.downOffsetY, l.downScale)
|
|
237
|
+
})), y = /* @__PURE__ */ new Set(), R = L(!1), w = L(!1), g = L(!1), M = V(
|
|
238
|
+
() => R.value || w.value || g.value || n.motionActive()
|
|
229
239
|
);
|
|
230
|
-
let
|
|
231
|
-
}, 0),
|
|
232
|
-
const
|
|
233
|
-
let
|
|
234
|
-
const
|
|
235
|
-
let be = 0,
|
|
236
|
-
const
|
|
240
|
+
let D, h = 0, b = 0, m = setTimeout(() => {
|
|
241
|
+
}, 0), k = -1e3, C = { x: 0, y: 0 }, B = !1, $ = "idle", z = !0, F = !1, v = 0;
|
|
242
|
+
const q = /* @__PURE__ */ new Map();
|
|
243
|
+
let U = { x: 0, y: 0 };
|
|
244
|
+
const G = Bt();
|
|
245
|
+
let be = 0, ie = { left: 0, top: 0 }, pe = 1, le = 1, Pe = { x: 0, y: 0 }, ne = he();
|
|
246
|
+
const A = pn(
|
|
237
247
|
() => {
|
|
238
|
-
|
|
248
|
+
$ = "hold", clearTimeout(m), k = -1e3, n.onHoldStart();
|
|
239
249
|
},
|
|
240
250
|
() => n.onHoldEnd()
|
|
241
|
-
),
|
|
242
|
-
for (const
|
|
243
|
-
}),
|
|
244
|
-
(d.key === "Control" || d.key === "Meta") &&
|
|
245
|
-
},
|
|
246
|
-
|
|
251
|
+
), Y = new ResizeObserver((d) => {
|
|
252
|
+
for (const I of d) de(I.contentRect);
|
|
253
|
+
}), H = /* @__PURE__ */ new Set(), Ae = (d) => {
|
|
254
|
+
(d.key === "Control" || d.key === "Meta") && H.add(d.key);
|
|
255
|
+
}, Je = (d) => H.delete(d.key), re = () => {
|
|
256
|
+
A.cancel(), H.clear();
|
|
247
257
|
}, ge = () => {
|
|
248
|
-
document.hidden &&
|
|
258
|
+
document.hidden && A.cancel();
|
|
249
259
|
};
|
|
250
260
|
qe(() => {
|
|
251
|
-
|
|
261
|
+
Y.observe(r.value), de(r.value.getBoundingClientRect()), window.addEventListener("keydown", Ae), window.addEventListener("keyup", Je), window.addEventListener("blur", re), document.addEventListener("visibilitychange", ge);
|
|
252
262
|
}), Te(() => {
|
|
253
|
-
|
|
263
|
+
B = !0, A.cancel(), window.removeEventListener("keydown", Ae), window.removeEventListener("keyup", Je), window.removeEventListener("blur", re), document.removeEventListener("visibilitychange", ge), Y.disconnect(), cancelAnimationFrame(h), cancelAnimationFrame(b), clearTimeout(m), clearTimeout(D);
|
|
254
264
|
});
|
|
255
265
|
function de(d) {
|
|
256
|
-
a.value = { width: d.width, height: d.height }, Object.assign(l,
|
|
266
|
+
a.value = { width: d.width, height: d.height }, Object.assign(l, K(l.offsetX, l.offsetY, l.level)), ke();
|
|
257
267
|
}
|
|
258
268
|
function ke() {
|
|
259
|
-
|
|
260
|
-
h = 0,
|
|
269
|
+
B || h || (h = requestAnimationFrame(() => {
|
|
270
|
+
h = 0, y.forEach((d) => d());
|
|
261
271
|
}));
|
|
262
272
|
}
|
|
263
|
-
function
|
|
273
|
+
function he() {
|
|
264
274
|
return { level: l.level, offsetX: l.offsetX, offsetY: l.offsetY };
|
|
265
275
|
}
|
|
266
|
-
function
|
|
276
|
+
function K(d, I, X) {
|
|
267
277
|
const j = Math.max(
|
|
268
278
|
0,
|
|
269
|
-
(u.value.width *
|
|
270
|
-
),
|
|
279
|
+
(u.value.width * f.value * X - a.value.width) / 2
|
|
280
|
+
), Z = Math.max(
|
|
271
281
|
0,
|
|
272
|
-
(u.value.height *
|
|
282
|
+
(u.value.height * f.value * X - a.value.height) / 2
|
|
273
283
|
);
|
|
274
|
-
return { offsetX:
|
|
284
|
+
return { offsetX: ee(d, -j, j), offsetY: ee(I, -Z, Z) };
|
|
275
285
|
}
|
|
276
286
|
function xe(d) {
|
|
277
287
|
Object.assign(l, d), n.onScale(l.level), ke();
|
|
278
288
|
}
|
|
279
|
-
function se(d,
|
|
280
|
-
cancelAnimationFrame(
|
|
281
|
-
const X =
|
|
282
|
-
const Me =
|
|
289
|
+
function se(d, I = 250) {
|
|
290
|
+
cancelAnimationFrame(b), R.value = !0;
|
|
291
|
+
const X = he(), j = performance.now(), Z = matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : I, Q = (we) => {
|
|
292
|
+
const Me = Z === 0 ? 1 : ee((we - j) / Z, 0, 1), Fe = un(Me);
|
|
283
293
|
xe({
|
|
284
|
-
level: X.level + (d.level - X.level) *
|
|
285
|
-
offsetX: X.offsetX + (d.offsetX - X.offsetX) *
|
|
286
|
-
offsetY: X.offsetY + (d.offsetY - X.offsetY) *
|
|
287
|
-
}), Me < 1 ?
|
|
294
|
+
level: X.level + (d.level - X.level) * Fe,
|
|
295
|
+
offsetX: X.offsetX + (d.offsetX - X.offsetX) * Fe,
|
|
296
|
+
offsetY: X.offsetY + (d.offsetY - X.offsetY) * Fe
|
|
297
|
+
}), Me < 1 ? b = requestAnimationFrame(Q) : R.value = !1;
|
|
288
298
|
};
|
|
289
|
-
|
|
299
|
+
b = requestAnimationFrame(Q);
|
|
290
300
|
}
|
|
291
301
|
function fe() {
|
|
292
302
|
return { x: a.value.width / 2, y: a.value.height / 2 };
|
|
293
303
|
}
|
|
294
|
-
function
|
|
304
|
+
function ve(d, I = fe(), X = !1) {
|
|
295
305
|
if (!n.zoomable()) return;
|
|
296
|
-
cancelAnimationFrame(
|
|
297
|
-
const j =
|
|
298
|
-
|
|
299
|
-
|
|
306
|
+
cancelAnimationFrame(b), R.value = !1;
|
|
307
|
+
const j = ee(d, 1, n.zoomLimit()), Z = j / l.level, Q = fe(), we = K(
|
|
308
|
+
I.x - Q.x - (I.x - Q.x - l.offsetX) * Z,
|
|
309
|
+
I.y - Q.y - (I.y - Q.y - l.offsetY) * Z,
|
|
300
310
|
j
|
|
301
|
-
), Me = { level: j, ...
|
|
311
|
+
), Me = { level: j, ...we };
|
|
302
312
|
X ? se(Me) : xe(Me);
|
|
303
313
|
}
|
|
304
|
-
function
|
|
314
|
+
function Ee() {
|
|
305
315
|
l.draggingDown = !1, l.downOffsetX = 0, l.downOffsetY = 0, l.downScale = 1, n.onSwipeDownProgress(0);
|
|
306
316
|
}
|
|
307
|
-
function
|
|
308
|
-
d && (cancelAnimationFrame(
|
|
317
|
+
function ye(d = !1) {
|
|
318
|
+
d && (cancelAnimationFrame(b), R.value = !1), A.cancel(), q.clear(), w.value = !1, g.value = !1, clearTimeout(D), $ = "idle", v = 0, l.zooming = !1, d || (Ee(), n.onPageDrag(0)), clearTimeout(m), k = -1e3;
|
|
309
319
|
}
|
|
310
320
|
function Be(d = 0) {
|
|
311
|
-
cancelAnimationFrame(
|
|
312
|
-
const
|
|
313
|
-
d > 0 && (l.level !== 1 || l.offsetX !== 0 || l.offsetY !== 0) ? se(
|
|
321
|
+
cancelAnimationFrame(b), R.value = !1, ye();
|
|
322
|
+
const I = { level: 1, offsetX: 0, offsetY: 0 };
|
|
323
|
+
d > 0 && (l.level !== 1 || l.offsetX !== 0 || l.offsetY !== 0) ? se(I, d) : xe(I);
|
|
314
324
|
}
|
|
315
|
-
function
|
|
316
|
-
return { x: d.clientX -
|
|
325
|
+
function Re(d, I = ie) {
|
|
326
|
+
return { x: d.clientX - I.left, y: d.clientY - I.top };
|
|
317
327
|
}
|
|
318
|
-
function
|
|
319
|
-
|
|
320
|
-
const [d,
|
|
321
|
-
|
|
328
|
+
function Ie() {
|
|
329
|
+
A.cancel(), z = !1, F = !1, v = 0;
|
|
330
|
+
const [d, I] = [...q.values()];
|
|
331
|
+
pe = fn(l.level, n.zoomLimit()), le = Math.max(1, Ne(d, I)), Pe = yt(d, I), ne = he(), $ = "pinch", l.zooming = !0, Ee(), n.onPageDrag(0), clearTimeout(m), k = -1e3;
|
|
322
332
|
}
|
|
323
|
-
function
|
|
333
|
+
function Oe(d, I = r.value.getBoundingClientRect(), X = d.target) {
|
|
324
334
|
if (!n.interactive() || d.pointerType === "mouse" && d.button !== 0 || X.closest("button, input, a, select") || X instanceof HTMLVideoElement && X.controls && d.clientY > X.getBoundingClientRect().bottom - 48)
|
|
325
335
|
return !1;
|
|
326
|
-
if (cancelAnimationFrame(
|
|
327
|
-
return
|
|
328
|
-
|
|
329
|
-
const j =
|
|
330
|
-
return n.holdable() && Math.abs(
|
|
331
|
-
}
|
|
332
|
-
function
|
|
333
|
-
if (!
|
|
334
|
-
const
|
|
335
|
-
if (
|
|
336
|
+
if (cancelAnimationFrame(b), R.value = !1, w.value = !0, q.size === 0 && (ie = I), q.set(d.pointerId, Re(d)), r.value.setPointerCapture(d.pointerId), q.size >= 2)
|
|
337
|
+
return Ie(), !0;
|
|
338
|
+
U = Re(d), be = performance.now(), G.reset(U, d.timeStamp), ne = he(), $ = "pending", z = !0, F = !1, v = 0;
|
|
339
|
+
const j = P.value.width / 2, Z = P.value.height / 2, Q = fe();
|
|
340
|
+
return n.holdable() && Math.abs(U.x - Q.x - l.offsetX) <= j && Math.abs(U.y - Q.y - l.offsetY) <= Z && (clearTimeout(m), A.arm()), !0;
|
|
341
|
+
}
|
|
342
|
+
function ot(d) {
|
|
343
|
+
if (!q.has(d.pointerId)) return;
|
|
344
|
+
const I = Re(d);
|
|
345
|
+
if (q.set(d.pointerId, I), $ === "pinch" && q.size >= 2) {
|
|
336
346
|
if (!n.zoomable()) return;
|
|
337
|
-
const [
|
|
338
|
-
|
|
339
|
-
const
|
|
347
|
+
const [Z, Q] = [...q.values()], we = fe(), Me = yt(Z, Q);
|
|
348
|
+
pe *= Math.max(1, Ne(Z, Q)) / le;
|
|
349
|
+
const Fe = dn(pe, n.zoomLimit()), et = Fe / ne.level;
|
|
340
350
|
xe({
|
|
341
|
-
level:
|
|
342
|
-
...
|
|
343
|
-
Me.x -
|
|
344
|
-
Me.y -
|
|
345
|
-
|
|
351
|
+
level: Fe,
|
|
352
|
+
...K(
|
|
353
|
+
Me.x - we.x - (Pe.x - we.x - ne.offsetX) * et,
|
|
354
|
+
Me.y - we.y - (Pe.y - we.y - ne.offsetY) * et,
|
|
355
|
+
Fe
|
|
346
356
|
)
|
|
347
|
-
}),
|
|
357
|
+
}), ne = he(), le = Math.max(1, Ne(Z, Q)), Pe = Me, d.preventDefault();
|
|
348
358
|
return;
|
|
349
359
|
}
|
|
350
|
-
if (
|
|
351
|
-
const X =
|
|
352
|
-
if (
|
|
360
|
+
if ($ === "idle") return;
|
|
361
|
+
const X = I.x - U.x, j = I.y - U.y;
|
|
362
|
+
if ($ === "hold") {
|
|
353
363
|
if (d.preventDefault(), Math.hypot(X, j) < 9) return;
|
|
354
|
-
|
|
364
|
+
A.cancel(), $ = "pending";
|
|
355
365
|
}
|
|
356
|
-
if (Math.hypot(X, j) >= 9 &&
|
|
357
|
-
if (clearTimeout(m),
|
|
358
|
-
const
|
|
359
|
-
xe({ level: l.level, ...
|
|
360
|
-
} else
|
|
366
|
+
if (Math.hypot(X, j) >= 9 && A.cancel(), G.move(I, d.timeStamp), $ === "pending" && ($ = Tt(X, j, l.level), F = $ === "pan" && z && Math.abs(X) > Math.abs(j) * 1.1), $ !== "pending")
|
|
367
|
+
if (clearTimeout(m), k = -1e3, d.preventDefault(), $ === "pan") {
|
|
368
|
+
const Z = Math.max(0, (P.value.width - a.value.width) / 2), Q = gn(ne.offsetX + X, Z, F);
|
|
369
|
+
xe({ level: l.level, ...K(Q.offsetX, ne.offsetY + j, l.level) }), Q.pageOffset !== v && (v = Q.pageOffset, n.onPageDrag(v));
|
|
370
|
+
} else $ === "page" ? n.onPageDrag(X) : $ === "dismiss" && (l.draggingDown = !0, l.downOffsetX = X * 0.65, l.downOffsetY = Math.max(0, j), l.downScale = ee(1 - Math.max(0, j) / a.value.height * 0.6, 0.65, 1), n.onSwipeDownProgress(ee(j / (a.value.height * 0.55), 0, 0.85)));
|
|
361
371
|
}
|
|
362
|
-
function
|
|
363
|
-
if (!
|
|
364
|
-
if (
|
|
365
|
-
|
|
372
|
+
function lt(d) {
|
|
373
|
+
if (!q.has(d.pointerId)) return;
|
|
374
|
+
if (A.cancel(), q.delete(d.pointerId), w.value = q.size > 0, $ === "pinch") {
|
|
375
|
+
q.size > 0 ? (U = [...q.values()][0], ne = he(), $ = "pan") : ($ = "idle", l.zooming = !1, ve(Math.max(1, l.level), fe(), !0));
|
|
366
376
|
return;
|
|
367
377
|
}
|
|
368
|
-
if (
|
|
369
|
-
const
|
|
370
|
-
|
|
371
|
-
}
|
|
372
|
-
function lt(d) {
|
|
373
|
-
if (!A.has(d.pointerId)) return;
|
|
374
|
-
const z = R === "page" || R === "pan" && D !== 0;
|
|
375
|
-
ve(), z && n.onPageRelease(0, 0), (l.level < 1 || l.level > n.zoomLimit()) && he(l.level, fe(), !0);
|
|
378
|
+
if (q.size > 0) return;
|
|
379
|
+
const I = Re(d), X = I.x - U.x, j = I.y - U.y, Z = G.read(d.timeStamp);
|
|
380
|
+
$ === "page" || $ === "pan" && v !== 0 ? n.onPageRelease($ === "page" ? X : v, Z.x) : $ === "dismiss" ? qt(j, Z.y, a.value) ? n.onSwipeDownClose() : Ee() : $ === "pending" && performance.now() - be < 300 && Ne(U, I) < 9 ? ut(I) : (l.level < 1 || l.level > n.zoomLimit()) && ve(l.level, fe(), !0), l.zooming = !1, $ = "idle";
|
|
376
381
|
}
|
|
377
382
|
function st(d) {
|
|
378
|
-
|
|
379
|
-
|
|
383
|
+
if (!q.has(d.pointerId)) return;
|
|
384
|
+
const I = $ === "page" || $ === "pan" && v !== 0;
|
|
385
|
+
ye(), I && n.onPageRelease(0, 0), (l.level < 1 || l.level > n.zoomLimit()) && ve(l.level, fe(), !0);
|
|
380
386
|
}
|
|
381
|
-
function
|
|
387
|
+
function ut(d) {
|
|
388
|
+
const I = performance.now();
|
|
389
|
+
I - k < 280 && Ne(d, C) < 36 ? (clearTimeout(m), k = -1e3, n.onDoubleTap(), ve(l.level > 1.01 ? 1 : n.doubleTapZoom(), d, !0)) : (k = I, C = d, m = setTimeout(n.onTap, 280));
|
|
390
|
+
}
|
|
391
|
+
function N(d) {
|
|
382
392
|
if (n.interactive()) {
|
|
383
|
-
if (
|
|
393
|
+
if (A.cancel(), g.value = !0, clearTimeout(D), D = setTimeout(() => {
|
|
384
394
|
g.value = !1;
|
|
385
395
|
}, 120), d.ctrlKey || d.metaKey)
|
|
386
|
-
d.preventDefault(),
|
|
387
|
-
l.level *
|
|
388
|
-
|
|
396
|
+
d.preventDefault(), ve(
|
|
397
|
+
l.level * mn(d, H.size > 0),
|
|
398
|
+
Re(d, r.value.getBoundingClientRect())
|
|
389
399
|
);
|
|
390
400
|
else if (l.level > 1) {
|
|
391
401
|
d.preventDefault();
|
|
392
|
-
const
|
|
402
|
+
const I = d.deltaMode === 1 ? 16 : 1;
|
|
393
403
|
xe({
|
|
394
404
|
level: l.level,
|
|
395
|
-
...
|
|
396
|
-
l.offsetX - d.deltaX *
|
|
397
|
-
l.offsetY - d.deltaY *
|
|
405
|
+
...K(
|
|
406
|
+
l.offsetX - d.deltaX * I,
|
|
407
|
+
l.offsetY - d.deltaY * I,
|
|
398
408
|
l.level
|
|
399
409
|
)
|
|
400
410
|
});
|
|
401
411
|
}
|
|
402
412
|
}
|
|
403
413
|
}
|
|
404
|
-
const
|
|
414
|
+
const He = {
|
|
405
415
|
state: l,
|
|
406
|
-
motionActive:
|
|
416
|
+
motionActive: M,
|
|
407
417
|
containerRef: r,
|
|
408
418
|
canvasRef: e,
|
|
409
419
|
mediaRef: i,
|
|
410
420
|
viewportSize: a,
|
|
411
421
|
mediaSize: o,
|
|
412
422
|
visualMediaSize: u,
|
|
413
|
-
displaySize:
|
|
423
|
+
displaySize: P,
|
|
414
424
|
displayScale: c,
|
|
415
|
-
downDragStyle:
|
|
425
|
+
downDragStyle: x,
|
|
416
426
|
requestRender: ke,
|
|
417
|
-
renderNow: () =>
|
|
418
|
-
zoomTo:
|
|
427
|
+
renderNow: () => y.forEach((d) => d()),
|
|
428
|
+
zoomTo: ve,
|
|
419
429
|
resetTransform: Be,
|
|
420
|
-
cancelGesture:
|
|
430
|
+
cancelGesture: ye,
|
|
421
431
|
setMediaElement(d) {
|
|
422
432
|
i.value = d, d instanceof HTMLVideoElement && ke();
|
|
423
433
|
},
|
|
@@ -428,28 +438,28 @@ function pn(t = {}) {
|
|
|
428
438
|
i.value = void 0;
|
|
429
439
|
},
|
|
430
440
|
registerRenderHandler(d) {
|
|
431
|
-
return
|
|
441
|
+
return y.add(d), () => y.delete(d);
|
|
432
442
|
},
|
|
433
|
-
setRotation(d,
|
|
434
|
-
l.rotation = bt(d),
|
|
443
|
+
setRotation(d, I = !0) {
|
|
444
|
+
l.rotation = bt(d), I && Be(), ke();
|
|
435
445
|
},
|
|
436
446
|
rotateBy(d = 90) {
|
|
437
|
-
|
|
447
|
+
He.setRotation(bt(l.rotation + d));
|
|
438
448
|
}
|
|
439
449
|
};
|
|
440
|
-
return { core:
|
|
450
|
+
return { core: He, onPointerDown: Oe, onPointerMove: ot, onPointerUp: lt, onPointerCancel: st, onWheel: N };
|
|
441
451
|
}
|
|
442
|
-
function
|
|
443
|
-
const n = t.rotation * Math.PI / 180, r = Math.round(Math.cos(n)), e = Math.round(Math.sin(n)), i = t.size.width / 2 - r * t.offsetX - e * t.offsetY, a = t.size.height / 2 + e * t.offsetX - r * t.offsetY, o = (Math.abs(r) * t.viewport.width + Math.abs(e) * t.viewport.height) / 2, l = (Math.abs(e) * t.viewport.width + Math.abs(r) * t.viewport.height) / 2, u =
|
|
452
|
+
function vn(t) {
|
|
453
|
+
const n = t.rotation * Math.PI / 180, r = Math.round(Math.cos(n)), e = Math.round(Math.sin(n)), i = t.size.width / 2 - r * t.offsetX - e * t.offsetY, a = t.size.height / 2 + e * t.offsetX - r * t.offsetY, o = (Math.abs(r) * t.viewport.width + Math.abs(e) * t.viewport.height) / 2, l = (Math.abs(e) * t.viewport.width + Math.abs(r) * t.viewport.height) / 2, u = ee(i - o, 0, t.size.width), f = ee(a - l, 0, t.size.height);
|
|
444
454
|
return {
|
|
445
455
|
x: u,
|
|
446
|
-
y:
|
|
447
|
-
width:
|
|
448
|
-
height:
|
|
456
|
+
y: f,
|
|
457
|
+
width: ee(i + o, 0, t.size.width) - u,
|
|
458
|
+
height: ee(a + l, 0, t.size.height) - f
|
|
449
459
|
};
|
|
450
460
|
}
|
|
451
|
-
function
|
|
452
|
-
const i =
|
|
461
|
+
function yn(t, n, r, e) {
|
|
462
|
+
const i = vn(r);
|
|
453
463
|
if (i.width <= 0 || i.height <= 0) return;
|
|
454
464
|
t.imageSmoothingEnabled = !0, t.imageSmoothingQuality = e ? "low" : "high", t.translate(
|
|
455
465
|
r.viewport.width / 2 + r.offsetX,
|
|
@@ -472,7 +482,7 @@ function vn(t, n, r, e) {
|
|
|
472
482
|
i.height
|
|
473
483
|
);
|
|
474
484
|
}
|
|
475
|
-
const
|
|
485
|
+
const wn = { class: "mp-dom-renderer mp-gif-renderer" }, bn = ["src", "alt"], kn = /* @__PURE__ */ Le({
|
|
476
486
|
__name: "AnimatedImageLayer",
|
|
477
487
|
props: {
|
|
478
488
|
core: {},
|
|
@@ -488,23 +498,23 @@ const yn = { class: "mp-dom-renderer mp-gif-renderer" }, wn = ["src", "alt"], bn
|
|
|
488
498
|
transform: `rotate(${n.core.state.rotation}deg)`,
|
|
489
499
|
pointerEvents: "none"
|
|
490
500
|
}));
|
|
491
|
-
return (i, a) => (
|
|
501
|
+
return (i, a) => (O(), _("div", wn, [
|
|
492
502
|
T("div", {
|
|
493
503
|
class: "mp-dom-renderer__frame",
|
|
494
|
-
style:
|
|
504
|
+
style: me(r.value)
|
|
495
505
|
}, [
|
|
496
506
|
T("img", {
|
|
497
507
|
src: i.src,
|
|
498
508
|
alt: i.title,
|
|
499
509
|
draggable: !1,
|
|
500
510
|
class: "mp-dom-renderer__node",
|
|
501
|
-
style:
|
|
502
|
-
}, null, 12,
|
|
511
|
+
style: me(e.value)
|
|
512
|
+
}, null, 12, bn)
|
|
503
513
|
], 4)
|
|
504
514
|
]));
|
|
505
515
|
}
|
|
506
516
|
});
|
|
507
|
-
function
|
|
517
|
+
function xn() {
|
|
508
518
|
const t = /* @__PURE__ */ new Set();
|
|
509
519
|
let n = [];
|
|
510
520
|
const r = /* @__PURE__ */ new Map();
|
|
@@ -541,7 +551,7 @@ function kn() {
|
|
|
541
551
|
}
|
|
542
552
|
};
|
|
543
553
|
}
|
|
544
|
-
const
|
|
554
|
+
const ce = {
|
|
545
555
|
maxDecodedPixels: 64e6,
|
|
546
556
|
maxCanvasPixels: 6e6,
|
|
547
557
|
maxDevicePixelRatio: 2.5,
|
|
@@ -551,25 +561,25 @@ const ue = {
|
|
|
551
561
|
cacheEntries: 24,
|
|
552
562
|
concurrency: 3
|
|
553
563
|
};
|
|
554
|
-
class
|
|
564
|
+
class Ge extends Error {
|
|
555
565
|
constructor(n) {
|
|
556
566
|
super(n), this.name = "ImageLimitError";
|
|
557
567
|
}
|
|
558
568
|
}
|
|
559
|
-
function
|
|
569
|
+
function zt(t, n) {
|
|
560
570
|
if (t.naturalWidth * t.naturalHeight > n)
|
|
561
|
-
throw new
|
|
571
|
+
throw new Ge("图片像素超过解码保护限制,请提供较小的适屏资源");
|
|
562
572
|
}
|
|
563
|
-
const
|
|
564
|
-
function
|
|
565
|
-
return t instanceof
|
|
573
|
+
const dt = "原图超过资源限制";
|
|
574
|
+
function Mn(t) {
|
|
575
|
+
return t instanceof Ge ? { status: "blocked", reason: dt } : {
|
|
566
576
|
status: "error",
|
|
567
577
|
reason: t instanceof Error ? t.message : "原图加载失败,可重试"
|
|
568
578
|
};
|
|
569
579
|
}
|
|
570
|
-
const
|
|
571
|
-
`, kt = typeof self < "u" && self.Blob && new Blob([
|
|
572
|
-
function
|
|
580
|
+
const Dt = `(function(){"use strict";self.onmessage=async({data:a})=>{try{const t=await createImageBitmap(a.blob);let e=t;try{const s=Math.min(1,Math.sqrt(a.maxMotionPixels/(t.width*t.height)));s<1&&(e=await createImageBitmap(t,{resizeWidth:Math.max(1,Math.floor(t.width*s)),resizeHeight:Math.max(1,Math.floor(t.height*s)),resizeQuality:"high"}));const r=e===t?[t]:[t,e];self.postMessage({status:"ready",full:t,motion:e},{transfer:r})}catch(s){throw e!==t&&e.close(),t.close(),s}}catch(t){self.postMessage({status:"error",message:t instanceof Error?t.message:"图片位图准备失败"})}}})();
|
|
581
|
+
`, kt = typeof self < "u" && self.Blob && new Blob([Dt], { type: "text/javascript;charset=utf-8" });
|
|
582
|
+
function Sn(t) {
|
|
573
583
|
let n;
|
|
574
584
|
try {
|
|
575
585
|
if (n = kt && (self.URL || self.webkitURL).createObjectURL(kt), !n) throw "";
|
|
@@ -581,7 +591,7 @@ function Mn(t) {
|
|
|
581
591
|
}), r;
|
|
582
592
|
} catch {
|
|
583
593
|
return new Worker(
|
|
584
|
-
"data:text/javascript;charset=utf-8," + encodeURIComponent(
|
|
594
|
+
"data:text/javascript;charset=utf-8," + encodeURIComponent(Dt),
|
|
585
595
|
{
|
|
586
596
|
name: t == null ? void 0 : t.name
|
|
587
597
|
}
|
|
@@ -590,12 +600,12 @@ function Mn(t) {
|
|
|
590
600
|
n && (self.URL || self.webkitURL).revokeObjectURL(n);
|
|
591
601
|
}
|
|
592
602
|
}
|
|
593
|
-
function
|
|
603
|
+
function ft({ full: t, motion: n }) {
|
|
594
604
|
n !== t && n.close(), t.close();
|
|
595
605
|
}
|
|
596
|
-
function
|
|
606
|
+
function Pn(t, n, r) {
|
|
597
607
|
return r.throwIfAborted(), new Promise((e, i) => {
|
|
598
|
-
const a = new
|
|
608
|
+
const a = new Sn(), o = () => {
|
|
599
609
|
r.removeEventListener("abort", l), a.terminate();
|
|
600
610
|
}, l = () => {
|
|
601
611
|
o(), i(r.reason);
|
|
@@ -606,7 +616,7 @@ function Sn(t, n, r) {
|
|
|
606
616
|
return;
|
|
607
617
|
}
|
|
608
618
|
if (r.aborted) {
|
|
609
|
-
|
|
619
|
+
ft(u), i(r.reason);
|
|
610
620
|
return;
|
|
611
621
|
}
|
|
612
622
|
e(u);
|
|
@@ -620,7 +630,7 @@ function Sn(t, n, r) {
|
|
|
620
630
|
}
|
|
621
631
|
});
|
|
622
632
|
}
|
|
623
|
-
function
|
|
633
|
+
function En(t) {
|
|
624
634
|
return t[0] === 71 && t[1] === 73 && t[2] === 70 && t[3] === 56 && (t[4] === 55 || t[4] === 57) && t[5] === 97;
|
|
625
635
|
}
|
|
626
636
|
async function Rn(t, n, r) {
|
|
@@ -635,7 +645,7 @@ async function Rn(t, n, r) {
|
|
|
635
645
|
dispose: () => URL.revokeObjectURL(e)
|
|
636
646
|
};
|
|
637
647
|
}
|
|
638
|
-
function
|
|
648
|
+
function At(t) {
|
|
639
649
|
return {
|
|
640
650
|
image: t,
|
|
641
651
|
source: t,
|
|
@@ -645,12 +655,12 @@ function It(t) {
|
|
|
645
655
|
}
|
|
646
656
|
};
|
|
647
657
|
}
|
|
648
|
-
async function
|
|
658
|
+
async function Cn(t, n, r) {
|
|
649
659
|
const e = new Uint8Array(await n.slice(0, 6).arrayBuffer());
|
|
650
|
-
if (r.throwIfAborted(),
|
|
660
|
+
if (r.throwIfAborted(), En(e)) return Rn(t, n, r);
|
|
651
661
|
if (!(e[0] === 255 && e[1] === 216 && e[2] === 255))
|
|
652
|
-
return await t.decode(), r.throwIfAborted(),
|
|
653
|
-
const i = await
|
|
662
|
+
return await t.decode(), r.throwIfAborted(), At(t);
|
|
663
|
+
const i = await Pn(n, ce.maxCanvasPixels, r);
|
|
654
664
|
try {
|
|
655
665
|
r.throwIfAborted();
|
|
656
666
|
const { full: a, motion: o } = i, l = o === a ? 0 : o.width * o.height * 4;
|
|
@@ -660,17 +670,17 @@ async function En(t, n, r) {
|
|
|
660
670
|
motionSource: o,
|
|
661
671
|
// Include the DOM image and both retained pixel sizes in the cache budget.
|
|
662
672
|
bytes: (t.naturalWidth * t.naturalHeight + a.width * a.height) * 4 + l,
|
|
663
|
-
dispose: () =>
|
|
673
|
+
dispose: () => ft(i)
|
|
664
674
|
};
|
|
665
675
|
} catch (a) {
|
|
666
|
-
throw
|
|
676
|
+
throw ft(i), a;
|
|
667
677
|
}
|
|
668
678
|
}
|
|
669
|
-
const
|
|
679
|
+
const Ln = async (t, n) => {
|
|
670
680
|
const r = await fetch(t, { signal: n.signal, credentials: "same-origin" });
|
|
671
681
|
if (!r.ok) throw new Error(`图片加载失败:HTTP ${r.status}`);
|
|
672
682
|
if (Number(r.headers.get("content-length")) > n.maxBytes)
|
|
673
|
-
throw await r.body.cancel(), new
|
|
683
|
+
throw await r.body.cancel(), new Ge("资源超过下载保护限制,请使用适屏图或下载原文件");
|
|
674
684
|
const i = r.body.getReader(), a = [];
|
|
675
685
|
let o = 0;
|
|
676
686
|
try {
|
|
@@ -678,7 +688,7 @@ const Cn = async (t, n) => {
|
|
|
678
688
|
const c = await i.read();
|
|
679
689
|
if (c.done) break;
|
|
680
690
|
if (o += c.value.byteLength, o > n.maxBytes)
|
|
681
|
-
throw new
|
|
691
|
+
throw new Ge("资源超过下载保护限制,请使用适屏图或下载原文件");
|
|
682
692
|
a.push(new Uint8Array(c.value));
|
|
683
693
|
}
|
|
684
694
|
} catch (c) {
|
|
@@ -687,28 +697,28 @@ const Cn = async (t, n) => {
|
|
|
687
697
|
i.releaseLock();
|
|
688
698
|
}
|
|
689
699
|
n.signal.throwIfAborted();
|
|
690
|
-
const l = new Blob(a, { type: r.headers.get("content-type") }), u = URL.createObjectURL(l),
|
|
691
|
-
|
|
700
|
+
const l = new Blob(a, { type: r.headers.get("content-type") }), u = URL.createObjectURL(l), f = new Image();
|
|
701
|
+
f.decoding = "async";
|
|
692
702
|
try {
|
|
693
|
-
return await new Promise((c,
|
|
694
|
-
const
|
|
695
|
-
|
|
703
|
+
return await new Promise((c, P) => {
|
|
704
|
+
const x = () => {
|
|
705
|
+
f.removeAttribute("src"), P(new DOMException("请求已取消", "AbortError"));
|
|
696
706
|
};
|
|
697
|
-
|
|
698
|
-
n.signal.removeEventListener("abort",
|
|
699
|
-
},
|
|
700
|
-
n.signal.removeEventListener("abort",
|
|
701
|
-
}, n.signal.addEventListener("abort",
|
|
702
|
-
}), n.signal.throwIfAborted(),
|
|
707
|
+
f.onload = () => {
|
|
708
|
+
n.signal.removeEventListener("abort", x), c();
|
|
709
|
+
}, f.onerror = () => {
|
|
710
|
+
n.signal.removeEventListener("abort", x), P(new Error("图片解码失败或格式不受支持"));
|
|
711
|
+
}, n.signal.addEventListener("abort", x, { once: !0 }), f.src = u;
|
|
712
|
+
}), n.signal.throwIfAborted(), zt(f, n.maxPixels), await Cn(f, l, n.signal);
|
|
703
713
|
} finally {
|
|
704
714
|
URL.revokeObjectURL(u);
|
|
705
715
|
}
|
|
706
716
|
};
|
|
707
|
-
class
|
|
708
|
-
constructor(n =
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
717
|
+
class Fn {
|
|
718
|
+
constructor(n = ce.cacheBytes, r = ce.concurrency, e = Ln) {
|
|
719
|
+
nt(this, "entries", /* @__PURE__ */ new Map());
|
|
720
|
+
nt(this, "active", 0);
|
|
721
|
+
nt(this, "cancelled", 0);
|
|
712
722
|
this.budget = n, this.concurrency = r, this.loader = e;
|
|
713
723
|
}
|
|
714
724
|
get stats() {
|
|
@@ -723,20 +733,20 @@ class Ln {
|
|
|
723
733
|
acquire(n, r = {}) {
|
|
724
734
|
const e = {
|
|
725
735
|
priority: 0,
|
|
726
|
-
maxBytes:
|
|
727
|
-
maxPixels:
|
|
736
|
+
maxBytes: ce.maxOriginalBytes,
|
|
737
|
+
maxPixels: ce.maxDecodedPixels,
|
|
728
738
|
...r
|
|
729
739
|
};
|
|
730
740
|
if (this.entries.has(n) && ["error", "aborted"].includes(this.entries.get(n).state) && this.entries.delete(n), !this.entries.has(n)) {
|
|
731
|
-
let u,
|
|
732
|
-
const c = new Promise((
|
|
733
|
-
u =
|
|
741
|
+
let u, f;
|
|
742
|
+
const c = new Promise((P, x) => {
|
|
743
|
+
u = P, f = x;
|
|
734
744
|
});
|
|
735
745
|
c.catch(() => {
|
|
736
746
|
}), this.entries.set(n, {
|
|
737
747
|
promise: c,
|
|
738
748
|
resolve: u,
|
|
739
|
-
reject:
|
|
749
|
+
reject: f,
|
|
740
750
|
controller: new AbortController(),
|
|
741
751
|
users: 0,
|
|
742
752
|
bytes: 0,
|
|
@@ -751,7 +761,7 @@ class Ln {
|
|
|
751
761
|
const i = this.entries.get(n);
|
|
752
762
|
i.users++, i.priority = Math.min(i.priority, e.priority), i.maxBytes = Math.max(i.maxBytes, e.maxBytes), i.maxPixels = Math.max(i.maxPixels, e.maxPixels), this.entries.delete(n), this.entries.set(n, i), this.pump();
|
|
753
763
|
let a = !1;
|
|
754
|
-
const o = i.promise.then((u) => (
|
|
764
|
+
const o = i.promise.then((u) => (zt(u.image, e.maxPixels), u)), l = o.then((u) => u.image);
|
|
755
765
|
return o.catch(() => {
|
|
756
766
|
}), l.catch(() => {
|
|
757
767
|
}), {
|
|
@@ -792,13 +802,13 @@ class Ln {
|
|
|
792
802
|
let n = this.stats.bytes;
|
|
793
803
|
for (const [r, e] of this.entries)
|
|
794
804
|
if (!(e.users > 0 || e.state === "loading" || e.state === "queued")) {
|
|
795
|
-
if (n <= this.budget && this.entries.size <=
|
|
805
|
+
if (n <= this.budget && this.entries.size <= ce.cacheEntries) break;
|
|
796
806
|
n -= e.bytes, e.dispose(), this.entries.delete(r);
|
|
797
807
|
}
|
|
798
808
|
}
|
|
799
809
|
}
|
|
800
|
-
const $n = new
|
|
801
|
-
function
|
|
810
|
+
const $n = new Fn(), Ce = { kind: "empty" };
|
|
811
|
+
function Tn(t) {
|
|
802
812
|
return t.kind === "element" && t.element instanceof HTMLImageElement && t.element.complete && t.element.naturalWidth > 0 ? { kind: "image", image: t.element } : Ce;
|
|
803
813
|
}
|
|
804
814
|
function xt() {
|
|
@@ -807,12 +817,12 @@ function xt() {
|
|
|
807
817
|
const n = t.getContext("2d");
|
|
808
818
|
return n.fillStyle = "#f3f4f5", n.fillRect(0, 0, 1, 1), t;
|
|
809
819
|
}
|
|
810
|
-
const
|
|
811
|
-
maxOriginalPixels:
|
|
812
|
-
maxOriginalBytes:
|
|
813
|
-
maxPreviewBytes:
|
|
814
|
-
},
|
|
815
|
-
function
|
|
820
|
+
const Ot = ["thumbnail", "screen", "full"], Ke = {
|
|
821
|
+
maxOriginalPixels: ce.maxDecodedPixels,
|
|
822
|
+
maxOriginalBytes: ce.maxOriginalBytes,
|
|
823
|
+
maxPreviewBytes: ce.maxPreviewBytes
|
|
824
|
+
}, Qe = (t, n) => n === "full" ? t.src : n === "screen" ? t.previewSrc : t.thumbnail;
|
|
825
|
+
function qn(t, n) {
|
|
816
826
|
return t.width * t.height <= n.maxOriginalPixels;
|
|
817
827
|
}
|
|
818
828
|
function Bn(t, n) {
|
|
@@ -828,43 +838,43 @@ function Bn(t, n) {
|
|
|
828
838
|
)
|
|
829
839
|
);
|
|
830
840
|
}
|
|
831
|
-
function
|
|
832
|
-
const o =
|
|
841
|
+
function In(t, n, r, e, i, a = !0) {
|
|
842
|
+
const o = qn(t, r), l = {
|
|
833
843
|
sources: [],
|
|
834
844
|
originalStatus: a && n === "full" ? o ? "loading" : "blocked" : "idle",
|
|
835
845
|
originalReason: ""
|
|
836
846
|
};
|
|
837
|
-
l.originalStatus === "blocked" && (l.originalReason =
|
|
838
|
-
for (const [u,
|
|
839
|
-
if (
|
|
847
|
+
l.originalStatus === "blocked" && (l.originalReason = dt);
|
|
848
|
+
for (const [u, f] of Ot.entries()) {
|
|
849
|
+
if (f === "screen" && n === "thumbnail" || f === "full" && (!a || n !== "full" || !o))
|
|
840
850
|
continue;
|
|
841
|
-
const c = e(t,
|
|
851
|
+
const c = e(t, f, i);
|
|
842
852
|
if (a && !o && c === t.src) {
|
|
843
|
-
l.originalStatus = "blocked", l.originalReason =
|
|
853
|
+
l.originalStatus = "blocked", l.originalReason = dt;
|
|
844
854
|
continue;
|
|
845
855
|
}
|
|
846
|
-
l.sources.push({ url: c, quality:
|
|
856
|
+
l.sources.push({ url: c, quality: f, rank: u });
|
|
847
857
|
}
|
|
848
858
|
return l;
|
|
849
859
|
}
|
|
850
|
-
const
|
|
860
|
+
const zn = ["aria-label"], Dn = {
|
|
851
861
|
key: 1,
|
|
852
862
|
class: "mp-resource-state",
|
|
853
863
|
role: "status",
|
|
854
864
|
"aria-label": "加载中"
|
|
855
|
-
},
|
|
865
|
+
}, An = /* @__PURE__ */ T("span", {
|
|
856
866
|
class: "mp-spinner",
|
|
857
867
|
"aria-hidden": "true"
|
|
858
868
|
}, null, -1), On = [
|
|
859
|
-
|
|
860
|
-
],
|
|
869
|
+
An
|
|
870
|
+
], _n = {
|
|
861
871
|
key: 2,
|
|
862
872
|
class: "mp-resource-state",
|
|
863
873
|
role: "alert"
|
|
864
|
-
},
|
|
874
|
+
}, Vn = /* @__PURE__ */ T("span", null, "图片暂时无法加载", -1), Un = {
|
|
865
875
|
key: 3,
|
|
866
876
|
class: "mp-quality-notice"
|
|
867
|
-
},
|
|
877
|
+
}, gt = /* @__PURE__ */ Le({
|
|
868
878
|
inheritAttrs: !1,
|
|
869
879
|
__name: "ImageCanvasRenderer",
|
|
870
880
|
props: {
|
|
@@ -877,55 +887,55 @@ const In = ["aria-label"], Dn = {
|
|
|
877
887
|
loadEnabled: { type: Boolean, default: !0 },
|
|
878
888
|
originalEnabled: { type: Boolean, default: !0 },
|
|
879
889
|
priority: { default: 0 },
|
|
880
|
-
resourcePolicy: { default: () =>
|
|
881
|
-
resolveSource: { type: Function, default:
|
|
890
|
+
resourcePolicy: { default: () => Ke },
|
|
891
|
+
resolveSource: { type: Function, default: Qe },
|
|
882
892
|
initialImage: { default: () => Ce }
|
|
883
893
|
},
|
|
884
894
|
emits: ["ready", "error", "originalState"],
|
|
885
895
|
setup(t, { expose: n, emit: r }) {
|
|
886
|
-
const e = t, i = r, a =
|
|
887
|
-
const
|
|
896
|
+
const e = t, i = r, a = L(), o = it({ status: "empty" }), l = V(() => {
|
|
897
|
+
const z = { kind: "hidden" };
|
|
888
898
|
if (!e.active || !e.rendering || !e.loadEnabled || o.value.status !== "ready")
|
|
889
|
-
return
|
|
890
|
-
const
|
|
891
|
-
return "animation" in
|
|
892
|
-
}), u =
|
|
899
|
+
return z;
|
|
900
|
+
const F = o.value.value;
|
|
901
|
+
return "animation" in F ? F.animation : z;
|
|
902
|
+
}), u = L("loading"), f = L(!1), c = L("idle"), P = L("");
|
|
893
903
|
te(
|
|
894
|
-
[c,
|
|
895
|
-
() => i("originalState", c.value,
|
|
904
|
+
[c, P],
|
|
905
|
+
() => i("originalState", c.value, P.value)
|
|
896
906
|
);
|
|
897
|
-
let
|
|
898
|
-
const w =
|
|
907
|
+
let x = !0, y = 0, R = e.media.id;
|
|
908
|
+
const w = xn();
|
|
899
909
|
let g = () => {
|
|
900
|
-
},
|
|
901
|
-
function
|
|
902
|
-
if (e.core.motionActive.value && e.loadEnabled &&
|
|
903
|
-
|
|
910
|
+
}, M, D = !1, h = { kind: "empty" };
|
|
911
|
+
function b() {
|
|
912
|
+
if (e.core.motionActive.value && e.loadEnabled && R === e.media.id) {
|
|
913
|
+
D = !0;
|
|
904
914
|
return;
|
|
905
915
|
}
|
|
906
|
-
|
|
916
|
+
D = !1, C();
|
|
907
917
|
}
|
|
908
|
-
function m(
|
|
909
|
-
o.value = { status: "ready", value:
|
|
918
|
+
function m(z, F, v, q) {
|
|
919
|
+
o.value = { status: "ready", value: z, rank: v }, w.display(F), e.core.setMediaElement(z.image), u.value = "ready", f.value = !1, q === "full" && (c.value = "ready"), e.core.requestRender(), i("ready", q);
|
|
910
920
|
}
|
|
911
921
|
te(
|
|
912
922
|
() => e.core.motionActive.value,
|
|
913
|
-
(
|
|
914
|
-
if (e.core.requestRender(), !
|
|
923
|
+
(z) => {
|
|
924
|
+
if (e.core.requestRender(), !z) {
|
|
915
925
|
if (h.kind === "ready") {
|
|
916
|
-
const
|
|
917
|
-
h = { kind: "empty" },
|
|
926
|
+
const F = h;
|
|
927
|
+
h = { kind: "empty" }, F.token === y && m(F.value, F.lease, F.rank, F.quality);
|
|
918
928
|
}
|
|
919
|
-
|
|
929
|
+
D && b();
|
|
920
930
|
}
|
|
921
931
|
}
|
|
922
932
|
), qe(() => {
|
|
923
|
-
const
|
|
924
|
-
|
|
925
|
-
|
|
933
|
+
const z = a.value;
|
|
934
|
+
M = z.getContext("2d"), e.core.canvasRef.value = z, g = e.core.registerRenderHandler(B), k(), Se(() => {
|
|
935
|
+
x && b();
|
|
926
936
|
});
|
|
927
937
|
}), Te(() => {
|
|
928
|
-
|
|
938
|
+
x = !1, y += 1, g(), w.dispose();
|
|
929
939
|
}), te(
|
|
930
940
|
[
|
|
931
941
|
() => e.media.id,
|
|
@@ -941,89 +951,89 @@ const In = ["aria-label"], Dn = {
|
|
|
941
951
|
() => e.requestVersion
|
|
942
952
|
],
|
|
943
953
|
() => {
|
|
944
|
-
|
|
954
|
+
b();
|
|
945
955
|
}
|
|
946
|
-
), te(() => e.initialImage,
|
|
956
|
+
), te(() => e.initialImage, k), te(
|
|
947
957
|
() => e.rendering,
|
|
948
|
-
(
|
|
949
|
-
|
|
958
|
+
(z) => {
|
|
959
|
+
z && e.core.requestRender();
|
|
950
960
|
}
|
|
951
961
|
);
|
|
952
|
-
function
|
|
962
|
+
function k() {
|
|
953
963
|
e.initialImage.kind !== "image" || o.value.status === "ready" || (o.value = {
|
|
954
964
|
status: "ready",
|
|
955
|
-
value:
|
|
965
|
+
value: At(e.initialImage.image),
|
|
956
966
|
rank: 0
|
|
957
967
|
}, e.core.setMediaElement(e.initialImage.image), u.value = "ready", e.core.requestRender(), i("ready", "thumbnail"));
|
|
958
968
|
}
|
|
959
|
-
async function
|
|
960
|
-
const
|
|
961
|
-
if (h = { kind: "empty" },
|
|
969
|
+
async function C() {
|
|
970
|
+
const z = ++y;
|
|
971
|
+
if (h = { kind: "empty" }, f.value = !1, R !== e.media.id && (R = e.media.id, o.value = { status: "empty" }, w.clearDisplay(), u.value = "loading", e.core.clearMedia(), k()), !e.loadEnabled) {
|
|
962
972
|
w.replace([]);
|
|
963
973
|
return;
|
|
964
974
|
}
|
|
965
|
-
const
|
|
966
|
-
e.core.viewportSize.value.width * Math.min(devicePixelRatio,
|
|
967
|
-
),
|
|
975
|
+
const F = Math.ceil(
|
|
976
|
+
e.core.viewportSize.value.width * Math.min(devicePixelRatio, ce.maxDevicePixelRatio) * e.core.state.level
|
|
977
|
+
), v = In(
|
|
968
978
|
e.media,
|
|
969
979
|
e.quality,
|
|
970
980
|
e.resourcePolicy,
|
|
971
981
|
e.resolveSource,
|
|
972
|
-
|
|
982
|
+
F,
|
|
973
983
|
e.originalEnabled
|
|
974
984
|
);
|
|
975
|
-
|
|
976
|
-
const { sources:
|
|
977
|
-
(
|
|
985
|
+
P.value = v.originalReason, c.value = v.originalStatus;
|
|
986
|
+
const { sources: q } = v, U = q.map(
|
|
987
|
+
(ie) => $n.acquire(ie.url, {
|
|
978
988
|
priority: e.priority,
|
|
979
989
|
maxPixels: e.resourcePolicy.maxOriginalPixels,
|
|
980
|
-
maxBytes:
|
|
990
|
+
maxBytes: ie.quality === "full" ? e.resourcePolicy.maxOriginalBytes : e.resourcePolicy.maxPreviewBytes
|
|
981
991
|
})
|
|
982
992
|
);
|
|
983
|
-
w.replace(
|
|
984
|
-
let
|
|
993
|
+
w.replace(U), q.length === 0 && o.value.status === "empty" && (u.value = "error", i("error", new Ge(P.value))), o.value.status === "ready" && i("ready", Ot[o.value.rank]);
|
|
994
|
+
let G = o.value.status === "ready" ? o.value.rank : -1, be = 0;
|
|
985
995
|
await Promise.all(
|
|
986
|
-
|
|
987
|
-
const
|
|
996
|
+
q.map(async (ie, pe) => {
|
|
997
|
+
const le = ie.rank, Pe = U[pe];
|
|
988
998
|
try {
|
|
989
|
-
const
|
|
990
|
-
if (
|
|
991
|
-
|
|
999
|
+
const ne = await Pe.resource;
|
|
1000
|
+
if (z !== y || le < G) return;
|
|
1001
|
+
G = le, e.core.motionActive.value && o.value.status === "ready" ? h = {
|
|
992
1002
|
kind: "ready",
|
|
993
|
-
token:
|
|
994
|
-
value:
|
|
1003
|
+
token: z,
|
|
1004
|
+
value: ne,
|
|
995
1005
|
lease: Pe,
|
|
996
|
-
rank:
|
|
997
|
-
quality:
|
|
998
|
-
} : m(
|
|
999
|
-
} catch (
|
|
1000
|
-
if (
|
|
1001
|
-
if (
|
|
1002
|
-
const
|
|
1003
|
-
c.value =
|
|
1006
|
+
rank: le,
|
|
1007
|
+
quality: ie.quality
|
|
1008
|
+
} : m(ne, Pe, le, ie.quality);
|
|
1009
|
+
} catch (ne) {
|
|
1010
|
+
if (z !== y || ne instanceof Error && ne.name === "AbortError") return;
|
|
1011
|
+
if (ie.quality === "full") {
|
|
1012
|
+
const A = Mn(ne);
|
|
1013
|
+
c.value = A.status, P.value = A.reason;
|
|
1004
1014
|
}
|
|
1005
|
-
be += 1,
|
|
1015
|
+
be += 1, le > G && o.value.status === "ready" && (f.value = !0), be === q.length && o.value.status === "empty" && (u.value = "error"), i("error", Ve(ne));
|
|
1006
1016
|
}
|
|
1007
1017
|
})
|
|
1008
1018
|
);
|
|
1009
1019
|
}
|
|
1010
|
-
function
|
|
1020
|
+
function B() {
|
|
1011
1021
|
if (!e.rendering || o.value.status !== "ready") return;
|
|
1012
|
-
const
|
|
1013
|
-
if (
|
|
1014
|
-
const
|
|
1022
|
+
const z = a.value, F = e.core.viewportSize.value;
|
|
1023
|
+
if (F.width <= 0 || F.height <= 0) return;
|
|
1024
|
+
const v = Math.min(
|
|
1015
1025
|
devicePixelRatio,
|
|
1016
|
-
|
|
1017
|
-
Math.sqrt(
|
|
1018
|
-
),
|
|
1019
|
-
(
|
|
1020
|
-
const { width:
|
|
1021
|
-
|
|
1022
|
-
|
|
1026
|
+
ce.maxDevicePixelRatio,
|
|
1027
|
+
Math.sqrt(ce.maxCanvasPixels / (F.width * F.height))
|
|
1028
|
+
), q = Math.max(1, Math.round(F.width * v)), U = Math.max(1, Math.round(F.height * v));
|
|
1029
|
+
(z.width !== q || z.height !== U) && (z.width = q, z.height = U), M.setTransform(v, 0, 0, v, 0, 0), M.clearRect(0, 0, F.width, F.height);
|
|
1030
|
+
const { width: G, height: be } = e.core.mediaSize.value, ie = e.core.displayScale.value;
|
|
1031
|
+
yn(
|
|
1032
|
+
M,
|
|
1023
1033
|
e.core.motionActive.value ? o.value.value.motionSource : o.value.value.source,
|
|
1024
1034
|
{
|
|
1025
|
-
viewport:
|
|
1026
|
-
size: { width:
|
|
1035
|
+
viewport: F,
|
|
1036
|
+
size: { width: G * ie, height: be * ie },
|
|
1027
1037
|
offsetX: e.core.state.offsetX,
|
|
1028
1038
|
offsetY: e.core.state.offsetY,
|
|
1029
1039
|
rotation: e.core.state.rotation
|
|
@@ -1031,49 +1041,49 @@ const In = ["aria-label"], Dn = {
|
|
|
1031
1041
|
e.core.motionActive.value
|
|
1032
1042
|
);
|
|
1033
1043
|
}
|
|
1034
|
-
function
|
|
1044
|
+
function $() {
|
|
1035
1045
|
if (o.value.status !== "ready") throw new Error("图片画面尚未就绪");
|
|
1036
1046
|
return { image: o.value.value.motionSource, scale: 1 };
|
|
1037
1047
|
}
|
|
1038
1048
|
return n({
|
|
1039
|
-
captureFrame:
|
|
1049
|
+
captureFrame: $,
|
|
1040
1050
|
retainFrame: () => ({
|
|
1041
|
-
|
|
1051
|
+
...$(),
|
|
1042
1052
|
release: w.retainDisplay()
|
|
1043
1053
|
})
|
|
1044
|
-
}), (
|
|
1054
|
+
}), (z, F) => (O(), _($e, null, [
|
|
1045
1055
|
T("canvas", {
|
|
1046
1056
|
ref_key: "canvasRef",
|
|
1047
1057
|
ref: a,
|
|
1048
1058
|
class: "mp-canvas-renderer",
|
|
1049
|
-
"aria-label":
|
|
1050
|
-
style:
|
|
1051
|
-
}, null, 12,
|
|
1052
|
-
l.value.kind === "gif" ? (
|
|
1059
|
+
"aria-label": z.media.title,
|
|
1060
|
+
style: me({ visibility: l.value.kind === "gif" ? "hidden" : "inherit" })
|
|
1061
|
+
}, null, 12, zn),
|
|
1062
|
+
l.value.kind === "gif" ? (O(), Ue(kn, {
|
|
1053
1063
|
key: 0,
|
|
1054
|
-
core:
|
|
1064
|
+
core: z.core,
|
|
1055
1065
|
src: l.value.url,
|
|
1056
|
-
title:
|
|
1057
|
-
}, null, 8, ["core", "src", "title"])) :
|
|
1058
|
-
u.value === "loading" ? (
|
|
1059
|
-
u.value === "error" ? (
|
|
1060
|
-
|
|
1066
|
+
title: z.media.title
|
|
1067
|
+
}, null, 8, ["core", "src", "title"])) : J("", !0),
|
|
1068
|
+
u.value === "loading" ? (O(), _("div", Dn, On)) : J("", !0),
|
|
1069
|
+
u.value === "error" ? (O(), _("div", _n, [
|
|
1070
|
+
Vn,
|
|
1061
1071
|
T("button", {
|
|
1062
1072
|
type: "button",
|
|
1063
|
-
onClick:
|
|
1073
|
+
onClick: ae(C, ["stop"])
|
|
1064
1074
|
}, "重新加载")
|
|
1065
|
-
])) :
|
|
1066
|
-
|
|
1075
|
+
])) : J("", !0),
|
|
1076
|
+
f.value && c.value !== "blocked" ? (O(), _("span", Un, " 高清图加载失败,当前显示预览图 ")) : J("", !0)
|
|
1067
1077
|
], 64));
|
|
1068
1078
|
}
|
|
1069
1079
|
});
|
|
1070
|
-
function
|
|
1080
|
+
function Yn(t, n, r) {
|
|
1071
1081
|
const { buffered: e } = t;
|
|
1072
1082
|
if (!Number.isFinite(n) || n <= 0) return [];
|
|
1073
1083
|
const i = [], a = Math.min(0.25, n * 0.05);
|
|
1074
1084
|
for (let o = 0; o < e.length; o++) {
|
|
1075
|
-
const l =
|
|
1076
|
-
let u =
|
|
1085
|
+
const l = ee(e.start(o), 0, n);
|
|
1086
|
+
let u = ee(e.end(o), l, n);
|
|
1077
1087
|
o === e.length - 1 && (t.ended || r.kind === "retained" && e.end(o) >= r.end || t.readyState >= 4 && n - u <= a) && (u = n), u > l && i.push({ start: l, end: u });
|
|
1078
1088
|
}
|
|
1079
1089
|
return i;
|
|
@@ -1088,7 +1098,7 @@ function Mt(t) {
|
|
|
1088
1098
|
function St() {
|
|
1089
1099
|
return { duration: 0, time: 0, buffered: 0, bufferedRanges: [] };
|
|
1090
1100
|
}
|
|
1091
|
-
function
|
|
1101
|
+
function Hn() {
|
|
1092
1102
|
let t = 0, n = { kind: "pending" };
|
|
1093
1103
|
return {
|
|
1094
1104
|
setDuration(r) {
|
|
@@ -1102,18 +1112,18 @@ function Yn() {
|
|
|
1102
1112
|
t = 0, n = { kind: "pending" };
|
|
1103
1113
|
},
|
|
1104
1114
|
read(r, e) {
|
|
1105
|
-
const i = t > 0 ? t : Mt(r.duration), a =
|
|
1115
|
+
const i = t > 0 ? t : Mt(r.duration), a = Yn(r, i, n);
|
|
1106
1116
|
return {
|
|
1107
1117
|
duration: i,
|
|
1108
|
-
time: e ? i :
|
|
1118
|
+
time: e ? i : ee(r.currentTime, 0, i),
|
|
1109
1119
|
buffered: a.length > 0 ? a[a.length - 1].end : 0,
|
|
1110
1120
|
bufferedRanges: a
|
|
1111
1121
|
};
|
|
1112
1122
|
}
|
|
1113
1123
|
};
|
|
1114
1124
|
}
|
|
1115
|
-
function
|
|
1116
|
-
const r =
|
|
1125
|
+
function _t(t, n) {
|
|
1126
|
+
const r = Hn(), e = mt({
|
|
1117
1127
|
playing: !1,
|
|
1118
1128
|
buffering: !1,
|
|
1119
1129
|
...St(),
|
|
@@ -1124,21 +1134,21 @@ function qt(t, n) {
|
|
|
1124
1134
|
status: "loading"
|
|
1125
1135
|
});
|
|
1126
1136
|
let i = !1, a = 0, o = !1;
|
|
1127
|
-
const l = V(() => e.duration > 0 && e.status !== "error"), u = V(() => e.scrubbing ? e.scrubTime : e.time),
|
|
1137
|
+
const l = V(() => e.duration > 0 && e.status !== "error"), u = V(() => e.scrubbing ? e.scrubTime : e.time), f = V(() => l.value ? u.value / e.duration * 100 : 0), c = V(
|
|
1128
1138
|
() => l.value ? e.buffered / e.duration * 100 : 0
|
|
1129
|
-
),
|
|
1130
|
-
() => e.bufferedRanges.map(({ start:
|
|
1131
|
-
left:
|
|
1132
|
-
width: (
|
|
1139
|
+
), P = V(
|
|
1140
|
+
() => e.bufferedRanges.map(({ start: F, end: v }) => ({
|
|
1141
|
+
left: F / e.duration * 100,
|
|
1142
|
+
width: (v - F) / e.duration * 100
|
|
1133
1143
|
}))
|
|
1134
1144
|
);
|
|
1135
|
-
function
|
|
1145
|
+
function x() {
|
|
1136
1146
|
Object.assign(e, r.read(t(), e.ended));
|
|
1137
1147
|
}
|
|
1138
|
-
function
|
|
1139
|
-
o || (r.setDuration(
|
|
1148
|
+
function y(F) {
|
|
1149
|
+
o || (r.setDuration(F), x(), e.scrubTime = ee(e.scrubTime, 0, e.duration));
|
|
1140
1150
|
}
|
|
1141
|
-
function
|
|
1151
|
+
function R() {
|
|
1142
1152
|
r.reset(), i = !1, a += 1, Object.assign(e, {
|
|
1143
1153
|
playing: !1,
|
|
1144
1154
|
buffering: !1,
|
|
@@ -1151,51 +1161,51 @@ function qt(t, n) {
|
|
|
1151
1161
|
}
|
|
1152
1162
|
async function w() {
|
|
1153
1163
|
if (o) return;
|
|
1154
|
-
const
|
|
1164
|
+
const F = ++a;
|
|
1155
1165
|
e.ended && (t().currentTime = 0, e.time = 0), e.ended = !1, e.buffering = !0;
|
|
1156
1166
|
try {
|
|
1157
1167
|
await t().play();
|
|
1158
|
-
} catch (
|
|
1159
|
-
if (
|
|
1160
|
-
e.buffering = !1, e.playing = !1,
|
|
1168
|
+
} catch (v) {
|
|
1169
|
+
if (F !== a) return;
|
|
1170
|
+
e.buffering = !1, e.playing = !1, v instanceof Error && v.name !== "NotAllowedError" && v.name !== "AbortError" && n(v);
|
|
1161
1171
|
}
|
|
1162
1172
|
}
|
|
1163
1173
|
function g() {
|
|
1164
1174
|
a += 1, i = !1, e.scrubbing = !1, e.buffering = !1, t().pause();
|
|
1165
1175
|
}
|
|
1166
|
-
function
|
|
1176
|
+
function M() {
|
|
1167
1177
|
e.playing ? g() : w();
|
|
1168
1178
|
}
|
|
1169
|
-
function
|
|
1179
|
+
function D() {
|
|
1170
1180
|
!l.value || e.scrubbing || (i = e.playing, e.scrubbing = !0, e.scrubTime = e.time, t().pause());
|
|
1171
1181
|
}
|
|
1172
|
-
function h(
|
|
1173
|
-
e.scrubTime =
|
|
1182
|
+
function h(F) {
|
|
1183
|
+
e.scrubTime = ee(F, 0, e.duration);
|
|
1174
1184
|
}
|
|
1175
|
-
function
|
|
1185
|
+
function b(F = !0) {
|
|
1176
1186
|
if (!e.scrubbing) return;
|
|
1177
|
-
const
|
|
1178
|
-
i = !1, e.scrubbing = !1,
|
|
1187
|
+
const v = i;
|
|
1188
|
+
i = !1, e.scrubbing = !1, F && (t().currentTime = e.scrubTime, e.time = e.scrubTime, e.ended = !1), v && w();
|
|
1179
1189
|
}
|
|
1180
1190
|
function m() {
|
|
1181
1191
|
t().muted = !t().muted, e.muted = t().muted;
|
|
1182
1192
|
}
|
|
1183
|
-
function
|
|
1184
|
-
e.status = "error", e.playing = !1, e.buffering = !1, n(
|
|
1193
|
+
function k(F) {
|
|
1194
|
+
e.status = "error", e.playing = !1, e.buffering = !1, n(F);
|
|
1185
1195
|
}
|
|
1186
|
-
const
|
|
1196
|
+
const B = Object.fromEntries(
|
|
1187
1197
|
Object.entries({
|
|
1188
|
-
loadedmetadata:
|
|
1189
|
-
durationchange:
|
|
1190
|
-
timeupdate:
|
|
1191
|
-
progress:
|
|
1198
|
+
loadedmetadata: x,
|
|
1199
|
+
durationchange: x,
|
|
1200
|
+
timeupdate: x,
|
|
1201
|
+
progress: x,
|
|
1192
1202
|
loadeddata: () => {
|
|
1193
|
-
|
|
1203
|
+
x(), e.status = "ready", e.buffering = !1;
|
|
1194
1204
|
},
|
|
1195
1205
|
canplay: () => {
|
|
1196
|
-
|
|
1206
|
+
x(), e.buffering = !1;
|
|
1197
1207
|
},
|
|
1198
|
-
canplaythrough:
|
|
1208
|
+
canplaythrough: x,
|
|
1199
1209
|
play: () => {
|
|
1200
1210
|
e.playing = !0, e.ended = !1;
|
|
1201
1211
|
},
|
|
@@ -1206,7 +1216,7 @@ function qt(t, n) {
|
|
|
1206
1216
|
e.playing = !1, e.buffering = !1;
|
|
1207
1217
|
},
|
|
1208
1218
|
ended: () => {
|
|
1209
|
-
e.playing = !1, e.ended = !0, e.buffering = !1, r.complete(t()),
|
|
1219
|
+
e.playing = !1, e.ended = !0, e.buffering = !1, r.complete(t()), x();
|
|
1210
1220
|
},
|
|
1211
1221
|
waiting: () => {
|
|
1212
1222
|
e.buffering = e.playing;
|
|
@@ -1215,50 +1225,50 @@ function qt(t, n) {
|
|
|
1215
1225
|
e.buffering = !0;
|
|
1216
1226
|
},
|
|
1217
1227
|
seeked: () => {
|
|
1218
|
-
e.buffering = !1,
|
|
1228
|
+
e.buffering = !1, x();
|
|
1219
1229
|
},
|
|
1220
1230
|
volumechange: () => {
|
|
1221
1231
|
e.muted = t().muted;
|
|
1222
1232
|
},
|
|
1223
1233
|
error: () => {
|
|
1224
|
-
|
|
1234
|
+
k(new Error("视频暂时无法播放,请重试或检查资源格式"));
|
|
1225
1235
|
}
|
|
1226
|
-
}).map(([
|
|
1227
|
-
|
|
1236
|
+
}).map(([F, v]) => [
|
|
1237
|
+
F,
|
|
1228
1238
|
() => {
|
|
1229
|
-
o ||
|
|
1239
|
+
o || v();
|
|
1230
1240
|
}
|
|
1231
1241
|
])
|
|
1232
1242
|
);
|
|
1233
|
-
function
|
|
1243
|
+
function $() {
|
|
1234
1244
|
o = !0, g();
|
|
1235
1245
|
}
|
|
1236
|
-
function
|
|
1237
|
-
|
|
1246
|
+
function z() {
|
|
1247
|
+
R(), e.buffering = !0, t().load();
|
|
1238
1248
|
}
|
|
1239
1249
|
return {
|
|
1240
1250
|
state: e,
|
|
1241
1251
|
seekable: l,
|
|
1242
1252
|
displayTime: u,
|
|
1243
|
-
progress:
|
|
1253
|
+
progress: f,
|
|
1244
1254
|
bufferedProgress: c,
|
|
1245
|
-
bufferedRanges:
|
|
1246
|
-
events:
|
|
1255
|
+
bufferedRanges: P,
|
|
1256
|
+
events: B,
|
|
1247
1257
|
play: w,
|
|
1248
1258
|
pause: g,
|
|
1249
|
-
toggle:
|
|
1250
|
-
beginScrub:
|
|
1259
|
+
toggle: M,
|
|
1260
|
+
beginScrub: D,
|
|
1251
1261
|
scrub: h,
|
|
1252
|
-
endScrub:
|
|
1262
|
+
endScrub: b,
|
|
1253
1263
|
toggleMuted: m,
|
|
1254
|
-
retry:
|
|
1255
|
-
setSourceDuration:
|
|
1256
|
-
resetSource:
|
|
1257
|
-
sourceObserver: { error:
|
|
1258
|
-
dispose:
|
|
1264
|
+
retry: z,
|
|
1265
|
+
setSourceDuration: y,
|
|
1266
|
+
resetSource: R,
|
|
1267
|
+
sourceObserver: { error: k, duration: y, reset: R },
|
|
1268
|
+
dispose: $
|
|
1259
1269
|
};
|
|
1260
1270
|
}
|
|
1261
|
-
const Xn = ["data-live-state"],
|
|
1271
|
+
const Xn = ["data-live-state"], Wn = { class: "mp-dom-renderer mp-live-photo__motion" }, Nn = ["preload"], Zn = /* @__PURE__ */ Le({
|
|
1262
1272
|
__name: "LivePhotoRenderer",
|
|
1263
1273
|
props: {
|
|
1264
1274
|
media: {},
|
|
@@ -1269,30 +1279,31 @@ const Xn = ["data-live-state"], Hn = { class: "mp-dom-renderer mp-live-photo__mo
|
|
|
1269
1279
|
requestVersion: { default: 0 },
|
|
1270
1280
|
loadEnabled: { type: Boolean, default: !0 },
|
|
1271
1281
|
priority: { default: 0 },
|
|
1272
|
-
resourcePolicy: { default: () =>
|
|
1273
|
-
resolveSource: { type: Function, default:
|
|
1282
|
+
resourcePolicy: { default: () => Ke },
|
|
1283
|
+
resolveSource: { type: Function, default: Qe },
|
|
1274
1284
|
rendering: { type: Boolean, default: !0 },
|
|
1275
1285
|
initialImage: { default: () => Ce },
|
|
1276
1286
|
quality: { default: "screen" }
|
|
1277
1287
|
},
|
|
1278
1288
|
emits: ["ready", "error", "originalState", "liveState", "liveEnded"],
|
|
1279
1289
|
setup(t, { expose: n, emit: r }) {
|
|
1280
|
-
const e = t, i = r, a =
|
|
1290
|
+
const e = t, i = r, a = L(), o = L(), l = L(), u = L(), f = _t(
|
|
1281
1291
|
() => a.value,
|
|
1282
1292
|
(m) => i("error", m)
|
|
1283
|
-
), { state: c } =
|
|
1284
|
-
|
|
1293
|
+
), { state: c } = f;
|
|
1294
|
+
It(
|
|
1285
1295
|
() => a.value,
|
|
1286
1296
|
() => e.media,
|
|
1287
1297
|
() => e.active && e.loadEnabled,
|
|
1288
|
-
() =>
|
|
1289
|
-
|
|
1298
|
+
() => rt,
|
|
1299
|
+
{ ...f.sourceObserver, quality: () => {
|
|
1300
|
+
} }
|
|
1290
1301
|
);
|
|
1291
|
-
let
|
|
1302
|
+
let P = !1, x = () => {
|
|
1292
1303
|
};
|
|
1293
|
-
const
|
|
1304
|
+
const y = V(
|
|
1294
1305
|
() => e.active && e.enabled && c.playing && c.status === "ready" && !c.buffering
|
|
1295
|
-
),
|
|
1306
|
+
), R = V(() => ({
|
|
1296
1307
|
transform: `translate(-50%, -50%) translate3d(${e.core.state.offsetX}px, ${e.core.state.offsetY}px, 0)`
|
|
1297
1308
|
})), w = V(() => ({
|
|
1298
1309
|
width: `${e.core.mediaSize.value.width * e.core.displayScale.value}px`,
|
|
@@ -1300,61 +1311,61 @@ const Xn = ["data-live-state"], Hn = { class: "mp-dom-renderer mp-live-photo__mo
|
|
|
1300
1311
|
transform: `rotate(${e.core.state.rotation}deg)`
|
|
1301
1312
|
}));
|
|
1302
1313
|
function g() {
|
|
1303
|
-
|
|
1314
|
+
f.pause(), a.value.readyState >= HTMLMediaElement.HAVE_METADATA && (a.value.currentTime = 0);
|
|
1304
1315
|
}
|
|
1305
|
-
function
|
|
1306
|
-
!e.active || !e.enabled || !e.loadEnabled || !e.playing || c.status !== "ready" || c.buffering ? g() :
|
|
1307
|
-
!
|
|
1316
|
+
function M() {
|
|
1317
|
+
!e.active || !e.enabled || !e.loadEnabled || !e.playing || c.status !== "ready" || c.buffering ? g() : f.play().then(() => {
|
|
1318
|
+
!P && !c.playing && e.playing && i("liveEnded");
|
|
1308
1319
|
});
|
|
1309
1320
|
}
|
|
1310
1321
|
te(
|
|
1311
1322
|
() => [c.status, c.playing, c.buffering],
|
|
1312
1323
|
() => {
|
|
1313
|
-
const m = c.status === "error" ? "error" : c.buffering || c.status === "loading" ? "loading" :
|
|
1324
|
+
const m = c.status === "error" ? "error" : c.buffering || c.status === "loading" ? "loading" : y.value ? "playing" : "idle";
|
|
1314
1325
|
i("liveState", m);
|
|
1315
1326
|
},
|
|
1316
1327
|
{ immediate: !0 }
|
|
1317
1328
|
);
|
|
1318
|
-
function
|
|
1319
|
-
|
|
1329
|
+
function D() {
|
|
1330
|
+
P || (g(), i("liveEnded"));
|
|
1320
1331
|
}
|
|
1321
1332
|
function h() {
|
|
1322
1333
|
document.hidden && (g(), i("liveEnded"));
|
|
1323
1334
|
}
|
|
1324
1335
|
qe(() => {
|
|
1325
|
-
|
|
1336
|
+
x = te(() => [e.active, e.enabled, e.loadEnabled, e.playing], M, {
|
|
1326
1337
|
flush: "post"
|
|
1327
|
-
}),
|
|
1338
|
+
}), M(), document.addEventListener("visibilitychange", h);
|
|
1328
1339
|
}), Te(() => {
|
|
1329
|
-
|
|
1340
|
+
x(), P = !0, f.dispose(), document.removeEventListener("visibilitychange", h);
|
|
1330
1341
|
});
|
|
1331
|
-
function
|
|
1332
|
-
const m = document.createElement("canvas"),
|
|
1342
|
+
function b() {
|
|
1343
|
+
const m = document.createElement("canvas"), k = Math.min(
|
|
1333
1344
|
1,
|
|
1334
|
-
Math.sqrt(
|
|
1345
|
+
Math.sqrt(ce.maxCanvasPixels / (e.media.width * e.media.height))
|
|
1335
1346
|
);
|
|
1336
|
-
m.width = Math.round(e.media.width *
|
|
1337
|
-
const
|
|
1338
|
-
|
|
1339
|
-
const
|
|
1340
|
-
return
|
|
1341
|
-
}
|
|
1342
|
-
return n({ captureFrame:
|
|
1343
|
-
} }) }), (m,
|
|
1347
|
+
m.width = Math.round(e.media.width * k), m.height = Math.round(e.media.height * k);
|
|
1348
|
+
const C = m.getContext("2d"), B = Number(getComputedStyle(l.value).opacity);
|
|
1349
|
+
C.drawImage(u.value.captureFrame().image, 0, 0, m.width, m.height), B < 1 && a.value.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && (C.globalAlpha = 1 - B, C.drawImage(a.value, 0, 0, m.width, m.height));
|
|
1350
|
+
const $ = new DOMMatrixReadOnly(getComputedStyle(o.value).transform).a;
|
|
1351
|
+
return f.pause(), { image: m, scale: $ };
|
|
1352
|
+
}
|
|
1353
|
+
return n({ captureFrame: b, retainFrame: () => ({ ...b(), release: () => {
|
|
1354
|
+
} }) }), (m, k) => (O(), _("div", {
|
|
1344
1355
|
class: "mp-live-photo-renderer",
|
|
1345
|
-
"data-live-state":
|
|
1356
|
+
"data-live-state": p(c).status === "error" ? "error" : y.value ? "playing" : "idle"
|
|
1346
1357
|
}, [
|
|
1347
1358
|
T("div", {
|
|
1348
1359
|
ref_key: "effectsRef",
|
|
1349
1360
|
ref: o,
|
|
1350
|
-
class: De(["mp-live-photo__effects", { "is-playing":
|
|
1361
|
+
class: De(["mp-live-photo__effects", { "is-playing": y.value }])
|
|
1351
1362
|
}, [
|
|
1352
|
-
T("div",
|
|
1363
|
+
T("div", Wn, [
|
|
1353
1364
|
T("div", {
|
|
1354
1365
|
class: "mp-dom-renderer__frame",
|
|
1355
|
-
style:
|
|
1366
|
+
style: me(R.value)
|
|
1356
1367
|
}, [
|
|
1357
|
-
T("video",
|
|
1368
|
+
T("video", je({
|
|
1358
1369
|
ref_key: "videoRef",
|
|
1359
1370
|
ref: a,
|
|
1360
1371
|
class: "mp-dom-renderer__node",
|
|
@@ -1363,18 +1374,18 @@ const Xn = ["data-live-state"], Hn = { class: "mp-dom-renderer mp-live-photo__mo
|
|
|
1363
1374
|
playsinline: "",
|
|
1364
1375
|
"webkit-playsinline": "true",
|
|
1365
1376
|
crossorigin: "anonymous"
|
|
1366
|
-
},
|
|
1367
|
-
onEnded:
|
|
1368
|
-
onError:
|
|
1369
|
-
}), null, 16,
|
|
1377
|
+
}, pt(p(f).events, !0), {
|
|
1378
|
+
onEnded: D,
|
|
1379
|
+
onError: k[0] || (k[0] = (C) => i("liveEnded"))
|
|
1380
|
+
}), null, 16, Nn)
|
|
1370
1381
|
], 4)
|
|
1371
1382
|
]),
|
|
1372
1383
|
T("div", {
|
|
1373
1384
|
ref_key: "stillRef",
|
|
1374
1385
|
ref: l,
|
|
1375
|
-
class: De(["mp-live-photo__still", { "is-playing":
|
|
1386
|
+
class: De(["mp-live-photo__still", { "is-playing": y.value }])
|
|
1376
1387
|
}, [
|
|
1377
|
-
|
|
1388
|
+
ze(gt, {
|
|
1378
1389
|
ref_key: "imageRendererRef",
|
|
1379
1390
|
ref: u,
|
|
1380
1391
|
active: m.active,
|
|
@@ -1383,27 +1394,87 @@ const Xn = ["data-live-state"], Hn = { class: "mp-dom-renderer mp-live-photo__mo
|
|
|
1383
1394
|
priority: m.priority,
|
|
1384
1395
|
"resource-policy": m.resourcePolicy,
|
|
1385
1396
|
"resolve-source": m.resolveSource,
|
|
1386
|
-
onOriginalState:
|
|
1397
|
+
onOriginalState: k[1] || (k[1] = (C, B) => i("originalState", C, B)),
|
|
1387
1398
|
media: m.media,
|
|
1388
1399
|
"initial-image": m.initialImage,
|
|
1389
1400
|
rendering: m.rendering,
|
|
1390
1401
|
core: m.core,
|
|
1391
1402
|
quality: m.quality,
|
|
1392
|
-
onReady:
|
|
1393
|
-
onError:
|
|
1403
|
+
onReady: k[2] || (k[2] = (C) => i("ready", C)),
|
|
1404
|
+
onError: k[3] || (k[3] = (C) => i("error", C))
|
|
1394
1405
|
}, null, 8, ["active", "request-version", "load-enabled", "priority", "resource-policy", "resolve-source", "media", "initial-image", "rendering", "core", "quality"])
|
|
1395
1406
|
], 2)
|
|
1396
1407
|
], 2)
|
|
1397
1408
|
], 8, Xn));
|
|
1398
1409
|
}
|
|
1399
1410
|
});
|
|
1400
|
-
function
|
|
1401
|
-
const
|
|
1402
|
-
|
|
1403
|
-
const i = Math.min(
|
|
1404
|
-
|
|
1411
|
+
function Vt(t, n, r) {
|
|
1412
|
+
const e = Math.min(1, Math.sqrt(ce.maxCanvasPixels / (r.width * r.height)));
|
|
1413
|
+
n.width = Math.max(1, Math.round(r.width * e)), n.height = Math.max(1, Math.round(r.height * e));
|
|
1414
|
+
const i = Math.min(n.width / t.videoWidth, n.height / t.videoHeight), a = t.videoWidth * i, o = t.videoHeight * i;
|
|
1415
|
+
n.getContext("2d").drawImage(t, (n.width - a) / 2, (n.height - o) / 2, a, o);
|
|
1416
|
+
}
|
|
1417
|
+
function jn(t, n) {
|
|
1418
|
+
const r = document.createElement("canvas");
|
|
1419
|
+
return Vt(t, r, n), t.pause(), r;
|
|
1405
1420
|
}
|
|
1406
|
-
|
|
1421
|
+
function Gn(t, n, r) {
|
|
1422
|
+
const e = L(!1);
|
|
1423
|
+
let i = !1, a = !1, o = 0, l = -1, u = -1;
|
|
1424
|
+
const f = ["loadeddata", "seeked", "canplay"];
|
|
1425
|
+
function c() {
|
|
1426
|
+
l !== -1 && cancelAnimationFrame(l), u !== -1 && t().cancelVideoFrameCallback(u), l = -1, u = -1;
|
|
1427
|
+
}
|
|
1428
|
+
function P() {
|
|
1429
|
+
n().width = 1, n().height = 1, i = !1;
|
|
1430
|
+
}
|
|
1431
|
+
function x() {
|
|
1432
|
+
o += 1, c(), a && (f.forEach((M) => t().removeEventListener(M, R)), t().removeEventListener("error", x), a = !1), e.value = !1, i && P();
|
|
1433
|
+
}
|
|
1434
|
+
function y() {
|
|
1435
|
+
return t().readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && !t().seeking;
|
|
1436
|
+
}
|
|
1437
|
+
function R() {
|
|
1438
|
+
if (!e.value || !y()) return;
|
|
1439
|
+
l !== -1 && cancelAnimationFrame(l);
|
|
1440
|
+
const M = o;
|
|
1441
|
+
l = requestAnimationFrame(() => {
|
|
1442
|
+
M === o && (l = requestAnimationFrame(() => {
|
|
1443
|
+
M === o && (l = -1, y() && x());
|
|
1444
|
+
}));
|
|
1445
|
+
});
|
|
1446
|
+
}
|
|
1447
|
+
function w(M) {
|
|
1448
|
+
const D = t(), h = D.getAttribute("src"), b = e.value;
|
|
1449
|
+
if (o += 1, c(), !b && D.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA)
|
|
1450
|
+
try {
|
|
1451
|
+
Vt(D, n(), r()), i = !0;
|
|
1452
|
+
} catch {
|
|
1453
|
+
P();
|
|
1454
|
+
}
|
|
1455
|
+
try {
|
|
1456
|
+
M();
|
|
1457
|
+
} catch (m) {
|
|
1458
|
+
throw x(), m;
|
|
1459
|
+
}
|
|
1460
|
+
if (!i || !b && h === D.getAttribute("src")) {
|
|
1461
|
+
x();
|
|
1462
|
+
return;
|
|
1463
|
+
}
|
|
1464
|
+
if (e.value = !0, a || (f.forEach((m) => D.addEventListener(m, R)), D.addEventListener("error", x), a = !0), "requestVideoFrameCallback" in D) {
|
|
1465
|
+
const m = o;
|
|
1466
|
+
u = D.requestVideoFrameCallback(() => {
|
|
1467
|
+
m === o && (u = -1, y() && x());
|
|
1468
|
+
});
|
|
1469
|
+
}
|
|
1470
|
+
}
|
|
1471
|
+
function g() {
|
|
1472
|
+
const M = document.createElement("canvas");
|
|
1473
|
+
return M.width = n().width, M.height = n().height, M.getContext("2d").drawImage(n(), 0, 0), M;
|
|
1474
|
+
}
|
|
1475
|
+
return { active: e, run: w, clear: x, snapshot: g };
|
|
1476
|
+
}
|
|
1477
|
+
const Kn = {
|
|
1407
1478
|
class: "mp-video-icon--generic",
|
|
1408
1479
|
width: "22",
|
|
1409
1480
|
height: "22",
|
|
@@ -1414,7 +1485,7 @@ const jn = {
|
|
|
1414
1485
|
"stroke-linecap": "round",
|
|
1415
1486
|
"stroke-linejoin": "round",
|
|
1416
1487
|
"aria-hidden": "true"
|
|
1417
|
-
},
|
|
1488
|
+
}, Qn = ["d", "fill"], Jn = ["src"], ea = ["src"], at = /* @__PURE__ */ Le({
|
|
1418
1489
|
__name: "VideoIcon",
|
|
1419
1490
|
props: {
|
|
1420
1491
|
name: {}
|
|
@@ -1444,173 +1515,237 @@ const jn = {
|
|
|
1444
1515
|
volume: ["m11 4-6 5H2v6h3l6 5Z", "M15 8a6 6 0 0 1 0 8M18 5a10 10 0 0 1 0 14"],
|
|
1445
1516
|
muted: ["m11 4-6 5H2v6h3l6 5Z", "m16 9 6 6m0-6-6 6"]
|
|
1446
1517
|
};
|
|
1447
|
-
return (a, o) => (
|
|
1518
|
+
return (a, o) => (O(), _("span", {
|
|
1448
1519
|
class: De(["mp-video-icon", { "has-album-icon": n.name in r }])
|
|
1449
1520
|
}, [
|
|
1450
|
-
(
|
|
1451
|
-
(
|
|
1521
|
+
(O(), _("svg", Kn, [
|
|
1522
|
+
(O(!0), _($e, null, Ye(i[a.name], (l, u) => (O(), _("path", {
|
|
1452
1523
|
key: u,
|
|
1453
1524
|
d: l,
|
|
1454
1525
|
fill: a.name === "play" ? "currentColor" : "none"
|
|
1455
|
-
}, null, 8,
|
|
1526
|
+
}, null, 8, Qn))), 128))
|
|
1456
1527
|
])),
|
|
1457
|
-
a.name in r ? (
|
|
1528
|
+
a.name in r ? (O(), _($e, { key: 0 }, [
|
|
1458
1529
|
T("img", {
|
|
1459
1530
|
class: "mp-video-icon--mobile",
|
|
1460
1531
|
src: e[r[a.name][0]],
|
|
1461
1532
|
alt: "",
|
|
1462
1533
|
"aria-hidden": "true",
|
|
1463
1534
|
draggable: "false"
|
|
1464
|
-
}, null, 8,
|
|
1535
|
+
}, null, 8, Jn),
|
|
1465
1536
|
T("img", {
|
|
1466
1537
|
class: "mp-video-icon--desktop",
|
|
1467
1538
|
src: e[r[a.name][1]],
|
|
1468
1539
|
alt: "",
|
|
1469
1540
|
"aria-hidden": "true",
|
|
1470
1541
|
draggable: "false"
|
|
1471
|
-
}, null, 8,
|
|
1472
|
-
], 64)) :
|
|
1542
|
+
}, null, 8, ea)
|
|
1543
|
+
], 64)) : J("", !0)
|
|
1473
1544
|
], 2));
|
|
1474
1545
|
}
|
|
1475
|
-
}),
|
|
1546
|
+
}), ta = ["aria-expanded", "aria-busy", "title"], na = {
|
|
1547
|
+
key: 0,
|
|
1548
|
+
"aria-hidden": "true"
|
|
1549
|
+
}, aa = {
|
|
1550
|
+
key: 0,
|
|
1551
|
+
class: "mp-video-quality__menu",
|
|
1552
|
+
role: "group",
|
|
1553
|
+
"aria-label": "视频清晰度选项"
|
|
1554
|
+
}, ia = ["aria-pressed", "onClick"], ra = /* @__PURE__ */ Le({
|
|
1555
|
+
__name: "VideoQualityMenu",
|
|
1556
|
+
props: {
|
|
1557
|
+
quality: {}
|
|
1558
|
+
},
|
|
1559
|
+
setup(t) {
|
|
1560
|
+
const n = t, r = L(!1), e = L(), i = V(
|
|
1561
|
+
() => n.quality.kind === "fixed" ? [{ id: "fixed", label: n.quality.label }] : n.quality.options
|
|
1562
|
+
), a = V(
|
|
1563
|
+
() => n.quality.kind === "fixed" ? "fixed" : n.quality.selectedId
|
|
1564
|
+
), o = V(() => i.value.find((c) => c.id === a.value).label), l = V(
|
|
1565
|
+
() => n.quality.kind === "available" && i.value.length > 1 && n.quality.selectedId !== n.quality.activeId
|
|
1566
|
+
);
|
|
1567
|
+
te([() => n.quality.kind, () => i.value.length], () => {
|
|
1568
|
+
r.value = !1;
|
|
1569
|
+
});
|
|
1570
|
+
function u(c) {
|
|
1571
|
+
c.composedPath().includes(e.value) || (r.value = !1);
|
|
1572
|
+
}
|
|
1573
|
+
function f(c) {
|
|
1574
|
+
n.quality.kind === "available" && c !== n.quality.selectedId && n.quality.select(c), r.value = !1;
|
|
1575
|
+
}
|
|
1576
|
+
return qe(() => document.addEventListener("pointerdown", u, !0)), Te(() => document.removeEventListener("pointerdown", u, !0)), (c, P) => (O(), _("div", {
|
|
1577
|
+
ref_key: "host",
|
|
1578
|
+
ref: e,
|
|
1579
|
+
class: "mp-video-quality",
|
|
1580
|
+
onKeydown: P[1] || (P[1] = Ze(ae((x) => r.value = !1, ["stop", "prevent"]), ["esc"]))
|
|
1581
|
+
}, [
|
|
1582
|
+
T("button", {
|
|
1583
|
+
type: "button",
|
|
1584
|
+
class: "mp-video-quality__trigger",
|
|
1585
|
+
"aria-label": "视频清晰度",
|
|
1586
|
+
"aria-expanded": r.value,
|
|
1587
|
+
"aria-busy": l.value,
|
|
1588
|
+
title: l.value ? `${o.value}(切换中)` : o.value,
|
|
1589
|
+
onClick: P[0] || (P[0] = (x) => r.value = !r.value)
|
|
1590
|
+
}, [
|
|
1591
|
+
Ct(ue(o.value), 1),
|
|
1592
|
+
l.value ? (O(), _("span", na, "…")) : J("", !0)
|
|
1593
|
+
], 8, ta),
|
|
1594
|
+
r.value ? (O(), _("div", aa, [
|
|
1595
|
+
(O(!0), _($e, null, Ye(i.value, (x) => (O(), _("button", {
|
|
1596
|
+
key: x.id,
|
|
1597
|
+
type: "button",
|
|
1598
|
+
"aria-pressed": x.id === a.value,
|
|
1599
|
+
onClick: (y) => f(x.id)
|
|
1600
|
+
}, ue(x.label), 9, ia))), 128))
|
|
1601
|
+
])) : J("", !0)
|
|
1602
|
+
], 544));
|
|
1603
|
+
}
|
|
1604
|
+
}), oa = {
|
|
1476
1605
|
key: 0,
|
|
1477
1606
|
class: "mp-video-seek-preview"
|
|
1478
|
-
},
|
|
1607
|
+
}, la = ["aria-label", "disabled"], sa = { class: "mp-video-time" }, ua = ["tabindex", "aria-disabled", "aria-valuemax", "aria-valuenow", "aria-valuetext"], ca = /* @__PURE__ */ T("span", { class: "mp-video-progress__rail" }, null, -1), da = { class: "mp-video-time" }, fa = ["aria-label", "aria-pressed"], ma = ["aria-label", "disabled"], pa = /* @__PURE__ */ Le({
|
|
1479
1608
|
__name: "VideoControls",
|
|
1480
1609
|
props: {
|
|
1481
1610
|
playback: {},
|
|
1482
1611
|
fullscreen: { type: Boolean },
|
|
1483
|
-
canFullscreen: { type: Boolean }
|
|
1612
|
+
canFullscreen: { type: Boolean },
|
|
1613
|
+
quality: {},
|
|
1614
|
+
visible: { type: Boolean }
|
|
1484
1615
|
},
|
|
1485
1616
|
emits: ["fullscreen"],
|
|
1486
1617
|
setup(t, { emit: n }) {
|
|
1487
|
-
const r = t, e = n, i =
|
|
1618
|
+
const r = t, e = n, i = L(), { state: a, seekable: o, displayTime: l, progress: u, bufferedRanges: f } = r.playback;
|
|
1488
1619
|
function c(w) {
|
|
1489
1620
|
const g = i.value.getBoundingClientRect();
|
|
1490
1621
|
r.playback.scrub((w.clientX - g.left) / Math.max(1, g.width) * a.duration);
|
|
1491
1622
|
}
|
|
1492
|
-
function
|
|
1623
|
+
function P(w) {
|
|
1493
1624
|
!o.value || w.pointerType === "mouse" && w.button !== 0 || (i.value.setPointerCapture(w.pointerId), r.playback.beginScrub(), c(w));
|
|
1494
1625
|
}
|
|
1495
|
-
function
|
|
1626
|
+
function x(w) {
|
|
1496
1627
|
a.scrubbing && c(w);
|
|
1497
1628
|
}
|
|
1498
|
-
function
|
|
1629
|
+
function y(w) {
|
|
1499
1630
|
a.scrubbing && (c(w), r.playback.endScrub());
|
|
1500
1631
|
}
|
|
1501
|
-
function
|
|
1632
|
+
function R(w) {
|
|
1502
1633
|
r.playback.beginScrub(), r.playback.scrub(l.value + w), r.playback.endScrub();
|
|
1503
1634
|
}
|
|
1504
|
-
return (w, g) => (
|
|
1635
|
+
return (w, g) => (O(), _("div", {
|
|
1505
1636
|
class: "mp-video-controls",
|
|
1506
1637
|
"data-preview-control": "",
|
|
1507
|
-
onPointerdown: g[9] || (g[9] =
|
|
1638
|
+
onPointerdown: g[9] || (g[9] = ae(() => {
|
|
1508
1639
|
}, ["stop"])),
|
|
1509
|
-
onPointermove: g[10] || (g[10] =
|
|
1640
|
+
onPointermove: g[10] || (g[10] = ae(() => {
|
|
1510
1641
|
}, ["stop"])),
|
|
1511
|
-
onPointerup: g[11] || (g[11] =
|
|
1642
|
+
onPointerup: g[11] || (g[11] = ae(() => {
|
|
1512
1643
|
}, ["stop"])),
|
|
1513
|
-
onPointercancel: g[12] || (g[12] =
|
|
1644
|
+
onPointercancel: g[12] || (g[12] = ae(() => {
|
|
1514
1645
|
}, ["stop"])),
|
|
1515
|
-
onClick: g[13] || (g[13] =
|
|
1646
|
+
onClick: g[13] || (g[13] = ae(() => {
|
|
1516
1647
|
}, ["stop"])),
|
|
1517
|
-
onDblclick: g[14] || (g[14] =
|
|
1648
|
+
onDblclick: g[14] || (g[14] = ae(() => {
|
|
1518
1649
|
}, ["stop"])),
|
|
1519
|
-
onKeydown: g[15] || (g[15] =
|
|
1650
|
+
onKeydown: g[15] || (g[15] = ae(() => {
|
|
1520
1651
|
}, ["stop"]))
|
|
1521
1652
|
}, [
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
T("span", null, " / " +
|
|
1525
|
-
])) :
|
|
1653
|
+
p(a).scrubbing ? (O(), _("div", oa, [
|
|
1654
|
+
Ct(ue(p(_e)(p(l))), 1),
|
|
1655
|
+
T("span", null, " / " + ue(p(_e)(p(a).duration)), 1)
|
|
1656
|
+
])) : J("", !0),
|
|
1526
1657
|
T("button", {
|
|
1527
1658
|
type: "button",
|
|
1528
|
-
"aria-label":
|
|
1529
|
-
disabled:
|
|
1659
|
+
"aria-label": p(a).ended ? "重新播放视频" : p(a).playing ? "暂停视频" : "播放视频",
|
|
1660
|
+
disabled: p(a).status === "error",
|
|
1530
1661
|
onClick: g[0] || (g[0] = //@ts-ignore
|
|
1531
|
-
(...
|
|
1662
|
+
(...M) => w.playback.toggle && w.playback.toggle(...M))
|
|
1532
1663
|
}, [
|
|
1533
|
-
|
|
1534
|
-
name:
|
|
1664
|
+
ze(at, {
|
|
1665
|
+
name: p(a).ended ? "replay" : p(a).playing ? "pause" : "play"
|
|
1535
1666
|
}, null, 8, ["name"])
|
|
1536
|
-
], 8,
|
|
1537
|
-
T("time",
|
|
1667
|
+
], 8, la),
|
|
1668
|
+
T("time", sa, ue(p(_e)(p(l))), 1),
|
|
1538
1669
|
T("div", {
|
|
1539
1670
|
ref_key: "track",
|
|
1540
1671
|
ref: i,
|
|
1541
|
-
class: De(["mp-video-progress", { "is-scrubbing":
|
|
1672
|
+
class: De(["mp-video-progress", { "is-scrubbing": p(a).scrubbing }]),
|
|
1542
1673
|
role: "slider",
|
|
1543
1674
|
"aria-label": "视频进度",
|
|
1544
|
-
tabindex:
|
|
1545
|
-
"aria-disabled": !
|
|
1675
|
+
tabindex: p(o) ? 0 : -1,
|
|
1676
|
+
"aria-disabled": !p(o),
|
|
1546
1677
|
"aria-valuemin": "0",
|
|
1547
|
-
"aria-valuemax":
|
|
1548
|
-
"aria-valuenow":
|
|
1549
|
-
"aria-valuetext": `${
|
|
1550
|
-
onPointerdown:
|
|
1551
|
-
onPointermove:
|
|
1552
|
-
onPointerup:
|
|
1553
|
-
onPointercancel: g[1] || (g[1] = (
|
|
1554
|
-
onLostpointercapture: g[2] || (g[2] = (
|
|
1678
|
+
"aria-valuemax": p(a).duration,
|
|
1679
|
+
"aria-valuenow": p(l),
|
|
1680
|
+
"aria-valuetext": `${p(_e)(p(l))} / ${p(_e)(p(a).duration)}`,
|
|
1681
|
+
onPointerdown: ae(P, ["prevent"]),
|
|
1682
|
+
onPointermove: ae(x, ["prevent"]),
|
|
1683
|
+
onPointerup: ae(y, ["prevent"]),
|
|
1684
|
+
onPointercancel: g[1] || (g[1] = (M) => w.playback.endScrub(!1)),
|
|
1685
|
+
onLostpointercapture: g[2] || (g[2] = (M) => w.playback.endScrub(!1)),
|
|
1555
1686
|
onKeydown: [
|
|
1556
|
-
g[3] || (g[3] =
|
|
1557
|
-
g[4] || (g[4] =
|
|
1558
|
-
g[5] || (g[5] =
|
|
1559
|
-
g[6] || (g[6] =
|
|
1687
|
+
g[3] || (g[3] = Ze(ae((M) => R(-5), ["prevent"]), ["left"])),
|
|
1688
|
+
g[4] || (g[4] = Ze(ae((M) => R(5), ["prevent"]), ["right"])),
|
|
1689
|
+
g[5] || (g[5] = Ze(ae((M) => R(-p(a).duration), ["prevent"]), ["home"])),
|
|
1690
|
+
g[6] || (g[6] = Ze(ae((M) => R(p(a).duration), ["prevent"]), ["end"]))
|
|
1560
1691
|
]
|
|
1561
1692
|
}, [
|
|
1562
|
-
|
|
1563
|
-
(
|
|
1564
|
-
key:
|
|
1693
|
+
ca,
|
|
1694
|
+
(O(!0), _($e, null, Ye(p(f), (M, D) => (O(), _("span", {
|
|
1695
|
+
key: D,
|
|
1565
1696
|
class: "mp-video-progress__buffered",
|
|
1566
|
-
style:
|
|
1697
|
+
style: me({ left: `${M.left}%`, width: `${M.width}%` })
|
|
1567
1698
|
}, null, 4))), 128)),
|
|
1568
1699
|
T("span", {
|
|
1569
1700
|
class: "mp-video-progress__played",
|
|
1570
|
-
style:
|
|
1701
|
+
style: me({ width: `${p(u)}%` })
|
|
1571
1702
|
}, null, 4),
|
|
1572
1703
|
T("span", {
|
|
1573
1704
|
class: "mp-video-progress__thumb",
|
|
1574
|
-
style:
|
|
1705
|
+
style: me({ left: `${p(u)}%` })
|
|
1575
1706
|
}, null, 4)
|
|
1576
|
-
], 42,
|
|
1577
|
-
T("time",
|
|
1707
|
+
], 42, ua),
|
|
1708
|
+
T("time", da, ue(p(_e)(p(a).duration)), 1),
|
|
1709
|
+
w.quality.kind !== "unavailable" && w.visible && p(a).status !== "error" ? (O(), Ue(ra, {
|
|
1710
|
+
key: 1,
|
|
1711
|
+
quality: w.quality
|
|
1712
|
+
}, null, 8, ["quality"])) : J("", !0),
|
|
1578
1713
|
T("button", {
|
|
1579
1714
|
type: "button",
|
|
1580
1715
|
class: "mp-video-volume",
|
|
1581
|
-
"aria-label":
|
|
1582
|
-
"aria-pressed":
|
|
1716
|
+
"aria-label": p(a).muted ? "开启声音" : "静音视频",
|
|
1717
|
+
"aria-pressed": p(a).muted,
|
|
1583
1718
|
onClick: g[7] || (g[7] = //@ts-ignore
|
|
1584
|
-
(...
|
|
1719
|
+
(...M) => w.playback.toggleMuted && w.playback.toggleMuted(...M))
|
|
1585
1720
|
}, [
|
|
1586
|
-
|
|
1587
|
-
name:
|
|
1721
|
+
ze(at, {
|
|
1722
|
+
name: p(a).muted ? "muted" : "volume"
|
|
1588
1723
|
}, null, 8, ["name"])
|
|
1589
|
-
], 8,
|
|
1724
|
+
], 8, fa),
|
|
1590
1725
|
T("button", {
|
|
1591
1726
|
type: "button",
|
|
1592
1727
|
"aria-label": w.fullscreen ? "退出视频全屏" : "视频全屏",
|
|
1593
1728
|
disabled: !w.canFullscreen,
|
|
1594
|
-
onClick: g[8] || (g[8] = (
|
|
1729
|
+
onClick: g[8] || (g[8] = (M) => e("fullscreen"))
|
|
1595
1730
|
}, [
|
|
1596
|
-
|
|
1731
|
+
ze(at, {
|
|
1597
1732
|
name: w.fullscreen ? "exit" : "fullscreen"
|
|
1598
1733
|
}, null, 8, ["name"])
|
|
1599
|
-
], 8,
|
|
1734
|
+
], 8, ma)
|
|
1600
1735
|
], 32));
|
|
1601
1736
|
}
|
|
1602
|
-
}),
|
|
1737
|
+
}), ga = ["data-playback"], ha = ["muted", "loop", "preload"], va = {
|
|
1603
1738
|
key: 1,
|
|
1604
1739
|
class: "mp-video-loading",
|
|
1605
1740
|
role: "status",
|
|
1606
1741
|
"aria-label": "视频缓冲中"
|
|
1607
|
-
},
|
|
1608
|
-
|
|
1609
|
-
],
|
|
1742
|
+
}, ya = /* @__PURE__ */ T("span", { class: "mp-spinner" }, null, -1), wa = [
|
|
1743
|
+
ya
|
|
1744
|
+
], ba = ["aria-label"], ka = {
|
|
1610
1745
|
key: 3,
|
|
1611
1746
|
class: "mp-video-error",
|
|
1612
1747
|
role: "alert"
|
|
1613
|
-
},
|
|
1748
|
+
}, xa = ["inert"], Ma = /* @__PURE__ */ Le({
|
|
1614
1749
|
inheritAttrs: !1,
|
|
1615
1750
|
__name: "VideoDomRenderer",
|
|
1616
1751
|
props: {
|
|
@@ -1619,10 +1754,10 @@ const jn = {
|
|
|
1619
1754
|
quality: { default: "screen" },
|
|
1620
1755
|
requestVersion: { default: 0 },
|
|
1621
1756
|
priority: { default: 0 },
|
|
1622
|
-
resourcePolicy: { default: () =>
|
|
1623
|
-
resolveSource: { type: Function, default:
|
|
1757
|
+
resourcePolicy: { default: () => Ke },
|
|
1758
|
+
resolveSource: { type: Function, default: Qe },
|
|
1624
1759
|
media: {},
|
|
1625
|
-
videoLoader: { type: Function, default:
|
|
1760
|
+
videoLoader: { type: Function, default: rt },
|
|
1626
1761
|
core: {},
|
|
1627
1762
|
active: { type: Boolean, default: !0 },
|
|
1628
1763
|
enabled: { type: Boolean, default: !0 },
|
|
@@ -1637,81 +1772,106 @@ const jn = {
|
|
|
1637
1772
|
},
|
|
1638
1773
|
emits: ["originalState", "ready", "error"],
|
|
1639
1774
|
setup(t, { expose: n, emit: r }) {
|
|
1640
|
-
const e = t, i = r, a =
|
|
1775
|
+
const e = t, i = r, a = L(!1), o = V(() => ({
|
|
1641
1776
|
...e.media,
|
|
1642
1777
|
type: "image",
|
|
1643
1778
|
src: e.media.poster || e.media.previewSrc || e.media.thumbnail
|
|
1644
|
-
})), l =
|
|
1779
|
+
})), l = L(), u = L(), f = Gn(
|
|
1780
|
+
() => l.value,
|
|
1781
|
+
() => u.value,
|
|
1782
|
+
() => e.core.mediaSize.value
|
|
1783
|
+
), c = L(), P = L(!1), x = L(!1), y = _t(
|
|
1645
1784
|
() => l.value,
|
|
1646
1785
|
(v) => i("error", v)
|
|
1647
|
-
);
|
|
1648
|
-
|
|
1786
|
+
), R = it({ kind: "unavailable" });
|
|
1787
|
+
function w(v) {
|
|
1788
|
+
if (v.kind !== "available") {
|
|
1789
|
+
R.value = v;
|
|
1790
|
+
return;
|
|
1791
|
+
}
|
|
1792
|
+
R.value = {
|
|
1793
|
+
...v,
|
|
1794
|
+
select: (q) => {
|
|
1795
|
+
a.value ? f.run(() => v.select(q)) : v.select(q);
|
|
1796
|
+
}
|
|
1797
|
+
};
|
|
1798
|
+
}
|
|
1799
|
+
It(
|
|
1649
1800
|
() => l.value,
|
|
1650
1801
|
() => e.media,
|
|
1651
1802
|
() => e.active && e.loadEnabled,
|
|
1652
1803
|
() => e.videoLoader,
|
|
1653
|
-
|
|
1804
|
+
{
|
|
1805
|
+
...y.sourceObserver,
|
|
1806
|
+
error: (v) => {
|
|
1807
|
+
f.clear(), y.sourceObserver.error(v);
|
|
1808
|
+
},
|
|
1809
|
+
quality: w,
|
|
1810
|
+
reset: () => {
|
|
1811
|
+
f.clear(), R.value = { kind: "unavailable" }, y.resetSource();
|
|
1812
|
+
}
|
|
1813
|
+
}
|
|
1654
1814
|
);
|
|
1655
|
-
let
|
|
1815
|
+
let g = () => {
|
|
1656
1816
|
};
|
|
1657
|
-
const { state:
|
|
1817
|
+
const { state: M } = y, D = V(
|
|
1658
1818
|
() => e.controls && e.active && e.enabled && e.controlsVisible
|
|
1659
1819
|
);
|
|
1660
|
-
function
|
|
1661
|
-
return e.teleportControls ?
|
|
1820
|
+
function h() {
|
|
1821
|
+
return e.teleportControls ? c.value.closest(".mp-viewer") : e.core.containerRef.value;
|
|
1662
1822
|
}
|
|
1663
|
-
async function
|
|
1664
|
-
if (
|
|
1823
|
+
async function b() {
|
|
1824
|
+
if (x.value)
|
|
1665
1825
|
try {
|
|
1666
|
-
document.fullscreenElement ===
|
|
1826
|
+
document.fullscreenElement === h() ? await document.exitFullscreen() : document.fullscreenEnabled ? await h().requestFullscreen() : l.value.webkitEnterFullscreen();
|
|
1667
1827
|
} catch (v) {
|
|
1668
1828
|
i("error", Ve(v));
|
|
1669
1829
|
}
|
|
1670
1830
|
}
|
|
1671
|
-
function
|
|
1672
|
-
|
|
1831
|
+
function m() {
|
|
1832
|
+
P.value = document.fullscreenElement === h();
|
|
1673
1833
|
}
|
|
1674
|
-
function
|
|
1675
|
-
!e.active || !e.enabled ?
|
|
1834
|
+
function k() {
|
|
1835
|
+
!e.active || !e.enabled ? y.pause() : e.autoplay && y.play();
|
|
1676
1836
|
}
|
|
1677
|
-
function
|
|
1678
|
-
document.hidden &&
|
|
1837
|
+
function C() {
|
|
1838
|
+
document.hidden && y.pause();
|
|
1679
1839
|
}
|
|
1680
1840
|
qe(() => {
|
|
1681
|
-
|
|
1841
|
+
M.muted = l.value.muted, x.value = document.fullscreenEnabled || "webkitEnterFullscreen" in l.value, document.addEventListener("fullscreenchange", m), document.addEventListener("visibilitychange", C), g = te(() => [e.active, e.enabled, e.autoplay], k, {
|
|
1682
1842
|
flush: "post"
|
|
1683
|
-
}),
|
|
1843
|
+
}), k();
|
|
1684
1844
|
}), Te(() => {
|
|
1685
|
-
|
|
1845
|
+
f.clear(), g(), y.dispose(), document.removeEventListener("fullscreenchange", m), document.removeEventListener("visibilitychange", C), document.fullscreenElement === h() && document.exitFullscreen().catch(() => {
|
|
1686
1846
|
});
|
|
1687
1847
|
});
|
|
1688
|
-
const
|
|
1848
|
+
const B = V(() => ({
|
|
1689
1849
|
transform: `translate(-50%, -50%) translate3d(${e.core.state.offsetX}px, ${e.core.state.offsetY}px, 0)`
|
|
1690
|
-
})),
|
|
1850
|
+
})), $ = V(() => ({
|
|
1691
1851
|
width: `${e.core.mediaSize.value.width * e.core.displayScale.value}px`,
|
|
1692
1852
|
height: `${e.core.mediaSize.value.height * e.core.displayScale.value}px`,
|
|
1693
1853
|
transform: `rotate(${e.core.state.rotation}deg)`
|
|
1694
1854
|
}));
|
|
1695
|
-
function
|
|
1855
|
+
function z() {
|
|
1696
1856
|
a.value = !0, e.core.setMediaElement(l.value), i("ready", "screen");
|
|
1697
1857
|
}
|
|
1698
|
-
function
|
|
1699
|
-
return { image: a.value ?
|
|
1858
|
+
function F() {
|
|
1859
|
+
return { image: f.active.value ? f.snapshot() : a.value ? jn(l.value, e.core.mediaSize.value) : e.core.mediaRef.value, scale: 1 };
|
|
1700
1860
|
}
|
|
1701
1861
|
return n({
|
|
1702
|
-
togglePlayback:
|
|
1703
|
-
toggleFullscreen:
|
|
1704
|
-
playback:
|
|
1705
|
-
captureFrame:
|
|
1706
|
-
retainFrame: () => ({ ...
|
|
1862
|
+
togglePlayback: y.toggle,
|
|
1863
|
+
toggleFullscreen: b,
|
|
1864
|
+
playback: y,
|
|
1865
|
+
captureFrame: F,
|
|
1866
|
+
retainFrame: () => ({ ...F(), release: () => {
|
|
1707
1867
|
} })
|
|
1708
|
-
}), (v,
|
|
1868
|
+
}), (v, q) => (O(), _("div", {
|
|
1709
1869
|
ref_key: "host",
|
|
1710
|
-
ref:
|
|
1870
|
+
ref: c,
|
|
1711
1871
|
class: "mp-dom-renderer mp-video-player",
|
|
1712
|
-
"data-playback":
|
|
1872
|
+
"data-playback": p(M).ended ? "ended" : p(M).playing ? "playing" : "paused"
|
|
1713
1873
|
}, [
|
|
1714
|
-
a.value ?
|
|
1874
|
+
a.value ? J("", !0) : (O(), Ue(gt, {
|
|
1715
1875
|
key: 0,
|
|
1716
1876
|
active: v.active,
|
|
1717
1877
|
media: o.value,
|
|
@@ -1725,15 +1885,15 @@ const jn = {
|
|
|
1725
1885
|
priority: v.priority,
|
|
1726
1886
|
"resource-policy": v.resourcePolicy,
|
|
1727
1887
|
"resolve-source": v.resolveSource,
|
|
1728
|
-
onReady:
|
|
1729
|
-
onError:
|
|
1730
|
-
onOriginalState:
|
|
1888
|
+
onReady: q[0] || (q[0] = (U) => i("ready", U)),
|
|
1889
|
+
onError: q[1] || (q[1] = (U) => i("error", U)),
|
|
1890
|
+
onOriginalState: q[2] || (q[2] = (U, G) => i("originalState", U, G))
|
|
1731
1891
|
}, null, 8, ["active", "media", "core", "initial-image", "rendering", "quality", "request-version", "load-enabled", "priority", "resource-policy", "resolve-source"])),
|
|
1732
1892
|
T("div", {
|
|
1733
1893
|
class: "mp-dom-renderer__frame",
|
|
1734
|
-
style:
|
|
1894
|
+
style: me([B.value, { visibility: a.value ? "inherit" : "hidden" }])
|
|
1735
1895
|
}, [
|
|
1736
|
-
T("video",
|
|
1896
|
+
T("video", je({
|
|
1737
1897
|
ref_key: "videoRef",
|
|
1738
1898
|
ref: l,
|
|
1739
1899
|
class: "mp-dom-renderer__node",
|
|
@@ -1743,61 +1903,72 @@ const jn = {
|
|
|
1743
1903
|
"webkit-playsinline": "true",
|
|
1744
1904
|
crossorigin: "anonymous",
|
|
1745
1905
|
preload: v.active && v.loadEnabled ? "auto" : "none",
|
|
1746
|
-
style:
|
|
1747
|
-
},
|
|
1906
|
+
style: $.value
|
|
1907
|
+
}, pt(p(y).events, !0), { onPlaying: z }), null, 16, ha),
|
|
1908
|
+
Lt(T("canvas", {
|
|
1909
|
+
ref_key: "retainedFrame",
|
|
1910
|
+
ref: u,
|
|
1911
|
+
class: "mp-dom-renderer__node mp-video-retained-frame",
|
|
1912
|
+
style: me($.value),
|
|
1913
|
+
"aria-hidden": "true"
|
|
1914
|
+
}, null, 4), [
|
|
1915
|
+
[Ft, p(f).active.value]
|
|
1916
|
+
])
|
|
1748
1917
|
], 4),
|
|
1749
|
-
v.active && v.enabled &&
|
|
1750
|
-
|
|
1918
|
+
v.active && v.enabled && p(M).buffering && p(M).status !== "error" ? (O(), _("div", va, wa)) : J("", !0),
|
|
1919
|
+
D.value && !p(M).playing && !p(M).buffering && p(M).status !== "error" ? (O(), _("button", {
|
|
1751
1920
|
key: 2,
|
|
1752
1921
|
type: "button",
|
|
1753
1922
|
class: "mp-video-center-play",
|
|
1754
1923
|
"data-preview-control": "",
|
|
1755
|
-
"aria-label":
|
|
1756
|
-
onPointerdown:
|
|
1924
|
+
"aria-label": p(M).ended ? "重新播放" : "开始播放视频",
|
|
1925
|
+
onPointerdown: q[3] || (q[3] = ae(() => {
|
|
1757
1926
|
}, ["stop"])),
|
|
1758
|
-
onPointerup:
|
|
1927
|
+
onPointerup: q[4] || (q[4] = ae(() => {
|
|
1759
1928
|
}, ["stop"])),
|
|
1760
|
-
onClick:
|
|
1929
|
+
onClick: q[5] || (q[5] = ae(
|
|
1761
1930
|
//@ts-ignore
|
|
1762
|
-
(...
|
|
1931
|
+
(...U) => p(y).toggle && p(y).toggle(...U),
|
|
1763
1932
|
["stop"]
|
|
1764
1933
|
))
|
|
1765
1934
|
}, [
|
|
1766
|
-
|
|
1767
|
-
name:
|
|
1935
|
+
ze(at, {
|
|
1936
|
+
name: p(M).ended ? "replay" : "play"
|
|
1768
1937
|
}, null, 8, ["name"])
|
|
1769
|
-
], 40,
|
|
1770
|
-
|
|
1771
|
-
v.controls && v.active && v.enabled ? (
|
|
1938
|
+
], 40, ba)) : J("", !0),
|
|
1939
|
+
p(M).status === "error" ? (O(), _("div", ka, "视频暂时无法播放")) : J("", !0),
|
|
1940
|
+
v.controls && v.active && v.enabled ? (O(), Ue($t, {
|
|
1772
1941
|
key: 4,
|
|
1773
1942
|
to: v.controlsTarget,
|
|
1774
1943
|
disabled: !v.teleportControls
|
|
1775
1944
|
}, [
|
|
1776
1945
|
T("div", {
|
|
1777
|
-
class: De(["mp-video-control-layer", { "is-hidden": !
|
|
1778
|
-
inert: !
|
|
1946
|
+
class: De(["mp-video-control-layer", { "is-hidden": !D.value }]),
|
|
1947
|
+
inert: !D.value
|
|
1779
1948
|
}, [
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
|
|
1783
|
-
|
|
1784
|
-
|
|
1785
|
-
|
|
1786
|
-
|
|
1787
|
-
|
|
1788
|
-
|
|
1789
|
-
|
|
1790
|
-
|
|
1949
|
+
ze(pa, {
|
|
1950
|
+
quality: R.value,
|
|
1951
|
+
visible: D.value,
|
|
1952
|
+
playback: p(y),
|
|
1953
|
+
fullscreen: P.value,
|
|
1954
|
+
"can-fullscreen": x.value,
|
|
1955
|
+
onFullscreen: b
|
|
1956
|
+
}, null, 8, ["quality", "visible", "playback", "fullscreen", "can-fullscreen"])
|
|
1957
|
+
], 10, xa)
|
|
1958
|
+
], 8, ["to", "disabled"])) : J("", !0)
|
|
1959
|
+
], 8, ga));
|
|
1960
|
+
}
|
|
1961
|
+
}), Sa = ["data-scale", "data-rotation", "data-live-holding"], Pa = /* @__PURE__ */ Le({
|
|
1791
1962
|
__name: "PreviewStage",
|
|
1792
1963
|
props: {
|
|
1793
1964
|
media: {},
|
|
1794
|
-
videoLoader: { type: Function, default:
|
|
1965
|
+
videoLoader: { type: Function, default: rt },
|
|
1795
1966
|
livePlaying: { type: Boolean, default: !1 },
|
|
1796
1967
|
active: { type: Boolean, default: !0 },
|
|
1797
1968
|
requestVersion: { default: 0 },
|
|
1798
1969
|
loadEnabled: { type: Boolean, default: !0 },
|
|
1799
|
-
resourcePolicy: { default: () =>
|
|
1800
|
-
resolveSource: { type: Function, default:
|
|
1970
|
+
resourcePolicy: { default: () => Ke },
|
|
1971
|
+
resolveSource: { type: Function, default: Qe },
|
|
1801
1972
|
inactiveResetDuration: { default: 0 },
|
|
1802
1973
|
disabled: { type: Boolean, default: !1 },
|
|
1803
1974
|
externalGestures: { type: Boolean, default: !1 },
|
|
@@ -1811,12 +1982,12 @@ const jn = {
|
|
|
1811
1982
|
},
|
|
1812
1983
|
emits: ["tap", "doubleTap", "scale", "swipeDownProgress", "close", "previous", "next", "pageDrag", "pageRelease", "ready", "error", "originalState", "liveState", "liveEnded"],
|
|
1813
1984
|
setup(t, { expose: n, emit: r }) {
|
|
1814
|
-
const e = t, i = r, a =
|
|
1985
|
+
const e = t, i = r, a = L(!1), o = L("loading"), l = hn({
|
|
1815
1986
|
motionActive: () => e.paging,
|
|
1816
1987
|
interactive: () => e.active && !e.disabled,
|
|
1817
1988
|
zoomable: () => !0,
|
|
1818
1989
|
doubleTapZoom: () => Bn(e.media, l.core.viewportSize.value),
|
|
1819
|
-
holdable: () => e.media.type === "live-photo" &&
|
|
1990
|
+
holdable: () => e.media.type === "live-photo" && P.value === "ready" && o.value === "idle",
|
|
1820
1991
|
onHoldStart: () => {
|
|
1821
1992
|
a.value = !0;
|
|
1822
1993
|
},
|
|
@@ -1837,11 +2008,11 @@ const jn = {
|
|
|
1837
2008
|
onPageDrag: (h) => {
|
|
1838
2009
|
e.active && i("pageDrag", h);
|
|
1839
2010
|
},
|
|
1840
|
-
onPageRelease: (h,
|
|
1841
|
-
}), u = l.core.containerRef,
|
|
1842
|
-
() => e.media.type === "video" ?
|
|
2011
|
+
onPageRelease: (h, b) => i("pageRelease", h, b)
|
|
2012
|
+
}), u = l.core.containerRef, f = l.core.downDragStyle, c = l.core.state, P = L("loading"), x = L("thumbnail"), y = L(), R = V(
|
|
2013
|
+
() => e.media.type === "video" ? Ma : e.media.type === "live-photo" ? Zn : gt
|
|
1843
2014
|
), w = V(
|
|
1844
|
-
() =>
|
|
2015
|
+
() => x.value === "full" || e.quality === "full" ? "full" : e.quality
|
|
1845
2016
|
);
|
|
1846
2017
|
te(
|
|
1847
2018
|
[
|
|
@@ -1851,17 +2022,17 @@ const jn = {
|
|
|
1851
2022
|
() => e.media.thumbnail
|
|
1852
2023
|
],
|
|
1853
2024
|
() => {
|
|
1854
|
-
|
|
2025
|
+
x.value = "thumbnail";
|
|
1855
2026
|
}
|
|
1856
2027
|
), te(
|
|
1857
2028
|
() => e.media.id,
|
|
1858
2029
|
() => {
|
|
1859
|
-
|
|
2030
|
+
P.value = "loading", l.core.setRotation(0);
|
|
1860
2031
|
}
|
|
1861
2032
|
), te(
|
|
1862
2033
|
[() => e.media.width, () => e.media.height],
|
|
1863
|
-
([h,
|
|
1864
|
-
l.core.setMediaSize({ width: h, height:
|
|
2034
|
+
([h, b]) => {
|
|
2035
|
+
l.core.setMediaSize({ width: h, height: b });
|
|
1865
2036
|
},
|
|
1866
2037
|
{ immediate: !0 }
|
|
1867
2038
|
), te(
|
|
@@ -1876,12 +2047,12 @@ const jn = {
|
|
|
1876
2047
|
}
|
|
1877
2048
|
);
|
|
1878
2049
|
function g(h) {
|
|
1879
|
-
h === "full" && (
|
|
2050
|
+
h === "full" && (x.value = h), P.value = "ready", i("ready", h);
|
|
1880
2051
|
}
|
|
1881
|
-
function
|
|
2052
|
+
function M(h) {
|
|
1882
2053
|
o.value = h, i("liveState", h);
|
|
1883
2054
|
}
|
|
1884
|
-
const
|
|
2055
|
+
const D = V(
|
|
1885
2056
|
() => e.externalGestures ? {} : {
|
|
1886
2057
|
wheel: l.onWheel,
|
|
1887
2058
|
pointerdown: l.onPointerDown,
|
|
@@ -1897,36 +2068,36 @@ const jn = {
|
|
|
1897
2068
|
onPointerUp: l.onPointerUp,
|
|
1898
2069
|
onPointerCancel: l.onPointerCancel,
|
|
1899
2070
|
onWheel: l.onWheel,
|
|
1900
|
-
readiness:
|
|
2071
|
+
readiness: P,
|
|
1901
2072
|
core: l.core,
|
|
1902
2073
|
rotateBy: l.core.rotateBy,
|
|
1903
2074
|
resetTransform: l.core.resetTransform,
|
|
1904
2075
|
zoomIn: () => l.core.zoomTo(c.level * 1.5, void 0, !0),
|
|
1905
2076
|
zoomOut: () => l.core.zoomTo(c.level / 1.5, void 0, !0),
|
|
1906
|
-
togglePlayback: () =>
|
|
1907
|
-
toggleFullscreen: () =>
|
|
1908
|
-
captureFrame: () =>
|
|
1909
|
-
retainFrame: () =>
|
|
1910
|
-
}), (h,
|
|
2077
|
+
togglePlayback: () => y.value.togglePlayback(),
|
|
2078
|
+
toggleFullscreen: () => y.value.toggleFullscreen(),
|
|
2079
|
+
captureFrame: () => y.value.captureFrame(),
|
|
2080
|
+
retainFrame: () => y.value.retainFrame()
|
|
2081
|
+
}), (h, b) => (O(), _("div", je({
|
|
1911
2082
|
ref_key: "containerRef",
|
|
1912
2083
|
ref: u,
|
|
1913
|
-
class: ["mp-stage", { "is-zoomed":
|
|
1914
|
-
style: f
|
|
1915
|
-
"data-scale":
|
|
1916
|
-
"data-rotation":
|
|
2084
|
+
class: ["mp-stage", { "is-zoomed": p(c).level > 1, "is-dismissing": p(c).draggingDown }],
|
|
2085
|
+
style: p(f),
|
|
2086
|
+
"data-scale": p(c).level.toFixed(3),
|
|
2087
|
+
"data-rotation": p(c).rotation,
|
|
1917
2088
|
"data-live-holding": a.value,
|
|
1918
|
-
onContextmenu:
|
|
2089
|
+
onContextmenu: b[3] || (b[3] = (m) => {
|
|
1919
2090
|
h.media.type === "live-photo" && m.preventDefault();
|
|
1920
2091
|
})
|
|
1921
|
-
},
|
|
1922
|
-
(
|
|
2092
|
+
}, pt(D.value, !0)), [
|
|
2093
|
+
(O(), Ue(en(R.value), je({
|
|
1923
2094
|
ref_key: "rendererRef",
|
|
1924
|
-
ref:
|
|
2095
|
+
ref: y,
|
|
1925
2096
|
media: h.media
|
|
1926
2097
|
}, h.media.type === "video" ? { videoLoader: h.videoLoader } : {}, {
|
|
1927
2098
|
"initial-image": h.initialImage,
|
|
1928
2099
|
rendering: h.rendering,
|
|
1929
|
-
core:
|
|
2100
|
+
core: p(l).core,
|
|
1930
2101
|
quality: w.value,
|
|
1931
2102
|
"request-version": h.requestVersion,
|
|
1932
2103
|
"load-enabled": h.loadEnabled,
|
|
@@ -1940,24 +2111,24 @@ const jn = {
|
|
|
1940
2111
|
"controls-target": h.controlsTarget,
|
|
1941
2112
|
active: h.active,
|
|
1942
2113
|
onReady: g,
|
|
1943
|
-
onError:
|
|
1944
|
-
onOriginalState:
|
|
1945
|
-
onLiveState:
|
|
1946
|
-
onLiveEnded:
|
|
2114
|
+
onError: b[0] || (b[0] = (m) => i("error", m)),
|
|
2115
|
+
onOriginalState: b[1] || (b[1] = (m, k) => i("originalState", m, k)),
|
|
2116
|
+
onLiveState: M,
|
|
2117
|
+
onLiveEnded: b[2] || (b[2] = (m) => i("liveEnded"))
|
|
1947
2118
|
}), null, 16, ["media", "initial-image", "rendering", "core", "quality", "request-version", "load-enabled", "priority", "resource-policy", "resolve-source", "playing", "enabled", "controls-visible", "teleport-controls", "controls-target", "active"]))
|
|
1948
|
-
], 16,
|
|
2119
|
+
], 16, Sa));
|
|
1949
2120
|
}
|
|
1950
2121
|
});
|
|
1951
|
-
function
|
|
1952
|
-
const r =
|
|
2122
|
+
function Ea(t, n) {
|
|
2123
|
+
const r = L(/* @__PURE__ */ new Set()), e = L("idle"), i = L(""), a = L(0), o = L("");
|
|
1953
2124
|
function l() {
|
|
1954
2125
|
o.value = "", e.value = "idle", i.value = "", a.value = 0;
|
|
1955
2126
|
}
|
|
1956
2127
|
function u() {
|
|
1957
2128
|
e.value !== "ready" && (e.value = "loading", i.value = "", a.value++, r.value = /* @__PURE__ */ new Set([...r.value, t().id]));
|
|
1958
2129
|
}
|
|
1959
|
-
function
|
|
1960
|
-
e.value = c, i.value =
|
|
2130
|
+
function f(c, P) {
|
|
2131
|
+
e.value = c, i.value = P, n(t(), c, P);
|
|
1961
2132
|
}
|
|
1962
2133
|
return {
|
|
1963
2134
|
originalIds: r,
|
|
@@ -1967,11 +2138,11 @@ function wa(t, n) {
|
|
|
1967
2138
|
readyId: o,
|
|
1968
2139
|
reset: l,
|
|
1969
2140
|
requestOriginal: u,
|
|
1970
|
-
updateOriginal:
|
|
2141
|
+
updateOriginal: f
|
|
1971
2142
|
};
|
|
1972
2143
|
}
|
|
1973
|
-
function
|
|
1974
|
-
const i =
|
|
2144
|
+
function Ra(t, n, r, e = {}) {
|
|
2145
|
+
const i = L(0), a = mt({
|
|
1975
2146
|
offset: 0,
|
|
1976
2147
|
dragging: !1,
|
|
1977
2148
|
settling: !1,
|
|
@@ -1979,62 +2150,62 @@ function ba(t, n, r, e = {}) {
|
|
|
1979
2150
|
grabbed: !1,
|
|
1980
2151
|
duration: 360
|
|
1981
2152
|
}), o = { readOffset: () => a.offset, flushLayout: () => {
|
|
1982
|
-
}, ...e }, l = 16, u = () => n() + l,
|
|
1983
|
-
() => [i.value - 1, i.value, i.value + 1].filter((
|
|
2153
|
+
}, ...e }, l = 16, u = () => n() + l, f = V(
|
|
2154
|
+
() => [i.value - 1, i.value, i.value + 1].filter((C) => C >= 0 && C < t())
|
|
1984
2155
|
);
|
|
1985
2156
|
let c = setTimeout(() => {
|
|
1986
|
-
}, 0),
|
|
1987
|
-
},
|
|
1988
|
-
function
|
|
1989
|
-
|
|
2157
|
+
}, 0), P = () => {
|
|
2158
|
+
}, x = 0, y = 0;
|
|
2159
|
+
function R() {
|
|
2160
|
+
x += 1, clearTimeout(c), P(), a.settling = !1, a.preparing = !1;
|
|
1990
2161
|
}
|
|
1991
|
-
Te(
|
|
2162
|
+
Te(R);
|
|
1992
2163
|
function w() {
|
|
1993
2164
|
if (!a.settling && !a.preparing) return;
|
|
1994
|
-
const
|
|
1995
|
-
|
|
2165
|
+
const C = a.preparing ? a.offset : o.readOffset();
|
|
2166
|
+
R(), a.offset = C, a.grabbed = !0;
|
|
1996
2167
|
}
|
|
1997
|
-
function g(
|
|
1998
|
-
if (
|
|
1999
|
-
|
|
2168
|
+
function g(C) {
|
|
2169
|
+
if (C === 0) {
|
|
2170
|
+
R(), a.dragging = !1, a.grabbed = !1, a.offset = 0, y = 0;
|
|
2000
2171
|
return;
|
|
2001
2172
|
}
|
|
2002
|
-
a.dragging || (w(),
|
|
2003
|
-
const
|
|
2004
|
-
a.offset =
|
|
2005
|
-
}
|
|
2006
|
-
async function
|
|
2007
|
-
|
|
2008
|
-
const
|
|
2009
|
-
a.offset += (
|
|
2010
|
-
const
|
|
2011
|
-
a.duration = matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 :
|
|
2012
|
-
|
|
2013
|
-
}),
|
|
2173
|
+
a.dragging || (w(), y = a.offset, R(), a.dragging = !0, a.grabbed = !0);
|
|
2174
|
+
const B = y + C, $ = i.value === 0 && B > 0 || i.value === t() - 1 && B < 0;
|
|
2175
|
+
a.offset = $ ? Math.sign(B) * Math.sqrt(Math.abs(B)) * 6 : B;
|
|
2176
|
+
}
|
|
2177
|
+
async function M(C, B = 0) {
|
|
2178
|
+
R();
|
|
2179
|
+
const $ = x, z = i.value;
|
|
2180
|
+
a.offset += (C - z) * u();
|
|
2181
|
+
const F = Math.abs(a.offset), v = ee(F / u(), 0, 1), q = ee(220 + v * 140 - Math.min(Math.abs(B), 2) * 35, 240, 360);
|
|
2182
|
+
a.duration = matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : q, i.value = C, a.dragging = !1, a.grabbed = !1, a.preparing = !0, C !== z && r(C), await Se(), $ === x && (o.flushLayout(), a.preparing = !1, a.settling = !0, a.offset = 0, await new Promise((U) => {
|
|
2183
|
+
P = U, c = setTimeout(U, a.duration);
|
|
2184
|
+
}), $ === x && (a.settling = !1, P = () => {
|
|
2014
2185
|
}));
|
|
2015
2186
|
}
|
|
2016
|
-
function
|
|
2017
|
-
const
|
|
2018
|
-
|
|
2187
|
+
function D(C, B) {
|
|
2188
|
+
const $ = a.offset, z = Math.abs(B) > 0.35 && Math.abs(C) > 16, F = Math.sign(z ? B : $), v = z || Math.abs($) > n() * 0.14;
|
|
2189
|
+
M(ee(i.value - (v ? F : 0), 0, t() - 1), B);
|
|
2019
2190
|
}
|
|
2020
2191
|
function h() {
|
|
2021
|
-
a.grabbed && !a.dragging &&
|
|
2192
|
+
a.grabbed && !a.dragging && M(i.value);
|
|
2022
2193
|
}
|
|
2023
|
-
function
|
|
2194
|
+
function b(C) {
|
|
2024
2195
|
if (a.dragging) return;
|
|
2025
2196
|
w();
|
|
2026
|
-
const
|
|
2027
|
-
|
|
2197
|
+
const B = ee(i.value + C, 0, t() - 1);
|
|
2198
|
+
B !== i.value ? M(B) : h();
|
|
2028
2199
|
}
|
|
2029
|
-
function m(
|
|
2030
|
-
|
|
2200
|
+
function m(C) {
|
|
2201
|
+
R(), i.value = C, a.offset = 0, a.dragging = !1, a.grabbed = !1;
|
|
2031
2202
|
}
|
|
2032
|
-
function
|
|
2033
|
-
i.value =
|
|
2203
|
+
function k(C) {
|
|
2204
|
+
i.value = C;
|
|
2034
2205
|
}
|
|
2035
|
-
return { index: i, state: a, slots:
|
|
2206
|
+
return { index: i, state: a, slots: f, stride: u, drag: g, release: D, go: b, grab: w, resume: h, reset: m, rebase: k, cancel: R };
|
|
2036
2207
|
}
|
|
2037
|
-
function
|
|
2208
|
+
function Ut(t, n, r) {
|
|
2038
2209
|
const e = Math[r === "cover" ? "max" : "min"](
|
|
2039
2210
|
n.width / t.width,
|
|
2040
2211
|
n.height / t.height
|
|
@@ -2049,7 +2220,7 @@ function Ot(t, n, r) {
|
|
|
2049
2220
|
radius: 0
|
|
2050
2221
|
};
|
|
2051
2222
|
}
|
|
2052
|
-
function
|
|
2223
|
+
function Ca(t, n, r) {
|
|
2053
2224
|
const e = (i, a) => i + (a - i) * r;
|
|
2054
2225
|
return {
|
|
2055
2226
|
x: e(t.x, n.x),
|
|
@@ -2075,43 +2246,43 @@ function Pt(t) {
|
|
|
2075
2246
|
height: Math.max(0, Math.min(t.y + e / 2, t.clip.top + t.clip.height) - a)
|
|
2076
2247
|
};
|
|
2077
2248
|
}
|
|
2078
|
-
function
|
|
2249
|
+
function La(t, n, r, e, i) {
|
|
2079
2250
|
const a = Pt(t), o = Pt(n), l = Math.min(a.width / o.width, a.height / o.height), u = {
|
|
2080
2251
|
width: Math.max(a.width, o.width, 1),
|
|
2081
2252
|
height: Math.max(a.height, o.height, 1)
|
|
2082
|
-
},
|
|
2083
|
-
for (let
|
|
2084
|
-
const
|
|
2253
|
+
}, f = 128, c = [], P = [];
|
|
2254
|
+
for (let x = 0; x <= f; x += 1) {
|
|
2255
|
+
const y = x / f, R = Ca(t, n, y);
|
|
2085
2256
|
let w;
|
|
2086
2257
|
if (i)
|
|
2087
2258
|
w = {
|
|
2088
|
-
left: a.left + (o.left - a.left) *
|
|
2089
|
-
top: a.top + (o.top - a.top) *
|
|
2090
|
-
width: a.width + (o.width - a.width) *
|
|
2091
|
-
height: a.height + (o.height - a.height) *
|
|
2259
|
+
left: a.left + (o.left - a.left) * y,
|
|
2260
|
+
top: a.top + (o.top - a.top) * y,
|
|
2261
|
+
width: a.width + (o.width - a.width) * y,
|
|
2262
|
+
height: a.height + (o.height - a.height) * y
|
|
2092
2263
|
};
|
|
2093
2264
|
else {
|
|
2094
|
-
const
|
|
2265
|
+
const D = Math.min(y / 0.78, 1), h = 1 - D * D * D * (D * (D * 6 - 15) + 10), b = l + (1 - l) * y, m = o.width * b + (a.width - o.width * l) * h, k = o.height * b + (a.height - o.height * l) * h;
|
|
2095
2266
|
w = {
|
|
2096
|
-
left: a.left + a.width / 2 + (o.left + o.width / 2 - a.left - a.width / 2) *
|
|
2097
|
-
top: a.top + a.height / 2 + (o.top + o.height / 2 - a.top - a.height / 2) *
|
|
2267
|
+
left: a.left + a.width / 2 + (o.left + o.width / 2 - a.left - a.width / 2) * y - m / 2,
|
|
2268
|
+
top: a.top + a.height / 2 + (o.top + o.height / 2 - a.top - a.height / 2) * y - k / 2,
|
|
2098
2269
|
width: m,
|
|
2099
|
-
height:
|
|
2270
|
+
height: k
|
|
2100
2271
|
};
|
|
2101
2272
|
}
|
|
2102
|
-
const g = Math.max(w.width, 1e-3) / u.width,
|
|
2273
|
+
const g = Math.max(w.width, 1e-3) / u.width, M = Math.max(w.height, 1e-3) / u.height;
|
|
2103
2274
|
c.push({
|
|
2104
|
-
transform: `scale(${1 / g},${1 /
|
|
2105
|
-
offset:
|
|
2106
|
-
}),
|
|
2107
|
-
transform: `translate3d(${w.left - r.left}px,${w.top - r.top}px,0) scale(${g},${
|
|
2108
|
-
...t.radius === 0 && n.radius === 0 ? {} : { borderRadius: `${
|
|
2109
|
-
offset:
|
|
2275
|
+
transform: `scale(${1 / g},${1 / M}) translate3d(${R.x - w.left}px,${R.y - w.top}px,0) rotate(${R.rotation}deg) scale(${R.width / e.width}) translate3d(${-e.width / 2}px,${-e.height / 2}px,0)`,
|
|
2276
|
+
offset: y
|
|
2277
|
+
}), P.push({
|
|
2278
|
+
transform: `translate3d(${w.left - r.left}px,${w.top - r.top}px,0) scale(${g},${M})`,
|
|
2279
|
+
...t.radius === 0 && n.radius === 0 ? {} : { borderRadius: `${R.radius / g}px / ${R.radius / M}px` },
|
|
2280
|
+
offset: y
|
|
2110
2281
|
});
|
|
2111
2282
|
}
|
|
2112
|
-
return { pictures: c, masks:
|
|
2283
|
+
return { pictures: c, masks: P, maskSize: u };
|
|
2113
2284
|
}
|
|
2114
|
-
function
|
|
2285
|
+
function Fa() {
|
|
2115
2286
|
let t = { kind: "idle" };
|
|
2116
2287
|
function n() {
|
|
2117
2288
|
t.kind === "playing" && t.animations.forEach((i) => i.cancel()), t = { kind: "idle" };
|
|
@@ -2121,36 +2292,36 @@ function Ma() {
|
|
|
2121
2292
|
}).catch(() => {
|
|
2122
2293
|
}), { kind: "reversing", finished: t.finished });
|
|
2123
2294
|
}
|
|
2124
|
-
async function e(i, a, o, l, u,
|
|
2295
|
+
async function e(i, a, o, l, u, f, c, P, x = P ? 0 : 1, y = 340) {
|
|
2125
2296
|
n();
|
|
2126
|
-
const
|
|
2297
|
+
const R = Math.max(l.width, u.width), w = R * u.height / u.width, g = Math.min(
|
|
2127
2298
|
devicePixelRatio,
|
|
2128
2299
|
2,
|
|
2129
|
-
Math.sqrt(
|
|
2300
|
+
Math.sqrt(ce.maxCanvasPixels / (R * w))
|
|
2130
2301
|
);
|
|
2131
|
-
i.width = Math.max(1, Math.round(
|
|
2132
|
-
const
|
|
2133
|
-
((
|
|
2134
|
-
|
|
2302
|
+
i.width = Math.max(1, Math.round(R * g)), i.height = Math.max(1, Math.round(w * g)), i.style.width = `${R}px`, i.style.height = `${w}px`;
|
|
2303
|
+
const M = i.getContext("2d");
|
|
2304
|
+
((B) => {
|
|
2305
|
+
M.clearRect(0, 0, i.width, i.height), M.imageSmoothingEnabled = !0, M.imageSmoothingQuality = "high", M.drawImage(B, 0, 0, i.width, i.height);
|
|
2135
2306
|
})(o);
|
|
2136
|
-
const h =
|
|
2307
|
+
const h = La(l, u, f, { width: R, height: w }, P);
|
|
2137
2308
|
a.style.width = `${h.maskSize.width}px`, a.style.height = `${h.maskSize.height}px`, a.style.borderRadius = "0";
|
|
2138
2309
|
const m = {
|
|
2139
|
-
duration: matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : Math.max(0,
|
|
2310
|
+
duration: matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : Math.max(0, y),
|
|
2140
2311
|
easing: "cubic-bezier(.2,.78,.2,1)",
|
|
2141
2312
|
fill: "both"
|
|
2142
|
-
},
|
|
2313
|
+
}, k = [
|
|
2143
2314
|
i.animate(h.pictures, m),
|
|
2144
2315
|
a.animate(h.masks, m),
|
|
2145
|
-
c.animate([{ opacity:
|
|
2146
|
-
],
|
|
2316
|
+
c.animate([{ opacity: x }, { opacity: P ? 1 : 0 }], m)
|
|
2317
|
+
], C = Promise.all(k.map((B) => B.finished)).then(() => {
|
|
2147
2318
|
}).catch(() => {
|
|
2148
2319
|
});
|
|
2149
|
-
t = { kind: "playing", entering:
|
|
2320
|
+
t = { kind: "playing", entering: P, animations: k, finished: C }, await C;
|
|
2150
2321
|
}
|
|
2151
2322
|
return { play: e, cancel: n, reverseOpening: r };
|
|
2152
2323
|
}
|
|
2153
|
-
function
|
|
2324
|
+
function Yt(t, n) {
|
|
2154
2325
|
const r = Math.max(t.left, n.left), e = Math.max(t.top, n.top);
|
|
2155
2326
|
return {
|
|
2156
2327
|
left: r,
|
|
@@ -2159,44 +2330,44 @@ function At(t, n) {
|
|
|
2159
2330
|
height: Math.max(0, Math.min(t.top + t.height, n.top + n.height) - e)
|
|
2160
2331
|
};
|
|
2161
2332
|
}
|
|
2162
|
-
function
|
|
2333
|
+
function $a(t, n) {
|
|
2163
2334
|
let r = { ...n };
|
|
2164
2335
|
const e = /^(auto|scroll|overlay)$/;
|
|
2165
2336
|
for (let i = t.parentElement; i !== document.documentElement; i = i.parentElement) {
|
|
2166
2337
|
const a = getComputedStyle(i), o = e.test(a.overflowX), l = e.test(a.overflowY);
|
|
2167
2338
|
if (!o && !l) continue;
|
|
2168
|
-
const u = i.getBoundingClientRect(),
|
|
2169
|
-
r =
|
|
2339
|
+
const u = i.getBoundingClientRect(), f = Number(i.style.getPropertyValue("--mp-transition-inset-top"));
|
|
2340
|
+
r = Yt(r, {
|
|
2170
2341
|
left: o ? u.left : r.left,
|
|
2171
|
-
top: l ? u.top +
|
|
2342
|
+
top: l ? u.top + f : r.top,
|
|
2172
2343
|
width: o ? u.width : r.width,
|
|
2173
|
-
height: l ? Math.max(0, u.height -
|
|
2344
|
+
height: l ? Math.max(0, u.height - f) : r.height
|
|
2174
2345
|
});
|
|
2175
2346
|
}
|
|
2176
2347
|
return r;
|
|
2177
2348
|
}
|
|
2178
|
-
function
|
|
2349
|
+
function Et(t, n, r) {
|
|
2179
2350
|
if (t.kind === "unavailable") return t;
|
|
2180
|
-
const e =
|
|
2181
|
-
return e.clip =
|
|
2351
|
+
const e = Ut(n, t.element.getBoundingClientRect(), "cover");
|
|
2352
|
+
return e.clip = Yt(e.clip, $a(t.element, r)), e.clip.width <= 0 || e.clip.height <= 0 ? { kind: "unavailable" } : (e.radius = parseFloat(getComputedStyle(t.element).borderTopLeftRadius) || 0, { kind: "element", element: t.element, frame: e, viewport: r });
|
|
2182
2353
|
}
|
|
2183
|
-
const
|
|
2354
|
+
const Ta = ["aria-label", "data-phase", "data-chrome", "inert"], qa = ["aria-hidden", "inert", "data-media-id"], Ba = {
|
|
2184
2355
|
key: 0,
|
|
2185
2356
|
class: "mp-resource-state mp-viewer__loading mp-viewer__pages",
|
|
2186
2357
|
role: "status",
|
|
2187
2358
|
"aria-label": "加载中"
|
|
2188
|
-
},
|
|
2359
|
+
}, Ia = /* @__PURE__ */ T("span", {
|
|
2189
2360
|
class: "mp-spinner",
|
|
2190
2361
|
"aria-hidden": "true"
|
|
2191
|
-
}, null, -1),
|
|
2192
|
-
|
|
2193
|
-
],
|
|
2362
|
+
}, null, -1), za = [
|
|
2363
|
+
Ia
|
|
2364
|
+
], Da = ["inert"], Aa = { class: "mp-viewer__toolbar" }, Oa = { class: "mp-viewer__title" }, _a = ["disabled"], Va = { class: "mp-viewer__footer" }, Ua = {
|
|
2194
2365
|
class: "mp-viewer__counter",
|
|
2195
2366
|
"aria-live": "polite"
|
|
2196
|
-
},
|
|
2367
|
+
}, Ya = {
|
|
2197
2368
|
key: 1,
|
|
2198
2369
|
class: "mp-viewer__detail"
|
|
2199
|
-
},
|
|
2370
|
+
}, Ga = /* @__PURE__ */ Le({
|
|
2200
2371
|
inheritAttrs: !1,
|
|
2201
2372
|
__name: "MediaPreview",
|
|
2202
2373
|
props: {
|
|
@@ -2206,9 +2377,9 @@ const Pa = ["aria-label", "data-phase", "data-chrome", "inert"], Ra = ["aria-hid
|
|
|
2206
2377
|
keyboardEnabled: { type: Boolean, default: !0 },
|
|
2207
2378
|
gesturesEnabled: { type: Boolean, default: !0 },
|
|
2208
2379
|
persistentChrome: { type: Boolean, default: !1 },
|
|
2209
|
-
videoLoader: { type: Function, default:
|
|
2210
|
-
resourcePolicy: { default: () =>
|
|
2211
|
-
resolveImageSource: { type: Function, default:
|
|
2380
|
+
videoLoader: { type: Function, default: rt },
|
|
2381
|
+
resourcePolicy: { default: () => Ke },
|
|
2382
|
+
resolveImageSource: { type: Function, default: Qe },
|
|
2212
2383
|
hasMore: { type: Boolean, default: !1 },
|
|
2213
2384
|
appearance: { default: "dark" },
|
|
2214
2385
|
closeDuration: { default: 240 },
|
|
@@ -2217,141 +2388,141 @@ const Pa = ["aria-label", "data-phase", "data-chrome", "inert"], Ra = ["aria-hid
|
|
|
2217
2388
|
},
|
|
2218
2389
|
emits: ["open", "opened", "ready", "closing", "close", "change", "error", "originalState", "loadMore", "phaseChange", "chromeChange"],
|
|
2219
2390
|
setup(t, { expose: n, emit: r }) {
|
|
2220
|
-
const e =
|
|
2391
|
+
const e = tn(), i = t, a = r, o = L("closed");
|
|
2221
2392
|
te(o, (s) => a("phaseChange", s), { flush: "sync" });
|
|
2222
|
-
const l = `mp-video-controls-${
|
|
2223
|
-
() =>
|
|
2224
|
-
(s,
|
|
2225
|
-
), { originalIds:
|
|
2226
|
-
let g = "",
|
|
2227
|
-
const
|
|
2228
|
-
te(
|
|
2229
|
-
const
|
|
2230
|
-
let be = "",
|
|
2231
|
-
const
|
|
2393
|
+
const l = `mp-video-controls-${nn().uid}`, u = L(), f = L(), c = Ea(
|
|
2394
|
+
() => H.value,
|
|
2395
|
+
(s, S, E) => a("originalState", s, S, E)
|
|
2396
|
+
), { originalIds: P, originalStatus: x, originalReason: y, originalRequest: R, readyId: w } = c;
|
|
2397
|
+
let g = "", M = -1;
|
|
2398
|
+
const D = L(), h = L(), b = L(), m = L(!1), k = L(0), C = L(!0);
|
|
2399
|
+
te(C, (s) => a("chromeChange", s), { flush: "sync" });
|
|
2400
|
+
const B = L(!1), $ = L("loading"), z = L(1), F = L(!1), v = L(1), q = L(!1), U = L(!1), G = it(Ce);
|
|
2401
|
+
let be = "", ie = { kind: "unavailable" };
|
|
2402
|
+
const pe = /* @__PURE__ */ new Map(), le = /* @__PURE__ */ new Map();
|
|
2232
2403
|
function Pe(s) {
|
|
2233
|
-
return (
|
|
2234
|
-
|
|
2404
|
+
return (S) => {
|
|
2405
|
+
le.set(s, S);
|
|
2235
2406
|
};
|
|
2236
2407
|
}
|
|
2237
|
-
function
|
|
2238
|
-
return (
|
|
2239
|
-
|
|
2408
|
+
function ne(s) {
|
|
2409
|
+
return (S) => {
|
|
2410
|
+
pe.set(s, S);
|
|
2240
2411
|
};
|
|
2241
2412
|
}
|
|
2242
|
-
const
|
|
2413
|
+
const A = Ra(
|
|
2243
2414
|
() => i.items.length,
|
|
2244
|
-
() =>
|
|
2415
|
+
() => v.value,
|
|
2245
2416
|
(s) => {
|
|
2246
|
-
g = i.items[s].id, c.reset(),
|
|
2417
|
+
g = i.items[s].id, c.reset(), z.value = 1, B.value = !1, $.value = "loading", a("change", s), Oe(s);
|
|
2247
2418
|
},
|
|
2248
2419
|
{
|
|
2249
|
-
readOffset: () => new DOMMatrixReadOnly(getComputedStyle(
|
|
2420
|
+
readOffset: () => new DOMMatrixReadOnly(getComputedStyle(le.get(g)).transform).m41,
|
|
2250
2421
|
flushLayout: () => {
|
|
2251
|
-
|
|
2422
|
+
le.get(g).getBoundingClientRect();
|
|
2252
2423
|
}
|
|
2253
2424
|
}
|
|
2254
|
-
),
|
|
2255
|
-
() => o.value === "opening" || m.value ? [
|
|
2425
|
+
), Y = A.index, H = V(() => i.items[Y.value]), Ae = A.slots, Je = V(
|
|
2426
|
+
() => o.value === "opening" || m.value ? [Y.value] : Ae.value
|
|
2256
2427
|
);
|
|
2257
|
-
te(
|
|
2428
|
+
te(Ae, () => {
|
|
2258
2429
|
Se(() => {
|
|
2259
|
-
const s = new Set(
|
|
2260
|
-
for (const
|
|
2261
|
-
for (const
|
|
2430
|
+
const s = new Set(Ae.value.map((S) => i.items[S].id));
|
|
2431
|
+
for (const S of pe.keys()) s.has(S) || pe.delete(S);
|
|
2432
|
+
for (const S of le.keys()) s.has(S) || le.delete(S);
|
|
2262
2433
|
});
|
|
2263
2434
|
});
|
|
2264
|
-
const
|
|
2265
|
-
close:
|
|
2435
|
+
const re = {
|
|
2436
|
+
close: Z,
|
|
2266
2437
|
setChromeVisible: (s) => {
|
|
2267
|
-
|
|
2438
|
+
C.value = s;
|
|
2268
2439
|
},
|
|
2269
|
-
goTo:
|
|
2270
|
-
previous: () =>
|
|
2271
|
-
next: () =>
|
|
2272
|
-
rotate: (s = 90) =>
|
|
2273
|
-
reset: () =>
|
|
2274
|
-
zoomIn: () =>
|
|
2275
|
-
zoomOut: () =>
|
|
2440
|
+
goTo: st,
|
|
2441
|
+
previous: () => A.go(-1),
|
|
2442
|
+
next: () => A.go(1),
|
|
2443
|
+
rotate: (s = 90) => N().rotateBy(s),
|
|
2444
|
+
reset: () => N().resetTransform(),
|
|
2445
|
+
zoomIn: () => N().zoomIn(),
|
|
2446
|
+
zoomOut: () => N().zoomOut(),
|
|
2276
2447
|
original: c.requestOriginal,
|
|
2277
2448
|
fullscreen: Me,
|
|
2278
|
-
togglePlayback: () =>
|
|
2449
|
+
togglePlayback: () => N().togglePlayback(),
|
|
2279
2450
|
toggleLive: () => {
|
|
2280
|
-
o.value !== "open" ||
|
|
2451
|
+
o.value !== "open" || $.value === "loading" || $.value === "error" || (B.value = !B.value);
|
|
2281
2452
|
},
|
|
2282
2453
|
toggleDetail: () => {
|
|
2283
|
-
|
|
2454
|
+
F.value = !F.value;
|
|
2284
2455
|
}
|
|
2285
|
-
}, ge =
|
|
2286
|
-
let ke = Promise.resolve(),
|
|
2287
|
-
},
|
|
2288
|
-
},
|
|
2289
|
-
const
|
|
2290
|
-
const s = `${
|
|
2291
|
-
fe = s,
|
|
2456
|
+
}, ge = Fa(), de = an();
|
|
2457
|
+
let ke = Promise.resolve(), he = () => {
|
|
2458
|
+
}, K = 0, xe = "", se = !1, fe = "", ve = "", Ee = () => {
|
|
2459
|
+
}, ye = { kind: "idle" }, Be = 0;
|
|
2460
|
+
const Re = () => new Promise((s) => requestAnimationFrame(() => s())), Ie = new ResizeObserver(() => {
|
|
2461
|
+
const s = `${f.value.clientWidth}:${f.value.clientHeight}`, S = `${u.value.clientWidth}:${u.value.clientHeight}`, E = fe !== "" && fe !== s, W = ve !== "" && ve !== S;
|
|
2462
|
+
fe = s, ve = S, v.value = f.value.clientWidth, E && o.value === "open" && A.reset(Y.value), W && ge.cancel();
|
|
2292
2463
|
});
|
|
2293
|
-
function
|
|
2294
|
-
i.hasMore && s >= i.items.length - 3 &&
|
|
2464
|
+
function Oe(s) {
|
|
2465
|
+
i.hasMore && s >= i.items.length - 3 && M !== i.items.length && (M = i.items.length, a("loadMore", s));
|
|
2295
2466
|
}
|
|
2296
|
-
function
|
|
2297
|
-
s ===
|
|
2467
|
+
function ot(s, S) {
|
|
2468
|
+
s === Y.value && (U.value && (w.value = H.value.id), a("ready", s, S));
|
|
2298
2469
|
}
|
|
2299
|
-
function
|
|
2300
|
-
s ===
|
|
2470
|
+
function lt(s, S, E) {
|
|
2471
|
+
s === Y.value && c.updateOriginal(S, E);
|
|
2301
2472
|
}
|
|
2302
2473
|
te(
|
|
2303
2474
|
() => i.items.map((s) => s.id),
|
|
2304
2475
|
(s) => {
|
|
2305
2476
|
if (o.value === "closed") return;
|
|
2306
2477
|
if (s.length === 0) {
|
|
2307
|
-
|
|
2478
|
+
K++, ge.cancel(), he(), de.clear(), A.cancel(), Be++, ye.kind === "active" && ye.animation.cancel(), Ie.disconnect(), fe = "", ve = "", Ee(), a("closing"), o.value = "closed", G.value = Ce, pe.clear(), le.clear(), document.body.style.overflow = xe, a("close");
|
|
2308
2479
|
return;
|
|
2309
2480
|
}
|
|
2310
|
-
const
|
|
2311
|
-
(
|
|
2481
|
+
const S = s.indexOf(g), E = S >= 0 ? S : Math.min(Y.value, s.length - 1);
|
|
2482
|
+
(E !== Y.value || S < 0) && (S >= 0 ? A.rebase(E) : (A.reset(E), g = s[E], c.reset(), z.value = 1, B.value = !1, a("change", E))), Oe(E);
|
|
2312
2483
|
},
|
|
2313
2484
|
{ flush: "sync" }
|
|
2314
2485
|
);
|
|
2315
|
-
function
|
|
2486
|
+
function st(s) {
|
|
2316
2487
|
if (!Number.isInteger(s) || s < 0 || s >= i.items.length)
|
|
2317
2488
|
throw new RangeError("无效的预览下标");
|
|
2318
|
-
if (!(o.value !== "open" || s ===
|
|
2319
|
-
if (Math.abs(s -
|
|
2320
|
-
|
|
2489
|
+
if (!(o.value !== "open" || s === Y.value)) {
|
|
2490
|
+
if (Math.abs(s - Y.value) === 1) {
|
|
2491
|
+
A.go(s - Y.value);
|
|
2321
2492
|
return;
|
|
2322
2493
|
}
|
|
2323
|
-
|
|
2494
|
+
A.reset(s), g = i.items[s].id, c.reset(), z.value = 1, B.value = !1, $.value = "loading", a("change", s), Oe(s);
|
|
2324
2495
|
}
|
|
2325
2496
|
}
|
|
2326
|
-
function
|
|
2327
|
-
i.persistentChrome || (
|
|
2497
|
+
function ut() {
|
|
2498
|
+
i.persistentChrome || (C.value = !C.value);
|
|
2328
2499
|
}
|
|
2329
|
-
function
|
|
2330
|
-
return
|
|
2500
|
+
function N() {
|
|
2501
|
+
return pe.get(g);
|
|
2331
2502
|
}
|
|
2332
|
-
function
|
|
2333
|
-
|
|
2334
|
-
const
|
|
2335
|
-
s.element.classList.add("mp-transition-source"),
|
|
2336
|
-
s.element.classList.toggle("mp-transition-source",
|
|
2503
|
+
function He(s) {
|
|
2504
|
+
Ee();
|
|
2505
|
+
const S = s.element.classList.contains("mp-transition-source");
|
|
2506
|
+
s.element.classList.add("mp-transition-source"), Ee = () => {
|
|
2507
|
+
s.element.classList.toggle("mp-transition-source", S);
|
|
2337
2508
|
};
|
|
2338
2509
|
}
|
|
2339
2510
|
function d() {
|
|
2340
2511
|
const s = u.value.getBoundingClientRect();
|
|
2341
2512
|
return { left: s.left, top: s.top, width: s.width, height: s.height };
|
|
2342
2513
|
}
|
|
2343
|
-
function
|
|
2344
|
-
return
|
|
2514
|
+
function I() {
|
|
2515
|
+
return f.value.getBoundingClientRect();
|
|
2345
2516
|
}
|
|
2346
2517
|
function X(s = 1) {
|
|
2347
|
-
const
|
|
2518
|
+
const S = I(), E = N().core, W = E.state, oe = W.downScale;
|
|
2348
2519
|
return {
|
|
2349
|
-
x:
|
|
2350
|
-
y:
|
|
2351
|
-
width:
|
|
2352
|
-
height:
|
|
2353
|
-
rotation:
|
|
2354
|
-
clip:
|
|
2520
|
+
x: S.left + S.width / 2 + A.state.offset + W.offsetX * oe * s + W.downOffsetX,
|
|
2521
|
+
y: S.top + S.height / 2 + W.offsetY * oe * s + W.downOffsetY,
|
|
2522
|
+
width: E.mediaSize.value.width * E.displayScale.value * oe * s,
|
|
2523
|
+
height: E.mediaSize.value.height * E.displayScale.value * oe * s,
|
|
2524
|
+
rotation: W.rotation,
|
|
2525
|
+
clip: S,
|
|
2355
2526
|
radius: 0
|
|
2356
2527
|
};
|
|
2357
2528
|
}
|
|
@@ -2359,213 +2530,213 @@ const Pa = ["aria-label", "data-phase", "data-chrome", "inert"], Ra = ["aria-hid
|
|
|
2359
2530
|
if (!Number.isInteger(s) || s < 0 || s >= i.items.length)
|
|
2360
2531
|
throw new RangeError("无效的预览下标");
|
|
2361
2532
|
if (o.value === "closing" && await ke, o.value !== "closed" || se) return;
|
|
2362
|
-
const
|
|
2363
|
-
if (de.clear(), xe = document.body.style.overflow, document.body.style.overflow = "hidden",
|
|
2364
|
-
|
|
2533
|
+
const S = ++K;
|
|
2534
|
+
if (de.clear(), xe = document.body.style.overflow, document.body.style.overflow = "hidden", A.reset(s), g = i.items[s].id, c.reset(), z.value = 1, C.value = !0, B.value = !1, $.value = "loading", F.value = !1, k.value = 0, U.value = !1, o.value = "opening", G.value = Ce, q.value = !1, be = H.value.id, ie = { kind: "unavailable" }, m.value = !1, a("open", s), await Se(), S !== K || se) return;
|
|
2535
|
+
v.value = f.value.clientWidth, Ie.observe(u.value), Ie.observe(f.value);
|
|
2365
2536
|
try {
|
|
2366
|
-
const
|
|
2367
|
-
if (
|
|
2368
|
-
const
|
|
2369
|
-
|
|
2370
|
-
const
|
|
2371
|
-
if (
|
|
2372
|
-
const
|
|
2373
|
-
if (m.value = !0, await Se(),
|
|
2374
|
-
|
|
2375
|
-
|
|
2537
|
+
const W = await i.resolveAnchor(H.value);
|
|
2538
|
+
if (S !== K) return;
|
|
2539
|
+
const oe = Et(W, H.value, d());
|
|
2540
|
+
ie = oe, G.value = Tn(oe), q.value = G.value.kind === "image" || N().readiness === "ready";
|
|
2541
|
+
const Xe = I();
|
|
2542
|
+
if (oe.kind === "element") {
|
|
2543
|
+
const We = N().readiness === "ready" ? N().core.mediaRef.value : G.value.kind === "image" ? G.value.image : xt();
|
|
2544
|
+
if (m.value = !0, await Se(), S !== K || se) return;
|
|
2545
|
+
He(oe), await ge.play(
|
|
2546
|
+
D.value,
|
|
2376
2547
|
h.value,
|
|
2377
|
-
|
|
2378
|
-
|
|
2379
|
-
|
|
2380
|
-
|
|
2381
|
-
|
|
2548
|
+
We,
|
|
2549
|
+
oe.frame,
|
|
2550
|
+
Ut(H.value, Xe, "contain"),
|
|
2551
|
+
oe.viewport,
|
|
2552
|
+
b.value,
|
|
2382
2553
|
!0,
|
|
2383
2554
|
0,
|
|
2384
2555
|
i.transitionDuration
|
|
2385
2556
|
);
|
|
2386
2557
|
} else
|
|
2387
|
-
|
|
2388
|
-
} catch (
|
|
2389
|
-
if (
|
|
2390
|
-
a("error", Ve(
|
|
2558
|
+
k.value = 1, m.value = !1, await we(!0);
|
|
2559
|
+
} catch (W) {
|
|
2560
|
+
if (S !== K) return;
|
|
2561
|
+
a("error", Ve(W), H.value);
|
|
2391
2562
|
}
|
|
2392
|
-
if (
|
|
2393
|
-
const
|
|
2394
|
-
|
|
2563
|
+
if (S !== K || se || (k.value = 1, o.value = "open", await Se(), S !== K || se)) return;
|
|
2564
|
+
const E = de.take();
|
|
2565
|
+
E.kind === "pointer" && i.gesturesEnabled && (N().onPointerDown(E.down, I(), E.target), N().onPointerMove(E.latest)), N().core.renderNow(), await Re(), !(S !== K || se) && (m.value = !1, ge.cancel(), Ee(), a("opened", s), await Re(), !(S !== K || se || o.value !== "open") && (U.value = !0, Oe(s)));
|
|
2395
2566
|
}
|
|
2396
|
-
function
|
|
2567
|
+
function Z() {
|
|
2397
2568
|
return o.value === "closed" || o.value === "closing" || (ke = Q()), ke;
|
|
2398
2569
|
}
|
|
2399
2570
|
async function Q() {
|
|
2400
|
-
de.clear(),
|
|
2401
|
-
const s =
|
|
2402
|
-
image:
|
|
2571
|
+
de.clear(), A.grab();
|
|
2572
|
+
const s = k.value, S = o.value === "opening", E = !S && N().readiness === "ready" ? N().retainFrame() : {
|
|
2573
|
+
image: G.value.kind === "image" && H.value.id === be ? G.value.image : xt(),
|
|
2403
2574
|
scale: 1,
|
|
2404
2575
|
release: () => {
|
|
2405
2576
|
}
|
|
2406
2577
|
};
|
|
2407
|
-
|
|
2578
|
+
he = E.release;
|
|
2408
2579
|
try {
|
|
2409
|
-
let
|
|
2410
|
-
|
|
2411
|
-
const
|
|
2412
|
-
|
|
2580
|
+
let W = S ? { kind: "opening" } : { kind: "captured", frame: X(E.scale) };
|
|
2581
|
+
S || N().core.cancelGesture(!0);
|
|
2582
|
+
const oe = ++K, Xe = S ? ge.reverseOpening() : { kind: "inactive" };
|
|
2583
|
+
Xe.kind === "inactive" && ge.cancel(), A.cancel(), B.value = !1, o.value = "closing", a("closing");
|
|
2413
2584
|
try {
|
|
2414
|
-
if (await Se(),
|
|
2415
|
-
const
|
|
2416
|
-
if (
|
|
2417
|
-
const
|
|
2418
|
-
if (
|
|
2419
|
-
await
|
|
2420
|
-
else if (
|
|
2421
|
-
const
|
|
2422
|
-
|
|
2423
|
-
|
|
2585
|
+
if (await Se(), oe !== K || se || (document.fullscreenElement === u.value && (await document.exitFullscreen(), await Re(), await Re(), W.kind === "captured" && (W.frame = X(E.scale))), oe !== K || se)) return;
|
|
2586
|
+
const We = S ? ie : await i.resolveAnchor(H.value);
|
|
2587
|
+
if (oe !== K || se) return;
|
|
2588
|
+
const tt = S ? ie : Et(We, H.value, d());
|
|
2589
|
+
if (Xe.kind === "reversing")
|
|
2590
|
+
await Xe.finished;
|
|
2591
|
+
else if (W.kind === "captured" && tt.kind === "element") {
|
|
2592
|
+
const Kt = E.image;
|
|
2593
|
+
He(tt), m.value = !0, await Se(), await ge.play(
|
|
2594
|
+
D.value,
|
|
2424
2595
|
h.value,
|
|
2425
|
-
|
|
2426
|
-
|
|
2427
|
-
|
|
2428
|
-
|
|
2429
|
-
|
|
2596
|
+
Kt,
|
|
2597
|
+
W.frame,
|
|
2598
|
+
tt.frame,
|
|
2599
|
+
tt.viewport,
|
|
2600
|
+
b.value,
|
|
2430
2601
|
!1,
|
|
2431
2602
|
s,
|
|
2432
2603
|
i.closeDuration
|
|
2433
2604
|
);
|
|
2434
2605
|
} else
|
|
2435
|
-
m.value = !1, await
|
|
2436
|
-
} catch (
|
|
2437
|
-
a("error", Ve(
|
|
2606
|
+
m.value = !1, await we(!1);
|
|
2607
|
+
} catch (We) {
|
|
2608
|
+
a("error", Ve(We), H.value), await we(!1);
|
|
2438
2609
|
}
|
|
2439
|
-
if (
|
|
2440
|
-
|
|
2610
|
+
if (oe !== K || se) return;
|
|
2611
|
+
Ie.disconnect(), fe = "", ve = "", k.value = 0, o.value = "closed", G.value = Ce, pe.clear(), le.clear(), Ee(), document.body.style.overflow = xe, a("close"), await Se(), ge.cancel();
|
|
2441
2612
|
} finally {
|
|
2442
|
-
|
|
2613
|
+
E.release(), he === E.release && (he = () => {
|
|
2443
2614
|
});
|
|
2444
2615
|
}
|
|
2445
2616
|
}
|
|
2446
|
-
async function
|
|
2447
|
-
const
|
|
2448
|
-
|
|
2449
|
-
const
|
|
2617
|
+
async function we(s) {
|
|
2618
|
+
const S = ++Be, E = s ? 0 : Number(getComputedStyle(u.value).opacity);
|
|
2619
|
+
ye.kind === "active" && ye.animation.cancel(), u.value.style.opacity = String(E);
|
|
2620
|
+
const W = u.value.animate([{ opacity: E }, { opacity: s ? 1 : 0 }], {
|
|
2450
2621
|
duration: matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 180,
|
|
2451
2622
|
fill: "forwards"
|
|
2452
2623
|
});
|
|
2453
|
-
|
|
2454
|
-
}), !(
|
|
2624
|
+
ye = { kind: "active", animation: W }, await W.finished.catch(() => {
|
|
2625
|
+
}), !(S !== Be || se) && (u.value.style.opacity = s ? "1" : "0", W.cancel(), ye = { kind: "idle" });
|
|
2455
2626
|
}
|
|
2456
2627
|
async function Me() {
|
|
2457
2628
|
if (document.fullscreenEnabled)
|
|
2458
2629
|
try {
|
|
2459
2630
|
document.fullscreenElement === u.value ? await document.exitFullscreen() : await u.value.requestFullscreen();
|
|
2460
2631
|
} catch (s) {
|
|
2461
|
-
a("error", Ve(s),
|
|
2632
|
+
a("error", Ve(s), H.value);
|
|
2462
2633
|
}
|
|
2463
2634
|
}
|
|
2464
|
-
function
|
|
2635
|
+
function Fe(s) {
|
|
2465
2636
|
if (i.gesturesEnabled) {
|
|
2466
2637
|
if (o.value === "opening") {
|
|
2467
2638
|
de.start(s);
|
|
2468
2639
|
return;
|
|
2469
2640
|
}
|
|
2470
|
-
o.value === "open" &&
|
|
2641
|
+
o.value === "open" && N().onPointerDown(s, I()) && A.grab();
|
|
2471
2642
|
}
|
|
2472
2643
|
}
|
|
2473
|
-
function
|
|
2644
|
+
function et(s) {
|
|
2474
2645
|
if (o.value === "opening") {
|
|
2475
|
-
i.gesturesEnabled && de.finish(s,
|
|
2646
|
+
i.gesturesEnabled && de.finish(s, I()) && Z();
|
|
2476
2647
|
return;
|
|
2477
2648
|
}
|
|
2478
|
-
o.value === "open" && (
|
|
2649
|
+
o.value === "open" && (N().onPointerUp(s), o.value === "open" && A.resume());
|
|
2479
2650
|
}
|
|
2480
2651
|
function ht(s) {
|
|
2481
|
-
de.clear(), o.value === "open" && (
|
|
2652
|
+
de.clear(), o.value === "open" && (N().onPointerCancel(s), o.value === "open" && A.resume());
|
|
2482
2653
|
}
|
|
2483
|
-
function
|
|
2484
|
-
o.value === "opening" && de.clear(), o.value === "open" && s.target ===
|
|
2654
|
+
function Ht(s) {
|
|
2655
|
+
o.value === "opening" && de.clear(), o.value === "open" && s.target === N().core.containerRef.value && ht(s);
|
|
2485
2656
|
}
|
|
2486
|
-
function
|
|
2487
|
-
o.value === "opening" && de.move(s), o.value === "open" &&
|
|
2657
|
+
function Xt(s) {
|
|
2658
|
+
o.value === "opening" && de.move(s), o.value === "open" && N().onPointerMove(s);
|
|
2488
2659
|
}
|
|
2489
|
-
function
|
|
2490
|
-
o.value === "open" && i.gesturesEnabled &&
|
|
2660
|
+
function Wt(s) {
|
|
2661
|
+
o.value === "open" && i.gesturesEnabled && N().onWheel(s);
|
|
2491
2662
|
}
|
|
2492
|
-
function
|
|
2493
|
-
o.value === "open" && (
|
|
2663
|
+
function Nt(s) {
|
|
2664
|
+
o.value === "open" && (k.value = 1 - s);
|
|
2494
2665
|
}
|
|
2495
|
-
function
|
|
2496
|
-
o.value === "open" &&
|
|
2666
|
+
function Zt(s) {
|
|
2667
|
+
o.value === "open" && A.drag(s);
|
|
2497
2668
|
}
|
|
2498
|
-
function
|
|
2499
|
-
o.value === "open" && (
|
|
2669
|
+
function jt(s, S) {
|
|
2670
|
+
o.value === "open" && (B.value = !1, A.release(s, S));
|
|
2500
2671
|
}
|
|
2501
|
-
function
|
|
2502
|
-
|
|
2672
|
+
function Gt(s) {
|
|
2673
|
+
z.value = s, s > 1.02 && !i.persistentChrome && (C.value = !1);
|
|
2503
2674
|
}
|
|
2504
2675
|
function vt(s) {
|
|
2505
2676
|
if (!(o.value === "closed" || !i.keyboardEnabled) && !(s.key === "Escape" && document.fullscreenElement === u.value)) {
|
|
2506
2677
|
if (s.key === "Escape") {
|
|
2507
|
-
s.preventDefault(),
|
|
2678
|
+
s.preventDefault(), Z();
|
|
2508
2679
|
return;
|
|
2509
2680
|
}
|
|
2510
2681
|
if (!(o.value !== "open" || s.target.matches("input, textarea, select, button, [role='slider']"))) {
|
|
2511
|
-
if (
|
|
2682
|
+
if (H.value.type === "video") {
|
|
2512
2683
|
if (s.code === "Space") {
|
|
2513
|
-
s.preventDefault(),
|
|
2684
|
+
s.preventDefault(), N().togglePlayback();
|
|
2514
2685
|
return;
|
|
2515
2686
|
}
|
|
2516
2687
|
if (s.key === "Enter") {
|
|
2517
|
-
s.preventDefault(),
|
|
2688
|
+
s.preventDefault(), N().toggleFullscreen();
|
|
2518
2689
|
return;
|
|
2519
2690
|
}
|
|
2520
2691
|
}
|
|
2521
|
-
if (
|
|
2522
|
-
s.preventDefault(),
|
|
2692
|
+
if (H.value.type === "live-photo" && s.code === "Space") {
|
|
2693
|
+
s.preventDefault(), re.toggleLive();
|
|
2523
2694
|
return;
|
|
2524
2695
|
}
|
|
2525
|
-
s.key === "ArrowLeft" && (s.preventDefault(),
|
|
2696
|
+
s.key === "ArrowLeft" && (s.preventDefault(), A.go(-1)), s.key === "ArrowRight" && (s.preventDefault(), A.go(1)), (s.key === "+" || s.key === "=") && re.zoomIn(), s.key === "-" && re.zoomOut(), s.key === "0" && re.reset();
|
|
2526
2697
|
}
|
|
2527
2698
|
}
|
|
2528
2699
|
}
|
|
2529
2700
|
return qe(() => {
|
|
2530
2701
|
document.addEventListener("keydown", vt);
|
|
2531
2702
|
}), Te(() => {
|
|
2532
|
-
se = !0,
|
|
2703
|
+
se = !0, K += 1, ge.cancel(), he(), de.clear(), Be += 1, ye.kind === "active" && ye.animation.cancel(), Ee(), Ie.disconnect(), document.removeEventListener("keydown", vt), o.value !== "closed" && (document.body.style.overflow = xe);
|
|
2533
2704
|
}), n({
|
|
2534
2705
|
open: j,
|
|
2535
|
-
...
|
|
2536
|
-
currentIndex:
|
|
2706
|
+
...re,
|
|
2707
|
+
currentIndex: Y,
|
|
2537
2708
|
phase: o,
|
|
2538
2709
|
element: u,
|
|
2539
|
-
mediaElement: () =>
|
|
2540
|
-
canvasElement: () =>
|
|
2541
|
-
}), (s,
|
|
2710
|
+
mediaElement: () => N().core.mediaRef.value,
|
|
2711
|
+
canvasElement: () => N().core.canvasRef.value
|
|
2712
|
+
}), (s, S) => (O(), Ue($t, {
|
|
2542
2713
|
to: "body",
|
|
2543
2714
|
disabled: s.teleportDisabled
|
|
2544
2715
|
}, [
|
|
2545
|
-
o.value !== "closed" ? (
|
|
2716
|
+
o.value !== "closed" ? (O(), _("div", je({
|
|
2546
2717
|
key: 0,
|
|
2547
2718
|
ref_key: "root",
|
|
2548
2719
|
ref: u
|
|
2549
|
-
},
|
|
2720
|
+
}, p(e), {
|
|
2550
2721
|
class: ["mp-viewer", { "is-mobile": s.mobile, "is-album": s.appearance === "album" }],
|
|
2551
2722
|
role: "dialog",
|
|
2552
2723
|
"aria-modal": "true",
|
|
2553
|
-
"aria-label":
|
|
2724
|
+
"aria-label": H.value.title,
|
|
2554
2725
|
"data-phase": o.value,
|
|
2555
|
-
"data-chrome":
|
|
2726
|
+
"data-chrome": C.value ? "visible" : "hidden",
|
|
2556
2727
|
inert: o.value === "closing",
|
|
2557
|
-
onPointerdown:
|
|
2558
|
-
onPointermove:
|
|
2559
|
-
onPointerup:
|
|
2728
|
+
onPointerdown: Fe,
|
|
2729
|
+
onPointermove: Xt,
|
|
2730
|
+
onPointerup: et,
|
|
2560
2731
|
onPointercancel: ht,
|
|
2561
|
-
onLostpointercapture:
|
|
2562
|
-
onWheel:
|
|
2732
|
+
onLostpointercapture: Ht,
|
|
2733
|
+
onWheel: Wt
|
|
2563
2734
|
}), [
|
|
2564
2735
|
T("div", {
|
|
2565
2736
|
ref_key: "backdrop",
|
|
2566
|
-
ref:
|
|
2737
|
+
ref: b,
|
|
2567
2738
|
class: "mp-viewer__backdrop",
|
|
2568
|
-
style:
|
|
2739
|
+
style: me({ opacity: k.value })
|
|
2569
2740
|
}, null, 4),
|
|
2570
2741
|
T("div", {
|
|
2571
2742
|
id: l,
|
|
@@ -2573,62 +2744,62 @@ const Pa = ["aria-label", "data-phase", "data-chrome", "inert"], Ra = ["aria-hid
|
|
|
2573
2744
|
}),
|
|
2574
2745
|
T("div", {
|
|
2575
2746
|
ref_key: "mediaViewport",
|
|
2576
|
-
ref:
|
|
2747
|
+
ref: f,
|
|
2577
2748
|
class: De(["mp-viewer__pages", { "is-transitioning": m.value }])
|
|
2578
2749
|
}, [
|
|
2579
|
-
(
|
|
2580
|
-
key: s.items[
|
|
2750
|
+
(O(!0), _($e, null, Ye(Je.value, (E) => (O(), _("div", {
|
|
2751
|
+
key: s.items[E].id,
|
|
2581
2752
|
ref_for: !0,
|
|
2582
|
-
ref: Pe(s.items[
|
|
2753
|
+
ref: Pe(s.items[E].id),
|
|
2583
2754
|
class: "mp-viewer__page",
|
|
2584
|
-
style:
|
|
2585
|
-
transform: `translate3d(${(
|
|
2586
|
-
transition:
|
|
2755
|
+
style: me({
|
|
2756
|
+
transform: `translate3d(${(E - p(Y)) * p(A).stride() + p(A).state.offset}px,0,0)`,
|
|
2757
|
+
transition: p(A).state.settling ? `transform ${p(A).state.duration}ms cubic-bezier(.22,.61,.36,1)` : "none"
|
|
2587
2758
|
}),
|
|
2588
|
-
"aria-hidden":
|
|
2589
|
-
inert:
|
|
2590
|
-
"data-media-id": s.items[
|
|
2759
|
+
"aria-hidden": E !== p(Y),
|
|
2760
|
+
inert: E !== p(Y),
|
|
2761
|
+
"data-media-id": s.items[E].id
|
|
2591
2762
|
}, [
|
|
2592
|
-
|
|
2763
|
+
ze(Pa, {
|
|
2593
2764
|
ref_for: !0,
|
|
2594
|
-
ref:
|
|
2595
|
-
media: s.items[
|
|
2765
|
+
ref: ne(s.items[E].id),
|
|
2766
|
+
media: s.items[E],
|
|
2596
2767
|
"video-loader": s.videoLoader,
|
|
2597
2768
|
rendering: o.value === "open",
|
|
2598
|
-
paging:
|
|
2769
|
+
paging: p(A).state.dragging || p(A).state.preparing || p(A).state.settling || p(A).state.grabbed,
|
|
2599
2770
|
"external-gestures": "",
|
|
2600
|
-
active:
|
|
2771
|
+
active: E === p(Y),
|
|
2601
2772
|
disabled: o.value !== "open" || !s.gesturesEnabled,
|
|
2602
|
-
"inactive-reset-duration":
|
|
2773
|
+
"inactive-reset-duration": p(A).state.duration,
|
|
2603
2774
|
"resource-policy": s.resourcePolicy,
|
|
2604
2775
|
"resolve-source": s.resolveImageSource,
|
|
2605
|
-
"request-version":
|
|
2606
|
-
"load-enabled":
|
|
2776
|
+
"request-version": E === p(Y) ? p(R) : 0,
|
|
2777
|
+
"load-enabled": E === p(Y) ? U.value && o.value === "open" : o.value === "open" && !m.value && p(w) === H.value.id,
|
|
2607
2778
|
"teleport-controls": "",
|
|
2608
2779
|
"controls-target": `#${l}`,
|
|
2609
|
-
"controls-visible":
|
|
2610
|
-
"initial-image": s.items[
|
|
2611
|
-
quality:
|
|
2612
|
-
"live-playing":
|
|
2613
|
-
onTap:
|
|
2614
|
-
onScale:
|
|
2615
|
-
onPageDrag:
|
|
2616
|
-
onPageRelease:
|
|
2617
|
-
onClose:
|
|
2618
|
-
onSwipeDownProgress:
|
|
2619
|
-
onLiveState: (
|
|
2620
|
-
|
|
2780
|
+
"controls-visible": C.value && k.value === 1,
|
|
2781
|
+
"initial-image": s.items[E].id === p(be) ? G.value : p(Ce),
|
|
2782
|
+
quality: E === p(Y) && p(P).has(s.items[E].id) ? "full" : E === p(Y) ? "screen" : "thumbnail",
|
|
2783
|
+
"live-playing": B.value,
|
|
2784
|
+
onTap: ut,
|
|
2785
|
+
onScale: Gt,
|
|
2786
|
+
onPageDrag: Zt,
|
|
2787
|
+
onPageRelease: jt,
|
|
2788
|
+
onClose: Z,
|
|
2789
|
+
onSwipeDownProgress: Nt,
|
|
2790
|
+
onLiveState: (W) => {
|
|
2791
|
+
E === p(Y) && ($.value = W);
|
|
2621
2792
|
},
|
|
2622
2793
|
onLiveEnded: () => {
|
|
2623
|
-
|
|
2794
|
+
E === p(Y) && (B.value = !1);
|
|
2624
2795
|
},
|
|
2625
|
-
onReady: (
|
|
2626
|
-
onOriginalState: (
|
|
2627
|
-
onError: (
|
|
2796
|
+
onReady: (W) => ot(E, W),
|
|
2797
|
+
onOriginalState: (W, oe) => lt(E, W, oe),
|
|
2798
|
+
onError: (W) => a("error", W, s.items[E])
|
|
2628
2799
|
}, null, 8, ["media", "video-loader", "rendering", "paging", "active", "disabled", "inactive-reset-duration", "resource-policy", "resolve-source", "request-version", "load-enabled", "controls-target", "controls-visible", "initial-image", "quality", "live-playing", "onLiveState", "onLiveEnded", "onReady", "onOriginalState", "onError"])
|
|
2629
|
-
], 12,
|
|
2800
|
+
], 12, qa))), 128))
|
|
2630
2801
|
], 2),
|
|
2631
|
-
|
|
2802
|
+
Lt(T("div", {
|
|
2632
2803
|
ref_key: "transitionMask",
|
|
2633
2804
|
ref: h,
|
|
2634
2805
|
class: "mp-shared-clip",
|
|
@@ -2636,116 +2807,116 @@ const Pa = ["aria-label", "data-phase", "data-chrome", "inert"], Ra = ["aria-hid
|
|
|
2636
2807
|
}, [
|
|
2637
2808
|
T("canvas", {
|
|
2638
2809
|
ref_key: "transitionCanvas",
|
|
2639
|
-
ref:
|
|
2810
|
+
ref: D,
|
|
2640
2811
|
class: "mp-shared-transition"
|
|
2641
2812
|
}, null, 512)
|
|
2642
2813
|
], 512), [
|
|
2643
|
-
[
|
|
2814
|
+
[Ft, m.value]
|
|
2644
2815
|
]),
|
|
2645
|
-
o.value === "opening" && !
|
|
2816
|
+
o.value === "opening" && !q.value ? (O(), _("div", Ba, za)) : J("", !0),
|
|
2646
2817
|
T("div", {
|
|
2647
|
-
class: De(["mp-viewer__chrome", { "is-hidden": !
|
|
2648
|
-
inert: !
|
|
2818
|
+
class: De(["mp-viewer__chrome", { "is-hidden": !C.value || o.value !== "open" || k.value < 1 }]),
|
|
2819
|
+
inert: !C.value || o.value !== "open" || k.value < 1
|
|
2649
2820
|
}, [
|
|
2650
|
-
|
|
2651
|
-
media:
|
|
2652
|
-
index:
|
|
2821
|
+
ct(s.$slots, "toolbar", {
|
|
2822
|
+
media: H.value,
|
|
2823
|
+
index: p(Y),
|
|
2653
2824
|
total: s.items.length,
|
|
2654
|
-
scale:
|
|
2655
|
-
controls:
|
|
2656
|
-
originalStatus:
|
|
2657
|
-
originalReason:
|
|
2658
|
-
livePlaying:
|
|
2659
|
-
liveStatus:
|
|
2825
|
+
scale: z.value,
|
|
2826
|
+
controls: re,
|
|
2827
|
+
originalStatus: p(x),
|
|
2828
|
+
originalReason: p(y),
|
|
2829
|
+
livePlaying: B.value,
|
|
2830
|
+
liveStatus: $.value
|
|
2660
2831
|
}, () => [
|
|
2661
|
-
T("header",
|
|
2832
|
+
T("header", Aa, [
|
|
2662
2833
|
T("button", {
|
|
2663
2834
|
type: "button",
|
|
2664
2835
|
"aria-label": "关闭预览",
|
|
2665
|
-
onClick:
|
|
2836
|
+
onClick: Z
|
|
2666
2837
|
}, "‹"),
|
|
2667
|
-
T("div",
|
|
2668
|
-
T("strong", null,
|
|
2669
|
-
T("span", null,
|
|
2838
|
+
T("div", Oa, [
|
|
2839
|
+
T("strong", null, ue(H.value.title), 1),
|
|
2840
|
+
T("span", null, ue(p(Y) + 1) + " / " + ue(s.items.length), 1)
|
|
2670
2841
|
]),
|
|
2671
2842
|
T("button", {
|
|
2672
2843
|
type: "button",
|
|
2673
2844
|
"aria-label": "旋转图片",
|
|
2674
|
-
disabled:
|
|
2675
|
-
onClick:
|
|
2676
|
-
}, " ↻ ", 8,
|
|
2845
|
+
disabled: H.value.type === "video",
|
|
2846
|
+
onClick: S[0] || (S[0] = (E) => re.rotate())
|
|
2847
|
+
}, " ↻ ", 8, _a)
|
|
2677
2848
|
]),
|
|
2678
|
-
T("footer",
|
|
2679
|
-
|
|
2849
|
+
T("footer", Va, [
|
|
2850
|
+
H.value.type !== "video" ? (O(), _($e, { key: 0 }, [
|
|
2680
2851
|
T("button", {
|
|
2681
2852
|
type: "button",
|
|
2682
2853
|
"aria-label": "缩小",
|
|
2683
|
-
onClick:
|
|
2684
|
-
(...
|
|
2854
|
+
onClick: S[1] || (S[1] = //@ts-ignore
|
|
2855
|
+
(...E) => re.zoomOut && re.zoomOut(...E))
|
|
2685
2856
|
}, "−"),
|
|
2686
2857
|
T("button", {
|
|
2687
2858
|
type: "button",
|
|
2688
2859
|
"aria-label": "放大",
|
|
2689
|
-
onClick:
|
|
2690
|
-
(...
|
|
2860
|
+
onClick: S[2] || (S[2] = //@ts-ignore
|
|
2861
|
+
(...E) => re.zoomIn && re.zoomIn(...E))
|
|
2691
2862
|
}, "+"),
|
|
2692
2863
|
T("button", {
|
|
2693
2864
|
type: "button",
|
|
2694
2865
|
"aria-label": "复位",
|
|
2695
|
-
onClick:
|
|
2696
|
-
(...
|
|
2866
|
+
onClick: S[3] || (S[3] = //@ts-ignore
|
|
2867
|
+
(...E) => re.reset && re.reset(...E))
|
|
2697
2868
|
}, "复位")
|
|
2698
|
-
], 64)) :
|
|
2869
|
+
], 64)) : J("", !0),
|
|
2699
2870
|
T("button", {
|
|
2700
2871
|
type: "button",
|
|
2701
2872
|
"aria-label": "图片详情",
|
|
2702
|
-
onClick:
|
|
2703
|
-
(...
|
|
2873
|
+
onClick: S[4] || (S[4] = //@ts-ignore
|
|
2874
|
+
(...E) => re.toggleDetail && re.toggleDetail(...E))
|
|
2704
2875
|
}, "ⓘ")
|
|
2705
2876
|
])
|
|
2706
2877
|
]),
|
|
2707
|
-
!s.mobile &&
|
|
2878
|
+
!s.mobile && p(Y) > 0 ? (O(), _("button", {
|
|
2708
2879
|
key: 0,
|
|
2709
2880
|
class: "mp-viewer__arrow is-left",
|
|
2710
2881
|
"aria-label": "上一张",
|
|
2711
|
-
onClick:
|
|
2712
|
-
}, " ‹ ")) :
|
|
2713
|
-
!s.mobile &&
|
|
2882
|
+
onClick: S[5] || (S[5] = (E) => p(A).go(-1))
|
|
2883
|
+
}, " ‹ ")) : J("", !0),
|
|
2884
|
+
!s.mobile && p(Y) < s.items.length - 1 ? (O(), _("button", {
|
|
2714
2885
|
key: 1,
|
|
2715
2886
|
class: "mp-viewer__arrow is-right",
|
|
2716
2887
|
"aria-label": "下一张",
|
|
2717
|
-
onClick:
|
|
2718
|
-
}, " › ")) :
|
|
2719
|
-
T("div",
|
|
2720
|
-
], 10,
|
|
2721
|
-
|
|
2888
|
+
onClick: S[6] || (S[6] = (E) => p(A).go(1))
|
|
2889
|
+
}, " › ")) : J("", !0),
|
|
2890
|
+
T("div", Ua, ue(p(Y) + 1) + " / " + ue(s.items.length), 1)
|
|
2891
|
+
], 10, Da),
|
|
2892
|
+
F.value ? (O(), _("aside", Ya, [
|
|
2722
2893
|
T("button", {
|
|
2723
2894
|
type: "button",
|
|
2724
2895
|
"aria-label": "关闭详情",
|
|
2725
|
-
onClick:
|
|
2896
|
+
onClick: S[7] || (S[7] = (E) => F.value = !1)
|
|
2726
2897
|
}, "×"),
|
|
2727
|
-
T("strong", null,
|
|
2728
|
-
T("span", null,
|
|
2729
|
-
T("span", null,
|
|
2730
|
-
])) :
|
|
2731
|
-
], 16,
|
|
2898
|
+
T("strong", null, ue(H.value.title), 1),
|
|
2899
|
+
T("span", null, ue(H.value.width) + " × " + ue(H.value.height), 1),
|
|
2900
|
+
T("span", null, ue(H.value.type) + " · " + ue(z.value.toFixed(2)) + "×", 1)
|
|
2901
|
+
])) : J("", !0)
|
|
2902
|
+
], 16, Ta)) : J("", !0)
|
|
2732
2903
|
], 8, ["disabled"]));
|
|
2733
2904
|
}
|
|
2734
2905
|
});
|
|
2735
|
-
function
|
|
2906
|
+
function Ha(t, n, r, e = 2) {
|
|
2736
2907
|
const i = Math.max(1, (n - e * (r - 1)) / r), a = [], o = /* @__PURE__ */ new Map();
|
|
2737
2908
|
let l = 0, u = 0;
|
|
2738
|
-
return t.forEach((
|
|
2909
|
+
return t.forEach((f, c) => {
|
|
2739
2910
|
c > 0 && (a.push({ kind: "header", group: c, first: 0, count: 0, start: l, end: l + 52 }), l += 52);
|
|
2740
|
-
for (let
|
|
2741
|
-
const
|
|
2742
|
-
a.push({ kind: "items", group: c, first:
|
|
2743
|
-
for (let
|
|
2744
|
-
u +=
|
|
2911
|
+
for (let P = 0; P < f.items.length; P += r) {
|
|
2912
|
+
const x = Math.min(r, f.items.length - P), y = a.length;
|
|
2913
|
+
a.push({ kind: "items", group: c, first: P, count: x, start: l, end: l + i });
|
|
2914
|
+
for (let R = 0; R < x; R++) o.set(f.items[P + R].id, y);
|
|
2915
|
+
u += x, l += i + (P + x < f.items.length ? e : 0);
|
|
2745
2916
|
}
|
|
2746
2917
|
}), { rows: a, locations: o, height: l, size: i, total: u };
|
|
2747
2918
|
}
|
|
2748
|
-
function
|
|
2919
|
+
function Rt(t, n) {
|
|
2749
2920
|
let r = 0, e = t.length;
|
|
2750
2921
|
for (; r < e; ) {
|
|
2751
2922
|
const i = r + e >>> 1;
|
|
@@ -2753,7 +2924,7 @@ function Et(t, n) {
|
|
|
2753
2924
|
}
|
|
2754
2925
|
return Math.min(r, Math.max(0, t.length - 1));
|
|
2755
2926
|
}
|
|
2756
|
-
const
|
|
2927
|
+
const Xa = ["data-total-items", "data-rendered-items"], Wa = /* @__PURE__ */ Le({
|
|
2757
2928
|
__name: "VirtualTimeline",
|
|
2758
2929
|
props: {
|
|
2759
2930
|
groups: {},
|
|
@@ -2763,96 +2934,96 @@ const Oa = ["data-total-items", "data-rendered-items"], Aa = /* @__PURE__ */ $e(
|
|
|
2763
2934
|
},
|
|
2764
2935
|
emits: ["loadMore", "date"],
|
|
2765
2936
|
setup(t, { expose: n, emit: r }) {
|
|
2766
|
-
const e = t, i = r, a =
|
|
2937
|
+
const e = t, i = r, a = L(), o = L(390), l = L(844), u = L(0), f = V(
|
|
2767
2938
|
() => e.mobile ? o.value >= 640 ? 5 : o.value >= 480 ? 4 : 3 : Math.max(1, Math.floor((o.value + 2) / 172))
|
|
2768
|
-
), c = V(() =>
|
|
2769
|
-
const
|
|
2770
|
-
let
|
|
2771
|
-
for (;
|
|
2772
|
-
return
|
|
2773
|
-
}),
|
|
2774
|
-
let
|
|
2939
|
+
), c = V(() => Ha(e.groups, o.value, f.value)), P = V(() => {
|
|
2940
|
+
const b = c.value.rows, m = Rt(b, Math.max(0, u.value - c.value.size * 3)), k = u.value + l.value + c.value.size * 3;
|
|
2941
|
+
let C = m;
|
|
2942
|
+
for (; C < b.length && b[C].start <= k; ) C++;
|
|
2943
|
+
return b.slice(m, C);
|
|
2944
|
+
}), x = V(() => P.value.reduce((b, m) => b + m.count, 0));
|
|
2945
|
+
let y = 0, R = !1, w = () => {
|
|
2775
2946
|
};
|
|
2776
2947
|
function g() {
|
|
2777
|
-
const
|
|
2778
|
-
o.value =
|
|
2948
|
+
const b = e.scrollElement();
|
|
2949
|
+
o.value = b.clientWidth, l.value = b.clientHeight, u.value = b.scrollTop, c.value.rows.length > 0 && i("date", e.groups[c.value.rows[Rt(c.value.rows, u.value)].group].key);
|
|
2779
2950
|
const m = u.value + l.value >= c.value.height - c.value.size * 3;
|
|
2780
|
-
m && e.hasMore && !
|
|
2951
|
+
m && e.hasMore && !R && (R = !0, i("loadMore")), m || (R = !1);
|
|
2781
2952
|
}
|
|
2782
|
-
function
|
|
2783
|
-
|
|
2784
|
-
|
|
2953
|
+
function M() {
|
|
2954
|
+
y === 0 && (y = requestAnimationFrame(() => {
|
|
2955
|
+
y = 0, g();
|
|
2785
2956
|
}));
|
|
2786
2957
|
}
|
|
2787
|
-
const
|
|
2958
|
+
const D = new ResizeObserver(g);
|
|
2788
2959
|
qe(() => {
|
|
2789
|
-
const
|
|
2790
|
-
|
|
2791
|
-
|
|
2792
|
-
},
|
|
2960
|
+
const b = e.scrollElement(), m = b.style.overflowAnchor;
|
|
2961
|
+
b.style.overflowAnchor = "none", w = () => {
|
|
2962
|
+
b.style.overflowAnchor = m;
|
|
2963
|
+
}, b.addEventListener("scroll", M, { passive: !0 }), D.observe(b), g();
|
|
2793
2964
|
}), Te(() => {
|
|
2794
|
-
e.scrollElement().removeEventListener("scroll",
|
|
2965
|
+
e.scrollElement().removeEventListener("scroll", M), D.disconnect(), cancelAnimationFrame(y), w();
|
|
2795
2966
|
}), te(
|
|
2796
2967
|
() => e.groups,
|
|
2797
2968
|
() => {
|
|
2798
|
-
|
|
2969
|
+
R = !1, Se(g);
|
|
2799
2970
|
}
|
|
2800
2971
|
);
|
|
2801
|
-
async function h(
|
|
2802
|
-
if (!c.value.locations.has(
|
|
2803
|
-
const m = c.value.rows[c.value.locations.get(
|
|
2804
|
-
return (m.start <
|
|
2805
|
-
(
|
|
2972
|
+
async function h(b) {
|
|
2973
|
+
if (!c.value.locations.has(b)) return { kind: "unavailable" };
|
|
2974
|
+
const m = c.value.rows[c.value.locations.get(b)], k = e.scrollElement();
|
|
2975
|
+
return (m.start < k.scrollTop || m.end > k.scrollTop + k.clientHeight) && (k.scrollTop = Math.max(0, m.start - (k.clientHeight - c.value.size) / 2)), g(), await Se(), await new Promise((B) => requestAnimationFrame(() => B())), { kind: "element", element: [...a.value.querySelectorAll("[data-id]")].find(
|
|
2976
|
+
(B) => B.dataset.id === b
|
|
2806
2977
|
).querySelector("img") };
|
|
2807
2978
|
}
|
|
2808
|
-
return n({ resolveAnchor: h, rendered:
|
|
2979
|
+
return n({ resolveAnchor: h, rendered: x, total: V(() => c.value.total) }), (b, m) => (O(), _("div", {
|
|
2809
2980
|
ref_key: "root",
|
|
2810
2981
|
ref: a,
|
|
2811
2982
|
class: "mp-virtual-timeline",
|
|
2812
|
-
style:
|
|
2983
|
+
style: me({ height: c.value.height + "px" }),
|
|
2813
2984
|
"data-total-items": c.value.total,
|
|
2814
|
-
"data-rendered-items":
|
|
2985
|
+
"data-rendered-items": x.value
|
|
2815
2986
|
}, [
|
|
2816
|
-
(
|
|
2817
|
-
key:
|
|
2987
|
+
(O(!0), _($e, null, Ye(P.value, (k) => (O(), _("div", {
|
|
2988
|
+
key: b.groups[k.group].key + ":" + k.kind + ":" + k.first,
|
|
2818
2989
|
class: "mp-timeline-row",
|
|
2819
|
-
style:
|
|
2820
|
-
top:
|
|
2821
|
-
height:
|
|
2822
|
-
display:
|
|
2823
|
-
gridTemplateColumns: `repeat(${
|
|
2990
|
+
style: me({
|
|
2991
|
+
top: k.start + "px",
|
|
2992
|
+
height: k.end - k.start + "px",
|
|
2993
|
+
display: k.kind === "items" ? "grid" : "block",
|
|
2994
|
+
gridTemplateColumns: `repeat(${f.value},minmax(0,1fr))`,
|
|
2824
2995
|
gap: "2px"
|
|
2825
2996
|
})
|
|
2826
2997
|
}, [
|
|
2827
|
-
|
|
2998
|
+
k.kind === "header" ? ct(b.$slots, "header", {
|
|
2828
2999
|
key: 0,
|
|
2829
|
-
group:
|
|
2830
|
-
index:
|
|
2831
|
-
}, void 0, !0) : (
|
|
2832
|
-
key:
|
|
2833
|
-
item:
|
|
3000
|
+
group: b.groups[k.group],
|
|
3001
|
+
index: k.group
|
|
3002
|
+
}, void 0, !0) : (O(!0), _($e, { key: 1 }, Ye(b.groups[k.group].items.slice(k.first, k.first + k.count), (C) => ct(b.$slots, "item", {
|
|
3003
|
+
key: C.id,
|
|
3004
|
+
item: C
|
|
2834
3005
|
}, void 0, !0)), 128))
|
|
2835
3006
|
], 4))), 128))
|
|
2836
|
-
], 12,
|
|
3007
|
+
], 12, Xa));
|
|
2837
3008
|
}
|
|
2838
|
-
}),
|
|
3009
|
+
}), Na = (t, n) => {
|
|
2839
3010
|
const r = t.__vccOpts || t;
|
|
2840
3011
|
for (const [e, i] of n)
|
|
2841
3012
|
r[e] = i;
|
|
2842
3013
|
return r;
|
|
2843
|
-
},
|
|
3014
|
+
}, Ka = /* @__PURE__ */ Na(Wa, [["__scopeId", "data-v-05c756fb"]]);
|
|
2844
3015
|
export {
|
|
2845
|
-
|
|
2846
|
-
|
|
2847
|
-
|
|
2848
|
-
|
|
2849
|
-
|
|
2850
|
-
|
|
2851
|
-
|
|
2852
|
-
|
|
2853
|
-
|
|
3016
|
+
gt as ImageCanvasRenderer,
|
|
3017
|
+
Fn as ImageStore,
|
|
3018
|
+
Zn as LivePhotoRenderer,
|
|
3019
|
+
Ga as MediaPreview,
|
|
3020
|
+
Pa as PreviewStage,
|
|
3021
|
+
Ma as VideoDomRenderer,
|
|
3022
|
+
Ka as VirtualTimeline,
|
|
3023
|
+
Ke as defaultImagePolicy,
|
|
3024
|
+
Qe as defaultImageSource,
|
|
2854
3025
|
_e as formatVideoTime,
|
|
2855
|
-
|
|
3026
|
+
rt as nativeVideoSource,
|
|
2856
3027
|
$n as previewImageStore,
|
|
2857
|
-
|
|
3028
|
+
hn as usePreviewViewport
|
|
2858
3029
|
};
|