jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-02 05:57:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Review Updates

Browse Source
This commit is contained in:
Zack Arnett 2020-02-13 16:30:34 -05:00
parent d33e035db7
commit 87559c0938
2 changed files with 46 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/panels/lovelace/cards/hui-media-control-card.ts
View File

@ -89,12 +89,21 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
})}" })}"
> >
<div class="image" style="background-image: url(${image})"></div> <div class="image" style="background-image: url(${image})"></div>
<div class="caption"> <div
class="${classMap({
caption: true,
unavailable: stateObj.state === "unavailable",
})}"
>
${this._config!.name || ${this._config!.name ||
computeStateName(this.hass!.states[this._config!.entity])} computeStateName(this.hass!.states[this._config!.entity])}
<div class="title"> <div class="title">
${this._computeMediaTitle(stateObj)} ${stateObj.attributes.media_title ||
this.hass.localize(`state.media_player.${stateObj.state}`) ||
this.hass.localize(`state.default.${stateObj.state}`) ||
stateObj.state}
</div> </div>
${this._computeSecondaryTitle(stateObj)}
</div> </div>
</div> </div>
${OFF_STATES.includes(stateObj.state) || ${OFF_STATES.includes(stateObj.state) ||
@ -116,7 +125,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
? "" ? ""
: html` : html`
<paper-icon-button <paper-icon-button
icon="hass:power" .icon=${"hass:power"}
.action=${stateObj.state === "off" ? "turn_on" : "turn_off"} .action=${stateObj.state === "off" ? "turn_on" : "turn_off"}
@click=${this._handleClick} @click=${this._handleClick}
></paper-icon-button> ></paper-icon-button>
@ -126,18 +135,20 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
? "" ? ""
: html` : html`
<paper-icon-button <paper-icon-button
icon="hass:skip-previous" .icon=${"hass:skip-previous"}
.action=${"media_previous_track"} .action=${"media_previous_track"}
@click=${this._handleClick} @click=${this._handleClick}
></paper-icon-button> ></paper-icon-button>
`} `}
${stateObj.state !== "playing" && ${(stateObj.state !== "playing" &&
!supportsFeature(stateObj, SUPPORTS_PLAY) !supportsFeature(stateObj, SUPPORTS_PLAY)) ||
stateObj.state === "unavailable"
? "" ? ""
: html` : html`
<paper-icon-button <paper-icon-button
class="playPauseButton" class="playPauseButton"
icon=${stateObj.state !== "playing" .disabled="${OFF_STATES.includes(stateObj.state)}"
.icon=${stateObj.state !== "playing"
? "hass:play" ? "hass:play"
: supportsFeature(stateObj, SUPPORT_PAUSE) : supportsFeature(stateObj, SUPPORT_PAUSE)
? "hass:pause" ? "hass:pause"
@ -150,14 +161,14 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
? "" ? ""
: html` : html`
<paper-icon-button <paper-icon-button
icon="hass:skip-next" .icon=${"hass:skip-next"}
.action=${"media_next_track"} .action=${"media_next_track"}
@click=${this._handleClick} @click=${this._handleClick}
></paper-icon-button> ></paper-icon-button>
`} `}
</div> </div>
<paper-icon-button <paper-icon-button
icon="hass:dots-vertical" .icon=${"hass:dots-vertical"}
@click="${this._handleMoreInfo}" @click="${this._handleMoreInfo}"
></paper-icon-button> ></paper-icon-button>
</div> </div>
@ -190,30 +201,30 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
} }
} }
private _computeMediaTitle(stateObj: HassEntity): string { private _computeSecondaryTitle(stateObj: HassEntity): string {
let prefix; let secondaryTitle: string;
let suffix;
switch (stateObj.attributes.media_content_type) { switch (stateObj.attributes.media_content_type) {
case "music": case "music":
prefix = stateObj.attributes.media_artist; secondaryTitle = stateObj.attributes.media_artist;
suffix = stateObj.attributes.media_title;
break; break;
case "tvshow": case "tvshow":
prefix = stateObj.attributes.media_series_title; secondaryTitle = stateObj.attributes.media_series_title;
suffix = stateObj.attributes.media_title; if (stateObj.attributes.media_season) {
secondaryTitle += " S" + stateObj.attributes.media_season;
if (stateObj.attributes.media_episode) {
secondaryTitle += "E" + stateObj.attributes.media_episode;
}
}
break; break;
default: default:
prefix = secondaryTitle = stateObj.attributes.app_name
stateObj.attributes.media_title || ? stateObj.attributes.app_name
stateObj.attributes.app_name || : "";
this.hass!.localize(`state.media_player.${stateObj.state}`) ||
this.hass!.localize(`state.default.${stateObj.state}`) ||
stateObj.state;
suffix = "";
} }
return prefix && suffix ? `${prefix}: ${suffix}` : prefix || suffix || ""; return secondaryTitle;
} }
private _handleMoreInfo() { private _handleMoreInfo() {
@ -235,6 +246,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
width: 100%; width: 100%;
height: 0; height: 0;
padding-bottom: 56.25%; padding-bottom: 56.25%;
transition: padding-bottom 0.8s;
} }
.image { .image {
@ -282,12 +294,14 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
width: 44px; width: 44px;
height: 44px; height: 44px;
} }
paper-icon-button { paper-icon-button {
opacity: var(--dark-primary-opacity); opacity: var(--dark-primary-opacity);
} }
paper-icon-button[disabled] { paper-icon-button[disabled] {
opacity: var(--dark-disabled-opacity); opacity: var(--dark-disabled-opacity);
background-color: rgba(0, 0, 0, var(--dark-disabled-opacity));
} }
.playPauseButton { .playPauseButton {
@ -313,9 +327,16 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
transition: background-color 0.5s; transition: background-color 0.5s;
} }
.caption.unavailable {
background-color: rgba(0, 0, 0, var(--dark-secondary-opacity));
}
.title { .title {
font-size: 1.2em; font-size: 1.2em;
margin: 8px 0 4px; margin: 8px 0 4px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
} }
.progress { .progress {

1
src/types.ts
View File

@ -204,6 +204,7 @@ export type MediaEntity = HassEntityBase & {
attributes: HassEntityAttributeBase & { attributes: HassEntityAttributeBase & {
media_duration: number; media_duration: number;
media_position: number; media_position: number;
media_title: string;
}; };
}; };