@lazycatcloud/vue-media-preview 0.1.0-preview.34 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -11
- package/dist/vue-media-preview.cjs +1 -1
- package/dist/vue-media-preview.css +1 -1
- package/dist/vue-media-preview.js +545 -560
- package/docs/testing.md +3 -2
- package/docs/vue-media-preview.md +2 -0
- package/package.json +6 -3
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
var qt = Object.defineProperty;
|
|
2
2
|
var zt = (a, t, e) => t in a ? qt(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
|
|
3
3
|
var tt = (a, t, e) => zt(a, typeof t != "symbol" ? t + "" : t, e);
|
|
4
|
-
import { ref as R, onMounted as ze, watch as ee, onBeforeUnmount as Re, shallowRef as gt, reactive as mt, computed as U, defineComponent as Le, nextTick as ye, openBlock as
|
|
4
|
+
import { ref as R, onMounted as ze, watch as ee, onBeforeUnmount as Re, shallowRef as gt, reactive as mt, computed as U, defineComponent as Le, nextTick as ye, openBlock as z, createElementBlock as H, Fragment as De, createElementVNode as $, createCommentVNode as ie, withModifiers as J, toDisplayString as le, unref as g, normalizeClass as qe, normalizeStyle as Se, mergeProps as Ue, toHandlers as pt, createVNode as Be, renderList as ot, createTextVNode as It, withKeys as at, createBlock as rt, Teleport as Ct, resolveDynamicComponent as At, useAttrs as Ot, getCurrentInstance as _t, withDirectives as Vt, vShow as Yt, renderSlot as ft } from "vue";
|
|
5
5
|
function Ae(a) {
|
|
6
6
|
return a instanceof Error ? a : new Error(String(a));
|
|
7
7
|
}
|
|
@@ -122,43 +122,43 @@ function Gt(a = {}) {
|
|
|
122
122
|
downOffsetX: 0,
|
|
123
123
|
downOffsetY: 0,
|
|
124
124
|
downScale: 1
|
|
125
|
-
}),
|
|
126
|
-
width:
|
|
127
|
-
height:
|
|
125
|
+
}), f = U(() => Xt(s.value, r.rotation)), y = U(() => Ht(f.value, i.value)), m = U(() => y.value * r.level), b = U(() => ({
|
|
126
|
+
width: f.value.width * m.value,
|
|
127
|
+
height: f.value.height * m.value
|
|
128
128
|
})), B = U(() => ({
|
|
129
129
|
transform: Ut(r.downOffsetX, r.downOffsetY, r.downScale)
|
|
130
|
-
})), L = /* @__PURE__ */ new Set(),
|
|
131
|
-
() =>
|
|
130
|
+
})), L = /* @__PURE__ */ new Set(), P = R(!1), p = R(!1), v = R(!1), T = U(
|
|
131
|
+
() => P.value || p.value || v.value || t.motionActive()
|
|
132
132
|
);
|
|
133
|
-
let
|
|
134
|
-
}, 0), h = -1e3,
|
|
133
|
+
let I, w = 0, u = 0, k = setTimeout(() => {
|
|
134
|
+
}, 0), h = -1e3, d = { x: 0, y: 0 }, M = !1, C = "idle", E = !0, A = !1, V = 0;
|
|
135
135
|
const _ = /* @__PURE__ */ new Map();
|
|
136
|
-
let N = { x: 0, y: 0 }, Y = { x: 0, y: 0, time: 0 },
|
|
136
|
+
let N = { x: 0, y: 0 }, Y = { x: 0, y: 0, time: 0 }, Pe = 0, se = 0, fe = 0, K = { left: 0, top: 0 }, Ze = 1, Oe = { x: 0, y: 0 }, D = Q();
|
|
137
137
|
const q = jt(
|
|
138
138
|
() => {
|
|
139
|
-
|
|
139
|
+
C = "hold", clearTimeout(k), h = -1e3, t.onHoldStart();
|
|
140
140
|
},
|
|
141
141
|
() => t.onHoldEnd()
|
|
142
142
|
), W = new ResizeObserver((c) => {
|
|
143
143
|
for (const F of c) G(F.contentRect);
|
|
144
|
-
}),
|
|
145
|
-
(c.key === "Control" || c.key === "Meta") &&
|
|
146
|
-
}, te = (c) =>
|
|
147
|
-
q.cancel(),
|
|
144
|
+
}), Ce = /* @__PURE__ */ new Set(), je = (c) => {
|
|
145
|
+
(c.key === "Control" || c.key === "Meta") && Ce.add(c.key);
|
|
146
|
+
}, te = (c) => Ce.delete(c.key), ge = () => {
|
|
147
|
+
q.cancel(), Ce.clear();
|
|
148
148
|
}, $e = () => {
|
|
149
149
|
document.hidden && q.cancel();
|
|
150
150
|
};
|
|
151
151
|
ze(() => {
|
|
152
152
|
W.observe(e.value), G(e.value.getBoundingClientRect()), window.addEventListener("keydown", je), window.addEventListener("keyup", te), window.addEventListener("blur", ge), document.addEventListener("visibilitychange", $e);
|
|
153
153
|
}), Re(() => {
|
|
154
|
-
|
|
154
|
+
M = !0, q.cancel(), window.removeEventListener("keydown", je), window.removeEventListener("keyup", te), window.removeEventListener("blur", ge), document.removeEventListener("visibilitychange", $e), W.disconnect(), cancelAnimationFrame(w), cancelAnimationFrame(u), clearTimeout(k), clearTimeout(I);
|
|
155
155
|
});
|
|
156
156
|
function G(c) {
|
|
157
157
|
i.value = { width: c.width, height: c.height }, Object.assign(r, ve(r.offsetX, r.offsetY, r.level)), pe();
|
|
158
158
|
}
|
|
159
159
|
function pe() {
|
|
160
|
-
|
|
161
|
-
|
|
160
|
+
M || w || (w = requestAnimationFrame(() => {
|
|
161
|
+
w = 0, L.forEach((c) => c());
|
|
162
162
|
}));
|
|
163
163
|
}
|
|
164
164
|
function Q() {
|
|
@@ -167,10 +167,10 @@ function Gt(a = {}) {
|
|
|
167
167
|
function ve(c, F, X) {
|
|
168
168
|
const Z = Math.max(
|
|
169
169
|
0,
|
|
170
|
-
(
|
|
170
|
+
(f.value.width * y.value * X - i.value.width) / 2
|
|
171
171
|
), ae = Math.max(
|
|
172
172
|
0,
|
|
173
|
-
(
|
|
173
|
+
(f.value.height * y.value * X - i.value.height) / 2
|
|
174
174
|
);
|
|
175
175
|
return { offsetX: de(c, -Z, Z), offsetY: de(F, -ae, ae) };
|
|
176
176
|
}
|
|
@@ -178,38 +178,38 @@ function Gt(a = {}) {
|
|
|
178
178
|
Object.assign(r, c), t.onScale(r.level), pe();
|
|
179
179
|
}
|
|
180
180
|
function xe(c, F = 250) {
|
|
181
|
-
cancelAnimationFrame(u),
|
|
182
|
-
const X = Q(), Z = performance.now(), ae = matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : F,
|
|
183
|
-
const
|
|
181
|
+
cancelAnimationFrame(u), P.value = !0;
|
|
182
|
+
const X = Q(), Z = performance.now(), ae = matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : F, oe = (we) => {
|
|
183
|
+
const re = ae === 0 ? 1 : de((we - Z) / ae, 0, 1), be = Wt(re);
|
|
184
184
|
me({
|
|
185
185
|
level: X.level + (c.level - X.level) * be,
|
|
186
186
|
offsetX: X.offsetX + (c.offsetX - X.offsetX) * be,
|
|
187
187
|
offsetY: X.offsetY + (c.offsetY - X.offsetY) * be
|
|
188
|
-
}),
|
|
188
|
+
}), re < 1 ? u = requestAnimationFrame(oe) : P.value = !1;
|
|
189
189
|
};
|
|
190
|
-
u = requestAnimationFrame(
|
|
190
|
+
u = requestAnimationFrame(oe);
|
|
191
191
|
}
|
|
192
192
|
function ne() {
|
|
193
193
|
return { x: i.value.width / 2, y: i.value.height / 2 };
|
|
194
194
|
}
|
|
195
195
|
function he(c, F = ne(), X = !1) {
|
|
196
196
|
if (!t.zoomable()) return;
|
|
197
|
-
cancelAnimationFrame(u),
|
|
198
|
-
const Z = de(c, 1, t.zoomLimit()), ae = Z / r.level,
|
|
199
|
-
F.x -
|
|
200
|
-
F.y -
|
|
197
|
+
cancelAnimationFrame(u), P.value = !1;
|
|
198
|
+
const Z = de(c, 1, t.zoomLimit()), ae = Z / r.level, oe = ne(), we = ve(
|
|
199
|
+
F.x - oe.x - (F.x - oe.x - r.offsetX) * ae,
|
|
200
|
+
F.y - oe.y - (F.y - oe.y - r.offsetY) * ae,
|
|
201
201
|
Z
|
|
202
|
-
),
|
|
203
|
-
X ? xe(
|
|
202
|
+
), re = { level: Z, ...we };
|
|
203
|
+
X ? xe(re) : me(re);
|
|
204
204
|
}
|
|
205
205
|
function Ee() {
|
|
206
206
|
r.draggingDown = !1, r.downOffsetX = 0, r.downOffsetY = 0, r.downScale = 1, t.onSwipeDownProgress(0);
|
|
207
207
|
}
|
|
208
208
|
function Me(c = !1) {
|
|
209
|
-
c && (cancelAnimationFrame(u),
|
|
209
|
+
c && (cancelAnimationFrame(u), P.value = !1), q.cancel(), _.clear(), p.value = !1, v.value = !1, clearTimeout(I), C = "idle", V = 0, r.zooming = !1, c || (Ee(), t.onPageDrag(0)), clearTimeout(k), h = -1e3;
|
|
210
210
|
}
|
|
211
211
|
function Fe(c = 0) {
|
|
212
|
-
cancelAnimationFrame(u),
|
|
212
|
+
cancelAnimationFrame(u), P.value = !1, Me();
|
|
213
213
|
const F = { level: 1, offsetX: 0, offsetY: 0 };
|
|
214
214
|
c > 0 && (r.level !== 1 || r.offsetX !== 0 || r.offsetY !== 0) ? xe(F, c) : me(F);
|
|
215
215
|
}
|
|
@@ -217,9 +217,9 @@ function Gt(a = {}) {
|
|
|
217
217
|
return { x: c.clientX - F.left, y: c.clientY - F.top };
|
|
218
218
|
}
|
|
219
219
|
function st() {
|
|
220
|
-
q.cancel(), E = !1,
|
|
220
|
+
q.cancel(), E = !1, A = !1, V = 0;
|
|
221
221
|
const [c, F] = [..._.values()];
|
|
222
|
-
Ze = Math.max(1, nt(c, F)), Oe = bt(c, F), D = Q(),
|
|
222
|
+
Ze = Math.max(1, nt(c, F)), Oe = bt(c, F), D = Q(), C = "pinch", r.zooming = !0, Ee(), t.onPageDrag(0), clearTimeout(k), h = -1e3;
|
|
223
223
|
}
|
|
224
224
|
function ut(c, F = e.value.getBoundingClientRect()) {
|
|
225
225
|
if (!t.interactive() || c.pointerType === "mouse" && c.button !== 0)
|
|
@@ -227,19 +227,19 @@ function Gt(a = {}) {
|
|
|
227
227
|
const X = c.target;
|
|
228
228
|
if (X.closest("button, input, a, select") || X instanceof HTMLVideoElement && X.controls && c.clientY > X.getBoundingClientRect().bottom - 48)
|
|
229
229
|
return !1;
|
|
230
|
-
if (cancelAnimationFrame(u),
|
|
230
|
+
if (cancelAnimationFrame(u), P.value = !1, p.value = !0, _.size === 0 && (K = F), _.set(c.pointerId, Te(c)), e.value.setPointerCapture(c.pointerId), _.size >= 2)
|
|
231
231
|
return st(), !0;
|
|
232
|
-
N = Te(c), Y = { ...N, time: performance.now() },
|
|
233
|
-
const Z =
|
|
234
|
-
return t.holdable() && Math.abs(N.x -
|
|
232
|
+
N = Te(c), Y = { ...N, time: performance.now() }, Pe = Y.time, se = 0, fe = 0, D = Q(), C = "pending", E = !0, A = !1, V = 0;
|
|
233
|
+
const Z = b.value.width / 2, ae = b.value.height / 2, oe = ne();
|
|
234
|
+
return t.holdable() && Math.abs(N.x - oe.x - r.offsetX) <= Z && Math.abs(N.y - oe.y - r.offsetY) <= ae && (clearTimeout(k), q.arm()), !0;
|
|
235
235
|
}
|
|
236
236
|
function ct(c) {
|
|
237
237
|
if (!_.has(c.pointerId)) return;
|
|
238
238
|
const F = Te(c);
|
|
239
|
-
if (_.set(c.pointerId, F),
|
|
239
|
+
if (_.set(c.pointerId, F), C === "pinch" && _.size >= 2) {
|
|
240
240
|
if (!t.zoomable()) return;
|
|
241
|
-
const [we,
|
|
242
|
-
D.level * nt(we,
|
|
241
|
+
const [we, re] = [..._.values()], be = ne(), Qe = bt(we, re), Ye = de(
|
|
242
|
+
D.level * nt(we, re) / Ze,
|
|
243
243
|
0.75,
|
|
244
244
|
t.zoomLimit()
|
|
245
245
|
), Je = Ye / D.level;
|
|
@@ -253,46 +253,46 @@ function Gt(a = {}) {
|
|
|
253
253
|
}), c.preventDefault();
|
|
254
254
|
return;
|
|
255
255
|
}
|
|
256
|
-
if (
|
|
256
|
+
if (C === "idle") return;
|
|
257
257
|
const X = F.x - N.x, Z = F.y - N.y;
|
|
258
|
-
if (
|
|
258
|
+
if (C === "hold") {
|
|
259
259
|
if (c.preventDefault(), Math.hypot(X, Z) < 9) return;
|
|
260
|
-
q.cancel(),
|
|
260
|
+
q.cancel(), C = "pending";
|
|
261
261
|
}
|
|
262
262
|
Math.hypot(X, Z) >= 9 && q.cancel();
|
|
263
|
-
const ae = performance.now(),
|
|
264
|
-
if (
|
|
265
|
-
if (clearTimeout(
|
|
266
|
-
const we = Math.max(0, (
|
|
267
|
-
me({ level: r.level, ...ve(
|
|
268
|
-
} else
|
|
263
|
+
const ae = performance.now(), oe = Math.max(8, ae - Y.time);
|
|
264
|
+
if (se = (F.x - Y.x) / oe, fe = (F.y - Y.y) / oe, Y = { ...F, time: ae }, C === "pending" && (C = Nt(X, Z, r.level), A = C === "pan" && E && Math.abs(X) > Math.abs(Z) * 1.1), C !== "pending")
|
|
265
|
+
if (clearTimeout(k), h = -1e3, c.preventDefault(), C === "pan") {
|
|
266
|
+
const we = Math.max(0, (b.value.width - i.value.width) / 2), re = Kt(D.offsetX + X, we, A);
|
|
267
|
+
me({ level: r.level, ...ve(re.offsetX, D.offsetY + Z, r.level) }), re.pageOffset !== V && (V = re.pageOffset, t.onPageDrag(V));
|
|
268
|
+
} else C === "page" ? t.onPageDrag(X) : C === "dismiss" && (r.draggingDown = !0, r.downOffsetX = X * 0.65, r.downOffsetY = Math.max(0, Z), r.downScale = de(1 - Math.max(0, Z) / i.value.height * 0.6, 0.65, 1), t.onSwipeDownProgress(de(Z / (i.value.height * 0.55), 0, 0.85)));
|
|
269
269
|
}
|
|
270
270
|
function j(c) {
|
|
271
271
|
if (!_.has(c.pointerId)) return;
|
|
272
|
-
if (q.cancel(), _.delete(c.pointerId), p.value = _.size > 0,
|
|
273
|
-
_.size > 0 ? (N = [..._.values()][0], D = Q(),
|
|
272
|
+
if (q.cancel(), _.delete(c.pointerId), p.value = _.size > 0, C === "pinch") {
|
|
273
|
+
_.size > 0 ? (N = [..._.values()][0], D = Q(), C = "pan") : (C = "idle", r.zooming = !1, he(Math.max(1, r.level), ne(), !0));
|
|
274
274
|
return;
|
|
275
275
|
}
|
|
276
276
|
if (_.size > 0) return;
|
|
277
277
|
const F = Te(c), X = F.x - N.x, Z = F.y - N.y, ae = performance.now() - Y.time < 100;
|
|
278
|
-
|
|
278
|
+
C === "page" || C === "pan" && V !== 0 ? t.onPageRelease(C === "page" ? X : V, ae ? se : 0) : C === "dismiss" ? Z > i.value.height * 0.18 || Z > 45 && ae && fe > 0.7 ? t.onSwipeDownClose() : Ee() : C === "pending" && performance.now() - Pe < 300 && nt(N, F) < 9 ? Ge(F) : r.level < 1 && he(1, ne(), !0), r.zooming = !1, C = "idle";
|
|
279
279
|
}
|
|
280
280
|
function Ke(c) {
|
|
281
281
|
if (!_.has(c.pointerId)) return;
|
|
282
|
-
const F =
|
|
282
|
+
const F = C === "page" || C === "pan" && V !== 0;
|
|
283
283
|
Me(), F && t.onPageRelease(0, 0), r.level < 1 && he(1, ne(), !0);
|
|
284
284
|
}
|
|
285
285
|
function Ge(c) {
|
|
286
286
|
const F = performance.now();
|
|
287
|
-
F - h < 280 && nt(c,
|
|
287
|
+
F - h < 280 && nt(c, d) < 36 ? (clearTimeout(k), h = -1e3, t.onDoubleTap(), he(r.level > 1.01 ? 1 : t.doubleTapZoom(), c, !0)) : (h = F, d = c, k = setTimeout(t.onTap, 280));
|
|
288
288
|
}
|
|
289
289
|
function _e(c) {
|
|
290
290
|
if (t.interactive()) {
|
|
291
|
-
if (q.cancel(), v.value = !0, clearTimeout(
|
|
291
|
+
if (q.cancel(), v.value = !0, clearTimeout(I), I = setTimeout(() => {
|
|
292
292
|
v.value = !1;
|
|
293
293
|
}, 120), c.ctrlKey || c.metaKey)
|
|
294
294
|
c.preventDefault(), he(
|
|
295
|
-
r.level * Zt(c,
|
|
295
|
+
r.level * Zt(c, Ce.size > 0),
|
|
296
296
|
Te(c, e.value.getBoundingClientRect())
|
|
297
297
|
);
|
|
298
298
|
else if (r.level > 1) {
|
|
@@ -317,8 +317,8 @@ function Gt(a = {}) {
|
|
|
317
317
|
mediaRef: o,
|
|
318
318
|
viewportSize: i,
|
|
319
319
|
mediaSize: s,
|
|
320
|
-
visualMediaSize:
|
|
321
|
-
displaySize:
|
|
320
|
+
visualMediaSize: f,
|
|
321
|
+
displaySize: b,
|
|
322
322
|
displayScale: m,
|
|
323
323
|
downDragStyle: B,
|
|
324
324
|
requestRender: pe,
|
|
@@ -347,7 +347,7 @@ function Gt(a = {}) {
|
|
|
347
347
|
};
|
|
348
348
|
return { core: Ve, onPointerDown: ut, onPointerMove: ct, onPointerUp: j, onPointerCancel: Ke, onWheel: _e };
|
|
349
349
|
}
|
|
350
|
-
const
|
|
350
|
+
const ue = {
|
|
351
351
|
maxDecodedPixels: 24e6,
|
|
352
352
|
maxCanvasPixels: 6e6,
|
|
353
353
|
maxDevicePixelRatio: 2.5,
|
|
@@ -383,27 +383,27 @@ const Qt = async (a, t) => {
|
|
|
383
383
|
o.releaseLock();
|
|
384
384
|
}
|
|
385
385
|
t.signal.throwIfAborted();
|
|
386
|
-
const r = new Blob(i, { type: e.headers.get("content-type") }),
|
|
386
|
+
const r = new Blob(i, { type: e.headers.get("content-type") }), f = URL.createObjectURL(r), y = new Image();
|
|
387
387
|
y.decoding = "async";
|
|
388
388
|
try {
|
|
389
|
-
if (await new Promise((m,
|
|
389
|
+
if (await new Promise((m, b) => {
|
|
390
390
|
const B = () => {
|
|
391
|
-
y.removeAttribute("src"),
|
|
391
|
+
y.removeAttribute("src"), b(new DOMException("请求已取消", "AbortError"));
|
|
392
392
|
};
|
|
393
393
|
y.onload = () => {
|
|
394
394
|
t.signal.removeEventListener("abort", B), m();
|
|
395
395
|
}, y.onerror = () => {
|
|
396
|
-
t.signal.removeEventListener("abort", B),
|
|
397
|
-
}, t.signal.addEventListener("abort", B, { once: !0 }), y.src =
|
|
398
|
-
}), t.signal.throwIfAborted(), y.naturalWidth * y.naturalHeight >
|
|
396
|
+
t.signal.removeEventListener("abort", B), b(new Error("图片解码失败或格式不受支持"));
|
|
397
|
+
}, t.signal.addEventListener("abort", B, { once: !0 }), y.src = f;
|
|
398
|
+
}), t.signal.throwIfAborted(), y.naturalWidth * y.naturalHeight > ue.maxDecodedPixels)
|
|
399
399
|
throw new Xe("图片像素超过解码保护限制,请提供较小的适屏资源");
|
|
400
400
|
return await y.decode(), t.signal.throwIfAborted(), y;
|
|
401
401
|
} finally {
|
|
402
|
-
URL.revokeObjectURL(
|
|
402
|
+
URL.revokeObjectURL(f);
|
|
403
403
|
}
|
|
404
404
|
};
|
|
405
405
|
class Jt {
|
|
406
|
-
constructor(t =
|
|
406
|
+
constructor(t = ue.cacheBytes, e = ue.concurrency, n = Qt) {
|
|
407
407
|
tt(this, "entries", /* @__PURE__ */ new Map());
|
|
408
408
|
tt(this, "active", 0);
|
|
409
409
|
tt(this, "cancelled", 0);
|
|
@@ -419,15 +419,15 @@ class Jt {
|
|
|
419
419
|
};
|
|
420
420
|
}
|
|
421
421
|
acquire(t, e = {}) {
|
|
422
|
-
const n = { priority: 0, maxBytes:
|
|
422
|
+
const n = { priority: 0, maxBytes: ue.maxOriginalBytes, ...e };
|
|
423
423
|
if (this.entries.has(t) && ["error", "aborted"].includes(this.entries.get(t).state) && this.entries.delete(t), !this.entries.has(t)) {
|
|
424
424
|
let s, r;
|
|
425
|
-
const
|
|
425
|
+
const f = new Promise((y, m) => {
|
|
426
426
|
s = y, r = m;
|
|
427
427
|
});
|
|
428
|
-
|
|
428
|
+
f.catch(() => {
|
|
429
429
|
}), this.entries.set(t, {
|
|
430
|
-
promise:
|
|
430
|
+
promise: f,
|
|
431
431
|
resolve: s,
|
|
432
432
|
reject: r,
|
|
433
433
|
controller: new AbortController(),
|
|
@@ -471,7 +471,7 @@ class Jt {
|
|
|
471
471
|
let t = this.stats.bytes;
|
|
472
472
|
for (const [e, n] of this.entries)
|
|
473
473
|
if (!(n.users > 0 || n.state === "loading" || n.state === "queued")) {
|
|
474
|
-
if (t <= this.budget && this.entries.size <=
|
|
474
|
+
if (t <= this.budget && this.entries.size <= ue.cacheEntries) break;
|
|
475
475
|
t -= n.bytes, this.entries.delete(e);
|
|
476
476
|
}
|
|
477
477
|
}
|
|
@@ -487,9 +487,9 @@ function kt() {
|
|
|
487
487
|
return t.fillStyle = "#f3f4f5", t.fillRect(0, 0, 1, 1), a;
|
|
488
488
|
}
|
|
489
489
|
const Rt = ["thumbnail", "screen", "full"], We = {
|
|
490
|
-
maxOriginalPixels:
|
|
491
|
-
maxOriginalBytes:
|
|
492
|
-
maxPreviewBytes:
|
|
490
|
+
maxOriginalPixels: ue.maxDecodedPixels,
|
|
491
|
+
maxOriginalBytes: ue.maxOriginalBytes,
|
|
492
|
+
maxPreviewBytes: ue.maxPreviewBytes
|
|
493
493
|
}, Ne = (a, t) => t === "full" ? a.src : t === "screen" ? a.previewSrc : a.thumbnail;
|
|
494
494
|
function aa(a, t) {
|
|
495
495
|
return a.width * a.height <= t.maxOriginalPixels;
|
|
@@ -514,14 +514,14 @@ function na(a, t, e, n, o) {
|
|
|
514
514
|
originalReason: ""
|
|
515
515
|
};
|
|
516
516
|
s.originalStatus === "blocked" && (s.originalReason = "原图像素过大,当前显示适屏预览,可下载原文件");
|
|
517
|
-
for (const [r,
|
|
518
|
-
if (
|
|
519
|
-
const y = n(a,
|
|
517
|
+
for (const [r, f] of Rt.entries()) {
|
|
518
|
+
if (f === "screen" && t === "thumbnail" || f === "full" && (t !== "full" || !i)) continue;
|
|
519
|
+
const y = n(a, f, o);
|
|
520
520
|
if (!i && y === a.src) {
|
|
521
521
|
s.originalStatus = "blocked", s.originalReason = "大原图需要独立的适屏资源,请从相册生成预览或下载文件";
|
|
522
522
|
continue;
|
|
523
523
|
}
|
|
524
|
-
s.sources.push({ url: y, quality:
|
|
524
|
+
s.sources.push({ url: y, quality: f, rank: r });
|
|
525
525
|
}
|
|
526
526
|
return s;
|
|
527
527
|
}
|
|
@@ -563,41 +563,41 @@ const ia = ["aria-label"], oa = {
|
|
|
563
563
|
},
|
|
564
564
|
emits: ["ready", "error", "originalState"],
|
|
565
565
|
setup(a, { emit: t }) {
|
|
566
|
-
const e = a, n = t, o = R(), i = gt({ status: "empty" }), s = R("loading"), r = R(!1),
|
|
566
|
+
const e = a, n = t, o = R(), i = gt({ status: "empty" }), s = R("loading"), r = R(!1), f = R("idle"), y = R("");
|
|
567
567
|
ee(
|
|
568
|
-
[
|
|
569
|
-
() => n("originalState",
|
|
568
|
+
[f, y],
|
|
569
|
+
() => n("originalState", f.value, y.value)
|
|
570
570
|
);
|
|
571
|
-
let m = !0,
|
|
571
|
+
let m = !0, b = 0, B = e.media.id, L = [], P = () => {
|
|
572
572
|
}, p, v = !1, T = { kind: "empty" };
|
|
573
|
-
function
|
|
573
|
+
function I() {
|
|
574
574
|
if (e.core.motionActive.value && e.loadEnabled && B === e.media.id) {
|
|
575
575
|
v = !0;
|
|
576
576
|
return;
|
|
577
577
|
}
|
|
578
|
-
v = !1,
|
|
578
|
+
v = !1, k();
|
|
579
579
|
}
|
|
580
|
-
function
|
|
581
|
-
i.value = { status: "ready", image:
|
|
580
|
+
function w(d, M, C) {
|
|
581
|
+
i.value = { status: "ready", image: d, rank: M }, e.core.setMediaElement(d), s.value = "ready", r.value = !1, C === "full" && (f.value = "ready"), e.core.requestRender(), n("ready", C);
|
|
582
582
|
}
|
|
583
583
|
ee(
|
|
584
584
|
() => e.core.motionActive.value,
|
|
585
|
-
(
|
|
586
|
-
if (!
|
|
585
|
+
(d) => {
|
|
586
|
+
if (!d) {
|
|
587
587
|
if (T.kind === "ready") {
|
|
588
|
-
const
|
|
589
|
-
T = { kind: "empty" },
|
|
588
|
+
const M = T;
|
|
589
|
+
T = { kind: "empty" }, M.token === b && w(M.image, M.rank, M.quality);
|
|
590
590
|
}
|
|
591
|
-
v &&
|
|
591
|
+
v && I();
|
|
592
592
|
}
|
|
593
593
|
}
|
|
594
594
|
), ze(() => {
|
|
595
|
-
const
|
|
596
|
-
p =
|
|
597
|
-
m &&
|
|
595
|
+
const d = o.value;
|
|
596
|
+
p = d.getContext("2d"), e.core.canvasRef.value = d, P = e.core.registerRenderHandler(h), u(), ye(() => {
|
|
597
|
+
m && I();
|
|
598
598
|
});
|
|
599
599
|
}), Re(() => {
|
|
600
|
-
m = !1,
|
|
600
|
+
m = !1, b += 1, P(), L.forEach((d) => d.release());
|
|
601
601
|
}), ee(
|
|
602
602
|
[
|
|
603
603
|
() => e.media.id,
|
|
@@ -611,67 +611,67 @@ const ia = ["aria-label"], oa = {
|
|
|
611
611
|
() => e.requestVersion
|
|
612
612
|
],
|
|
613
613
|
() => {
|
|
614
|
-
|
|
614
|
+
I();
|
|
615
615
|
}
|
|
616
616
|
), ee(() => e.initialImage, u), ee(
|
|
617
617
|
() => e.rendering,
|
|
618
|
-
(
|
|
619
|
-
|
|
618
|
+
(d) => {
|
|
619
|
+
d && e.core.requestRender();
|
|
620
620
|
}
|
|
621
621
|
);
|
|
622
622
|
function u() {
|
|
623
623
|
e.initialImage.kind !== "image" || i.value.status === "ready" || (i.value = { status: "ready", image: e.initialImage.image, rank: 0 }, e.core.setMediaElement(e.initialImage.image), s.value = "ready", e.core.requestRender(), n("ready", "thumbnail"));
|
|
624
624
|
}
|
|
625
|
-
async function
|
|
626
|
-
const
|
|
625
|
+
async function k() {
|
|
626
|
+
const d = ++b;
|
|
627
627
|
if (T = { kind: "empty" }, r.value = !1, B !== e.media.id && (B = e.media.id, i.value = { status: "empty" }, s.value = "loading", e.core.clearMedia(), u()), !e.loadEnabled) {
|
|
628
628
|
L.forEach((Y) => Y.release()), L = [];
|
|
629
629
|
return;
|
|
630
630
|
}
|
|
631
|
-
const
|
|
632
|
-
e.core.viewportSize.value.width * Math.min(devicePixelRatio,
|
|
633
|
-
),
|
|
631
|
+
const M = Math.ceil(
|
|
632
|
+
e.core.viewportSize.value.width * Math.min(devicePixelRatio, ue.maxDevicePixelRatio) * e.core.state.level
|
|
633
|
+
), C = na(
|
|
634
634
|
e.media,
|
|
635
635
|
e.quality,
|
|
636
636
|
e.resourcePolicy,
|
|
637
637
|
e.resolveSource,
|
|
638
|
-
|
|
638
|
+
M
|
|
639
639
|
);
|
|
640
|
-
y.value =
|
|
641
|
-
const { sources: E } =
|
|
640
|
+
y.value = C.originalReason, f.value = C.originalStatus;
|
|
641
|
+
const { sources: E } = C, A = E.map(
|
|
642
642
|
(Y) => ea.acquire(Y.url, {
|
|
643
643
|
priority: e.priority,
|
|
644
644
|
maxBytes: Y.quality === "full" ? e.resourcePolicy.maxOriginalBytes : e.resourcePolicy.maxPreviewBytes
|
|
645
645
|
})
|
|
646
646
|
), V = L;
|
|
647
|
-
L =
|
|
647
|
+
L = A, V.forEach((Y) => Y.release()), E.length === 0 && i.value.status === "empty" && (s.value = "error", n("error", new Xe(y.value))), i.value.status === "ready" && n("ready", Rt[i.value.rank]);
|
|
648
648
|
let _ = i.value.status === "ready" ? i.value.rank : -1, N = 0;
|
|
649
649
|
await Promise.all(
|
|
650
|
-
E.map(async (Y,
|
|
651
|
-
const
|
|
650
|
+
E.map(async (Y, Pe) => {
|
|
651
|
+
const se = Y.rank, fe = A[Pe];
|
|
652
652
|
try {
|
|
653
653
|
const K = await fe.ready;
|
|
654
|
-
if (
|
|
655
|
-
_ =
|
|
654
|
+
if (d !== b || se < _) return;
|
|
655
|
+
_ = se, e.core.motionActive.value && i.value.status === "ready" ? T = { kind: "ready", token: d, image: K, rank: se, quality: Y.quality } : w(K, se, Y.quality);
|
|
656
656
|
} catch (K) {
|
|
657
|
-
if (
|
|
658
|
-
Y.quality === "full" && (
|
|
657
|
+
if (d !== b || K instanceof Error && K.name === "AbortError") return;
|
|
658
|
+
Y.quality === "full" && (f.value = K instanceof Xe ? "blocked" : "error", y.value = K instanceof Error ? K.message : "原图加载失败,可重试"), N += 1, se > _ && i.value.status === "ready" && (r.value = !0), N === E.length && i.value.status === "empty" && (s.value = "error"), n("error", Ae(K));
|
|
659
659
|
}
|
|
660
660
|
})
|
|
661
661
|
);
|
|
662
662
|
}
|
|
663
663
|
function h() {
|
|
664
664
|
if (!e.rendering || i.value.status !== "ready") return;
|
|
665
|
-
const
|
|
666
|
-
if (
|
|
667
|
-
const
|
|
665
|
+
const d = o.value, M = e.core.viewportSize.value;
|
|
666
|
+
if (M.width <= 0 || M.height <= 0) return;
|
|
667
|
+
const C = Math.min(
|
|
668
668
|
devicePixelRatio,
|
|
669
|
-
|
|
670
|
-
Math.sqrt(
|
|
671
|
-
), E = Math.max(1, Math.round(
|
|
672
|
-
(
|
|
673
|
-
|
|
674
|
-
|
|
669
|
+
ue.maxDevicePixelRatio,
|
|
670
|
+
Math.sqrt(ue.maxCanvasPixels / (M.width * M.height))
|
|
671
|
+
), E = Math.max(1, Math.round(M.width * C)), A = Math.max(1, Math.round(M.height * C));
|
|
672
|
+
(d.width !== E || d.height !== A) && (d.width = E, d.height = A), p.setTransform(C, 0, 0, C, 0, 0), p.clearRect(0, 0, M.width, M.height), p.imageSmoothingEnabled = !0, p.imageSmoothingQuality = "high", p.translate(
|
|
673
|
+
M.width / 2 + e.core.state.offsetX,
|
|
674
|
+
M.height / 2 + e.core.state.offsetY
|
|
675
675
|
), p.rotate(e.core.state.rotation * Math.PI / 180);
|
|
676
676
|
const { width: V, height: _ } = e.core.mediaSize.value, N = e.core.displayScale.value;
|
|
677
677
|
p.drawImage(
|
|
@@ -682,22 +682,22 @@ const ia = ["aria-label"], oa = {
|
|
|
682
682
|
_ * N
|
|
683
683
|
);
|
|
684
684
|
}
|
|
685
|
-
return (
|
|
685
|
+
return (d, M) => (z(), H(De, null, [
|
|
686
686
|
$("canvas", {
|
|
687
687
|
ref_key: "canvasRef",
|
|
688
688
|
ref: o,
|
|
689
689
|
class: "mp-canvas-renderer",
|
|
690
|
-
"aria-label":
|
|
690
|
+
"aria-label": d.media.title
|
|
691
691
|
}, null, 8, ia),
|
|
692
|
-
s.value === "loading" ? (
|
|
693
|
-
s.value === "error" ? (
|
|
692
|
+
s.value === "loading" ? (z(), H("div", oa, la)) : ie("", !0),
|
|
693
|
+
s.value === "error" ? (z(), H("div", sa, [
|
|
694
694
|
ua,
|
|
695
695
|
$("button", {
|
|
696
696
|
type: "button",
|
|
697
|
-
onClick: J(
|
|
697
|
+
onClick: J(k, ["stop"])
|
|
698
698
|
}, "重新加载")
|
|
699
|
-
])) :
|
|
700
|
-
|
|
699
|
+
])) : ie("", !0),
|
|
700
|
+
f.value === "blocked" ? (z(), H("span", ca, le(y.value), 1)) : r.value ? (z(), H("span", da, "高清图加载失败,当前显示预览图")) : ie("", !0)
|
|
701
701
|
], 64));
|
|
702
702
|
}
|
|
703
703
|
});
|
|
@@ -719,33 +719,33 @@ function Lt(a, t) {
|
|
|
719
719
|
status: "loading"
|
|
720
720
|
});
|
|
721
721
|
let n = !1, o = 0, i = !1;
|
|
722
|
-
const s = U(() => e.duration > 0 && e.status !== "error"), r = U(() => e.scrubbing ? e.scrubTime : e.time),
|
|
722
|
+
const s = U(() => e.duration > 0 && e.status !== "error"), r = U(() => e.scrubbing ? e.scrubTime : e.time), f = U(() => s.value ? r.value / e.duration * 100 : 0), y = U(
|
|
723
723
|
() => s.value ? e.buffered / e.duration * 100 : 0
|
|
724
724
|
);
|
|
725
725
|
function m() {
|
|
726
726
|
const h = a();
|
|
727
727
|
e.time = h.currentTime, e.duration = Number.isFinite(h.duration) ? h.duration : 0;
|
|
728
|
-
const
|
|
729
|
-
e.buffered =
|
|
728
|
+
const d = h.buffered;
|
|
729
|
+
e.buffered = d.length > 0 ? d.end(d.length - 1) : 0;
|
|
730
730
|
}
|
|
731
|
-
async function
|
|
731
|
+
async function b() {
|
|
732
732
|
if (i) return;
|
|
733
733
|
const h = ++o;
|
|
734
734
|
e.ended && (a().currentTime = 0), e.ended = !1, e.buffering = !0;
|
|
735
735
|
try {
|
|
736
736
|
await a().play();
|
|
737
|
-
} catch (
|
|
737
|
+
} catch (d) {
|
|
738
738
|
if (h !== o) return;
|
|
739
|
-
e.buffering = !1, e.playing = !1,
|
|
739
|
+
e.buffering = !1, e.playing = !1, d instanceof Error && d.name !== "NotAllowedError" && d.name !== "AbortError" && t(d);
|
|
740
740
|
}
|
|
741
741
|
}
|
|
742
742
|
function B() {
|
|
743
743
|
o += 1, n = !1, e.scrubbing = !1, e.buffering = !1, a().pause();
|
|
744
744
|
}
|
|
745
745
|
function L() {
|
|
746
|
-
e.playing ? B() :
|
|
746
|
+
e.playing ? B() : b();
|
|
747
747
|
}
|
|
748
|
-
function
|
|
748
|
+
function P() {
|
|
749
749
|
!s.value || e.scrubbing || (n = e.playing, e.scrubbing = !0, e.scrubTime = e.time, a().pause());
|
|
750
750
|
}
|
|
751
751
|
function p(h) {
|
|
@@ -753,13 +753,13 @@ function Lt(a, t) {
|
|
|
753
753
|
}
|
|
754
754
|
function v(h = !0) {
|
|
755
755
|
if (!e.scrubbing) return;
|
|
756
|
-
const
|
|
757
|
-
n = !1, e.scrubbing = !1, h && (a().currentTime = e.scrubTime, e.time = e.scrubTime, e.ended = !1),
|
|
756
|
+
const d = n;
|
|
757
|
+
n = !1, e.scrubbing = !1, h && (a().currentTime = e.scrubTime, e.time = e.scrubTime, e.ended = !1), d && b();
|
|
758
758
|
}
|
|
759
759
|
function T() {
|
|
760
760
|
a().muted = !a().muted, e.muted = a().muted;
|
|
761
761
|
}
|
|
762
|
-
const
|
|
762
|
+
const w = Object.fromEntries(
|
|
763
763
|
Object.entries({
|
|
764
764
|
loadedmetadata: m,
|
|
765
765
|
durationchange: m,
|
|
@@ -798,34 +798,34 @@ function Lt(a, t) {
|
|
|
798
798
|
error: () => {
|
|
799
799
|
e.status = "error", e.playing = !1, e.buffering = !1, t(new Error("视频暂时无法播放,请重试或检查资源格式"));
|
|
800
800
|
}
|
|
801
|
-
}).map(([h,
|
|
801
|
+
}).map(([h, d]) => [
|
|
802
802
|
h,
|
|
803
803
|
() => {
|
|
804
|
-
i ||
|
|
804
|
+
i || d();
|
|
805
805
|
}
|
|
806
806
|
])
|
|
807
807
|
);
|
|
808
808
|
function u() {
|
|
809
809
|
i = !0, B();
|
|
810
810
|
}
|
|
811
|
-
function
|
|
811
|
+
function k() {
|
|
812
812
|
e.status = "loading", e.buffering = !0, a().load();
|
|
813
813
|
}
|
|
814
814
|
return {
|
|
815
815
|
state: e,
|
|
816
816
|
seekable: s,
|
|
817
817
|
displayTime: r,
|
|
818
|
-
progress:
|
|
818
|
+
progress: f,
|
|
819
819
|
bufferedProgress: y,
|
|
820
|
-
events:
|
|
821
|
-
play:
|
|
820
|
+
events: w,
|
|
821
|
+
play: b,
|
|
822
822
|
pause: B,
|
|
823
823
|
toggle: L,
|
|
824
|
-
beginScrub:
|
|
824
|
+
beginScrub: P,
|
|
825
825
|
scrub: p,
|
|
826
826
|
endScrub: v,
|
|
827
827
|
toggleMuted: T,
|
|
828
|
-
retry:
|
|
828
|
+
retry: k,
|
|
829
829
|
dispose: u
|
|
830
830
|
};
|
|
831
831
|
}
|
|
@@ -848,10 +848,10 @@ const fa = ["data-live-state"], ga = { class: "mp-dom-renderer mp-live-photo__mo
|
|
|
848
848
|
},
|
|
849
849
|
emits: ["ready", "error", "originalState", "liveState", "liveEnded"],
|
|
850
850
|
setup(a, { expose: t, emit: e }) {
|
|
851
|
-
const n = a, o = e, i = R(), s = R(), r = R(),
|
|
851
|
+
const n = a, o = e, i = R(), s = R(), r = R(), f = Lt(
|
|
852
852
|
() => i.value,
|
|
853
853
|
(u) => o("error", u)
|
|
854
|
-
), { state: y } =
|
|
854
|
+
), { state: y } = f;
|
|
855
855
|
Et(
|
|
856
856
|
() => i.value,
|
|
857
857
|
() => n.media,
|
|
@@ -861,22 +861,22 @@ const fa = ["data-live-state"], ga = { class: "mp-dom-renderer mp-live-photo__mo
|
|
|
861
861
|
y.status = "error", o("error", u);
|
|
862
862
|
}
|
|
863
863
|
);
|
|
864
|
-
let m = !1,
|
|
864
|
+
let m = !1, b = () => {
|
|
865
865
|
};
|
|
866
866
|
const B = U(
|
|
867
867
|
() => n.active && n.enabled && y.playing && y.status === "ready" && !y.buffering
|
|
868
868
|
), L = U(() => ({
|
|
869
869
|
transform: `translate(-50%, -50%) translate3d(${n.core.state.offsetX}px, ${n.core.state.offsetY}px, 0)`
|
|
870
|
-
})),
|
|
870
|
+
})), P = U(() => ({
|
|
871
871
|
width: `${n.core.mediaSize.value.width * n.core.displayScale.value}px`,
|
|
872
872
|
height: `${n.core.mediaSize.value.height * n.core.displayScale.value}px`,
|
|
873
873
|
transform: `rotate(${n.core.state.rotation}deg)`
|
|
874
874
|
}));
|
|
875
875
|
function p() {
|
|
876
|
-
|
|
876
|
+
f.pause(), i.value.readyState >= HTMLMediaElement.HAVE_METADATA && (i.value.currentTime = 0);
|
|
877
877
|
}
|
|
878
878
|
function v() {
|
|
879
|
-
!n.active || !n.enabled || !n.loadEnabled || !n.playing || y.status !== "ready" || y.buffering ? p() :
|
|
879
|
+
!n.active || !n.enabled || !n.loadEnabled || !n.playing || y.status !== "ready" || y.buffering ? p() : f.play().then(() => {
|
|
880
880
|
!m && !y.playing && n.playing && o("liveEnded");
|
|
881
881
|
});
|
|
882
882
|
}
|
|
@@ -891,28 +891,28 @@ const fa = ["data-live-state"], ga = { class: "mp-dom-renderer mp-live-photo__mo
|
|
|
891
891
|
function T() {
|
|
892
892
|
m || (p(), o("liveEnded"));
|
|
893
893
|
}
|
|
894
|
-
function
|
|
894
|
+
function I() {
|
|
895
895
|
document.hidden && (p(), o("liveEnded"));
|
|
896
896
|
}
|
|
897
897
|
ze(() => {
|
|
898
|
-
|
|
898
|
+
b = ee(() => [n.active, n.enabled, n.loadEnabled, n.playing], v, {
|
|
899
899
|
flush: "post"
|
|
900
|
-
}), v(), document.addEventListener("visibilitychange",
|
|
900
|
+
}), v(), document.addEventListener("visibilitychange", I);
|
|
901
901
|
}), Re(() => {
|
|
902
|
-
|
|
902
|
+
b(), m = !0, f.dispose(), document.removeEventListener("visibilitychange", I);
|
|
903
903
|
});
|
|
904
|
-
function
|
|
905
|
-
const u = document.createElement("canvas"),
|
|
904
|
+
function w() {
|
|
905
|
+
const u = document.createElement("canvas"), k = Math.min(
|
|
906
906
|
1,
|
|
907
|
-
Math.sqrt(
|
|
907
|
+
Math.sqrt(ue.maxCanvasPixels / (n.media.width * n.media.height))
|
|
908
908
|
);
|
|
909
|
-
u.width = Math.round(n.media.width *
|
|
910
|
-
const h = u.getContext("2d"),
|
|
911
|
-
h.drawImage(n.core.mediaRef.value, 0, 0, u.width, u.height),
|
|
912
|
-
const
|
|
913
|
-
return
|
|
909
|
+
u.width = Math.round(n.media.width * k), u.height = Math.round(n.media.height * k);
|
|
910
|
+
const h = u.getContext("2d"), d = Number(getComputedStyle(r.value).opacity);
|
|
911
|
+
h.drawImage(n.core.mediaRef.value, 0, 0, u.width, u.height), d < 1 && i.value.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && (h.globalAlpha = 1 - d, h.drawImage(i.value, 0, 0, u.width, u.height));
|
|
912
|
+
const M = new DOMMatrixReadOnly(getComputedStyle(s.value).transform).a;
|
|
913
|
+
return f.pause(), { image: u, scale: M };
|
|
914
914
|
}
|
|
915
|
-
return t({ captureFrame:
|
|
915
|
+
return t({ captureFrame: w }), (u, k) => (z(), H("div", {
|
|
916
916
|
class: "mp-live-photo-renderer",
|
|
917
917
|
"data-live-state": g(y).status === "error" ? "error" : B.value ? "playing" : "idle"
|
|
918
918
|
}, [
|
|
@@ -930,14 +930,14 @@ const fa = ["data-live-state"], ga = { class: "mp-dom-renderer mp-live-photo__mo
|
|
|
930
930
|
ref_key: "videoRef",
|
|
931
931
|
ref: i,
|
|
932
932
|
class: "mp-dom-renderer__node",
|
|
933
|
-
style:
|
|
933
|
+
style: P.value,
|
|
934
934
|
preload: u.active && u.enabled && u.loadEnabled ? "auto" : "none",
|
|
935
935
|
playsinline: "",
|
|
936
936
|
"webkit-playsinline": "true",
|
|
937
937
|
crossorigin: "anonymous"
|
|
938
|
-
}, pt(g(
|
|
938
|
+
}, pt(g(f).events, !0), {
|
|
939
939
|
onEnded: T,
|
|
940
|
-
onError:
|
|
940
|
+
onError: k[0] || (k[0] = (h) => o("liveEnded"))
|
|
941
941
|
}), null, 16, ma)
|
|
942
942
|
], 4)
|
|
943
943
|
]),
|
|
@@ -952,14 +952,14 @@ const fa = ["data-live-state"], ga = { class: "mp-dom-renderer mp-live-photo__mo
|
|
|
952
952
|
priority: u.priority,
|
|
953
953
|
"resource-policy": u.resourcePolicy,
|
|
954
954
|
"resolve-source": u.resolveSource,
|
|
955
|
-
onOriginalState:
|
|
955
|
+
onOriginalState: k[1] || (k[1] = (h, d) => o("originalState", h, d)),
|
|
956
956
|
media: u.media,
|
|
957
957
|
"initial-image": u.initialImage,
|
|
958
958
|
rendering: u.rendering,
|
|
959
959
|
core: u.core,
|
|
960
960
|
quality: u.quality,
|
|
961
|
-
onReady:
|
|
962
|
-
onError:
|
|
961
|
+
onReady: k[2] || (k[2] = (h) => o("ready", h)),
|
|
962
|
+
onError: k[3] || (k[3] = (h) => o("error", h))
|
|
963
963
|
}, null, 8, ["request-version", "load-enabled", "priority", "resource-policy", "resolve-source", "media", "initial-image", "rendering", "core", "quality"])
|
|
964
964
|
], 2)
|
|
965
965
|
], 2)
|
|
@@ -967,7 +967,7 @@ const fa = ["data-live-state"], ga = { class: "mp-dom-renderer mp-live-photo__mo
|
|
|
967
967
|
}
|
|
968
968
|
});
|
|
969
969
|
function va(a, t) {
|
|
970
|
-
const e = document.createElement("canvas"), n = Math.min(1, Math.sqrt(
|
|
970
|
+
const e = document.createElement("canvas"), n = Math.min(1, Math.sqrt(ue.maxCanvasPixels / (t.width * t.height)));
|
|
971
971
|
e.width = Math.max(1, Math.round(t.width * n)), e.height = Math.max(1, Math.round(t.height * n));
|
|
972
972
|
const o = Math.min(e.width / a.videoWidth, e.height / a.videoHeight), i = a.videoWidth * o, s = a.videoHeight * o;
|
|
973
973
|
return e.getContext("2d").drawImage(a, (e.width - i) / 2, (e.height - s) / 2, i, s), a.pause(), e;
|
|
@@ -1013,17 +1013,17 @@ const ha = {
|
|
|
1013
1013
|
volume: ["m11 4-6 5H2v6h3l6 5Z", "M15 8a6 6 0 0 1 0 8M18 5a10 10 0 0 1 0 14"],
|
|
1014
1014
|
muted: ["m11 4-6 5H2v6h3l6 5Z", "m16 9 6 6m0-6-6 6"]
|
|
1015
1015
|
};
|
|
1016
|
-
return (i, s) => (
|
|
1016
|
+
return (i, s) => (z(), H("span", {
|
|
1017
1017
|
class: qe(["mp-video-icon", { "has-album-icon": t.name in e }])
|
|
1018
1018
|
}, [
|
|
1019
|
-
(
|
|
1020
|
-
(
|
|
1021
|
-
key:
|
|
1019
|
+
(z(), H("svg", ha, [
|
|
1020
|
+
(z(!0), H(De, null, ot(o[i.name], (r, f) => (z(), H("path", {
|
|
1021
|
+
key: f,
|
|
1022
1022
|
d: r,
|
|
1023
1023
|
fill: i.name === "play" ? "currentColor" : "none"
|
|
1024
1024
|
}, null, 8, ya))), 128))
|
|
1025
1025
|
])),
|
|
1026
|
-
i.name in e ? (
|
|
1026
|
+
i.name in e ? (z(), H(De, { key: 0 }, [
|
|
1027
1027
|
$("img", {
|
|
1028
1028
|
class: "mp-video-icon--mobile",
|
|
1029
1029
|
src: n[e[i.name][0]],
|
|
@@ -1038,13 +1038,13 @@ const ha = {
|
|
|
1038
1038
|
"aria-hidden": "true",
|
|
1039
1039
|
draggable: "false"
|
|
1040
1040
|
}, null, 8, ba)
|
|
1041
|
-
], 64)) :
|
|
1041
|
+
], 64)) : ie("", !0)
|
|
1042
1042
|
], 2));
|
|
1043
1043
|
}
|
|
1044
1044
|
}), ka = {
|
|
1045
1045
|
key: 0,
|
|
1046
1046
|
class: "mp-video-seek-preview"
|
|
1047
|
-
}, xa = ["aria-label", "disabled"], Ma = { class: "mp-video-time" }, Sa = ["tabindex", "aria-disabled", "aria-valuemax", "aria-valuenow", "aria-valuetext"],
|
|
1047
|
+
}, xa = ["aria-label", "disabled"], Ma = { class: "mp-video-time" }, Sa = ["tabindex", "aria-disabled", "aria-valuemax", "aria-valuenow", "aria-valuetext"], Pa = /* @__PURE__ */ $("span", { class: "mp-video-progress__rail" }, null, -1), Ca = { class: "mp-video-time" }, Ea = ["aria-label", "aria-pressed"], Ra = ["aria-label", "disabled"], La = /* @__PURE__ */ Le({
|
|
1048
1048
|
__name: "VideoControls",
|
|
1049
1049
|
props: {
|
|
1050
1050
|
playback: {},
|
|
@@ -1053,12 +1053,12 @@ const ha = {
|
|
|
1053
1053
|
},
|
|
1054
1054
|
emits: ["fullscreen"],
|
|
1055
1055
|
setup(a, { emit: t }) {
|
|
1056
|
-
const e = a, n = t, o = R(), { state: i, seekable: s, displayTime: r, progress:
|
|
1056
|
+
const e = a, n = t, o = R(), { state: i, seekable: s, displayTime: r, progress: f, bufferedProgress: y } = e.playback;
|
|
1057
1057
|
function m(p) {
|
|
1058
1058
|
const v = o.value.getBoundingClientRect();
|
|
1059
1059
|
e.playback.scrub((p.clientX - v.left) / Math.max(1, v.width) * i.duration);
|
|
1060
1060
|
}
|
|
1061
|
-
function
|
|
1061
|
+
function b(p) {
|
|
1062
1062
|
!s.value || p.pointerType === "mouse" && p.button !== 0 || (o.value.setPointerCapture(p.pointerId), e.playback.beginScrub(), m(p));
|
|
1063
1063
|
}
|
|
1064
1064
|
function B(p) {
|
|
@@ -1067,10 +1067,10 @@ const ha = {
|
|
|
1067
1067
|
function L(p) {
|
|
1068
1068
|
i.scrubbing && (m(p), e.playback.endScrub());
|
|
1069
1069
|
}
|
|
1070
|
-
function
|
|
1070
|
+
function P(p) {
|
|
1071
1071
|
e.playback.beginScrub(), e.playback.scrub(r.value + p), e.playback.endScrub();
|
|
1072
1072
|
}
|
|
1073
|
-
return (p, v) => (
|
|
1073
|
+
return (p, v) => (z(), H("div", {
|
|
1074
1074
|
class: "mp-video-controls",
|
|
1075
1075
|
"data-preview-control": "",
|
|
1076
1076
|
onPointerdown: v[9] || (v[9] = J(() => {
|
|
@@ -1088,10 +1088,10 @@ const ha = {
|
|
|
1088
1088
|
onKeydown: v[15] || (v[15] = J(() => {
|
|
1089
1089
|
}, ["stop"]))
|
|
1090
1090
|
}, [
|
|
1091
|
-
g(i).scrubbing ? (
|
|
1092
|
-
It(
|
|
1093
|
-
$("span", null, " / " +
|
|
1094
|
-
])) :
|
|
1091
|
+
g(i).scrubbing ? (z(), H("div", ka, [
|
|
1092
|
+
It(le(g(Ie)(g(r))), 1),
|
|
1093
|
+
$("span", null, " / " + le(g(Ie)(g(i).duration)), 1)
|
|
1094
|
+
])) : ie("", !0),
|
|
1095
1095
|
$("button", {
|
|
1096
1096
|
type: "button",
|
|
1097
1097
|
"aria-label": g(i).ended ? "重新播放视频" : g(i).playing ? "暂停视频" : "播放视频",
|
|
@@ -1103,7 +1103,7 @@ const ha = {
|
|
|
1103
1103
|
name: g(i).ended ? "replay" : g(i).playing ? "pause" : "play"
|
|
1104
1104
|
}, null, 8, ["name"])
|
|
1105
1105
|
], 8, xa),
|
|
1106
|
-
$("time", Ma,
|
|
1106
|
+
$("time", Ma, le(g(Ie)(g(r))), 1),
|
|
1107
1107
|
$("div", {
|
|
1108
1108
|
ref_key: "track",
|
|
1109
1109
|
ref: o,
|
|
@@ -1116,33 +1116,33 @@ const ha = {
|
|
|
1116
1116
|
"aria-valuemax": g(i).duration,
|
|
1117
1117
|
"aria-valuenow": g(r),
|
|
1118
1118
|
"aria-valuetext": `${g(Ie)(g(r))} / ${g(Ie)(g(i).duration)}`,
|
|
1119
|
-
onPointerdown: J(
|
|
1119
|
+
onPointerdown: J(b, ["prevent"]),
|
|
1120
1120
|
onPointermove: J(B, ["prevent"]),
|
|
1121
1121
|
onPointerup: J(L, ["prevent"]),
|
|
1122
1122
|
onPointercancel: v[1] || (v[1] = (T) => p.playback.endScrub(!1)),
|
|
1123
1123
|
onLostpointercapture: v[2] || (v[2] = (T) => p.playback.endScrub(!1)),
|
|
1124
1124
|
onKeydown: [
|
|
1125
|
-
v[3] || (v[3] = at(J((T) =>
|
|
1126
|
-
v[4] || (v[4] = at(J((T) =>
|
|
1127
|
-
v[5] || (v[5] = at(J((T) =>
|
|
1128
|
-
v[6] || (v[6] = at(J((T) =>
|
|
1125
|
+
v[3] || (v[3] = at(J((T) => P(-5), ["prevent"]), ["left"])),
|
|
1126
|
+
v[4] || (v[4] = at(J((T) => P(5), ["prevent"]), ["right"])),
|
|
1127
|
+
v[5] || (v[5] = at(J((T) => P(-g(i).duration), ["prevent"]), ["home"])),
|
|
1128
|
+
v[6] || (v[6] = at(J((T) => P(g(i).duration), ["prevent"]), ["end"]))
|
|
1129
1129
|
]
|
|
1130
1130
|
}, [
|
|
1131
|
-
|
|
1131
|
+
Pa,
|
|
1132
1132
|
$("span", {
|
|
1133
1133
|
class: "mp-video-progress__buffered",
|
|
1134
1134
|
style: Se({ width: `${g(y)}%` })
|
|
1135
1135
|
}, null, 4),
|
|
1136
1136
|
$("span", {
|
|
1137
1137
|
class: "mp-video-progress__played",
|
|
1138
|
-
style: Se({ width: `${g(
|
|
1138
|
+
style: Se({ width: `${g(f)}%` })
|
|
1139
1139
|
}, null, 4),
|
|
1140
1140
|
$("span", {
|
|
1141
1141
|
class: "mp-video-progress__thumb",
|
|
1142
|
-
style: Se({ left: `${g(
|
|
1142
|
+
style: Se({ left: `${g(f)}%` })
|
|
1143
1143
|
}, null, 4)
|
|
1144
1144
|
], 42, Sa),
|
|
1145
|
-
$("time",
|
|
1145
|
+
$("time", Ca, le(g(Ie)(g(i).duration)), 1),
|
|
1146
1146
|
$("button", {
|
|
1147
1147
|
type: "button",
|
|
1148
1148
|
class: "mp-video-volume",
|
|
@@ -1209,7 +1209,7 @@ const ha = {
|
|
|
1209
1209
|
...n.media,
|
|
1210
1210
|
type: "image",
|
|
1211
1211
|
src: n.media.poster || n.media.previewSrc || n.media.thumbnail
|
|
1212
|
-
})), r = R(),
|
|
1212
|
+
})), r = R(), f = R(), y = R(!1), m = R(!1), b = Lt(
|
|
1213
1213
|
() => r.value,
|
|
1214
1214
|
(E) => o("error", E)
|
|
1215
1215
|
), B = Et(
|
|
@@ -1218,21 +1218,21 @@ const ha = {
|
|
|
1218
1218
|
() => n.active && n.loadEnabled,
|
|
1219
1219
|
() => n.videoLoader,
|
|
1220
1220
|
(E) => {
|
|
1221
|
-
|
|
1221
|
+
b.state.status = "error", b.state.buffering = !1, o("error", E);
|
|
1222
1222
|
}
|
|
1223
1223
|
);
|
|
1224
1224
|
function L() {
|
|
1225
|
-
|
|
1225
|
+
b.state.status = "loading", b.state.buffering = !0, B();
|
|
1226
1226
|
}
|
|
1227
|
-
let
|
|
1227
|
+
let P = () => {
|
|
1228
1228
|
};
|
|
1229
|
-
const { state: p } =
|
|
1229
|
+
const { state: p } = b, v = U(
|
|
1230
1230
|
() => n.controls && n.active && n.enabled && n.controlsVisible
|
|
1231
1231
|
);
|
|
1232
1232
|
function T() {
|
|
1233
|
-
return n.teleportControls ?
|
|
1233
|
+
return n.teleportControls ? f.value.closest(".mp-viewer") : n.core.containerRef.value;
|
|
1234
1234
|
}
|
|
1235
|
-
async function
|
|
1235
|
+
async function I() {
|
|
1236
1236
|
if (m.value)
|
|
1237
1237
|
try {
|
|
1238
1238
|
document.fullscreenElement === T() ? await document.exitFullscreen() : document.fullscreenEnabled ? await T().requestFullscreen() : r.value.webkitEnterFullscreen();
|
|
@@ -1240,43 +1240,43 @@ const ha = {
|
|
|
1240
1240
|
o("error", Ae(E));
|
|
1241
1241
|
}
|
|
1242
1242
|
}
|
|
1243
|
-
function
|
|
1243
|
+
function w() {
|
|
1244
1244
|
y.value = document.fullscreenElement === T();
|
|
1245
1245
|
}
|
|
1246
1246
|
function u() {
|
|
1247
|
-
!n.active || !n.enabled ?
|
|
1247
|
+
!n.active || !n.enabled ? b.pause() : n.autoplay && b.play();
|
|
1248
1248
|
}
|
|
1249
|
-
function
|
|
1250
|
-
document.hidden &&
|
|
1249
|
+
function k() {
|
|
1250
|
+
document.hidden && b.pause();
|
|
1251
1251
|
}
|
|
1252
1252
|
ze(() => {
|
|
1253
|
-
p.muted = r.value.muted, m.value = document.fullscreenEnabled || "webkitEnterFullscreen" in r.value, document.addEventListener("fullscreenchange",
|
|
1253
|
+
p.muted = r.value.muted, m.value = document.fullscreenEnabled || "webkitEnterFullscreen" in r.value, document.addEventListener("fullscreenchange", w), document.addEventListener("visibilitychange", k), P = ee(() => [n.active, n.enabled, n.autoplay], u, {
|
|
1254
1254
|
flush: "post"
|
|
1255
1255
|
}), u();
|
|
1256
1256
|
}), Re(() => {
|
|
1257
|
-
|
|
1257
|
+
P(), b.dispose(), document.removeEventListener("fullscreenchange", w), document.removeEventListener("visibilitychange", k), document.fullscreenElement === T() && document.exitFullscreen().catch(() => {
|
|
1258
1258
|
});
|
|
1259
1259
|
});
|
|
1260
1260
|
const h = U(() => ({
|
|
1261
1261
|
transform: `translate(-50%, -50%) translate3d(${n.core.state.offsetX}px, ${n.core.state.offsetY}px, 0)`
|
|
1262
|
-
})),
|
|
1262
|
+
})), d = U(() => ({
|
|
1263
1263
|
width: `${n.core.mediaSize.value.width * n.core.displayScale.value}px`,
|
|
1264
1264
|
height: `${n.core.mediaSize.value.height * n.core.displayScale.value}px`,
|
|
1265
1265
|
transform: `rotate(${n.core.state.rotation}deg)`
|
|
1266
1266
|
}));
|
|
1267
|
-
function
|
|
1267
|
+
function M() {
|
|
1268
1268
|
i.value = !0, n.core.setMediaElement(r.value), o("ready", "screen");
|
|
1269
1269
|
}
|
|
1270
|
-
function
|
|
1270
|
+
function C() {
|
|
1271
1271
|
return { image: i.value ? va(r.value, n.core.mediaSize.value) : n.core.mediaRef.value, scale: 1 };
|
|
1272
1272
|
}
|
|
1273
|
-
return t({ togglePlayback:
|
|
1273
|
+
return t({ togglePlayback: b.toggle, toggleFullscreen: I, playback: b, captureFrame: C }), (E, A) => (z(), H("div", {
|
|
1274
1274
|
ref_key: "host",
|
|
1275
|
-
ref:
|
|
1275
|
+
ref: f,
|
|
1276
1276
|
class: "mp-dom-renderer mp-video-player",
|
|
1277
1277
|
"data-playback": g(p).ended ? "ended" : g(p).playing ? "playing" : "paused"
|
|
1278
1278
|
}, [
|
|
1279
|
-
i.value ?
|
|
1279
|
+
i.value ? ie("", !0) : (z(), rt(vt, {
|
|
1280
1280
|
key: 0,
|
|
1281
1281
|
media: s.value,
|
|
1282
1282
|
core: E.core,
|
|
@@ -1288,9 +1288,9 @@ const ha = {
|
|
|
1288
1288
|
priority: E.priority,
|
|
1289
1289
|
"resource-policy": E.resourcePolicy,
|
|
1290
1290
|
"resolve-source": E.resolveSource,
|
|
1291
|
-
onReady:
|
|
1292
|
-
onError:
|
|
1293
|
-
onOriginalState:
|
|
1291
|
+
onReady: A[0] || (A[0] = (V) => o("ready", V)),
|
|
1292
|
+
onError: A[1] || (A[1] = (V) => o("error", V)),
|
|
1293
|
+
onOriginalState: A[2] || (A[2] = (V, _) => o("originalState", V, _))
|
|
1294
1294
|
}, null, 8, ["media", "core", "initial-image", "rendering", "quality", "request-version", "load-enabled", "priority", "resource-policy", "resolve-source"])),
|
|
1295
1295
|
$("div", {
|
|
1296
1296
|
class: "mp-dom-renderer__frame",
|
|
@@ -1306,38 +1306,38 @@ const ha = {
|
|
|
1306
1306
|
"webkit-playsinline": "true",
|
|
1307
1307
|
crossorigin: "anonymous",
|
|
1308
1308
|
preload: E.active && E.loadEnabled ? "auto" : "none",
|
|
1309
|
-
style:
|
|
1310
|
-
}, pt(g(
|
|
1309
|
+
style: d.value
|
|
1310
|
+
}, pt(g(b).events, !0), { onPlaying: M }), null, 16, Fa)
|
|
1311
1311
|
], 4),
|
|
1312
|
-
E.active && E.enabled && g(p).buffering && g(p).status !== "error" ? (
|
|
1313
|
-
v.value && !g(p).playing && !g(p).buffering && g(p).status !== "error" ? (
|
|
1312
|
+
E.active && E.enabled && g(p).buffering && g(p).status !== "error" ? (z(), H("div", Ta, Da)) : ie("", !0),
|
|
1313
|
+
v.value && !g(p).playing && !g(p).buffering && g(p).status !== "error" ? (z(), H("button", {
|
|
1314
1314
|
key: 2,
|
|
1315
1315
|
type: "button",
|
|
1316
1316
|
class: "mp-video-center-play",
|
|
1317
1317
|
"data-preview-control": "",
|
|
1318
1318
|
"aria-label": g(p).ended ? "重新播放" : "开始播放视频",
|
|
1319
|
-
onPointerdown:
|
|
1319
|
+
onPointerdown: A[3] || (A[3] = J(() => {
|
|
1320
1320
|
}, ["stop"])),
|
|
1321
|
-
onPointerup:
|
|
1321
|
+
onPointerup: A[4] || (A[4] = J(() => {
|
|
1322
1322
|
}, ["stop"])),
|
|
1323
|
-
onClick:
|
|
1323
|
+
onClick: A[5] || (A[5] = J(
|
|
1324
1324
|
//@ts-ignore
|
|
1325
|
-
(...V) => g(
|
|
1325
|
+
(...V) => g(b).toggle && g(b).toggle(...V),
|
|
1326
1326
|
["stop"]
|
|
1327
1327
|
))
|
|
1328
1328
|
}, [
|
|
1329
1329
|
Be(it, {
|
|
1330
1330
|
name: g(p).ended ? "replay" : "play"
|
|
1331
1331
|
}, null, 8, ["name"])
|
|
1332
|
-
], 40, qa)) :
|
|
1333
|
-
g(p).status === "error" ? (
|
|
1332
|
+
], 40, qa)) : ie("", !0),
|
|
1333
|
+
g(p).status === "error" ? (z(), H("div", za, [
|
|
1334
1334
|
Ia,
|
|
1335
1335
|
$("button", {
|
|
1336
1336
|
type: "button",
|
|
1337
1337
|
onClick: J(L, ["stop"])
|
|
1338
1338
|
}, "重新加载视频")
|
|
1339
|
-
])) :
|
|
1340
|
-
E.controls && E.active && E.enabled ? (
|
|
1339
|
+
])) : ie("", !0),
|
|
1340
|
+
E.controls && E.active && E.enabled ? (z(), rt(Ct, {
|
|
1341
1341
|
key: 4,
|
|
1342
1342
|
to: E.controlsTarget,
|
|
1343
1343
|
disabled: !E.teleportControls
|
|
@@ -1347,13 +1347,13 @@ const ha = {
|
|
|
1347
1347
|
inert: !v.value
|
|
1348
1348
|
}, [
|
|
1349
1349
|
Be(La, {
|
|
1350
|
-
playback: g(
|
|
1350
|
+
playback: g(b),
|
|
1351
1351
|
fullscreen: y.value,
|
|
1352
1352
|
"can-fullscreen": m.value,
|
|
1353
|
-
onFullscreen:
|
|
1353
|
+
onFullscreen: I
|
|
1354
1354
|
}, null, 8, ["playback", "fullscreen", "can-fullscreen"])
|
|
1355
1355
|
], 10, Aa)
|
|
1356
|
-
], 8, ["to", "disabled"])) :
|
|
1356
|
+
], 8, ["to", "disabled"])) : ie("", !0)
|
|
1357
1357
|
], 8, $a));
|
|
1358
1358
|
}
|
|
1359
1359
|
}), _a = ["data-scale", "data-rotation", "data-live-holding"], Va = /* @__PURE__ */ Le({
|
|
@@ -1386,7 +1386,7 @@ const ha = {
|
|
|
1386
1386
|
zoomable: () => !0,
|
|
1387
1387
|
doubleTapZoom: () => xt(n.media, r.core.viewportSize.value),
|
|
1388
1388
|
zoomLimit: () => Math.max(8, xt(n.media, r.core.viewportSize.value) * 2),
|
|
1389
|
-
holdable: () => n.media.type === "live-photo" &&
|
|
1389
|
+
holdable: () => n.media.type === "live-photo" && b.value === "ready" && s.value === "idle",
|
|
1390
1390
|
onHoldStart: () => {
|
|
1391
1391
|
i.value = !0;
|
|
1392
1392
|
},
|
|
@@ -1395,20 +1395,20 @@ const ha = {
|
|
|
1395
1395
|
},
|
|
1396
1396
|
onTap: () => o("tap"),
|
|
1397
1397
|
onDoubleTap: () => o("doubleTap"),
|
|
1398
|
-
onScale: (
|
|
1399
|
-
n.active && o("scale",
|
|
1398
|
+
onScale: (w) => {
|
|
1399
|
+
n.active && o("scale", w);
|
|
1400
1400
|
},
|
|
1401
|
-
onSwipeDownProgress: (
|
|
1402
|
-
n.active && o("swipeDownProgress",
|
|
1401
|
+
onSwipeDownProgress: (w) => {
|
|
1402
|
+
n.active && o("swipeDownProgress", w);
|
|
1403
1403
|
},
|
|
1404
1404
|
onSwipeDownClose: () => o("close"),
|
|
1405
1405
|
onSwipeLeft: () => o("next"),
|
|
1406
1406
|
onSwipeRight: () => o("previous"),
|
|
1407
|
-
onPageDrag: (
|
|
1408
|
-
n.active && o("pageDrag",
|
|
1407
|
+
onPageDrag: (w) => {
|
|
1408
|
+
n.active && o("pageDrag", w);
|
|
1409
1409
|
},
|
|
1410
|
-
onPageRelease: (
|
|
1411
|
-
}),
|
|
1410
|
+
onPageRelease: (w, u) => o("pageRelease", w, u)
|
|
1411
|
+
}), f = r.core.containerRef, y = r.core.downDragStyle, m = r.core.state, b = R("loading"), B = R("thumbnail"), L = R(), P = U(
|
|
1412
1412
|
() => n.media.type === "video" ? Oa : n.media.type === "live-photo" ? pa : vt
|
|
1413
1413
|
), p = U(
|
|
1414
1414
|
() => B.value === "full" || n.quality === "full" ? "full" : n.quality
|
|
@@ -1426,32 +1426,32 @@ const ha = {
|
|
|
1426
1426
|
), ee(
|
|
1427
1427
|
() => n.media.id,
|
|
1428
1428
|
() => {
|
|
1429
|
-
|
|
1429
|
+
b.value = "loading", r.core.setRotation(0);
|
|
1430
1430
|
}
|
|
1431
1431
|
), ee(
|
|
1432
1432
|
[() => n.media.width, () => n.media.height],
|
|
1433
|
-
([
|
|
1434
|
-
r.core.setMediaSize({ width:
|
|
1433
|
+
([w, u]) => {
|
|
1434
|
+
r.core.setMediaSize({ width: w, height: u });
|
|
1435
1435
|
},
|
|
1436
1436
|
{ immediate: !0 }
|
|
1437
1437
|
), ee(
|
|
1438
1438
|
() => n.active,
|
|
1439
|
-
(
|
|
1440
|
-
|
|
1439
|
+
(w) => {
|
|
1440
|
+
w || r.core.resetTransform(n.inactiveResetDuration);
|
|
1441
1441
|
}
|
|
1442
1442
|
), ee(
|
|
1443
1443
|
() => n.disabled,
|
|
1444
|
-
(
|
|
1445
|
-
|
|
1444
|
+
(w) => {
|
|
1445
|
+
w && r.core.cancelGesture(!0);
|
|
1446
1446
|
}
|
|
1447
1447
|
);
|
|
1448
|
-
function v(
|
|
1449
|
-
|
|
1448
|
+
function v(w) {
|
|
1449
|
+
w === "full" && (B.value = w), b.value = "ready", o("ready", w);
|
|
1450
1450
|
}
|
|
1451
|
-
function T(
|
|
1452
|
-
s.value =
|
|
1451
|
+
function T(w) {
|
|
1452
|
+
s.value = w, o("liveState", w);
|
|
1453
1453
|
}
|
|
1454
|
-
const
|
|
1454
|
+
const I = U(
|
|
1455
1455
|
() => n.externalGestures ? {} : {
|
|
1456
1456
|
wheel: r.onWheel,
|
|
1457
1457
|
pointerdown: r.onPointerDown,
|
|
@@ -1467,7 +1467,7 @@ const ha = {
|
|
|
1467
1467
|
onPointerUp: r.onPointerUp,
|
|
1468
1468
|
onPointerCancel: r.onPointerCancel,
|
|
1469
1469
|
onWheel: r.onWheel,
|
|
1470
|
-
readiness:
|
|
1470
|
+
readiness: b,
|
|
1471
1471
|
core: r.core,
|
|
1472
1472
|
rotateBy: r.core.rotateBy,
|
|
1473
1473
|
resetTransform: r.core.resetTransform,
|
|
@@ -1476,43 +1476,43 @@ const ha = {
|
|
|
1476
1476
|
togglePlayback: () => L.value.togglePlayback(),
|
|
1477
1477
|
toggleFullscreen: () => L.value.toggleFullscreen(),
|
|
1478
1478
|
captureFrame: () => n.media.type === "live-photo" || n.media.type === "video" ? L.value.captureFrame() : { image: r.core.mediaRef.value, scale: 1 }
|
|
1479
|
-
}), (
|
|
1479
|
+
}), (w, u) => (z(), H("div", Ue({
|
|
1480
1480
|
ref_key: "containerRef",
|
|
1481
|
-
ref:
|
|
1481
|
+
ref: f,
|
|
1482
1482
|
class: ["mp-stage", { "is-zoomed": g(m).level > 1, "is-dismissing": g(m).draggingDown }],
|
|
1483
1483
|
style: g(y),
|
|
1484
1484
|
"data-scale": g(m).level.toFixed(3),
|
|
1485
1485
|
"data-rotation": g(m).rotation,
|
|
1486
1486
|
"data-live-holding": i.value,
|
|
1487
|
-
onContextmenu: u[3] || (u[3] = (
|
|
1488
|
-
|
|
1487
|
+
onContextmenu: u[3] || (u[3] = (k) => {
|
|
1488
|
+
w.media.type === "live-photo" && k.preventDefault();
|
|
1489
1489
|
})
|
|
1490
|
-
}, pt(
|
|
1491
|
-
(
|
|
1490
|
+
}, pt(I.value, !0)), [
|
|
1491
|
+
(z(), rt(At(P.value), Ue({
|
|
1492
1492
|
ref_key: "rendererRef",
|
|
1493
1493
|
ref: L,
|
|
1494
|
-
media:
|
|
1495
|
-
},
|
|
1496
|
-
"initial-image":
|
|
1497
|
-
rendering:
|
|
1494
|
+
media: w.media
|
|
1495
|
+
}, w.media.type === "video" ? { videoLoader: w.videoLoader } : {}, {
|
|
1496
|
+
"initial-image": w.initialImage,
|
|
1497
|
+
rendering: w.rendering,
|
|
1498
1498
|
core: g(r).core,
|
|
1499
1499
|
quality: p.value,
|
|
1500
|
-
"request-version":
|
|
1501
|
-
"load-enabled":
|
|
1502
|
-
priority:
|
|
1503
|
-
"resource-policy":
|
|
1504
|
-
"resolve-source":
|
|
1505
|
-
playing: (
|
|
1506
|
-
enabled: !
|
|
1507
|
-
"controls-visible":
|
|
1508
|
-
"teleport-controls":
|
|
1509
|
-
"controls-target":
|
|
1510
|
-
active:
|
|
1500
|
+
"request-version": w.requestVersion,
|
|
1501
|
+
"load-enabled": w.loadEnabled,
|
|
1502
|
+
priority: w.active ? 0 : 2,
|
|
1503
|
+
"resource-policy": w.resourcePolicy,
|
|
1504
|
+
"resolve-source": w.resolveSource,
|
|
1505
|
+
playing: (w.livePlaying || i.value) && w.active,
|
|
1506
|
+
enabled: !w.disabled,
|
|
1507
|
+
"controls-visible": w.controlsVisible,
|
|
1508
|
+
"teleport-controls": w.teleportControls,
|
|
1509
|
+
"controls-target": w.controlsTarget,
|
|
1510
|
+
active: w.active,
|
|
1511
1511
|
onReady: v,
|
|
1512
|
-
onError: u[0] || (u[0] = (
|
|
1513
|
-
onOriginalState: u[1] || (u[1] = (
|
|
1512
|
+
onError: u[0] || (u[0] = (k) => o("error", k)),
|
|
1513
|
+
onOriginalState: u[1] || (u[1] = (k, h) => o("originalState", k, h)),
|
|
1514
1514
|
onLiveState: T,
|
|
1515
|
-
onLiveEnded: u[2] || (u[2] = (
|
|
1515
|
+
onLiveEnded: u[2] || (u[2] = (k) => o("liveEnded"))
|
|
1516
1516
|
}), 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"]))
|
|
1517
1517
|
], 16, _a));
|
|
1518
1518
|
}
|
|
@@ -1522,11 +1522,11 @@ function Ya(a, t) {
|
|
|
1522
1522
|
function r() {
|
|
1523
1523
|
s.value = "", n.value = "idle", o.value = "", i.value = 0;
|
|
1524
1524
|
}
|
|
1525
|
-
function
|
|
1525
|
+
function f() {
|
|
1526
1526
|
n.value !== "ready" && (n.value = "loading", o.value = "", i.value++, e.value = /* @__PURE__ */ new Set([...e.value, a().id]));
|
|
1527
1527
|
}
|
|
1528
|
-
function y(m,
|
|
1529
|
-
n.value = m, o.value =
|
|
1528
|
+
function y(m, b) {
|
|
1529
|
+
n.value = m, o.value = b, t(a(), m, b);
|
|
1530
1530
|
}
|
|
1531
1531
|
return {
|
|
1532
1532
|
originalIds: e,
|
|
@@ -1535,7 +1535,7 @@ function Ya(a, t) {
|
|
|
1535
1535
|
originalRequest: i,
|
|
1536
1536
|
readyId: s,
|
|
1537
1537
|
reset: r,
|
|
1538
|
-
requestOriginal:
|
|
1538
|
+
requestOriginal: f,
|
|
1539
1539
|
updateOriginal: y
|
|
1540
1540
|
};
|
|
1541
1541
|
}
|
|
@@ -1548,60 +1548,60 @@ function Ha(a, t, e, n = {}) {
|
|
|
1548
1548
|
grabbed: !1,
|
|
1549
1549
|
duration: 360
|
|
1550
1550
|
}), s = { readOffset: () => i.offset, flushLayout: () => {
|
|
1551
|
-
}, ...n }, r = 16,
|
|
1552
|
-
() => [o.value - 1, o.value, o.value + 1].filter((
|
|
1551
|
+
}, ...n }, r = 16, f = () => t() + r, y = U(
|
|
1552
|
+
() => [o.value - 1, o.value, o.value + 1].filter((d) => d >= 0 && d < a())
|
|
1553
1553
|
);
|
|
1554
1554
|
let m = setTimeout(() => {
|
|
1555
|
-
}, 0),
|
|
1555
|
+
}, 0), b = () => {
|
|
1556
1556
|
}, B = 0, L = 0;
|
|
1557
|
-
function
|
|
1558
|
-
B += 1, clearTimeout(m),
|
|
1557
|
+
function P() {
|
|
1558
|
+
B += 1, clearTimeout(m), b(), i.settling = !1, i.preparing = !1;
|
|
1559
1559
|
}
|
|
1560
|
-
Re(
|
|
1560
|
+
Re(P);
|
|
1561
1561
|
function p() {
|
|
1562
1562
|
if (!i.settling && !i.preparing) return;
|
|
1563
|
-
const
|
|
1564
|
-
|
|
1563
|
+
const d = i.preparing ? i.offset : s.readOffset();
|
|
1564
|
+
P(), i.offset = d, i.grabbed = !0;
|
|
1565
1565
|
}
|
|
1566
|
-
function v(
|
|
1567
|
-
if (
|
|
1568
|
-
|
|
1566
|
+
function v(d) {
|
|
1567
|
+
if (d === 0) {
|
|
1568
|
+
P(), i.dragging = !1, i.grabbed = !1, i.offset = 0, L = 0;
|
|
1569
1569
|
return;
|
|
1570
1570
|
}
|
|
1571
|
-
i.dragging || (p(), L = i.offset,
|
|
1572
|
-
const
|
|
1573
|
-
i.offset =
|
|
1574
|
-
}
|
|
1575
|
-
async function T(
|
|
1576
|
-
|
|
1577
|
-
const
|
|
1578
|
-
i.offset += (
|
|
1579
|
-
const
|
|
1580
|
-
i.duration = matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : _, o.value =
|
|
1581
|
-
|
|
1582
|
-
}),
|
|
1571
|
+
i.dragging || (p(), L = i.offset, P(), i.dragging = !0, i.grabbed = !0);
|
|
1572
|
+
const M = L + d, C = o.value === 0 && M > 0 || o.value === a() - 1 && M < 0;
|
|
1573
|
+
i.offset = C ? Math.sign(M) * Math.sqrt(Math.abs(M)) * 6 : M;
|
|
1574
|
+
}
|
|
1575
|
+
async function T(d, M = 0) {
|
|
1576
|
+
P();
|
|
1577
|
+
const C = B, E = o.value;
|
|
1578
|
+
i.offset += (d - E) * f();
|
|
1579
|
+
const A = Math.abs(i.offset), V = de(A / f(), 0, 1), _ = de(220 + V * 140 - Math.min(Math.abs(M), 2) * 35, 240, 360);
|
|
1580
|
+
i.duration = matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : _, o.value = d, i.dragging = !1, i.grabbed = !1, i.preparing = !0, d !== E && e(d), await ye(), C === B && (s.flushLayout(), i.preparing = !1, i.settling = !0, i.offset = 0, await new Promise((N) => {
|
|
1581
|
+
b = N, m = setTimeout(N, i.duration);
|
|
1582
|
+
}), C === B && (i.settling = !1, b = () => {
|
|
1583
1583
|
}));
|
|
1584
1584
|
}
|
|
1585
|
-
function
|
|
1586
|
-
const
|
|
1587
|
-
T(de(o.value - (V ?
|
|
1585
|
+
function I(d, M) {
|
|
1586
|
+
const C = i.offset, E = Math.abs(M) > 0.35 && Math.abs(d) > 16, A = Math.sign(E ? M : C), V = E || Math.abs(C) > t() * 0.14;
|
|
1587
|
+
T(de(o.value - (V ? A : 0), 0, a() - 1), M);
|
|
1588
1588
|
}
|
|
1589
|
-
function
|
|
1589
|
+
function w() {
|
|
1590
1590
|
i.grabbed && !i.dragging && T(o.value);
|
|
1591
1591
|
}
|
|
1592
|
-
function u(
|
|
1592
|
+
function u(d) {
|
|
1593
1593
|
if (i.dragging) return;
|
|
1594
1594
|
p();
|
|
1595
|
-
const
|
|
1596
|
-
|
|
1595
|
+
const M = de(o.value + d, 0, a() - 1);
|
|
1596
|
+
M !== o.value ? T(M) : w();
|
|
1597
1597
|
}
|
|
1598
|
-
function
|
|
1599
|
-
|
|
1598
|
+
function k(d) {
|
|
1599
|
+
P(), o.value = d, i.offset = 0, i.dragging = !1, i.grabbed = !1;
|
|
1600
1600
|
}
|
|
1601
|
-
function h(
|
|
1602
|
-
o.value =
|
|
1601
|
+
function h(d) {
|
|
1602
|
+
o.value = d;
|
|
1603
1603
|
}
|
|
1604
|
-
return { index: o, state: i, slots: y, stride:
|
|
1604
|
+
return { index: o, state: i, slots: y, stride: f, drag: v, release: I, go: u, grab: p, resume: w, reset: k, rebase: h, cancel: P };
|
|
1605
1605
|
}
|
|
1606
1606
|
function $t(a, t, e) {
|
|
1607
1607
|
const n = Math[e === "cover" ? "max" : "min"](
|
|
@@ -1645,12 +1645,12 @@ function Mt(a) {
|
|
|
1645
1645
|
};
|
|
1646
1646
|
}
|
|
1647
1647
|
function Ua(a, t, e, n, o) {
|
|
1648
|
-
const i = Mt(a), s = Mt(t), r = Math.min(i.width / s.width, i.height / s.height),
|
|
1648
|
+
const i = Mt(a), s = Mt(t), r = Math.min(i.width / s.width, i.height / s.height), f = {
|
|
1649
1649
|
width: Math.max(i.width, s.width, 1),
|
|
1650
1650
|
height: Math.max(i.height, s.height, 1)
|
|
1651
|
-
}, y = 128, m = [],
|
|
1651
|
+
}, y = 128, m = [], b = [];
|
|
1652
1652
|
for (let B = 0; B <= y; B += 1) {
|
|
1653
|
-
const L = B / y,
|
|
1653
|
+
const L = B / y, P = Xa(a, t, L);
|
|
1654
1654
|
let p;
|
|
1655
1655
|
if (o)
|
|
1656
1656
|
p = {
|
|
@@ -1660,25 +1660,25 @@ function Ua(a, t, e, n, o) {
|
|
|
1660
1660
|
height: i.height + (s.height - i.height) * L
|
|
1661
1661
|
};
|
|
1662
1662
|
else {
|
|
1663
|
-
const
|
|
1663
|
+
const I = Math.min(L / 0.78, 1), w = 1 - I * I * I * (I * (I * 6 - 15) + 10), u = r + (1 - r) * L, k = s.width * u + (i.width - s.width * r) * w, h = s.height * u + (i.height - s.height * r) * w;
|
|
1664
1664
|
p = {
|
|
1665
|
-
left: i.left + i.width / 2 + (s.left + s.width / 2 - i.left - i.width / 2) * L -
|
|
1665
|
+
left: i.left + i.width / 2 + (s.left + s.width / 2 - i.left - i.width / 2) * L - k / 2,
|
|
1666
1666
|
top: i.top + i.height / 2 + (s.top + s.height / 2 - i.top - i.height / 2) * L - h / 2,
|
|
1667
|
-
width:
|
|
1667
|
+
width: k,
|
|
1668
1668
|
height: h
|
|
1669
1669
|
};
|
|
1670
1670
|
}
|
|
1671
|
-
const v = Math.max(p.width, 1e-3) /
|
|
1671
|
+
const v = Math.max(p.width, 1e-3) / f.width, T = Math.max(p.height, 1e-3) / f.height;
|
|
1672
1672
|
m.push({
|
|
1673
|
-
transform: `scale(${1 / v},${1 / T}) translate3d(${
|
|
1673
|
+
transform: `scale(${1 / v},${1 / T}) translate3d(${P.x - p.left}px,${P.y - p.top}px,0) rotate(${P.rotation}deg) scale(${P.width / n.width}) translate3d(${-n.width / 2}px,${-n.height / 2}px,0)`,
|
|
1674
1674
|
offset: L
|
|
1675
|
-
}),
|
|
1675
|
+
}), b.push({
|
|
1676
1676
|
transform: `translate3d(${p.left - e.left}px,${p.top - e.top}px,0) scale(${v},${T})`,
|
|
1677
|
-
...a.radius === 0 && t.radius === 0 ? {} : { borderRadius: `${
|
|
1677
|
+
...a.radius === 0 && t.radius === 0 ? {} : { borderRadius: `${P.radius / v}px / ${P.radius / T}px` },
|
|
1678
1678
|
offset: L
|
|
1679
1679
|
});
|
|
1680
1680
|
}
|
|
1681
|
-
return { pictures: m, masks:
|
|
1681
|
+
return { pictures: m, masks: b, maskSize: f };
|
|
1682
1682
|
}
|
|
1683
1683
|
function Wa() {
|
|
1684
1684
|
let a = { kind: "idle" };
|
|
@@ -1690,32 +1690,32 @@ function Wa() {
|
|
|
1690
1690
|
}).catch(() => {
|
|
1691
1691
|
}), { kind: "reversing", finished: a.finished });
|
|
1692
1692
|
}
|
|
1693
|
-
async function n(o, i, s, r,
|
|
1693
|
+
async function n(o, i, s, r, f, y, m, b, B = b ? 0 : 1, L = 340) {
|
|
1694
1694
|
t();
|
|
1695
|
-
const
|
|
1695
|
+
const P = Math.max(r.width, f.width), p = P * f.height / f.width, v = Math.min(
|
|
1696
1696
|
devicePixelRatio,
|
|
1697
1697
|
2,
|
|
1698
|
-
Math.sqrt(
|
|
1698
|
+
Math.sqrt(ue.maxCanvasPixels / (P * p))
|
|
1699
1699
|
);
|
|
1700
|
-
o.width = Math.max(1, Math.round(
|
|
1700
|
+
o.width = Math.max(1, Math.round(P * v)), o.height = Math.max(1, Math.round(p * v)), o.style.width = `${P}px`, o.style.height = `${p}px`;
|
|
1701
1701
|
const T = o.getContext("2d");
|
|
1702
|
-
((
|
|
1703
|
-
T.clearRect(0, 0, o.width, o.height), T.imageSmoothingEnabled = !0, T.imageSmoothingQuality = "high", T.drawImage(
|
|
1702
|
+
((M) => {
|
|
1703
|
+
T.clearRect(0, 0, o.width, o.height), T.imageSmoothingEnabled = !0, T.imageSmoothingQuality = "high", T.drawImage(M, 0, 0, o.width, o.height);
|
|
1704
1704
|
})(s);
|
|
1705
|
-
const
|
|
1706
|
-
i.style.width = `${
|
|
1707
|
-
const
|
|
1705
|
+
const w = Ua(r, f, y, { width: P, height: p }, b);
|
|
1706
|
+
i.style.width = `${w.maskSize.width}px`, i.style.height = `${w.maskSize.height}px`, i.style.borderRadius = "0";
|
|
1707
|
+
const k = {
|
|
1708
1708
|
duration: matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : Math.max(0, L),
|
|
1709
1709
|
easing: "cubic-bezier(.2,.78,.2,1)",
|
|
1710
1710
|
fill: "both"
|
|
1711
1711
|
}, h = [
|
|
1712
|
-
o.animate(
|
|
1713
|
-
i.animate(
|
|
1714
|
-
m.animate([{ opacity: B }, { opacity:
|
|
1715
|
-
],
|
|
1712
|
+
o.animate(w.pictures, k),
|
|
1713
|
+
i.animate(w.masks, k),
|
|
1714
|
+
m.animate([{ opacity: B }, { opacity: b ? 1 : 0 }], k)
|
|
1715
|
+
], d = Promise.all(h.map((M) => M.finished)).then(() => {
|
|
1716
1716
|
}).catch(() => {
|
|
1717
1717
|
});
|
|
1718
|
-
a = { kind: "playing", entering:
|
|
1718
|
+
a = { kind: "playing", entering: b, animations: h, finished: d }, await d;
|
|
1719
1719
|
}
|
|
1720
1720
|
return { play: n, cancel: t, reverseOpening: e };
|
|
1721
1721
|
}
|
|
@@ -1734,12 +1734,12 @@ function Na(a, t) {
|
|
|
1734
1734
|
for (let o = a.parentElement; o !== document.documentElement; o = o.parentElement) {
|
|
1735
1735
|
const i = getComputedStyle(o), s = n.test(i.overflowX), r = n.test(i.overflowY);
|
|
1736
1736
|
if (!s && !r) continue;
|
|
1737
|
-
const
|
|
1737
|
+
const f = o.getBoundingClientRect(), y = Number(o.style.getPropertyValue("--mp-transition-inset-top"));
|
|
1738
1738
|
e = Ft(e, {
|
|
1739
|
-
left: s ?
|
|
1740
|
-
top: r ?
|
|
1741
|
-
width: s ?
|
|
1742
|
-
height: r ? Math.max(0,
|
|
1739
|
+
left: s ? f.left : e.left,
|
|
1740
|
+
top: r ? f.top + y : e.top,
|
|
1741
|
+
width: s ? f.width : e.width,
|
|
1742
|
+
height: r ? Math.max(0, f.height - y) : e.height
|
|
1743
1743
|
});
|
|
1744
1744
|
}
|
|
1745
1745
|
return e;
|
|
@@ -1788,31 +1788,31 @@ const Za = ["aria-label", "data-phase", "data-chrome", "inert"], ja = ["aria-hid
|
|
|
1788
1788
|
setup(a, { expose: t, emit: e }) {
|
|
1789
1789
|
const n = Ot(), o = a, i = e, s = R("closed");
|
|
1790
1790
|
ee(s, (l) => i("phaseChange", l), { flush: "sync" });
|
|
1791
|
-
const r = `mp-video-controls-${_t().uid}`,
|
|
1791
|
+
const r = `mp-video-controls-${_t().uid}`, f = R(), y = R(), m = Ya(
|
|
1792
1792
|
() => W.value,
|
|
1793
|
-
(l,
|
|
1794
|
-
), { originalIds:
|
|
1793
|
+
(l, x, S) => i("originalState", l, x, S)
|
|
1794
|
+
), { originalIds: b, originalStatus: B, originalReason: L, originalRequest: P, readyId: p } = m;
|
|
1795
1795
|
let v = "", T = -1;
|
|
1796
|
-
const
|
|
1797
|
-
ee(
|
|
1798
|
-
const
|
|
1799
|
-
let
|
|
1796
|
+
const I = R(), w = R(), u = R(), k = R(!1), h = R(0), d = R(!0);
|
|
1797
|
+
ee(d, (l) => i("chromeChange", l), { flush: "sync" });
|
|
1798
|
+
const M = R(!1), C = R("loading"), E = R(1), A = R(!1), V = R(1), _ = R(!1), N = R(!1), Y = gt(ke);
|
|
1799
|
+
let Pe = "", se = { kind: "unavailable" };
|
|
1800
1800
|
const fe = /* @__PURE__ */ new Map(), K = /* @__PURE__ */ new Map();
|
|
1801
1801
|
function Ze(l) {
|
|
1802
|
-
return (
|
|
1803
|
-
K.set(l,
|
|
1802
|
+
return (x) => {
|
|
1803
|
+
K.set(l, x);
|
|
1804
1804
|
};
|
|
1805
1805
|
}
|
|
1806
1806
|
function Oe(l) {
|
|
1807
|
-
return (
|
|
1808
|
-
fe.set(l,
|
|
1807
|
+
return (x) => {
|
|
1808
|
+
fe.set(l, x);
|
|
1809
1809
|
};
|
|
1810
1810
|
}
|
|
1811
1811
|
const D = Ha(
|
|
1812
1812
|
() => o.items.length,
|
|
1813
1813
|
() => V.value,
|
|
1814
1814
|
(l) => {
|
|
1815
|
-
v = o.items[l].id, m.reset(), E.value = 1,
|
|
1815
|
+
v = o.items[l].id, m.reset(), E.value = 1, M.value = !1, C.value = "loading", i("change", l), Fe(l);
|
|
1816
1816
|
},
|
|
1817
1817
|
{
|
|
1818
1818
|
readOffset: () => new DOMMatrixReadOnly(getComputedStyle(K.get(v)).transform).m41,
|
|
@@ -1820,20 +1820,20 @@ const Za = ["aria-label", "data-phase", "data-chrome", "inert"], ja = ["aria-hid
|
|
|
1820
1820
|
K.get(v).getBoundingClientRect();
|
|
1821
1821
|
}
|
|
1822
1822
|
}
|
|
1823
|
-
), q = D.index, W = U(() => o.items[q.value]),
|
|
1824
|
-
() => s.value === "opening" ||
|
|
1823
|
+
), q = D.index, W = U(() => o.items[q.value]), Ce = D.slots, je = U(
|
|
1824
|
+
() => s.value === "opening" || k.value ? [q.value] : Ce.value
|
|
1825
1825
|
);
|
|
1826
|
-
ee(
|
|
1826
|
+
ee(Ce, () => {
|
|
1827
1827
|
ye(() => {
|
|
1828
|
-
const l = new Set(
|
|
1829
|
-
for (const
|
|
1830
|
-
for (const
|
|
1828
|
+
const l = new Set(Ce.value.map((x) => o.items[x].id));
|
|
1829
|
+
for (const x of fe.keys()) l.has(x) || fe.delete(x);
|
|
1830
|
+
for (const x of K.keys()) l.has(x) || K.delete(x);
|
|
1831
1831
|
});
|
|
1832
1832
|
});
|
|
1833
1833
|
const te = {
|
|
1834
1834
|
close: F,
|
|
1835
1835
|
setChromeVisible: (l) => {
|
|
1836
|
-
|
|
1836
|
+
d.value = l;
|
|
1837
1837
|
},
|
|
1838
1838
|
goTo: ut,
|
|
1839
1839
|
previous: () => D.go(-1),
|
|
@@ -1846,26 +1846,26 @@ const Za = ["aria-label", "data-phase", "data-chrome", "inert"], ja = ["aria-hid
|
|
|
1846
1846
|
fullscreen: ae,
|
|
1847
1847
|
togglePlayback: () => j().togglePlayback(),
|
|
1848
1848
|
toggleLive: () => {
|
|
1849
|
-
s.value !== "open" ||
|
|
1849
|
+
s.value !== "open" || C.value === "loading" || C.value === "error" || (M.value = !M.value);
|
|
1850
1850
|
},
|
|
1851
1851
|
toggleDetail: () => {
|
|
1852
|
-
|
|
1852
|
+
A.value = !A.value;
|
|
1853
1853
|
}
|
|
1854
1854
|
}, ge = Wa();
|
|
1855
1855
|
let $e = Promise.resolve(), G = 0, pe = "", Q = !1, ve = "", me = "", xe = () => {
|
|
1856
1856
|
}, ne = { kind: "idle" }, he = 0;
|
|
1857
1857
|
const Ee = () => new Promise((l) => requestAnimationFrame(() => l())), Me = new ResizeObserver(() => {
|
|
1858
|
-
const l = `${y.value.clientWidth}:${y.value.clientHeight}`,
|
|
1859
|
-
ve = l, me =
|
|
1858
|
+
const l = `${y.value.clientWidth}:${y.value.clientHeight}`, x = `${f.value.clientWidth}:${f.value.clientHeight}`, S = ve !== "" && ve !== l, O = me !== "" && me !== x;
|
|
1859
|
+
ve = l, me = x, V.value = y.value.clientWidth, S && s.value === "open" && D.reset(q.value), O && ge.cancel();
|
|
1860
1860
|
});
|
|
1861
1861
|
function Fe(l) {
|
|
1862
1862
|
o.hasMore && l >= o.items.length - 3 && T !== o.items.length && (T = o.items.length, i("loadMore", l));
|
|
1863
1863
|
}
|
|
1864
|
-
function Te(l,
|
|
1865
|
-
l === q.value && (N.value && (p.value = W.value.id), i("ready", l,
|
|
1864
|
+
function Te(l, x) {
|
|
1865
|
+
l === q.value && (N.value && (p.value = W.value.id), i("ready", l, x));
|
|
1866
1866
|
}
|
|
1867
|
-
function st(l,
|
|
1868
|
-
l === q.value && m.updateOriginal(
|
|
1867
|
+
function st(l, x, S) {
|
|
1868
|
+
l === q.value && m.updateOriginal(x, S);
|
|
1869
1869
|
}
|
|
1870
1870
|
ee(
|
|
1871
1871
|
() => o.items.map((l) => l.id),
|
|
@@ -1875,8 +1875,8 @@ const Za = ["aria-label", "data-phase", "data-chrome", "inert"], ja = ["aria-hid
|
|
|
1875
1875
|
G++, ge.cancel(), D.cancel(), he++, ne.kind === "active" && ne.animation.cancel(), Me.disconnect(), ve = "", me = "", xe(), i("closing"), s.value = "closed", Y.value = ke, fe.clear(), K.clear(), document.body.style.overflow = pe, i("close");
|
|
1876
1876
|
return;
|
|
1877
1877
|
}
|
|
1878
|
-
const
|
|
1879
|
-
(
|
|
1878
|
+
const x = l.indexOf(v), S = x >= 0 ? x : Math.min(q.value, l.length - 1);
|
|
1879
|
+
(S !== q.value || x < 0) && (x >= 0 ? D.rebase(S) : (D.reset(S), v = l[S], m.reset(), E.value = 1, M.value = !1, i("change", S))), Fe(S);
|
|
1880
1880
|
},
|
|
1881
1881
|
{ flush: "sync" }
|
|
1882
1882
|
);
|
|
@@ -1888,38 +1888,38 @@ const Za = ["aria-label", "data-phase", "data-chrome", "inert"], ja = ["aria-hid
|
|
|
1888
1888
|
D.go(l - q.value);
|
|
1889
1889
|
return;
|
|
1890
1890
|
}
|
|
1891
|
-
D.reset(l), v = o.items[l].id, m.reset(), E.value = 1,
|
|
1891
|
+
D.reset(l), v = o.items[l].id, m.reset(), E.value = 1, M.value = !1, C.value = "loading", i("change", l), Fe(l);
|
|
1892
1892
|
}
|
|
1893
1893
|
}
|
|
1894
1894
|
function ct() {
|
|
1895
|
-
o.persistentChrome || (
|
|
1895
|
+
o.persistentChrome || (d.value = !d.value);
|
|
1896
1896
|
}
|
|
1897
1897
|
function j() {
|
|
1898
1898
|
return fe.get(v);
|
|
1899
1899
|
}
|
|
1900
1900
|
function Ke(l) {
|
|
1901
1901
|
xe();
|
|
1902
|
-
const
|
|
1902
|
+
const x = l.element.classList.contains("mp-transition-source");
|
|
1903
1903
|
l.element.classList.add("mp-transition-source"), xe = () => {
|
|
1904
|
-
l.element.classList.toggle("mp-transition-source",
|
|
1904
|
+
l.element.classList.toggle("mp-transition-source", x);
|
|
1905
1905
|
};
|
|
1906
1906
|
}
|
|
1907
1907
|
function Ge() {
|
|
1908
|
-
const l =
|
|
1908
|
+
const l = f.value.getBoundingClientRect();
|
|
1909
1909
|
return { left: l.left, top: l.top, width: l.width, height: l.height };
|
|
1910
1910
|
}
|
|
1911
1911
|
function _e() {
|
|
1912
1912
|
return y.value.getBoundingClientRect();
|
|
1913
1913
|
}
|
|
1914
1914
|
function Ve(l = 1) {
|
|
1915
|
-
const
|
|
1915
|
+
const x = _e(), S = j().core, O = S.state, ce = O.downScale;
|
|
1916
1916
|
return {
|
|
1917
|
-
x:
|
|
1918
|
-
y:
|
|
1919
|
-
width:
|
|
1920
|
-
height:
|
|
1921
|
-
rotation:
|
|
1922
|
-
clip:
|
|
1917
|
+
x: x.left + x.width / 2 + D.state.offset + O.offsetX * ce * l + O.downOffsetX,
|
|
1918
|
+
y: x.top + x.height / 2 + O.offsetY * ce * l + O.downOffsetY,
|
|
1919
|
+
width: S.mediaSize.value.width * S.displayScale.value * ce * l,
|
|
1920
|
+
height: S.mediaSize.value.height * S.displayScale.value * ce * l,
|
|
1921
|
+
rotation: O.rotation,
|
|
1922
|
+
clip: x,
|
|
1923
1923
|
radius: 0
|
|
1924
1924
|
};
|
|
1925
1925
|
}
|
|
@@ -1927,37 +1927,37 @@ const Za = ["aria-label", "data-phase", "data-chrome", "inert"], ja = ["aria-hid
|
|
|
1927
1927
|
if (!Number.isInteger(l) || l < 0 || l >= o.items.length)
|
|
1928
1928
|
throw new RangeError("无效的预览下标");
|
|
1929
1929
|
if (s.value === "closing" && await $e, s.value !== "closed" || Q) return;
|
|
1930
|
-
const
|
|
1931
|
-
if (pe = document.body.style.overflow, document.body.style.overflow = "hidden", D.reset(l), v = o.items[l].id, m.reset(), E.value = 1,
|
|
1932
|
-
V.value = y.value.clientWidth, Me.observe(
|
|
1930
|
+
const x = ++G;
|
|
1931
|
+
if (pe = document.body.style.overflow, document.body.style.overflow = "hidden", D.reset(l), v = o.items[l].id, m.reset(), E.value = 1, d.value = !0, M.value = !1, C.value = "loading", A.value = !1, h.value = 0, N.value = !1, s.value = "opening", Y.value = ke, _.value = !1, Pe = W.value.id, se = { kind: "unavailable" }, k.value = !1, i("open", l), await ye(), !(x !== G || Q)) {
|
|
1932
|
+
V.value = y.value.clientWidth, Me.observe(f.value), Me.observe(y.value);
|
|
1933
1933
|
try {
|
|
1934
|
-
const
|
|
1935
|
-
if (
|
|
1936
|
-
const
|
|
1937
|
-
|
|
1938
|
-
const
|
|
1939
|
-
if (
|
|
1934
|
+
const S = await o.resolveAnchor(W.value);
|
|
1935
|
+
if (x !== G) return;
|
|
1936
|
+
const O = St(S, W.value, Ge());
|
|
1937
|
+
se = O, Y.value = ta(O), _.value = Y.value.kind === "image" || j().readiness === "ready";
|
|
1938
|
+
const ce = _e();
|
|
1939
|
+
if (O.kind === "element") {
|
|
1940
1940
|
const He = j().readiness === "ready" ? j().core.mediaRef.value : Y.value.kind === "image" ? Y.value.image : kt();
|
|
1941
|
-
if (
|
|
1942
|
-
Ke(
|
|
1943
|
-
|
|
1944
|
-
|
|
1941
|
+
if (k.value = !0, await ye(), x !== G || Q) return;
|
|
1942
|
+
Ke(O), await ge.play(
|
|
1943
|
+
I.value,
|
|
1944
|
+
w.value,
|
|
1945
1945
|
He,
|
|
1946
|
-
|
|
1947
|
-
$t(W.value,
|
|
1948
|
-
|
|
1946
|
+
O.frame,
|
|
1947
|
+
$t(W.value, ce, "contain"),
|
|
1948
|
+
O.viewport,
|
|
1949
1949
|
u.value,
|
|
1950
1950
|
!0,
|
|
1951
1951
|
0,
|
|
1952
1952
|
o.transitionDuration
|
|
1953
1953
|
);
|
|
1954
1954
|
} else
|
|
1955
|
-
h.value = 1,
|
|
1956
|
-
} catch (
|
|
1957
|
-
if (
|
|
1958
|
-
i("error", Ae(
|
|
1955
|
+
h.value = 1, k.value = !1, await Z(!0);
|
|
1956
|
+
} catch (S) {
|
|
1957
|
+
if (x !== G) return;
|
|
1958
|
+
i("error", Ae(S), W.value);
|
|
1959
1959
|
}
|
|
1960
|
-
|
|
1960
|
+
x !== G || Q || (h.value = 1, s.value = "open", await ye(), !(x !== G || Q) && (j().core.renderNow(), await Ee(), !(x !== G || Q) && (k.value = !1, ge.cancel(), xe(), i("opened", l), await Ee(), !(x !== G || Q || s.value !== "open") && (N.value = !0, Fe(l)))));
|
|
1961
1961
|
}
|
|
1962
1962
|
}
|
|
1963
1963
|
function F() {
|
|
@@ -1965,28 +1965,28 @@ const Za = ["aria-label", "data-phase", "data-chrome", "inert"], ja = ["aria-hid
|
|
|
1965
1965
|
}
|
|
1966
1966
|
async function X() {
|
|
1967
1967
|
D.grab();
|
|
1968
|
-
const l = h.value,
|
|
1969
|
-
image: Y.value.kind === "image" && W.value.id ===
|
|
1968
|
+
const l = h.value, x = s.value === "opening", S = !x && j().readiness === "ready" ? j().captureFrame() : {
|
|
1969
|
+
image: Y.value.kind === "image" && W.value.id === Pe ? Y.value.image : kt(),
|
|
1970
1970
|
scale: 1
|
|
1971
1971
|
};
|
|
1972
|
-
let
|
|
1973
|
-
|
|
1974
|
-
const
|
|
1975
|
-
He.kind === "inactive" && ge.cancel(), D.cancel(),
|
|
1972
|
+
let O = x ? { kind: "opening" } : { kind: "captured", frame: Ve(S.scale) };
|
|
1973
|
+
x || j().core.cancelGesture(!0);
|
|
1974
|
+
const ce = ++G, He = x ? ge.reverseOpening() : { kind: "inactive" };
|
|
1975
|
+
He.kind === "inactive" && ge.cancel(), D.cancel(), M.value = !1, s.value = "closing", i("closing");
|
|
1976
1976
|
try {
|
|
1977
|
-
if (await ye(),
|
|
1978
|
-
const dt =
|
|
1979
|
-
if (
|
|
1980
|
-
const et =
|
|
1977
|
+
if (await ye(), ce !== G || Q || (document.fullscreenElement === f.value && (await document.exitFullscreen(), await Ee(), await Ee(), O.kind === "captured" && (O.frame = Ve(S.scale))), ce !== G || Q)) return;
|
|
1978
|
+
const dt = x ? se : await o.resolveAnchor(W.value);
|
|
1979
|
+
if (ce !== G || Q) return;
|
|
1980
|
+
const et = x ? se : St(dt, W.value, Ge());
|
|
1981
1981
|
if (He.kind === "reversing")
|
|
1982
1982
|
await He.finished;
|
|
1983
|
-
else if (
|
|
1984
|
-
const Dt =
|
|
1985
|
-
Ke(et),
|
|
1986
|
-
|
|
1987
|
-
|
|
1983
|
+
else if (O.kind === "captured" && et.kind === "element") {
|
|
1984
|
+
const Dt = S.image;
|
|
1985
|
+
Ke(et), k.value = !0, await ye(), await ge.play(
|
|
1986
|
+
I.value,
|
|
1987
|
+
w.value,
|
|
1988
1988
|
Dt,
|
|
1989
|
-
|
|
1989
|
+
O.frame,
|
|
1990
1990
|
et.frame,
|
|
1991
1991
|
et.viewport,
|
|
1992
1992
|
u.value,
|
|
@@ -1995,37 +1995,37 @@ const Za = ["aria-label", "data-phase", "data-chrome", "inert"], ja = ["aria-hid
|
|
|
1995
1995
|
o.closeDuration
|
|
1996
1996
|
);
|
|
1997
1997
|
} else
|
|
1998
|
-
|
|
1998
|
+
k.value = !1, await Z(!1);
|
|
1999
1999
|
} catch (dt) {
|
|
2000
2000
|
i("error", Ae(dt), W.value), await Z(!1);
|
|
2001
2001
|
}
|
|
2002
|
-
|
|
2002
|
+
ce !== G || Q || (Me.disconnect(), ve = "", me = "", h.value = 0, s.value = "closed", Y.value = ke, fe.clear(), K.clear(), xe(), document.body.style.overflow = pe, i("close"), await ye(), ge.cancel());
|
|
2003
2003
|
}
|
|
2004
2004
|
async function Z(l) {
|
|
2005
|
-
const
|
|
2006
|
-
ne.kind === "active" && ne.animation.cancel(),
|
|
2007
|
-
const
|
|
2005
|
+
const x = ++he, S = l ? 0 : Number(getComputedStyle(f.value).opacity);
|
|
2006
|
+
ne.kind === "active" && ne.animation.cancel(), f.value.style.opacity = String(S);
|
|
2007
|
+
const O = f.value.animate([{ opacity: S }, { opacity: l ? 1 : 0 }], {
|
|
2008
2008
|
duration: matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 180,
|
|
2009
2009
|
fill: "forwards"
|
|
2010
2010
|
});
|
|
2011
|
-
ne = { kind: "active", animation:
|
|
2012
|
-
}), !(
|
|
2011
|
+
ne = { kind: "active", animation: O }, await O.finished.catch(() => {
|
|
2012
|
+
}), !(x !== he || Q) && (f.value.style.opacity = l ? "1" : "0", O.cancel(), ne = { kind: "idle" });
|
|
2013
2013
|
}
|
|
2014
2014
|
async function ae() {
|
|
2015
2015
|
if (document.fullscreenEnabled)
|
|
2016
2016
|
try {
|
|
2017
|
-
document.fullscreenElement ===
|
|
2017
|
+
document.fullscreenElement === f.value ? await document.exitFullscreen() : await f.value.requestFullscreen();
|
|
2018
2018
|
} catch (l) {
|
|
2019
2019
|
i("error", Ae(l), W.value);
|
|
2020
2020
|
}
|
|
2021
2021
|
}
|
|
2022
|
-
function
|
|
2022
|
+
function oe(l) {
|
|
2023
2023
|
s.value !== "open" || !o.gesturesEnabled || j().onPointerDown(l, _e()) && D.grab();
|
|
2024
2024
|
}
|
|
2025
2025
|
function we(l) {
|
|
2026
2026
|
s.value === "open" && (j().onPointerUp(l), s.value === "open" && D.resume());
|
|
2027
2027
|
}
|
|
2028
|
-
function
|
|
2028
|
+
function re(l) {
|
|
2029
2029
|
s.value === "open" && (j().onPointerCancel(l), s.value === "open" && D.resume());
|
|
2030
2030
|
}
|
|
2031
2031
|
function be(l) {
|
|
@@ -2040,32 +2040,18 @@ const Za = ["aria-label", "data-phase", "data-chrome", "inert"], ja = ["aria-hid
|
|
|
2040
2040
|
function Je(l) {
|
|
2041
2041
|
s.value === "open" && D.drag(l);
|
|
2042
2042
|
}
|
|
2043
|
-
function Tt(l,
|
|
2044
|
-
s.value === "open" && (
|
|
2043
|
+
function Tt(l, x) {
|
|
2044
|
+
s.value === "open" && (M.value = !1, D.release(l, x));
|
|
2045
2045
|
}
|
|
2046
2046
|
function Bt(l) {
|
|
2047
|
-
E.value = l, l > 1.02 && !o.persistentChrome && (
|
|
2047
|
+
E.value = l, l > 1.02 && !o.persistentChrome && (d.value = !1);
|
|
2048
2048
|
}
|
|
2049
2049
|
function ht(l) {
|
|
2050
|
-
if (!(s.value === "closed" || !o.keyboardEnabled) && !(l.key === "Escape" && document.fullscreenElement ===
|
|
2050
|
+
if (!(s.value === "closed" || !o.keyboardEnabled) && !(l.key === "Escape" && document.fullscreenElement === f.value)) {
|
|
2051
2051
|
if (l.key === "Escape") {
|
|
2052
2052
|
l.preventDefault(), F();
|
|
2053
2053
|
return;
|
|
2054
2054
|
}
|
|
2055
|
-
if (l.key === "Tab") {
|
|
2056
|
-
const w = [
|
|
2057
|
-
...d.value.querySelectorAll(
|
|
2058
|
-
"button:not(:disabled), a[href], [tabindex='0']"
|
|
2059
|
-
)
|
|
2060
|
-
].filter((ie) => ie.getClientRects().length > 0 && getComputedStyle(ie).visibility !== "hidden");
|
|
2061
|
-
if (w.length === 0) {
|
|
2062
|
-
l.preventDefault();
|
|
2063
|
-
return;
|
|
2064
|
-
}
|
|
2065
|
-
const z = (w.indexOf(document.activeElement) + (l.shiftKey ? -1 : 1) + w.length) % w.length;
|
|
2066
|
-
w[z].focus(), l.preventDefault();
|
|
2067
|
-
return;
|
|
2068
|
-
}
|
|
2069
2055
|
if (!(s.value !== "open" || l.target.matches("input, textarea, select, button, [role='slider']"))) {
|
|
2070
2056
|
if (W.value.type === "video") {
|
|
2071
2057
|
if (l.code === "Space") {
|
|
@@ -2094,31 +2080,30 @@ const Za = ["aria-label", "data-phase", "data-chrome", "inert"], ja = ["aria-hid
|
|
|
2094
2080
|
...te,
|
|
2095
2081
|
currentIndex: q,
|
|
2096
2082
|
phase: s,
|
|
2097
|
-
element:
|
|
2083
|
+
element: f,
|
|
2098
2084
|
mediaElement: () => j().core.mediaRef.value,
|
|
2099
2085
|
canvasElement: () => j().core.canvasRef.value
|
|
2100
|
-
}), (l,
|
|
2086
|
+
}), (l, x) => (z(), rt(Ct, {
|
|
2101
2087
|
to: "body",
|
|
2102
2088
|
disabled: l.teleportDisabled
|
|
2103
2089
|
}, [
|
|
2104
|
-
s.value !== "closed" ? (
|
|
2090
|
+
s.value !== "closed" ? (z(), H("div", Ue({
|
|
2105
2091
|
key: 0,
|
|
2106
2092
|
ref_key: "root",
|
|
2107
|
-
ref:
|
|
2093
|
+
ref: f
|
|
2108
2094
|
}, g(n), {
|
|
2109
2095
|
class: ["mp-viewer", { "is-mobile": l.mobile, "is-album": l.appearance === "album" }],
|
|
2110
2096
|
role: "dialog",
|
|
2111
2097
|
"aria-modal": "true",
|
|
2112
2098
|
"aria-label": W.value.title,
|
|
2113
|
-
tabindex: "-1",
|
|
2114
2099
|
"data-phase": s.value,
|
|
2115
|
-
"data-chrome":
|
|
2100
|
+
"data-chrome": d.value ? "visible" : "hidden",
|
|
2116
2101
|
inert: s.value === "closing",
|
|
2117
|
-
onPointerdown:
|
|
2102
|
+
onPointerdown: oe,
|
|
2118
2103
|
onPointermove: be,
|
|
2119
2104
|
onPointerup: we,
|
|
2120
|
-
onPointercancel:
|
|
2121
|
-
onLostpointercapture:
|
|
2105
|
+
onPointercancel: re,
|
|
2106
|
+
onLostpointercapture: re,
|
|
2122
2107
|
onWheel: Qe
|
|
2123
2108
|
}), [
|
|
2124
2109
|
$("div", {
|
|
@@ -2134,78 +2119,78 @@ const Za = ["aria-label", "data-phase", "data-chrome", "inert"], ja = ["aria-hid
|
|
|
2134
2119
|
$("div", {
|
|
2135
2120
|
ref_key: "mediaViewport",
|
|
2136
2121
|
ref: y,
|
|
2137
|
-
class: qe(["mp-viewer__pages", { "is-transitioning":
|
|
2122
|
+
class: qe(["mp-viewer__pages", { "is-transitioning": k.value }])
|
|
2138
2123
|
}, [
|
|
2139
|
-
(
|
|
2140
|
-
key: l.items[
|
|
2124
|
+
(z(!0), H(De, null, ot(je.value, (S) => (z(), H("div", {
|
|
2125
|
+
key: l.items[S].id,
|
|
2141
2126
|
ref_for: !0,
|
|
2142
|
-
ref: Ze(l.items[
|
|
2127
|
+
ref: Ze(l.items[S].id),
|
|
2143
2128
|
class: "mp-viewer__page",
|
|
2144
2129
|
style: Se({
|
|
2145
|
-
transform: `translate3d(${(
|
|
2130
|
+
transform: `translate3d(${(S - g(q)) * g(D).stride() + g(D).state.offset}px,0,0)`,
|
|
2146
2131
|
transition: g(D).state.settling ? `transform ${g(D).state.duration}ms cubic-bezier(.22,.61,.36,1)` : "none"
|
|
2147
2132
|
}),
|
|
2148
|
-
"aria-hidden":
|
|
2149
|
-
inert:
|
|
2150
|
-
"data-media-id": l.items[
|
|
2133
|
+
"aria-hidden": S !== g(q),
|
|
2134
|
+
inert: S !== g(q),
|
|
2135
|
+
"data-media-id": l.items[S].id
|
|
2151
2136
|
}, [
|
|
2152
2137
|
Be(Va, {
|
|
2153
2138
|
ref_for: !0,
|
|
2154
|
-
ref: Oe(l.items[
|
|
2155
|
-
media: l.items[
|
|
2139
|
+
ref: Oe(l.items[S].id),
|
|
2140
|
+
media: l.items[S],
|
|
2156
2141
|
"video-loader": l.videoLoader,
|
|
2157
2142
|
rendering: s.value === "open",
|
|
2158
2143
|
paging: g(D).state.dragging || g(D).state.preparing || g(D).state.settling || g(D).state.grabbed,
|
|
2159
2144
|
"external-gestures": "",
|
|
2160
|
-
active:
|
|
2145
|
+
active: S === g(q),
|
|
2161
2146
|
disabled: s.value !== "open" || !l.gesturesEnabled,
|
|
2162
2147
|
"inactive-reset-duration": g(D).state.duration,
|
|
2163
2148
|
"resource-policy": l.resourcePolicy,
|
|
2164
2149
|
"resolve-source": l.resolveImageSource,
|
|
2165
|
-
"request-version":
|
|
2166
|
-
"load-enabled":
|
|
2150
|
+
"request-version": S === g(q) ? g(P) : 0,
|
|
2151
|
+
"load-enabled": S === g(q) ? N.value && s.value === "open" : s.value === "open" && !k.value && g(p) === W.value.id,
|
|
2167
2152
|
"teleport-controls": "",
|
|
2168
2153
|
"controls-target": `#${r}`,
|
|
2169
|
-
"controls-visible":
|
|
2170
|
-
"initial-image": l.items[
|
|
2171
|
-
quality:
|
|
2172
|
-
"live-playing":
|
|
2154
|
+
"controls-visible": d.value && h.value === 1,
|
|
2155
|
+
"initial-image": l.items[S].id === g(Pe) ? Y.value : g(ke),
|
|
2156
|
+
quality: S === g(q) && g(b).has(l.items[S].id) ? "full" : S === g(q) ? "screen" : "thumbnail",
|
|
2157
|
+
"live-playing": M.value,
|
|
2173
2158
|
onTap: ct,
|
|
2174
2159
|
onScale: Bt,
|
|
2175
2160
|
onPageDrag: Je,
|
|
2176
2161
|
onPageRelease: Tt,
|
|
2177
2162
|
onClose: F,
|
|
2178
2163
|
onSwipeDownProgress: Ye,
|
|
2179
|
-
onLiveState: (
|
|
2180
|
-
|
|
2164
|
+
onLiveState: (O) => {
|
|
2165
|
+
S === g(q) && (C.value = O);
|
|
2181
2166
|
},
|
|
2182
2167
|
onLiveEnded: () => {
|
|
2183
|
-
|
|
2168
|
+
S === g(q) && (M.value = !1);
|
|
2184
2169
|
},
|
|
2185
|
-
onReady: (
|
|
2186
|
-
onOriginalState: (
|
|
2187
|
-
onError: (
|
|
2170
|
+
onReady: (O) => Te(S, O),
|
|
2171
|
+
onOriginalState: (O, ce) => st(S, O, ce),
|
|
2172
|
+
onError: (O) => i("error", O, l.items[S])
|
|
2188
2173
|
}, 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"])
|
|
2189
2174
|
], 12, ja))), 128))
|
|
2190
2175
|
], 2),
|
|
2191
2176
|
Vt($("div", {
|
|
2192
2177
|
ref_key: "transitionMask",
|
|
2193
|
-
ref:
|
|
2178
|
+
ref: w,
|
|
2194
2179
|
class: "mp-shared-clip",
|
|
2195
2180
|
"aria-hidden": "true"
|
|
2196
2181
|
}, [
|
|
2197
2182
|
$("canvas", {
|
|
2198
2183
|
ref_key: "transitionCanvas",
|
|
2199
|
-
ref:
|
|
2184
|
+
ref: I,
|
|
2200
2185
|
class: "mp-shared-transition"
|
|
2201
2186
|
}, null, 512)
|
|
2202
2187
|
], 512), [
|
|
2203
|
-
[Yt,
|
|
2188
|
+
[Yt, k.value]
|
|
2204
2189
|
]),
|
|
2205
|
-
s.value === "opening" && !_.value ? (
|
|
2190
|
+
s.value === "opening" && !_.value ? (z(), H("div", Ka, Qa)) : ie("", !0),
|
|
2206
2191
|
$("div", {
|
|
2207
|
-
class: qe(["mp-viewer__chrome", { "is-hidden": !
|
|
2208
|
-
inert: !
|
|
2192
|
+
class: qe(["mp-viewer__chrome", { "is-hidden": !d.value || s.value !== "open" || h.value < 1 }]),
|
|
2193
|
+
inert: !d.value || s.value !== "open" || h.value < 1
|
|
2209
2194
|
}, [
|
|
2210
2195
|
ft(l.$slots, "toolbar", {
|
|
2211
2196
|
media: W.value,
|
|
@@ -2215,8 +2200,8 @@ const Za = ["aria-label", "data-phase", "data-chrome", "inert"], ja = ["aria-hid
|
|
|
2215
2200
|
controls: te,
|
|
2216
2201
|
originalStatus: g(B),
|
|
2217
2202
|
originalReason: g(L),
|
|
2218
|
-
livePlaying:
|
|
2219
|
-
liveStatus:
|
|
2203
|
+
livePlaying: M.value,
|
|
2204
|
+
liveStatus: C.value
|
|
2220
2205
|
}, () => [
|
|
2221
2206
|
$("header", en, [
|
|
2222
2207
|
$("button", {
|
|
@@ -2225,87 +2210,87 @@ const Za = ["aria-label", "data-phase", "data-chrome", "inert"], ja = ["aria-hid
|
|
|
2225
2210
|
onClick: F
|
|
2226
2211
|
}, "‹"),
|
|
2227
2212
|
$("div", tn, [
|
|
2228
|
-
$("strong", null,
|
|
2229
|
-
$("span", null,
|
|
2213
|
+
$("strong", null, le(W.value.title), 1),
|
|
2214
|
+
$("span", null, le(g(q) + 1) + " / " + le(l.items.length), 1)
|
|
2230
2215
|
]),
|
|
2231
2216
|
$("button", {
|
|
2232
2217
|
type: "button",
|
|
2233
2218
|
"aria-label": "旋转图片",
|
|
2234
2219
|
disabled: W.value.type === "video",
|
|
2235
|
-
onClick:
|
|
2220
|
+
onClick: x[0] || (x[0] = (S) => te.rotate())
|
|
2236
2221
|
}, " ↻ ", 8, an)
|
|
2237
2222
|
]),
|
|
2238
2223
|
$("footer", nn, [
|
|
2239
|
-
W.value.type !== "video" ? (
|
|
2224
|
+
W.value.type !== "video" ? (z(), H(De, { key: 0 }, [
|
|
2240
2225
|
$("button", {
|
|
2241
2226
|
type: "button",
|
|
2242
2227
|
"aria-label": "缩小",
|
|
2243
|
-
onClick:
|
|
2244
|
-
(...
|
|
2228
|
+
onClick: x[1] || (x[1] = //@ts-ignore
|
|
2229
|
+
(...S) => te.zoomOut && te.zoomOut(...S))
|
|
2245
2230
|
}, "−"),
|
|
2246
2231
|
$("button", {
|
|
2247
2232
|
type: "button",
|
|
2248
2233
|
"aria-label": "放大",
|
|
2249
|
-
onClick:
|
|
2250
|
-
(...
|
|
2234
|
+
onClick: x[2] || (x[2] = //@ts-ignore
|
|
2235
|
+
(...S) => te.zoomIn && te.zoomIn(...S))
|
|
2251
2236
|
}, "+"),
|
|
2252
2237
|
$("button", {
|
|
2253
2238
|
type: "button",
|
|
2254
2239
|
"aria-label": "复位",
|
|
2255
|
-
onClick:
|
|
2256
|
-
(...
|
|
2240
|
+
onClick: x[3] || (x[3] = //@ts-ignore
|
|
2241
|
+
(...S) => te.reset && te.reset(...S))
|
|
2257
2242
|
}, "复位")
|
|
2258
|
-
], 64)) :
|
|
2243
|
+
], 64)) : ie("", !0),
|
|
2259
2244
|
$("button", {
|
|
2260
2245
|
type: "button",
|
|
2261
2246
|
"aria-label": "图片详情",
|
|
2262
|
-
onClick:
|
|
2263
|
-
(...
|
|
2247
|
+
onClick: x[4] || (x[4] = //@ts-ignore
|
|
2248
|
+
(...S) => te.toggleDetail && te.toggleDetail(...S))
|
|
2264
2249
|
}, "ⓘ")
|
|
2265
2250
|
])
|
|
2266
2251
|
]),
|
|
2267
|
-
!l.mobile && g(q) > 0 ? (
|
|
2252
|
+
!l.mobile && g(q) > 0 ? (z(), H("button", {
|
|
2268
2253
|
key: 0,
|
|
2269
2254
|
class: "mp-viewer__arrow is-left",
|
|
2270
2255
|
"aria-label": "上一张",
|
|
2271
|
-
onClick:
|
|
2272
|
-
}, " ‹ ")) :
|
|
2273
|
-
!l.mobile && g(q) < l.items.length - 1 ? (
|
|
2256
|
+
onClick: x[5] || (x[5] = (S) => g(D).go(-1))
|
|
2257
|
+
}, " ‹ ")) : ie("", !0),
|
|
2258
|
+
!l.mobile && g(q) < l.items.length - 1 ? (z(), H("button", {
|
|
2274
2259
|
key: 1,
|
|
2275
2260
|
class: "mp-viewer__arrow is-right",
|
|
2276
2261
|
"aria-label": "下一张",
|
|
2277
|
-
onClick:
|
|
2278
|
-
}, " › ")) :
|
|
2279
|
-
$("div", on,
|
|
2262
|
+
onClick: x[6] || (x[6] = (S) => g(D).go(1))
|
|
2263
|
+
}, " › ")) : ie("", !0),
|
|
2264
|
+
$("div", on, le(g(q) + 1) + " / " + le(l.items.length), 1)
|
|
2280
2265
|
], 10, Ja),
|
|
2281
|
-
|
|
2266
|
+
A.value ? (z(), H("aside", rn, [
|
|
2282
2267
|
$("button", {
|
|
2283
2268
|
type: "button",
|
|
2284
2269
|
"aria-label": "关闭详情",
|
|
2285
|
-
onClick:
|
|
2270
|
+
onClick: x[7] || (x[7] = (S) => A.value = !1)
|
|
2286
2271
|
}, "×"),
|
|
2287
|
-
$("strong", null,
|
|
2288
|
-
$("span", null,
|
|
2289
|
-
$("span", null,
|
|
2290
|
-
])) :
|
|
2291
|
-
], 16, Za)) :
|
|
2272
|
+
$("strong", null, le(W.value.title), 1),
|
|
2273
|
+
$("span", null, le(W.value.width) + " × " + le(W.value.height), 1),
|
|
2274
|
+
$("span", null, le(W.value.type) + " · " + le(E.value.toFixed(2)) + "×", 1)
|
|
2275
|
+
])) : ie("", !0)
|
|
2276
|
+
], 16, Za)) : ie("", !0)
|
|
2292
2277
|
], 8, ["disabled"]));
|
|
2293
2278
|
}
|
|
2294
2279
|
});
|
|
2295
2280
|
function ln(a, t, e, n = 2) {
|
|
2296
2281
|
const o = Math.max(1, (t - n * (e - 1)) / e), i = [], s = /* @__PURE__ */ new Map();
|
|
2297
|
-
let r = 0,
|
|
2282
|
+
let r = 0, f = 0;
|
|
2298
2283
|
return a.forEach((y, m) => {
|
|
2299
2284
|
m > 0 && (i.push({ kind: "header", group: m, first: 0, count: 0, start: r, end: r + 52 }), r += 52);
|
|
2300
|
-
for (let
|
|
2301
|
-
const B = Math.min(e, y.items.length -
|
|
2302
|
-
i.push({ kind: "items", group: m, first:
|
|
2303
|
-
for (let
|
|
2304
|
-
|
|
2285
|
+
for (let b = 0; b < y.items.length; b += e) {
|
|
2286
|
+
const B = Math.min(e, y.items.length - b), L = i.length;
|
|
2287
|
+
i.push({ kind: "items", group: m, first: b, count: B, start: r, end: r + o });
|
|
2288
|
+
for (let P = 0; P < B; P++) s.set(y.items[b + P].id, L);
|
|
2289
|
+
f += B, r += o + (b + B < y.items.length ? n : 0);
|
|
2305
2290
|
}
|
|
2306
|
-
}), { rows: i, locations: s, height: r, size: o, total:
|
|
2291
|
+
}), { rows: i, locations: s, height: r, size: o, total: f };
|
|
2307
2292
|
}
|
|
2308
|
-
function
|
|
2293
|
+
function Pt(a, t) {
|
|
2309
2294
|
let e = 0, n = a.length;
|
|
2310
2295
|
for (; e < n; ) {
|
|
2311
2296
|
const o = e + n >>> 1;
|
|
@@ -2323,49 +2308,49 @@ const sn = ["data-total-items", "data-rendered-items"], un = /* @__PURE__ */ Le(
|
|
|
2323
2308
|
},
|
|
2324
2309
|
emits: ["loadMore", "date"],
|
|
2325
2310
|
setup(a, { expose: t, emit: e }) {
|
|
2326
|
-
const n = a, o = e, i = R(), s = R(390), r = R(844),
|
|
2311
|
+
const n = a, o = e, i = R(), s = R(390), r = R(844), f = R(0), y = U(
|
|
2327
2312
|
() => n.mobile ? s.value >= 640 ? 5 : s.value >= 480 ? 4 : 3 : Math.max(1, Math.floor((s.value + 2) / 172))
|
|
2328
|
-
), m = U(() => ln(n.groups, s.value, y.value)),
|
|
2329
|
-
const u = m.value.rows,
|
|
2330
|
-
let
|
|
2331
|
-
for (;
|
|
2332
|
-
return u.slice(
|
|
2333
|
-
}), B = U(() =>
|
|
2334
|
-
let L = 0,
|
|
2313
|
+
), m = U(() => ln(n.groups, s.value, y.value)), b = U(() => {
|
|
2314
|
+
const u = m.value.rows, k = Pt(u, Math.max(0, f.value - m.value.size * 3)), h = f.value + r.value + m.value.size * 3;
|
|
2315
|
+
let d = k;
|
|
2316
|
+
for (; d < u.length && u[d].start <= h; ) d++;
|
|
2317
|
+
return u.slice(k, d);
|
|
2318
|
+
}), B = U(() => b.value.reduce((u, k) => u + k.count, 0));
|
|
2319
|
+
let L = 0, P = !1, p = () => {
|
|
2335
2320
|
};
|
|
2336
2321
|
function v() {
|
|
2337
2322
|
const u = n.scrollElement();
|
|
2338
|
-
s.value = u.clientWidth, r.value = u.clientHeight,
|
|
2339
|
-
const
|
|
2340
|
-
|
|
2323
|
+
s.value = u.clientWidth, r.value = u.clientHeight, f.value = u.scrollTop, m.value.rows.length > 0 && o("date", n.groups[m.value.rows[Pt(m.value.rows, f.value)].group].key);
|
|
2324
|
+
const k = f.value + r.value >= m.value.height - m.value.size * 3;
|
|
2325
|
+
k && n.hasMore && !P && (P = !0, o("loadMore")), k || (P = !1);
|
|
2341
2326
|
}
|
|
2342
2327
|
function T() {
|
|
2343
2328
|
L === 0 && (L = requestAnimationFrame(() => {
|
|
2344
2329
|
L = 0, v();
|
|
2345
2330
|
}));
|
|
2346
2331
|
}
|
|
2347
|
-
const
|
|
2332
|
+
const I = new ResizeObserver(v);
|
|
2348
2333
|
ze(() => {
|
|
2349
|
-
const u = n.scrollElement(),
|
|
2334
|
+
const u = n.scrollElement(), k = u.style.overflowAnchor;
|
|
2350
2335
|
u.style.overflowAnchor = "none", p = () => {
|
|
2351
|
-
u.style.overflowAnchor =
|
|
2352
|
-
}, u.addEventListener("scroll", T, { passive: !0 }),
|
|
2336
|
+
u.style.overflowAnchor = k;
|
|
2337
|
+
}, u.addEventListener("scroll", T, { passive: !0 }), I.observe(u), v();
|
|
2353
2338
|
}), Re(() => {
|
|
2354
|
-
n.scrollElement().removeEventListener("scroll", T),
|
|
2339
|
+
n.scrollElement().removeEventListener("scroll", T), I.disconnect(), cancelAnimationFrame(L), p();
|
|
2355
2340
|
}), ee(
|
|
2356
2341
|
() => n.groups,
|
|
2357
2342
|
() => {
|
|
2358
|
-
|
|
2343
|
+
P = !1, ye(v);
|
|
2359
2344
|
}
|
|
2360
2345
|
);
|
|
2361
|
-
async function
|
|
2346
|
+
async function w(u) {
|
|
2362
2347
|
if (!m.value.locations.has(u)) return { kind: "unavailable" };
|
|
2363
|
-
const
|
|
2364
|
-
return (
|
|
2365
|
-
(
|
|
2348
|
+
const k = m.value.rows[m.value.locations.get(u)], h = n.scrollElement();
|
|
2349
|
+
return (k.start < h.scrollTop || k.end > h.scrollTop + h.clientHeight) && (h.scrollTop = Math.max(0, k.start - (h.clientHeight - m.value.size) / 2)), v(), await ye(), await new Promise((M) => requestAnimationFrame(() => M())), { kind: "element", element: [...i.value.querySelectorAll("[data-id]")].find(
|
|
2350
|
+
(M) => M.dataset.id === u
|
|
2366
2351
|
).querySelector("img") };
|
|
2367
2352
|
}
|
|
2368
|
-
return t({ resolveAnchor:
|
|
2353
|
+
return t({ resolveAnchor: w, rendered: B, total: U(() => m.value.total) }), (u, k) => (z(), H("div", {
|
|
2369
2354
|
ref_key: "root",
|
|
2370
2355
|
ref: i,
|
|
2371
2356
|
class: "mp-virtual-timeline",
|
|
@@ -2373,7 +2358,7 @@ const sn = ["data-total-items", "data-rendered-items"], un = /* @__PURE__ */ Le(
|
|
|
2373
2358
|
"data-total-items": m.value.total,
|
|
2374
2359
|
"data-rendered-items": B.value
|
|
2375
2360
|
}, [
|
|
2376
|
-
(
|
|
2361
|
+
(z(!0), H(De, null, ot(b.value, (h) => (z(), H("div", {
|
|
2377
2362
|
key: u.groups[h.group].key + ":" + h.kind + ":" + h.first,
|
|
2378
2363
|
class: "mp-timeline-row",
|
|
2379
2364
|
style: Se({
|
|
@@ -2388,9 +2373,9 @@ const sn = ["data-total-items", "data-rendered-items"], un = /* @__PURE__ */ Le(
|
|
|
2388
2373
|
key: 0,
|
|
2389
2374
|
group: u.groups[h.group],
|
|
2390
2375
|
index: h.group
|
|
2391
|
-
}, void 0, !0) : (
|
|
2392
|
-
key:
|
|
2393
|
-
item:
|
|
2376
|
+
}, void 0, !0) : (z(!0), H(De, { key: 1 }, ot(u.groups[h.group].items.slice(h.first, h.first + h.count), (d) => ft(u.$slots, "item", {
|
|
2377
|
+
key: d.id,
|
|
2378
|
+
item: d
|
|
2394
2379
|
}, void 0, !0)), 128))
|
|
2395
2380
|
], 4))), 128))
|
|
2396
2381
|
], 12, sn));
|