Lovelace: Upcoming Media Card

Makes me even happier I switched to Radarr from Couchpotato this week.

Works great but I set the Locale to en-AU and it’s still showing everything in US time - ie it’s not making any difference. EDIT: just saw someone else said this too…

1 Like

Updates!

  • Hopefully localization and date / time issues are fixed
  • Can now toggle shadows on text and behind images
  • Added an extra “info” attribute to both components to
    fix some ugly workaround I was using and for later use.

Be sure to restart after updating the components.

Big thanks to @jOOc for helping troubleshoot!

And some notifications for those that wanted these features:
@DavidFW1960 @cjsimmons @swifty

Will tackle font size next go around.

4 Likes

Sonarr is working beautifully for me but with Radarr I get ‘WARNING (SyncWorker_10) [custom_components.sensor.radarr_upcoming_media] Host 192.168.1.xx is not available’

Why is not it displaying banners?

How does the en-AU work? We have a few time zones here… which is it going to use? Wouldn’t it make more sense to use the same convention as Home Assistant? Australia/Sydney etc?

Ok crap… I updated and now it’s broken the whole lovelace card…

It’s showing 5 upcoming sonarr and in my config it’s set to 14. I was getting 10 before the update. Also date is saying invalid date.

title: Home
resources:
- url: /local/custom-lovelace/upcoming-media-card/upcoming-media-card.js
  type: js
views:
  - title: Media
    icon: mdi:vlc
    cards:
      - type: media-control
        entity: media_player.all_speakers
      - type: media-control
        entity: media_player.living_areas
      - type: media-control
        entity: media_player.bedroom_speaker
      - type: media-control
        entity: media_player.office_speaker
      - type: media-control
        entity: media_player.lounge_speaker
      - type: media-control
        entity: media_player.roku_5x46aj056306
      - type: media-control
        entity: media_player.foxtel_7587
      - type: media-control
        entity: media_player.kodi
      - type: media-control
        entity: media_player.osmc_vero4
      - type: media-control
        entity: media_player.txnr1009
      - type: media-control
        entity: media_player.samsung_tv
  - title: Downloader
    icon: mdi:kodi
    panel: true
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:upcoming-media-card
            service: sonarr
            title: Sonarr Upcoming
            image_style: poster
            clock: 12
            locale: 'en-AU'
            max: 10
            show_color: '#ffffff'
            episode_color: '#000000'
            time_color: '#f41103'
            downloaded_color: '#000000'
            ribbon_color: '#03a9f4'
            border_color: 'grey'
            text_shadows: off
            box_shadows: on
          - type: custom:upcoming-media-card
            service: radarr
            title: Radarr Upcoming
            image_style: poster
            clock: 12
            locale: 'en-AU'
            max: 10
            show_color: '#ffffff'
            episode_color: '#000000'
            time_color: '#f41103'
            downloaded_color: '#000000'
            ribbon_color: '#03a9f4'
            border_color: 'grey'
            text_shadows: off
            box_shadows: on

config entries:

sensor:
  - platform: sonarr_upcoming_media
    api_key: !secret my_sonarr_api
    host: !secret my_sonarr_host
    port: !secret my_sonarr_port
    days: 14
    ssl: false
  - platform: radarr_upcoming_media
    api_key: !secret my_radarr_api
    host: !secret my_radarr_host
    port: !secret my_radarr_port
    days: 14
    ssl: false

FOOTNOTE: I reverted back to original from earlier today and it’s all working again

As the read me of the radarr component states and is displayed when you try to use banner view for radarr, it is not implemented yet. It’s “coming soon”.

1 Like

Does the default radarr component in HA work for you using the same info?

Guess localization isn’t fixed, keep an eye out for an update soon. I’m just going to remove it all together. I added it as some browsers don’t support auto detection, but it seems to be causing more trouble than its worth.

Updates!

Updated card with another attempt at fixing the time/date issues, give it a shot.

