Lovelace: Upcoming Media Card

nfs · November 19, 2022, 4:13am

Indeed you can. There are smarter ways to do it using grids & layouts, but I did most of my work inside picture elements bc it was faster to learn and I could position things exactly where I wanted them w/card-mod & css. E.g. I made a dashboard for an ipad that was just a whole-page upcoming media card of posters – i’d take a screenshot but I believe one or more of the required integrations broke months ago and I abandoned the project.

With the upcoming media card inside a picture element you just have to define where each poster in sequence goes and line them up in a grid. An example of one of the pages is pasted below.

You’ll notice in the below example I’ve hidden the first poster; that’s bc on that page I used a separate upcoming media card with different styling as a banner at the top, which only showed the first poster/newest item.

- type: custom:upcoming-media-card
  style:
    top: 52px
    left: 60px
    width: 1072px
    height: 260px
    transform: translate(0%, 0%)
  entity: sensor.recently_added_tv
  xtitle: New TV
  image_style: poster
  flag: true
  flag_color: '#e5a00d'
  icon: none
  max: 13
  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
  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 > div > div > svg {
        filter: none !important;
        border-radius: 10px !important;
      }
      #main > div > div > svg > polygon {
        points: 100 12.95,80 0,0,100 !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: 160px;
        height: 245px;
      }
      #main.rece_poster {
        margin: 0px !important;
        overflow: visible !important;
        position: absolute !important;
        width: 163px;
      }
      #main.rece_poster:nth-of-type(1) {
        display: none;
      }
      #main.rece_poster:nth-of-type(2) {
        left: 0px;
        top: 269px;
      }
      #main.rece_poster:nth-of-type(3) {
        left: 180px;
        top: 269px;
      }
      #main.rece_poster:nth-of-type(4) {
        left: 360px;
        top: 269px;
      }
      #main.rece_poster:nth-of-type(5) {
        left: 540px;
        top: 269px;
      }
      #main.rece_poster:nth-of-type(6) {
        left: 0px;
        top: 534px;
      }
      #main.rece_poster:nth-of-type(7) {
        left: 180px;
        top: 534px;
      }
      #main.rece_poster:nth-of-type(8) {
        left: 360px;
        top: 534px;
      }
      #main.rece_poster:nth-of-type(9) {
        left: 540px;
        top: 534px;
      }
      #main.rece_poster:nth-of-type(10) {
        left: 0px;
        top: 799px;
      }
      #main.rece_poster:nth-of-type(11) {
        left: 180px;
        top: 799px;
      }
      #main.rece_poster:nth-of-type(12) {
        left: 360px;
        top: 799px;
      }
      #main.rece_poster:nth-of-type(13) {
        left: 540px;
        top: 799px;
      }
      .rece_svg_poster {
        margin: 0px !important;
        position: absolute;
        top: 155px;
        left: 0px;
        width: 140px !important;
        border-radius: 0px 10px 10px 0px;
        background-color: rgba(44, 45, 67, 0.6);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }
      .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%;
      }

Avispa333 · December 13, 2022, 12:40am

I know it’s kind of stagnat in here but I’m hoping for some help, I got sonarr to work and I would think radarr would be pretty much the same but I can’t get anything to populate to the card, anybody have a suggestion on where to start debugging to get it to work?

Snooze1000 · November 5, 2023, 3:21pm

Hi guys,
I’m struggling to get this card working. I have followed the instructions from https://github.com/NemesisRE/upcoming-media-card and https://github.com/JackJPowell/sensor.sonos_upcoming_media to get my Sonos queue shown in the upcoming media card.

The following error appears in my Dashboard:

Any ideas of what I’m doing wrong?

Richi · November 23, 2023, 4:44pm

Hello, i have installed the ha-mediabrowser in homeassistant and want to show the new movies from my emby server in a upcoming media card. The card only shows the title and the rating, but not the genres, studios and so on! Is there any solution to show the other attributes?
Best regards
Stefan

skank · December 9, 2023, 11:44am

Anyone know why this card has been archived?
No further development?

