@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.
@@ -1,6 +1,6 @@
1
1
  import { jsxs as z, jsx as n } from "react/jsx-runtime";
2
- import { FileIcon as H, 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 ie, FileDocIcon as re, FilePdfIcon as oe, CircleNotchIcon as se, PlayIcon as $, PauseIcon as le } from "@phosphor-icons/react";
3
- import ce, { useState as s, useRef as M, useEffect as x, useCallback as C } from "react";
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 _(a) {
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 i = ue.find(
19
- ([r]) => r.test(a)
18
+ const r = ue.find(
19
+ ([i]) => i.test(a)
20
20
  );
21
- return i ? i[1] : "generic";
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: H
27
+ document: _
28
28
  }, me = {
29
29
  pdf: oe,
30
- doc: re,
31
- xls: ie,
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: H
37
+ generic: _
38
38
  };
39
39
  function he(a) {
40
- const i = _(a);
41
- return i !== "document" ? fe[i] : me[de(a)];
40
+ const r = X(a);
41
+ return r !== "document" ? fe[r] : me[de(a)];
42
42
  }
43
- function ve(a, i) {
44
- return ce.createElement(he(a), i);
43
+ function pe(a, r) {
44
+ return ce.createElement(he(a), r);
45
45
  }
46
- const pe = (a, i) => a === "audio" && !i ? "bg-black/5" : "bg-black";
47
- function we(a) {
48
- var i, r;
49
- return "touches" in a ? ((i = a.touches[0]) == null ? void 0 : i.clientX) ?? ((r = a.changedTouches[0]) == null ? void 0 : r.clientX) ?? 0 : a.clientX;
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: i,
54
- poster: r,
55
- autoPlay: X = !1,
51
+ mimeType: r,
52
+ poster: i,
53
+ autoPlay: q = !1,
56
54
  playing: u,
57
- loop: k = !1,
58
- controls: p = !0,
59
- showProgress: q = !1,
60
- onContainerClick: N,
55
+ loop: y = !1,
56
+ controls: v = !0,
57
+ showProgress: K = !1,
58
+ onContainerClick: x,
61
59
  muted: D = !1
62
60
  }) => {
63
- const R = _(i), [d, o] = s(X), A = M(u);
64
- x(() => {
65
- u !== void 0 && u !== A.current && (A.current = u, o(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, S] = s(!1), [j, O] = s(!1), [L, K] = s(null), [B, m] = s(!1), [U, T] = s(!0), [I, b] = s(!1), h = M(null), F = M(null), l = M(null);
68
- x(() => {
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]), x(() => {
78
+ }, [d, f]), L(() => {
83
79
  const e = h.current;
84
80
  e && (d ? e.play().catch((t) => {
85
- o(!1), b(!0);
81
+ o(!1), I(!0);
86
82
  }) : e.pause());
87
83
  }, [d]);
88
- const W = C(() => {
89
- b(!1), o(!0);
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 v = t.getBoundingClientRect();
90
+ const p = t.getBoundingClientRect();
95
91
  return Math.max(
96
92
  0,
97
- Math.min(1, (we(e) - v.left) / v.width)
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(), S(!0);
101
+ e.stopPropagation(), A(!0);
106
102
  const t = P(e);
107
103
  g(t), c(t);
108
104
  };
109
- x(() => {
105
+ L(() => {
110
106
  if (!f) return;
111
- const e = (v) => g(P(v)), t = (v) => {
112
- S(!1), c(P(v));
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 = L ? { aspectRatio: String(L) } : void 0, G = L ? "" : " aspect-video", y = Math.round(w * 100);
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 ${pe(R, r)}${G}`,
120
+ className: `relative cursor-pointer overflow-hidden ${ve(k, i)}${G}`,
125
121
  style: V,
126
122
  onClick: () => {
127
- if (!I) {
128
- if (N) {
129
- N();
123
+ if (!N) {
124
+ if (x) {
125
+ x();
130
126
  return;
131
127
  }
132
- p && o((e) => !e);
128
+ v && o((e) => !e);
133
129
  }
134
130
  },
135
131
  onKeyDown: (e) => {
136
- if (!(e.key !== "Enter" && e.key !== " ") && (e.preventDefault(), !I)) {
137
- if (N) {
138
- N();
132
+ if (!(e.key !== "Enter" && e.key !== " ") && (e.preventDefault(), !N)) {
133
+ if (x) {
134
+ x();
139
135
  return;
140
136
  }
141
- p && o((t) => !t);
137
+ v && o((t) => !t);
142
138
  }
143
139
  },
144
140
  children: [
145
- r && /* @__PURE__ */ n(
141
+ i && (k === "audio" || O) && /* @__PURE__ */ n(
146
142
  "img",
147
143
  {
148
- src: r,
144
+ src: i,
149
145
  alt: "",
150
146
  className: "absolute inset-0 h-full w-full object-cover"
151
147
  }
152
148
  ),
153
- !r && /* @__PURE__ */ n("div", { className: "absolute inset-0 flex items-center justify-center", children: ve(i, {
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
- U && r && /* @__PURE__ */ n("div", { className: "absolute inset-0 z-20", children: /* @__PURE__ */ n("img", { src: r, alt: "", className: "h-full w-full object-cover" }) }),
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: k,
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), T(!1);
163
+ m(!1), W(!1);
169
164
  },
170
165
  onWaiting: () => m(!0),
171
- onPlay: () => b(!1),
166
+ onPlay: () => I(!1),
172
167
  onEnded: () => {
173
- k || (o(!1), g(0));
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
- poster: r,
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), T(!1);
183
+ m(!1), W(!1);
190
184
  },
191
185
  onWaiting: () => m(!0),
192
- onPlay: () => b(!1),
186
+ onPlay: () => I(!1),
193
187
  onLoadedMetadata: () => {
194
188
  const e = h.current;
195
- e instanceof HTMLVideoElement && e.videoWidth && e.videoHeight && K(e.videoWidth / e.videoHeight);
189
+ e instanceof HTMLVideoElement && e.videoWidth && e.videoHeight && B(e.videoWidth / e.videoHeight);
196
190
  },
197
191
  onEnded: () => {
198
- k || (o(!1), g(0));
192
+ y || (o(!1), g(0));
199
193
  },
200
194
  children: /* @__PURE__ */ n("track", { kind: "captions" })
201
195
  }
202
196
  ) }),
203
- B && !I && /* @__PURE__ */ n("div", { className: "absolute inset-0 z-10 flex items-center justify-center", children: /* @__PURE__ */ n(
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
- I && !p && /* @__PURE__ */ n(
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(), W();
212
+ e.stopPropagation(), $();
219
213
  },
220
214
  onKeyDown: (e) => {
221
- e.key !== "Enter" && e.key !== " " || (e.preventDefault(), e.stopPropagation(), W());
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($, { className: "size-9 translate-x-0.5", weight: "fill" }) })
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
- q && !p && /* @__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(
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": y,
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: `${y}%` }
241
+ style: { width: `${b}%` }
248
242
  }
249
243
  ) })
250
244
  }
251
245
  ) }),
252
- p && /* @__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: [
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($, { className: "size-5 translate-x-px", weight: "fill" })
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": y,
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: () => O(!0),
280
- onMouseLeave: () => O(!1),
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 ${j || f ? "h-1.5" : "h-1"}`,
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: `${y}%` }
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 ${j || f ? "scale-100 opacity-100" : "scale-0 opacity-0"}`,
302
- style: { left: `${y}%` }
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
- _ as g,
316
- ve as r
309
+ X as g,
310
+ pe as r
317
311
  };
318
- //# sourceMappingURL=MediaPlayer-Bf-xPB8Z.js.map
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