# Media Tile

Video and photo thumbnail with duration, continue-watching progress, Live and New badges, and a selection check. Pairs with a zoom transition to grow straight into the player.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/media-tile
```

## Import

```tsx
import { formatMediaDuration, MediaTile } from "@/components/ui/media-tile/media-tile";
```

## Variants

- `continue-watching` — Continue watching: `npx @lumioui/cli add pro/media-tile-continue-watching`
- `live` — Live and uploads: `npx @lumioui/cli add pro/media-tile-live`
- `photo-grid` — Photo grid: `npx @lumioui/cli add pro/media-tile-photo-grid`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `source` | `ImageSourcePropType` | Thumbnail image. |
| `aspect?` | `MediaTileAspect` | Frame shape: `video` 16:9 (default), `poster` 2:3, `portrait` 4:5, `square`, or a width/height number. |
| `rounded?` | `"none" | "md" | "lg" | "xl"` | Corner radius. Default `lg` (16pt, the media-tile radius). Use `none` for edge-to-edge photo grids. |
| `title?` | `string` | Caption title under the frame. |
| `subtitle?` | `string` | Caption second line (channel, episode, date). |
| `duration?` | `number` | Video length in seconds — renders the bottom-right duration chip. |
| `progress?` | `number` | Watched fraction 0–1 — renders the continue-watching bar along the bottom edge. |
| `live?` | `boolean` | Live stream — red Live chip top-left, replaces the duration chip. |
| `viewers?` | `string | number` | Live viewer count shown beside the Live chip, e.g. "12.4K" or 830. |
| `badge?` | `string` | Short top-left badge such as "New" or "4K". Uses the accent fill. |
| `showPlay?` | `boolean` | Centered play glyph. Default: shown when `duration` is set and the tile is not selectable. |
| `selectable?` | `boolean` | Photo-library selection mode — shows a check ring top-right; tapping toggles. |
| `selected?` | `boolean` | Controlled selection state (with `selectable`). |
| `onSelectedChange?` | `(selected: boolean) => void` | Fires with the next selection state when a selectable tile is tapped. |
| `onPress?` | `(e: GestureResponderEvent) => void` | Tap handler. In selection mode the tap toggles selection instead (both fire). |
| `leading?` | `React.ReactNode` | Slot left of the caption — e.g. a channel avatar. |
| `overlay?` | `React.ReactNode` | Slot rendered top-right over the frame (e.g. a bookmark or more button). Hidden in selection mode. |
| `className?` | `string` | Extra classes for the root. |
| `frameClassName?` | `string` | Extra classes for the image frame. |
| `disabled?` | `boolean` | — |
| `accessibilityLabel?` | `string` | — |
| `switchOnDelay?` | `number` | Mount dim and switch on after this many ms (rails pass `rowDelay(i)`);  the resume bar then fills to `progress`. Omit to render at rest. |

Source: https://lumioui.com/components/media-tile