Twitch Followed Live Streams Card for HomeAssistant

⚠️ Dependencies and missing data

Please be aware, that this Card is dependant on the Twitch Integration of Home Assistant. On my side it still looks like that this Integration is buggy and does not correctly update or create it's Entities. But because this Card uses the data from the Integration it can not display data that doesn't exist. For example you can see this GitHub Issue (It's closed but still not perfect on my side). Issues with the Integration can be found here even tho currently aren't any open.

Description

This card for HomeAssistant allows you to see all your favorite Twitch streamers who are currently live. You can heavily customize this card and show/hide information or set streams to ✭VIP or hidden with its more that 30 properties.

Properties

Global

Name	Type	Default	Description
global_credentials_access_token	string	null	The AccessToken of your Twitch app. See below on how to create one. Will break the card and log an error if empty or invalid.
global_credentials_client_id	string	null	The ClientId of your Twitch app. See below on how to create one. Will break the card and log an error if empty or invalid.
global_credentials_user_name	string	null	Your Twitch username. Will break the card and log an error if empty or invalid.
global_debug	bool	false	Can be set to true if you have problems to see more details in the console log.
global_show_header	bool	true	Shows the card header with the count if set to true.
global_update_interval_s	int	60	The time in seconds used for the interval to update the streams displayed.

Streams

Name	Type	Default	Description
streams_disable_auto_refresh	bool	false	Disables auto refreshing the streams if set to true. Can be useful if you want to refresh it manually.
streams_disable_click_to_view	bool	false	Disables the behavior to open the stream in a new tab if set to true.
streams_font_size_game	string	0.8em	Sets the font size of the game name.
streams_font_size_title	string	1em	Sets the font size of the stream title.
streams_font_size_user_name	string	1em	Sets the font size of the user name of the streamer.
streams_font_size_viewers	string	0.8em	Sets the font size of the viewer count.
streams_hide	list	EMPTY	Can hide the given streams from the list.
streams_image_size_height	string	4em	Sets the size of the image.
streams_image_size_width	string	3em	Sets the size of the image.
streams_image_type	string	user	Values can be user and stream. The first one will be the profile picture of the user/streamer and the second one a screenshot of the stream. See streams_show_image to hide it
streams_limit_count	int	100	Can be used to limit the number of streams that will be displayed. Values can be between 0 and 100.
streams_padding_bottom_size	string	0em	Sets the paddings of the steams.
streams_padding_left_size	string	1em	Sets the paddings of the steams.
streams_padding_right_size	string	1em	Sets the paddings of the steams.
streams_padding_top_size	string	0em	Sets the paddings of the steams.
streams_reduce_requests	bool	true	Reduces the requests to the Twitch APIs and will reduce redrawing(flickering) on the Dashboard. May cause a little lag to the live data. Set it to false if data is to async to live.
streams_show_game	bool	true	Shows or hides the name of the game.
streams_show_image	bool	true	Shows or hides the image of the stream or the user. See streams_image_type.
streams_show_title	bool	true	Shows or hides the title of the stream. The title could be really long. See streams_title_height to address that problem.
streams_show_user_name	bool	true	Shows or hides the username of the streamer. May always be shown.
streams_show_viewers	bool	true	Shows or hides the count of the viewers.
streams_show_vips_ontop	bool	true	Shows the VIPs ontop.
streams_spacing_horivontal	string	1em	The spacing between the images and the details of the stream.
streams_spacing_vertical	string	1em	The spacing between the streams.
streams_title_height	string	1.2em	The height that is given to the stream title to cap its possible excessive length.
streams_viewers_visibility_percentage	string	100%	Can dim the viewer count. 100% maximum visible 0% not visible. To disable the viewers see streams_show_viewers
streams_vip	list	EMPTY	Will show a ✭ in front of the user name of the streamer to mark it as an VIP/favorite.

Twitch add dev app

This information is needed for the global_credentials_access_token and global_credentials_client_id property.

1. Login to your twitch account here: https://twitch.tv
2. Navigate to the developers console here: https://dev.twitch.tv/console/apps
3. Click Add on the top right.
4. Provide the following values: 4.1. Name: HomeAssistant Live Streamers. Or something you like. 4.2. OAuth Redirect URLs: https://my.home-assistant.io/redirect/devices/ 4.3. Category: Website Integration
5. Click Create
6. Copy the Client-ID for the property global_credentials_client_id.
7. Copy or create the Client-Secret for the property global_credentials_access_token.
8. Now you're set to use the integration.

Samples

Here are some sample configs to show you some possible configurations and help you find your config. The samples only shows the properties which are required or different from the default values. All the properties can be found here.

My favorite

type: custom:twitch-followed-live-streams-card
global_credentials_user_name: StefmDE
global_credentials_access_token: sFGFNMmD6ELCMhtFMzZcvb4nNyWx
global_credentials_client_id: k9eyo9vxpjghwQ6XsYNxJBPBdGtH
streams_limit_count: 8
streams_image_show: false
streams_show_viewers: false
streams_show_title: false
streams_vip:
  - MissMikkaa

Basic

type: custom:twitch-followed-live-streams-card
global_credentials_user_name: StefmDE
global_credentials_access_token: sFGFNMmD6ELCMhtFMzZcvb4nNyWx
global_credentials_client_id: k9eyo9vxpjghwQ6XsYNxJBPBdGtH

Stream Image

type: custom:twitch-followed-live-streams-card
global_credentials_user_name: StefmDE
global_credentials_access_token: sFGFNMmD6ELCMhtFMzZcvb4nNyWx
global_credentials_client_id: k9eyo9vxpjghwQ6XsYNxJBPBdGtH
streams_image_type: stream

VIPs

type: custom:twitch-followed-live-streams-card
global_credentials_user_name: StefmDE
global_credentials_access_token: sFGFNMmD6ELCMhtFMzZcvb4nNyWx
global_credentials_client_id: k9eyo9vxpjghwQ6XsYNxJBPBdGtH
streams_vip:
  - MissMikkaa

Headder only

type: custom:twitch-followed-live-streams-card
global_credentials_user_name: StefmDE
global_credentials_access_token: sFGFNMmD6ELCMhtFMzZcvb4nNyWx
global_credentials_client_id: k9eyo9vxpjghwQ6XsYNxJBPBdGtH
streams_limit_count: 0
streams_padding_bottom_size: 0.5em

Viewers visibility

type: custom:twitch-followed-live-streams-card
global_credentials_user_name: StefmDE
global_credentials_access_token: sFGFNMmD6ELCMhtFMzZcvb4nNyWx
global_credentials_client_id: k9eyo9vxpjghwQ6XsYNxJBPBdGtH
streams_viewers_visibility_percentage: 50%

Debug

1. You can use the property global_debug and set it to true to see more logs in the console.
2. If the Integration isn't working check the properties global_credentials_access_token and global_credentials_client_id to be correctly set matching the App you created.