Support for Media Browser

[peteS-UK]

Hi Anton

I know we talked about this in another thread, but I realised I hadn't actually added an idea for it as I intended - sorry about that.

It would be great to add a button to pop up the media browser, same as in the default media card.

This is also in the maxi media card, if that's useful

[antontanderup]

I would love to do this. I actually looked through the maxi repo the other day trying to figure out what they call to show the thing, and the way the code is structured I ended up giving up on it.
There is, as far as I know, no supported way to directly open the media browser popup (like there is with opening Assist).

[peteS-UK]

hmm - home-assistant/frontend#11300

[peteS-UK]

"Maybe using the media selector and clicking on it ?
I also have an approved arch discussion pending implementation to allow that selector to work without picking an entity first"

[antontanderup]

Alright. So it seems there’s not really a, non hacky, way to do it.

So, and this goes for any interaction between the card and homeassistant, I don’t really want to implement anything that is not possible with an action. My main reason is that I don’t want to wake up one morning to the card not working because of a homeassistant update.
For actions, breaking changes are always announced, because they might break people’s automations.
Another thing to consider is if I implement some unsupported thing, it might just one day not work, with no alternative solution. In that case I can’t even release a fix.

I think a better solution is probably making sure that search is good enough that you can achieve 90% of what you would want to achieve with the media browser. Getting there will probably take a bit, but search is really new anyway so I think that is fine.

[peteS-UK]

Yep - think I agree with you on all fronts there. I've tried ask some follow on questions, but am not expecting progress tbh sadly. One response was couldn't we use a media selector, but not sure I understand how that would work at all. The comment was from Paulus though, so I'll try and see what he means.

[antontanderup]

I’ve ‘semi’ added media browser in the latest beta. When not entering anything in the search fields you can see all items. You cannot expand them, so no opening an album to play a specific song. For this reason I also only show items with can_play true.
So basically you can choose, at a card config level, what you want to browse.

[antontanderup]

Media browser landed in the latest beta. Enjoy :)

[jimmyfitz]

Hey Anton, did you do something "proper" or is this still the hacky method you mentioned back in June? (I'm not fussed either way, the reason I'm asking is that I love your implementation and have been trying to work out next steps for my media dashboard (which currently uses mini-media-play for a very minimalist view but does not support media browsing e.g. the below comparison)

[antontanderup]

I wrote a complete media browser UI. So I think it's proper :) It was the only way as it's impossible to open the built in media browser from a custom card.

[jimmyfitz]

Replied outside of thread 🤦‍♂️ so linking for your reference.
#100 (comment)

[jimmyfitz]

Well you've done a fantastic job. As you can probably tell from my related posts, I'm trying to hide as much as possible for a very minimalist look, but I'm also trying to use mediocre player since your media browser is the only one that I've found that works properly 👏 (even the built-in HA media player keeps auto-closing the media browser every second or two)

[jimmyfitz]

@antontanderup apologies, to test the beta I needed to drop my current setup and download the beta... and then I got busy.
I'm try and test this over the weekend and come back to you asap.

[jimmyfitz]

Hi @antontanderup, I spent a bunch of time messing with this over the weekend, but haven't managed to successfully get card_mod to hide the button. I've been using the below method, but have tried various alternatives (such as putting it within ha-card or putting a . or an ha-button: before the name etc etc).

card_mod:
          style: |
            mmpc-compact-shuffle-toggle {
              display: none;
            }

How am I meant to be calling it?

[antontanderup]

It's an id so you target it with #

[jimmyfitz]

🤦‍♂️ thanks. Done, and that worked on the first test. I'll now test properly.

[jimmyfitz]

[bchevreau]

@antontanderup Sorry to necro this, but did you end up implementing IDs related to items in the media browser options?

I would really love to be able to hide some of those media browser items that make no sense for a music player. I always struggle with card-mod so a little intro would be much appreciated if they're there! But I couldn't find any with the inspector.

The ones in Red below in particular, altho I wouldn't be against killing Podcasts, Audio books and even Radio stations if I could. I assume that's a struggle to cover all media sources with specific IDs, so maybe adding a generic but dynamically increasing ID would be a fix. Example : mediatype-1, mediatype-2, mediatype-3...

I would assume they appear almost always in alphabetical order beyond the "fixed" ones you set yourself, so by elimination (show if x, y or z) or with some sort of template (show if id is 1 < mediatype-x < 7) would be workarounds.

[bchevreau]

Oh that makes a lot of sense ! But the media browser you made is not Music Assistant's one, am I right? Or is it?

At the moment, just a toggle or small option to use the music assistant browser for media browser (and search eventually) would be perfectly acceptable as well imo, if it's more "plug and play" for you dev-wise.

Regarding more "custom" approach for selecting media categories, I am fairly certain it's often more a matter of hiding than customizing.
I would assume the order of importance goes like this, at least imho:

Hiding (since by default you show all) > Ordering > Renaming > Customizing (icon, name, etc)

Hiding

Being able to hide is likely the biggest painpoint: as you saw in my screenshot, it gets messy fast. If that's the one thing you implement, I'd say this would go first, and however you can: even slightly hacky thru card-mod custom CSS is fine as long as we have a way.

Ordering

Ordering is more of a convenience, and likely to appease the more annoyed crowd. People who are used to "reach for a specific type" on a frequent basis are often more irritated by having to scroll or pick from the bottom, so it covers that :-)

