jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-01 13:37:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Style unavailable/unknown cards

Browse Source
This commit is contained in:
Paulus Schoutsen 2020-03-08 10:02:40 -07:00
parent 814fcf63a8
commit e7d89d0f9a
1 changed files with 121 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,7 +27,7 @@ import { hasConfigOrEntityChanged } from "../common/has-changed";
import { contrast } from "../common/color/contrast"; import { contrast } from "../common/color/contrast";
import { findEntities } from "../common/find-entites"; import { findEntities } from "../common/find-entites";
import { LovelaceConfig } from "../../../data/lovelace"; import { LovelaceConfig } from "../../../data/lovelace";
import { UNAVAILABLE } from "../../../data/entity"; import { UNAVAILABLE, UNKNOWN } from "../../../data/entity";
import { import {
OFF_STATES, OFF_STATES,
SUPPORT_PAUSE, SUPPORT_PAUSE,
@ -165,12 +165,17 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
width: `${this._cardHeight}px`, width: `${this._cardHeight}px`,
}; };
const isOffState = OFF_STATES.includes(stateObj.state);
const isUnavailable =
stateObj.state === UNAVAILABLE || stateObj.state === UNKNOWN;
const hasNoImage = !this._image;
return html` return html`
<ha-card> <ha-card>
<div <div
class="background ${classMap({ class="background ${classMap({
"no-image": !this._image, "no-image": hasNoImage,
off: OFF_STATES.includes(stateObj.state), off: isOffState || isUnavailable,
})}" })}"
> >
<div <div
@ -182,7 +187,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
style="background-color: ${this._backgroundColor}" style="background-color: ${this._backgroundColor}"
></div> ></div>
<div class="image" style=${styleMap(imageStyle)}></div> <div class="image" style=${styleMap(imageStyle)}></div>
${!this._image ${hasNoImage
? "" ? ""
: html` : html`
<div <div
@ -193,12 +198,12 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
</div> </div>
<div <div
class="player ${classMap({ class="player ${classMap({
"no-image": !this._image, "no-image": hasNoImage,
narrow: this._narrow && !this._veryNarrow, narrow: this._narrow && !this._veryNarrow,
off: OFF_STATES.includes(stateObj.state), off: isOffState || isUnavailable,
"no-progress": !this._showProgressBar && !this._veryNarrow, "no-progress": !this._showProgressBar && !this._veryNarrow,
})}" })}"
style="color: ${this._foregroundColor}" style=${styleMap({ color: this._foregroundColor! })}
> >
<div class="top-info"> <div class="top-info">
<div class="icon-name"> <div class="icon-name">
@ -216,101 +221,121 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
></paper-icon-button> ></paper-icon-button>
</div> </div>
</div> </div>
<div ${isUnavailable ||
class="title-controls" (isOffState && !supportsFeature(stateObj, SUPPORT_TURN_ON))
style="padding-right: ${OFF_STATES.includes(stateObj.state) ? ""
? 0 : html`
: this._cardHeight - 40}px" <div
> class="title-controls"
${OFF_STATES.includes(stateObj.state) style=${styleMap({
? "" paddingRight: isOffState
: html` ? "0"
<div class="media-info"> : `${this._cardHeight - 40}px`,
<div class="title"> })}
${stateObj.attributes.media_title || >
computeMediaDescription(stateObj)} ${isOffState
</div> ? ""
${!stateObj.attributes.media_title : html`
? "" <div class="media-info">
: computeMediaDescription(stateObj)} <div class="title">
</div> ${stateObj.attributes.media_title ||
`} computeMediaDescription(stateObj)}
${this._veryNarrow && !OFF_STATES.includes(stateObj.state) </div>
? "" ${!stateObj.attributes.media_title
: html` ? ""
<div class="controls"> : computeMediaDescription(stateObj)}
<div> </div>
${(stateObj.state === "off" && `}
!supportsFeature(stateObj, SUPPORT_TURN_ON)) || ${this._veryNarrow && !isOffState
!OFF_STATES.includes(stateObj.state) ? ""
? "" : html`
: html` <div class="controls">
<paper-icon-button <div>
icon="hass:power" ${(stateObj.state === "off" &&
.action=${stateObj.state === "off" !supportsFeature(stateObj, SUPPORT_TURN_ON)) ||
? "turn_on" !isOffState
: "turn_off"}
@click=${this._handleClick}
></paper-icon-button>
`}
</div>
${OFF_STATES.includes(stateObj.state)
? ""
: html`
<div class="playback-controls">
${!supportsFeature(stateObj, SUPPORT_PREVIOUS_TRACK)
? "" ? ""
: html` : html`
<paper-icon-button <paper-icon-button
icon="hass:skip-previous" icon="hass:power"
.action=${"media_previous_track"} .action=${stateObj.state === "off"
@click=${this._handleClick} ? "turn_on"
></paper-icon-button> : "turn_off"}
`}
${(stateObj.state !== "playing" &&
!supportsFeature(stateObj, SUPPORTS_PLAY)) ||
stateObj.state === UNAVAILABLE ||
(stateObj.state === "playing" &&
!supportsFeature(stateObj, SUPPORT_PAUSE) &&
!supportsFeature(stateObj, SUPPORT_STOP))
? ""
: html`
<paper-icon-button
class="playPauseButton"
.icon=${stateObj.state !== "playing"
? "hass:play"
: supportsFeature(stateObj, SUPPORT_PAUSE)
? "hass:pause"
: "hass:stop"}
.action=${"media_play_pause"}
@click=${this._handleClick}
></paper-icon-button>
`}
${!supportsFeature(stateObj, SUPPORT_NEXT_TRACK)
? ""
: html`
<paper-icon-button
icon="hass:skip-next"
.action=${"media_next_track"}
@click=${this._handleClick} @click=${this._handleClick}
></paper-icon-button> ></paper-icon-button>
`} `}
</div> </div>
`} ${isOffState
</div> ? ""
`} : html`
</div> <div class="playback-controls">
${!this._showProgressBar ${!supportsFeature(
? "" stateObj,
: html` SUPPORT_PREVIOUS_TRACK
<paper-progress )
.max="${stateObj.attributes.media_duration}" ? ""
.value="${getCurrentProgress(stateObj)}" : html`
class="progress" <paper-icon-button
style="--paper-progress-active-color: ${this icon="hass:skip-previous"
._foregroundColor || "var(--accent-color)"}" .action=${"media_previous_track"}
@click=${(e: MouseEvent) => this._handleSeek(e, stateObj)} @click=${this._handleClick}
></paper-progress> ></paper-icon-button>
`}
${(stateObj.state !== "playing" &&
!supportsFeature(
stateObj,
SUPPORTS_PLAY
)) ||
stateObj.state === UNAVAILABLE ||
(stateObj.state === "playing" &&
!supportsFeature(stateObj, SUPPORT_PAUSE) &&
!supportsFeature(stateObj, SUPPORT_STOP))
? ""
: html`
<paper-icon-button
class="playPauseButton"
.icon=${stateObj.state !== "playing"
? "hass:play"
: supportsFeature(
stateObj,
SUPPORT_PAUSE
)
? "hass:pause"
: "hass:stop"}
.action=${"media_play_pause"}
@click=${this._handleClick}
></paper-icon-button>
`}
${!supportsFeature(
stateObj,
SUPPORT_NEXT_TRACK
)
? ""
: html`
<paper-icon-button
icon="hass:skip-next"
.action=${"media_next_track"}
@click=${this._handleClick}
></paper-icon-button>
`}
</div>
`}
</div>
`}
</div>
${!this._showProgressBar
? ""
: html`
<paper-progress
.max="${stateObj.attributes.media_duration}"
.value="${getCurrentProgress(stateObj)}"
class="progress"
style="--paper-progress-active-color: ${this
._foregroundColor || "var(--accent-color)"}"
@click=${(e: MouseEvent) =>
this._handleSeek(e, stateObj)}
></paper-progress>
`}
`} `}
</div> </div>
</ha-card> </ha-card>
@ -687,7 +712,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
.off.player, .off.player,
.narrow.player { .narrow.player {
padding-bottom: 8px !important; padding-bottom: 16px !important;
} }
.narrow .controls, .narrow .controls,