<!-- source-hash: c12f9380c042cace30222c9c17600a89 -->
Manages upload, preview, reordering, and metadata editing of media items (images and videos) associated with a software release.

## Key Components

### `ReleaseMediaItem` (interface)
Describes a single media entry with the following fields:

| Field | Type | Description |
|---|---|---|
| `media_type` | `'image' \| 'video' \| 'screenshot' \| 'demo'` | Category of the media |
| `media_url` | `string` | Resolved URL after upload |
| `title` | `string?` | Optional display title |
| `description` | `string?` | Optional description |
| `display_order` | `number?` | Sort position in the gallery |
| `_file` | `File?` | Temporary local file before upload |
| `_uploading` | `boolean?` | Upload in-progress flag |

### `ReleaseMediaManager` (component)
The primary exported component. Renders:
- **Upload zone** — dashed drop area with a file picker (images and videos, max 50 MB)
- **Media grid** — 2-column responsive gallery with drag-and-drop reordering
- **Per-item controls** — inline type selector (`Select`), title input, delete button, and media preview via `Image` (photos) or `Video` (MuxPlayer/HLS)

### `ReleaseMediaManagerProps`

| Prop | Type | Description |
|---|---|---|
| `media` | `ReleaseMediaItem[]` | Controlled list of media items |
| `onChange` | `(media: ReleaseMediaItem[]) => void` | Called on any mutation |
| `onUpload` | `(file, mediaType) => Promise<string>` | Async upload handler; returns the hosted URL |
| `className` | `string?` | Additional wrapper class |

## Usage Example

```typescript
import { ReleaseMediaManager, ReleaseMediaItem } from './release-media-manager';
import { useState } from 'react';

export function ReleaseForm() {
  const [media, setMedia] = useState<ReleaseMediaItem[]>([]);

  const handleUpload = async (
    file: File,
    mediaType: 'image' | 'video' | 'screenshot' | 'demo'
  ): Promise<string> => {
    const formData = new FormData();
    formData.append('file', file);
    formData.append('type', mediaType);
    const res = await fetch('/api/upload', { method: 'POST', body: formData });
    const { url } = await res.json();
    return url;
  };

  return (
    <ReleaseMediaManager
      media={media}
      onChange={setMedia}
      onUpload={handleUpload}
    />
  );
}
```

> **Source:** [`release-media-manager.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/release-media-manager.tsx)