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

package/src/components/MessageAttachment/_shared/ImageViewer.tsx

@@ -0,0 +1,314 @@
+import {
+  CaretLeftIcon,
+  CaretRightIcon,
+  MagnifyingGlassMinusIcon,
+  MagnifyingGlassPlusIcon,
+} from '@phosphor-icons/react'
+import classNames from 'classnames'
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+import DownloadAction from './DownloadAction'
+import { filenameFromUrl } from './fileMeta'
+import ViewerShell from './ViewerShell'
+
+export interface ImageViewerItem {
+  src: string
+  alt?: string
+  /**
+   * Filename used by the download action. Falls back to the last
+   * pathname segment of `src` when omitted.
+   */
+  filename?: string
+}
+
+export interface ImageViewerProps {
+  open: boolean
+  items: ImageViewerItem[]
+  /** Currently active item. Defaults to `0`. */
+  initialIndex?: number
+  onClose: () => void
+}
+
+const MIN_SCALE = 1
+const MAX_SCALE = 8
+const ZOOM_STEP = 1.25
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), max)
+
+interface ViewportState {
+  scale: number
+  x: number
+  y: number
+}
+
+const RESET_STATE: ViewportState = { scale: 1, x: 0, y: 0 }
+
+/**
+ * Native lightbox-style image viewer with mouse-wheel zoom, drag-to-pan,
+ * double-click toggle (1× ↔ 2×), keyboard arrow navigation between
+ * stacked items, and built-in download.
+ *
+ * Used by every `MessageAttachment.Image.*` variant — Composer / Sent /
+ * Received all open this viewer when activated, so admins can preview
+ * attachments before sending and recipients can preview after receipt.
+ */
+const ImageViewer: React.FC<ImageViewerProps> = ({
+  open,
+  items,
+  initialIndex = 0,
+  onClose,
+}) => {
+  const safeIndex = clamp(initialIndex, 0, Math.max(items.length - 1, 0))
+  const [index, setIndex] = useState(safeIndex)
+  const [view, setView] = useState<ViewportState>(RESET_STATE)
+  const [dragging, setDragging] = useState(false)
+  const dragStart = useRef<{
+    x: number
+    y: number
+    panX: number
+    panY: number
+  } | null>(null)
+  const stageRef = useRef<HTMLDivElement | null>(null)
+
+  // Reset zoom whenever the viewer opens or the active item changes.
+  useEffect(() => {
+    if (!open) return
+    setIndex(clamp(initialIndex, 0, Math.max(items.length - 1, 0)))
+    setView(RESET_STATE)
+  }, [open, initialIndex, items.length])
+
+  useEffect(() => {
+    setView(RESET_STATE)
+  }, [index])
+
+  const goPrev = useCallback(() => {
+    setIndex((i) => (i <= 0 ? items.length - 1 : i - 1))
+  }, [items.length])
+
+  const goNext = useCallback(() => {
+    setIndex((i) => (i >= items.length - 1 ? 0 : i + 1))
+  }, [items.length])
+
+  // Arrow-key navigation between items in the stack.
+  useEffect(() => {
+    if (!open) return undefined
+    const onKey = (e: KeyboardEvent) => {
+      if (items.length <= 1) return
+      if (e.key === 'ArrowRight') {
+        e.preventDefault()
+        goNext()
+      } else if (e.key === 'ArrowLeft') {
+        e.preventDefault()
+        goPrev()
+      }
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [open, items.length, goPrev, goNext])
+
+  const zoomBy = useCallback((factor: number) => {
+    setView((prev) => {
+      const nextScale = clamp(prev.scale * factor, MIN_SCALE, MAX_SCALE)
+      // Re-center when we hit 1× so the image is never offset off-screen.
+      if (nextScale === MIN_SCALE) return RESET_STATE
+      return { scale: nextScale, x: prev.x, y: prev.y }
+    })
+  }, [])
+
+  // React's synthetic `onWheel` is registered as a passive listener
+  // (since React 17), so `e.preventDefault()` is a no-op inside an
+  // `onWheel` handler — the page scrolls behind the viewer regardless.
+  // Attach the listener manually on the stage element with
+  // `{ passive: false }` so we can actually stop the page scroll
+  // while the user zooms.
+  useEffect(() => {
+    if (!open) return undefined
+    const stage = stageRef.current
+    if (!stage) return undefined
+
+    const handleWheel = (e: WheelEvent) => {
+      e.preventDefault()
+      const factor = e.deltaY < 0 ? ZOOM_STEP : 1 / ZOOM_STEP
+      zoomBy(factor)
+    }
+
+    stage.addEventListener('wheel', handleWheel, { passive: false })
+    return () => stage.removeEventListener('wheel', handleWheel)
+  }, [open, zoomBy])
+
+  const handleDoubleClick = useCallback(() => {
+    setView((prev) =>
+      prev.scale > 1
+        ? RESET_STATE
+        : { scale: 2, x: prev.x, y: prev.y }
+    )
+  }, [])
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      // Only allow drag-pan once the user has zoomed in.
+      if (view.scale <= 1) return
+      e.preventDefault()
+      setDragging(true)
+      dragStart.current = {
+        x: e.clientX,
+        y: e.clientY,
+        panX: view.x,
+        panY: view.y,
+      }
+    },
+    [view.scale, view.x, view.y]
+  )
+
+  useEffect(() => {
+    if (!dragging) return undefined
+
+    const onMove = (e: MouseEvent) => {
+      const start = dragStart.current
+      if (!start) return
+      setView((prev) => ({
+        scale: prev.scale,
+        x: start.panX + (e.clientX - start.x),
+        y: start.panY + (e.clientY - start.y),
+      }))
+    }
+    const onUp = () => {
+      dragStart.current = null
+      setDragging(false)
+    }
+    window.addEventListener('mousemove', onMove)
+    window.addEventListener('mouseup', onUp)
+    return () => {
+      window.removeEventListener('mousemove', onMove)
+      window.removeEventListener('mouseup', onUp)
+    }
+  }, [dragging])
+
+  const item = items[index]
+  const filename = useMemo(
+    () =>
+      item?.filename ?? (item ? filenameFromUrl(item.src) : 'image'),
+    [item]
+  )
+
+  const cursorClass = useMemo(() => {
+    if (view.scale <= 1) return 'cursor-zoom-in'
+    return dragging ? 'cursor-grabbing' : 'cursor-grab'
+  }, [view.scale, dragging])
+
+  if (!item) return null
+
+  const totalLabel = items.length > 1 ? ` (${index + 1} / ${items.length})` : ''
+
+  return (
+    <ViewerShell
+      open={open}
+      onClose={onClose}
+      title={`${filename}${totalLabel}`}
+      actions={
+        <>
+          <button
+            type="button"
+            onClick={() => zoomBy(1 / ZOOM_STEP)}
+            disabled={view.scale <= MIN_SCALE}
+            aria-label="Zoom out"
+            className="flex size-10 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20 disabled:opacity-40"
+          >
+            <MagnifyingGlassMinusIcon
+              className="size-5"
+              weight="bold"
+              aria-hidden
+            />
+          </button>
+          <button
+            type="button"
+            onClick={() => zoomBy(ZOOM_STEP)}
+            disabled={view.scale >= MAX_SCALE}
+            aria-label="Zoom in"
+            className="flex size-10 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20 disabled:opacity-40"
+          >
+            <MagnifyingGlassPlusIcon
+              className="size-5"
+              weight="bold"
+              aria-hidden
+            />
+          </button>
+          <DownloadAction
+            url={item.src}
+            filename={filename}
+            variant="overlay"
+            label={`Download ${filename}`}
+          />
+        </>
+      }
+      data-testid="image-viewer"
+    >
+      <div
+        ref={stageRef}
+        // The stage swallows wheel / double-click / drag gestures to
+        // implement the zoom + pan controls. It's not a button (clicks
+        // don't have a single discrete action), so suppress the
+        // a11y/no-static-element-interactions rule here — the discrete
+        // zoom / download actions live in the toolbar above. The wheel
+        // listener is attached manually (non-passive) in the effect
+        // above so `preventDefault()` actually stops page scroll.
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        role="presentation"
+        onDoubleClick={handleDoubleClick}
+        onMouseDown={handleMouseDown}
+        className={classNames(
+          'relative flex h-full w-full select-none items-center justify-center overflow-hidden',
+          cursorClass
+        )}
+      >
+        <img
+          src={item.src}
+          alt={item.alt ?? filename}
+          draggable={false}
+          // Once the user has explicitly opened the viewer the active
+          // image needs to appear immediately, so we eager-load it.
+          // Adjacent / off-screen viewer images aren't rendered here
+          // (we only mount `items[index]`), so the lazy default on
+          // siblings is automatic.
+          loading="eager"
+          decoding="async"
+          style={{
+            transform: `translate3d(${view.x}px, ${view.y}px, 0) scale(${view.scale})`,
+            transition: dragging ? 'none' : 'transform 120ms ease-out',
+          }}
+          className="max-h-full max-w-full object-contain"
+        />
+      </div>
+
+      {items.length > 1 ? (
+        <>
+          <button
+            type="button"
+            onClick={goPrev}
+            aria-label="Previous image"
+            className="absolute left-4 top-1/2 z-10 flex size-12 -translate-y-1/2 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20"
+          >
+            <CaretLeftIcon className="size-5" weight="bold" aria-hidden />
+          </button>
+          <button
+            type="button"
+            onClick={goNext}
+            aria-label="Next image"
+            className="absolute right-4 top-1/2 z-10 flex size-12 -translate-y-1/2 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20"
+          >
+            <CaretRightIcon className="size-5" weight="bold" aria-hidden />
+          </button>
+        </>
+      ) : null}
+    </ViewerShell>
+  )
+}
+
+export default ImageViewer

package/src/components/MessageAttachment/_shared/MediaStackGrid.tsx

@@ -0,0 +1,139 @@
+import classNames from 'classnames'
+import React from 'react'
+
+export interface MediaStackTile {
+  /** Renderable tile content (image / video / poster). */
+  content: React.ReactNode
+  /** Pure-tile aria label (e.g. `'Photo 1'`). Used by `Pressable` mode. */
+  ariaLabel?: string
+}
+
+export interface MediaStackGridProps {
+  tiles: MediaStackTile[]
+  /**
+   * When set, every tile is wrapped in a `<button>` and forwards the
+   * tile index to `onTileActivate`. Used by Image / Video so any tile
+   * opens the lightbox / video viewer at the right index.
+   */
+  onTileActivate?: (index: number) => void
+  /**
+   * Maximum tiles to render before the last one collapses into an
+   * "+N more" overflow indicator. Defaults to `4`.
+   */
+  maxVisible?: number
+  className?: string
+}
+
+const TILE_SHELL =
+  'relative block size-full overflow-hidden bg-black/5 outline-none focus-visible:ring-2 focus-visible:ring-white/80 focus-visible:ring-offset-2 focus-visible:ring-offset-black'
+
+/**
+ * Adaptive grid used by stacked image / video attachments. Layouts:
+ *
+ *   - 1 tile  — full-bleed
+ *   - 2 tiles — equal-width side-by-side row
+ *   - 3 tiles — one large left tile + two stacked right tiles
+ *   - 4 tiles — 2×2 grid
+ *   - 5+      — 2×2 grid with the bottom-right tile showing "+N more"
+ *
+ * The grid is square-ish overall (1:1 for 1, 16:9 for 2, 4:3 for 3+) so
+ * stacks fit comfortably inside the bubble width without dominating the
+ * conversation.
+ */
+const MediaStackGrid: React.FC<MediaStackGridProps> = ({
+  tiles,
+  onTileActivate,
+  maxVisible = 4,
+  className,
+}) => {
+  const total = tiles.length
+  if (total === 0) return null
+
+  const visible = tiles.slice(0, Math.min(total, maxVisible))
+  const overflow = total - visible.length
+
+  const renderTile = (tile: MediaStackTile, index: number, extra?: React.ReactNode) => {
+    const sharedClass = classNames(TILE_SHELL, 'h-full w-full')
+    if (onTileActivate) {
+      return (
+        <button
+          type="button"
+          key={index}
+          onClick={() => onTileActivate(index)}
+          aria-label={tile.ariaLabel ?? `Open media ${index + 1}`}
+          className={classNames(sharedClass, 'cursor-zoom-in')}
+        >
+          {tile.content}
+          {extra}
+        </button>
+      )
+    }
+    return (
+      <div key={index} className={sharedClass}>
+        {tile.content}
+        {extra}
+      </div>
+    )
+  }
+
+  if (visible.length === 1) {
+    return (
+      <div className={classNames('aspect-square w-full', className)}>
+        {renderTile(visible[0], 0)}
+      </div>
+    )
+  }
+
+  if (visible.length === 2) {
+    return (
+      <div
+        className={classNames(
+          'grid aspect-[16/9] w-full grid-cols-2 gap-0.5',
+          className
+        )}
+      >
+        {visible.map((tile, index) => renderTile(tile, index))}
+      </div>
+    )
+  }
+
+  if (visible.length === 3) {
+    return (
+      <div
+        className={classNames(
+          'grid aspect-[4/3] w-full grid-cols-2 grid-rows-2 gap-0.5',
+          className
+        )}
+      >
+        <div className="row-span-2">{renderTile(visible[0], 0)}</div>
+        {renderTile(visible[1], 1)}
+        {renderTile(visible[2], 2)}
+      </div>
+    )
+  }
+
+  // 4 tiles (or 4 visible with overflow on the last)
+  return (
+    <div
+      className={classNames(
+        'grid aspect-[4/3] w-full grid-cols-2 grid-rows-2 gap-0.5',
+        className
+      )}
+    >
+      {visible.map((tile, index) => {
+        const isLastWithOverflow = overflow > 0 && index === visible.length - 1
+        return renderTile(
+          tile,
+          index,
+          isLastWithOverflow ? (
+            <div className="absolute inset-0 flex items-center justify-center bg-black/55 text-2xl font-semibold text-white">
+              +{overflow}
+            </div>
+          ) : null
+        )
+      })}
+    </div>
+  )
+}
+
+export default MediaStackGrid

package/src/components/MessageAttachment/_shared/PdfViewer.tsx

@@ -0,0 +1,100 @@
+import React, { useMemo } from 'react'
+
+import DownloadAction from './DownloadAction'
+import { filenameFromUrl } from './fileMeta'
+import ViewerShell from './ViewerShell'
+
+export interface PdfViewerProps {
+  open: boolean
+  /** Source URL of the PDF document. */
+  src: string
+  /** Filename used by the toolbar title and the download action. */
+  filename?: string
+  onClose: () => void
+}
+
+/**
+ * Modal PDF viewer that hosts the document inside a sandboxed
+ * `<iframe>`, leaving native PDF rendering, scroll, and zoom to the
+ * browser. Adds a thin top toolbar with the filename + a download
+ * action so users get the same `download / close` affordances as the
+ * `ImageViewer` and the inline audio / video players.
+ */
+const PdfViewer: React.FC<PdfViewerProps> = ({
+  open,
+  src,
+  filename,
+  onClose,
+}) => {
+  const resolvedFilename = useMemo(
+    () => filename ?? filenameFromUrl(src),
+    [filename, src]
+  )
+
+  // `#toolbar=0` is honored by Chromium-family browsers and hides the
+  // built-in PDF toolbar so our own toolbar reads as the single source
+  // of truth (otherwise the user sees two stacked toolbars). Firefox /
+  // Safari ignore it and keep their native toolbars, which is fine —
+  // the user gets a familiar experience either way.
+  //
+  // Preserve any existing fragment the caller supplied (e.g.
+  // `#page=3`) by merging our params into it rather than naively
+  // appending a second `#…` segment.
+  const iframeSrc = useMemo(() => withPdfViewerParams(src), [src])
+
+  return (
+    <ViewerShell
+      open={open}
+      onClose={onClose}
+      title={resolvedFilename}
+      actions={
+        <DownloadAction
+          url={src}
+          filename={resolvedFilename}
+          variant="overlay"
+          label={`Download ${resolvedFilename}`}
+        />
+      }
+      contentClassName="bg-[#1f1e1d]"
+      data-testid="pdf-viewer"
+    >
+      <iframe
+        src={iframeSrc}
+        title={resolvedFilename}
+        className="absolute inset-0 size-full bg-white"
+        // Sandbox the iframe to stop the embedded document from
+        // reaching parent context. We intentionally omit
+        // `allow-same-origin`: even when the PDF host happens to share
+        // our origin, granting it defeats the rest of the sandbox.
+        // `allow-scripts` keeps the native PDF viewer's interactive
+        // affordances (search, page nav, form filling) working,
+        // `allow-downloads` lets the user save via the built-in
+        // toolbar where it's still visible (Firefox / Safari), and
+        // `allow-popups` lets external links inside the PDF open in a
+        // new tab.
+        sandbox="allow-scripts allow-forms allow-popups allow-downloads"
+      />
+    </ViewerShell>
+  )
+}
+
+/**
+ * Merge our PDF-viewer params (`toolbar=0`, `navpanes=0`) into the
+ * URL's existing fragment so callers can still pass things like
+ * `#page=3` without us clobbering them — naively appending
+ * `#toolbar=0` to a URL that already has a fragment produces
+ * `…#page=3#toolbar=0` which most readers ignore.
+ */
+const withPdfViewerParams = (src: string): string => {
+  const hashIndex = src.indexOf('#')
+  const base = hashIndex === -1 ? src : src.slice(0, hashIndex)
+  const existing = hashIndex === -1 ? '' : src.slice(hashIndex + 1)
+
+  const params = new URLSearchParams(existing)
+  if (!params.has('toolbar')) params.set('toolbar', '0')
+  if (!params.has('navpanes')) params.set('navpanes', '0')
+
+  return `${base}#${params.toString()}`
+}
+
+export default PdfViewer