Upcoming-Media-Card

Poster View	Fan Art View

Requires a custom-component:
This card will only work if you've installed one of the custom-component's below to feed it.

Current custom-components for this card:

Issues

Read through these two resources before posting issues to GitHub or the forums.

• troubleshooting guide
• @thomasloven's lovelace guide.

Supporting Development

• ☕  Buy me a coffee
• 🥇  Tip some Crypto
• ❤️  Sponsor me on GitHub
  
  

Features:

• Poster and Fan Art views
• All text can have its contents, color, and size customized.
• Most design elements can be hidden or have their color changed.
• 12 or 24 hour display for times and month/day or day/month for dates.
• Indicator flag with customizable mdi icon and color.
• Can limit the number of episodes/movies shown.
• Uses responsive design to scale elegantly

Installation:

• Install the custom component by following it's instructions.
• Install this card by copying upcoming-media-card.js to your www/custom-lovelace/ folder. If you're copy/pasting the code always copy from raw files on github (button on top right when viewing code).
• Include it in its own folder like so: www/custom-lovelace/upcoming-media-card/upcoming-media-card.js

This goes into ui-lovelace.yaml under "resources:"

resources:
- url: /local/custom-lovelace/upcoming-media-card/upcoming-media-card.js?v=0.1.1
  type: js

This goes into one of your views under "cards:" in the same file

  - type: custom:upcoming-media-card
    entity: sensor.sonarr_upcoming_media

If you're not updating using tracker-card and/or custom-updater be sure that you are adding to a version number at the end of your lovelace resources when you update your cards, like so:

resources:
- url: /local/custom-lovelace/upcoming-media-card/upcoming-media-card.js?v=0.1.2
  type: js

You may need to have javascript_version: latest in your configuration.yaml under frontend:.

Options:

This card has many customization options, but none are required to use the card. The card is fully functional with minimal configuration, like the installation example above.

Main Config:

Style Options:

Text color options can be any valid CSS value. This includes color names like red, rgb values like rgba(255, 0, 0, 0.6), variable names for HA like var(--primary-color), hex values like '#ff6347', you can even use transparent. If using hex values, encase in quotes. This is the only time quotes are required in the cards configuration.

There are 2 space saving configuration options: line_color and line_size. These two options affect all lines of text below the title. These options can be overwritten as well. For example: if you set line_color: white and line2_color: blue then lines 1 & 3 will be white while line 2 will be blue.

Text Content:

You can build your own strings for each line of text, including title by using keywords. Each keyword is replaced with its relevant content, listed below. Encase this option in quotes.

You can add in custom text to your string, only keywords are replaced. As an example you could add this to your config line1_text: 'Runtime: $runtime' to have line one display as "Runtime: 01:30". You can use as many keywords in your string as you like, you're only limited by what will fit. In some cases a keyword can return nothing, like when using radarr and a movie is in theaters. Occasionally not all info has been released yet, causing something like runtime to be empty. This isn't a problem when it's the only keyword in a line as the card just hides the line, but it can be an issue when you're using multiple keywords in a line. In this case you can use a hyphen to seperate the them. line1_text: 'Rating: $rating - Runtime: $runtime - $number' will display as "Rating: ★ 7.1 - Runtime: 01:23 - S01E09" when all are available or "Rating: ★ 7.1 - S01E09" if runtime is not.

Developers

If you'd like to make your own component to feed the upcoming media card:

1. Component needs an attribute named "data" that contains a JSON string or OBJ.
2. The first item in your JSON must contain these keys to set your defaults: title_default, line1_default, line2_default, line3_default, line4_default, and icon. The default text contents are set exactly like the card's text content config and use the same keywords. The default icon takes an mdi icon mdi:arrow-down.
3. Each item must contain an 'airdate', if none exists the item is skipped. This and a poster image are the only required items.
4. If an included item is null it needs to be an empty string in the JSON ''.
5. Items should be in descending order according to 'airdate'.
6. Be aware that the card strips parentheses and anything contained in them. This is to remove things like (US). Since we can see the art for the show/movie there is no need for that info.

JSON items:

Example from Sonarr component with 3 episodes. Notice the defaults set in first item

[{"title_default": "$title", "line1_default": "$episode", "line2_default": "$release", "line3_default": "$rating - $runtime", "line4_default": "$number - $studio", "icon": "mdi:arrow-down-bold-circle"}, {"title": "Modern Family", "episode": "Good Grief", "flag": false, "airdate": "2018-10-25T01:00:00Z", "number": "S10E05", "runtime": 25, "studio": "ABC (US)", "rating": "\u2605 8.8", "release": "$day, $date $time", "poster": "https://www.thetvdb.com/banners/_cache/posters/5bb9375cb2c5e.jpg", "fanart": "https://www.thetvdb.com/banners/_cache/fanart/original/5b300bbae5cd2.jpg", "genres": "Comedy"}, {"title": "American Horror Story", "episode": "Traitor", "flag": false, "airdate": "2018-10-25T02:00:00Z", "number": "S08E07", "runtime": 45, "studio": "FX (US)", "rating": "\u2605 8.4", "release": "$day, $date $time", "poster": "https://www.thetvdb.com/banners/_cache/posters/5b9983440d320.jpg", "fanart": "https://www.thetvdb.com/banners/_cache/fanart/original/5b9f15a15a9c1.jpg", "genres": "Drama, Horror, Thriller"}, {"title": "It's Always Sunny in Philadelphia", "episode": "Charlie's Home Alone", "flag": false, "airdate": "2018-10-25T02:00:00Z", "number": "S13E08", "runtime": 25, "studio": "FXX", "rating": "\u2605 9.1", "release": "$day, $date $time", "poster": "https://www.thetvdb.com/banners/_cache/posters/5ba7c2b687091.jpg", "fanart": "https://www.thetvdb.com/banners/_cache/fanart/original/5b48ef958034c.jpg", "genres": "Comedy"}]

Please inform me if you create one and I'll add it to the list.
Include what your components defaults are in the components readme.
If you need special styling or edits to the card to accomidate your component, just ask or submit a PR.

Thanks!