@geekapps/silo-elements-nextjs 0.2.35 → 0.2.37
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 +131 -182
- package/dist/FileUploader.js.map +1 -1
- package/dist/ImageUploader.js +63 -104
- package/dist/ImageUploader.js.map +1 -1
- package/dist/MediaUploader.js +271 -341
- package/dist/MediaUploader.js.map +1 -1
- package/dist/VideoUploader.js +91 -127
- package/dist/VideoUploader.js.map +1 -1
- package/dist/components/DropZone.js +8 -10
- package/dist/components/DropZone.js.map +1 -1
- package/dist/components/ProgressBar.js +4 -16
- package/dist/components/ProgressBar.js.map +1 -1
- package/dist/index.d.ts +1 -4
- package/dist/index.js +444 -627
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +6 -6
- package/styles.css +2 -0
package/dist/FileUploader.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
|
+
"border-2 border-dashed border-slate-200 rounded-xl bg-slate-50 text-slate-900 cursor-pointer outline-none transition-colors duration-150",
|
|
93
|
+
dragging ? "border-indigo-500 bg-slate-100" : "hover:border-indigo-500 hover:bg-slate-100",
|
|
94
|
+
disabled ? "opacity-50 cursor-not-allowed" : "",
|
|
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();
|
|
@@ -122,7 +120,7 @@ function DropZone({
|
|
|
122
120
|
type: "file",
|
|
123
121
|
accept,
|
|
124
122
|
multiple,
|
|
125
|
-
|
|
123
|
+
className: "hidden",
|
|
126
124
|
onChange: handleChange,
|
|
127
125
|
disabled
|
|
128
126
|
}
|
|
@@ -136,14 +134,8 @@ function ProgressBar({ progress, className = "", style }) {
|
|
|
136
134
|
return /* @__PURE__ */ jsx(
|
|
137
135
|
"div",
|
|
138
136
|
{
|
|
139
|
-
className: `
|
|
140
|
-
style
|
|
141
|
-
height: "6px",
|
|
142
|
-
borderRadius: "3px",
|
|
143
|
-
backgroundColor: "rgba(99,102,241,0.15)",
|
|
144
|
-
overflow: "hidden",
|
|
145
|
-
...style
|
|
146
|
-
},
|
|
137
|
+
className: `h-1 rounded-full bg-slate-200 overflow-hidden${className ? ` ${className}` : ""}`,
|
|
138
|
+
style,
|
|
147
139
|
role: "progressbar",
|
|
148
140
|
"aria-valuenow": progress,
|
|
149
141
|
"aria-valuemin": 0,
|
|
@@ -151,14 +143,8 @@ function ProgressBar({ progress, className = "", style }) {
|
|
|
151
143
|
children: /* @__PURE__ */ jsx(
|
|
152
144
|
"div",
|
|
153
145
|
{
|
|
154
|
-
className: "
|
|
155
|
-
style: {
|
|
156
|
-
height: "100%",
|
|
157
|
-
width: `${progress}%`,
|
|
158
|
-
backgroundColor: "var(--silo-accent, #6366f1)",
|
|
159
|
-
borderRadius: "3px",
|
|
160
|
-
transition: "width 0.2s ease"
|
|
161
|
-
}
|
|
146
|
+
className: "h-full rounded-full bg-indigo-500 transition-[width] duration-200 ease-linear",
|
|
147
|
+
style: { width: `${progress}%` }
|
|
162
148
|
}
|
|
163
149
|
)
|
|
164
150
|
}
|
|
@@ -173,60 +159,38 @@ var FORMATS = [
|
|
|
173
159
|
function ImageOptions({ value, onChange, style }) {
|
|
174
160
|
const fmt = value.format ?? "webp";
|
|
175
161
|
const optimize = value.optimize ?? true;
|
|
176
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
162
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5", style, children: [
|
|
177
163
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
178
|
-
/* @__PURE__ */ jsx("div", {
|
|
179
|
-
/* @__PURE__ */ jsx("div", {
|
|
164
|
+
/* @__PURE__ */ jsx("div", { className: "text-[11px] font-bold text-slate-500 uppercase tracking-[0.05em] mb-1.5", children: "Formato de sa\xEDda" }),
|
|
165
|
+
/* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap", children: FORMATS.map((f) => /* @__PURE__ */ jsx(
|
|
180
166
|
"button",
|
|
181
167
|
{
|
|
182
168
|
type: "button",
|
|
183
169
|
onClick: () => onChange({ ...value, format: f.value }),
|
|
184
170
|
title: f.hint,
|
|
185
|
-
|
|
186
|
-
padding: "4px 12px",
|
|
187
|
-
borderRadius: 6,
|
|
188
|
-
border: `1px solid ${fmt === f.value ? "var(--silo-accent, #6366f1)" : "var(--silo-border, #e2e8f0)"}`,
|
|
189
|
-
background: fmt === f.value ? "var(--silo-accent, #6366f1)" : "transparent",
|
|
190
|
-
color: fmt === f.value ? "#fff" : "var(--silo-text, #0f172a)",
|
|
191
|
-
fontSize: 12,
|
|
192
|
-
fontWeight: 600,
|
|
193
|
-
cursor: "pointer"
|
|
194
|
-
},
|
|
171
|
+
className: `py-1 px-3 rounded-md text-xs font-semibold cursor-pointer transition-colors border ${fmt === f.value ? "border-indigo-500 bg-indigo-500 text-white" : "border-slate-200 bg-transparent text-slate-900 hover:bg-slate-100"}`,
|
|
195
172
|
children: f.label
|
|
196
173
|
},
|
|
197
174
|
f.value
|
|
198
175
|
)) })
|
|
199
176
|
] }),
|
|
200
|
-
/* @__PURE__ */ jsxs("label", {
|
|
177
|
+
/* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer select-none", children: [
|
|
201
178
|
/* @__PURE__ */ jsx(
|
|
202
179
|
"span",
|
|
203
180
|
{
|
|
204
181
|
onClick: () => onChange({ ...value, optimize: !optimize }),
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
cursor: "pointer"
|
|
214
|
-
},
|
|
215
|
-
children: /* @__PURE__ */ jsx("span", { style: {
|
|
216
|
-
position: "absolute",
|
|
217
|
-
top: 2,
|
|
218
|
-
left: optimize ? 18 : 2,
|
|
219
|
-
width: 16,
|
|
220
|
-
height: 16,
|
|
221
|
-
borderRadius: "50%",
|
|
222
|
-
background: "#fff",
|
|
223
|
-
transition: "left 0.15s",
|
|
224
|
-
boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
|
|
225
|
-
} })
|
|
182
|
+
className: `relative w-9 h-5 rounded-full shrink-0 cursor-pointer transition-colors duration-150 ${optimize ? "bg-indigo-500" : "bg-slate-200"}`,
|
|
183
|
+
children: /* @__PURE__ */ jsx(
|
|
184
|
+
"span",
|
|
185
|
+
{
|
|
186
|
+
className: "absolute top-0.5 w-4 h-4 rounded-full bg-white shadow-sm transition-[left] duration-150",
|
|
187
|
+
style: { left: optimize ? "18px" : "2px" }
|
|
188
|
+
}
|
|
189
|
+
)
|
|
226
190
|
}
|
|
227
191
|
),
|
|
228
|
-
/* @__PURE__ */ jsx("span", {
|
|
229
|
-
/* @__PURE__ */ jsx("span", {
|
|
192
|
+
/* @__PURE__ */ jsx("span", { className: "text-xs text-slate-900 font-medium", children: "Otimizar tamanho" }),
|
|
193
|
+
/* @__PURE__ */ jsx("span", { className: "text-[11px] text-slate-400", children: optimize ? "Qualidade 85 \u2014 menor tamanho" : "Qualidade m\xE1xima" })
|
|
230
194
|
] })
|
|
231
195
|
] });
|
|
232
196
|
}
|
|
@@ -245,6 +209,27 @@ var RESOLUTION_LABELS = {
|
|
|
245
209
|
"1440": "1440p",
|
|
246
210
|
"2160": "4K"
|
|
247
211
|
};
|
|
212
|
+
function optionBtnCls(active) {
|
|
213
|
+
return `py-1 px-2.5 rounded-md text-xs font-semibold cursor-pointer transition-colors border ${active ? "border-indigo-500 bg-indigo-500 text-white" : "border-slate-200 bg-transparent text-slate-900 hover:bg-slate-100"}`;
|
|
214
|
+
}
|
|
215
|
+
function Toggle({ checked, onToggle, label }) {
|
|
216
|
+
return /* @__PURE__ */ jsxs("label", { className: "inline-flex items-center gap-1.5 cursor-pointer select-none text-xs text-slate-900 font-medium", onClick: onToggle, children: [
|
|
217
|
+
/* @__PURE__ */ jsx(
|
|
218
|
+
"span",
|
|
219
|
+
{
|
|
220
|
+
className: `relative inline-block w-8 h-[18px] rounded-full shrink-0 cursor-pointer transition-colors duration-150 ${checked ? "bg-indigo-500" : "bg-slate-200"}`,
|
|
221
|
+
children: /* @__PURE__ */ jsx(
|
|
222
|
+
"span",
|
|
223
|
+
{
|
|
224
|
+
className: "absolute top-0.5 w-3.5 h-3.5 rounded-full bg-white shadow-sm transition-[left] duration-150",
|
|
225
|
+
style: { left: checked ? "16px" : "2px" }
|
|
226
|
+
}
|
|
227
|
+
)
|
|
228
|
+
}
|
|
229
|
+
),
|
|
230
|
+
label
|
|
231
|
+
] });
|
|
232
|
+
}
|
|
248
233
|
function VideoOptions({ value, onChange, style }) {
|
|
249
234
|
const codec = value.codec ?? "h264";
|
|
250
235
|
const transcoding = value.transcoding ?? "auto";
|
|
@@ -261,76 +246,31 @@ function VideoOptions({ value, onChange, style }) {
|
|
|
261
246
|
function toggleFeature(key) {
|
|
262
247
|
onChange({ ...value, [key]: !value[key] });
|
|
263
248
|
}
|
|
264
|
-
|
|
265
|
-
padding: "4px 10px",
|
|
266
|
-
borderRadius: 6,
|
|
267
|
-
border: `1px solid ${active ? "var(--silo-accent, #6366f1)" : "var(--silo-border, #e2e8f0)"}`,
|
|
268
|
-
background: active ? "var(--silo-accent, #6366f1)" : "transparent",
|
|
269
|
-
color: active ? "#fff" : "var(--silo-text, #0f172a)",
|
|
270
|
-
fontSize: 12,
|
|
271
|
-
fontWeight: 600,
|
|
272
|
-
cursor: "pointer"
|
|
273
|
-
});
|
|
274
|
-
const toggle = (on) => ({
|
|
275
|
-
display: "inline-flex",
|
|
276
|
-
alignItems: "center",
|
|
277
|
-
gap: 6,
|
|
278
|
-
cursor: "pointer",
|
|
279
|
-
userSelect: "none",
|
|
280
|
-
fontSize: 12,
|
|
281
|
-
color: "var(--silo-text, #0f172a)",
|
|
282
|
-
fontWeight: 500
|
|
283
|
-
});
|
|
284
|
-
function Toggle({ checked, onToggle, label }) {
|
|
285
|
-
return /* @__PURE__ */ jsxs("label", { style: toggle(), onClick: onToggle, children: [
|
|
286
|
-
/* @__PURE__ */ jsx("span", { style: {
|
|
287
|
-
width: 32,
|
|
288
|
-
height: 18,
|
|
289
|
-
borderRadius: 9,
|
|
290
|
-
flexShrink: 0,
|
|
291
|
-
background: checked ? "var(--silo-accent, #6366f1)" : "var(--silo-border, #e2e8f0)",
|
|
292
|
-
position: "relative",
|
|
293
|
-
transition: "background 0.15s",
|
|
294
|
-
cursor: "pointer"
|
|
295
|
-
}, children: /* @__PURE__ */ jsx("span", { style: {
|
|
296
|
-
position: "absolute",
|
|
297
|
-
top: 2,
|
|
298
|
-
left: checked ? 16 : 2,
|
|
299
|
-
width: 14,
|
|
300
|
-
height: 14,
|
|
301
|
-
borderRadius: "50%",
|
|
302
|
-
background: "#fff",
|
|
303
|
-
transition: "left 0.15s",
|
|
304
|
-
boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
|
|
305
|
-
} }) }),
|
|
306
|
-
label
|
|
307
|
-
] });
|
|
308
|
-
}
|
|
309
|
-
return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, ...style }, children: [
|
|
249
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", style, children: [
|
|
310
250
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
311
|
-
/* @__PURE__ */ jsx("div", {
|
|
312
|
-
/* @__PURE__ */ jsx("div", {
|
|
251
|
+
/* @__PURE__ */ jsx("div", { className: "text-[11px] font-bold text-slate-500 uppercase tracking-[0.05em] mb-1.5", children: "Codec" }),
|
|
252
|
+
/* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap", children: CODECS.map((c) => /* @__PURE__ */ jsx(
|
|
313
253
|
"button",
|
|
314
254
|
{
|
|
315
255
|
type: "button",
|
|
316
256
|
title: c.hint,
|
|
317
257
|
onClick: () => onChange({ ...value, codec: c.value }),
|
|
318
|
-
|
|
258
|
+
className: optionBtnCls(codec === c.value),
|
|
319
259
|
children: c.label
|
|
320
260
|
},
|
|
321
261
|
c.value
|
|
322
262
|
)) })
|
|
323
263
|
] }),
|
|
324
264
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
325
|
-
/* @__PURE__ */ jsx("div", {
|
|
326
|
-
/* @__PURE__ */ jsxs("div", {
|
|
327
|
-
/* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange({ ...value, transcoding: "auto" }),
|
|
265
|
+
/* @__PURE__ */ jsx("div", { className: "text-[11px] font-bold text-slate-500 uppercase tracking-[0.05em] mb-1.5", children: "Resolu\xE7\xF5es" }),
|
|
266
|
+
/* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 flex-wrap", children: [
|
|
267
|
+
/* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange({ ...value, transcoding: "auto" }), className: optionBtnCls(isAuto), children: "Auto" }),
|
|
328
268
|
RESOLUTIONS.map((r) => /* @__PURE__ */ jsx(
|
|
329
269
|
"button",
|
|
330
270
|
{
|
|
331
271
|
type: "button",
|
|
332
272
|
onClick: () => toggleRes(r),
|
|
333
|
-
|
|
273
|
+
className: optionBtnCls(!isAuto && selectedRes.includes(r)),
|
|
334
274
|
children: RESOLUTION_LABELS[r]
|
|
335
275
|
},
|
|
336
276
|
r
|
|
@@ -338,8 +278,8 @@ function VideoOptions({ value, onChange, style }) {
|
|
|
338
278
|
] })
|
|
339
279
|
] }),
|
|
340
280
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
341
|
-
/* @__PURE__ */ jsx("div", {
|
|
342
|
-
/* @__PURE__ */ jsxs("div", {
|
|
281
|
+
/* @__PURE__ */ jsx("div", { className: "text-[11px] font-bold text-slate-500 uppercase tracking-[0.05em] mb-2", children: "Recursos" }),
|
|
282
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
|
|
343
283
|
/* @__PURE__ */ jsx(Toggle, { checked: value.thumbnails ?? true, onToggle: () => toggleFeature("thumbnails"), label: "Gerar thumbnails" }),
|
|
344
284
|
/* @__PURE__ */ jsx(Toggle, { checked: value.storyboard ?? false, onToggle: () => toggleFeature("storyboard"), label: "Gerar storyboard" }),
|
|
345
285
|
/* @__PURE__ */ jsx(Toggle, { checked: value.autoCaptions ?? false, onToggle: () => toggleFeature("autoCaptions"), label: "Legendas autom\xE1ticas (IA)" }),
|
|
@@ -416,11 +356,6 @@ function FileUploader({
|
|
|
416
356
|
const vars = themeToVars(t);
|
|
417
357
|
const containerStyle = {
|
|
418
358
|
...vars,
|
|
419
|
-
display: "flex",
|
|
420
|
-
flexDirection: "column",
|
|
421
|
-
gap: "12px",
|
|
422
|
-
width: "100%",
|
|
423
|
-
fontFamily: "var(--silo-font)",
|
|
424
359
|
...style
|
|
425
360
|
};
|
|
426
361
|
const single = useMultipartUpload(bucket);
|
|
@@ -497,9 +432,9 @@ function FileUploader({
|
|
|
497
432
|
const isBatchUploading = batch.state.status === "uploading" || batch.state.status === "preparing";
|
|
498
433
|
const isUploading = isSingleUploading || isBatchUploading;
|
|
499
434
|
const singleProgress = single.state.status === "uploading" ? single.state.progress : single.state.status === "completing" ? 99 : 0;
|
|
500
|
-
if (single.state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(single.state.error, single.reset) });
|
|
501
|
-
if (single.state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(single.state.result) });
|
|
502
|
-
return /* @__PURE__ */ jsxs("div", { className: `
|
|
435
|
+
if (single.state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 w-full", style: containerStyle, children: renderError(single.state.error, single.reset) });
|
|
436
|
+
if (single.state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 w-full", style: containerStyle, children: renderSuccess(single.state.result) });
|
|
437
|
+
return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-3 w-full${className ? ` ${className}` : ""}`, style: containerStyle, children: [
|
|
503
438
|
!isBatch && !staged && /* @__PURE__ */ jsx(
|
|
504
439
|
DropZone,
|
|
505
440
|
{
|
|
@@ -511,12 +446,12 @@ function FileUploader({
|
|
|
511
446
|
disabled: disabled || isUploading,
|
|
512
447
|
onFiles: handleFiles,
|
|
513
448
|
style: { padding: "28px 24px", textAlign: "center" },
|
|
514
|
-
children: /* @__PURE__ */ jsxs("div", {
|
|
515
|
-
renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor",
|
|
449
|
+
children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
|
|
450
|
+
renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", className: "text-slate-400 opacity-50", 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" }) }),
|
|
516
451
|
children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
517
|
-
/* @__PURE__ */ jsx("span", {
|
|
518
|
-
/* @__PURE__ */ jsx("span", {
|
|
519
|
-
maxSize && /* @__PURE__ */ jsxs("span", {
|
|
452
|
+
/* @__PURE__ */ jsx("span", { className: "text-slate-900 font-bold text-[15px]", children: multiple ? "Arraste seus arquivos aqui" : "Arraste seu arquivo aqui" }),
|
|
453
|
+
/* @__PURE__ */ jsx("span", { className: "text-slate-500 text-[13px]", children: "ou clique para escolher do seu dispositivo" }),
|
|
454
|
+
maxSize && /* @__PURE__ */ jsxs("span", { className: "text-slate-400 text-[12px]", children: [
|
|
520
455
|
"Tamanho m\xE1ximo: ",
|
|
521
456
|
formatBytes(maxSize)
|
|
522
457
|
] })
|
|
@@ -524,11 +459,11 @@ function FileUploader({
|
|
|
524
459
|
] })
|
|
525
460
|
}
|
|
526
461
|
),
|
|
527
|
-
staged && /* @__PURE__ */ jsxs("div", {
|
|
528
|
-
/* @__PURE__ */ jsx("div", {
|
|
529
|
-
staged.map((f, i) => /* @__PURE__ */ jsxs("div", {
|
|
530
|
-
/* @__PURE__ */ jsx("span", {
|
|
531
|
-
/* @__PURE__ */ jsxs("div", {
|
|
462
|
+
staged && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
|
|
463
|
+
/* @__PURE__ */ jsx("div", { className: "text-slate-500 text-[13px] font-semibold mb-0.5", children: staged.length === 1 ? "1 arquivo selecionado" : `${staged.length} arquivos selecionados` }),
|
|
464
|
+
staged.map((f, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 px-3 py-2.5 bg-slate-50 rounded-xl border border-slate-200", children: [
|
|
465
|
+
/* @__PURE__ */ jsx("span", { className: "text-xl shrink-0", children: getFileIcon(f.type) }),
|
|
466
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
|
|
532
467
|
editingIndex === i ? /* @__PURE__ */ jsx(
|
|
533
468
|
"input",
|
|
534
469
|
{
|
|
@@ -546,28 +481,28 @@ function FileUploader({
|
|
|
546
481
|
}
|
|
547
482
|
if (e.key === "Escape") setEditingIndex(null);
|
|
548
483
|
},
|
|
549
|
-
|
|
484
|
+
className: "w-full text-[13px] font-medium border border-indigo-500 rounded-md py-0.5 px-2 outline-none bg-slate-50 text-slate-900"
|
|
550
485
|
}
|
|
551
486
|
) : /* @__PURE__ */ jsxs(
|
|
552
487
|
"div",
|
|
553
488
|
{
|
|
554
|
-
|
|
489
|
+
className: `text-[13px] font-semibold text-slate-900 overflow-hidden text-ellipsis whitespace-nowrap ${allowRename ? "cursor-text" : "cursor-default"}`,
|
|
555
490
|
onClick: () => allowRename && setEditingIndex(i),
|
|
556
491
|
title: allowRename ? "Clique para renomear" : void 0,
|
|
557
492
|
children: [
|
|
558
493
|
effectiveName(i, staged),
|
|
559
|
-
renames.has(i) && /* @__PURE__ */ jsx("span", {
|
|
494
|
+
renames.has(i) && /* @__PURE__ */ jsx("span", { className: "text-indigo-500 ml-1.5 text-[10px] font-bold", children: "renomeado" })
|
|
560
495
|
]
|
|
561
496
|
}
|
|
562
497
|
),
|
|
563
|
-
/* @__PURE__ */ jsx("div", {
|
|
498
|
+
/* @__PURE__ */ jsx("div", { className: "text-[11px] text-slate-400 mt-0.5", children: formatBytes(f.size) })
|
|
564
499
|
] }),
|
|
565
500
|
allowRename && /* @__PURE__ */ jsx(
|
|
566
501
|
"button",
|
|
567
502
|
{
|
|
568
503
|
onClick: () => setEditingIndex(i),
|
|
569
504
|
title: "Renomear",
|
|
570
|
-
|
|
505
|
+
className: "text-slate-400 bg-none border-none cursor-pointer text-sm px-1 shrink-0 hover:text-slate-600",
|
|
571
506
|
children: "\u270F\uFE0F"
|
|
572
507
|
}
|
|
573
508
|
),
|
|
@@ -579,108 +514,122 @@ function FileUploader({
|
|
|
579
514
|
if (next.length === 0) clearStaging();
|
|
580
515
|
else setStaged(next);
|
|
581
516
|
},
|
|
582
|
-
|
|
517
|
+
className: "text-slate-400 bg-none border-none cursor-pointer text-lg px-1 leading-none shrink-0 hover:text-slate-600",
|
|
583
518
|
children: "\xD7"
|
|
584
519
|
}
|
|
585
520
|
)
|
|
586
521
|
] }, i)),
|
|
587
|
-
showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */ jsxs("div", {
|
|
588
|
-
/* @__PURE__ */ jsx("div", {
|
|
522
|
+
showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */ jsxs("div", { className: "border border-slate-200 rounded-xl overflow-hidden", children: [
|
|
523
|
+
/* @__PURE__ */ jsx("div", { className: "px-3.5 py-2 bg-slate-100 text-[12px] font-bold text-slate-500 tracking-[0.04em]", children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
|
|
589
524
|
/* @__PURE__ */ jsx(ImageOptions, { value: imageOpts, onChange: setImageOpts, style: { padding: "12px 14px" } })
|
|
590
525
|
] }),
|
|
591
|
-
showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__PURE__ */ jsxs("div", {
|
|
592
|
-
/* @__PURE__ */ jsx("div", {
|
|
526
|
+
showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__PURE__ */ jsxs("div", { className: "border border-slate-200 rounded-xl overflow-hidden", children: [
|
|
527
|
+
/* @__PURE__ */ jsx("div", { className: "px-3.5 py-2 bg-slate-100 text-[12px] font-bold text-slate-500 tracking-[0.04em]", children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
|
|
593
528
|
/* @__PURE__ */ jsx(VideoOptions, { value: videoOpts, onChange: setVideoOpts, style: { padding: "12px 14px" } })
|
|
594
529
|
] }),
|
|
595
|
-
/* @__PURE__ */ jsxs("div", {
|
|
530
|
+
/* @__PURE__ */ jsxs("div", { className: "flex gap-2 mt-1", children: [
|
|
596
531
|
/* @__PURE__ */ jsx(
|
|
597
532
|
"button",
|
|
598
533
|
{
|
|
534
|
+
className: "inline-flex items-center justify-center gap-1.5 text-sm font-bold py-2.5 px-4 rounded-xl border border-slate-200 bg-transparent text-slate-900 cursor-pointer transition-colors hover:bg-slate-100",
|
|
599
535
|
onClick: clearStaging,
|
|
600
|
-
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" },
|
|
601
536
|
children: "Cancelar"
|
|
602
537
|
}
|
|
603
538
|
),
|
|
604
539
|
/* @__PURE__ */ jsx(
|
|
605
540
|
"button",
|
|
606
541
|
{
|
|
542
|
+
className: "flex-1 inline-flex items-center justify-center gap-1.5 text-sm font-bold py-2.5 px-4 rounded-xl border-transparent bg-indigo-500 text-white cursor-pointer transition-opacity hover:opacity-90",
|
|
607
543
|
onClick: handleConfirmUpload,
|
|
608
|
-
style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
|
|
609
544
|
children: staged.length > 1 ? `Enviar ${staged.length} arquivos` : "Enviar arquivo"
|
|
610
545
|
}
|
|
611
546
|
)
|
|
612
547
|
] })
|
|
613
548
|
] }),
|
|
614
|
-
isSingleUploading && !isBatch && (renderProgress ? renderProgress(singleProgress) : /* @__PURE__ */ jsxs("div", {
|
|
615
|
-
/* @__PURE__ */ jsxs("div", {
|
|
616
|
-
/* @__PURE__ */ jsx("span", {
|
|
617
|
-
/* @__PURE__ */ jsxs("span", {
|
|
549
|
+
isSingleUploading && !isBatch && (renderProgress ? renderProgress(singleProgress) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 px-3 py-4 bg-slate-50 rounded-xl border border-slate-200", children: [
|
|
550
|
+
/* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
|
|
551
|
+
/* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-slate-900", children: uploadLabel(single.state.status, singleProgress) }),
|
|
552
|
+
/* @__PURE__ */ jsxs("span", { className: "text-[13px] font-bold text-indigo-500", children: [
|
|
618
553
|
singleProgress,
|
|
619
554
|
"%"
|
|
620
555
|
] })
|
|
621
556
|
] }),
|
|
622
557
|
/* @__PURE__ */ jsx(ProgressBar, { progress: singleProgress })
|
|
623
558
|
] })),
|
|
624
|
-
isBatch && /* @__PURE__ */ jsxs("div", {
|
|
559
|
+
isBatch && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
|
|
625
560
|
batch.state.files.map((f, i) => {
|
|
626
561
|
const st = f.status;
|
|
627
562
|
const p = st.status === "uploading" ? st.progress : st.status === "paused" ? st.progress : st.status === "done" ? 100 : st.status === "completing" ? 99 : 0;
|
|
628
563
|
const isPaused = st.status === "paused";
|
|
629
564
|
const isDone = st.status === "done";
|
|
630
565
|
const isErr = st.status === "error";
|
|
631
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
632
|
-
/* @__PURE__ */ jsxs("div", {
|
|
633
|
-
/* @__PURE__ */ jsx("span", {
|
|
634
|
-
/* @__PURE__ */ jsxs("div", {
|
|
635
|
-
/* @__PURE__ */ jsx("div", {
|
|
636
|
-
/* @__PURE__ */ jsx("div", {
|
|
566
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-stretch gap-2 px-3.5 py-3 bg-slate-50 rounded-xl border border-slate-200", children: [
|
|
567
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
|
|
568
|
+
/* @__PURE__ */ jsx("span", { className: "text-lg shrink-0", children: getFileIcon(f.file.type) }),
|
|
569
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
|
|
570
|
+
/* @__PURE__ */ jsx("div", { className: "text-[13px] font-semibold text-slate-900 overflow-hidden text-ellipsis whitespace-nowrap", children: f.file.name }),
|
|
571
|
+
/* @__PURE__ */ jsx("div", { className: "text-[11px] text-slate-400", children: formatBytes(f.file.size) })
|
|
637
572
|
] }),
|
|
638
|
-
isDone && /* @__PURE__ */ jsx("span", {
|
|
639
|
-
isErr && /* @__PURE__ */ jsx("span", {
|
|
640
|
-
!isDone && !isErr && /* @__PURE__ */ jsx("span", {
|
|
641
|
-
!isDone && !isErr && f.fileId && (isPaused ? /* @__PURE__ */ jsx("button", {
|
|
573
|
+
isDone && /* @__PURE__ */ jsx("span", { className: "text-lg shrink-0", children: "\u2705" }),
|
|
574
|
+
isErr && /* @__PURE__ */ jsx("span", { className: "text-[12px] font-semibold text-red-500 shrink-0", children: "Erro no envio" }),
|
|
575
|
+
!isDone && !isErr && /* @__PURE__ */ jsx("span", { className: `text-[12px] font-bold shrink-0 ${isPaused ? "text-slate-400" : "text-indigo-500"}`, children: isPaused ? "Pausado" : `${p}%` }),
|
|
576
|
+
!isDone && !isErr && f.fileId && (isPaused ? /* @__PURE__ */ jsx("button", { className: "inline-flex items-center justify-center gap-1.5 text-[11px] font-semibold py-0.5 px-2.5 rounded-lg border-transparent bg-emerald-500 text-white cursor-pointer hover:opacity-90", onClick: () => batch.resumeFile(f.fileId), children: "Retomar" }) : st.status === "uploading" ? /* @__PURE__ */ jsx("button", { className: "inline-flex items-center justify-center gap-1.5 text-[11px] font-semibold py-0.5 px-2.5 rounded-lg border border-slate-200 bg-transparent text-slate-900 cursor-pointer hover:bg-slate-100", onClick: () => batch.pauseFile(f.fileId), children: "Pausar" }) : null)
|
|
642
577
|
] }),
|
|
643
578
|
!isDone && !isErr && /* @__PURE__ */ jsx(ProgressBar, { progress: p })
|
|
644
579
|
] }, i);
|
|
645
580
|
}),
|
|
646
|
-
/* @__PURE__ */ jsxs("div", {
|
|
581
|
+
/* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
|
|
647
582
|
batch.state.status !== "done" && /* @__PURE__ */ jsx(
|
|
648
583
|
"button",
|
|
649
584
|
{
|
|
585
|
+
className: `flex-1 inline-flex items-center justify-center gap-1.5 text-sm font-bold py-2.5 px-4 rounded-xl border-transparent text-white cursor-pointer hover:opacity-90 ${isBatchUploading ? "bg-amber-500" : "bg-emerald-500"}`,
|
|
650
586
|
onClick: isBatchUploading ? batch.pauseAll : batch.resumeAll,
|
|
651
|
-
style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: isBatchUploading ? "#f59e0b" : "#10b981", color: "#fff", fontSize: 13, fontWeight: 700, cursor: "pointer" },
|
|
652
587
|
children: isBatchUploading ? "\u23F8 Pausar tudo" : "\u25B6 Retomar tudo"
|
|
653
588
|
}
|
|
654
589
|
),
|
|
655
590
|
/* @__PURE__ */ jsx(
|
|
656
591
|
"button",
|
|
657
592
|
{
|
|
593
|
+
className: `inline-flex items-center justify-center gap-1.5 text-sm font-bold py-2.5 px-4 rounded-xl border-transparent text-white cursor-pointer hover:opacity-90 ${batch.state.status === "done" ? "bg-indigo-500" : "bg-red-500/90"}`,
|
|
658
594
|
onClick: batch.state.status === "done" ? batch.reset : batch.abortAll,
|
|
659
|
-
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" },
|
|
660
595
|
children: batch.state.status === "done" ? "Enviar mais arquivos" : "Cancelar"
|
|
661
596
|
}
|
|
662
597
|
)
|
|
663
598
|
] }),
|
|
664
|
-
batch.state.status === "done" && /* @__PURE__ */ jsxs("div", {
|
|
665
|
-
/* @__PURE__ */ jsx("span", {
|
|
666
|
-
/* @__PURE__ */ jsx("span", {
|
|
599
|
+
batch.state.status === "done" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 px-3 py-2.5 bg-green-500/[0.08] rounded-xl border border-green-500/20", children: [
|
|
600
|
+
/* @__PURE__ */ jsx("span", { className: "text-xl", children: "\u{1F389}" }),
|
|
601
|
+
/* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-green-700", children: batch.state.files.length === 1 ? "Arquivo enviado com sucesso!" : `${batch.state.files.length} arquivos enviados com sucesso!` })
|
|
667
602
|
] })
|
|
668
603
|
] }),
|
|
669
|
-
single.state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", {
|
|
670
|
-
/* @__PURE__ */ jsx("span", {
|
|
671
|
-
/* @__PURE__ */ jsxs("div", {
|
|
672
|
-
/* @__PURE__ */ jsx("div", {
|
|
673
|
-
/* @__PURE__ */ jsx("div", {
|
|
604
|
+
single.state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3.5 bg-green-500/[0.08] rounded-xl border border-green-500/20", children: [
|
|
605
|
+
/* @__PURE__ */ jsx("span", { className: "text-2xl", children: "\u2705" }),
|
|
606
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
|
|
607
|
+
/* @__PURE__ */ jsx("div", { className: "font-bold text-sm text-green-700", children: "Arquivo enviado com sucesso!" }),
|
|
608
|
+
/* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: formatBytes(single.state.result.size) })
|
|
674
609
|
] }),
|
|
675
|
-
/* @__PURE__ */ jsx(
|
|
610
|
+
/* @__PURE__ */ jsx(
|
|
611
|
+
"button",
|
|
612
|
+
{
|
|
613
|
+
className: "inline-flex items-center justify-center text-xs font-semibold py-1 px-2.5 rounded-lg border border-green-500/30 text-green-700 bg-transparent cursor-pointer hover:bg-green-500/10 shrink-0",
|
|
614
|
+
onClick: single.reset,
|
|
615
|
+
children: "Enviar outro"
|
|
616
|
+
}
|
|
617
|
+
)
|
|
676
618
|
] }),
|
|
677
|
-
single.state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", {
|
|
678
|
-
/* @__PURE__ */ jsx("span", {
|
|
679
|
-
/* @__PURE__ */ jsxs("div", {
|
|
680
|
-
/* @__PURE__ */ jsx("div", {
|
|
681
|
-
/* @__PURE__ */ jsx("div", {
|
|
619
|
+
single.state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3.5 bg-red-500/[0.07] rounded-xl border border-red-500/20", children: [
|
|
620
|
+
/* @__PURE__ */ jsx("span", { className: "text-[22px]", children: "\u26A0\uFE0F" }),
|
|
621
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
|
|
622
|
+
/* @__PURE__ */ jsx("div", { className: "font-bold text-[13px] text-red-500", children: "N\xE3o foi poss\xEDvel enviar o arquivo" }),
|
|
623
|
+
/* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: single.state.error.message })
|
|
682
624
|
] }),
|
|
683
|
-
/* @__PURE__ */ jsx(
|
|
625
|
+
/* @__PURE__ */ jsx(
|
|
626
|
+
"button",
|
|
627
|
+
{
|
|
628
|
+
className: "inline-flex items-center justify-center text-xs font-semibold py-1 px-2.5 rounded-lg border border-red-500/30 text-red-500 bg-transparent cursor-pointer hover:bg-red-500/10 shrink-0",
|
|
629
|
+
onClick: single.reset,
|
|
630
|
+
children: "Tentar novamente"
|
|
631
|
+
}
|
|
632
|
+
)
|
|
684
633
|
] })
|
|
685
634
|
] });
|
|
686
635
|
}
|