cdrummond / lms-material

Material skin for LMS (Lyrion Music Server)

Material skin for LMS (Lyrion Music Server)

Material-Skin is a HTML5/Javascript user-interface for Lyrion Music Server, suitable for mobile and desktop usage.

The Screenshots wiki page has more screenshots.

For more information, please refer to the User Guide. This guide is on a separate github page, and is authored by Jim Gooch.

Features

1. Mobile and desktop layouts
2. Browse local library - Artists, Album Artists (if not set for single list), Genres, Playlists, Years, Composers, etc.
3. Add random albums of artist, genre, or year
4. Browse Radio, Favourites, and Apps
5. Add, delete, and edit favourites
6. Add, delete, rename, and edit playlists
7. Now playing
8. Play queue with drag'n'drop editing
9. UI settings; light, coloured, dark, darker, and black themes, 18 different colour schemes, album sort, auto scroll play queue
10. Player settings; crossfade, replay gain, don't stop the music, alarms
11. Server settings
12. Sync support
13. Info dialog to show stats, and re-scan music
14. Manage players; control volume, play/pause, show current track
15. Group player control; add, edit, delete
16. Pin apps, etc., to main screen
17. Swipe left/right to change views with mobile layout
18. Integrated support for "Music and Artist Information" plugin
19. Move queue between players
20. Add tracks to playlists
21. Remove duplicates from playlists

Detailed information

For more information on usage, installation, debug, etc, please refer to the wiki pages

Donations

I develop this skin purely for fun, so no donations are required. However, seeing as I have been asked about this a few times, here is a link...

lms-material's Issues

Add URL to queue

Add ability to enter a URL, as per default web UI ('Tune In URL' entry). Perhaps just add a 'Add URL' to queue.

Please add 'Stop' button

The classic skin has this command button and it's quite useful.

Settings store not working in Dash

This probably is not really a bug, but some issue in Vue: I wanted to use the Material skin with Dash. It's working great, once loaded. But settings, the selected player etc. don't stick. They always reset when re-launched. Could it be that the store code is checking the browser's capabilities based on the user-agent string or the like? According to Dash's author it should support local storage. But he's using a custom UA string.

Don't close until solved !!

what 'save to favourites' option ??? on a desktop ? there is not that option in the "..." vertical menu

Perhaps you could refrain from closing issues until they're resolved ?

More menu for Genres is missing its own More menu

The Genre menu items should have a More menu which allows you to play a random mix based on that given genre. That option is missing in Material (but available in Default, or on device).

Configuration of group players

Update 'Manage Players' dialog to allow creating, updating, and deleting of group players. Will require updating the group players plugin to support these actions via CLI.

["groupmac", ["playergroup", 0, 100]] lists group details
["groupmac", ["playerpref", "playername", "X"]] sets group name
["groupmac", ["playerpref", "plugin.groups:members", ["maca", "macb"]]] sets group members

Volume slider and buttons

Hi
Excellent work! Looks great. I use the desktop view on and ipad in order to see the volume value at all times. Is it possible to have an option to remove the volume slider, I use the buttons but am worried about accidentally sliding to full volume. Without the slider the buttons would be closer together which would be helpful. Also, I use my own custom volume solution which requires me to set the volume steps to 2 instead of 5. I modified the constants.js file, but it might be useful to others to have a settings option.
Thanks again,
Mike

Indicate favorites status in menu

In the browse view, the menu always has "Add to favorites", even if item is already in favorites. Perhaps before (or whilst?) showing the menu, a check should be performed. If the item is in favorites, change it to a remove from favorites entry. The favorite status should be cached with the item to save repeated lookups.

This should be handled after #23. Using CometD will allow material to receive notifications when favourites have changed.

Async (lazy) load JS files

See https://w3bits.com/async-javascript/

Radio stations wouldn't use "pointer" mouse cursor

For whatever reason eg. Radio stations would not make the mouse cursor use the pointer style. Just drill down in to a Radio category with a station list. The individual stations can be played, but the mouse cursor doesn't indicate they're clickable.

Handle all SlimBrowse commands

SlimBrowse is not fully implemented; buttons, radios, checkboxes are not handled.

Favourites 'folders'

