Skip to content

Commit

Permalink
Merge pull request #30 from rogelio-o/custom_applications
Browse files Browse the repository at this point in the history 
Make the list of applications a configurable list
  • Loading branch information
TechHome authored Nov 15, 2022
2 parents 7b59afa + 7b4d03c commit abf2856
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 103 deletions.
11 changes: 8 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,16 +45,21 @@
| volume_up | `service` | **Optional**| service to call when volume up button pressed
| volume_down | `service` | **Optional**| service to call when volume down button pressed
| volume_mute | `service` | **Optional**| service to call when volume mute button pressed
| netflix | `service` | **Optional**| service to call when netflix button pressed
| prime_video | `service` | **Optional**| service to call when prime video button pressed
| youtube | `service` | **Optional**| service to call when youtube button pressed
| applications | `{applicationId: application}` | **Optional**| list of applications to be displayed in the remote

## `service` Options
| Name | Type | Requirement | Description
| ---- | ---- | ------- | -----------
| service | string | **Required** | Service to call
| service_data | string | **Optional** | Service data to use

## `application` Options
| Name | Type | Requirement | Description
| ---- | ---- | ------- | -----------
| icon | string | **Required** | The icon of the application
| service | string | **Required** | Service to call
| service_data | string | **Optional** | Service data to use


## Installation

Expand Down
148 changes: 48 additions & 100 deletions tv-card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,8 @@ mdiFastForward,
mdiVolumeMute,
mdiVolumeMinus,
mdiVolumePlus,
mdiNetflix,
mdiYoutube,
} from "https://unpkg.com/@mdi/[email protected]/mdi.js?module"

// Taken from mdi v5.9.55
const AMAZON_ICON_PATH = "M15.93,17.09C15.75,17.25 15.5,17.26 15.3,17.15C14.41,16.41 14.25,16.07 13.76,15.36C12.29,16.86 11.25,17.31 9.34,17.31C7.09,17.31 5.33,15.92 5.33,13.14C5.33,10.96 6.5,9.5 8.19,8.76C9.65,8.12 11.68,8 13.23,7.83V7.5C13.23,6.84 13.28,6.09 12.9,5.54C12.58,5.05 11.95,4.84 11.4,4.84C10.38,4.84 9.47,5.37 9.25,6.45C9.2,6.69 9,6.93 8.78,6.94L6.18,6.66C5.96,6.61 5.72,6.44 5.78,6.1C6.38,2.95 9.23,2 11.78,2C13.08,2 14.78,2.35 15.81,3.33C17.11,4.55 17,6.18 17,7.95V12.12C17,13.37 17.5,13.93 18,14.6C18.17,14.85 18.21,15.14 18,15.31L15.94,17.09H15.93M13.23,10.56V10C11.29,10 9.24,10.39 9.24,12.67C9.24,13.83 9.85,14.62 10.87,14.62C11.63,14.62 12.3,14.15 12.73,13.4C13.25,12.47 13.23,11.6 13.23,10.56M20.16,19.54C18,21.14 14.82,22 12.1,22C8.29,22 4.85,20.59 2.25,18.24C2.05,18.06 2.23,17.81 2.5,17.95C5.28,19.58 8.75,20.56 12.33,20.56C14.74,20.56 17.4,20.06 19.84,19.03C20.21,18.87 20.5,19.27 20.16,19.54M21.07,18.5C20.79,18.14 19.22,18.33 18.5,18.42C18.31,18.44 18.28,18.26 18.47,18.12C19.71,17.24 21.76,17.5 22,17.79C22.24,18.09 21.93,20.14 20.76,21.11C20.58,21.27 20.41,21.18 20.5,21C20.76,20.33 21.35,18.86 21.07,18.5Z";

