@linktr.ee/messaging-react 1.30.0 → 1.30.1-rc-1776660256

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.30.0",
+  "version": "1.30.1-rc-1776660256",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",

package/src/components/CustomMessage/index.tsx

@@ -206,7 +206,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
               <LockedAttachment
                 title={message.metadata?.attachment_title}
                 mimeType={message.metadata?.attachment_mime_type}
-                thumbnail={message.metadata?.attachment_thumbnail}
+                thumbnailUrl={message.metadata?.attachment_thumbnail}
                 amountText={message.metadata?.amount_text}
                 detail={message.metadata?.attachment_detail}
                 paymentStatus={message.metadata?.payment_status}

package/src/components/LockedAttachment/LockedAttachment.stories.tsx

@@ -33,40 +33,40 @@ const VARIANTS = [
     title: "Alicia's Workout Plan",
     mimeType: 'video/mp4',
     detail: '1:20',
-    thumbnail: VIDEO_THUMBNAIL_BLURRED,
-    source: VIDEO_SOURCE,
+    thumbnailUrl: VIDEO_THUMBNAIL_BLURRED,
+    sourceUrl: VIDEO_SOURCE,
   },
   {
     label: 'Audio',
     title: 'Morning Meditation',
     mimeType: 'audio/mpeg',
     detail: '4:35',
-    thumbnail: AUDIO_THUMBNAIL,
-    source: AUDIO_SOURCE,
+    thumbnailUrl: AUDIO_THUMBNAIL,
+    sourceUrl: AUDIO_SOURCE,
   },
   {
     label: 'Image',
     title: 'Picture of my cat',
     mimeType: 'image/jpeg',
     detail: '3.2 MB',
-    thumbnail: IMAGE_THUMBNAIL_BLURRED,
-    source: IMAGE_SOURCE,
+    thumbnailUrl: IMAGE_THUMBNAIL_BLURRED,
+    sourceUrl: IMAGE_SOURCE,
   },
   {
     label: 'Document',
     title: 'Strength Training Guide',
     mimeType: 'application/zip',
     detail: '14 files',
-    thumbnail: DOCUMENT_THUMBNAIL,
-    source: DOCUMENT_SOURCE,
+    thumbnailUrl: DOCUMENT_THUMBNAIL,
+    sourceUrl: DOCUMENT_SOURCE,
   },
   {
     label: 'Unknown',
     title: 'Unknown Attachment',
     mimeType: 'application/octet-stream',
     detail: undefined,
-    thumbnail: undefined,
-    source: DOCUMENT_SOURCE,
+    thumbnailUrl: undefined,
+    sourceUrl: DOCUMENT_SOURCE,
   },
 ]
 
@@ -76,28 +76,28 @@ const NO_THUMBNAIL_VARIANTS = [
     title: "Alicia's Workout Plan",
     mimeType: 'video/mp4',
     detail: '1:20',
-    source: VIDEO_SOURCE,
+    sourceUrl: VIDEO_SOURCE,
   },
   {
     label: 'Audio',
     title: 'Morning Meditation',
     mimeType: 'audio/mpeg',
     detail: '4:35',
-    source: AUDIO_SOURCE,
+    sourceUrl: AUDIO_SOURCE,
   },
   {
     label: 'Image',
     title: 'Picture of my cat',
     mimeType: 'image/jpeg',
     detail: '3.2 MB',
-    source: IMAGE_SOURCE,
+    sourceUrl: IMAGE_SOURCE,
   },
   {
     label: 'Document',
     title: 'Strength Training Guide',
     mimeType: 'application/zip',
     detail: '14 files',
-    source: DOCUMENT_SOURCE,
+    sourceUrl: DOCUMENT_SOURCE,
   },
 ]
 
@@ -135,15 +135,15 @@ export const Visitor: StoryFn = () => (
         <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
           Locked
         </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
+        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, sourceUrl }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment
               title={title}
               amountText="AU$9.99"
-              thumbnail={thumbnail}
+              thumbnailUrl={thumbnailUrl}
               mimeType={mimeType}
               detail={detail}
-              onUnlock={withDelay(() => ({ source }))}
+              onUnlock={withDelay(() => ({ sourceUrl }))}
               onDownload={() => {}}
             />
           </td>
@@ -153,16 +153,16 @@ export const Visitor: StoryFn = () => (
         <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
           Purchased
         </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
+        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, sourceUrl }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment
               title={title}
               amountText="AU$9.99"
-              thumbnail={thumbnail}
+              thumbnailUrl={thumbnailUrl}
               mimeType={mimeType}
               detail={detail}
               paymentStatus="paid"
-              onUnlock={withDelay(() => ({ source }))}
+              onUnlock={withDelay(() => ({ sourceUrl }))}
               onDownload={() => {}}
             />
           </td>
