@linktr.ee/messaging-react 1.33.2 → 1.33.3-rc-1777507218

package/src/components/MediaMessage/index.tsx

@@ -1,5 +1,6 @@
-import React from 'react'
-import type { LocalMessage } from 'stream-chat'
+import { CircleNotchIcon, DownloadSimpleIcon, LinkIcon, XIcon } from '@phosphor-icons/react'
+import React, { useEffect, useRef, useState } from 'react'
+import type { Attachment, LocalMessage } from 'stream-chat'
 
 import { Avatar } from '../Avatar'
 import MediaPlayer from '../LockedAttachment/components/MediaPlayer'
@@ -12,53 +13,304 @@ function formatBytes(bytes: number): string {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
 }
 
-const CARD_CLASS =
-  '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)]'
+function cardClass(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) {
+  return isMyMessage ? 'text-white' : 'text-black'
+}
+
+function secondaryText(isMyMessage: boolean) {
+  return isMyMessage ? 'text-white/55' : 'text-black/55'
+}
+
+function tertiaryText(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) {
+  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'
+}
+
+// ---------------------------------------------------------------------------
+// Download button (shared across all media types)
+// ---------------------------------------------------------------------------
+
+async function triggerDownload(url: string, filename?: string): Promise<void> {
+  let name: string
+  try { name = filename ?? new URL(url).pathname.split('/').pop() ?? 'download' }
+  catch { name = filename ?? 'download' }
+  const res = await fetch(url, { mode: 'cors' })
+  if (!res.ok) throw new Error(`HTTP ${res.status}`)
+  const blob = await res.blob()
+  const objectUrl = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = objectUrl
+  a.download = name
+  a.style.display = 'none'
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(objectUrl)
+}
 
