Dashboard/lovelace Music Assistant Support

[kksligh]

I love this platform and see a ton of potential here. Id really like to see a front end card or support created for this application. Especially something mobile friendly. I've tried using an iframe and other workarounds but to no avail. It could literally be the same interface design, just create a compatible front end card that can be used within the dashboard. I understand it can be used as a tab with HA but that breaks users outside the front end experience and puts them into the HA application which is not good UX, especially if you've invested a lot of time building out different dashboards for different devices and users.

Thank you for all this wonderful work. Be glad to test and support in any way.

[OzGav]

I’ve asked the front end dev what he thinks of your request.

[gohigher14]

I love this platform and see a ton of potential here. Id really like to see a front end card or support created for this application. Especially something mobile friendly. I've tried using an iframe and other workarounds but to no avail. It could literally be the same interface design, just create a compatible front end card that can be used within the dashboard. I understand it can be used as a tab with HA but that breaks users outside the front end experience and puts them into the HA application which is not good UX, especially if you've invested a lot of time building out different dashboards for different devices and users.

Thank you for all this wonderful work. Be glad to test and support in any way.

Exactly , it would be so so nice to have this on a lovelace card. Hope that the front end dev want to do this.

[GitHubGoody]

@OzGav Is this request a dupe of this https://github.com/music-assistant/hass-music-assistant/discussions/415 which has twice the votes already?

Either way, I gave both a +1.

I've been struggling with how to make Music Assistant work in my multi-speaker setup and existing UI. I'm not crazy with having to use the sidebar since I hide it for the rest of my HA UX.

After trying to get one of the three primary media player cards...

...to do everything I need, I kept finding all of them are missing at least one feature:

• Media Control: shuffle and repeat, speaker grouping, and all the customization available in the other two
• Mini Media Player: media library browse* and the look and feel many of us love with Mushroom Cards
• Mushroom Media Card: source or media library browse* and speaker grouping

*See here and previous comments for more information on why this is still not possible without some ridiculous card_mod'ing.

It would be great if @marcelveldt, @kalkih, and @piitaya could team up to create one Media Player card to rule them all!

[OzGav]

Some great ideas here. The next version of MA will have an improved interface. I am not sure whether it will meet all your requirements and I don’t think it will be a separate card at this time. Maybe like in that other thread you could mock up some ideas that might serve as inspiration to the front end devs…?

[GitHubGoody]

You bet. The dashboard view I'm piecing together could probably double as a mock-up showing the limits of how far a non-coder can take the current options without further frontend development and integration.

[Swerfer]

I love this platform and see a ton of potential here. Id really like to see a front end card or support created for this application. Especially something mobile friendly. I've tried using an iframe and other workarounds but to no avail. It could literally be the same interface design, just create a compatible front end card that can be used within the dashboard. I understand it can be used as a tab with HA but that breaks users outside the front end experience and puts them into the HA application which is not good UX, especially if you've invested a lot of time building out different dashboards for different devices and users.

Thank you for all this wonderful work. Be glad to test and support in any way.

You can use MA on a Dashboard in a IFrame card. I used Edge and right clicked on the MA dashboard and clicked 'Inspect'. There I searched for the IFrame url, see screenshot:

Result (top-right):

[mbrevda]

This only works for users who are Administrators. If using a restricted user, this solution wont work

[marcelveldt]

Development of a custom card for HA is definitely on the wishlist but I do not have time to work on that any time soon. It will definitely not have any priority before 2.0 stable is released. After that we can have a look if there's enough user demand. So until then you will have to do with using MA's own interface or just use default HA cards.

What I use myself is a media card for the group player and then entity rows for the child players within the group for easy power and volume control. i always play to the group player(s) and just power on/off players in the rooms.

[JohnnyCarcinogen]

Would you mind elaborating on how you use a "media card for the group player"? I've got a Sonos system, and that would be great if it was all in one, but so far all I see are the individual speakers.

[codemonkey2k5]

You can create and use groups by adding a "Universal Group Player" from the add player section in settings.

