@linktr.ee/messaging-react 1.37.0 → 1.38.0-rc-1777617124

package/src/components/MediaMessage/index.tsx

@@ -1,11 +1,12 @@
-import { CircleNotchIcon, DownloadSimpleIcon, LinkIcon, XIcon } from '@phosphor-icons/react'
-import React, { useEffect, useRef, useState } from 'react'
+import { CircleNotchIcon, DownloadSimpleIcon, LinkIcon } from '@phosphor-icons/react'
+import React, { useState } from 'react'
 import type { Attachment, LocalMessage } from 'stream-chat'
 
+import AttachmentCard, {
+  AttachmentThumbnail,
+  getSourceType,
+} from '../AttachmentCard'
 import { Avatar } from '../Avatar'
-import MediaPlayer from '../LockedAttachment/components/MediaPlayer'
-import { renderTypeIcon } from '../LockedAttachment/utils/icons'
-import { getSourceType } from '../LockedAttachment/utils/mimeType'
 
 function formatBytes(bytes: number): string {
   if (bytes < 1024) return `${bytes} B`
@@ -13,38 +14,94 @@ function formatBytes(bytes: number): string {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
 }
 
-function cardClass(isMyMessage: boolean) {
+function linkCardShellClass(isMyMessage: boolean) {
   const bg = isMyMessage ? 'bg-[#121110]' : 'bg-[#F3F3F1]'
   return `w-[280px] select-none overflow-hidden rounded-[24px] ${bg} shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]`
 }
 
-function primaryText(isMyMessage: boolean) {
+function linkThumbnailBg(isMyMessage: boolean) {
+  return isMyMessage ? 'bg-white/10' : 'bg-black/5'
+}
+
+function linkPrimaryText(isMyMessage: boolean) {
   return isMyMessage ? 'text-white' : 'text-black'
 }
 
-function secondaryText(isMyMessage: boolean) {
+function linkSecondaryText(isMyMessage: boolean) {
   return isMyMessage ? 'text-white/55' : 'text-black/55'
 }
 
-function tertiaryText(isMyMessage: boolean) {
+function linkTertiaryText(isMyMessage: boolean) {
   return isMyMessage ? 'text-white/40' : 'text-black/40'
 }
 
-function thumbnailBg(isMyMessage: boolean) {
-  return isMyMessage ? 'bg-white/10' : 'bg-black/5'
-}
-
-function iconColor(isMyMessage: boolean) {
+function linkIconColor(isMyMessage: boolean) {
   return isMyMessage ? 'text-white/20' : 'text-black/20'
 }
 
-function buttonBg(isMyMessage: boolean) {
-  return isMyMessage ? 'bg-white/10 hover:bg-white/15' : 'bg-black/[0.06] hover:bg-black/10'
+/** Link preview (OG) — no download; opens in a new tab. */
+const LinkCard: React.FC<{
+  attachment: Attachment
+  isMyMessage: boolean
+}> = ({ attachment, isMyMessage }) => {
+  const { title, text, image_url, og_scrape_url, title_link } = attachment
+  const rawUrl = og_scrape_url ?? title_link
+  const url =
+    typeof rawUrl === 'string' && rawUrl.trim() !== '' ? rawUrl : undefined
+
+  const body = (
+    <React.Fragment>
+      <div className="p-2">
+        {image_url ? (
+          <img
+            src={image_url}
+            alt={title ?? ''}
+            className="aspect-video w-full rounded-[20px] object-cover"
+          />
+        ) : (
+          <div
+            className={`aspect-video w-full rounded-[20px] ${linkThumbnailBg(isMyMessage)} flex items-center justify-center`}
+          >
+            <LinkIcon className={`size-12 ${linkIconColor(isMyMessage)}`} />
+          </div>
+        )}
+      </div>
+      <div className="px-3 pb-3">
+        {title && (
+          <p className={`truncate text-[14px] font-medium leading-5 ${linkPrimaryText(isMyMessage)}`}>
+            {title}
+          </p>
+        )}
+        {text && (
+          <p className={`truncate text-[12px] leading-4 ${linkSecondaryText(isMyMessage)}`}>{text}</p>
+        )}
+        {url && (
+          <p className={`mt-1 truncate text-[12px] leading-4 ${linkTertiaryText(isMyMessage)}`}>
+            {url}
+          </p>
+        )}
+      </div>
+    </React.Fragment>
+  )
+
+  if (url) {
+    return (
+      <a href={url} target="_blank" rel="noopener noreferrer" className="block no-underline">
+        {body}
+      </a>
+    )
+  }
+
+  return <div className="block">{body}</div>
 }
 
-// ---------------------------------------------------------------------------
-// Download button (shared across all media types)
-// ---------------------------------------------------------------------------
+export function resolveLinkAttachment(
+  message: LocalMessage
+): Attachment | undefined {
+  return message.attachments?.find(
+    (a) => a.type === 'link' || (!!a.og_scrape_url && !a.asset_url)
+  )
+}
 
 async function triggerDownload(url: string, filename?: string): Promise<void> {
   let name: string
@@ -64,16 +121,14 @@ async function triggerDownload(url: string, filename?: string): Promise<void> {
   URL.revokeObjectURL(objectUrl)
 }
 
-const DownloadButton: React.FC<{ url: string; filename?: string; isMyMessage: boolean }> = ({
+const DownloadAction: React.FC<{ url: string; filename?: string }> = ({
   url,
   filename,
-  isMyMessage,
 }) => {
   const [busy, setBusy] = useState(false)
 
   const handleClick = (e: React.MouseEvent) => {
     e.stopPropagation()
-    // Open synchronously so the browser treats it as a user gesture (prevents popup blocking)
     const fallback = window.open('', '_blank', 'noopener,noreferrer')
     setBusy(true)
     triggerDownload(url, filename)
@@ -87,245 +142,31 @@ const DownloadButton: React.FC<{ url: string; filename?: string; isMyMessage: bo
       type="button"
       onClick={handleClick}
       disabled={busy}
-      className={`flex size-8 items-center justify-center rounded-full ${buttonBg(isMyMessage)} disabled:opacity-50`}
-      aria-label="Download"
+      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"
     >
       {busy ? (
-        <CircleNotchIcon className={`size-4 animate-spin ${secondaryText(isMyMessage)}`} weight="bold" />
+        <CircleNotchIcon className="size-4 animate-spin text-white" weight="bold" />
       ) : (
-        <DownloadSimpleIcon className={`size-4 ${secondaryText(isMyMessage)}`} weight="bold" />
+        <React.Fragment>
+          <DownloadSimpleIcon className="size-4 text-white" weight="bold" />
+          Download
+        </React.Fragment>
       )}
     </button>
   )
 }
 
-// ---------------------------------------------------------------------------
-// Chin: title + file size + download
-// ---------------------------------------------------------------------------
-
-const MediaMeta: React.FC<{
-  mimeType: string
+export interface MediaMessageResolved {
+  resolvedUrl: string
+  resolvedType: string
   title?: string
   fileSize?: number
-  url: string
-  isMyMessage: boolean
-}> = ({ mimeType, title, fileSize, url, isMyMessage }) => (
-  <div className="flex items-start gap-2 px-4 pb-3 pt-3">
-    <div className="min-w-0 flex-1">
-      {title && (
-        <p className={`truncate text-base font-medium ${primaryText(isMyMessage)}`}>
-          {title}
-        </p>
-      )}
-      {fileSize !== undefined && (
-        <div className="flex items-center gap-1">
-          {renderTypeIcon(mimeType, {
-            className: `size-5 shrink-0 ${secondaryText(isMyMessage)}`,
-            weight: 'regular',
-          })}
-          <span className={`text-xs font-medium ${secondaryText(isMyMessage)}`}>
-            {formatBytes(fileSize)}
-          </span>
-        </div>
-      )}
-    </div>
-    <div className="flex shrink-0 items-center gap-1 pt-0.5">
-      <DownloadButton url={url} filename={title} isMyMessage={isMyMessage} />
-    </div>
-  </div>
-)
-
-// ---------------------------------------------------------------------------
-// Document card: PDF (click → viewer) or unknown (link only)
-// ---------------------------------------------------------------------------
-
-const FileCard: React.FC<{
-  url: string
-  mimeType: string
-  title?: string
-  fileSize?: number
-  isMyMessage: boolean
-  onExpand?: () => void
-}> = ({ url, mimeType, title, fileSize, isMyMessage, onExpand }) => {
-  const thumbnailContent = (
-    <div
-      className={`aspect-video w-full ${thumbnailBg(isMyMessage)} flex items-center justify-center`}
-    >
-      {renderTypeIcon(mimeType, {
-        className: `size-12 ${iconColor(isMyMessage)}`,
-        weight: 'regular',
-      })}
-    </div>
-  )
-
-  return (
-    <div>
-      {onExpand ? (
-        <button
-          type="button"
-          onClick={onExpand}
-          className="block w-full"
-          aria-label="Open PDF viewer"
-        >
-          {thumbnailContent}
-        </button>
-      ) : (
-        <a href={url} target="_blank" rel="noopener noreferrer" className="block no-underline">
-          {thumbnailContent}
-        </a>
-      )}
-      <MediaMeta
-        mimeType={mimeType}
-        title={title}
-        fileSize={fileSize}
-        url={url}
-        isMyMessage={isMyMessage}
-      />
-    </div>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// Link preview card (no download / no viewer)
-// ---------------------------------------------------------------------------
-
-const LinkCard: React.FC<{
-  attachment: Attachment
-  isMyMessage: boolean
-}> = ({ attachment, isMyMessage }) => {
-  const { title, text, image_url, og_scrape_url, title_link } = attachment
-  const url = og_scrape_url ?? title_link
-
-  return (
-    <a href={url} target="_blank" rel="noopener noreferrer" className="block no-underline">
-      <div className="p-2">
-        {image_url ? (
-          <img
-            src={image_url}
-            alt={title ?? ''}
-            className="aspect-video w-full rounded-[20px] object-cover"
-          />
-        ) : (
-          <div
-            className={`aspect-video w-full rounded-[20px] ${thumbnailBg(isMyMessage)} flex items-center justify-center`}
-          >
-            <LinkIcon className={`size-12 ${iconColor(isMyMessage)}`} />
-          </div>
-        )}
-      </div>
-      <div className="px-3 pb-3">
-        {title && (
-          <p className={`truncate text-[14px] font-medium leading-5 ${primaryText(isMyMessage)}`}>
-            {title}
-          </p>
-        )}
-        {text && (
-          <p className={`truncate text-[12px] leading-4 ${secondaryText(isMyMessage)}`}>{text}</p>
-        )}
-        {url && (
-          <p className={`mt-1 truncate text-[12px] leading-4 ${tertiaryText(isMyMessage)}`}>
-            {url}
-          </p>
-        )}
-      </div>
-    </a>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// Full-screen media viewer (image, video, PDF)
-// ---------------------------------------------------------------------------
-
-const MediaViewer: React.FC<{
-  sourceType: string
-  url: string
-  mimeType: string
-  title?: string
-  poster?: string
-  onClose: () => void
-}> = ({ sourceType, url, mimeType, title, poster, onClose }) => {
-  const dialogRef = useRef<HTMLDialogElement>(null)
-
-  useEffect(() => {
-    const el = dialogRef.current
-    el?.showModal()
-    return () => {
-      if (el?.open) el.close()
-    }
-  }, [])
-
-  const handleClick = (e: React.MouseEvent<HTMLDialogElement>) => {
-    if (e.target === dialogRef.current) onClose()
-  }
-
-  const isPdf = mimeType === 'application/pdf'
-
-  return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-    <dialog
-      ref={dialogRef}
-      className="mes-media-viewer"
-      onClose={onClose}
-      onClick={handleClick}
-    >
-      <div className="relative flex h-full w-full items-center justify-center p-6">
-        <button
-          type="button"
-          onClick={onClose}
-          className="absolute right-4 top-4 z-10 flex size-10 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20"
-          aria-label="Close"
-        >
-          <XIcon className="size-5" weight="bold" />
-        </button>
-
-        {sourceType === 'image' ? (
-          <img
-            src={url}
-            alt={title ?? ''}
-            className="max-h-[90vh] max-w-[90vw] rounded-2xl object-contain"
-          />
-        ) : isPdf ? (
-          <div className="flex h-full w-full max-w-4xl flex-col pt-14">
-            {title && (
-              <p className="mb-2 shrink-0 truncate text-sm font-medium text-white/70">{title}</p>
-            )}
-            <iframe
-              src={url}
-              title={title ?? 'Document'}
-              className="w-full flex-1 rounded-xl"
-            />
-          </div>
-        ) : (
-          <div className="w-full max-w-2xl">
-            {title && (
-              <p className="mb-4 text-center text-sm font-medium text-white/70">{title}</p>
-            )}
-            <MediaPlayer source={url} mimeType={mimeType} poster={poster} controls />
-          </div>
-        )}
-      </div>
-    </dialog>
-  )
+  thumbnailUrl?: string
 }
 
-// ---------------------------------------------------------------------------
-// MediaMessage
-// ---------------------------------------------------------------------------
-
-export interface MediaMessageProps {
+export function resolveMediaFromMessage(
   message: LocalMessage
-  isMyMessage?: boolean
-}
-
-export const MediaMessage: React.FC<MediaMessageProps> = ({
-  message,
-  isMyMessage = false,
-}) => {
-  const [viewerOpen, setViewerOpen] = useState(false)
-
-  const linkAttachment = message.attachments?.find(
-    (a) => a.type === 'link' || (a.og_scrape_url && !a.asset_url)
-  )
+): MediaMessageResolved | null {
   const videoAttachment = message.attachments?.find(
     (a) => a.type === 'video' && a.asset_url
   )
@@ -348,6 +189,8 @@ export const MediaMessage: React.FC<MediaMessageProps> = ({
     audioAttachment?.asset_url ??
     fileAttachment?.asset_url
 
+  if (!resolvedUrl) return null
+
   const resolvedType =
     activeAttachment?.mime_type ??
     (activeAttachment?.type === 'image'
@@ -358,119 +201,166 @@ export const MediaMessage: React.FC<MediaMessageProps> = ({
           ? 'audio/mpeg'
           : 'application/octet-stream')
 
-  if (!linkAttachment && !resolvedUrl) return null
-
-  const sourceType = resolvedUrl ? getSourceType(resolvedType) : null
   const title = (activeAttachment as { title?: string } | undefined)?.title
   const fileSize = (activeAttachment as { file_size?: number } | undefined)?.file_size
   const thumbnailUrl = (videoAttachment as { thumb_url?: string } | undefined)?.thumb_url
-  const isPdf = resolvedType === 'application/pdf'
+
+  return {
+    resolvedUrl,
+    resolvedType,
+    title,
+    fileSize,
+    thumbnailUrl,
+  }
+}
+
+/** Dark card (sent / own message) — matches LockedAttachment.Creator preview without toggle. */
+const Creator: React.FC<MediaMessageResolved> = ({
+  resolvedUrl,
+  resolvedType,
+  title,
+  fileSize,
+  thumbnailUrl,
+}) => {
+  const detail = fileSize !== undefined ? formatBytes(fileSize) : undefined
+
+  return (
+    <AttachmentCard
+      variant="dark"
+      title={title}
+      placeholderTitle=""
+      mimeType={resolvedType}
+      detail={detail}
+      thumbnail={
+        <AttachmentThumbnail
+          mimeType={resolvedType}
+          sourceUrl={resolvedUrl}
+          thumbnailUrl={thumbnailUrl}
+          title={title}
+          variant="dark"
+        />
+      }
+    />
+  )
+}
+
+/** Light card (received) — matches LockedAttachment.Visitor unlocked without Purchased copy. */
+const Visitor: React.FC<MediaMessageResolved> = ({
+  resolvedUrl,
+  resolvedType,
+  title,
+  fileSize,
+  thumbnailUrl,
+}) => {
+  const sourceType = getSourceType(resolvedType)
+  const detail = fileSize !== undefined ? formatBytes(fileSize) : undefined
+
+  return (
+    <AttachmentCard
+      variant="light"
+      title={title}
+      mimeType={resolvedType}
+      detail={detail}
+      thumbnail={
+        <AttachmentThumbnail
+          mimeType={resolvedType}
+          sourceUrl={resolvedUrl}
+          thumbnailUrl={thumbnailUrl}
+          title={title}
+          variant="light"
+          containedImage={sourceType === 'image' || sourceType === 'document'}
+        />
+      }
+      action={<DownloadAction url={resolvedUrl} filename={title} />}
+    />
+  )
+}
+
+export interface MediaMessageProps {
+  message: LocalMessage
+  isMyMessage?: boolean
+}
+
+const MediaMessageRoot: React.FC<MediaMessageProps> = ({
+  message,
+  isMyMessage = false,
+}) => {
+  const linkAttachment = resolveLinkAttachment(message)
+  const resolved = resolveMediaFromMessage(message)
+  if (!linkAttachment && !resolved) return null
 
   const messageClass = isMyMessage
     ? 'str-chat__message str-chat__message-simple str-chat__message--me str-chat__message-simple--me'
     : 'str-chat__message str-chat__message-simple str-chat__message--other'
 
-  // Only images, video (from poster), and PDFs support the full-screen viewer
-  const canView = sourceType === 'image' || sourceType === 'video' || isPdf
-
   return (
-    <>
-      <div className={messageClass}>
-        {!isMyMessage && message.user && (
-          <Avatar
-            className="str-chat__avatar str-chat__message-sender-avatar"
-            id={message.user.id}
-            image={message.user.image}
-            name={message.user.name ?? message.user.id}
-          />
-        )}
-        <div
-          className="str-chat__message-inner"
-          style={{ marginInlineEnd: 0, marginInlineStart: 0 }}
-        >
-          <div className="str-chat__message-bubble-wrapper">
-            <div
-              className="str-chat__message-bubble"
-              style={{ padding: 0, borderRadius: 0, overflow: 'visible', background: 'transparent' }}
-            >
-              <div className={cardClass(isMyMessage)}>
-                {linkAttachment ? (
-                  <LinkCard attachment={linkAttachment} isMyMessage={isMyMessage} />
-                ) : sourceType === 'image' ? (
-                  <>
-                    <button
-                      type="button"
-                      onClick={() => setViewerOpen(true)}
-                      className="block w-full cursor-zoom-in"
-                    >
-                      <img src={resolvedUrl!} alt={title ?? ''} className="block w-full" />
-                    </button>
-                    <MediaMeta
-                      mimeType={resolvedType}
-                      title={title}
-                      fileSize={fileSize}
-                      url={resolvedUrl!}
-                      isMyMessage={isMyMessage}
-                    />
-                  </>
-                ) : sourceType === 'video' ? (
-                  <>
-                    <MediaPlayer
-                      source={resolvedUrl!}
-                      mimeType={resolvedType}
-                      poster={thumbnailUrl}
-                      controls
-                      onContainerClick={() => setViewerOpen(true)}
-                    />
-                    <MediaMeta
-                      mimeType={resolvedType}
-                      title={title}
-                      fileSize={fileSize}
-                      url={resolvedUrl!}
-                      isMyMessage={isMyMessage}
-                    />
-                  </>
-                ) : sourceType === 'audio' ? (
-                  <>
-                    <MediaPlayer
-                      source={resolvedUrl!}
-                      mimeType={resolvedType}
-                      controls
-                    />
-                    <MediaMeta
-                      mimeType={resolvedType}
-                      title={title}
-                      fileSize={fileSize}
-                      url={resolvedUrl!}
-                      isMyMessage={isMyMessage}
-                    />
-                  </>
-                ) : (
-                  // document: PDF gets viewer, unknown gets link-only thumbnail
-                  <FileCard
-                    url={resolvedUrl!}
-                    mimeType={resolvedType}
-                    title={title}
-                    fileSize={fileSize}
-                    isMyMessage={isMyMessage}
-                    onExpand={isPdf ? () => setViewerOpen(true) : undefined}
-                  />
-                )}
+    <div className={messageClass}>
+      {!isMyMessage && message.user && (
+        <Avatar
+          className="str-chat__avatar str-chat__message-sender-avatar"
+          id={message.user.id}
+          image={message.user.image}
+          name={message.user.name ?? message.user.id}
+        />
+      )}
+      <div
+        className="str-chat__message-inner"
+        style={{ marginInlineEnd: 0, marginInlineStart: 0 }}
+      >
+        <div className="str-chat__message-bubble-wrapper">
+          <div
+            className="str-chat__message-bubble"
+            style={{ padding: 0, borderRadius: 0, overflow: 'visible', background: 'transparent' }}
+          >
+            {linkAttachment ? (
+              <div className={linkCardShellClass(isMyMessage)}>
+                <LinkCard attachment={linkAttachment} isMyMessage={isMyMessage} />
               </div>
-            </div>
+            ) : isMyMessage ? (
+              <Creator {...resolved!} />
+            ) : (
+              <Visitor {...resolved!} />
+            )}
           </div>
         </div>
       </div>
-      {viewerOpen && canView && resolvedUrl && (
-        <MediaViewer
-          sourceType={sourceType!}
-          url={resolvedUrl}
-          mimeType={resolvedType}
-          title={title}
-          poster={thumbnailUrl}
-          onClose={() => setViewerOpen(false)}
-        />
-      )}
-    </>
+    </div>
   )
 }
+
+const MediaMessageCreatorEntry: React.FC<{ message: LocalMessage }> = ({
+  message,
+}) => {
+  const linkAttachment = resolveLinkAttachment(message)
+  if (linkAttachment) {
+    return (
+      <div className={linkCardShellClass(true)}>
+        <LinkCard attachment={linkAttachment} isMyMessage={true} />
+      </div>
+    )
+  }
+  const resolved = resolveMediaFromMessage(message)
+  if (!resolved) return null
+  return <Creator {...resolved} />
+}
+
+const MediaMessageVisitorEntry: React.FC<{ message: LocalMessage }> = ({
+  message,
+}) => {
+  const linkAttachment = resolveLinkAttachment(message)
+  if (linkAttachment) {
+    return (
+      <div className={linkCardShellClass(false)}>
+        <LinkCard attachment={linkAttachment} isMyMessage={false} />
+      </div>
+    )
+  }
+  const resolved = resolveMediaFromMessage(message)
+  if (!resolved) return null
+  return <Visitor {...resolved} />
+}
+
+export const MediaMessage = Object.assign(MediaMessageRoot, {
+  Creator: MediaMessageCreatorEntry,
+  Visitor: MediaMessageVisitorEntry,
+})