Add support for creating folders, and moving items into (and out of) folders.

Album Sort inconsistent

From Artist menu / K / open Artist - albums are displayed in correct order per settings Year / Album

From New Music / select More against Artist and then Album or Track Artist - albums are displayed alphabetically

Obviously very low priority as has no functional impact

Zoom covers in now-playing

Add (longpress, menu item) to show cover from now-playing full screen.

raspberry pi not working

I love the theme. However I'm encountering some issue when I try to use this on my raspberry pi. The only browsers that show the page (either desktop or mobile) are chromium and firefox. I've tried many of the lightweight browsers and they all only show a white screen. I tried kweb, epiphany, surf and midori, with different user-agent strings.

Failing to browse artist's albums due to invalid artistAlbumSort value?

After the upgrade to 0.2.3 I failed to browse albums from an artists list. Whether main Artists list, or inside a Genre, it failed with a generic "network error" message. When I then went to the settings I saw that there was no value set for the artistAlbumSort. Checking storage I'm seeing that it's set to the boolean false, rather than album (as I usually have it).

Setting the sort value once again fixed the browsing.

Virtual scroller

There is code (commented out) to use vue-virtual-scroller, however this appears to have issues where items are not always drawn. e.g. Navigate into 'Apps' (when only have a few), and back out; not all items drawn.

Perhaps updating to a newer version of the library will help? Or use a different library.

Low priority as it's only required when there are lots of items.

Albums tracks in Favourites no longer show play actions

Since commit 88518be ("Don't show play actions unless an item has params with item_id") tracks within Albums within Favourites no longer show the play actions. Note this only occurs with tracks inside albums, not with an individual track saved to Favourites.

And many thanks for a great update for LMS :)

Dragging playback slider shouldn't switch tab (mobile)

On iPad, when I attempt to use(drag) the playback(timeline) slider, it would switch to the queue/browse tab. I suspect there is gesture hijacking issue happening.

A..Z grouping in more places

Currently A..Z grouping only works for the main artista/albums/etc. listings. Need to check/provide support for:

[ ] Remote libraries
[ ] Custom browse

Custom browse uses:

["custombrowse","browsejive",0,100,"hierarchy:artists","artists:artists", "tags:CCZs"]
["custombrowse","browsejive",0,100,"hierarchy:albums","albums:albums", "tags:CCZs"]
["custombrowse","browsejive",0,100,"group_Wibble:group_Wibble","multilibrary_standard1_ml_artists:multilibrary_standard1_ml_artists","hierarchy:group_Wibble,multilibrary_standard1_ml_artists"]
["custombrowse","browsejive",0,100,"group_Standard%20library:group_Standard%20library","hierarchy:group_Standard library,multilibrary_standard_ml_albums","multilibrary_standard_ml_albums:multilibrary_standard_ml_albums"]

Add a isAzGroupable(item) to utils, and check if an API call is A..Z groupable.

Will not add [material] folder to [HTML]

Tried to install automatically by adding a repository and manually by copying to plugin folder. Both ways don't add a "material" folder to HTML folder after restart.

Is this a known issue?

LMS is 7.9.2 - 1545144292 @ Tue Dec 18 16:23:28 CET 2018

UI suggestion: Place search in header

On desktop there is a lot of space in the header. Would it be possible to move the "Search" field from "My Music" to the header? You could even make it collapse to a magnifying glass on mobile if you felt this made it more consistent.

This would make search more discoverable to occasional users (rather than having to scroll down the "My Music" list to bring it on screen) and be functionally similar to many web sites people are familiar with where some form of search is prominently at the top.

Many thanks for breathing new life into the squeezebox with this effort!

Can't create Sync-Groups

If I want to sync all available players, everything is working fine, but if I try to remove one player, the whole sync group is going down. Also if I want to start a sync with only one player, nothing happens.

I only can set all players to sync or no sync, but I'm not able to select specific players to sync. I can select the specific players in the material theme, but nothing happens after that.

If I set this in the calssic theme, everything works as expected, the grouped players are also shown correctly in the material theme, but it is not possible to make those settings in the material theme itself.

Multiple item selection

Update browse and queue pages to support multiple item selection. e.g.

