@geekapps/silo-elements-nextjs 0.1.4 → 0.1.6
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 +83 -81
- package/dist/FileUploader.js.map +1 -1
- package/dist/ImageUploader.js +124 -59
- package/dist/ImageUploader.js.map +1 -1
- package/dist/MediaUploader.js +331 -196
- package/dist/MediaUploader.js.map +1 -1
- package/dist/VideoUploader.js +124 -56
- package/dist/VideoUploader.js.map +1 -1
- package/dist/index.js +331 -196
- 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,
|
|
@@ -278,24 +286,28 @@ function ImageUploader({
|
|
|
278
286
|
const { state, upload, pause, resume, abort, reset } = useMultipartUpload(bucket);
|
|
279
287
|
const [preview, setPreview] = useState(null);
|
|
280
288
|
const [imageOpts, setImageOpts] = useState(image ?? { format: "webp", optimize: true });
|
|
289
|
+
const [stagedFile, setStagedFile] = useState(null);
|
|
281
290
|
const t = resolveTheme(theme);
|
|
282
291
|
const vars = themeToVars(t);
|
|
283
|
-
const
|
|
284
|
-
const file = files[0];
|
|
285
|
-
if (!file) return;
|
|
292
|
+
const doUpload = useCallback(async (file, opts) => {
|
|
286
293
|
if (showPreview) setPreview(URL.createObjectURL(file));
|
|
287
294
|
try {
|
|
288
|
-
const
|
|
289
|
-
const result = await upload(file, {
|
|
290
|
-
...bucket !== void 0 && { bucket },
|
|
291
|
-
visibility,
|
|
292
|
-
image: opts
|
|
293
|
-
});
|
|
295
|
+
const result = await upload(file, { ...bucket !== void 0 && { bucket }, visibility, image: opts });
|
|
294
296
|
if (result) onUpload?.(result);
|
|
295
297
|
} catch (err) {
|
|
296
298
|
onError?.(err instanceof Error ? err : new Error(String(err)));
|
|
297
299
|
}
|
|
298
|
-
}, [upload, bucket, visibility,
|
|
300
|
+
}, [upload, bucket, visibility, onUpload, onError, showPreview]);
|
|
301
|
+
const handleFiles = useCallback(async (files) => {
|
|
302
|
+
const file = files[0];
|
|
303
|
+
if (!file) return;
|
|
304
|
+
if (showImageOptions) {
|
|
305
|
+
setStagedFile(file);
|
|
306
|
+
if (showPreview) setPreview(URL.createObjectURL(file));
|
|
307
|
+
} else {
|
|
308
|
+
await doUpload(file, image ?? imageOpts);
|
|
309
|
+
}
|
|
310
|
+
}, [showImageOptions, image, imageOpts, doUpload, showPreview]);
|
|
299
311
|
const containerStyle = {
|
|
300
312
|
...vars,
|
|
301
313
|
display: "flex",
|
|
@@ -307,18 +319,10 @@ function ImageUploader({
|
|
|
307
319
|
};
|
|
308
320
|
const isUploading = state.status === "uploading" || state.status === "preparing" || state.status === "completing";
|
|
309
321
|
const progress = state.status === "uploading" ? state.progress : state.status === "completing" ? 99 : 0;
|
|
310
|
-
const isPaused = state.status === "idle" && preview !== null;
|
|
322
|
+
const isPaused = state.status === "idle" && preview !== null && !stagedFile;
|
|
311
323
|
if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
|
|
312
324
|
if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
|
|
313
325
|
return /* @__PURE__ */ jsxs("div", { className: `silo-image-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
|
|
314
|
-
showImageOptions && !isUploading && state.status !== "done" && /* @__PURE__ */ jsx(
|
|
315
|
-
ImageOptions,
|
|
316
|
-
{
|
|
317
|
-
value: imageOpts,
|
|
318
|
-
onChange: setImageOpts,
|
|
319
|
-
style: { padding: "12px 14px", borderRadius: 8, border: "1px solid var(--silo-border, #e2e8f0)", background: "var(--silo-bg-hover, #f8fafc)" }
|
|
320
|
-
}
|
|
321
|
-
),
|
|
322
326
|
/* @__PURE__ */ jsx(
|
|
323
327
|
DropZone,
|
|
324
328
|
{
|
|
@@ -329,59 +333,120 @@ 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
|
] })
|
|
345
349
|
] })
|
|
346
350
|
}
|
|
347
351
|
),
|
|
348
|
-
|
|
349
|
-
/* @__PURE__ */
|
|
350
|
-
|
|
351
|
-
/* @__PURE__ */
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
352
|
+
showImageOptions && stagedFile && !isUploading && state.status !== "done" && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
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
|
+
] }),
|
|
358
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
|
|
359
|
+
/* @__PURE__ */ jsx(
|
|
360
|
+
"button",
|
|
361
|
+
{
|
|
362
|
+
onClick: () => {
|
|
363
|
+
setStagedFile(null);
|
|
364
|
+
setPreview(null);
|
|
365
|
+
},
|
|
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" },
|
|
367
|
+
children: "Cancelar"
|
|
368
|
+
}
|
|
369
|
+
),
|
|
370
|
+
/* @__PURE__ */ jsx(
|
|
371
|
+
"button",
|
|
372
|
+
{
|
|
373
|
+
onClick: () => {
|
|
374
|
+
const f = stagedFile;
|
|
375
|
+
setStagedFile(null);
|
|
376
|
+
void doUpload(f, imageOpts);
|
|
377
|
+
},
|
|
378
|
+
style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
|
|
379
|
+
children: "Enviar imagem"
|
|
380
|
+
}
|
|
381
|
+
)
|
|
382
|
+
] })
|
|
383
|
+
] }),
|
|
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
|
+
"%"
|
|
357
390
|
] })
|
|
358
391
|
] }),
|
|
359
392
|
/* @__PURE__ */ jsx(ProgressBar, { progress })
|
|
360
|
-
] })
|
|
361
|
-
isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap:
|
|
362
|
-
/* @__PURE__ */ jsx(
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
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
|
+
)
|
|
367
414
|
] }),
|
|
368
|
-
state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap:
|
|
369
|
-
/* @__PURE__ */ jsx("
|
|
370
|
-
/* @__PURE__ */ jsxs("div", { style: { flex: 1
|
|
371
|
-
/* @__PURE__ */ jsx("div", { style: { fontWeight:
|
|
372
|
-
/* @__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) })
|
|
373
420
|
] }),
|
|
374
|
-
/* @__PURE__ */ jsx(
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
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
|
+
)
|
|
378
432
|
] }),
|
|
379
|
-
state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap:
|
|
380
|
-
/* @__PURE__ */ jsx("span", { children:
|
|
381
|
-
/* @__PURE__ */
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
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
|
+
)
|
|
385
450
|
] })
|
|
386
451
|
] });
|
|
387
452
|
}
|
|
@@ -511,6 +576,15 @@ var DEFAULT_VIDEO_OPTS = {
|
|
|
511
576
|
codec: "h264",
|
|
512
577
|
transcoding: "auto"
|
|
513
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
|
+
}
|
|
514
588
|
function VideoUploader({
|
|
515
589
|
bucket,
|
|
516
590
|
expiresIn,
|
|
@@ -535,24 +609,28 @@ function VideoUploader({
|
|
|
535
609
|
const { state, upload, pause, resume, abort, reset } = useMultipartUpload(bucket);
|
|
536
610
|
const [preview, setPreview] = useState(null);
|
|
537
611
|
const [videoOpts, setVideoOpts] = useState(video ?? DEFAULT_VIDEO_OPTS);
|
|
612
|
+
const [stagedFile, setStagedFile] = useState(null);
|
|
538
613
|
const t = resolveTheme(theme);
|
|
539
614
|
const vars = themeToVars(t);
|
|
540
|
-
const
|
|
541
|
-
const file = files[0];
|
|
542
|
-
if (!file) return;
|
|
615
|
+
const doUpload = useCallback(async (file, opts) => {
|
|
543
616
|
if (showPreview) setPreview(URL.createObjectURL(file));
|
|
544
617
|
try {
|
|
545
|
-
const
|
|
546
|
-
const result = await upload(file, {
|
|
547
|
-
...bucket !== void 0 && { bucket },
|
|
548
|
-
visibility,
|
|
549
|
-
video: opts
|
|
550
|
-
});
|
|
618
|
+
const result = await upload(file, { ...bucket !== void 0 && { bucket }, visibility, video: opts });
|
|
551
619
|
if (result) onUpload?.(result);
|
|
552
620
|
} catch (err) {
|
|
553
621
|
onError?.(err instanceof Error ? err : new Error(String(err)));
|
|
554
622
|
}
|
|
555
|
-
}, [upload, bucket, visibility,
|
|
623
|
+
}, [upload, bucket, visibility, onUpload, onError, showPreview]);
|
|
624
|
+
const handleFiles = useCallback(async (files) => {
|
|
625
|
+
const file = files[0];
|
|
626
|
+
if (!file) return;
|
|
627
|
+
if (showVideoOptions) {
|
|
628
|
+
setStagedFile(file);
|
|
629
|
+
if (showPreview) setPreview(URL.createObjectURL(file));
|
|
630
|
+
} else {
|
|
631
|
+
await doUpload(file, video ?? videoOpts);
|
|
632
|
+
}
|
|
633
|
+
}, [showVideoOptions, video, videoOpts, doUpload, showPreview]);
|
|
556
634
|
const containerStyle = {
|
|
557
635
|
...vars,
|
|
558
636
|
display: "flex",
|
|
@@ -564,18 +642,10 @@ function VideoUploader({
|
|
|
564
642
|
};
|
|
565
643
|
const isUploading = state.status === "uploading" || state.status === "preparing" || state.status === "completing";
|
|
566
644
|
const progress = state.status === "uploading" ? state.progress : state.status === "completing" ? 99 : 0;
|
|
567
|
-
const isPaused = state.status === "idle" && preview !== null;
|
|
645
|
+
const isPaused = state.status === "idle" && preview !== null && !stagedFile;
|
|
568
646
|
if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
|
|
569
647
|
if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
|
|
570
648
|
return /* @__PURE__ */ jsxs("div", { className: `silo-video-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
|
|
571
|
-
showVideoOptions && !isUploading && state.status !== "done" && /* @__PURE__ */ jsx(
|
|
572
|
-
VideoOptions,
|
|
573
|
-
{
|
|
574
|
-
value: videoOpts,
|
|
575
|
-
onChange: setVideoOpts,
|
|
576
|
-
style: { padding: "12px 14px", borderRadius: 8, border: "1px solid var(--silo-border, #e2e8f0)", background: "var(--silo-bg-hover, #f8fafc)" }
|
|
577
|
-
}
|
|
578
|
-
),
|
|
579
649
|
/* @__PURE__ */ jsx(
|
|
580
650
|
DropZone,
|
|
581
651
|
{
|
|
@@ -586,15 +656,15 @@ function VideoUploader({
|
|
|
586
656
|
disabled: disabled || isUploading,
|
|
587
657
|
onFiles: handleFiles,
|
|
588
658
|
style: { padding: "32px 24px", textAlign: "center" },
|
|
589
|
-
children: preview && !isUploading ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap:
|
|
590
|
-
/* @__PURE__ */ jsx("video", { src: preview, style: { maxWidth: "100%", maxHeight:
|
|
591
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
592
|
-
] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap:
|
|
593
|
-
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" }) }),
|
|
594
664
|
children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
595
|
-
/* @__PURE__ */ jsx("span", { style: { fontWeight:
|
|
596
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
597
|
-
/* @__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: [
|
|
598
668
|
"MP4, MOV, MKV, WebM",
|
|
599
669
|
maxSize ? ` \xB7 M\xE1x ${formatBytes(maxSize)}` : ""
|
|
600
670
|
] })
|
|
@@ -602,48 +672,111 @@ function VideoUploader({
|
|
|
602
672
|
] })
|
|
603
673
|
}
|
|
604
674
|
),
|
|
605
|
-
|
|
606
|
-
/* @__PURE__ */
|
|
607
|
-
|
|
608
|
-
/* @__PURE__ */
|
|
609
|
-
|
|
675
|
+
showVideoOptions && stagedFile && !isUploading && state.status !== "done" && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
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
|
+
] }),
|
|
681
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
|
|
682
|
+
/* @__PURE__ */ jsx(
|
|
683
|
+
"button",
|
|
684
|
+
{
|
|
685
|
+
onClick: () => {
|
|
686
|
+
setStagedFile(null);
|
|
687
|
+
setPreview(null);
|
|
688
|
+
},
|
|
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" },
|
|
690
|
+
children: "Cancelar"
|
|
691
|
+
}
|
|
692
|
+
),
|
|
693
|
+
/* @__PURE__ */ jsx(
|
|
694
|
+
"button",
|
|
695
|
+
{
|
|
696
|
+
onClick: () => {
|
|
697
|
+
const f = stagedFile;
|
|
698
|
+
setStagedFile(null);
|
|
699
|
+
void doUpload(f, videoOpts);
|
|
700
|
+
},
|
|
701
|
+
style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
|
|
702
|
+
children: "Enviar v\xEDdeo"
|
|
703
|
+
}
|
|
704
|
+
)
|
|
705
|
+
] })
|
|
706
|
+
] }),
|
|
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: [
|
|
610
712
|
progress,
|
|
611
713
|
"%"
|
|
612
714
|
] }),
|
|
613
|
-
/* @__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" })
|
|
614
716
|
] })
|
|
615
717
|
] }),
|
|
616
718
|
/* @__PURE__ */ jsx(ProgressBar, { progress }),
|
|
617
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
618
|
-
] })
|
|
619
|
-
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: [
|
|
620
722
|
/* @__PURE__ */ jsx(
|
|
621
723
|
"button",
|
|
622
724
|
{
|
|
623
|
-
onClick: () => resume({ ...bucket !== void 0 && { bucket }, visibility, video:
|
|
624
|
-
style: { flex: 1, padding: "
|
|
625
|
-
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"
|
|
626
728
|
}
|
|
627
729
|
),
|
|
628
|
-
/* @__PURE__ */ jsx(
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
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
|
+
)
|
|
632
741
|
] }),
|
|
633
|
-
state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex",
|
|
634
|
-
/* @__PURE__ */
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
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." })
|
|
640
762
|
] }),
|
|
641
|
-
state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap:
|
|
642
|
-
/* @__PURE__ */ jsx("span", { children:
|
|
643
|
-
/* @__PURE__ */
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
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
|
+
)
|
|
647
780
|
] })
|
|
648
781
|
] });
|
|
649
782
|
}
|
|
@@ -655,6 +788,14 @@ var DEFAULT_VIDEO_OPTS2 = {
|
|
|
655
788
|
codec: "h264",
|
|
656
789
|
transcoding: "auto"
|
|
657
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
|
+
}
|
|
658
799
|
function FileUploader({
|
|
659
800
|
bucket,
|
|
660
801
|
visibility = "private",
|
|
@@ -703,11 +844,8 @@ function FileUploader({
|
|
|
703
844
|
function setRename(index, name, files) {
|
|
704
845
|
setRenames((prev) => {
|
|
705
846
|
const next = new Map(prev);
|
|
706
|
-
if (name.trim() && name.trim() !== files[index]?.name)
|
|
707
|
-
|
|
708
|
-
} else {
|
|
709
|
-
next.delete(index);
|
|
710
|
-
}
|
|
847
|
+
if (name.trim() && name.trim() !== files[index]?.name) next.set(index, name.trim());
|
|
848
|
+
else next.delete(index);
|
|
711
849
|
return next;
|
|
712
850
|
});
|
|
713
851
|
}
|
|
@@ -721,8 +859,7 @@ function FileUploader({
|
|
|
721
859
|
const effectiveVideo = showVideoOptions ? videoOpts : video ?? videoOpts;
|
|
722
860
|
if (multiple && files.length > 1) {
|
|
723
861
|
try {
|
|
724
|
-
const
|
|
725
|
-
const results = await batch.upload(files, opts);
|
|
862
|
+
const results = await batch.upload(files, { ...bucket !== void 0 && { bucket }, visibility, image: effectiveImage, video: effectiveVideo });
|
|
726
863
|
onBatchUpload?.(results);
|
|
727
864
|
results.forEach((r) => onUpload?.(r));
|
|
728
865
|
} catch (err) {
|
|
@@ -732,22 +869,20 @@ function FileUploader({
|
|
|
732
869
|
const file = files[0];
|
|
733
870
|
if (!file) return;
|
|
734
871
|
try {
|
|
735
|
-
const
|
|
736
|
-
const result = await single.upload(file, opts);
|
|
872
|
+
const result = await single.upload(file, { ...bucket !== void 0 && { bucket }, visibility, image: effectiveImage, video: effectiveVideo });
|
|
737
873
|
if (result) onUpload?.(result);
|
|
738
874
|
} catch (err) {
|
|
739
875
|
onError?.(err instanceof Error ? err : new Error(String(err)));
|
|
740
876
|
}
|
|
741
877
|
}
|
|
742
|
-
}, [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]);
|
|
743
879
|
const handleFiles = useCallback(async (files) => {
|
|
744
|
-
|
|
880
|
+
const needsStaging = allowRename || showImageOptions && files.some((f) => f.type.startsWith("image/")) || showVideoOptions && files.some((f) => f.type.startsWith("video/"));
|
|
881
|
+
if (needsStaging) {
|
|
745
882
|
setStaged(files);
|
|
746
883
|
setRenames(/* @__PURE__ */ new Map());
|
|
747
|
-
} else
|
|
748
|
-
|
|
749
|
-
}
|
|
750
|
-
}, [allowRename, doUpload]);
|
|
884
|
+
} else await doUpload(files);
|
|
885
|
+
}, [allowRename, showImageOptions, showVideoOptions, doUpload]);
|
|
751
886
|
async function handleConfirmUpload() {
|
|
752
887
|
if (!staged) return;
|
|
753
888
|
const filesToUpload = staged.map((f, i) => {
|
|
@@ -777,21 +912,22 @@ function FileUploader({
|
|
|
777
912
|
onFiles: handleFiles,
|
|
778
913
|
style: { padding: "28px 24px", textAlign: "center" },
|
|
779
914
|
children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
|
|
780
|
-
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" }) }),
|
|
781
916
|
children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
782
|
-
/* @__PURE__ */ jsx("span", { style: { fontWeight:
|
|
783
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
784
|
-
maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize:
|
|
785
|
-
"
|
|
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: ",
|
|
786
921
|
formatBytes(maxSize)
|
|
787
922
|
] })
|
|
788
923
|
] })
|
|
789
924
|
] })
|
|
790
925
|
}
|
|
791
926
|
),
|
|
792
|
-
staged && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap:
|
|
793
|
-
|
|
794
|
-
|
|
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) }),
|
|
795
931
|
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
796
932
|
editingIndex === i ? /* @__PURE__ */ jsx(
|
|
797
933
|
"input",
|
|
@@ -810,28 +946,28 @@ function FileUploader({
|
|
|
810
946
|
}
|
|
811
947
|
if (e.key === "Escape") setEditingIndex(null);
|
|
812
948
|
},
|
|
813
|
-
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)" }
|
|
814
950
|
}
|
|
815
951
|
) : /* @__PURE__ */ jsxs(
|
|
816
952
|
"div",
|
|
817
953
|
{
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
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,
|
|
821
957
|
children: [
|
|
822
958
|
effectiveName(i, staged),
|
|
823
959
|
renames.has(i) && /* @__PURE__ */ jsx("span", { style: { marginLeft: 6, fontSize: 10, color: "var(--silo-accent)", fontWeight: 700 }, children: "renomeado" })
|
|
824
960
|
]
|
|
825
961
|
}
|
|
826
962
|
),
|
|
827
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize:
|
|
963
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--silo-text-muted)", marginTop: 1 }, children: formatBytes(f.size) })
|
|
828
964
|
] }),
|
|
829
|
-
/* @__PURE__ */ jsx(
|
|
965
|
+
allowRename && /* @__PURE__ */ jsx(
|
|
830
966
|
"button",
|
|
831
967
|
{
|
|
832
968
|
onClick: () => setEditingIndex(i),
|
|
833
969
|
title: "Renomear",
|
|
834
|
-
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 },
|
|
835
971
|
children: "\u270F\uFE0F"
|
|
836
972
|
}
|
|
837
973
|
),
|
|
@@ -840,39 +976,28 @@ function FileUploader({
|
|
|
840
976
|
{
|
|
841
977
|
onClick: () => {
|
|
842
978
|
const next = staged.filter((_, j) => j !== i);
|
|
843
|
-
if (next.length === 0)
|
|
844
|
-
|
|
845
|
-
} else {
|
|
846
|
-
setStaged(next);
|
|
847
|
-
}
|
|
979
|
+
if (next.length === 0) clearStaging();
|
|
980
|
+
else setStaged(next);
|
|
848
981
|
},
|
|
849
|
-
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 },
|
|
850
983
|
children: "\xD7"
|
|
851
984
|
}
|
|
852
985
|
)
|
|
853
986
|
] }, i)),
|
|
854
|
-
showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */
|
|
855
|
-
|
|
856
|
-
{
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
}
|
|
861
|
-
),
|
|
862
|
-
|
|
863
|
-
VideoOptions,
|
|
864
|
-
{
|
|
865
|
-
value: videoOpts,
|
|
866
|
-
onChange: setVideoOpts,
|
|
867
|
-
style: { padding: "12px 14px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "var(--silo-bg-hover, #f8fafc)", marginTop: 4 }
|
|
868
|
-
}
|
|
869
|
-
),
|
|
870
|
-
/* @__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: [
|
|
871
996
|
/* @__PURE__ */ jsx(
|
|
872
997
|
"button",
|
|
873
998
|
{
|
|
874
999
|
onClick: clearStaging,
|
|
875
|
-
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" },
|
|
876
1001
|
children: "Cancelar"
|
|
877
1002
|
}
|
|
878
1003
|
),
|
|
@@ -880,72 +1005,82 @@ function FileUploader({
|
|
|
880
1005
|
"button",
|
|
881
1006
|
{
|
|
882
1007
|
onClick: handleConfirmUpload,
|
|
883
|
-
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" },
|
|
884
1009
|
children: staged.length > 1 ? `Enviar ${staged.length} arquivos` : "Enviar arquivo"
|
|
885
1010
|
}
|
|
886
1011
|
)
|
|
887
1012
|
] })
|
|
888
1013
|
] }),
|
|
889
|
-
isSingleUploading && !isBatch && /* @__PURE__ */
|
|
890
|
-
/* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between",
|
|
891
|
-
/* @__PURE__ */ jsx("span", {
|
|
892
|
-
/* @__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: [
|
|
893
1018
|
singleProgress,
|
|
894
1019
|
"%"
|
|
895
1020
|
] })
|
|
896
1021
|
] }),
|
|
897
1022
|
/* @__PURE__ */ jsx(ProgressBar, { progress: singleProgress })
|
|
898
|
-
] })
|
|
899
|
-
isBatch && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap:
|
|
1023
|
+
] })),
|
|
1024
|
+
isBatch && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
|
|
900
1025
|
batch.state.files.map((f, i) => {
|
|
901
1026
|
const st = f.status;
|
|
902
1027
|
const p = st.status === "uploading" ? st.progress : st.status === "paused" ? st.progress : st.status === "done" ? 100 : st.status === "completing" ? 99 : 0;
|
|
903
1028
|
const isPaused = st.status === "paused";
|
|
904
1029
|
const isDone = st.status === "done";
|
|
905
1030
|
const isErr = st.status === "error";
|
|
906
|
-
return /* @__PURE__ */ jsxs("div", { style: { padding: "
|
|
907
|
-
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap:
|
|
908
|
-
/* @__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) }),
|
|
909
1034
|
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
910
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize:
|
|
911
|
-
/* @__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) })
|
|
912
1037
|
] }),
|
|
913
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize:
|
|
914
|
-
|
|
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)
|
|
915
1042
|
] }),
|
|
916
1043
|
!isDone && !isErr && /* @__PURE__ */ jsx(ProgressBar, { progress: p })
|
|
917
1044
|
] }, i);
|
|
918
1045
|
}),
|
|
919
|
-
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap:
|
|
1046
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
|
|
920
1047
|
batch.state.status !== "done" && /* @__PURE__ */ jsx(
|
|
921
1048
|
"button",
|
|
922
1049
|
{
|
|
923
1050
|
onClick: isBatchUploading ? batch.pauseAll : batch.resumeAll,
|
|
924
|
-
style: { flex: 1, padding: "
|
|
925
|
-
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"
|
|
926
1053
|
}
|
|
927
1054
|
),
|
|
928
1055
|
/* @__PURE__ */ jsx(
|
|
929
1056
|
"button",
|
|
930
1057
|
{
|
|
931
1058
|
onClick: batch.state.status === "done" ? batch.reset : batch.abortAll,
|
|
932
|
-
style: { padding: "
|
|
933
|
-
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"
|
|
934
1061
|
}
|
|
935
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!` })
|
|
936
1067
|
] })
|
|
937
1068
|
] }),
|
|
938
|
-
single.state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap:
|
|
939
|
-
/* @__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" }),
|
|
940
1071
|
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
941
|
-
/* @__PURE__ */ jsx("div", { style: { fontWeight:
|
|
942
|
-
/* @__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) })
|
|
943
1074
|
] }),
|
|
944
|
-
/* @__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" })
|
|
945
1076
|
] }),
|
|
946
|
-
single.state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap:
|
|
947
|
-
/* @__PURE__ */ jsx("span", { children:
|
|
948
|
-
/* @__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" })
|
|
949
1084
|
] })
|
|
950
1085
|
] });
|
|
951
1086
|
}
|