iantrich / roku-card Goto Github PK

The dist/roku-card-editor.js file is missing from the repo. I tried just updating my dist/roku-card.js instead and restarting my server but the new buttons don't appear on the ui.

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:

Last working release (if known):

Browser and Operating System:

Description of problem:

Javascript errors shown in the web inspector (if applicable):

Additional information:

Haptic doesn't work on iphone.

card size is set to 1 but the card is larger than this causing HA to clutter my cards to one side when building the columns. If we follow the rule of thumb 1~50px then the card size is about 7

How does one find the app images?

I was testing 0.97 and noticed that my card won't show up (I see an empty shadow root element) when the media_player is off. It's off because it's a Roku TV.

I tried debugging the code but wasn't initially obvious why, as HTML gets returned from the .render() function.

Checklist:

• [ x ] I updated to the latest version available
• [ x ] I cleared the cache of my browser

Release with the issue:
Home Assistant 2021.9.1
Frontend version: 20210830.0 - latest

Last working release (if known):

Browser and Operating System:
W10 Pro
Chrome Version 92.0.4515.159 (Official Build) (64-bit)

Description of problem:
in HACS, after searching for the repo, roku-card, and finding it, clicking on it starts an infinite load. I've restarted HA and HACS to clear this but nothing has worked.

In HA logs the error is generated each time I attempt it. This is repeatable, reliably.

Logger: custom_components.hacs
Source: custom_components/hacs/api/hacs_repository.py:108
Integration: HACS (documentation, issues)
First occurred: 5:41:15 PM (1 occurrences)
Last logged: 5:41:15 PM

Could not use repository with ID 164367214 ('NoneType' object has no attribute 'get_releases')

Javascript errors shown in the web inspector (if applicable):

none

Additional information:

Thank you - I'm psyched to try this out!

Display power/volume controls

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
1.0.9
Last working release (if known):
1.0.8
Browser and Operating System:

Description of problem:

Config:

apps:
  - app: YouTube TV
    image: /local/youtube_tv.jpg
  - app: Netflix
    image: /local/netflix.png
  - app: YouTube
    image: /local/youtube.png
entity:
  - media_player.roku_yg009s871403
type: 'custom:roku-card'

None of the buttons on the card are working. When a button is pressed I receive
Logger: frontend.js.latest.202004072
Source: components/system_log/init.py:209
First occurred: 10:04:23 AM (9 occurrences)
Last logged: 10:22:10 AM

http://mylocalip:8123/hacsfiles/roku-card/roku-card.js:282:253 Uncaught TypeError: this._config.entity.split is not a function
Javascript errors shown in the web inspector (if applicable):

Uncaught TypeError: this._config.entity.split is not a function
    at HTMLElement._handleAction (roku-card.js:282)
    at T.handleEvent (roku-card.js:68)
    at HTMLImageElement.T.__boundHandleEvent (roku-card.js:68)
    at Nt (roku-card.js:186)
    at HTMLImageElement.i (roku-card.js:186)

Additional information:

I have hold_action assigned to the power button. After upgrading from 1.0.1 to 1.0.4 the hold_action stopped working.

Change the power button color based on TV status. I'm no good with js but you can easily get the TV power state from here:
curl -s GET "http://rokuip:8060/query/device-info" | grep power
I'm not sure if Hass component has an attribute for it or not...

I need the image files Netflix.webp and Hulu.webp I am irritated for the missing image icons. They aren't found anywhere in code or github.

I was able to get everything installed without error, however the icons are showing for the remote card. SS attached

Any suggestions on how to fix this?

Can't seem to locate this file to add to my www.
because of this when I add the custom card to my UI i get this :
TypeError: Failed to fetch dynamically imported module: https://secret.duckdns.org:8123/local/roku-card-editor.js

Check this.hass.connection.haVersion

Checklist:

• [ X] I updated to the latest version available
• [X ] I cleared the cache of my browser

Release with the issue: 1.1.4

Last working release (if known): Unknown

Browser and Operating System: Chrome 83.0.4103.116 / Windows 10

Description of problem:
I am not 100% sure if this is a bug report or a feature request. When the show option for a button on the remote is set to false, the icon disappears but the button is still present. Both the blank space remains and mousing over the button location will still show the presence of the button and allow it to be clicked.

For example,

type: 'custom:roku-card'
entity: media_player.roku_living_room
apps:
  show: false
down:
  show: false
left:
  show: false
right:
  show: false
select:
  show: false
up:
  show: false  

Returns:

Javascript errors shown in the web inspector (if applicable):

