YouTube Music card

[OptimalHome]

I’ve enjoyed @JKW’s ytube_music_player for a while now and I built this card to help get the most out of that integration.

GitHub - pathofleastresistor/polr-ytube-media-card

A sample config looks like:

type: custom:polr-ytube-playing-card
entity_id: media_player.youtube_music

When the player is off, you get a full browsing experience including search. You can also change the output speaker in the top right.

Once you start listening to music, you also get a full media playing experience including a list of what’s currently in queue. This is especially useful for when you launch a playlist, radio, or album.

You still have the browsing experience under the “For You” tab.

The list will let you drill into playlists, albums, and artists to see their songs. Depending on the row, you can play the music, drill into, or launch a radio.

If you want the grid layout set coverNavigation: true in the card editor. By default the list layout will be used.

Reminder: You must have already set up ytube_music_player before installing this card.

[peterf9 (Peter)]

this card is awesome!! it’s possible to choose which players will show in the list to select? thanks in advance

[OptimalHome]

Thanks - I’m open to adding configurable settings, but haven’t yet as I worked on getting the experience figured out.

Are you thinking of something like a setting on the card?

Proposed setting

type: custom:polr-ytube-playing-card
entity_id: media_player.youtube_music
speakers:
  - media_player.source_1
  - media_player.source_2
  - media_player.source_3

[peterf9 (Peter)]

Just that… making easier for the family.

[alexandrechoske (Smart Chosk)]

One of the best cards i have ever seen on Ha community, thanks a lot for this, im a youtube music consumer and missed so much something like this!

[OptimalHome]

v.1.6.1 is out! It’s got lots of new layouts and styling. The biggest addition is the cover based layout that @JKW had requested.

[JKW (Kolja Windeler)]

I’d say ‘suggested’
But this is really big. I love this update. Great job @OptimalHome

It is really helpful for the new “home” area that was added in the last beta

[VietNgoc]

Hi OptimalHome, first of all I want to thank you so much for developing and releasing this great card. A card like this next to the custom spotify card was definitely missing for a long time and bonus we have the search function!

I really want to ask if it’s possible to add more features to the card, where you can set just a thumbnail playlist, and hide the player with the possibility of selecting it for random playback. Similar to how the spotify lovelace card works now.

I now have a playlist setup with spotify in my dashboard, and I’ve been wanting something similar for youtube music for a long time. Thank you in advance for considering and possibly adding this feature

[OptimalHome]

Just merged the PR for this so it’ll be in the next release.

[OptimalHome]

So I have been laying the ground work for this, but it’s not fully there.

With the grid layout, I added a config option called ‘initialAction’ where you could configure the “For You” page to start on something like a specific playlist.

initialAction:
  media_content_id: 'RDCLAK5uy_mfdqvCAl8wodlx2P2_Ai2gNkiRDAufkkI'
  media_content_type: playlist

It’s not well documented yet since it’s a pretty advanced setting, but you could use that to have the card load a specific playlist.

[OptimalHome]

And if you’re using card_mod, you can get the rest too:

card_mod:
  style: |
    ha-card {
      height: 400px !important;
    }
    .background {
        background-size: cover !important;
    }
    polr-media-control, polr-ytube-playing, polr-tab-bar {
      display: none;
    }
    polr-ytube-browser {
      display: block !important;
    }

Edit: I do need to launch the fix for this issue - support playing a playlist from playlist page · Issue #21 · pathofleastresistor/polr-ytube-media-card · GitHub so you can get the play button.

[OptimalHome]

Hi everyone - I wanted to prepare folks for a somewhat meaningful change to the background of the card.

Right now I try to keep the card light when in light mode and dark in dark mode. With the upcoming change, the card will work consistently whether HA is in light or dark mode. The benefit is a more pronounced album cover shown on the card. It’s prominent much like the mini media player.

[VietNgoc]

thanks for the quick response, I modified the card for my need I need a little help, I want to edit the background for the grid-item .title , I can’t find the specific $ for card_mod, how do I get to the elements?

type: custom:polr-ytube-playing-card
entity_id: media_player.ytube_music_player
coverNavigation: true
initialAction:
  media_content_id: RDCLAK5uy_mfdqvCAl8wodlx2P2_Ai2gNkiRDAufkkI
  media_content_type: playlist
card_mod:
  style: |
    ha-card {
      height: auto !important;
      aspect-ratio: 1/1 !important;
      padding: 0 !important;
      margin: -1px !important;
    }
    .background, .header {
      display: none !important;
    }
    polr-media-control, polr-ytube-playing, polr-tab-bar {
      display: none;
    }
    polr-ytube-browser {
      display: flex !important;
    }
    .title {
      background-color: #0000008c !important;
      backdrop-filter: blur(20px) brightness(0.8) !important;
      text-shadow: 0px 2px black;
    }

I tried to add custom:swipe-card as another card, now I don’t know if it’s a problem with my yaml or a bug. The search field doesn’t work and after interaction the whole placement is messed up. I’m sending a screen, for info…

[OptimalHome]

I haven’t used the swipe card before but some elements are absolute positioned which may be clashing with the swipe card itself. You’re welcome to open an issue in GH - GitHub - pathofleastresistor/polr-ytube-media-card.