@linktr.ee/messaging-react 2.1.0 → 2.2.0-rc-1778753733

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

@@ -0,0 +1,272 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import {
+  StoryGrid,
+  StoryHeading,
+  StoryPage,
+  StoryRow,
+} from '../stories/StoryTable'
+import type { VideoItem } from '../types'
+
+import VideoAttachment from '.'
+
+// Sourced from `.storybook/public/` so we share the same assets used by
+// the LockedAttachment stories.
+const VIDEO_SRC = '/video-source.mp4'
+const VIDEO_POSTER = '/video-thumbnail.jpg'
+
+const STACK_VIDEOS: VideoItem[] = [
+  {
+    src: VIDEO_SRC,
+    poster: VIDEO_POSTER,
+    mimeType: 'video/mp4',
+  },
+  {
+    src: VIDEO_SRC,
+    poster: VIDEO_POSTER,
+    mimeType: 'video/mp4',
+  },
+  {
+    src: VIDEO_SRC,
+    poster: VIDEO_POSTER,
+    mimeType: 'video/mp4',
+  },
+  {
+    src: VIDEO_SRC,
+    poster: VIDEO_POSTER,
+    mimeType: 'video/mp4',
+  },
+]
+
+const meta: Meta = {
+  title: 'MessageAttachment/Video',
+  parameters: { layout: 'fullscreen' },
+}
+export default meta
+
+const handleDismiss = () => {
+  // eslint-disable-next-line no-console
+  console.log('Dismissed video attachment')
+}
+
+/**
+ * Single video — the bubble shows the poster with a play overlay.
+ * Clicking opens the full-viewport `VideoViewer` with native controls
+ * (play / pause / seek / fullscreen / volume) and a download action.
+ */
+export const Single: StoryFn = () => (
+  <StoryPage>
+    <StoryHeading
+      title="Single video"
+      description="Click any bubble to open the full-screen video viewer with native controls and a download action."
+    />
+    <StoryGrid>
+      <StoryRow
+        label="Default"
+        composer={
+          <VideoAttachment.Composer
+            src={VIDEO_SRC}
+            poster={VIDEO_POSTER}
+            mimeType="video/mp4"
+            filename="video-source.mp4"
+            onDismiss={handleDismiss}
+          />
+        }
+        sent={
+          <VideoAttachment.Sent
+            src={VIDEO_SRC}
+            poster={VIDEO_POSTER}
+            mimeType="video/mp4"
+            filename="video-source.mp4"
+          />
+        }
+        received={
+          <VideoAttachment.Received
+            src={VIDEO_SRC}
+            poster={VIDEO_POSTER}
+            mimeType="video/mp4"
+            filename="video-source.mp4"
+          />
+        }
+      />
+      <StoryRow
+        label="No poster"
+        composer={
+          <VideoAttachment.Composer
+            src={VIDEO_SRC}
+            mimeType="video/mp4"
+            filename="video-source.mp4"
+            onDismiss={handleDismiss}
+          />
+        }
+        sent={
+          <VideoAttachment.Sent
+            src={VIDEO_SRC}
+            mimeType="video/mp4"
+            filename="video-source.mp4"
+          />
+        }
+        received={
+          <VideoAttachment.Received
+            src={VIDEO_SRC}
+            mimeType="video/mp4"
+            filename="video-source.mp4"
+          />
+        }
+      />
+    </StoryGrid>
+  </StoryPage>
+)
+
+/** Single video with an accompanying caption. Sent + Received only —
+ *  composer captions live in the message input, not the attachment
+ *  preview. */
+export const SingleWithText: StoryFn = () => (
+  <StoryPage>
+    <StoryHeading
+      title="Single video with caption"
+      description="Caption renders inside the same bubble, below the video poster. Composer column is intentionally blank — composer captions live in the message input."
+    />
+    <StoryGrid>
+      <StoryRow
+        label="Short caption"
+        composer={
+          <VideoAttachment.Composer
+            src={VIDEO_SRC}
+            poster={VIDEO_POSTER}
+            mimeType="video/mp4"
+            filename="video-source.mp4"
+            onDismiss={handleDismiss}
+          />
+        }
+        sent={
+          <VideoAttachment.Sent
+            src={VIDEO_SRC}
+            poster={VIDEO_POSTER}
+            mimeType="video/mp4"
+            filename="video-source.mp4"
+            text="Here is the video"
+          />
+        }
+        received={
+          <VideoAttachment.Received
+            src={VIDEO_SRC}
+            poster={VIDEO_POSTER}
+            mimeType="video/mp4"
+            filename="video-source.mp4"
+            text="Here is the video"
+          />
+        }
+      />
+    </StoryGrid>
+  </StoryPage>
+)
+
+/** Stacked video attachments. Sent + Received only — the composer
+ *  surface accepts a single video at a time. */
+export const Stacked: StoryFn = () => (
+  <StoryPage>
+    <StoryHeading
+      title="Stacked videos"
+      description="Each tile shows its own poster + play overlay. Click any tile to open the viewer at that index. Composer column is intentionally blank — the composer accepts a single video at a time."
+    />
+    <StoryGrid>
+      <StoryRow
+        label="2 clips"
+        composer={
+          <VideoAttachment.Composer
+            src={VIDEO_SRC}
+            poster={VIDEO_POSTER}
+            mimeType="video/mp4"
+            filename="video-source.mp4"
+            onDismiss={handleDismiss}
+          />
+        }
+        sent={
+          <VideoAttachment.Sent items={STACK_VIDEOS.slice(0, 2)} filename="clips" />
+        }
+        received={
+          <VideoAttachment.Received
+            items={STACK_VIDEOS.slice(0, 2)}
+            filename="clips"
+          />
+        }
+      />
+      <StoryRow
+        label="3 clips"
+        composer={
+          <VideoAttachment.Composer
+            src={VIDEO_SRC}
+            poster={VIDEO_POSTER}
+            mimeType="video/mp4"
+            filename="video-source.mp4"
+            onDismiss={handleDismiss}
+          />
+        }
+        sent={
+          <VideoAttachment.Sent items={STACK_VIDEOS.slice(0, 3)} filename="clips" />
+        }
+        received={
+          <VideoAttachment.Received
+            items={STACK_VIDEOS.slice(0, 3)}
+            filename="clips"
+          />
+        }
+      />
+      <StoryRow
+        label="4 clips"
+        composer={
+          <VideoAttachment.Composer
+            src={VIDEO_SRC}
+            poster={VIDEO_POSTER}
+            mimeType="video/mp4"
+            filename="video-source.mp4"
+            onDismiss={handleDismiss}
+          />
+        }
+        sent={<VideoAttachment.Sent items={STACK_VIDEOS} filename="clips" />}
+        received={<VideoAttachment.Received items={STACK_VIDEOS} filename="clips" />}
+      />
+    </StoryGrid>
+  </StoryPage>
+)
+
+/** Stacked videos with an accompanying caption.
+ *  Sent + Received only — see `Stacked` for the rationale. */
+export const StackedWithText: StoryFn = () => (
+  <StoryPage>
+    <StoryHeading
+      title="Stacked videos with caption"
+      description="Caption sits inside the same bubble, below the stack. Composer column is intentionally blank — the composer accepts a single video at a time."
+    />
+    <StoryGrid>
+      <StoryRow
+        label="3 clips + caption"
+        composer={
+          <VideoAttachment.Composer
+            src={VIDEO_SRC}
+            poster={VIDEO_POSTER}
+            mimeType="video/mp4"
+            filename="video-source.mp4"
+            onDismiss={handleDismiss}
+          />
+        }
+        sent={
+          <VideoAttachment.Sent
+            items={STACK_VIDEOS.slice(0, 3)}
+            filename="clips"
+            text="Three takes — pick your favorite"
+          />
+        }
+        received={
+          <VideoAttachment.Received
+            items={STACK_VIDEOS.slice(0, 3)}
+            filename="clips"
+            text="Three takes — pick your favorite"
+          />
+        }
+      />
+    </StoryGrid>
+  </StoryPage>
+)

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