- Long press on a playable item
  - change its image/icon to a check
  - change sub-toolbar to be
    [x] <selected count> (play now) (insert) (append)   -- for browse page
    [x] <selected count> (remove)  -- for queue page
  - clicking the [x] disables select mode
  - clicking buttons on left will apply action to selected items
- click any item to add to selection
- browsing is not possible until selection mode stopped

Sort favorites by album title but not within album

When sorting favorites albums would it be possible to sort the albums alphabetically but leave the track order intact?

Use CometD for status updates

Currently material polls the server for status and serverstatus updates, this should be change to use cometd. Some initial investigation has been done in the cometd branch.

Play/Pause button not centered perfectly

The highlight when hovering over the Play/Pause button isn't centered with the button's circle perfectly fine:

I'm seeing this on Safari 12/macOS 10.14, as well as Chrome (here the circle seem to be too low, rather than too far to the left).

No biggie at all.

Add to playlist

As per forums.slimdevices thread:

There is one other thing missing per my system that appears in iPeng but NOT in the either Material or the Default.

I use Phil Meyer’s Playlist Manager. Amongst other things this allows you to add a track to a pre-existing playlist while you are playing something else entirely. It’s exposed under More in iPeng as Add To and then a choice of existing playlists.

In Default it’s available only under settings / advanced 

Detect if 'Playlist Manager' is installed, and if so add a 'Add To Playlist...' menu entry

Support CD Player

..show the "Extras" Menu, like in the standard skin.
Because the CD-Player plugin uses this folder for playing Audio-CDs through LMS.

Thx,
Oliver

Configurable volume step?

Currently volume changes in +/- 5% steps. Perhaps make configurable.

Hide notification when no tracks in queue

Ratings support

Use TrackStat plugin to enable ratings. See http://wiki.slimdevices.com/index.php/TrackStat_plugin#Available_statistics

Show ratings in now-playing / toolbar (in place of tech info?)

Add a service worker

Add a service worker for the assets so the page can be considered like a PWA and installed on android.

Only auto-scroll queue if current index changes

When editing queue, updates cause queue to scroll. Shoul donly scroll when current index changes.

SlimBrowse: nextWindow is ignored

Some SlimBrowse items have a nextWindow value which tells the UI what to do after an action has completed. In the following example this would be parent or grandParent, meaning: go back one or two levels.

{
    "params": [
        "78:4f:43:60:64:ce",
        [
            "spotty",
            "recentsearches",
            "0",
            "100",
            "menu:1",
            "deleteMenu:10"
        ]
    ],
    "result": {
        "item_loop": [
            {
                "nextWindow": "parent",
                "actions": {
                    "go": {
                        "params": {
                            "delete": "10"
                        },
                        "player": 0,
                        "cmd": [
                            "spotty",
                            "recentsearches"
                        ]
                    }
                },
                "text": "Delete: \"europe\""
            },
            {
                "text": "Delete all recent searches",
                "nextWindow": "grandParent",
                "actions": {
                    "go": {
                        "cmd": [
                            "spotty",
                            "recentsearches"
                        ],
                        "player": 0,
                        "params": {
                            "deleteAll": 1
                        }
                    }
                }
            }
        ],
        "offset": 0,
        "count": 2
    },
    "id": 1,
    "method": "slim.request"
}

AFAIK the target menu should be refreshed at the same time. Eg. popping from the stack isn't good enough. In above case this is expected to get a new Search menu without the value that just got removed from the recent searches history. These relative targets often are being used by "context menus" or the like which we'd expect to go away once an action was selected.

Other popular values would be nowPlaying or home, absolute targets. But that's probably up to you, whether you want to follow those.

Sleep Button

Please add a Sleep function similar to iPeng - you long press the pause button and a menu of Sleep options for the player in question appears

Sleep timer duration options

First of all: Thanks for the work on this great project. Finally a UI that is really usable on mobile devices! ;)

I would like to request two more sleep timer options:

• At the end of the track
• At the end of the playlist

Is this possible? Apparently only the sleep timer duration is send to the server, so it should be possible to calculate it for the current track/playlist.

I'd appreciate to see this feature in a future release.

Thanks in advance

Cannot add favorite from queue items.