[jazzyisj]

My media UI might be of interest here. I use variations of the mini-card depending on the player state.

If a single player is playing a stream, the player opens up and displays the controls. If a group is playing, the sub members only show the volume control and the group media player opens up and shows the controls.

It isn't a simple setup. You'll have to set up some template sensors to help determine the player states and use a whole whack of conditional cards. But it does work well once it's set up.

In the screenshot below I have both a group and a single media player playing different streams so you can see how it works.

If anybody is curious I can provide more details.

EDIT: Details for that Play Media card on the bottom left.
https://github.com/orgs/music-assistant/discussions/2990

[aschwalb]

This is the exact issue I have. I have built a nice UI for my wife but in order to use MA she has to know to drop out of the ui and find the MA on the left. Not good UX. I have a whole home audio (HTD) with audio zone controls but not way to easily select music. I like what you have started here and would like to replicate. I would live the MASS UI just embedded in my normal dashboard or sections of it.

[potelux]

I detailed an idea ("super cards") that might make a custom dashboard card easier here.

Additionally, I created a feature request in Home Assistant to allow this type of card.

If you think the "super card" idea is a valid solution to this problem, let me know. I am considering making it my holiday project and would like to know if there is genuine interest.

[felipetoffolo1]

I do think that just embedding MASS is probably the easiest solution.

You can even use single cards, or multiple cards for other things.
Trying to add extra customization to the frontend might make it possible to to a lot.

• Supporting routes to be served without the "Main Frame". Ex: having a /browser?standalone=true&player_target=my_playes where it shows the browser view without all the navigation around. That would make it possible to add just that to a card, and allow people do compose a dashboard on different ways
• Supporting themes. Basically just allow for community themes for people to go crazy.

I'm a frontend eng. So I can help with that. I'm not sure how the contribution process work for the project.
But I think that I could provide the route/query param solution with relative easy, if that's something the team here would like.

[OzGav]

Info is now in the new beta version of the docs. Double scroll bar has been noted

[felipetoffolo1]

@jazzyisj @OzGav there is some kind of cache in place I think.

I was able to use

type: horizontal-stack
cards:
  - type: iframe
    url: >-
      http://192.168.86.38:8095/#/home?player=hifiberry&showFullscreenPlayer=true
    aspect_ratio: 100%
  - type: iframe
    url: http://192.168.86.38:8095/#/browse?player=hifiberry&frameless=true
    aspect_ratio: 100%
    visibility:
      - condition: screen
        media_query: "(min-width: 768px)"

but if I change the player manually and reload I need to open the devtools and select "disable cache" in the network tab.
The same does not happen when I run in dev, so maybe we have some cache layer somewhere?

[OzGav]

@felipetoffolo1 wouldn’t this be a HA or browser problem though? Unless you can force disable the cache?

[felipetoffolo1]

@OzGav I was able to reproduce outside of HA.

I think it's a vue-router thing

[felipetoffolo1]

@OzGav here music-assistant/frontend#808

[jbega]

@felipetoffolo1 , @OzGav, @jazzyisj Could that cache you mentioned have existed before the update? I've noticed a few weeks

• If using -> http://xx.xxx.xx.xx/#/artists?frameless=true&targetPlayer=Cocina (Whether it's an artist, a playlist, or any selection other than 'home') -> show last (or none)player page

-- If using first -> http://xx.xxx.xx.x/#/home?frameless=true&targetPlayer=Cocina and then use http://xx.xxx.xx.x/#/artists?frameless=true&targetPlayer=Cocina -> shows correctly player cocina web

[felipetoffolo1]

@jbega we are not using targetPlayer anymore. Just player

[jbega]

@felipetoffolo1 Yes, I'm aware that it's no longer used, that's why I mentioned that "before" the update it worked like that and had that behavior. I was saying it in case you were seeing the same behavior with the new way, just in case it was helpful.

@missanhome I see that when you have the card/panel horizontally, the player's action square/button (rectangle below) disappears... it happens to me too, does anyone know how to make it not disappear? It's a convenient way to switch players without many clicks

**Besides, I don't know if this has happened to anyone else:

1- In dashboard panel mode config (Ha web-PC), the frameless function doesn't work. if its set on horizontal layout, it works with vertical menu

@felipetoffolo1 example code

2- I've never been able to hide the horizontal menu, only the vertical one (although it takes a couple of clicks).

@jazzyisj example code

[missanhome]

@jbega,
If you don't tell, I won't even recognize the disappearing Player box. 😄
However when I checked yesterday I noticed that it seems the let's call "What's playing" view is higher. If I set the aspect ratio to e.g. 75% the Player box appeared. This unfortunately affects the main page view as well, but as a workaround it may be good for you.

It would be a very good feature to have some kind of scaling/resizing of the internal content. I mean here do downsize the content to see the artists/albums in smaller scale, having more on the main page..

If this is in place, it would be very much appreciated if someone would tell how to achieve that. Thanks.

[jbega]

@jbega, If you don't tell, I won't even recognize the disappearing Player box. 😄 However when I checked yesterday I noticed that it seems the let's call "What's playing" view is higher. If I set the aspect ratio to e.g. 75% the Player box appeared. This unfortunately affects the main page view as well, but as a workaround it may be good for you.

Thanks, I'll try it that way

It would be a very good feature to have some kind of scaling/resizing of the internal content. I mean here do downsize the content to see the artists/albums in smaller scale, having more on the main page..

This would be great because in a Ma dashboard we're testing, when viewed on a tablet, the elements inside the iframe (e.g., artist photo) are quite large (unlike the menus, which are the correct size

https://github.com/orgs/music-assistant/discussions/2601#discussioncomment-11776538

https://github.com/orgs/music-assistant/discussions/2601#discussioncomment-11784742

The videos, which are captured directly from the PC screen, maintain the correct aspect ratio and scale when viewed

[missanhome]

First of all, thank you for your comments. Here's a little update on how it went after a few hours of trial and error:

• No matter how I tried I could not put the MA's Home screen onto a HA card or a HA view if the server was installed as a Home Assistant Add-on (just as @jazzyisj mentioned).
• Finally I ended up installing the server as a Docker image to my Synology NAS, but at my workplace I could not get it work remotely (first try with Docker, no clue how to expose to outside world).
• At home on local network I could configure the music provider (Tidal) and player (Chromecast) easily on http://nas_local_address:8095.
• Then I started to try adding it as an iFrame card using different View configurations, layouts, aspect ratio, various earlier mentioned ?frameless=true URLs.

I've ended up with this:

Devices I use: RPi 4 with Home Assistant OS, wall mounted Android tablet with HA Companion App as the main control panel, Google Nest Audio to cast music to.

It's definitely not the most sophisticated and nicest solution, but it is what I wanted to achieve: having the full functionality of MA on a HA dashboard view, under Wallpanel's screensaver umbrella, preferably on full screen on my tablet.
It is working locally only, though I did not think on casting music to home during holiday, so it's OK from my side.

If anyone is interested, this is the config I used:

• prerequisite: layout-card from HACS
• HA View configuration: Horizontal (layout-card)
• Card configuration, where 192.168.1.6 is my NAS's local IP, aspect ratio and width correspond with the tablet's size:

type: custom:layout-card
layout_type: custom:vertical-layout
cards:
  - type: iframe
    url: http://192.168.1.6:8095
    aspect_ratio: 55%
layout:
  width: 1320

Sorry for the long post, certainly for most of you this is obvious, but for noobs as myself it may be useful at least as a starting point.

[jazzyisj]

I didn't say it didn't work with the addon, I said it doesn't work if you access it with ingress url. You have to turn on the music assistant web server and use that url.

[missanhome]

Ah... all this hassle with the Docker while it would work with a simple setting... 🥲
Thanks for adding this info. I will not turn back at this point, but for others it may be useful. At least I learned something new (Docker).