@geekapps/silo-elements-nextjs 0.2.34 → 0.2.36
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.d.ts +1 -1
- package/dist/FileUploader.js +54 -85
- package/dist/FileUploader.js.map +1 -1
- package/dist/ImageUploader.d.ts +1 -1
- package/dist/ImageUploader.js +49 -112
- package/dist/ImageUploader.js.map +1 -1
- package/dist/MediaUploader.js +139 -256
- package/dist/MediaUploader.js.map +1 -1
- package/dist/VideoPlayer.js +12 -9
- package/dist/VideoPlayer.js.map +1 -1
- package/dist/VideoUploader.d.ts +1 -1
- package/dist/VideoUploader.js +54 -117
- package/dist/VideoUploader.js.map +1 -1
- package/dist/components/DropZone.js +7 -9
- package/dist/components/DropZone.js.map +1 -1
- package/dist/components/ProgressBar.js +2 -20
- package/dist/components/ProgressBar.js.map +1 -1
- package/dist/index.d.ts +0 -3
- package/dist/index.js +183 -426
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -2
- package/dist/types.d.ts +0 -1
- package/package.json +47 -47
package/dist/MediaUploader.js
CHANGED
|
@@ -86,20 +86,18 @@ function DropZone({
|
|
|
86
86
|
);
|
|
87
87
|
const rootStyle = {
|
|
88
88
|
...vars,
|
|
89
|
-
fontFamily: "var(--silo-font)",
|
|
90
|
-
border: `2px dashed ${dragging ? "var(--silo-border-active)" : "var(--silo-border)"}`,
|
|
91
|
-
borderRadius: "var(--silo-radius)",
|
|
92
|
-
backgroundColor: dragging ? "var(--silo-bg-hover)" : "var(--silo-bg)",
|
|
93
|
-
color: "var(--silo-text)",
|
|
94
|
-
cursor: disabled ? "not-allowed" : "pointer",
|
|
95
|
-
transition: "border-color 0.15s, background-color 0.15s",
|
|
96
|
-
opacity: disabled ? 0.5 : 1,
|
|
97
89
|
...style
|
|
98
90
|
};
|
|
91
|
+
const cls = [
|
|
92
|
+
"silo-dropzone",
|
|
93
|
+
dragging ? "silo-dropzone--dragging" : "",
|
|
94
|
+
disabled ? "silo-dropzone--disabled" : "",
|
|
95
|
+
className
|
|
96
|
+
].filter(Boolean).join(" ");
|
|
99
97
|
return /* @__PURE__ */ jsxs(
|
|
100
98
|
"div",
|
|
101
99
|
{
|
|
102
|
-
className:
|
|
100
|
+
className: cls,
|
|
103
101
|
style: rootStyle,
|
|
104
102
|
onDragOver: (e) => {
|
|
105
103
|
e.preventDefault();
|
|
@@ -137,30 +135,12 @@ function ProgressBar({ progress, className = "", style }) {
|
|
|
137
135
|
"div",
|
|
138
136
|
{
|
|
139
137
|
className: `silo-progress-track${className ? ` ${className}` : ""}`,
|
|
140
|
-
style
|
|
141
|
-
height: "6px",
|
|
142
|
-
borderRadius: "3px",
|
|
143
|
-
backgroundColor: "rgba(99,102,241,0.15)",
|
|
144
|
-
overflow: "hidden",
|
|
145
|
-
...style
|
|
146
|
-
},
|
|
138
|
+
style,
|
|
147
139
|
role: "progressbar",
|
|
148
140
|
"aria-valuenow": progress,
|
|
149
141
|
"aria-valuemin": 0,
|
|
150
142
|
"aria-valuemax": 100,
|
|
151
|
-
children: /* @__PURE__ */ jsx(
|
|
152
|
-
"div",
|
|
153
|
-
{
|
|
154
|
-
className: "silo-progress-fill",
|
|
155
|
-
style: {
|
|
156
|
-
height: "100%",
|
|
157
|
-
width: `${progress}%`,
|
|
158
|
-
backgroundColor: "var(--silo-accent, #6366f1)",
|
|
159
|
-
borderRadius: "3px",
|
|
160
|
-
transition: "width 0.2s ease"
|
|
161
|
-
}
|
|
162
|
-
}
|
|
163
|
-
)
|
|
143
|
+
children: /* @__PURE__ */ jsx("div", { className: "silo-progress-fill", style: { width: `${progress}%` } })
|
|
164
144
|
}
|
|
165
145
|
);
|
|
166
146
|
}
|
|
@@ -260,7 +240,6 @@ function uploadLabel(status, progress) {
|
|
|
260
240
|
function ImageUploader({
|
|
261
241
|
bucket,
|
|
262
242
|
expiresIn,
|
|
263
|
-
visibility = "private",
|
|
264
243
|
onUpload,
|
|
265
244
|
onError,
|
|
266
245
|
className = "",
|
|
@@ -287,12 +266,12 @@ function ImageUploader({
|
|
|
287
266
|
const doUpload = useCallback(async (file, opts) => {
|
|
288
267
|
if (showPreview) setPreview(URL.createObjectURL(file));
|
|
289
268
|
try {
|
|
290
|
-
const result = await upload(file, { ...bucket !== void 0 && { bucket },
|
|
269
|
+
const result = await upload(file, { ...bucket !== void 0 && { bucket }, image: opts });
|
|
291
270
|
if (result) onUpload?.(result);
|
|
292
271
|
} catch (err) {
|
|
293
272
|
onError?.(err instanceof Error ? err : new Error(String(err)));
|
|
294
273
|
}
|
|
295
|
-
}, [upload, bucket,
|
|
274
|
+
}, [upload, bucket, onUpload, onError, showPreview]);
|
|
296
275
|
const handleFiles = useCallback(async (files) => {
|
|
297
276
|
const file = files[0];
|
|
298
277
|
if (!file) return;
|
|
@@ -330,13 +309,13 @@ function ImageUploader({
|
|
|
330
309
|
style: { padding: "32px 24px", textAlign: "center" },
|
|
331
310
|
children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
|
|
332
311
|
/* @__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
|
|
312
|
+
/* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: "Clique ou arraste para trocar a imagem" })
|
|
334
313
|
] }) : /* @__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",
|
|
314
|
+
renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", className: "silo-text-muted", style: { 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" }) }),
|
|
336
315
|
children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
337
|
-
/* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 15
|
|
338
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize: 13
|
|
339
|
-
maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize: 12
|
|
316
|
+
/* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontWeight: 700, fontSize: 15 }, children: "Arraste sua imagem aqui" }),
|
|
317
|
+
/* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 13 }, children: "ou clique para escolher do seu dispositivo" }),
|
|
318
|
+
maxSize && /* @__PURE__ */ jsxs("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: [
|
|
340
319
|
"Tamanho m\xE1ximo: ",
|
|
341
320
|
formatBytes(maxSize)
|
|
342
321
|
] })
|
|
@@ -345,41 +324,27 @@ function ImageUploader({
|
|
|
345
324
|
}
|
|
346
325
|
),
|
|
347
326
|
showImageOptions && stagedFile && !isUploading && state.status !== "done" && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
348
|
-
preview && /* @__PURE__ */ jsx("div", {
|
|
349
|
-
/* @__PURE__ */ jsxs("div", {
|
|
350
|
-
/* @__PURE__ */ jsx("div", {
|
|
327
|
+
preview && /* @__PURE__ */ jsx("div", { className: "silo-section-body", style: { overflow: "hidden" }, 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)" } }) }),
|
|
328
|
+
/* @__PURE__ */ jsxs("div", { className: "silo-section-body", children: [
|
|
329
|
+
/* @__PURE__ */ jsx("div", { className: "silo-section-header", children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
|
|
351
330
|
/* @__PURE__ */ jsx(ImageOptions, { value: imageOpts, onChange: setImageOpts, style: { padding: "12px 14px" } })
|
|
352
331
|
] }),
|
|
353
332
|
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
|
|
354
|
-
/* @__PURE__ */ jsx(
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
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
|
-
)
|
|
333
|
+
/* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: () => {
|
|
334
|
+
setStagedFile(null);
|
|
335
|
+
setPreview(null);
|
|
336
|
+
}, children: "Cancelar" }),
|
|
337
|
+
/* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg silo-btn--primary", style: { flex: 1 }, onClick: () => {
|
|
338
|
+
const f = stagedFile;
|
|
339
|
+
setStagedFile(null);
|
|
340
|
+
void doUpload(f, imageOpts);
|
|
341
|
+
}, children: "Enviar imagem" })
|
|
377
342
|
] })
|
|
378
343
|
] }),
|
|
379
|
-
isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", {
|
|
344
|
+
isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", { className: "silo-card", style: { flexDirection: "column", gap: 8, padding: 16 }, children: [
|
|
380
345
|
/* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
|
|
381
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600
|
|
382
|
-
/* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700
|
|
346
|
+
/* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontSize: 13, fontWeight: 600 }, children: uploadLabel(state.status, progress) }),
|
|
347
|
+
/* @__PURE__ */ jsxs("span", { className: "silo-text-accent", style: { fontSize: 13, fontWeight: 700 }, children: [
|
|
383
348
|
progress,
|
|
384
349
|
"%"
|
|
385
350
|
] })
|
|
@@ -387,61 +352,33 @@ function ImageUploader({
|
|
|
387
352
|
/* @__PURE__ */ jsx(ProgressBar, { progress })
|
|
388
353
|
] })),
|
|
389
354
|
isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
|
|
390
|
-
/* @__PURE__ */ jsx(
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
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
|
-
)
|
|
355
|
+
/* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg silo-btn--success", style: { flex: 1 }, onClick: () => resume({ ...bucket !== void 0 && { bucket }, image: imageOpts }), children: "\u25B6 Retomar envio" }),
|
|
356
|
+
/* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: () => {
|
|
357
|
+
abort();
|
|
358
|
+
setPreview(null);
|
|
359
|
+
}, children: "Cancelar" })
|
|
409
360
|
] }),
|
|
410
|
-
state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", {
|
|
361
|
+
state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--success", style: { gap: 12, padding: "14px 16px" }, children: [
|
|
411
362
|
/* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
|
|
412
363
|
/* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
|
|
413
364
|
/* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "Imagem enviada com sucesso!" }),
|
|
414
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize: 12,
|
|
365
|
+
/* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: formatBytes(state.result.size) })
|
|
415
366
|
] }),
|
|
416
|
-
/* @__PURE__ */ jsx(
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
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
|
-
)
|
|
367
|
+
/* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(34,197,94,0.3)", color: "#16a34a", padding: "4px 10px", flexShrink: 0 }, onClick: () => {
|
|
368
|
+
reset();
|
|
369
|
+
setPreview(null);
|
|
370
|
+
}, children: "Enviar outra" })
|
|
427
371
|
] }),
|
|
428
|
-
state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", {
|
|
372
|
+
state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--error", style: { gap: 12, padding: "14px 16px" }, children: [
|
|
429
373
|
/* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
|
|
430
374
|
/* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
|
|
431
|
-
/* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13
|
|
432
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize: 12,
|
|
375
|
+
/* @__PURE__ */ jsx("div", { className: "silo-text-error", style: { fontWeight: 700, fontSize: 13 }, children: "N\xE3o foi poss\xEDvel enviar a imagem" }),
|
|
376
|
+
/* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: state.error.message })
|
|
433
377
|
] }),
|
|
434
|
-
/* @__PURE__ */ jsx(
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
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
|
-
)
|
|
378
|
+
/* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(239,68,68,0.3)", color: "#ef4444", padding: "4px 10px", flexShrink: 0 }, onClick: () => {
|
|
379
|
+
reset();
|
|
380
|
+
setPreview(null);
|
|
381
|
+
}, children: "Tentar novamente" })
|
|
445
382
|
] })
|
|
446
383
|
] });
|
|
447
384
|
}
|
|
@@ -586,7 +523,6 @@ function uploadLabel2(status, progress) {
|
|
|
586
523
|
function VideoUploader({
|
|
587
524
|
bucket,
|
|
588
525
|
expiresIn,
|
|
589
|
-
visibility = "private",
|
|
590
526
|
onUpload,
|
|
591
527
|
onError,
|
|
592
528
|
className = "",
|
|
@@ -613,12 +549,12 @@ function VideoUploader({
|
|
|
613
549
|
const doUpload = useCallback(async (file, opts) => {
|
|
614
550
|
if (showPreview) setPreview(URL.createObjectURL(file));
|
|
615
551
|
try {
|
|
616
|
-
const result = await upload(file, { ...bucket !== void 0 && { bucket },
|
|
552
|
+
const result = await upload(file, { ...bucket !== void 0 && { bucket }, video: opts });
|
|
617
553
|
if (result) onUpload?.(result);
|
|
618
554
|
} catch (err) {
|
|
619
555
|
onError?.(err instanceof Error ? err : new Error(String(err)));
|
|
620
556
|
}
|
|
621
|
-
}, [upload, bucket,
|
|
557
|
+
}, [upload, bucket, onUpload, onError, showPreview]);
|
|
622
558
|
const handleFiles = useCallback(async (files) => {
|
|
623
559
|
const file = files[0];
|
|
624
560
|
if (!file) return;
|
|
@@ -657,13 +593,13 @@ function VideoUploader({
|
|
|
657
593
|
style: { padding: "32px 24px", textAlign: "center" },
|
|
658
594
|
children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
|
|
659
595
|
/* @__PURE__ */ jsx("video", { src: preview, style: { maxWidth: "100%", maxHeight: 180, borderRadius: 8 }, muted: true, playsInline: true }),
|
|
660
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize: 12
|
|
596
|
+
/* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: "Clique ou arraste para trocar o v\xEDdeo" })
|
|
661
597
|
] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
|
|
662
|
-
renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor",
|
|
598
|
+
renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", className: "silo-text-muted", style: { 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" }) }),
|
|
663
599
|
children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
664
|
-
/* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 15
|
|
665
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize: 13
|
|
666
|
-
/* @__PURE__ */ jsxs("span", { style: { fontSize: 12
|
|
600
|
+
/* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontWeight: 700, fontSize: 15 }, children: "Arraste seu v\xEDdeo aqui" }),
|
|
601
|
+
/* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 13 }, children: "ou clique para escolher do seu dispositivo" }),
|
|
602
|
+
/* @__PURE__ */ jsxs("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: [
|
|
667
603
|
"MP4, MOV, MKV, WebM",
|
|
668
604
|
maxSize ? ` \xB7 M\xE1x ${formatBytes(maxSize)}` : ""
|
|
669
605
|
] })
|
|
@@ -672,112 +608,70 @@ function VideoUploader({
|
|
|
672
608
|
}
|
|
673
609
|
),
|
|
674
610
|
showVideoOptions && stagedFile && !isUploading && state.status !== "done" && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
675
|
-
preview && /* @__PURE__ */ jsx("div", {
|
|
676
|
-
/* @__PURE__ */ jsxs("div", {
|
|
677
|
-
/* @__PURE__ */ jsx("div", {
|
|
611
|
+
preview && /* @__PURE__ */ jsx("div", { className: "silo-section-body", style: { background: "#000", overflow: "hidden" }, children: /* @__PURE__ */ jsx("video", { src: preview, style: { width: "100%", maxHeight: 200, display: "block" }, muted: true, playsInline: true, controls: true }) }),
|
|
612
|
+
/* @__PURE__ */ jsxs("div", { className: "silo-section-body", children: [
|
|
613
|
+
/* @__PURE__ */ jsx("div", { className: "silo-section-header", children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
|
|
678
614
|
/* @__PURE__ */ jsx(VideoOptions, { value: videoOpts, onChange: setVideoOpts, style: { padding: "12px 14px" } })
|
|
679
615
|
] }),
|
|
680
616
|
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
|
|
681
|
-
/* @__PURE__ */ jsx(
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
),
|
|
693
|
-
/* @__PURE__ */ jsx(
|
|
694
|
-
"button",
|
|
695
|
-
{
|
|
696
|
-
onClick: () => {
|
|
697
|
-
const f = stagedFile;
|
|
698
|
-
setStagedFile(null);
|
|
699
|
-
void doUpload(f, videoOpts);
|
|
700
|
-
setVideoOpts(createInitialVideoOpts(video));
|
|
701
|
-
},
|
|
702
|
-
style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
|
|
703
|
-
children: "Enviar v\xEDdeo"
|
|
704
|
-
}
|
|
705
|
-
)
|
|
617
|
+
/* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: () => {
|
|
618
|
+
setStagedFile(null);
|
|
619
|
+
setPreview(null);
|
|
620
|
+
setVideoOpts(createInitialVideoOpts(video));
|
|
621
|
+
}, children: "Cancelar" }),
|
|
622
|
+
/* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg silo-btn--primary", style: { flex: 1 }, onClick: () => {
|
|
623
|
+
const f = stagedFile;
|
|
624
|
+
setStagedFile(null);
|
|
625
|
+
void doUpload(f, videoOpts);
|
|
626
|
+
setVideoOpts(createInitialVideoOpts(video));
|
|
627
|
+
}, children: "Enviar v\xEDdeo" })
|
|
706
628
|
] })
|
|
707
629
|
] }),
|
|
708
|
-
isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", {
|
|
630
|
+
isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", { className: "silo-card", style: { flexDirection: "column", gap: 8, padding: 16 }, children: [
|
|
709
631
|
/* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
|
|
710
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600
|
|
632
|
+
/* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontSize: 13, fontWeight: 600 }, children: uploadLabel2(state.status, progress) }),
|
|
711
633
|
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
|
|
712
|
-
/* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700
|
|
634
|
+
/* @__PURE__ */ jsxs("span", { className: "silo-text-accent", style: { fontSize: 13, fontWeight: 700 }, children: [
|
|
713
635
|
progress,
|
|
714
636
|
"%"
|
|
715
637
|
] }),
|
|
716
|
-
/* @__PURE__ */ jsx("button", {
|
|
638
|
+
/* @__PURE__ */ jsx("button", { className: "silo-btn", style: { fontSize: 11, padding: "2px 8px" }, onClick: pause, children: "Pausar" })
|
|
717
639
|
] })
|
|
718
640
|
] }),
|
|
719
641
|
/* @__PURE__ */ jsx(ProgressBar, { progress }),
|
|
720
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize: 11
|
|
642
|
+
/* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 11 }, children: "O processamento do v\xEDdeo come\xE7a automaticamente ap\xF3s o envio" })
|
|
721
643
|
] })),
|
|
722
644
|
isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
|
|
723
|
-
/* @__PURE__ */ jsx(
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
children: "\u25B6 Retomar envio"
|
|
729
|
-
}
|
|
730
|
-
),
|
|
731
|
-
/* @__PURE__ */ jsx(
|
|
732
|
-
"button",
|
|
733
|
-
{
|
|
734
|
-
onClick: () => {
|
|
735
|
-
abort();
|
|
736
|
-
setPreview(null);
|
|
737
|
-
},
|
|
738
|
-
style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", fontSize: 13, cursor: "pointer", color: "var(--silo-text-muted)" },
|
|
739
|
-
children: "Cancelar"
|
|
740
|
-
}
|
|
741
|
-
)
|
|
645
|
+
/* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg silo-btn--success", style: { flex: 1 }, onClick: () => resume({ ...bucket !== void 0 && { bucket }, video: videoOpts }), children: "\u25B6 Retomar envio" }),
|
|
646
|
+
/* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: () => {
|
|
647
|
+
abort();
|
|
648
|
+
setPreview(null);
|
|
649
|
+
}, children: "Cancelar" })
|
|
742
650
|
] }),
|
|
743
|
-
state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", {
|
|
651
|
+
state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--success", style: { flexDirection: "column", gap: 8, padding: "14px 16px" }, children: [
|
|
744
652
|
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
|
|
745
653
|
/* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
|
|
746
654
|
/* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
|
|
747
655
|
/* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "V\xEDdeo enviado com sucesso!" }),
|
|
748
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize: 12,
|
|
656
|
+
/* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: formatBytes(state.result.size) })
|
|
749
657
|
] }),
|
|
750
|
-
/* @__PURE__ */ jsx(
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
reset();
|
|
755
|
-
setPreview(null);
|
|
756
|
-
},
|
|
757
|
-
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 },
|
|
758
|
-
children: "Enviar outro"
|
|
759
|
-
}
|
|
760
|
-
)
|
|
658
|
+
/* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(34,197,94,0.3)", color: "#16a34a", padding: "4px 10px", flexShrink: 0 }, onClick: () => {
|
|
659
|
+
reset();
|
|
660
|
+
setPreview(null);
|
|
661
|
+
}, children: "Enviar outro" })
|
|
761
662
|
] }),
|
|
762
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize: 12,
|
|
663
|
+
/* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, 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." })
|
|
763
664
|
] }),
|
|
764
|
-
state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", {
|
|
665
|
+
state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--error", style: { gap: 12, padding: "14px 16px" }, children: [
|
|
765
666
|
/* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
|
|
766
667
|
/* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
|
|
767
|
-
/* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13
|
|
768
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize: 12,
|
|
668
|
+
/* @__PURE__ */ jsx("div", { className: "silo-text-error", style: { fontWeight: 700, fontSize: 13 }, children: "N\xE3o foi poss\xEDvel enviar o v\xEDdeo" }),
|
|
669
|
+
/* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: state.error.message })
|
|
769
670
|
] }),
|
|
770
|
-
/* @__PURE__ */ jsx(
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
reset();
|
|
775
|
-
setPreview(null);
|
|
776
|
-
},
|
|
777
|
-
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 },
|
|
778
|
-
children: "Tentar novamente"
|
|
779
|
-
}
|
|
780
|
-
)
|
|
671
|
+
/* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(239,68,68,0.3)", color: "#ef4444", padding: "4px 10px", flexShrink: 0 }, onClick: () => {
|
|
672
|
+
reset();
|
|
673
|
+
setPreview(null);
|
|
674
|
+
}, children: "Tentar novamente" })
|
|
781
675
|
] })
|
|
782
676
|
] });
|
|
783
677
|
}
|
|
@@ -805,7 +699,6 @@ function uploadLabel3(status, progress) {
|
|
|
805
699
|
}
|
|
806
700
|
function FileUploader({
|
|
807
701
|
bucket,
|
|
808
|
-
visibility = "private",
|
|
809
702
|
onUpload,
|
|
810
703
|
onBatchUpload,
|
|
811
704
|
onError,
|
|
@@ -870,7 +763,7 @@ function FileUploader({
|
|
|
870
763
|
const effectiveVideo = showVideoOptions ? resolvedVideo : video ?? resolvedVideo;
|
|
871
764
|
if (multiple && files.length > 1) {
|
|
872
765
|
try {
|
|
873
|
-
const results = await batch.upload(files, { ...bucket !== void 0 && { bucket },
|
|
766
|
+
const results = await batch.upload(files, { ...bucket !== void 0 && { bucket }, image: effectiveImage, video: effectiveVideo });
|
|
874
767
|
onBatchUpload?.(results);
|
|
875
768
|
results.forEach((r) => onUpload?.(r));
|
|
876
769
|
} catch (err) {
|
|
@@ -880,13 +773,13 @@ function FileUploader({
|
|
|
880
773
|
const file = files[0];
|
|
881
774
|
if (!file) return;
|
|
882
775
|
try {
|
|
883
|
-
const result = await single.upload(file, { ...bucket !== void 0 && { bucket },
|
|
776
|
+
const result = await single.upload(file, { ...bucket !== void 0 && { bucket }, image: effectiveImage, video: effectiveVideo });
|
|
884
777
|
if (result) onUpload?.(result);
|
|
885
778
|
} catch (err) {
|
|
886
779
|
onError?.(err instanceof Error ? err : new Error(String(err)));
|
|
887
780
|
}
|
|
888
781
|
}
|
|
889
|
-
}, [single, batch, multiple, bucket,
|
|
782
|
+
}, [single, batch, multiple, bucket, image, video, imageOpts, videoOpts, showImageOptions, showVideoOptions, onUpload, onBatchUpload, onError]);
|
|
890
783
|
const handleFiles = useCallback(async (files) => {
|
|
891
784
|
const needsStaging = allowRename || showImageOptions && files.some((f) => f.type.startsWith("image/")) || showVideoOptions && files.some((f) => f.type.startsWith("video/"));
|
|
892
785
|
if (needsStaging) {
|
|
@@ -927,11 +820,11 @@ function FileUploader({
|
|
|
927
820
|
onFiles: handleFiles,
|
|
928
821
|
style: { padding: "28px 24px", textAlign: "center" },
|
|
929
822
|
children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
|
|
930
|
-
renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor",
|
|
823
|
+
renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", className: "silo-text-muted", style: { 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" }) }),
|
|
931
824
|
children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
932
|
-
/* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 15
|
|
933
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize: 13
|
|
934
|
-
maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize: 12
|
|
825
|
+
/* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontWeight: 700, fontSize: 15 }, children: multiple ? "Arraste seus arquivos aqui" : "Arraste seu arquivo aqui" }),
|
|
826
|
+
/* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 13 }, children: "ou clique para escolher do seu dispositivo" }),
|
|
827
|
+
maxSize && /* @__PURE__ */ jsxs("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: [
|
|
935
828
|
"Tamanho m\xE1ximo: ",
|
|
936
829
|
formatBytes(maxSize)
|
|
937
830
|
] })
|
|
@@ -940,8 +833,8 @@ function FileUploader({
|
|
|
940
833
|
}
|
|
941
834
|
),
|
|
942
835
|
staged && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
|
|
943
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 600,
|
|
944
|
-
staged.map((f, i) => /* @__PURE__ */ jsxs("div", {
|
|
836
|
+
/* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 13, fontWeight: 600, marginBottom: 2 }, children: staged.length === 1 ? "1 arquivo selecionado" : `${staged.length} arquivos selecionados` }),
|
|
837
|
+
staged.map((f, i) => /* @__PURE__ */ jsxs("div", { className: "silo-card", children: [
|
|
945
838
|
/* @__PURE__ */ jsx("span", { style: { fontSize: 20, flexShrink: 0 }, children: getFileIcon(f.type) }),
|
|
946
839
|
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
947
840
|
editingIndex === i ? /* @__PURE__ */ jsx(
|
|
@@ -961,28 +854,30 @@ function FileUploader({
|
|
|
961
854
|
}
|
|
962
855
|
if (e.key === "Escape") setEditingIndex(null);
|
|
963
856
|
},
|
|
964
|
-
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)" }
|
|
857
|
+
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, #f8fafc)", color: "var(--silo-text, #0f172a)", fontFamily: "var(--silo-font, inherit)" }
|
|
965
858
|
}
|
|
966
859
|
) : /* @__PURE__ */ jsxs(
|
|
967
860
|
"div",
|
|
968
861
|
{
|
|
969
|
-
|
|
862
|
+
className: "silo-text",
|
|
863
|
+
style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", cursor: allowRename ? "text" : "default" },
|
|
970
864
|
onClick: () => allowRename && setEditingIndex(i),
|
|
971
865
|
title: allowRename ? "Clique para renomear" : void 0,
|
|
972
866
|
children: [
|
|
973
867
|
effectiveName(i, staged),
|
|
974
|
-
renames.has(i) && /* @__PURE__ */ jsx("span", { style: { marginLeft: 6, fontSize: 10,
|
|
868
|
+
renames.has(i) && /* @__PURE__ */ jsx("span", { className: "silo-text-accent", style: { marginLeft: 6, fontSize: 10, fontWeight: 700 }, children: "renomeado" })
|
|
975
869
|
]
|
|
976
870
|
}
|
|
977
871
|
),
|
|
978
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize: 11,
|
|
872
|
+
/* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 11, marginTop: 1 }, children: formatBytes(f.size) })
|
|
979
873
|
] }),
|
|
980
874
|
allowRename && /* @__PURE__ */ jsx(
|
|
981
875
|
"button",
|
|
982
876
|
{
|
|
983
877
|
onClick: () => setEditingIndex(i),
|
|
984
878
|
title: "Renomear",
|
|
985
|
-
|
|
879
|
+
className: "silo-text-muted",
|
|
880
|
+
style: { background: "none", border: "none", cursor: "pointer", fontSize: 14, padding: "0 4px", flexShrink: 0 },
|
|
986
881
|
children: "\u270F\uFE0F"
|
|
987
882
|
}
|
|
988
883
|
),
|
|
@@ -994,42 +889,29 @@ function FileUploader({
|
|
|
994
889
|
if (next.length === 0) clearStaging();
|
|
995
890
|
else setStaged(next);
|
|
996
891
|
},
|
|
997
|
-
|
|
892
|
+
className: "silo-text-muted",
|
|
893
|
+
style: { background: "none", border: "none", cursor: "pointer", fontSize: 18, padding: "0 4px", lineHeight: 1, flexShrink: 0 },
|
|
998
894
|
children: "\xD7"
|
|
999
895
|
}
|
|
1000
896
|
)
|
|
1001
897
|
] }, i)),
|
|
1002
|
-
showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */ jsxs("div", {
|
|
1003
|
-
/* @__PURE__ */ jsx("div", {
|
|
898
|
+
showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */ jsxs("div", { className: "silo-section-body", children: [
|
|
899
|
+
/* @__PURE__ */ jsx("div", { className: "silo-section-header", children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
|
|
1004
900
|
/* @__PURE__ */ jsx(ImageOptions, { value: imageOpts, onChange: setImageOpts, style: { padding: "12px 14px" } })
|
|
1005
901
|
] }),
|
|
1006
|
-
showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__PURE__ */ jsxs("div", {
|
|
1007
|
-
/* @__PURE__ */ jsx("div", {
|
|
902
|
+
showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__PURE__ */ jsxs("div", { className: "silo-section-body", children: [
|
|
903
|
+
/* @__PURE__ */ jsx("div", { className: "silo-section-header", children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
|
|
1008
904
|
/* @__PURE__ */ jsx(VideoOptions, { value: videoOpts, onChange: setVideoOpts, style: { padding: "12px 14px" } })
|
|
1009
905
|
] }),
|
|
1010
906
|
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, marginTop: 4 }, children: [
|
|
1011
|
-
/* @__PURE__ */ jsx(
|
|
1012
|
-
|
|
1013
|
-
{
|
|
1014
|
-
onClick: clearStaging,
|
|
1015
|
-
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" },
|
|
1016
|
-
children: "Cancelar"
|
|
1017
|
-
}
|
|
1018
|
-
),
|
|
1019
|
-
/* @__PURE__ */ jsx(
|
|
1020
|
-
"button",
|
|
1021
|
-
{
|
|
1022
|
-
onClick: handleConfirmUpload,
|
|
1023
|
-
style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
|
|
1024
|
-
children: staged.length > 1 ? `Enviar ${staged.length} arquivos` : "Enviar arquivo"
|
|
1025
|
-
}
|
|
1026
|
-
)
|
|
907
|
+
/* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: clearStaging, children: "Cancelar" }),
|
|
908
|
+
/* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg silo-btn--primary", style: { flex: 1 }, onClick: handleConfirmUpload, children: staged.length > 1 ? `Enviar ${staged.length} arquivos` : "Enviar arquivo" })
|
|
1027
909
|
] })
|
|
1028
910
|
] }),
|
|
1029
|
-
isSingleUploading && !isBatch && (renderProgress ? renderProgress(singleProgress) : /* @__PURE__ */ jsxs("div", {
|
|
911
|
+
isSingleUploading && !isBatch && (renderProgress ? renderProgress(singleProgress) : /* @__PURE__ */ jsxs("div", { className: "silo-card", style: { flexDirection: "column", gap: 8, padding: 16 }, children: [
|
|
1030
912
|
/* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
|
|
1031
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600
|
|
1032
|
-
/* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700
|
|
913
|
+
/* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontSize: 13, fontWeight: 600 }, children: uploadLabel3(single.state.status, singleProgress) }),
|
|
914
|
+
/* @__PURE__ */ jsxs("span", { className: "silo-text-accent", style: { fontSize: 13, fontWeight: 700 }, children: [
|
|
1033
915
|
singleProgress,
|
|
1034
916
|
"%"
|
|
1035
917
|
] })
|
|
@@ -1043,17 +925,17 @@ function FileUploader({
|
|
|
1043
925
|
const isPaused = st.status === "paused";
|
|
1044
926
|
const isDone = st.status === "done";
|
|
1045
927
|
const isErr = st.status === "error";
|
|
1046
|
-
return /* @__PURE__ */ jsxs("div", { style: {
|
|
1047
|
-
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10
|
|
928
|
+
return /* @__PURE__ */ jsxs("div", { className: "silo-card", style: { flexDirection: "column", alignItems: "stretch", gap: 8, padding: "12px 14px" }, children: [
|
|
929
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
|
|
1048
930
|
/* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: getFileIcon(f.file.type) }),
|
|
1049
931
|
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
1050
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"
|
|
1051
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize: 11
|
|
932
|
+
/* @__PURE__ */ jsx("div", { className: "silo-text", style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: f.file.name }),
|
|
933
|
+
/* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 11 }, children: formatBytes(f.file.size) })
|
|
1052
934
|
] }),
|
|
1053
935
|
isDone && /* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: "\u2705" }),
|
|
1054
|
-
isErr && /* @__PURE__ */ jsx("span", { style: { fontSize: 12,
|
|
1055
|
-
!isDone && !isErr && /* @__PURE__ */ jsx("span", {
|
|
1056
|
-
!isDone && !isErr && f.fileId && (isPaused ? /* @__PURE__ */ jsx("button", {
|
|
936
|
+
isErr && /* @__PURE__ */ jsx("span", { className: "silo-text-error", style: { fontSize: 12, fontWeight: 600, flexShrink: 0 }, children: "Erro no envio" }),
|
|
937
|
+
!isDone && !isErr && /* @__PURE__ */ jsx("span", { className: isPaused ? "silo-text-muted" : "silo-text-accent", style: { fontSize: 12, fontWeight: 700, flexShrink: 0 }, children: isPaused ? "Pausado" : `${p}%` }),
|
|
938
|
+
!isDone && !isErr && f.fileId && (isPaused ? /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--success", style: { fontSize: 11, padding: "3px 10px" }, onClick: () => batch.resumeFile(f.fileId), children: "Retomar" }) : st.status === "uploading" ? /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { fontSize: 11, padding: "3px 10px" }, onClick: () => batch.pauseFile(f.fileId), children: "Pausar" }) : null)
|
|
1057
939
|
] }),
|
|
1058
940
|
!isDone && !isErr && /* @__PURE__ */ jsx(ProgressBar, { progress: p })
|
|
1059
941
|
] }, i);
|
|
@@ -1062,40 +944,41 @@ function FileUploader({
|
|
|
1062
944
|
batch.state.status !== "done" && /* @__PURE__ */ jsx(
|
|
1063
945
|
"button",
|
|
1064
946
|
{
|
|
947
|
+
className: `silo-btn silo-btn--lg${isBatchUploading ? " silo-btn--warning" : " silo-btn--success"}`,
|
|
948
|
+
style: { flex: 1 },
|
|
1065
949
|
onClick: isBatchUploading ? batch.pauseAll : batch.resumeAll,
|
|
1066
|
-
style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: isBatchUploading ? "#f59e0b" : "#10b981", color: "#fff", fontSize: 13, fontWeight: 700, cursor: "pointer" },
|
|
1067
950
|
children: isBatchUploading ? "\u23F8 Pausar tudo" : "\u25B6 Retomar tudo"
|
|
1068
951
|
}
|
|
1069
952
|
),
|
|
1070
953
|
/* @__PURE__ */ jsx(
|
|
1071
954
|
"button",
|
|
1072
955
|
{
|
|
956
|
+
className: `silo-btn silo-btn--lg${batch.state.status === "done" ? " silo-btn--primary" : " silo-btn--danger"}`,
|
|
1073
957
|
onClick: batch.state.status === "done" ? batch.reset : batch.abortAll,
|
|
1074
|
-
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" },
|
|
1075
958
|
children: batch.state.status === "done" ? "Enviar mais arquivos" : "Cancelar"
|
|
1076
959
|
}
|
|
1077
960
|
)
|
|
1078
961
|
] }),
|
|
1079
|
-
batch.state.status === "done" && /* @__PURE__ */ jsxs("div", {
|
|
962
|
+
batch.state.status === "done" && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--success", style: { gap: 10 }, children: [
|
|
1080
963
|
/* @__PURE__ */ jsx("span", { style: { fontSize: 20 }, children: "\u{1F389}" }),
|
|
1081
964
|
/* @__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!` })
|
|
1082
965
|
] })
|
|
1083
966
|
] }),
|
|
1084
|
-
single.state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", {
|
|
967
|
+
single.state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--success", style: { gap: 12, padding: "14px 16px" }, children: [
|
|
1085
968
|
/* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
|
|
1086
969
|
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
1087
970
|
/* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "Arquivo enviado com sucesso!" }),
|
|
1088
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize: 12,
|
|
971
|
+
/* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: formatBytes(single.state.result.size) })
|
|
1089
972
|
] }),
|
|
1090
|
-
/* @__PURE__ */ jsx("button", {
|
|
973
|
+
/* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(34,197,94,0.3)", color: "#16a34a", padding: "4px 10px", flexShrink: 0 }, onClick: single.reset, children: "Enviar outro" })
|
|
1091
974
|
] }),
|
|
1092
|
-
single.state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", {
|
|
975
|
+
single.state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--error", style: { gap: 12, padding: "14px 16px" }, children: [
|
|
1093
976
|
/* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
|
|
1094
977
|
/* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
1095
|
-
/* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13
|
|
1096
|
-
/* @__PURE__ */ jsx("div", { style: { fontSize: 12,
|
|
978
|
+
/* @__PURE__ */ jsx("div", { className: "silo-text-error", style: { fontWeight: 700, fontSize: 13 }, children: "N\xE3o foi poss\xEDvel enviar o arquivo" }),
|
|
979
|
+
/* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: single.state.error.message })
|
|
1097
980
|
] }),
|
|
1098
|
-
/* @__PURE__ */ jsx("button", {
|
|
981
|
+
/* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(239,68,68,0.3)", color: "#ef4444", padding: "4px 10px", flexShrink: 0 }, onClick: single.reset, children: "Tentar novamente" })
|
|
1099
982
|
] })
|
|
1100
983
|
] });
|
|
1101
984
|
}
|