Additional information:

I like the rewrite of this app as it affords the ability to use as a universal remote!

What are the requirements for the app icon? PNG, webp, pixel size?

I was able to get an icon to render on Firefox, but not Chrome, and the iOS Beta App. Also I couldn't get the icon to render when putting the .webp file in a sub-directory.

Ex. It worked by using /local/sample.webp

It did not work when using /local/icons/sample.webp

Feature request would be to:

Allow using the app locations/ icons to call any function, much like the other buttons.

Allow using sub-directory for icon placement (if this is possible/ not an setup error).

Great work!

Link here
#57

No .js file ? and I have no idea how to "build" all the files. ?

Checklist:

• [X ] I updated to the latest version available
• [X ] I cleared the cache of my browser

Release with the issue:
1.1.3

Last working release (if known):

Browser and Operating System:
Firefox Windows 10 Pro

Description of problem:

When i tap on the one of the apps buttons i get the error messgaes in the screen shoot
https://i.imgur.com/n444oDj.png

Javascript errors shown in the web inspector (if applicable):

Additional information:

My Remote Config

entity: remote.office_roku_office
tv: false
type: 'custom:roku-card'
apps:
  - app: Plex - Stream Free Movies & TV
       image: '/local/plex.webp'
  - app: Netflix
       image: '/local/netflix.webp'
  - app: Hulu
       image: '/local/hulu.webp'
  - app: Prime Video
       image: '/local/prime.webp'

behind the name of the current playing source should be a banner of it

Latest custom-card-helpers changes exported types.d.ts and removes ActionHandlerOptions which breaks the build of this application.

Reverting to previous build allows roku-card to build.

When I try to edit a roku card I get "'CustomElementRegistry': this name has already been used with this registry" and can't. If I remove roku-card-editor from resources I can edit with no error.

Maybe a separate issue, but when I create a popup-card, the syntax seems to be accepted but the card doesn't appear in lovelace except in edit mode. No log or browser errors.

This is also in my log, not sure of the culprit:
http://192.168.1.9:8123/lovelace/10:0:0 Uncaught

resources:
  - type: js
    url: /local/card-tools.js?v=6
  - type: js
    url: /local/popup-card.js?v=6
  - type: module
    url: /local/roku-card-editor.js?v=6
  - type: js
    url: /local/roku-card.js?v=6

card:
  entities:
    - entity: media_player.roku_kitchen
      icon: 'mdi:alpha-r-box-outline'
      name: Kitchen
  type: entities
entity: media_player.roku_kitchen
title: Kitchen Roku
type: 'custom:popup-card'

entity: media_player.roku_kitchen
name: Kitchen Roku
theme: darkcyan
type: 'custom:roku-card'

HA 0.87.1, hassos 2.8

After the re-write (version 1.0), the volume buttons are always shown. Setting tv to true shows the power button and volume buttons, however setting tv to false only hides the power button, but not the volume buttons.

I'm always frustrated when I disable snoring haptic kind of feedback for example, vibration

Config option please in the card config, to turn it off.
.

• home-assistant-frontend==20190805.0
• homeassistant==0.97.2
• latest roku-card 30b1141

In the latest version of HA, I don't think the sources are being sent anymore.

Error:

Uncaught (in promise) TypeError: Cannot read property 'indexOf' of undefined
    at HTMLElement.render (roku-card.js?v=2:55)

Context of where error happens:

              <paper-listbox
                slot="dropdown-content"
                .selected="${
                  stateObj.attributes.source_list.indexOf(        <-- source_list is undefined
                    stateObj.attributes.source
                  )
                }"
              >

Looking at the value from const stateObj = this.hass.states[this._config.entity]:

stateObj:
  attributes:
    friendly_name: "TV"
    supported_features: 19388
    __proto__: Object
  context:
    id: "a8c32d121b0146e1b1972d5028e98163"
    parent_id: null
    user_id: null
    __proto__: Object
  entity_id: "media_player.tv"
  last_changed: "2019-08-15T15:46:39.735648+00:00"
  last_updated: "2019-08-15T15:46:39.735648+00:00"
  state: "off"

Hi Ian,

I updated this via HACs it initially didn't take the breaking changes updates, when changed in my config, perhaps it was cached. However now after a few restarts it doesn't show at all except for a single line box with show warning in tan color.
I have tried uninstall/reinstall, and dropping your example config in also, gives the same result

edit.
ok manual install of 1.0.1 works, dropping in 1.0.3 in the same directory and clearing the cache, gives the same show warning