Renaming

That goes hand-in-hand with customizing, and I'd say it's a wash between the 2. I only mentioned that for exhaustivity because I saw that's a feature you offered for Search.
Full customization is often an expected byproduct of cards and entity options in home assistant, so you'll likely have people wondering "why you built a custom media browser but I can't change my Jellyfin folder icon to a pretty triangle svg I made???" and the likes... Although if I'd take a wild guess, that's possibly something you pull from HA and should be managed there (correct me if I'm wrong) rather than directly in your app.

EDIT: The css ID injection you mentioned for other items in your cards (like buttons) for the previous case, I think, is still a fairly stable and flexible way if you implement it for Media Browser though. It's not going to be ideal, since you still have to go the card-mod route unless you pull out a crazy "bunch of conditions on every element" like you said before, but maybe that's an acceptable route. "The best is the enemy of the good" as we say in French 😅

To that end, if you want to be safe, you can go hybrid: normalized ID names for standard folders that would always be there (e.g media-artists, media-tracks, media-playlists...) and index-based or numbered-ascending for all the weird folders (stuff that gets added thru integrations and the like, stuff like the tapo or jellyfin folders in my screenshot)

[antontanderup]

There is no music assistant specific media browser in the card, so implementing that would be a big task, and I'm unsure the value it brings, since you can already browse the library using the standard browser. So I would rather improve the regular media browser so everyone can benefit instead of just music assistant users :)

A fairly quick thing i could do is just automatically add an id with the name of the 'folder' to each root folder in the media browser. Then it would be fairly simple to do a display:none with card-mod.

Regarding other customization of media browser. The only reason i made the custom media browser in the first place was because it's impossible to launch the built in homeassistant media browser from a custom card. So I'm fairly happy to have feature parody with the built in browser (which also doesn't let you remove folders or rename them).

[bchevreau]

Ok, I understood a lot of things backwards earlier... And I totally agree with all points on your last comment then! And indeed adding an ID be default with the name of the "folder" makes perfect sense! And that would be a huge step forward already imo.

I would prefix those IDs with something mediocre-specific just in case though, you might run into unique id errors fast on things as trivial as "artist" or "playlist" and such.

PS edit: i am in no way downplaying the huge thing you did for this custom media browser, it is an insane task, just wanted to clear that out, and I'm really grateful of the work you did and how responsive and willing you are. I'm mostly trying to help out on brainstorming and bouncing ideas, I hope this helps, but feel free to tell me off anytime! I would totally understand haha.

[antontanderup]

I've added ids for media folder items that includes their name in the latest beta v0.31.0-beta.2
They are prefixed with mmpc-media-item- and then the first 8 chars of the name (without spaces).

[e1miran]

Sorry to necro this, but did you end up implementing IDs related to items in the media browser options?

I would really love to be able to hide some of those media browser items that make no sense for a music player. I always struggle with card-mod so a little intro would be much appreciated if they're there! But I couldn't find any with the inspector.

The ones in Red below in particular, altho I wouldn't be against killing Podcasts, Audio books and even Radio stations if I could. I assume that's a struggle to cover all media sources with specific IDs, so maybe adding a generic but dynamically increasing ID would be a fix. Example : mediatype-1, mediatype-2, mediatype-3...

@bchevreau
Sorry to dig up an old thread, but I was successful in hiding those types of buttons in the media browser tab by targeting the image sources.

card_mod:
 style: |
   button:has(img[src*="/camera/logo.png"]) {
     display: none !important;
   }
   button:has(img[src*="/ai_task/logo.png"]) {
     display: none !important;
   }
   button:has(img[src*="/image/logo.png"]) {
     display: none !important;
   }
   button:has(img[src*="/media_source/logo.png"]) {
     display: none !important;
   }
   button:has(img[src*="/image_upload/logo.png"]) {
     display: none !important;
   }
   button:has(img[src*="/reolink/logo.png"]) {
     display: none !important;
   }
   button:has(img[src*="/tts/logo.png"]) {
     display: none !important;
   }
   button:has(img[src*="/xbox/logo.png"]) {
     display: none !important;
   }