Announce: Material Skin

[cpd73]

Used LMS for about a year and half now (don’t actually have any squeezeboxes – just a picorePlayer and an Airplay speaker), so thought I’d contribute.

For the past few weeks I’ve been working on a Material style skin for LMS. Screenshots and installation instructions can be found at https://github.com/CDrummond/lms-material The skin has the following features;

• Browsing local music, apps, and favourites
• Music and artist information – accessible via context menu on cover of current track in ‘now playing’ screen. (This might not be the best way to access this, so I’m trying to think of a nicer way without adding to much noise to the screen)
• Drag and drop editing of play queue (i.e. the current playlist)
• Basic player settings; replay gain, don’t stop the music, and alarms
• Light and dark themes

This is not 100% finished – I’d like to add management of group players (create group, delete, etc), but this means modifying the Group Players plugin as well, so will take a little while. It also has the following know issues:

• For search items in the browse view, the search underline goes over bottom nav if scrolled. This looks like an issue with the Javascript library I’m using
• Drag and drop does not work on iOS or Android Firefox. I use a javascript library to enable HTML5 drag’n’drop on mobile browsers, and this seems to not work on iOS. Firefox is not a priority (even though its my main Android browser), due to the fact that WebApp’s work better with Chrome (which is all I use Chrome for)
• Queue not always drawn completely with iOS, dragging up/down causes items to be shown.
• The list of items in the browse page is fetched 100 items at a time, and the next 100 should be loaded when the view is scrolled to the end. However, I have noticed where this has not happened. But whenever I add debug to see what’s happening, it never occurs!
• The Plugins page on LMS always seems to show that there is an update available for the plugin. Anyone got any idea what’s wrong here?

I don't use streaming services such as Spotify, so I have no idea how well it works with these. But (AFAIK) these are all just apps, so they should work...

Let me know what you think :-) ...any help with the known issues would be appreciated.



[Edit] There is now a simple webview wrapper for Android that can be used for Material. https://github.com/CDrummond/lms-material-app/releases contains the list of releases - and the APK for a release can be found by expanding its "Assets" entry.
[Edit] This webview wrapper APK is now on f-droid - search for LMS.

[DJanGo]

+ 1024

[anadigi]

Used LMS for about a year and half now (don’t actually have any squeezeboxes – just a picorePlayer and an Airplay speaker), so thought I’d contribute.

For the past few weeks I’ve been working on a Material style skin for LMS. Screenshots and installation instructions can be found at https://github.com/CDrummond/lms-material The skin has the following features;

• Browsing local music, apps, and favourites
• Music and artist information – accessible via context menu on cover of current track in ‘now playing’ screen. (This might not be the best way to access this, so I’m trying to think of a nicer way without adding to much noise to the screen)
• Drag and drop editing of play queue (i.e. the current playlist)
• Basic player settings; replay gain, don’t stop the music, and alarms
• Light and dark themes

This is not 100% finished – I’d like to add management of group players (create group, delete, etc), but this means modifying the Group Players plugin as well, so will take a little while. It also has the following know issues:

• For search items in the browse view, the search underline goes over bottom nav if scrolled. This looks like an issue with the Javascript library I’m using
• Drag and drop does not work on iOS or Android Firefox. I use a javascript library to enable HTML5 drag’n’drop on mobile browsers, and this seems to not work on iOS. Firefox is not a priority (even though its my main Android browser), due to the fact that WebApp’s work better with Chrome (which is all I use Chrome for)
• Queue not always drawn completely with iOS, dragging up/down causes items to be shown.
• The list of items in the browse page is fetched 100 items at a time, and the next 100 should be loaded when the view is scrolled to the end. However, I have noticed where this has not happened. But whenever I add debug to see what’s happening, it never occurs!
• The Plugins page on LMS always seems to show that there is an update available for the plugin. Anyone got any idea what’s wrong here?

I don't use streaming services such as Spotify, so I have no idea how well it works with these. But (AFAIK) these are all just apps, so they should work...

Let me know what you think :-) ...any help with the known issues would be appreciated.

It refuses to enable the skin from the plugin page!
The Material page still working even thought the skin is not able to enabled.
However, Spotify is not showing the artwork.

[anadigi]

It refuses to enable the skin from the plugin page!
The Material page still working even thought the skin is not able to enabled.
However, Spotify is not showing the artwork.

One more thing! To play radio is not working unless it is save to you favorites to play

[cpd73]

It refuses to enable the skin from the plugin page!
The Material page still working even thought the skin is not able to enabled.

Yeah, that's probably the issue that I'm seeing - I thought it was for updates, but I guess its the enabled status. Never created a plugin before, so there is a great chance that something is amiss here. Be great if someone more experienced could give a quick look at the plugin / xml side and see what's wrong?

However, Spotify is not showing the artwork.

Not surprised. As stated, I don't use any streaming services. If you use the standard LMS web UI, navigate to a spotify track, right click and select 'Copy Image Location', then paste the result here - it'll give me something to look into.

[Edit] Actually, just found a slight bug in the code - which might help with this. Can you edit the code on your server? If so, edit MaterialSkin/HTML/material/js/utils.js and change line 47 from "return icon" to "return image"

[cpd73]

One more thing! To play radio is not working unless it is save to you favorites to play

Yup, can confirm this. Fixed for next pre-release. Also, YouTube playback was broken - fixed too.

[DJanGo]

using your skin as standard didnt work.

[cpd73]

using your skin as standard didnt work.

Sorry, in what way? As in setting it as the default? I would not do that. Navigate to it via http://server-ip:9000/material - replace server-ip with hostname or IP address of LMS server.

[kidstypike]

Thanks very much, very slick!

[anadigi]

Yup, can confirm this. Fixed for next pre-release. Also, YouTube playback was broken - fixed too.

This is my favorite skin so far! Thank you!
The response is quick. I have it setup on iphone and works great. Looking forward to the next release!