@linktr.ee/messaging-react 1.30.0 → 1.31.0-rc-1776677746
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/{Creator-77XnrIxc.js → Creator-DGe3CQ_j.js} +131 -138
- package/dist/Creator-DGe3CQ_j.js.map +1 -0
- package/dist/{MediaPlayer-Bf-xPB8Z.js → MediaPlayer-BCsdmsON.js} +83 -89
- package/dist/MediaPlayer-BCsdmsON.js.map +1 -0
- package/dist/Visitor-DyJTWB2_.js +204 -0
- package/dist/Visitor-DyJTWB2_.js.map +1 -0
- package/dist/index.d.ts +33 -19
- package/dist/index.js +775 -767
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/ChannelView.tsx +15 -13
- package/src/components/CustomMessage/CustomMessage.stories.tsx +12 -20
- package/src/components/CustomMessage/index.tsx +20 -18
- package/src/components/LockedAttachment/LockedAttachment.stories.tsx +49 -140
- package/src/components/LockedAttachment/components/Creator.tsx +45 -58
- package/src/components/LockedAttachment/components/MediaPlayer.tsx +7 -17
- package/src/components/LockedAttachment/components/Visitor.tsx +99 -88
- package/src/components/LockedAttachment/index.tsx +4 -4
- package/src/components/LockedAttachment/types.ts +9 -4
- package/src/components/MessagingShell/index.tsx +6 -4
- package/src/types.ts +18 -13
- package/dist/Creator-77XnrIxc.js.map +0 -1
- package/dist/MediaPlayer-Bf-xPB8Z.js.map +0 -1
- package/dist/Visitor-C9HSYm3D.js +0 -196
- package/dist/Visitor-C9HSYm3D.js.map +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs as z, jsx as n } from "react/jsx-runtime";
|
|
2
|
-
import { FileIcon as
|
|
3
|
-
import ce, { useState as s, useRef as M, useEffect as
|
|
2
|
+
import { FileIcon as _, ImageIcon as Y, SpeakerHighIcon as Z, VideoCameraIcon as J, FileMdIcon as Q, FileTextIcon as ee, FileZipIcon as te, FilePptIcon as ne, FileCsvIcon as ae, FileXlsIcon as re, FileDocIcon as ie, FilePdfIcon as oe, CircleNotchIcon as se, PlayIcon as H, PauseIcon as le } from "@phosphor-icons/react";
|
|
3
|
+
import ce, { useState as s, useRef as M, useEffect as L, useCallback as C } from "react";
|
|
4
4
|
const ue = [
|
|
5
5
|
[/pdf/, "pdf"],
|
|
6
6
|
[/wordprocessingml|msword|\.doc/, "doc"],
|
|
@@ -11,63 +11,59 @@ const ue = [
|
|
|
11
11
|
[/plain|rtf/, "text"],
|
|
12
12
|
[/markdown/, "markdown"]
|
|
13
13
|
];
|
|
14
|
-
function
|
|
14
|
+
function X(a) {
|
|
15
15
|
return a.startsWith("video/") ? "video" : a.startsWith("audio/") ? "audio" : a.startsWith("image/") ? "image" : "document";
|
|
16
16
|
}
|
|
17
17
|
function de(a) {
|
|
18
|
-
const
|
|
19
|
-
([
|
|
18
|
+
const r = ue.find(
|
|
19
|
+
([i]) => i.test(a)
|
|
20
20
|
);
|
|
21
|
-
return
|
|
21
|
+
return r ? r[1] : "generic";
|
|
22
22
|
}
|
|
23
23
|
const fe = {
|
|
24
24
|
video: J,
|
|
25
25
|
audio: Z,
|
|
26
26
|
image: Y,
|
|
27
|
-
document:
|
|
27
|
+
document: _
|
|
28
28
|
}, me = {
|
|
29
29
|
pdf: oe,
|
|
30
|
-
doc:
|
|
31
|
-
xls:
|
|
30
|
+
doc: ie,
|
|
31
|
+
xls: re,
|
|
32
32
|
csv: ae,
|
|
33
33
|
ppt: ne,
|
|
34
34
|
zip: te,
|
|
35
35
|
text: ee,
|
|
36
36
|
markdown: Q,
|
|
37
|
-
generic:
|
|
37
|
+
generic: _
|
|
38
38
|
};
|
|
39
39
|
function he(a) {
|
|
40
|
-
const
|
|
41
|
-
return
|
|
40
|
+
const r = X(a);
|
|
41
|
+
return r !== "document" ? fe[r] : me[de(a)];
|
|
42
42
|
}
|
|
43
|
-
function
|
|
44
|
-
return ce.createElement(he(a),
|
|
43
|
+
function pe(a, r) {
|
|
44
|
+
return ce.createElement(he(a), r);
|
|
45
45
|
}
|
|
46
|
-
const
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
}
|
|
51
|
-
const xe = ({
|
|
46
|
+
const ve = (a, r) => a === "audio" && !r ? "bg-black/5" : "bg-black", we = (a) => {
|
|
47
|
+
var r, i;
|
|
48
|
+
return "touches" in a ? ((r = a.touches[0]) == null ? void 0 : r.clientX) ?? ((i = a.changedTouches[0]) == null ? void 0 : i.clientX) ?? 0 : a.clientX;
|
|
49
|
+
}, xe = ({
|
|
52
50
|
source: a,
|
|
53
|
-
mimeType:
|
|
54
|
-
poster:
|
|
55
|
-
autoPlay:
|
|
51
|
+
mimeType: r,
|
|
52
|
+
poster: i,
|
|
53
|
+
autoPlay: q = !1,
|
|
56
54
|
playing: u,
|
|
57
|
-
loop:
|
|
58
|
-
controls:
|
|
59
|
-
showProgress:
|
|
60
|
-
onContainerClick:
|
|
55
|
+
loop: y = !1,
|
|
56
|
+
controls: v = !0,
|
|
57
|
+
showProgress: K = !1,
|
|
58
|
+
onContainerClick: x,
|
|
61
59
|
muted: D = !1
|
|
62
60
|
}) => {
|
|
63
|
-
const
|
|
64
|
-
|
|
65
|
-
u !== void 0 && u !==
|
|
61
|
+
const k = X(r), [d, o] = s(q), R = M(u);
|
|
62
|
+
L(() => {
|
|
63
|
+
u !== void 0 && u !== R.current && (R.current = u, o(u));
|
|
66
64
|
}, [u]);
|
|
67
|
-
const [w, g] = s(0), [f,
|
|
68
|
-
|
|
69
|
-
b(!1), T(!0);
|
|
70
|
-
}, [a]), x(() => {
|
|
65
|
+
const [w, g] = s(0), [f, A] = s(!1), [S, j] = s(!1), [T, B] = s(null), [U, m] = s(!1), [O, W] = s(!0), [N, I] = s(!1), h = M(null), F = M(null), l = M(null);
|
|
66
|
+
L(() => {
|
|
71
67
|
if (!d) {
|
|
72
68
|
l.current !== null && (cancelAnimationFrame(l.current), l.current = null);
|
|
73
69
|
return;
|
|
@@ -79,22 +75,22 @@ const xe = ({
|
|
|
79
75
|
return l.current = requestAnimationFrame(e), () => {
|
|
80
76
|
l.current !== null && cancelAnimationFrame(l.current);
|
|
81
77
|
};
|
|
82
|
-
}, [d, f]),
|
|
78
|
+
}, [d, f]), L(() => {
|
|
83
79
|
const e = h.current;
|
|
84
80
|
e && (d ? e.play().catch((t) => {
|
|
85
|
-
o(!1),
|
|
81
|
+
o(!1), I(!0);
|
|
86
82
|
}) : e.pause());
|
|
87
83
|
}, [d]);
|
|
88
|
-
const
|
|
89
|
-
|
|
84
|
+
const $ = C(() => {
|
|
85
|
+
I(!1), o(!0);
|
|
90
86
|
}, []), P = C(
|
|
91
87
|
(e) => {
|
|
92
88
|
const t = F.current;
|
|
93
89
|
if (!t) return 0;
|
|
94
|
-
const
|
|
90
|
+
const p = t.getBoundingClientRect();
|
|
95
91
|
return Math.max(
|
|
96
92
|
0,
|
|
97
|
-
Math.min(1, (we(e) -
|
|
93
|
+
Math.min(1, (we(e) - p.left) / p.width)
|
|
98
94
|
);
|
|
99
95
|
},
|
|
100
96
|
[]
|
|
@@ -102,75 +98,74 @@ const xe = ({
|
|
|
102
98
|
const t = h.current;
|
|
103
99
|
t && t.duration && (t.currentTime = e * t.duration);
|
|
104
100
|
}, []), E = (e) => {
|
|
105
|
-
e.stopPropagation(),
|
|
101
|
+
e.stopPropagation(), A(!0);
|
|
106
102
|
const t = P(e);
|
|
107
103
|
g(t), c(t);
|
|
108
104
|
};
|
|
109
|
-
|
|
105
|
+
L(() => {
|
|
110
106
|
if (!f) return;
|
|
111
|
-
const e = (
|
|
112
|
-
|
|
107
|
+
const e = (p) => g(P(p)), t = (p) => {
|
|
108
|
+
A(!1), c(P(p));
|
|
113
109
|
};
|
|
114
110
|
return window.addEventListener("mousemove", e), window.addEventListener("mouseup", t), window.addEventListener("touchmove", e, { passive: !0 }), window.addEventListener("touchend", t), () => {
|
|
115
111
|
window.removeEventListener("mousemove", e), window.removeEventListener("mouseup", t), window.removeEventListener("touchmove", e), window.removeEventListener("touchend", t);
|
|
116
112
|
};
|
|
117
113
|
}, [f, P, c]);
|
|
118
|
-
const V =
|
|
114
|
+
const V = T ? { aspectRatio: String(T) } : void 0, G = T ? "" : " aspect-video", b = Math.round(w * 100);
|
|
119
115
|
return /* @__PURE__ */ z(
|
|
120
116
|
"div",
|
|
121
117
|
{
|
|
122
118
|
role: "button",
|
|
123
119
|
tabIndex: 0,
|
|
124
|
-
className: `relative cursor-pointer overflow-hidden ${
|
|
120
|
+
className: `relative cursor-pointer overflow-hidden ${ve(k, i)}${G}`,
|
|
125
121
|
style: V,
|
|
126
122
|
onClick: () => {
|
|
127
|
-
if (!
|
|
128
|
-
if (
|
|
129
|
-
|
|
123
|
+
if (!N) {
|
|
124
|
+
if (x) {
|
|
125
|
+
x();
|
|
130
126
|
return;
|
|
131
127
|
}
|
|
132
|
-
|
|
128
|
+
v && o((e) => !e);
|
|
133
129
|
}
|
|
134
130
|
},
|
|
135
131
|
onKeyDown: (e) => {
|
|
136
|
-
if (!(e.key !== "Enter" && e.key !== " ") && (e.preventDefault(), !
|
|
137
|
-
if (
|
|
138
|
-
|
|
132
|
+
if (!(e.key !== "Enter" && e.key !== " ") && (e.preventDefault(), !N)) {
|
|
133
|
+
if (x) {
|
|
134
|
+
x();
|
|
139
135
|
return;
|
|
140
136
|
}
|
|
141
|
-
|
|
137
|
+
v && o((t) => !t);
|
|
142
138
|
}
|
|
143
139
|
},
|
|
144
140
|
children: [
|
|
145
|
-
|
|
141
|
+
i && (k === "audio" || O) && /* @__PURE__ */ n(
|
|
146
142
|
"img",
|
|
147
143
|
{
|
|
148
|
-
src:
|
|
144
|
+
src: i,
|
|
149
145
|
alt: "",
|
|
150
146
|
className: "absolute inset-0 h-full w-full object-cover"
|
|
151
147
|
}
|
|
152
148
|
),
|
|
153
|
-
!
|
|
149
|
+
!i && (k === "audio" || O) && /* @__PURE__ */ n("div", { className: "absolute inset-0 flex items-center justify-center", children: pe(r, {
|
|
154
150
|
className: "size-12 text-black/20",
|
|
155
151
|
weight: "regular"
|
|
156
152
|
}) }),
|
|
157
|
-
|
|
158
|
-
/* @__PURE__ */ n("div", { className: "absolute inset-0", children: R === "audio" ? /* @__PURE__ */ n(
|
|
153
|
+
/* @__PURE__ */ n("div", { className: "absolute inset-0", children: k === "audio" ? /* @__PURE__ */ n(
|
|
159
154
|
"audio",
|
|
160
155
|
{
|
|
161
156
|
ref: h,
|
|
162
157
|
src: a,
|
|
163
|
-
loop:
|
|
158
|
+
loop: y,
|
|
164
159
|
muted: D,
|
|
165
160
|
style: { width: "100%", height: "100%" },
|
|
166
161
|
onLoadStart: () => m(!0),
|
|
167
162
|
onCanPlay: () => {
|
|
168
|
-
m(!1),
|
|
163
|
+
m(!1), W(!1);
|
|
169
164
|
},
|
|
170
165
|
onWaiting: () => m(!0),
|
|
171
|
-
onPlay: () =>
|
|
166
|
+
onPlay: () => I(!1),
|
|
172
167
|
onEnded: () => {
|
|
173
|
-
|
|
168
|
+
y || (o(!1), g(0));
|
|
174
169
|
},
|
|
175
170
|
children: /* @__PURE__ */ n("track", { kind: "captions" })
|
|
176
171
|
}
|
|
@@ -179,35 +174,34 @@ const xe = ({
|
|
|
179
174
|
{
|
|
180
175
|
ref: h,
|
|
181
176
|
src: a,
|
|
182
|
-
|
|
183
|
-
loop: k,
|
|
177
|
+
loop: y,
|
|
184
178
|
muted: D,
|
|
185
179
|
playsInline: !0,
|
|
186
180
|
style: { width: "100%", height: "100%" },
|
|
187
181
|
onLoadStart: () => m(!0),
|
|
188
182
|
onCanPlay: () => {
|
|
189
|
-
m(!1),
|
|
183
|
+
m(!1), W(!1);
|
|
190
184
|
},
|
|
191
185
|
onWaiting: () => m(!0),
|
|
192
|
-
onPlay: () =>
|
|
186
|
+
onPlay: () => I(!1),
|
|
193
187
|
onLoadedMetadata: () => {
|
|
194
188
|
const e = h.current;
|
|
195
|
-
e instanceof HTMLVideoElement && e.videoWidth && e.videoHeight &&
|
|
189
|
+
e instanceof HTMLVideoElement && e.videoWidth && e.videoHeight && B(e.videoWidth / e.videoHeight);
|
|
196
190
|
},
|
|
197
191
|
onEnded: () => {
|
|
198
|
-
|
|
192
|
+
y || (o(!1), g(0));
|
|
199
193
|
},
|
|
200
194
|
children: /* @__PURE__ */ n("track", { kind: "captions" })
|
|
201
195
|
}
|
|
202
196
|
) }),
|
|
203
|
-
|
|
197
|
+
U && !N && /* @__PURE__ */ n("div", { className: "absolute inset-0 z-10 flex items-center justify-center", children: /* @__PURE__ */ n(
|
|
204
198
|
se,
|
|
205
199
|
{
|
|
206
200
|
className: "size-8 animate-spin text-white/80",
|
|
207
201
|
weight: "bold"
|
|
208
202
|
}
|
|
209
203
|
) }),
|
|
210
|
-
|
|
204
|
+
N && !v && /* @__PURE__ */ n(
|
|
211
205
|
"div",
|
|
212
206
|
{
|
|
213
207
|
className: "absolute inset-0 z-30 flex cursor-pointer items-center justify-center bg-black/35",
|
|
@@ -215,20 +209,20 @@ const xe = ({
|
|
|
215
209
|
tabIndex: 0,
|
|
216
210
|
"aria-label": "Play preview",
|
|
217
211
|
onClick: (e) => {
|
|
218
|
-
e.stopPropagation(),
|
|
212
|
+
e.stopPropagation(), $();
|
|
219
213
|
},
|
|
220
214
|
onKeyDown: (e) => {
|
|
221
|
-
e.key !== "Enter" && e.key !== " " || (e.preventDefault(), e.stopPropagation(),
|
|
215
|
+
e.key !== "Enter" && e.key !== " " || (e.preventDefault(), e.stopPropagation(), $());
|
|
222
216
|
},
|
|
223
|
-
children: /* @__PURE__ */ n("span", { className: "flex size-16 items-center justify-center rounded-full bg-white/20 text-white backdrop-blur-sm", children: /* @__PURE__ */ n(
|
|
217
|
+
children: /* @__PURE__ */ n("span", { className: "flex size-16 items-center justify-center rounded-full bg-white/20 text-white backdrop-blur-sm", children: /* @__PURE__ */ n(H, { className: "size-9 translate-x-0.5", weight: "fill" }) })
|
|
224
218
|
}
|
|
225
219
|
),
|
|
226
|
-
|
|
220
|
+
K && !v && /* @__PURE__ */ n("div", { className: "absolute inset-x-0 bottom-0 px-3 pb-2.5 pt-6 bg-gradient-to-t from-black/40 to-transparent", children: /* @__PURE__ */ n(
|
|
227
221
|
"div",
|
|
228
222
|
{
|
|
229
223
|
role: "slider",
|
|
230
224
|
"aria-label": "Playback position",
|
|
231
|
-
"aria-valuenow":
|
|
225
|
+
"aria-valuenow": b,
|
|
232
226
|
"aria-valuemin": 0,
|
|
233
227
|
"aria-valuemax": 100,
|
|
234
228
|
tabIndex: 0,
|
|
@@ -244,12 +238,12 @@ const xe = ({
|
|
|
244
238
|
"div",
|
|
245
239
|
{
|
|
246
240
|
className: "h-full rounded-full bg-white",
|
|
247
|
-
style: { width: `${
|
|
241
|
+
style: { width: `${b}%` }
|
|
248
242
|
}
|
|
249
243
|
) })
|
|
250
244
|
}
|
|
251
245
|
) }),
|
|
252
|
-
|
|
246
|
+
v && /* @__PURE__ */ z("div", { className: "absolute inset-x-0 bottom-0 flex items-center gap-2 bg-gradient-to-t from-black/60 to-transparent px-3 pb-2.5 pt-6 transition-all duration-200", children: [
|
|
253
247
|
/* @__PURE__ */ n(
|
|
254
248
|
"button",
|
|
255
249
|
{
|
|
@@ -259,7 +253,7 @@ const xe = ({
|
|
|
259
253
|
},
|
|
260
254
|
className: "shrink-0 text-white",
|
|
261
255
|
"aria-label": d ? "Pause" : "Play",
|
|
262
|
-
children: d ? /* @__PURE__ */ n(le, { className: "size-5", weight: "fill" }) : /* @__PURE__ */ n(
|
|
256
|
+
children: d ? /* @__PURE__ */ n(le, { className: "size-5", weight: "fill" }) : /* @__PURE__ */ n(H, { className: "size-5 translate-x-px", weight: "fill" })
|
|
263
257
|
}
|
|
264
258
|
),
|
|
265
259
|
/* @__PURE__ */ z(
|
|
@@ -267,7 +261,7 @@ const xe = ({
|
|
|
267
261
|
{
|
|
268
262
|
role: "slider",
|
|
269
263
|
"aria-label": "Playback position",
|
|
270
|
-
"aria-valuenow":
|
|
264
|
+
"aria-valuenow": b,
|
|
271
265
|
"aria-valuemin": 0,
|
|
272
266
|
"aria-valuemax": 100,
|
|
273
267
|
tabIndex: 0,
|
|
@@ -276,8 +270,8 @@ const xe = ({
|
|
|
276
270
|
onMouseDown: E,
|
|
277
271
|
onTouchStart: E,
|
|
278
272
|
onClick: (e) => e.stopPropagation(),
|
|
279
|
-
onMouseEnter: () =>
|
|
280
|
-
onMouseLeave: () =>
|
|
273
|
+
onMouseEnter: () => j(!0),
|
|
274
|
+
onMouseLeave: () => j(!1),
|
|
281
275
|
onKeyDown: (e) => {
|
|
282
276
|
e.key === "ArrowRight" && c(Math.min(1, w + 0.05)), e.key === "ArrowLeft" && c(Math.max(0, w - 0.05));
|
|
283
277
|
},
|
|
@@ -285,12 +279,12 @@ const xe = ({
|
|
|
285
279
|
/* @__PURE__ */ n(
|
|
286
280
|
"div",
|
|
287
281
|
{
|
|
288
|
-
className: `w-full overflow-hidden rounded-full bg-white/30 transition-all duration-200 ${
|
|
282
|
+
className: `w-full overflow-hidden rounded-full bg-white/30 transition-all duration-200 ${S || f ? "h-1.5" : "h-1"}`,
|
|
289
283
|
children: /* @__PURE__ */ n(
|
|
290
284
|
"div",
|
|
291
285
|
{
|
|
292
286
|
className: "h-full rounded-full bg-white",
|
|
293
|
-
style: { width: `${
|
|
287
|
+
style: { width: `${b}%` }
|
|
294
288
|
}
|
|
295
289
|
)
|
|
296
290
|
}
|
|
@@ -298,8 +292,8 @@ const xe = ({
|
|
|
298
292
|
/* @__PURE__ */ n(
|
|
299
293
|
"div",
|
|
300
294
|
{
|
|
301
|
-
className: `absolute size-3 -translate-x-1/2 rounded-full bg-white shadow transition-[opacity,transform] duration-200 ${
|
|
302
|
-
style: { left: `${
|
|
295
|
+
className: `absolute size-3 -translate-x-1/2 rounded-full bg-white shadow transition-[opacity,transform] duration-200 ${S || f ? "scale-100 opacity-100" : "scale-0 opacity-0"}`,
|
|
296
|
+
style: { left: `${b}%` }
|
|
303
297
|
}
|
|
304
298
|
)
|
|
305
299
|
]
|
|
@@ -312,7 +306,7 @@ const xe = ({
|
|
|
312
306
|
};
|
|
313
307
|
export {
|
|
314
308
|
xe as M,
|
|
315
|
-
|
|
316
|
-
|
|
309
|
+
X as g,
|
|
310
|
+
pe as r
|
|
317
311
|
};
|
|
318
|
-
//# sourceMappingURL=MediaPlayer-
|
|
312
|
+
//# sourceMappingURL=MediaPlayer-BCsdmsON.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MediaPlayer-BCsdmsON.js","sources":["../src/components/LockedAttachment/utils/mimeType.ts","../src/components/LockedAttachment/utils/icons.ts","../src/components/LockedAttachment/components/MediaPlayer.tsx"],"sourcesContent":["export type AttachmentSourceType = 'image' | 'audio' | 'video' | 'document'\n\nexport type DocumentIconType =\n | 'pdf'\n | 'doc'\n | 'xls'\n | 'csv'\n | 'ppt'\n | 'zip'\n | 'text'\n | 'markdown'\n | 'generic'\n\nconst DOCUMENT_ICON_PATTERNS: Array<[RegExp, DocumentIconType]> = [\n [/pdf/, 'pdf'],\n [/wordprocessingml|msword|\\.doc/, 'doc'],\n [/spreadsheetml|ms-excel|\\.xls/, 'xls'],\n [/csv/, 'csv'],\n [/presentationml|ms-powerpoint|\\.ppt/, 'ppt'],\n [/zip|x-rar|x-7z|x-tar|x-gzip/, 'zip'],\n [/plain|rtf/, 'text'],\n [/markdown/, 'markdown'],\n]\n\nexport function getSourceType(mimeType: string): AttachmentSourceType {\n if (mimeType.startsWith('video/')) return 'video'\n if (mimeType.startsWith('audio/')) return 'audio'\n if (mimeType.startsWith('image/')) return 'image'\n return 'document'\n}\n\nexport function getDocumentIconType(mimeType: string): DocumentIconType {\n const match = DOCUMENT_ICON_PATTERNS.find(([pattern]) =>\n pattern.test(mimeType)\n )\n return match ? match[1] : 'generic'\n}\n","import {\n FileIcon,\n FileCsvIcon,\n FileDocIcon,\n FileMdIcon,\n FilePdfIcon,\n FilePptIcon,\n FileTextIcon,\n FileXlsIcon,\n FileZipIcon,\n ImageIcon,\n SpeakerHighIcon,\n VideoCameraIcon,\n IconProps,\n} from '@phosphor-icons/react'\nimport React from 'react'\n\nimport { getDocumentIconType, getSourceType } from './mimeType'\nimport type { AttachmentSourceType } from './mimeType'\n\nexport const MEDIA_TYPE_ICON: Record<AttachmentSourceType, React.ElementType> =\n {\n video: VideoCameraIcon,\n audio: SpeakerHighIcon,\n image: ImageIcon,\n document: FileIcon,\n }\n\nconst DOCUMENT_ICON_COMPONENT = {\n pdf: FilePdfIcon,\n doc: FileDocIcon,\n xls: FileXlsIcon,\n csv: FileCsvIcon,\n ppt: FilePptIcon,\n zip: FileZipIcon,\n text: FileTextIcon,\n markdown: FileMdIcon,\n generic: FileIcon,\n} as const\n\nexport function getTypeIcon(mimeType: string): React.ElementType {\n const sourceType = getSourceType(mimeType)\n if (sourceType !== 'document') return MEDIA_TYPE_ICON[sourceType]\n return DOCUMENT_ICON_COMPONENT[getDocumentIconType(mimeType)]\n}\n\n/** Use instead of `<TypeIcon />` where TypeIcon = getTypeIcon(mime) to satisfy react-hooks/static-components. */\nexport function renderTypeIcon(\n mimeType: string,\n props: IconProps\n): React.ReactElement {\n return React.createElement(getTypeIcon(mimeType), props)\n}\n","import { CircleNotchIcon, PauseIcon, PlayIcon } from '@phosphor-icons/react'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { isDevBuild } from '../../../utils/isDevBuild'\nimport { renderTypeIcon } from '../utils/icons'\nimport { getSourceType, type AttachmentSourceType } from '../utils/mimeType'\n\nconst getPlayerBg = (sourceType: AttachmentSourceType, poster?: string) => {\n return sourceType === 'audio' && !poster ? 'bg-black/5' : 'bg-black'\n}\n\nconst getClientXFromEvent = ( e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent ): number => {\n if ('touches' in e) {\n return e.touches[0]?.clientX ?? e.changedTouches[0]?.clientX ?? 0\n }\n return e.clientX\n}\n\nexport interface MediaPlayerProps {\n source: string\n mimeType: string\n poster?: string\n autoPlay?: boolean\n /** Controlled playing state. When provided, syncs to internal play/pause. */\n playing?: boolean\n loop?: boolean\n controls?: boolean\n showProgress?: boolean\n onContainerClick?: () => void\n /** When true, requests muted playback (helps autoplay policies on video). */\n muted?: boolean\n}\n\nconst MediaPlayer: React.FC<MediaPlayerProps> = ({\n source,\n mimeType,\n poster,\n autoPlay = false,\n playing: playingProp,\n loop = false,\n controls = true,\n showProgress = false,\n onContainerClick,\n muted = false,\n}) => {\n const sourceType = getSourceType(mimeType)\n const [playing, setPlaying] = useState(autoPlay)\n\n // Sync controlled playing prop to internal state\n const prevPlayingPropRef = useRef(playingProp)\n useEffect(() => {\n if (\n playingProp !== undefined &&\n playingProp !== prevPlayingPropRef.current\n ) {\n prevPlayingPropRef.current = playingProp\n setPlaying(playingProp)\n }\n }, [playingProp])\n const [played, setPlayed] = useState(0)\n const [seeking, setSeeking] = useState(false)\n const [scrubberHovered, setScrubberHovered] = useState(false)\n const [videoAspect, setVideoAspect] = useState<number | null>(null)\n const [buffering, setBuffering] = useState(false)\n /** True until the first canPlay fires for the current source — hides controls/spinner behind poster. */\n const [initialLoad, setInitialLoad] = useState(true)\n /** Set when autoplay/play() was rejected so user can start via gesture (no controls UI). */\n const [manualPlayRequired, setManualPlayRequired] = useState(false)\n const playerRef = useRef<HTMLMediaElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const rafRef = useRef<number | null>(null)\n\n\n useEffect(() => {\n if (!playing) {\n if (rafRef.current !== null) {\n cancelAnimationFrame(rafRef.current)\n rafRef.current = null\n }\n return\n }\n const tick = () => {\n const el = playerRef.current\n if (el && el.duration && !seeking) setPlayed(el.currentTime / el.duration)\n rafRef.current = requestAnimationFrame(tick)\n }\n rafRef.current = requestAnimationFrame(tick)\n return () => {\n if (rafRef.current !== null) cancelAnimationFrame(rafRef.current)\n }\n }, [playing, seeking])\n\n // ReactPlayer v3 uses native HTML media elements and does not support a\n // declarative `playing` prop — playback must be driven imperatively.\n useEffect(() => {\n const el = playerRef.current\n if (!el) return\n if (playing) {\n void el.play().catch((err) => {\n setPlaying(false)\n setManualPlayRequired(true)\n if (isDevBuild()) {\n console.debug('[MediaPlayer] play() failed', err)\n }\n })\n } else {\n el.pause()\n }\n }, [playing])\n\n const startPlaybackFromGesture = useCallback(() => {\n setManualPlayRequired(false)\n setPlaying(true)\n }, [])\n\n const getFraction = useCallback(\n (e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent) => {\n const track = trackRef.current\n if (!track) return 0\n const rect = track.getBoundingClientRect()\n return Math.max(\n 0,\n Math.min(1, (getClientXFromEvent(e) - rect.left) / rect.width)\n )\n },\n []\n )\n\n const seekTo = useCallback((fraction: number) => {\n const el = playerRef.current\n if (el && el.duration) el.currentTime = fraction * el.duration\n }, [])\n\n const handleTrackPointerDown = (\n e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n ) => {\n e.stopPropagation()\n setSeeking(true)\n const fraction = getFraction(e)\n setPlayed(fraction)\n seekTo(fraction)\n }\n\n useEffect(() => {\n if (!seeking) return\n const onMove = (e: MouseEvent | TouchEvent) => setPlayed(getFraction(e))\n const onUp = (e: MouseEvent | TouchEvent) => {\n setSeeking(false)\n seekTo(getFraction(e))\n }\n window.addEventListener('mousemove', onMove)\n window.addEventListener('mouseup', onUp)\n window.addEventListener('touchmove', onMove, { passive: true })\n window.addEventListener('touchend', onUp)\n return () => {\n window.removeEventListener('mousemove', onMove)\n window.removeEventListener('mouseup', onUp)\n window.removeEventListener('touchmove', onMove)\n window.removeEventListener('touchend', onUp)\n }\n }, [seeking, getFraction, seekTo])\n\n // Use natural aspect ratio once metadata loads, fall back to 16:9 before then.\n const aspectStyle = videoAspect\n ? { aspectRatio: String(videoAspect) }\n : undefined\n const aspectClass = !videoAspect ? ' aspect-video' : ''\n const scrubberPercent = Math.round(played * 100)\n\n return (\n <div\n role=\"button\"\n tabIndex={0}\n className={`relative cursor-pointer overflow-hidden ${getPlayerBg(sourceType, poster)}${aspectClass}`}\n style={aspectStyle}\n onClick={() => {\n if (manualPlayRequired) return\n if (onContainerClick) {\n onContainerClick()\n return\n }\n if (controls) setPlaying((p) => !p)\n }}\n onKeyDown={(e) => {\n if (e.key !== 'Enter' && e.key !== ' ') return\n e.preventDefault()\n if (manualPlayRequired) return\n if (onContainerClick) {\n onContainerClick()\n return\n }\n if (controls) setPlaying((p) => !p)\n }}\n >\n {/* For audio, poster persists as a visual background. For video, hide once loaded. */}\n {poster && (sourceType === 'audio' || initialLoad) && (\n <img\n src={poster}\n alt=\"\"\n className=\"absolute inset-0 h-full w-full object-cover\"\n />\n )}\n {!poster && (sourceType === 'audio' || initialLoad) && (\n <div className=\"absolute inset-0 flex items-center justify-center\">\n {renderTypeIcon(mimeType, {\n className: 'size-12 text-black/20',\n weight: 'regular',\n })}\n </div>\n )}\n <div className=\"absolute inset-0\">\n {sourceType === 'audio' ? (\n <audio\n ref={playerRef as React.RefObject<HTMLAudioElement>}\n src={source}\n loop={loop}\n muted={muted}\n style={{ width: '100%', height: '100%' }}\n onLoadStart={() => setBuffering(true)}\n onCanPlay={() => { setBuffering(false); setInitialLoad(false) }}\n onWaiting={() => setBuffering(true)}\n onPlay={() => setManualPlayRequired(false)}\n onEnded={() => {\n if (!loop) {\n setPlaying(false)\n setPlayed(0)\n }\n }}\n >\n <track kind=\"captions\" />\n </audio>\n ) : (\n <video\n ref={playerRef as React.RefObject<HTMLVideoElement>}\n src={source}\n loop={loop}\n muted={muted}\n playsInline\n style={{ width: '100%', height: '100%' }}\n onLoadStart={() => setBuffering(true)}\n onCanPlay={() => { setBuffering(false); setInitialLoad(false) }}\n onWaiting={() => setBuffering(true)}\n onPlay={() => setManualPlayRequired(false)}\n onLoadedMetadata={() => {\n const el = playerRef.current\n if (el instanceof HTMLVideoElement && el.videoWidth && el.videoHeight) {\n setVideoAspect(el.videoWidth / el.videoHeight)\n }\n }}\n onEnded={() => {\n if (!loop) {\n setPlaying(false)\n setPlayed(0)\n }\n }}\n >\n <track kind=\"captions\" />\n </video>\n )}\n </div>\n\n {buffering && !manualPlayRequired && (\n <div className=\"absolute inset-0 z-10 flex items-center justify-center\">\n <CircleNotchIcon\n className=\"size-8 animate-spin text-white/80\"\n weight=\"bold\"\n />\n </div>\n )}\n\n {manualPlayRequired && !controls && (\n <div\n className=\"absolute inset-0 z-30 flex cursor-pointer items-center justify-center bg-black/35\"\n role=\"button\"\n tabIndex={0}\n aria-label=\"Play preview\"\n onClick={(e) => {\n e.stopPropagation()\n startPlaybackFromGesture()\n }}\n onKeyDown={(e) => {\n if (e.key !== 'Enter' && e.key !== ' ') return\n e.preventDefault()\n e.stopPropagation()\n startPlaybackFromGesture()\n }}\n >\n <span className=\"flex size-16 items-center justify-center rounded-full bg-white/20 text-white backdrop-blur-sm\">\n <PlayIcon className=\"size-9 translate-x-0.5\" weight=\"fill\" />\n </span>\n </div>\n )}\n\n {showProgress && !controls && (\n <div className=\"absolute inset-x-0 bottom-0 px-3 pb-2.5 pt-6 bg-gradient-to-t from-black/40 to-transparent\">\n <div\n role=\"slider\"\n aria-label=\"Playback position\"\n aria-valuenow={scrubberPercent}\n aria-valuemin={0}\n aria-valuemax={100}\n tabIndex={0}\n ref={trackRef}\n className=\"relative flex h-4 w-full cursor-pointer items-center\"\n onMouseDown={handleTrackPointerDown}\n onTouchStart={handleTrackPointerDown}\n onClick={(e) => e.stopPropagation()}\n onKeyDown={(e) => {\n if (e.key === 'ArrowRight') seekTo(Math.min(1, played + 0.05))\n if (e.key === 'ArrowLeft') seekTo(Math.max(0, played - 0.05))\n }}\n >\n <div className=\"w-full overflow-hidden rounded-full bg-white/30 h-1\">\n <div\n className=\"h-full rounded-full bg-white\"\n style={{ width: `${scrubberPercent}%` }}\n />\n </div>\n </div>\n </div>\n )}\n\n {controls && (\n <div className=\"absolute inset-x-0 bottom-0 flex items-center gap-2 bg-gradient-to-t from-black/60 to-transparent px-3 pb-2.5 pt-6 transition-all duration-200\">\n <button\n type=\"button\"\n onClick={(e) => {\n e.stopPropagation()\n setPlaying((p) => !p)\n }}\n className=\"shrink-0 text-white\"\n aria-label={playing ? 'Pause' : 'Play'}\n >\n {playing ? (\n <PauseIcon className=\"size-5\" weight=\"fill\" />\n ) : (\n <PlayIcon className=\"size-5 translate-x-px\" weight=\"fill\" />\n )}\n </button>\n\n <div\n role=\"slider\"\n aria-label=\"Playback position\"\n aria-valuenow={scrubberPercent}\n aria-valuemin={0}\n aria-valuemax={100}\n tabIndex={0}\n ref={trackRef}\n className=\"relative flex h-4 w-full cursor-pointer items-center\"\n onMouseDown={handleTrackPointerDown}\n onTouchStart={handleTrackPointerDown}\n onClick={(e) => e.stopPropagation()}\n onMouseEnter={() => setScrubberHovered(true)}\n onMouseLeave={() => setScrubberHovered(false)}\n onKeyDown={(e) => {\n if (e.key === 'ArrowRight') seekTo(Math.min(1, played + 0.05))\n if (e.key === 'ArrowLeft') seekTo(Math.max(0, played - 0.05))\n }}\n >\n <div\n className={`w-full overflow-hidden rounded-full bg-white/30 transition-all duration-200 ${scrubberHovered || seeking ? 'h-1.5' : 'h-1'}`}\n >\n <div\n className=\"h-full rounded-full bg-white\"\n style={{ width: `${scrubberPercent}%` }}\n />\n </div>\n <div\n className={`absolute size-3 -translate-x-1/2 rounded-full bg-white shadow transition-[opacity,transform] duration-200 ${scrubberHovered || seeking ? 'scale-100 opacity-100' : 'scale-0 opacity-0'}`}\n style={{ left: `${scrubberPercent}%` }}\n />\n </div>\n </div>\n )}\n </div>\n )\n}\n\nexport default MediaPlayer\n"],"names":["DOCUMENT_ICON_PATTERNS","getSourceType","mimeType","getDocumentIconType","match","pattern","MEDIA_TYPE_ICON","VideoCameraIcon","SpeakerHighIcon","ImageIcon","FileIcon","DOCUMENT_ICON_COMPONENT","FilePdfIcon","FileDocIcon","FileXlsIcon","FileCsvIcon","FilePptIcon","FileZipIcon","FileTextIcon","FileMdIcon","getTypeIcon","sourceType","renderTypeIcon","props","React","getPlayerBg","poster","getClientXFromEvent","e","_a","_b","MediaPlayer","source","autoPlay","playingProp","loop","controls","showProgress","onContainerClick","muted","playing","setPlaying","useState","prevPlayingPropRef","useRef","useEffect","played","setPlayed","seeking","setSeeking","scrubberHovered","setScrubberHovered","videoAspect","setVideoAspect","buffering","setBuffering","initialLoad","setInitialLoad","manualPlayRequired","setManualPlayRequired","playerRef","trackRef","rafRef","tick","el","err","startPlaybackFromGesture","useCallback","getFraction","track","rect","seekTo","fraction","handleTrackPointerDown","onMove","onUp","aspectStyle","aspectClass","scrubberPercent","jsxs","p","jsx","CircleNotchIcon","PlayIcon","PauseIcon"],"mappings":"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"}
|
|
@@ -0,0 +1,204 @@
|
|
|
1
|
+
import { jsxs as i, jsx as e, Fragment as z } from "react/jsx-runtime";
|
|
2
|
+
import { CheckCircleIcon as I, LockSimpleIcon as w, DownloadSimpleIcon as j, LockOpenIcon as S } from "@phosphor-icons/react";
|
|
3
|
+
import x, { useState as N, useEffect as T, useCallback as _ } from "react";
|
|
4
|
+
import { g as D, r as b, M as P } from "./MediaPlayer-BCsdmsON.js";
|
|
5
|
+
const h = (a) => a === "paid" ? S : w, v = (a) => {
|
|
6
|
+
const { icon: t } = a;
|
|
7
|
+
return /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-black/30", children: /* @__PURE__ */ e("div", { className: "absolute left-3 top-3 flex size-8 items-center justify-center rounded-full bg-black/60", children: /* @__PURE__ */ e(t, { className: "size-4 text-white", weight: "fill" }) }) });
|
|
8
|
+
}, y = (a) => {
|
|
9
|
+
const { thumbnailUrl: t, mimeType: s, LockIcon: l } = a;
|
|
10
|
+
return /* @__PURE__ */ i("div", { className: "relative aspect-video overflow-hidden bg-black/5", children: [
|
|
11
|
+
t ? /* @__PURE__ */ e(
|
|
12
|
+
"img",
|
|
13
|
+
{
|
|
14
|
+
src: t,
|
|
15
|
+
alt: "",
|
|
16
|
+
className: "absolute inset-0 h-full w-full object-cover"
|
|
17
|
+
}
|
|
18
|
+
) : /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: b(s, {
|
|
19
|
+
className: "size-12 text-black/20",
|
|
20
|
+
weight: "regular"
|
|
21
|
+
}) }),
|
|
22
|
+
/* @__PURE__ */ e(v, { icon: l })
|
|
23
|
+
] });
|
|
24
|
+
}, F = (a) => {
|
|
25
|
+
const { sourceUrl: t, thumbnailUrl: s, mimeType: l, title: n, paymentStatus: c, isLocked: o } = a, [d, p] = N(!1);
|
|
26
|
+
return o ? /* @__PURE__ */ e(
|
|
27
|
+
y,
|
|
28
|
+
{
|
|
29
|
+
thumbnailUrl: s,
|
|
30
|
+
mimeType: l,
|
|
31
|
+
LockIcon: h(c)
|
|
32
|
+
}
|
|
33
|
+
) : /* @__PURE__ */ e("div", { className: "relative overflow-hidden bg-black/5", children: /* @__PURE__ */ e(
|
|
34
|
+
"img",
|
|
35
|
+
{
|
|
36
|
+
src: t,
|
|
37
|
+
alt: n,
|
|
38
|
+
className: `block w-full transition-opacity duration-300 ${d ? "opacity-100" : "opacity-0"}`,
|
|
39
|
+
onLoad: () => p(!0)
|
|
40
|
+
}
|
|
41
|
+
) });
|
|
42
|
+
}, M = (a) => {
|
|
43
|
+
const { thumbnailUrl: t, mimeType: s, paymentStatus: l, isLocked: n } = a;
|
|
44
|
+
return /* @__PURE__ */ i("div", { className: "relative aspect-video overflow-hidden bg-black/5", children: [
|
|
45
|
+
t ? /* @__PURE__ */ e(
|
|
46
|
+
"img",
|
|
47
|
+
{
|
|
48
|
+
src: t,
|
|
49
|
+
alt: "",
|
|
50
|
+
className: "absolute inset-0 h-full w-full object-cover"
|
|
51
|
+
}
|
|
52
|
+
) : /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: b(s, {
|
|
53
|
+
className: "size-12 text-black/20",
|
|
54
|
+
weight: "regular"
|
|
55
|
+
}) }),
|
|
56
|
+
n && /* @__PURE__ */ e(v, { icon: h(l) })
|
|
57
|
+
] });
|
|
58
|
+
}, R = (a) => {
|
|
59
|
+
const { sourceUrl: t, thumbnailUrl: s, mimeType: l, paymentStatus: n, isLocked: c } = a;
|
|
60
|
+
return c ? /* @__PURE__ */ e(
|
|
61
|
+
y,
|
|
62
|
+
{
|
|
63
|
+
thumbnailUrl: s,
|
|
64
|
+
mimeType: l,
|
|
65
|
+
LockIcon: h(n)
|
|
66
|
+
}
|
|
67
|
+
) : /* @__PURE__ */ e(
|
|
68
|
+
P,
|
|
69
|
+
{
|
|
70
|
+
source: t,
|
|
71
|
+
mimeType: l,
|
|
72
|
+
poster: s
|
|
73
|
+
}
|
|
74
|
+
);
|
|
75
|
+
}, O = () => /* @__PURE__ */ i("span", { className: "flex items-center gap-1", children: [
|
|
76
|
+
/* @__PURE__ */ e("span", { className: "size-1 rounded-full bg-white animate-bounce [animation-delay:-0.3s]" }),
|
|
77
|
+
/* @__PURE__ */ e("span", { className: "size-1 rounded-full bg-white animate-bounce [animation-delay:-0.15s]" }),
|
|
78
|
+
/* @__PURE__ */ e("span", { className: "size-1 rounded-full bg-white animate-bounce" })
|
|
79
|
+
] }), A = (a) => {
|
|
80
|
+
const {
|
|
81
|
+
isLocked: t,
|
|
82
|
+
isUnlocking: s,
|
|
83
|
+
sourceUrl: l,
|
|
84
|
+
redeemUrl: n,
|
|
85
|
+
onUnlockClicked: c,
|
|
86
|
+
onDownloadClicked: o
|
|
87
|
+
} = a;
|
|
88
|
+
return t && c ? /* @__PURE__ */ e(
|
|
89
|
+
"button",
|
|
90
|
+
{
|
|
91
|
+
type: "button",
|
|
92
|
+
onClick: c,
|
|
93
|
+
disabled: s,
|
|
94
|
+
className: "mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none text-white hover:bg-[#2a2928] disabled:opacity-70",
|
|
95
|
+
children: s ? /* @__PURE__ */ e(O, {}) : /* @__PURE__ */ i(z, { children: [
|
|
96
|
+
/* @__PURE__ */ e(w, { className: "size-4", weight: "fill" }),
|
|
97
|
+
"Unlock"
|
|
98
|
+
] })
|
|
99
|
+
}
|
|
100
|
+
) : !t && o && l ? /* @__PURE__ */ i(
|
|
101
|
+
"a",
|
|
102
|
+
{
|
|
103
|
+
href: n ?? l,
|
|
104
|
+
target: "_blank",
|
|
105
|
+
rel: "noopener noreferrer",
|
|
106
|
+
onClick: o,
|
|
107
|
+
className: "mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none !text-white hover:bg-[#2a2928]",
|
|
108
|
+
children: [
|
|
109
|
+
/* @__PURE__ */ e(j, { className: "size-4", weight: "bold" }),
|
|
110
|
+
"Download"
|
|
111
|
+
]
|
|
112
|
+
}
|
|
113
|
+
) : null;
|
|
114
|
+
}, B = (a) => {
|
|
115
|
+
const {
|
|
116
|
+
title: t,
|
|
117
|
+
amountText: s,
|
|
118
|
+
thumbnailUrl: l,
|
|
119
|
+
mimeType: n = "application/octet-stream",
|
|
120
|
+
detail: c,
|
|
121
|
+
onUnlocked: o,
|
|
122
|
+
onUnlockClick: d,
|
|
123
|
+
onDownloadClick: p,
|
|
124
|
+
paymentStatus: m
|
|
125
|
+
} = a, { sourceUrl: r, redeemUrl: U } = (o == null ? void 0 : o()) ?? {}, [L, g] = N(!1), u = r === void 0, k = D(n);
|
|
126
|
+
T(() => {
|
|
127
|
+
r !== void 0 && g(!1);
|
|
128
|
+
}, [r]);
|
|
129
|
+
const C = _(() => {
|
|
130
|
+
d && (g(!0), d());
|
|
131
|
+
}, [d]);
|
|
132
|
+
let f;
|
|
133
|
+
return k === "image" ? f = /* @__PURE__ */ e(
|
|
134
|
+
F,
|
|
135
|
+
{
|
|
136
|
+
sourceUrl: r,
|
|
137
|
+
thumbnailUrl: l,
|
|
138
|
+
mimeType: n,
|
|
139
|
+
title: t,
|
|
140
|
+
paymentStatus: m,
|
|
141
|
+
isLocked: u
|
|
142
|
+
},
|
|
143
|
+
r
|
|
144
|
+
) : k === "document" ? f = /* @__PURE__ */ e(
|
|
145
|
+
M,
|
|
146
|
+
{
|
|
147
|
+
thumbnailUrl: l,
|
|
148
|
+
mimeType: n,
|
|
149
|
+
paymentStatus: m,
|
|
150
|
+
isLocked: u
|
|
151
|
+
}
|
|
152
|
+
) : f = /* @__PURE__ */ e(
|
|
153
|
+
R,
|
|
154
|
+
{
|
|
155
|
+
sourceUrl: r,
|
|
156
|
+
thumbnailUrl: l,
|
|
157
|
+
mimeType: n,
|
|
158
|
+
paymentStatus: m,
|
|
159
|
+
isLocked: u
|
|
160
|
+
},
|
|
161
|
+
r
|
|
162
|
+
), /* @__PURE__ */ i("div", { className: "w-[280px] select-none overflow-hidden rounded-[24px] bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]", children: [
|
|
163
|
+
f,
|
|
164
|
+
/* @__PURE__ */ i("div", { className: "px-4 pb-3 pt-3", children: [
|
|
165
|
+
/* @__PURE__ */ e("p", { className: "mb-1.5 truncate text-base font-medium text-black", children: t }),
|
|
166
|
+
/* @__PURE__ */ i("div", { className: "flex items-center gap-1", children: [
|
|
167
|
+
b(n, {
|
|
168
|
+
className: "size-5 shrink-0 text-black/55",
|
|
169
|
+
weight: "regular"
|
|
170
|
+
}),
|
|
171
|
+
c && /* @__PURE__ */ e("span", { className: "text-xs font-medium text-black/55", children: c }),
|
|
172
|
+
m === "paid" ? /* @__PURE__ */ i(x.Fragment, { children: [
|
|
173
|
+
/* @__PURE__ */ e("span", { className: "text-xs font-medium text-black/55", children: "•" }),
|
|
174
|
+
/* @__PURE__ */ e("span", { className: "text-xs font-medium text-[#008236]", children: "Purchased" }),
|
|
175
|
+
/* @__PURE__ */ e(
|
|
176
|
+
I,
|
|
177
|
+
{
|
|
178
|
+
className: "size-4 text-[#008236]",
|
|
179
|
+
weight: "bold"
|
|
180
|
+
}
|
|
181
|
+
)
|
|
182
|
+
] }) : s && /* @__PURE__ */ i(x.Fragment, { children: [
|
|
183
|
+
/* @__PURE__ */ e("span", { className: "text-xs font-medium text-black/55", children: "•" }),
|
|
184
|
+
/* @__PURE__ */ e("span", { className: "text-xs font-medium text-black/55", children: s })
|
|
185
|
+
] })
|
|
186
|
+
] }),
|
|
187
|
+
/* @__PURE__ */ e(
|
|
188
|
+
A,
|
|
189
|
+
{
|
|
190
|
+
isLocked: u,
|
|
191
|
+
isUnlocking: L,
|
|
192
|
+
sourceUrl: r,
|
|
193
|
+
redeemUrl: U,
|
|
194
|
+
onUnlockClicked: C,
|
|
195
|
+
onDownloadClicked: p
|
|
196
|
+
}
|
|
197
|
+
)
|
|
198
|
+
] })
|
|
199
|
+
] });
|
|
200
|
+
};
|
|
201
|
+
export {
|
|
202
|
+
B as default
|
|
203
|
+
};
|
|
204
|
+
//# sourceMappingURL=Visitor-DyJTWB2_.js.map
|