UPDATED: Lovelace Card and Package For Playing Media Library Items from Home Assistant UI

[jazzyisj]

- Package has been updated to automatically populate media entities with mass.get_library!
- 2024/12/01 - Bugfix and small update

I have created a package with all the of the entities necessary to select, save, and play user specified Music Assistant media items from a card in the Home Assistant UI, and another file containing the YAML for the associated lovelace card. The only item to change to utilize this package in their own HA config are to list your Music Assistant media players where marked with a #TODO tag in the package.

NOTE: Fold Entity Row and Template Entity Row are both required for the example lovelace card.
These lovelace plugins are available on HACS.

Play MASS Media - Package
Play MASS Media - Lovelace Card

In my own config I use multiple versions of these entities and lovelace card to create various "media presets" that can be recalled and played automatically in response to selected events (morning, sleep, arriving home etc.) or at the click of a button. If you're interested in that, let me know I am happy to share.

[raevenlock]

Love this! Can't get it to work though, haha
Probably something I have missed/doing wrong. I can't get it to find any media_players in the drop down list.
I have tried to add my own of course, and tried to add some radio channels and albums and so on, but can't get it to work.

Right now
Media Type is set to Radio
MASS Radio is set to my own Asterix Radio
Media Player ... the list is empty
Entity not available: input_number.media_volume_play

Can't figure it out.

(Music Assistant is running fine)

[jazzyisj]

OK, input_number.media_volume_play is easy to fix. It should be input_number.mass_volume. Copy and paste error on my part, I've updated the gist. My apologies, it works on my system because I do have an input_number.media_volume_play entity so I didn't catch the error.

As for the media player dropdown list, did you reload automations, templates, and groups or restart Home Assistant? If you have and you still don't have any media players in the dropdown can you copy this and paste it into the Developer Tools Template Tool and tell me what the result is?

          {{ states.media_player
              | selectattr('attributes.mass_player_id', 'defined')
              | map(attribute='entity_id') | list
              | select('has_value') | list }}

[raevenlock]

Hey and thnx for the reply!
The input_number.media_volume_play issue, was as you said a pretty easy fix... 👍

BUT, for my other problem.. I am just bad and I should feel bad! haha
I had forgotten that I had changed HA to be in UI mode (or whatever its called) a while back. So I can't just copy and paste, I need to actually create a new automation in the UI and paste your code in there instead and create a templete in the UI and so on.

So a bit more work on my part, I guess :)
I will be back with results.. probably during the weekend

Btw, your code for the "states.media_player" thing, that I should paste in the developer tools, is working fine! It listed all my media_players as your screenshot.

[jazzyisj]

If you enable packages in your configuration.yaml you can just copy the package file to that directory (usually /config/packages). You won't have to add the templates, automation or group in the UI.

You will need to paste the yaml for the lovelace card wherever you want it on your dashboard like you would any other card. If you are using the UI for your dashboard config create a new entities card and click show editor at the bottom. Copy and paste the code there.

https://www.home-assistant.io/docs/configuration/packages/

[raevenlock]

If you enable packages in your configuration.yaml you can just copy the package file to that directory (usually /config/packages). You won't have to add the templates, automation or group in the UI.

You will need to paste the yaml for the lovelace card wherever you want it on your dashboard like you would any other card. If you are using the UI for your dashboard config create a new entities card and click show editor at the bottom. Copy and paste the code there.

https://www.home-assistant.io/docs/configuration/packages/

Yeah, I will do it like this instead. Probably smarter.
Thanks for your help so far!

[tomadan1968]

@tomadan1968 why are you writing in my post? Please start your own thread. Nobody likes a thread-stealer

Sorry, i corrected it, thank you!

[raevenlock]

If you enable packages in your configuration.yaml you can just copy the package file to that directory (usually /config/packages). You won't have to add the templates, automation or group in the UI.

You will need to paste the yaml for the lovelace card wherever you want it on your dashboard like you would any other card. If you are using the UI for your dashboard config create a new entities card and click show editor at the bottom. Copy and paste the code there.

https://www.home-assistant.io/docs/configuration/packages/

FYI got it to work. Thanks again and great work! Apriciate it

[tomadan1968]

I still have two problems, one the volume does not increase or decrease when I pull the slider and the second every time I change the playlist, a radio station or any media the volume of the player I am playing comes to zero and I always have to go to the respective player and increase the volume because nothing is heard, please help me to solve these 2 problems if possible, thank you!

[jazzyisj]

This card only starts the media play. After the media has started you control everything with the media player. You could write automations to control the media player with this card's controls, but that is beyond the scope of what we're doing here.

[tomadan1968]

Ok, thank you !

[potelux]

I recently detailed a solution that could make sharing this sort of card much easier. That comment can be found here.

Additionally, I made a feature request on Home Assistant to make this all possible.

If you think this feature would be helpful in sharing cards like this with the community, let me know. I am looking for a project to do over Christmas.

[skavan]

This is fantastic and got me thinking.

1. I expanded your mass_play_meda.yaml card with a new section:

