@linktr.ee/messaging-react 4.3.2 → 4.4.0-rc-1787598778

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.3.2",
+  "version": "4.4.0-rc-1787598778",
   "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.5.0",
-    "@linktr.ee/messaging-taxonomy": "^0.11.0",
+    "@linktr.ee/messaging-core": "2.6.0-rc-1787598778",
+    "@linktr.ee/messaging-taxonomy": "0.11.0-rc-1787598778",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/AttachmentCard/MediaPlayer.tsx

@@ -2,6 +2,7 @@ import { CircleNotchIcon, PauseIcon, PlayIcon } from '@phosphor-icons/react'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 
 import { isDevBuild } from '../../utils/isDevBuild'
+import { nativePlayerProps } from '../../utils/nativeMediaPlayers'
 
 import { renderTypeIcon } from './utils/icons'
 import { getSourceType } from './utils/mimeType'
@@ -235,6 +236,7 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
       <div className="absolute inset-0">
         {sourceType === 'audio' ? (
           <audio
+            {...nativePlayerProps}
             ref={playerRef as React.RefObject<HTMLAudioElement>}
             src={source}
             loop={loop}

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

@@ -184,6 +184,32 @@ describe('StreamAttachmentMessage', () => {
     )
   })
 
+  it('optimizes Linktree-hosted video posters for the channel bubble', () => {
+    renderWithProviders(
+      <StreamAttachmentMessage
+        groupPosition="single"
+        isMyMessage
+        message={message([
+          {
+            type: 'video',
+            asset_url: 'https://ugc.production.linktr.ee/clip.mp4',
+            thumb_url: 'https://ugc.production.linktr.ee/poster.jpg',
+            mime_type: 'video/mp4',
+          },
+        ])}
+      />
+    )
+
+    // Video posters were the last media URL leaving here at full size —
+    // four of them per 2×2 grid.
+    expect(
+      screen.getByTestId('video-attachment').querySelector('img')
+    ).toHaveAttribute(
+      'src',
+      'https://ugc.production.linktr.ee/poster.jpg?io=true&size=messaging-attachment-v1_0'
+    )
+  })
+
   it('keeps the original image source in the viewer for channel image attachments', () => {
     renderWithProviders(
       <StreamAttachmentMessage

package/src/components/CustomMessage/StreamAttachmentMessage.tsx

@@ -27,6 +27,28 @@ function trimToUndefined(value?: string | null): string | undefined {
   return trimmed ? trimmed : undefined
 }
 
+/**
+ * Width ÷ height of the source media, from the dimensions Stream stores on the
+ * attachment, or `undefined` when they are absent or unusable.
+ *
+ * These are what let a single video card know its shape on first paint. The
+ * alternative — probing `loadedmetadata` — would fetch video bytes for every
+ * card in a thread, against the deliberate `preload: 'none'`, and a poster is
+ * not a substitute because an uploaded clip may not have one.
+ *
+ * Both fields are optional on Stream's `Attachment` and are absent on anything
+ * sent before the composer began writing them, so every caller must still cope
+ * with `undefined` rather than assuming a ratio (MES-1353).
+ */
+function aspectRatioFrom(attachment: Attachment): number | undefined {
+  const { original_width: width, original_height: height } = attachment
+  if (typeof width !== 'number' || typeof height !== 'number') return undefined
+  if (!Number.isFinite(width) || !Number.isFinite(height)) return undefined
+  if (width <= 0 || height <= 0) return undefined
+
+  return width / height
+}
+
 function normalizeLinkUrl(url: string): string {
   return url
     .trim()
@@ -209,10 +231,16 @@ function mediaItemForKind(
     case 'video':
       return {
         src: trimToUndefined(attachment.asset_url) ?? '',
-        poster: trimToUndefined(
-          (attachment as { thumb_url?: string }).thumb_url
-        ),
+        poster: optimizeMessagingAttachmentUrl(attachment.thumb_url),
         mimeType: trimToUndefined(attachment.mime_type),
+        // Stream carries the source dimensions and the composer writes them
+        // at send time, so a card knows its shape on first paint — no poster
+        // needed and no `loadedmetadata` probe, which would mean fetching
+        // video bytes for every card in the thread against the deliberate
+        // `preload: 'none'`. Same trick the audio card uses for `duration` /
+        // `waveform_data`. This builder serves both the single and clustered
+        // paths, so the grid tiles get the ratio here too (MES-1353).
+        naturalAspectRatio: aspectRatioFrom(attachment),
       }
     case 'audio':
       return {

package/src/components/LinkAttachment/components/_shared/CardThumbnail.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames'
 import React from 'react'
 
 import { optimizeMessagingAttachmentUrl } from '../../../../utils/cdnImageUrl'
+import { nativePlayerProps } from '../../../../utils/nativeMediaPlayers'
 import { renderTypeIcon } from '../../../AttachmentCard'
 import { getSourceType } from '../../../AttachmentCard/utils/mimeType'
 
@@ -108,6 +109,7 @@ const CardThumbnail: React.FC<CardThumbnailProps> = ({
     return (
       <div className="p-3">
         <audio
+          {...nativePlayerProps}
           src={sourceUrl}
           controls
           preload="metadata"

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

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import { nativePlayerProps } from '../../../utils/nativeMediaPlayers'
 import Bubble from '../_shared/Bubble'
 import DismissButton from '../_shared/DismissButton'
 import {
@@ -77,6 +78,7 @@ const NativeAudioPlayer: React.FC<{
         same reason. */}
     {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
     <audio
+      {...nativePlayerProps}
       src={item.src}
       controls
       preload={item.preload ?? preload}

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

@@ -5,6 +5,7 @@ import Bubble from '../_shared/Bubble'
 import DismissButton from '../_shared/DismissButton'
 import ImageViewer, { type ImageViewerItem } from '../_shared/ImageViewer'
 import MediaStackGrid, { type MediaStackTile } from '../_shared/MediaStackGrid'
+import { useSingleMediaRatio } from '../_shared/useSingleMediaRatio'
 import { useViewer } from '../_shared/useViewer'
 import {
   bubbleVariantForState,
@@ -61,7 +62,7 @@ const tileFromItem = ({
   index: number
   totalCount: number
   fallbackLoading: ImageLoadingMode
-  /** Set on the single-image tile only — see `useSingleImageRatio`. */
+  /** Set on the single-image tile only — see `useSingleMediaRatio`. */
   imgRef?: React.Ref<HTMLImageElement>
   onLoad?: React.ReactEventHandler<HTMLImageElement>
 }): MediaStackTile => ({
@@ -191,60 +192,6 @@ const ImageComposerInner: React.FC<{
  */
 const RESERVED_SINGLE_ASPECT_RATIO = 326 / 246
 
-/**
- * Resolves the aspect ratio of a single-image bubble, in order:
- *
- *   1. caller-supplied `ImageItem.width` / `height` — ratio known at
- *      first paint, so the card never resizes;
- *   2. the decoded `<img>`'s `naturalWidth` / `naturalHeight`;
- *   3. `RESERVED_SINGLE_ASPECT_RATIO`.
- *
- * Nothing propagates dimensions through the Stream path today, so (2)
- * is the branch that runs in production. It reads both on `load` and
- * from the ref, because an image already in the browser cache can be
- * `complete` before React attaches a `load` listener.
- */
-const useSingleImageRatio = (item: ImageItem | undefined) => {
-  const src = item?.src
-  const [measured, setMeasured] = React.useState<{
-    src: string
-    ratio: number
-  }>()
-
-  const measure = React.useCallback(
-    (img: HTMLImageElement | null) => {
-      if (!img || img.naturalWidth <= 0 || img.naturalHeight <= 0) return
-      if (src === undefined) return
-      const ratio = img.naturalWidth / img.naturalHeight
-      // Returning `prev` unchanged matters: the ref callback runs on
-      // every commit, and a fresh object each time would schedule an
-      // endless render loop.
-      setMeasured((prev) =>
-        prev && prev.src === src && prev.ratio === ratio ? prev : { src, ratio }
-      )
-    },
-    [src]
-  )
-
-  const handleLoad = React.useCallback(
-    (event: React.SyntheticEvent<HTMLImageElement>) =>
-      measure(event.currentTarget),
-    [measure]
-  )
-
-  const supplied =
-    item?.width && item?.height ? item.width / item.height : undefined
-  // Discard a measurement left over from a previous `src`.
-  const measuredRatio =
-    measured && measured.src === src ? measured.ratio : undefined
-
-  return {
-    ratio: supplied ?? measuredRatio ?? RESERVED_SINGLE_ASPECT_RATIO,
-    imgRef: measure,
-    onLoad: handleLoad,
-  }
-}
-
 /**
  * Sent / Received rendering — wrapped in the shared `Bubble` chrome,
  * supports single or stacked items, and renders an optional caption
@@ -266,7 +213,15 @@ const ImageBubbleRow: React.FC<InternalImageRowProps> = ({
   const { viewerOpen, viewerIndex, handleActivate, closeViewer } =
     useViewer(onClick)
   const isSingle = resolvedItems.length === 1
-  const single = useSingleImageRatio(isSingle ? resolvedItems[0] : undefined)
+  const singleItem = isSingle ? resolvedItems[0] : undefined
+  const single = useSingleMediaRatio({
+    src: singleItem?.src,
+    suppliedRatio:
+      singleItem?.width && singleItem?.height
+        ? singleItem.width / singleItem.height
+        : undefined,
+    fallbackRatio: RESERVED_SINGLE_ASPECT_RATIO,
+  })
 
   if (resolvedItems.length === 0) {
     return null

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

@@ -811,6 +811,237 @@ describe('MessageAttachment.Video', () => {
   })
 })
 
+// The grid only *displays* four tiles; the viewer is a carousel over the
+// whole array. Every number here is an off-by-one waiting to happen —
+// `total - visible` vs `total - 1`, index 3 vs index 4, `4 / 9` vs
+// `4 / 4` — and none of it was covered.
+describe('MessageAttachment.Video overflow', () => {
+  const NINE_VIDEOS = Array.from({ length: 9 }, (_, i) => ({
+    src: `https://cdn.example.com/${i}.mp4`,
+    poster: `https://cdn.example.com/${i}.jpg`,
+    mimeType: 'video/mp4',
+  }))
+
+  it('renders four tiles and a +5 badge for nine videos', () => {
+    renderWithProviders(<MessageAttachment.Video.Sent items={NINE_VIDEOS} />)
+
+    const tiles = screen.getAllByRole('button', { name: /^Play video/ })
+    expect(tiles).toHaveLength(4)
+    // `total - visible`, not `total - 1` and not a count that swallows
+    // the tile the scrim sits on.
+    expect(screen.getByText('+5')).toBeInTheDocument()
+    // Tiles 5..9 are never rendered, so they stay out of the tab order.
+    expect(screen.queryByLabelText('Play video 5 of 9')).toBeNull()
+  })
+
+  it('opens the viewer on the fourth video from the overflow tile and pages to the ninth', () => {
+    renderWithProviders(<MessageAttachment.Video.Sent items={NINE_VIDEOS} />)
+
+    fireEvent.click(screen.getByLabelText('Play video 4 of 9'))
+    const viewer = expectViewerOpen('video-viewer')
+    expect(viewer.querySelector('video')?.getAttribute('src')).toBe(
+      'https://cdn.example.com/3.mp4'
+    )
+    // How the user learns what "+5" resolved to.
+    expect(viewer.textContent).toContain('4 / 9')
+
+    // The carousel spans all nine, not just the four the grid drew.
+    for (let i = 0; i < 5; i += 1) {
+      fireEvent.click(screen.getByLabelText('Next video'))
+    }
+    expect(viewer.querySelector('video')?.getAttribute('src')).toBe(
+      'https://cdn.example.com/8.mp4'
+    )
+    expect(viewer.textContent).toContain('9 / 9')
+  })
+
+  it('drops the play badge on the overflow tile only', () => {
+    renderWithProviders(<MessageAttachment.Video.Sent items={NINE_VIDEOS} />)
+
+    const tiles = screen.getAllByRole('button', { name: /^Play video/ })
+    // The badge is the only `svg` a poster tile renders.
+    expect(tiles[0].querySelector('svg')).not.toBeNull()
+    expect(tiles[3].querySelector('svg')).toBeNull()
+  })
+})
+
+// A fixed-width card with a free height is one bad ratio away from a
+// 587px-tall bubble, so the clamp is the whole point of the feature.
+describe('MessageAttachment.Video single-card aspect', () => {
+  // jsdom never decodes an `<img>`, so `naturalWidth` stays 0 and `load`
+  // never fires on its own — stub the intrinsic size and fire it.
+  const loadPosterAt = (naturalWidth: number, naturalHeight: number) => {
+    const poster = screen.getByTestId('video-attachment').querySelector('img')
+    if (!poster) throw new Error('no poster rendered')
+    Object.defineProperty(poster, 'naturalWidth', {
+      configurable: true,
+      value: naturalWidth,
+    })
+    Object.defineProperty(poster, 'naturalHeight', {
+      configurable: true,
+      value: naturalHeight,
+    })
+    fireEvent.load(poster)
+  }
+
+  const mediaAspect = () =>
+    screen.getByTestId('video-attachment').querySelector<HTMLElement>('[style]')
+      ?.style.aspectRatio
+
+  it('stays square while the poster is still undecoded', () => {
+    // Square, not 16:9. The fallback covers "we know nothing yet", and this
+    // card was square before any of this existed — guessing landscape put
+    // portrait clips in a letterbox, which is more wrong (MES-1353).
+    renderWithProviders(
+      <MessageAttachment.Video.Sent
+        src="https://cdn.example.com/clip.mp4"
+        poster="https://cdn.example.com/poster.jpg"
+      />
+    )
+    expect(mediaAspect()).toBe(String(1))
+  })
+
+  it('sizes a posterless clip from the dimensions the sender recorded', () => {
+    // The case that made this necessary: an uploaded clip with no poster.
+    // Nothing can be measured, so without recorded dimensions the card sat at
+    // whatever the fallback guessed, regardless of the clip's real shape.
+    renderWithProviders(
+      <MessageAttachment.Video.Sent
+        src="https://cdn.example.com/clip.mp4"
+        naturalAspectRatio={9 / 16}
+      />
+    )
+    expect(
+      screen.getByTestId('video-attachment').querySelector('img')
+    ).toBeNull()
+    // Clamped to MIN_ASPECT: a true 9:16 would render a 587px-tall card, so
+    // portrait pins at 4:5 until design asks for a full-height card.
+    expect(mediaAspect()).toBe(String(4 / 5))
+  })
+
+  it('prefers the recorded dimensions over the decoded poster', () => {
+    // Recorded dimensions describe the clip; the poster is only a proxy for it
+    // and can be cropped or letterboxed by whatever produced it.
+    renderWithProviders(
+      <MessageAttachment.Video.Sent
+        src="https://cdn.example.com/clip.mp4"
+        poster="https://cdn.example.com/poster.jpg"
+        naturalAspectRatio={4 / 3}
+      />
+    )
+    expect(mediaAspect()).toBe(String(4 / 3))
+
+    loadPosterAt(1920, 1080)
+    expect(mediaAspect()).toBe(String(4 / 3))
+  })
+
+  it('stays square when there is neither a poster nor recorded dimensions', () => {
+    renderWithProviders(
+      <MessageAttachment.Video.Sent src="https://cdn.example.com/clip.mp4" />
+    )
+    expect(mediaAspect()).toBe(String(1))
+  })
+
+  it('adopts the poster ratio inside the clamp and pins it outside', () => {
+    renderWithProviders(
+      <MessageAttachment.Video.Sent
+        src="https://cdn.example.com/clip.mp4"
+        poster="https://cdn.example.com/poster.jpg"
+      />
+    )
+
+    // 4:3 sits inside [4/5, 16/9] and passes through untouched.
+    loadPosterAt(1440, 1080)
+    expect(mediaAspect()).toBe(String(4 / 3))
+
+    // 9:16 is taller than the 4/5 floor.
+    loadPosterAt(1080, 1920)
+    expect(mediaAspect()).toBe(String(4 / 5))
+
+    // 21:9 is wider than the 16/9 ceiling.
+    loadPosterAt(2560, 1080)
+    expect(mediaAspect()).toBe(String(16 / 9))
+  })
+
+  it('measures a poster the browser served from cache, which never fires `load`', () => {
+    // A cached `<img>` can be `complete` before React attaches its `load`
+    // listener — a second card on the same URL, a remount while scrolling a
+    // thread, a Storybook HMR update. Measuring on `load` alone left the card
+    // stuck on the fallback with no way out, which is why the hook also reads
+    // from the ref (MES-1353).
+    const saved = (['naturalWidth', 'naturalHeight'] as const).map(
+      (name) =>
+        [
+          name,
+          Object.getOwnPropertyDescriptor(HTMLImageElement.prototype, name),
+        ] as const
+    )
+    // Stubbed on the prototype so the poster already reports its intrinsic
+    // size when the ref callback first sees it, and no `load` is fired below.
+    Object.defineProperty(HTMLImageElement.prototype, 'naturalWidth', {
+      configurable: true,
+      value: 1440,
+    })
+    Object.defineProperty(HTMLImageElement.prototype, 'naturalHeight', {
+      configurable: true,
+      value: 1080,
+    })
+
+    try {
+      renderWithProviders(
+        <MessageAttachment.Video.Sent
+          src="https://cdn.example.com/clip.mp4"
+          poster="https://cdn.example.com/poster.jpg"
+        />
+      )
+      expect(mediaAspect()).toBe(String(4 / 3))
+    } finally {
+      for (const [name, descriptor] of saved) {
+        if (descriptor) {
+          Object.defineProperty(HTMLImageElement.prototype, name, descriptor)
+        } else {
+          delete (
+            HTMLImageElement.prototype as unknown as Record<string, unknown>
+          )[name]
+        }
+      }
+    }
+  })
+
+  it('stays square on a received clip with no poster', () => {
+    // Was asserted as 16:9. That guess is what put a portrait clip in a
+    // letterbox box, since nothing here knows the clip's shape — the sender
+    // has to record it. Square is the honest answer and matches what this
+    // card rendered before the feature existed (MES-1353).
+    renderWithProviders(
+      <MessageAttachment.Video.Received src="https://cdn.example.com/clip.mp4" />
+    )
+    expect(
+      screen.getByTestId('video-attachment').querySelector('img')
+    ).toBeNull()
+    expect(mediaAspect()).toBe(String(1))
+  })
+
+  it('leaves multi-video grids on their fixed geometry', () => {
+    renderWithProviders(
+      <MessageAttachment.Video.Sent
+        items={[
+          {
+            src: 'https://cdn.example.com/a.mp4',
+            poster: 'https://cdn.example.com/a.jpg',
+          },
+          {
+            src: 'https://cdn.example.com/b.mp4',
+            poster: 'https://cdn.example.com/b.jpg',
+          },
+        ]}
+      />
+    )
+    // No inline aspect-ratio: the 2-tile layout owns its own class.
+    expect(mediaAspect()).toBeUndefined()
+  })
+})
+
 describe('ViewerShell focus management', () => {
   it('moves focus into the dialog when a viewer opens', () => {
     renderWithProviders(
@@ -950,6 +1181,24 @@ describe('MessageAttachment lazy-loading defaults', () => {
       const video = screen.getByTestId('video-viewer').querySelector('video')
       expect(video?.getAttribute('preload')).toBe('metadata')
     })
+
+    // The single most load-bearing clause of the preload policy: a nine
+    // -video message must cost four lazy poster images, never nine (or
+    // four) media pipelines. Any future hover-to-preview would break
+    // this, which is the point.
+    it('mounts no `<video>` on the bubble surface, however many items', () => {
+      renderWithProviders(
+        <MessageAttachment.Video.Sent
+          items={Array.from({ length: 9 }, (_, i) => ({
+            src: `https://cdn.example.com/${i}.mp4`,
+            poster: `https://cdn.example.com/${i}.jpg`,
+          }))}
+        />
+      )
+      const bubble = screen.getByTestId('video-attachment')
+      expect(bubble.querySelectorAll('video')).toHaveLength(0)
+      expect(bubble.querySelectorAll('img')).toHaveLength(4)
+    })
   })
 
   describe('Audio', () => {

package/src/components/MessageAttachment/Video/VideoAttachment.stories.tsx

@@ -39,6 +39,28 @@ const STACK_VIDEOS: VideoItem[] = [
   },
 ]
 
+/**
+ * Nine clips — four tiles plus a `+5` scrim on the bottom-right. The cap
+ * on the creator surface is 10 attachments, so the reachable badge range
+ * is `+1` … `+6`; this is real production state, not defensive UI.
+ */
+const OVERFLOW_VIDEOS: VideoItem[] = Array.from({ length: 9 }, () => ({
+  src: VIDEO_SRC,
+  poster: VIDEO_POSTER,
+  mimeType: 'video/mp4',
+}))
+
+/**
+ * Solid-colour poster at an exact intrinsic size. The single-video card
+ * measures `naturalWidth / naturalHeight` off the decoded poster, so the
+ * aspect row needs posters whose ratio is declared rather than inherited
+ * from whatever photo happens to sit in `.storybook/public/`.
+ */
+const aspectPoster = (width: number, height: number): string =>
+  `data:image/svg+xml;utf8,${encodeURIComponent(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"><rect width="100%" height="100%" fill="#3f6b8f"/></svg>`
+  )}`
+
 const meta: Meta = {
   title: 'MessageAttachment/Video',
   parameters: { layout: 'fullscreen' },
@@ -277,3 +299,144 @@ export const StackedWithText: StoryFn = () => (
     </StoryGrid>
   </StoryPage>
 )
+
+/** Stacked videos past the 4-tile grid — the last visible tile trades
+ *  its play badge for the `+N` count scrim. */
+export const Overflow: StoryFn = () => (
+  <StoryPage>
+    <StoryHeading
+      title="Stacked videos with overflow"
+      description="`+N` counts the clips beyond the four shown (total − visible), and the overflow tile drops its play badge — the scrim is the affordance. Activating it opens the viewer on the 4th clip; the carousel still spans every item, not just the visible four."
+    />
+    <StoryGrid>
+      <StoryRow
+        label="5 clips (+1)"
+        sent={
+          <VideoAttachment.Sent
+            items={OVERFLOW_VIDEOS.slice(0, 5)}
+            filename="clips"
+          />
+        }
+        received={
+          <VideoAttachment.Received
+            items={OVERFLOW_VIDEOS.slice(0, 5)}
+            filename="clips"
+          />
+        }
+      />
+      <StoryRow
+        label="9 clips (+5)"
+        sent={<VideoAttachment.Sent items={OVERFLOW_VIDEOS} filename="clips" />}
+        received={
+          <VideoAttachment.Received items={OVERFLOW_VIDEOS} filename="clips" />
+        }
+      />
+      <StoryRow
+        label="9 clips + caption"
+        sent={
+          <VideoAttachment.Sent
+            items={OVERFLOW_VIDEOS}
+            filename="clips"
+            text="Nine takes — the last tile shows how many are hiding"
+          />
+        }
+        received={
+          <VideoAttachment.Received
+            items={OVERFLOW_VIDEOS}
+            filename="clips"
+            text="Nine takes — the last tile shows how many are hiding"
+          />
+        }
+      />
+    </StoryGrid>
+  </StoryPage>
+)
+
+/** Single-video cards size themselves to the poster's own aspect, clamped
+ *  to `[4/5, 16/9]` so one portrait clip can't dominate the thread. */
+export const SingleAspect: StoryFn = () => (
+  <StoryPage>
+    <StoryHeading
+      title="Single video — source aspect"
+      description="Card width is fixed at 330px; height follows the poster's intrinsic ratio, clamped to [4/5, 16/9]. The 21:9 row proves the wide clamp and the 9:16 row the tall one — both land on the same box as the 16:9 and 4/5 limits respectively."
+    />
+    <StoryGrid>
+      <StoryRow
+        label="16:9 (1.78)"
+        sent={
+          <VideoAttachment.Sent
+            src={VIDEO_SRC}
+            poster={aspectPoster(1920, 1080)}
+            mimeType="video/mp4"
+            filename="landscape.mp4"
+          />
+        }
+        received={
+          <VideoAttachment.Received
+            src={VIDEO_SRC}
+            poster={aspectPoster(1920, 1080)}
+            mimeType="video/mp4"
+            filename="landscape.mp4"
+          />
+        }
+      />
+      <StoryRow
+        label="4:3 (1.33)"
+        sent={
+          <VideoAttachment.Sent
+            src={VIDEO_SRC}
+            poster={aspectPoster(1440, 1080)}
+            mimeType="video/mp4"
+            filename="classic.mp4"
+          />
+        }
+        received={
+          <VideoAttachment.Received
+            src={VIDEO_SRC}
+            poster={aspectPoster(1440, 1080)}
+            mimeType="video/mp4"
+            filename="classic.mp4"
+          />
+        }
+      />
+      <StoryRow
+        label="9:16 → clamped to 4:5"
+        sent={
+          <VideoAttachment.Sent
+            src={VIDEO_SRC}
+            poster={aspectPoster(1080, 1920)}
+            mimeType="video/mp4"
+            filename="portrait.mp4"
+          />
+        }
+        received={
+          <VideoAttachment.Received
+            src={VIDEO_SRC}
+            poster={aspectPoster(1080, 1920)}
+            mimeType="video/mp4"
+            filename="portrait.mp4"
+          />
+        }
+      />
+      <StoryRow
+        label="21:9 → clamped to 16:9"
+        sent={
+          <VideoAttachment.Sent
+            src={VIDEO_SRC}
+            poster={aspectPoster(2560, 1080)}
+            mimeType="video/mp4"
+            filename="ultrawide.mp4"
+          />
+        }
+        received={
+          <VideoAttachment.Received
+            src={VIDEO_SRC}
+            poster={aspectPoster(2560, 1080)}
+            mimeType="video/mp4"
+            filename="ultrawide.mp4"
+          />
+        }
+      />
+    </StoryGrid>
+  </StoryPage>
+)