type: 'custom:roku-card'
entity: media_player.basement_roku
tv: true
apps:
  - image: /local/icons/netflix.webp
    app: Netflix
  - image: /local/icons/emby.webp
    app: Hulu
Play:
  tap_action:
    action: call-service
    service: media_player.media_play_pause
    service_data:
      entity_id: media_player.chromecast_ultra
back:
  tap_action:
    action: call-service
    service: switch.turn_on
    service_data:
      entity_id: switch.ir_exit
down:
  tap_action:
    action: call-service
    service: switch.turn_on
    service_data:
      entity_id: switch.ir_down
home:
  tap_action:
    action: call-service
    service: switch.turn_on
    service_data:
      entity_id: switch.ir_menu
info:
  tap_action:
    action: call-service
    service: switch.turn_on
    service_data:
      entity_id: switch.ir_source
left:
  tap_action:
    action: call-service
    service: switch.turn_on
    service_data:
      entity_id: switch.ir_left
power:
  tap_action:
    action: call-service
    service: switch.turn_on
    service_data:
      entity_id: switch.ir_power
right:
  tap_action:
    action: call-service
    service: switch.turn_on
    service_data:
      entity_id: switch.ir_right
select:
  tap_action:
    action: call-service
    service: switch.turn_on
    service_data:
      entity_id: switch.ir_ok
up:
  tap_action:
    action: call-service
    service: switch.turn_on
    service_data:
      entity_id: switch.ir_up
volume_down:
  hold_action:
    action: call-service
    repeat: 500
    service: switch.turn_on
    service_data:
      entity_id: switch.ir_vol_dn
  show: true
  tap_action:
    action: call-service
    service: switch.turn_on
    service_data:
      entity_id: switch.ir_vol_up
volume_mute:
  hold_action:
    action: call-service
    repeat: 500
    service: switch.turn_on
    service_data:
      entity_id: switch.ir_vol_mute
  show: true
  tap_action:
    action: call-service
    service: switch.turn_on
    service_data:
      entity_id: switch.ir_vol_up
volume_up:
  hold_action:
    action: call-service
    repeat: 500
    service: switch.turn_on
    service_data:
      entity_id: switch.ir_vol_up
  show: true
  tap_action:
    action: call-service
    service: switch.turn_on
    service_data:
      entity_id: switch.ir_vol_up

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:

Last working release (if known):

Browser and Operating System:

Description of problem:

Javascript errors shown in the web inspector (if applicable):

Additional information:

• [1.1.3 ] I updated to the latest version available
• [ * ] I cleared the cache of my browser

Release with the issue:
1.1.3
Docker on a nuc

I'm on firefox Macos

Description of problem:
When I click any buttons on the card I get the following message:
Failed to call service remote/send_command. Service not found.

Javascript errors shown in the web inspector (if applicable):

Loading module from “https://ha.reverseproxy/community_plugin/roku-card/roku-card.js” was blocked because of a disallowed MIME type (“text/plain”).

uncaught exception: https://ha.reverseproxy.com/community_plugin/roku-card/roku-card.js

uncaught exception: Object

Card yaml

apps:
  - app: Netflix
    image: /local/netflix-icon.png
  - app: Plex - Stream Free Movies & TV
    image: /local/Plex-icon.png
  - app: Prime Video
    image: /local/Amazon-icon.png
  - app: Roku Media Player
    image: /local/Media-windows-media-player-icon.png
entity: media_player.bedroom_roku
name: Bedroom roku
remote: remote.bedroom
style: |
  ha-card {
    --ha-card-background: black;
  }
  .card-header {
    color: white;
  }
  paper-icon-button {
    color: grey;
  }
  .card-content {
    padding: 0
  }
theme: darkpurple
tv: false
type: 'custom:roku-card'

Is your feature request related to a problem? Please describe.
I have more than 4 frequently used apps.

Describe the solution you'd like
I would like to be able to add a second Roku-Remote card, but since I don't need the "remote" functions I'd like the card to just be "apps". So using the current card layout I'd be able to put 18 more apps on a second card.

Describe alternatives you've considered
I've tried just hiding the existing buttons to get at least 4 more apps but I end up with a card with just 4 apps and a lot of empty space since the buttons are merely hidden not removed. Seems a hassle to implement another "button only" card via other means when this card works beautifully for this I just need more shortcuts!

Additional context
Add any other context or screenshots about the feature request here.

Is your feature request related to a problem? Please describe.
Would like to have the option to add a icon to a button

Describe the solution you'd like
Add the same possibility as app button to a ordinary button

Describe alternatives you've considered
N/A

Additional context
N/A

Feature Request: Run service for every button like skip, left arrow, right arrow, down arrow, up arrow, enter, back, home, info, forward, backwards, pause/play
Thanks

power:
  service: broadlink.send
  service_data:
    host: 192.168.178.73
    packet: JgBGAJKWEjcSOBE5ERMTEhITEhMSExI4ETgSOBEUERQRFBEUERQRORE4EjgSNxMSEhMSExITEhMRFBITERQSOBE4EjgSNxIADQUAAA==

So i mean it. That is how I use it. Please add it to skip, left arrow, right arrow, down arrow, up arrow, enter, back, home, info, forward, backwards, pause and play.
Thanks

Currently as far as I can tell the only way to add an image to the apps is to put an image in the proper location and pointing to it.

It would be really helpful to be able to use the MDI icons as well for example: https://iconify.design/icon-sets/mdi/netflix.html mdi-netflix
Thanks!

Hello I know this is a little late in Hacktoberfest but it just occurred to me to ask why not shift this as a native card within the Roku Integration similar to how the new Xbox integration has a controller like picture card. Maybe there's alot of hurtles to that but I feel like the more stuff that is natively supported the more friendly and used it will get as some users that may come to Home Assistant may never touch addons besides the native integrations (particularly the ones that are auto-discovered). Then this way the remote can use/have the ability to select if user chooses the custom app buttons (or one of them) as the Roku Media Browser function.

Hi. With the latest update (1.1.2), I seem to have lost my navigation buttons. Select, up, down, left and right for example. When you hover over the button locations, the links appear to be there - but the visual elements are missing. I'm running v0.109.6. I tried returning to a default HA theme in case that was it; but no dice. Thanks, m

re-rendering is not properly triggering after getting the top app details

The volume up button is not working on this card.

The 'default' media player vol+ is working.
entity: media_player.bedroom_tv
type: media-control

Bonus Q, since I don't want to get crazy:
Do I ned to download the app images? for example image: /local/netflix-icon.png is blank to me.

Is your feature request related to a problem? Please describe.
It's hard to find the buttons while looking at the TV. Oftentimes I hit an app shortcut by mistake when I'm trying to type using the arrows, which is annoying because I have to start from the beginning

Describe the solution you'd like
Remove the arrows and "Select" button, and probably move the app shortcuts elsewhere. The 3x3 area is left empty for the user to swipe up/down/left/right, or tap once for "Select". I've seen apps like this that when you swipe and hold (don't lift the finger after swipping) then it's like holding the button.

Describe alternatives you've considered
I've tried to implement it myself, and I've tried to be more careful :)

Additional context
This card is amazing, keep up the good job! Let me know if I can help implement it.

• [1.1.3 ] I updated to the latest version available
• [ * ] I cleared the cache of my browser

Release with the issue:
1.1.3
Docker on a nuc

I'm on firefox Macos

