Lovelace: Upcoming Media Card

liminal · October 10, 2021, 6:51am

Thank you!!!

I did have it kinda working there,

But it looked like crap, not going to lie HAHA would have been more questions than its worth LOL

Now I have it looking the business, thanks to your full config, so thanks again!

One last thing im struggling with is a transparent image (as you can see with the magenta)

I created a 10x10px transparent image, but the card wont process it, I’ve been searching around the Picture Elements doco and cant find anything there. I can see that you have specified it in your code

    ha-card {
      height: 648px !important;
      width: 1152px !important;
      overflow: visible !important;
      background: transparent;
    }

But I’m very confused as to why its not processing.

Haven’t changed anything in your code really, except for height values and element references

Just on that, my poster elements for recently added are called plex_poster, if that helps anyone that gets stuck

EDIT

So I just checked this on my tablet and it is transparent, but I can see a border it seems. Still showing magenta on Chrome.

Just like it doesn’t show the Sonarr posters on chrome for some reason

flirtysanchez · October 10, 2021, 7:00am

@ German Fellas
Is there any solution for tracking upcoming movies in the cinema?

Thx

CDRX2 · October 10, 2021, 10:32am

Thank you for the tip! Found the section to edit in the .js. I have one further question: how did you manage to apply different styling to recent movies and recent series? I’m also using the card on a picture-element, and styling the .rece_xxx differently for both cards ends up applying the latest styling only (in my case, the movie version on the series card).

nfs · October 11, 2021, 2:18am

Could you share your full config? Hard to say without the full context – I’ve run into all kinds of weird quirks and problems using picture elements so there might be something that’s not obvious going on. There’s also an example pasted just below here of my recently-added cards, might be something in there that helps?

Some of my configs are a bit hacky and I’m probably not following best practice, but I stop when I get it to do what I want . E.g. when I put a 1:1 “box.png” in a 4:3 card, the hui-image will stretch to fill width and I end up with a 1:1 box that’s taller than my card and some content might be hiding down below where it’s not visible. So I play around with positioning the content where I want and size the ha-card to prevent it extending out and ruining my ratios (tho this mostly only matters when using things in pop-ups).

I had the same problem; I actually had to nest one of the “recent” cards inside another picture element using an hui-element card. Then you can style them independently:

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:hui-element
    card_type: picture-elements
    style:
      top: 0px
      left: 0px
      width: 1152px
      height: 648px
      transform: translate(0%, 0%)
    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: 352px
          left: 40px
          width: 1072px
          height: 260px
          transform: translate(0%, 0%)
        entity: sensor.recently_added_movies
        image_style: poster
        flag: true
        flag_color: '#e5a00d'
        icon: none
        max: 6
        box_shadows: false
        border_color: transparent
        accent_color: transparent
        title_text: $empty
        line1_text: $runtime
        line2_text: $empty
        line3_text: $empty
        line4_text: $empty
        title_size: large
        line1_size: large
        text_shadows: false
        title_color: '#A0A2A8'
        line1_color: '#A0A2A8'
        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 > 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;
            }
            #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%;
            }
  - type: custom:upcoming-media-card
    style:
      top: 60px
      left: 40px
      width: 1072px
      height: 260px
      transform: translate(0%, 0%)
    entity: sensor.recently_added_tv
    image_style: poster
    flag: false
    icon: none
    max: 6
    box_shadows: false
    border_color: transparent
    accent_color: transparent
    title_text: $empty
    line1_text: $episode
    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.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%;
        }

On one of my cards I wanted mouse-over actions, so i had to make sure the mouse-over actionable card was on top of the 2nd/nested picture element. Like I said, there’s probably a more elegant way to handle this with CSS but I’m self-taught and still learning…

liminal · October 11, 2021, 6:11am

Yeah its weird, if you can see something great, its really only doing this on chrome, which I more just use for config. Tablets and phones are showing ok, as is MS Edge, if I really wanted to use that.

But if you can see something, that would be great. if not, its working well enough for me. So much better then the default, so thanks for that