@@ -0,0 +1,281 @@
+import { PlayIcon, VideoCameraIcon } from '@phosphor-icons/react'
+import React from 'react'
+
+import Bubble from '../_shared/Bubble'
+import DismissButton from '../_shared/DismissButton'
+import MediaStackGrid, {
+  type MediaStackTile,
+} from '../_shared/MediaStackGrid'
+import { useViewer } from '../_shared/useViewer'
+import VideoViewer, { type VideoViewerItem } from '../_shared/VideoViewer'
+import {
+  bubbleVariantForState,
+  type MediaPreloadMode,
+  type MessageAttachmentBaseProps,
+  type MessageAttachmentState,
+  type VideoItem,
+} from '../types'
+
+export interface VideoAttachmentSharedProps extends MessageAttachmentBaseProps {
+  /** Single video — convenience for the most common case. */
+  src?: string
+  /** Poster image — preview shown before playback starts. */
+  poster?: string
+  /** MIME type hint — typed onto the inline `<source>` element. */
+  mimeType?: string
+  /** Filename surfaced in the viewer toolbar + download default name. */
+  filename?: string
+  /**
+   * Stacked videos. Takes precedence over `src` when set. Renders a
+   * 1 / 2 / 3 / 4-tile grid (5+ collapse into a `+N` overflow tile).
+   * Sent + Received only — the composer surface intentionally accepts
+   * a single attachment at a time.
+   */
+  items?: VideoItem[]
+  /**
+   * `<video preload>` hint forwarded into the viewer. Defaults to
+   * `'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.
+   */
+  preload?: MediaPreloadMode
+  /**
+   * Forwarded to the viewer trigger. When omitted the click still
+   * opens the built-in `VideoViewer` — supply this for analytics, or
+   * return `false` to intercept the open (e.g. switch to a route-
+   * based player / confirmation modal). Any other return value
+   * (including `void`/`undefined`) lets the built-in viewer open.
+   * For stacked attachments the `index` argument identifies the tile.
+   */
+  onClick?: (index: number) => boolean | void
+}
+
+const PlayBadge: React.FC = () => (
+  <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+    <span className="flex size-12 items-center justify-center rounded-full bg-black/55 text-white backdrop-blur">
+      <PlayIcon className="size-6" weight="fill" aria-hidden />
+    </span>
+  </div>
+)
+
+const PosterTile: React.FC<{ item: VideoItem; index: number }> = ({
+  item,
+  index,
+}) => (
+  <div className="absolute inset-0 size-full bg-[#0d0d0d]">
+    {item.poster ? (
+      <img
+        src={item.poster}
+        alt={`Video ${index + 1} thumbnail`}
+        draggable={false}
+        loading="lazy"
+        decoding="async"
+        className="absolute inset-0 size-full rounded-md object-cover"
+      />
+    ) : (
+      <div className="absolute inset-0 flex items-center justify-center">
+        <VideoCameraIcon
+          className="size-16 rounded-md text-white/30"
+          weight="regular"
+          aria-hidden
+        />
+      </div>
+    )}
+    <PlayBadge />
+  </div>
+)
+
+const tileFromItem = (
+  item: VideoItem,
+  index: number,
+  totalCount: number
+): MediaStackTile => ({
+  ariaLabel: `Play video ${index + 1} of ${totalCount}`,
+  content: <PosterTile item={item} index={index} />,
+})
+
+const resolveItems = ({
+  src,
+  poster,
+  mimeType,
+  preload,
+  items,
+}: {
+  src?: string
+  poster?: string
+  mimeType?: string
+  preload?: MediaPreloadMode
+  items?: VideoItem[]
+}): VideoItem[] => {
+  if (items && items.length > 0) {
+    return preload ? items.map((it) => ({ ...it, preload: it.preload ?? preload })) : items
+  }
+  if (src) return [{ src, poster, mimeType, preload }]
+  return []
+}
+
+interface InternalVideoRowProps extends VideoAttachmentSharedProps {
+  state: MessageAttachmentState
+}
+
+const buildViewerItems = (
+  resolvedItems: VideoItem[],
+  filename?: string
+): VideoViewerItem[] =>
+  resolvedItems.map((item, index) => ({
+    src: item.src,
+    poster: item.poster,
+    mimeType: item.mimeType,
+    preload: item.preload,
+    filename:
+      filename && resolvedItems.length === 1
+        ? filename
+        : filename
+          ? `${filename} (${index + 1})`
+          : undefined,
+  }))
+
+/**
+ * Composer rendering — bare 280px-square poster with a play badge,
+ * a dismiss `×` overlay, and `rounded-md` corners. Renders without the
+ * shared `Bubble` chrome (no border / no background / no padding) so
+ * the in-progress attachment looks like a draft preview rather than a
+ * sent message. Single attachment only — `items` and `text` are not
+ * supported on the composer surface.
+ */
+const VideoComposerInner: React.FC<{
+  src: string
+  poster?: string
+  mimeType?: string
+  filename?: string
+  preload?: MediaPreloadMode
+  onClick?: (index: number) => boolean | void
+  onDismiss?: () => void
+}> = ({ src, poster, mimeType, filename, preload, onClick, onDismiss }) => {
+  const { viewerOpen, viewerIndex, handleActivate, closeViewer } = useViewer(
+    onClick
+  )
+
+  return (
+    <div className="relative w-fit">
+      <button
+        type="button"
+        onClick={() => handleActivate(0)}
+        aria-label="Play video"
+        className="relative block size-[280px] cursor-pointer overflow-hidden rounded-md outline-none focus-visible:ring-2 focus-visible:ring-black/40"
+      >
+        <PosterTile item={{ src, poster, mimeType }} index={0} />
+      </button>
+      {onDismiss ? (
+        <div className="absolute right-2 top-2 z-10">
+          <DismissButton onClick={onDismiss} />
+        </div>
+      ) : null}
+
+      <VideoViewer
+        open={viewerOpen}
+        items={buildViewerItems([{ src, poster, mimeType, preload }], filename)}
+        initialIndex={viewerIndex}
+        onClose={closeViewer}
+      />
+    </div>
+  )
+}
+
+/**
+ * Sent / Received rendering — wrapped in the shared `Bubble` chrome,
+ * supports single or stacked items, and renders an optional caption
+ * below the media.
+ */
+const VideoBubbleRow: React.FC<InternalVideoRowProps> = ({
+  state,
+  src,
+  poster,
+  mimeType,
+  filename,
+  items,
+  text,
+  groupPosition,
+  preload,
+  onClick,
+}) => {
+  const resolvedItems = resolveItems({ src, poster, mimeType, preload, items })
+  const variant = bubbleVariantForState(state)
+  const { viewerOpen, viewerIndex, handleActivate, closeViewer } = useViewer(
+    onClick
+  )
+
+  if (resolvedItems.length === 0) {
+    return null
+  }
+
+  const tiles: MediaStackTile[] = resolvedItems.map((item, index) =>
+    tileFromItem(item, index, resolvedItems.length)
+  )
+
+  return (
+    <Bubble
+      variant={variant}
+      text={text}
+      groupPosition={groupPosition}
+      data-testid="video-attachment"
+    >
+      <div className="relative">
+        <MediaStackGrid
+          tiles={tiles}
+          onTileActivate={handleActivate}
+          className="overflow-hidden rounded-md"
+        />
+      </div>
+
+      <VideoViewer
+        open={viewerOpen}
+        items={buildViewerItems(resolvedItems, filename)}
+        initialIndex={viewerIndex}
+        onClose={closeViewer}
+      />
+    </Bubble>
+  )
+}
+
+/**
+ * Composer-only props. Single video (`src`) is required; stacked
+ * `items` and `text` captions are not supported in the composer state.
+ */
+export interface VideoComposerProps {
+  src: string
+  poster?: string
+  mimeType?: string
+  filename?: string
+  /**
+   * `<video preload>` hint forwarded into the viewer. Defaults to
+   * `'none'`. See `VideoAttachmentSharedProps.preload`.
+   */
+  preload?: MediaPreloadMode
+  onClick?: (index: number) => boolean | void
+  onDismiss?: () => void
+}
+
+export type VideoSentProps = VideoAttachmentSharedProps
+export type VideoReceivedProps = VideoAttachmentSharedProps
+
+const VideoComposer: React.FC<VideoComposerProps> = (props) => (
+  <VideoComposerInner {...props} />
+)
+const VideoSent: React.FC<VideoSentProps> = (props) => (
+  <VideoBubbleRow {...props} state="sent" />
+)
+const VideoReceived: React.FC<VideoReceivedProps> = (props) => (
+  <VideoBubbleRow {...props} state="received" />
+)
+
+const VideoAttachment = {
+  Composer: VideoComposer,
+  Sent: VideoSent,
+  Received: VideoReceived,
+}
+
+export default VideoAttachment