From 634ce0a4e4240e47e426aa96d6b63f6b7cff630e Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Tue, 7 Jul 2020 15:18:11 -0500
Subject: [PATCH] Add icon option for apps

---
 .devcontainer/ui-lovelace.yaml |  4 ++++
 README.md                      |  9 +++++----
 package.json                   |  4 ++--
 src/const.ts                   |  2 +-
 src/roku-card.ts               | 37 +++++++++++++++++++++++-----------
 src/types.ts                   |  1 +
 6 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml
index fb90068..e0673c8 100644
--- a/.devcontainer/ui-lovelace.yaml
+++ b/.devcontainer/ui-lovelace.yaml
@@ -5,3 +5,7 @@ views:
   - cards:
       - type: custom:roku-card
         entity: media_player.office_roku
+        tv: true
+        apps:
+          - app: Netflix
+            icon: mdi:netflix
diff --git a/README.md b/README.md
index ed373f8..a97cb6c 100644
--- a/README.md
+++ b/README.md
@@ -31,8 +31,8 @@ Use [HACS](https://hacs.xyz) or follow this [guide](https://github.com/thomaslov
 
 ```yaml
 resources:
-    url: /local/roku-card.js
-    type: module
+  url: /local/roku-card.js
+  type: module
 ```
 
 ## Options
@@ -68,6 +68,7 @@ resources:
 | ----------------- | -------- | ------------ | ----------------------------------------------------------- |
 | app               | `string` | **Optional** | Name of the source to launch as `tap_action`                |
 | image             | `string` | **Optional** | Path to image to use for app                                |
+| icon              | `string` | **Optional** | mdi icon to use instead of an image for app                 |
 | tap_action        | `map`    | **Optional** | Tap action map [See action options](#action-options)        |
 | hold_action       | `map`    | **Optional** | Hold action map [See action options](#action-options)       |
 | double_tap_action | `map`    | **Optional** | Doulbe Tap action map [See action options](#action-options) |
@@ -97,7 +98,7 @@ resources:
 ## Usage
 
 ```yaml
-type: "custom:roku-card"
+type: 'custom:roku-card'
 entity: media_player.basement_roku
 tv: true
 apps:
@@ -139,7 +140,7 @@ volume_down:
    `resources:`
 
 ```yaml
-- url: "http://127.0.0.1:5000/roku-card.js"
+- url: 'http://127.0.0.1:5000/roku-card.js'
   type: module
 ```
 
diff --git a/package.json b/package.json
index b66e561..bd112a8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "roku-card",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Lovelace Roku Card",
   "keywords": [
     "home-assistant",
@@ -48,4 +48,4 @@
     "lint": "eslint src/*.ts",
     "rollup": "rollup -c"
   }
-}
+}
\ No newline at end of file
diff --git a/src/const.ts b/src/const.ts
index bbe9223..7733cfd 100644
--- a/src/const.ts
+++ b/src/const.ts
@@ -1 +1 @@
-export const CARD_VERSION = '1.1.3';
+export const CARD_VERSION = '1.1.4';
diff --git a/src/roku-card.ts b/src/roku-card.ts
index ec7d56c..6c2e2c2 100644
--- a/src/roku-card.ts
+++ b/src/roku-card.ts
@@ -158,18 +158,31 @@ export class RokuCard extends LitElement {
 
   private _renderImage(index: number): TemplateResult {
     return this._config && this._config.apps && this._config.apps.length > index
-      ? html`
-          <img
-            src=${this._config.apps[index].image || ''}
-            .app=${this._config.apps[index].app}
-            .config=${this._config.apps[index]}
-            @action=${this._handleAction}
-            .actionHandler=${actionHandler({
-              hasHold: hasAction(this._config.apps[index].hold_action),
-              hasDoubleClick: hasAction(this._config.apps[index].double_tap_action),
-            })}
-          />
-        `
+      ? this._config.apps[index].icon
+        ? html`
+            <ha-icon-button
+              .app=${this._config.apps[index].app}
+              icon=${this._config.apps[index].icon!}
+              title=${this._config.apps[index].app!}
+              @action=${this._handleAction}
+              .actionHandler=${actionHandler({
+                hasHold: hasAction(this._config.apps[index].hold_action),
+                hasDoubleClick: hasAction(this._config.apps[index].double_tap_action),
+              })}
+            ></ha-icon-button>
+          `
+        : html`
+            <img
+              src=${this._config.apps[index].image || ''}
+              .app=${this._config.apps[index].app}
+              .config=${this._config.apps[index]}
+              @action=${this._handleAction}
+              .actionHandler=${actionHandler({
+                hasHold: hasAction(this._config.apps[index].hold_action),
+                hasDoubleClick: hasAction(this._config.apps[index].double_tap_action),
+              })}
+            />
+          `
       : html` <ha-icon-button></ha-icon-button> `;
   }
 
diff --git a/src/types.ts b/src/types.ts
index af4d71b..de387f1 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -35,6 +35,7 @@ export interface ActionButtonConfig {
 export interface AppConfig {
   app?: string;
   image?: string;
+  icon?: string;
   tap_action?: ActionConfig;
   hold_action?: ActionConfig;
   double_tap_action?: ActionConfig;