@linktr.ee/messaging-react 1.27.0 → 1.28.0-rc-1776225927

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.
Files changed (25) hide show
  1. package/dist/Creator-D38dWn2X.js +318 -0
  2. package/dist/Creator-D38dWn2X.js.map +1 -0
  3. package/dist/MediaPlayer-DE9MC6k6.js +599 -0
  4. package/dist/MediaPlayer-DE9MC6k6.js.map +1 -0
  5. package/dist/Visitor-BG-9-3HU.js +199 -0
  6. package/dist/Visitor-BG-9-3HU.js.map +1 -0
  7. package/dist/index.d.ts +7 -6
  8. package/dist/index.js +1 -1
  9. package/package.json +1 -1
  10. package/src/components/CustomMessage/CustomMessage.stories.tsx +1 -1
  11. package/src/components/LockedAttachment/LockedAttachment.stories.tsx +143 -49
  12. package/src/components/LockedAttachment/components/Creator.tsx +410 -112
  13. package/src/components/LockedAttachment/components/MediaPlayer.tsx +112 -52
  14. package/src/components/LockedAttachment/components/Visitor.tsx +206 -143
  15. package/src/components/LockedAttachment/types.ts +2 -3
  16. package/src/components/LockedAttachment/utils/icons.ts +2 -1
  17. package/src/components/LockedAttachment/utils/mimeType.test.ts +29 -7
  18. package/src/components/LockedAttachment/utils/mimeType.ts +3 -1
  19. package/src/types.ts +0 -1
  20. package/dist/Creator-B6M8dB0U.js +0 -87
  21. package/dist/Creator-B6M8dB0U.js.map +0 -1
  22. package/dist/MediaPlayer-DsjlYGGH.js +0 -539
  23. package/dist/MediaPlayer-DsjlYGGH.js.map +0 -1
  24. package/dist/Visitor-CpmFZRGO.js +0 -175
  25. package/dist/Visitor-CpmFZRGO.js.map +0 -1
package/src/components/LockedAttachment/LockedAttachment.stories.tsx CHANGED
@@ -3,20 +3,16 @@ import React from 'react'
3
3
 
4
4
  import LockedAttachment, { type VisitorCardProps } from '.'
5
5
 
6
- const VIDEO_THUMBNAIL = '/video-thumbnail.jpg'
7
6
  const VIDEO_THUMBNAIL_BLURRED = '/video-thumbnail-blurred.jpg'
8
7
  const VIDEO_SOURCE = '/video-source.mp4'
9
8
 
10
- const IMAGE_THUMBNAIL = '/image-thumbnail.jpg'
11
9
  const IMAGE_THUMBNAIL_BLURRED = '/image-thumbnail-blurred.jpg'
12
10
  const IMAGE_SOURCE = '/image-source.jpg'
13
11
 
14
12
  const DOCUMENT_THUMBNAIL = '/document-thumbnail.jpg'
15
- const DOCUMENT_THUMBNAIL_BLURRED = '/document-thumbnail-blurred.jpg'
16
13
  const DOCUMENT_SOURCE = '/document-source.pdf'
17
14
 
18
15
  const AUDIO_THUMBNAIL = '/audio-thumbnail.jpg'
19
- const AUDIO_THUMBNAIL_BLURRED = '/audio-thumbnail-blurred.jpg'
20
16
  const AUDIO_SOURCE = '/audio-source.mp3'
21
17
 
