Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add option to display an artwork in the background of the media playe… #1010

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions .hass_dev/views/media-player-view.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ cards:
- type: custom:mushroom-media-player-card
entity: media_player.living_room
icon_type: entity-picture
artwork: cover
columns: 2
square: false
- type: grid
Expand Down Expand Up @@ -91,6 +92,7 @@ cards:
- volume_mute
- volume_set
- volume_buttons
artwork: cover
- type: custom:mushroom-media-player-card
entity: media_player.kitchen
name: Collapsible controls
Expand All @@ -102,6 +104,18 @@ cards:
- repeat
- on_off
collapsible_controls: true
artwork: cover
- type: custom:mushroom-media-player-card
entity: media_player.living_room
media_controls:
- shuffle
- previous
- play_pause_stop
- next
- repeat
- on_off
collapsible_controls: true
artwork: full_cover
- type: vertical-stack
title: Layout
cards:
Expand Down
37 changes: 19 additions & 18 deletions docs/cards/media-player.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,22 @@ A media player card allows you to control a media player entity.

All the options are available in the lovelace editor but you can use `yaml` if you want.

| Name | Type | Default | Description |
| :--------------------- | :-------------------------------------------------- | :---------- | :------------------------------------------------------------------------------------- |
| `entity` | string | Required | Media Player entity |
| `icon` | string | Optional | Custom icon |
| `name` | string | Optional | Custom name |
| `layout` | string | Optional | Layout of the card. Vertical, horizontal and default layout are supported |
| `fill_container` | boolean | `false` | Fill container or not. Useful when card is in a grid, vertical or horizontal layout |
| `primary_info` | `name` `state` `last-changed` `last-updated` `none` | `name` | Info to show as primary info |
| `secondary_info` | `name` `state` `last-changed` `last-updated` `none` | `state` | Info to show as secondary info |
| `icon_type` | `icon` `entity-picture` `none` | `icon` | Type of icon to display |
| `use_media_info` | boolean | `false` | Use media info instead of name, state and icon when a media is playing |
| `show_volume_level` | boolean | `false` | Show volume level next to media state when media is playing |
| `media_controls` | list | `[]` | List of controls to display (on_off, shuffle, previous, play_pause_stop, next, repeat) |
| `volume_controls` | list | `[]` | List of controls to display (volume_mute, volume_set, volume_buttons) |
| `collapsible_controls` | boolean | `false` | Collapse controls when off |
| `tap_action` | action | `more-info` | Home assistant action to perform on tap |
| `hold_action` | action | `more-info` | Home assistant action to perform on hold |
| `double_tap_action` | action | `more-info` | Home assistant action to perform on double_tap |
| Name | Type | Default | Description |
|:-----------------------|:----------------------------------------------------|:-------------|:---------------------------------------------------------------------------------------|
| `entity` | string | Required | Media Player entity |
| `icon` | string | Optional | Custom icon |
| `name` | string | Optional | Custom name |
| `layout` | string | Optional | Layout of the card. Vertical, horizontal and default layout are supported |
| `fill_container` | boolean | `false` | Fill container or not. Useful when card is in a grid, vertical or horizontal layout |
| `primary_info` | `name` `state` `last-changed` `last-updated` `none` | `name` | Info to show as primary info |
| `secondary_info` | `name` `state` `last-changed` `last-updated` `none` | `state` | Info to show as secondary info |
| `icon_type` | `icon` `entity-picture` `none` | `icon` | Type of icon to display |
| `use_media_info` | boolean | `false` | Use media info instead of name, state and icon when a media is playing |
| `show_volume_level` | boolean | `false` | Show volume level next to media state when media is playing |
| `media_controls` | list | `[]` | List of controls to display (on_off, shuffle, previous, play_pause_stop, next, repeat) |
| `volume_controls` | list | `[]` | List of controls to display (volume_mute, volume_set, volume_buttons) |
| `collapsible_controls` | boolean | `false` | Collapse controls when off |
| `tap_action` | action | `more-info` | Home assistant action to perform on tap |
| `hold_action` | action | `more-info` | Home assistant action to perform on hold |
| `double_tap_action` | action | `more-info` | Home assistant action to perform on double_tap |
| `artwork` | `none` `cover` `full_cover` | `more-info` | Background artwork |
70 changes: 40 additions & 30 deletions src/cards/media-player-card/media-player-card-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,50 +2,60 @@ import { array, assign, boolean, enums, object, optional } from "superstruct";
import { LovelaceCardConfig } from "../../ha";
import { ActionsSharedConfig, actionsSharedConfigStruct } from "../../shared/config/actions-config";
import {
AppearanceSharedConfig,
appearanceSharedConfigStruct,
AppearanceSharedConfig,
appearanceSharedConfigStruct,
} from "../../shared/config/appearance-config";
import { EntitySharedConfig, entitySharedConfigStruct } from "../../shared/config/entity-config";
import { lovelaceCardConfigStruct } from "../../shared/config/lovelace-card-config";

