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