📺 tv option for volume/power controls

iantrich · Jan 25, 2019 · f51b64a · f51b64a
1 parent b31099c
commit f51b64a
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 
 
-[![Version](https://img.shields.io/badge/version-0.0.3-green.svg?style=for-the-badge)](#) [![mantained](https://img.shields.io/maintenance/yes/2019.svg?style=for-the-badge)](#)
+[![Version](https://img.shields.io/badge/version-0.0.4-green.svg?style=for-the-badge)](#) [![mantained](https://img.shields.io/maintenance/yes/2019.svg?style=for-the-badge)](#)
 
 [![maintainer](https://img.shields.io/badge/maintainer-Ian%20Richardson%20%40iantrich-blue.svg?style=for-the-badge)](#)
 
@@ -15,6 +15,7 @@ Hey dude! Help me out for a couple of :beers: or a :coffee:!
 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.
 
 ![example](example.png)
+![example2](example2.png)
 
 ## Options
 
@@ -24,6 +25,7 @@ This card is for [Lovelace](https://www.home-assistant.io/lovelace) on [Home Ass
 | entity | string | **Required** | `media_player` entity of Roku device
 | name | string | **Optional** | Card name
 | theme | string | **Optional** | Card theme
+| tv | boolean | **Optional** | If `true` shows volume and power buttons. Default `false`
 
 ## Installation
 
@@ -58,6 +60,7 @@ Add a custom element in your `ui-lovelace.yaml`
         entity: media_player.bedroom_tv
         name: Bedroom TV
         theme: darkpurple
+        tv: true
 ```
 
 [Troubleshooting](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins)
diff --git a/example2.png b/example2.png
diff --git a/roku-card-editor.js b/roku-card-editor.js
@@ -39,7 +39,11 @@ export class RokuCardEditor extends LitElement {
   }
 
   get _theme() {
-    return this._config.theme || "default";
+    return this._config.theme;
+  }
+
+  get _tv() {
+    return this._config.tv || false;
   }
 
   render() {
@@ -48,6 +52,7 @@ export class RokuCardEditor extends LitElement {
     }
 
     return html`
+      ${this.renderStyle()}
       <div class="card-config">
         <div class="side-by-side">
           <paper-input
@@ -77,6 +82,8 @@ export class RokuCardEditor extends LitElement {
                   ></paper-input>
                 `
           }
+          </div>
+          <div class="side-by-side">
           ${
             customElements.get("hui-theme-select-editor")
               ? html`
@@ -96,11 +103,34 @@ export class RokuCardEditor extends LitElement {
                   ></paper-input>
                 `
           }
+          <paper-toggle-button
+            ?checked="${this._tv !== false}"
+            .configValue="${"tv"}"
+            @change="${this._valueChanged}"
+            >Roku TV?</paper-toggle-button
+          >
         </div>
       </div>
     `;
   }
 
+  renderStyle() {
+    return html`
+      <style>
+        paper-toggle-button {
+          padding-top: 16px;
+        }
+        .side-by-side {
+          display: flex;
+        }
+        .side-by-side > * {
+          flex: 1;
+          padding-right: 4px;
+        }
+      </style>
+    `;
+  }
+
   _valueChanged(ev) {
     if (!this._config || !this.hass) {
       return;
@@ -115,7 +145,8 @@ export class RokuCardEditor extends LitElement {
       } else {
         this._config = {
           ...this._config,
-          [target.configValue]: target.value
+          [target.configValue]:
+            target.checked !== undefined ? target.checked : value
         };
       }
     }

diff --git a/roku-card.js b/roku-card.js
@@ -66,6 +66,12 @@ class RokuCard extends LitElement {
                 }
               </paper-listbox>
             </paper-dropdown-menu>
+            <paper-icon-button
+              .action="${"power"}"
+              @click="${this.handleActionClick}"
+              icon="mdi:power"
+              title="Power"
+            ></paper-icon-button>
           </div>
           <div class="row">
             <paper-icon-button
@@ -147,6 +153,33 @@ class RokuCard extends LitElement {
               title="Fast-Forward"
             ></paper-icon-button>
           </div>
+
+          ${
+            this._config.tv
+              ? html`
+                  <div class="row">
+                    <paper-icon-button
+                      .action="${"volume_mute"}"
+                      @click="${this.handleActionClick}"
+                      icon="mdi:volume-mute"
+                      title="Volume Mute"
+                    ></paper-icon-button>
+                    <paper-icon-button
+                      .action="${"volume_down"}"
+                      @click="${this.handleActionClick}"
+                      icon="mdi:volume-minus"
+                      title="Volume Down"
+                    ></paper-icon-button>
+                    <paper-icon-button
+                      .action="${"volume_up"}"
+                      @click="${this.handleActionClick}"
+                      icon="mdi:volume-plus"
+                      title="Volume Up"
+                    ></paper-icon-button>
+                  </div>
+                `
+              : ""
+          }
         </div>
       </ha-card>
     `;
@@ -169,19 +202,20 @@ class RokuCard extends LitElement {
         .remote {
           padding: 16px 0px 16px 0px;
         }
-
         img,
         paper-icon-button {
           width: 64px;
           height: 64px;
           cursor: pointer;
         }
-
         .row {
           display: flex;
           padding: 8px 36px 8px 36px;
           justify-content: space-evenly;
         }
+        .diagonal {
+          background-color: var(--light-primary-color);
+        }
       </style>
     `;
   }