Merge pull request #1 from custom-cards/master

update to latest
iantrich · Jun 26, 2019 · d43d8b2 · d43d8b2
2 parents d4df3b9 + c6a900d
commit d43d8b2
Show file tree

Hide file tree

Showing 4 changed files with 163 additions and 76 deletions.
diff --git 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
@@ -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
@@ -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()}
       <div class="card-config">
@@ -65,76 +78,71 @@ export class RokuCardEditor extends LitElement {
             .configValue="${"name"}"
             @value-changed="${this._valueChanged}"
           ></paper-input>
-          ${
-            customElements.get("ha-entity-picker")
-              ? html`
-                  <ha-entity-picker
-                    .hass="${this.hass}"
-                    .value="${this._entity}"
-                    .configValue=${"entity"}
-                    domain-filter="media_player"
-                    @change="${this._valueChanged}"
-                    allow-custom-entity
-                  ></ha-entity-picker>
-                `
-              : html`
-                  <paper-input
-                    label="Entity"
-                    .value="${this._entity}"
-                    .configValue="${"entity"}"
-                    @value-changed="${this._valueChanged}"
-                  ></paper-input>
-                `
-          }
-          ${
-            customElements.get("ha-entity-picker")
-              ? html`
-                  <ha-entity-picker
-                    .hass="${this.hass}"
-                    .value="${this._remote}"
-                    .configValue=${"remote"}
-                    domain-filter="remote"
-                    @change="${this._valueChanged}"
-                    allow-custom-entity
-                  ></ha-entity-picker>
-                `
-              : html`
-                  <paper-input
-                    label="Remote (Optional)"
-                    .value="${this._remote}"
-                    .configValue="${"remote"}"
-                    @value-changed="${this._valueChanged}"
-                  ></paper-input>
-                `
-          }
-          </div>
-          <div class="side-by-side">
-          ${
-            customElements.get("hui-theme-select-editor")
-              ? html`
-                  <hui-theme-select-editor
-                    .hass="${this.hass}"
-                    .value="${this._theme}"
-                    .configValue="${"theme"}"
-                    @theme-changed="${this._valueChanged}"
-                  ></hui-theme-select-editor>
-                `
-              : html`
-                  <paper-input
-                    label="Theme (Optional)"
-                    .value="${this._theme}"
-                    .configValue="${"theme"}"
-                    @value-changed="${this._valueChanged}"
-                  ></paper-input>
-                `
-          }
+          <paper-dropdown-menu
+            label="Entity"
+            @value-changed="${this._valueChanged}"
+            .configValue="${"entity"}"
+          >
+            <paper-listbox
+              slot="dropdown-content"
+              .selected="${entities.indexOf(this._entity)}"
+            >
+              ${
+                entities.map(entity => {
+                  return html`
+                    <paper-item>${entity}</paper-item>
+                  `;
+                })
+              }
+            </paper-listbox>
+          </paper-dropdown-menu>
+        </div>
+        <div class="side-by-side">
+          <paper-dropdown-menu
+            label="Remote (Optional)"
+            @value-changed="${this._valueChanged}"
+            .configValue="${"remote"}"
+          >
+            <paper-listbox
+              slot="dropdown-content"
+              .selected="${remotes.indexOf(this._remote)}"
+            >
+              ${
+                remotes.map(remote => {
+                  return html`
+                    <paper-item>${remote}</paper-item>
+                  `;
+                })
+              }
+            </paper-listbox>
+          </paper-dropdown-menu>
+
+          <paper-dropdown-menu
+            label="Theme (Optional)"
+            @value-changed="${this._valueChanged}"
+            .configValue="${"theme"}"
+          >
+            <paper-listbox
+              slot="dropdown-content"
+              .selected="${themes.indexOf(this._theme)}"
+            >
+              ${
+                themes.map(theme => {
+                  return html`
+                    <paper-item>${theme}</paper-item>
+                  `;
+                })
+              }
+            </paper-listbox>
+          </paper-dropdown-menu>
           <paper-toggle-button
             ?checked="${this._tv !== false}"
             .configValue="${"tv"}"
             @change="${this._valueChanged}"
             >Roku TV?</paper-toggle-button
           >
         </div>
+        <div>Use the YAML editor if you need to specify custom services</div>
       </div>
     `;
   }

diff --git 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 {
               </paper-listbox>
             </paper-dropdown-menu>
             ${
-              this._config.tv
+              this._config.tv || this._config.power
                 ? html`
                     <paper-icon-button
                       .action="${"power"}"
@@ -161,7 +161,10 @@ class RokuCard extends LitElement {
           </div>
 
           ${
-            this._config.tv
+            this._config.tv ||
+            this._config.volume_up ||
+            this._config.volume_down ||
+            this._config.volume_mute
               ? html`
                   <div class="row">
                     <paper-icon-button
@@ -234,11 +237,36 @@ class RokuCard extends LitElement {
   }
 
   handleActionClick(e) {
-    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
-    });
+    const custom_services = [
+      "power",
+      "volume_up",
+      "volume_down",
+      "volume_mute"
+    ];
+
+    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 {
+      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) {