I’m using Mopidy with MusicBox WebClient in Home Assistant to control my Multiroom audio setup at home.
I find the MusicBox WebClient interface perfect for my use, well almost perfect.
I’m using an iFrame to load the MB WebClient.
What I would like to do is shrink the height of the “buttons” (Now Playing, Queue, Playlists et al) so they take up less realestate. If I could shrink them by half their current size I could get all 6 in the frame without a scroll bar. Maybe move the icon to the same line as the “button title”?
I didn’t know if this would count as an ‘issue’ to open on the github page.
I get what you are saying but what would be the solution? Halfing the height is very specific to what you want. What if in the next release we add a load more buttons?
Would it be helpful if you could force the small-screen view instead? I think the buttons are automatically hidden in that view.
Yes half height buttons are a very specific use case, likely by just me
I’m not sure how the button sizes are controlled but is there a way to make them dynamic based on the screen size with a max and min size restraints? I know this is possible with CSS but I don’t know what’s under the hood for MB WebClient.
If I were to go poking around to see what I might be able to do, do you know where I might find the MB WebClient files on my computer?
Probably. Much of the interface is already dynamic based on screen size but I think only for width and general arrangement. These media-queries are somewhere in the css. If you do a sudo mopidyctl deps it’ll point to where the mopidy-musicbox-webclient files live.
if I comment out the width and float I get small boxes in 2 columns which I think might work perfectly for me.
I found the entries in the jquery.mobile.flatui.css file and commented them out.
I’m not seeing any changes though, the entries I commented out are still showing up and the layout hasn’t changed.
Do I need to reload something? I’m not overly familiar with Python and virtual environments.
I can’t remember if you need to restart Mopidy, I don’t think you do… Check Chrome isn’t caching these files, I think there’s a tick-box somewhere in the Chrome developer tools to disable caching while dev tools are open.
I tried restarting Mopidy but that didn’t change things.
There must be another location for the CSS entries I commented out as they are still showing up when I go into the console.
edit: I found a second entry hiding in the .min.css file
Is it just one browser that you’re talking about? eg a tablet on the wall? Some browsers allow (or used to allow) you to add custom CSS for specific sites. I think there are currently add-ons for Firefox that let you do it.
That’s a great idea, unfortunately it’s for a number of devices.
I’ll just need to keep in mind that when I update I will need to update the css files.
Here’s what I ended up with in the end. I like it as I was able to eliminate scrolling.
How are you using it with Home Assistant? Is Mopidy running as a Home Assistant add-on? If so, are you using the ingress feature to load it within the HA UI?
I’m not using Hass.io so no add-on for mopidy. I’m using an iframe in HA to display the Musicbox Webclient.
The iframe is inside a vertical-stack card with entities under the iframe for volume control for each snapcast clients. I had a master volume control but that seems to be ‘broken’ right now.
