diff --git a/src/cards/media-player-card/media-player-card-config.ts b/src/cards/media-player-card/media-player-card-config.ts index 42c8f57d6..19876fafa 100644 --- a/src/cards/media-player-card/media-player-card-config.ts +++ b/src/cards/media-player-card/media-player-card-config.ts @@ -1,5 +1,5 @@ import { ActionConfig, LovelaceCardConfig } from "custom-card-helpers"; -import { array, assign, enums, object, optional, string } from "superstruct"; +import { array, assign, boolean, enums, object, optional, string } from "superstruct"; import { actionConfigStruct } from "../../utils/action-struct"; import { baseLovelaceCardConfig } from "../../utils/editor-styles"; import { Layout, layoutStruct } from "../../utils/layout"; @@ -27,6 +27,8 @@ export interface MediaPlayerCardConfig extends LovelaceCardConfig { entity?: string; name?: string; icon?: string; + show_media_info?: boolean; + use_media_artwork?: boolean; volume_controls?: MediaPlayerVolumeControl[]; media_controls?: MediaPlayerMediaControl[]; layout?: Layout; @@ -41,6 +43,8 @@ export const mediaPlayerCardConfigStruct = assign( entity: optional(string()), icon: optional(string()), name: optional(string()), + show_media_info: optional(boolean()), + use_media_artwork: optional(boolean()), volume_controls: optional(array(enums(MEDIA_PLAYER_VOLUME_CONTROLS))), media_controls: optional(array(enums(MEDIA_LAYER_MEDIA_CONTROLS))), layout: optional(layoutStruct), diff --git a/src/cards/media-player-card/media-player-card-editor.ts b/src/cards/media-player-card/media-player-card-editor.ts index 41343aea8..1e78cfd3c 100644 --- a/src/cards/media-player-card/media-player-card-editor.ts +++ b/src/cards/media-player-card/media-player-card-editor.ts @@ -17,7 +17,12 @@ import { MEDIA_PLAYER_VOLUME_CONTROLS, } from "./media-player-card-config"; -export const MEDIA_FIELDS = ["media_controls", "volume_controls"]; +export const MEDIA_FIELDS = [ + "show_media_info", + "use_media_artwork", + "media_controls", + "volume_controls", +]; const computeSchema = memoizeOne((localize: LocalizeFunc, icon?: string): HaFormSchema[] => [ { name: "entity", selector: { entity: { domain: MEDIA_PLAYER_ENTITY_DOMAINS } } }, @@ -32,6 +37,14 @@ const computeSchema = memoizeOne((localize: LocalizeFunc, icon?: string): HaForm name: "", schema: [{ name: "layout", selector: { "mush-layout": {} } }], }, + { + type: "grid", + name: "", + schema: [ + { name: "show_media_info", selector: { boolean: {} } }, + { name: "use_media_artwork", selector: { boolean: {} } }, + ], + }, { type: "grid", name: "", diff --git a/src/cards/media-player-card/media-player-card.ts b/src/cards/media-player-card/media-player-card.ts index 45e334126..2b640d9a4 100644 --- a/src/cards/media-player-card/media-player-card.ts +++ b/src/cards/media-player-card/media-player-card.ts @@ -26,7 +26,11 @@ import { isMediaControlVisible } from "./controls/media-player-media-control"; import "./controls/media-player-volume-control"; import { isVolumeControlVisible } from "./controls/media-player-volume-control"; import { MediaPlayerCardConfig } from "./media-player-card-config"; -import { computeIcon, getCardName, getStateDisplay } from "./utils"; +import { computeMediaIcon, computeMediaNameDisplay, computeMediaStateDisplay } from "./utils"; +import "../../shared/badge-icon"; +import "../../shared/card"; +import "../../shared/shape-avatar"; +import "../../shared/shape-icon"; type MediaPlayerCardControl = "media_control" | "volume_control"; @@ -135,17 +139,18 @@ export class MediaPlayerCard extends LitElement implements LovelaceCard { const entity_id = this._config.entity; const entity = this.hass.states[entity_id] as MediaPlayerEntity; - const icon = computeIcon(this._config, entity); + const icon = computeMediaIcon(this._config, entity); const layout = getLayoutFromConfig(this._config); - const active = isActive(entity); - let iconStyle = {}; - - let nameDisplay = getCardName(this._config, entity); - let stateDisplay = getStateDisplay(entity, this.hass); + let nameDisplay = computeMediaNameDisplay(this._config, entity); + let stateDisplay = computeMediaStateDisplay(this._config, entity, this.hass); const rtl = computeRTL(this.hass); + const artwork = this._config.use_media_artwork + ? entity.attributes.entity_picture + : undefined; + return html` - + ${artwork + ? html` + + ` + : html` + + `} ${entity.state === "unavailable" ? html`