Markdown Cards to display Now Playing information from media players

Share your Projects! Dashboards & Frontend
1

I’ve been using markdown cards inside conditional cards to display information in a simpler way that I can get from other cards or integrations, and I am wondering if I’m missing cards that already do this?

image

The Flight Card was made using a Tidbyt applet as inspiration, and then I created a Now Playing applet using a similar format, so I figured I’d add it to my HA dashboard and I like it

image

I don’t like the media player cards for this because I don’t want controls, I just want information about what’s playing in a specific Media Player.

As I was searching for similar things I discovered a custom Sonos card that I now love, and maybe I haven’t found one.

I know there’s Upcoming Media Card, but that doesn’t do what I’m doing here.

The code below pulls data from a Plex Media Player and displays info depending on if it’s a TV Show or a Movie.

{% set player = 'media_player.NAME' %}
<table>
<center>
<tr>
  <td><img src="{{ state_attr(player, 'entity_picture')}}" height="90"></td></td>
  <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>
  {% if state_attr(player, 'media_content_type') == 'tvshow' %}
  <td>
  <font size="4"><b>{{ state_attr(player, 'media_series_title') }}</font><br></b>
  S{{ state_attr(player, 'media_season')}} E{{ state_attr(player, 'media_episode')}}<br>
  {{ state_attr(player, 'media_title') }}<br>
  {% if state_attr(player, 'media_duration') < 3600 %}{{ (state_attr(player, 'media_duration'))|timestamp_custom('%-Mmin', false)}}
  {% elif state_attr(player, 'media_duration') == 3600 %}1hr
  {% elif state_attr(player, 'media_duration') > 3600 %}{{ (state_attr(player, 'media_duration'))|timestamp_custom('%-Hhr %-Mmin', false)}}
  {% endif %}  
  
{% elif state_attr(player, 'media_content_type') == 'movie' %}
  <td>
<font size="4"><b>{{ state_attr(player, 'media_title').split('(')[0] }}</font><br></b>
{{ state_attr(player, 'media_title').split('(')[1][:4] }}<br>
{{ (state_attr(player, 'media_duration'))|timestamp_custom('%-Hhr %-Mmin', false)}}
</tr>
</center>
{% endif %}
</table>
2

This would be a cool way to make a now playing poster for a home theatre.

3

Hi, try mini media player, is what I use. You can display what is playing and hide everything you do not want as controls, icons, name, etc. And still with a tap or long press show the full media player

4

I’ve been using mini media player for a long time but I can never get it to look as minimalist as this. I don’t want controls in some dashboards, I just want information.

5

Oh yeah, getting a now playing poster is pretty easy. Put a screen/tablet somewhere and have the media player image display there. Probably can’t go too big since I don’t think the image resolution of these media art images is very high

6

Yep, is very easy and you can hide all the things you do not want. i display only the poster, the device name, the title and the progress bar.

IMG_0646
IMG_06461920×2560 246 KB

7

There are use cases for both. The mini media player isn’t so mini if you want to show the full artwork, whereas a markdown card can show a poster in any size you need.

Mini Media Player is on top with full-cover-fit and most information and controls hidden
Markdown card is below it with an image size of 90. Can be made bigger, as can the font.

image
image516×672 99.8 KB

I like the smaller footprint for some of my dashboards

2 Likes
8

Can you make or show me the code for this bit than for spotify?

9

It depends on the integration/media player.

Look at what information your media player entity provides using Developer Tools and replace the names of the attributes on my code with what you see.

Your player might not have an attribute called entity_picture, it might be called something else, so just replace that in the code.

10

How did you make just the full movie poster in the top image? When I have this, it crops in so you only see some of the image

11

This one?
image

That was mini media player but it doesn’t always work because of how the card works, I don’t use this in my dashboard, I use the card below it with the poster on the left

12

I have one subview on my wall tablet that has just one card, which is what is playing in my basement cinema room, so I’m trying out Mini Media card and I’ve used Card-Mod now to adjust the scale of the image to object-fit and that seems to help.

      card_mod:
        style: |
          ha-card {
          width: 300px;
          height: 400px;
          object-fit: cover;
          display: block;
          margin-left: auto;
          margin-right: auto;
          }
2 Likes