Description of problem:
The card buttons are the same color as the background. I tried both with custom card styles as well as the default (I removed the style stanza in the configuration below.

Javascript errors shown in the web inspector (if applicable):

No errors

Card yaml

apps:
  - app: Netflix
    image: /local/netflix-icon.png
  - app: Plex - Stream Free Movies & TV
    image: /local/Plex-icon.png
  - app: Prime Video
    image: /local/Amazon-icon.png
  - app: Roku Media Player
    image: /local/Media-windows-media-player-icon.png
entity: media_player.bedroom_roku
name: Bedroom roku
remote: remote.bedroom
style: |
  ha-card {
    --ha-card-background: black;
  }
  .card-header {
    color: white;
  }
  paper-icon-button {
    color: grey;
  }
  .card-content {
    padding: 0
  }
theme: darkpurple
tv: false
type: 'custom:roku-card'

Description of problem:
Error when Selecting Source.

Config in Lovelace

entity: media_player.livingroom
name: Living Room TV
theme: darkpurple
tv: true
type: 'custom:roku-card'
apps:
  - app: Live TV
    image: /local/antenna-icon.png
    tap_action:
      action: call-service
      service: media_player.select_source
      service_data:
        source: "Antenna\_TV"
  - app: Netflix
    image: /local/netflix.png
    tap_action:
      action: call-service
      service: media_player.select_source
      service_data:
        source: Netflix
  - app: Hulu
    image: /local/hulu.png
    tap_action:
      action: call-service
      service: media_player.select_source
      service_data:
        source: Hulu
  - app: PBS Kids
    image: /local/pbskids.png
    tap_action:
      action: call-service
      service: media_player.select_source
      service_data:
        source: PBS KIDS

Javascript errors shown in the web inspector (if applicable):

connection-mixin.ts:82 Uncaught (in promise) {code: "unknown_error", message: "must contain at least one of entity_id, area_id."}

Additional information:

I'd like to set up the mute button in the remote to mute a receiver that's playing the audio from the TV instead of the roku mute button.

I've tried the following options:

First, I thought maybe I could use the toggle action to flip the state of media.player.receiver, but there's
not a way to specify a state attribute (like is_volume_muted)

tap_action:
    action: toggle

Then, I thought I could use call-service, but that only works to mute and now there's no way to unmute.

tap_action:
    action: call-service
    service: media_player.volume_mute
    service_data:
      entity_id: media_player.living_room_receiver
      is_volume_muted: True

I thought I could use Jinja to do this, but it won't let me save this. If I pass it as a string, I can save, but it doesn't render
the string, so the value I'm passing isn't a boolean.

tap_action:
    action: call-service
    service: media_player.volume_mute
    service_data:
      entity_id: media_player.living_room_receiver
      is_volume_muted: {{ not state_attr('media_player.receiver', 'is_volume_muted') }}

Any chance you could add the ability to choose between roku or androidtv as the mediaplayer/ remote?

An example would be to put in the config "androidtv".

This would then change the remote "left" "right" etc... commands to the documented androidtv commands.

Updated to 1.0.7 and the card no longer responds to any touch events. Imported as a module, using the lates iOS app and 0.101.3

Every time the page reloads, it sends the input source command which causes apps to restart if you're in the middle of watching something. Is there a way to just disable that input source drop-down / function completely?

the remote is pretty plain right now, would like to make it look more like the Roku remote itself and allow custom backgrounds, etc.

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:

Last working release (if known):

Browser and Operating System:

Description of problem:

When configuring an app button with an icon and other config items, the config items dont work. This is because on line 164 you are missing .config=${this._config.apps[index]}
Javascript errors shown in the web inspector (if applicable):

Additional information:

I'm on HA version 0.108.0 -- updated earlier today. iOS version 13.4.1 -- updated earlier today.

When I'm on a PC or MAC I see my source icons. But from an iPad or iPhone in Safari or Chrome neither display the source icons.

I am not able to use the power or volume buttons because of the way my Roku is fed to multiple televisions. Is there a way that the power button and volume buttons can be removed? It might also be nice to replace the Volume buttons with Channel buttons. Thanks.

Not sure what's going on here, but I can't get this card to load. I have other custom cards loaded without issue.

• home-assistant-frontend==20190626.0
• homeassistant==0.95.4
• custom-cards/[email protected]
• Firefox 68 and latest Chrome

The manual card I added:

      - type: custom:roku-card
        entity: media_player.tv
        name: TV
        tv: true
        power:
          service: switch.turn_on
          service_data:
            entity_id: switch.tv

In the ui-lovelace.yaml, along with other custom module script resources:

  - type: module
    url: /local/roku-card.js?v=0

I have verified that https://<my domain>/local/roku-card.js is accessible and is returning the JS. In the FF console, I can also see that the element has been loaded:

> customElements.get("roku-card")
function RokuCard()

No other errors are shown. Same problem in Chrome and Firefox on different devices, with cache being cleared.

When editing the card through the UI, I do get an error:

get-card-element-tag.ts:4
Uncaught (in promise) TypeError: Cannot read property 'startsWith' of undefined
    at h (get-card-element-tag.ts:4)
    at HTMLElement.value (hui-edit-card.ts:336)
    at HTMLElement.value (hui-edit-card.ts:123)
    at HTMLElement.performUpdate (updating-element.ts:716)
    at HTMLElement._enqueueUpdate (updating-element.ts:649)

Hi,
I found how to add haptic feedback for the non-roku buttons (power, volume control...), but I can't find how to add it for the Roku buttons.
I tried the below which didn't produce haptic feedback (but did work as a home button), and couldn't find how to do it for the Apps.

            home:
              tap_action:
              haptic: medium
              action: call-service
              service: remote.send_command
              service_data:
                entity_id: remote.roku_bedroom
                command: home

Am I missing something or is there just no support for this yet?

Thanks!

I’ve used HACS to get this integration added but there is still no card.
Are there instructions needed after adding the integration via HACS that I’m not seeing?
Thanks

Add https://github.com/custom-cards/custom-card-helpers