Lovelace: Upcoming Media Card


Yeah it’s a bit weird… It is showing in Radarr as tomorrow. Beats me. Thanks!


Wow, banner view for tv and movies are just beautiful now! So offtopic but ontopic for lovelace. The theme you have @mayker how do one theme like that for lovelace?

Best regards and thanks, this card is great.


@mayker great work, now it works for me too.


Here you go:

  # Main Theme #
  background-color: "#303030"
  primary-color: '#1aba92' # Primary (most of the UI)
  primary-background-color: "#303030" # Primary background colour (dialogs, etc.)
  secondary-background-color: "#303030" # Secondary background colour (main UI background)
  paper-card-background-color: "#424242" # Card background colour
  paper-item-icon-color: "#1ABA92" # Icon colour
  primary-text-color: "#FFFFFF" # Primary text colour
  secondary-text-color: "rgba(255, 255, 255, 0.7)" # Secondary text colour
  disabled-text-color: "rgba(255, 255, 255, 0.5)" # Disabled text colour
  divider-color: "rgba(255, 255, 255, 0.12)" # Divider colour
  paper-card-header-color: "#FFFFFF" # Card header text colour

  # Nav Menu #
  paper-listbox-background-color: "#424242" # Listbox background colour
  paper-listbox-color: "#FFFFFF" # Listbox text colour
  paper-grey-200: "#616161" # Listbox selected item background colour

  # Switches #
  paper-toggle-button-checked-ink-color: "#1ABA92"
  paper-toggle-button-checked-button-color: "#1ABA92"
  paper-toggle-button-checked-bar-color: "#1ABA92"

  # Sliders #
  paper-slider-knob-color: "#1ABA92"
  paper-slider-knob-start-color: "#1ABA92"
  paper-slider-pin-color: "#1ABA92"
  paper-slider-active-color: "#1ABA92"
  paper-slider-secondary-color: "#33F2D8"
  # Sidebar #
  sidebar-icon-color: "#ffffff"


Thank you!

Not in scope for this thread but since related somone might know. Is there a component for showing recently added to plex? Would go nicely with these cards.


Was just looking at Plex’s API yesterday. Might be the next component I work on as I use Plex as well


Which option enables the “Downloaded” info?

As of now downloaded series just disappear from list.

Untitled (example from your pic)

- type: custom:upcoming-media-card
    title: Sonarr
    service: sonarr
    image_style: fanart


It’s not an option, if sonarr reports it as downloaded it automatically appears. Series disappear from list when airtime has passed as sonarr no longer reports it as “upcoming” .


Allright! Thank you for clarifying


The fan art view got a wierd mask.
- type: custom:upcoming-media-card
service: radarr
title: Upcoming Movies
image_style: fanart
clock: 24
date: ‘ddmm’
max: 3
title_color: ‘white’
time_color: ‘darkgray’
downloaded_color: ‘darkgray’
text_shadows: ‘off’
box_shadows: ‘off’



Odd, keep an eye out as I’m releasing a new version of the card later today or tomorrow. How items are rendered has completely changed and I imagine it will fix the issue.



What started out as a simple addition of text sizing became an almost complete rewrite of the card. A handful of the changes aren’t visible (spent a good bit of time making it look the same), but things are better set up for future expansion of the card and in general. Be sure to read the updated read me. Sorry for the delay.

  • Each line’s content can be changed (more content soon).
  • Each line’s color and size can be customized.
  • Space saving config options with multi-line configuration.
  • Truncation of text happens at whole words only and without punctuation or space before ellipsis…
  • Card is now made with responsive design in mind to scale to any size or device.
  • Side effect of how colors are handled allows for even more customization (more on this at the end of the read me on github).
  • Optimized code quite a bit. Even with new additions the code is down 200+ lines from the previous version.
  • Removed banner view, fanart has replaced it and works for both TV and Movies.

If you absolutely need banner view, use the old version saved on github under releases.

Check out the updated read me as configuration has changed significantly.

My plans moving forward are:

  • More content options: genre, run time, tagline, etc.
  • Plex recently downloaded component.
  • Move max item config to components to cut down on processing of items that aren’t shown.
  • Change information exchange between card and components. Possibly one attribute containing JSON instead of multiple attributes. Should make card more accessible to other developers.
  • Text only view.


Just updated. Beautiful! Great work, looking forward to coming features.


Nice work again.

FYI You didn’t document the




Ah! Thank you sir, updating now!


How do I add season/episode number ie info4 to the ui?


Not available quite yet. Soon.


Great Work! Very Useful!

I have a problem with radarr (sonarr working just fine), and I’m getting a blank card (tiny empty line).
In the sensor component I see the attributes of the upcoming movie:


There seems to be an issue causing the card to not display items when only one or two items are available. This will be fixed in the next version of the card, coming soon.


I have installed this card, however I get an error now when i try to load it. On my panel it shows ‘service system_log/write called’ and doesn’t show any of my cards. The log is throwing the following error:
https://XX.XX.XX.XX:8123/local/custom-lovelace/upcoming-media-card/upcoming-media-card.js?v=0.2.1:16:38 TypeError: undefined is not an object (evaluating ‘hass.states[entity].state’)”

I have Sonorr loaded as a sensor called sensor.sonarr_upcoming which seems to load ok although is empty. and have added the following to my code:

javascript_version: latest


  • url: /local/custom-lovelace/upcoming-media-card/upcoming-media-card.js?v=0.2.1
    type: js
        - type: custom:upcoming-media-card
          service: sonarr
          image_style: fanart