There seems to be no way to add to favourites...? am I missing something...?
Standard LMS skin has an option to add a radio stream or file to favourites but there appears to be no way to do this in this skin...I have to revert to the default skin for this option.

Otherwise... yes ! this skin is wonderful..!

Firefox on Android drag'n'drop

Drag'n'drop of the queue does not seem to be functional in Firefox on Android.

Load interface on specific player or module using http GET method?

Would it be possible to load an specific player screen by sending an http get (instead of using POST) command to the jsonrpc.js ?

It would be very handy if the theme would allow to to something like:

http://server_ip:server_port/?player:player_mac

feature request: jump to Player via URL

Hello,

I´m happy about this great Theme, and like to integrate this into my Smarthome Control.
The only thing I miss, is to Jump direct to a Player. Like ...../material/desktop.html?player=aa:bb:cc:dd:ee

So I can set a link for each room in the UI of my Smarthome-Sysetm
Is this possible?

Thanks for that great work!!!

Switching playlist between players

Hi! Thanks for making this skin, it's a great bit of work which I use a lot.

I don't know if this is an appropriate place to ask, but the one feature I've always wanted from my LMS interface is an easy way to move what is playing on one player onto another. Is this something you could add to this skin (or would accept a pull request for, if I try to figure it out).

This would be for the situation where I'm listening to the radio or an audiobook or something in one room, then I go into another room and want to transfer the playlist & playback state across to the player for that room. I know about synchronization, but I don't really want to synchronize two players, just to move from one to another. The way my house is, I never actually end up wanting the same thing on in two rooms at once.

There's a plugin for this but it doesn't expose any user interface I can see - I think it only works on specific types of players that have a screen.

Many thanks, and I apologise if this is the wrong place to be asking for such a thing.

Enhancement - Overlay when scrolling

Hi

Firstly many thanks for creating this skin. It's great. I've been using and have created a simple overlay that displayed when scrolling multi-page lists. On the desktop skin it overlays the first letter of the item at the top of the screen.

It's not yet perfect (I'm new to vuejs so there are probably other ways to do this) - but if you're interested there's a short clip of it - click the image and it should play.

Have managed to get it to work with the light and dark skins. Could be amended to show, for example the album cover, but I went with simple letter to start with.

Thanks
San

Add/Edit favourites dialog

Currently favourites can be renamed, but cannot change URL. Add a dialog allowing favourite editing and creation.

Announcement: Simple Web View Android App

Hi,

my wife was missing a home screen icon for lms-material and the fav icon from chrome did not work. So I wrote a very simple android app:
https://github.com/andreasbehnke/lms-material-app

• Feel free to test it.

Implemented so far:

• fullscreen view
• show preference dialog if an error occured (i.e. wrong URL to LMS)
• coloring compatible with dark theme of lms-material

Missing:

• Use android volume buttons for lms volume control. Either by communicating directly with LMS (complex and leaving the lite style of being a web view) or by calling JavaScript function - here I need your help implementing this, I need some global functions for volume up/down. At the moment I have no luck executing any JavaScript in the webview though.
• configuration setting: Switch to desktop view in landscape view.
• configuration setting: Switch between dark/light theme (or detect theme from WebView?)

Volume changed by double-step on touch devices

I prefer the desktop layout with an ipad but find the volume buttons increase/decrease by double (10%) instead of 5% unless I tap them extremely quickly.
Thanks,
Mike

SlimBrowse "more" action is ignored sometimes

As discussed in the context of the Spotty's "[delete search history item]"(https://forums.slimdevices.com/showthread.php?109624-Announce-Material-Skin&p=930772&viewfull=1#post930772) it seems the Material skin is ignoring the more action on SlimBrowse menus. Here's a full response from the plugin:

