@solostylist/ui-kit 1.0.145 → 1.0.147
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.
|
@@ -24,6 +24,7 @@ export interface SChatMessageProps extends Omit<BoxProps, 'children'> {
|
|
|
24
24
|
hasError?: boolean;
|
|
25
25
|
errorMessage?: string;
|
|
26
26
|
onRetry?: () => void;
|
|
27
|
+
loading?: boolean;
|
|
27
28
|
}
|
|
28
29
|
declare const SChatMessage: React.FC<SChatMessageProps>;
|
|
29
30
|
export default SChatMessage;
|
|
@@ -1,76 +1,128 @@
|
|
|
1
|
-
import { j as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { Box as
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
|
|
1
|
+
import { j as e } from "../jsx-runtime-OVHDjVDe.js";
|
|
2
|
+
import { useState as C } from "react";
|
|
3
|
+
import { Box as t, Typography as l, Paper as U, IconButton as T } from "@mui/material";
|
|
4
|
+
import W from "../s-avatar/s-avatar.js";
|
|
5
|
+
import P from "../s-image-modal/s-image-modal.js";
|
|
6
|
+
import E from "../s-lazy-image/s-lazy-image.js";
|
|
7
|
+
import o from "../s-skeleton/s-skeleton.js";
|
|
8
|
+
import { c as m } from "../createSvgIcon-Dq42_0tn.js";
|
|
9
|
+
const G = m(/* @__PURE__ */ e.jsx("path", {
|
|
9
10
|
d: "M5 20h14v-2H5zM19 9h-4V3H9v6H5l7 7z"
|
|
10
|
-
}), "Download"),
|
|
11
|
+
}), "Download"), K = m(/* @__PURE__ */ e.jsx("path", {
|
|
11
12
|
d: "M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8"
|
|
12
|
-
}), "ErrorOutline"),
|
|
13
|
+
}), "ErrorOutline"), q = m(/* @__PURE__ */ e.jsx("path", {
|
|
13
14
|
d: "M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm7 7V3.5L18.5 9z"
|
|
14
|
-
}), "InsertDriveFile"),
|
|
15
|
+
}), "InsertDriveFile"), A = m(/* @__PURE__ */ e.jsx("path", {
|
|
15
16
|
d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z"
|
|
16
|
-
}), "Refresh"),
|
|
17
|
-
message:
|
|
18
|
-
variant:
|
|
19
|
-
timestamp:
|
|
20
|
-
avatar:
|
|
21
|
-
senderName:
|
|
22
|
-
showAvatar:
|
|
23
|
-
showTimestamp:
|
|
24
|
-
maxWidth:
|
|
25
|
-
attachments:
|
|
26
|
-
onAttachmentClick:
|
|
27
|
-
onDownload:
|
|
28
|
-
hasError:
|
|
29
|
-
errorMessage:
|
|
30
|
-
onRetry:
|
|
31
|
-
|
|
32
|
-
|
|
17
|
+
}), "Refresh"), ee = ({
|
|
18
|
+
message: j,
|
|
19
|
+
variant: B = "received",
|
|
20
|
+
timestamp: u,
|
|
21
|
+
avatar: v,
|
|
22
|
+
senderName: s,
|
|
23
|
+
showAvatar: n = !0,
|
|
24
|
+
showTimestamp: y = !1,
|
|
25
|
+
maxWidth: S = "70%",
|
|
26
|
+
attachments: f = [],
|
|
27
|
+
onAttachmentClick: a,
|
|
28
|
+
onDownload: d,
|
|
29
|
+
hasError: g = !1,
|
|
30
|
+
errorMessage: F = "Failed to send message",
|
|
31
|
+
onRetry: z,
|
|
32
|
+
loading: D = !1,
|
|
33
|
+
sx: w,
|
|
34
|
+
...I
|
|
33
35
|
}) => {
|
|
34
|
-
const [
|
|
36
|
+
const [x, b] = C(null), [H, k] = C(!1), r = B === "sent", L = (i) => (typeof i == "string" ? new Date(i) : i).toLocaleTimeString("en-US", {
|
|
35
37
|
hour: "2-digit",
|
|
36
38
|
minute: "2-digit",
|
|
37
39
|
hour12: !0
|
|
38
|
-
}),
|
|
39
|
-
if (!
|
|
40
|
-
const
|
|
41
|
-
return Math.round(
|
|
42
|
-
},
|
|
43
|
-
|
|
44
|
-
},
|
|
45
|
-
|
|
46
|
-
}, c =
|
|
47
|
-
return /* @__PURE__ */
|
|
48
|
-
|
|
40
|
+
}), O = (i) => {
|
|
41
|
+
if (!i) return "";
|
|
42
|
+
const h = ["Bytes", "KB", "MB", "GB"], p = Math.floor(Math.log(i) / Math.log(1024));
|
|
43
|
+
return Math.round(i / Math.pow(1024, p) * 100) / 100 + " " + h[p];
|
|
44
|
+
}, R = (i) => {
|
|
45
|
+
a ? a(i) : (b(i), k(!0));
|
|
46
|
+
}, V = (i) => {
|
|
47
|
+
a ? a(i) : d && d(i);
|
|
48
|
+
}, c = f.filter((i) => i.type === "image"), M = f.filter((i) => i.type === "file");
|
|
49
|
+
return D ? /* @__PURE__ */ e.jsxs(
|
|
50
|
+
t,
|
|
49
51
|
{
|
|
50
52
|
display: "flex",
|
|
51
|
-
flexDirection:
|
|
53
|
+
flexDirection: r ? "row-reverse" : "row",
|
|
52
54
|
alignItems: "flex-start",
|
|
53
55
|
gap: 1,
|
|
54
56
|
mb: 1,
|
|
55
57
|
sx: {
|
|
56
|
-
maxWidth:
|
|
57
|
-
alignSelf:
|
|
58
|
-
...
|
|
58
|
+
maxWidth: S,
|
|
59
|
+
alignSelf: r ? "flex-end" : "flex-start",
|
|
60
|
+
...w
|
|
59
61
|
},
|
|
60
|
-
...
|
|
62
|
+
...I,
|
|
61
63
|
children: [
|
|
62
|
-
|
|
63
|
-
/* @__PURE__ */
|
|
64
|
-
|
|
64
|
+
n && !r && /* @__PURE__ */ e.jsx(o, { component: "rounded-avatar", width: 36, height: 36 }),
|
|
65
|
+
/* @__PURE__ */ e.jsxs(
|
|
66
|
+
t,
|
|
65
67
|
{
|
|
66
68
|
display: "flex",
|
|
67
69
|
flexDirection: "column",
|
|
68
|
-
alignItems:
|
|
70
|
+
alignItems: r ? "flex-end" : "flex-start",
|
|
69
71
|
gap: 0.5,
|
|
70
72
|
sx: { minWidth: 0 },
|
|
71
73
|
children: [
|
|
72
|
-
|
|
73
|
-
|
|
74
|
+
s && !r && /* @__PURE__ */ e.jsx(o, { variant: "text", width: 100, height: 12, sx: { ml: 0.5 } }),
|
|
75
|
+
/* @__PURE__ */ e.jsxs(
|
|
76
|
+
t,
|
|
77
|
+
{
|
|
78
|
+
sx: {
|
|
79
|
+
display: "inline-block",
|
|
80
|
+
width: "20rem",
|
|
81
|
+
maxWidth: "100%",
|
|
82
|
+
overflow: "hidden",
|
|
83
|
+
ml: 0.5
|
|
84
|
+
},
|
|
85
|
+
children: [
|
|
86
|
+
/* @__PURE__ */ e.jsx(o, { variant: "text", width: "100%", height: 16, sx: { mb: 0.5 } }),
|
|
87
|
+
/* @__PURE__ */ e.jsx(o, { variant: "text", width: "85%", height: 16, sx: { mb: 0.5 } }),
|
|
88
|
+
/* @__PURE__ */ e.jsx(o, { variant: "text", width: "70%", height: 16 })
|
|
89
|
+
]
|
|
90
|
+
}
|
|
91
|
+
),
|
|
92
|
+
y && /* @__PURE__ */ e.jsx(o, { variant: "text", width: 60, height: 10, sx: { ml: r ? 0 : 0.5, mr: r ? 0.5 : 0 } })
|
|
93
|
+
]
|
|
94
|
+
}
|
|
95
|
+
),
|
|
96
|
+
n && r && /* @__PURE__ */ e.jsx(o, { component: "rounded-avatar", width: 36, height: 36 })
|
|
97
|
+
]
|
|
98
|
+
}
|
|
99
|
+
) : /* @__PURE__ */ e.jsxs(
|
|
100
|
+
t,
|
|
101
|
+
{
|
|
102
|
+
display: "flex",
|
|
103
|
+
flexDirection: r ? "row-reverse" : "row",
|
|
104
|
+
alignItems: "flex-start",
|
|
105
|
+
gap: 1,
|
|
106
|
+
mb: 1,
|
|
107
|
+
sx: {
|
|
108
|
+
maxWidth: S,
|
|
109
|
+
alignSelf: r ? "flex-end" : "flex-start",
|
|
110
|
+
...w
|
|
111
|
+
},
|
|
112
|
+
...I,
|
|
113
|
+
children: [
|
|
114
|
+
n && !r && /* @__PURE__ */ e.jsx(W, { avatar: v, name: s, size: 36 }),
|
|
115
|
+
/* @__PURE__ */ e.jsxs(
|
|
116
|
+
t,
|
|
117
|
+
{
|
|
118
|
+
display: "flex",
|
|
119
|
+
flexDirection: "column",
|
|
120
|
+
alignItems: r ? "flex-end" : "flex-start",
|
|
121
|
+
gap: 0.5,
|
|
122
|
+
sx: { minWidth: 0 },
|
|
123
|
+
children: [
|
|
124
|
+
s && !r && /* @__PURE__ */ e.jsx(
|
|
125
|
+
l,
|
|
74
126
|
{
|
|
75
127
|
variant: "caption",
|
|
76
128
|
sx: {
|
|
@@ -79,32 +131,32 @@ const A = x(/* @__PURE__ */ r.jsx("path", {
|
|
|
79
131
|
fontWeight: 500,
|
|
80
132
|
ml: 0.5
|
|
81
133
|
},
|
|
82
|
-
children:
|
|
134
|
+
children: s
|
|
83
135
|
}
|
|
84
136
|
),
|
|
85
|
-
/* @__PURE__ */
|
|
86
|
-
|
|
137
|
+
/* @__PURE__ */ e.jsxs(
|
|
138
|
+
t,
|
|
87
139
|
{
|
|
88
140
|
sx: {
|
|
89
141
|
display: "inline-block",
|
|
90
142
|
borderRadius: 2,
|
|
91
143
|
wordBreak: "break-word",
|
|
92
144
|
maxWidth: "100%",
|
|
93
|
-
backgroundColor:
|
|
94
|
-
color:
|
|
95
|
-
border:
|
|
96
|
-
borderColor:
|
|
97
|
-
...
|
|
145
|
+
backgroundColor: r ? "primary.main" : "",
|
|
146
|
+
color: r ? "primary.contrastText" : "text.primary",
|
|
147
|
+
border: r ? "none" : "1px solid",
|
|
148
|
+
borderColor: g ? "error.main" : "divider",
|
|
149
|
+
...r && {
|
|
98
150
|
backgroundColor: "primary.dark"
|
|
99
151
|
},
|
|
100
|
-
...
|
|
152
|
+
...g && {
|
|
101
153
|
opacity: 0.7
|
|
102
154
|
},
|
|
103
155
|
overflow: "hidden"
|
|
104
156
|
},
|
|
105
157
|
children: [
|
|
106
|
-
c.length > 0 && /* @__PURE__ */
|
|
107
|
-
|
|
158
|
+
c.length > 0 && /* @__PURE__ */ e.jsx(
|
|
159
|
+
t,
|
|
108
160
|
{
|
|
109
161
|
sx: {
|
|
110
162
|
display: "grid",
|
|
@@ -113,8 +165,8 @@ const A = x(/* @__PURE__ */ r.jsx("path", {
|
|
|
113
165
|
p: 0.5
|
|
114
166
|
},
|
|
115
167
|
minWidth: 200,
|
|
116
|
-
children: c.map((
|
|
117
|
-
|
|
168
|
+
children: c.map((i) => /* @__PURE__ */ e.jsx(
|
|
169
|
+
t,
|
|
118
170
|
{
|
|
119
171
|
sx: {
|
|
120
172
|
position: "relative",
|
|
@@ -126,12 +178,12 @@ const A = x(/* @__PURE__ */ r.jsx("path", {
|
|
|
126
178
|
opacity: 0.9
|
|
127
179
|
}
|
|
128
180
|
},
|
|
129
|
-
onClick: () =>
|
|
130
|
-
children: /* @__PURE__ */
|
|
131
|
-
|
|
181
|
+
onClick: () => R(i),
|
|
182
|
+
children: /* @__PURE__ */ e.jsx(
|
|
183
|
+
E,
|
|
132
184
|
{
|
|
133
|
-
src:
|
|
134
|
-
alt:
|
|
185
|
+
src: i.thumbnailUrl || i.url,
|
|
186
|
+
alt: i.name || "Image",
|
|
135
187
|
width: "100%",
|
|
136
188
|
height: "100%",
|
|
137
189
|
style: {
|
|
@@ -143,12 +195,12 @@ const A = x(/* @__PURE__ */ r.jsx("path", {
|
|
|
143
195
|
}
|
|
144
196
|
)
|
|
145
197
|
},
|
|
146
|
-
|
|
198
|
+
i.id
|
|
147
199
|
))
|
|
148
200
|
}
|
|
149
201
|
),
|
|
150
|
-
|
|
151
|
-
|
|
202
|
+
M.length > 0 && /* @__PURE__ */ e.jsx(t, { sx: { p: 1.5 }, children: M.map((i, h) => /* @__PURE__ */ e.jsxs(
|
|
203
|
+
U,
|
|
152
204
|
{
|
|
153
205
|
variant: "outlined",
|
|
154
206
|
sx: {
|
|
@@ -156,27 +208,27 @@ const A = x(/* @__PURE__ */ r.jsx("path", {
|
|
|
156
208
|
alignItems: "center",
|
|
157
209
|
gap: 1.5,
|
|
158
210
|
p: 1,
|
|
159
|
-
mt:
|
|
211
|
+
mt: h > 0 ? 1 : 0,
|
|
160
212
|
cursor: "pointer",
|
|
161
|
-
backgroundColor:
|
|
213
|
+
backgroundColor: r ? "blackAlpha.zero" : "background.paper",
|
|
162
214
|
"&:hover": {
|
|
163
|
-
backgroundColor:
|
|
215
|
+
backgroundColor: r ? "blackAlpha.light" : "action.hover"
|
|
164
216
|
}
|
|
165
217
|
},
|
|
166
|
-
onClick: () =>
|
|
218
|
+
onClick: () => V(i),
|
|
167
219
|
children: [
|
|
168
|
-
/* @__PURE__ */
|
|
169
|
-
|
|
220
|
+
/* @__PURE__ */ e.jsx(
|
|
221
|
+
q,
|
|
170
222
|
{
|
|
171
223
|
sx: {
|
|
172
224
|
fontSize: 32,
|
|
173
|
-
color:
|
|
225
|
+
color: r ? "primary.contrastText" : "action.active"
|
|
174
226
|
}
|
|
175
227
|
}
|
|
176
228
|
),
|
|
177
|
-
/* @__PURE__ */
|
|
178
|
-
/* @__PURE__ */
|
|
179
|
-
|
|
229
|
+
/* @__PURE__ */ e.jsxs(t, { sx: { flex: 1, minWidth: 0 }, children: [
|
|
230
|
+
/* @__PURE__ */ e.jsx(
|
|
231
|
+
l,
|
|
180
232
|
{
|
|
181
233
|
variant: "body2",
|
|
182
234
|
sx: {
|
|
@@ -185,42 +237,42 @@ const A = x(/* @__PURE__ */ r.jsx("path", {
|
|
|
185
237
|
overflow: "hidden",
|
|
186
238
|
textOverflow: "ellipsis",
|
|
187
239
|
whiteSpace: "nowrap",
|
|
188
|
-
color:
|
|
240
|
+
color: r ? "inherit" : "text.primary"
|
|
189
241
|
},
|
|
190
|
-
children:
|
|
242
|
+
children: i.name || "Unnamed File"
|
|
191
243
|
}
|
|
192
244
|
),
|
|
193
|
-
|
|
194
|
-
|
|
245
|
+
i.size && /* @__PURE__ */ e.jsx(
|
|
246
|
+
l,
|
|
195
247
|
{
|
|
196
248
|
variant: "caption",
|
|
197
249
|
sx: {
|
|
198
250
|
fontSize: "0.75rem",
|
|
199
|
-
color:
|
|
251
|
+
color: r ? "whiteAlpha.dark" : "text.secondary"
|
|
200
252
|
},
|
|
201
|
-
children:
|
|
253
|
+
children: O(i.size)
|
|
202
254
|
}
|
|
203
255
|
)
|
|
204
256
|
] }),
|
|
205
|
-
|
|
206
|
-
|
|
257
|
+
d && /* @__PURE__ */ e.jsx(
|
|
258
|
+
T,
|
|
207
259
|
{
|
|
208
260
|
size: "small",
|
|
209
261
|
onClick: (p) => {
|
|
210
|
-
p.stopPropagation(),
|
|
262
|
+
p.stopPropagation(), d(i);
|
|
211
263
|
},
|
|
212
264
|
sx: {
|
|
213
|
-
color:
|
|
265
|
+
color: r ? "primary.contrastText" : "action.active"
|
|
214
266
|
},
|
|
215
|
-
children: /* @__PURE__ */
|
|
267
|
+
children: /* @__PURE__ */ e.jsx(G, { fontSize: "small" })
|
|
216
268
|
}
|
|
217
269
|
)
|
|
218
270
|
]
|
|
219
271
|
},
|
|
220
|
-
|
|
272
|
+
i.id
|
|
221
273
|
)) }),
|
|
222
|
-
|
|
223
|
-
|
|
274
|
+
j && /* @__PURE__ */ e.jsx(t, { sx: { px: 2, py: 1.5, pt: f.length > 0 ? 0 : 1.5 }, children: /* @__PURE__ */ e.jsx(
|
|
275
|
+
l,
|
|
224
276
|
{
|
|
225
277
|
variant: "body2",
|
|
226
278
|
sx: {
|
|
@@ -228,69 +280,69 @@ const A = x(/* @__PURE__ */ r.jsx("path", {
|
|
|
228
280
|
lineHeight: 1.4,
|
|
229
281
|
whiteSpace: "pre-wrap"
|
|
230
282
|
},
|
|
231
|
-
children:
|
|
283
|
+
children: j
|
|
232
284
|
}
|
|
233
285
|
) })
|
|
234
286
|
]
|
|
235
287
|
}
|
|
236
288
|
),
|
|
237
|
-
|
|
238
|
-
|
|
289
|
+
y && u && /* @__PURE__ */ e.jsx(
|
|
290
|
+
l,
|
|
239
291
|
{
|
|
240
292
|
variant: "caption",
|
|
241
293
|
sx: {
|
|
242
294
|
color: "text.secondary",
|
|
243
295
|
fontSize: "0.7rem",
|
|
244
|
-
ml:
|
|
245
|
-
mr:
|
|
296
|
+
ml: r ? 0 : 0.5,
|
|
297
|
+
mr: r ? 0.5 : 0
|
|
246
298
|
},
|
|
247
|
-
children:
|
|
299
|
+
children: L(u)
|
|
248
300
|
}
|
|
249
301
|
),
|
|
250
|
-
|
|
251
|
-
|
|
302
|
+
g && /* @__PURE__ */ e.jsxs(
|
|
303
|
+
t,
|
|
252
304
|
{
|
|
253
305
|
display: "flex",
|
|
254
306
|
alignItems: "center",
|
|
255
307
|
gap: 0.5,
|
|
256
308
|
sx: {
|
|
257
309
|
color: "error.main",
|
|
258
|
-
ml:
|
|
259
|
-
mr:
|
|
310
|
+
ml: r ? 0 : 0.5,
|
|
311
|
+
mr: r ? 0.5 : 0
|
|
260
312
|
},
|
|
261
313
|
children: [
|
|
262
|
-
/* @__PURE__ */
|
|
263
|
-
/* @__PURE__ */
|
|
264
|
-
|
|
314
|
+
/* @__PURE__ */ e.jsx(K, { sx: { fontSize: "1rem" } }),
|
|
315
|
+
/* @__PURE__ */ e.jsx(
|
|
316
|
+
l,
|
|
265
317
|
{
|
|
266
318
|
variant: "caption",
|
|
267
319
|
sx: {
|
|
268
320
|
fontSize: "0.875rem",
|
|
269
321
|
fontWeight: 500
|
|
270
322
|
},
|
|
271
|
-
children:
|
|
323
|
+
children: F
|
|
272
324
|
}
|
|
273
325
|
),
|
|
274
|
-
|
|
326
|
+
z && /* @__PURE__ */ e.jsx(T, { size: "small", onClick: z, children: /* @__PURE__ */ e.jsx(A, {}) })
|
|
275
327
|
]
|
|
276
328
|
}
|
|
277
329
|
)
|
|
278
330
|
]
|
|
279
331
|
}
|
|
280
332
|
),
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
333
|
+
n && r && /* @__PURE__ */ e.jsx(W, { avatar: v, name: s, size: 36 }),
|
|
334
|
+
x && /* @__PURE__ */ e.jsx(
|
|
335
|
+
P,
|
|
284
336
|
{
|
|
285
|
-
isOpen:
|
|
337
|
+
isOpen: H,
|
|
286
338
|
onClose: () => {
|
|
287
|
-
|
|
339
|
+
k(!1), b(null);
|
|
288
340
|
},
|
|
289
341
|
selectedItem: {
|
|
290
|
-
id:
|
|
342
|
+
id: x.id,
|
|
291
343
|
type: "image",
|
|
292
|
-
url:
|
|
293
|
-
title:
|
|
344
|
+
url: x.url,
|
|
345
|
+
title: x.name
|
|
294
346
|
},
|
|
295
347
|
showNavigation: !1,
|
|
296
348
|
showThumbnailDock: !1
|
|
@@ -301,5 +353,5 @@ const A = x(/* @__PURE__ */ r.jsx("path", {
|
|
|
301
353
|
);
|
|
302
354
|
};
|
|
303
355
|
export {
|
|
304
|
-
|
|
356
|
+
ee as default
|
|
305
357
|
};
|
|
@@ -32,7 +32,7 @@ export declare const MediaItem: React.FC<MediaItemProps>;
|
|
|
32
32
|
/**
|
|
33
33
|
* Built-in layout variants for the gallery
|
|
34
34
|
*/
|
|
35
|
-
export type GalleryLayoutVariant = 'masonry' | 'grid' | 'spotlight' | 'featured' | 'custom';
|
|
35
|
+
export type GalleryLayoutVariant = 'masonry' | 'grid' | 'spotlight' | 'featured' | 'highlight' | 'custom';
|
|
36
36
|
/**
|
|
37
37
|
* Props interface for the main SGallery component
|
|
38
38
|
*/
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { j as t } from "../jsx-runtime-OVHDjVDe.js";
|
|
2
|
-
import { useState as y, useId as R, useEffect as
|
|
2
|
+
import { useState as y, useId as R, useEffect as v, useRef as D } from "react";
|
|
3
3
|
import { Box as a, Paper as w, Skeleton as E, Typography as j } from "@mui/material";
|
|
4
4
|
import { AnimatePresence as M, motion as I } from "framer-motion";
|
|
5
5
|
import V from "../s-image-modal/s-image-modal.js";
|
|
6
6
|
import P from "../s-lazy-image/s-lazy-image.js";
|
|
7
|
-
const A = ({ item:
|
|
7
|
+
const A = ({ item: o, sx: s, onClick: i }) => {
|
|
8
8
|
const e = D(null), [n, l] = y(!1), [u, f] = y(!0);
|
|
9
|
-
return
|
|
9
|
+
return v(() => {
|
|
10
10
|
const c = {
|
|
11
11
|
root: null,
|
|
12
12
|
rootMargin: "50px",
|
|
@@ -19,7 +19,7 @@ const A = ({ item: i, sx: o, onClick: s }) => {
|
|
|
19
19
|
return e.current && g.observe(e.current), () => {
|
|
20
20
|
e.current && g.unobserve(e.current);
|
|
21
21
|
};
|
|
22
|
-
}, []),
|
|
22
|
+
}, []), v(() => {
|
|
23
23
|
let c = !0;
|
|
24
24
|
return n ? (async () => {
|
|
25
25
|
if (!(!e.current || !n || !c))
|
|
@@ -33,7 +33,7 @@ const A = ({ item: i, sx: o, onClick: s }) => {
|
|
|
33
33
|
})() : e.current && e.current.pause(), () => {
|
|
34
34
|
c = !1, e.current && (e.current.pause(), e.current.removeAttribute("src"), e.current.load());
|
|
35
35
|
};
|
|
36
|
-
}, [n]),
|
|
36
|
+
}, [n]), o.type === "video" ? /* @__PURE__ */ t.jsxs(
|
|
37
37
|
a,
|
|
38
38
|
{
|
|
39
39
|
sx: {
|
|
@@ -41,7 +41,7 @@ const A = ({ item: i, sx: o, onClick: s }) => {
|
|
|
41
41
|
overflow: "hidden",
|
|
42
42
|
width: "100%",
|
|
43
43
|
height: "100%",
|
|
44
|
-
...
|
|
44
|
+
...s
|
|
45
45
|
},
|
|
46
46
|
children: [
|
|
47
47
|
/* @__PURE__ */ t.jsx(
|
|
@@ -49,7 +49,7 @@ const A = ({ item: i, sx: o, onClick: s }) => {
|
|
|
49
49
|
{
|
|
50
50
|
component: "video",
|
|
51
51
|
ref: e,
|
|
52
|
-
onClick:
|
|
52
|
+
onClick: i,
|
|
53
53
|
playsInline: !0,
|
|
54
54
|
muted: !0,
|
|
55
55
|
loop: !0,
|
|
@@ -64,7 +64,7 @@ const A = ({ item: i, sx: o, onClick: s }) => {
|
|
|
64
64
|
willChange: "transform",
|
|
65
65
|
display: "block"
|
|
66
66
|
},
|
|
67
|
-
children: /* @__PURE__ */ t.jsx("source", { src:
|
|
67
|
+
children: /* @__PURE__ */ t.jsx("source", { src: o.url, type: "video/mp4" })
|
|
68
68
|
}
|
|
69
69
|
),
|
|
70
70
|
u && /* @__PURE__ */ t.jsx(
|
|
@@ -99,50 +99,53 @@ const A = ({ item: i, sx: o, onClick: s }) => {
|
|
|
99
99
|
)
|
|
100
100
|
]
|
|
101
101
|
}
|
|
102
|
-
) : /* @__PURE__ */ t.jsx(a, { onClick:
|
|
102
|
+
) : /* @__PURE__ */ t.jsx(a, { onClick: i, sx: { width: "100%", height: "100%", ...s }, children: /* @__PURE__ */ t.jsx(
|
|
103
103
|
P,
|
|
104
104
|
{
|
|
105
|
-
src:
|
|
106
|
-
alt:
|
|
105
|
+
src: o.url,
|
|
106
|
+
alt: o.title || "",
|
|
107
107
|
width: "100%",
|
|
108
108
|
height: "100%",
|
|
109
109
|
style: {
|
|
110
|
-
objectFit:
|
|
111
|
-
cursor:
|
|
110
|
+
objectFit: s != null && s.objectFit ? s.objectFit : "cover",
|
|
111
|
+
cursor: i ? "pointer" : "default",
|
|
112
112
|
display: "block",
|
|
113
113
|
width: "100%",
|
|
114
114
|
height: "100%"
|
|
115
115
|
}
|
|
116
116
|
}
|
|
117
117
|
) });
|
|
118
|
-
},
|
|
119
|
-
let
|
|
120
|
-
switch (
|
|
118
|
+
}, k = (o, s) => {
|
|
119
|
+
let i = 1, e = 2;
|
|
120
|
+
switch (s) {
|
|
121
121
|
case "grid":
|
|
122
|
-
|
|
122
|
+
i = 1, e = 2;
|
|
123
123
|
break;
|
|
124
124
|
case "masonry":
|
|
125
|
-
|
|
125
|
+
i = 1, e = o % 3 === 0 ? 3 : o % 2 === 0 ? 2 : 4;
|
|
126
126
|
break;
|
|
127
127
|
case "spotlight":
|
|
128
|
-
|
|
128
|
+
o === 0 ? (i = 2, e = 4) : (i = 1, e = 2);
|
|
129
129
|
break;
|
|
130
130
|
case "featured":
|
|
131
|
-
|
|
131
|
+
o === 0 ? (i = 2, e = 6) : (i = 1, e = 2);
|
|
132
|
+
break;
|
|
133
|
+
case "highlight":
|
|
134
|
+
o === 0 ? (i = 3, e = 6) : (i = 1, e = 2);
|
|
132
135
|
break;
|
|
133
136
|
case "custom":
|
|
134
|
-
|
|
137
|
+
i = 1, e = 2;
|
|
135
138
|
break;
|
|
136
139
|
}
|
|
137
|
-
return { colSpan:
|
|
138
|
-
}, S = (
|
|
139
|
-
const { colSpan: n, rowSpan: l } =
|
|
140
|
-
return { ...
|
|
141
|
-
}), W = ({ mediaItems:
|
|
142
|
-
const [n, l] = y(null), [u, f] = y(() => S(
|
|
143
|
-
return
|
|
144
|
-
f(S(
|
|
145
|
-
}, [
|
|
140
|
+
return { colSpan: i, rowSpan: e };
|
|
141
|
+
}, S = (o, s) => s === "custom" ? o : o.map((i, e) => {
|
|
142
|
+
const { colSpan: n, rowSpan: l } = k(e, s);
|
|
143
|
+
return { ...i, colSpan: n, rowSpan: l };
|
|
144
|
+
}), W = ({ mediaItems: o, variant: s = "masonry", loading: i = !1, skeletonCount: e = 6 }) => {
|
|
145
|
+
const [n, l] = y(null), [u, f] = y(() => S(o, s)), [c, g] = y(!1), d = R();
|
|
146
|
+
return v(() => {
|
|
147
|
+
f(S(o, s));
|
|
148
|
+
}, [o, s]), /* @__PURE__ */ t.jsxs(a, { sx: { width: "100%", position: "relative", zIndex: 1 }, children: [
|
|
146
149
|
/* @__PURE__ */ t.jsx(
|
|
147
150
|
V,
|
|
148
151
|
{
|
|
@@ -182,8 +185,8 @@ const A = ({ item: i, sx: o, onClick: s }) => {
|
|
|
182
185
|
position: "relative"
|
|
183
186
|
// Ensure proper stacking context
|
|
184
187
|
},
|
|
185
|
-
children:
|
|
186
|
-
const { colSpan: h, rowSpan:
|
|
188
|
+
children: i ? Array.from({ length: e }).map((r, p) => {
|
|
189
|
+
const { colSpan: h, rowSpan: b } = k(p, s);
|
|
187
190
|
return /* @__PURE__ */ t.jsx(
|
|
188
191
|
w,
|
|
189
192
|
{
|
|
@@ -191,7 +194,7 @@ const A = ({ item: i, sx: o, onClick: s }) => {
|
|
|
191
194
|
position: "relative",
|
|
192
195
|
overflow: "hidden",
|
|
193
196
|
borderRadius: 2,
|
|
194
|
-
gridRow: `span ${
|
|
197
|
+
gridRow: `span ${b}`,
|
|
195
198
|
gridColumn: `span ${h}`
|
|
196
199
|
},
|
|
197
200
|
children: /* @__PURE__ */ t.jsx(
|
|
@@ -233,12 +236,12 @@ const A = ({ item: i, sx: o, onClick: s }) => {
|
|
|
233
236
|
dragConstraints: { left: 0, right: 0, top: 0, bottom: 0 },
|
|
234
237
|
dragElastic: 1,
|
|
235
238
|
onDragStart: () => g(!0),
|
|
236
|
-
onDragEnd: (h,
|
|
239
|
+
onDragEnd: (h, b) => {
|
|
237
240
|
g(!1);
|
|
238
|
-
const x =
|
|
241
|
+
const x = b.offset.x + b.offset.y;
|
|
239
242
|
if (Math.abs(x) > 50) {
|
|
240
|
-
const
|
|
241
|
-
|
|
243
|
+
const m = [...u], C = m[p], $ = x > 0 ? Math.min(p + 1, u.length - 1) : Math.max(p - 1, 0);
|
|
244
|
+
m.splice(p, 1), m.splice($, 0, C), f(m);
|
|
242
245
|
}
|
|
243
246
|
},
|
|
244
247
|
style: {
|