class TVCardServices extends LitElement {
static get properties() {
return {
Expand Down Expand Up @@ -61,6 +56,26 @@ class TVCardServices extends LitElement {
this._config = { theme: "default", ...config };
}

renderApplicationsRow(applicationIds) {
return html`
<div class="row">
${applicationIds.map(applicationId => {
const application = this._config.applications[applicationId];
return html`
<ha-icon-button
.action="${applicationId}"
@click="${this.handleActionClick}"
title=${application.title}
>
<ha-icon .icon="${application.icon}"></ha-icon>
</ha-icon-button>
`;
})}
</div>
`;
}

render() {
if (!this._config || !this.hass) {
return html``;
Expand All @@ -77,6 +92,8 @@ class TVCardServices extends LitElement {
></ha-icon-button>
`;

const chunkedApplicationIds = this._config.applications === undefined ? [] : this.sliceIntoChunks(Object.keys(this._config.applications), 3);

return html`
${this.renderStyle()}
<ha-card .header="${this._config.name}">
Expand Down Expand Up @@ -209,50 +226,6 @@ class TVCardServices extends LitElement {
: ""
}
${
this._config.netflix ||
this._config.prime_video ||
this._config.youtube
? html`
<div class="row">
${this._config.netflix ?
html`
<ha-icon-button
.action="${"netflix"}"
@click="${this.handleActionClick}"
icon="mdi:netflix"
.path=${mdiNetflix}
title="Netflix"
></ha-icon-button>
`
: emptyButton}
${this._config.prime_video ?
html`
<ha-icon-button
.action="${"prime_video"}"
@click="${this.handleActionClick}"
icon="mdi:amazon"
.path=${AMAZON_ICON_PATH}
title="Prime Video"
></ha-icon-button>
`
: emptyButton}
${this._config.youtube ?
html`
<ha-icon-button
.action="${"youtube"}"
@click="${this.handleActionClick}"
icon="mdi:youtube"
.path=${mdiYoutube}
title="Youtube"
></ha-icon-button>
`
: emptyButton}
</div>
`
: ""
}
<div class="row">
<ha-icon-button
.action="${"up"}"
Expand Down Expand Up @@ -371,6 +344,8 @@ class TVCardServices extends LitElement {
`
: ""
}
${chunkedApplicationIds.map(applicationIds => this.renderApplicationsRow(applicationIds))}
</div>
</ha-card>
`;
Expand Down Expand Up @@ -420,58 +395,21 @@ class TVCardServices extends LitElement {
}

handleActionClick(e) {
const custom_services = [
"power",
"power_on",
"power_off",
"volume_up",
"volume_down",
"volume_mute",
"back",
"source",
"info",
"home",
"channelup",
"channeldown",
"up",
"left",
"select",
"right",
"down",
"reverse",
"play",
"forward",
"netflix",
"prime_video",
"youtube"
];

if (
custom_services.indexOf(e.currentTarget.action) >= 0 &&
this._config[e.currentTarget.action]
) {
const [domain, service] = this._config[
e.currentTarget.action
].service.split(".", 2);
this.hass.callService(
domain,
service,
this._config[e.currentTarget.action].service_data
? this._config[e.currentTarget.action].service_data
: null
);
} else {
const [domain, service] = this._config[
e.currentTarget.action
].service.split(".", 2);
this.hass.callService(
domain,
service,
this._config[e.currentTarget.action].service_data
? this._config[e.currentTarget.action].service_data
: null
);
const action = e.currentTarget.action;
const actionData = this._config[action] !== undefined ? this._config[action] : this._config.applications[action];
if (actionData === undefined) {
console.error(`The action ${action} is not defined in the configuration and is not a defined application.`);
return;
}

const [domain, service] = actionData.service.split(".", 2);
this.hass.callService(
domain,
service,
actionData.service_data !== undefined
? actionData.service_data
: null
);
}

applyThemesOnElement(element, themes, localTheme) {
Expand Down Expand Up @@ -511,6 +449,16 @@ class TVCardServices extends LitElement {
meta.setAttribute("content", themeColor);
}
}

sliceIntoChunks(arr, chunkSize) {
const res = [];
for (let i = 0; i < arr.length; i += chunkSize) {
const chunk = arr.slice(i, i + chunkSize);
res.push(chunk);
}
return res;
}

}

customElements.define("tv-card", TVCardServices);

0 comments on commit abf2856

Please sign in to comment.