{
    "method": "slim.request",
    "id": 1,
    "params": [
        "ac:bc:32:ef:ae:d1",
        [
            "spotty",
            "items",
            "0",
            100,
            "item_id:0",
            "menu:spotty"
        ]
    ],
    "result": {
        "base": {
            "actions": {
                "play": {
                    "itemsParams": "params",
                    "cmd": [
                        "spotty",
                        "playlist",
                        "play"
                    ],
                    "nextWindow": "nowPlaying",
                    "player": 0,
                    "params": {
                        "menu": "spotty"
                    }
                },
                "add": {
                    "cmd": [
                        "spotty",
                        "playlist",
                        "add"
                    ],
                    "itemsParams": "params",
                    "player": 0,
                    "params": {
                        "menu": "spotty"
                    }
                },
                "go": {
                    "params": {
                        "menu": "spotty"
                    },
                    "cmd": [
                        "spotty",
                        "items"
                    ],
                    "itemsParams": "params"
                },
                "add-hold": {
                    "player": 0,
                    "params": {
                        "menu": "spotty"
                    },
                    "cmd": [
                        "spotty",
                        "playlist",
                        "insert"
                    ],
                    "itemsParams": "params"
                },
                "playControl": {
                    "params": {
                        "menu": "spotty",
                        "_index": "0",
                        "item_id": "0",
                        "_quantity": "100"
                    },
                    "player": 0,
                    "cmd": [
                        "spotty",
                        "items"
                    ],
                    "itemsParams": "playControlParams",
                    "window": {
                        "isContextMenu": 1
                    }
                },
                "more": {
                    "params": {
                        "menu": "spotty"
                    },
                    "player": 0,
                    "window": {
                        "isContextMenu": 1
                    },
                    "itemsParams": "params",
                    "cmd": [
                        "spotty",
                        "items"
                    ]
                }
            }
        },
        "offset": 0,
        "count": 3,
        "title": "Suchen",
        "item_loop": [
            {
                "text": "Neue Suche",
                "type": "search",
                "input": {
                    "processingPopup": {
                        "text": "Suchvorgang läuft ..."
                    },
                    "softbutton1": "Einfügen",
                    "title": "Neue Suche",
                    "len": 1,
                    "help": {
                        "text": "Wählen Sie den gewünschten Buchstaben mit dem Rad und drücken Sie zum Bestätigen die mittlere Taste. Drücken Sie zum Starten der Suche die mittlere Taste erneut."
                    },
                    "softbutton2": "Löschen"
                },
                "actions": {
                    "go": {
                        "cmd": [
                            "spotty",
                            "items"
                        ],
                        "params": {
                            "cachesearch": 1,
                            "item_id": "0.0",
                            "menu": "spotty",
                            "search": "__TAGGEDINPUT__"
                        }
                    }
                }
            },
            {
                "addAction": "go",
                "actions": {
                    "go": {
                        "cmd": [
                            "spotty",
                            "items"
                        ],
                        "params": {
                            "item_id": "0.1",
                            "menu": "spotty"
                        }
                    },
                    "more": {
                        "window": {
                            "isContextMenu": 1
                        },
                        "cmd": [
                            "spotty",
                            "recentsearches"
                        ],
                        "params": {
                            "deleteMenu": 1,
                            "menu": 1
                        },
                        "player": 0
                    }
                },
                "text": "aba",
                "type": "link"
            },
            {
                "text": "abba",
                "type": "link",
                "addAction": "go",
                "actions": {
                    "more": {
                        "window": {
                            "isContextMenu": 1
                        },
                        "cmd": [
                            "spotty",
                            "recentsearches"
                        ],
                        "params": {
                            "menu": 1,
                            "deleteMenu": 0
                        },
                        "player": 0
                    },
                    "go": {
                        "params": {
                            "item_id": "0.2",
                            "menu": "spotty"
                        },
                        "cmd": [
                            "spotty",
                            "items"
                        ]
                    }
                }
            }
        ],
        "window": {
            "windowStyle": "text_list"
        }
    }
}

LMS's language setting is ignored

The Material Skin seems to use the language settings of the OS where the browser runs.
While this is a good idea from a usability perspective I would still prefer to choose the UI language on my own.

In LMS's "Basic Settings" there already is a language property (which differs from the OS's language setting in my case). Thus, I would expect the player UI to respect this setting. Or have at least a UI setting for choosing between the OS's language and the LMS's language.

Click on track in play queue should switch to this track

Selecting a different track in the play queue is only possible via the "3 points" menu. Every player I know will switch by single click in the play queue.

Optionally show track number in now-playing?

Add 2 config items to configure display of track number in queue and now playing