diff --git a/.eslintrc.yaml b/.eslintrc.yaml new file mode 100644 index 0000000..6b60ded --- /dev/null +++ b/.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 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9e92523 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +/node_modules/ +yarn.lock +.rpt2_cache/ \ No newline at end of file diff --git a/README.md b/README.md index 8184d69..de4cd4d 100644 --- a/README.md +++ b/README.md @@ -20,11 +20,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. -# NOTE: Firefox releases before 67 are not supported -https://twitter.com/_developit/status/1090364879377260544 - ![example](example.png) -![example2](example2.png) ## Options @@ -32,33 +28,67 @@ https://twitter.com/_developit/status/1090364879377260544 | ---- | ---- | ------- | ----------- | 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 `/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 `/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/ ``` diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..bc267c0 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,6 @@ +const plugins = [ + '@babel/plugin-proposal-class-properties', + ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }], +]; + +module.exports = { plugins }; \ No newline at end of file diff --git a/dist/roku-card.js b/dist/roku-card.js new file mode 100644 index 0000000..5b620c1 --- /dev/null +++ b/dist/roku-card.js @@ -0,0 +1,3579 @@ +/*! ***************************************************************************** +Copyright (c) Microsoft Corporation. All rights reserved. +Licensed under the Apache License, Version 2.0 (the "License"); you may not use +this file except in compliance with the License. You may obtain a copy of the +License at http://www.apache.org/licenses/LICENSE-2.0 + +THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED +WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, +MERCHANTABLITY OR NON-INFRINGEMENT. + +See the Apache Version 2.0 License for specific language governing permissions +and limitations under the License. +***************************************************************************** */ + +function __decorate(decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +} + +/** + * @license + * Copyright (c) 2017 The Polymer Project Authors. All rights reserved. + * This code may only be used under the BSD style license found at + * http://polymer.github.io/LICENSE.txt + * The complete set of authors may be found at + * http://polymer.github.io/AUTHORS.txt + * The complete set of contributors may be found at + * http://polymer.github.io/CONTRIBUTORS.txt + * Code distributed by Google as part of the polymer project is also + * subject to an additional IP rights grant found at + * http://polymer.github.io/PATENTS.txt + */ +const directives = new WeakMap(); +/** + * Brands a function as a directive factory function so that lit-html will call + * the function during template rendering, rather than passing as a value. + * + * A _directive_ is a function that takes a Part as an argument. It has the + * signature: `(part: Part) => void`. + * + * A directive _factory_ is a function that takes arguments for data and + * configuration and returns a directive. Users of directive usually refer to + * the directive factory as the directive. For example, "The repeat directive". + * + * Usually a template author will invoke a directive factory in their template + * with relevant arguments, which will then return a directive function. + * + * Here's an example of using the `repeat()` directive factory that takes an + * array and a function to render an item: + * + * ```js + * html`` + * ``` + * + * When `repeat` is invoked, it returns a directive function that closes over + * `items` and the template function. When the outer template is rendered, the + * return directive function is called with the Part for the expression. + * `repeat` then performs it's custom logic to render multiple items. + * + * @param f The directive factory function. Must be a function that returns a + * function of the signature `(part: Part) => void`. The returned function will + * be called with the part object. + * + * @example + * + * import {directive, html} from 'lit-html'; + * + * const immutable = directive((v) => (part) => { + * if (part.value !== v) { + * part.setValue(v) + * } + * }); + */ +const directive = (f) => ((...args) => { + const d = f(...args); + directives.set(d, true); + return d; +}); +const isDirective = (o) => { + return typeof o === 'function' && directives.has(o); +}; + +/** + * @license + * Copyright (c) 2017 The Polymer Project Authors. All rights reserved. + * This code may only be used under the BSD style license found at + * http://polymer.github.io/LICENSE.txt + * The complete set of authors may be found at + * http://polymer.github.io/AUTHORS.txt + * The complete set of contributors may be found at + * http://polymer.github.io/CONTRIBUTORS.txt + * Code distributed by Google as part of the polymer project is also + * subject to an additional IP rights grant found at + * http://polymer.github.io/PATENTS.txt + */ +/** + * True if the custom elements polyfill is in use. + */ +const isCEPolyfill = window.customElements !== undefined && + window.customElements.polyfillWrapFlushCallback !== + undefined; +/** + * Removes nodes, starting from `start` (inclusive) to `end` (exclusive), from + * `container`. + */ +const removeNodes = (container, start, end = null) => { + while (start !== end) { + const n = start.nextSibling; + container.removeChild(start); + start = n; + } +}; + +/** + * @license + * Copyright (c) 2018 The Polymer Project Authors. All rights reserved. + * This code may only be used under the BSD style license found at + * http://polymer.github.io/LICENSE.txt + * The complete set of authors may be found at + * http://polymer.github.io/AUTHORS.txt + * The complete set of contributors may be found at + * http://polymer.github.io/CONTRIBUTORS.txt + * Code distributed by Google as part of the polymer project is also + * subject to an additional IP rights grant found at + * http://polymer.github.io/PATENTS.txt + */ +/** + * A sentinel value that signals that a value was handled by a directive and + * should not be written to the DOM. + */ +const noChange = {}; +/** + * A sentinel value that signals a NodePart to fully clear its content. + */ +const nothing = {}; + +/** + * @license + * Copyright (c) 2017 The Polymer Project Authors. All rights reserved. + * This code may only be used under the BSD style license found at + * http://polymer.github.io/LICENSE.txt + * The complete set of authors may be found at + * http://polymer.github.io/AUTHORS.txt + * The complete set of contributors may be found at + * http://polymer.github.io/CONTRIBUTORS.txt + * Code distributed by Google as part of the polymer project is also + * subject to an additional IP rights grant found at + * http://polymer.github.io/PATENTS.txt + */ +/** + * An expression marker with embedded unique key to avoid collision with + * possible text in templates. + */ +const marker = `{{lit-${String(Math.random()).slice(2)}}}`; +/** + * An expression marker used text-positions, multi-binding attributes, and + * attributes with markup-like text values. + */ +const nodeMarker = ``; +const markerRegex = new RegExp(`${marker}|${nodeMarker}`); +/** + * Suffix appended to all bound attribute names. + */ +const boundAttributeSuffix = '$lit$'; +/** + * An updateable Template that tracks the location of dynamic parts. + */ +class Template { + constructor(result, element) { + this.parts = []; + this.element = element; + const nodesToRemove = []; + const stack = []; + // Edge needs all 4 parameters present; IE11 needs 3rd parameter to be null + const walker = document.createTreeWalker(element.content, 133 /* NodeFilter.SHOW_{ELEMENT|COMMENT|TEXT} */, null, false); + // Keeps track of the last index associated with a part. We try to delete + // unnecessary nodes, but we never want to associate two different parts + // to the same index. They must have a constant node between. + let lastPartIndex = 0; + let index = -1; + let partIndex = 0; + const { strings, values: { length } } = result; + while (partIndex < length) { + const node = walker.nextNode(); + if (node === null) { + // We've exhausted the content inside a nested template element. + // Because we still have parts (the outer for-loop), we know: + // - There is a template in the stack + // - The walker will find a nextNode outside the template + walker.currentNode = stack.pop(); + continue; + } + index++; + if (node.nodeType === 1 /* Node.ELEMENT_NODE */) { + if (node.hasAttributes()) { + const attributes = node.attributes; + const { length } = attributes; + // Per + // https://developer.mozilla.org/en-US/docs/Web/API/NamedNodeMap, + // attributes are not guaranteed to be returned in document order. + // In particular, Edge/IE can return them out of order, so we cannot + // assume a correspondence between part index and attribute index. + let count = 0; + for (let i = 0; i < length; i++) { + if (endsWith(attributes[i].name, boundAttributeSuffix)) { + count++; + } + } + while (count-- > 0) { + // Get the template literal section leading up to the first + // expression in this attribute + const stringForPart = strings[partIndex]; + // Find the attribute name + const name = lastAttributeNameRegex.exec(stringForPart)[2]; + // Find the corresponding attribute + // All bound attributes have had a suffix added in + // TemplateResult#getHTML to opt out of special attribute + // handling. To look up the attribute value we also need to add + // the suffix. + const attributeLookupName = name.toLowerCase() + boundAttributeSuffix; + const attributeValue = node.getAttribute(attributeLookupName); + node.removeAttribute(attributeLookupName); + const statics = attributeValue.split(markerRegex); + this.parts.push({ type: 'attribute', index, name, strings: statics }); + partIndex += statics.length - 1; + } + } + if (node.tagName === 'TEMPLATE') { + stack.push(node); + walker.currentNode = node.content; + } + } + else if (node.nodeType === 3 /* Node.TEXT_NODE */) { + const data = node.data; + if (data.indexOf(marker) >= 0) { + const parent = node.parentNode; + const strings = data.split(markerRegex); + const lastIndex = strings.length - 1; + // Generate a new text node for each literal section + // These nodes are also used as the markers for node parts + for (let i = 0; i < lastIndex; i++) { + let insert; + let s = strings[i]; + if (s === '') { + insert = createMarker(); + } + else { + const match = lastAttributeNameRegex.exec(s); + if (match !== null && endsWith(match[2], boundAttributeSuffix)) { + s = s.slice(0, match.index) + match[1] + + match[2].slice(0, -boundAttributeSuffix.length) + match[3]; + } + insert = document.createTextNode(s); + } + parent.insertBefore(insert, node); + this.parts.push({ type: 'node', index: ++index }); + } + // If there's no text, we must insert a comment to mark our place. + // Else, we can trust it will stick around after cloning. + if (strings[lastIndex] === '') { + parent.insertBefore(createMarker(), node); + nodesToRemove.push(node); + } + else { + node.data = strings[lastIndex]; + } + // We have a part for each match found + partIndex += lastIndex; + } + } + else if (node.nodeType === 8 /* Node.COMMENT_NODE */) { + if (node.data === marker) { + const parent = node.parentNode; + // Add a new marker node to be the startNode of the Part if any of + // the following are true: + // * We don't have a previousSibling + // * The previousSibling is already the start of a previous part + if (node.previousSibling === null || index === lastPartIndex) { + index++; + parent.insertBefore(createMarker(), node); + } + lastPartIndex = index; + this.parts.push({ type: 'node', index }); + // If we don't have a nextSibling, keep this node so we have an end. + // Else, we can remove it to save future costs. + if (node.nextSibling === null) { + node.data = ''; + } + else { + nodesToRemove.push(node); + index--; + } + partIndex++; + } + else { + let i = -1; + while ((i = node.data.indexOf(marker, i + 1)) !== -1) { + // Comment node has a binding marker inside, make an inactive part + // The binding won't work, but subsequent bindings will + // TODO (justinfagnani): consider whether it's even worth it to + // make bindings in comments work + this.parts.push({ type: 'node', index: -1 }); + partIndex++; + } + } + } + } + // Remove text binding nodes after the walk to not disturb the TreeWalker + for (const n of nodesToRemove) { + n.parentNode.removeChild(n); + } + } +} +const endsWith = (str, suffix) => { + const index = str.length - suffix.length; + return index >= 0 && str.slice(index) === suffix; +}; +const isTemplatePartActive = (part) => part.index !== -1; +// Allows `document.createComment('')` to be renamed for a +// small manual size-savings. +const createMarker = () => document.createComment(''); +/** + * This regex extracts the attribute name preceding an attribute-position + * expression. It does this by matching the syntax allowed for attributes + * against the string literal directly preceding the expression, assuming that + * the expression is in an attribute-value position. + * + * See attributes in the HTML spec: + * https://www.w3.org/TR/html5/syntax.html#elements-attributes + * + * " \x09\x0a\x0c\x0d" are HTML space characters: + * https://www.w3.org/TR/html5/infrastructure.html#space-characters + * + * "\0-\x1F\x7F-\x9F" are Unicode control characters, which includes every + * space character except " ". + * + * So an attribute is: + * * The name: any character except a control character, space character, ('), + * ("), ">", "=", or "/" + * * Followed by zero or more space characters + * * Followed by "=" + * * Followed by zero or more space characters + * * Followed by: + * * Any character except space, ('), ("), "<", ">", "=", (`), or + * * (") then any non-("), or + * * (') then any non-(') + */ +const lastAttributeNameRegex = /([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/; + +/** + * @license + * Copyright (c) 2017 The Polymer Project Authors. All rights reserved. + * This code may only be used under the BSD style license found at + * http://polymer.github.io/LICENSE.txt + * The complete set of authors may be found at + * http://polymer.github.io/AUTHORS.txt + * The complete set of contributors may be found at + * http://polymer.github.io/CONTRIBUTORS.txt + * Code distributed by Google as part of the polymer project is also + * subject to an additional IP rights grant found at + * http://polymer.github.io/PATENTS.txt + */ +/** + * An instance of a `Template` that can be attached to the DOM and updated + * with new values. + */ +class TemplateInstance { + constructor(template, processor, options) { + this.__parts = []; + this.template = template; + this.processor = processor; + this.options = options; + } + update(values) { + let i = 0; + for (const part of this.__parts) { + if (part !== undefined) { + part.setValue(values[i]); + } + i++; + } + for (const part of this.__parts) { + if (part !== undefined) { + part.commit(); + } + } + } + _clone() { + // There are a number of steps in the lifecycle of a template instance's + // DOM fragment: + // 1. Clone - create the instance fragment + // 2. Adopt - adopt into the main document + // 3. Process - find part markers and create parts + // 4. Upgrade - upgrade custom elements + // 5. Update - set node, attribute, property, etc., values + // 6. Connect - connect to the document. Optional and outside of this + // method. + // + // We have a few constraints on the ordering of these steps: + // * We need to upgrade before updating, so that property values will pass + // through any property setters. + // * We would like to process before upgrading so that we're sure that the + // cloned fragment is inert and not disturbed by self-modifying DOM. + // * We want custom elements to upgrade even in disconnected fragments. + // + // Given these constraints, with full custom elements support we would + // prefer the order: Clone, Process, Adopt, Upgrade, Update, Connect + // + // But Safari dooes not implement CustomElementRegistry#upgrade, so we + // can not implement that order and still have upgrade-before-update and + // upgrade disconnected fragments. So we instead sacrifice the + // process-before-upgrade constraint, since in Custom Elements v1 elements + // must not modify their light DOM in the constructor. We still have issues + // when co-existing with CEv0 elements like Polymer 1, and with polyfills + // that don't strictly adhere to the no-modification rule because shadow + // DOM, which may be created in the constructor, is emulated by being placed + // in the light DOM. + // + // The resulting order is on native is: Clone, Adopt, Upgrade, Process, + // Update, Connect. document.importNode() performs Clone, Adopt, and Upgrade + // in one step. + // + // The Custom Elements v1 polyfill supports upgrade(), so the order when + // polyfilled is the more ideal: Clone, Process, Adopt, Upgrade, Update, + // Connect. + const fragment = isCEPolyfill ? + this.template.element.content.cloneNode(true) : + document.importNode(this.template.element.content, true); + const stack = []; + const parts = this.template.parts; + // Edge needs all 4 parameters present; IE11 needs 3rd parameter to be null + const walker = document.createTreeWalker(fragment, 133 /* NodeFilter.SHOW_{ELEMENT|COMMENT|TEXT} */, null, false); + let partIndex = 0; + let nodeIndex = 0; + let part; + let node = walker.nextNode(); + // Loop through all the nodes and parts of a template + while (partIndex < parts.length) { + part = parts[partIndex]; + if (!isTemplatePartActive(part)) { + this.__parts.push(undefined); + partIndex++; + continue; + } + // Progress the tree walker until we find our next part's node. + // Note that multiple parts may share the same node (attribute parts + // on a single element), so this loop may not run at all. + while (nodeIndex < part.index) { + nodeIndex++; + if (node.nodeName === 'TEMPLATE') { + stack.push(node); + walker.currentNode = node.content; + } + if ((node = walker.nextNode()) === null) { + // We've exhausted the content inside a nested template element. + // Because we still have parts (the outer for-loop), we know: + // - There is a template in the stack + // - The walker will find a nextNode outside the template + walker.currentNode = stack.pop(); + node = walker.nextNode(); + } + } + // We've arrived at our part's node. + if (part.type === 'node') { + const part = this.processor.handleTextExpression(this.options); + part.insertAfterNode(node.previousSibling); + this.__parts.push(part); + } + else { + this.__parts.push(...this.processor.handleAttributeExpressions(node, part.name, part.strings, this.options)); + } + partIndex++; + } + if (isCEPolyfill) { + document.adoptNode(fragment); + customElements.upgrade(fragment); + } + return fragment; + } +} + +/** + * @license + * Copyright (c) 2017 The Polymer Project Authors. All rights reserved. + * This code may only be used under the BSD style license found at + * http://polymer.github.io/LICENSE.txt + * The complete set of authors may be found at + * http://polymer.github.io/AUTHORS.txt + * The complete set of contributors may be found at + * http://polymer.github.io/CONTRIBUTORS.txt + * Code distributed by Google as part of the polymer project is also + * subject to an additional IP rights grant found at + * http://polymer.github.io/PATENTS.txt + */ +const commentMarker = ` ${marker} `; +/** + * The return type of `html`, which holds a Template and the values from + * interpolated expressions. + */ +class TemplateResult { + constructor(strings, values, type, processor) { + this.strings = strings; + this.values = values; + this.type = type; + this.processor = processor; + } + /** + * Returns a string of HTML used to create a `