type: picture-elements
image: /local/box.png
card_mod:
  style: |
    ha-card {
      height: 400px !important;
      width: 1152px !important;
      overflow: visible !important;
      background: transparent;
    }
elements:
  - type: custom:upcoming-media-card
    title: Recently Added
    style:
      top: 10px
      left: 40px
      width: 1072px
      height: 260px
      transform: translate(0%, 0%)
    entity: sensor.plex_recently_added
    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;
        box-shadow: none;
        overflow: visible !important;
        }
        ha-card > div {
        padding: 0px !important;
        }
        #main.plex_poster {
        margin: 0px !important;
        overflow: visible !important;
        position: absolute !important;
        width: 168px !important;
        }
        #main.plex_poster:nth-of-type(2) {
        left: 181px !important;
        }
        #main.plex_poster:nth-of-type(3) {
        left: 362px !important;
        }
        #main.plex_poster:nth-of-type(4) {
        left: 543px !important;
        }
        #main.plex_poster:nth-of-type(5) {
        left: 724px !important;
        }
        #main.plex_poster:nth-of-type(6) {
        left: 905px !important;
        }
        .plex_poster .plex_container_poster {
        border-radius: 10px;
        box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
        margin: 0px;
        padding: 0px;
        width: 168px;
        height: 258px;
        }
        .plex_poster .plex_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;
        }
        .plex_poster .plex_svg_poster:hover {
        opacity: 0%;
        transition-duration: 200ms;
        }
        .plex_line0_poster {
        font-size: 14px !important;
        }
        .plex_line1_poster {
        font-size: 21px !important;
        fill: white !important;
        opacity: 80%;
        }
        .plex_line2_poster {
        font-size: 22px !important;
        fill: white !important;
        opacity: 80%;
        }

nfs · October 11, 2021, 5:46pm

Yeah nothing really jumps out at me; might be something weird in the elements inspector. But, glad it’s working for you where it counts

CDRX2 · October 12, 2021, 1:19pm

Thanks for the tip on the nested card. I’ll try and ask on the card-mod thread if somebody has any ideas.

M7urt · October 20, 2021, 9:26am

I have a problem with the Sonarr entity.

I use a Seedbox

when I use the entity available from HA (the wrong one), the way in which i get it to accept my credentials is : I enter the seedbox address http://seedboxesrus:44555 (this is made up of course), My API key and I do not enter a port (left blank), no SSH to contend with. This works and brings the data through so it is definately connecting to my seedbox.

however using the upcoming sonarr entity is tricky. It will not let me leave the port blank and will therefore not connect to my seedbox. I presume there is some error checking preventing this.

has anyone had any success connect to their seedbox? is there a way to bypass the port setting (I assume it’s coded)

help needed please?

PrzemekSkw · October 22, 2021, 1:26pm

@mayker Hello, I install Upcoming Media Card HACS user interface tab, Emby Latest Media, Sonarr/Radarr Upcoming Media in integrations. I add Emby, Sonarr and Radarr examples to my configuration.yaml and after many reboots and browser cache purging I don’t see any media cards and entities. I put wright credentials and API keys.

sensor:
- platform: emby_upcoming_media
  api_key: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  user_id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  host: 192.168.0.19
  port: 8096
  ssl: False
  max: 5
  use_backdrop: true
  group_libraries: false
  include:
    - Movies
    - TV Shows

sensor:
  - platform: sonarr_upcoming_media
    api_key: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    host: 192.168.0.30
    port: 8989
    days: 7
    ssl: false
    max: 10

sensor:
  - platform: radarr_upcoming_media
    api_key: xxxxxxxxxxxxxxxxxxxxxxxx
    host: 192.168.0.30
    port: 7878
    days: 14
    ssl: false
    theaters: false
    max: 10

Do I have to add something for upcoming-media-card?

Regards,
Przemek

jaaem · December 14, 2021, 11:59am

Anyone else’s card stop working? I use a custom sensor, so that could be the problem, but I get JSON parse error on line 16. Is attributes.data depreciated?

