Depreciated! Lovelace: Sonarr Upcoming

:warning: Deprecation warning :warning:

This card/component has been replaced with Upcoming-Media-Card


I’m currently making a Trakt component. Would be cool if the upcoming card could be generic enough to allow for both components to use it. I’ll take a look at see tomorrow, hopefully. I’ve made a horizontal card for it that is pretty slick, IMO.

I’d be up for collaborating.


I think that’d totally be doable. Consider me interested.

Well done - looks great. Maybe you can make movies too? raderr

Already working on it. Coming soon!

1 Like

maybe include sickrage support as it’s also widely used

Absolutely. So, I think I should make the card a bit more generic as just an “Upcoming” card and then make components for each of the different services. Seems the best way to go about it.

It seems as if I spoke too soon, looking into Sickrage it seems that not only is there no existing Home Assistant component, I am also unable to find much info on their API or anyway to get info on upcoming episodes easily (at least not that I can find). This might also be the reason there is no HA component yet and is, unfortunately, above my skill level atm.

Looking at the bare minimum and unsure where to add this in my existing ui-lovelace.yaml

Could someone show me this in an existing ui-lovelace.yaml file so I can understand where specifically to fit it?

There’s a component for sickrage out there:

Looks like that’s only for sending commands at the moment.

Sonarr, Radar, Sickbeard, Trakt, and others expose upcoming calendars in their api that return a list of episodes/movies to be released between 2 variable dates along with relevant info for those releases, like Sonarr’s Calendar API.

While I’m sure someone could create a component that does this with services that don’t provide easy access to that info, that’s above my pay grade. Just not that experienced in python yet.

Not sure what exactly you’re asking, the examples show how to add this to an existing ui-lovelace.yaml. The important part being:

- type: custom:sonarr-upcoming-card

Could you post the code surrounding where you want the card to go?

This works great. Just followed the instructions! Please add radarr!

Here’s a subset of mine that’s working…

At the very top:

title: Home
- url: /local/custom-lovelace/sonarr-upcoming-card/sonarr-upcoming-card.js
  type: js
  - title: Home Assistant
    icon: mdi:home-assistant
      - type: vertical-stack
          - type: entities
            title: System Information

Then down lower on the tab I want the sonarr card:

  - title: Media
    icon: mdi:vlc
      - type: custom:sonarr-upcoming-card
        title: Sonarr Upcoming
        image_style: poster
        clock: 12
        max: 10
        show_color: '#ffffff'
        episode_color: '#000000'
        time_color: '#f41103'
        downloaded_color: '#000000'
        ribbon_color: '#03a9f4'
        border_color: 'grey'

Would love to see some kinda sickrage integration, but again, same as you @mayker way beyond my skill level.

Thanks, I think I included it correctly in the ui-lovelace.yaml but I get teh following error: Uncaught TypeError: Cannot read property ‘state’ of undefined

All files from repo are placed correctly as far as I know…

Did you install the component in custom_components and put it in your config?

Something like this in configuration.yaml:

- platform: sonarr_upcoming_card
  api_key: YOUR_API_KEY
  port: 8989
  days: 2
  ssl: true

I did… and setup my own API and ip/port
ssl is false in my case

So “Cannot read property ‘state’ of undefined” usually means it cannot find the sensor.

Check the dev-state page under developer tools on your sidebar. Has and icon like this < >

Do you see the sonarr_upcoming_card in there?

Are there any other errors? Did you restart after installing the component?

Actually, no… I’ll try to see why, pretty sure the “” is in the right place and I added the lines in sensor yaml file…