-const MediaMeta: React.FC<{ mimeType: string; title?: string; fileSize?: number }> = ({
-  mimeType,
-  title,
-  fileSize,
+const DownloadButton: React.FC<{ url: string; filename?: string; isMyMessage: boolean }> = ({
+  url,
+  filename,
+  isMyMessage,
 }) => {
-  if (!title && fileSize === undefined) return null
+  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)
+      .then(() => { fallback?.close() })
+      .catch(() => { if (fallback) fallback.location.href = url })
+      .finally(() => setBusy(false))
+  }
+
   return (
-    <div className="px-4 pb-3 pt-3">
+    <button
+      type="button"
+      onClick={handleClick}
+      disabled={busy}
+      className={`flex size-8 items-center justify-center rounded-full ${buttonBg(isMyMessage)} disabled:opacity-50`}
+      aria-label="Download"
+    >
+      {busy ? (
+        <CircleNotchIcon className={`size-4 animate-spin ${secondaryText(isMyMessage)}`} weight="bold" />
+      ) : (
+        <DownloadSimpleIcon className={`size-4 ${secondaryText(isMyMessage)}`} weight="bold" />
+      )}
+    </button>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Chin: title + file size + download
+// ---------------------------------------------------------------------------
+
+const MediaMeta: React.FC<{
+  mimeType: 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="mb-1.5 truncate text-base font-medium text-black">{title}</p>
+        <p className={`mb-1.5 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 text-black/55', weight: 'regular' })}
-          <span className="text-xs font-medium text-black/55">{formatBytes(fileSize)}</span>
+          {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
-}> = ({ url, mimeType, title, fileSize }) => (
-  <a href={url} target="_blank" rel="noopener noreferrer" className="block no-underline">
-    <div className="aspect-video w-full bg-black/5 flex items-center justify-center">
-      {renderTypeIcon(mimeType, { className: 'size-12 text-black/20', weight: 'regular' })}
+  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>
-    <div className="px-4 pb-3 pt-3">
-      {title && (
-        <p className="mb-1.5 truncate text-base font-medium text-black">{title}</p>
-      )}
-      {fileSize !== undefined && (
-        <div className="flex items-center gap-1">
-          {renderTypeIcon(mimeType, { className: 'size-5 shrink-0 text-black/55', weight: 'regular' })}
-          <span className="text-xs font-medium text-black/55">{formatBytes(fileSize)}</span>
-        </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>
-  </a>
-)
+  )
+}
+
+// ---------------------------------------------------------------------------
+// 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>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// MediaMessage
+// ---------------------------------------------------------------------------
 
 export interface MediaMessageProps {
   message: LocalMessage
@@ -69,6 +321,11 @@ 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)
+  )
   const videoAttachment = message.attachments?.find(
     (a) => a.type === 'video' && a.asset_url
   )
@@ -93,73 +350,127 @@ export const MediaMessage: React.FC<MediaMessageProps> = ({
 
   const resolvedType =
     activeAttachment?.mime_type ??
-    (imageAttachment
+    (activeAttachment?.type === 'image'
       ? 'image/jpeg'
-      : videoAttachment
+      : activeAttachment?.type === 'video'
         ? 'video/mp4'
-        : audioAttachment
+        : activeAttachment?.type === 'audio'
           ? 'audio/mpeg'
           : 'application/octet-stream')
 
-  if (!resolvedUrl) return null
+  if (!linkAttachment && !resolvedUrl) return null
 
-  const sourceType = getSourceType(resolvedType)
+  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'
 
   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={CARD_CLASS}>
-              {sourceType === 'image' ? (
-                <>
-                  <img
-                    src={resolvedUrl}
-                    alt={title ?? ''}
-                    className="block w-full"
-                  />
-                  <MediaMeta mimeType={resolvedType} title={title} fileSize={fileSize} />
-                </>
-              ) : sourceType === 'document' ? (
-                <FileCard
-                  url={resolvedUrl}
-                  mimeType={resolvedType}
-                  title={title}
-                  fileSize={fileSize}
-                />
-              ) : (
-                <>
-                  <MediaPlayer
-                    source={resolvedUrl}
+    <>
+      <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}
-                    poster={thumbnailUrl}
-                    controls
+                    title={title}
+                    fileSize={fileSize}
+                    isMyMessage={isMyMessage}
+                    onExpand={isPdf ? () => setViewerOpen(true) : undefined}
                   />
-                  <MediaMeta mimeType={resolvedType} title={title} fileSize={fileSize} />
-                </>
-              )}
+                )}
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
+      {viewerOpen && canView && resolvedUrl && (
+        <MediaViewer
+          sourceType={sourceType!}
+          url={resolvedUrl}
+          mimeType={resolvedType}
+          title={title}
+          poster={thumbnailUrl}
+          onClose={() => setViewerOpen(false)}
+        />
+      )}
+    </>
   )
 }

package/src/styles.css

@@ -64,6 +64,55 @@
   }
 }
 
+/* Full-screen media viewer dialog */
+.mes-media-viewer {
+  --transition-duration: 0.15s;
+
+  border: none;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  width: 100vw;
+  height: 100dvh;
+  max-width: 100vw;
+  max-height: 100dvh;
+  position: fixed;
+  inset: 0;
+
+  transition:
+    opacity var(--transition-duration) ease,
+    overlay var(--transition-duration) allow-discrete,
+    display var(--transition-duration) allow-discrete;
+
+  opacity: 0;
+}
+
+.mes-media-viewer[open] {
+  opacity: 1;
+}
+
+.mes-media-viewer::backdrop {
+  transition:
+    display var(--transition-duration) allow-discrete,
+    overlay var(--transition-duration) allow-discrete,
+    background-color var(--transition-duration) linear;
+  background-color: rgba(0, 0, 0, 0);
+}
+
+.mes-media-viewer[open]::backdrop {
+  background-color: rgba(0, 0, 0, 0.92);
+}
+
+@starting-style {
+  .mes-media-viewer[open] {
+    opacity: 0;
+
+    &::backdrop {
+      background-color: rgba(0, 0, 0, 0);
+    }
+  }
+}
+
 /* Textarea composer focus styles */
 .mes-textarea-composer-container:has(.mes-textarea-composer:focus) {
   outline: 2px solid black;