Full rewrite

.eslintrc.yaml

@@ -0,0 +1,18 @@
+extends: airbnb-base
+parser: "@typescript-eslint/parser"
+rules:
+  no-else-return: 0
+  no-underscore-dangle: 0
+  nonblock-statement-body-position: 0
+  curly: 0
+  no-return-assign: 0
+  consistent-return: 0
+  no-mixed-operators: 0
+  class-methods-use-this: 0
+  no-nested-ternary: 0
+  camelcase: 0
+  no-unused-vars: 0
+globals:
+  window: true
+  Event: true
+  customElements: true

.gitignore

@@ -0,0 +1,3 @@
+/node_modules/
+yarn.lock
+.rpt2_cache/

README.md

@@ -20,45 +20,75 @@ 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.
 
-# NOTE: Firefox releases before 67 are not supported
-https://twitter.com/_developit/status/1090364879377260544
-
 ![example](example.png)
-![example2](example2.png)
 
 ## Options
 
 | Name | Type | Requirement | Description
 | ---- | ---- | ------- | -----------
 | type | string | **Required** | `custom:roku-card`
 | entity | string | **Required** | `media_player` entity of Roku device
-| remote | string | **Optional** | `remote` entity of Roku device. Default assume named like `entity`
+| remote | string | **Optional** | `remote` entity of Roku device. Default assumed named like `entity`
 | 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
+| power | `object` | **Optional** | Button configuration for power `See button options`
+| volume_up | `object` | **Optional** | Button configuration for volume_up `See button options`
+| volume_down | `object` | **Optional** | Button configuration for volume_down `See button options`
+| volume_mute | `object` | **Optional** | Button configuration for volume_mute `See button options`
+| up | `object` | **Optional** | Button configuration for up `See button options`
+| down | `object` | **Optional** | Button configuration for down `See button options`
+| left | `object` | **Optional** | Button configuration for left `See button options`
+| right | `object` | **Optional** | Button configuration for right `See button options`
+| home | `object` | **Optional** | Button configuration for home `See button options`
+| info | `object` | **Optional** | Button configuration for info `See button options`
+| back | `object` | **Optional** | Button configuration for back `See button options`
+| select | `object` | **Optional** | Button configuration for select `See button options`
+| reverse | `object` | **Optional** | Button configuration for reverse `See button options`
+| play | `object` | **Optional** | Button configuration for play `See button options`
+| forward | `object` | **Optional** | Button configuration for forward `See button options`
+| apps | `object` | **Optional** | List of app shortcuts `See app options`
+
+## `app` Options
 
-## `service` Options
 | Name | Type | Requirement | Description
 | ---- | ---- | ------- | -----------
-| service | string | **Required** | Service to call
-| service_data | string | **Optional** | Service data to use
+| id | `string` | **Optional** | Name of the source to launch
+| icon | `string` | **Optional** | Path to image to use for app
+
+## `button` Options
 
+| Name | Type | Requirement | Description
+| ---- | ---- | ------- | -----------
+| show | `boolean` | **Optional** | Show/Hide button `true`
+| tap_action | `object` | **Optional** | Tap action object `See action options`
+| hold_action | `object` | **Optional** | Hold action object `See action options`
+| dbltap_action | `object` | **Optional** | Doulbe Tap action object `See action options`
+
+## `action` Options
+
+| Name | Type | Default | Supported options | Description |
+| ----------------- | ------ | -------- | ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| `action` | `string` | `toggle` | `more-info`, `toggle`, `call-service`, `none`, `navigate`, `url` | Action to perform |
+| `entity` | `string` | none | Any entity id | **Only valid for `action: more-info`** to override the entity on which you want to call `more-info` |
+| `navigation_path` | `string` | none | Eg: `/lovelace/0/` | Path to navigate to (e.g. `/lovelace/0/`) when action defined as navigate |
+| `url` | `string` | none | Eg: `https://www.google.fr` | URL to open on click when action is `url`. The URL will open in a new tab |
+| `service` | `string` | none | Any service | Service to call (e.g. `media_player.media_play_pause`) when `action` defined as `call-service` |
+| `service_data` | `object` | none | Any service data | Service data to include (e.g. `entity_id: media_player.bedroom`) when `action` defined as `call-service`. If your `service_data` requires an `entity_id`, you can use the keywork `entity`, this will actually call the service on the entity defined in the main configuration of this card. Useful for [configuration templates](#configuration-templates) |
+| `haptic` | `string` | none | `success`, `warning`, `failure`, `light`, `medium`, `heavy`, `selection` | Haptic feedback for the [Beta IOS App](http://home-assistant.io/ios/beta) |
+| `repeat` | `number` | none | eg: `500` | For a hold_action, you can optionally configure the action to repeat while the button is being held down (for example, to repeatedly increase the volume of a media player). Define the number of milliseconds between repeat actions here. |
 
 ## Installation
 
 ### Step 1
 
-Install `roku-card` by copying `roku-card.js` and `roku-card-editor.js` from this repo to `<config directory>/www/roku-card.js` on your Home Assistant instance.
+Install `roku-card` by copying `dist/roku-card.js` and `dist/roku-card-editor.js` from this repo to `<config directory>/www/roku-card.js` on your Home Assistant instance.
 
 **Example:**
 
 ```bash
-wget https://raw.githubusercontent.com/custom-cards/roku-card/master/roku-card.js
-wget https://raw.githubusercontent.com/custom-cards/roku-card/master/roku-card-editor.js
+wget https://raw.githubusercontent.com/custom-cards/roku-card/master/dist/roku-card.js
+wget https://raw.githubusercontent.com/custom-cards/roku-card/master/dist/roku-card-editor.js
 mv roku-card* /config/www/
 ```
 

babel.config.js

@@ -0,0 +1,6 @@
+const plugins = [
+    '@babel/plugin-proposal-class-properties',
+    ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
+];
+
+module.exports = { plugins };