Lovelace: Upcoming Media Card

It’s optional because it defaults to the default port used by the service if not filled in. If it’s different for you then it would need changed.

1 Like

Is there a way to add rounded corners to the upcoming tiles? I managed the whole card with CustomCards - but I cannot apply border-radius to the tiles. Thanks.

So when I installed the big security update from last month, this card stopped working… hadn’t had time to look at it though, but it seems that no one else seems to be having an issue. This is the only error I see in the logs:

Logger: frontend.js.latest.202101277
Source: components/system_log/__init__.py:190
First occurred: February 22, 2021, 11:43:33 AM (2 occurrences)
Last logged: February 22, 2021, 2:07:25 PM

https://*******/local/custom-lovelace/upcoming-media-card/upcoming-media-card.js?v=0.4.3:373:27 Uncaught TypeError: Cannot read property 'replace' of undefined
1 Like

I have the same problem.

@DarkWolf @pesicard

  • What component(s) are you using with the card?
  • Do the component(s) still report data?
  • What does your config for the card look like?

@mayker:
I’m using this guy:
Custom Component: SageTV - Share your Projects! / Custom Components - Home Assistant Community (home-assistant.io)
Yes, it’s still reporting data. Config is as follows:

entity: sensor.sagetv
image_style: fanart
text_shadows: false
title: Today on SageTV
type: 'custom:upcoming-media-card'

current sensor data is as follows:

data: >-
  [{"titledefault": "$title", "icon": "none", "line1default": "$episode",
  "line2default": "$release", "line3default": "", "line4default": ""},
  {"number": "S0E0", "flag": "false", "airdate": "2021-03-01T16:00:00.000Z",
  "release": "Recorded: $day, $time", "fanart":
  "https://mydomain.net/local/posters/The Taking of Pelham 123_FA",
  "rating": 7.4, "runtime": 30, "episode": "The Taking of Pelham 1 2 3",
  "title": "The Taking of Pelham 123", "poster":
  "https://mydomain.net/local/posters/The Taking of Pelham 123"},
  {"number": "S8E13", "flag": "false", "airdate": "2021-03-01T19:00:00.000Z",
  "release": "Upcomming: $day, $time", "fanart":
  "https://mydomain.net/local/posters/Monk_FA", "rating": 7.4,
  "runtime": 30, "episode": "Mr. Monk Is the Best Man", "title": "Monk",
  "poster": "https://mydomain.net/local/posters/Monk"}, {"number":
  "S8E7", "flag": "false", "airdate": "2021-03-01T19:00:00.000Z", "release":
  "Upcomming: $day, $time", "fanart":
  "https://mydomain.net/local/posters/Chopped_FA", "rating": 7.4,
  "runtime": 30, "episode": "Champions' Tournament: Part 1", "title": "Chopped",
  "poster": "https://mydomain.net/local/posters/Chopped"}]
unit_of_measurement: shows
friendly_name: SageTV
icon: 'mdi:calendar'

So i’m having a small issue with this card that I can’t make sense of. I’m using Plex Recently Added to feed this card and it keeps picking the wrong poster, and then won’t update with the correct one unless I clear all of Chromes history.

In

config\www\upcoming-media-card-images\plex

the images correlate with the card. There is a fanart-image with a name like “p7959”. If I remove this image-file, it correctly fetches the right one after a while. However, the card does not update unless I completely clear the history in Chrome.

What I (with my limited understanding) think is happening: Plex downloads the fanart first, and that gets imported to the card. Then, as long as the name of the file is the same, Chrome does not know to update it. Even though the poster has changed.

Any ideas?

That’s very odd. What do you mean by wrong poster? Is it for a completely different movie/show or just a different version of the image for the correct show?

To get around caching each image is appended with the media item’s ID, it shouldn’t be possible for a media item to have the poster of a different show/movie.

Not the wrong movie/show, my bad.

The wrong poster as in a “fanart”-image instead of a “poster”-image. Same movie/show, but two fanart-images. Instead of the front cover, it shows a scaled down landscape image.

Somehow, fanart gets imported twice. One gets named “f7975.jpg” and the other “p7975.jpg” for example. If I then remove “p7975.jpg” from the folder, it correctly fetches the right poster-image.
But the dashboard card won’t show the new (correct) image unless I delete all of my browser history.

Is this only happening with one certain movie/show or all?

Almost every movie.

So… uh… any feedback…?

Sorry for the late reply, I haven’t had much time to investigate, but I was able to replicate so a fix is on the horizon. I’m in the process of selling my current place and moving so I’ve been a bit unavailable, but I’m on it.

1 Like

Yeah, that’ll keep anyone busy! No rush!

Hello! I couldn’t find this discussed yet and am curious if anyone has any thoughts.

I can’t figure out why, but the plex_recent component’s fanart style for section_types: show seems to have additional padding in the top-most banner which the other cards (e.g. sonarr_upcoming, radarr_upcoming, etc.) do not. Weirder still, the same plex_recent component doesn’t appear to have this issue when pulling section_types: movie :

<div class="rece_fanart" style="margin-top: 10px;

image

<div class="rece_fanart" style="margin-top: 0px;

image

I don’t think it’s my card config that’s causing the issue, but just in case:

type: 'custom:upcoming-media-card'
entity: sensor.recently_added_tv
title: New TV Shows
image_style: fanart
hide_unflagged: true
flag: false
icon: none
box_shadows: false
border_color: none
line1_text: $number - $episode
line2_text: $empty
line3_text: $aired - $runtime
style: |
  ha-card {
    --ha-card-background: rgba(0, 0, 0, 0);
    --ha-card-box-shadow: false
  }
  .rece_fanart .rece_fan_fanart {
    background-image: linear-gradient(to right, rgb(0, 0, 0) 46%, transparent 60%);
  }
  .rece_fanart {
    border-radius: 7px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4);
  }

I can probably fix the css with card-mod but was just curious if this was something that could be aligned w/the other components as well? Thanks!

is there a way to use Plex Recently Added GitHub - custom-components/sensor.plex_recently_added: ▶️ Plex component to feed Upcoming Media Card.
in an Automation…

thanks trying to get HA to send me a notifications when a new movie has been add to my moblie.
if any one has already don this love to see there config.

You can do this via webhooks in either Plex, Sonarr, or Radarr.

Hi,
I am following quite a few series and would like to see them on 1 single screen without having to scroll. I can fit 6 series on the screen, but today there are 10 to fit. Is it possible to somehow achieve multiple columns here? I am not really a CSS guy, so I am a bit lost trying to make it multicolumn. I don’t think any cards exist that would do that automatically for me?

Hey Gullaume - i have

I have been trying to get this card to show up for 4 months now. I’ve installed Sonarr and Radarr components, installed the card, deleted and reinstalled countless times. This card simply won’t show up as a card when I edit lovelace via the GUI. I even tried the “manual” card entry, and tried adding the card via entity (I see the Radarr sensor but it shows nothing as a card).
I’ve installed the card via HACS front end, which doesn’t point to the other setup requirements found here (Why? When you click on “information” in HACS it normally contains documentation on how to install/configure):

But the other components, this for example,

contradicts other instructions. I’ve tried every possible way to install, created a ui-lovelace.yaml, tried many different entries in there etc. etc.
I dont’ think adding this component should be this frustratingly difficult-- is there one, non-contradictory set of installation instructions to follow? I’ve tried all the the github instructions. I thought HACS would have created the custom entries I needed though??