Make the library load faster

Anyone who’s got 1k+ songs on their device will have noticed that the library gets rather sluggish when loading. This is not due to Volumio itself being slow, rather it’s a direct result of creating 1k+

  • tags in the html UI. A quick fix is to simply stop this from happening, because chances are that you’re not going to want to scroll through a list that size anyway, you’re gonna wanna select an artist first…

    So, once you’ve got your device setup and your music loaded, access the directory /var/www/js (if you’re on a windows box, I would recommend that you map the entire www directory; that way you’ll be able to edit css and html files as well). Then open up the file player_lib.js and make the following 2 alterations: (Pro-tip: if you’re having trouble finding these parts of the code, just press ctrl+f in most editors and start typing in the code verbatim)

    1. Somewhere around line 616, in the function var renderArtists = function() {, you’ll find a call for the next function renderAlbums();, go ahead and comment this line out using // . It should look like this:

    var renderArtists = function() { var output = ''; for (var i = 0; i < allArtists.length; i++) { output += '<li class="clearfix"><div class="lib-entry' + (filters.artists.indexOf(allArtists[i]) >= 0 ? ' active' : '') + '">' + allArtists[i] + '</div></li>'; } $('#artistsList').html(output); //renderAlbums(); }

    2.A few lines down, around 672, in the event handler $(’#artistsList’).on(‘click’, ‘.lib-entry’, function(e) { you’ll find the line clickedLibItem(e, pos == 0 ? undefined : allArtists[pos], filters.artists, renderArtists);. Here, you want to change the last bit to say renderAlbums instead of renderArtists. Or as I like to do, copy the line, make the change, and comment out the original… as such:

    // click on ARTIST $('#artistsList').on('click', '.lib-entry', function(e) { var pos = $('#artistsList .lib-entry').index(this); clickedLibItem(e, pos == 0 ? undefined : allArtists[pos], filters.artists, renderAlbums); //clickedLibItem(e, pos == 0 ? undefined : allArtists[pos], filters.artists, renderArtists); });

    And you’re done!

    Basically what you’ve done is prevent the albums and songs from being loaded until you actually click on an artist! Try it and be amazed at the performance increase :wink: and if you don’t like it, just change those two little bits back and you’re back to normal, no harm no foul!

  • Hi x7dude,

    Thanks for the tip
    The latest sources from github include a lazy-loading feature that prevents the library from displaying tons of HTML. It’s done a different way from what you suggest: artists/albums/songs are loaded, but only a few are displayed, and they get displayed or hidden when you scroll up and down. This improvement should be in the next release.

    Moreover, there’s also upcoming improvements in performances when loading the library, this time on the server side, but probably not for the next release yet.

    Oh cool! Yeah 'cause the sweet thing about V. is the web UI, the fact that friends coming over don’t HAVE to download an MPD controller or something, they can just go at it! And with Chromes “new” web app feature that lets you load it in a separate environment, you’ve got a bona fide app to boot! Great job!

    THanks for this! works great on my Nexus tablet - great load speed as well as allowing me to use my big fat finger to select. When everything was loaded, I could not get a touch select - had to use a mouse. Looking forward to the lazy load of the next version, but in the meantime, this is very useable.

    @harperAlmo: :smiley: no worries! you might find this useful as well: