@proteos/ui 0.77.0 → 0.78.0

package/src/components/media-player/media-markers.tsx

@@ -0,0 +1,108 @@
+import { Button as AriaButton } from 'react-aria-components'
+import { tv, type VariantProps } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+import { formatMediaTime } from './media-time'
+
+/* =========================================================================
+   MediaMarkerTrack — named moments on a time axis: a heading row (what the
+   markers are, which ones hold the playhead, how many) over a thin track of
+   press-to-seek bars. Shared by the waveform and the timeline so a marker
+   looks and reads the same whichever picture sits above it.
+   ========================================================================= */
+
+export const mediaMarkersStyles = tv({
+  slots: {
+    root: 'flex shrink-0 flex-col gap-[3px]',
+    heading: 'flex min-w-0 shrink-0 items-center gap-1.5 text-[12px] leading-4 text-ink-3',
+    dot: 'size-[5px] shrink-0 rounded-pill',
+    current: 'min-w-0 truncate font-medium text-ink',
+    count: 'ml-auto shrink-0 font-mono text-[11px] text-ink-4',
+    track: 'relative h-3',
+    marker: [
+      'absolute top-0.5 h-2 min-w-1.5 cursor-pointer rounded-sm border p-0 outline-none',
+      'border-[color-mix(in_oklab,var(--color-accent)_45%,var(--color-rule))]',
+      'bg-[color-mix(in_oklab,var(--color-accent)_14%,var(--color-surface))]',
+      'transition-colors duration-150',
+      'hovered:border-accent hovered:bg-accent',
+      'data-[current]:border-accent data-[current]:bg-accent',
+      'data-[focus-visible]:shadow-[var(--shadow-focus)]',
+      // The bar is thin; the press target isn't.
+      "after:absolute after:inset-x-0 after:-inset-y-2 after:content-['']",
+    ],
+  },
+})
+
+export type MediaMarkersVariants = VariantProps<typeof mediaMarkersStyles>
+
+export interface MediaMarker {
+  key: string
+  label: string
+  /** Seconds. A moment rather than a span has `end` equal to `start`. */
+  start: number
+  end: number
+}
+
+/** The markers whose span holds `time`. */
+export function currentMediaMarkers(
+  markers: ReadonlyArray<MediaMarker>,
+  time: number,
+): MediaMarker[] {
+  return markers.filter((marker) => time >= marker.start && time < marker.end)
+}
+
+export interface MediaMarkerTrackProps {
+  markers: ReadonlyArray<MediaMarker>
+  /** Heading of the track. */
+  label?: string
+  currentTime: number
+  /** Seconds across the whole track; the bars hide until it is known. */
+  duration: number
+  onSeek: (seconds: number) => void
+  className?: string
+}
+
+export function MediaMarkerTrack({
+  markers,
+  label = 'Markers',
+  currentTime,
+  duration,
+  onSeek,
+  className,
+}: MediaMarkerTrackProps) {
+  const styles = mediaMarkersStyles()
+  const current = currentMediaMarkers(markers, currentTime)
+
+  return (
+    <div className={cn(styles.root(), className)}>
+      <div className={styles.heading()}>
+        <span aria-hidden className={styles.dot()} />
+        <span className="shrink-0">{label}</span>
+        <span className={styles.current()}>
+          {current.map((marker) => marker.label).join(' · ')}
+        </span>
+        <span className={styles.count()}>{markers.length}</span>
+      </div>
+      <div className={styles.track()}>
+        {markers.map((marker) => (
+          <AriaButton
+            key={marker.key}
+            data-media-marker={marker.key}
+            data-current={current.includes(marker) || undefined}
+            aria-label={`${marker.label}, at ${formatMediaTime(marker.start)}`}
+            onPress={() => onSeek(marker.start)}
+            className={styles.marker()}
+            style={
+              duration > 0
+                ? {
+                    left: `${(marker.start / duration) * 100}%`,
+                    width: `${((marker.end - marker.start) / duration) * 100}%`,
+                  }
+                : { display: 'none' }
+            }
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/components/media-player/media-peaks.test.ts

@@ -0,0 +1,68 @@
+import { describe, expect, it } from 'vitest'
+
+import { maskPeaks, peaksFromChannels } from './media-peaks'
+import { formatMediaTime, spokenMediaTime } from './media-time'
+
+describe('peaksFromChannels', () => {
+  it('scales the loudest bucket to 1', () => {
+    const channel = new Float32Array([0.1, 0.1, 0.5, 0.5])
+    const peaks = peaksFromChannels([channel], 2)
+    expect(peaks[1]).toBeCloseTo(1)
+    expect(peaks[0]).toBeCloseTo(0.2)
+  })
+
+  it('hears both channels of a stereo recording', () => {
+    const left = new Float32Array([0.5, 0.5, 0, 0])
+    const right = new Float32Array([0, 0, 0.5, 0.5])
+    const peaks = peaksFromChannels([left, right], 2)
+    expect(peaks[0]).toBeCloseTo(1)
+    expect(peaks[1]).toBeCloseTo(1)
+  })
+
+  it('stays silent for empty or silent audio', () => {
+    expect(Array.from(peaksFromChannels([], 2))).toEqual([0, 0])
+    expect(Array.from(peaksFromChannels([new Float32Array(4)], 2))).toEqual([0, 0])
+  })
+})
+
+describe('maskPeaks', () => {
+  const peaks = new Float32Array([0.5, 0.5, 0.5, 0.5])
+
+  it('keeps only the segments', () => {
+    expect(Array.from(maskPeaks(peaks, 4, [[1, 2]]))).toEqual([0, 0.5, 0, 0])
+  })
+
+  it('combines several segments', () => {
+    expect(
+      Array.from(
+        maskPeaks(peaks, 4, [
+          [0, 1],
+          [3, 4],
+        ]),
+      ),
+    ).toEqual([0.5, 0, 0, 0.5])
+  })
+
+  it('tolerates segments past the recording', () => {
+    expect(Array.from(maskPeaks(peaks, 4, [[3, 99]]))).toEqual([0, 0, 0, 0.5])
+  })
+
+  it('is silent without a duration', () => {
+    expect(Array.from(maskPeaks(peaks, 0, [[0, 1]]))).toEqual([0, 0, 0, 0])
+  })
+})
+
+describe('media time', () => {
+  it('formats minutes and hours', () => {
+    expect(formatMediaTime(156)).toBe('02:36')
+    expect(formatMediaTime(3756)).toBe('1:02:36')
+    expect(formatMediaTime(Number.NaN)).toBe('00:00')
+  })
+
+  it('speaks units', () => {
+    expect(spokenMediaTime(156)).toBe('2 minutes 36 seconds')
+    expect(spokenMediaTime(61)).toBe('1 minute 1 second')
+    expect(spokenMediaTime(0)).toBe('0 seconds')
+    expect(spokenMediaTime(3600)).toBe('1 hour')
+  })
+})

package/src/components/media-player/media-peaks.ts

@@ -0,0 +1,78 @@
+/* =========================================================================
+   Waveform data. Peaks are one loudness curve for the whole recording, 0..1
+   and normalized once, so every lane drawn from them shares one scale.
+   ========================================================================= */
+
+/** Above this the browser would hold too much decoded audio: play without bars. */
+export const MAX_DECODE_BYTES = 50 * 1024 * 1024
+
+/** Enough resolution to draw and far less memory than the source rate. */
+const DECODE_SAMPLE_RATE = 8000
+const PEAK_BUCKETS = 4000
+/** Samples read per bucket: the loudness of a bucket doesn't need all of them. */
+const SAMPLES_PER_BUCKET = 256
+
+export interface DecodedPeaks {
+  peaks: Float32Array
+  duration: number
+}
+
+/** A time range in seconds. */
+export type MediaSegment = readonly [start: number, end: number]
+
+/** RMS per bucket across all channels, scaled so the loudest bucket is 1. */
+export function peaksFromChannels(
+  channels: ReadonlyArray<Float32Array>,
+  buckets: number = PEAK_BUCKETS,
+): Float32Array {
+  const length = channels[0]?.length ?? 0
+  const peaks = new Float32Array(buckets)
+  if (length === 0) return peaks
+
+  const stride = Math.max(1, Math.floor(length / buckets / SAMPLES_PER_BUCKET))
+  let loudest = 0
+  for (let bucket = 0; bucket < buckets; bucket++) {
+    const start = Math.floor((bucket / buckets) * length)
+    const end = Math.floor(((bucket + 1) / buckets) * length)
+    let sum = 0
+    let count = 0
+    for (let index = start; index < end; index += stride) {
+      let sample = 0
+      for (const channel of channels) sample = Math.max(sample, Math.abs(channel[index] ?? 0))
+      sum += sample * sample
+      count++
+    }
+    const level = count > 0 ? Math.sqrt(sum / count) : 0
+    peaks[bucket] = level
+    if (level > loudest) loudest = level
+  }
+  if (loudest > 0)
+    for (let bucket = 0; bucket < buckets; bucket++) peaks[bucket] = (peaks[bucket] ?? 0) / loudest
+  return peaks
+}
+
+/** The curve with everything outside `segments` silenced. */
+export function maskPeaks(
+  peaks: Float32Array,
+  duration: number,
+  segments: ReadonlyArray<MediaSegment>,
+): Float32Array {
+  const masked = new Float32Array(peaks.length)
+  if (duration <= 0) return masked
+  for (const [start, end] of segments) {
+    const from = Math.max(0, Math.floor((start / duration) * peaks.length))
+    const to = Math.min(peaks.length, Math.ceil((end / duration) * peaks.length))
+    for (let bucket = from; bucket < to; bucket++) masked[bucket] = peaks[bucket] ?? 0
+  }
+  return masked
+}
+
+/** Decodes without an output device, so it needs no user gesture. */
+export async function decodePeaks(blob: Blob): Promise<DecodedPeaks> {
+  const context = new OfflineAudioContext(1, 1, DECODE_SAMPLE_RATE)
+  const buffer = await context.decodeAudioData(await blob.arrayBuffer())
+  const channels = Array.from({ length: buffer.numberOfChannels }, (_, index) =>
+    buffer.getChannelData(index),
+  )
+  return { peaks: peaksFromChannels(channels), duration: buffer.duration }
+}

package/src/components/media-player/media-player.stories.tsx

@@ -0,0 +1,243 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useEffect, useMemo, useState } from 'react'
+
+import { FrameStrip } from '../frame-strip/frame-strip'
+import { MediaControls } from './media-controls'
+import type { MediaMarker } from './media-markers'
+import { MediaPlayer, MediaStage, useMediaPlayer } from './media-player'
+import { MediaTimeline } from './media-timeline'
+import { MediaVideoStage } from './media-video-stage'
+import { MediaWaveform } from './media-waveform'
+
+const RATE = 8000
+const SECONDS = 60
+
+/** One mono mix of three alternating tones, as a WAV. */
+function makeRecording(): Blob {
+  const samples = RATE * SECONDS
+  const buffer = new ArrayBuffer(44 + samples * 2)
+  const view = new DataView(buffer)
+  const write = (offset: number, text: string) => {
+    for (const [index, char] of [...text].entries())
+      view.setUint8(offset + index, char.charCodeAt(0))
+  }
+  write(0, 'RIFF')
+  view.setUint32(4, 36 + samples * 2, true)
+  write(8, 'WAVEfmt ')
+  view.setUint32(16, 16, true)
+  view.setUint16(20, 1, true)
+  view.setUint16(22, 1, true)
+  view.setUint32(24, RATE, true)
+  view.setUint32(28, RATE * 2, true)
+  view.setUint16(32, 2, true)
+  view.setUint16(34, 16, true)
+  write(36, 'data')
+  view.setUint32(40, samples * 2, true)
+  for (let index = 0; index < samples; index++) {
+    const time = index / RATE
+    const turn = Math.floor(time / 5) % 3
+    const gate = Math.max(0, Math.sin(time * 7)) * (time % 5 < 4.4 ? 1 : 0)
+    const value = gate * 0.25 * Math.sin(2 * Math.PI * ([122, 196, 158][turn] ?? 122) * time)
+    view.setInt16(44 + index * 2, value * 32767, true)
+  }
+  return new Blob([buffer], { type: 'audio/wav' })
+}
+
+const turnsOf = (speaker: number) =>
+  Array.from({ length: 12 }, (_, index) => [index * 5, index * 5 + 4.4] as const).filter(
+    (_, index) => index % 3 === speaker,
+  )
+
+const TAGS: MediaMarker[] = [
+  { key: 'renewal', label: 'Renewal intent', start: 5, end: 14 },
+  { key: 'pricing', label: 'Pricing objection', start: 30, end: 44 },
+]
+
+function Frame({ lanes, markers }: { lanes?: boolean; markers?: boolean }) {
+  const source = useMemo(() => ({ blob: makeRecording() }), [])
+  return (
+    <div className="flex h-[520px] w-[420px] flex-col border border-rule bg-surface">
+      <MediaPlayer source={source} label="Call recording">
+        <MediaStage>
+          <MediaWaveform
+            {...(lanes
+              ? {
+                  lanes: [
+                    { key: 'you', label: 'You', meta: '00:18', segments: turnsOf(0) },
+                    { key: 'dana', label: 'Dana Whitfield', meta: '00:18', segments: turnsOf(1) },
+                    { key: 'marek', label: 'Marek Novak', meta: '00:18', segments: turnsOf(2) },
+                  ],
+                }
+              : {})}
+            {...(markers ? { markers: TAGS, markersLabel: 'Tags' } : {})}
+          />
+        </MediaStage>
+        <MediaControls />
+      </MediaPlayer>
+    </div>
+  )
+}
+
+/** The same recording on a bare axis: no bars, markers and seeking only. */
+function TimelineFrame() {
+  const source = useMemo(() => ({ blob: makeRecording() }), [])
+  return (
+    <div className="flex w-[420px] flex-col border border-rule bg-surface">
+      <MediaPlayer source={source} label="Call recording">
+        <MediaTimeline markers={TAGS} markersLabel="Tags" />
+        <MediaControls />
+      </MediaPlayer>
+    </div>
+  )
+}
+
+/* ---- Video -------------------------------------------------------------
+   A few seconds of a moving square recorded from a canvas: a real
+   MediaRecorder webm, whose container reports no length — the case the
+   source's `duration` exists for.
+   ----------------------------------------------------------------------- */
+
+const VIDEO_SECONDS = 6
+const VIDEO_WIDTH = 640
+const VIDEO_HEIGHT = 360
+
+function useCanvasRecording(): Blob | null {
+  const [blob, setBlob] = useState<Blob | null>(null)
+  useEffect(() => {
+    if (typeof MediaRecorder === 'undefined') return
+    const canvas = document.createElement('canvas')
+    canvas.width = VIDEO_WIDTH
+    canvas.height = VIDEO_HEIGHT
+    const context = canvas.getContext('2d')
+    if (!context) return
+    const recorder = new MediaRecorder(canvas.captureStream(30))
+    const chunks: Blob[] = []
+    recorder.ondataavailable = (event) => chunks.push(event.data)
+    recorder.onstop = () => setBlob(new Blob(chunks, { type: recorder.mimeType }))
+    const started = performance.now()
+    let frame = 0
+    const draw = () => {
+      const time = (performance.now() - started) / 1000
+      context.fillStyle = '#f4f4f6'
+      context.fillRect(0, 0, VIDEO_WIDTH, VIDEO_HEIGHT)
+      context.fillStyle = '#5b5bd6'
+      context.fillRect(40 + ((time * 90) % 520), 140, 80, 80)
+      context.fillStyle = '#17171c'
+      context.font = '28px monospace'
+      context.fillText(`${time.toFixed(1)}s`, 24, 44)
+      if (time < VIDEO_SECONDS) frame = requestAnimationFrame(draw)
+      else recorder.stop()
+    }
+    recorder.start()
+    frame = requestAnimationFrame(draw)
+    return () => {
+      cancelAnimationFrame(frame)
+      if (recorder.state !== 'inactive') recorder.stop()
+    }
+  }, [])
+  return blob
+}
+
+/** Frames: a moment each, with a normalized box the overlay draws while it is current. */
+const FRAMES = [
+  { key: 'f1', label: 'Frame 1', at: 1.4, box: [0.1, 0.35, 0.22, 0.3] },
+  { key: 'f2', label: 'Frame 2', at: 3.1, box: [0.4, 0.35, 0.22, 0.3] },
+  { key: 'f3', label: 'Frame 3', at: 4.8, box: [0.68, 0.35, 0.22, 0.3] },
+] as const
+
+const FRAME_MARKERS: MediaMarker[] = FRAMES.map((frame) => ({
+  key: frame.key,
+  label: frame.label,
+  start: frame.at,
+  end: frame.at + 1,
+}))
+
+/** Drawn over the picture in 0..1 coordinates, so it follows the box's fit. */
+function InkOverlay() {
+  const { currentTime } = useMediaPlayer()
+  const current = FRAMES.find((frame) => currentTime >= frame.at && currentTime < frame.at + 1)
+  if (!current) return null
+  const [x, y, width, height] = current.box
+  return (
+    <svg viewBox="0 0 1 1" preserveAspectRatio="none" className="size-full" aria-hidden>
+      <rect
+        x={x}
+        y={y}
+        width={width}
+        height={height}
+        rx={0.01}
+        fill="none"
+        stroke="var(--color-accent)"
+        strokeWidth={3}
+        vectorEffect="non-scaling-stroke"
+      />
+    </svg>
+  )
+}
+
+function FrameStripSeeking() {
+  const { currentTime, seek } = useMediaPlayer()
+  const [selectedKey, setSelectedKey] = useState<string>(FRAMES[0].key)
+  // Playback reaching a frame selects it; picking a frame seeks to it.
+  useEffect(() => {
+    const reached = [...FRAMES].reverse().find((frame) => currentTime >= frame.at)
+    if (reached) setSelectedKey(reached.key)
+  }, [currentTime])
+  return (
+    <FrameStrip
+      aria-label="Frames"
+      items={FRAMES.map((frame) => ({
+        key: frame.key,
+        label: frame.label,
+        at: frame.at,
+        thumbnail: (
+          <svg viewBox="0 0 16 9" aria-hidden>
+            <rect width="16" height="9" fill="#f4f4f6" />
+            <rect x={1 + frame.box[0] * 14} y="3.5" width="2" height="2" fill="#5b5bd6" />
+          </svg>
+        ),
+      }))}
+      selectedKey={selectedKey}
+      onSelect={(key) => {
+        setSelectedKey(key)
+        const frame = FRAMES.find((entry) => entry.key === key)
+        if (frame) seek(frame.at)
+      }}
+    />
+  )
+}
+
+function VideoFrame() {
+  const blob = useCanvasRecording()
+  const source = useMemo(() => (blob ? { blob, duration: VIDEO_SECONDS } : null), [blob])
+  if (!source) {
+    return <p className="text-[13px] text-ink-3">Recording {VIDEO_SECONDS} seconds of canvas…</p>
+  }
+  return (
+    <div className="flex h-[560px] w-[520px] flex-col border border-rule bg-surface">
+      <MediaPlayer source={source} label="Screen recording" kind="video">
+        <MediaVideoStage className="p-[18px]">
+          <InkOverlay />
+        </MediaVideoStage>
+        <MediaTimeline markers={FRAME_MARKERS} markersLabel="Frames" />
+        <FrameStripSeeking />
+        <MediaControls />
+      </MediaPlayer>
+    </div>
+  )
+}
+
+const meta: Meta<typeof MediaPlayer> = {
+  title: 'Components/MediaPlayer',
+  component: MediaPlayer,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof MediaPlayer>
+
+export const SingleLane: Story = { render: () => <Frame /> }
+export const SpeakerLanes: Story = { render: () => <Frame lanes /> }
+export const LanesWithMarkers: Story = { render: () => <Frame lanes markers /> }
+export const Timeline: Story = { render: () => <TimelineFrame /> }
+export const Video: Story = { render: () => <VideoFrame /> }