edit: for my custom sensor, looks like the behavior of self.change_detected: changed in device_state_attributes(self): . I just put the update outside the changed_detected.

liminal · December 20, 2021, 12:44am

Hey all,

Not sure if this is the right place, but cant find a dedicated thread for it.

Recently added Plex

Trying to fix the way the date displays on my dashboard.

Found this info, but no way to change it to something more readable

line2 $day, $date $time “Monday, 10/31 10:00 PM” Displays time of download.

There is no 31st month HAHA, is there a way to fix this for everyone that’s not from the US ?

Thanks

EDIT!

Mayker got back when I opened a feature request and advised there is a way to change the date in the upcoming media card config.

But I cant see that in HACS. Or to I have to edit the .JS directly?

Is there any doco on making this change? all I can find is this line;

“Date of release or download, etc., depending on component. Formatted with “date” in config.”

EDIT2

Ok, found it;

const dateform = this.config.date || "mmdd";

How do I edit this if I’m running HA OS?

I cant get to the hacs folder though SAMBA or the Editor?

I cant even open it though Vis Studio. Just makes a copy of the file?

chezpaul2 · December 21, 2021, 5:13pm

@nfs Would you mind also sharing your box.png?
Thanks

the_jeffski · December 21, 2021, 5:19pm

On your lovelace config where you added the card config you need a row for the date format. Mine is like this.

type: custom:upcoming-media-card
entity: sensor.recently_added_tv
image_style: fanart
date: ddmm
title: Recently Added TV

nfs · December 21, 2021, 6:34pm

The box.png is just a 1x1 transparent png file, you should be able to make one in any image editing tool

liminal · December 22, 2021, 12:08am

Ahh, thank you!

I did see that in the doco, but was putting it in the wrong place. Thanks for the code snippet context

liminal · January 7, 2022, 5:24am

Hey guys,

My sensors have disappeared for Plex and Radarr.

Ive tried to uninstall and reinstall the integrations, but makes no change. They just don’t show up.

Config.yaml

Entities with no filters.

Sonarr sensor is working completely fine

Any ideas?

EDIT:

Ok, Plex is fixed. there was a - in the token (never seen that before) didn’t copy it correctly.

Radarr however definitely something strange going on here, but has nothing to do with the upcoming media card I dont think.

http(s)://[IP]:[port]/api/calendar?apikey=[API_key]&start=[start_date]&end=[end_date]

If I use the troubleshooting page and try the above for sonarr, works fine.
If I do it for radarr I just get: No web page was found for the web address

Even if I take it back to localhost:7878 and run it on the server. Same thing.

but localhost:7878 works fine.

Has anyone see that before?

chezpaul2 · January 7, 2022, 6:00pm

Anyone has problems where the card shows empty posters? If I go to the www/Recently_Added_Movies folder, I can see that any empty poster corresponds to files images that are corrupted. I can’t open them. So out of 5 movies, 2 posters work fine but three are corrupt. If I manually change the jpg for those then all works well. So the automation grabs corrupt files? Where does it grab them from? This is the firs time it happens. I’ve had this card for over 2 years.

liminal · January 13, 2022, 1:23am

Ok so I think I got what’s happening with the radarr card. They have updated the API to v3 and that needs to be part of the URL.

/api/v3/calendar?apikey=

Can anyone else confirm their radarr card is no longer working?

I can see there is a couple of issues opened in git hub. So lets see what Mayker says when he gets back on here

DavidFW1960 · January 13, 2022, 1:31am

Yes but I found this months ago and made a PR for it that was merged so update your card

It is working with the current version.

There is a new bug though introduced in the last few weeks sometime around version 4.0.2.5817 of Radarr related to the ratings. There is a PR to fix that as well that you can manually patch your sensor.py file with. then it works again.

liminal · January 13, 2022, 2:28am

Thanks Dave! Appreciate that

I’ve actually just been reading the issues and seen the fix posted there. So going to update it now.

EDIT: can confirm that replacing these two lines worked for me