I wish there was an imdb integration too for this card. Or even “kinepolis”

xlyralycanx · December 14, 2023, 9:24pm

Anyone know how to modify the js file, specifically the truncation section? Been struggling with it, want to remove truncation and make the title wrap around (on fanart mode) but nothing I edit changes the result.

liminal · February 15, 2024, 12:58am

Media card is not displaying images. Now i understand this can be an ad blocker, but even if I run this from my phone on cellular, or turn off blocking on pi hole within the local network its still not showing images for the content.

The backend is ````plex_recently_added``` and it is showing content, just no images.

Anyone running Pihole having issues with this?

How can I troubleshoot this?

Actually I just had a thought. Im running plex ect behind NGINX proxy manager. Has anyone got a similar set up, did you have to do anything special?

Well annoyingly while following this guide;

github.com

custom-cards/upcoming-media-card/blob/master/troubleshooting.md

# Troubleshooting:
### Follow the instructions below before posting an issue or asking for help on the forums. Be sure to indicate that you tried these steps and report your findings.

## Card:

* Whitelist your HA page in your adblocker, some ad blocking extensions are over cautious and will block any image with certain words in the url, like "banner".

* Make sure the card is not contained inside another card in your ui-lovelace.yaml. This will help rule out issues or conflicts with the containing card.

* Clear your browser's cache and make sure you're editing the version number in the resources section of ui-lovelace.yaml if you don't use HACS.

* Check that you installed the custom components & they are working correctly (more on components below). This card only works with the custom components linked at the top of the [readme](https://github.com/custom-cards/upcoming-media-card/blob/master/README.md).

## Components:

* Check that the components are reporting data. You can find this in your HA sidebar under developer tools. Click
the icon that looks like this <> or select "states" at the top. To help with troubleshooting always mention what you see here next to your sensor ("sensor.sonarr_upcoming_media", for example).

* "sensor.sonarr_upcoming" & "sensor.radarr_upcoming" are not the components for this card, they are the default HA components. The Sonarr and Radarr components for this card end in "media" and the links for them are in the [readme](https://github.com/custom-cards/upcoming-media-card/blob/master/README.md).

This file has been truncated. show original

My sonarr and radarr upcoming media definitely do not work behind NPM, plex_recently_added seems fine. and can get images ok.

https://plex.private.domain/library/metadata/14536/thumb/1707577391?X-Plex-Token=asdhasdkjhasd

Just not in HA

If the token URL works ok and pihole has been whitelisted… WHat else?

magiva · February 29, 2024, 10:25am

does anyone know how to configure a clickable url ?
i cant see a variable that i can use to tag onto my plex server to send the user to the plex item

dmz · April 22, 2024, 4:44pm

I’ve tried to use the collapse option and can’t seem to get it working. Same for clickable. Any suggestions on how to debug?

dmz · April 22, 2024, 4:45pm

I noticed that the version of the “plex recently added” in HACS was pulling from repo: GitHub - NemesisRE/sensor.plex_recently_added: ▶️ Plex component to feed Upcoming Media Card.

However, I noticed that that fork was 6 commits ahead but 28 commits behind master GitHub - custom-components/sensor.plex_recently_added: ▶️ Plex component to feed Upcoming Media Card.

When I changed to the master repo I was able to specify configuration for “section_libraries” where I was able to specify a list of libraries I wanted to use.

Not sure who maintains which repo HACS uses; but may need to update one or merge into master and use that one.

  - platform: plex_recently_added
    name: Recently Added Movies
    token: !secret plex_token
    host: !secret plex_host
    port: 32400
    section_types:
      - movie
    section_libraries:
      - Movies
  - platform: plex_recently_added
    name: Recently Added TV
    token: !secret plex_token
    host: !secret plex_host
    port: 32400
    section_types:
      - show
    section_libraries:
      - TV Shows

Tmatz · July 16, 2024, 5:39am

Is this thing dead? Or did someone pick it up?

eriecableguy · September 1, 2024, 4:16pm

Sonarr, Radarr, and Lidarr show information in the Developer section of HA, but no longer work in the Upcoming Media Card.