@geekapps/silo-elements-nextjs 0.1.5 → 0.1.7
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/FileUploader.js +81 -80
- package/dist/FileUploader.js.map +1 -1
- package/dist/ImageUploader.js +86 -56
- package/dist/ImageUploader.js.map +1 -1
- package/dist/MediaUploader.js +253 -189
- package/dist/MediaUploader.js.map +1 -1
- package/dist/VideoUploader.js +86 -53
- package/dist/VideoUploader.js.map +1 -1
- package/dist/index.js +253 -189
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/MediaUploader.js
CHANGED
|
@@ -249,6 +249,14 @@ function getFileIcon(mimeType) {
|
|
|
249
249
|
if (mimeType.includes("zip") || mimeType.includes("tar") || mimeType.includes("gzip")) return "\u{1F4E6}";
|
|
250
250
|
return "\u{1F4CE}";
|
|
251
251
|
}
|
|
252
|
+
function uploadLabel(status, progress) {
|
|
253
|
+
if (status === "preparing") return "Preparando\u2026";
|
|
254
|
+
if (status === "completing") return "Concluindo\u2026";
|
|
255
|
+
if (progress < 30) return "Iniciando envio\u2026";
|
|
256
|
+
if (progress < 70) return "Enviando imagem\u2026";
|
|
257
|
+
if (progress < 95) return "Quase l\xE1\u2026";
|
|
258
|
+
return "Finalizando\u2026";
|
|
259
|
+
}
|
|
252
260
|
function ImageUploader({
|
|
253
261
|
bucket,
|
|
254
262
|
expiresIn,
|
|
@@ -279,11 +287,7 @@ function ImageUploader({
|
|
|
279
287
|
const doUpload = useCallback(async (file, opts) => {
|
|
280
288
|
if (showPreview) setPreview(URL.createObjectURL(file));
|
|
281
289
|
try {
|
|
282
|
-
const result = await upload(file, {
|
|
283
|
-
...bucket !== void 0 && { bucket },
|
|
284
|
-
visibility,
|
|
285
|
-
image: opts
|
|
286
|
-
});
|
|
290
|
+
const result = await upload(file, { ...bucket !== void 0 && { bucket }, visibility, image: opts });
|
|
287
291
|
if (result) onUpload?.(result);
|
|
288
292
|
} catch (err) {
|
|
289
293
|
onError?.(err instanceof Error ? err : new Error(String(err)));
|
|
@@ -310,7 +314,7 @@ function ImageUploader({
|
|
|
310
314
|
};
|
|
311
315
|
const isUploading = state.status === "uploading" || state.status === "preparing" || state.status === "completing";
|
|
312
316
|
const progress = state.status === "uploading" ? state.progress : state.status === "completing" ? 99 : 0;
|
|
313
|
-
const isPaused = state.status === "idle" && preview !== null;
|
|
317
|
+
const isPaused = state.status === "idle" && preview !== null && !stagedFile;
|
|
314
318
|
if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
|
|
315
319
|
if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
|
|
316
320
|
return /* @__PURE__ */ jsxs("div", { className: `silo-image-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
|
|
@@ -324,16 +328,16 @@ function ImageUploader({
|
|
|
324
328
|
disabled: disabled || isUploading,
|
|
325
329
|
onFiles: handleFiles,
|
|
326
330
|
style: { padding: "32px 24px", textAlign: "center" },
|
|
327
|
-
children: preview && !isUploading ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap:
|
|
328
|
-
/* @__PURE__ */ jsx("img", { src: preview, alt: "
|
|
329
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
330
|
-
] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap:
|
|
331
|
-
renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "var(--silo-text-muted)", opacity: 0.
|
|
331
|
+
children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
|
|
332
|
+
/* @__PURE__ */ jsx("img", { src: preview, alt: "Pr\xE9-visualiza\xE7\xE3o", style: { maxWidth: "100%", maxHeight: 200, borderRadius: 8, objectFit: "contain" } }),
|
|
333
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: "Clique ou arraste para trocar a imagem" })
|
|
334
|
+
] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
|
|
335
|
+
renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "var(--silo-text-muted)", opacity: 0.5 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
|
|
332
336
|
children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
333
|
-
/* @__PURE__ */ jsx("span", { style: { fontWeight:
|
|
334
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
335
|
-
maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize:
|
|
336
|
-
"
|
|
337
|
+
/* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 15, color: "var(--silo-text)" }, children: "Arraste sua imagem aqui" }),
|
|
338
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "var(--silo-text-muted)" }, children: "ou clique para escolher do seu dispositivo" }),
|
|
339
|
+
maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: [
|
|
340
|
+
"Tamanho m\xE1ximo: ",
|
|
337
341
|
formatBytes(maxSize)
|
|
338
342
|
] })
|
|
339
343
|
] })
|
|
@@ -341,14 +345,11 @@ function ImageUploader({
|
|
|
341
345
|
}
|
|
342
346
|
),
|
|
343
347
|
showImageOptions && stagedFile && !isUploading && state.status !== "done" && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
344
|
-
/* @__PURE__ */ jsx(
|
|
345
|
-
|
|
346
|
-
{
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
style: { padding: "12px 14px", borderRadius: 8, border: "1px solid var(--silo-border, #e2e8f0)", background: "var(--silo-bg-hover, #f8fafc)" }
|
|
350
|
-
}
|
|
351
|
-
),
|
|
348
|
+
preview && /* @__PURE__ */ jsx("div", { style: { borderRadius: 10, overflow: "hidden", border: "1px solid var(--silo-border)" }, children: /* @__PURE__ */ jsx("img", { src: preview, alt: "Pr\xE9-visualiza\xE7\xE3o", style: { width: "100%", maxHeight: 200, objectFit: "contain", display: "block", background: "var(--silo-bg-hover, #f8fafc)" } }) }),
|
|
349
|
+
/* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
|
|
350
|
+
/* @__PURE__ */ jsx("div", { style: { padding: "8px 14px", background: "var(--silo-bg-hover, #f1f5f9)", fontSize: 12, fontWeight: 700, color: "var(--silo-text-muted)", letterSpacing: "0.04em" }, children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
|
|
351
|
+
/* @__PURE__ */ jsx(ImageOptions, { value: imageOpts, onChange: setImageOpts, style: { padding: "12px 14px" } })
|
|
352
|
+
] }),
|
|
352
353
|
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
|
|
353
354
|
/* @__PURE__ */ jsx(
|
|
354
355
|
"button",
|
|
@@ -357,7 +358,7 @@ function ImageUploader({
|
|
|
357
358
|
setStagedFile(null);
|
|
358
359
|
setPreview(null);
|
|
359
360
|
},
|
|
360
|
-
style: { padding: "
|
|
361
|
+
style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", color: "var(--silo-text-muted)", fontSize: 13, fontWeight: 600, cursor: "pointer" },
|
|
361
362
|
children: "Cancelar"
|
|
362
363
|
}
|
|
363
364
|
),
|
|
@@ -369,49 +370,78 @@ function ImageUploader({
|
|
|
369
370
|
setStagedFile(null);
|
|
370
371
|
void doUpload(f, imageOpts);
|
|
371
372
|
},
|
|
372
|
-
style: { flex: 1, padding: "
|
|
373
|
+
style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
|
|
373
374
|
children: "Enviar imagem"
|
|
374
375
|
}
|
|
375
376
|
)
|
|
376
377
|
] })
|
|
377
378
|
] }),
|
|
378
|
-
isUploading && /* @__PURE__ */
|
|
379
|
-
/* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center"
|
|
380
|
-
/* @__PURE__ */ jsx("span", {
|
|
381
|
-
/* @__PURE__ */ jsxs("
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
"%"
|
|
385
|
-
] }),
|
|
386
|
-
/* @__PURE__ */ jsx("button", { onClick: pause, style: { background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Pausar" })
|
|
379
|
+
isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: 16, borderRadius: 10, border: "1px solid var(--silo-border)", background: "var(--silo-bg)" }, children: [
|
|
380
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
|
|
381
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)" }, children: uploadLabel(state.status, progress) }),
|
|
382
|
+
/* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--silo-accent, #6366f1)" }, children: [
|
|
383
|
+
progress,
|
|
384
|
+
"%"
|
|
387
385
|
] })
|
|
388
386
|
] }),
|
|
389
387
|
/* @__PURE__ */ jsx(ProgressBar, { progress })
|
|
390
|
-
] })
|
|
391
|
-
isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap:
|
|
392
|
-
/* @__PURE__ */ jsx(
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
388
|
+
] })),
|
|
389
|
+
isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
|
|
390
|
+
/* @__PURE__ */ jsx(
|
|
391
|
+
"button",
|
|
392
|
+
{
|
|
393
|
+
onClick: () => resume({ ...bucket !== void 0 && { bucket }, visibility, image: imageOpts }),
|
|
394
|
+
style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "#10b981", color: "#fff", fontSize: 13, fontWeight: 700, cursor: "pointer" },
|
|
395
|
+
children: "\u25B6 Retomar envio"
|
|
396
|
+
}
|
|
397
|
+
),
|
|
398
|
+
/* @__PURE__ */ jsx(
|
|
399
|
+
"button",
|
|
400
|
+
{
|
|
401
|
+
onClick: () => {
|
|
402
|
+
abort();
|
|
403
|
+
setPreview(null);
|
|
404
|
+
},
|
|
405
|
+
style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", fontSize: 13, cursor: "pointer", color: "var(--silo-text-muted)" },
|
|
406
|
+
children: "Cancelar"
|
|
407
|
+
}
|
|
408
|
+
)
|
|
397
409
|
] }),
|
|
398
|
-
state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap:
|
|
399
|
-
/* @__PURE__ */ jsx("
|
|
400
|
-
/* @__PURE__ */ jsxs("div", { style: { flex: 1
|
|
401
|
-
/* @__PURE__ */ jsx("div", { style: { fontWeight:
|
|
402
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize:
|
|
410
|
+
state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 10, background: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)" }, children: [
|
|
411
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
|
|
412
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
|
|
413
|
+
/* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "Imagem enviada com sucesso!" }),
|
|
414
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(state.result.size) })
|
|
403
415
|
] }),
|
|
404
|
-
/* @__PURE__ */ jsx(
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
416
|
+
/* @__PURE__ */ jsx(
|
|
417
|
+
"button",
|
|
418
|
+
{
|
|
419
|
+
onClick: () => {
|
|
420
|
+
reset();
|
|
421
|
+
setPreview(null);
|
|
422
|
+
},
|
|
423
|
+
style: { background: "none", border: "1px solid rgba(34,197,94,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#16a34a", padding: "4px 10px", flexShrink: 0 },
|
|
424
|
+
children: "Enviar outra"
|
|
425
|
+
}
|
|
426
|
+
)
|
|
408
427
|
] }),
|
|
409
|
-
state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap:
|
|
410
|
-
/* @__PURE__ */ jsx("span", { children:
|
|
411
|
-
/* @__PURE__ */
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
428
|
+
state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 10, background: "rgba(239,68,68,0.07)", border: "1px solid rgba(239,68,68,0.2)" }, children: [
|
|
429
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
|
|
430
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
|
|
431
|
+
/* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13, color: "#ef4444" }, children: "N\xE3o foi poss\xEDvel enviar a imagem" }),
|
|
432
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: state.error.message })
|
|
433
|
+
] }),
|
|
434
|
+
/* @__PURE__ */ jsx(
|
|
435
|
+
"button",
|
|
436
|
+
{
|
|
437
|
+
onClick: () => {
|
|
438
|
+
reset();
|
|
439
|
+
setPreview(null);
|
|
440
|
+
},
|
|
441
|
+
style: { background: "none", border: "1px solid rgba(239,68,68,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#ef4444", padding: "4px 10px", flexShrink: 0 },
|
|
442
|
+
children: "Tentar novamente"
|
|
443
|
+
}
|
|
444
|
+
)
|
|
415
445
|
] })
|
|
416
446
|
] });
|
|
417
447
|
}
|
|
@@ -541,6 +571,15 @@ var DEFAULT_VIDEO_OPTS = {
|
|
|
541
571
|
codec: "h264",
|
|
542
572
|
transcoding: "auto"
|
|
543
573
|
};
|
|
574
|
+
function uploadLabel2(status, progress) {
|
|
575
|
+
if (status === "preparing") return "Preparando\u2026";
|
|
576
|
+
if (status === "completing") return "Concluindo envio\u2026";
|
|
577
|
+
if (progress < 20) return "Iniciando envio\u2026";
|
|
578
|
+
if (progress < 50) return "Enviando v\xEDdeo\u2026";
|
|
579
|
+
if (progress < 80) return "Ainda enviando\u2026";
|
|
580
|
+
if (progress < 97) return "Quase terminando\u2026";
|
|
581
|
+
return "Finalizando\u2026";
|
|
582
|
+
}
|
|
544
583
|
function VideoUploader({
|
|
545
584
|
bucket,
|
|
546
585
|
expiresIn,
|
|
@@ -571,11 +610,7 @@ function VideoUploader({
|
|
|
571
610
|
const doUpload = useCallback(async (file, opts) => {
|
|
572
611
|
if (showPreview) setPreview(URL.createObjectURL(file));
|
|
573
612
|
try {
|
|
574
|
-
const result = await upload(file, {
|
|
575
|
-
...bucket !== void 0 && { bucket },
|
|
576
|
-
visibility,
|
|
577
|
-
video: opts
|
|
578
|
-
});
|
|
613
|
+
const result = await upload(file, { ...bucket !== void 0 && { bucket }, visibility, video: opts });
|
|
579
614
|
if (result) onUpload?.(result);
|
|
580
615
|
} catch (err) {
|
|
581
616
|
onError?.(err instanceof Error ? err : new Error(String(err)));
|
|
@@ -602,7 +637,7 @@ function VideoUploader({
|
|
|
602
637
|
};
|
|
603
638
|
const isUploading = state.status === "uploading" || state.status === "preparing" || state.status === "completing";
|
|
604
639
|
const progress = state.status === "uploading" ? state.progress : state.status === "completing" ? 99 : 0;
|
|
605
|
-
const isPaused = state.status === "idle" && preview !== null;
|
|
640
|
+
const isPaused = state.status === "idle" && preview !== null && !stagedFile;
|
|
606
641
|
if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
|
|
607
642
|
if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
|
|
608
643
|
return /* @__PURE__ */ jsxs("div", { className: `silo-video-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
|
|
@@ -616,15 +651,15 @@ function VideoUploader({
|
|
|
616
651
|
disabled: disabled || isUploading,
|
|
617
652
|
onFiles: handleFiles,
|
|
618
653
|
style: { padding: "32px 24px", textAlign: "center" },
|
|
619
|
-
children: preview && !isUploading ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap:
|
|
620
|
-
/* @__PURE__ */ jsx("video", { src: preview, style: { maxWidth: "100%", maxHeight:
|
|
621
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
622
|
-
] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap:
|
|
623
|
-
renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "var(--silo-text-muted)", opacity: 0.
|
|
654
|
+
children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
|
|
655
|
+
/* @__PURE__ */ jsx("video", { src: preview, style: { maxWidth: "100%", maxHeight: 180, borderRadius: 8 }, muted: true, playsInline: true }),
|
|
656
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: "Clique ou arraste para trocar o v\xEDdeo" })
|
|
657
|
+
] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
|
|
658
|
+
renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "var(--silo-text-muted)", opacity: 0.5 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 10l4.553-2.069A1 1 0 0121 8.878v6.244a1 1 0 01-1.447.894L15 14M3 8a2 2 0 012-2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8z" }) }),
|
|
624
659
|
children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
625
|
-
/* @__PURE__ */ jsx("span", { style: { fontWeight:
|
|
626
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
627
|
-
/* @__PURE__ */ jsxs("span", { style: { fontSize:
|
|
660
|
+
/* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 15, color: "var(--silo-text)" }, children: "Arraste seu v\xEDdeo aqui" }),
|
|
661
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "var(--silo-text-muted)" }, children: "ou clique para escolher do seu dispositivo" }),
|
|
662
|
+
/* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: [
|
|
628
663
|
"MP4, MOV, MKV, WebM",
|
|
629
664
|
maxSize ? ` \xB7 M\xE1x ${formatBytes(maxSize)}` : ""
|
|
630
665
|
] })
|
|
@@ -633,14 +668,11 @@ function VideoUploader({
|
|
|
633
668
|
}
|
|
634
669
|
),
|
|
635
670
|
showVideoOptions && stagedFile && !isUploading && state.status !== "done" && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
636
|
-
/* @__PURE__ */ jsx(
|
|
637
|
-
|
|
638
|
-
{
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
style: { padding: "12px 14px", borderRadius: 8, border: "1px solid var(--silo-border, #e2e8f0)", background: "var(--silo-bg-hover, #f8fafc)" }
|
|
642
|
-
}
|
|
643
|
-
),
|
|
671
|
+
preview && /* @__PURE__ */ jsx("div", { style: { borderRadius: 10, overflow: "hidden", border: "1px solid var(--silo-border)", background: "#000" }, children: /* @__PURE__ */ jsx("video", { src: preview, style: { width: "100%", maxHeight: 200, display: "block" }, muted: true, playsInline: true, controls: true }) }),
|
|
672
|
+
/* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
|
|
673
|
+
/* @__PURE__ */ jsx("div", { style: { padding: "8px 14px", background: "var(--silo-bg-hover, #f1f5f9)", fontSize: 12, fontWeight: 700, color: "var(--silo-text-muted)", letterSpacing: "0.04em" }, children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
|
|
674
|
+
/* @__PURE__ */ jsx(VideoOptions, { value: videoOpts, onChange: setVideoOpts, style: { padding: "12px 14px" } })
|
|
675
|
+
] }),
|
|
644
676
|
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
|
|
645
677
|
/* @__PURE__ */ jsx(
|
|
646
678
|
"button",
|
|
@@ -649,7 +681,7 @@ function VideoUploader({
|
|
|
649
681
|
setStagedFile(null);
|
|
650
682
|
setPreview(null);
|
|
651
683
|
},
|
|
652
|
-
style: { padding: "
|
|
684
|
+
style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", color: "var(--silo-text-muted)", fontSize: 13, fontWeight: 600, cursor: "pointer" },
|
|
653
685
|
children: "Cancelar"
|
|
654
686
|
}
|
|
655
687
|
),
|
|
@@ -661,54 +693,85 @@ function VideoUploader({
|
|
|
661
693
|
setStagedFile(null);
|
|
662
694
|
void doUpload(f, videoOpts);
|
|
663
695
|
},
|
|
664
|
-
style: { flex: 1, padding: "
|
|
696
|
+
style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
|
|
665
697
|
children: "Enviar v\xEDdeo"
|
|
666
698
|
}
|
|
667
699
|
)
|
|
668
700
|
] })
|
|
669
701
|
] }),
|
|
670
|
-
isUploading && /* @__PURE__ */
|
|
671
|
-
/* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center"
|
|
672
|
-
/* @__PURE__ */ jsx("span", {
|
|
673
|
-
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap:
|
|
674
|
-
/* @__PURE__ */ jsxs("span", { children: [
|
|
702
|
+
isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: 16, borderRadius: 10, border: "1px solid var(--silo-border)", background: "var(--silo-bg)" }, children: [
|
|
703
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
|
|
704
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)" }, children: uploadLabel2(state.status, progress) }),
|
|
705
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
|
|
706
|
+
/* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--silo-accent, #6366f1)" }, children: [
|
|
675
707
|
progress,
|
|
676
708
|
"%"
|
|
677
709
|
] }),
|
|
678
|
-
/* @__PURE__ */ jsx("button", { onClick: pause, style: { background: "none", border: "
|
|
710
|
+
/* @__PURE__ */ jsx("button", { onClick: pause, style: { background: "none", border: "1px solid var(--silo-border)", borderRadius: 6, cursor: "pointer", fontSize: 11, color: "var(--silo-text-muted)", padding: "2px 8px" }, children: "Pausar" })
|
|
679
711
|
] })
|
|
680
712
|
] }),
|
|
681
713
|
/* @__PURE__ */ jsx(ProgressBar, { progress }),
|
|
682
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
683
|
-
] })
|
|
684
|
-
isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap:
|
|
714
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--silo-text-muted)" }, children: "O processamento do v\xEDdeo come\xE7a automaticamente ap\xF3s o envio" })
|
|
715
|
+
] })),
|
|
716
|
+
isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
|
|
685
717
|
/* @__PURE__ */ jsx(
|
|
686
718
|
"button",
|
|
687
719
|
{
|
|
688
|
-
onClick: () => resume({ ...bucket !== void 0 && { bucket }, visibility, video:
|
|
689
|
-
style: { flex: 1, padding: "
|
|
690
|
-
children: "Retomar
|
|
720
|
+
onClick: () => resume({ ...bucket !== void 0 && { bucket }, visibility, video: videoOpts }),
|
|
721
|
+
style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "#10b981", color: "#fff", fontSize: 13, fontWeight: 700, cursor: "pointer" },
|
|
722
|
+
children: "\u25B6 Retomar envio"
|
|
691
723
|
}
|
|
692
724
|
),
|
|
693
|
-
/* @__PURE__ */ jsx(
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
725
|
+
/* @__PURE__ */ jsx(
|
|
726
|
+
"button",
|
|
727
|
+
{
|
|
728
|
+
onClick: () => {
|
|
729
|
+
abort();
|
|
730
|
+
setPreview(null);
|
|
731
|
+
},
|
|
732
|
+
style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", fontSize: 13, cursor: "pointer", color: "var(--silo-text-muted)" },
|
|
733
|
+
children: "Cancelar"
|
|
734
|
+
}
|
|
735
|
+
)
|
|
697
736
|
] }),
|
|
698
|
-
state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex",
|
|
699
|
-
/* @__PURE__ */
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
737
|
+
state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: "14px 16px", borderRadius: 10, background: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)" }, children: [
|
|
738
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
|
|
739
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
|
|
740
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
|
|
741
|
+
/* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "V\xEDdeo enviado com sucesso!" }),
|
|
742
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(state.result.size) })
|
|
743
|
+
] }),
|
|
744
|
+
/* @__PURE__ */ jsx(
|
|
745
|
+
"button",
|
|
746
|
+
{
|
|
747
|
+
onClick: () => {
|
|
748
|
+
reset();
|
|
749
|
+
setPreview(null);
|
|
750
|
+
},
|
|
751
|
+
style: { background: "none", border: "1px solid rgba(34,197,94,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#16a34a", padding: "4px 10px", flexShrink: 0 },
|
|
752
|
+
children: "Enviar outro"
|
|
753
|
+
}
|
|
754
|
+
)
|
|
755
|
+
] }),
|
|
756
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", padding: "8px 12px", borderRadius: 8, background: "rgba(34,197,94,0.06)", border: "1px solid rgba(34,197,94,0.15)" }, children: "\u{1F3AC} Seu v\xEDdeo est\xE1 sendo processado em segundo plano. Isso pode levar alguns minutos dependendo do tamanho." })
|
|
705
757
|
] }),
|
|
706
|
-
state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap:
|
|
707
|
-
/* @__PURE__ */ jsx("span", { children:
|
|
708
|
-
/* @__PURE__ */
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
758
|
+
state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 10, background: "rgba(239,68,68,0.07)", border: "1px solid rgba(239,68,68,0.2)" }, children: [
|
|
759
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
|
|
760
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
|
|
761
|
+
/* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13, color: "#ef4444" }, children: "N\xE3o foi poss\xEDvel enviar o v\xEDdeo" }),
|
|
762
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: state.error.message })
|
|
763
|
+
] }),
|
|
764
|
+
/* @__PURE__ */ jsx(
|
|
765
|
+
"button",
|
|
766
|
+
{
|
|
767
|
+
onClick: () => {
|
|
768
|
+
reset();
|
|
769
|
+
setPreview(null);
|
|
770
|
+
},
|
|
771
|
+
style: { background: "none", border: "1px solid rgba(239,68,68,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#ef4444", padding: "4px 10px", flexShrink: 0 },
|
|
772
|
+
children: "Tentar novamente"
|
|
773
|
+
}
|
|
774
|
+
)
|
|
712
775
|
] })
|
|
713
776
|
] });
|
|
714
777
|
}
|
|
@@ -720,6 +783,14 @@ var DEFAULT_VIDEO_OPTS2 = {
|
|
|
720
783
|
codec: "h264",
|
|
721
784
|
transcoding: "auto"
|
|
722
785
|
};
|
|
786
|
+
function uploadLabel3(status, progress) {
|
|
787
|
+
if (status === "preparing") return "Preparando\u2026";
|
|
788
|
+
if (status === "completing") return "Concluindo\u2026";
|
|
789
|
+
if (progress < 30) return "Iniciando envio\u2026";
|
|
790
|
+
if (progress < 70) return "Enviando\u2026";
|
|
791
|
+
if (progress < 95) return "Quase l\xE1\u2026";
|
|
792
|
+
return "Finalizando\u2026";
|
|
793
|
+
}
|
|
723
794
|
function FileUploader({
|
|
724
795
|
bucket,
|
|
725
796
|
visibility = "private",
|
|
@@ -768,11 +839,8 @@ function FileUploader({
|
|
|
768
839
|
function setRename(index, name, files) {
|
|
769
840
|
setRenames((prev) => {
|
|
770
841
|
const next = new Map(prev);
|
|
771
|
-
if (name.trim() && name.trim() !== files[index]?.name)
|
|
772
|
-
|
|
773
|
-
} else {
|
|
774
|
-
next.delete(index);
|
|
775
|
-
}
|
|
842
|
+
if (name.trim() && name.trim() !== files[index]?.name) next.set(index, name.trim());
|
|
843
|
+
else next.delete(index);
|
|
776
844
|
return next;
|
|
777
845
|
});
|
|
778
846
|
}
|
|
@@ -786,8 +854,7 @@ function FileUploader({
|
|
|
786
854
|
const effectiveVideo = showVideoOptions ? videoOpts : video ?? videoOpts;
|
|
787
855
|
if (multiple && files.length > 1) {
|
|
788
856
|
try {
|
|
789
|
-
const
|
|
790
|
-
const results = await batch.upload(files, opts);
|
|
857
|
+
const results = await batch.upload(files, { ...bucket !== void 0 && { bucket }, visibility, image: effectiveImage, video: effectiveVideo });
|
|
791
858
|
onBatchUpload?.(results);
|
|
792
859
|
results.forEach((r) => onUpload?.(r));
|
|
793
860
|
} catch (err) {
|
|
@@ -797,23 +864,20 @@ function FileUploader({
|
|
|
797
864
|
const file = files[0];
|
|
798
865
|
if (!file) return;
|
|
799
866
|
try {
|
|
800
|
-
const
|
|
801
|
-
const result = await single.upload(file, opts);
|
|
867
|
+
const result = await single.upload(file, { ...bucket !== void 0 && { bucket }, visibility, image: effectiveImage, video: effectiveVideo });
|
|
802
868
|
if (result) onUpload?.(result);
|
|
803
869
|
} catch (err) {
|
|
804
870
|
onError?.(err instanceof Error ? err : new Error(String(err)));
|
|
805
871
|
}
|
|
806
872
|
}
|
|
807
|
-
}, [single, batch, multiple, bucket, visibility, image, video, onUpload, onBatchUpload, onError]);
|
|
873
|
+
}, [single, batch, multiple, bucket, visibility, image, video, imageOpts, videoOpts, showImageOptions, showVideoOptions, onUpload, onBatchUpload, onError]);
|
|
808
874
|
const handleFiles = useCallback(async (files) => {
|
|
809
875
|
const needsStaging = allowRename || showImageOptions && files.some((f) => f.type.startsWith("image/")) || showVideoOptions && files.some((f) => f.type.startsWith("video/"));
|
|
810
876
|
if (needsStaging) {
|
|
811
877
|
setStaged(files);
|
|
812
878
|
setRenames(/* @__PURE__ */ new Map());
|
|
813
|
-
} else
|
|
814
|
-
|
|
815
|
-
}
|
|
816
|
-
}, [allowRename, doUpload]);
|
|
879
|
+
} else await doUpload(files);
|
|
880
|
+
}, [allowRename, showImageOptions, showVideoOptions, doUpload]);
|
|
817
881
|
async function handleConfirmUpload() {
|
|
818
882
|
if (!staged) return;
|
|
819
883
|
const filesToUpload = staged.map((f, i) => {
|
|
@@ -843,21 +907,22 @@ function FileUploader({
|
|
|
843
907
|
onFiles: handleFiles,
|
|
844
908
|
style: { padding: "28px 24px", textAlign: "center" },
|
|
845
909
|
children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
|
|
846
|
-
renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "var(--silo-text-muted)", opacity: 0.
|
|
910
|
+
renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "var(--silo-text-muted)", opacity: 0.5 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" }) }),
|
|
847
911
|
children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
848
|
-
/* @__PURE__ */ jsx("span", { style: { fontWeight:
|
|
849
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
850
|
-
maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize:
|
|
851
|
-
"
|
|
912
|
+
/* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 15, color: "var(--silo-text)" }, children: multiple ? "Arraste seus arquivos aqui" : "Arraste seu arquivo aqui" }),
|
|
913
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "var(--silo-text-muted)" }, children: "ou clique para escolher do seu dispositivo" }),
|
|
914
|
+
maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: [
|
|
915
|
+
"Tamanho m\xE1ximo: ",
|
|
852
916
|
formatBytes(maxSize)
|
|
853
917
|
] })
|
|
854
918
|
] })
|
|
855
919
|
] })
|
|
856
920
|
}
|
|
857
921
|
),
|
|
858
|
-
staged && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap:
|
|
859
|
-
|
|
860
|
-
|
|
922
|
+
staged && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
|
|
923
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text-muted)", marginBottom: 2 }, children: staged.length === 1 ? "1 arquivo selecionado" : `${staged.length} arquivos selecionados` }),
|
|
924
|
+
staged.map((f, i) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "10px 12px", backgroundColor: "var(--silo-bg)", borderRadius: 10, border: "1px solid var(--silo-border)" }, children: [
|
|
925
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 20, flexShrink: 0 }, children: getFileIcon(f.type) }),
|
|
861
926
|
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
862
927
|
editingIndex === i ? /* @__PURE__ */ jsx(
|
|
863
928
|
"input",
|
|
@@ -876,28 +941,28 @@ function FileUploader({
|
|
|
876
941
|
}
|
|
877
942
|
if (e.key === "Escape") setEditingIndex(null);
|
|
878
943
|
},
|
|
879
|
-
style: { width: "100%", fontSize:
|
|
944
|
+
style: { width: "100%", fontSize: 13, fontWeight: 500, border: "1px solid var(--silo-accent, #6366f1)", borderRadius: 5, padding: "2px 8px", outline: "none", background: "var(--silo-bg)", color: "var(--silo-text)", fontFamily: "var(--silo-font)" }
|
|
880
945
|
}
|
|
881
946
|
) : /* @__PURE__ */ jsxs(
|
|
882
947
|
"div",
|
|
883
948
|
{
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
949
|
+
style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--silo-text)", cursor: allowRename ? "text" : "default" },
|
|
950
|
+
onClick: () => allowRename && setEditingIndex(i),
|
|
951
|
+
title: allowRename ? "Clique para renomear" : void 0,
|
|
887
952
|
children: [
|
|
888
953
|
effectiveName(i, staged),
|
|
889
954
|
renames.has(i) && /* @__PURE__ */ jsx("span", { style: { marginLeft: 6, fontSize: 10, color: "var(--silo-accent)", fontWeight: 700 }, children: "renomeado" })
|
|
890
955
|
]
|
|
891
956
|
}
|
|
892
957
|
),
|
|
893
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize:
|
|
958
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--silo-text-muted)", marginTop: 1 }, children: formatBytes(f.size) })
|
|
894
959
|
] }),
|
|
895
|
-
/* @__PURE__ */ jsx(
|
|
960
|
+
allowRename && /* @__PURE__ */ jsx(
|
|
896
961
|
"button",
|
|
897
962
|
{
|
|
898
963
|
onClick: () => setEditingIndex(i),
|
|
899
964
|
title: "Renomear",
|
|
900
|
-
style: { background: "none", border: "none", cursor: "pointer", fontSize:
|
|
965
|
+
style: { background: "none", border: "none", cursor: "pointer", fontSize: 14, color: "var(--silo-text-muted)", padding: "0 4px", flexShrink: 0 },
|
|
901
966
|
children: "\u270F\uFE0F"
|
|
902
967
|
}
|
|
903
968
|
),
|
|
@@ -906,39 +971,28 @@ function FileUploader({
|
|
|
906
971
|
{
|
|
907
972
|
onClick: () => {
|
|
908
973
|
const next = staged.filter((_, j) => j !== i);
|
|
909
|
-
if (next.length === 0)
|
|
910
|
-
|
|
911
|
-
} else {
|
|
912
|
-
setStaged(next);
|
|
913
|
-
}
|
|
974
|
+
if (next.length === 0) clearStaging();
|
|
975
|
+
else setStaged(next);
|
|
914
976
|
},
|
|
915
|
-
style: { background: "none", border: "none", cursor: "pointer", fontSize:
|
|
977
|
+
style: { background: "none", border: "none", cursor: "pointer", fontSize: 18, color: "var(--silo-text-muted)", padding: "0 4px", lineHeight: 1, flexShrink: 0 },
|
|
916
978
|
children: "\xD7"
|
|
917
979
|
}
|
|
918
980
|
)
|
|
919
981
|
] }, i)),
|
|
920
|
-
showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */
|
|
921
|
-
|
|
922
|
-
{
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
}
|
|
927
|
-
),
|
|
928
|
-
|
|
929
|
-
VideoOptions,
|
|
930
|
-
{
|
|
931
|
-
value: videoOpts,
|
|
932
|
-
onChange: setVideoOpts,
|
|
933
|
-
style: { padding: "12px 14px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "var(--silo-bg-hover, #f8fafc)", marginTop: 4 }
|
|
934
|
-
}
|
|
935
|
-
),
|
|
936
|
-
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", marginTop: "4px" }, children: [
|
|
982
|
+
showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
|
|
983
|
+
/* @__PURE__ */ jsx("div", { style: { padding: "8px 14px", background: "var(--silo-bg-hover, #f1f5f9)", fontSize: 12, fontWeight: 700, color: "var(--silo-text-muted)", letterSpacing: "0.04em" }, children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
|
|
984
|
+
/* @__PURE__ */ jsx(ImageOptions, { value: imageOpts, onChange: setImageOpts, style: { padding: "12px 14px" } })
|
|
985
|
+
] }),
|
|
986
|
+
showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
|
|
987
|
+
/* @__PURE__ */ jsx("div", { style: { padding: "8px 14px", background: "var(--silo-bg-hover, #f1f5f9)", fontSize: 12, fontWeight: 700, color: "var(--silo-text-muted)", letterSpacing: "0.04em" }, children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
|
|
988
|
+
/* @__PURE__ */ jsx(VideoOptions, { value: videoOpts, onChange: setVideoOpts, style: { padding: "12px 14px" } })
|
|
989
|
+
] }),
|
|
990
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, marginTop: 4 }, children: [
|
|
937
991
|
/* @__PURE__ */ jsx(
|
|
938
992
|
"button",
|
|
939
993
|
{
|
|
940
994
|
onClick: clearStaging,
|
|
941
|
-
style: { padding: "
|
|
995
|
+
style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", color: "var(--silo-text-muted)", fontSize: 13, fontWeight: 600, cursor: "pointer" },
|
|
942
996
|
children: "Cancelar"
|
|
943
997
|
}
|
|
944
998
|
),
|
|
@@ -946,72 +1000,82 @@ function FileUploader({
|
|
|
946
1000
|
"button",
|
|
947
1001
|
{
|
|
948
1002
|
onClick: handleConfirmUpload,
|
|
949
|
-
style: { flex: 1, padding: "
|
|
1003
|
+
style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
|
|
950
1004
|
children: staged.length > 1 ? `Enviar ${staged.length} arquivos` : "Enviar arquivo"
|
|
951
1005
|
}
|
|
952
1006
|
)
|
|
953
1007
|
] })
|
|
954
1008
|
] }),
|
|
955
|
-
isSingleUploading && !isBatch && /* @__PURE__ */
|
|
956
|
-
/* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between",
|
|
957
|
-
/* @__PURE__ */ jsx("span", {
|
|
958
|
-
/* @__PURE__ */ jsxs("span", { children: [
|
|
1009
|
+
isSingleUploading && !isBatch && (renderProgress ? renderProgress(singleProgress) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: "16px", borderRadius: 10, border: "1px solid var(--silo-border)", background: "var(--silo-bg)" }, children: [
|
|
1010
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
|
|
1011
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)" }, children: uploadLabel3(single.state.status, singleProgress) }),
|
|
1012
|
+
/* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--silo-accent, #6366f1)" }, children: [
|
|
959
1013
|
singleProgress,
|
|
960
1014
|
"%"
|
|
961
1015
|
] })
|
|
962
1016
|
] }),
|
|
963
1017
|
/* @__PURE__ */ jsx(ProgressBar, { progress: singleProgress })
|
|
964
|
-
] })
|
|
965
|
-
isBatch && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap:
|
|
1018
|
+
] })),
|
|
1019
|
+
isBatch && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
|
|
966
1020
|
batch.state.files.map((f, i) => {
|
|
967
1021
|
const st = f.status;
|
|
968
1022
|
const p = st.status === "uploading" ? st.progress : st.status === "paused" ? st.progress : st.status === "done" ? 100 : st.status === "completing" ? 99 : 0;
|
|
969
1023
|
const isPaused = st.status === "paused";
|
|
970
1024
|
const isDone = st.status === "done";
|
|
971
1025
|
const isErr = st.status === "error";
|
|
972
|
-
return /* @__PURE__ */ jsxs("div", { style: { padding: "
|
|
973
|
-
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap:
|
|
974
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
1026
|
+
return /* @__PURE__ */ jsxs("div", { style: { padding: "12px 14px", backgroundColor: "var(--silo-bg)", borderRadius: 10, border: "1px solid var(--silo-border)" }, children: [
|
|
1027
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, marginBottom: isDone || isErr ? 0 : 8 }, children: [
|
|
1028
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: getFileIcon(f.file.type) }),
|
|
975
1029
|
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
976
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize:
|
|
977
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize:
|
|
1030
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--silo-text)" }, children: f.file.name }),
|
|
1031
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--silo-text-muted)" }, children: formatBytes(f.file.size) })
|
|
978
1032
|
] }),
|
|
979
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
980
|
-
|
|
1033
|
+
isDone && /* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: "\u2705" }),
|
|
1034
|
+
isErr && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#ef4444", fontWeight: 600, flexShrink: 0 }, children: "Erro no envio" }),
|
|
1035
|
+
!isDone && !isErr && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 700, color: isPaused ? "#f59e0b" : "var(--silo-accent, #6366f1)", flexShrink: 0 }, children: isPaused ? "Pausado" : `${p}%` }),
|
|
1036
|
+
!isDone && !isErr && f.fileId && (isPaused ? /* @__PURE__ */ jsx("button", { onClick: () => batch.resumeFile(f.fileId), style: { fontSize: 11, padding: "3px 10px", borderRadius: 6, border: "none", background: "#10b981", color: "#fff", cursor: "pointer", fontWeight: 600 }, children: "Retomar" }) : st.status === "uploading" ? /* @__PURE__ */ jsx("button", { onClick: () => batch.pauseFile(f.fileId), style: { fontSize: 11, padding: "3px 10px", borderRadius: 6, border: "1px solid var(--silo-border)", background: "transparent", color: "var(--silo-text-muted)", cursor: "pointer" }, children: "Pausar" }) : null)
|
|
981
1037
|
] }),
|
|
982
1038
|
!isDone && !isErr && /* @__PURE__ */ jsx(ProgressBar, { progress: p })
|
|
983
1039
|
] }, i);
|
|
984
1040
|
}),
|
|
985
|
-
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap:
|
|
1041
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
|
|
986
1042
|
batch.state.status !== "done" && /* @__PURE__ */ jsx(
|
|
987
1043
|
"button",
|
|
988
1044
|
{
|
|
989
1045
|
onClick: isBatchUploading ? batch.pauseAll : batch.resumeAll,
|
|
990
|
-
style: { flex: 1, padding: "
|
|
991
|
-
children: isBatchUploading ? "Pausar tudo" : "Retomar tudo"
|
|
1046
|
+
style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: isBatchUploading ? "#f59e0b" : "#10b981", color: "#fff", fontSize: 13, fontWeight: 700, cursor: "pointer" },
|
|
1047
|
+
children: isBatchUploading ? "\u23F8 Pausar tudo" : "\u25B6 Retomar tudo"
|
|
992
1048
|
}
|
|
993
1049
|
),
|
|
994
1050
|
/* @__PURE__ */ jsx(
|
|
995
1051
|
"button",
|
|
996
1052
|
{
|
|
997
1053
|
onClick: batch.state.status === "done" ? batch.reset : batch.abortAll,
|
|
998
|
-
style: { padding: "
|
|
999
|
-
children: batch.state.status === "done" ? "
|
|
1054
|
+
style: { padding: "10px 16px", borderRadius: 8, border: "none", background: batch.state.status === "done" ? "var(--silo-accent, #6366f1)" : "rgba(239,68,68,0.1)", color: batch.state.status === "done" ? "#fff" : "#ef4444", fontSize: 13, fontWeight: 700, cursor: "pointer" },
|
|
1055
|
+
children: batch.state.status === "done" ? "Enviar mais arquivos" : "Cancelar"
|
|
1000
1056
|
}
|
|
1001
1057
|
)
|
|
1058
|
+
] }),
|
|
1059
|
+
batch.state.status === "done" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "12px 14px", borderRadius: 10, background: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)" }, children: [
|
|
1060
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 20 }, children: "\u{1F389}" }),
|
|
1061
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 14, fontWeight: 600, color: "#16a34a" }, children: batch.state.files.length === 1 ? "Arquivo enviado com sucesso!" : `${batch.state.files.length} arquivos enviados com sucesso!` })
|
|
1002
1062
|
] })
|
|
1003
1063
|
] }),
|
|
1004
|
-
single.state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap:
|
|
1005
|
-
/* @__PURE__ */ jsx("
|
|
1064
|
+
single.state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 10, background: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)" }, children: [
|
|
1065
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
|
|
1006
1066
|
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
1007
|
-
/* @__PURE__ */ jsx("div", { style: { fontWeight:
|
|
1008
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize:
|
|
1067
|
+
/* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "Arquivo enviado com sucesso!" }),
|
|
1068
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(single.state.result.size) })
|
|
1009
1069
|
] }),
|
|
1010
|
-
/* @__PURE__ */ jsx("button", { onClick: single.reset, style: { background: "none", border: "
|
|
1070
|
+
/* @__PURE__ */ jsx("button", { onClick: single.reset, style: { background: "none", border: "1px solid rgba(34,197,94,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#16a34a", padding: "4px 10px", flexShrink: 0 }, children: "Enviar outro" })
|
|
1011
1071
|
] }),
|
|
1012
|
-
single.state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap:
|
|
1013
|
-
/* @__PURE__ */ jsx("span", { children:
|
|
1014
|
-
/* @__PURE__ */
|
|
1072
|
+
single.state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 10, background: "rgba(239,68,68,0.07)", border: "1px solid rgba(239,68,68,0.2)" }, children: [
|
|
1073
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
|
|
1074
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
1075
|
+
/* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13, color: "#ef4444" }, children: "N\xE3o foi poss\xEDvel enviar o arquivo" }),
|
|
1076
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: single.state.error.message })
|
|
1077
|
+
] }),
|
|
1078
|
+
/* @__PURE__ */ jsx("button", { onClick: single.reset, style: { background: "none", border: "1px solid rgba(239,68,68,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#ef4444", padding: "4px 10px", flexShrink: 0 }, children: "Tentar novamente" })
|
|
1015
1079
|
] })
|
|
1016
1080
|
] });
|
|
1017
1081
|
}
|