mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-28 11:46:42 +00:00
Convert hui-media-player-entity-row to TypeScript/LitElement (#2136)
* Convert hui-media-player-entity-row to TypeScript/LitElement * Add types * Address review comments
This commit is contained in:
Ian Richardson
Paulus Schoutsen
parent
e4cac86690
commit
5e43d9b6b7
@ -1,165 +0,0 @@
|
|||||||
import "@polymer/paper-icon-button/paper-icon-button";
|
|
||||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
|
||||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
|
||||||
|
|
||||||
import "../components/hui-generic-entity-row";
|
|
||||||
|
|
||||||
import LocalizeMixin from "../../../mixins/localize-mixin";
|
|
||||||
|
|
||||||
const SUPPORT_PAUSE = 1;
|
|
||||||
const SUPPORT_NEXT_TRACK = 32;
|
|
||||||
const SUPPORTS_PLAY = 16384;
|
|
||||||
const OFF_STATES = ["off", "idle"];
|
|
||||||
|
|
||||||
/*
|
|
||||||
* @appliesMixin LocalizeMixin
|
|
||||||
*/
|
|
||||||
class HuiMediaPlayerEntityRow extends LocalizeMixin(PolymerElement) {
|
|
||||||
static get template() {
|
|
||||||
return html`
|
|
||||||
${this.styleTemplate}
|
|
||||||
<hui-generic-entity-row
|
|
||||||
hass="[[hass]]"
|
|
||||||
config="[[_config]]"
|
|
||||||
show-secondary="false"
|
|
||||||
>
|
|
||||||
${this.mediaPlayerControlTemplate}
|
|
||||||
</hui-generic-entity-row>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
static get styleTemplate() {
|
|
||||||
return html`
|
|
||||||
<style>
|
|
||||||
.controls {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
static get mediaPlayerControlTemplate() {
|
|
||||||
return html`
|
|
||||||
<template is="dom-if" if="[[!_isOff(_stateObj.state)]]">
|
|
||||||
<div class="controls">
|
|
||||||
<template is="dom-if" if="[[_computeControlIcon(_stateObj)]]">
|
|
||||||
<paper-icon-button
|
|
||||||
icon="[[_computeControlIcon(_stateObj)]]"
|
|
||||||
on-click="_playPause"
|
|
||||||
></paper-icon-button>
|
|
||||||
</template>
|
|
||||||
<template is="dom-if" if="[[_supportsNext(_stateObj)]]">
|
|
||||||
<paper-icon-button
|
|
||||||
icon="hass:skip-next"
|
|
||||||
on-click="_nextTrack"
|
|
||||||
></paper-icon-button>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template is="dom-if" if="[[_isOff(_stateObj.state)]]">
|
|
||||||
<div>[[_computeState(_stateObj.state)]]</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<div slot="secondary">[[_computeMediaTitle(_stateObj)]]</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
static get properties() {
|
|
||||||
return {
|
|
||||||
hass: Object,
|
|
||||||
_config: Object,
|
|
||||||
_stateObj: {
|
|
||||||
type: Object,
|
|
||||||
computed: "_computeStateObj(hass.states, _config.entity)",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
_computeStateObj(states, entityId) {
|
|
||||||
return states && entityId in states ? states[entityId] : null;
|
|
||||||
}
|
|
||||||
|
|
||||||
setConfig(config) {
|
|
||||||
if (!config || !config.entity) {
|
|
||||||
throw new Error("Entity not configured.");
|
|
||||||
}
|
|
||||||
this._config = config;
|
|
||||||
}
|
|
||||||
|
|
||||||
_computeControlIcon(stateObj) {
|
|
||||||
if (!stateObj) return null;
|
|
||||||
|
|
||||||
if (stateObj.state !== "playing") {
|
|
||||||
return stateObj.attributes.supported_features & SUPPORTS_PLAY
|
|
||||||
? "hass:play"
|
|
||||||
: "";
|
|
||||||
}
|
|
||||||
|
|
||||||
return stateObj.attributes.supported_features & SUPPORT_PAUSE
|
|
||||||
? "hass:pause"
|
|
||||||
: "hass:stop";
|
|
||||||
}
|
|
||||||
|
|
||||||
_computeMediaTitle(stateObj) {
|
|
||||||
if (!stateObj || this._isOff(stateObj.state)) return null;
|
|
||||||
|
|
||||||
let prefix;
|
|
||||||
let suffix;
|
|
||||||
|
|
||||||
switch (stateObj.attributes.media_content_type) {
|
|
||||||
case "music":
|
|
||||||
prefix = stateObj.attributes.media_artist;
|
|
||||||
suffix = stateObj.attributes.media_title;
|
|
||||||
break;
|
|
||||||
case "tvshow":
|
|
||||||
prefix = stateObj.attributes.media_series_title;
|
|
||||||
suffix = stateObj.attributes.media_title;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
prefix =
|
|
||||||
stateObj.attributes.media_title ||
|
|
||||||
stateObj.attributes.app_name ||
|
|
||||||
stateObj.state;
|
|
||||||
suffix = "";
|
|
||||||
}
|
|
||||||
|
|
||||||
return prefix && suffix ? `${prefix}: ${suffix}` : prefix || suffix || "";
|
|
||||||
}
|
|
||||||
|
|
||||||
_computeState(state) {
|
|
||||||
return (
|
|
||||||
this.localize(`state.media_player.${state}`) ||
|
|
||||||
this.localize(`state.default.${state}`) ||
|
|
||||||
state
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
_callService(service) {
|
|
||||||
this.hass.callService("media_player", service, {
|
|
||||||
entity_id: this._config.entity,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
_playPause(event) {
|
|
||||||
event.stopPropagation();
|
|
||||||
this._callService("media_play_pause");
|
|
||||||
}
|
|
||||||
|
|
||||||
_nextTrack(event) {
|
|
||||||
event.stopPropagation();
|
|
||||||
if (this._stateObj.attributes.supported_features & SUPPORT_NEXT_TRACK) {
|
|
||||||
this._callService("media_next_track");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_isOff(state) {
|
|
||||||
return OFF_STATES.includes(state);
|
|
||||||
}
|
|
||||||
|
|
||||||
_supportsNext(stateObj) {
|
|
||||||
return (
|
|
||||||
stateObj && stateObj.attributes.supported_features & SUPPORT_NEXT_TRACK
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
customElements.define("hui-media-player-entity-row", HuiMediaPlayerEntityRow);
|
|
||||||
171
src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts
Normal file
171
src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts
Normal file
@ -0,0 +1,171 @@
|
|||||||
|
import { html, LitElement } from "@polymer/lit-element";
|
||||||
|
import { TemplateResult } from "lit-html";
|
||||||
|
import "@polymer/paper-icon-button/paper-icon-button";
|
||||||
|
|
||||||
|
import "../components/hui-generic-entity-row";
|
||||||
|
|
||||||
|
import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
|
||||||
|
import { EntityRow, EntityConfig } from "./types";
|
||||||
|
import { HomeAssistant } from "../../../types";
|
||||||
|
import { HassEntity } from "home-assistant-js-websocket";
|
||||||
|
|
||||||
|
const SUPPORT_PAUSE = 1;
|
||||||
|
const SUPPORT_NEXT_TRACK = 32;
|
||||||
|
const SUPPORTS_PLAY = 16384;
|
||||||
|
const OFF_STATES = ["off", "idle"];
|
||||||
|
|
||||||
|
class HuiMediaPlayerEntityRow extends hassLocalizeLitMixin(LitElement)
|
||||||
|
implements EntityRow {
|
||||||
|
public hass?: HomeAssistant;
|
||||||
|
private _config?: EntityConfig;
|
||||||
|
|
||||||
|
static get properties() {
|
||||||
|
return {
|
||||||
|
hass: {},
|
||||||
|
_config: {},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
public setConfig(config: EntityConfig): void {
|
||||||
|
if (!config || !config.entity) {
|
||||||
|
throw new Error("Invalid Configuration: 'entity' required");
|
||||||
|
}
|
||||||
|
|
||||||
|
this._config = config;
|
||||||
|
}
|
||||||
|
|
||||||
|
protected render(): TemplateResult {
|
||||||
|
if (!this.hass || !this._config) {
|
||||||
|
return html``;
|
||||||
|
}
|
||||||
|
|
||||||
|
const stateObj = this.hass.states[this._config.entity];
|
||||||
|
|
||||||
|
if (!stateObj) {
|
||||||
|
return html`
|
||||||
|
<hui-error-entity-row
|
||||||
|
.entity="${this._config.entity}"
|
||||||
|
></hui-error-entity-row>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const supportsPlay =
|
||||||
|
// tslint:disable-next-line:no-bitwise
|
||||||
|
stateObj.attributes.supported_features! & SUPPORTS_PLAY;
|
||||||
|
const supportsNext =
|
||||||
|
// tslint:disable-next-line:no-bitwise
|
||||||
|
stateObj.attributes.supported_features! & SUPPORT_NEXT_TRACK;
|
||||||
|
|
||||||
|
return html`
|
||||||
|
${this.renderStyle()}
|
||||||
|
<hui-generic-entity-row
|
||||||
|
.hass="${this.hass}"
|
||||||
|
.config="${this._config}"
|
||||||
|
.showSecondary="false"
|
||||||
|
>
|
||||||
|
${
|
||||||
|
OFF_STATES.includes(stateObj.state)
|
||||||
|
? html`
|
||||||
|
<div>
|
||||||
|
${
|
||||||
|
this.localize(`state.media_player.${stateObj.state}`) ||
|
||||||
|
this.localize(`state.default.${stateObj.state}`) ||
|
||||||
|
stateObj.state
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
: html`
|
||||||
|
<div class="controls">
|
||||||
|
${
|
||||||
|
stateObj.state !== "playing" && !supportsPlay
|
||||||
|
? ""
|
||||||
|
: html`
|
||||||
|
<paper-icon-button
|
||||||
|
icon="${this._computeControlIcon(stateObj)}"
|
||||||
|
@click="${this._playPause}"
|
||||||
|
></paper-icon-button>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
${
|
||||||
|
supportsNext
|
||||||
|
? html`
|
||||||
|
<paper-icon-button
|
||||||
|
icon="hass:skip-next"
|
||||||
|
@click="${this._nextTrack}"
|
||||||
|
></paper-icon-button>
|
||||||
|
`
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div slot="secondary">${this._computeMediaTitle(stateObj)}</div>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
</hui-generic-entity-row>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderStyle(): TemplateResult {
|
||||||
|
return html`
|
||||||
|
<style>
|
||||||
|
.controls {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private _computeControlIcon(stateObj: HassEntity): string {
|
||||||
|
if (stateObj.state !== "playing") {
|
||||||
|
return "hass:play";
|
||||||
|
}
|
||||||
|
|
||||||
|
// tslint:disable-next-line:no-bitwise
|
||||||
|
return stateObj.attributes.supported_features! & SUPPORT_PAUSE
|
||||||
|
? "hass:pause"
|
||||||
|
: "hass:stop";
|
||||||
|
}
|
||||||
|
|
||||||
|
private _computeMediaTitle(stateObj: HassEntity): string {
|
||||||
|
let prefix;
|
||||||
|
let suffix;
|
||||||
|
|
||||||
|
switch (stateObj.attributes.media_content_type) {
|
||||||
|
case "music":
|
||||||
|
prefix = stateObj.attributes.media_artist;
|
||||||
|
suffix = stateObj.attributes.media_title;
|
||||||
|
break;
|
||||||
|
case "tvshow":
|
||||||
|
prefix = stateObj.attributes.media_series_title;
|
||||||
|
suffix = stateObj.attributes.media_title;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
prefix =
|
||||||
|
stateObj.attributes.media_title ||
|
||||||
|
stateObj.attributes.app_name ||
|
||||||
|
stateObj.state;
|
||||||
|
suffix = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
return prefix && suffix ? `${prefix}: ${suffix}` : prefix || suffix || "";
|
||||||
|
}
|
||||||
|
|
||||||
|
private _playPause(): void {
|
||||||
|
this.hass!.callService("media_player", "media_play_pause", {
|
||||||
|
entity_id: this._config!.entity,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private _nextTrack(): void {
|
||||||
|
this.hass!.callService("media_player", "media_next_track", {
|
||||||
|
entity_id: this._config!.entity,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"hui-media-player-entity-row": HuiMediaPlayerEntityRow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("hui-media-player-entity-row", HuiMediaPlayerEntityRow);
|
||||||
Loading…
x
Reference in New Issue
Block a user