@linktr.ee/messaging-react 1.33.1 → 1.33.2-rc-1777444067

package/dist/index.js

@@ -1,4 +1,4 @@
-import { A as e, a as t, C as i, b as n, c as o, d as g, F as r, e as m, L as u, f as M, h as c, i as l, j as h, P as C, k as P, u as d, l as L, m as p, n as v } from "./index-BePLvyvi.js";
+import { A as e, a as t, C as i, b as n, c as o, d as g, F as r, e as m, L as u, f as M, h as c, i as l, j as h, P as C, k as P, u as d, l as L, m as p, n as v } from "./index-CahzrNJz.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

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

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

@@ -31,6 +31,12 @@ export interface MediaPlayerProps {
   showProgress?: boolean
   /** When true, requests muted playback (helps autoplay policies on video). */
   muted?: boolean
+  /**
+   * When provided, overrides the default click-to-play-toggle behaviour on the
+   * player container. The play/pause button (which calls stopPropagation) is
+   * unaffected, so inline playback still works.
+   */
+  onContainerClick?: (e: React.MouseEvent) => void
 }
 
 const MediaPlayer: React.FC<MediaPlayerProps> = ({
@@ -43,6 +49,7 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
   controls = true,
   showProgress = false,
   muted = false,
+  onContainerClick,
 }) => {
   // --- Derived ---
   const sourceType = getSourceType(mimeType)
@@ -185,13 +192,15 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
       tabIndex={0}
       className={`relative cursor-pointer overflow-hidden bg-black ${aspectClass}`}
       style={aspectStyle}
-      onClick={() => {
+      onClick={(e) => {
+        if (onContainerClick) { onContainerClick(e); return }
         if (manualPlayRequired) return
         if (controls) setPlaying((p) => !p)
       }}
       onKeyDown={(e) => {
         if (e.key !== 'Enter' && e.key !== ' ') return
         e.preventDefault()
+        if (onContainerClick) { onContainerClick(e as unknown as React.MouseEvent); return }
         if (manualPlayRequired) return
         if (controls) setPlaying((p) => !p)
       }}

package/src/components/MediaMessage/MediaMessage.stories.tsx

@@ -84,6 +84,43 @@ const VARIANTS = [
   },
 ] as const
 
+const LINK_VARIANTS = [
+  {
+    label: 'With image',
+    attachment: {
+      type: 'link',
+      og_scrape_url: 'https://linktr.ee/brieparsons',
+      title: 'World Famous 3 Bottle Grey Wash Set',
+      text: 'When its time to shade, the World Famous Grey Wash set has you covered.',
+      image_url: 'https://picsum.photos/seed/linkcard/560/315',
+    },
+  },
+  {
+    label: 'No image',
+    attachment: {
+      type: 'link',
+      og_scrape_url: 'https://linktr.ee/brieparsons',
+      title: 'World Famous 3 Bottle Grey Wash Set',
+      text: 'When its time to shade, the World Famous Grey Wash set has you covered.',
+    },
+  },
+  {
+    label: 'Title only',
+    attachment: {
+      type: 'link',
+      og_scrape_url: 'https://linktr.ee/someone',
+      title: 'Check out my Linktree',
+    },
+  },
+  {
+    label: 'URL only',
+    attachment: {
+      type: 'link',
+      og_scrape_url: 'https://linktr.ee/someone',
+    },
+  },
+] as const
+
 // ---------------------------------------------------------------------------
 // Layout primitives
 // ---------------------------------------------------------------------------
@@ -94,11 +131,10 @@ const GridTable: React.FC<{ children: React.ReactNode }> = ({ children }) => (
   </div>
 )
 
-const GridHead = () => (
+const GridHead: React.FC<{ labels: readonly string[] }> = ({ labels }) => (
   <thead>
     <tr>
-      <th className="text-left text-xs font-medium text-black/40 pb-2 w-16" />
-      {VARIANTS.map(({ label }) => (
+      {labels.map((label) => (
         <th key={label} className="text-left text-xs font-medium text-black/40 pb-2">
           {label}
         </th>
@@ -107,22 +143,15 @@ const GridHead = () => (
   </thead>
 )
 
-const RowLabel: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-    {children}
-  </td>
-)
-
 // ---------------------------------------------------------------------------
 // Stories
 // ---------------------------------------------------------------------------
 
-export const Visitor: StoryFn = () => (
+export const Received: StoryFn = () => (
   <GridTable>
-    <GridHead />
+    <GridHead labels={VARIANTS.map((v) => v.label)} />
     <tbody>
       <tr>
-        <RowLabel>Sent</RowLabel>
         {VARIANTS.map(({ label, attachment }) => (
           <td key={label} className="align-top">
             <MediaMessage
@@ -135,20 +164,19 @@ export const Visitor: StoryFn = () => (
     </tbody>
   </GridTable>
 )
-Visitor.parameters = {
+Received.parameters = {
   docs: {
     description: {
-      story: 'Visitor perspective — messages from the creator, left-aligned with avatar.',
+      story: 'Received messages — left-aligned with avatar, light gray card background.',
     },
   },
 }
 
-export const Creator: StoryFn = () => (
+export const Sent: StoryFn = () => (
   <GridTable>
-    <GridHead />
+    <GridHead labels={VARIANTS.map((v) => v.label)} />
     <tbody>
       <tr>
-        <RowLabel>Sent</RowLabel>
         {VARIANTS.map(({ label, attachment }) => (
           <td key={label} className="align-top">
             <MediaMessage
@@ -161,10 +189,45 @@ export const Creator: StoryFn = () => (
     </tbody>
   </GridTable>
 )
-Creator.parameters = {
+Sent.parameters = {
+  docs: {
+    description: {
+      story: 'Sent messages — right-aligned, no avatar, black card background.',
+    },
+  },
+}
+
+export const Links: StoryFn = () => (
+  <GridTable>
+    <GridHead labels={LINK_VARIANTS.map((v) => v.label)} />
+    <tbody>
+      <tr>
+        {LINK_VARIANTS.map(({ label, attachment }) => (
+          <td key={label} className="align-top">
+            <MediaMessage
+              isMyMessage={false}
+              message={base({ user: SENDER, attachments: [attachment as LocalMessage['attachments'][number]] })}
+            />
+          </td>
+        ))}
+      </tr>
+      <tr>
+        {LINK_VARIANTS.map(({ label, attachment }) => (
+          <td key={label} className="align-top">
+            <MediaMessage
+              isMyMessage={true}
+              message={base({ user: ME, attachments: [attachment as LocalMessage['attachments'][number]] })}
+            />
+          </td>
+        ))}
+      </tr>
+    </tbody>
+  </GridTable>
+)
+Links.parameters = {
   docs: {
     description: {
-      story: 'Creator perspective — own messages, right-aligned, no avatar.',
+      story: 'Link preview cards — top row received, bottom row sent. Shows thumbnail, title, description, and URL with image fallback.',
     },
   },
 }

package/src/components/MediaMessage/MediaMessage.test.tsx

@@ -1,11 +1,20 @@
 import React from 'react'
 import type { LocalMessage } from 'stream-chat'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeAll, describe, expect, it, vi } from 'vitest'
 
-import { renderWithProviders, screen } from '../../test/utils'
+import { renderWithProviders, screen, fireEvent } from '../../test/utils'
 
 import { MediaMessage } from '.'
 
+beforeAll(() => {
+  HTMLDialogElement.prototype.showModal = vi.fn(function (this: HTMLDialogElement) {
+    this.setAttribute('open', '')
+  })
+  HTMLDialogElement.prototype.close = vi.fn(function (this: HTMLDialogElement) {
+    this.removeAttribute('open')
+  })
+})
+
 vi.mock('../Avatar', () => ({
   Avatar: ({ id }: { id: string }) => (
     <div data-testid="avatar" data-user-id={id} />
@@ -16,14 +25,20 @@ vi.mock('../LockedAttachment/components/MediaPlayer', () => ({
   default: ({
     source,
     mimeType,
+    onContainerClick,
   }: {
     source: string
     mimeType: string
+    onContainerClick?: (e: React.MouseEvent) => void
   }) => (
     <div
+      role="button"
+      tabIndex={0}
       data-testid="media-player"
       data-source={source}
       data-mime-type={mimeType}
+      onClick={onContainerClick}
+      onKeyDown={undefined}
     />
   ),
 }))
@@ -41,7 +56,6 @@ vi.mock('../LockedAttachment/utils/mimeType', () => ({
   },
 }))
 
-// Cast through unknown to avoid satisfying every optional field of LocalMessage
 const msg = (overrides: Record<string, unknown> = {}): LocalMessage =>
   ({
     id: 'msg-1',
@@ -63,7 +77,7 @@ describe('MediaMessage', () => {
     expect(container.firstChild).toBeNull()
   })
 
-  it('renders MediaPlayer for a video attachment', () => {
+  it('renders MediaPlayer immediately for a video attachment', () => {
     renderWithProviders(
       <MediaMessage
         message={msg({
@@ -72,6 +86,7 @@ describe('MediaMessage', () => {
               type: 'video',
               asset_url: 'https://cdn.example.com/clip.mp4',
               mime_type: 'video/mp4',
+              title: 'My Clip',
             },
           ],
         })}
@@ -80,11 +95,28 @@ describe('MediaMessage', () => {
 
     const player = screen.getByTestId('media-player')
     expect(player).toBeInTheDocument()
-    expect(player).toHaveAttribute(
-      'data-source',
-      'https://cdn.example.com/clip.mp4'
+    expect(player).toHaveAttribute('data-source', 'https://cdn.example.com/clip.mp4')
+  })
+
+  it('opens viewer when the video player container is clicked', () => {
+    renderWithProviders(
+      <MediaMessage
+        message={msg({
+          attachments: [
+            {
+              type: 'video',
+              asset_url: 'https://cdn.example.com/clip.mp4',
+              mime_type: 'video/mp4',
+              title: 'My Clip',
+            },
+          ],
+        })}
+      />
     )
-    expect(player).toHaveAttribute('data-mime-type', 'video/mp4')
+
+    fireEvent.click(screen.getByTestId('media-player'))
+    expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalled()
+    expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument()
   })
 
   it('renders MediaPlayer for an audio attachment', () => {
@@ -108,7 +140,27 @@ describe('MediaMessage', () => {
     )
   })
 
-  it('renders an img for an image attachment', () => {
+  it('does not show viewer or expand button for audio', () => {
+    renderWithProviders(
+      <MediaMessage
+        message={msg({
+          attachments: [
+            {
+              type: 'audio',
+              asset_url: 'https://cdn.example.com/track.mp3',
+              mime_type: 'audio/mpeg',
+              title: 'My Track',
+            },
+          ],
+        })}
+      />
+    )
+
+    expect(screen.queryByRole('button', { name: 'View full screen' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Close' })).not.toBeInTheDocument()
+  })
+
+  it('renders an img for an image attachment and opens viewer on click', () => {
     renderWithProviders(
       <MediaMessage
         message={msg({
@@ -126,9 +178,36 @@ describe('MediaMessage', () => {
 
     const image = screen.getByRole('img', { name: 'My Photo' })
     expect(image).toHaveAttribute('src', 'https://cdn.example.com/photo.jpg')
+
+    // Clicking the image button opens the viewer
+    fireEvent.click(screen.getByRole('button', { name: 'My Photo' }))
+    expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalled()
+    const viewerImages = screen.getAllByRole('img', { name: 'My Photo' })
+    expect(viewerImages.some((img) => img.classList.contains('rounded-2xl'))).toBe(true)
   })
 
-  it('renders a download link for a document attachment', () => {
+  it('does not show expand button in chin for images, only download', () => {
+    renderWithProviders(
+      <MediaMessage
+        message={msg({
+          attachments: [
+            {
+              type: 'image',
+              image_url: 'https://cdn.example.com/photo.jpg',
+              mime_type: 'image/jpeg',
+              title: 'My Photo',
+            },
+          ],
+        })}
+      />
+    )
+
+    // Thumbnail button + download button — no separate expand/fullscreen button
+    expect(screen.queryByRole('button', { name: 'View full screen' })).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Download' })).toBeInTheDocument()
+  })
+
+  it('renders PDF card with a viewer button', () => {
     renderWithProviders(
       <MediaMessage
         message={msg({
@@ -144,13 +223,56 @@ describe('MediaMessage', () => {
       />
     )
 
-    const link = screen.getByRole('link')
-    expect(link).toHaveAttribute('href', 'https://cdn.example.com/report.pdf')
+    expect(screen.getByRole('button', { name: 'Open PDF viewer' })).toBeInTheDocument()
     expect(screen.getByText('Annual Report')).toBeInTheDocument()
-    expect(screen.getByTestId('type-icon')).toBeInTheDocument()
   })
 
-  it('shows title and file size below video', () => {
+  it('opens PDF viewer when PDF thumbnail is clicked', () => {
+    renderWithProviders(
+      <MediaMessage
+        message={msg({
+          attachments: [
+            {
+              type: 'file',
+              asset_url: 'https://cdn.example.com/report.pdf',
+              mime_type: 'application/pdf',
+              title: 'Annual Report',
+            },
+          ],
+        })}
+      />
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'Open PDF viewer' }))
+    expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalled()
+    expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument()
+  })
+
+  it('renders unknown file as a link with no viewer button', () => {
+    renderWithProviders(
+      <MediaMessage
+        message={msg({
+          attachments: [
+            {
+              type: 'file',
+              asset_url: 'https://cdn.example.com/data.bin',
+              mime_type: 'application/octet-stream',
+              title: 'Unknown File',
+            },
+          ],
+        })}
+      />
+    )
+
+    // No viewer button for unknown files
+    expect(screen.queryByRole('button', { name: 'Open PDF viewer' })).not.toBeInTheDocument()
+    // Thumbnail is a plain link (opens in new tab)
+    const links = screen.getAllByRole('link')
+    expect(links.some((l) => l.getAttribute('href') === 'https://cdn.example.com/data.bin')).toBe(true)
+    expect(screen.getByText('Unknown File')).toBeInTheDocument()
+  })
+
+  it('shows title and file size in chin', () => {
     renderWithProviders(
       <MediaMessage
         message={msg({
@@ -188,10 +310,7 @@ describe('MediaMessage', () => {
     )
 
     expect(screen.getByTestId('avatar')).toBeInTheDocument()
-    expect(screen.getByTestId('avatar')).toHaveAttribute(
-      'data-user-id',
-      'user-1'
-    )
+    expect(screen.getByTestId('avatar')).toHaveAttribute('data-user-id', 'user-1')
   })
 
   it('does not render Avatar for own messages', () => {
@@ -258,4 +377,144 @@ describe('MediaMessage', () => {
 
     expect(container.firstChild).toBeNull()
   })
+
+  it('renders a link card for a link attachment', () => {
+    renderWithProviders(
+      <MediaMessage
+        message={msg({
+          attachments: [
+            {
+              type: 'link',
+              og_scrape_url: 'https://linktr.ee/someone',
+              title: 'My Linktree',
+              text: 'Check out my links',
+              image_url: 'https://cdn.example.com/thumb.jpg',
+            },
+          ],
+        })}
+      />
+    )
+
+    const link = screen.getByRole('link')
+    expect(link).toHaveAttribute('href', 'https://linktr.ee/someone')
+    expect(screen.getByText('My Linktree')).toBeInTheDocument()
+    expect(screen.getByText('Check out my links')).toBeInTheDocument()
+    expect(screen.getByText('https://linktr.ee/someone')).toBeInTheDocument()
+    const img = screen.getByRole('img', { name: 'My Linktree' })
+    expect(img).toHaveAttribute('src', 'https://cdn.example.com/thumb.jpg')
+  })
+
+  it('renders a link fallback icon when link has no image', () => {
+    renderWithProviders(
+      <MediaMessage
+        message={msg({
+          attachments: [
+            {
+              type: 'link',
+              og_scrape_url: 'https://linktr.ee/someone',
+              title: 'My Linktree',
+            },
+          ],
+        })}
+      />
+    )
+
+    expect(screen.queryByRole('img')).not.toBeInTheDocument()
+    expect(screen.getByText('My Linktree')).toBeInTheDocument()
+  })
+
+  it('uses dark card background for sent messages', () => {
+    const { container } = renderWithProviders(
+      <MediaMessage
+        isMyMessage={true}
+        message={msg({
+          attachments: [
+            {
+              type: 'image',
+              image_url: 'https://cdn.example.com/photo.jpg',
+              mime_type: 'image/jpeg',
+            },
+          ],
+        })}
+      />
+    )
+
+    expect(container.querySelector('.bg-\\[\\#121110\\]')).toBeInTheDocument()
+  })
+
+  it('uses light card background for received messages', () => {
+    const { container } = renderWithProviders(
+      <MediaMessage
+        isMyMessage={false}
+        message={msg({
+          attachments: [
+            {
+              type: 'image',
+              image_url: 'https://cdn.example.com/photo.jpg',
+              mime_type: 'image/jpeg',
+            },
+          ],
+        })}
+      />
+    )
+
+    expect(container.querySelector('.bg-\\[\\#F3F3F1\\]')).toBeInTheDocument()
+  })
+
+  it('shows download button for image attachment', () => {
+    renderWithProviders(
+      <MediaMessage
+        message={msg({
+          attachments: [
+            {
+              type: 'image',
+              image_url: 'https://cdn.example.com/photo.jpg',
+              mime_type: 'image/jpeg',
+              title: 'My Photo',
+            },
+          ],
+        })}
+      />
+    )
+
+    expect(screen.getByRole('button', { name: 'Download' })).toBeInTheDocument()
+  })
+
+  it('shows download button for audio attachment', () => {
+    renderWithProviders(
+      <MediaMessage
+        message={msg({
+          attachments: [
+            {
+              type: 'audio',
+              asset_url: 'https://cdn.example.com/track.mp3',
+              mime_type: 'audio/mpeg',
+              title: 'My Track',
+            },
+          ],
+        })}
+      />
+    )
+
+    expect(screen.getByRole('button', { name: 'Download' })).toBeInTheDocument()
+  })
+
+  it('does not show download or expand buttons for link cards', () => {
+    renderWithProviders(
+      <MediaMessage
+        message={msg({
+          attachments: [
+            {
+              type: 'link',
+              og_scrape_url: 'https://linktr.ee/someone',
+              title: 'My Linktree',
+            },
+          ],
+        })}
+      />
+    )
+
+    expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'View full screen' })).not.toBeInTheDocument()
+  })
 })