Hello everybody.
Does anyone know why the sensor.plex_recently_added appears empty?
I have no errors in the registry. The plex server is on the same network but not the raspberry.
Thanks
Love this addition btw, thanks for all the effort that’s been put in to make it what it is, for me there is one thing missing unless my googlefu and documentation reading has failed me, but is there a way to pad out the list, for example I have it pulling back upcoming films from Radarr but I don’t always have enough films for it to fill the card completely, I.E it’s expecting 5 entries minimum but I only have 4 listed, I would like to be able to pad out the card so it is always the same height regardless of how many entries are in there just so it looks nicer next to my other cards:
Hi, Any one help me fix an issues I’m having with the images not showing up on the android app?
The images work fine on every browser, Looking though the posts i see it can be cause by adblokers however i don’t have an adblocker on my phone nor on my router any tips would be great
I am missing posters with sonarr in this card… radarr seems ok…
I can open the fanart and poster in a browser
Must be a browser update causing this
OK My own fault… I recently installed an add blocker due to a shitty nesw site that was unbelievably obtrusive with ads and that caused it. Added an exception for HA and now all is good again.
I am so suck with this card, It doesn’t appear to be working for myself
This is my card Config:
type: custom:upcoming-media-card
entity: sensor.sonarr_upcoming_media
title: Upcoming TV Shows
image_style: fanart
clock: 12
max: 5
box_shadows: true
title_text: $title
line1_text: $episode
line2_text: $number
But nothing is showing, I only get Upcoming TV Shows.
The sensor.sonarr_upcoming_medila shows as online in the develpoer tools->states.
I am lost as to way no data is being shown (I am on Sonarr V3)
I am using Sonarr v3 too and I get a blank card no matter what I do. I think it might have something to do with sonarr’s API url changing in v3 (from /api/ to /api/v3/). But I don’t know how to fix it.
Radarr has changed API and I did a pr for this component for that but no issues with sonarr - it is working fine
I’m getting the same also. Anyone has this working with Sonarr V3?
Yeah I have this card set up with Sonarr 3 without issues. I run HA as an app with Edge Chromium and I recently had to turn off my addins in the app to make the card show up again so it’s possible that you have a browser addin that is blocking the card.
I was having an issue with posters but fixed with a setting in chrome.
I’ve tried this via Firefox, Chrome and also the app on IOS. Same issue. Card is always blank. Any ideas what plugin or what the underlying issue is?
If it happens in all those, then it’s likely not a browser addin that is causing it. If you go to developer tools, and check the sensor for Sonarr upcoming media, do you get any information there?
Yes, I can see there is data there when I check the sensor.
Is there a link to his github? I guess you never found a solution
Not sure about modding the js (have done very little fiddling w/that, personally); I did all mine w/CSS and card-mod.
There’s probably a cleaner way to accomplish this (I’m still learning 
) and it took much experimentation but eventually got what I wanted, e.g. –
Recently added TV / Movies:
Upcoming TV / Movies:
Here are examples of how I style the movie cards and tv cards, respectively:
Movie:
card_mod:
style: |
ha-card.type-custom-upcoming-media-card {
background: transparent;
padding: 0px !important;
box-shadow: none;
overflow: visible !important;
}
ha-card > div {
padding: 0px !important;
}
#main > div > div > svg {
filter: none !important;
border-radius: 10px !important;
}
#main > div > div > svg > polygon {
points: 100 12.95,80 0,0,100 !important;
}
#main.rece_poster {
margin: 0px !important;
overflow: visible !important;
position: absolute !important;
width: 168px;
}
#main.rece_poster:nth-of-type(2) {
left: 181px !important; ## placement will depend on size of your card and how far apart you want them spaced
}
#main.rece_poster:nth-of-type(3) {
left: 362px !important;
}
#main.rece_poster:nth-of-type(4) {
left: 543px !important;
}
#main.rece_poster:nth-of-type(5) {
left: 724px !important;
}
#main.rece_poster:nth-of-type(6) {
left: 905px !important;
}
.rece_poster .rece_container_poster {
border-radius: 10px;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
margin: 0px;
padding: 0px;
width: 168px;
height: 258px;
}
.rece_poster .rece_svg_poster {
margin: 0px;
position: absolute;
top: 5px;
left: 5px;
width: 51px !important;
height: 28px;
border-radius: 20px;
background-color: rgba(44, 45, 67, 0.3);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
padding: 0px 0px 2px 7px;
}
.rece_line0_poster {
font-size: 0px !important;
}
.rece_line1_poster {
font-size: 55px !important;
fill: white !important;
opacity: 90%;
}
TV (text hides on mouseover):
card_mod:
style: |
ha-card.type-custom-upcoming-media-card {
background: transparent;
padding: 0px !important;
box-shadow: none;
overflow: visible !important;
}
ha-card > div {
padding: 0px !important;
}
#main.rece_poster {
margin: 0px !important;
overflow: visible !important;
position: absolute !important;
width: 168px !important;
}
#main.rece_poster:nth-of-type(2) {
left: 181px !important;
}
#main.rece_poster:nth-of-type(3) {
left: 362px !important;
}
#main.rece_poster:nth-of-type(4) {
left: 543px !important;
}
#main.rece_poster:nth-of-type(5) {
left: 724px !important;
}
#main.rece_poster:nth-of-type(6) {
left: 905px !important;
}
.rece_poster .rece_container_poster {
border-radius: 10px;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
margin: 0px;
padding: 0px;
width: 168px;
height: 258px;
}
.rece_poster .rece_svg_poster {
margin: 0px;
position: absolute;
top: 166px;
left: 0px;
width: 153px !important;
border-radius: 0px 10px 10px 0px;
background-color: rgba(44, 45, 67, 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition-duration: 150ms;
}
.rece_poster .rece_svg_poster:hover {
opacity: 0%;
transition-duration: 200ms;
}
.rece_line0_poster {
font-size: 14px !important;
}
.rece_line1_poster {
font-size: 21px !important;
fill: white !important;
opacity: 80%;
}
.rece_line2_poster {
font-size: 22px !important;
fill: white !important;
opacity: 80%;
}
Can do same for sonarr / radarr cards just make sure to replace “rece_” with “sona_” or “rada_” for those elements.
Happy styling! 
9 Likes
WOW!
That looks awesome! and exactly what I want to do as well.
Installed the card-mod though hacs and just copied your config exactly (besides changing to rada as advised) as a start to see how it would look. But seems to change nothing, just displays as it did before (I thought it would be broken at least LOL, but no change)
Can you see anything wrong?
entity: sensor.radarr_upcoming_media
title: Upcoming Movies
image_style: poster
card_mod:
style: |
ha-card.type-custom-upcoming-media-card {
background: transparent;
padding: 0px !important;
box-shadow: none;
overflow: visible !important;
}
ha-card > div {
padding: 0px !important;
}
#main > div > div > svg {
filter: none !important;
border-radius: 10px !important;
}
#main > div > div > svg > polygon {
points: 100 12.95,80 0,0,100 !important;
}
#main.rada_poster {
margin: 0px !important;
overflow: visible !important;
position: absolute !important;
width: 168px;
}
#main.rada_poster:nth-of-type(2) {
left: 181px !important; ## placement will depend on size of your card and how far apart you want them spaced
}
#main.rada_poster:nth-of-type(3) {
left: 362px !important;
}
#main.rada_poster:nth-of-type(4) {
left: 543px !important;
}
#main.rada_poster:nth-of-type(5) {
left: 724px !important;
}
#main.rada_poster:nth-of-type(6) {
left: 905px !important;
}
.rada_poster .rada_container_poster {
border-radius: 10px;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
margin: 0px;
padding: 0px;
width: 168px;
height: 258px;
}
.rada_poster .rada_svg_poster {
margin: 0px;
position: absolute;
top: 5px;
left: 5px;
width: 51px !important;
height: 28px;
border-radius: 20px;
background-color: rgba(44, 45, 67, 0.3);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
padding: 0px 0px 2px 7px;
}
.rada_line0_poster {
font-size: 0px !important;
}
.rada_line1_poster {
font-size: 55px !important;
fill: white !important;
opacity: 90%;
}
EDIT!
Working, after opening a new tab it started working. Guess I was just impatient LOL
THANK YOU!!! Looks so much better now 
As always Ive spoken too soon LOL
When you get a chance, two questions.
#1
Is main.rece_poster related to this sensor? sensor.plex_recently_added
Thats what it looks like in your screen shot, but the below shows me the default card
type: custom:upcoming-media-card
entity: sensor.plex_recently_added
title: Recently Downloaded
card_mod:
style: |
ha-card.type-custom-upcoming-media-card {
background: transparent;
padding: 0px !important;
box-shadow: none;
overflow: visible !important;
}
ha-card > div {
padding: 0px !important;
}
#main.rece_poster {
margin: 0px !important;
overflow: visible !important;
position: absolute !important;
width: 168px !important;
}
#main.rece_poster:nth-of-type(2) {
left: 181px !important;
}
#main.rece_poster:nth-of-type(3) {
left: 362px !important;
}
#main.rece_poster:nth-of-type(4) {
left: 543px !important;
}
#main.rece_poster:nth-of-type(5) {
left: 724px !important;
}
#main.rece_poster:nth-of-type(6) {
left: 905px !important;
}
.rece_poster .rece_container_poster {
border-radius: 10px;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
margin: 0px;
padding: 0px;
width: 168px;
height: 258px;
}
.rece_poster .rece_svg_poster {
margin: 0px;
position: absolute;
top: 166px;
left: 0px;
width: 153px !important;
border-radius: 0px 10px 10px 0px;
background-color: rgba(44, 45, 67, 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition-duration: 150ms;
}
.rece_poster .rece_svg_poster:hover {
opacity: 0%;
transition-duration: 200ms;
}
.rece_line0_poster {
font-size: 14px !important;
}
.rece_line1_poster {
font-size: 21px !important;
fill: white !important;
opacity: 80%;
}
.rece_line2_poster {
font-size: 22px !important;
fill: white !important;
opacity: 80%;
}
#2 How are you spacing your above screet shot?
When I try a vertical stack, they kinda sit on one another
I tried adding the custom:gap card, but it… doesn’t help lol, closer though
Thanks mate!
Sorry, I probably could’ve given more helpful context.
I’ve got my upcoming media cards inside a picture element, but you could put them in a grid card* as well and it will space them out for you. You’d just need to play around with the width of the grid’s ha-card & could resize the posters e.g. if you wanted to fit more into a smaller area.
- Edit: you would need one media card per card slot in the grid, with each one hiding an (nth) poster in a row, in order; would be easier in a picture element.
The “rece_” substitution is just for the css elements, not the sensor. “rece” goes with the plex sensor, “rada” and “sona” for radarr and sonarr sensors, respectively. If you’re not sure which elements you’re hitting, open the developer tools in your browser to inspect the media card’s layout.
I’ve also got some of the parameters set using the card settings, such as hiding the banner. I can share more of my config later when I’m in front of my computer.
Hi,
I’d also be interested in a bit more context on your config. I’ve adapted some of it, but I’m struggling with the overflow of the series title. I can hide the overflow just fine, but I’d like to get something along the lines of text-overflow: ellipsis but I haven’t been able to get it to work.
OK so here’s the full config I use in this context, which is two upcoming-media-cards inside a picture-elements card:
type: picture-elements
image: /local/box.png
card_mod:
style: |
ha-card {
height: 648px !important;
width: 1152px !important;
overflow: visible !important;
background: transparent;
}
elements:
- type: custom:upcoming-media-card
style:
top: 60px
left: 40px
width: 1072px
height: 260px
transform: translate(0%, 0%)
entity: sensor.sonarr_upcoming_media
image_style: poster
flag: false
icon: none
max: 6
box_shadows: false
border_color: transparent
accent_color: transparent
title_text: $empty
line1_text: $day, $date
line2_text: $number - $runtime
line3_text: $empty
line4_text: $empty
title_size: large
line1_size: large
text_shadows: false
card_mod:
style: |
ha-card.type-custom-upcoming-media-card {
background: transparent;
padding: 0px !important;
width: 229px !important;
height: 260px !important;
box-shadow: none;
overflow: visible !important;
}
ha-card > div {
padding: 0px !important;
}
#main.sona_poster {
margin: 0px !important;
overflow: visible !important;
position: absolute !important;
width: 168px !important;
}
#main.sona_poster:nth-of-type(2) {
left: 181px !important;
}
#main.sona_poster:nth-of-type(3) {
left: 362px !important;
}
#main.sona_poster:nth-of-type(4) {
left: 543px !important;
}
#main.sona_poster:nth-of-type(5) {
left: 724px !important;
}
#main.sona_poster:nth-of-type(6) {
left: 905px !important;
}
.sona_poster .sona_container_poster {
border-radius: 10px;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
margin: 0px;
padding: 0px;
width: 168px;
height: 258px;
}
.sona_poster .sona_svg_poster {
margin: 0px;
position: absolute;
top: 166px;
left: 0px;
width: 153px !important;
border-radius: 0px 10px 10px 0px;
background-color: rgba(44, 45, 67, 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition-duration: 150ms;
}
.sona_poster .sona_svg_poster:hover {
opacity: 0%;
transition-duration: 200ms;
}
.sona_line0_poster {
font-size: 14px !important;
}
.sona_line1_poster {
font-size: 21px !important;
fill: white !important;
opacity: 80%;
}
.sona_line2_poster {
font-size: 22px !important;
fill: white !important;
opacity: 80%;
}
- type: custom:upcoming-media-card
style:
top: 352px
left: 40px
width: 1072px
height: 260px
transform: translate(0%, 0%)
entity: sensor.radarr_upcoming_media
image_style: poster
flag: false
icon: none
max: 6
box_shadows: false
border_color: transparent
accent_color: transparent
title_text: $empty
line1_text: $date
line2_text: $empty
line3_text: $empty
line4_text: $empty
title_size: large
line1_size: large
text_shadows: false
card_mod:
style: |
ha-card.type-custom-upcoming-media-card {
background: transparent;
padding: 0px !important;
width: 229px !important;
height: 260px !important;
box-shadow: none;
overflow: visible !important;
}
ha-card > div {
padding: 0px !important;
}
#main.rada_poster {
margin: 0px !important;
overflow: visible !important;
position: absolute !important;
width: 168px;
}
#main.rada_poster:nth-of-type(2) {
left: 181px !important;
}
#main.rada_poster:nth-of-type(3) {
left: 362px !important;
}
#main.rada_poster:nth-of-type(4) {
left: 543px !important;
}
#main.rada_poster:nth-of-type(5) {
left: 724px !important;
}
#main.rada_poster:nth-of-type(6) {
left: 905px !important;
}
.rada_poster .rada_container_poster {
border-radius: 10px;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
margin: 0px;
padding: 0px;
width: 168px;
height: 258px;
}
.rada_poster .rada_svg_poster {
margin: 0px;
position: absolute;
top: 5px;
left: 5px;
width: 51px !important;
height: 28px;
border-radius: 20px;
background-color: rgba(44, 45, 67, 0.3);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
padding: 0px 0px 2px 7px;
}
.rada_line0_poster {
font-size: 0px !important;
}
.rada_line1_poster {
font-size: 55px !important;
fill: white !important;
opacity: 90%;
}
Should be easier to reverse-engineer from here but lmk if you have questions.
There’s a section in the card’s .js that controls how text is truncated when exceeding a character limit; I edited that bit.