glitchgrab 1.29.1 → 1.30.0
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/index.js +155 -23
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +155 -23
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1011,6 +1011,7 @@ function ReportDialog({
|
|
|
1011
1011
|
const [isSubmitting, setIsSubmitting] = (0, import_react2.useState)(false);
|
|
1012
1012
|
const [submitted, setSubmitted] = (0, import_react2.useState)(false);
|
|
1013
1013
|
const [screenshots, setScreenshots] = (0, import_react2.useState)([]);
|
|
1014
|
+
const [attachments, setAttachments] = (0, import_react2.useState)([]);
|
|
1014
1015
|
const [previewIndex, setPreviewIndex] = (0, import_react2.useState)(null);
|
|
1015
1016
|
const [annotatingIndex, setAnnotatingIndex] = (0, import_react2.useState)(null);
|
|
1016
1017
|
const fileInputRef = (0, import_react2.useRef)(null);
|
|
@@ -1055,14 +1056,26 @@ function ReportDialog({
|
|
|
1055
1056
|
const handleFileUpload = (e) => {
|
|
1056
1057
|
const files = e.target.files;
|
|
1057
1058
|
if (!files || files.length === 0) return;
|
|
1058
|
-
Array.from(files)
|
|
1059
|
+
addFiles(Array.from(files));
|
|
1060
|
+
e.target.value = "";
|
|
1061
|
+
};
|
|
1062
|
+
const addFiles = (files) => {
|
|
1063
|
+
files.forEach((file) => {
|
|
1059
1064
|
const reader = new FileReader();
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1065
|
+
if (file.type.startsWith("image/")) {
|
|
1066
|
+
reader.onload = () => {
|
|
1067
|
+
setScreenshots((prev) => [...prev, reader.result]);
|
|
1068
|
+
};
|
|
1069
|
+
} else {
|
|
1070
|
+
reader.onload = () => {
|
|
1071
|
+
setAttachments((prev) => [
|
|
1072
|
+
...prev,
|
|
1073
|
+
{ name: file.name, size: file.size, dataUrl: reader.result }
|
|
1074
|
+
]);
|
|
1075
|
+
};
|
|
1076
|
+
}
|
|
1063
1077
|
reader.readAsDataURL(file);
|
|
1064
1078
|
});
|
|
1065
|
-
e.target.value = "";
|
|
1066
1079
|
};
|
|
1067
1080
|
const retakeScreenshot = async () => {
|
|
1068
1081
|
setPreviewIndex(null);
|
|
@@ -1368,6 +1381,7 @@ function ReportDialog({
|
|
|
1368
1381
|
setIsSubmitting(true);
|
|
1369
1382
|
const metadata = {};
|
|
1370
1383
|
if (screenshots.length > 0) metadata.screenshots = JSON.stringify(screenshots);
|
|
1384
|
+
if (attachments.length > 0) metadata.attachments = JSON.stringify(attachments);
|
|
1371
1385
|
if (showSeverity && reportType === "BUG") {
|
|
1372
1386
|
metadata.severity = severity;
|
|
1373
1387
|
}
|
|
@@ -1380,6 +1394,7 @@ function ReportDialog({
|
|
|
1380
1394
|
setSubmitted(true);
|
|
1381
1395
|
setDescription("");
|
|
1382
1396
|
setScreenshots([]);
|
|
1397
|
+
setAttachments([]);
|
|
1383
1398
|
setTimeout(() => {
|
|
1384
1399
|
setSubmitted(false);
|
|
1385
1400
|
handleClose();
|
|
@@ -2144,8 +2159,8 @@ function ReportDialog({
|
|
|
2144
2159
|
fontWeight: 500
|
|
2145
2160
|
},
|
|
2146
2161
|
children: [
|
|
2147
|
-
"
|
|
2148
|
-
screenshots.length > 0 ? ` (${screenshots.length})` : ""
|
|
2162
|
+
"Attachments",
|
|
2163
|
+
screenshots.length + attachments.length > 0 ? ` (${screenshots.length + attachments.length})` : ""
|
|
2149
2164
|
]
|
|
2150
2165
|
}
|
|
2151
2166
|
),
|
|
@@ -2283,6 +2298,133 @@ function ReportDialog({
|
|
|
2283
2298
|
))
|
|
2284
2299
|
}
|
|
2285
2300
|
),
|
|
2301
|
+
attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
2302
|
+
"div",
|
|
2303
|
+
{
|
|
2304
|
+
style: {
|
|
2305
|
+
display: "flex",
|
|
2306
|
+
flexDirection: "column",
|
|
2307
|
+
gap: "6px",
|
|
2308
|
+
marginBottom: "8px"
|
|
2309
|
+
},
|
|
2310
|
+
children: attachments.map((a, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
2311
|
+
"div",
|
|
2312
|
+
{
|
|
2313
|
+
style: {
|
|
2314
|
+
display: "flex",
|
|
2315
|
+
alignItems: "center",
|
|
2316
|
+
gap: "8px",
|
|
2317
|
+
padding: "6px 8px",
|
|
2318
|
+
borderRadius: "6px",
|
|
2319
|
+
border: `1px solid ${t.border}`
|
|
2320
|
+
},
|
|
2321
|
+
children: [
|
|
2322
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
2323
|
+
"svg",
|
|
2324
|
+
{
|
|
2325
|
+
width: "14",
|
|
2326
|
+
height: "14",
|
|
2327
|
+
viewBox: "0 0 24 24",
|
|
2328
|
+
fill: "none",
|
|
2329
|
+
style: { flexShrink: 0, opacity: 0.6 },
|
|
2330
|
+
children: [
|
|
2331
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
2332
|
+
"path",
|
|
2333
|
+
{
|
|
2334
|
+
d: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z",
|
|
2335
|
+
stroke: t.textMuted,
|
|
2336
|
+
strokeWidth: "1.5",
|
|
2337
|
+
strokeLinecap: "round",
|
|
2338
|
+
strokeLinejoin: "round"
|
|
2339
|
+
}
|
|
2340
|
+
),
|
|
2341
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
2342
|
+
"path",
|
|
2343
|
+
{
|
|
2344
|
+
d: "M14 2v6h6",
|
|
2345
|
+
stroke: t.textMuted,
|
|
2346
|
+
strokeWidth: "1.5",
|
|
2347
|
+
strokeLinecap: "round",
|
|
2348
|
+
strokeLinejoin: "round"
|
|
2349
|
+
}
|
|
2350
|
+
)
|
|
2351
|
+
]
|
|
2352
|
+
}
|
|
2353
|
+
),
|
|
2354
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
2355
|
+
"span",
|
|
2356
|
+
{
|
|
2357
|
+
style: {
|
|
2358
|
+
fontSize: "11px",
|
|
2359
|
+
color: t.text,
|
|
2360
|
+
flex: 1,
|
|
2361
|
+
overflow: "hidden",
|
|
2362
|
+
textOverflow: "ellipsis",
|
|
2363
|
+
whiteSpace: "nowrap"
|
|
2364
|
+
},
|
|
2365
|
+
children: a.name
|
|
2366
|
+
}
|
|
2367
|
+
),
|
|
2368
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
2369
|
+
"span",
|
|
2370
|
+
{
|
|
2371
|
+
style: { fontSize: "10px", color: t.textMuted },
|
|
2372
|
+
children: [
|
|
2373
|
+
(a.size / 1024).toFixed(0),
|
|
2374
|
+
"KB"
|
|
2375
|
+
]
|
|
2376
|
+
}
|
|
2377
|
+
),
|
|
2378
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
2379
|
+
"button",
|
|
2380
|
+
{
|
|
2381
|
+
type: "button",
|
|
2382
|
+
onClick: () => setAttachments(
|
|
2383
|
+
(prev) => prev.filter((_, idx) => idx !== i)
|
|
2384
|
+
),
|
|
2385
|
+
"aria-label": `Remove ${a.name}`,
|
|
2386
|
+
style: {
|
|
2387
|
+
width: "16px",
|
|
2388
|
+
height: "16px",
|
|
2389
|
+
borderRadius: "50%",
|
|
2390
|
+
border: "none",
|
|
2391
|
+
background: "#ef4444",
|
|
2392
|
+
color: "#fff",
|
|
2393
|
+
fontSize: "10px",
|
|
2394
|
+
lineHeight: 1,
|
|
2395
|
+
padding: 0,
|
|
2396
|
+
cursor: "pointer",
|
|
2397
|
+
display: "flex",
|
|
2398
|
+
alignItems: "center",
|
|
2399
|
+
justifyContent: "center",
|
|
2400
|
+
flexShrink: 0
|
|
2401
|
+
},
|
|
2402
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
2403
|
+
"svg",
|
|
2404
|
+
{
|
|
2405
|
+
width: "8",
|
|
2406
|
+
height: "8",
|
|
2407
|
+
viewBox: "0 0 10 10",
|
|
2408
|
+
fill: "none",
|
|
2409
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
2410
|
+
"path",
|
|
2411
|
+
{
|
|
2412
|
+
d: "M1 1L9 9M9 1L1 9",
|
|
2413
|
+
stroke: "currentColor",
|
|
2414
|
+
strokeWidth: "1.5",
|
|
2415
|
+
strokeLinecap: "round"
|
|
2416
|
+
}
|
|
2417
|
+
)
|
|
2418
|
+
}
|
|
2419
|
+
)
|
|
2420
|
+
}
|
|
2421
|
+
)
|
|
2422
|
+
]
|
|
2423
|
+
},
|
|
2424
|
+
i
|
|
2425
|
+
))
|
|
2426
|
+
}
|
|
2427
|
+
),
|
|
2286
2428
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
2287
2429
|
"div",
|
|
2288
2430
|
{
|
|
@@ -2293,17 +2435,7 @@ function ReportDialog({
|
|
|
2293
2435
|
onDrop: (e) => {
|
|
2294
2436
|
e.preventDefault();
|
|
2295
2437
|
setScreenshotDragOver(false);
|
|
2296
|
-
|
|
2297
|
-
e.dataTransfer.files
|
|
2298
|
-
).filter((f) => f.type.startsWith("image/"));
|
|
2299
|
-
files.forEach((file) => {
|
|
2300
|
-
const reader = new FileReader();
|
|
2301
|
-
reader.onload = () => setScreenshots((prev) => [
|
|
2302
|
-
...prev,
|
|
2303
|
-
reader.result
|
|
2304
|
-
]);
|
|
2305
|
-
reader.readAsDataURL(file);
|
|
2306
|
-
});
|
|
2438
|
+
addFiles(Array.from(e.dataTransfer.files));
|
|
2307
2439
|
},
|
|
2308
2440
|
onDragOver: (e) => {
|
|
2309
2441
|
e.preventDefault();
|
|
@@ -2313,13 +2445,13 @@ function ReportDialog({
|
|
|
2313
2445
|
style: {
|
|
2314
2446
|
border: `1.5px dashed ${screenshotDragOver ? t.accent : t.inputBorder}`,
|
|
2315
2447
|
borderRadius: "8px",
|
|
2316
|
-
padding: screenshots.length > 0 ? "8px 12px" : "18px 12px",
|
|
2448
|
+
padding: screenshots.length + attachments.length > 0 ? "8px 12px" : "18px 12px",
|
|
2317
2449
|
textAlign: "center",
|
|
2318
2450
|
cursor: "pointer",
|
|
2319
2451
|
background: screenshotDragOver ? isDark ? "rgba(34,211,238,0.06)" : "rgba(8,145,178,0.04)" : "transparent",
|
|
2320
2452
|
transition: "border-color 0.15s ease, background 0.15s ease"
|
|
2321
2453
|
},
|
|
2322
|
-
children: screenshots.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
2454
|
+
children: screenshots.length + attachments.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
2323
2455
|
"p",
|
|
2324
2456
|
{
|
|
2325
2457
|
style: {
|
|
@@ -2388,7 +2520,7 @@ function ReportDialog({
|
|
|
2388
2520
|
fontWeight: 600,
|
|
2389
2521
|
color: t.text
|
|
2390
2522
|
},
|
|
2391
|
-
children: screenshotDragOver ? "Drop to attach" : "Add screenshots"
|
|
2523
|
+
children: screenshotDragOver ? "Drop to attach" : "Add screenshots or files"
|
|
2392
2524
|
}
|
|
2393
2525
|
),
|
|
2394
2526
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
@@ -2399,7 +2531,7 @@ function ReportDialog({
|
|
|
2399
2531
|
fontSize: "11px",
|
|
2400
2532
|
color: t.textMuted
|
|
2401
2533
|
},
|
|
2402
|
-
children: "Drag & drop \xB7 Paste \u2318V / Ctrl+V \xB7 Click to browse"
|
|
2534
|
+
children: "Images, PDF, DOC, XLS \xB7 Drag & drop \xB7 Paste \u2318V / Ctrl+V \xB7 Click to browse"
|
|
2403
2535
|
}
|
|
2404
2536
|
)
|
|
2405
2537
|
] })
|
|
@@ -2504,7 +2636,7 @@ function ReportDialog({
|
|
|
2504
2636
|
{
|
|
2505
2637
|
ref: fileInputRef,
|
|
2506
2638
|
type: "file",
|
|
2507
|
-
accept: "image
|
|
2639
|
+
accept: "image/*,.pdf,.doc,.docx,.xls,.xlsx,.csv",
|
|
2508
2640
|
multiple: true,
|
|
2509
2641
|
onChange: handleFileUpload,
|
|
2510
2642
|
style: { display: "none" }
|