# FloatingMediaWrapper

A higher-level wrapper for media players (audio/video) that manages floating state, positioning, and transitions.

---

## Overview

The `FloatingMediaWrapper` is the engine behind the "auto-float" behavior of Xertica UI media components. It provides a draggable, resizable container that can follow the user across the application via portals, ensuring uninterrupted media consumption.

---

## Features

- **Draggable & Resizable**: Users can move and scale the media window as needed.
- **Persistent State**: Remembers the last position and size in `localStorage` per `playerId`.
- **Portal Rendering**: Mounts to `document.body` when floating to avoid CSS clipping and parent constraints.
- **Responsive Placeholder**: Leaves a placeholder in the original document position when floating.

---

## Props

| Prop            | Type                     | Default     | Description                            |
| --------------- | ------------------------ | ----------- | -------------------------------------- |
| `isFloating`    | `boolean`                | —           | Controls the floating state.           |
| `setIsFloating` | `(v: boolean) => void`   | —           | State setter for floating state.       |
| `title`         | `string`                 | —           | Title shown in the floating header.    |
| `aspectRatio`   | `number`                 | `16 / 9`    | Mantains the ratio during resize.      |
| `minWidth`      | `number`                 | `320`       | Minimum width allowed.                 |
| `colorVariant`  | `'default' \| 'primary'` | `'default'` | Visual style of the header.            |
| `playerId`      | `string`                 | `'default'` | Unique key for storing position state. |

---

## Examples

### Basic Usage

```tsx
import { FloatingMediaWrapper } from 'xertica-ui/media';

function MyPlayer() {
  const [isFloating, setIsFloating] = useState(false);

  return (
    <FloatingMediaWrapper
      isFloating={isFloating}
      setIsFloating={setIsFloating}
      title="Sample Media"
    >
      <video src="..." />
    </FloatingMediaWrapper>
  );
}
```

---

## Related Components

- [`VideoPlayer`](./video-player.md) — Uses this wrapper for its floating mode.
- [`AudioPlayer`](./audio-player.md) — For system-level audio playback.