diff --git a/README.md b/README.md index e1d4920..8184d69 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,28 @@ +# Roku Remote Card +📺 Roku Remote Lovelace Card + +[![GitHub Release][releases-shield]][releases] +[![License][license-shield]](LICENSE.md) +![Project Maintenance][maintenance-shield] +[![GitHub Activity][commits-shield]][commits] -[![Version](https://img.shields.io/badge/version-0.0.5-green.svg?style=for-the-badge)](#) [![mantained](https://img.shields.io/maintenance/yes/2019.svg?style=for-the-badge)](#) +[![Discord][discord-shield]][discord] +[![Community Forum][forum-shield]][forum] -[![maintainer](https://img.shields.io/badge/maintainer-Ian%20Richardson%20%40iantrich-blue.svg?style=for-the-badge)](#) +[![Twitter][twitter]][twitter] +[![Github][github]][github] ## Support Hey dude! Help me out for a couple of :beers: or a :coffee:! [![coffee](https://www.buymeacoffee.com/assets/img/custom_images/black_img.png)](https://www.buymeacoffee.com/zJtVxUAgH) -# Roku Remote Card -💵 Roku Remote Lovelace Card - This card is for [Lovelace](https://www.home-assistant.io/lovelace) on [Home Assistant](https://www.home-assistant.io/) that display a [Roku](https://www.roku.com/) remote. +# NOTE: Firefox releases before 67 are not supported +https://twitter.com/_developit/status/1090364879377260544 + ![example](example.png) ![example2](example2.png) @@ -27,6 +36,17 @@ This card is for [Lovelace](https://www.home-assistant.io/lovelace) on [Home Ass | name | string | **Optional** | Card name | theme | string | **Optional** | Card theme | tv | boolean | **Optional** | If `true` shows volume and power buttons. Default `false` +| power | `service` | **Optional**| service to call when power button pressed +| 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 + +## `service` Options +| Name | Type | Requirement | Description +| ---- | ---- | ------- | ----------- +| service | string | **Required** | Service to call +| service_data | string | **Optional** | Service data to use + ## Installation @@ -62,6 +82,23 @@ Add a custom element in your `ui-lovelace.yaml` name: Bedroom TV theme: darkpurple tv: true + power: + service: switch.turn_on + service_data: + entity_id: switch.bedroom_tv_power ``` [Troubleshooting](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins) + +[commits-shield]: https://img.shields.io/github/commit-activity/y/custom-cards/roku-card.svg?style=for-the-badge +[commits]: https://github.com/custom-cards/roku-card/commits/master +[discord]: https://discord.gg/Qa5fW2R +[discord-shield]: https://img.shields.io/discord/330944238910963714.svg?style=for-the-badge +[forum-shield]: https://img.shields.io/badge/community-forum-brightgreen.svg?style=for-the-badge +[forum]: https://community.home-assistant.io/t/lovelace-roku-remote-card/91476 +[license-shield]: https://img.shields.io/github/license/custom-cards/roku-card.svg?style=for-the-badge +[maintenance-shield]: https://img.shields.io/badge/maintainer-Ian%20Richardson%20%40iantrich-blue.svg?style=for-the-badge +[releases-shield]: https://img.shields.io/github/release/custom-cards/roku-card.svg?style=for-the-badge +[releases]: https://github.com/custom-cards/roku-card/releases +[twitter]: https://img.shields.io/twitter/follow/iantrich.svg?style=social +[github]: https://img.shields.io/github/followers/iantrich.svg?style=social diff --git a/package.yaml b/package.yaml new file mode 100644 index 0000000..7882df1 --- /dev/null +++ b/package.yaml @@ -0,0 +1,14 @@ +name: Roku Card +description: 📺 Roku Remote Card +type: lovelace +keywords: + - roku + - remote + - tv + - television +author: + name: Ian Richardson +license: Apache License, Version 2.0 +files: + - roku-card.js + - roku-card-editor.js diff --git a/roku-card-editor.js b/roku-card-editor.js index 16db73b..f887208 100644 --- a/roku-card-editor.js +++ b/roku-card-editor.js @@ -55,6 +55,19 @@ export class RokuCardEditor extends LitElement { return html``; } + const themes = ["Backend-selected", "default"].concat( + Object.keys(this.hass.themes.themes).sort() + ); + + const entities = Object.keys(this.hass.states).filter( + eid => eid.substr(0, eid.indexOf(".")) === "media_player" + ); + const remotes = [""].concat( + Object.keys(this.hass.states).filter( + eid => eid.substr(0, eid.indexOf(".")) === "remote" + ) + ); + return html` ${this.renderStyle()}
@@ -65,69 +78,63 @@ export class RokuCardEditor extends LitElement { .configValue="${"name"}" @value-changed="${this._valueChanged}" > - ${ - customElements.get("ha-entity-picker") - ? html` - - ` - : html` - - ` - } - ${ - customElements.get("ha-entity-picker") - ? html` - - ` - : html` - - ` - } -
-
- ${ - customElements.get("hui-theme-select-editor") - ? html` - - ` - : html` - - ` - } + + + ${ + entities.map(entity => { + return html` + ${entity} + `; + }) + } + + +
+
+ + + ${ + remotes.map(remote => { + return html` + ${remote} + `; + }) + } + + + + + + ${ + themes.map(theme => { + return html` + ${theme} + `; + }) + } + + Roku TV?
+
Use the YAML editor if you need to specify custom services
`; } diff --git a/roku-card.js b/roku-card.js index 397828c..d2880ab 100644 --- a/roku-card.js +++ b/roku-card.js @@ -22,7 +22,7 @@ class RokuCard extends LitElement { } getCardSize() { - return 1; + return 7; } setConfig(config) { @@ -67,7 +67,7 @@ class RokuCard extends LitElement { ${ - this._config.tv + this._config.tv || this._config.power ? html` ${ - this._config.tv + this._config.tv || + this._config.volume_up || + this._config.volume_down || + this._config.volume_mute ? html`
= 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 { + let remote = this._config.remote + ? this._config.remote + : "remote." + this._config.entity.split(".")[1]; + this.hass.callService("remote", "send_command", { + entity_id: remote, + command: e.currentTarget.action + }); + } } applyThemesOnElement(element, themes, localTheme) {