Lovelace: Upcoming Media Card


A card to display upcoming/recently added episodes and movies for services like Sonarr, Radarr, Plex and more.

This card will only work if you’ve installed one of the custom-integrations below to feed it.

Current custom-components for this card:

Supporting Development

Find up to date usage info, installation instructions, and info on how to develop your own component for this card on github.

If you’re having issues, check out the troubleshooting guide and @thomasloven’s lovelace guide before posting an issue.


Awesome work! Will be using it with radarr. Really good that you open for other developers to use it with their components as well!


This looks awesome, might make me switch to Sonarr just to be able to use it. Thank you for putting in the time to do this.

1 Like

Great work!. Tested it with both radarr/sonarr and here are some things I noticed:

  • Banner mode does not seams to work yet with radarr.
  • Seeing “Invalid Date” on a few movies. The dates looks fine in Radarr.

Banner doesn’t yet exist with radarr as there aren’t really banners, but I’m working on a view that will use fanart. Could you post a screen shot of the invalid dates and what the dates should be?

1 Like

As for the dates, what is listed in the sensor attributes: sensor.radarr_upcoming_media

As for the craziness, I made it so that if you had something like a radarr card with banner view and a sonarr card with poster view the styles wouldn’t conflict, I never really thought that someone would want to have 2 different cards of the same type though. Rest assured it will be fixed soon.

1 Like

I not going to have it, just tested :smiley:


Too late, I’m already fixing it. So now you HAVE to use it that way!

As far as the dates, that is odd. They seem to be the exact same format. Gonna have to do some digging on this one.


Tried the sonarr card yesterday and worked great. Removed and added the new components today. However, lovelace complains bout this mapping values are not allowed here in “/config/ui-lovelace.yaml”, line 102, column 17. Which would be at the end of custom.

  • type: custom: upcoming-media-card

What gives?

can you post the whole portion of the code and use code blocks (instructions at the very top of the forum)

Lovelace-ui error message

mapping values are not allowed here in “/config/ui-lovelace.yaml”, line 100, column 19

19 is after custom.

  - icon: mdi:vlc
    - type: custom: upcoming-media-card
      service: sonarr
      image_style: banner
      clock: 24
      max: 10
1 Like

get rid of the space between “custom:” & “upcoming”:

-type: custom:upcoming-media-card

sorry didn’t see it in your first post. totally my fault, btw. its in my instructions
fixing now

Seems to have fixed it. Will try around a bit with it tomorrow. Thanks!

Is it possible to specify the font size to display within the card at all ? - card looks great, but the fonts are huge compared to the stock lovelace cards :stuck_out_tongue:

Would be great if there is an option to turn off the shadow effect on the text too, just so that it looks consistent with everything else.
Top job though - this will be super useful!

1 Like

You’re speaking my language, buddy. I want everything to be customizable.
The text dynamically sizes with the viewer to look good on phone and monitor, but I can add a variable size to them still. Just means that font sizes won’t be accurate and you’ll have to play a bit if you’re trying to match another fonts size.

Shadows should be easy. Will keep you updated.

1 Like

Love this!! Awesome!!

Is it possible to remove the shadow? I’d like to disable it. LOL!! Just saw previous post.

Also, when setting the locale to en-AU, nothing changes. All times are still in the original airtimes for their original airing location. For example, the show Salvation airs Monday @ 9PM, but for me it’s Tuesday @ 11am.

I’m not sure if this is the custome lovelace card or the upcoming sonarr card as it is the one grabbing the data and has the US dates and times.

How can we fix this?

Actually tweaking time zones as we speak

Nice. Looking forward to the next update. :smiley:

Looking great. I just released a Trakt component, but doesn’t look like it will fit the schema you have your card, yet (mostly because after getting everything wired up, I realized they had removed images from their API :frowning: ) I’m thinking I’ll have to hook into or something. I’ll probably update it to follow your component’s schemas, soon.


Ran into a similar problem with this. Sonarr fortunately provides a url for thetvdb images who provide them without requiring an api key, so that might be your best bet. Unfortunately, nothing like that exists for movies, they all need an api key, so I needed to make the component download the images from the radarr instance into HA directories.