Locale is no longer a supported option in config
Having locale in your config won’t break the card, but it also won’t do anything currently.
I did this to avoid a breaking change right now, either it will be reworked or completely removed in coming versions.

1 Like

I am getting invalid date in the banner for sonarr. Havent tested radarr. Is this expected behaviour if one hasnt got en locale in phone?

BR

Trying to troubleshoot date time issues, hope you don’t mind me getting a bit more info.

Are you using the latest version of the card and components? Have you restarted after updating the components? What’s your location? Is it only in banner view? What’s the date listed on the sensor?

The locale config no longer has an effect in the latest version and it tries to get it from your system instead.
I might have to scrap toLocalDateString and import a library like moment.js
Was trying to avoid it.

For some reason, just the Radarr one gives me an error.
The sensor.radarr_upcoming is there and populating but still get an error just for the Radarr one… The Sonarr one works fine (and using the same card)

http://192.168.1.9:8123/local/custom-lovelace/upcoming-media-card.js:31:43 Uncaught TypeError: Cannot read property 'state' of undefined

See my ui-lovelace.yaml with both in it, don’t understand…

>   - type: vertical-stack
>     cards:       
>     - type: entities
>       title: Sonarr
>       show_header_toggle: true
>       entities:
>         - sensor.sonarr_queue
>         - sensor.sonarr_series
>         - sensor.sonarr_wanted
>         - sensor.sonarr_upcoming  
>         
>     - type: custom:upcoming-media-card
>       title: Sonarr Upcoming
>       service: sonarr
>       image_style: banner
>       clock: 12
>       max: 10
>       show_color: '#ffffff'
>       episode_color: '#000000'
>       time_color: '#f41103'
>       downloaded_color: '#000000'
>       ribbon_color: '#03a9f4'
>       border_color: 'grey'           
> 
>   - type: vertical-stack
>     cards:        
>     - type: entities
>       title: Radarr
>       show_header_toggle: true
>       entities:
>         - sensor.radarr_status
>         - sensor.radarr_movies
>         - sensor.radarr_commands
>         - sensor.radarr_upcoming 
> 
>     - type: custom:upcoming-media-card
>       title: Radarr Upcoming
>       service: radarr
>       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'

So it seems it can’t find the radarr component. Make sure the component “sensor.radarr_upcoming_media” exists. If it doesn’t have “media” on the end then it’s just the default radarr component and not mine.

Care to share your configuration.yaml portion were you have the components config?

I don’t you’re right, but neither with Sonarr though…
2018-09-01%2018_17_46-Home%20Assistant

Im sorry, my bad. Meant to say sensor.radarr_upcoming_media not card. Your sonarr sensor is fine.

my sensors.yaml:

# Sonarr
  - platform: sonarr
    api_key: 000000000000000000000
    host: 192.168.1.10
    port: 5004
    monitored_conditions:
      - series
      - upcoming      
      - wanted
      - queue
      - commands    
      - diskspace
      
  - platform: sonarr_upcoming_media
    api_key: 000000000000000000000000000
    host: 192.168.1.10
    port: 5004
    days: 2
    ssl: false     

# Radarr    
  - platform: radarr
    api_key: 00000000000000000000
    host: 192.168.1.10
    port: 7878
    monitored_conditions:
      - movies
      - upcoming   
      - status
      - commands
      - diskspace 

  - platform: radarr_upcoming_media
    api_key: 00000000000000000000000000
    host: 192.168.1.10
    port: 7878
    days: 120
    ssl: false     

***hid the APIs

I noticed the formatting goes crazy when I have this card in the same view as the google calendar card.
I know nothing about CSS really, but I’m assuming something is shared/over ridden?

All of my CSS objects are prefaced with the service name: "sonarr_img , sonarr_table, etc. " so I’m not sure why that would be. Looking at his code I don’t see any overlap. Will have to look into it more.

So this sounds exactly like the issue you had before with the sonarr card. Is everything in the correct folders and if not did you update the config to reflect that?