22
18
  const meta: Meta = {
@@ -28,51 +24,116 @@ export default meta
28
24
 
29
25
  type InteractiveProps = Omit<VisitorCardProps, 'onUnlock' | 'onDownload'> & {
30
26
  unlockedSource: string
31
- unlockedPoster?: string
32
27
  }
33
28
 
34
- const Interactive = ({ unlockedSource, unlockedPoster, ...props }: InteractiveProps) => (
29
+ const Interactive = ({ unlockedSource, ...props }: InteractiveProps) => (
35
30
  <LockedAttachment
36
31
  {...props}
37
32
  onUnlock={async () => {
38
- await new Promise(resolve => setTimeout(resolve, 1000))
33
+ await new Promise((resolve) => setTimeout(resolve, 1000))
39
34
  const res = await fetch(unlockedSource)
40
35
  const blob = await res.blob()
41
- return { source: URL.createObjectURL(blob), poster: unlockedPoster }
36
+ return { source: URL.createObjectURL(blob) }
42
37
  }}
43
38
  onDownload={() => {}}
44
39
  />
45
40
  )
46
41
 
47
42
  const VARIANTS = [
48
- { label: 'Video', title: "Alicia's Workout Plan", mimeType: 'video/mp4', detail: '1:20', poster: VIDEO_THUMBNAIL, thumbnail: VIDEO_THUMBNAIL_BLURRED, source: VIDEO_SOURCE },
49
- { label: 'Audio', title: 'Morning Meditation', mimeType: 'audio/mpeg', detail: '4:35', poster: AUDIO_THUMBNAIL, thumbnail: AUDIO_THUMBNAIL_BLURRED, source: AUDIO_SOURCE },
50
- { label: 'Image', title: 'Picture of my cat', mimeType: 'image/jpeg', detail: '3.2 MB', poster: IMAGE_THUMBNAIL, thumbnail: IMAGE_THUMBNAIL_BLURRED, source: IMAGE_SOURCE },
51
- { label: 'Document', title: 'Strength Training Guide', mimeType: 'application/zip', detail: '14 files', poster: DOCUMENT_THUMBNAIL, thumbnail: DOCUMENT_THUMBNAIL_BLURRED, source: DOCUMENT_SOURCE },
52
- { label: 'Unknown', title: 'Unknown Attachment', mimeType: 'application/octet-stream', detail: undefined, poster: undefined, thumbnail: undefined, source: DOCUMENT_SOURCE },
43
+ {
44
+ label: 'Video',
45
+ title: "Alicia's Workout Plan",
46
+ mimeType: 'video/mp4',
47
+ detail: '1:20',
48
+ thumbnail: VIDEO_THUMBNAIL_BLURRED,
49
+ source: VIDEO_SOURCE,
50
+ },
51
+ {
52
+ label: 'Audio',
53
+ title: 'Morning Meditation',
54
+ mimeType: 'audio/mpeg',
55
+ detail: '4:35',
56
+ thumbnail: AUDIO_THUMBNAIL,
57
+ source: AUDIO_SOURCE,
58
+ },
59
+ {
60
+ label: 'Image',
61
+ title: 'Picture of my cat',
62
+ mimeType: 'image/jpeg',
63
+ detail: '3.2 MB',
64
+ thumbnail: IMAGE_THUMBNAIL_BLURRED,
65
+ source: IMAGE_SOURCE,
66
+ },
67
+ {
68
+ label: 'Document',
69
+ title: 'Strength Training Guide',
70
+ mimeType: 'application/zip',
71
+ detail: '14 files',
72
+ thumbnail: DOCUMENT_THUMBNAIL,
73
+ source: DOCUMENT_SOURCE,
74
+ },
75
+ {
76
+ label: 'Unknown',
77
+ title: 'Unknown Attachment',
78
+ mimeType: 'application/octet-stream',
79
+ detail: undefined,
80
+ thumbnail: undefined,
81
+ source: DOCUMENT_SOURCE,
82
+ },
53
83
  ]
54
84
 
55
- const NO_POSTER_VARIANTS = [
56
- { label: 'Video', title: "Alicia's Workout Plan", mimeType: 'video/mp4', detail: '1:20', source: VIDEO_SOURCE },
57
- { label: 'Audio', title: 'Morning Meditation', mimeType: 'audio/mpeg', detail: '4:35', source: AUDIO_SOURCE },
58
- { label: 'Image', title: 'Picture of my cat', mimeType: 'image/jpeg', detail: '3.2 MB', source: IMAGE_SOURCE },
59
- { label: 'Document', title: 'Strength Training Guide', mimeType: 'application/zip', detail: '14 files', source: DOCUMENT_SOURCE },
85
+ const NO_THUMBNAIL_VARIANTS = [
86
+ {
87
+ label: 'Video',
88
+ title: "Alicia's Workout Plan",
89
+ mimeType: 'video/mp4',
90
+ detail: '1:20',
91
+ source: VIDEO_SOURCE,
92
+ },
93
+ {
94
+ label: 'Audio',
95
+ title: 'Morning Meditation',
96
+ mimeType: 'audio/mpeg',
97
+ detail: '4:35',
98
+ source: AUDIO_SOURCE,
99
+ },
100
+ {
101
+ label: 'Image',
102
+ title: 'Picture of my cat',
103
+ mimeType: 'image/jpeg',
104
+ detail: '3.2 MB',
105
+ source: IMAGE_SOURCE,
106
+ },
107
+ {
108
+ label: 'Document',
109
+ title: 'Strength Training Guide',
110
+ mimeType: 'application/zip',
111
+ detail: '14 files',
112
+ source: DOCUMENT_SOURCE,
113
+ },
60
114
  ]
61
115
 
62
116
  const Table = ({ children }: { children: React.ReactNode }) => (
63
117
  <div className="p-12">
64
- <table className="border-separate border-spacing-4">
65
- {children}
66
- </table>
118
+ <table className="border-separate border-spacing-4">{children}</table>
67
119
  </div>
68
120
  )
69
121
 
70
- const TableHead = ({ variants }: { variants: { label: string; mimeType: string }[] }) => (
122
+ const TableHead = ({
123
+ variants,
124
+ }: {
125
+ variants: { label: string; mimeType: string }[]
126
+ }) => (
71
127
  <thead>
72
128
  <tr>
73
129
  <th className="text-left text-xs font-medium text-black/40 pb-2" />
74
130
  {variants.map(({ label, mimeType }) => (
75
- <th key={mimeType} className="text-left text-xs font-medium text-black/40 pb-2">{label}</th>
131
+ <th
132
+ key={mimeType}
133
+ className="text-left text-xs font-medium text-black/40 pb-2"
134
+ >
135
+ {label}
136
+ </th>
76
137
  ))}
77
138
  </tr>
78
139
  </thead>
@@ -83,14 +144,15 @@ export const Visitor: StoryFn = () => (
83
144
  <TableHead variants={VARIANTS} />
84
145
  <tbody>
85
146
  <tr>
86
- <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">Locked</td>
87
- {VARIANTS.map(({ title, mimeType, detail, thumbnail, poster, source }) => (
147
+ <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
148
+ Locked
149
+ </td>
150
+ {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
88
151
  <td key={mimeType} className="align-top">
89
152
  <Interactive
90
153
  title={title}
91
154
  amountText="AU$9.99"
92
155
  thumbnail={thumbnail}
93
- poster={poster}
94
156
  mimeType={mimeType}
95
157
  detail={detail}
96
158
  unlockedSource={source}
@@ -99,14 +161,15 @@ export const Visitor: StoryFn = () => (
99
161
  ))}
100
162
  </tr>
101
163
  <tr>
102
- <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">Purchased</td>
103
- {VARIANTS.map(({ title, mimeType, detail, thumbnail, poster, source }) => (
164
+ <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
165
+ Purchased
166
+ </td>
167
+ {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
104
168
  <td key={mimeType} className="align-top">
105
169
  <Interactive
106
170
  title={title}
107
171
  amountText="AU$9.99"
108
172
  thumbnail={thumbnail}
109
- unlockedPoster={poster}
110
173
  mimeType={mimeType}
111
174
  detail={detail}
112
175
  unlockedSource={source}
@@ -116,12 +179,14 @@ export const Visitor: StoryFn = () => (
116
179
  ))}
117
180
  </tr>
118
181
  <tr>
119
- <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">Unlocked</td>
120
- {VARIANTS.map(({ title, mimeType, detail, poster, source }) => (
182
+ <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
183
+ Unlocked
184
+ </td>
185
+ {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
121
186
  <td key={mimeType} className="align-top">
122
187
  <LockedAttachment
123
188
  title={title}
124
- poster={poster}
189
+ thumbnail={thumbnail}
125
190
  source={source}
126
191
  mimeType={mimeType}
127
192
  detail={detail}
@@ -141,13 +206,15 @@ export const Creator: StoryFn = () => (
141
206
  <TableHead variants={VARIANTS} />
142
207
  <tbody>
143
208
  <tr>
144
- <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">Preview</td>
145
- {VARIANTS.map(({ mimeType, detail, thumbnail, poster, source }) => (
209
+ <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
210
+ Preview
211
+ </td>
212
+ {VARIANTS.map(({ mimeType, detail, thumbnail, source }) => (
146
213
  <td key={mimeType} className="align-top">
147
214
  <LockedAttachment
148
215
  isCreator
216
+ isPreview
149
217
  thumbnail={thumbnail}
150
- poster={poster}
151
218
  source={source}
152
219
  mimeType={mimeType}
153
220
  detail={detail}
@@ -157,14 +224,34 @@ export const Creator: StoryFn = () => (
157
224
  ))}
158
225
  </tr>
159
226
  <tr>
160
- <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">Sent</td>
161
- {VARIANTS.map(({ title, mimeType, detail, thumbnail, poster, source }) => (
227
+ <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
228
+ Pending
229
+ </td>
230
+ {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
231
+ <td key={mimeType} className="align-top">
232
+ <LockedAttachment
233
+ isCreator
234
+ title={title}
235
+ thumbnail={thumbnail}
236
+ source={source}
237
+ mimeType={mimeType}
238
+ detail={detail}
239
+ amountText="AU$9.99"
240
+ onDismiss={() => alert('Dismissed')}
241
+ />
242
+ </td>
243
+ ))}
244
+ </tr>
245
+ <tr>
246
+ <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
247
+ Sent
248
+ </td>
249
+ {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
162
250
  <td key={mimeType} className="align-top">
163
251
  <LockedAttachment
164
252
  isCreator
165
253
  title={title}
166
254
  thumbnail={thumbnail}
167
- poster={poster}
168
255
  source={source}
169
256
  mimeType={mimeType}
170
257
  detail={detail}
@@ -174,14 +261,15 @@ export const Creator: StoryFn = () => (
174
261
  ))}
175
262
  </tr>
176
263
  <tr>
177
- <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">Sold</td>
178
- {VARIANTS.map(({ title, mimeType, detail, thumbnail, poster, source }) => (
264
+ <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
265
+ Sold
266
+ </td>
267
+ {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
179
268
  <td key={mimeType} className="align-top">
180
269
  <LockedAttachment
181
270
  isCreator
182
271
  title={title}
183
272
  thumbnail={thumbnail}
184
- poster={poster}
185
273
  source={source}
186
274
  mimeType={mimeType}
187
275
  detail={detail}
@@ -195,13 +283,15 @@ export const Creator: StoryFn = () => (
195
283
  </Table>
196
284
  )
197
285
 
198
- export const NoPoster: StoryFn = () => (
286
+ export const NoThumbnail: StoryFn = () => (
199
287
  <Table>
200
- <TableHead variants={NO_POSTER_VARIANTS} />
288
+ <TableHead variants={NO_THUMBNAIL_VARIANTS} />
201
289
  <tbody>
202
290
  <tr>
203
- <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">Creator</td>
204
- {NO_POSTER_VARIANTS.map(({ title, mimeType, detail, source }) => (
291
+ <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
292
+ Creator
293
+ </td>
294
+ {NO_THUMBNAIL_VARIANTS.map(({ title, mimeType, detail, source }) => (
205
295
  <td key={mimeType} className="align-top">
206
296
  <LockedAttachment
207
297
  isCreator
@@ -215,8 +305,10 @@ export const NoPoster: StoryFn = () => (
215
305
  ))}
216
306
  </tr>
217
307
  <tr>
218
- <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">Locked</td>
219
- {NO_POSTER_VARIANTS.map(({ title, mimeType, detail, source }) => (
308
+ <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
309
+ Locked
310
+ </td>
311
+ {NO_THUMBNAIL_VARIANTS.map(({ title, mimeType, detail, source }) => (
220
312
  <td key={mimeType} className="align-top">
221
313
  <Interactive
222
314
  title={title}
@@ -229,8 +321,10 @@ export const NoPoster: StoryFn = () => (
229
321
  ))}
230
322
  </tr>
231
323
  <tr>
232
- <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">Unlocked</td>
233
- {NO_POSTER_VARIANTS.map(({ title, mimeType, detail, source }) => (
324
+ <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
325
+ Unlocked
326
+ </td>
327
+ {NO_THUMBNAIL_VARIANTS.map(({ title, mimeType, detail, source }) => (
234
328
  <td key={mimeType} className="align-top">
235
329
  <LockedAttachment
236
330
  title={title}