Announcement

Collapse
No announcement yet.

Announce: Material Skin

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Announce: Material Skin

    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.
    Last edited by cpd73; 2021-02-04, 13:41.
    Material debug: 1. Launch via http: //SERVER:9000/material/?debug=json (Use http: //SERVER:9000/material/?debug=json,cometd to also see update messages, e.g. play queue) 2. Open browser's developer tools 3. Open console tab in developer tools 4. REQ/RESP messages sent to/from LMS will be logged here.

    #2
    + 1024

    Comment


      #3
      Originally posted by cpd73 View Post
      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.
      Last edited by anadigi; 2018-10-21, 16:00.

      Comment


        #4
        Originally posted by anadigi View Post
        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

        Comment


          #5
          Originally posted by anadigi View Post
          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"
          Last edited by cpd73; 2018-10-21, 16:29.
          Material debug: 1. Launch via http: //SERVER:9000/material/?debug=json (Use http: //SERVER:9000/material/?debug=json,cometd to also see update messages, e.g. play queue) 2. Open browser's developer tools 3. Open console tab in developer tools 4. REQ/RESP messages sent to/from LMS will be logged here.

          Comment


            #6
            Originally posted by anadigi View Post
            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.
            Material debug: 1. Launch via http: //SERVER:9000/material/?debug=json (Use http: //SERVER:9000/material/?debug=json,cometd to also see update messages, e.g. play queue) 2. Open browser's developer tools 3. Open console tab in developer tools 4. REQ/RESP messages sent to/from LMS will be logged here.

            Comment


              #7
              using your skin as standard didnt work.

              Comment


                #8
                Originally posted by DJanGo View Post
                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.
                Material debug: 1. Launch via http: //SERVER:9000/material/?debug=json (Use http: //SERVER:9000/material/?debug=json,cometd to also see update messages, e.g. play queue) 2. Open browser's developer tools 3. Open console tab in developer tools 4. REQ/RESP messages sent to/from LMS will be logged here.

                Comment


                  #9
                  Thanks very much, very slick!

                  Click image for larger version

Name:	shotdark.jpg
Views:	1
Size:	33.2 KB
ID:	1565144

                  Click image for larger version

Name:	shotlight.jpg
Views:	1
Size:	33.7 KB
ID:	1565145
                  Server - LMS 8.4.0 RPi4B 4GB/NanoSound ONE case/pCP 8.1.0 - 75K library, playlists & LMS cache on Sata SSD (ntfs)

                  Lounge - DAC32 - AudioEngine B2
                  Office - RPi 3B+/HiFiBerry DAC HAT/RPi screen - Edifier D12
                  Bedroom - Echo Show 8

                  Spares - 1xSB Touch, 1xSB3, 4xRPi, AVI DM5 speakers

                  Comment


                    #10
                    Originally posted by cpd73 View Post
                    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!

                    Comment


                      #11
                      Originally posted by anadigi View Post
                      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!
                      Any chance you could chcekout the version from git? To see if Spotify covers are fixed? As stated, I don't use any streaming services - so have no idea how well they are supported. If you don't know how to use git, you could just copy https://raw.githubusercontent.com/CD...al/js/utils.js to "MaterialSkin/HTML/material/js" on your LMS install (and re-start LMS). The change that might fix covers is in that file.
                      Material debug: 1. Launch via http: //SERVER:9000/material/?debug=json (Use http: //SERVER:9000/material/?debug=json,cometd to also see update messages, e.g. play queue) 2. Open browser's developer tools 3. Open console tab in developer tools 4. REQ/RESP messages sent to/from LMS will be logged here.

                      Comment


                        #12
                        Originally posted by cpd73 View Post
                        Any chance you could chcekout the version from git? To see if Spotify covers are fixed? As stated, I don't use any streaming services - so have no idea how well they are supported. If you don't know how to use git, you could just copy https://raw.githubusercontent.com/CD...al/js/utils.js to "MaterialSkin/HTML/material/js" on your LMS install (and re-start LMS). The change that might fix covers is in that file.
                        I haven't. I have followed your advise and edit the utils.js manually and works!

                        Comment


                          #13
                          Originally posted by anadigi View Post
                          I haven't. I have followed your advise and edit the utils.js manually and works!
                          So, spotify covers now show? If so, that's great! I'll try to do a 0.0.3 release tomorrow. I'd like to fix the issue with the plugin state on the plugin page, but not sure what to do there...
                          Material debug: 1. Launch via http: //SERVER:9000/material/?debug=json (Use http: //SERVER:9000/material/?debug=json,cometd to also see update messages, e.g. play queue) 2. Open browser's developer tools 3. Open console tab in developer tools 4. REQ/RESP messages sent to/from LMS will be logged here.

                          Comment


                            #14
                            Originally posted by cpd73 View Post
                            So, spotify covers now show? If so, that's great! I'll try to do a 0.0.3 release tomorrow. I'd like to fix the issue with the plugin state on the plugin page, but not sure what to do there...
                            Yes!
                            So far only the radio is not working-trying to play; it plays all the song locally instead.

                            Comment


                              #15
                              Announce: Material Skin

                              > 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...


                              Did you implement SlimBrowse/SlimMenu for the app? The services then
                              should come "for free"...

                              --

                              Michael
                              Michael

                              "It doesn't work - what shall I do?" - "Please check your server.log and/or scanner.log file!"
                              (LMS: Settings/Information)

                              Comment

                              Working...
                              X