@scaleflex/uploader 0.2.2 → 0.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/file-item.d.ts.map +1 -1
- package/dist/components/file-list.d.ts.map +1 -1
- package/dist/components/success-card.d.ts +8 -0
- package/dist/components/success-card.d.ts.map +1 -1
- package/dist/define.cjs +1 -1
- package/dist/define.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/dist/{provider-browser-DajdSDoL.cjs → provider-browser-YA7MCWl4.cjs} +1 -1
- package/dist/{provider-browser-DJ2LHNd-.js → provider-browser-ZgbnfTHX.js} +1 -1
- package/dist/react.cjs +1 -1
- package/dist/react.d.ts +12 -0
- package/dist/react.d.ts.map +1 -1
- package/dist/react.js +95 -60
- package/dist/{search-provider-browser-BM-foEWT.cjs → search-provider-browser-C0yqcOmH.cjs} +1 -1
- package/dist/{search-provider-browser-CIH8w0aj.js → search-provider-browser-Dywv08pq.js} +1 -1
- package/dist/{sfx-uploader-CpKFlkgS.cjs → sfx-uploader-D1QE07Cn.cjs} +378 -117
- package/dist/{sfx-uploader-CR48BiYQ.js → sfx-uploader-DfRa5s6H.js} +838 -538
- package/dist/sfx-uploader.d.ts +22 -0
- package/dist/sfx-uploader.d.ts.map +1 -1
- package/dist/store/store.types.d.ts +1 -0
- package/dist/store/store.types.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { property as b, state as g, query as
|
|
3
|
-
import { unsafeSVG as
|
|
4
|
-
import { unsafeHTML as
|
|
5
|
-
class
|
|
1
|
+
import { LitElement as P, css as S, svg as M, html as l, nothing as p, render as ke } from "lit";
|
|
2
|
+
import { property as b, state as g, query as Fe } from "lit/decorators.js";
|
|
3
|
+
import { unsafeSVG as F } from "lit/directives/unsafe-svg.js";
|
|
4
|
+
import { unsafeHTML as T } from "lit/directives/unsafe-html.js";
|
|
5
|
+
class je {
|
|
6
6
|
constructor(e) {
|
|
7
7
|
this.listeners = /* @__PURE__ */ new Set(), this._notifying = !1, this._pendingState = null, this.state = e;
|
|
8
8
|
}
|
|
@@ -33,24 +33,24 @@ class Fe {
|
|
|
33
33
|
this.listeners.clear();
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
|
-
function
|
|
36
|
+
function z(a, e, t) {
|
|
37
37
|
const i = a.getState().files, r = i.get(e);
|
|
38
38
|
if (!r) return;
|
|
39
39
|
const o = new Map(i);
|
|
40
40
|
o.set(e, { ...r, ...t }), a.setState({ files: o });
|
|
41
41
|
}
|
|
42
|
-
function
|
|
42
|
+
function I(a, e) {
|
|
43
43
|
const t = new Map(a.getState().files);
|
|
44
44
|
t.set(e.id, e), a.setState({ files: t });
|
|
45
45
|
}
|
|
46
|
-
function
|
|
46
|
+
function Ce(a, e) {
|
|
47
47
|
const t = a.getState().files;
|
|
48
48
|
if (!t.has(e)) return;
|
|
49
49
|
const i = new Map(t);
|
|
50
50
|
i.delete(e), a.setState({ files: i });
|
|
51
51
|
}
|
|
52
|
-
function
|
|
53
|
-
return new
|
|
52
|
+
function Oe() {
|
|
53
|
+
return new je({
|
|
54
54
|
files: /* @__PURE__ */ new Map(),
|
|
55
55
|
queueConfig: {
|
|
56
56
|
concurrency: 3,
|
|
@@ -99,7 +99,7 @@ class Me {
|
|
|
99
99
|
(e = this.unsubscribe) == null || e.call(this);
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
|
-
function
|
|
102
|
+
function Te(a, e) {
|
|
103
103
|
const t = new XMLHttpRequest();
|
|
104
104
|
let i = !1;
|
|
105
105
|
const o = `${e.apiBase.replace(/\/+$/, "")}/v4/files?folder=${encodeURIComponent(e.folder)}`;
|
|
@@ -117,7 +117,7 @@ function Oe(a, e) {
|
|
|
117
117
|
e.onError(new Error(`Invalid JSON response (HTTP ${t.status})`));
|
|
118
118
|
return;
|
|
119
119
|
}
|
|
120
|
-
t.status >= 200 && t.status < 300 && n.status === "success" ? e.onComplete(n) : e.onError(new Error(n.msg || `Upload failed (HTTP ${t.status})`));
|
|
120
|
+
t.status >= 200 && t.status < 300 && n.status === "success" ? e.onComplete(n) : e.onError(new Error(n.hint || n.msg || `Upload failed (HTTP ${t.status})`));
|
|
121
121
|
}), t.addEventListener("error", () => {
|
|
122
122
|
i || e.onError(new Error("Network error — check your connection"));
|
|
123
123
|
}), t.addEventListener("timeout", () => {
|
|
@@ -153,7 +153,7 @@ function Be(a, e) {
|
|
|
153
153
|
e.onError(new Error(`Invalid JSON response (HTTP ${t.status})`));
|
|
154
154
|
return;
|
|
155
155
|
}
|
|
156
|
-
t.status >= 200 && t.status < 300 && n.status === "success" ? e.onComplete(n) : e.onError(new Error(n.msg || `Upload failed (HTTP ${t.status})`));
|
|
156
|
+
t.status >= 200 && t.status < 300 && n.status === "success" ? e.onComplete(n) : e.onError(new Error(n.hint || n.msg || `Upload failed (HTTP ${t.status})`));
|
|
157
157
|
}), t.addEventListener("error", () => {
|
|
158
158
|
i || e.onError(new Error("Network error — check your connection"));
|
|
159
159
|
}), t.addEventListener("timeout", () => {
|
|
@@ -171,14 +171,14 @@ function Be(a, e) {
|
|
|
171
171
|
}
|
|
172
172
|
};
|
|
173
173
|
}
|
|
174
|
-
function
|
|
174
|
+
function te(a) {
|
|
175
175
|
return {
|
|
176
176
|
Accept: "application/json",
|
|
177
177
|
"Content-Type": "application/json",
|
|
178
178
|
"uppy-auth-token": a
|
|
179
179
|
};
|
|
180
180
|
}
|
|
181
|
-
function
|
|
181
|
+
function V(a) {
|
|
182
182
|
return a.replace(/\/+$/, "");
|
|
183
183
|
}
|
|
184
184
|
const Re = {
|
|
@@ -193,14 +193,14 @@ const Re = {
|
|
|
193
193
|
function K(a) {
|
|
194
194
|
return Re[a] ?? a;
|
|
195
195
|
}
|
|
196
|
-
function
|
|
197
|
-
const t =
|
|
196
|
+
function mt(a, e) {
|
|
197
|
+
const t = V(a), i = btoa(JSON.stringify({ origin: window.location.origin })), r = K(e);
|
|
198
198
|
return `${t}/${r}/connect?state=${encodeURIComponent(i)}`;
|
|
199
199
|
}
|
|
200
|
-
async function
|
|
201
|
-
const r =
|
|
200
|
+
async function wt(a, e, t, i = "") {
|
|
201
|
+
const r = V(a), o = i ? `/${i}` : "", s = K(e), n = await fetch(`${r}/${s}/list${o}`, {
|
|
202
202
|
method: "GET",
|
|
203
|
-
headers:
|
|
203
|
+
headers: te(t),
|
|
204
204
|
credentials: "same-origin"
|
|
205
205
|
});
|
|
206
206
|
if (n.status === 401)
|
|
@@ -211,10 +211,10 @@ async function mt(a, e, t, i = "") {
|
|
|
211
211
|
}
|
|
212
212
|
return n.json();
|
|
213
213
|
}
|
|
214
|
-
async function
|
|
215
|
-
const i =
|
|
214
|
+
async function yt(a, e, t) {
|
|
215
|
+
const i = V(a), r = await fetch(`${i}/${t}`, {
|
|
216
216
|
method: "GET",
|
|
217
|
-
headers:
|
|
217
|
+
headers: te(e),
|
|
218
218
|
credentials: "same-origin"
|
|
219
219
|
});
|
|
220
220
|
if (r.status === 401)
|
|
@@ -225,8 +225,8 @@ async function wt(a, e, t) {
|
|
|
225
225
|
}
|
|
226
226
|
return r.json();
|
|
227
227
|
}
|
|
228
|
-
async function
|
|
229
|
-
const r =
|
|
228
|
+
async function _t(a, e, t, i) {
|
|
229
|
+
const r = V(a), o = K(e), s = i ? `q=${encodeURIComponent(t)}&${i}` : `q=${encodeURIComponent(t)}`, n = await fetch(`${r}/search/${o}/list?${s}`, {
|
|
230
230
|
method: "GET",
|
|
231
231
|
headers: {
|
|
232
232
|
Accept: "application/json",
|
|
@@ -240,10 +240,10 @@ async function yt(a, e, t, i) {
|
|
|
240
240
|
}
|
|
241
241
|
return n.json();
|
|
242
242
|
}
|
|
243
|
-
async function
|
|
244
|
-
const s =
|
|
243
|
+
async function Le(a, e, t, i, r, o = !1) {
|
|
244
|
+
const s = V(a), n = K(e), d = o ? `${s}/search/${n}/get/${i}` : `${s}/${n}/get/${i}`, c = o ? { Accept: "application/json", "Content-Type": "application/json" } : te(t), u = await fetch(d, {
|
|
245
245
|
method: "POST",
|
|
246
|
-
headers:
|
|
246
|
+
headers: c,
|
|
247
247
|
credentials: "same-origin",
|
|
248
248
|
body: JSON.stringify({
|
|
249
249
|
...r,
|
|
@@ -260,15 +260,15 @@ async function Te(a, e, t, i, r, o = !1) {
|
|
|
260
260
|
}
|
|
261
261
|
return u.json();
|
|
262
262
|
}
|
|
263
|
-
async function
|
|
264
|
-
const i =
|
|
263
|
+
async function kt(a, e, t) {
|
|
264
|
+
const i = V(a), r = K(e), o = await fetch(`${i}/${r}/logout`, {
|
|
265
265
|
method: "GET",
|
|
266
|
-
headers:
|
|
266
|
+
headers: te(t),
|
|
267
267
|
credentials: "same-origin"
|
|
268
268
|
});
|
|
269
269
|
return o.ok ? o.json() : { ok: !1, revoked: !1 };
|
|
270
270
|
}
|
|
271
|
-
function
|
|
271
|
+
function Ae(a) {
|
|
272
272
|
var r;
|
|
273
273
|
const t = ((r = /^(?:https?:\/\/|\/\/)?(?:[^@\n]+@)?(?:www\.)?([^\n]+)/i.exec(a)) == null ? void 0 : r[1]) ?? a;
|
|
274
274
|
return `${location.protocol === "https:" ? "wss" : "ws"}://${t}`;
|
|
@@ -278,7 +278,7 @@ class le extends Error {
|
|
|
278
278
|
super("Authentication expired"), this.name = "AuthExpiredError";
|
|
279
279
|
}
|
|
280
280
|
}
|
|
281
|
-
function
|
|
281
|
+
function Ie(a, e) {
|
|
282
282
|
const t = a.remoteInfo;
|
|
283
283
|
if (!t)
|
|
284
284
|
return e.onError(new Error("remoteInfo is required for companion upload")), { abort() {
|
|
@@ -287,42 +287,42 @@ function Ae(a, e) {
|
|
|
287
287
|
const s = `${e.apiBase.replace(/\/+$/, "")}/v4/files?folder=${encodeURIComponent(e.folder)}`, n = {};
|
|
288
288
|
a.meta && Object.keys(a.meta).length > 0 && Object.assign(n, a.meta), a.tags && a.tags.length > 0 && (n.tags = a.tags);
|
|
289
289
|
const d = !t.token;
|
|
290
|
-
return
|
|
290
|
+
return Le(t.companionUrl, t.provider, t.token, t.requestPath, {
|
|
291
291
|
fileId: t.fileId,
|
|
292
292
|
endpoint: s,
|
|
293
293
|
headers: e.authHeaders,
|
|
294
294
|
size: t.size,
|
|
295
295
|
metadata: Object.keys(n).length > 0 ? n : void 0
|
|
296
|
-
}, d).then((
|
|
296
|
+
}, d).then((c) => {
|
|
297
297
|
if (i) return;
|
|
298
|
-
const h = `${
|
|
298
|
+
const h = `${Ae(t.companionUrl)}/api/${c.token}`;
|
|
299
299
|
try {
|
|
300
300
|
r = new WebSocket(h);
|
|
301
301
|
} catch {
|
|
302
302
|
e.onError(new Error("Failed to connect to upload progress channel"));
|
|
303
303
|
return;
|
|
304
304
|
}
|
|
305
|
-
r.onmessage = (
|
|
306
|
-
var
|
|
305
|
+
r.onmessage = (x) => {
|
|
306
|
+
var f, m, _;
|
|
307
307
|
if (!i)
|
|
308
308
|
try {
|
|
309
|
-
const
|
|
310
|
-
switch (
|
|
309
|
+
const w = JSON.parse(x.data);
|
|
310
|
+
switch (w.action) {
|
|
311
311
|
case "progress": {
|
|
312
|
-
const
|
|
313
|
-
e.onProgress(
|
|
312
|
+
const y = w.payload, k = y.bytesUploaded ?? 0, D = y.bytesTotal ?? (t.size || 1);
|
|
313
|
+
e.onProgress(k, D);
|
|
314
314
|
break;
|
|
315
315
|
}
|
|
316
316
|
case "success": {
|
|
317
|
-
const
|
|
318
|
-
if (r == null || r.close(), (
|
|
317
|
+
const y = w.payload;
|
|
318
|
+
if (r == null || r.close(), (f = y.response) != null && f.responseText)
|
|
319
319
|
try {
|
|
320
|
-
const
|
|
321
|
-
if (
|
|
322
|
-
e.onComplete(
|
|
320
|
+
const k = JSON.parse(y.response.responseText);
|
|
321
|
+
if (k.status === "success") {
|
|
322
|
+
e.onComplete(k);
|
|
323
323
|
return;
|
|
324
324
|
}
|
|
325
|
-
e.onError(new Error(
|
|
325
|
+
e.onError(new Error(k.msg || "Upload failed"));
|
|
326
326
|
return;
|
|
327
327
|
} catch {
|
|
328
328
|
}
|
|
@@ -331,15 +331,15 @@ function Ae(a, e) {
|
|
|
331
331
|
}
|
|
332
332
|
case "error": {
|
|
333
333
|
r == null || r.close();
|
|
334
|
-
const
|
|
335
|
-
let
|
|
336
|
-
if ((
|
|
334
|
+
const y = w.payload;
|
|
335
|
+
let k = ((m = y.error) == null ? void 0 : m.message) || "Upload failed";
|
|
336
|
+
if ((_ = y.response) != null && _.responseText)
|
|
337
337
|
try {
|
|
338
|
-
const
|
|
339
|
-
|
|
338
|
+
const D = JSON.parse(y.response.responseText);
|
|
339
|
+
k = D.hint || D.msg || D.message || k;
|
|
340
340
|
} catch {
|
|
341
341
|
}
|
|
342
|
-
e.onError(new Error(
|
|
342
|
+
e.onError(new Error(k));
|
|
343
343
|
break;
|
|
344
344
|
}
|
|
345
345
|
}
|
|
@@ -350,8 +350,8 @@ function Ae(a, e) {
|
|
|
350
350
|
}, r.onclose = () => {
|
|
351
351
|
r = null;
|
|
352
352
|
};
|
|
353
|
-
}).catch((
|
|
354
|
-
i || e.onError(
|
|
353
|
+
}).catch((c) => {
|
|
354
|
+
i || e.onError(c instanceof Error ? c : new Error(String(c)));
|
|
355
355
|
}), {
|
|
356
356
|
abort() {
|
|
357
357
|
if (i = !0, r) {
|
|
@@ -364,7 +364,7 @@ function Ae(a, e) {
|
|
|
364
364
|
}
|
|
365
365
|
};
|
|
366
366
|
}
|
|
367
|
-
class
|
|
367
|
+
class He {
|
|
368
368
|
constructor(e, t) {
|
|
369
369
|
this.activeUploads = /* @__PURE__ */ new Map(), this.retryTimers = /* @__PURE__ */ new Map(), this.unsubscribe = null, this.store = e, this.config = t;
|
|
370
370
|
}
|
|
@@ -382,7 +382,7 @@ class Ie {
|
|
|
382
382
|
const { files: e } = this.store.getState();
|
|
383
383
|
let t = !1;
|
|
384
384
|
for (const i of e.values())
|
|
385
|
-
i.status === "idle" ? (
|
|
385
|
+
i.status === "idle" ? (z(this.store, i.id, { status: "queued" }), t = !0) : i.status === "queued" && (t = !0);
|
|
386
386
|
t && (this.store.setState({ isUploading: !0 }), this.processQueue());
|
|
387
387
|
}
|
|
388
388
|
/**
|
|
@@ -390,7 +390,7 @@ class Ie {
|
|
|
390
390
|
*/
|
|
391
391
|
retryFile(e) {
|
|
392
392
|
const t = this.store.getState().files.get(e);
|
|
393
|
-
!t || t.status !== "error" && t.status !== "failed" || (
|
|
393
|
+
!t || t.status !== "error" && t.status !== "failed" || (z(this.store, e, {
|
|
394
394
|
status: "queued",
|
|
395
395
|
error: null,
|
|
396
396
|
progress: 0,
|
|
@@ -404,7 +404,7 @@ class Ie {
|
|
|
404
404
|
retryAll() {
|
|
405
405
|
const { files: e } = this.store.getState();
|
|
406
406
|
for (const t of e.values())
|
|
407
|
-
(t.status === "error" || t.status === "failed") &&
|
|
407
|
+
(t.status === "error" || t.status === "failed") && z(this.store, t.id, {
|
|
408
408
|
status: "queued",
|
|
409
409
|
error: null,
|
|
410
410
|
progress: 0,
|
|
@@ -418,7 +418,7 @@ class Ie {
|
|
|
418
418
|
*/
|
|
419
419
|
cancelFile(e) {
|
|
420
420
|
const t = this.store.getState().files.get(e);
|
|
421
|
-
!t ||
|
|
421
|
+
!t || !$e(t.status) || (this.abortUpload(e), z(this.store, e, { status: "cancelled" }));
|
|
422
422
|
}
|
|
423
423
|
/**
|
|
424
424
|
* Cancel all active/queued uploads.
|
|
@@ -426,7 +426,7 @@ class Ie {
|
|
|
426
426
|
cancelAll() {
|
|
427
427
|
const { files: e } = this.store.getState();
|
|
428
428
|
for (const t of e.values())
|
|
429
|
-
|
|
429
|
+
$e(t.status) && (this.abortUpload(t.id), z(this.store, t.id, { status: "cancelled" }));
|
|
430
430
|
this.store.setState({ isUploading: !1 });
|
|
431
431
|
}
|
|
432
432
|
/**
|
|
@@ -457,7 +457,7 @@ class Ie {
|
|
|
457
457
|
this.startUpload(n);
|
|
458
458
|
}
|
|
459
459
|
startUpload(e) {
|
|
460
|
-
|
|
460
|
+
z(this.store, e.id, { status: "uploading", error: null });
|
|
461
461
|
let t = 0, i = Date.now(), r = 0;
|
|
462
462
|
const o = {
|
|
463
463
|
apiBase: this.config.apiBase,
|
|
@@ -465,21 +465,21 @@ class Ie {
|
|
|
465
465
|
folder: this.store.getState().targetFolder,
|
|
466
466
|
onComplete: (d) => this.handleComplete(e.id, d),
|
|
467
467
|
onError: (d) => this.handleError(e.id, d)
|
|
468
|
-
}, s = (d,
|
|
468
|
+
}, s = (d, c) => {
|
|
469
469
|
const u = Date.now(), h = (u - i) / 1e3;
|
|
470
470
|
if (h > 0) {
|
|
471
|
-
const
|
|
472
|
-
r = r === 0 ?
|
|
471
|
+
const f = (d - t) / h;
|
|
472
|
+
r = r === 0 ? f : 0.3 * f + 0.7 * r;
|
|
473
473
|
}
|
|
474
474
|
t = d, i = u;
|
|
475
|
-
const
|
|
476
|
-
|
|
475
|
+
const x = c > 0 ? Math.min(d / c * 100, 100) : 0;
|
|
476
|
+
z(this.store, e.id, { progress: x, bytesUploaded: d, speed: r }), this.updateTotalProgress();
|
|
477
477
|
};
|
|
478
478
|
let n;
|
|
479
|
-
e.remoteInfo ? n =
|
|
479
|
+
e.remoteInfo ? n = Ie(e, { ...o, onProgress: s }) : e.remoteUrl ? n = Be(e, o) : n = Te(e, { ...o, onProgress: s }), this.activeUploads.set(e.id, n);
|
|
480
480
|
}
|
|
481
481
|
handleComplete(e, t) {
|
|
482
|
-
this.activeUploads.delete(e),
|
|
482
|
+
this.activeUploads.delete(e), z(this.store, e, {
|
|
483
483
|
status: "complete",
|
|
484
484
|
progress: 100,
|
|
485
485
|
response: t
|
|
@@ -495,17 +495,17 @@ class Ie {
|
|
|
495
495
|
r.baseDelay * Math.pow(r.backoffFactor, i.retryCount),
|
|
496
496
|
r.maxDelay
|
|
497
497
|
);
|
|
498
|
-
|
|
498
|
+
z(this.store, e, {
|
|
499
499
|
status: "retrying",
|
|
500
500
|
error: t.message,
|
|
501
501
|
retryCount: o
|
|
502
502
|
});
|
|
503
503
|
const n = setTimeout(() => {
|
|
504
|
-
this.retryTimers.delete(e),
|
|
504
|
+
this.retryTimers.delete(e), z(this.store, e, { status: "queued" }), this.processQueue();
|
|
505
505
|
}, s);
|
|
506
506
|
this.retryTimers.set(e, n);
|
|
507
507
|
} else
|
|
508
|
-
|
|
508
|
+
z(this.store, e, {
|
|
509
509
|
status: "failed",
|
|
510
510
|
error: t.message
|
|
511
511
|
}), this.checkAllComplete(), this.processQueue();
|
|
@@ -525,7 +525,7 @@ class Ie {
|
|
|
525
525
|
totalBytes: t,
|
|
526
526
|
totalBytesUploaded: i,
|
|
527
527
|
totalSpeed: r,
|
|
528
|
-
totalProgress: t > 0 ? i / t * 100 : 0
|
|
528
|
+
totalProgress: t > 0 ? Math.min(i / t * 100, 100) : 0
|
|
529
529
|
});
|
|
530
530
|
}
|
|
531
531
|
checkAllComplete() {
|
|
@@ -535,13 +535,13 @@ class Ie {
|
|
|
535
535
|
) && this.store.getState().isUploading && this.store.setState({ isUploading: !1 });
|
|
536
536
|
}
|
|
537
537
|
}
|
|
538
|
-
function
|
|
538
|
+
function $e(a) {
|
|
539
539
|
return a === "queued" || a === "uploading" || a === "retrying";
|
|
540
540
|
}
|
|
541
541
|
function de(a) {
|
|
542
542
|
return `https://api.filerobot.com/${a}`;
|
|
543
543
|
}
|
|
544
|
-
async function
|
|
544
|
+
async function Ye(a, e) {
|
|
545
545
|
const t = `${de(a)}/key/${encodeURIComponent(e)}`, i = new AbortController(), r = setTimeout(() => i.abort(), 3e4);
|
|
546
546
|
try {
|
|
547
547
|
const o = await fetch(t, { signal: i.signal });
|
|
@@ -571,10 +571,10 @@ function oe(a, e) {
|
|
|
571
571
|
}
|
|
572
572
|
return a.airboxPuid && (t["X-Filerobot-Airbox-Puid"] = a.airboxPuid), t;
|
|
573
573
|
}
|
|
574
|
-
async function
|
|
574
|
+
async function qe(a) {
|
|
575
575
|
const e = de(a.container);
|
|
576
576
|
if (a.mode === "security-template") {
|
|
577
|
-
const t = await
|
|
577
|
+
const t = await Ye(a.container, a.securityTemplateId);
|
|
578
578
|
return { apiBase: e, headers: oe(a, t), sassKey: t };
|
|
579
579
|
}
|
|
580
580
|
return { apiBase: e, headers: oe(a) };
|
|
@@ -598,11 +598,11 @@ const v = {
|
|
|
598
598
|
FILE_PREVIEW: "sfx-file-preview",
|
|
599
599
|
FILL_METADATA: "sfx-fill-metadata"
|
|
600
600
|
};
|
|
601
|
-
let
|
|
602
|
-
function
|
|
603
|
-
return `file-${Date.now()}-${++
|
|
601
|
+
let Ve = 0;
|
|
602
|
+
function H() {
|
|
603
|
+
return `file-${Date.now()}-${++Ve}`;
|
|
604
604
|
}
|
|
605
|
-
function
|
|
605
|
+
function Y(a) {
|
|
606
606
|
if (a <= 0) return "0 B";
|
|
607
607
|
const e = ["B", "KB", "MB", "GB"], t = Math.min(Math.floor(Math.log(a) / Math.log(1024)), e.length - 1), i = a / Math.pow(1024, t);
|
|
608
608
|
return `${t === 0 ? i : i.toFixed(1)} ${e[t]}`;
|
|
@@ -619,11 +619,11 @@ function N(a) {
|
|
|
619
619
|
const e = ((t = a.name.split(".").pop()) == null ? void 0 : t.toLowerCase()) ?? "";
|
|
620
620
|
return a.type.startsWith("image/") ? "image" : a.type.startsWith("video/") || ["mp4", "mov", "avi", "webm", "mkv"].includes(e) ? "vid" : a.type === "application/pdf" || e === "pdf" ? "pdf" : ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt", "rtf", "odt"].includes(e) ? "doc" : ["zip", "rar", "7z", "tar", "gz", "bz2"].includes(e) ? "zip" : "gen";
|
|
621
621
|
}
|
|
622
|
-
function
|
|
622
|
+
function Ne(a) {
|
|
623
623
|
const e = a.lastIndexOf(".");
|
|
624
624
|
return e >= 0 ? a.slice(e + 1).toUpperCase() : "";
|
|
625
625
|
}
|
|
626
|
-
const
|
|
626
|
+
const Xe = {
|
|
627
627
|
jpg: "image/jpeg",
|
|
628
628
|
jpeg: "image/jpeg",
|
|
629
629
|
png: "image/png",
|
|
@@ -641,12 +641,12 @@ const Ne = {
|
|
|
641
641
|
doc: "application/msword",
|
|
642
642
|
docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
|
|
643
643
|
};
|
|
644
|
-
function
|
|
644
|
+
function We(a) {
|
|
645
645
|
var t;
|
|
646
646
|
const e = ((t = a.split(".").pop()) == null ? void 0 : t.toLowerCase()) ?? "";
|
|
647
|
-
return
|
|
647
|
+
return Xe[e] || "";
|
|
648
648
|
}
|
|
649
|
-
function
|
|
649
|
+
function Ke(a) {
|
|
650
650
|
return new Promise((e) => {
|
|
651
651
|
const t = document.createElement("video");
|
|
652
652
|
t.preload = "metadata", t.muted = !0, t.playsInline = !0;
|
|
@@ -702,13 +702,13 @@ function se(a, e, t) {
|
|
|
702
702
|
}
|
|
703
703
|
return null;
|
|
704
704
|
}
|
|
705
|
-
function
|
|
705
|
+
function Ze(a, e, t) {
|
|
706
706
|
return se(a, e, t);
|
|
707
707
|
}
|
|
708
|
-
function
|
|
708
|
+
function Se(a) {
|
|
709
709
|
return a.allowedFileTypes ? a.allowedFileTypes.join(",") : "";
|
|
710
710
|
}
|
|
711
|
-
const
|
|
711
|
+
const Ee = {
|
|
712
712
|
"google-drive": {
|
|
713
713
|
id: "google-drive",
|
|
714
714
|
label: "Google Drive",
|
|
@@ -759,20 +759,20 @@ const Se = {
|
|
|
759
759
|
brandHtml: '<span class="brand-ico" style="background:#111"><svg width="12" height="12" viewBox="0 0 24 24" fill="white"><path d="M8.5 11.5v5h7v-5h5.5V21h-18v-9.5h5.5zm7-8v5h-7v-5h7z"/></svg></span>'
|
|
760
760
|
}
|
|
761
761
|
};
|
|
762
|
-
function
|
|
763
|
-
return a.filter((e) => e in
|
|
762
|
+
function Je(a) {
|
|
763
|
+
return a.filter((e) => e in Ee).map((e) => Ee[e]);
|
|
764
764
|
}
|
|
765
|
-
var
|
|
765
|
+
var Ge = Object.defineProperty, Qe = (a, e, t, i) => {
|
|
766
766
|
for (var r = void 0, o = a.length - 1, s; o >= 0; o--)
|
|
767
767
|
(s = a[o]) && (r = s(e, t, r) || r);
|
|
768
|
-
return r &&
|
|
768
|
+
return r && Ge(e, t, r), r;
|
|
769
769
|
};
|
|
770
|
-
const
|
|
771
|
-
{ id: "device", label: "My Device", icon:
|
|
772
|
-
{ id: "url", label: "URL link", icon:
|
|
773
|
-
{ id: "camera", label: "Camera", icon:
|
|
774
|
-
{ id: "screen-cast", label: "Screen capture", icon:
|
|
775
|
-
], fe = class fe extends
|
|
770
|
+
const et = '<rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/>', tt = '<path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/>', rt = '<path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"/><circle cx="12" cy="13" r="4"/>', it = '<rect x="2" y="3" width="20" height="14" rx="2"/><circle cx="12" cy="10" r="1"/><path d="M7 21l5-5 5 5"/>', X = [
|
|
771
|
+
{ id: "device", label: "My Device", icon: et, iconColor: "#2563eb" },
|
|
772
|
+
{ id: "url", label: "URL link", icon: tt, iconColor: "#16a34a" },
|
|
773
|
+
{ id: "camera", label: "Camera", icon: rt, iconColor: "#7c3aed" },
|
|
774
|
+
{ id: "screen-cast", label: "Screen capture", icon: it, iconColor: "#ea580c" }
|
|
775
|
+
], fe = class fe extends P {
|
|
776
776
|
constructor() {
|
|
777
777
|
super(...arguments), this.sources = X;
|
|
778
778
|
}
|
|
@@ -790,7 +790,7 @@ const Qe = '<rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21
|
|
|
790
790
|
${this.sources.map(
|
|
791
791
|
(e) => l`
|
|
792
792
|
<button @click=${() => this._handleClick(e)}>
|
|
793
|
-
${e.brandHtml ?
|
|
793
|
+
${e.brandHtml ? T(e.brandHtml) : M`<svg viewBox="0 0 24 24" class=${e.fillIcon ? "fill-icon" : ""}>${F(e.icon)}</svg>`}
|
|
794
794
|
${e.label}
|
|
795
795
|
</button>
|
|
796
796
|
`
|
|
@@ -798,7 +798,7 @@ const Qe = '<rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21
|
|
|
798
798
|
`;
|
|
799
799
|
}
|
|
800
800
|
};
|
|
801
|
-
fe.styles =
|
|
801
|
+
fe.styles = S`
|
|
802
802
|
:host {
|
|
803
803
|
display: flex;
|
|
804
804
|
flex-wrap: wrap;
|
|
@@ -872,17 +872,17 @@ fe.styles = k`
|
|
|
872
872
|
}
|
|
873
873
|
`;
|
|
874
874
|
let ae = fe;
|
|
875
|
-
|
|
875
|
+
Qe([
|
|
876
876
|
b({ type: Array })
|
|
877
877
|
], ae.prototype, "sources");
|
|
878
|
-
var
|
|
878
|
+
var ot = Object.defineProperty, j = (a, e, t, i) => {
|
|
879
879
|
for (var r = void 0, o = a.length - 1, s; o >= 0; o--)
|
|
880
880
|
(s = a[o]) && (r = s(e, t, r) || r);
|
|
881
|
-
return r &&
|
|
881
|
+
return r && ot(e, t, r), r;
|
|
882
882
|
};
|
|
883
|
-
const
|
|
883
|
+
const Ue = 3, ue = class ue extends P {
|
|
884
884
|
constructor() {
|
|
885
|
-
super(...arguments), this.compact = !1, this.externalDragOver = !1, this.accept = "", this.sources = [], this.sourcesLayout = "pills", this._dragOver = !1, this._moreOpen = !1, this._visiblePills =
|
|
885
|
+
super(...arguments), this.compact = !1, this.externalDragOver = !1, this.accept = "", this.sources = [], this.sourcesLayout = "pills", this._dragOver = !1, this._moreOpen = !1, this._visiblePills = Ue, this._dragCounter = 0, this._onDragEnter = (e) => {
|
|
886
886
|
e.preventDefault(), this._dragCounter++, this._dragCounter === 1 && (this._dragOver = !0);
|
|
887
887
|
}, this._onDragOver = (e) => {
|
|
888
888
|
e.preventDefault();
|
|
@@ -953,8 +953,8 @@ const Ee = 3, ue = class ue extends z {
|
|
|
953
953
|
}
|
|
954
954
|
/** Position the fixed dropdown, choosing above or below based on available space. */
|
|
955
955
|
_positionDropdown() {
|
|
956
|
-
var h,
|
|
957
|
-
const e = (h = this.shadowRoot) == null ? void 0 : h.querySelector(".more-wrap > button"), t = (
|
|
956
|
+
var h, x;
|
|
957
|
+
const e = (h = this.shadowRoot) == null ? void 0 : h.querySelector(".more-wrap > button"), t = (x = this.shadowRoot) == null ? void 0 : x.querySelector(".more-dropdown");
|
|
958
958
|
if (!e || !t) return;
|
|
959
959
|
const i = e.getBoundingClientRect(), r = 8, o = t.scrollHeight, s = t.offsetWidth, n = i.top, d = window.innerHeight - i.bottom;
|
|
960
960
|
n >= o + r || n > d ? (t.classList.add("above"), t.classList.remove("below"), t.style.top = `${i.top - o - r}px`) : (t.classList.add("below"), t.classList.remove("above"), t.style.top = `${i.bottom + r}px`);
|
|
@@ -966,7 +966,7 @@ const Ee = 3, ue = class ue extends z {
|
|
|
966
966
|
}
|
|
967
967
|
_updateVisiblePills() {
|
|
968
968
|
const e = window.innerWidth;
|
|
969
|
-
this.sourcesLayout === "cards" ? e <= 480 ? this._visiblePills = 2 : e <= 768 ? this._visiblePills = 3 : this._visiblePills = 5 : e <= 480 ? this._visiblePills = 1 : e <= 768 ? this._visiblePills = 2 : this._visiblePills =
|
|
969
|
+
this.sourcesLayout === "cards" ? e <= 480 ? this._visiblePills = 2 : e <= 768 ? this._visiblePills = 3 : this._visiblePills = 5 : e <= 480 ? this._visiblePills = 1 : e <= 768 ? this._visiblePills = 2 : this._visiblePills = Ue;
|
|
970
970
|
}
|
|
971
971
|
connectedCallback() {
|
|
972
972
|
super.connectedCallback(), document.addEventListener("paste", this._onPaste), document.addEventListener("click", this._onDocClick), document.addEventListener("keydown", this._onDocKeyDown), window.addEventListener("scroll", this._onScrollOrResize, !0), window.addEventListener("resize", this._onScrollOrResize), this._updateVisiblePills();
|
|
@@ -985,8 +985,8 @@ const Ee = 3, ue = class ue extends z {
|
|
|
985
985
|
t.stopPropagation(), this._onSourceIconClick(e);
|
|
986
986
|
}}
|
|
987
987
|
>
|
|
988
|
-
${e.brandHtml ?
|
|
989
|
-
${M`<svg viewBox="0 0 24 24" class=${e.fillIcon ? "fill-icon" : ""}>${
|
|
988
|
+
${e.brandHtml ? T(e.brandHtml) : l`<span class="pill-ico" style=${e.iconColor ? `color:${e.iconColor}` : ""}>
|
|
989
|
+
${M`<svg viewBox="0 0 24 24" class=${e.fillIcon ? "fill-icon" : ""}>${F(e.icon)}</svg>`}
|
|
990
990
|
</span>`}
|
|
991
991
|
${e.label}
|
|
992
992
|
</button>
|
|
@@ -1001,8 +1001,8 @@ const Ee = 3, ue = class ue extends z {
|
|
|
1001
1001
|
t.stopPropagation(), this._onSourceIconClick(e);
|
|
1002
1002
|
}}
|
|
1003
1003
|
>
|
|
1004
|
-
${e.brandHtml ? l`<span class="card-ico">${
|
|
1005
|
-
${M`<svg viewBox="0 0 24 24" class=${e.fillIcon ? "fill-icon" : ""}>${
|
|
1004
|
+
${e.brandHtml ? l`<span class="card-ico">${T(e.brandHtml)}</span>` : l`<span class="card-ico" style=${e.iconColor ? `color:${e.iconColor}` : ""}>
|
|
1005
|
+
${M`<svg viewBox="0 0 24 24" class=${e.fillIcon ? "fill-icon" : ""}>${F(e.icon)}</svg>`}
|
|
1006
1006
|
</span>`}
|
|
1007
1007
|
<span class="card-label">${e.label}</span>
|
|
1008
1008
|
</button>
|
|
@@ -1026,7 +1026,7 @@ const Ee = 3, ue = class ue extends z {
|
|
|
1026
1026
|
(t) => l`
|
|
1027
1027
|
<button class="more-item" @click=${(i) => this._onMoreItemClick(t, i)}>
|
|
1028
1028
|
<div class="more-item-ico">
|
|
1029
|
-
${t.brandHtml ?
|
|
1029
|
+
${t.brandHtml ? T(t.brandHtml) : t.iconColor ? l`<svg viewBox="0 0 24 24" style="color:${t.iconColor}">${F(t.icon)}</svg>` : M`<svg viewBox="0 0 24 24">${F(t.icon)}</svg>`}
|
|
1030
1030
|
</div>
|
|
1031
1031
|
${t.label}
|
|
1032
1032
|
</button>
|
|
@@ -1048,7 +1048,7 @@ const Ee = 3, ue = class ue extends z {
|
|
|
1048
1048
|
(t) => l`
|
|
1049
1049
|
<button class="more-item" @click=${(i) => this._onMoreItemClick(t, i)}>
|
|
1050
1050
|
<div class="more-item-ico">
|
|
1051
|
-
${t.brandHtml ?
|
|
1051
|
+
${t.brandHtml ? T(t.brandHtml) : t.iconColor ? l`<svg viewBox="0 0 24 24" style="color:${t.iconColor}">${F(t.icon)}</svg>` : M`<svg viewBox="0 0 24 24">${F(t.icon)}</svg>`}
|
|
1052
1052
|
</div>
|
|
1053
1053
|
${t.label}
|
|
1054
1054
|
</button>
|
|
@@ -1093,22 +1093,22 @@ const Ee = 3, ue = class ue extends z {
|
|
|
1093
1093
|
<div class="title">
|
|
1094
1094
|
Drag & Drop or click to <span>browse</span>
|
|
1095
1095
|
</div>
|
|
1096
|
-
${this.compact ?
|
|
1096
|
+
${this.compact ? p : l`<div class="subtitle">Drop files anywhere on this page</div>`}
|
|
1097
1097
|
|
|
1098
1098
|
${!this.compact && this.sources.length > 0 ? l`
|
|
1099
1099
|
<div class="import-divider"><span>or import from</span></div>
|
|
1100
1100
|
${this.sourcesLayout === "cards" ? l`
|
|
1101
1101
|
<div class="sources-cards">
|
|
1102
1102
|
${t.map((r) => this._renderCard(r))}
|
|
1103
|
-
${i.length > 0 ? this._renderMoreCard(i) :
|
|
1103
|
+
${i.length > 0 ? this._renderMoreCard(i) : p}
|
|
1104
1104
|
</div>
|
|
1105
1105
|
` : l`
|
|
1106
1106
|
<div class="sources-grid">
|
|
1107
1107
|
${t.map((r) => this._renderPill(r))}
|
|
1108
|
-
${i.length > 0 ? this._renderMoreDropdown(i) :
|
|
1108
|
+
${i.length > 0 ? this._renderMoreDropdown(i) : p}
|
|
1109
1109
|
</div>
|
|
1110
1110
|
`}
|
|
1111
|
-
` :
|
|
1111
|
+
` : p}
|
|
1112
1112
|
|
|
1113
1113
|
${this.compact && this.sources.length > 0 ? l`
|
|
1114
1114
|
<div class="sources-row">
|
|
@@ -1123,25 +1123,25 @@ const Ee = 3, ue = class ue extends z {
|
|
|
1123
1123
|
o.stopPropagation(), this._onSourceIconClick(r);
|
|
1124
1124
|
}}
|
|
1125
1125
|
>
|
|
1126
|
-
${r.brandHtml ?
|
|
1126
|
+
${r.brandHtml ? T(r.brandHtml) : M`<svg viewBox="0 0 24 24" class=${r.fillIcon ? "fill-icon" : ""}>${F(r.icon)}</svg>`}
|
|
1127
1127
|
</button>
|
|
1128
1128
|
`
|
|
1129
1129
|
)}
|
|
1130
1130
|
</div>
|
|
1131
|
-
` :
|
|
1131
|
+
` : p}
|
|
1132
1132
|
|
|
1133
1133
|
<div class="ripple"></div>
|
|
1134
1134
|
<input
|
|
1135
1135
|
type="file"
|
|
1136
1136
|
multiple
|
|
1137
|
-
accept=${this.accept ||
|
|
1137
|
+
accept=${this.accept || p}
|
|
1138
1138
|
@change=${this._onFileChange}
|
|
1139
1139
|
/>
|
|
1140
1140
|
</div>
|
|
1141
1141
|
`;
|
|
1142
1142
|
}
|
|
1143
1143
|
};
|
|
1144
|
-
ue.styles =
|
|
1144
|
+
ue.styles = S`
|
|
1145
1145
|
:host {
|
|
1146
1146
|
display: flex;
|
|
1147
1147
|
flex-shrink: 0;
|
|
@@ -1924,38 +1924,38 @@ ue.styles = k`
|
|
|
1924
1924
|
}
|
|
1925
1925
|
}
|
|
1926
1926
|
`;
|
|
1927
|
-
let
|
|
1928
|
-
|
|
1927
|
+
let U = ue;
|
|
1928
|
+
j([
|
|
1929
1929
|
b({ type: Boolean, reflect: !0 })
|
|
1930
|
-
],
|
|
1931
|
-
|
|
1930
|
+
], U.prototype, "compact");
|
|
1931
|
+
j([
|
|
1932
1932
|
b({ type: Boolean, attribute: "external-drag-over" })
|
|
1933
|
-
],
|
|
1934
|
-
|
|
1933
|
+
], U.prototype, "externalDragOver");
|
|
1934
|
+
j([
|
|
1935
1935
|
b({ type: String })
|
|
1936
|
-
],
|
|
1937
|
-
|
|
1936
|
+
], U.prototype, "accept");
|
|
1937
|
+
j([
|
|
1938
1938
|
b({ type: Array })
|
|
1939
|
-
],
|
|
1940
|
-
|
|
1939
|
+
], U.prototype, "sources");
|
|
1940
|
+
j([
|
|
1941
1941
|
b({ type: String, attribute: "sources-layout" })
|
|
1942
|
-
],
|
|
1943
|
-
|
|
1942
|
+
], U.prototype, "sourcesLayout");
|
|
1943
|
+
j([
|
|
1944
1944
|
g()
|
|
1945
|
-
],
|
|
1946
|
-
|
|
1945
|
+
], U.prototype, "_dragOver");
|
|
1946
|
+
j([
|
|
1947
1947
|
g()
|
|
1948
|
-
],
|
|
1949
|
-
|
|
1948
|
+
], U.prototype, "_moreOpen");
|
|
1949
|
+
j([
|
|
1950
1950
|
g()
|
|
1951
|
-
],
|
|
1952
|
-
|
|
1953
|
-
|
|
1954
|
-
],
|
|
1955
|
-
|
|
1956
|
-
|
|
1957
|
-
],
|
|
1958
|
-
const he = class he extends
|
|
1951
|
+
], U.prototype, "_visiblePills");
|
|
1952
|
+
j([
|
|
1953
|
+
Fe(".ripple")
|
|
1954
|
+
], U.prototype, "_rippleEl");
|
|
1955
|
+
j([
|
|
1956
|
+
Fe('input[type="file"]')
|
|
1957
|
+
], U.prototype, "fileInput");
|
|
1958
|
+
const he = class he extends P {
|
|
1959
1959
|
render() {
|
|
1960
1960
|
return l`
|
|
1961
1961
|
<div class="line"></div>
|
|
@@ -1964,7 +1964,7 @@ const he = class he extends z {
|
|
|
1964
1964
|
`;
|
|
1965
1965
|
}
|
|
1966
1966
|
};
|
|
1967
|
-
he.styles =
|
|
1967
|
+
he.styles = S`
|
|
1968
1968
|
:host {
|
|
1969
1969
|
display: flex;
|
|
1970
1970
|
align-items: center;
|
|
@@ -1987,13 +1987,13 @@ he.styles = k`
|
|
|
1987
1987
|
white-space: nowrap;
|
|
1988
1988
|
}
|
|
1989
1989
|
`;
|
|
1990
|
-
let
|
|
1991
|
-
var
|
|
1990
|
+
let ze = he;
|
|
1991
|
+
var st = Object.defineProperty, Z = (a, e, t, i) => {
|
|
1992
1992
|
for (var r = void 0, o = a.length - 1, s; o >= 0; o--)
|
|
1993
1993
|
(s = a[o]) && (r = s(e, t, r) || r);
|
|
1994
|
-
return r &&
|
|
1994
|
+
return r && st(e, t, r), r;
|
|
1995
1995
|
};
|
|
1996
|
-
const xe = class xe extends
|
|
1996
|
+
const xe = class xe extends P {
|
|
1997
1997
|
constructor() {
|
|
1998
1998
|
super(...arguments), this.files = [], this.showDropTile = !1, this.sources = [], this.accept = "", this._moreOpen = !1, this._outsideClickHandler = (e) => {
|
|
1999
1999
|
const t = e.composedPath(), i = this.renderRoot.querySelector(".drop-tile-more-wrap");
|
|
@@ -2050,7 +2050,7 @@ const xe = class xe extends z {
|
|
|
2050
2050
|
title=${r.label}
|
|
2051
2051
|
@click=${(o) => this._onSourceClick(o, r)}
|
|
2052
2052
|
>
|
|
2053
|
-
${r.brandHtml ?
|
|
2053
|
+
${r.brandHtml ? T(r.brandHtml) : M`<svg viewBox="0 0 24 24" class=${r.fillIcon ? "fill-icon" : ""}>${F(r.icon)}</svg>`}
|
|
2054
2054
|
</button>
|
|
2055
2055
|
`)}
|
|
2056
2056
|
${i.length > 0 ? l`
|
|
@@ -2064,25 +2064,25 @@ const xe = class xe extends z {
|
|
|
2064
2064
|
@click=${(o) => this._onMoreSourceClick(o, r)}
|
|
2065
2065
|
>
|
|
2066
2066
|
<span class="more-dropdown-ico" style=${r.iconColor && !r.brandHtml ? `color:${r.iconColor}` : ""}>
|
|
2067
|
-
${r.brandHtml ?
|
|
2067
|
+
${r.brandHtml ? T(r.brandHtml) : M`<svg viewBox="0 0 24 24" class=${r.fillIcon ? "fill-icon" : ""}>${F(r.icon)}</svg>`}
|
|
2068
2068
|
</span>
|
|
2069
2069
|
${r.label}
|
|
2070
2070
|
</button>
|
|
2071
2071
|
`)}
|
|
2072
2072
|
</div>
|
|
2073
|
-
` :
|
|
2073
|
+
` : p}
|
|
2074
2074
|
</div>
|
|
2075
|
-
` :
|
|
2075
|
+
` : p}
|
|
2076
2076
|
</div>
|
|
2077
|
-
` :
|
|
2078
|
-
<input type="file" multiple accept=${this.accept ||
|
|
2077
|
+
` : p}
|
|
2078
|
+
<input type="file" multiple accept=${this.accept || p} @change=${this._onFileInput} />
|
|
2079
2079
|
</div>
|
|
2080
2080
|
`;
|
|
2081
2081
|
}
|
|
2082
2082
|
render() {
|
|
2083
2083
|
return l`
|
|
2084
2084
|
<div class="grid">
|
|
2085
|
-
${this.showDropTile ? this._renderDropTile() :
|
|
2085
|
+
${this.showDropTile ? this._renderDropTile() : p}
|
|
2086
2086
|
${this.files.map(
|
|
2087
2087
|
(e, t) => l`<sfx-file-item .file=${e} style="--tile-index:${t}"></sfx-file-item>`
|
|
2088
2088
|
)}
|
|
@@ -2090,7 +2090,7 @@ const xe = class xe extends z {
|
|
|
2090
2090
|
`;
|
|
2091
2091
|
}
|
|
2092
2092
|
};
|
|
2093
|
-
xe.styles =
|
|
2093
|
+
xe.styles = S`
|
|
2094
2094
|
:host {
|
|
2095
2095
|
display: block;
|
|
2096
2096
|
flex: 1;
|
|
@@ -2112,10 +2112,10 @@ xe.styles = k`
|
|
|
2112
2112
|
}
|
|
2113
2113
|
|
|
2114
2114
|
:host::-webkit-scrollbar-thumb {
|
|
2115
|
-
background: rgba(0, 0, 0, 0.15);
|
|
2116
|
-
border-radius:
|
|
2117
|
-
border-left: var(--sfx-scrollbar-inset, 3px) solid transparent;
|
|
2118
|
-
border-right: var(--sfx-scrollbar-inset, 3px) solid transparent;
|
|
2115
|
+
background-color: rgba(0, 0, 0, 0.15);
|
|
2116
|
+
border-radius: 6px;
|
|
2117
|
+
border-left: var(--sfx-scrollbar-inset-left, 3px) solid transparent;
|
|
2118
|
+
border-right: var(--sfx-scrollbar-inset-right, 3px) solid transparent;
|
|
2119
2119
|
background-clip: padding-box;
|
|
2120
2120
|
}
|
|
2121
2121
|
|
|
@@ -2123,7 +2123,7 @@ xe.styles = k`
|
|
|
2123
2123
|
display: grid;
|
|
2124
2124
|
grid-template-columns: repeat(auto-fill, minmax(var(--sfx-up-grid-min, max(24%, 140px)), 1fr));
|
|
2125
2125
|
gap: 12px;
|
|
2126
|
-
padding:
|
|
2126
|
+
padding: 0 12px 16px 16px;
|
|
2127
2127
|
}
|
|
2128
2128
|
|
|
2129
2129
|
@media (max-width: 480px) {
|
|
@@ -2148,6 +2148,8 @@ xe.styles = k`
|
|
|
2148
2148
|
padding: 16px 12px;
|
|
2149
2149
|
position: relative;
|
|
2150
2150
|
z-index: 1;
|
|
2151
|
+
min-height: 0;
|
|
2152
|
+
overflow: hidden;
|
|
2151
2153
|
}
|
|
2152
2154
|
|
|
2153
2155
|
.drop-tile:hover {
|
|
@@ -2156,8 +2158,8 @@ xe.styles = k`
|
|
|
2156
2158
|
}
|
|
2157
2159
|
|
|
2158
2160
|
.drop-tile-rings {
|
|
2159
|
-
width: 72px;
|
|
2160
|
-
height: 72px;
|
|
2161
|
+
width: clamp(48px, 8vw, 72px);
|
|
2162
|
+
height: clamp(48px, 8vw, 72px);
|
|
2161
2163
|
position: relative;
|
|
2162
2164
|
display: flex;
|
|
2163
2165
|
align-items: center;
|
|
@@ -2186,8 +2188,8 @@ xe.styles = k`
|
|
|
2186
2188
|
}
|
|
2187
2189
|
|
|
2188
2190
|
.drop-tile-core {
|
|
2189
|
-
width: 40px;
|
|
2190
|
-
height: 40px;
|
|
2191
|
+
width: clamp(28px, 5vw, 40px);
|
|
2192
|
+
height: clamp(28px, 5vw, 40px);
|
|
2191
2193
|
border-radius: 50%;
|
|
2192
2194
|
background: var(--sfx-up-primary-bg, #eff6ff);
|
|
2193
2195
|
color: var(--sfx-up-primary, #2563eb);
|
|
@@ -2406,12 +2408,12 @@ Z([
|
|
|
2406
2408
|
Z([
|
|
2407
2409
|
g()
|
|
2408
2410
|
], B.prototype, "_moreOpen");
|
|
2409
|
-
var
|
|
2411
|
+
var at = Object.defineProperty, nt = (a, e, t, i) => {
|
|
2410
2412
|
for (var r = void 0, o = a.length - 1, s; o >= 0; o--)
|
|
2411
2413
|
(s = a[o]) && (r = s(e, t, r) || r);
|
|
2412
|
-
return r &&
|
|
2414
|
+
return r && at(e, t, r), r;
|
|
2413
2415
|
};
|
|
2414
|
-
const ge = class ge extends
|
|
2416
|
+
const ge = class ge extends P {
|
|
2415
2417
|
_remove() {
|
|
2416
2418
|
this.dispatchEvent(
|
|
2417
2419
|
new CustomEvent("file-remove", {
|
|
@@ -2441,8 +2443,8 @@ const ge = class ge extends z {
|
|
|
2441
2443
|
}
|
|
2442
2444
|
render() {
|
|
2443
2445
|
const e = this.file;
|
|
2444
|
-
if (!e) return
|
|
2445
|
-
const t = N(e), i = e.status === "complete", r = e.status === "uploading", o = e.status === "error" || e.status === "failed", s = e.status === "rejected", n =
|
|
2446
|
+
if (!e) return p;
|
|
2447
|
+
const t = N(e), i = e.status === "complete", r = e.status === "uploading", o = e.status === "error" || e.status === "failed", s = e.status === "rejected", n = Ne(e.name), d = [
|
|
2446
2448
|
"tile",
|
|
2447
2449
|
i ? "done" : "",
|
|
2448
2450
|
r ? "uploading" : "",
|
|
@@ -2457,7 +2459,7 @@ const ge = class ge extends z {
|
|
|
2457
2459
|
<div class="type-icon">
|
|
2458
2460
|
<div class="type-icon-inner ${t}">
|
|
2459
2461
|
${this._renderTypeIcon(t)}
|
|
2460
|
-
${n ? l`<div class="ext-label">${n}</div>` :
|
|
2462
|
+
${n ? l`<div class="ext-label">${n}</div>` : p}
|
|
2461
2463
|
</div>
|
|
2462
2464
|
</div>
|
|
2463
2465
|
`}
|
|
@@ -2471,7 +2473,7 @@ const ge = class ge extends z {
|
|
|
2471
2473
|
</svg>
|
|
2472
2474
|
Preview
|
|
2473
2475
|
</button>
|
|
2474
|
-
` :
|
|
2476
|
+
` : p}
|
|
2475
2477
|
|
|
2476
2478
|
<!-- Spinner overlay -->
|
|
2477
2479
|
<div class="spinner-overlay">
|
|
@@ -2483,20 +2485,20 @@ const ge = class ge extends z {
|
|
|
2483
2485
|
<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round">
|
|
2484
2486
|
<polyline points="20 6 9 17 4 12" />
|
|
2485
2487
|
</svg>
|
|
2486
|
-
</div>` :
|
|
2488
|
+
</div>` : p}
|
|
2487
2489
|
|
|
2488
2490
|
<!-- Progress bar -->
|
|
2489
2491
|
${e.status === "uploading" ? l`
|
|
2490
2492
|
<div class="progress">
|
|
2491
2493
|
<div class="progress-fill" style="transform:scaleX(${Math.min(e.progress, 100) / 100})"></div>
|
|
2492
2494
|
</div>
|
|
2493
|
-
` :
|
|
2495
|
+
` : p}
|
|
2494
2496
|
|
|
2495
2497
|
<!-- Error / rejected badge -->
|
|
2496
|
-
${(o || s) && e.error ? l`<div class="error-badge" title=${e.error}>${e.error}</div>` :
|
|
2498
|
+
${(o || s) && e.error ? l`<div class="error-badge" title=${e.error}>${e.error}</div>` : p}
|
|
2497
2499
|
|
|
2498
|
-
<!-- Video duration badge -->
|
|
2499
|
-
${e.duration != null && e.duration > 0 ? l`<div class="duration-badge">${this._formatDuration(e.duration)}</div>` :
|
|
2500
|
+
<!-- Video duration badge (hidden when error badge is shown to avoid overlap) -->
|
|
2501
|
+
${!(o || s) && e.duration != null && e.duration > 0 ? l`<div class="duration-badge">${this._formatDuration(e.duration)}</div>` : p}
|
|
2500
2502
|
</div>
|
|
2501
2503
|
|
|
2502
2504
|
<!-- Action buttons -->
|
|
@@ -2508,7 +2510,7 @@ const ge = class ge extends z {
|
|
|
2508
2510
|
<path d="M20.49 15a9 9 0 11-2.12-9.36L23 10" />
|
|
2509
2511
|
</svg>
|
|
2510
2512
|
</button>
|
|
2511
|
-
` :
|
|
2513
|
+
` : p}
|
|
2512
2514
|
<button class="act-btn del" @click=${this._remove} title="Remove" aria-label="Remove file">
|
|
2513
2515
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
2514
2516
|
<polyline points="3 6 5 6 21 6" />
|
|
@@ -2523,7 +2525,7 @@ const ge = class ge extends z {
|
|
|
2523
2525
|
<!-- Info bar -->
|
|
2524
2526
|
<div class="info">
|
|
2525
2527
|
<div class="name" title=${e.name}>${e.name}</div>
|
|
2526
|
-
<div class="meta">${n || ""}${e.size ? ` · ${
|
|
2528
|
+
<div class="meta">${n || ""}${e.size ? ` · ${Y(e.size)}` : ""}</div>
|
|
2527
2529
|
</div>
|
|
2528
2530
|
</div>
|
|
2529
2531
|
`;
|
|
@@ -2547,7 +2549,7 @@ const ge = class ge extends z {
|
|
|
2547
2549
|
}
|
|
2548
2550
|
}
|
|
2549
2551
|
};
|
|
2550
|
-
ge.styles =
|
|
2552
|
+
ge.styles = S`
|
|
2551
2553
|
:host {
|
|
2552
2554
|
display: block;
|
|
2553
2555
|
}
|
|
@@ -2854,19 +2856,22 @@ ge.styles = k`
|
|
|
2854
2856
|
/* --- Error / rejected state --- */
|
|
2855
2857
|
.error-badge {
|
|
2856
2858
|
position: absolute;
|
|
2857
|
-
bottom:
|
|
2859
|
+
bottom: 6px;
|
|
2858
2860
|
left: 6px;
|
|
2859
2861
|
right: 6px;
|
|
2860
|
-
font-size:
|
|
2861
|
-
font-weight:
|
|
2862
|
+
font-size: 11px;
|
|
2863
|
+
font-weight: 500;
|
|
2864
|
+
line-height: 1.3;
|
|
2862
2865
|
color: #fff;
|
|
2863
|
-
background: var(--sfx-up-error, #dc2626);
|
|
2864
|
-
border-radius:
|
|
2865
|
-
padding:
|
|
2866
|
+
background: color-mix(in srgb, var(--sfx-up-error, #dc2626) 85%, transparent);
|
|
2867
|
+
border-radius: 6px;
|
|
2868
|
+
padding: 4px 8px;
|
|
2866
2869
|
text-align: center;
|
|
2867
|
-
|
|
2870
|
+
display: -webkit-box;
|
|
2871
|
+
-webkit-line-clamp: 2;
|
|
2872
|
+
line-clamp: 2;
|
|
2873
|
+
-webkit-box-orient: vertical;
|
|
2868
2874
|
overflow: hidden;
|
|
2869
|
-
text-overflow: ellipsis;
|
|
2870
2875
|
}
|
|
2871
2876
|
|
|
2872
2877
|
.tile.rejected {
|
|
@@ -2919,10 +2924,10 @@ ge.styles = k`
|
|
|
2919
2924
|
}
|
|
2920
2925
|
`;
|
|
2921
2926
|
let ne = ge;
|
|
2922
|
-
|
|
2927
|
+
nt([
|
|
2923
2928
|
b({ attribute: !1 })
|
|
2924
2929
|
], ne.prototype, "file");
|
|
2925
|
-
const J =
|
|
2930
|
+
const J = S`
|
|
2926
2931
|
.btn,
|
|
2927
2932
|
.btn-ghost,
|
|
2928
2933
|
.btn-primary,
|
|
@@ -2991,20 +2996,20 @@ const J = k`
|
|
|
2991
2996
|
opacity: 0.55;
|
|
2992
2997
|
cursor: not-allowed;
|
|
2993
2998
|
}
|
|
2994
|
-
`, G =
|
|
2999
|
+
`, G = S`
|
|
2995
3000
|
button:focus-visible {
|
|
2996
3001
|
outline: 2px solid var(--sfx-up-ring, oklch(0.578 0.198 268.129 / 0.7));
|
|
2997
3002
|
outline-offset: 2px;
|
|
2998
3003
|
}
|
|
2999
3004
|
`;
|
|
3000
|
-
var
|
|
3005
|
+
var lt = Object.defineProperty, Q = (a, e, t, i) => {
|
|
3001
3006
|
for (var r = void 0, o = a.length - 1, s; o >= 0; o--)
|
|
3002
3007
|
(s = a[o]) && (r = s(e, t, r) || r);
|
|
3003
|
-
return r &&
|
|
3008
|
+
return r && lt(e, t, r), r;
|
|
3004
3009
|
};
|
|
3005
|
-
const
|
|
3010
|
+
const Pe = 7, ve = class ve extends P {
|
|
3006
3011
|
constructor() {
|
|
3007
|
-
super(...arguments), this.fileCount = 0, this.totalSize = 0, this.thumbnails = [], this.primaryLabel = "Done";
|
|
3012
|
+
super(...arguments), this.fileCount = 0, this.totalSize = 0, this.thumbnails = [], this.primaryLabel = "Done", this.failedFiles = [];
|
|
3008
3013
|
}
|
|
3009
3014
|
_uploadMore() {
|
|
3010
3015
|
this.dispatchEvent(
|
|
@@ -3016,44 +3021,86 @@ const ze = 7, ve = class ve extends z {
|
|
|
3016
3021
|
new CustomEvent("primary-action", { bubbles: !0, composed: !0 })
|
|
3017
3022
|
);
|
|
3018
3023
|
}
|
|
3024
|
+
_retryFile(e) {
|
|
3025
|
+
this.dispatchEvent(
|
|
3026
|
+
new CustomEvent("file-retry", { bubbles: !0, composed: !0, detail: { fileId: e } })
|
|
3027
|
+
);
|
|
3028
|
+
}
|
|
3029
|
+
_retryAll() {
|
|
3030
|
+
this.dispatchEvent(
|
|
3031
|
+
new CustomEvent("retry-all", { bubbles: !0, composed: !0 })
|
|
3032
|
+
);
|
|
3033
|
+
}
|
|
3034
|
+
_close() {
|
|
3035
|
+
this.dispatchEvent(
|
|
3036
|
+
new CustomEvent("close-uploader", { bubbles: !0, composed: !0 })
|
|
3037
|
+
);
|
|
3038
|
+
}
|
|
3019
3039
|
render() {
|
|
3020
|
-
const e = this.thumbnails.slice(0,
|
|
3040
|
+
const e = this.thumbnails.slice(0, Pe), t = this.thumbnails.length - Pe, i = this.fileCount > 0, r = this.failedFiles.length > 0, o = r && !i;
|
|
3021
3041
|
return l`
|
|
3042
|
+
<button class="close-btn" title="Close" @click=${this._close}>
|
|
3043
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
|
3044
|
+
</button>
|
|
3022
3045
|
<div class="card" role="status" aria-live="polite">
|
|
3023
|
-
<div class="icon">
|
|
3024
|
-
|
|
3025
|
-
|
|
3026
|
-
|
|
3046
|
+
<div class="icon ${o ? "error" : r ? "warning" : ""}">
|
|
3047
|
+
${o ? l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
3048
|
+
<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
|
|
3049
|
+
</svg>` : r ? l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
3050
|
+
<path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>
|
|
3051
|
+
</svg>` : l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
|
|
3052
|
+
<polyline points="20 6 9 17 4 12" />
|
|
3053
|
+
</svg>`}
|
|
3027
3054
|
</div>
|
|
3028
|
-
<div class="title"
|
|
3029
|
-
<div class="subtitle"
|
|
3055
|
+
<div class="title">${o ? "Upload failed" : r ? "Partially uploaded" : "Uploaded successfully!"}</div>
|
|
3056
|
+
<div class="subtitle">${o ? `${this.failedFiles.length === 1 ? "File" : "Files"} could not be uploaded` : r ? `${this.fileCount} ${this.fileCount === 1 ? "file" : "files"} uploaded, ${this.failedFiles.length} failed` : "All files are ready for use"}</div>
|
|
3030
3057
|
|
|
3031
3058
|
${e.length > 0 ? l`
|
|
3032
3059
|
<div class="thumbs">
|
|
3033
3060
|
${e.map(
|
|
3034
|
-
(
|
|
3061
|
+
(s) => l`<img class="thumb" src=${s} alt="" />`
|
|
3035
3062
|
)}
|
|
3036
|
-
${t > 0 ? l`<div class="thumb-more">+${t}</div>` :
|
|
3063
|
+
${t > 0 ? l`<div class="thumb-more">+${t}</div>` : p}
|
|
3037
3064
|
</div>
|
|
3038
|
-
` :
|
|
3039
|
-
|
|
3040
|
-
|
|
3065
|
+
` : p}
|
|
3066
|
+
|
|
3067
|
+
${i ? l`<div class="summary">${this.fileCount} ${this.fileCount === 1 ? "file" : "files"} · ${Y(this.totalSize)} uploaded</div>` : p}
|
|
3068
|
+
|
|
3069
|
+
${r ? l`
|
|
3070
|
+
<div class="failed-list">
|
|
3071
|
+
${this.failedFiles.map((s) => l`
|
|
3072
|
+
<div class="failed-item">
|
|
3073
|
+
<svg class="failed-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="Error"><title>Error</title><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
|
3074
|
+
<div class="failed-info">
|
|
3075
|
+
<div class="failed-name">${s.name}</div>
|
|
3076
|
+
<div class="failed-reason">${s.error}</div>
|
|
3077
|
+
</div>
|
|
3078
|
+
<button class="failed-retry" title="Retry" @click=${() => this._retryFile(s.id)}>
|
|
3079
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2v6h-6"/><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M3 22v-6h6"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/></svg>
|
|
3080
|
+
</button>
|
|
3081
|
+
</div>
|
|
3082
|
+
`)}
|
|
3083
|
+
</div>
|
|
3084
|
+
` : p}
|
|
3041
3085
|
|
|
3042
3086
|
<div class="actions">
|
|
3043
3087
|
<button class="btn-ghost" @click=${this._uploadMore}>Upload more</button>
|
|
3088
|
+
${r ? l`<button class="btn-retry-all" @click=${this._retryAll}>Retry all (${this.failedFiles.length})</button>` : p}
|
|
3044
3089
|
<button class="btn-primary" @click=${this._primaryAction}>${this.primaryLabel}</button>
|
|
3045
3090
|
</div>
|
|
3046
3091
|
</div>
|
|
3047
3092
|
`;
|
|
3048
3093
|
}
|
|
3049
3094
|
};
|
|
3050
|
-
ve.styles = [J, G,
|
|
3095
|
+
ve.styles = [J, G, S`
|
|
3051
3096
|
:host {
|
|
3052
3097
|
display: flex;
|
|
3053
3098
|
flex: 1;
|
|
3054
3099
|
justify-content: center;
|
|
3055
3100
|
align-items: center;
|
|
3056
|
-
padding
|
|
3101
|
+
padding: 24px 0;
|
|
3102
|
+
position: relative;
|
|
3103
|
+
overflow-y: auto;
|
|
3057
3104
|
}
|
|
3058
3105
|
|
|
3059
3106
|
.card {
|
|
@@ -3083,6 +3130,16 @@ ve.styles = [J, G, k`
|
|
|
3083
3130
|
height: 30px;
|
|
3084
3131
|
}
|
|
3085
3132
|
|
|
3133
|
+
.icon.error {
|
|
3134
|
+
background: #fef2f2;
|
|
3135
|
+
color: #ef4444;
|
|
3136
|
+
}
|
|
3137
|
+
|
|
3138
|
+
.icon.warning {
|
|
3139
|
+
background: #fffbeb;
|
|
3140
|
+
color: #f59e0b;
|
|
3141
|
+
}
|
|
3142
|
+
|
|
3086
3143
|
.title {
|
|
3087
3144
|
font-size: 20px;
|
|
3088
3145
|
font-weight: 700;
|
|
@@ -3155,6 +3212,136 @@ ve.styles = [J, G, k`
|
|
|
3155
3212
|
box-shadow: 0 4px 16px rgba(34, 197, 94, 0.38);
|
|
3156
3213
|
}
|
|
3157
3214
|
|
|
3215
|
+
/* --- Failed files list --- */
|
|
3216
|
+
.failed-list {
|
|
3217
|
+
width: 100%;
|
|
3218
|
+
max-width: 400px;
|
|
3219
|
+
max-height: 200px;
|
|
3220
|
+
margin-bottom: 20px;
|
|
3221
|
+
border-radius: 8px;
|
|
3222
|
+
border: 1px solid var(--sfx-up-border, #e8eaed);
|
|
3223
|
+
overflow-y: auto;
|
|
3224
|
+
overflow-x: hidden;
|
|
3225
|
+
scrollbar-width: thin;
|
|
3226
|
+
scrollbar-color: rgba(0,0,0,0.15) transparent;
|
|
3227
|
+
}
|
|
3228
|
+
|
|
3229
|
+
.failed-list::-webkit-scrollbar {
|
|
3230
|
+
width: 6px;
|
|
3231
|
+
}
|
|
3232
|
+
|
|
3233
|
+
.failed-list::-webkit-scrollbar-track {
|
|
3234
|
+
background: transparent;
|
|
3235
|
+
margin: 6px 0;
|
|
3236
|
+
}
|
|
3237
|
+
|
|
3238
|
+
.failed-list::-webkit-scrollbar-thumb {
|
|
3239
|
+
background: rgba(0,0,0,0.15);
|
|
3240
|
+
border-radius: 3px;
|
|
3241
|
+
}
|
|
3242
|
+
|
|
3243
|
+
.failed-list::-webkit-scrollbar-thumb:hover {
|
|
3244
|
+
background: rgba(0,0,0,0.25);
|
|
3245
|
+
}
|
|
3246
|
+
|
|
3247
|
+
.failed-item {
|
|
3248
|
+
display: flex;
|
|
3249
|
+
align-items: center;
|
|
3250
|
+
gap: 8px;
|
|
3251
|
+
padding: 8px 12px;
|
|
3252
|
+
text-align: left;
|
|
3253
|
+
border-bottom: 1px solid var(--sfx-up-border, #f1f5f9);
|
|
3254
|
+
margin-right: 8px;
|
|
3255
|
+
}
|
|
3256
|
+
|
|
3257
|
+
.failed-item:last-child {
|
|
3258
|
+
border-bottom: none;
|
|
3259
|
+
}
|
|
3260
|
+
|
|
3261
|
+
.failed-icon {
|
|
3262
|
+
width: 16px;
|
|
3263
|
+
height: 16px;
|
|
3264
|
+
flex-shrink: 0;
|
|
3265
|
+
color: #ef4444;
|
|
3266
|
+
margin-top: 1px;
|
|
3267
|
+
}
|
|
3268
|
+
|
|
3269
|
+
.failed-info {
|
|
3270
|
+
flex: 1;
|
|
3271
|
+
min-width: 0;
|
|
3272
|
+
}
|
|
3273
|
+
|
|
3274
|
+
.failed-name {
|
|
3275
|
+
font-size: 12px;
|
|
3276
|
+
font-weight: 500;
|
|
3277
|
+
color: var(--sfx-up-text, #1e293b);
|
|
3278
|
+
white-space: nowrap;
|
|
3279
|
+
overflow: hidden;
|
|
3280
|
+
text-overflow: ellipsis;
|
|
3281
|
+
}
|
|
3282
|
+
|
|
3283
|
+
.failed-reason {
|
|
3284
|
+
font-size: 11px;
|
|
3285
|
+
color: var(--sfx-up-text-muted, #94a3b8);
|
|
3286
|
+
line-height: 1.4;
|
|
3287
|
+
}
|
|
3288
|
+
|
|
3289
|
+
.failed-retry {
|
|
3290
|
+
width: 24px;
|
|
3291
|
+
height: 24px;
|
|
3292
|
+
border: none;
|
|
3293
|
+
background: none;
|
|
3294
|
+
color: var(--sfx-up-primary, #2563eb);
|
|
3295
|
+
cursor: pointer;
|
|
3296
|
+
padding: 4px;
|
|
3297
|
+
flex-shrink: 0;
|
|
3298
|
+
display: flex;
|
|
3299
|
+
align-items: center;
|
|
3300
|
+
justify-content: center;
|
|
3301
|
+
border-radius: 4px;
|
|
3302
|
+
margin-top: -2px;
|
|
3303
|
+
}
|
|
3304
|
+
|
|
3305
|
+
.failed-retry svg { width: 14px; height: 14px; }
|
|
3306
|
+
|
|
3307
|
+
.failed-retry:hover { background: var(--sfx-up-surface, #f8fafc); color: var(--sfx-up-primary-hover, #1d4ed8); }
|
|
3308
|
+
|
|
3309
|
+
.close-btn {
|
|
3310
|
+
position: absolute;
|
|
3311
|
+
top: 12px;
|
|
3312
|
+
right: 12px;
|
|
3313
|
+
width: 28px;
|
|
3314
|
+
height: 28px;
|
|
3315
|
+
border: none;
|
|
3316
|
+
background: none;
|
|
3317
|
+
color: var(--sfx-up-text-muted, #94a3b8);
|
|
3318
|
+
cursor: pointer;
|
|
3319
|
+
display: flex;
|
|
3320
|
+
align-items: center;
|
|
3321
|
+
justify-content: center;
|
|
3322
|
+
border-radius: 6px;
|
|
3323
|
+
padding: 0;
|
|
3324
|
+
}
|
|
3325
|
+
|
|
3326
|
+
.close-btn svg { width: 16px; height: 16px; }
|
|
3327
|
+
|
|
3328
|
+
.close-btn:hover { background: var(--sfx-up-surface, #f8fafc); color: var(--sfx-up-text, #1e293b); }
|
|
3329
|
+
|
|
3330
|
+
.btn-retry-all {
|
|
3331
|
+
padding: 8px 18px;
|
|
3332
|
+
border-radius: 8px;
|
|
3333
|
+
font-size: 13px;
|
|
3334
|
+
font-weight: 500;
|
|
3335
|
+
border: 1px solid var(--sfx-up-primary, #2563eb);
|
|
3336
|
+
background: #fff;
|
|
3337
|
+
color: var(--sfx-up-primary, #2563eb);
|
|
3338
|
+
cursor: pointer;
|
|
3339
|
+
}
|
|
3340
|
+
|
|
3341
|
+
.btn-retry-all:hover {
|
|
3342
|
+
background: var(--sfx-up-primary-bg, #eff6ff);
|
|
3343
|
+
}
|
|
3344
|
+
|
|
3158
3345
|
@keyframes fadeUp {
|
|
3159
3346
|
from {
|
|
3160
3347
|
opacity: 0;
|
|
@@ -3185,25 +3372,28 @@ ve.styles = [J, G, k`
|
|
|
3185
3372
|
.icon { animation: none; }
|
|
3186
3373
|
}
|
|
3187
3374
|
`];
|
|
3188
|
-
let
|
|
3189
|
-
|
|
3375
|
+
let R = ve;
|
|
3376
|
+
Q([
|
|
3190
3377
|
b({ type: Number })
|
|
3191
|
-
],
|
|
3192
|
-
|
|
3378
|
+
], R.prototype, "fileCount");
|
|
3379
|
+
Q([
|
|
3193
3380
|
b({ type: Number })
|
|
3194
|
-
],
|
|
3195
|
-
|
|
3381
|
+
], R.prototype, "totalSize");
|
|
3382
|
+
Q([
|
|
3196
3383
|
b({ type: Array })
|
|
3197
|
-
],
|
|
3198
|
-
|
|
3384
|
+
], R.prototype, "thumbnails");
|
|
3385
|
+
Q([
|
|
3199
3386
|
b({ type: String })
|
|
3200
|
-
],
|
|
3201
|
-
|
|
3387
|
+
], R.prototype, "primaryLabel");
|
|
3388
|
+
Q([
|
|
3389
|
+
b({ type: Array })
|
|
3390
|
+
], R.prototype, "failedFiles");
|
|
3391
|
+
var dt = Object.defineProperty, A = (a, e, t, i) => {
|
|
3202
3392
|
for (var r = void 0, o = a.length - 1, s; o >= 0; o--)
|
|
3203
3393
|
(s = a[o]) && (r = s(e, t, r) || r);
|
|
3204
|
-
return r &&
|
|
3394
|
+
return r && dt(e, t, r), r;
|
|
3205
3395
|
};
|
|
3206
|
-
const be = class be extends
|
|
3396
|
+
const be = class be extends P {
|
|
3207
3397
|
constructor() {
|
|
3208
3398
|
super(...arguments), this.uploadState = "idle", this.fileCount = 0, this.totalSize = 0, this.failedCount = 0, this.showFillMetadata = !1, this.completedCount = 0, this.uploadProgress = 0;
|
|
3209
3399
|
}
|
|
@@ -3232,7 +3422,7 @@ const be = class be extends z {
|
|
|
3232
3422
|
</div>
|
|
3233
3423
|
<span class="progress-label">${this.completedCount}/${this.fileCount} files</span>
|
|
3234
3424
|
</div>
|
|
3235
|
-
` :
|
|
3425
|
+
` : p}
|
|
3236
3426
|
<div class="buttons-row">
|
|
3237
3427
|
<div class="left">
|
|
3238
3428
|
${this.showFillMetadata && this.uploadState === "idle" ? l`
|
|
@@ -3246,7 +3436,7 @@ const be = class be extends z {
|
|
|
3246
3436
|
</svg>
|
|
3247
3437
|
Fill Metadata
|
|
3248
3438
|
</button>
|
|
3249
|
-
` :
|
|
3439
|
+
` : p}
|
|
3250
3440
|
</div>
|
|
3251
3441
|
<div class="right">
|
|
3252
3442
|
<button class="btn-ghost" @click=${this._clear}>
|
|
@@ -3274,7 +3464,7 @@ const be = class be extends z {
|
|
|
3274
3464
|
</svg>
|
|
3275
3465
|
Retry all (${this.failedCount})
|
|
3276
3466
|
</button>
|
|
3277
|
-
` :
|
|
3467
|
+
` : p}
|
|
3278
3468
|
${this._renderUploadButton()}
|
|
3279
3469
|
</div>
|
|
3280
3470
|
</div>
|
|
@@ -3305,7 +3495,7 @@ const be = class be extends z {
|
|
|
3305
3495
|
`;
|
|
3306
3496
|
}
|
|
3307
3497
|
};
|
|
3308
|
-
be.styles = [J, G,
|
|
3498
|
+
be.styles = [J, G, S`
|
|
3309
3499
|
:host {
|
|
3310
3500
|
display: flex;
|
|
3311
3501
|
flex-direction: column;
|
|
@@ -3454,48 +3644,48 @@ be.styles = [J, G, k`
|
|
|
3454
3644
|
.btn-spin { animation: none; }
|
|
3455
3645
|
}
|
|
3456
3646
|
`];
|
|
3457
|
-
let
|
|
3458
|
-
|
|
3647
|
+
let O = be;
|
|
3648
|
+
A([
|
|
3459
3649
|
b({ type: String })
|
|
3460
|
-
],
|
|
3461
|
-
|
|
3650
|
+
], O.prototype, "uploadState");
|
|
3651
|
+
A([
|
|
3462
3652
|
b({ type: Number })
|
|
3463
|
-
],
|
|
3464
|
-
|
|
3653
|
+
], O.prototype, "fileCount");
|
|
3654
|
+
A([
|
|
3465
3655
|
b({ type: Number })
|
|
3466
|
-
],
|
|
3467
|
-
|
|
3656
|
+
], O.prototype, "totalSize");
|
|
3657
|
+
A([
|
|
3468
3658
|
b({ type: Number })
|
|
3469
|
-
],
|
|
3470
|
-
|
|
3659
|
+
], O.prototype, "failedCount");
|
|
3660
|
+
A([
|
|
3471
3661
|
b({ type: Boolean })
|
|
3472
|
-
],
|
|
3473
|
-
|
|
3662
|
+
], O.prototype, "showFillMetadata");
|
|
3663
|
+
A([
|
|
3474
3664
|
b({ type: Number })
|
|
3475
|
-
],
|
|
3476
|
-
|
|
3665
|
+
], O.prototype, "completedCount");
|
|
3666
|
+
A([
|
|
3477
3667
|
b({ type: Number })
|
|
3478
|
-
],
|
|
3479
|
-
const
|
|
3480
|
-
function
|
|
3668
|
+
], O.prototype, "uploadProgress");
|
|
3669
|
+
const ct = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
|
|
3670
|
+
function ce(a, e) {
|
|
3481
3671
|
return (t) => {
|
|
3482
3672
|
if (t.key !== "Tab") return;
|
|
3483
3673
|
const i = a();
|
|
3484
3674
|
if (!i) return;
|
|
3485
3675
|
const r = i.querySelector(e);
|
|
3486
3676
|
if (!r) return;
|
|
3487
|
-
const o = Array.from(r.querySelectorAll(
|
|
3677
|
+
const o = Array.from(r.querySelectorAll(ct));
|
|
3488
3678
|
if (o.length === 0) return;
|
|
3489
3679
|
const s = o[0], n = o[o.length - 1], d = i.activeElement;
|
|
3490
3680
|
t.shiftKey ? (d === s || !r.contains(d)) && (t.preventDefault(), n.focus()) : (d === n || !r.contains(d)) && (t.preventDefault(), s.focus());
|
|
3491
3681
|
};
|
|
3492
3682
|
}
|
|
3493
|
-
var pt = Object.defineProperty,
|
|
3683
|
+
var pt = Object.defineProperty, pe = (a, e, t, i) => {
|
|
3494
3684
|
for (var r = void 0, o = a.length - 1, s; o >= 0; o--)
|
|
3495
3685
|
(s = a[o]) && (r = s(e, t, r) || r);
|
|
3496
3686
|
return r && pt(e, t, r), r;
|
|
3497
3687
|
};
|
|
3498
|
-
const me = class me extends
|
|
3688
|
+
const me = class me extends P {
|
|
3499
3689
|
constructor() {
|
|
3500
3690
|
super(...arguments), this._url = "", this._name = "", this._error = "", this._onBackdropClick = (e) => {
|
|
3501
3691
|
e.target === e.currentTarget && this._cancel();
|
|
@@ -3503,7 +3693,7 @@ const me = class me extends z {
|
|
|
3503
3693
|
this._url = e.target.value, this._error = "", this._autoName();
|
|
3504
3694
|
}, this._onNameInput = (e) => {
|
|
3505
3695
|
this._name = e.target.value;
|
|
3506
|
-
}, this._focusTrap =
|
|
3696
|
+
}, this._focusTrap = ce(() => this.shadowRoot, ".card"), this._onKeyDown = (e) => {
|
|
3507
3697
|
var t;
|
|
3508
3698
|
e.key === "Escape" && this._cancel(), e.key === "Enter" && ((t = e.target) == null ? void 0 : t.tagName) === "INPUT" && this._submit(), this._focusTrap(e);
|
|
3509
3699
|
};
|
|
@@ -3606,7 +3796,7 @@ const me = class me extends z {
|
|
|
3606
3796
|
`;
|
|
3607
3797
|
}
|
|
3608
3798
|
};
|
|
3609
|
-
me.styles = [J, G,
|
|
3799
|
+
me.styles = [J, G, S`
|
|
3610
3800
|
:host {
|
|
3611
3801
|
display: block;
|
|
3612
3802
|
}
|
|
@@ -3781,25 +3971,25 @@ me.styles = [J, G, k`
|
|
|
3781
3971
|
|
|
3782
3972
|
`];
|
|
3783
3973
|
let W = me;
|
|
3784
|
-
|
|
3974
|
+
pe([
|
|
3785
3975
|
g()
|
|
3786
3976
|
], W.prototype, "_url");
|
|
3787
|
-
|
|
3977
|
+
pe([
|
|
3788
3978
|
g()
|
|
3789
3979
|
], W.prototype, "_name");
|
|
3790
|
-
|
|
3980
|
+
pe([
|
|
3791
3981
|
g()
|
|
3792
3982
|
], W.prototype, "_error");
|
|
3793
|
-
var
|
|
3983
|
+
var ft = Object.defineProperty, re = (a, e, t, i) => {
|
|
3794
3984
|
for (var r = void 0, o = a.length - 1, s; o >= 0; o--)
|
|
3795
3985
|
(s = a[o]) && (r = s(e, t, r) || r);
|
|
3796
|
-
return r &&
|
|
3986
|
+
return r && ft(e, t, r), r;
|
|
3797
3987
|
};
|
|
3798
|
-
const we = class we extends
|
|
3988
|
+
const we = class we extends P {
|
|
3799
3989
|
constructor() {
|
|
3800
3990
|
super(...arguments), this._stream = null, this._error = "", this._captured = null, this._previewUrl = "", this._onBackdropClick = (e) => {
|
|
3801
3991
|
e.target === e.currentTarget && this._cancel();
|
|
3802
|
-
}, this._focusTrap =
|
|
3992
|
+
}, this._focusTrap = ce(() => this.shadowRoot, ".card"), this._onKeyDown = (e) => {
|
|
3803
3993
|
e.key === "Escape" && this._cancel(), this._focusTrap(e);
|
|
3804
3994
|
}, this._capture = () => {
|
|
3805
3995
|
var r, o;
|
|
@@ -3873,7 +4063,7 @@ const we = class we extends z {
|
|
|
3873
4063
|
`;
|
|
3874
4064
|
}
|
|
3875
4065
|
};
|
|
3876
|
-
we.styles = [J, G,
|
|
4066
|
+
we.styles = [J, G, S`
|
|
3877
4067
|
:host { display: block; }
|
|
3878
4068
|
|
|
3879
4069
|
.backdrop {
|
|
@@ -3954,29 +4144,29 @@ we.styles = [J, G, k`
|
|
|
3954
4144
|
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
|
3955
4145
|
@keyframes slideUp { from { transform: translateY(18px) scale(0.97); } to { transform: translateY(0) scale(1); } }
|
|
3956
4146
|
`];
|
|
3957
|
-
let
|
|
4147
|
+
let q = we;
|
|
3958
4148
|
re([
|
|
3959
4149
|
g()
|
|
3960
|
-
],
|
|
4150
|
+
], q.prototype, "_stream");
|
|
3961
4151
|
re([
|
|
3962
4152
|
g()
|
|
3963
|
-
],
|
|
4153
|
+
], q.prototype, "_error");
|
|
3964
4154
|
re([
|
|
3965
4155
|
g()
|
|
3966
|
-
],
|
|
4156
|
+
], q.prototype, "_captured");
|
|
3967
4157
|
re([
|
|
3968
4158
|
g()
|
|
3969
|
-
],
|
|
3970
|
-
var
|
|
4159
|
+
], q.prototype, "_previewUrl");
|
|
4160
|
+
var ut = Object.defineProperty, ee = (a, e, t, i) => {
|
|
3971
4161
|
for (var r = void 0, o = a.length - 1, s; o >= 0; o--)
|
|
3972
4162
|
(s = a[o]) && (r = s(e, t, r) || r);
|
|
3973
|
-
return r &&
|
|
4163
|
+
return r && ut(e, t, r), r;
|
|
3974
4164
|
};
|
|
3975
|
-
const ye = class ye extends
|
|
4165
|
+
const ye = class ye extends P {
|
|
3976
4166
|
constructor() {
|
|
3977
4167
|
super(...arguments), this._stream = null, this._recording = !1, this._error = "", this._recordedBlob = null, this._previewUrl = "", this._recorder = null, this._chunks = [], this._onBackdropClick = (e) => {
|
|
3978
4168
|
e.target === e.currentTarget && this._cancel();
|
|
3979
|
-
}, this._focusTrap =
|
|
4169
|
+
}, this._focusTrap = ce(() => this.shadowRoot, ".card"), this._onKeyDown = (e) => {
|
|
3980
4170
|
e.key === "Escape" && this._cancel(), this._focusTrap(e);
|
|
3981
4171
|
}, this._startRecording = async () => {
|
|
3982
4172
|
var e;
|
|
@@ -4071,7 +4261,7 @@ const ye = class ye extends z {
|
|
|
4071
4261
|
`;
|
|
4072
4262
|
}
|
|
4073
4263
|
};
|
|
4074
|
-
ye.styles = [J, G,
|
|
4264
|
+
ye.styles = [J, G, S`
|
|
4075
4265
|
:host { display: block; }
|
|
4076
4266
|
|
|
4077
4267
|
.backdrop {
|
|
@@ -4170,32 +4360,32 @@ ye.styles = [J, G, k`
|
|
|
4170
4360
|
@keyframes slideUp { from { transform: translateY(18px) scale(0.97); } to { transform: translateY(0) scale(1); } }
|
|
4171
4361
|
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
|
|
4172
4362
|
`];
|
|
4173
|
-
let
|
|
4174
|
-
|
|
4363
|
+
let L = ye;
|
|
4364
|
+
ee([
|
|
4175
4365
|
g()
|
|
4176
|
-
],
|
|
4177
|
-
|
|
4366
|
+
], L.prototype, "_stream");
|
|
4367
|
+
ee([
|
|
4178
4368
|
g()
|
|
4179
|
-
],
|
|
4180
|
-
|
|
4369
|
+
], L.prototype, "_recording");
|
|
4370
|
+
ee([
|
|
4181
4371
|
g()
|
|
4182
|
-
],
|
|
4183
|
-
|
|
4372
|
+
], L.prototype, "_error");
|
|
4373
|
+
ee([
|
|
4184
4374
|
g()
|
|
4185
|
-
],
|
|
4186
|
-
|
|
4375
|
+
], L.prototype, "_recordedBlob");
|
|
4376
|
+
ee([
|
|
4187
4377
|
g()
|
|
4188
|
-
],
|
|
4189
|
-
var
|
|
4378
|
+
], L.prototype, "_previewUrl");
|
|
4379
|
+
var ht = Object.defineProperty, $ = (a, e, t, i) => {
|
|
4190
4380
|
for (var r = void 0, o = a.length - 1, s; o >= 0; o--)
|
|
4191
4381
|
(s = a[o]) && (r = s(e, t, r) || r);
|
|
4192
|
-
return r &&
|
|
4382
|
+
return r && ht(e, t, r), r;
|
|
4193
4383
|
};
|
|
4194
|
-
const
|
|
4195
|
-
var
|
|
4196
|
-
const
|
|
4384
|
+
const De = /* @__PURE__ */ new Set(["unsplash"]);
|
|
4385
|
+
var E;
|
|
4386
|
+
const C = (E = class extends P {
|
|
4197
4387
|
constructor() {
|
|
4198
|
-
super(), this.config = null, this._isOpen = !1, this._activeConnector = null, this._showUrlDialog = !1, this._showCameraDialog = !1, this._showScreenCastDialog = !1, this._previewFileId = null, this._previewDims = "—", this._fullscreenPreviewUrl = null, this._fullscreenVideoFile = null, this._fullscreenZoomed = !1, this._fsPanX = 0, this._fsPanY = 0, this._fsDragging = !1, this._fsDragStartX = 0, this._fsDragStartY = 0, this._fsPanStartX = 0, this._fsPanStartY = 0, this._bodyDragOver = !1, this._isMinimized = !1, this._isPillExpanded = !1, this._bodyDragCounter = 0, this._videoBlobUrls = /* @__PURE__ */ new Map(), this._engine = null, this._cachedSources = X, this._cachedSourcesConfig = void 0, this._rejectedTimers = /* @__PURE__ */ new Map(), this._apiBase = null, this._authHeaders = null, this._authResolveId = 0, this._prevStoreState = null, this._unsubStoreEvents = null, this._portalContainer = null, this._onFilesSelected = (e) => {
|
|
4388
|
+
super(), this.config = null, this._isOpen = !1, this._activeConnector = null, this._showUrlDialog = !1, this._showCameraDialog = !1, this._showScreenCastDialog = !1, this._previewFileId = null, this._previewDims = "—", this._fullscreenPreviewUrl = null, this._fullscreenVideoFile = null, this._fullscreenZoomed = !1, this._fsPanX = 0, this._fsPanY = 0, this._fsDragging = !1, this._fsDragStartX = 0, this._fsDragStartY = 0, this._fsPanStartX = 0, this._fsPanStartY = 0, this._bodyDragOver = !1, this._isMinimized = !1, this._isPillExpanded = !1, this._bodyDragCounter = 0, this._videoBlobUrls = /* @__PURE__ */ new Map(), this._engine = null, this._cachedSources = X, this._cachedSourcesConfig = void 0, this._rejectedTimers = /* @__PURE__ */ new Map(), this._closeOnCompleteTimer = null, this._apiBase = null, this._authHeaders = null, this._authResolveId = 0, this._prevStoreState = null, this._unsubStoreEvents = null, this._portalContainer = null, this._onFilesSelected = (e) => {
|
|
4199
4389
|
this._processIncomingFiles(e.detail.files);
|
|
4200
4390
|
}, this._onDropTileSourceClick = (e) => {
|
|
4201
4391
|
this._handleSourceActivation(e.detail.source.id);
|
|
@@ -4230,24 +4420,24 @@ const y = (S = class extends z {
|
|
|
4230
4420
|
return;
|
|
4231
4421
|
}
|
|
4232
4422
|
if ((((o = (r = this.config) == null ? void 0 : r.connectors) == null ? void 0 : o.providers) ?? []).includes(e)) {
|
|
4233
|
-
if (
|
|
4423
|
+
if (De.has(e)) {
|
|
4234
4424
|
if (!customElements.get("sfx-search-provider-browser")) {
|
|
4235
|
-
const { SfxSearchProviderBrowser: n } = await import("./search-provider-browser-
|
|
4425
|
+
const { SfxSearchProviderBrowser: n } = await import("./search-provider-browser-Dywv08pq.js");
|
|
4236
4426
|
customElements.define("sfx-search-provider-browser", n);
|
|
4237
4427
|
}
|
|
4238
4428
|
} else if (!customElements.get("sfx-provider-browser")) {
|
|
4239
|
-
const { SfxProviderBrowser: n } = await import("./provider-browser-
|
|
4429
|
+
const { SfxProviderBrowser: n } = await import("./provider-browser-ZgbnfTHX.js");
|
|
4240
4430
|
customElements.define("sfx-provider-browser", n);
|
|
4241
4431
|
}
|
|
4242
4432
|
this._activeConnector = e;
|
|
4243
4433
|
}
|
|
4244
4434
|
}, this._onUrlSubmit = (e) => {
|
|
4245
|
-
var u, h,
|
|
4435
|
+
var u, h, x;
|
|
4246
4436
|
this._showUrlDialog = !1;
|
|
4247
|
-
const { url: t, name: i } = e.detail, r = (u = this.config) == null ? void 0 : u.callbacks, o =
|
|
4437
|
+
const { url: t, name: i } = e.detail, r = (u = this.config) == null ? void 0 : u.callbacks, o = We(i), s = o.startsWith("image/"), n = this._store.getState(), d = se({ name: i, size: 0, type: o }, n.restrictions, n.files);
|
|
4248
4438
|
if (d) {
|
|
4249
|
-
const
|
|
4250
|
-
id:
|
|
4439
|
+
const f = {
|
|
4440
|
+
id: H(),
|
|
4251
4441
|
status: "rejected",
|
|
4252
4442
|
file: null,
|
|
4253
4443
|
remoteUrl: t,
|
|
@@ -4267,11 +4457,11 @@ const y = (S = class extends z {
|
|
|
4267
4457
|
tags: [],
|
|
4268
4458
|
remoteInfo: null
|
|
4269
4459
|
};
|
|
4270
|
-
|
|
4460
|
+
I(this._store, f), this._dispatchPublic(v.FILE_REJECTED, { file: f, reason: d }), (h = r == null ? void 0 : r.onFileRejected) == null || h.call(r, f, d);
|
|
4271
4461
|
return;
|
|
4272
4462
|
}
|
|
4273
|
-
const
|
|
4274
|
-
id:
|
|
4463
|
+
const c = {
|
|
4464
|
+
id: H(),
|
|
4275
4465
|
status: "idle",
|
|
4276
4466
|
file: null,
|
|
4277
4467
|
remoteUrl: t,
|
|
@@ -4291,7 +4481,7 @@ const y = (S = class extends z {
|
|
|
4291
4481
|
tags: [],
|
|
4292
4482
|
remoteInfo: null
|
|
4293
4483
|
};
|
|
4294
|
-
|
|
4484
|
+
I(this._store, c), this._dispatchPublic(v.FILE_ADDED, { file: c }), (x = r == null ? void 0 : r.onFileAdded) == null || x.call(r, c), this._store.getState().queueConfig.autoProceed && this.upload();
|
|
4295
4485
|
}, this._onUrlCancel = () => {
|
|
4296
4486
|
this._showUrlDialog = !1;
|
|
4297
4487
|
}, this._onCameraCapture = (e) => {
|
|
@@ -4311,7 +4501,7 @@ const y = (S = class extends z {
|
|
|
4311
4501
|
}, this._onFillMetadata = () => {
|
|
4312
4502
|
var t, i, r;
|
|
4313
4503
|
const e = [...this._store.getState().files.values()].filter(
|
|
4314
|
-
(o) =>
|
|
4504
|
+
(o) => E._MODIFIABLE_STATUSES.has(o.status)
|
|
4315
4505
|
);
|
|
4316
4506
|
this._dispatchPublic(v.FILL_METADATA, { files: e }), (r = (i = (t = this.config) == null ? void 0 : t.callbacks) == null ? void 0 : i.onFillMetadata) == null || r.call(i, e);
|
|
4317
4507
|
}, this._onFileRetry = (e) => {
|
|
@@ -4323,7 +4513,7 @@ const y = (S = class extends z {
|
|
|
4323
4513
|
}, this._onClearAll = () => {
|
|
4324
4514
|
var i, r, o;
|
|
4325
4515
|
const e = (i = this.config) == null ? void 0 : i.callbacks;
|
|
4326
|
-
(r = this._engine) == null || r.cancelAll();
|
|
4516
|
+
this._closeOnCompleteTimer && (clearTimeout(this._closeOnCompleteTimer), this._closeOnCompleteTimer = null), (r = this._engine) == null || r.cancelAll();
|
|
4327
4517
|
const t = [...this._store.getState().files.values()];
|
|
4328
4518
|
for (const s of t)
|
|
4329
4519
|
s.previewUrl && URL.revokeObjectURL(s.previewUrl), this._dispatchPublic(v.FILE_REMOVED, { file: s }), (o = e == null ? void 0 : e.onFileRemoved) == null || o.call(e, s);
|
|
@@ -4366,7 +4556,7 @@ const y = (S = class extends z {
|
|
|
4366
4556
|
);
|
|
4367
4557
|
if (d) {
|
|
4368
4558
|
const u = {
|
|
4369
|
-
id:
|
|
4559
|
+
id: H(),
|
|
4370
4560
|
status: "rejected",
|
|
4371
4561
|
file: null,
|
|
4372
4562
|
remoteUrl: null,
|
|
@@ -4386,11 +4576,11 @@ const y = (S = class extends z {
|
|
|
4386
4576
|
tags: [],
|
|
4387
4577
|
remoteInfo: s
|
|
4388
4578
|
};
|
|
4389
|
-
|
|
4579
|
+
I(this._store, u), this._dispatchPublic(v.FILE_REJECTED, { file: u, reason: d }), (r = t == null ? void 0 : t.onFileRejected) == null || r.call(t, u, d);
|
|
4390
4580
|
continue;
|
|
4391
4581
|
}
|
|
4392
|
-
const
|
|
4393
|
-
id:
|
|
4582
|
+
const c = {
|
|
4583
|
+
id: H(),
|
|
4394
4584
|
status: "idle",
|
|
4395
4585
|
file: null,
|
|
4396
4586
|
remoteUrl: null,
|
|
@@ -4410,7 +4600,7 @@ const y = (S = class extends z {
|
|
|
4410
4600
|
tags: [],
|
|
4411
4601
|
remoteInfo: s
|
|
4412
4602
|
};
|
|
4413
|
-
|
|
4603
|
+
I(this._store, c), this._dispatchPublic(v.FILE_ADDED, { file: c }), (o = t == null ? void 0 : t.onFileAdded) == null || o.call(t, c);
|
|
4414
4604
|
}
|
|
4415
4605
|
this._activeConnector = null, this._store.getState().queueConfig.autoProceed && this.upload();
|
|
4416
4606
|
}, this._onConnectorClose = () => {
|
|
@@ -4418,20 +4608,26 @@ const y = (S = class extends z {
|
|
|
4418
4608
|
}, this._onConnectorBackdropClick = (e) => {
|
|
4419
4609
|
e.target === e.currentTarget && (this._activeConnector = null);
|
|
4420
4610
|
}, this._onPrimaryAction = () => {
|
|
4421
|
-
var e, t;
|
|
4422
|
-
this._dispatchPublic(v.COMPLETE_ACTION, {}), ((e = this.config) == null ? void 0 : e.mode) === "modal" ? this.close() : ((
|
|
4611
|
+
var e, t, i, r, o;
|
|
4612
|
+
this._dispatchPublic(v.COMPLETE_ACTION, {}), (i = (t = (e = this.config) == null ? void 0 : e.callbacks) == null ? void 0 : t.onCompleteAction) == null || i.call(t), ((r = this.config) == null ? void 0 : r.mode) === "modal" ? this.close() : ((o = this.config) == null ? void 0 : o.clearOnComplete) !== !1 && this._onClearAll();
|
|
4423
4613
|
}, this._onInlineDismiss = () => {
|
|
4424
4614
|
var e, t, i;
|
|
4425
4615
|
(i = (t = (e = this.config) == null ? void 0 : e.callbacks) == null ? void 0 : t.onCancel) == null || i.call(t), this._dispatchPublic(v.CANCEL, {});
|
|
4616
|
+
}, this._onSuccessCardClose = () => {
|
|
4617
|
+
var e, t, i, r;
|
|
4618
|
+
((e = this.config) == null ? void 0 : e.mode) === "inline" ? (this._dispatchPublic(v.COMPLETE_ACTION, {}), (r = (i = (t = this.config) == null ? void 0 : t.callbacks) == null ? void 0 : i.onCompleteAction) == null || r.call(i), this._onClearAll()) : this._onModalDismiss();
|
|
4426
4619
|
}, this._onModalDismiss = () => {
|
|
4427
|
-
var e, t, i;
|
|
4428
|
-
(
|
|
4620
|
+
var e, t, i, r;
|
|
4621
|
+
this._phase === "uploading" && ((e = this._engine) == null || e.cancelAll()), (r = (i = (t = this.config) == null ? void 0 : t.callbacks) == null ? void 0 : i.onCancel) == null || r.call(i), this._dispatchPublic(v.CANCEL, {}), this.close();
|
|
4429
4622
|
}, this._onMinimize = () => {
|
|
4430
4623
|
this._isMinimized = !0, this._isPillExpanded = !0, this.requestUpdate();
|
|
4431
4624
|
}, this._onPillClick = () => {
|
|
4432
4625
|
this._isPillExpanded = !this._isPillExpanded, this.requestUpdate();
|
|
4433
|
-
}, this.
|
|
4626
|
+
}, this._onPillExpand = () => {
|
|
4434
4627
|
this._isMinimized = !1, this._isPillExpanded = !1, this._isOpen = !0, this.requestUpdate();
|
|
4628
|
+
}, this._onPillDismiss = () => {
|
|
4629
|
+
var e, t, i, r;
|
|
4630
|
+
this._isMinimized = !1, this._isPillExpanded = !1, this._phase === "uploading" && ((e = this._engine) == null || e.cancelAll()), (r = (i = (t = this.config) == null ? void 0 : t.callbacks) == null ? void 0 : i.onCancel) == null || r.call(i), this._dispatchPublic(v.CANCEL, {}), this.close();
|
|
4435
4631
|
}, this._onModalBackdropClick = (e) => {
|
|
4436
4632
|
e.target === e.currentTarget && this._onModalDismiss();
|
|
4437
4633
|
}, this._onBodyDragEnter = (e) => {
|
|
@@ -4480,7 +4676,7 @@ const y = (S = class extends z {
|
|
|
4480
4676
|
(Math.abs(i) > 3 || Math.abs(r) > 3) && (this._fsDragDidMove = !0), this._fsPanX = this._fsPanStartX + i, this._fsPanY = this._fsPanStartY + r, this.requestUpdate(), e.preventDefault();
|
|
4481
4677
|
}, this._onFsClose = (e) => {
|
|
4482
4678
|
e == null || e.stopPropagation(), this._fullscreenPreviewUrl = null, this._fullscreenVideoFile = null, this._fullscreenZoomed = !1, this._fsPanX = 0, this._fsPanY = 0;
|
|
4483
|
-
}, this._store =
|
|
4679
|
+
}, this._store = Oe(), this._storeCtrl = new Me(this, this._store);
|
|
4484
4680
|
}
|
|
4485
4681
|
// --- Public API ---
|
|
4486
4682
|
/** Open the uploader (modal mode). */
|
|
@@ -4491,17 +4687,17 @@ const y = (S = class extends z {
|
|
|
4491
4687
|
/** Close the uploader (modal mode). Optionally clears all files (controlled by clearOnClose config). */
|
|
4492
4688
|
close() {
|
|
4493
4689
|
var e, t, i, r;
|
|
4494
|
-
this._isOpen && (this._isOpen = !1, ((e = this.config) == null ? void 0 : e.clearOnClose) !== !1 && this._onClearAll(), this._previewFileId = null, (r = (i = (t = this.config) == null ? void 0 : t.callbacks) == null ? void 0 : i.onClose) == null || r.call(i), this._dispatchPublic(v.CLOSE, {}), this.requestUpdate());
|
|
4690
|
+
this._isOpen && (this._isOpen = !1, this._closeOnCompleteTimer && (clearTimeout(this._closeOnCompleteTimer), this._closeOnCompleteTimer = null), ((e = this.config) == null ? void 0 : e.clearOnClose) !== !1 && this._onClearAll(), this._previewFileId = null, (r = (i = (t = this.config) == null ? void 0 : t.callbacks) == null ? void 0 : i.onClose) == null || r.call(i), this._dispatchPublic(v.CLOSE, {}), this.requestUpdate());
|
|
4495
4691
|
}
|
|
4496
4692
|
/** Start uploading all queued files. */
|
|
4497
4693
|
upload() {
|
|
4498
|
-
var r, o, s, n, d;
|
|
4694
|
+
var r, o, s, n, d, c, u;
|
|
4499
4695
|
if (this._ensureEngine(), !this._engine) {
|
|
4500
4696
|
console.warn("[sfx-uploader] Cannot upload: auth not resolved yet");
|
|
4501
4697
|
return;
|
|
4502
4698
|
}
|
|
4503
4699
|
const e = [...this._store.getState().files.values()].filter(
|
|
4504
|
-
(
|
|
4700
|
+
(h) => h.status === "idle" || h.status === "queued"
|
|
4505
4701
|
);
|
|
4506
4702
|
if ((o = (r = this.config) == null ? void 0 : r.callbacks) != null && o.onBeforeUpload && this.config.callbacks.onBeforeUpload(e) === !1)
|
|
4507
4703
|
return;
|
|
@@ -4511,7 +4707,7 @@ const y = (S = class extends z {
|
|
|
4511
4707
|
cancelable: !0,
|
|
4512
4708
|
detail: { files: e }
|
|
4513
4709
|
});
|
|
4514
|
-
this.dispatchEvent(t) && (this._dispatchPublic(v.UPLOAD_STARTED, { files: e }), (d = (n = (s = this.config) == null ? void 0 : s.callbacks) == null ? void 0 : n.onUploadStarted) == null || d.call(n, e), this._engine.uploadAll());
|
|
4710
|
+
this.dispatchEvent(t) && (this._dispatchPublic(v.UPLOAD_STARTED, { files: e }), (d = (n = (s = this.config) == null ? void 0 : s.callbacks) == null ? void 0 : n.onUploadStarted) == null || d.call(n, e), this._engine.uploadAll(), (c = this.config) != null && c.minimizeOnUpload && ((u = this.config) == null ? void 0 : u.mode) !== "inline" && (this._isMinimized = !0, this._isPillExpanded = !0, this.requestUpdate()));
|
|
4515
4711
|
}
|
|
4516
4712
|
/** Programmatically add files. */
|
|
4517
4713
|
addFiles(e) {
|
|
@@ -4547,7 +4743,7 @@ const y = (S = class extends z {
|
|
|
4547
4743
|
/** Update metadata and/or tags for a single file. */
|
|
4548
4744
|
updateFileMeta(e, t, i) {
|
|
4549
4745
|
const r = this._store.getState().files, o = r.get(e);
|
|
4550
|
-
if (!o || !
|
|
4746
|
+
if (!o || !E._MODIFIABLE_STATUSES.has(o.status)) return;
|
|
4551
4747
|
const s = new Map(r);
|
|
4552
4748
|
s.set(e, {
|
|
4553
4749
|
...o,
|
|
@@ -4561,7 +4757,7 @@ const y = (S = class extends z {
|
|
|
4561
4757
|
let r = !1;
|
|
4562
4758
|
for (const { fileId: o, meta: s, tags: n } of e) {
|
|
4563
4759
|
const d = t.get(o);
|
|
4564
|
-
!d || !
|
|
4760
|
+
!d || !E._MODIFIABLE_STATUSES.has(d.status) || (i.set(o, {
|
|
4565
4761
|
...d,
|
|
4566
4762
|
meta: s != null ? { ...d.meta, ...s } : d.meta,
|
|
4567
4763
|
tags: n ?? d.tags
|
|
@@ -4583,12 +4779,14 @@ const y = (S = class extends z {
|
|
|
4583
4779
|
if (document.querySelector("style[data-sfx-upload-float-styles]")) return;
|
|
4584
4780
|
const e = document.createElement("style");
|
|
4585
4781
|
e.setAttribute("data-sfx-upload-float-styles", ""), e.textContent = `
|
|
4586
|
-
[data-sfx-upload-float] .upload-float { position:fixed; bottom:24px; right:24px; z-index:10000; width:
|
|
4782
|
+
[data-sfx-upload-float] .upload-float { position:fixed; bottom:24px; right:24px; z-index:10000; width:470px; border-radius:12px; background:#fff; box-shadow:0 8px 32px rgba(0,0,0,0.12),0 2px 8px rgba(0,0,0,0.06); overflow:hidden; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; animation:sfxFloatIn .3s ease both; }
|
|
4587
4783
|
[data-sfx-upload-float] .float-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid #e8edf5; }
|
|
4588
4784
|
[data-sfx-upload-float] .float-header-left { display:flex; align-items:center; gap:8px; }
|
|
4589
4785
|
[data-sfx-upload-float] .float-icon { width:28px; height:28px; border-radius:6px; background:#eff6ff; color:#2563eb; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
|
|
4590
4786
|
[data-sfx-upload-float] .float-icon svg { width:14px; height:14px; }
|
|
4591
4787
|
[data-sfx-upload-float] .float-icon.done { background:#f0fdf4; color:#22c55e; }
|
|
4788
|
+
[data-sfx-upload-float] .float-icon.warn { background:#fffbeb; color:#f59e0b; }
|
|
4789
|
+
[data-sfx-upload-float] .float-icon.error { background:#fef2f2; color:#ef4444; }
|
|
4592
4790
|
[data-sfx-upload-float] .float-title { font-size:13px; font-weight:600; color:#1e293b; }
|
|
4593
4791
|
[data-sfx-upload-float] .float-subtitle { font-size:11px; color:#94a3b8; }
|
|
4594
4792
|
[data-sfx-upload-float] .float-actions { display:flex; gap:4px; }
|
|
@@ -4600,27 +4798,40 @@ const y = (S = class extends z {
|
|
|
4600
4798
|
[data-sfx-upload-float] .float-progress-label { font-size:12px; color:#475569; }
|
|
4601
4799
|
[data-sfx-upload-float] .float-progress-pct { font-size:12px; font-weight:600; color:#2563eb; }
|
|
4602
4800
|
[data-sfx-upload-float] .float-progress-pct.done { color:#22c55e; }
|
|
4801
|
+
[data-sfx-upload-float] .float-progress-pct.warn { color:#f59e0b; }
|
|
4802
|
+
[data-sfx-upload-float] .float-progress-pct.error { color:#ef4444; }
|
|
4603
4803
|
[data-sfx-upload-float] .float-bar { height:4px; background:#e8edf5; border-radius:2px; overflow:hidden; }
|
|
4604
4804
|
[data-sfx-upload-float] .float-bar-fill { height:100%; background:#2563eb; border-radius:2px; transition:width .3s ease; }
|
|
4605
4805
|
[data-sfx-upload-float] .float-bar-fill.done { background:#22c55e; }
|
|
4806
|
+
[data-sfx-upload-float] .float-bar-fill.warn { background:#f59e0b; }
|
|
4807
|
+
[data-sfx-upload-float] .float-bar-fill.error { background:#ef4444; }
|
|
4606
4808
|
[data-sfx-upload-float] .float-items { max-height:200px; overflow-y:auto; }
|
|
4607
|
-
[data-sfx-upload-float] .float-item { display:flex; align-items:center; gap:10px; padding:8px 14px; border-bottom:1px solid #f1f5f9; }
|
|
4809
|
+
[data-sfx-upload-float] .float-item { display:flex; align-items:center; gap:10px; padding:8px 14px; border-bottom:1px solid #f1f5f9; overflow:hidden; }
|
|
4608
4810
|
[data-sfx-upload-float] .float-item:last-child { border-bottom:none; }
|
|
4609
4811
|
[data-sfx-upload-float] .float-item-thumb { width:32px; height:32px; border-radius:6px; background:#f8fafc; display:flex; align-items:center; justify-content:center; color:#94a3b8; flex-shrink:0; }
|
|
4610
4812
|
[data-sfx-upload-float] .float-item-thumb svg { width:16px; height:16px; }
|
|
4611
|
-
[data-sfx-upload-float] .float-item-info { flex:1; min-width:0; }
|
|
4813
|
+
[data-sfx-upload-float] .float-item-info { flex:1; min-width:0; overflow:hidden; }
|
|
4612
4814
|
[data-sfx-upload-float] .float-item-name { font-size:12px; font-weight:500; color:#1e293b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
|
4613
4815
|
[data-sfx-upload-float] .float-item-size { font-size:11px; color:#94a3b8; }
|
|
4614
4816
|
[data-sfx-upload-float] .float-item-done { width:18px; height:18px; border-radius:50%; background:#f0fdf4; color:#22c55e; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
|
|
4615
4817
|
[data-sfx-upload-float] .float-item-done svg { width:12px; height:12px; }
|
|
4616
4818
|
[data-sfx-upload-float] .float-item-spinner { width:16px; height:16px; border:2px solid #e8edf5; border-top-color:#2563eb; border-radius:50%; animation:sfxSpin .8s linear infinite; flex-shrink:0; }
|
|
4617
|
-
[data-sfx-upload-float] .float-item-
|
|
4618
|
-
[data-sfx-upload-float] .float-
|
|
4819
|
+
[data-sfx-upload-float] .float-item-status { display:flex; flex-direction:row; align-items:center; gap:4px; flex-shrink:0; }
|
|
4820
|
+
[data-sfx-upload-float] .float-item-error-wrap { position:relative; display:flex; align-items:center; flex-shrink:0; }
|
|
4821
|
+
[data-sfx-upload-float] .float-item-error-icon { width:16px; height:16px; color:#ef4444; flex-shrink:0; cursor:pointer; }
|
|
4822
|
+
[data-sfx-upload-float] .float-item-tooltip { display:none; position:absolute; right:calc(100% + 8px); top:50%; transform:translateY(-50%); background:#fff; color:#1e293b; font-size:11px; padding:6px 10px; border-radius:6px; white-space:nowrap; pointer-events:none; z-index:10; box-shadow:0 2px 12px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.08); }
|
|
4823
|
+
[data-sfx-upload-float] .float-item-error-wrap:hover .float-item-tooltip { display:block; }
|
|
4824
|
+
[data-sfx-upload-float] .float-item-retry { width:24px; height:24px; border:none; background:none; color:#2563eb; cursor:pointer; padding:4px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:4px; }
|
|
4825
|
+
[data-sfx-upload-float] .float-item-retry svg { width:14px; height:14px; }
|
|
4826
|
+
[data-sfx-upload-float] .float-item-retry:hover { background:#f1f5f9; color:#1d4ed8; }
|
|
4827
|
+
[data-sfx-upload-float] .float-collapsed { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; width:470px; border-radius:12px; }
|
|
4619
4828
|
[data-sfx-upload-float] .float-collapsed-left { display:flex; align-items:center; gap:8px; }
|
|
4620
4829
|
[data-sfx-upload-float] .float-collapsed-spinner { width:18px; height:18px; border:2.5px solid #e8edf5; border-top-color:#2563eb; border-radius:50%; animation:sfxSpin .8s linear infinite; flex-shrink:0; }
|
|
4621
4830
|
[data-sfx-upload-float] .float-collapsed-icon { width:18px; height:18px; flex-shrink:0; }
|
|
4622
4831
|
[data-sfx-upload-float] .float-collapsed-icon svg { width:18px; height:18px; }
|
|
4623
4832
|
[data-sfx-upload-float] .float-collapsed-icon.done { color:#22c55e; }
|
|
4833
|
+
[data-sfx-upload-float] .float-collapsed-icon.warn { color:#f59e0b; }
|
|
4834
|
+
[data-sfx-upload-float] .float-collapsed-icon.error { color:#ef4444; }
|
|
4624
4835
|
[data-sfx-upload-float] .float-collapsed-text { font-size:13px; font-weight:500; color:#1e293b; white-space:nowrap; }
|
|
4625
4836
|
[data-sfx-upload-float] .float-collapsed-pct { font-size:13px; font-weight:600; color:#2563eb; }
|
|
4626
4837
|
[data-sfx-upload-float] .float-collapsed-actions { display:flex; gap:4px; }
|
|
@@ -4633,7 +4844,7 @@ const y = (S = class extends z {
|
|
|
4633
4844
|
}
|
|
4634
4845
|
_updateFloatingPortal() {
|
|
4635
4846
|
const e = [...this._storeCtrl.state.files.values()];
|
|
4636
|
-
this._isMinimized && e.length > 0 ? (this._injectFloatStyles(), this._portalContainer || (this._portalContainer = document.createElement("div"), this._portalContainer.setAttribute("data-sfx-upload-float", ""), document.body.appendChild(this._portalContainer)),
|
|
4847
|
+
this._isMinimized && e.length > 0 ? (this._injectFloatStyles(), this._portalContainer || (this._portalContainer = document.createElement("div"), this._portalContainer.setAttribute("data-sfx-upload-float", ""), document.body.appendChild(this._portalContainer)), ke(this._renderFloatingPill(e), this._portalContainer)) : this._portalContainer && (ke(p, this._portalContainer), this._portalContainer.remove(), this._portalContainer = null);
|
|
4637
4848
|
}
|
|
4638
4849
|
connectedCallback() {
|
|
4639
4850
|
super.connectedCallback(), document.addEventListener("keydown", this._onKeyDown), this._prevStoreState = this._store.getState(), this._unsubStoreEvents = this._store.subscribe(() => this._onStoreChange());
|
|
@@ -4642,7 +4853,7 @@ const y = (S = class extends z {
|
|
|
4642
4853
|
var e, t, i, r;
|
|
4643
4854
|
super.disconnectedCallback(), document.removeEventListener("keydown", this._onKeyDown), (e = this._unsubStoreEvents) == null || e.call(this), this._unsubStoreEvents = null, this._prevStoreState = null, (t = this._portalContainer) == null || t.remove(), this._portalContainer = null, document.querySelector("[data-sfx-upload-float]") || (i = document.querySelector("style[data-sfx-upload-float-styles]")) == null || i.remove(), this._revokeVideoBlobUrls();
|
|
4644
4855
|
for (const o of this._rejectedTimers.values()) clearTimeout(o);
|
|
4645
|
-
this._rejectedTimers.clear();
|
|
4856
|
+
this._rejectedTimers.clear(), this._closeOnCompleteTimer && (clearTimeout(this._closeOnCompleteTimer), this._closeOnCompleteTimer = null);
|
|
4646
4857
|
for (const o of this._store.getState().files.values())
|
|
4647
4858
|
o.previewUrl && URL.revokeObjectURL(o.previewUrl);
|
|
4648
4859
|
(r = this._engine) == null || r.destroy(), this._engine = null;
|
|
@@ -4675,7 +4886,7 @@ const y = (S = class extends z {
|
|
|
4675
4886
|
}
|
|
4676
4887
|
const i = ++this._authResolveId;
|
|
4677
4888
|
try {
|
|
4678
|
-
const s = await
|
|
4889
|
+
const s = await qe(t);
|
|
4679
4890
|
if (i !== this._authResolveId) return;
|
|
4680
4891
|
this._apiBase = s.apiBase, this._authHeaders = s.headers, this._ensureEngine(), (o = this._engine) == null || o.updateConfig({
|
|
4681
4892
|
apiBase: this._apiBase,
|
|
@@ -4687,7 +4898,7 @@ const y = (S = class extends z {
|
|
|
4687
4898
|
}
|
|
4688
4899
|
}
|
|
4689
4900
|
_ensureEngine() {
|
|
4690
|
-
!this._engine && this._apiBase && this._authHeaders && (this._engine = new
|
|
4901
|
+
!this._engine && this._apiBase && this._authHeaders && (this._engine = new He(this._store, {
|
|
4691
4902
|
apiBase: this._apiBase,
|
|
4692
4903
|
authHeaders: this._authHeaders
|
|
4693
4904
|
}), this._engine.start());
|
|
@@ -4703,46 +4914,54 @@ const y = (S = class extends z {
|
|
|
4703
4914
|
* for file status transitions.
|
|
4704
4915
|
*/
|
|
4705
4916
|
_onStoreChange() {
|
|
4706
|
-
var r, o, s, n, d,
|
|
4917
|
+
var r, o, s, n, d, c, u, h;
|
|
4707
4918
|
const e = this._store.getState(), t = this._prevStoreState;
|
|
4708
4919
|
if (this._prevStoreState = e, !t) return;
|
|
4709
4920
|
const i = (r = this.config) == null ? void 0 : r.callbacks;
|
|
4710
|
-
for (const [
|
|
4711
|
-
const
|
|
4712
|
-
if (
|
|
4713
|
-
if (
|
|
4714
|
-
switch (
|
|
4921
|
+
for (const [x, f] of e.files) {
|
|
4922
|
+
const m = t.files.get(x);
|
|
4923
|
+
if (m) {
|
|
4924
|
+
if (m.status !== f.status)
|
|
4925
|
+
switch (f.status) {
|
|
4715
4926
|
case "uploading":
|
|
4716
4927
|
break;
|
|
4717
4928
|
case "complete":
|
|
4718
|
-
|
|
4929
|
+
f.response && (this._dispatchPublic(v.UPLOAD_COMPLETE, { file: f, response: f.response }), (o = i == null ? void 0 : i.onUploadComplete) == null || o.call(i, f, f.response));
|
|
4719
4930
|
break;
|
|
4720
4931
|
case "error":
|
|
4721
4932
|
case "failed": {
|
|
4722
|
-
const
|
|
4723
|
-
this._dispatchPublic(v.UPLOAD_ERROR, { file:
|
|
4933
|
+
const _ = new Error(f.error ?? "Upload failed");
|
|
4934
|
+
this._dispatchPublic(v.UPLOAD_ERROR, { file: f, error: _ }), (s = i == null ? void 0 : i.onUploadError) == null || s.call(i, f, _);
|
|
4724
4935
|
break;
|
|
4725
4936
|
}
|
|
4726
4937
|
case "retrying":
|
|
4727
|
-
this._dispatchPublic(v.UPLOAD_RETRY, { file:
|
|
4938
|
+
this._dispatchPublic(v.UPLOAD_RETRY, { file: f, attempt: f.retryCount }), (n = i == null ? void 0 : i.onUploadRetry) == null || n.call(i, f, f.retryCount);
|
|
4728
4939
|
break;
|
|
4729
4940
|
}
|
|
4730
|
-
|
|
4941
|
+
f.status === "uploading" && m.progress !== f.progress && (this._dispatchPublic(v.UPLOAD_PROGRESS, { file: f, progress: f.progress, speed: f.speed }), (d = i == null ? void 0 : i.onUploadProgress) == null || d.call(i, f, f.progress, f.speed));
|
|
4731
4942
|
}
|
|
4732
4943
|
}
|
|
4733
4944
|
if (e.totalProgress !== t.totalProgress || e.totalSpeed !== t.totalSpeed) {
|
|
4734
|
-
const
|
|
4945
|
+
const x = e.totalSpeed > 0 ? (e.totalBytes - e.totalBytesUploaded) / e.totalSpeed : 0;
|
|
4735
4946
|
this._dispatchPublic(v.TOTAL_PROGRESS, {
|
|
4736
4947
|
percentage: e.totalProgress,
|
|
4737
4948
|
speed: e.totalSpeed,
|
|
4738
|
-
eta:
|
|
4739
|
-
}), (
|
|
4949
|
+
eta: x
|
|
4950
|
+
}), (c = i == null ? void 0 : i.onTotalProgress) == null || c.call(i, e.totalProgress, e.totalSpeed, x);
|
|
4740
4951
|
}
|
|
4741
4952
|
if (t.isUploading && !e.isUploading) {
|
|
4742
|
-
const
|
|
4743
|
-
if (!
|
|
4744
|
-
const
|
|
4745
|
-
this._dispatchPublic(v.ALL_COMPLETE, { successful:
|
|
4953
|
+
const x = [...e.files.values()];
|
|
4954
|
+
if (!x.some((m) => m.status === "cancelled")) {
|
|
4955
|
+
const m = x.filter((y) => y.status === "complete"), _ = x.filter((y) => y.status === "failed" || y.status === "error");
|
|
4956
|
+
this._dispatchPublic(v.ALL_COMPLETE, { successful: m, failed: _ }), (u = i == null ? void 0 : i.onAllComplete) == null || u.call(i, m, _);
|
|
4957
|
+
const w = (h = this.config) == null ? void 0 : h.closeOnComplete;
|
|
4958
|
+
if (w) {
|
|
4959
|
+
const y = typeof w == "number" ? w : 1500;
|
|
4960
|
+
this._closeOnCompleteTimer = setTimeout(() => {
|
|
4961
|
+
var k, D, _e;
|
|
4962
|
+
this._closeOnCompleteTimer = null, this._phase === "complete" && (this._dispatchPublic(v.COMPLETE_ACTION, {}), (_e = (D = (k = this.config) == null ? void 0 : k.callbacks) == null ? void 0 : D.onCompleteAction) == null || _e.call(D), this.close());
|
|
4963
|
+
}, y);
|
|
4964
|
+
}
|
|
4746
4965
|
}
|
|
4747
4966
|
}
|
|
4748
4967
|
}
|
|
@@ -4752,14 +4971,14 @@ const y = (S = class extends z {
|
|
|
4752
4971
|
if (e === this._cachedSourcesConfig) return this._cachedSources;
|
|
4753
4972
|
if (this._cachedSourcesConfig = e, !e)
|
|
4754
4973
|
return this._cachedSources = X, this._cachedSources;
|
|
4755
|
-
const t = e.providers.length > 0 ?
|
|
4756
|
-
for (const
|
|
4757
|
-
if (!s.has(
|
|
4758
|
-
if (
|
|
4759
|
-
console.warn(`[sfx-uploader] Custom source id "${
|
|
4974
|
+
const t = e.providers.length > 0 ? Je(e.providers) : [], i = e.customSources ?? [], r = X.filter((c) => c.id === "device" || c.id === "url"), o = X.filter((c) => c.id !== "device" && c.id !== "url"), s = /* @__PURE__ */ new Set(), n = [];
|
|
4975
|
+
for (const c of [...r, ...t, ...o, ...i])
|
|
4976
|
+
if (!s.has(c.id)) {
|
|
4977
|
+
if (E._RESERVED_IDS.has(c.id) && c.onActivate) {
|
|
4978
|
+
console.warn(`[sfx-uploader] Custom source id "${c.id}" conflicts with a built-in source and was skipped.`);
|
|
4760
4979
|
continue;
|
|
4761
4980
|
}
|
|
4762
|
-
s.add(
|
|
4981
|
+
s.add(c.id), n.push(c);
|
|
4763
4982
|
}
|
|
4764
4983
|
return this._cachedSources = n, this._cachedSources;
|
|
4765
4984
|
}
|
|
@@ -4769,29 +4988,29 @@ const y = (S = class extends z {
|
|
|
4769
4988
|
if (t.length === 0) return "empty";
|
|
4770
4989
|
if (e.isUploading) return "uploading";
|
|
4771
4990
|
const i = /* @__PURE__ */ new Set(["complete", "rejected", "cancelled", "failed"]);
|
|
4772
|
-
return t.every((r) => i.has(r.status)) && t.some((r) => r.status === "complete") ? "complete" : "ready";
|
|
4991
|
+
return t.every((r) => i.has(r.status)) && t.some((r) => r.status === "complete" || r.status === "failed") ? "complete" : "ready";
|
|
4773
4992
|
}
|
|
4774
4993
|
// --- File handling ---
|
|
4775
4994
|
_processIncomingFiles(e) {
|
|
4776
4995
|
var i, r, o, s;
|
|
4777
4996
|
const t = (i = this.config) == null ? void 0 : i.callbacks;
|
|
4778
4997
|
for (const n of e) {
|
|
4779
|
-
const d = this._store.getState(),
|
|
4780
|
-
if (
|
|
4781
|
-
const
|
|
4782
|
-
id:
|
|
4998
|
+
const d = this._store.getState(), c = Ze(n, d.restrictions, d.files);
|
|
4999
|
+
if (c) {
|
|
5000
|
+
const x = n.type.startsWith("image/") ? URL.createObjectURL(n) : null, f = {
|
|
5001
|
+
id: H(),
|
|
4783
5002
|
status: "rejected",
|
|
4784
5003
|
file: n,
|
|
4785
5004
|
remoteUrl: null,
|
|
4786
5005
|
name: n.name,
|
|
4787
5006
|
size: n.size,
|
|
4788
5007
|
type: n.type,
|
|
4789
|
-
previewUrl:
|
|
5008
|
+
previewUrl: x,
|
|
4790
5009
|
duration: null,
|
|
4791
5010
|
progress: 0,
|
|
4792
5011
|
speed: 0,
|
|
4793
5012
|
bytesUploaded: 0,
|
|
4794
|
-
error:
|
|
5013
|
+
error: c,
|
|
4795
5014
|
retryCount: 0,
|
|
4796
5015
|
response: null,
|
|
4797
5016
|
addedAt: Date.now(),
|
|
@@ -4799,22 +5018,22 @@ const y = (S = class extends z {
|
|
|
4799
5018
|
tags: [],
|
|
4800
5019
|
remoteInfo: null
|
|
4801
5020
|
};
|
|
4802
|
-
|
|
4803
|
-
const
|
|
4804
|
-
if (
|
|
4805
|
-
const
|
|
4806
|
-
this._rejectedTimers.delete(
|
|
4807
|
-
const
|
|
4808
|
-
|
|
4809
|
-
},
|
|
4810
|
-
this._rejectedTimers.set(
|
|
5021
|
+
I(this._store, f), this._dispatchPublic(v.FILE_REJECTED, { file: f, reason: c }), (r = t == null ? void 0 : t.onFileRejected) == null || r.call(t, f, c);
|
|
5022
|
+
const m = (o = this.config) == null ? void 0 : o.rejectedFileAutoRemoveDelay, _ = m === !1 || m === 0 || m === void 0 ? 0 : m;
|
|
5023
|
+
if (_ > 0) {
|
|
5024
|
+
const w = f.id, y = setTimeout(() => {
|
|
5025
|
+
this._rejectedTimers.delete(w);
|
|
5026
|
+
const k = this._store.getState().files.get(w);
|
|
5027
|
+
k && k.status === "rejected" && Ce(this._store, w);
|
|
5028
|
+
}, _);
|
|
5029
|
+
this._rejectedTimers.set(w, y);
|
|
4811
5030
|
}
|
|
4812
5031
|
continue;
|
|
4813
5032
|
}
|
|
4814
5033
|
let u = null;
|
|
4815
5034
|
n.type.startsWith("image/") && (u = URL.createObjectURL(n));
|
|
4816
5035
|
const h = {
|
|
4817
|
-
id:
|
|
5036
|
+
id: H(),
|
|
4818
5037
|
status: "idle",
|
|
4819
5038
|
file: n,
|
|
4820
5039
|
remoteUrl: null,
|
|
@@ -4834,26 +5053,26 @@ const y = (S = class extends z {
|
|
|
4834
5053
|
tags: [],
|
|
4835
5054
|
remoteInfo: null
|
|
4836
5055
|
};
|
|
4837
|
-
if (
|
|
4838
|
-
|
|
4839
|
-
if (!
|
|
4840
|
-
const
|
|
4841
|
-
if (
|
|
4842
|
-
const
|
|
4843
|
-
|
|
5056
|
+
if (I(this._store, h), this._dispatchPublic(v.FILE_ADDED, { file: h }), (s = t == null ? void 0 : t.onFileAdded) == null || s.call(t, h), n.type.startsWith("video/")) {
|
|
5057
|
+
Ke(n).then((f) => {
|
|
5058
|
+
if (!f) return;
|
|
5059
|
+
const m = this._store.getState(), _ = m.files.get(h.id);
|
|
5060
|
+
if (_) {
|
|
5061
|
+
const w = new Map(m.files);
|
|
5062
|
+
w.set(h.id, { ..._, previewUrl: f }), this._store.setState({ files: w });
|
|
4844
5063
|
} else
|
|
4845
|
-
URL.revokeObjectURL(
|
|
5064
|
+
URL.revokeObjectURL(f);
|
|
4846
5065
|
});
|
|
4847
|
-
const
|
|
4848
|
-
|
|
4849
|
-
URL.revokeObjectURL(
|
|
4850
|
-
},
|
|
4851
|
-
const
|
|
4852
|
-
if (URL.revokeObjectURL(
|
|
4853
|
-
const
|
|
4854
|
-
if (
|
|
4855
|
-
const
|
|
4856
|
-
|
|
5066
|
+
const x = document.createElement("video");
|
|
5067
|
+
x.preload = "metadata", x.src = URL.createObjectURL(n), x.onerror = () => {
|
|
5068
|
+
URL.revokeObjectURL(x.src);
|
|
5069
|
+
}, x.onloadedmetadata = () => {
|
|
5070
|
+
const f = x.duration;
|
|
5071
|
+
if (URL.revokeObjectURL(x.src), !isFinite(f)) return;
|
|
5072
|
+
const m = this._store.getState(), _ = m.files.get(h.id);
|
|
5073
|
+
if (_) {
|
|
5074
|
+
const w = new Map(m.files);
|
|
5075
|
+
w.set(h.id, { ..._, duration: f }), this._store.setState({ files: w });
|
|
4857
5076
|
}
|
|
4858
5077
|
};
|
|
4859
5078
|
}
|
|
@@ -4866,14 +5085,14 @@ const y = (S = class extends z {
|
|
|
4866
5085
|
if (!t) return;
|
|
4867
5086
|
const i = { ...t };
|
|
4868
5087
|
if ((this._fullscreenPreviewUrl && this._fullscreenPreviewUrl === t.previewUrl || this._fullscreenVideoFile && this._fullscreenVideoFile === t.file) && (this._fullscreenPreviewUrl = null, this._fullscreenVideoFile = null), t.previewUrl && URL.revokeObjectURL(t.previewUrl), t.file) {
|
|
4869
|
-
const
|
|
4870
|
-
|
|
5088
|
+
const c = this._videoBlobUrls.get(t.file);
|
|
5089
|
+
c && (URL.revokeObjectURL(c), this._videoBlobUrls.delete(t.file));
|
|
4871
5090
|
}
|
|
4872
|
-
(t.status === "uploading" || t.status === "queued" || t.status === "retrying") && ((o = this._engine) == null || o.cancelFile(e)),
|
|
5091
|
+
(t.status === "uploading" || t.status === "queued" || t.status === "retrying") && ((o = this._engine) == null || o.cancelFile(e)), Ce(this._store, e), this._dimCache.delete(e);
|
|
4873
5092
|
const r = this._rejectedTimers.get(e);
|
|
4874
5093
|
if (r && (clearTimeout(r), this._rejectedTimers.delete(e)), this._previewFileId === e) {
|
|
4875
|
-
const
|
|
4876
|
-
this._previewFileId =
|
|
5094
|
+
const c = [...this._store.getState().files.values()];
|
|
5095
|
+
this._previewFileId = c.length > 0 ? c[0].id : null;
|
|
4877
5096
|
}
|
|
4878
5097
|
this._dispatchPublic(v.FILE_REMOVED, { file: i }), (d = (n = (s = this.config) == null ? void 0 : s.callbacks) == null ? void 0 : n.onFileRemoved) == null || d.call(n, i);
|
|
4879
5098
|
}
|
|
@@ -4889,7 +5108,7 @@ const y = (S = class extends z {
|
|
|
4889
5108
|
${this._renderBody()}
|
|
4890
5109
|
</div>
|
|
4891
5110
|
</div>
|
|
4892
|
-
` :
|
|
5111
|
+
` : p}
|
|
4893
5112
|
` : l`
|
|
4894
5113
|
<div class="inline">
|
|
4895
5114
|
${this._renderHeader()}
|
|
@@ -4899,9 +5118,9 @@ const y = (S = class extends z {
|
|
|
4899
5118
|
}
|
|
4900
5119
|
_renderHeader() {
|
|
4901
5120
|
var s, n;
|
|
4902
|
-
if (this._phase === "complete") return
|
|
5121
|
+
if (this._phase === "complete") return p;
|
|
4903
5122
|
if (this._phase === "uploading") {
|
|
4904
|
-
const d = this._storeCtrl.state,
|
|
5123
|
+
const d = this._storeCtrl.state, c = [...d.files.values()], u = c.filter((x) => x.status === "complete").length, h = d.totalSpeed > 0 ? (d.totalBytes - d.totalBytesUploaded) / d.totalSpeed : 0;
|
|
4905
5124
|
return l`
|
|
4906
5125
|
<div class="header upload-header">
|
|
4907
5126
|
<div class="float-header-left">
|
|
@@ -4909,8 +5128,8 @@ const y = (S = class extends z {
|
|
|
4909
5128
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.39 18.39A5 5 0 0018 9h-1.26A8 8 0 103 16.3"/></svg>
|
|
4910
5129
|
</div>
|
|
4911
5130
|
<div>
|
|
4912
|
-
<div class="float-title">Uploading ${
|
|
4913
|
-
<div class="float-subtitle">${u} of ${
|
|
5131
|
+
<div class="float-title">Uploading ${c.length} ${c.length === 1 ? "file" : "files"}</div>
|
|
5132
|
+
<div class="float-subtitle">${u} of ${c.length}${h > 0 ? ` · ~${ie(h)} left` : ""}</div>
|
|
4914
5133
|
</div>
|
|
4915
5134
|
</div>
|
|
4916
5135
|
</div>
|
|
@@ -4920,12 +5139,12 @@ const y = (S = class extends z {
|
|
|
4920
5139
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
4921
5140
|
<polyline points="15 18 9 12 15 6"/>
|
|
4922
5141
|
</svg>
|
|
4923
|
-
</button>` :
|
|
5142
|
+
</button>` : p, o = t === "close" ? l`<button class="header-btn header-btn-close" aria-label="Close" @click=${i}>
|
|
4924
5143
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
|
4925
5144
|
<line x1="18" y1="6" x2="6" y2="18" />
|
|
4926
5145
|
<line x1="6" y1="6" x2="18" y2="18" />
|
|
4927
5146
|
</svg>
|
|
4928
|
-
</button>` :
|
|
5147
|
+
</button>` : p;
|
|
4929
5148
|
return l`
|
|
4930
5149
|
<div class="header">
|
|
4931
5150
|
${r}
|
|
@@ -4936,7 +5155,7 @@ const y = (S = class extends z {
|
|
|
4936
5155
|
<line x1="12" y1="12" x2="12" y2="21" />
|
|
4937
5156
|
<path d="M20.39 18.39A5 5 0 0018 9h-1.26A8 8 0 103 16.3" />
|
|
4938
5157
|
</svg>
|
|
4939
|
-
</div>` :
|
|
5158
|
+
</div>` : p}
|
|
4940
5159
|
<div class="header-title">Upload Files</div>
|
|
4941
5160
|
${o}
|
|
4942
5161
|
</div>
|
|
@@ -4954,34 +5173,38 @@ const y = (S = class extends z {
|
|
|
4954
5173
|
}) : Promise.resolve(null);
|
|
4955
5174
|
}
|
|
4956
5175
|
_renderUploadOverlay(e) {
|
|
4957
|
-
|
|
5176
|
+
var s;
|
|
5177
|
+
const t = this._storeCtrl.state, i = Math.round(t.totalProgress ?? 0), r = e.filter((n) => n.status === "complete").length, o = t.totalSpeed > 0 ? (t.totalBytes - t.totalBytesUploaded) / t.totalSpeed : 0;
|
|
4958
5178
|
return l`
|
|
4959
5179
|
<div class="upload-overlay">
|
|
4960
5180
|
<div class="upload-overlay-spinner"></div>
|
|
4961
5181
|
<div class="upload-overlay-percent">${i}%</div>
|
|
4962
5182
|
<div class="upload-overlay-title">Uploading ${e.length} ${e.length === 1 ? "file" : "files"}</div>
|
|
4963
|
-
<div class="upload-overlay-subtitle">${r} of ${e.length} complete${o > 0 ? l` · ~${ie(o)} left` :
|
|
5183
|
+
<div class="upload-overlay-subtitle">${r} of ${e.length} complete${o > 0 ? l` · ~${ie(o)} left` : p}</div>
|
|
4964
5184
|
<div class="upload-overlay-bar">
|
|
4965
5185
|
<div class="upload-overlay-bar-fill" style="width:${i}%"></div>
|
|
4966
5186
|
</div>
|
|
4967
|
-
|
|
5187
|
+
${(s = this.config) != null && s.minimizeOnUpload ? l`<button class="upload-overlay-minimize" @click=${this._onMinimize}>Minimize & continue in background</button>` : p}
|
|
4968
5188
|
</div>
|
|
4969
5189
|
`;
|
|
4970
5190
|
}
|
|
4971
5191
|
_renderFloatingPill(e) {
|
|
4972
|
-
const t = this._storeCtrl.state, i = Math.round(t.totalProgress ?? 0), r = this._phase === "complete", o = e.filter((
|
|
5192
|
+
const t = this._storeCtrl.state, i = Math.round(t.totalProgress ?? 0), r = this._phase === "complete", o = e.filter((d) => d.status === "complete").length, s = e.filter((d) => d.status === "failed").length, n = t.totalSpeed > 0 ? (t.totalBytes - t.totalBytesUploaded) / t.totalSpeed : 0;
|
|
4973
5193
|
return this._isPillExpanded === !1 ? l`
|
|
4974
5194
|
<div class="upload-float float-collapsed">
|
|
4975
5195
|
<div class="float-collapsed-left">
|
|
4976
|
-
${r ? l`<div class="float-collapsed-icon done"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg></div>` : l`<div class="float-collapsed-spinner"></div>`}
|
|
4977
|
-
<span class="float-collapsed-text">${r ? "Upload complete" : `Uploading ${e.length} ${e.length === 1 ? "file" : "files"}`}</span>
|
|
4978
|
-
${r ?
|
|
5196
|
+
${r ? s > 0 ? o > 0 ? l`<div class="float-collapsed-icon warn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>` : l`<div class="float-collapsed-icon error"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg></div>` : l`<div class="float-collapsed-icon done"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg></div>` : l`<div class="float-collapsed-spinner"></div>`}
|
|
5197
|
+
<span class="float-collapsed-text">${r ? s > 0 ? o > 0 ? "Partially uploaded" : "Upload failed" : "Upload complete" : `Uploading ${e.length} ${e.length === 1 ? "file" : "files"}`}</span>
|
|
5198
|
+
${r ? p : l`<span class="float-collapsed-pct">${i}%</span>`}
|
|
4979
5199
|
</div>
|
|
4980
5200
|
<div class="float-collapsed-actions">
|
|
5201
|
+
<button title="Open uploader" @click=${this._onPillExpand}>
|
|
5202
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
|
|
5203
|
+
</button>
|
|
4981
5204
|
<button title="Expand" @click=${this._onPillClick}>
|
|
4982
5205
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="18 15 12 9 6 15"/></svg>
|
|
4983
5206
|
</button>
|
|
4984
|
-
<button title="
|
|
5207
|
+
<button title="Close" @click=${this._onPillDismiss}>
|
|
4985
5208
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
|
4986
5209
|
</button>
|
|
4987
5210
|
</div>
|
|
@@ -4990,19 +5213,22 @@ const y = (S = class extends z {
|
|
|
4990
5213
|
<div class="upload-float">
|
|
4991
5214
|
<div class="float-header">
|
|
4992
5215
|
<div class="float-header-left">
|
|
4993
|
-
<div class="float-icon ${r ? "done" : ""}">
|
|
4994
|
-
${r ? l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>` : l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.39 18.39A5 5 0 0018 9h-1.26A8 8 0 103 16.3"/></svg>`}
|
|
5216
|
+
<div class="float-icon ${r ? s > 0 ? o > 0 ? "warn" : "error" : "done" : ""}">
|
|
5217
|
+
${r ? s > 0 ? o > 0 ? l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>` : l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>` : l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>` : l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.39 18.39A5 5 0 0018 9h-1.26A8 8 0 103 16.3"/></svg>`}
|
|
4995
5218
|
</div>
|
|
4996
5219
|
<div>
|
|
4997
|
-
<div class="float-title">${r ? "Upload complete" : `Uploading ${e.length} ${e.length === 1 ? "file" : "files"}`}</div>
|
|
4998
|
-
<div class="float-subtitle">${r ? `${o} ${o === 1 ? "file" : "files"} uploaded` : `${o} of ${e.length}${
|
|
5220
|
+
<div class="float-title">${r ? s > 0 ? o > 0 ? "Partially uploaded" : "Upload failed" : "Upload complete" : `Uploading ${e.length} ${e.length === 1 ? "file" : "files"}`}</div>
|
|
5221
|
+
<div class="float-subtitle">${r ? `${o} ${o === 1 ? "file" : "files"} uploaded${s > 0 ? `, ${s} failed` : ""}` : `${o} of ${e.length}${n > 0 ? ` · ~${ie(n)} left` : ""}`}</div>
|
|
4999
5222
|
</div>
|
|
5000
5223
|
</div>
|
|
5001
5224
|
<div class="float-actions">
|
|
5225
|
+
<button title="Expand" @click=${this._onPillExpand}>
|
|
5226
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
|
|
5227
|
+
</button>
|
|
5002
5228
|
<button title="Collapse" @click=${this._onPillClick}>
|
|
5003
5229
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg>
|
|
5004
5230
|
</button>
|
|
5005
|
-
<button title="
|
|
5231
|
+
<button title="Close" @click=${this._onPillDismiss}>
|
|
5006
5232
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
|
5007
5233
|
</button>
|
|
5008
5234
|
</div>
|
|
@@ -5010,46 +5236,58 @@ const y = (S = class extends z {
|
|
|
5010
5236
|
<div class="float-progress">
|
|
5011
5237
|
<div class="float-progress-top">
|
|
5012
5238
|
<span class="float-progress-label">Overall progress</span>
|
|
5013
|
-
<span class="float-progress-pct ${r ? "done" : ""}">${r ? "Done" : `${i}%`}</span>
|
|
5239
|
+
<span class="float-progress-pct ${r ? s > 0 ? o > 0 ? "warn" : "error" : "done" : ""}">${r ? "Done" : `${i}%`}</span>
|
|
5014
5240
|
</div>
|
|
5015
|
-
<div class="float-bar"><div class="float-bar-fill ${r ? "done" : ""}" style="width:${r ? 100 : i}%"></div></div>
|
|
5241
|
+
<div class="float-bar"><div class="float-bar-fill ${r ? s > 0 ? o > 0 ? "warn" : "error" : "done" : ""}" style="width:${r ? 100 : i}%"></div></div>
|
|
5016
5242
|
</div>
|
|
5017
5243
|
<div class="float-items">
|
|
5018
|
-
${e.map((
|
|
5244
|
+
${e.map((d) => {
|
|
5245
|
+
const c = d.status === "failed" || d.status === "error";
|
|
5246
|
+
return l`
|
|
5019
5247
|
<div class="float-item">
|
|
5020
|
-
<div class="float-item-thumb">
|
|
5021
|
-
|
|
5248
|
+
<div class="float-item-thumb" style=${d.previewUrl ? `background-image:url(${d.previewUrl});background-size:cover;background-position:center` : ""}>
|
|
5249
|
+
${d.previewUrl ? p : l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>`}
|
|
5022
5250
|
</div>
|
|
5023
5251
|
<div class="float-item-info">
|
|
5024
|
-
<div class="float-item-name">${
|
|
5025
|
-
<div class="float-item-size">${
|
|
5252
|
+
<div class="float-item-name">${d.name}</div>
|
|
5253
|
+
<div class="float-item-size">${Y(d.size)}</div>
|
|
5026
5254
|
</div>
|
|
5027
5255
|
<div class="float-item-status">
|
|
5028
|
-
${
|
|
5256
|
+
${d.status === "complete" ? l`<div class="float-item-done"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg></div>` : c ? l`
|
|
5257
|
+
<div class="float-item-error-wrap">
|
|
5258
|
+
<svg class="float-item-error-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
|
5259
|
+
<span class="float-item-tooltip">${d.error || "Upload failed"}</span>
|
|
5260
|
+
</div>
|
|
5261
|
+
<button class="float-item-retry" @click=${() => {
|
|
5262
|
+
var u;
|
|
5263
|
+
this._ensureEngine(), (u = this._engine) == null || u.retryFile(d.id);
|
|
5264
|
+
}}>
|
|
5265
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2v6h-6"/><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M3 22v-6h6"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/></svg>
|
|
5266
|
+
</button>` : l`<div class="float-item-spinner"></div>`}
|
|
5029
5267
|
</div>
|
|
5030
5268
|
</div>
|
|
5031
|
-
|
|
5269
|
+
`;
|
|
5270
|
+
})}
|
|
5032
5271
|
</div>
|
|
5033
5272
|
</div>
|
|
5034
5273
|
`;
|
|
5035
5274
|
}
|
|
5036
5275
|
_renderPreviewLayout(e) {
|
|
5037
5276
|
var n;
|
|
5038
|
-
if (e.length === 0) return
|
|
5039
|
-
const t = e.find((d) => d.id === this._previewFileId) ?? e[0], i = ((n = t.name.split(".").pop()) == null ? void 0 : n.toUpperCase()) || "", r = new Date(t.addedAt).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }), o = this._store.getState().targetFolder, s = e.reduce((d,
|
|
5277
|
+
if (e.length === 0) return p;
|
|
5278
|
+
const t = e.find((d) => d.id === this._previewFileId) ?? e[0], i = ((n = t.name.split(".").pop()) == null ? void 0 : n.toUpperCase()) || "", r = new Date(t.addedAt).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }), o = this._store.getState().targetFolder, s = e.reduce((d, c) => d + (c.size || 0), 0);
|
|
5040
5279
|
return l`
|
|
5041
5280
|
<div class="preview-topbar"></div>
|
|
5042
5281
|
<div class="preview-layout">
|
|
5043
5282
|
<div class="file-grid-side">
|
|
5044
5283
|
<div class="file-grid-header">
|
|
5045
|
-
<span class="file-grid-header-text">${e.length} ${e.length === 1 ? "asset" : "assets"} · ${
|
|
5284
|
+
<span class="file-grid-header-text">${e.length} ${e.length === 1 ? "asset" : "assets"} · ${Y(s)}</span>
|
|
5046
5285
|
</div>
|
|
5047
5286
|
<sfx-file-list
|
|
5048
5287
|
.files=${e}
|
|
5049
5288
|
.showDropTile=${!0}
|
|
5050
5289
|
.sources=${this._mergedSources}
|
|
5051
|
-
.accept=${
|
|
5052
|
-
@files-selected=${this._onFilesSelected}
|
|
5290
|
+
.accept=${Se(this._storeCtrl.state.restrictions)}
|
|
5053
5291
|
@source-click=${this._onDropTileSourceClick}
|
|
5054
5292
|
></sfx-file-list>
|
|
5055
5293
|
</div>
|
|
@@ -5069,7 +5307,7 @@ const y = (S = class extends z {
|
|
|
5069
5307
|
<line x1="3" y1="21" x2="10" y2="14" />
|
|
5070
5308
|
</svg>
|
|
5071
5309
|
</button>
|
|
5072
|
-
` :
|
|
5310
|
+
` : p}
|
|
5073
5311
|
<button @click=${() => {
|
|
5074
5312
|
this._previewFileId = null;
|
|
5075
5313
|
}} title="Close">
|
|
@@ -5121,7 +5359,7 @@ const y = (S = class extends z {
|
|
|
5121
5359
|
</div>
|
|
5122
5360
|
<div class="preview-meta-row">
|
|
5123
5361
|
<span class="preview-meta-label">Size</span>
|
|
5124
|
-
<span class="preview-meta-value">${
|
|
5362
|
+
<span class="preview-meta-value">${Y(t.size)}</span>
|
|
5125
5363
|
</div>
|
|
5126
5364
|
<div class="preview-meta-row">
|
|
5127
5365
|
<span class="preview-meta-label">Dimensions</span>
|
|
@@ -5169,7 +5407,7 @@ const y = (S = class extends z {
|
|
|
5169
5407
|
}
|
|
5170
5408
|
_renderBody() {
|
|
5171
5409
|
var s, n, d;
|
|
5172
|
-
const e = this._storeCtrl.state, t = [...e.files.values()], i = this._phase, r =
|
|
5410
|
+
const e = this._storeCtrl.state, t = [...e.files.values()], i = this._phase, r = Se(e.restrictions), o = t.length > 0;
|
|
5173
5411
|
return l`
|
|
5174
5412
|
<div class="content"
|
|
5175
5413
|
@files-selected=${this._onFilesSelected}
|
|
@@ -5195,19 +5433,23 @@ const y = (S = class extends z {
|
|
|
5195
5433
|
>
|
|
5196
5434
|
<div
|
|
5197
5435
|
class="body ${o ? "has-files" : ""} ${this._bodyDragOver ? "body-drag-over" : ""}"
|
|
5198
|
-
@dragenter=${o ? this._onBodyDragEnter :
|
|
5199
|
-
@dragover=${o ? this._onBodyDragOver :
|
|
5200
|
-
@dragleave=${o ? this._onBodyDragLeave :
|
|
5201
|
-
@drop=${o ? this._onBodyDrop :
|
|
5436
|
+
@dragenter=${o ? this._onBodyDragEnter : p}
|
|
5437
|
+
@dragover=${o ? this._onBodyDragOver : p}
|
|
5438
|
+
@dragleave=${o ? this._onBodyDragLeave : p}
|
|
5439
|
+
@drop=${o ? this._onBodyDrop : p}
|
|
5202
5440
|
>
|
|
5203
5441
|
${i === "complete" ? l`
|
|
5204
5442
|
<sfx-success-card
|
|
5205
|
-
.fileCount=${t.filter((
|
|
5206
|
-
.totalSize=${t.filter((
|
|
5207
|
-
.thumbnails=${t.filter((
|
|
5443
|
+
.fileCount=${t.filter((c) => c.status === "complete").length}
|
|
5444
|
+
.totalSize=${t.filter((c) => c.status === "complete").reduce((c, u) => c + (u.size || 0), 0)}
|
|
5445
|
+
.thumbnails=${t.filter((c) => c.status === "complete" && c.previewUrl).map((c) => c.previewUrl)}
|
|
5446
|
+
.failedFiles=${t.filter((c) => c.status === "failed").map((c) => ({ id: c.id, name: c.name, error: c.error || "Upload failed" }))}
|
|
5447
|
+
@close-uploader=${this._onSuccessCardClose}
|
|
5448
|
+
@file-retry=${this._onFileRetry}
|
|
5449
|
+
@retry-all=${this._onRetryAll}
|
|
5208
5450
|
></sfx-success-card>
|
|
5209
5451
|
` : i === "uploading" ? this._renderUploadOverlay(t) : l`
|
|
5210
|
-
${o ?
|
|
5452
|
+
${o ? p : l`<sfx-drop-zone
|
|
5211
5453
|
.compact=${o}
|
|
5212
5454
|
.externalDragOver=${this._bodyDragOver}
|
|
5213
5455
|
.accept=${r}
|
|
@@ -5216,16 +5458,15 @@ const y = (S = class extends z {
|
|
|
5216
5458
|
></sfx-drop-zone>`}
|
|
5217
5459
|
|
|
5218
5460
|
${o ? this._previewFileId ? this._renderPreviewLayout(t) : l`
|
|
5219
|
-
<div class="asset-count">${t.length} ${t.length === 1 ? "file" : "files"} · ${
|
|
5461
|
+
<div class="asset-count">${t.length} ${t.length === 1 ? "file" : "files"} · ${Y(t.reduce((c, u) => c + (u.size || 0), 0))}</div>
|
|
5220
5462
|
<sfx-file-list
|
|
5221
5463
|
.files=${t}
|
|
5222
5464
|
.showDropTile=${!0}
|
|
5223
5465
|
.sources=${this._mergedSources}
|
|
5224
5466
|
.accept=${r}
|
|
5225
|
-
@files-selected=${this._onFilesSelected}
|
|
5226
5467
|
@source-click=${this._onDropTileSourceClick}
|
|
5227
5468
|
></sfx-file-list>
|
|
5228
|
-
` :
|
|
5469
|
+
` : p}
|
|
5229
5470
|
`}
|
|
5230
5471
|
</div>
|
|
5231
5472
|
|
|
@@ -5233,21 +5474,21 @@ const y = (S = class extends z {
|
|
|
5233
5474
|
<sfx-actions-bar
|
|
5234
5475
|
.uploadState=${"idle"}
|
|
5235
5476
|
.fileCount=${t.length}
|
|
5236
|
-
.totalSize=${t.reduce((
|
|
5237
|
-
.failedCount=${t.filter((
|
|
5238
|
-
.completedCount=${t.filter((
|
|
5477
|
+
.totalSize=${t.reduce((c, u) => c + (u.size || 0), 0)}
|
|
5478
|
+
.failedCount=${t.filter((c) => c.status === "failed" || c.status === "error").length}
|
|
5479
|
+
.completedCount=${t.filter((c) => c.status === "complete").length}
|
|
5239
5480
|
.uploadProgress=${e.totalProgress ?? 0}
|
|
5240
5481
|
.showFillMetadata=${!!((n = this.config) != null && n.showFillMetadata)}
|
|
5241
5482
|
></sfx-actions-bar>
|
|
5242
|
-
` :
|
|
5483
|
+
` : p}
|
|
5243
5484
|
|
|
5244
|
-
${this._showUrlDialog ? l`<sfx-url-dialog></sfx-url-dialog>` :
|
|
5245
|
-
${this._showCameraDialog ? l`<sfx-camera-dialog></sfx-camera-dialog>` :
|
|
5246
|
-
${this._showScreenCastDialog ? l`<sfx-screen-cast-dialog></sfx-screen-cast-dialog>` :
|
|
5485
|
+
${this._showUrlDialog ? l`<sfx-url-dialog></sfx-url-dialog>` : p}
|
|
5486
|
+
${this._showCameraDialog ? l`<sfx-camera-dialog></sfx-camera-dialog>` : p}
|
|
5487
|
+
${this._showScreenCastDialog ? l`<sfx-screen-cast-dialog></sfx-screen-cast-dialog>` : p}
|
|
5247
5488
|
${this._activeConnector && ((d = this.config) != null && d.connectors) ? l`
|
|
5248
5489
|
<div class="connector-modal-backdrop" @click=${this._onConnectorBackdropClick}>
|
|
5249
5490
|
<div class="connector-modal">
|
|
5250
|
-
${
|
|
5491
|
+
${De.has(this._activeConnector) ? l`
|
|
5251
5492
|
<sfx-search-provider-browser
|
|
5252
5493
|
.provider=${this._activeConnector}
|
|
5253
5494
|
.companionUrl=${this.config.connectors.companionUrl}
|
|
@@ -5260,7 +5501,7 @@ const y = (S = class extends z {
|
|
|
5260
5501
|
`}
|
|
5261
5502
|
</div>
|
|
5262
5503
|
</div>
|
|
5263
|
-
` :
|
|
5504
|
+
` : p}
|
|
5264
5505
|
|
|
5265
5506
|
${this._fullscreenPreviewUrl || this._fullscreenVideoFile ? l`
|
|
5266
5507
|
<div
|
|
@@ -5274,7 +5515,7 @@ const y = (S = class extends z {
|
|
|
5274
5515
|
@touchmove=${this._onFsTouchMove}
|
|
5275
5516
|
@touchend=${this._onFsPanEnd}
|
|
5276
5517
|
>
|
|
5277
|
-
<div class="fs-toolbar" @click=${(
|
|
5518
|
+
<div class="fs-toolbar" @click=${(c) => c.stopPropagation()}>
|
|
5278
5519
|
<button class="fs-btn" @click=${this._onFsToggleZoom} title="${this._fullscreenZoomed ? "Zoom out" : "Zoom in"}">
|
|
5279
5520
|
${this._fullscreenZoomed ? l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/></svg>` : l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>`}
|
|
5280
5521
|
</button>
|
|
@@ -5289,7 +5530,7 @@ const y = (S = class extends z {
|
|
|
5289
5530
|
src=${this._getVideoBlobUrl(this._fullscreenVideoFile)}
|
|
5290
5531
|
controls playsinline
|
|
5291
5532
|
draggable="false"
|
|
5292
|
-
@click=${(
|
|
5533
|
+
@click=${(c) => c.stopPropagation()}
|
|
5293
5534
|
></video>` : l`<img
|
|
5294
5535
|
class="fs-img"
|
|
5295
5536
|
src=${this._fullscreenPreviewUrl}
|
|
@@ -5297,18 +5538,18 @@ const y = (S = class extends z {
|
|
|
5297
5538
|
style=${this._fullscreenZoomed ? `transform: scale(2) translate(${this._fsPanX}px, ${this._fsPanY}px)` : ""}
|
|
5298
5539
|
draggable="false"
|
|
5299
5540
|
/>`}
|
|
5300
|
-
<button class="fs-nav prev" @click=${(
|
|
5301
|
-
|
|
5541
|
+
<button class="fs-nav prev" @click=${(c) => {
|
|
5542
|
+
c.stopPropagation(), this._navigateFs(-1);
|
|
5302
5543
|
}}>
|
|
5303
5544
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="15 18 9 12 15 6"/></svg>
|
|
5304
5545
|
</button>
|
|
5305
|
-
<button class="fs-nav next" @click=${(
|
|
5306
|
-
|
|
5546
|
+
<button class="fs-nav next" @click=${(c) => {
|
|
5547
|
+
c.stopPropagation(), this._navigateFs(1);
|
|
5307
5548
|
}}>
|
|
5308
5549
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="9 6 15 12 9 18"/></svg>
|
|
5309
5550
|
</button>
|
|
5310
5551
|
</div>
|
|
5311
|
-
` :
|
|
5552
|
+
` : p}
|
|
5312
5553
|
</div>
|
|
5313
5554
|
`;
|
|
5314
5555
|
}
|
|
@@ -5331,7 +5572,7 @@ const y = (S = class extends z {
|
|
|
5331
5572
|
for (const e of this._videoBlobUrls.values()) URL.revokeObjectURL(e);
|
|
5332
5573
|
this._videoBlobUrls.clear();
|
|
5333
5574
|
}
|
|
5334
|
-
},
|
|
5575
|
+
}, E.styles = S`
|
|
5335
5576
|
:host {
|
|
5336
5577
|
display: block;
|
|
5337
5578
|
font-family: var(--sfx-up-font, 'Inter', system-ui, -apple-system, sans-serif);
|
|
@@ -5355,9 +5596,6 @@ const y = (S = class extends z {
|
|
|
5355
5596
|
--sfx-up-shadow: var(--shadow, rgba(0, 0, 0, 0.1));
|
|
5356
5597
|
--sfx-up-surface: var(--card, #f8fafc);
|
|
5357
5598
|
--sfx-up-backdrop: rgba(0, 0, 0, 0.45);
|
|
5358
|
-
--sfx-up-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
|
|
5359
|
-
--sfx-up-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
|
|
5360
|
-
--sfx-up-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.06);
|
|
5361
5599
|
--sfx-up-ring: var(--ring, oklch(0.578 0.198 268.129 / 0.7));
|
|
5362
5600
|
--sfx-up-max-height: 88vh;
|
|
5363
5601
|
}
|
|
@@ -5556,7 +5794,7 @@ const y = (S = class extends z {
|
|
|
5556
5794
|
align-items: stretch;
|
|
5557
5795
|
overflow: hidden;
|
|
5558
5796
|
gap: 0;
|
|
5559
|
-
padding: 0
|
|
5797
|
+
padding: 0 0 0 8px;
|
|
5560
5798
|
animation: bodyReveal 0.35s ease both;
|
|
5561
5799
|
}
|
|
5562
5800
|
|
|
@@ -5600,6 +5838,7 @@ const y = (S = class extends z {
|
|
|
5600
5838
|
flex-direction: column;
|
|
5601
5839
|
overflow: hidden;
|
|
5602
5840
|
height: 100%;
|
|
5841
|
+
min-height: var(--sfx-up-min-height, 660px);
|
|
5603
5842
|
max-height: var(--sfx-up-max-height, 88vh);
|
|
5604
5843
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
|
|
5605
5844
|
transition: box-shadow 0.25s ease;
|
|
@@ -5630,24 +5869,18 @@ const y = (S = class extends z {
|
|
|
5630
5869
|
}
|
|
5631
5870
|
|
|
5632
5871
|
.preview-layout .file-grid-side::after {
|
|
5633
|
-
|
|
5634
|
-
position: absolute;
|
|
5635
|
-
top: 0;
|
|
5636
|
-
bottom: 0;
|
|
5637
|
-
right: 14px;
|
|
5638
|
-
width: 1px;
|
|
5639
|
-
background: var(--sfx-up-border, #e8edf5);
|
|
5640
|
-
pointer-events: none;
|
|
5641
|
-
z-index: 3;
|
|
5872
|
+
display: none;
|
|
5642
5873
|
}
|
|
5643
5874
|
|
|
5644
5875
|
.preview-layout sfx-file-list {
|
|
5645
|
-
padding-right:
|
|
5876
|
+
padding-right: 6px;
|
|
5646
5877
|
--sfx-scrollbar-w: 14px;
|
|
5647
|
-
--sfx-scrollbar-inset:
|
|
5648
|
-
--sfx-scrollbar-
|
|
5878
|
+
--sfx-scrollbar-inset-left: 2px;
|
|
5879
|
+
--sfx-scrollbar-inset-right: 6px;
|
|
5649
5880
|
}
|
|
5650
5881
|
|
|
5882
|
+
/* NOTE: scrollbar border-radius is hardcoded to 6px in sfx-file-list */
|
|
5883
|
+
|
|
5651
5884
|
.file-grid-header {
|
|
5652
5885
|
display: flex;
|
|
5653
5886
|
align-items: center;
|
|
@@ -5931,6 +6164,7 @@ const y = (S = class extends z {
|
|
|
5931
6164
|
flex: 1;
|
|
5932
6165
|
gap: 8px;
|
|
5933
6166
|
padding: 32px 24px;
|
|
6167
|
+
position: relative;
|
|
5934
6168
|
animation: fadeUp 0.3s ease both;
|
|
5935
6169
|
}
|
|
5936
6170
|
|
|
@@ -6035,7 +6269,7 @@ const y = (S = class extends z {
|
|
|
6035
6269
|
bottom: 24px;
|
|
6036
6270
|
right: 24px;
|
|
6037
6271
|
z-index: 10000;
|
|
6038
|
-
width:
|
|
6272
|
+
width: 470px;
|
|
6039
6273
|
border-radius: 12px;
|
|
6040
6274
|
background: var(--sfx-up-bg, #fff);
|
|
6041
6275
|
box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
|
|
@@ -6077,6 +6311,11 @@ const y = (S = class extends z {
|
|
|
6077
6311
|
color: #22c55e;
|
|
6078
6312
|
}
|
|
6079
6313
|
|
|
6314
|
+
.float-icon.error {
|
|
6315
|
+
background: #fef2f2;
|
|
6316
|
+
color: #ef4444;
|
|
6317
|
+
}
|
|
6318
|
+
|
|
6080
6319
|
.float-title {
|
|
6081
6320
|
font-size: 13px;
|
|
6082
6321
|
font-weight: 600;
|
|
@@ -6138,9 +6377,9 @@ const y = (S = class extends z {
|
|
|
6138
6377
|
color: var(--sfx-up-primary, #2563eb);
|
|
6139
6378
|
}
|
|
6140
6379
|
|
|
6141
|
-
.float-progress-pct.done {
|
|
6142
|
-
|
|
6143
|
-
}
|
|
6380
|
+
.float-progress-pct.done { color: #22c55e; }
|
|
6381
|
+
.float-progress-pct.warn { color: #f59e0b; }
|
|
6382
|
+
.float-progress-pct.error { color: #ef4444; }
|
|
6144
6383
|
|
|
6145
6384
|
.float-bar {
|
|
6146
6385
|
height: 4px;
|
|
@@ -6156,13 +6395,14 @@ const y = (S = class extends z {
|
|
|
6156
6395
|
transition: width 0.3s ease;
|
|
6157
6396
|
}
|
|
6158
6397
|
|
|
6159
|
-
.float-bar-fill.done {
|
|
6160
|
-
|
|
6161
|
-
}
|
|
6398
|
+
.float-bar-fill.done { background: #22c55e; }
|
|
6399
|
+
.float-bar-fill.warn { background: #f59e0b; }
|
|
6400
|
+
.float-bar-fill.error { background: #ef4444; }
|
|
6162
6401
|
|
|
6163
6402
|
.float-items {
|
|
6164
6403
|
max-height: 200px;
|
|
6165
6404
|
overflow-y: auto;
|
|
6405
|
+
overflow-x: hidden;
|
|
6166
6406
|
scrollbar-width: thin;
|
|
6167
6407
|
scrollbar-color: rgba(0,0,0,0.1) transparent;
|
|
6168
6408
|
}
|
|
@@ -6173,6 +6413,7 @@ const y = (S = class extends z {
|
|
|
6173
6413
|
gap: 10px;
|
|
6174
6414
|
padding: 8px 14px;
|
|
6175
6415
|
border-bottom: 1px solid #f1f5f9;
|
|
6416
|
+
overflow: hidden;
|
|
6176
6417
|
}
|
|
6177
6418
|
|
|
6178
6419
|
.float-item:last-child { border-bottom: none; }
|
|
@@ -6191,7 +6432,7 @@ const y = (S = class extends z {
|
|
|
6191
6432
|
|
|
6192
6433
|
.float-item-thumb svg { width: 16px; height: 16px; }
|
|
6193
6434
|
|
|
6194
|
-
.float-item-info { flex: 1; min-width: 0; }
|
|
6435
|
+
.float-item-info { flex: 1; min-width: 0; overflow: hidden; }
|
|
6195
6436
|
|
|
6196
6437
|
.float-item-name {
|
|
6197
6438
|
font-size: 12px;
|
|
@@ -6231,13 +6472,69 @@ const y = (S = class extends z {
|
|
|
6231
6472
|
flex-shrink: 0;
|
|
6232
6473
|
}
|
|
6233
6474
|
|
|
6234
|
-
.float-item-error {
|
|
6235
|
-
|
|
6475
|
+
.float-item-error-wrap {
|
|
6476
|
+
position: relative;
|
|
6477
|
+
display: flex;
|
|
6478
|
+
align-items: center;
|
|
6479
|
+
flex-shrink: 0;
|
|
6480
|
+
}
|
|
6481
|
+
|
|
6482
|
+
.float-item-error-icon {
|
|
6236
6483
|
width: 16px;
|
|
6237
6484
|
height: 16px;
|
|
6485
|
+
color: #ef4444;
|
|
6238
6486
|
flex-shrink: 0;
|
|
6487
|
+
cursor: pointer;
|
|
6239
6488
|
}
|
|
6240
6489
|
|
|
6490
|
+
.float-item-tooltip {
|
|
6491
|
+
display: none;
|
|
6492
|
+
position: absolute;
|
|
6493
|
+
right: calc(100% + 8px);
|
|
6494
|
+
top: 50%;
|
|
6495
|
+
transform: translateY(-50%);
|
|
6496
|
+
background: #fff;
|
|
6497
|
+
color: #1e293b;
|
|
6498
|
+
font-size: 11px;
|
|
6499
|
+
padding: 6px 10px;
|
|
6500
|
+
border-radius: 6px;
|
|
6501
|
+
white-space: nowrap;
|
|
6502
|
+
pointer-events: none;
|
|
6503
|
+
z-index: 10;
|
|
6504
|
+
box-shadow: 0 2px 12px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08);
|
|
6505
|
+
}
|
|
6506
|
+
|
|
6507
|
+
.float-item-error-wrap:hover .float-item-tooltip {
|
|
6508
|
+
display: block;
|
|
6509
|
+
}
|
|
6510
|
+
|
|
6511
|
+
.float-item-status {
|
|
6512
|
+
display: flex;
|
|
6513
|
+
flex-direction: row;
|
|
6514
|
+
align-items: center;
|
|
6515
|
+
gap: 4px;
|
|
6516
|
+
flex-shrink: 0;
|
|
6517
|
+
}
|
|
6518
|
+
|
|
6519
|
+
.float-item-retry {
|
|
6520
|
+
width: 24px;
|
|
6521
|
+
height: 24px;
|
|
6522
|
+
border: none;
|
|
6523
|
+
background: none;
|
|
6524
|
+
color: var(--sfx-up-primary, #2563eb);
|
|
6525
|
+
cursor: pointer;
|
|
6526
|
+
padding: 4px;
|
|
6527
|
+
flex-shrink: 0;
|
|
6528
|
+
display: flex;
|
|
6529
|
+
align-items: center;
|
|
6530
|
+
justify-content: center;
|
|
6531
|
+
border-radius: 4px;
|
|
6532
|
+
}
|
|
6533
|
+
|
|
6534
|
+
.float-item-retry svg { width: 16px; height: 16px; }
|
|
6535
|
+
|
|
6536
|
+
.float-item-retry:hover { background: var(--sfx-up-surface, #f8fafc); color: var(--sfx-up-primary-hover, #1d4ed8); }
|
|
6537
|
+
|
|
6241
6538
|
@keyframes floatSlideIn {
|
|
6242
6539
|
from { opacity: 0; transform: translateY(20px); }
|
|
6243
6540
|
to { opacity: 1; transform: translateY(0); }
|
|
@@ -6429,14 +6726,13 @@ const y = (S = class extends z {
|
|
|
6429
6726
|
/* --- Responsive: Tablet (≤ 768px) --- */
|
|
6430
6727
|
@media (max-width: 768px) {
|
|
6431
6728
|
.modal-backdrop { padding: 12px; }
|
|
6432
|
-
.modal-card { border-radius: 12px; max-height: 92vh; }
|
|
6729
|
+
.modal-card { border-radius: 12px; max-height: 92vh; min-height: auto; }
|
|
6433
6730
|
.header { padding: 12px 16px; }
|
|
6434
6731
|
.header-icon { width: 28px; height: 28px; margin-right: 10px; }
|
|
6435
6732
|
.header-icon svg { width: 14px; height: 14px; }
|
|
6436
6733
|
.header-title { font-size: 14px; }
|
|
6437
6734
|
.body { padding: 16px; }
|
|
6438
|
-
.body.has-files { padding: 0
|
|
6439
|
-
.asset-count { padding: 16px; }
|
|
6735
|
+
.body.has-files { padding: 0 0 12px 8px; }
|
|
6440
6736
|
|
|
6441
6737
|
.preview-layout { flex-direction: column; }
|
|
6442
6738
|
.preview-layout .file-grid-side {
|
|
@@ -6450,7 +6746,7 @@ const y = (S = class extends z {
|
|
|
6450
6746
|
|
|
6451
6747
|
.preview-topbar { padding: 8px 0; }
|
|
6452
6748
|
|
|
6453
|
-
.inline { border-radius: 12px; }
|
|
6749
|
+
.inline { border-radius: 12px; min-height: auto; }
|
|
6454
6750
|
|
|
6455
6751
|
.connector-modal-backdrop { padding: 8px; }
|
|
6456
6752
|
.connector-modal {
|
|
@@ -6474,8 +6770,7 @@ const y = (S = class extends z {
|
|
|
6474
6770
|
.header-icon { width: 26px; height: 26px; margin-right: 8px; }
|
|
6475
6771
|
.header-title { font-size: 14px; }
|
|
6476
6772
|
.body { padding: 12px; }
|
|
6477
|
-
.body.has-files { padding: 0 8px
|
|
6478
|
-
.asset-count { padding: 16px; }
|
|
6773
|
+
.body.has-files { padding: 0 0 8px 8px; }
|
|
6479
6774
|
|
|
6480
6775
|
.preview-layout .file-grid-side { max-height: 100px; }
|
|
6481
6776
|
.preview-panel { padding: 0 0 12px; }
|
|
@@ -6489,84 +6784,89 @@ const y = (S = class extends z {
|
|
|
6489
6784
|
.connector-modal {
|
|
6490
6785
|
border-radius: 0;
|
|
6491
6786
|
height: 100vh;
|
|
6492
|
-
max-height: none;
|
|
6493
6787
|
min-height: auto;
|
|
6494
6788
|
}
|
|
6495
6789
|
}
|
|
6496
|
-
|
|
6790
|
+
|
|
6791
|
+
/* --- Responsive: Landscape / short viewports --- */
|
|
6792
|
+
@media (max-height: 700px) {
|
|
6793
|
+
.modal-card { min-height: auto; }
|
|
6794
|
+
.inline { min-height: auto; }
|
|
6795
|
+
}
|
|
6796
|
+
`, E._MODIFIABLE_STATUSES = /* @__PURE__ */ new Set([
|
|
6497
6797
|
"idle",
|
|
6498
6798
|
"queued",
|
|
6499
6799
|
"rejected"
|
|
6500
|
-
]),
|
|
6501
|
-
|
|
6800
|
+
]), E._RESERVED_IDS = /* @__PURE__ */ new Set(["device", "camera", "url", "screen-cast"]), E);
|
|
6801
|
+
$([
|
|
6502
6802
|
b({ attribute: !1 })
|
|
6503
|
-
],
|
|
6504
|
-
|
|
6803
|
+
], C.prototype, "config");
|
|
6804
|
+
$([
|
|
6505
6805
|
g()
|
|
6506
|
-
],
|
|
6507
|
-
|
|
6806
|
+
], C.prototype, "_isOpen");
|
|
6807
|
+
$([
|
|
6508
6808
|
g()
|
|
6509
|
-
],
|
|
6510
|
-
|
|
6809
|
+
], C.prototype, "_activeConnector");
|
|
6810
|
+
$([
|
|
6511
6811
|
g()
|
|
6512
|
-
],
|
|
6513
|
-
|
|
6812
|
+
], C.prototype, "_showUrlDialog");
|
|
6813
|
+
$([
|
|
6514
6814
|
g()
|
|
6515
|
-
],
|
|
6516
|
-
|
|
6815
|
+
], C.prototype, "_showCameraDialog");
|
|
6816
|
+
$([
|
|
6517
6817
|
g()
|
|
6518
|
-
],
|
|
6519
|
-
|
|
6818
|
+
], C.prototype, "_showScreenCastDialog");
|
|
6819
|
+
$([
|
|
6520
6820
|
g()
|
|
6521
|
-
],
|
|
6522
|
-
|
|
6821
|
+
], C.prototype, "_previewFileId");
|
|
6822
|
+
$([
|
|
6523
6823
|
g()
|
|
6524
|
-
],
|
|
6525
|
-
|
|
6824
|
+
], C.prototype, "_previewDims");
|
|
6825
|
+
$([
|
|
6526
6826
|
g()
|
|
6527
|
-
],
|
|
6528
|
-
|
|
6827
|
+
], C.prototype, "_fullscreenPreviewUrl");
|
|
6828
|
+
$([
|
|
6529
6829
|
g()
|
|
6530
|
-
],
|
|
6531
|
-
|
|
6830
|
+
], C.prototype, "_fullscreenVideoFile");
|
|
6831
|
+
$([
|
|
6532
6832
|
g()
|
|
6533
|
-
],
|
|
6534
|
-
|
|
6833
|
+
], C.prototype, "_fullscreenZoomed");
|
|
6834
|
+
$([
|
|
6535
6835
|
g()
|
|
6536
|
-
],
|
|
6537
|
-
|
|
6836
|
+
], C.prototype, "_bodyDragOver");
|
|
6837
|
+
$([
|
|
6538
6838
|
g()
|
|
6539
|
-
],
|
|
6540
|
-
|
|
6839
|
+
], C.prototype, "_isMinimized");
|
|
6840
|
+
$([
|
|
6541
6841
|
g()
|
|
6542
|
-
],
|
|
6543
|
-
let
|
|
6842
|
+
], C.prototype, "_isPillExpanded");
|
|
6843
|
+
let Ct = C;
|
|
6544
6844
|
export {
|
|
6545
6845
|
le as A,
|
|
6546
6846
|
X as C,
|
|
6547
6847
|
v as P,
|
|
6548
|
-
|
|
6549
|
-
|
|
6550
|
-
|
|
6848
|
+
O as S,
|
|
6849
|
+
He as U,
|
|
6850
|
+
U as a,
|
|
6551
6851
|
ne as b,
|
|
6552
6852
|
B as c,
|
|
6553
|
-
|
|
6853
|
+
ze as d,
|
|
6554
6854
|
ae as e,
|
|
6555
|
-
|
|
6556
|
-
|
|
6557
|
-
|
|
6855
|
+
R as f,
|
|
6856
|
+
Ct as g,
|
|
6857
|
+
je as h,
|
|
6558
6858
|
oe as i,
|
|
6559
|
-
|
|
6560
|
-
|
|
6859
|
+
Oe as j,
|
|
6860
|
+
Ye as k,
|
|
6561
6861
|
de as l,
|
|
6562
|
-
|
|
6862
|
+
Je as m,
|
|
6563
6863
|
W as n,
|
|
6564
|
-
|
|
6565
|
-
|
|
6566
|
-
|
|
6567
|
-
|
|
6568
|
-
|
|
6569
|
-
|
|
6570
|
-
|
|
6571
|
-
|
|
6864
|
+
q as o,
|
|
6865
|
+
L as p,
|
|
6866
|
+
mt as q,
|
|
6867
|
+
qe as r,
|
|
6868
|
+
_t as s,
|
|
6869
|
+
kt as t,
|
|
6870
|
+
wt as u,
|
|
6871
|
+
yt as v
|
|
6572
6872
|
};
|