- trigger:
    - trigger: homeassistant
      event: start

    - trigger: event
      event_type: event_template_reloaded

    - trigger: state
      entity_id:
        - input_text.mass_playlist
        - button.mass_update_media
      to:
    
    - trigger: state
      entity_id:
        - input_text.mass_playlist_search
    action:
      - action: mass.get_library
        data:
          favorite: true
          limit: 500
          media_type: playlist
          order_by: play_count_desc
          search: |
            {{ states('input_text.mass_playlist_search') or null }}
        response_variable: mass_playlists

      - variables:
          playlists: |
            {% set playlist_list = namespace(info=[]) %}
            {% for playlist in mass_playlists['playlists'] %}
              {% set provider_domain = playlist.provider_mappings[0].provider_domain if playlist.provider_mappings else 'unknown' %}
              {% set provider_url = playlist.provider_mappings[0].url if playlist.provider_mappings else '' %}
              {% set image_path = playlist.metadata.images[0].path if playlist.metadata.images else 'unknown' %}
              {% set playlist_list.info = playlist_list.info + [{
                'item_id': playlist.item_id,
                'provider': playlist.provider,
                'name': playlist.name,
                'uri': playlist.uri,
                'media_type': playlist.media_type,
                'provider_domain': provider_domain,
                'provider_url': provider_url,
                'image_path': image_path
              }] %}
            {% endfor %}
            {{ playlist_list.info }}

2. I also created a new input: input_text.mass_playlist_search
3. And then below is the yaml mode view. It dynamically creates playlist buttons. You can apply a search and when you click on the buttons...its launches the playlist.
4. A bit of hard coding that needs to be fixed. But between us all, we should be able to create a little library of MA popups in HA. Screenshot at the end of this post.

button_card_templates:
  base:
    layout: icon_name
    styles:
      card:
        - height: 42px
      grid:
        - grid-template-areas: '"i n "'
        - grid-template-columns: 40px auto
        - grid-template-rows: 1fr
      img_cell:
        - justify-content: start
        - align-items: start
        - height: 44px
        - margin-top: -11px
      icon:
        - width: 30px
        - height: 30px
        - justify-self: start
        - padding: 0px 0px
        - margin-left: 8px
        - border-radius: 12px
      name:
        - padding: 4px 0px 0px 8px
        - max-width: 92%
        - justify-self: start
        - align-self: flex-start
        - font-size: 13.5px
        - font-weight: 400
        - margin-top: -2px

views:
- title: Music Assistant Playground
  type: custom:grid-layout
  layout:
    grid-template-columns: 100%
  cards:
    - type: entities
      entities:
        - input_text.mass_playlist_search
    - type: custom:config-template-card
      variables:
        playlist_options: |
          () => {
            const options = states['select.mass_playlist']?.attributes?.options || [];
            return options;
          }
        playlists: |
          () => {
            const playlists = states['sensor.mass_playlists']?.attributes?.playlists || [];
            return playlists;
          }
        alphabet: |
          () => {
            return Array.from({length: 26}, (_, i) => String.fromCharCode(97 + i));
          }
        createbuttons: |
          (playlists) => {
            if (playlists.length === 0) {
              return [{
                type: "custom:button-card",
                name: "No Playlists Available",
                template: ["base"],
                entity: "sensor.ui_remote",
                icon: "mdi:alert",
              }];
            }
            return playlists.map(playlist => {
              // const picture = playlist.image_path.startsWith('/') ? '/local/generic_playlist.png' : playlist.image_path;
              const picture = (!playlist.image_path.startsWith('http')) ? '/local/generic_playlist.png' : playlist.image_path;
              return {
                type: "custom:button-card",
                name: playlist.name,
                template: ["base"],
                entity_picture: picture,
                show_entity_picture: true,
                tap_action: {
                  "action": "perform-action",
                  "perform_action": "mass.play_media",
                  "data": {
                    "media_id": playlist.uri,
                  },
                  "target": {
                    "entity_id": "media_player.ma_connect_basement"
                  }
                }

              };
            });
          }
      entities:
        - sensor.ui_remote
        - sensor.mass_playlists
      card:
        type: custom:auto-entities
        entities: "${createbuttons(playlists())}"
        card: 
          type: custom:layout-card
          layout_type: custom:grid-layout
          layout:
            mediaquery:
              '(min-width: 900px)':
                grid-template-columns: repeat(5, 1fr)
              '(min-width: 420px) and (max-width: 899px)':
                grid-template-columns: repeat(2, 1fr)
              '(min-width: 300px)':
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
            grid-template-rows: auto
    - type: custom:button-card
      template: base
      name: > 
        [[[ return states['input_text.mass_playlist_search'].state ]]]

[tomadan1968]

Hi, can you show us the complete code for your mass_play_media.yaml? Thank you!

[larsalthof]

I am trying this, and 3 entities seem to be missing. Did I misspell something somewhere?

[jazzyisj]

You used the package as is? Have you reloaded all components or restarted HA?

[larsalthof]

You used the package as is? Have you reloaded all components or restarted HA?

I used it as-is except for updating the media players. I did restart HA as well.

[larsalthof]

You used the package as is? Have you reloaded all components or restarted HA?

I used it as-is except for updating the media players. I did restart HA as well.

I changed the card to reference these instead:
select.mass_media_player
input_boolean.mass_repeat
input_select.mass_enqueue_mode

So far, so good

[jazzyisj]

Oh shoot, I uploaded an out of date card again. Second time I've done this now. Ugh. I don't catch it because those entities DO exist in my config...

I just updated both the package and the card gists to fix this issue and a couple of other tweaks. If you have time and are willing do you updating your package and lovelace card to the new version and testing it for me? Trying to avoid anyone else experiencing this frustration. My apologies btw.

[larsalthof]

Looks like it is working. I am a little embarrassed that it took me that long to identify that the select is generated dynamically.

Thank you