1413 lines
52 KiB
JavaScript
1413 lines
52 KiB
JavaScript
/*
|
|
* Extracted from browser-delivered Turbopack chunk: 7e519410fdb8d8cd.424e721e83.js
|
|
* Module id: 978783
|
|
* For reading/searching only; this factory depends on the original Turbopack runtime.
|
|
*/
|
|
|
|
const moduleFactory = (e) => {
|
|
"use strict";
|
|
var t,
|
|
i,
|
|
a,
|
|
r,
|
|
n,
|
|
o,
|
|
s,
|
|
l = e.i(462214),
|
|
d = e.i(358379),
|
|
u = e.i(41671),
|
|
c = e.i(713118),
|
|
h = e.i(968336);
|
|
e.i(348469);
|
|
var m = e.i(747112);
|
|
function p() {
|
|
return (p = Object.assign.bind()).apply(null, arguments);
|
|
}
|
|
let v = function (e) {
|
|
return d.createElement(
|
|
"svg",
|
|
p(
|
|
{
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
width: 16,
|
|
height: 16,
|
|
fill: "none",
|
|
viewBox: "0 0 16 16",
|
|
},
|
|
e,
|
|
),
|
|
t ||
|
|
(t = d.createElement(
|
|
"g",
|
|
{ clipPath: "url(#adsorption_svg__a)" },
|
|
d.createElement("path", {
|
|
fill: "currentColor",
|
|
d: "M9.458.899a5.796 5.796 0 0 1 5.631 5.63 5.8 5.8 0 0 1-1.475 4.025l-.022.023-4.5 4.513a.6.6 0 0 1-.85.001l-2.666-2.667a.6.6 0 0 1 0-.849l2.915-2.9a.6.6 0 0 1 .195-.194L9.8 7.37a.827.827 0 0 0-1.153-1.15l-4.223 4.205a.6.6 0 0 1-.848-.002L.909 7.758a.6.6 0 0 1 0-.848l4.5-4.513.024-.024A5.8 5.8 0 0 1 9.458.9M6.85 12l1.817 1.817 2.152-2.16L9.01 9.85zm2.574-9.903a4.6 4.6 0 0 0-3.181 1.161l-1.07 1.073 1.83 1.832.834-.829.058-.052A2.029 2.029 0 0 1 11.15 6.76c.032.49-.114.975-.412 1.365a1 1 0 0 1-.054.06l-.822.818 1.806 1.806 1.056-1.06a4.593 4.593 0 0 0-3.299-7.651M2.181 7.332l1.82 1.82L6.153 7.01 4.325 5.182z",
|
|
}),
|
|
)),
|
|
i ||
|
|
(i = d.createElement(
|
|
"defs",
|
|
null,
|
|
d.createElement(
|
|
"clipPath",
|
|
{ id: "adsorption_svg__a" },
|
|
d.createElement("path", { fill: "#fff", d: "M0 0h16v16H0z" }),
|
|
),
|
|
)),
|
|
);
|
|
};
|
|
function b() {
|
|
return (b = Object.assign.bind()).apply(null, arguments);
|
|
}
|
|
let g = function (e) {
|
|
return d.createElement(
|
|
"svg",
|
|
b(
|
|
{
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
width: 16,
|
|
height: 16,
|
|
fill: "none",
|
|
viewBox: "0 0 16 16",
|
|
},
|
|
e,
|
|
),
|
|
a ||
|
|
(a = d.createElement("path", {
|
|
fill: "currentColor",
|
|
d: "M13.333 2.066c1.068 0 1.934.866 1.934 1.934v8a1.934 1.934 0 0 1-1.934 1.934H2.667A1.934 1.934 0 0 1 .733 12V4c0-1.068.866-1.934 1.934-1.934zm-10.666 1.2A.733.733 0 0 0 1.934 4v8c0 .405.328.733.733.733h10.666a.733.733 0 0 0 .733-.733V4a.733.733 0 0 0-.733-.733zm8.666 6.8a.601.601 0 0 1 0 1.2H4.667a.6.6 0 1 1 0-1.2zM5.34 7.4a.601.601 0 0 1 0 1.202h-.007a.6.6 0 0 1 0-1.202zm2.667 0a.6.6 0 0 1 0 1.202H8a.601.601 0 0 1 0-1.202zm2.666 0a.601.601 0 0 1 0 1.202h-.006a.601.601 0 0 1 0-1.202zM4.007 4.733a.6.6 0 0 1 0 1.2H4a.601.601 0 0 1 0-1.2zm2.666 0a.6.6 0 1 1 0 1.2h-.006a.601.601 0 0 1 0-1.2zm2.667 0a.6.6 0 1 1 0 1.2h-.007a.6.6 0 0 1 0-1.2zm2.667 0a.6.6 0 0 1 0 1.2H12a.601.601 0 0 1 0-1.2z",
|
|
})),
|
|
);
|
|
};
|
|
function f() {
|
|
return (f = Object.assign.bind()).apply(null, arguments);
|
|
}
|
|
let E = function (e) {
|
|
return d.createElement(
|
|
"svg",
|
|
f(
|
|
{
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
width: 15,
|
|
height: 15,
|
|
fill: "none",
|
|
viewBox: "0 0 15 15",
|
|
},
|
|
e,
|
|
),
|
|
r ||
|
|
(r = d.createElement("path", {
|
|
fill: "currentColor",
|
|
d: "M.195.195c.26-.26.683-.26.944 0L14.472 13.53a.666.666 0 1 1-.943.943l-2.58-2.58-2.523 2.532a.6.6 0 0 1-.85 0L4.91 11.758a.6.6 0 0 1 .001-.85l2.533-2.521-1.151-1.153L3.757 9.76a.6.6 0 0 1-.848-.001L.242 7.09a.6.6 0 0 1 0-.848L2.767 3.71.195 1.139a.667.667 0 0 1 0-.944m5.988 11.139L8 13.15l2.1-2.107-1.808-1.809zM8.791.23a5.796 5.796 0 0 1 5.632 5.632 5.8 5.8 0 0 1-1.476 4.024.6.6 0 0 1-.894-.801A4.592 4.592 0 0 0 5.567 2.6a.6.6 0 0 1-.8-.893A5.8 5.8 0 0 1 8.79.23M1.515 6.666l1.82 1.82 2.108-2.1-1.828-1.828zm7.08-2.462a2.028 2.028 0 0 1 1.475 3.254.6.6 0 0 1-.953-.73.828.828 0 0 0-1.16-1.158.6.6 0 0 1-.729-.953 2.03 2.03 0 0 1 1.367-.413",
|
|
})),
|
|
);
|
|
};
|
|
function w() {
|
|
return (w = Object.assign.bind()).apply(null, arguments);
|
|
}
|
|
let y = function (e) {
|
|
return d.createElement(
|
|
"svg",
|
|
w(
|
|
{
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
width: 16,
|
|
height: 16,
|
|
fill: "none",
|
|
viewBox: "0 0 16 16",
|
|
},
|
|
e,
|
|
),
|
|
n ||
|
|
(n = d.createElement(
|
|
"g",
|
|
{ clipPath: "url(#no-repeat_svg__a)" },
|
|
d.createElement("path", {
|
|
fill: "currentColor",
|
|
d: "M.91.91a.6.6 0 0 1 .848 0l13.333 13.333a.6.6 0 0 1-.849.849l-2.516-2.516q-.194.024-.393.025H3.45l1.642 1.642a.6.6 0 0 1-.849.849l-2.667-2.666a.6.6 0 0 1 0-.85L4.242 8.91a.6.6 0 0 1 .849.849L3.449 11.4h7.102L3.9 4.75a2.07 2.07 0 0 0-1.3 1.919v.666a.601.601 0 0 1-1.2 0v-.666a3.27 3.27 0 0 1 1.605-2.813L.91 1.76a.6.6 0 0 1 0-.849M14 8.067c.332 0 .6.27.6.6v.667c0 .336-.051.668-.15.982a.6.6 0 0 1-1.145-.361c.063-.199.095-.409.095-.621v-.666c0-.331.269-.6.6-.6M10.91.91a.6.6 0 0 1 .848 0l2.667 2.666a.6.6 0 0 1 0 .85l-2.667 2.666a.6.6 0 0 1-.849-.849l1.642-1.641H7.333a.6.6 0 0 1 0-1.202h5.218L10.909 1.76a.6.6 0 0 1 0-.849",
|
|
}),
|
|
)),
|
|
o ||
|
|
(o = d.createElement(
|
|
"defs",
|
|
null,
|
|
d.createElement(
|
|
"clipPath",
|
|
{ id: "no-repeat_svg__a" },
|
|
d.createElement("path", { fill: "#fff", d: "M0 0h16v16H0z" }),
|
|
),
|
|
)),
|
|
);
|
|
};
|
|
function x() {
|
|
return (x = Object.assign.bind()).apply(null, arguments);
|
|
}
|
|
let A = function (e) {
|
|
return d.createElement(
|
|
"svg",
|
|
x(
|
|
{
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|
width: 16,
|
|
height: 16,
|
|
fill: "none",
|
|
viewBox: "0 0 16 16",
|
|
},
|
|
e,
|
|
),
|
|
s ||
|
|
(s = d.createElement("path", {
|
|
fill: "currentColor",
|
|
d: "M14 8.066a.6.6 0 0 1 .6.6v.667a3.27 3.27 0 0 1-3.267 3.266H3.449l1.642 1.643.04.045a.601.601 0 0 1-.843.844l-.046-.04-2.667-2.668a.6.6 0 0 1 0-.848l2.667-2.667a.6.6 0 0 1 .849.85l-1.642 1.641h7.884a2.07 2.07 0 0 0 2.066-2.066v-.667a.6.6 0 0 1 .601-.6M10.91.908a.6.6 0 0 1 .802-.041l.046.04 2.667 2.668a.6.6 0 0 1 0 .848L11.758 7.09a.6.6 0 0 1-.849-.848l1.642-1.643H4.667a2.07 2.07 0 0 0-2.066 2.067v.667a.601.601 0 0 1-1.202 0v-.667a3.27 3.27 0 0 1 3.268-3.267h7.884l-1.642-1.642-.04-.046a.6.6 0 0 1 .04-.803",
|
|
})),
|
|
);
|
|
},
|
|
k = [
|
|
"p1",
|
|
"p2",
|
|
"p3",
|
|
"p4",
|
|
"p5",
|
|
"p6",
|
|
"p7",
|
|
"p8",
|
|
"p9",
|
|
"p10",
|
|
"p11",
|
|
"p12",
|
|
];
|
|
function I({ label: e, keys: t, prefix: i }) {
|
|
return (0, l.jsxs)("div", {
|
|
className: "flex items-center justify-between",
|
|
children: [
|
|
(0, l.jsx)("span", { className: "text-sm opacity-80", children: e }),
|
|
(0, l.jsxs)("div", {
|
|
className: "flex items-center gap-1.5",
|
|
children: [
|
|
i &&
|
|
(0, l.jsx)("span", {
|
|
className: "text-sm opacity-60",
|
|
children: i,
|
|
}),
|
|
t.map((e) =>
|
|
"+" === e
|
|
? (0, l.jsx)(
|
|
"span",
|
|
{ className: "mx-0.5 text-sm opacity-60", children: "+" },
|
|
"plus",
|
|
)
|
|
: (0, l.jsx)(
|
|
"div",
|
|
{
|
|
className:
|
|
"border-canvas-controls-border bg-canvas-controls-active flex h-8 min-w-[32px] items-center justify-center rounded-lg border px-2 text-sm font-medium opacity-90",
|
|
children: e,
|
|
},
|
|
e,
|
|
),
|
|
),
|
|
],
|
|
}),
|
|
],
|
|
});
|
|
}
|
|
function C({
|
|
videoRef: e,
|
|
videoUrl: t,
|
|
duration: i,
|
|
onConfirm: a,
|
|
onCancel: r,
|
|
width: n = c.NODE_WIDTH,
|
|
avEditor: o,
|
|
isEncoding: s,
|
|
encodeProgress: p,
|
|
}) {
|
|
let b,
|
|
f,
|
|
[w, x] = (0, d.useState)(0),
|
|
[C, T] = (0, d.useState)(Math.max(i / 3, 1)),
|
|
[M, _] = (0, d.useState)(null),
|
|
[S, L] = (0, d.useState)(!1),
|
|
[R, D] = (0, d.useState)(!1),
|
|
[N, P] = (0, d.useState)(!0),
|
|
[j, O] = (0, d.useState)(!1),
|
|
U = (0, d.useRef)(null),
|
|
H = (0, d.useRef)(null),
|
|
V = (0, d.useRef)(null),
|
|
W = (0, d.useRef)(w);
|
|
W.current = w;
|
|
let $ = (0, d.useRef)(C);
|
|
$.current = C;
|
|
let B = (0, d.useRef)(M);
|
|
B.current = M;
|
|
let F = (0, d.useRef)(N);
|
|
F.current = N;
|
|
let z = (0, d.useRef)(R);
|
|
z.current = R;
|
|
let G = (0, d.useCallback)((e) => {
|
|
if (!z.current) return e;
|
|
let t = 0.5 * Math.round(e / 0.5);
|
|
return 0.1 >= Math.abs(e - t) ? t : e;
|
|
}, []);
|
|
(0, d.useEffect)(() => {
|
|
let e = (e) => {
|
|
"Shift" === e.key && O(!0);
|
|
},
|
|
t = (e) => {
|
|
"Shift" === e.key && O(!1);
|
|
},
|
|
i = () => O(!1);
|
|
return (
|
|
window.addEventListener("keydown", e),
|
|
window.addEventListener("keyup", t),
|
|
window.addEventListener("blur", i),
|
|
() => {
|
|
window.removeEventListener("keydown", e),
|
|
window.removeEventListener("keyup", t),
|
|
window.removeEventListener("blur", i);
|
|
}
|
|
);
|
|
}, []),
|
|
(0, d.useEffect)(() => {
|
|
T(Math.max(i / 3, 1));
|
|
}, [i]),
|
|
(0, d.useEffect)(() => {
|
|
let t,
|
|
a = e.current,
|
|
r = H.current;
|
|
if (!a || !r || i <= 0) return;
|
|
let o = () => {
|
|
let e = a.currentTime,
|
|
s = $.current,
|
|
l = W.current;
|
|
!a.paused && e >= s && F.current && (a.currentTime = l);
|
|
let d = (e / i) * n;
|
|
(r.style.transform = `translateX(${d - 1}px)`),
|
|
(t = requestAnimationFrame(o));
|
|
};
|
|
return (t = requestAnimationFrame(o)), () => cancelAnimationFrame(t);
|
|
}, [e, i, n]);
|
|
let q = (function (e, t, i, a) {
|
|
let [r, n] = (0, d.useState)([]);
|
|
return (
|
|
(0, d.useEffect)(() => {
|
|
if (!e || t <= 0) return void n([]);
|
|
if (a) {
|
|
a.frames.length > 0 && n([...a.frames]);
|
|
let e = a.onFramesReady((e) => n([...e]));
|
|
return () => {
|
|
e();
|
|
};
|
|
}
|
|
let i = new m.AVEditor({
|
|
url: e,
|
|
duration: t,
|
|
frameHeight: 56,
|
|
frameCount: 12,
|
|
});
|
|
i.frames.length > 0 && n([...i.frames]);
|
|
let r = i.onFramesReady((e) => n([...e]));
|
|
return () => {
|
|
r(), i.dispose();
|
|
};
|
|
}, [e, t, 12, a]),
|
|
r
|
|
);
|
|
})(t, i, 0, o),
|
|
Q = i > 0 ? w / i : 0,
|
|
K = i > 0 ? C / i : 1,
|
|
Y = (0, d.useMemo)(() => Math.max(0, C - w), [w, C]),
|
|
X = (0, d.useCallback)((e) => (e / i) * n, [i, n]),
|
|
Z = (0, d.useCallback)(
|
|
(e) => {
|
|
let t = U.current;
|
|
if (!t || i <= 0) return 0;
|
|
let a = t.getBoundingClientRect();
|
|
return Math.max(0, Math.min(1, (e - a.left) / a.width)) * i;
|
|
},
|
|
[i],
|
|
),
|
|
J = (0, d.useCallback)(
|
|
(e) => (t) => {
|
|
t.preventDefault(), t.stopPropagation(), _(e);
|
|
},
|
|
[],
|
|
),
|
|
ee = (0, d.useCallback)(
|
|
(e) => {
|
|
e.preventDefault(),
|
|
e.stopPropagation(),
|
|
(V.current = {
|
|
time: Z(e.clientX),
|
|
startAt: W.current,
|
|
endAt: $.current,
|
|
}),
|
|
_("region");
|
|
},
|
|
[Z],
|
|
);
|
|
(0, d.useEffect)(() => {
|
|
if (!M) return;
|
|
let t = (t) => {
|
|
let a = Z(t.clientX);
|
|
if ("start" === B.current) {
|
|
let t = Math.max(0, Math.min(G(a), $.current - 1));
|
|
x(t);
|
|
let i = e.current;
|
|
i && (i.currentTime = t);
|
|
} else if ("end" === B.current)
|
|
T(Math.min(i, Math.max(G(a), W.current + 1)));
|
|
else if ("region" === B.current) {
|
|
let t = V.current;
|
|
if (!t) return;
|
|
let r = a - t.time,
|
|
n = t.endAt - t.startAt,
|
|
o = t.startAt + r,
|
|
s = t.endAt + r;
|
|
o < 0 && ((o = 0), (s = n)),
|
|
s > i && ((s = i), (o = i - n)),
|
|
x(o),
|
|
T(s);
|
|
let l = e.current;
|
|
l && (l.currentTime = o);
|
|
}
|
|
},
|
|
a = () => {
|
|
_(null), (V.current = null);
|
|
};
|
|
return (
|
|
window.addEventListener("pointermove", t),
|
|
window.addEventListener("pointerup", a),
|
|
() => {
|
|
window.removeEventListener("pointermove", t),
|
|
window.removeEventListener("pointerup", a);
|
|
}
|
|
);
|
|
}, [M, Z, i, e]),
|
|
(0, d.useEffect)(() => {
|
|
let t = (t) => {
|
|
let n = t.ctrlKey || t.metaKey ? 1 : 0.1;
|
|
if ("Escape" === t.key) {
|
|
t.preventDefault(), t.stopPropagation(), r();
|
|
return;
|
|
}
|
|
if ("Enter" === t.key) {
|
|
t.preventDefault(),
|
|
t.stopPropagation(),
|
|
a({ start: W.current, end: $.current });
|
|
return;
|
|
}
|
|
if (" " === t.key) {
|
|
t.preventDefault(), t.stopPropagation();
|
|
let i = e.current;
|
|
if (!i) return;
|
|
i.paused ? i.play() : i.pause();
|
|
return;
|
|
}
|
|
if (
|
|
[
|
|
"ArrowLeft",
|
|
"ArrowRight",
|
|
"ArrowUp",
|
|
"ArrowDown",
|
|
"i",
|
|
"I",
|
|
"o",
|
|
"O",
|
|
].includes(t.key)
|
|
) {
|
|
if (
|
|
(t.preventDefault(),
|
|
t.stopPropagation(),
|
|
"i" === t.key || "I" === t.key)
|
|
) {
|
|
let t = e.current;
|
|
if (!t) return;
|
|
x(Math.min(t.currentTime, $.current - 1));
|
|
return;
|
|
}
|
|
if ("o" === t.key || "O" === t.key) {
|
|
let t = e.current;
|
|
if (!t) return;
|
|
T(Math.max(t.currentTime, W.current + 1));
|
|
return;
|
|
}
|
|
if ("ArrowLeft" === t.key) {
|
|
let t = $.current - W.current,
|
|
i = Math.max(0, W.current - n);
|
|
x(i), T(i + t);
|
|
let a = e.current;
|
|
a && (a.currentTime = i);
|
|
} else if ("ArrowRight" === t.key) {
|
|
let t = $.current - W.current,
|
|
a = Math.min(i, $.current + n);
|
|
T(a), x(a - t);
|
|
let r = e.current;
|
|
r && (r.currentTime = a - t);
|
|
} else
|
|
"ArrowUp" === t.key
|
|
? T((e) => Math.max(W.current + 1, e - n))
|
|
: "ArrowDown" === t.key && T((e) => Math.min(i, e + n));
|
|
}
|
|
};
|
|
return (
|
|
window.addEventListener("keydown", t, !0),
|
|
() => window.removeEventListener("keydown", t, !0)
|
|
);
|
|
}, [i, e]);
|
|
let et = 161 + n + 160;
|
|
return (0, l.jsxs)("div", {
|
|
className: "nodrag nowheel nopan relative flex flex-col",
|
|
style: {
|
|
width: et,
|
|
marginLeft: -137,
|
|
marginTop: 8,
|
|
userSelect: "none",
|
|
},
|
|
children: [
|
|
S &&
|
|
(0, l.jsxs)("div", {
|
|
className:
|
|
"border-canvas-controls-border absolute bottom-[calc(100%+16px)] left-0 z-50 rounded-[16px] border p-6 shadow-xl backdrop-blur-xl",
|
|
style: {
|
|
width: 560,
|
|
backgroundColor:
|
|
"color-mix(in srgb, var(--canvas-controls-bg) 88%, transparent)",
|
|
},
|
|
children: [
|
|
(0, l.jsxs)("div", {
|
|
className: "mb-6 flex items-center justify-between",
|
|
children: [
|
|
(0, l.jsx)("h3", {
|
|
className:
|
|
"text-canvas-controls-text text-base font-medium",
|
|
children: "快捷键",
|
|
}),
|
|
(0, l.jsx)("button", {
|
|
onClick: () => L(!1),
|
|
className:
|
|
"text-canvas-controls-text/60 hover:text-canvas-controls-text transition-colors",
|
|
children: (0, l.jsx)(h.Icon, {
|
|
icon: "lucide:x",
|
|
width: 20,
|
|
height: 20,
|
|
}),
|
|
}),
|
|
],
|
|
}),
|
|
(0, l.jsxs)("div", {
|
|
className: "flex gap-8",
|
|
children: [
|
|
(0, l.jsxs)("div", {
|
|
className: "flex flex-1 flex-col gap-4",
|
|
children: [
|
|
(0, l.jsx)(I, { label: "移动选区", keys: ["←", "→"] }),
|
|
(0, l.jsx)(I, {
|
|
label: "扩展/收缩选区",
|
|
keys: ["↑", "↓"],
|
|
}),
|
|
(0, l.jsx)(I, {
|
|
label: "设置出点入点",
|
|
keys: ["I", "O"],
|
|
}),
|
|
(0, l.jsx)(I, { label: "退出", keys: ["Esc"] }),
|
|
],
|
|
}),
|
|
(0, l.jsx)("div", {
|
|
className: "bg-canvas-controls-border w-[1px]",
|
|
}),
|
|
(0, l.jsxs)("div", {
|
|
className: "flex flex-1 flex-col gap-4",
|
|
children: [
|
|
(0, l.jsx)(I, {
|
|
label: "精确模式",
|
|
keys: ["Shift"],
|
|
prefix: "按住",
|
|
}),
|
|
(0, l.jsx)(I, {
|
|
label: "快速调整",
|
|
keys: ["⌘/Ctrl", "+", "↑", "↓"],
|
|
}),
|
|
(0, l.jsx)(I, { label: "播放/暂停", keys: ["Space"] }),
|
|
(0, l.jsx)(I, { label: "确认剪辑", keys: ["Enter"] }),
|
|
],
|
|
}),
|
|
],
|
|
}),
|
|
],
|
|
}),
|
|
(0, l.jsxs)("div", {
|
|
className: "flex items-center",
|
|
style: {
|
|
background: "var(--canvas-controls-bg)",
|
|
borderRadius: 24,
|
|
padding: 8,
|
|
gap: 16,
|
|
border: "0.5px solid var(--canvas-controls-border)",
|
|
boxShadow: "var(--canvas-shadow-menu)",
|
|
},
|
|
children: [
|
|
(0, l.jsxs)("div", {
|
|
className: "flex items-center",
|
|
style: { gap: 16 },
|
|
children: [
|
|
(0, l.jsx)("button", {
|
|
type: "button",
|
|
onClick: r,
|
|
className:
|
|
"text-canvas-controls-text hover:bg-canvas-controls-hover flex shrink-0 items-center justify-center rounded-full transition-colors",
|
|
style: { width: 40, height: 40 },
|
|
children: (0, l.jsx)(h.Icon, {
|
|
icon: "lucide:x",
|
|
width: 22,
|
|
height: 22,
|
|
}),
|
|
}),
|
|
(0, l.jsx)("div", {
|
|
style: {
|
|
width: 1,
|
|
height: 24,
|
|
background: "var(--canvas-controls-border)",
|
|
},
|
|
}),
|
|
(0, l.jsx)("button", {
|
|
type: "button",
|
|
onClick: () => L(!S),
|
|
className: `text-canvas-controls-text flex shrink-0 items-center justify-center rounded-full transition-colors ${S ? "bg-canvas-controls-active" : "hover:bg-canvas-controls-hover"}`,
|
|
style: { width: 40, height: 40 },
|
|
children: (0, l.jsx)(g, { width: 20, height: 20 }),
|
|
}),
|
|
],
|
|
}),
|
|
(0, l.jsxs)("div", {
|
|
ref: U,
|
|
className: "relative shrink-0",
|
|
style: { width: n, height: 56, cursor: "pointer" },
|
|
onPointerDown: (t) => {
|
|
let i = Z(t.clientX),
|
|
a = e.current;
|
|
a && (a.currentTime = i);
|
|
},
|
|
children: [
|
|
(0, l.jsxs)("div", {
|
|
className:
|
|
"pointer-events-none absolute inset-0 overflow-hidden rounded-xl bg-black/50",
|
|
children: [
|
|
(0, l.jsx)("div", {
|
|
className: "absolute inset-0 flex",
|
|
children:
|
|
q.length > 0
|
|
? q.map((e) =>
|
|
(0, l.jsx)(
|
|
"div",
|
|
{
|
|
className: "h-full shrink-0",
|
|
style: { width: "8.333333333333334%" },
|
|
children: e
|
|
? (0, l.jsx)("img", {
|
|
src: e,
|
|
alt: "",
|
|
className:
|
|
"h-full w-full object-cover",
|
|
draggable: !1,
|
|
})
|
|
: (0, l.jsx)("div", {
|
|
className:
|
|
"h-full w-full bg-neutral-800",
|
|
}),
|
|
},
|
|
e,
|
|
),
|
|
)
|
|
: k.map((e) =>
|
|
(0, l.jsx)(
|
|
"div",
|
|
{
|
|
className: "h-full shrink-0 bg-neutral-800",
|
|
style: { width: "8.333333333333334%" },
|
|
},
|
|
e,
|
|
),
|
|
),
|
|
}),
|
|
j &&
|
|
i > 0 &&
|
|
(0, l.jsx)("div", {
|
|
className: "absolute inset-0",
|
|
children: Array.from(
|
|
{ length: Math.floor(2 * i) },
|
|
(e, t) => (t + 1) * 0.5,
|
|
)
|
|
.filter((e) => e < i)
|
|
.map((e) =>
|
|
(0, l.jsx)(
|
|
"div",
|
|
{
|
|
className: "absolute bottom-0 top-0",
|
|
style: {
|
|
left: `${(e / i) * 100}%`,
|
|
width: 1,
|
|
background: "rgba(255, 255, 255, 0.6)",
|
|
},
|
|
},
|
|
e,
|
|
),
|
|
),
|
|
}),
|
|
(0, l.jsx)("div", {
|
|
className: "absolute bottom-0 left-0 top-0",
|
|
style: {
|
|
width: Q * n,
|
|
background: "rgba(0, 0, 0, 0.6)",
|
|
},
|
|
}),
|
|
(0, l.jsx)("div", {
|
|
className: "absolute bottom-0 right-0 top-0",
|
|
style: {
|
|
width: (1 - K) * n,
|
|
background: "rgba(0, 0, 0, 0.6)",
|
|
},
|
|
}),
|
|
],
|
|
}),
|
|
(0, l.jsx)("div", {
|
|
className: "pointer-events-none absolute box-border",
|
|
style: {
|
|
left: X(w) - 16,
|
|
width: X(C) - X(w) + 32,
|
|
top: 0,
|
|
bottom: 0,
|
|
border: "2px solid #fff",
|
|
borderRadius: 12,
|
|
zIndex: 3,
|
|
},
|
|
}),
|
|
(0, l.jsx)("div", {
|
|
className: "absolute cursor-grab active:cursor-grabbing",
|
|
style: {
|
|
left: X(w),
|
|
right: n - X(C),
|
|
top: 0,
|
|
bottom: 0,
|
|
zIndex: 2,
|
|
},
|
|
onPointerDown: ee,
|
|
}),
|
|
(0, l.jsx)("div", {
|
|
className:
|
|
"absolute bottom-0 top-0 flex cursor-col-resize items-center justify-center",
|
|
style: {
|
|
left: X(w) - 16,
|
|
width: 16,
|
|
background: "#fff",
|
|
borderRadius: "10px 0 0 10px",
|
|
zIndex: 4,
|
|
},
|
|
onPointerDown: J("start"),
|
|
children: (0, l.jsx)("div", {
|
|
style: {
|
|
width: 2,
|
|
height: 16,
|
|
borderRadius: 1,
|
|
background: "#1A1A1A",
|
|
},
|
|
}),
|
|
}),
|
|
(0, l.jsx)("div", {
|
|
className:
|
|
"absolute bottom-0 top-0 flex cursor-col-resize items-center justify-center",
|
|
style: {
|
|
left: X(C),
|
|
width: 16,
|
|
background: "#fff",
|
|
borderRadius: "0 10px 10px 0",
|
|
zIndex: 4,
|
|
},
|
|
onPointerDown: J("end"),
|
|
children: (0, l.jsx)("div", {
|
|
style: {
|
|
width: 2,
|
|
height: 16,
|
|
borderRadius: 1,
|
|
background: "#1A1A1A",
|
|
},
|
|
}),
|
|
}),
|
|
((f = (b = X(C) - X(w)) < 60 ? Math.max(10, b / 5) : 14),
|
|
(0, l.jsx)("div", {
|
|
className:
|
|
"pointer-events-none absolute flex items-center justify-center",
|
|
style: {
|
|
left: X(w),
|
|
right: n - X(C),
|
|
top: 0,
|
|
bottom: 0,
|
|
zIndex: 5,
|
|
},
|
|
children: (0, l.jsx)("div", {
|
|
className:
|
|
"flex items-center justify-center whitespace-nowrap rounded-[12px]",
|
|
style: {
|
|
background: "rgba(62, 43, 31, 0.85)",
|
|
backdropFilter: "blur(4px)",
|
|
padding: `${b < 60 ? 2 : 6}px ${b < 60 ? 4 : 16}px`,
|
|
},
|
|
children: (0, l.jsxs)("span", {
|
|
className: "font-semibold tabular-nums text-white",
|
|
style: { fontSize: f },
|
|
children: [Y.toFixed(2), " s"],
|
|
}),
|
|
}),
|
|
})),
|
|
(0, l.jsx)("div", {
|
|
ref: H,
|
|
className: "pointer-events-none absolute bottom-0 top-0",
|
|
style: {
|
|
left: 0,
|
|
width: 2,
|
|
background: "#fff",
|
|
boxShadow: "0 0 4px rgba(0, 0, 0, 0.5)",
|
|
zIndex: 6,
|
|
willChange: "transform",
|
|
},
|
|
}),
|
|
],
|
|
}),
|
|
(0, l.jsxs)("div", {
|
|
className: "flex items-center",
|
|
style: { gap: 16 },
|
|
children: [
|
|
(0, l.jsx)("button", {
|
|
type: "button",
|
|
onClick: () => D(!R),
|
|
className:
|
|
"text-canvas-controls-text hover:bg-canvas-controls-hover flex shrink-0 items-center justify-center rounded-full transition-colors",
|
|
style: { width: 40, height: 40 },
|
|
children: R
|
|
? (0, l.jsx)(v, { width: 20, height: 20 })
|
|
: (0, l.jsx)(E, { width: 20, height: 20 }),
|
|
}),
|
|
(0, l.jsx)("button", {
|
|
type: "button",
|
|
onClick: () => P(!N),
|
|
className:
|
|
"text-canvas-controls-text hover:bg-canvas-controls-hover flex shrink-0 items-center justify-center rounded-full transition-colors",
|
|
style: { width: 40, height: 40 },
|
|
children: N
|
|
? (0, l.jsx)(A, { width: 20, height: 20 })
|
|
: (0, l.jsx)(y, { width: 20, height: 20 }),
|
|
}),
|
|
(0, l.jsx)("button", {
|
|
type: "button",
|
|
onClick: () => a({ start: w, end: C }),
|
|
disabled: s,
|
|
className:
|
|
"flex shrink-0 items-center justify-center rounded-[16px] text-black transition-colors hover:bg-neutral-200 disabled:opacity-50",
|
|
style: { width: 48, height: 48, background: "#fff" },
|
|
children: s
|
|
? (0, l.jsxs)("svg", {
|
|
className: "h-5 w-5 animate-spin",
|
|
viewBox: "0 0 24 24",
|
|
fill: "none",
|
|
children: [
|
|
(0, l.jsx)("circle", {
|
|
className: "opacity-25",
|
|
cx: "12",
|
|
cy: "12",
|
|
r: "10",
|
|
stroke: "currentColor",
|
|
strokeWidth: "3",
|
|
}),
|
|
(0, l.jsx)("path", {
|
|
className: "opacity-75",
|
|
fill: "currentColor",
|
|
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z",
|
|
}),
|
|
],
|
|
})
|
|
: (0, l.jsx)(u.Icons.lucideCheck, {
|
|
width: 24,
|
|
height: 24,
|
|
}),
|
|
}),
|
|
],
|
|
}),
|
|
],
|
|
}),
|
|
s &&
|
|
null != p &&
|
|
(0, l.jsxs)("div", {
|
|
className: "px-2 pt-3",
|
|
children: [
|
|
(0, l.jsx)("div", {
|
|
className: "h-1 overflow-hidden rounded-full",
|
|
style: { background: "var(--canvas-controls-border)" },
|
|
children: (0, l.jsx)("div", {
|
|
className: "h-full rounded-full transition-all",
|
|
style: { width: `${p}%`, background: "#fff" },
|
|
}),
|
|
}),
|
|
(0, l.jsxs)("div", {
|
|
className: "mt-1 text-center text-[11px] opacity-40",
|
|
children: ["编码中 ", p, "%"],
|
|
}),
|
|
],
|
|
}),
|
|
],
|
|
});
|
|
}
|
|
e.s(["VideoClipBar", () => C], 419065);
|
|
let T = ({ size: e = 14, className: t = "" }) =>
|
|
(0, l.jsx)(u.Icons.VideoAddS, { width: e, height: e, className: t }),
|
|
M = ({ size: e = 14, className: t = "" }) =>
|
|
(0, l.jsx)(u.Icons.lucidePause, { width: e, height: e, className: t }),
|
|
_ = {
|
|
padding: "4px",
|
|
borderRadius: 12,
|
|
border: "0.5px solid var(--canvas-controls-border)",
|
|
background: "var(--canvas-controls-bg)",
|
|
boxShadow: "var(--canvas-shadow-dropdown)",
|
|
backdropFilter: "blur(16px)",
|
|
};
|
|
function S(e) {
|
|
e > 0 && e < 1 && (e = 1);
|
|
let t = Math.floor(e / 60),
|
|
i = Math.floor(e % 60);
|
|
return `${t}:${String(i).padStart(2, "0")}`;
|
|
}
|
|
function L({
|
|
onClipClick: e,
|
|
onDownloadClick: t,
|
|
onEnhanceClick: i,
|
|
onParseClick: a,
|
|
showParse: r = !0,
|
|
showEnhance: n = !0,
|
|
isParsing: o,
|
|
isDownloading: s,
|
|
onExpandClick: d,
|
|
}) {
|
|
return (0, l.jsx)("div", {
|
|
className: "flex w-max items-center",
|
|
children: (0, l.jsxs)("div", {
|
|
className: "flex items-center justify-center gap-1",
|
|
style: _,
|
|
children: [
|
|
e &&
|
|
(0, l.jsxs)("button", {
|
|
type: "button",
|
|
onClick: e,
|
|
className:
|
|
"text-canvas-controls-text hover:bg-canvas-controls-hover flex h-8 items-center justify-center gap-1 rounded-lg px-3 py-2 text-[13px] transition-colors",
|
|
children: [
|
|
(0, l.jsx)(u.Icons.scissors, {
|
|
width: 14,
|
|
height: 14,
|
|
className: "shrink-0",
|
|
}),
|
|
(0, l.jsx)("span", {
|
|
className: "whitespace-nowrap",
|
|
children: "剪辑",
|
|
}),
|
|
],
|
|
}),
|
|
n &&
|
|
(0, l.jsxs)("button", {
|
|
type: "button",
|
|
onClick: i,
|
|
className:
|
|
"text-canvas-controls-text hover:bg-canvas-controls-hover flex h-8 items-center justify-center gap-1 rounded-lg px-3 py-2 text-[13px] transition-colors",
|
|
children: [
|
|
(0, l.jsx)(u.Icons.Hd, { className: "h-4 w-4 shrink-0" }),
|
|
(0, l.jsx)("span", {
|
|
className: "whitespace-nowrap",
|
|
children: "高清",
|
|
}),
|
|
],
|
|
}),
|
|
r &&
|
|
(0, l.jsxs)("button", {
|
|
type: "button",
|
|
onClick: a,
|
|
disabled: o,
|
|
className:
|
|
"text-canvas-controls-text hover:bg-canvas-controls-hover flex h-8 items-center justify-center gap-1 rounded-lg px-3 py-2 text-[13px] transition-colors disabled:pointer-events-none disabled:opacity-50",
|
|
children: [
|
|
o
|
|
? (0, l.jsxs)("svg", {
|
|
className: "h-4 w-4 shrink-0 animate-spin",
|
|
viewBox: "0 0 24 24",
|
|
fill: "none",
|
|
children: [
|
|
(0, l.jsx)("circle", {
|
|
className: "opacity-25",
|
|
cx: "12",
|
|
cy: "12",
|
|
r: "10",
|
|
stroke: "currentColor",
|
|
strokeWidth: "3",
|
|
}),
|
|
(0, l.jsx)("path", {
|
|
className: "opacity-75",
|
|
fill: "currentColor",
|
|
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z",
|
|
}),
|
|
],
|
|
})
|
|
: (0, l.jsx)(u.Icons.grid2x2, {
|
|
className: "h-4 w-4 shrink-0",
|
|
}),
|
|
(0, l.jsx)("span", {
|
|
className: "whitespace-nowrap",
|
|
children: o ? "解析中" : "解析",
|
|
}),
|
|
],
|
|
}),
|
|
(0, l.jsx)("div", {
|
|
className: "mx-1 h-5",
|
|
style: {
|
|
width: 0,
|
|
borderLeft: "0.5px solid var(--canvas-controls-border)",
|
|
},
|
|
}),
|
|
(0, l.jsx)("button", {
|
|
type: "button",
|
|
onClick: t,
|
|
disabled: s,
|
|
"data-auth-download-trigger": "true",
|
|
className:
|
|
"text-canvas-controls-text hover:bg-canvas-controls-hover flex h-8 w-8 min-w-8 shrink-0 items-center justify-center rounded-lg transition-colors disabled:pointer-events-none disabled:opacity-50",
|
|
children: s
|
|
? (0, l.jsxs)("svg", {
|
|
className: "h-4 w-4 animate-spin",
|
|
viewBox: "0 0 24 24",
|
|
fill: "none",
|
|
children: [
|
|
(0, l.jsx)("circle", {
|
|
className: "opacity-25",
|
|
cx: "12",
|
|
cy: "12",
|
|
r: "10",
|
|
stroke: "currentColor",
|
|
strokeWidth: "3",
|
|
}),
|
|
(0, l.jsx)("path", {
|
|
className: "opacity-75",
|
|
fill: "currentColor",
|
|
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z",
|
|
}),
|
|
],
|
|
})
|
|
: (0, l.jsx)(u.Icons.download, { className: "h-4 w-4" }),
|
|
}),
|
|
(0, l.jsx)("button", {
|
|
type: "button",
|
|
onClick: d,
|
|
className:
|
|
"text-canvas-controls-text hover:bg-canvas-controls-hover flex h-8 w-8 min-w-8 shrink-0 items-center justify-center rounded-lg transition-colors",
|
|
children: (0, l.jsx)(u.Icons.BroadPicture, {
|
|
className: "h-4 w-4 shrink-0",
|
|
}),
|
|
}),
|
|
],
|
|
}),
|
|
});
|
|
}
|
|
function R({ currentTime: e, duration: t, onSeek: i }) {
|
|
let a = (0, d.useRef)(null),
|
|
[r, n] = (0, d.useState)(!1),
|
|
o = t > 0 ? e / t : 0,
|
|
s = (0, d.useCallback)(
|
|
(e) => {
|
|
let r = a.current;
|
|
if (!r || t <= 0) return;
|
|
let n = r.getBoundingClientRect();
|
|
i((Math.max(0, Math.min(e - n.left, n.width)) / n.width) * t);
|
|
},
|
|
[t, i],
|
|
),
|
|
u = (0, d.useCallback)(
|
|
(e) => {
|
|
e.stopPropagation(), n(!0), s(e.clientX);
|
|
},
|
|
[s],
|
|
);
|
|
(0, d.useEffect)(() => {
|
|
if (!r) return;
|
|
let e = (e) => s(e.clientX),
|
|
t = () => n(!1);
|
|
return (
|
|
window.addEventListener("mousemove", e),
|
|
window.addEventListener("mouseup", t),
|
|
() => {
|
|
window.removeEventListener("mousemove", e),
|
|
window.removeEventListener("mouseup", t);
|
|
}
|
|
);
|
|
}, [r, s]);
|
|
let c = (0, d.useCallback)(
|
|
(e) => {
|
|
e.stopPropagation(), s(e.clientX);
|
|
},
|
|
[s],
|
|
);
|
|
return (0, l.jsxs)("div", {
|
|
ref: a,
|
|
className: "nodrag relative flex-1 cursor-pointer",
|
|
style: { height: 14, display: "flex", alignItems: "center" },
|
|
onMouseDown: u,
|
|
onClick: c,
|
|
children: [
|
|
(0, l.jsx)("div", {
|
|
className: "absolute left-0 right-0 rounded-full",
|
|
style: {
|
|
height: 3,
|
|
background: "rgba(255, 255, 255, 0.3)",
|
|
top: "50%",
|
|
transform: "translateY(-50%)",
|
|
pointerEvents: "none",
|
|
},
|
|
}),
|
|
(0, l.jsx)("div", {
|
|
className: "absolute left-0 rounded-full",
|
|
style: {
|
|
height: 3,
|
|
background: "#fff",
|
|
width: `${100 * o}%`,
|
|
top: "50%",
|
|
transform: "translateY(-50%)",
|
|
pointerEvents: "none",
|
|
},
|
|
}),
|
|
(0, l.jsx)("div", {
|
|
className: "absolute rounded-full",
|
|
style: {
|
|
width: 10,
|
|
height: 10,
|
|
background: "#fff",
|
|
top: "50%",
|
|
left: `${100 * o}%`,
|
|
transform: "translate(-50%, -50%)",
|
|
boxShadow: "0 1px 3px rgba(0, 0, 0, 0.3)",
|
|
pointerEvents: "none",
|
|
},
|
|
}),
|
|
],
|
|
});
|
|
}
|
|
function D({ volume: e, muted: t, onVolumeChange: i, onToggleMute: a }) {
|
|
let r = (0, d.useRef)(null),
|
|
[n, o] = (0, d.useState)(!1),
|
|
[s, c] = (0, d.useState)(!1),
|
|
h = s || n,
|
|
m = t ? 0 : e,
|
|
p = (0, d.useCallback)(
|
|
(e) => {
|
|
let t = r.current;
|
|
if (!t) return;
|
|
let a = t.getBoundingClientRect();
|
|
i(Math.max(0, Math.min(a.bottom - e, a.height)) / a.height);
|
|
},
|
|
[i],
|
|
),
|
|
v = (0, d.useCallback)(
|
|
(e) => {
|
|
e.stopPropagation(), o(!0), p(e.clientY);
|
|
},
|
|
[p],
|
|
);
|
|
return (
|
|
(0, d.useEffect)(() => {
|
|
if (!n) return;
|
|
let e = (e) => p(e.clientY),
|
|
t = () => o(!1);
|
|
return (
|
|
window.addEventListener("mousemove", e),
|
|
window.addEventListener("mouseup", t),
|
|
() => {
|
|
window.removeEventListener("mousemove", e),
|
|
window.removeEventListener("mouseup", t);
|
|
}
|
|
);
|
|
}, [n, p]),
|
|
(0, l.jsxs)("div", {
|
|
className: "relative",
|
|
onMouseEnter: () => c(!0),
|
|
onMouseLeave: () => c(!1),
|
|
children: [
|
|
(0, l.jsx)("div", {
|
|
className:
|
|
"absolute bottom-full left-1/2 flex -translate-x-1/2 flex-col items-center pb-2 transition-all duration-200",
|
|
style: { opacity: +!!h, pointerEvents: h ? "auto" : "none" },
|
|
children: (0, l.jsxs)("div", {
|
|
className: "flex flex-col items-center rounded-lg",
|
|
style: {
|
|
background: "rgba(0, 0, 0, 0.75)",
|
|
padding: "6px 5px",
|
|
},
|
|
children: [
|
|
(0, l.jsx)("span", {
|
|
className: "mb-1 text-[10px] tabular-nums text-white",
|
|
children: Math.round(100 * m),
|
|
}),
|
|
(0, l.jsxs)("div", {
|
|
ref: r,
|
|
className: "relative cursor-pointer",
|
|
style: {
|
|
width: 16,
|
|
height: 80,
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
},
|
|
onMouseDown: v,
|
|
children: [
|
|
(0, l.jsx)("div", {
|
|
className: "absolute rounded-full",
|
|
style: {
|
|
width: 2,
|
|
top: 0,
|
|
bottom: 0,
|
|
background: "rgba(255, 255, 255, 0.3)",
|
|
left: "50%",
|
|
transform: "translateX(-50%)",
|
|
},
|
|
}),
|
|
(0, l.jsx)("div", {
|
|
className: "absolute rounded-full",
|
|
style: {
|
|
width: 2,
|
|
background: "#fff",
|
|
height: `${100 * m}%`,
|
|
bottom: 0,
|
|
left: "50%",
|
|
transform: "translateX(-50%)",
|
|
},
|
|
}),
|
|
(0, l.jsx)("div", {
|
|
className: "absolute rounded-full",
|
|
style: {
|
|
width: 8,
|
|
height: 8,
|
|
background: "#fff",
|
|
left: "50%",
|
|
bottom: `${100 * m}%`,
|
|
transform: "translate(-50%, 50%)",
|
|
boxShadow: "0 1px 2px rgba(0, 0, 0, 0.3)",
|
|
},
|
|
}),
|
|
],
|
|
}),
|
|
],
|
|
}),
|
|
}),
|
|
(0, l.jsx)("button", {
|
|
type: "button",
|
|
onClick: a,
|
|
className:
|
|
"flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-white transition-colors hover:bg-black/50",
|
|
children:
|
|
t || 0 === e
|
|
? (0, l.jsx)(u.Icons.OffAudio, { width: 14, height: 14 })
|
|
: (0, l.jsx)(u.Icons.Audio, { width: 14, height: 14 }),
|
|
}),
|
|
],
|
|
})
|
|
);
|
|
}
|
|
function N({
|
|
isPlaying: e,
|
|
currentTime: t,
|
|
duration: i,
|
|
volume: a = 1,
|
|
muted: r = !0,
|
|
hasAudio: n = !0,
|
|
onPlayPause: o,
|
|
onSeek: s,
|
|
onVolumeChange: c,
|
|
onToggleMute: h,
|
|
onScreenshot: m,
|
|
onCaptureFirstFrame: p,
|
|
onCaptureLastFrame: v,
|
|
onMouseEnter: b,
|
|
onMouseLeave: g,
|
|
disableScreenShot: f = !1,
|
|
}) {
|
|
let [E, w] = (0, d.useState)(!1);
|
|
return (0, l.jsxs)("div", {
|
|
className: "nodrag absolute bottom-0 left-0 right-0",
|
|
style: { zIndex: 10 },
|
|
onMouseEnter: b,
|
|
onMouseLeave: g,
|
|
children: [
|
|
(0, l.jsx)("div", {
|
|
className: "pointer-events-none absolute bottom-0 left-0 right-0",
|
|
style: {
|
|
height: 80,
|
|
background:
|
|
"linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5))",
|
|
},
|
|
}),
|
|
(0, l.jsxs)("div", {
|
|
className: "relative flex items-center gap-2 px-3 pb-2.5 pt-8",
|
|
children: [
|
|
(0, l.jsx)("button", {
|
|
type: "button",
|
|
onClick: o,
|
|
className:
|
|
"flex h-7 w-7 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-black/50",
|
|
children: e
|
|
? (0, l.jsx)(M, { size: 16, className: "text-white" })
|
|
: (0, l.jsx)(T, { size: 16, className: "text-white" }),
|
|
}),
|
|
(0, l.jsx)("span", {
|
|
className: "shrink-0 text-xs tabular-nums text-white",
|
|
children: S(t),
|
|
}),
|
|
(0, l.jsx)(R, { currentTime: t, duration: i, onSeek: s }),
|
|
(0, l.jsx)("span", {
|
|
className: "shrink-0 text-xs tabular-nums text-white",
|
|
children: i > 0 ? S(i) : "--:--",
|
|
}),
|
|
n &&
|
|
h &&
|
|
c &&
|
|
(0, l.jsx)(D, {
|
|
volume: a,
|
|
muted: r,
|
|
onVolumeChange: c,
|
|
onToggleMute: h,
|
|
}),
|
|
!f &&
|
|
m &&
|
|
(0, l.jsxs)("div", {
|
|
className: "relative",
|
|
onMouseEnter: () => w(!0),
|
|
onMouseLeave: () => w(!1),
|
|
children: [
|
|
(p || v) &&
|
|
(0, l.jsx)("div", {
|
|
className: `absolute bottom-full right-0 z-30 flex justify-end pb-2 transition-opacity ${E ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"}`,
|
|
children: (0, l.jsxs)("div", {
|
|
className:
|
|
"min-w-[104px] overflow-hidden rounded-lg border border-white/10 bg-[rgba(26,26,26,0.95)] p-1 shadow-[0_8px_16px_rgba(0,0,0,0.25)] backdrop-blur-xl",
|
|
onClick: (e) => e.stopPropagation(),
|
|
children: [
|
|
p &&
|
|
(0, l.jsx)("button", {
|
|
type: "button",
|
|
onClick: p,
|
|
className:
|
|
"flex h-7 w-full items-center justify-start rounded-md px-2 text-xs text-white/90 transition-colors hover:bg-white/10",
|
|
children: "截取首帧",
|
|
}),
|
|
v &&
|
|
(0, l.jsx)("button", {
|
|
type: "button",
|
|
onClick: v,
|
|
className:
|
|
"flex h-7 w-full items-center justify-start rounded-md px-2 text-xs text-white/90 transition-colors hover:bg-white/10",
|
|
children: "截取尾帧",
|
|
}),
|
|
],
|
|
}),
|
|
}),
|
|
(0, l.jsx)("div", {
|
|
className: `pointer-events-none absolute right-full top-1/2 z-30 mr-2 -translate-y-1/2 whitespace-nowrap rounded-md border border-white/10 bg-[rgba(26,26,26,0.95)] px-2 py-1 text-[11px] text-white/85 shadow-[0_4px_10px_rgba(0,0,0,0.2)] transition-opacity ${E ? "opacity-100" : "opacity-0"}`,
|
|
children: "点击截取当前帧",
|
|
}),
|
|
(0, l.jsx)("button", {
|
|
type: "button",
|
|
onClick: m,
|
|
className:
|
|
"flex h-7 w-7 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-black/50",
|
|
children: (0, l.jsx)(u.Icons.camera, {
|
|
width: 16,
|
|
height: 16,
|
|
className: "text-white",
|
|
}),
|
|
}),
|
|
],
|
|
}),
|
|
],
|
|
}),
|
|
],
|
|
});
|
|
}
|
|
e.s(
|
|
[
|
|
"FLOATING_TOOLBAR_STYLE",
|
|
0,
|
|
_,
|
|
"PauseIcon",
|
|
0,
|
|
M,
|
|
"PlayIcon",
|
|
0,
|
|
T,
|
|
"ProgressSlider",
|
|
() => R,
|
|
"VideoNodeToolbar",
|
|
() => L,
|
|
"VideoPlayerBar",
|
|
() => N,
|
|
"VolumeControl",
|
|
() => D,
|
|
"formatTimeCompact",
|
|
() => S,
|
|
],
|
|
174008,
|
|
);
|
|
var P = e.i(802182),
|
|
j = e.i(386598);
|
|
async function O(e, t) {
|
|
let i = await (0, P.createThirdAsset)({
|
|
assetUrl: e,
|
|
assetType: t,
|
|
}).catch(() => void 0);
|
|
return i
|
|
? (j.useThirdAssetStore.setState((e) =>
|
|
e.list.some((e) => e.uuid === i.uuid)
|
|
? e
|
|
: { list: [i, ...e.list] },
|
|
),
|
|
i.uuid)
|
|
: null;
|
|
}
|
|
async function U(e, t) {
|
|
let i = new Map(),
|
|
a = new Set(e);
|
|
for (let e = 0; e < 60 && a.size > 0; e++) {
|
|
let e;
|
|
if (
|
|
t?.aborted ||
|
|
(await new Promise((e) => setTimeout(e, 3e3)), t?.aborted)
|
|
)
|
|
break;
|
|
try {
|
|
e = await (0, P.checkThirdAssets)([...a]);
|
|
} catch {
|
|
for (let e of a) i.set(e, { status: 2 });
|
|
a.clear();
|
|
break;
|
|
}
|
|
for (let t of (j.useThirdAssetStore.getState().updateAssetFromCheck(e),
|
|
e))
|
|
a.has(t.uuid) &&
|
|
t.found &&
|
|
(1 === t.status && t.assetId
|
|
? (i.set(t.uuid, { assetId: t.assetId, status: 1 }),
|
|
a.delete(t.uuid))
|
|
: 2 === t.status &&
|
|
(i.set(t.uuid, { status: 2 }), a.delete(t.uuid)));
|
|
}
|
|
for (let e of a) i.has(e) || i.set(e, { status: 0 });
|
|
return i;
|
|
}
|
|
e.s(
|
|
["createComplianceAsset", () => O, "pollComplianceUntilDone", () => U],
|
|
978783,
|
|
);
|
|
};
|
|
|
|
export default moduleFactory;
|