@slopmachine/react 0.5.0 → 0.7.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/CHANGELOG.md +33 -0
- package/dist/index.d.mts +34 -6
- package/dist/index.d.ts +34 -6
- package/dist/index.js +196 -92
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +215 -103
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -14
- package/src/components/ErrorOverlay.tsx +91 -0
- package/src/components/SlopImage.tsx +57 -31
- package/src/components/SlopText.tsx +10 -4
- package/src/components/SlopVideo.tsx +52 -29
- package/src/index.ts +9 -1
package/dist/index.mjs
CHANGED
|
@@ -1,11 +1,87 @@
|
|
|
1
1
|
// src/components/SlopImage.tsx
|
|
2
|
-
import
|
|
2
|
+
import { useEffect, useMemo, useRef, useState } from "react";
|
|
3
3
|
import { clsx } from "clsx";
|
|
4
4
|
import { twMerge } from "tailwind-merge";
|
|
5
5
|
import {
|
|
6
|
-
buildImageUrl
|
|
6
|
+
buildImageUrl,
|
|
7
|
+
createRenderUrlMonitor
|
|
7
8
|
} from "@slopmachine/core";
|
|
8
|
-
|
|
9
|
+
|
|
10
|
+
// src/components/ErrorOverlay.tsx
|
|
11
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
12
|
+
var overlayStyle = {
|
|
13
|
+
position: "absolute",
|
|
14
|
+
top: 0,
|
|
15
|
+
left: 0,
|
|
16
|
+
right: 0,
|
|
17
|
+
bottom: 0,
|
|
18
|
+
zIndex: 10,
|
|
19
|
+
display: "flex",
|
|
20
|
+
alignItems: "center",
|
|
21
|
+
justifyContent: "center"
|
|
22
|
+
};
|
|
23
|
+
var ErrorOverlay = ({
|
|
24
|
+
error,
|
|
25
|
+
errorFallback,
|
|
26
|
+
label
|
|
27
|
+
}) => {
|
|
28
|
+
if (errorFallback !== void 0) {
|
|
29
|
+
return /* @__PURE__ */ jsx(
|
|
30
|
+
"div",
|
|
31
|
+
{
|
|
32
|
+
className: "absolute inset-0 z-10 flex items-center justify-center",
|
|
33
|
+
style: overlayStyle,
|
|
34
|
+
children: typeof errorFallback === "function" ? errorFallback(error) : errorFallback
|
|
35
|
+
}
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
return /* @__PURE__ */ jsx(
|
|
39
|
+
"div",
|
|
40
|
+
{
|
|
41
|
+
className: "absolute inset-0 z-10 flex items-center justify-center bg-muted",
|
|
42
|
+
style: { ...overlayStyle, backgroundColor: "var(--muted, #f3f4f6)" },
|
|
43
|
+
title: error.message,
|
|
44
|
+
children: /* @__PURE__ */ jsxs(
|
|
45
|
+
"div",
|
|
46
|
+
{
|
|
47
|
+
className: "flex flex-col items-center gap-2 text-muted-foreground",
|
|
48
|
+
style: {
|
|
49
|
+
display: "flex",
|
|
50
|
+
flexDirection: "column",
|
|
51
|
+
alignItems: "center",
|
|
52
|
+
gap: "0.5rem",
|
|
53
|
+
color: "var(--muted-foreground, #6b7280)"
|
|
54
|
+
},
|
|
55
|
+
children: [
|
|
56
|
+
/* @__PURE__ */ jsxs(
|
|
57
|
+
"svg",
|
|
58
|
+
{
|
|
59
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
60
|
+
viewBox: "0 0 24 24",
|
|
61
|
+
fill: "none",
|
|
62
|
+
stroke: "currentColor",
|
|
63
|
+
strokeWidth: "2",
|
|
64
|
+
strokeLinecap: "round",
|
|
65
|
+
strokeLinejoin: "round",
|
|
66
|
+
"aria-hidden": "true",
|
|
67
|
+
style: { width: "24px", height: "24px" },
|
|
68
|
+
children: [
|
|
69
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
|
|
70
|
+
/* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
|
|
71
|
+
/* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
|
|
72
|
+
]
|
|
73
|
+
}
|
|
74
|
+
),
|
|
75
|
+
/* @__PURE__ */ jsx("span", { className: "text-xs", style: { fontSize: "0.75rem" }, children: label })
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
)
|
|
79
|
+
}
|
|
80
|
+
);
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
// src/components/SlopImage.tsx
|
|
84
|
+
import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
9
85
|
function cn(...inputs) {
|
|
10
86
|
return twMerge(clsx(inputs));
|
|
11
87
|
}
|
|
@@ -17,6 +93,7 @@ var SlopImage = ({
|
|
|
17
93
|
metadata,
|
|
18
94
|
className,
|
|
19
95
|
aspectRatio = "1:1",
|
|
96
|
+
model,
|
|
20
97
|
version,
|
|
21
98
|
resultId,
|
|
22
99
|
variables = {},
|
|
@@ -24,6 +101,8 @@ var SlopImage = ({
|
|
|
24
101
|
original,
|
|
25
102
|
attachments,
|
|
26
103
|
loader,
|
|
104
|
+
errorFallback,
|
|
105
|
+
onGenerationError,
|
|
27
106
|
objectFit = "cover",
|
|
28
107
|
imageClassName,
|
|
29
108
|
style,
|
|
@@ -39,6 +118,7 @@ var SlopImage = ({
|
|
|
39
118
|
prompt,
|
|
40
119
|
metadata,
|
|
41
120
|
aspectRatio,
|
|
121
|
+
model,
|
|
42
122
|
version,
|
|
43
123
|
resultId,
|
|
44
124
|
variables,
|
|
@@ -53,6 +133,7 @@ var SlopImage = ({
|
|
|
53
133
|
prompt,
|
|
54
134
|
metadata,
|
|
55
135
|
aspectRatio,
|
|
136
|
+
model,
|
|
56
137
|
version,
|
|
57
138
|
resultId,
|
|
58
139
|
variables,
|
|
@@ -62,7 +143,7 @@ var SlopImage = ({
|
|
|
62
143
|
]
|
|
63
144
|
);
|
|
64
145
|
const [src, setSrc] = useState(rawSrc);
|
|
65
|
-
|
|
146
|
+
useEffect(() => {
|
|
66
147
|
const timer = setTimeout(() => {
|
|
67
148
|
setSrc(rawSrc);
|
|
68
149
|
}, 100);
|
|
@@ -70,35 +151,33 @@ var SlopImage = ({
|
|
|
70
151
|
}, [rawSrc]);
|
|
71
152
|
const alt = "Image produced by Slop Machine (slopmachine.dev)";
|
|
72
153
|
const [isLoading, setIsLoading] = useState(true);
|
|
154
|
+
const [error, setError] = useState(null);
|
|
73
155
|
const [currentSrc, setCurrentSrc] = useState(src);
|
|
74
156
|
if (src !== currentSrc) {
|
|
75
157
|
setCurrentSrc(src);
|
|
76
158
|
setIsLoading(true);
|
|
159
|
+
setError(null);
|
|
77
160
|
}
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
const errorText = await errRes.text();
|
|
86
|
-
const errorData = JSON.parse(errorText);
|
|
87
|
-
if (errorData.error) {
|
|
88
|
-
errorMessage = errorData.error;
|
|
89
|
-
}
|
|
90
|
-
} catch (e) {
|
|
91
|
-
}
|
|
92
|
-
console.error("SlopImage error:", res.status, errorMessage);
|
|
93
|
-
setIsLoading(false);
|
|
94
|
-
}
|
|
95
|
-
}).catch((err) => {
|
|
96
|
-
console.error(`Error fetching image from ${src}:`, err);
|
|
161
|
+
const onGenerationErrorRef = useRef(onGenerationError);
|
|
162
|
+
useEffect(() => {
|
|
163
|
+
onGenerationErrorRef.current = onGenerationError;
|
|
164
|
+
});
|
|
165
|
+
const monitor = useMemo(
|
|
166
|
+
() => createRenderUrlMonitor((err) => {
|
|
167
|
+
console.error("SlopImage error:", err.status ?? "", err.message);
|
|
97
168
|
setIsLoading(false);
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
169
|
+
setError(err);
|
|
170
|
+
onGenerationErrorRef.current?.(err);
|
|
171
|
+
}),
|
|
172
|
+
[]
|
|
173
|
+
);
|
|
174
|
+
useEffect(() => {
|
|
175
|
+
if (!src) return;
|
|
176
|
+
monitor.watch(src);
|
|
177
|
+
return () => monitor.stop();
|
|
178
|
+
}, [src, monitor]);
|
|
179
|
+
return /* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
180
|
+
/* @__PURE__ */ jsx2("style", { children: `
|
|
102
181
|
@keyframes slop-shimmer {
|
|
103
182
|
0% {
|
|
104
183
|
background-position: 200% 0;
|
|
@@ -116,7 +195,7 @@ var SlopImage = ({
|
|
|
116
195
|
}
|
|
117
196
|
}
|
|
118
197
|
` }),
|
|
119
|
-
/* @__PURE__ */
|
|
198
|
+
/* @__PURE__ */ jsx2("div", { className, style, children: /* @__PURE__ */ jsxs2(
|
|
120
199
|
"div",
|
|
121
200
|
{
|
|
122
201
|
className: "slop-wrapper relative overflow-hidden w-full h-full",
|
|
@@ -128,7 +207,7 @@ var SlopImage = ({
|
|
|
128
207
|
height: "100%"
|
|
129
208
|
},
|
|
130
209
|
children: [
|
|
131
|
-
loader ? /* @__PURE__ */
|
|
210
|
+
loader ? /* @__PURE__ */ jsx2(
|
|
132
211
|
"div",
|
|
133
212
|
{
|
|
134
213
|
className: cn(
|
|
@@ -151,8 +230,8 @@ var SlopImage = ({
|
|
|
151
230
|
},
|
|
152
231
|
children: loader
|
|
153
232
|
}
|
|
154
|
-
) : /* @__PURE__ */
|
|
155
|
-
/* @__PURE__ */
|
|
233
|
+
) : /* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
234
|
+
/* @__PURE__ */ jsx2(
|
|
156
235
|
"div",
|
|
157
236
|
{
|
|
158
237
|
className: cn(
|
|
@@ -174,7 +253,7 @@ var SlopImage = ({
|
|
|
174
253
|
pointerEvents: isLoading ? "auto" : "none",
|
|
175
254
|
transition: "opacity 300ms ease-in-out"
|
|
176
255
|
},
|
|
177
|
-
children: /* @__PURE__ */
|
|
256
|
+
children: /* @__PURE__ */ jsxs2(
|
|
178
257
|
"div",
|
|
179
258
|
{
|
|
180
259
|
className: "flex flex-col items-center gap-2",
|
|
@@ -185,7 +264,7 @@ var SlopImage = ({
|
|
|
185
264
|
gap: "0.5rem"
|
|
186
265
|
},
|
|
187
266
|
children: [
|
|
188
|
-
/* @__PURE__ */
|
|
267
|
+
/* @__PURE__ */ jsxs2(
|
|
189
268
|
"svg",
|
|
190
269
|
{
|
|
191
270
|
className: "spinner size-6 text-muted-foreground",
|
|
@@ -199,7 +278,7 @@ var SlopImage = ({
|
|
|
199
278
|
animation: "slop-spin 1s linear infinite"
|
|
200
279
|
},
|
|
201
280
|
children: [
|
|
202
|
-
/* @__PURE__ */
|
|
281
|
+
/* @__PURE__ */ jsx2(
|
|
203
282
|
"circle",
|
|
204
283
|
{
|
|
205
284
|
className: "opacity-25",
|
|
@@ -211,7 +290,7 @@ var SlopImage = ({
|
|
|
211
290
|
style: { opacity: 0.25 }
|
|
212
291
|
}
|
|
213
292
|
),
|
|
214
|
-
/* @__PURE__ */
|
|
293
|
+
/* @__PURE__ */ jsx2(
|
|
215
294
|
"path",
|
|
216
295
|
{
|
|
217
296
|
className: "opacity-75",
|
|
@@ -223,7 +302,7 @@ var SlopImage = ({
|
|
|
223
302
|
]
|
|
224
303
|
}
|
|
225
304
|
),
|
|
226
|
-
/* @__PURE__ */
|
|
305
|
+
/* @__PURE__ */ jsx2(
|
|
227
306
|
"span",
|
|
228
307
|
{
|
|
229
308
|
className: "text-xs text-muted-foreground",
|
|
@@ -239,7 +318,7 @@ var SlopImage = ({
|
|
|
239
318
|
)
|
|
240
319
|
}
|
|
241
320
|
),
|
|
242
|
-
/* @__PURE__ */
|
|
321
|
+
/* @__PURE__ */ jsx2(
|
|
243
322
|
"div",
|
|
244
323
|
{
|
|
245
324
|
className: cn(
|
|
@@ -261,7 +340,15 @@ var SlopImage = ({
|
|
|
261
340
|
}
|
|
262
341
|
)
|
|
263
342
|
] }),
|
|
264
|
-
/* @__PURE__ */
|
|
343
|
+
error && /* @__PURE__ */ jsx2(
|
|
344
|
+
ErrorOverlay,
|
|
345
|
+
{
|
|
346
|
+
error,
|
|
347
|
+
errorFallback,
|
|
348
|
+
label: "Failed to load image"
|
|
349
|
+
}
|
|
350
|
+
),
|
|
351
|
+
/* @__PURE__ */ jsx2(
|
|
265
352
|
"img",
|
|
266
353
|
{
|
|
267
354
|
src,
|
|
@@ -272,12 +359,13 @@ var SlopImage = ({
|
|
|
272
359
|
onLoad?.(e);
|
|
273
360
|
},
|
|
274
361
|
onError: (e) => {
|
|
275
|
-
|
|
362
|
+
monitor.mediaFailed(src, "Failed to load image");
|
|
276
363
|
onError?.(e);
|
|
277
364
|
},
|
|
365
|
+
"aria-hidden": error ? true : props["aria-hidden"],
|
|
278
366
|
className: cn(
|
|
279
367
|
"h-full w-full transition-opacity duration-500",
|
|
280
|
-
isLoading ? "opacity-0" : "opacity-100",
|
|
368
|
+
isLoading || error ? "opacity-0" : "opacity-100",
|
|
281
369
|
imageClassName
|
|
282
370
|
),
|
|
283
371
|
style: {
|
|
@@ -285,7 +373,7 @@ var SlopImage = ({
|
|
|
285
373
|
width: "100%",
|
|
286
374
|
objectFit,
|
|
287
375
|
transition: "opacity 500ms",
|
|
288
|
-
opacity: isLoading ? 0 : 1
|
|
376
|
+
opacity: isLoading || error ? 0 : 1
|
|
289
377
|
}
|
|
290
378
|
},
|
|
291
379
|
src
|
|
@@ -297,13 +385,14 @@ var SlopImage = ({
|
|
|
297
385
|
};
|
|
298
386
|
|
|
299
387
|
// src/components/SlopVideo.tsx
|
|
300
|
-
import {
|
|
388
|
+
import { useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
|
|
301
389
|
import { clsx as clsx2 } from "clsx";
|
|
302
390
|
import { twMerge as twMerge2 } from "tailwind-merge";
|
|
303
391
|
import {
|
|
304
|
-
buildVideoUrl
|
|
392
|
+
buildVideoUrl,
|
|
393
|
+
createRenderUrlMonitor as createRenderUrlMonitor2
|
|
305
394
|
} from "@slopmachine/core";
|
|
306
|
-
import { Fragment as Fragment2, jsx as
|
|
395
|
+
import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
307
396
|
function cn2(...inputs) {
|
|
308
397
|
return twMerge2(clsx2(inputs));
|
|
309
398
|
}
|
|
@@ -323,6 +412,8 @@ var SlopVideo = ({
|
|
|
323
412
|
original,
|
|
324
413
|
attachments,
|
|
325
414
|
loader,
|
|
415
|
+
errorFallback,
|
|
416
|
+
onGenerationError,
|
|
326
417
|
autoPlay = true,
|
|
327
418
|
loop = true,
|
|
328
419
|
muted = true,
|
|
@@ -364,43 +455,41 @@ var SlopVideo = ({
|
|
|
364
455
|
]
|
|
365
456
|
);
|
|
366
457
|
const [src, setSrc] = useState2(rawSrc);
|
|
367
|
-
|
|
458
|
+
useEffect2(() => {
|
|
368
459
|
const timer = setTimeout(() => {
|
|
369
460
|
setSrc(rawSrc);
|
|
370
461
|
}, 100);
|
|
371
462
|
return () => clearTimeout(timer);
|
|
372
463
|
}, [rawSrc]);
|
|
373
464
|
const [isLoading, setIsLoading] = useState2(true);
|
|
465
|
+
const [error, setError] = useState2(null);
|
|
374
466
|
const [currentSrc, setCurrentSrc] = useState2(src);
|
|
375
|
-
const videoRef =
|
|
467
|
+
const videoRef = useRef2(null);
|
|
376
468
|
if (src !== currentSrc) {
|
|
377
469
|
setCurrentSrc(src);
|
|
378
470
|
setIsLoading(true);
|
|
471
|
+
setError(null);
|
|
379
472
|
}
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
const errorText = await errRes.text();
|
|
388
|
-
const errorData = JSON.parse(errorText);
|
|
389
|
-
if (errorData.error) {
|
|
390
|
-
errorMessage = errorData.error;
|
|
391
|
-
}
|
|
392
|
-
} catch (e) {
|
|
393
|
-
}
|
|
394
|
-
console.error("SlopVideo error:", res.status, errorMessage);
|
|
395
|
-
setIsLoading(false);
|
|
396
|
-
}
|
|
397
|
-
}).catch((err) => {
|
|
398
|
-
console.error(`Error fetching video from ${src}:`, err);
|
|
473
|
+
const onGenerationErrorRef = useRef2(onGenerationError);
|
|
474
|
+
useEffect2(() => {
|
|
475
|
+
onGenerationErrorRef.current = onGenerationError;
|
|
476
|
+
});
|
|
477
|
+
const monitor = useMemo2(
|
|
478
|
+
() => createRenderUrlMonitor2((err) => {
|
|
479
|
+
console.error("SlopVideo error:", err.status ?? "", err.message);
|
|
399
480
|
setIsLoading(false);
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
481
|
+
setError(err);
|
|
482
|
+
onGenerationErrorRef.current?.(err);
|
|
483
|
+
}),
|
|
484
|
+
[]
|
|
485
|
+
);
|
|
486
|
+
useEffect2(() => {
|
|
487
|
+
if (!src) return;
|
|
488
|
+
monitor.watch(src);
|
|
489
|
+
return () => monitor.stop();
|
|
490
|
+
}, [src, monitor]);
|
|
491
|
+
return /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
492
|
+
/* @__PURE__ */ jsx3("style", { children: `
|
|
404
493
|
@keyframes slop-shimmer {
|
|
405
494
|
0% {
|
|
406
495
|
background-position: 200% 0;
|
|
@@ -418,7 +507,7 @@ var SlopVideo = ({
|
|
|
418
507
|
}
|
|
419
508
|
}
|
|
420
509
|
` }),
|
|
421
|
-
/* @__PURE__ */
|
|
510
|
+
/* @__PURE__ */ jsx3("div", { className, style: props.style, children: /* @__PURE__ */ jsxs3(
|
|
422
511
|
"div",
|
|
423
512
|
{
|
|
424
513
|
className: "slop-wrapper relative overflow-hidden w-full h-full",
|
|
@@ -430,7 +519,7 @@ var SlopVideo = ({
|
|
|
430
519
|
height: "100%"
|
|
431
520
|
},
|
|
432
521
|
children: [
|
|
433
|
-
loader ? /* @__PURE__ */
|
|
522
|
+
loader ? /* @__PURE__ */ jsx3(
|
|
434
523
|
"div",
|
|
435
524
|
{
|
|
436
525
|
className: cn2(
|
|
@@ -453,8 +542,8 @@ var SlopVideo = ({
|
|
|
453
542
|
},
|
|
454
543
|
children: loader
|
|
455
544
|
}
|
|
456
|
-
) : /* @__PURE__ */
|
|
457
|
-
/* @__PURE__ */
|
|
545
|
+
) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
546
|
+
/* @__PURE__ */ jsx3(
|
|
458
547
|
"div",
|
|
459
548
|
{
|
|
460
549
|
className: cn2(
|
|
@@ -476,7 +565,7 @@ var SlopVideo = ({
|
|
|
476
565
|
pointerEvents: isLoading ? "auto" : "none",
|
|
477
566
|
transition: "opacity 300ms ease-in-out"
|
|
478
567
|
},
|
|
479
|
-
children: /* @__PURE__ */
|
|
568
|
+
children: /* @__PURE__ */ jsxs3(
|
|
480
569
|
"div",
|
|
481
570
|
{
|
|
482
571
|
className: "flex flex-col items-center gap-2",
|
|
@@ -487,7 +576,7 @@ var SlopVideo = ({
|
|
|
487
576
|
gap: "0.5rem"
|
|
488
577
|
},
|
|
489
578
|
children: [
|
|
490
|
-
/* @__PURE__ */
|
|
579
|
+
/* @__PURE__ */ jsxs3(
|
|
491
580
|
"svg",
|
|
492
581
|
{
|
|
493
582
|
className: "spinner size-6 text-muted-foreground",
|
|
@@ -501,7 +590,7 @@ var SlopVideo = ({
|
|
|
501
590
|
animation: "slop-spin 1s linear infinite"
|
|
502
591
|
},
|
|
503
592
|
children: [
|
|
504
|
-
/* @__PURE__ */
|
|
593
|
+
/* @__PURE__ */ jsx3(
|
|
505
594
|
"circle",
|
|
506
595
|
{
|
|
507
596
|
className: "opacity-25",
|
|
@@ -513,7 +602,7 @@ var SlopVideo = ({
|
|
|
513
602
|
style: { opacity: 0.25 }
|
|
514
603
|
}
|
|
515
604
|
),
|
|
516
|
-
/* @__PURE__ */
|
|
605
|
+
/* @__PURE__ */ jsx3(
|
|
517
606
|
"path",
|
|
518
607
|
{
|
|
519
608
|
className: "opacity-75",
|
|
@@ -525,7 +614,7 @@ var SlopVideo = ({
|
|
|
525
614
|
]
|
|
526
615
|
}
|
|
527
616
|
),
|
|
528
|
-
/* @__PURE__ */
|
|
617
|
+
/* @__PURE__ */ jsx3(
|
|
529
618
|
"span",
|
|
530
619
|
{
|
|
531
620
|
className: "text-xs text-muted-foreground",
|
|
@@ -541,7 +630,7 @@ var SlopVideo = ({
|
|
|
541
630
|
)
|
|
542
631
|
}
|
|
543
632
|
),
|
|
544
|
-
/* @__PURE__ */
|
|
633
|
+
/* @__PURE__ */ jsx3(
|
|
545
634
|
"div",
|
|
546
635
|
{
|
|
547
636
|
className: cn2(
|
|
@@ -563,7 +652,15 @@ var SlopVideo = ({
|
|
|
563
652
|
}
|
|
564
653
|
)
|
|
565
654
|
] }),
|
|
566
|
-
/* @__PURE__ */
|
|
655
|
+
error && /* @__PURE__ */ jsx3(
|
|
656
|
+
ErrorOverlay,
|
|
657
|
+
{
|
|
658
|
+
error,
|
|
659
|
+
errorFallback,
|
|
660
|
+
label: "Failed to load video"
|
|
661
|
+
}
|
|
662
|
+
),
|
|
663
|
+
/* @__PURE__ */ jsx3(
|
|
567
664
|
"video",
|
|
568
665
|
{
|
|
569
666
|
ref: videoRef,
|
|
@@ -578,19 +675,20 @@ var SlopVideo = ({
|
|
|
578
675
|
onLoadedData?.(e);
|
|
579
676
|
},
|
|
580
677
|
onError: (e) => {
|
|
581
|
-
|
|
678
|
+
monitor.mediaFailed(src, "Failed to load video");
|
|
582
679
|
onError?.(e);
|
|
583
680
|
},
|
|
681
|
+
"aria-hidden": error ? true : props["aria-hidden"],
|
|
584
682
|
className: cn2(
|
|
585
683
|
"h-full w-full object-cover transition-opacity duration-500",
|
|
586
|
-
isLoading ? "opacity-0" : "opacity-100"
|
|
684
|
+
isLoading || error ? "opacity-0" : "opacity-100"
|
|
587
685
|
),
|
|
588
686
|
style: {
|
|
589
687
|
height: "100%",
|
|
590
688
|
width: "100%",
|
|
591
689
|
objectFit: "cover",
|
|
592
690
|
transition: "opacity 500ms",
|
|
593
|
-
opacity: isLoading ? 0 : 1
|
|
691
|
+
opacity: isLoading || error ? 0 : 1
|
|
594
692
|
}
|
|
595
693
|
},
|
|
596
694
|
src
|
|
@@ -602,10 +700,12 @@ var SlopVideo = ({
|
|
|
602
700
|
};
|
|
603
701
|
|
|
604
702
|
// src/components/SlopText.tsx
|
|
605
|
-
import React3, { useEffect as
|
|
606
|
-
import {
|
|
607
|
-
|
|
608
|
-
|
|
703
|
+
import React3, { useEffect as useEffect3, useMemo as useMemo3, useState as useState3 } from "react";
|
|
704
|
+
import {
|
|
705
|
+
buildTextUrl,
|
|
706
|
+
renderMarkdown
|
|
707
|
+
} from "@slopmachine/core";
|
|
708
|
+
import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
609
709
|
var SlopText = React3.forwardRef(
|
|
610
710
|
({
|
|
611
711
|
bucketId,
|
|
@@ -615,6 +715,7 @@ var SlopText = React3.forwardRef(
|
|
|
615
715
|
metadata,
|
|
616
716
|
version,
|
|
617
717
|
resultId,
|
|
718
|
+
model,
|
|
618
719
|
variables,
|
|
619
720
|
baseUrl,
|
|
620
721
|
attachments,
|
|
@@ -634,6 +735,7 @@ var SlopText = React3.forwardRef(
|
|
|
634
735
|
metadata,
|
|
635
736
|
version,
|
|
636
737
|
resultId,
|
|
738
|
+
model,
|
|
637
739
|
variables,
|
|
638
740
|
baseUrl,
|
|
639
741
|
attachments
|
|
@@ -646,12 +748,13 @@ var SlopText = React3.forwardRef(
|
|
|
646
748
|
JSON.stringify(metadata),
|
|
647
749
|
version,
|
|
648
750
|
resultId,
|
|
751
|
+
model,
|
|
649
752
|
JSON.stringify(variables),
|
|
650
753
|
baseUrl,
|
|
651
754
|
JSON.stringify(attachments)
|
|
652
755
|
]
|
|
653
756
|
);
|
|
654
|
-
|
|
757
|
+
useEffect3(() => {
|
|
655
758
|
let isMounted = true;
|
|
656
759
|
const fetchText = async () => {
|
|
657
760
|
try {
|
|
@@ -692,14 +795,14 @@ var SlopText = React3.forwardRef(
|
|
|
692
795
|
};
|
|
693
796
|
}, [rawUrl]);
|
|
694
797
|
if (error && errorFallback) {
|
|
695
|
-
return /* @__PURE__ */
|
|
798
|
+
return /* @__PURE__ */ jsx4(Fragment3, { children: errorFallback });
|
|
696
799
|
}
|
|
697
800
|
if (loading) {
|
|
698
801
|
if (fallback) {
|
|
699
|
-
return /* @__PURE__ */
|
|
802
|
+
return /* @__PURE__ */ jsx4(Fragment3, { children: fallback });
|
|
700
803
|
}
|
|
701
|
-
return /* @__PURE__ */
|
|
702
|
-
/* @__PURE__ */
|
|
804
|
+
return /* @__PURE__ */ jsxs4("div", { className: props.className, style: props.style, children: [
|
|
805
|
+
/* @__PURE__ */ jsx4("style", { children: `
|
|
703
806
|
@keyframes slop-shimmer {
|
|
704
807
|
0% { background-position: 200% 0; }
|
|
705
808
|
100% { background-position: -200% 0; }
|
|
@@ -709,7 +812,7 @@ var SlopText = React3.forwardRef(
|
|
|
709
812
|
to { transform: rotate(360deg); }
|
|
710
813
|
}
|
|
711
814
|
` }),
|
|
712
|
-
/* @__PURE__ */
|
|
815
|
+
/* @__PURE__ */ jsxs4(
|
|
713
816
|
"div",
|
|
714
817
|
{
|
|
715
818
|
className: "slop-wrapper relative overflow-hidden w-full",
|
|
@@ -720,7 +823,7 @@ var SlopText = React3.forwardRef(
|
|
|
720
823
|
minHeight: "100px"
|
|
721
824
|
},
|
|
722
825
|
children: [
|
|
723
|
-
/* @__PURE__ */
|
|
826
|
+
/* @__PURE__ */ jsx4(
|
|
724
827
|
"div",
|
|
725
828
|
{
|
|
726
829
|
className: "absolute inset-0 z-10 flex items-center justify-center bg-muted transition-opacity duration-300",
|
|
@@ -736,7 +839,7 @@ var SlopText = React3.forwardRef(
|
|
|
736
839
|
justifyContent: "center",
|
|
737
840
|
backgroundColor: "var(--muted, #f3f4f6)"
|
|
738
841
|
},
|
|
739
|
-
children: /* @__PURE__ */
|
|
842
|
+
children: /* @__PURE__ */ jsxs4(
|
|
740
843
|
"div",
|
|
741
844
|
{
|
|
742
845
|
className: "flex flex-col items-center gap-2",
|
|
@@ -747,7 +850,7 @@ var SlopText = React3.forwardRef(
|
|
|
747
850
|
gap: "0.5rem"
|
|
748
851
|
},
|
|
749
852
|
children: [
|
|
750
|
-
/* @__PURE__ */
|
|
853
|
+
/* @__PURE__ */ jsxs4(
|
|
751
854
|
"svg",
|
|
752
855
|
{
|
|
753
856
|
className: "spinner size-6 text-muted-foreground",
|
|
@@ -761,7 +864,7 @@ var SlopText = React3.forwardRef(
|
|
|
761
864
|
animation: "slop-spin 1s linear infinite"
|
|
762
865
|
},
|
|
763
866
|
children: [
|
|
764
|
-
/* @__PURE__ */
|
|
867
|
+
/* @__PURE__ */ jsx4(
|
|
765
868
|
"circle",
|
|
766
869
|
{
|
|
767
870
|
className: "opacity-25",
|
|
@@ -773,7 +876,7 @@ var SlopText = React3.forwardRef(
|
|
|
773
876
|
style: { opacity: 0.25 }
|
|
774
877
|
}
|
|
775
878
|
),
|
|
776
|
-
/* @__PURE__ */
|
|
879
|
+
/* @__PURE__ */ jsx4(
|
|
777
880
|
"path",
|
|
778
881
|
{
|
|
779
882
|
className: "opacity-75",
|
|
@@ -785,7 +888,7 @@ var SlopText = React3.forwardRef(
|
|
|
785
888
|
]
|
|
786
889
|
}
|
|
787
890
|
),
|
|
788
|
-
/* @__PURE__ */
|
|
891
|
+
/* @__PURE__ */ jsx4(
|
|
789
892
|
"span",
|
|
790
893
|
{
|
|
791
894
|
className: "text-xs text-muted-foreground",
|
|
@@ -801,7 +904,7 @@ var SlopText = React3.forwardRef(
|
|
|
801
904
|
)
|
|
802
905
|
}
|
|
803
906
|
),
|
|
804
|
-
/* @__PURE__ */
|
|
907
|
+
/* @__PURE__ */ jsx4(
|
|
805
908
|
"div",
|
|
806
909
|
{
|
|
807
910
|
className: "shimmer-effect absolute inset-0 bg-gradient-to-r from-muted via-muted/50 to-muted",
|
|
@@ -822,13 +925,13 @@ var SlopText = React3.forwardRef(
|
|
|
822
925
|
)
|
|
823
926
|
] });
|
|
824
927
|
}
|
|
825
|
-
return /* @__PURE__ */
|
|
928
|
+
return /* @__PURE__ */ jsx4(
|
|
826
929
|
"div",
|
|
827
930
|
{
|
|
828
931
|
ref,
|
|
829
932
|
...props,
|
|
830
933
|
dangerouslySetInnerHTML: {
|
|
831
|
-
__html: text ?
|
|
934
|
+
__html: text ? renderMarkdown(text) : ""
|
|
832
935
|
}
|
|
833
936
|
}
|
|
834
937
|
);
|
|
@@ -837,12 +940,21 @@ var SlopText = React3.forwardRef(
|
|
|
837
940
|
SlopText.displayName = "SlopText";
|
|
838
941
|
|
|
839
942
|
// src/index.ts
|
|
840
|
-
import {
|
|
943
|
+
import {
|
|
944
|
+
preloadImage,
|
|
945
|
+
preloadVideo,
|
|
946
|
+
preloadText,
|
|
947
|
+
rateResult,
|
|
948
|
+
SlopMachineError
|
|
949
|
+
} from "@slopmachine/core";
|
|
841
950
|
export {
|
|
842
951
|
SlopImage,
|
|
952
|
+
SlopMachineError,
|
|
843
953
|
SlopText,
|
|
844
954
|
SlopVideo,
|
|
845
955
|
preloadImage,
|
|
956
|
+
preloadText,
|
|
957
|
+
preloadVideo,
|
|
846
958
|
rateResult
|
|
847
959
|
};
|
|
848
960
|
//# sourceMappingURL=index.mjs.map
|