export const MEDIA_LAYER_MEDIA_CONTROLS = [
"on_off",
"shuffle",
"previous",
"play_pause_stop",
"next",
"repeat",
"on_off",
"shuffle",
"previous",
"play_pause_stop",
"next",
"repeat",
] as const;

export type MediaPlayerMediaControl = (typeof MEDIA_LAYER_MEDIA_CONTROLS)[number];

export const MEDIA_PLAYER_VOLUME_CONTROLS = [
"volume_mute",
"volume_set",
"volume_buttons",
"volume_mute",
"volume_set",
"volume_buttons",
] as const;

export type MediaPlayerVolumeControl = (typeof MEDIA_PLAYER_VOLUME_CONTROLS)[number];

export type MediaPlayerCardConfig = LovelaceCardConfig &
EntitySharedConfig &
AppearanceSharedConfig &
ActionsSharedConfig & {
use_media_info?: boolean;
show_volume_level?: boolean;
volume_controls?: MediaPlayerVolumeControl[];
media_controls?: MediaPlayerMediaControl[];
collapsible_controls?: boolean;
};
EntitySharedConfig &
AppearanceSharedConfig &
ActionsSharedConfig & {
use_media_info?: boolean;
show_volume_level?: boolean;
volume_controls?: MediaPlayerVolumeControl[];
media_controls?: MediaPlayerMediaControl[];
collapsible_controls?: boolean;
artwork?: MediaPlayerArtworkMode;
};

export const MEDIA_PLAYER_ARTWORK_MODES = [
"none",
"cover",
"full_cover",
] as const;

export type MediaPlayerArtworkMode = (typeof MEDIA_PLAYER_ARTWORK_MODES)[number];

export const mediaPlayerCardConfigStruct = assign(
lovelaceCardConfigStruct,
assign(entitySharedConfigStruct, appearanceSharedConfigStruct, actionsSharedConfigStruct),
object({
use_media_info: optional(boolean()),
show_volume_level: optional(boolean()),
volume_controls: optional(array(enums(MEDIA_PLAYER_VOLUME_CONTROLS))),
media_controls: optional(array(enums(MEDIA_LAYER_MEDIA_CONTROLS))),
collapsible_controls: optional(boolean()),
})
);
lovelaceCardConfigStruct,
assign(entitySharedConfigStruct, appearanceSharedConfigStruct, actionsSharedConfigStruct),
object({
use_media_info: optional(boolean()),
show_volume_level: optional(boolean()),
volume_controls: optional(array(enums(MEDIA_PLAYER_VOLUME_CONTROLS))),
media_controls: optional(array(enums(MEDIA_LAYER_MEDIA_CONTROLS))),
collapsible_controls: optional(boolean()),
artwork: optional(enums(MEDIA_PLAYER_ARTWORK_MODES)),
})
);
Loading