@@ -172,12 +172,12 @@ export const Visitor: StoryFn = () => (
         <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
           Unlocked
         </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
+        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, sourceUrl }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment
               title={title}
-              thumbnail={thumbnail}
-              source={source}
+              thumbnailUrl={thumbnailUrl}
+              sourceUrl={sourceUrl}
               mimeType={mimeType}
               detail={detail}
               amountText="AU$9.99"
@@ -199,12 +199,12 @@ export const Creator: StoryFn = () => (
         <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
           Preview
         </td>
-        {VARIANTS.map(({ mimeType, detail, thumbnail, source }) => (
+        {VARIANTS.map(({ mimeType, detail, thumbnailUrl, sourceUrl }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment
               isPreview
-              thumbnail={thumbnail}
-              source={source}
+              thumbnailUrl={thumbnailUrl}
+              sourceUrl={sourceUrl}
               mimeType={mimeType}
               detail={detail}
               placeholderAmountText="A$0.00"
@@ -216,12 +216,12 @@ export const Creator: StoryFn = () => (
         <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
           Pending
         </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
+        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, sourceUrl }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment
               title={title}
-              thumbnail={thumbnail}
-              source={source}
+              thumbnailUrl={thumbnailUrl}
+              sourceUrl={sourceUrl}
               mimeType={mimeType}
               detail={detail}
               amountText="AU$9.99"
@@ -234,13 +234,13 @@ export const Creator: StoryFn = () => (
         <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
           Sent
         </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
+        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, sourceUrl }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment
               
               title={title}
-              thumbnail={thumbnail}
-              source={source}
+              thumbnailUrl={thumbnailUrl}
+              sourceUrl={sourceUrl}
               mimeType={mimeType}
               detail={detail}
               amountText="AU$9.99"
@@ -252,12 +252,12 @@ export const Creator: StoryFn = () => (
         <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
           Sold
         </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
+        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, sourceUrl }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment
               title={title}
-              thumbnail={thumbnail}
-              source={source}
+              thumbnailUrl={thumbnailUrl}
+              sourceUrl={sourceUrl}
               mimeType={mimeType}
               detail={detail}
               amountText="AU$9.99"
@@ -278,11 +278,11 @@ export const NoThumbnail: StoryFn = () => (
         <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
           Creator
         </td>
-        {NO_THUMBNAIL_VARIANTS.map(({ title, mimeType, detail, source }) => (
+        {NO_THUMBNAIL_VARIANTS.map(({ title, mimeType, detail, sourceUrl }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment
               title={title}
-              source={source}
+              sourceUrl={sourceUrl}
               mimeType={mimeType}
               detail={detail}
               amountText="AU$9.99"
@@ -294,14 +294,14 @@ export const NoThumbnail: StoryFn = () => (
         <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
           Locked
         </td>
-        {NO_THUMBNAIL_VARIANTS.map(({ title, mimeType, detail, source }) => (
+        {NO_THUMBNAIL_VARIANTS.map(({ title, mimeType, detail, sourceUrl }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment
               title={title}
               amountText="AU$9.99"
               mimeType={mimeType}
               detail={detail}
-              onUnlock={withDelay(() => ({ source }))}
+              onUnlock={withDelay(() => ({ sourceUrl }))}
               onDownload={() => {}}
             />
           </td>
@@ -311,11 +311,11 @@ export const NoThumbnail: StoryFn = () => (
         <td className="text-xs font-medium text-black/40 pr-4 align-top pt-2">
           Unlocked
         </td>
-        {NO_THUMBNAIL_VARIANTS.map(({ title, mimeType, detail, source }) => (
+        {NO_THUMBNAIL_VARIANTS.map(({ title, mimeType, detail, sourceUrl }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment
               title={title}
-              source={source}
+              sourceUrl={sourceUrl}
               mimeType={mimeType}
               detail={detail}
               amountText="AU$9.99"

package/src/components/LockedAttachment/components/Creator.tsx

@@ -43,7 +43,7 @@ const CloseButton: React.FC<CloseButtonProps> = (props) => {
 }
 
 interface CollapsedThumbnailProps {
-  thumbnail?: string
+  thumbnailUrl?: string
   mimeType: string
   overlayIcon?: React.ElementType
   darkOverlay?: boolean
@@ -51,7 +51,7 @@ interface CollapsedThumbnailProps {
 }
 
 const CollapsedThumbnail: React.FC<CollapsedThumbnailProps> = (props) => {
-  const { thumbnail, mimeType, overlayIcon: OverlayIcon, darkOverlay, onClick } = props
+  const { thumbnailUrl, mimeType, overlayIcon: OverlayIcon, darkOverlay, onClick } = props
   return (
     <button
       type="button"
@@ -63,9 +63,9 @@ const CollapsedThumbnail: React.FC<CollapsedThumbnailProps> = (props) => {
       onClick={onClick}
       aria-label={OverlayIcon ? 'Toggle preview' : undefined}
     >
-      {thumbnail ? (
+      {thumbnailUrl ? (
         <img
-          src={thumbnail}
+          src={thumbnailUrl}
           alt=""
           className="absolute inset-0 h-full w-full object-cover"
         />
@@ -91,13 +91,13 @@ const CollapsedThumbnail: React.FC<CollapsedThumbnailProps> = (props) => {
 
 
 interface AudioPreviewProps {
-  source?: string
-  thumbnail?: string
+  sourceUrl?: string
+  thumbnailUrl?: string
   mimeType: string
 }
 
 const AudioPreview: React.FC<AudioPreviewProps> = (props) => {
-  const { source, thumbnail, mimeType } = props
+  const { sourceUrl, thumbnailUrl, mimeType } = props
   const [playing, setPlaying] = useState(false)
   const [played, setPlayed] = useState(0)
   const [seeking, setSeeking] = useState(false)
@@ -137,7 +137,7 @@ const AudioPreview: React.FC<AudioPreviewProps> = (props) => {
     setPlaying(false)
     setPlayed(0)
     setAudioReady(false)
-  }, [source])
+  }, [sourceUrl])
 
   const getFraction = useCallback(
     (e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent) => {
@@ -185,10 +185,10 @@ const AudioPreview: React.FC<AudioPreviewProps> = (props) => {
 
   return (
     <div className="relative">
-      {source && (
+      {sourceUrl && (
         <audio
           ref={audioRef}
-          src={source}
+          src={sourceUrl}
           loop
           onCanPlay={() => setAudioReady(true)}
           onEnded={() => {
@@ -200,12 +200,12 @@ const AudioPreview: React.FC<AudioPreviewProps> = (props) => {
         </audio>
       )}
       <CollapsedThumbnail
-        thumbnail={thumbnail}
+        thumbnailUrl={thumbnailUrl}
         mimeType={mimeType}
-        overlayIcon={source && audioReady ? (playing ? PauseIcon : PlayIcon) : undefined}
-        onClick={source && audioReady ? toggle : undefined}
+        overlayIcon={sourceUrl && audioReady ? (playing ? PauseIcon : PlayIcon) : undefined}
+        onClick={sourceUrl && audioReady ? toggle : undefined}
       />
-      {source && audioReady && (
+      {sourceUrl && audioReady && (
         <div className="absolute inset-x-0 bottom-0 px-3 pb-2.5 pt-6 bg-gradient-to-t from-black/40 to-transparent">
           <div
             ref={trackRef}
@@ -250,22 +250,22 @@ const AudioPreview: React.FC<AudioPreviewProps> = (props) => {
 }
 
 interface VideoPreviewProps {
-  source?: string
-  thumbnail?: string
+  sourceUrl?: string
+  thumbnailUrl?: string
   mimeType: string
 }
 
 const VideoPreview: React.FC<VideoPreviewProps> = (props) => {
-  const { source, thumbnail, mimeType } = props
+  const { sourceUrl, thumbnailUrl, mimeType } = props
   const [expanded, setExpanded] = useState(false)
   const collapse = () => setExpanded(false)
 
   useEffect(() => {
     setExpanded(false)
-  }, [source])
+  }, [sourceUrl])
 
-  if (!source) {
-    return <CollapsedThumbnail thumbnail={thumbnail} mimeType={mimeType} />
+  if (!sourceUrl) {
+    return <CollapsedThumbnail thumbnailUrl={thumbnailUrl} mimeType={mimeType} />
   }
 
   return (
@@ -275,9 +275,9 @@ const VideoPreview: React.FC<VideoPreviewProps> = (props) => {
       })}
     >
       <MediaPlayer
-        source={source}
+        source={sourceUrl}
         mimeType={mimeType}
-        poster={thumbnail}
+        poster={thumbnailUrl}
         playing={expanded}
         loop
         controls={false}
@@ -292,9 +292,9 @@ const VideoPreview: React.FC<VideoPreviewProps> = (props) => {
           onClick={() => setExpanded(true)}
           aria-label="Expand video preview"
         >
-          {thumbnail ? (
+          {thumbnailUrl ? (
             <img
-              src={thumbnail}
+              src={thumbnailUrl}
               alt=""
               className="absolute inset-0 h-full w-full object-cover"
             />
@@ -317,22 +317,22 @@ const VideoPreview: React.FC<VideoPreviewProps> = (props) => {
 }
 
 interface ImagePreviewProps {
-  source?: string
-  thumbnail?: string
+  sourceUrl?: string
+  thumbnailUrl?: string
   mimeType: string
   title?: string
 }
 
 const ImagePreview: React.FC<ImagePreviewProps> = (props) => {
-  const { source, thumbnail, mimeType, title } = props
+  const { sourceUrl, thumbnailUrl, mimeType, title } = props
   const [expanded, setExpanded] = useState(false)
   const collapse = () => setExpanded(false)
 
   useEffect(() => {
     setExpanded(false)
-  }, [source])
+  }, [sourceUrl])
 
-  if (expanded && source) {
+  if (expanded && sourceUrl) {
     return (
       <div className="relative">
         <button
@@ -341,7 +341,7 @@ const ImagePreview: React.FC<ImagePreviewProps> = (props) => {
           onClick={collapse}
           aria-label="Close preview"
         >
-          <img src={source} alt={title ?? ''} className="block w-full" />
+          <img src={sourceUrl} alt={title ?? ''} className="block w-full" />
         </button>
         <CloseButton onClose={collapse} />
       </div>
@@ -350,10 +350,10 @@ const ImagePreview: React.FC<ImagePreviewProps> = (props) => {
 
   return (
     <CollapsedThumbnail
-      thumbnail={thumbnail}
+      thumbnailUrl={thumbnailUrl}
       mimeType={mimeType}
-      overlayIcon={source ? EyeSlashIcon : undefined}
-      onClick={source ? () => setExpanded(true) : undefined}
+      overlayIcon={sourceUrl ? EyeSlashIcon : undefined}
+      onClick={sourceUrl ? () => setExpanded(true) : undefined}
     />
   )
 }
@@ -363,8 +363,8 @@ const CreatorCard: React.FC<CreatorCardProps> = (props) => {
   const {
     title,
     mimeType = 'application/octet-stream',
-    thumbnail,
-    source,
+    thumbnailUrl,
+    sourceUrl,
     detail,
     amountText,
     placeholderTitle = 'Attachment title',
@@ -380,17 +380,17 @@ const CreatorCard: React.FC<CreatorCardProps> = (props) => {
   let mediaPreview: React.ReactNode
   if (isPreview && sourceType === 'audio') {
     mediaPreview = (
-      <AudioPreview source={source} thumbnail={thumbnail} mimeType={mimeType} />
+      <AudioPreview sourceUrl={sourceUrl} thumbnailUrl={thumbnailUrl} mimeType={mimeType} />
     )
   } else if (isPreview && sourceType === 'video') {
     mediaPreview = (
-      <VideoPreview source={source} thumbnail={thumbnail} mimeType={mimeType} />
+      <VideoPreview sourceUrl={sourceUrl} thumbnailUrl={thumbnailUrl} mimeType={mimeType} />
     )
   } else if (isPreview && sourceType === 'image') {
     mediaPreview = (
       <ImagePreview
-        source={source}
-        thumbnail={thumbnail}
+        sourceUrl={sourceUrl}
+        thumbnailUrl={thumbnailUrl}
         mimeType={mimeType}
         title={title}
       />
@@ -403,7 +403,7 @@ const CreatorCard: React.FC<CreatorCardProps> = (props) => {
         : LockIcon
     mediaPreview = (
       <CollapsedThumbnail
-        thumbnail={thumbnail}
+        thumbnailUrl={thumbnailUrl}
         mimeType={mimeType}
         overlayIcon={lockedOverlayIcon}
         darkOverlay
@@ -412,7 +412,7 @@ const CreatorCard: React.FC<CreatorCardProps> = (props) => {
   }
 
   return (
-    <div className="relative w-[280px] select-none overflow-hidden rounded-[24px] bg-white shadow-card">
+    <div className="relative 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)]">
       {onDismiss && (
         <button
           type="button"

package/src/components/LockedAttachment/components/MediaPlayer.tsx

@@ -197,14 +197,15 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
         if (controls) setPlaying((p) => !p)
       }}
     >
-      {poster && (
+      {/* For audio, poster persists as a visual background. For video, hide once loaded. */}
+      {poster && (sourceType === 'audio' || initialLoad) && (
         <img
           src={poster}
           alt=""
           className="absolute inset-0 h-full w-full object-cover"
         />
       )}
-      {!poster && (
+      {!poster && (sourceType === 'audio' || initialLoad) && (
         <div className="absolute inset-0 flex items-center justify-center">
           {renderTypeIcon(mimeType, {
             className: 'size-12 text-black/20',
@@ -212,11 +213,6 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
           })}
         </div>
       )}
-      {initialLoad && poster && (
-        <div className="absolute inset-0 z-20">
-          <img src={poster} alt="" className="h-full w-full object-cover" />
-        </div>
-      )}
       <div className="absolute inset-0">
         {sourceType === 'audio' ? (
           <audio
@@ -242,7 +238,6 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
           <video
             ref={playerRef as React.RefObject<HTMLVideoElement>}
             src={source}
-            poster={poster}
             loop={loop}
             muted={muted}
             playsInline