Media control card
The media control card shows what a media player is playing, with the artwork, the controls, and the progress.
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.
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 with the playback or the volume feature is smaller.
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.
- 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.
entity(string, required): the media player to show. Only entities of themedia_playerdomain work.name(string): the name to show. Defaults to the name of the entity.theme(string): a theme to apply to this card only.
type: media-control
entity: media_player.living_room_speakerThe card lives in 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, 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, 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>, kept up to date while the media plays.