@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/index.js
CHANGED
|
@@ -254,6 +254,14 @@ function getFileIcon(mimeType) {
|
|
|
254
254
|
if (mimeType.includes("zip") || mimeType.includes("tar") || mimeType.includes("gzip")) return "\u{1F4E6}";
|
|
255
255
|
return "\u{1F4CE}";
|
|
256
256
|
}
|
|
257
|
+
function uploadLabel(status, progress) {
|
|
258
|
+
if (status === "preparing") return "Preparando\u2026";
|
|
259
|
+
if (status === "completing") return "Concluindo\u2026";
|
|
260
|
+
if (progress < 30) return "Iniciando envio\u2026";
|
|
261
|
+
if (progress < 70) return "Enviando imagem\u2026";
|
|
262
|
+
if (progress < 95) return "Quase l\xE1\u2026";
|
|
263
|
+
return "Finalizando\u2026";
|
|
264
|
+
}
|
|
257
265
|
function ImageUploader({
|
|
258
266
|
bucket,
|
|
259
267
|
expiresIn,
|
|
@@ -284,11 +292,7 @@ function ImageUploader({
|
|
|
284
292
|
const doUpload = useCallback(async (file, opts) => {
|
|
285
293
|
if (showPreview) setPreview(URL.createObjectURL(file));
|
|
286
294
|
try {
|
|
287
|
-
const result = await upload(file, {
|
|
288
|
-
...bucket !== void 0 && { bucket },
|
|
289
|
-
visibility,
|
|
290
|
-
image: opts
|
|
291
|
-
});
|
|
295
|
+
const result = await upload(file, { ...bucket !== void 0 && { bucket }, visibility, image: opts });
|
|
292
296
|
if (result) onUpload?.(result);
|
|
293
297
|
} catch (err) {
|
|
294
298
|
onError?.(err instanceof Error ? err : new Error(String(err)));
|
|
@@ -315,7 +319,7 @@ function ImageUploader({
|
|
|
315
319
|
};
|
|
316
320
|
const isUploading = state.status === "uploading" || state.status === "preparing" || state.status === "completing";
|
|
317
321
|
const progress = state.status === "uploading" ? state.progress : state.status === "completing" ? 99 : 0;
|
|
318
|
-
const isPaused = state.status === "idle" && preview !== null;
|
|
322
|
+
const isPaused = state.status === "idle" && preview !== null && !stagedFile;
|
|
319
323
|
if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
|
|
320
324
|
if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
|
|
321
325
|
return /* @__PURE__ */ jsxs("div", { className: `silo-image-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
|
|
@@ -329,16 +333,16 @@ function ImageUploader({
|
|
|
329
333
|
disabled: disabled || isUploading,
|
|
330
334
|
onFiles: handleFiles,
|
|
331
335
|
style: { padding: "32px 24px", textAlign: "center" },
|
|
332
|
-
children: preview && !isUploading ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap:
|
|
333
|
-
/* @__PURE__ */ jsx("img", { src: preview, alt: "
|
|
334
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
335
|
-
] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap:
|
|
336
|
-
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.
|
|
336
|
+
children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
|
|
337
|
+
/* @__PURE__ */ jsx("img", { src: preview, alt: "Pr\xE9-visualiza\xE7\xE3o", style: { maxWidth: "100%", maxHeight: 200, borderRadius: 8, objectFit: "contain" } }),
|
|
338
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: "Clique ou arraste para trocar a imagem" })
|
|
339
|
+
] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
|
|
340
|
+
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" }) }),
|
|
337
341
|
children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
338
|
-
/* @__PURE__ */ jsx("span", { style: { fontWeight:
|
|
339
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
340
|
-
maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize:
|
|
341
|
-
"
|
|
342
|
+
/* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 15, color: "var(--silo-text)" }, children: "Arraste sua imagem aqui" }),
|
|
343
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "var(--silo-text-muted)" }, children: "ou clique para escolher do seu dispositivo" }),
|
|
344
|
+
maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: [
|
|
345
|
+
"Tamanho m\xE1ximo: ",
|
|
342
346
|
formatBytes(maxSize)
|
|
343
347
|
] })
|
|
344
348
|
] })
|
|
@@ -346,14 +350,11 @@ function ImageUploader({
|
|
|
346
350
|
}
|
|
347
351
|
),
|
|
348
352
|
showImageOptions && stagedFile && !isUploading && state.status !== "done" && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
349
|
-
/* @__PURE__ */ jsx(
|
|
350
|
-
|
|
351
|
-
{
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
style: { padding: "12px 14px", borderRadius: 8, border: "1px solid var(--silo-border, #e2e8f0)", background: "var(--silo-bg-hover, #f8fafc)" }
|
|
355
|
-
}
|
|
356
|
-
),
|
|
353
|
+
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)" } }) }),
|
|
354
|
+
/* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
|
|
355
|
+
/* @__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" }),
|
|
356
|
+
/* @__PURE__ */ jsx(ImageOptions, { value: imageOpts, onChange: setImageOpts, style: { padding: "12px 14px" } })
|
|
357
|
+
] }),
|
|
357
358
|
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
|
|
358
359
|
/* @__PURE__ */ jsx(
|
|
359
360
|
"button",
|
|
@@ -362,7 +363,7 @@ function ImageUploader({
|
|
|
362
363
|
setStagedFile(null);
|
|
363
364
|
setPreview(null);
|
|
364
365
|
},
|
|
365
|
-
style: { padding: "
|
|
366
|
+
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" },
|
|
366
367
|
children: "Cancelar"
|
|
367
368
|
}
|
|
368
369
|
),
|
|
@@ -374,49 +375,78 @@ function ImageUploader({
|
|
|
374
375
|
setStagedFile(null);
|
|
375
376
|
void doUpload(f, imageOpts);
|
|
376
377
|
},
|
|
377
|
-
style: { flex: 1, padding: "
|
|
378
|
+
style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
|
|
378
379
|
children: "Enviar imagem"
|
|
379
380
|
}
|
|
380
381
|
)
|
|
381
382
|
] })
|
|
382
383
|
] }),
|
|
383
|
-
isUploading && /* @__PURE__ */
|
|
384
|
-
/* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center"
|
|
385
|
-
/* @__PURE__ */ jsx("span", {
|
|
386
|
-
/* @__PURE__ */ jsxs("
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
"%"
|
|
390
|
-
] }),
|
|
391
|
-
/* @__PURE__ */ jsx("button", { onClick: pause, style: { background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Pausar" })
|
|
384
|
+
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: [
|
|
385
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
|
|
386
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)" }, children: uploadLabel(state.status, progress) }),
|
|
387
|
+
/* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--silo-accent, #6366f1)" }, children: [
|
|
388
|
+
progress,
|
|
389
|
+
"%"
|
|
392
390
|
] })
|
|
393
391
|
] }),
|
|
394
392
|
/* @__PURE__ */ jsx(ProgressBar, { progress })
|
|
395
|
-
] })
|
|
396
|
-
isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap:
|
|
397
|
-
/* @__PURE__ */ jsx(
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
393
|
+
] })),
|
|
394
|
+
isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
|
|
395
|
+
/* @__PURE__ */ jsx(
|
|
396
|
+
"button",
|
|
397
|
+
{
|
|
398
|
+
onClick: () => resume({ ...bucket !== void 0 && { bucket }, visibility, image: imageOpts }),
|
|
399
|
+
style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "#10b981", color: "#fff", fontSize: 13, fontWeight: 700, cursor: "pointer" },
|
|
400
|
+
children: "\u25B6 Retomar envio"
|
|
401
|
+
}
|
|
402
|
+
),
|
|
403
|
+
/* @__PURE__ */ jsx(
|
|
404
|
+
"button",
|
|
405
|
+
{
|
|
406
|
+
onClick: () => {
|
|
407
|
+
abort();
|
|
408
|
+
setPreview(null);
|
|
409
|
+
},
|
|
410
|
+
style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", fontSize: 13, cursor: "pointer", color: "var(--silo-text-muted)" },
|
|
411
|
+
children: "Cancelar"
|
|
412
|
+
}
|
|
413
|
+
)
|
|
402
414
|
] }),
|
|
403
|
-
state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap:
|
|
404
|
-
/* @__PURE__ */ jsx("
|
|
405
|
-
/* @__PURE__ */ jsxs("div", { style: { flex: 1
|
|
406
|
-
/* @__PURE__ */ jsx("div", { style: { fontWeight:
|
|
407
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize:
|
|
415
|
+
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: [
|
|
416
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
|
|
417
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
|
|
418
|
+
/* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "Imagem enviada com sucesso!" }),
|
|
419
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(state.result.size) })
|
|
408
420
|
] }),
|
|
409
|
-
/* @__PURE__ */ jsx(
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
421
|
+
/* @__PURE__ */ jsx(
|
|
422
|
+
"button",
|
|
423
|
+
{
|
|
424
|
+
onClick: () => {
|
|
425
|
+
reset();
|
|
426
|
+
setPreview(null);
|
|
427
|
+
},
|
|
428
|
+
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 },
|
|
429
|
+
children: "Enviar outra"
|
|
430
|
+
}
|
|
431
|
+
)
|
|
413
432
|
] }),
|
|
414
|
-
state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap:
|
|
415
|
-
/* @__PURE__ */ jsx("span", { children:
|
|
416
|
-
/* @__PURE__ */
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
433
|
+
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: [
|
|
434
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
|
|
435
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
|
|
436
|
+
/* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13, color: "#ef4444" }, children: "N\xE3o foi poss\xEDvel enviar a imagem" }),
|
|
437
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: state.error.message })
|
|
438
|
+
] }),
|
|
439
|
+
/* @__PURE__ */ jsx(
|
|
440
|
+
"button",
|
|
441
|
+
{
|
|
442
|
+
onClick: () => {
|
|
443
|
+
reset();
|
|
444
|
+
setPreview(null);
|
|
445
|
+
},
|
|
446
|
+
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 },
|
|
447
|
+
children: "Tentar novamente"
|
|
448
|
+
}
|
|
449
|
+
)
|
|
420
450
|
] })
|
|
421
451
|
] });
|
|
422
452
|
}
|
|
@@ -546,6 +576,15 @@ var DEFAULT_VIDEO_OPTS = {
|
|
|
546
576
|
codec: "h264",
|
|
547
577
|
transcoding: "auto"
|
|
548
578
|
};
|
|
579
|
+
function uploadLabel2(status, progress) {
|
|
580
|
+
if (status === "preparing") return "Preparando\u2026";
|
|
581
|
+
if (status === "completing") return "Concluindo envio\u2026";
|
|
582
|
+
if (progress < 20) return "Iniciando envio\u2026";
|
|
583
|
+
if (progress < 50) return "Enviando v\xEDdeo\u2026";
|
|
584
|
+
if (progress < 80) return "Ainda enviando\u2026";
|
|
585
|
+
if (progress < 97) return "Quase terminando\u2026";
|
|
586
|
+
return "Finalizando\u2026";
|
|
587
|
+
}
|
|
549
588
|
function VideoUploader({
|
|
550
589
|
bucket,
|
|
551
590
|
expiresIn,
|
|
@@ -576,11 +615,7 @@ function VideoUploader({
|
|
|
576
615
|
const doUpload = useCallback(async (file, opts) => {
|
|
577
616
|
if (showPreview) setPreview(URL.createObjectURL(file));
|
|
578
617
|
try {
|
|
579
|
-
const result = await upload(file, {
|
|
580
|
-
...bucket !== void 0 && { bucket },
|
|
581
|
-
visibility,
|
|
582
|
-
video: opts
|
|
583
|
-
});
|
|
618
|
+
const result = await upload(file, { ...bucket !== void 0 && { bucket }, visibility, video: opts });
|
|
584
619
|
if (result) onUpload?.(result);
|
|
585
620
|
} catch (err) {
|
|
586
621
|
onError?.(err instanceof Error ? err : new Error(String(err)));
|
|
@@ -607,7 +642,7 @@ function VideoUploader({
|
|
|
607
642
|
};
|
|
608
643
|
const isUploading = state.status === "uploading" || state.status === "preparing" || state.status === "completing";
|
|
609
644
|
const progress = state.status === "uploading" ? state.progress : state.status === "completing" ? 99 : 0;
|
|
610
|
-
const isPaused = state.status === "idle" && preview !== null;
|
|
645
|
+
const isPaused = state.status === "idle" && preview !== null && !stagedFile;
|
|
611
646
|
if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
|
|
612
647
|
if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
|
|
613
648
|
return /* @__PURE__ */ jsxs("div", { className: `silo-video-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
|
|
@@ -621,15 +656,15 @@ function VideoUploader({
|
|
|
621
656
|
disabled: disabled || isUploading,
|
|
622
657
|
onFiles: handleFiles,
|
|
623
658
|
style: { padding: "32px 24px", textAlign: "center" },
|
|
624
|
-
children: preview && !isUploading ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap:
|
|
625
|
-
/* @__PURE__ */ jsx("video", { src: preview, style: { maxWidth: "100%", maxHeight:
|
|
626
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
627
|
-
] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap:
|
|
628
|
-
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.
|
|
659
|
+
children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
|
|
660
|
+
/* @__PURE__ */ jsx("video", { src: preview, style: { maxWidth: "100%", maxHeight: 180, borderRadius: 8 }, muted: true, playsInline: true }),
|
|
661
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: "Clique ou arraste para trocar o v\xEDdeo" })
|
|
662
|
+
] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
|
|
663
|
+
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" }) }),
|
|
629
664
|
children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
630
|
-
/* @__PURE__ */ jsx("span", { style: { fontWeight:
|
|
631
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
632
|
-
/* @__PURE__ */ jsxs("span", { style: { fontSize:
|
|
665
|
+
/* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 15, color: "var(--silo-text)" }, children: "Arraste seu v\xEDdeo aqui" }),
|
|
666
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "var(--silo-text-muted)" }, children: "ou clique para escolher do seu dispositivo" }),
|
|
667
|
+
/* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: [
|
|
633
668
|
"MP4, MOV, MKV, WebM",
|
|
634
669
|
maxSize ? ` \xB7 M\xE1x ${formatBytes(maxSize)}` : ""
|
|
635
670
|
] })
|
|
@@ -638,14 +673,11 @@ function VideoUploader({
|
|
|
638
673
|
}
|
|
639
674
|
),
|
|
640
675
|
showVideoOptions && stagedFile && !isUploading && state.status !== "done" && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
641
|
-
/* @__PURE__ */ jsx(
|
|
642
|
-
|
|
643
|
-
{
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
style: { padding: "12px 14px", borderRadius: 8, border: "1px solid var(--silo-border, #e2e8f0)", background: "var(--silo-bg-hover, #f8fafc)" }
|
|
647
|
-
}
|
|
648
|
-
),
|
|
676
|
+
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 }) }),
|
|
677
|
+
/* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
|
|
678
|
+
/* @__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" }),
|
|
679
|
+
/* @__PURE__ */ jsx(VideoOptions, { value: videoOpts, onChange: setVideoOpts, style: { padding: "12px 14px" } })
|
|
680
|
+
] }),
|
|
649
681
|
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
|
|
650
682
|
/* @__PURE__ */ jsx(
|
|
651
683
|
"button",
|
|
@@ -654,7 +686,7 @@ function VideoUploader({
|
|
|
654
686
|
setStagedFile(null);
|
|
655
687
|
setPreview(null);
|
|
656
688
|
},
|
|
657
|
-
style: { padding: "
|
|
689
|
+
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" },
|
|
658
690
|
children: "Cancelar"
|
|
659
691
|
}
|
|
660
692
|
),
|
|
@@ -666,54 +698,85 @@ function VideoUploader({
|
|
|
666
698
|
setStagedFile(null);
|
|
667
699
|
void doUpload(f, videoOpts);
|
|
668
700
|
},
|
|
669
|
-
style: { flex: 1, padding: "
|
|
701
|
+
style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
|
|
670
702
|
children: "Enviar v\xEDdeo"
|
|
671
703
|
}
|
|
672
704
|
)
|
|
673
705
|
] })
|
|
674
706
|
] }),
|
|
675
|
-
isUploading && /* @__PURE__ */
|
|
676
|
-
/* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center"
|
|
677
|
-
/* @__PURE__ */ jsx("span", {
|
|
678
|
-
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap:
|
|
679
|
-
/* @__PURE__ */ jsxs("span", { children: [
|
|
707
|
+
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: [
|
|
708
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
|
|
709
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)" }, children: uploadLabel2(state.status, progress) }),
|
|
710
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
|
|
711
|
+
/* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--silo-accent, #6366f1)" }, children: [
|
|
680
712
|
progress,
|
|
681
713
|
"%"
|
|
682
714
|
] }),
|
|
683
|
-
/* @__PURE__ */ jsx("button", { onClick: pause, style: { background: "none", border: "
|
|
715
|
+
/* @__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" })
|
|
684
716
|
] })
|
|
685
717
|
] }),
|
|
686
718
|
/* @__PURE__ */ jsx(ProgressBar, { progress }),
|
|
687
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
688
|
-
] })
|
|
689
|
-
isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap:
|
|
719
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--silo-text-muted)" }, children: "O processamento do v\xEDdeo come\xE7a automaticamente ap\xF3s o envio" })
|
|
720
|
+
] })),
|
|
721
|
+
isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
|
|
690
722
|
/* @__PURE__ */ jsx(
|
|
691
723
|
"button",
|
|
692
724
|
{
|
|
693
|
-
onClick: () => resume({ ...bucket !== void 0 && { bucket }, visibility, video:
|
|
694
|
-
style: { flex: 1, padding: "
|
|
695
|
-
children: "Retomar
|
|
725
|
+
onClick: () => resume({ ...bucket !== void 0 && { bucket }, visibility, video: videoOpts }),
|
|
726
|
+
style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "#10b981", color: "#fff", fontSize: 13, fontWeight: 700, cursor: "pointer" },
|
|
727
|
+
children: "\u25B6 Retomar envio"
|
|
696
728
|
}
|
|
697
729
|
),
|
|
698
|
-
/* @__PURE__ */ jsx(
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
730
|
+
/* @__PURE__ */ jsx(
|
|
731
|
+
"button",
|
|
732
|
+
{
|
|
733
|
+
onClick: () => {
|
|
734
|
+
abort();
|
|
735
|
+
setPreview(null);
|
|
736
|
+
},
|
|
737
|
+
style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", fontSize: 13, cursor: "pointer", color: "var(--silo-text-muted)" },
|
|
738
|
+
children: "Cancelar"
|
|
739
|
+
}
|
|
740
|
+
)
|
|
702
741
|
] }),
|
|
703
|
-
state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex",
|
|
704
|
-
/* @__PURE__ */
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
742
|
+
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: [
|
|
743
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
|
|
744
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
|
|
745
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
|
|
746
|
+
/* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "V\xEDdeo enviado com sucesso!" }),
|
|
747
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(state.result.size) })
|
|
748
|
+
] }),
|
|
749
|
+
/* @__PURE__ */ jsx(
|
|
750
|
+
"button",
|
|
751
|
+
{
|
|
752
|
+
onClick: () => {
|
|
753
|
+
reset();
|
|
754
|
+
setPreview(null);
|
|
755
|
+
},
|
|
756
|
+
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 },
|
|
757
|
+
children: "Enviar outro"
|
|
758
|
+
}
|
|
759
|
+
)
|
|
760
|
+
] }),
|
|
761
|
+
/* @__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." })
|
|
710
762
|
] }),
|
|
711
|
-
state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap:
|
|
712
|
-
/* @__PURE__ */ jsx("span", { children:
|
|
713
|
-
/* @__PURE__ */
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
763
|
+
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: [
|
|
764
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
|
|
765
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
|
|
766
|
+
/* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13, color: "#ef4444" }, children: "N\xE3o foi poss\xEDvel enviar o v\xEDdeo" }),
|
|
767
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: state.error.message })
|
|
768
|
+
] }),
|
|
769
|
+
/* @__PURE__ */ jsx(
|
|
770
|
+
"button",
|
|
771
|
+
{
|
|
772
|
+
onClick: () => {
|
|
773
|
+
reset();
|
|
774
|
+
setPreview(null);
|
|
775
|
+
},
|
|
776
|
+
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 },
|
|
777
|
+
children: "Tentar novamente"
|
|
778
|
+
}
|
|
779
|
+
)
|
|
717
780
|
] })
|
|
718
781
|
] });
|
|
719
782
|
}
|
|
@@ -725,6 +788,14 @@ var DEFAULT_VIDEO_OPTS2 = {
|
|
|
725
788
|
codec: "h264",
|
|
726
789
|
transcoding: "auto"
|
|
727
790
|
};
|
|
791
|
+
function uploadLabel3(status, progress) {
|
|
792
|
+
if (status === "preparing") return "Preparando\u2026";
|
|
793
|
+
if (status === "completing") return "Concluindo\u2026";
|
|
794
|
+
if (progress < 30) return "Iniciando envio\u2026";
|
|
795
|
+
if (progress < 70) return "Enviando\u2026";
|
|
796
|
+
if (progress < 95) return "Quase l\xE1\u2026";
|
|
797
|
+
return "Finalizando\u2026";
|
|
798
|
+
}
|
|
728
799
|
function FileUploader({
|
|
729
800
|
bucket,
|
|
730
801
|
visibility = "private",
|
|
@@ -773,11 +844,8 @@ function FileUploader({
|
|
|
773
844
|
function setRename(index, name, files) {
|
|
774
845
|
setRenames((prev) => {
|
|
775
846
|
const next = new Map(prev);
|
|
776
|
-
if (name.trim() && name.trim() !== files[index]?.name)
|
|
777
|
-
|
|
778
|
-
} else {
|
|
779
|
-
next.delete(index);
|
|
780
|
-
}
|
|
847
|
+
if (name.trim() && name.trim() !== files[index]?.name) next.set(index, name.trim());
|
|
848
|
+
else next.delete(index);
|
|
781
849
|
return next;
|
|
782
850
|
});
|
|
783
851
|
}
|
|
@@ -791,8 +859,7 @@ function FileUploader({
|
|
|
791
859
|
const effectiveVideo = showVideoOptions ? videoOpts : video ?? videoOpts;
|
|
792
860
|
if (multiple && files.length > 1) {
|
|
793
861
|
try {
|
|
794
|
-
const
|
|
795
|
-
const results = await batch.upload(files, opts);
|
|
862
|
+
const results = await batch.upload(files, { ...bucket !== void 0 && { bucket }, visibility, image: effectiveImage, video: effectiveVideo });
|
|
796
863
|
onBatchUpload?.(results);
|
|
797
864
|
results.forEach((r) => onUpload?.(r));
|
|
798
865
|
} catch (err) {
|
|
@@ -802,23 +869,20 @@ function FileUploader({
|
|
|
802
869
|
const file = files[0];
|
|
803
870
|
if (!file) return;
|
|
804
871
|
try {
|
|
805
|
-
const
|
|
806
|
-
const result = await single.upload(file, opts);
|
|
872
|
+
const result = await single.upload(file, { ...bucket !== void 0 && { bucket }, visibility, image: effectiveImage, video: effectiveVideo });
|
|
807
873
|
if (result) onUpload?.(result);
|
|
808
874
|
} catch (err) {
|
|
809
875
|
onError?.(err instanceof Error ? err : new Error(String(err)));
|
|
810
876
|
}
|
|
811
877
|
}
|
|
812
|
-
}, [single, batch, multiple, bucket, visibility, image, video, onUpload, onBatchUpload, onError]);
|
|
878
|
+
}, [single, batch, multiple, bucket, visibility, image, video, imageOpts, videoOpts, showImageOptions, showVideoOptions, onUpload, onBatchUpload, onError]);
|
|
813
879
|
const handleFiles = useCallback(async (files) => {
|
|
814
880
|
const needsStaging = allowRename || showImageOptions && files.some((f) => f.type.startsWith("image/")) || showVideoOptions && files.some((f) => f.type.startsWith("video/"));
|
|
815
881
|
if (needsStaging) {
|
|
816
882
|
setStaged(files);
|
|
817
883
|
setRenames(/* @__PURE__ */ new Map());
|
|
818
|
-
} else
|
|
819
|
-
|
|
820
|
-
}
|
|
821
|
-
}, [allowRename, doUpload]);
|
|
884
|
+
} else await doUpload(files);
|
|
885
|
+
}, [allowRename, showImageOptions, showVideoOptions, doUpload]);
|
|
822
886
|
async function handleConfirmUpload() {
|
|
823
887
|
if (!staged) return;
|
|
824
888
|
const filesToUpload = staged.map((f, i) => {
|
|
@@ -848,21 +912,22 @@ function FileUploader({
|
|
|
848
912
|
onFiles: handleFiles,
|
|
849
913
|
style: { padding: "28px 24px", textAlign: "center" },
|
|
850
914
|
children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
|
|
851
|
-
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.
|
|
915
|
+
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" }) }),
|
|
852
916
|
children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
853
|
-
/* @__PURE__ */ jsx("span", { style: { fontWeight:
|
|
854
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
855
|
-
maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize:
|
|
856
|
-
"
|
|
917
|
+
/* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 15, color: "var(--silo-text)" }, children: multiple ? "Arraste seus arquivos aqui" : "Arraste seu arquivo aqui" }),
|
|
918
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "var(--silo-text-muted)" }, children: "ou clique para escolher do seu dispositivo" }),
|
|
919
|
+
maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: [
|
|
920
|
+
"Tamanho m\xE1ximo: ",
|
|
857
921
|
formatBytes(maxSize)
|
|
858
922
|
] })
|
|
859
923
|
] })
|
|
860
924
|
] })
|
|
861
925
|
}
|
|
862
926
|
),
|
|
863
|
-
staged && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap:
|
|
864
|
-
|
|
865
|
-
|
|
927
|
+
staged && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
|
|
928
|
+
/* @__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` }),
|
|
929
|
+
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: [
|
|
930
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 20, flexShrink: 0 }, children: getFileIcon(f.type) }),
|
|
866
931
|
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
867
932
|
editingIndex === i ? /* @__PURE__ */ jsx(
|
|
868
933
|
"input",
|
|
@@ -881,28 +946,28 @@ function FileUploader({
|
|
|
881
946
|
}
|
|
882
947
|
if (e.key === "Escape") setEditingIndex(null);
|
|
883
948
|
},
|
|
884
|
-
style: { width: "100%", fontSize:
|
|
949
|
+
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)" }
|
|
885
950
|
}
|
|
886
951
|
) : /* @__PURE__ */ jsxs(
|
|
887
952
|
"div",
|
|
888
953
|
{
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
954
|
+
style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--silo-text)", cursor: allowRename ? "text" : "default" },
|
|
955
|
+
onClick: () => allowRename && setEditingIndex(i),
|
|
956
|
+
title: allowRename ? "Clique para renomear" : void 0,
|
|
892
957
|
children: [
|
|
893
958
|
effectiveName(i, staged),
|
|
894
959
|
renames.has(i) && /* @__PURE__ */ jsx("span", { style: { marginLeft: 6, fontSize: 10, color: "var(--silo-accent)", fontWeight: 700 }, children: "renomeado" })
|
|
895
960
|
]
|
|
896
961
|
}
|
|
897
962
|
),
|
|
898
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize:
|
|
963
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--silo-text-muted)", marginTop: 1 }, children: formatBytes(f.size) })
|
|
899
964
|
] }),
|
|
900
|
-
/* @__PURE__ */ jsx(
|
|
965
|
+
allowRename && /* @__PURE__ */ jsx(
|
|
901
966
|
"button",
|
|
902
967
|
{
|
|
903
968
|
onClick: () => setEditingIndex(i),
|
|
904
969
|
title: "Renomear",
|
|
905
|
-
style: { background: "none", border: "none", cursor: "pointer", fontSize:
|
|
970
|
+
style: { background: "none", border: "none", cursor: "pointer", fontSize: 14, color: "var(--silo-text-muted)", padding: "0 4px", flexShrink: 0 },
|
|
906
971
|
children: "\u270F\uFE0F"
|
|
907
972
|
}
|
|
908
973
|
),
|
|
@@ -911,39 +976,28 @@ function FileUploader({
|
|
|
911
976
|
{
|
|
912
977
|
onClick: () => {
|
|
913
978
|
const next = staged.filter((_, j) => j !== i);
|
|
914
|
-
if (next.length === 0)
|
|
915
|
-
|
|
916
|
-
} else {
|
|
917
|
-
setStaged(next);
|
|
918
|
-
}
|
|
979
|
+
if (next.length === 0) clearStaging();
|
|
980
|
+
else setStaged(next);
|
|
919
981
|
},
|
|
920
|
-
style: { background: "none", border: "none", cursor: "pointer", fontSize:
|
|
982
|
+
style: { background: "none", border: "none", cursor: "pointer", fontSize: 18, color: "var(--silo-text-muted)", padding: "0 4px", lineHeight: 1, flexShrink: 0 },
|
|
921
983
|
children: "\xD7"
|
|
922
984
|
}
|
|
923
985
|
)
|
|
924
986
|
] }, i)),
|
|
925
|
-
showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */
|
|
926
|
-
|
|
927
|
-
{
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
}
|
|
932
|
-
),
|
|
933
|
-
|
|
934
|
-
VideoOptions,
|
|
935
|
-
{
|
|
936
|
-
value: videoOpts,
|
|
937
|
-
onChange: setVideoOpts,
|
|
938
|
-
style: { padding: "12px 14px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "var(--silo-bg-hover, #f8fafc)", marginTop: 4 }
|
|
939
|
-
}
|
|
940
|
-
),
|
|
941
|
-
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", marginTop: "4px" }, children: [
|
|
987
|
+
showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
|
|
988
|
+
/* @__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" }),
|
|
989
|
+
/* @__PURE__ */ jsx(ImageOptions, { value: imageOpts, onChange: setImageOpts, style: { padding: "12px 14px" } })
|
|
990
|
+
] }),
|
|
991
|
+
showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
|
|
992
|
+
/* @__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" }),
|
|
993
|
+
/* @__PURE__ */ jsx(VideoOptions, { value: videoOpts, onChange: setVideoOpts, style: { padding: "12px 14px" } })
|
|
994
|
+
] }),
|
|
995
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, marginTop: 4 }, children: [
|
|
942
996
|
/* @__PURE__ */ jsx(
|
|
943
997
|
"button",
|
|
944
998
|
{
|
|
945
999
|
onClick: clearStaging,
|
|
946
|
-
style: { padding: "
|
|
1000
|
+
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" },
|
|
947
1001
|
children: "Cancelar"
|
|
948
1002
|
}
|
|
949
1003
|
),
|
|
@@ -951,72 +1005,82 @@ function FileUploader({
|
|
|
951
1005
|
"button",
|
|
952
1006
|
{
|
|
953
1007
|
onClick: handleConfirmUpload,
|
|
954
|
-
style: { flex: 1, padding: "
|
|
1008
|
+
style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
|
|
955
1009
|
children: staged.length > 1 ? `Enviar ${staged.length} arquivos` : "Enviar arquivo"
|
|
956
1010
|
}
|
|
957
1011
|
)
|
|
958
1012
|
] })
|
|
959
1013
|
] }),
|
|
960
|
-
isSingleUploading && !isBatch && /* @__PURE__ */
|
|
961
|
-
/* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between",
|
|
962
|
-
/* @__PURE__ */ jsx("span", {
|
|
963
|
-
/* @__PURE__ */ jsxs("span", { children: [
|
|
1014
|
+
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: [
|
|
1015
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
|
|
1016
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)" }, children: uploadLabel3(single.state.status, singleProgress) }),
|
|
1017
|
+
/* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--silo-accent, #6366f1)" }, children: [
|
|
964
1018
|
singleProgress,
|
|
965
1019
|
"%"
|
|
966
1020
|
] })
|
|
967
1021
|
] }),
|
|
968
1022
|
/* @__PURE__ */ jsx(ProgressBar, { progress: singleProgress })
|
|
969
|
-
] })
|
|
970
|
-
isBatch && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap:
|
|
1023
|
+
] })),
|
|
1024
|
+
isBatch && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
|
|
971
1025
|
batch.state.files.map((f, i) => {
|
|
972
1026
|
const st = f.status;
|
|
973
1027
|
const p = st.status === "uploading" ? st.progress : st.status === "paused" ? st.progress : st.status === "done" ? 100 : st.status === "completing" ? 99 : 0;
|
|
974
1028
|
const isPaused = st.status === "paused";
|
|
975
1029
|
const isDone = st.status === "done";
|
|
976
1030
|
const isErr = st.status === "error";
|
|
977
|
-
return /* @__PURE__ */ jsxs("div", { style: { padding: "
|
|
978
|
-
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap:
|
|
979
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
1031
|
+
return /* @__PURE__ */ jsxs("div", { style: { padding: "12px 14px", backgroundColor: "var(--silo-bg)", borderRadius: 10, border: "1px solid var(--silo-border)" }, children: [
|
|
1032
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, marginBottom: isDone || isErr ? 0 : 8 }, children: [
|
|
1033
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: getFileIcon(f.file.type) }),
|
|
980
1034
|
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
981
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize:
|
|
982
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize:
|
|
1035
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--silo-text)" }, children: f.file.name }),
|
|
1036
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--silo-text-muted)" }, children: formatBytes(f.file.size) })
|
|
983
1037
|
] }),
|
|
984
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
985
|
-
|
|
1038
|
+
isDone && /* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: "\u2705" }),
|
|
1039
|
+
isErr && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#ef4444", fontWeight: 600, flexShrink: 0 }, children: "Erro no envio" }),
|
|
1040
|
+
!isDone && !isErr && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 700, color: isPaused ? "#f59e0b" : "var(--silo-accent, #6366f1)", flexShrink: 0 }, children: isPaused ? "Pausado" : `${p}%` }),
|
|
1041
|
+
!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)
|
|
986
1042
|
] }),
|
|
987
1043
|
!isDone && !isErr && /* @__PURE__ */ jsx(ProgressBar, { progress: p })
|
|
988
1044
|
] }, i);
|
|
989
1045
|
}),
|
|
990
|
-
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap:
|
|
1046
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
|
|
991
1047
|
batch.state.status !== "done" && /* @__PURE__ */ jsx(
|
|
992
1048
|
"button",
|
|
993
1049
|
{
|
|
994
1050
|
onClick: isBatchUploading ? batch.pauseAll : batch.resumeAll,
|
|
995
|
-
style: { flex: 1, padding: "
|
|
996
|
-
children: isBatchUploading ? "Pausar tudo" : "Retomar tudo"
|
|
1051
|
+
style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: isBatchUploading ? "#f59e0b" : "#10b981", color: "#fff", fontSize: 13, fontWeight: 700, cursor: "pointer" },
|
|
1052
|
+
children: isBatchUploading ? "\u23F8 Pausar tudo" : "\u25B6 Retomar tudo"
|
|
997
1053
|
}
|
|
998
1054
|
),
|
|
999
1055
|
/* @__PURE__ */ jsx(
|
|
1000
1056
|
"button",
|
|
1001
1057
|
{
|
|
1002
1058
|
onClick: batch.state.status === "done" ? batch.reset : batch.abortAll,
|
|
1003
|
-
style: { padding: "
|
|
1004
|
-
children: batch.state.status === "done" ? "
|
|
1059
|
+
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" },
|
|
1060
|
+
children: batch.state.status === "done" ? "Enviar mais arquivos" : "Cancelar"
|
|
1005
1061
|
}
|
|
1006
1062
|
)
|
|
1063
|
+
] }),
|
|
1064
|
+
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: [
|
|
1065
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 20 }, children: "\u{1F389}" }),
|
|
1066
|
+
/* @__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!` })
|
|
1007
1067
|
] })
|
|
1008
1068
|
] }),
|
|
1009
|
-
single.state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap:
|
|
1010
|
-
/* @__PURE__ */ jsx("
|
|
1069
|
+
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: [
|
|
1070
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
|
|
1011
1071
|
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
1012
|
-
/* @__PURE__ */ jsx("div", { style: { fontWeight:
|
|
1013
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize:
|
|
1072
|
+
/* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "Arquivo enviado com sucesso!" }),
|
|
1073
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(single.state.result.size) })
|
|
1014
1074
|
] }),
|
|
1015
|
-
/* @__PURE__ */ jsx("button", { onClick: single.reset, style: { background: "none", border: "
|
|
1075
|
+
/* @__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" })
|
|
1016
1076
|
] }),
|
|
1017
|
-
single.state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap:
|
|
1018
|
-
/* @__PURE__ */ jsx("span", { children:
|
|
1019
|
-
/* @__PURE__ */
|
|
1077
|
+
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: [
|
|
1078
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
|
|
1079
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
1080
|
+
/* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13, color: "#ef4444" }, children: "N\xE3o foi poss\xEDvel enviar o arquivo" }),
|
|
1081
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: single.state.error.message })
|
|
1082
|
+
] }),
|
|
1083
|
+
/* @__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" })
|
|
1020
1084
|
] })
|
|
1021
1085
|
] });
|
|
1022
1086
|
}
|