Skip to content

Commit

Permalink
Add option to display an artwork in the background of the media playe…
Browse files Browse the repository at this point in the history 
…r card
  • Loading branch information
@pag-tractive
pag-tractive committed Feb 5, 2023
1 parent 81c096d commit 25897d7
Show file tree
Hide file tree
Showing 6 changed files with 594 additions and 514 deletions.
14 changes: 14 additions & 0 deletions .hass_dev/views/media-player-view.yaml
View file
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
View file
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
View file
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

0 comments on commit 25897d7

Please sign in to comment.