# Media control card

> The media control card shows what a media player is playing, with the artwork, the controls, and the progress.

Source: https://contributors.home-assistant.io/design/dashboards/media-control-card/

Live demo of `hui-card`, connected to a demo Home Assistant.

```html
<hui-card style="width: 400px" data-props='{"config": {"type": "media-control", "entity": "media_player.living_room_speaker"}}'></hui-card>
```

## Usage

The media control card shows one media player. At the top are the icon and the name of the player, then the title and the artist of what is playing, then the controls, like play, pause, and next track. When the player knows the length and the position, a progress bar runs along the bottom. The buttons that show depend on what the player supports, like the buttons to browse media or to turn the player off.

The card takes its colors from the artwork. The image sits on the right, and the background picks up the main color of the image, with the text in a color that stays readable on it. Without artwork, the card uses the primary color. When the player is off, the card is gray, and only the power button stays.

Live demo of `hui-card`, connected to a demo Home Assistant.

```html
<hui-card style="width: 400px" data-props='{"config": {"type": "media-control", "entity": "media_player.living_room_tv"}}'></hui-card>
```

Use the media control card when what is playing is worth the room, like for the speaker in the living room. For a player that people mostly turn on and off, or only change the volume of, a [tile card](https://contributors.home-assistant.io/design/dashboards/tile-card/) with the playback or the volume feature is smaller.

Live demo of `hui-card`, connected to a demo Home Assistant.

```html
<hui-card style="width: 340px" data-props='{"config": {"type": "tile", "entity": "media_player.living_room_speaker", "features": [{"type": "media-player-playback"}]}}'></hui-card>
```

### Narrow cards

The card measures its own width, and drops what does not fit. Below 350 pixels, the progress bar goes. Below 300 pixels, the controls go too, while something is playing. Keep this in mind when you put the card in a narrow column or in a grid.

Live demo of `hui-card`, connected to a demo Home Assistant.

```html
<hui-card style="width: 320px" data-props='{"config": {"type": "media-control", "entity": "media_player.living_room_speaker"}}'></hui-card>
<hui-card style="width: 280px" data-props='{"config": {"type": "media-control", "entity": "media_player.living_room_speaker"}}'></hui-card>
```

### Content

- The title and the artist come from the player. A title that does not fit scrolls when you hover over it.
- Keep the name of the player short. It shares the top row with the menu button.

## Configuration

- `entity` (string, required): the media player to show. Only entities of the `media_player` domain work.
- `name` (string): the name to show. Defaults to the name of the entity.
- `theme` (string): a theme to apply to this card only.

```yaml
type: media-control
entity: media_player.living_room_speaker
```

## In code

The card lives in [`src/panels/lovelace/cards/hui-media-control-card.ts`](https://github.com/home-assistant/frontend/blob/dev/src/panels/lovelace/cards/hui-media-control-card.ts), and the element is `<hui-media-control-card>`. The controls come from `computeMediaControls` in [`src/data/media-player.ts`](https://github.com/home-assistant/frontend/blob/dev/src/data/media-player.ts), which the more-info dialog uses too, so the card and the dialog offer the same buttons. The colors come from `extractColors` in [`src/common/image/extract_color.ts`](https://github.com/home-assistant/frontend/blob/dev/src/common/image/extract_color.ts), which picks them from the artwork.

The card watches its own size with a `ResizeObserver`, and sets the narrow and very narrow layouts from it. The progress bar is an [`<ha-slider>`](https://contributors.home-assistant.io/design/components/slider/), kept up to date while the media plays.

[Source](https://github.com/home-assistant/frontend/blob/dev/src/panels/lovelace/cards/hui-media-control-card.ts)