iantrich / roku-card Goto Github PK
View Code? Open in Web Editor NEW📺 Roku Remote Card
License: MIT License
📺 Roku Remote Card
License: MIT License
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:
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:
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
Thank you - I'm psyched to try this out!
Display power/volume controls
Checklist:
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.
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:
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
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:
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.
.
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:
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:
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.
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:
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
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.