Lovelace: Upcoming Media Card

Might not answer your question, but I am just about to publish an update which lets you use the backdrop image instead of the poster (better for the fanart mode). It looks like this:

I’ve also added some of the missing info (Studio, genre, episode name, etc…)
As for the update frequency, I believe it’s once per hour.

Is there a way to display certain places within the list, rather then it start from movie 0 in the list can it start from movie 4, failing that is there a way to stack this cards tiles horizontally?

Superb !
Thx for the update, will check asap, it looks very nice !
I can confirm it works! thx mate.

Now only cosmetic changes…

Did you get it that small? or did you resize it?

Hey mate, I did not do anything special to it. Just using the fanart mode of the Upcoming Media Card.
And to clarify, I’ve only done the work to pull the data from the Emby API. All the rest, including the visualisation is thanks to the Upcoming Media Card

1 Like

Ok thx

I wonder if @mayker can give some heasds up about the scaling or how i can make it fit on one page :slight_smile: + to lose the dark grey background as you can see on my shots

Another cool thing would be to add youtube integration for a channel

say in belgium , movie theaters “kinepolis” have their own youtube channel for upcoming movies.
Would love to include those upcoming to cinema movies too

some info Youtube component

lots of great ideas there… you should look at learning Python and get stuck in :slight_smile:

i wish i could
Still learning how to use HA , left alone i should do python :slight_smile:Maybe you can extend your knowledge :stuck_out_tongue:

You can do this with card-mod, scaling that is, another option is to have the card as part of a horizontal-stack.

Hi
thx
Not sure if it would work with horizontal-stack though, it is already horizontal
I currently use it with card-layout
I asked there if i can adjust column heigth with it, but its not in the details.
Wil look at card-mod

title: Cinema
icon: mdi:theater
path: cinema
theme: ios-dark-mode
panel: true
cards: 
  - type: custom:layout-card
    layout: vertical
    min_columns: 1
    max_columns: 3
    cards:
      - type: custom:upcoming-media-card
        entity: sensor.emby_latest_films
        title: Laatste Films
        image_style: fanart
        line1_text: '$release'
        line2_text: '$genres'
        line3_text: '$rating - $runtime'
        line4_text: '$studio'
        title_size: medium
        line_size: small
      - break
      - type: custom:upcoming-media-card
        entity: sensor.emby_latest_series
        title: Laatste Series
        image_style: fanart
        line1_text: '$episode'
        line2_text: '$release'
        line3_text: '$rating - $runtime'
        line4_text: '$number - $studio'

I do it with card-mod and height when I get infront of my pc will post an example

ok so myu page is still a WIP but here is a screen, using custom:stack-in-card and overall card height plus css to move the postion of the margins for recently added.

##################################################################
#                                                               #
#                      NAS - Movies Details                     #
#                                                               #
#################################################################

- type: custom:stack-in-card
  cards:
    - type: horizontal-stack
      cards:
        - type: custom:upcoming-media-card
          entity: sensor.kodi_recently_added_movies
          title: Latest Episodes
          date: ddmm
          max: 3
          image_style: fanart
          style: |
            ha-card  {
              margin-top: -15px;
              padding-left: 15px;
            }

        - type: markdown
          content: >
            <img width="50" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Kodi-top-bottom.svg/1200px-Kodi-top-bottom.svg.png">
          style: |
            ha-card {
              margin-top: 62.5px;
              margin-left: -5px;
              width: 325px;
            }

        - type: picture-entity
          entity: sensor.kodi_movies_label
          camera_image: camera.kodi_now_playing_movie
          style: |
            ha-card  {
              margin-top: 62.5px;
              margin-left: -150px;
              height: 320px;
              width: 600px;
              border-radius: 2.5px;
            }
  style: |
    ha-card {
      border-radius: 2.5px;
      height: 495px;
    }

@jimpower can i see your camera.kodi_now_playing_movie config?
Its a good idea with the cover picture.

Sure I’ll dig it up for you, as I keep my TV and movies on different nas I use a bit of an intricate template to pull the movies only in this scenario. It’s also only half done as I’m in the process of pulling in the library stat’s for movies (total) and watched/unwatched. Maybe also some kinda how much time this week was spent watching movies lol.

This will do the trick for any media_player entity that displays an entity_picture as part of its attributes.

- platform: generic
    name: Kodi Now Playing
    still_image_url: http://10.0.20.3:8123{{ states.media_player.media_4k_kodi.attributes.entity_picture }}

That looks so nice. Intereseted in your now streaming too :stuck_out_tongue:
Could you help me with my problem?
i tried with adding style ha-card, but now i get scrollbars, and the background of the card disappears partially (its ok to get rid of it but then completely pls)

title: Cinema
icon: mdi:theater
path: cinema
theme: ios-dark-mode
panel: true
cards: 
  - type: custom:layout-card
    layout: vertical
    min_columns: 1
    max_columns: 3
    cards:
      - type: custom:upcoming-media-card
        entity: sensor.emby_latest_films
        title: Laatste Films
        image_style: fanart
        line1_text: '$release'
        line2_text: '$genres'
        line3_text: '$rating - $runtime'
        line4_text: '$studio'
        style: |
            ha-card  {
              margin-top: -15px;
              padding-left: 15px;
              height: 500px;
            }
      - break
      - type: custom:upcoming-media-card
        entity: sensor.emby_latest_series
        title: Laatste Series
        image_style: fanart
        line1_text: '$episode'
        line2_text: '$release'
        line3_text: '$rating - $runtime'
        line4_text: '$number - $studio'
        style: |
            ha-card  {
              margin-top: -15px;
              padding-left: 15px;
              height: 500px;
            }
      - break
      - type: media-control
        entity: media_player.emby_kodi_cinema
    

So you make an extra sensor.kodi_movies_label?
Whats in there?
Then using generic camera platform, you make the picture right?
Why do you call it in that part, kodi_now_playing but in your picture entity you point to kodi_no_playing_movie…
how can that work?

Also, doest it auto overwrite all the images? or doest it fill up space?

Still having issues with the layout here

Can i see your NAS stuff too please? Or do you have a github page i can follow and look?

Is it possible to put this inside a fold-entity-row card? I’ve tried a couple of different ways but I only get an error on my code

I was trying that for myself and came to the conclusion that iw was not possible since the fold-entity-row worked with an array of entities and therfore was not compatible with what we had here.
Happy to be corrected though.

Updates:

Sorry, been MIA for a bit.

Upcoming Media Card

  • Added ability to accept sensor data as an object (instead of just a JSON string) so that it can be used in templates, template sensors, etc. The only component to take advantage of this ATM is Plex, but I will be updating Radarr and Sonarr with the same ability and will try to add PR’s for the components that I didn’t write.

  • Now uses full HA URL for components that download images (Plex) so that using this card with the casting feature should work well now.

Plex Recently Added

  • Sensor data is now an object that can be used in templates, etc.

  • Thanks to @RomRider you can now select image resolution sizes. This pairs nicely with the addition above if you wanted to use the images in some creative ways.

  • Fixed issue with missing images when using multiple sensors.

Sonarr

  • The Sonarr API (and Radarr API) have changed slightly and required an update to make sure the correct images were being selected. Haven’t added this to Radarr yet, but it should be there soon.

I’ve noticed that if the item doesnt have a poster image that the item is not included - is it possible to include them?

Someone can help me understanding why is not loading ?
The sensor seems working , but the card is not showing up
thanks