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 #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]

If you join the discord server there is a devs support channel where you can ask questions

[marcelveldt]

All help is welcome, especially frontend!
Here is the frontend repo, dev instructions included. If you are somewhat familiar with typescript and Vue, you should be going within minutes.

https://github.com/music-assistant/frontend

[jbega]

• 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

@felipetoffolo1 Would you be able to provide more details on this? Thanks

[OzGav]

There is not much more to say than what is described. It will be added in an upcoming release