@linktr.ee/messaging-react 1.30.0 → 1.31.0-rc-1776677746

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

@@ -21,6 +21,7 @@ export interface CreatorCardProps extends LockedAttachmentBaseProps {
   isPreview?: boolean
   placeholderTitle?: string
   placeholderAmountText?: string
+  sourceUrl?: string
   onDismiss?: () => void
 }
 
@@ -43,7 +44,7 @@ const CloseButton: React.FC<CloseButtonProps> = (props) => {
 }
 
 interface CollapsedThumbnailProps {
-  thumbnail?: string
+  thumbnailUrl?: string
   mimeType: string
   overlayIcon?: React.ElementType
   darkOverlay?: boolean
@@ -51,7 +52,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 +64,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 +92,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)
@@ -133,12 +134,6 @@ const AudioPreview: React.FC<AudioPreviewProps> = (props) => {
 
   const [audioReady, setAudioReady] = useState(false)
 
-  useEffect(() => {
-    setPlaying(false)
-    setPlayed(0)
-    setAudioReady(false)
-  }, [source])
-
   const getFraction = useCallback(
     (e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent) => {
       const track = trackRef.current
@@ -185,10 +180,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 +195,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 +245,18 @@ 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])
-
-  if (!source) {
-    return <CollapsedThumbnail thumbnail={thumbnail} mimeType={mimeType} />
+  if (!sourceUrl) {
+    return <CollapsedThumbnail thumbnailUrl={thumbnailUrl} mimeType={mimeType} />
   }
 
   return (
@@ -275,15 +266,15 @@ const VideoPreview: React.FC<VideoPreviewProps> = (props) => {
       })}
     >
       <MediaPlayer
-        source={source}
+        source={sourceUrl}
         mimeType={mimeType}
-        poster={thumbnail}
+        poster={thumbnailUrl}
         playing={expanded}
-        loop
+        loop={true}
         controls={false}
-        showProgress
+        muted={true}
+        showProgress={true}
         onContainerClick={collapse}
-        muted
       />
       {!expanded && (
         <button
@@ -292,9 +283,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,43 +308,38 @@ 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])
 
-  if (expanded && source) {
+  if (expanded && sourceUrl) {
     return (
       <div className="relative">
         <button
           type="button"
           className="block w-full cursor-pointer border-0 p-0 text-left appearance-none"
-          onClick={collapse}
+          onClick={() => setExpanded(false)}
           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} />
+        <CloseButton onClose={() => setExpanded(false)} />
       </div>
     )
   }
 
   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 +349,8 @@ const CreatorCard: React.FC<CreatorCardProps> = (props) => {
   const {
     title,
     mimeType = 'application/octet-stream',
-    thumbnail,
-    source,
+    thumbnailUrl,
+    sourceUrl,
     detail,
     amountText,
     placeholderTitle = 'Attachment title',
@@ -380,17 +366,18 @@ const CreatorCard: React.FC<CreatorCardProps> = (props) => {
   let mediaPreview: React.ReactNode
   if (isPreview && sourceType === 'audio') {
     mediaPreview = (
-      <AudioPreview source={source} thumbnail={thumbnail} mimeType={mimeType} />
+      <AudioPreview key={sourceUrl} sourceUrl={sourceUrl} thumbnailUrl={thumbnailUrl} mimeType={mimeType} />
     )
   } else if (isPreview && sourceType === 'video') {
     mediaPreview = (
-      <VideoPreview source={source} thumbnail={thumbnail} mimeType={mimeType} />
+      <VideoPreview key={sourceUrl} sourceUrl={sourceUrl} thumbnailUrl={thumbnailUrl} mimeType={mimeType} />
     )
   } else if (isPreview && sourceType === 'image') {
     mediaPreview = (
       <ImagePreview
-        source={source}
-        thumbnail={thumbnail}
+        key={sourceUrl}
+        sourceUrl={sourceUrl}
+        thumbnailUrl={thumbnailUrl}
         mimeType={mimeType}
         title={title}
       />
@@ -403,7 +390,7 @@ const CreatorCard: React.FC<CreatorCardProps> = (props) => {
         : LockIcon
     mediaPreview = (
       <CollapsedThumbnail
-        thumbnail={thumbnail}
+        thumbnailUrl={thumbnailUrl}
         mimeType={mimeType}
         overlayIcon={lockedOverlayIcon}
         darkOverlay
@@ -412,7 +399,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

@@ -5,12 +5,11 @@ import { isDevBuild } from '../../../utils/isDevBuild'
 import { renderTypeIcon } from '../utils/icons'
 import { getSourceType, type AttachmentSourceType } from '../utils/mimeType'
 
-const getPlayerBg = (sourceType: AttachmentSourceType, poster?: string) =>
-  sourceType === 'audio' && !poster ? 'bg-black/5' : 'bg-black'
+const getPlayerBg = (sourceType: AttachmentSourceType, poster?: string) => {
+  return sourceType === 'audio' && !poster ? 'bg-black/5' : 'bg-black'
+}
 
-function getClientXFromEvent(
-  e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent
-): number {
+const getClientXFromEvent = ( e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent ): number => {
   if ('touches' in e) {
     return e.touches[0]?.clientX ?? e.changedTouches[0]?.clientX ?? 0
   }
@@ -71,10 +70,6 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
   const trackRef = useRef<HTMLDivElement>(null)
   const rafRef = useRef<number | null>(null)
 
-  useEffect(() => {
-    setManualPlayRequired(false)
-    setInitialLoad(true)
-  }, [source])
 
   useEffect(() => {
     if (!playing) {
@@ -197,14 +192,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 +208,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 +233,6 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
           <video
             ref={playerRef as React.RefObject<HTMLVideoElement>}
             src={source}
-            poster={poster}
             loop={loop}
             muted={muted}
             playsInline