# @hiyve/rn-capture

React Native components for recording, live streaming, and transcription display in Hiyve video conferencing.

Provides `RecordingControls`, `StreamingControls`, and `TranscriptionView` -- presentation-only components that pair with hooks from `@hiyve/rn-react` to manage capture state.

## Installation

```bash
npm install @hiyve/rn-capture @hiyve/rn-react @hiyve/rn-core react-native-webrtc
```

## Quick Start

### Recording

```tsx
import { RecordingControls } from '@hiyve/rn-capture';
import { useRecording } from '@hiyve/rn-react';

function RecordingPanel() {
  const {
    isRecording,
    isRecordingStarting,
    recordingDuration,
    error,
    startRecording,
    stopRecording,
    clearRecordingError,
  } = useRecording();

  return (
    <RecordingControls
      isRecording={isRecording}
      isRecordingStarting={isRecordingStarting}
      recordingDuration={recordingDuration}
      error={error}
      onStartRecording={startRecording}
      onStopRecording={stopRecording}
      onClearError={clearRecordingError}
      showOptions
    />
  );
}
```

### Live Streaming

```tsx
import { StreamingControls } from '@hiyve/rn-capture';
import { useStreaming } from '@hiyve/rn-react';

function StreamingPanel() {
  const { isStreaming, streamingDuration, startStreaming, stopStreaming } = useStreaming();

  return (
    <StreamingControls
      isStreaming={isStreaming}
      streamingDuration={streamingDuration}
      onStartStreaming={startStreaming}
      onStopStreaming={stopStreaming}
      showRtmpInput
    />
  );
}
```

### Transcription

```tsx
import { TranscriptionView } from '@hiyve/rn-capture';
import { useTranscription, useParticipants } from '@hiyve/rn-react';

function TranscriptionPanel() {
  const { transcriptions, isTranscribing } = useTranscription();
  const { localUserId } = useParticipants();

  return (
    <TranscriptionView
      transcriptions={transcriptions}
      localUserId={localUserId}
      isTranscribing={isTranscribing}
    />
  );
}
```

## Components

### RecordingControls

Record/stop button with pulsing recording indicator, elapsed time, and optional transcribe/auto-compose toggles.

```tsx
<RecordingControls
  isRecording={isRecording}
  isRecordingStarting={isRecordingStarting}
  recordingDuration={recordingDuration}
  onStartRecording={(opts) => startRecording(opts)}
  onStopRecording={stopRecording}
  showOptions
/>
```

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `isRecording` | `boolean` | -- | Whether a recording is in progress |
| `isRecordingStarting` | `boolean` | -- | Whether recording is starting up |
| `recordingDuration` | `number` | -- | Elapsed time in seconds |
| `error` | `string \| null` | -- | Error message to display |
| `onStartRecording` | `(options?) => void` | -- | Start handler. Options: `{ autoCompose?, transcribe? }` |
| `onStopRecording` | `() => void` | -- | Stop handler |
| `onClearError` | `() => void` | -- | Dismiss error handler |
| `showOptions` | `boolean` | `false` | Show transcribe/auto-compose switches |
| `colors` | `Partial<RecordingControlsColors>` | -- | Color overrides |
| `labels` | `Partial<RecordingControlsLabels>` | -- | Label overrides |

### StreamingControls

Go Live/Stop button with pulsing LIVE indicator, elapsed time, and optional RTMP URL input.

```tsx
<StreamingControls
  isStreaming={isStreaming}
  streamingDuration={streamingDuration}
  onStartStreaming={(opts) => startStreaming(opts)}
  onStopStreaming={stopStreaming}
  showRtmpInput
/>
```

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `isStreaming` | `boolean` | -- | Whether a live stream is active |
| `isStreamingStarting` | `boolean` | -- | Whether stream is starting up |
| `streamingDuration` | `number` | -- | Elapsed time in seconds |
| `error` | `string \| null` | -- | Error message to display |
| `onStartStreaming` | `(options?) => void` | -- | Start handler. Options: `{ rtmpUrl? }` |
| `onStopStreaming` | `() => void` | -- | Stop handler |
| `onClearError` | `() => void` | -- | Dismiss error handler |
| `showRtmpInput` | `boolean` | `false` | Show RTMP URL input field |
| `colors` | `Partial<StreamingControlsColors>` | -- | Color overrides |
| `labels` | `Partial<StreamingControlsLabels>` | -- | Label overrides |

### TranscriptionView

Scrollable live transcription display. Groups consecutive entries from the same speaker, highlights local user, and auto-scrolls to latest.

```tsx
<TranscriptionView
  transcriptions={transcriptions}
  localUserId={localUserId}
  isTranscribing={isTranscribing}
  showTimestamps
/>
```

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `transcriptions` | `TranscriptionEntry[]` | -- | Transcription entries (chronological) |
| `localUserId` | `string` | -- | Local user ID (highlighted differently) |
| `isTranscribing` | `boolean` | -- | Show active transcribing indicator |
| `showTimestamps` | `boolean` | `true` | Show timestamps for each entry |
| `autoScroll` | `boolean` | `true` | Auto-scroll to latest entry |
| `colors` | `Partial<TranscriptionViewColors>` | -- | Color overrides |
| `labels` | `Partial<TranscriptionViewLabels>` | -- | Label overrides |

## Customization

All components accept `colors` and `labels` props. Pass partial objects to override only what you need:

```tsx
<RecordingControls
  colors={{
    recordButton: '#E53935',
    recordingIndicator: '#E53935',
    background: '#1e1e3f',
  }}
  labels={{
    record: 'Aufnahme',
    stop: 'Stopp',
    recording: 'Aufnahme l\u00e4uft',
  }}
  // ... other props
/>
```

## Requirements

- React 18+
- React Native 0.70+
- `@hiyve/rn-core`
- `@hiyve/rn-react`

## Related Packages

- [`@hiyve/rn-react`](../rn-react) -- Provider, hooks, and core UI components
- [`@hiyve/rn-collaboration`](../rn-collaboration) -- Chat, Polls, and Q&A
- [`@hiyve/rn-meeting`](../rn-meeting) -- Alerts, Meeting Summary, and Join Token