From d33e035db784853f3bd0d305532e500089c8ec0d Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Tue, 11 Feb 2020 13:11:25 -0500 Subject: [PATCH 01/11] Update Media Card to check for supported features --- src/data/media-player.ts | 9 ++ .../lovelace/cards/hui-media-control-card.ts | 84 +++++++++++++------ 2 files changed, 66 insertions(+), 27 deletions(-) diff --git a/src/data/media-player.ts b/src/data/media-player.ts index 3aaf16e093..cfb17c91c5 100644 --- a/src/data/media-player.ts +++ b/src/data/media-player.ts @@ -3,8 +3,17 @@ import { HomeAssistant } from "../types"; import { timeCachePromiseFunc } from "../common/util/time-cache-function-promise"; export const SUPPORT_PAUSE = 1; +export const SUPPORT_VOLUME_SET = 4; +export const SUPPORT_VOLUME_MUTE = 8; +export const SUPPORT_PREVIOUS_TRACK = 16; export const SUPPORT_NEXT_TRACK = 32; +export const SUPPORT_TURN_ON = 128; +export const SUPPORT_TURN_OFF = 256; +export const SUPPORT_PLAY_MEDIA = 512; +export const SUPPORT_VOLUME_BUTTONS = 1024; +export const SUPPORT_SELECT_SOURCE = 2048; export const SUPPORTS_PLAY = 16384; +export const SUPPORT_SELECT_SOUND_MODE = 65536; export const OFF_STATES = ["off", "idle"]; export interface MediaPlayerThumbnail { diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts index c5035a9c58..159efa1c54 100644 --- a/src/panels/lovelace/cards/hui-media-control-card.ts +++ b/src/panels/lovelace/cards/hui-media-control-card.ts @@ -16,7 +16,15 @@ import "../../../components/ha-card"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; import { computeStateName } from "../../../common/entity/compute_state_name"; import { supportsFeature } from "../../../common/entity/supports-feature"; -import { OFF_STATES, SUPPORT_PAUSE } from "../../../data/media-player"; +import { + OFF_STATES, + SUPPORT_PAUSE, + SUPPORT_TURN_ON, + SUPPORT_TURN_OFF, + SUPPORT_PREVIOUS_TRACK, + SUPPORT_NEXT_TRACK, + SUPPORTS_PLAY, +} from "../../../data/media-player"; import { hasConfigOrEntityChanged } from "../common/has-changed"; import { HomeAssistant, MediaEntity } from "../../../types"; import { LovelaceCard, LovelaceCardEditor } from "../types"; @@ -89,7 +97,9 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { - ${OFF_STATES.includes(stateObj.state) + ${OFF_STATES.includes(stateObj.state) || + !stateObj.attributes.media_duration || + !stateObj.attributes.media_position ? "" : html` `}
- + ${(stateObj.state === "off" && + !supportsFeature(stateObj, SUPPORT_TURN_ON)) || + (stateObj.state === "on" && + !supportsFeature(stateObj, SUPPORT_TURN_OFF)) + ? "" + : html` + + `}
- - - + ${!supportsFeature(stateObj, SUPPORT_PREVIOUS_TRACK) + ? "" + : html` + + `} + ${stateObj.state !== "playing" && + !supportsFeature(stateObj, SUPPORTS_PLAY) + ? "" + : html` + + `} + ${!supportsFeature(stateObj, SUPPORT_NEXT_TRACK) + ? "" + : html` + + `}
Date: Thu, 13 Feb 2020 16:30:34 -0500 Subject: [PATCH 02/11] Review Updates --- .../lovelace/cards/hui-media-control-card.ts | 69 ++++++++++++------- src/types.ts | 1 + 2 files changed, 46 insertions(+), 24 deletions(-) diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts index 159efa1c54..0973b27f26 100644 --- a/src/panels/lovelace/cards/hui-media-control-card.ts +++ b/src/panels/lovelace/cards/hui-media-control-card.ts @@ -89,12 +89,21 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { })}" >
-
+
${this._config!.name || computeStateName(this.hass!.states[this._config!.entity])}
- ${this._computeMediaTitle(stateObj)} + ${stateObj.attributes.media_title || + this.hass.localize(`state.media_player.${stateObj.state}`) || + this.hass.localize(`state.default.${stateObj.state}`) || + stateObj.state}
+ ${this._computeSecondaryTitle(stateObj)}
${OFF_STATES.includes(stateObj.state) || @@ -116,7 +125,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { ? "" : html` @@ -126,18 +135,20 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { ? "" : html` `} - ${stateObj.state !== "playing" && - !supportsFeature(stateObj, SUPPORTS_PLAY) + ${(stateObj.state !== "playing" && + !supportsFeature(stateObj, SUPPORTS_PLAY)) || + stateObj.state === "unavailable" ? "" : html` `}
@@ -190,30 +201,30 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { } } - private _computeMediaTitle(stateObj: HassEntity): string { - let prefix; - let suffix; + private _computeSecondaryTitle(stateObj: HassEntity): string { + let secondaryTitle: string; switch (stateObj.attributes.media_content_type) { case "music": - prefix = stateObj.attributes.media_artist; - suffix = stateObj.attributes.media_title; + secondaryTitle = stateObj.attributes.media_artist; break; case "tvshow": - prefix = stateObj.attributes.media_series_title; - suffix = stateObj.attributes.media_title; + secondaryTitle = stateObj.attributes.media_series_title; + if (stateObj.attributes.media_season) { + secondaryTitle += " S" + stateObj.attributes.media_season; + + if (stateObj.attributes.media_episode) { + secondaryTitle += "E" + stateObj.attributes.media_episode; + } + } break; default: - prefix = - stateObj.attributes.media_title || - stateObj.attributes.app_name || - this.hass!.localize(`state.media_player.${stateObj.state}`) || - this.hass!.localize(`state.default.${stateObj.state}`) || - stateObj.state; - suffix = ""; + secondaryTitle = stateObj.attributes.app_name + ? stateObj.attributes.app_name + : ""; } - return prefix && suffix ? `${prefix}: ${suffix}` : prefix || suffix || ""; + return secondaryTitle; } private _handleMoreInfo() { @@ -235,6 +246,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { width: 100%; height: 0; padding-bottom: 56.25%; + transition: padding-bottom 0.8s; } .image { @@ -282,12 +294,14 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { width: 44px; height: 44px; } + paper-icon-button { opacity: var(--dark-primary-opacity); } paper-icon-button[disabled] { opacity: var(--dark-disabled-opacity); + background-color: rgba(0, 0, 0, var(--dark-disabled-opacity)); } .playPauseButton { @@ -313,9 +327,16 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { transition: background-color 0.5s; } + .caption.unavailable { + background-color: rgba(0, 0, 0, var(--dark-secondary-opacity)); + } + .title { font-size: 1.2em; margin: 8px 0 4px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } .progress { diff --git a/src/types.ts b/src/types.ts index 9cef34e771..1e8626bec6 100644 --- a/src/types.ts +++ b/src/types.ts @@ -204,6 +204,7 @@ export type MediaEntity = HassEntityBase & { attributes: HassEntityAttributeBase & { media_duration: number; media_position: number; + media_title: string; }; }; From f6b10232ec317b6ba3593d047f3d8ca3e847a110 Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Thu, 13 Feb 2020 16:35:16 -0500 Subject: [PATCH 03/11] Disabled Style Updates --- src/panels/lovelace/cards/hui-media-control-card.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts index 0973b27f26..531d8a70bb 100644 --- a/src/panels/lovelace/cards/hui-media-control-card.ts +++ b/src/panels/lovelace/cards/hui-media-control-card.ts @@ -136,6 +136,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { : html` @@ -162,6 +163,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { : html` @@ -301,7 +303,6 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { paper-icon-button[disabled] { opacity: var(--dark-disabled-opacity); - background-color: rgba(0, 0, 0, var(--dark-disabled-opacity)); } .playPauseButton { @@ -314,6 +315,10 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { transition: background-color 0.5s; } + .playPauseButton[disabled] { + background-color: rgba(0, 0, 0, var(--dark-disabled-opacity)); + } + .caption { position: absolute; left: 0; From 67706a312d9a68b8933cdb6328e79d62acef0643 Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Sun, 16 Feb 2020 12:11:18 -0500 Subject: [PATCH 04/11] Support for requesting the image from the server --- .../lovelace/cards/hui-media-control-card.ts | 34 ++++++++++++++++--- 1 file changed, 29 insertions(+), 5 deletions(-) diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts index 531d8a70bb..ba42dc3041 100644 --- a/src/panels/lovelace/cards/hui-media-control-card.ts +++ b/src/panels/lovelace/cards/hui-media-control-card.ts @@ -24,6 +24,7 @@ import { SUPPORT_PREVIOUS_TRACK, SUPPORT_NEXT_TRACK, SUPPORTS_PLAY, + fetchMediaPlayerThumbnailWithCache, } from "../../../data/media-player"; import { hasConfigOrEntityChanged } from "../common/has-changed"; import { HomeAssistant, MediaEntity } from "../../../types"; @@ -46,6 +47,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { @property() public hass?: HomeAssistant; @property() private _config?: MediaControlCardConfig; + @property() private _image?: string; public getCardSize(): number { return 3; @@ -76,19 +78,19 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { > `; } - const image = - stateObj.attributes.entity_picture || - "../static/images/card_media_player_bg.png"; return html`
-
+
{ + this._image = `data:${content_type};base64,${content}`; + } + ); } private _computeSecondaryTitle(stateObj: HassEntity): string { @@ -272,6 +295,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { background-repeat: no-repeat; background-color: var(--primary-color); background-size: initial; + background-image: "url(../static/images/card_media_player_bg.png)"; } .no-image > .caption { From 30e56118124537d7882f3d4016eaae3ff6332d0f Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Sun, 16 Feb 2020 12:15:56 -0500 Subject: [PATCH 05/11] Stupid mistake --- src/panels/lovelace/cards/hui-media-control-card.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts index ba42dc3041..5b2e32358e 100644 --- a/src/panels/lovelace/cards/hui-media-control-card.ts +++ b/src/panels/lovelace/cards/hui-media-control-card.ts @@ -79,6 +79,8 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { `; } + const picture = this._image || "../static/images/card_media_player_bg.png"; + return html`
.caption { From 2718ada9f96be1fe362e37fa0c27a2372af02899 Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Mon, 17 Feb 2020 10:01:01 -0500 Subject: [PATCH 06/11] Review updates --- src/data/media-player.ts | 1 + .../lovelace/cards/hui-media-control-card.ts | 20 +++++++++++-------- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/data/media-player.ts b/src/data/media-player.ts index cfb17c91c5..ddf024ac98 100644 --- a/src/data/media-player.ts +++ b/src/data/media-player.ts @@ -12,6 +12,7 @@ export const SUPPORT_TURN_OFF = 256; export const SUPPORT_PLAY_MEDIA = 512; export const SUPPORT_VOLUME_BUTTONS = 1024; export const SUPPORT_SELECT_SOURCE = 2048; +export const SUPPORT_STOP = 4096; export const SUPPORTS_PLAY = 16384; export const SUPPORT_SELECT_SOUND_MODE = 65536; export const OFF_STATES = ["off", "idle"]; diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts index 5b2e32358e..d93791597b 100644 --- a/src/panels/lovelace/cards/hui-media-control-card.ts +++ b/src/panels/lovelace/cards/hui-media-control-card.ts @@ -25,12 +25,14 @@ import { SUPPORT_NEXT_TRACK, SUPPORTS_PLAY, fetchMediaPlayerThumbnailWithCache, + SUPPORT_STOP, } from "../../../data/media-player"; import { hasConfigOrEntityChanged } from "../common/has-changed"; import { HomeAssistant, MediaEntity } from "../../../types"; import { LovelaceCard, LovelaceCardEditor } from "../types"; import { fireEvent } from "../../../common/dom/fire_event"; import { MediaControlCardConfig } from "./types"; +import { UNAVAILABLE } from "../../../data/entity"; @customElement("hui-media-control-card") export class HuiMediaControlCard extends LitElement implements LovelaceCard { @@ -94,9 +96,8 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { style="background-image: url(${this.hass.hassUrl(picture)})" >
${this._config!.name || @@ -129,7 +130,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { ? "" : html` @@ -139,7 +140,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { ? "" : html`
From 9a7f7f119d21dc6181d95c718bc03012926dbd6b Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Mon, 17 Feb 2020 10:28:13 -0500 Subject: [PATCH 07/11] Review updates again because I am a fool --- src/panels/lovelace/cards/hui-media-control-card.ts | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts index d93791597b..54944b0a0a 100644 --- a/src/panels/lovelace/cards/hui-media-control-card.ts +++ b/src/panels/lovelace/cards/hui-media-control-card.ts @@ -86,9 +86,8 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { return html`
@@ -140,7 +139,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { ? "" : html`
From da1dd4516902db96d7b7b401093ebc5c9c48b3e2 Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Mon, 17 Feb 2020 11:31:27 -0500 Subject: [PATCH 08/11] Update for playlist information if music isnt present --- src/panels/lovelace/cards/hui-media-control-card.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts index 54944b0a0a..c38940b375 100644 --- a/src/panels/lovelace/cards/hui-media-control-card.ts +++ b/src/panels/lovelace/cards/hui-media-control-card.ts @@ -238,6 +238,9 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { case "music": secondaryTitle = stateObj.attributes.media_artist; break; + case "playlist": + secondaryTitle = stateObj.attributes.media_playlist; + break; case "tvshow": secondaryTitle = stateObj.attributes.media_series_title; if (stateObj.attributes.media_season) { From be9ec50e3ad02839dfbd00e5aa1eb093ca005057 Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Mon, 17 Feb 2020 11:51:05 -0500 Subject: [PATCH 09/11] When no image occurs mark the image as undefined --- src/panels/lovelace/cards/hui-media-control-card.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts index c38940b375..bcc8e04b23 100644 --- a/src/panels/lovelace/cards/hui-media-control-card.ts +++ b/src/panels/lovelace/cards/hui-media-control-card.ts @@ -69,6 +69,8 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { } const stateObj = this.hass.states[this._config.entity] as MediaEntity; + console.log(stateObj); + if (!stateObj) { return html` Date: Mon, 17 Feb 2020 12:09:17 -0500 Subject: [PATCH 10/11] rookie mistake --- src/panels/lovelace/cards/hui-media-control-card.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts index bcc8e04b23..c7dbe17f02 100644 --- a/src/panels/lovelace/cards/hui-media-control-card.ts +++ b/src/panels/lovelace/cards/hui-media-control-card.ts @@ -69,8 +69,6 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { } const stateObj = this.hass.states[this._config.entity] as MediaEntity; - console.log(stateObj); - if (!stateObj) { return html` Date: Mon, 17 Feb 2020 13:36:21 -0500 Subject: [PATCH 11/11] Typing functions --- src/panels/lovelace/cards/hui-media-control-card.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts index c7dbe17f02..6a319b4122 100644 --- a/src/panels/lovelace/cards/hui-media-control-card.ts +++ b/src/panels/lovelace/cards/hui-media-control-card.ts @@ -261,13 +261,13 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { return secondaryTitle; } - private _handleMoreInfo() { + private _handleMoreInfo(): void { fireEvent(this, "hass-more-info", { entityId: this._config!.entity, }); } - private _handleClick(e: MouseEvent) { + private _handleClick(e: MouseEvent): void { this.hass!.callService("media_player", (e.currentTarget! as any).action, { entity_id: this._config!.entity, });