@linktr.ee/messaging-react 4.4.6-rc-1788235358 → 4.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.4.6-rc-1788235358",
+  "version": "4.4.6",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,8 +50,8 @@
     "chromatic:local": "yarn storybook:build && chromatic"
   },
   "dependencies": {
-    "@linktr.ee/messaging-core": "2.6.0-rc-1788235358",
-    "@linktr.ee/messaging-taxonomy": "0.11.0-rc-1788235358",
+    "@linktr.ee/messaging-core": "^2.6.0",
+    "@linktr.ee/messaging-taxonomy": "^0.11.0",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/CustomMessage/StreamAttachmentMessage.stories.tsx

@@ -109,6 +109,20 @@ export const LinkClassic = Render([
   linkAttachment({ image_url: undefined, thumb_url: undefined }),
 ])
 
+/** Two link shares stacked in one message. */
+export const MultipleLinks = Render([
+  linkAttachment({
+    og_scrape_url: 'https://linktr.ee/marketplace',
+    title: 'Linktree Marketplace',
+    image_url: HERO,
+  }),
+  linkAttachment({
+    og_scrape_url: 'https://linktr.ee/creator',
+    title: 'Creator profile',
+    image_url: PHOTO('multiple-links'),
+  }),
+])
+
 /**
  * Link share with an emoji-only caption alongside the URL. The emoji is
  * real content, so the caption is preserved as a separate bubble beneath

package/src/components/CustomMessage/StreamAttachmentMessage.test.tsx

@@ -95,6 +95,33 @@ describe('linkCaptionDuplicatesAttachmentUrl', () => {
 })
 
 describe('StreamAttachmentMessage', () => {
+  it('spaces multiple link cards inside the attachment rows wrapper', () => {
+    renderWithProviders(
+      <StreamAttachmentMessage
+        groupPosition="single"
+        isMyMessage={true}
+        message={message([
+          {
+            type: 'link',
+            og_scrape_url: 'https://linktr.ee/first',
+            title: 'First Link',
+            image_url: 'https://cdn.example.com/first.jpg',
+          },
+          {
+            type: 'link',
+            og_scrape_url: 'https://linktr.ee/second',
+            title: 'Second Link',
+            image_url: 'https://cdn.example.com/second.jpg',
+          },
+        ])}
+      />
+    )
+
+    const rows = screen.getByTestId('message-attachment-rows')
+    expect(rows).toHaveClass('flex', 'flex-col', 'gap-[4px]')
+    expect(within(rows).getAllByTestId('link-card')).toHaveLength(2)
+  })
+
   it('renders a sent link card and suppresses a URL-only caption', () => {
     renderWithProviders(
       <StreamAttachmentMessage

package/src/components/CustomMessage/StreamAttachmentMessage.tsx

@@ -424,7 +424,15 @@ const StreamAttachmentMessage: React.FC<StreamAttachmentMessageProps> = ({
           padding: 0,
         }}
       >
-        {rows}
+        <div
+          data-testid="message-attachment-rows"
+          className={classNames(
+            'flex flex-col gap-[4px]',
+            isMyMessage ? 'items-end' : 'items-start'
+          )}
+        >
+          {rows}
+        </div>
         {!caption && <MessageErrorIcon />}
       </div>
       {caption ? (

package/src/components/MessageAttachment/MessageAttachment.behavior.test.tsx

@@ -105,7 +105,7 @@ describe('MessageAttachment behavior', () => {
     )
   })
 
-  it('renders video posters and posterless first-frame previews', () => {
+  it('renders video poster and fallback, and wires viewer attributes', () => {
     const onDismiss = vi.fn()
     const { rerender } = renderWithProviders(
       <MessageAttachment.Video.Composer
@@ -122,15 +122,11 @@ describe('MessageAttachment behavior', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Dismiss attachment' }))
     expect(onDismiss).toHaveBeenCalledOnce()
     rerender(
-      <MessageAttachment.Video.Sent src="https://cdn.example.com/video.mp4" />
+      <MessageAttachment.Video.Sent
+        items={[{ src: 'https://cdn.example.com/video.mp4' }]}
+      />
     )
-    expect(screen.getByLabelText('Video 1 thumbnail').tagName).toBe('VIDEO')
     expect(screen.getByLabelText('Play video 1 of 1')).toBeInTheDocument()
-
-    rerender(
-      <MessageAttachment.Video.Received src="https://cdn.example.com/received-video.mp4" />
-    )
-    expect(screen.getByLabelText('Video 1 thumbnail').tagName).toBe('VIDEO')
   })
 
   it('supports PDF titles, download actions, dismiss, and viewer index', () => {

package/src/components/MessageAttachment/Video/index.tsx

@@ -42,8 +42,9 @@ export interface VideoAttachmentSharedProps extends MessageAttachmentBaseProps {
   items?: VideoItem[]
   /**
    * `<video preload>` hint forwarded into the viewer. Defaults to
-   * `'none'` — poster images carry the visual weight on the bubble surface,
-   * while posterless tiles fetch metadata to paint a first frame. Per-item overrides live on
+   * `'none'` — the poster `<img>` carries the visual weight on the
+   * bubble surface, and we shouldn't fetch any video bytes until the
+   * user actually opens the viewer. Per-item overrides live on
    * `VideoItem.preload`. The opened `VideoViewer` always preloads
    * metadata for the active item (so duration / first-frame appear
    * immediately) regardless of this value.
@@ -69,8 +70,9 @@ export interface VideoAttachmentSharedProps extends MessageAttachmentBaseProps {
  * recorded it, and only otherwise measured off the decoded poster. Measuring
  * the poster alone was not enough: an uploaded clip may have no poster, and a
  * portrait video then sat in whatever `FALLBACK_ASPECT` guessed. Reading the
- * dimensions Stream already stores costs nothing at render time; posterless
- * tiles fetch metadata to paint a first frame, without using it for sizing.
+ * dimensions Stream already stores costs nothing at render time and needs no
+ * `loadedmetadata` probe, which would fetch video bytes for every card in the
+ * thread against the deliberate `preload: 'none'`.
  *
  * `FALLBACK_ASPECT` is **square** on purpose. It covers only the case where we
  * know nothing — no recorded dimensions, no decoded poster — and a square box
@@ -99,10 +101,6 @@ const PlayBadge: React.FC = () => (
   </div>
 )
 
-// Safari needs a time fragment to paint a first frame from a remote MP4.
-const withFirstFrameHint = (src: string): string =>
-  src.includes('#') ? src : `${src}#t=0.001`
-
 // The tile shell owns the cluster's geometry: `MediaStackGrid` gives
 // each tile the 18px radius on the cluster's OUTER corners only and
 // clips with `overflow-hidden`, so a poster must carry no radius of
@@ -139,15 +137,6 @@ const PosterTile: React.FC<{
           onLoad={onLoad}
           className="absolute inset-0 size-full object-cover"
         />
-      ) : item.src ? (
-        <video
-          src={withFirstFrameHint(item.src)}
-          muted
-          playsInline
-          preload="metadata"
-          aria-label={`Video ${index + 1} thumbnail`}
-          className="absolute inset-0 size-full object-cover"
-        />
       ) : (
         <div className="absolute inset-0 flex items-center justify-center">
           <VideoCameraIcon