Initial browsing functionality (Mopidy 0.18)

(playing tracks does not work yet)

flatclient/css/webclient.css

@@ -287,7 +287,7 @@
     background-color: #ddd !important;
 }
 
-#playlistslist li a {
+#browselist li a, #playlistslist li a {
     padding: 7px;
 }
 

flatclient/index.html

@@ -63,6 +63,10 @@
             <a href="#playlists" onclick="switchContent('playlists' ); return false;">
                 <span class="navtxt"> Playlists </span><i class="fa  fa-star"></i></a>
         </li>
+        <li id="navbrowse" data-icon="false">
+            <a href="#browse" onclick="switchContent('browse' ); return false;">
+                <span class="navtxt"> Browse </span><i class="fa  fa-folder"></i></a>
+        </li>
         <li id="navcurrent" data-icon="false">
             <a href="#current" onclick="switchContent('current' ); return false;">
                 <span class="navtxt">Queue </span><i class="fa fa-align-left"></i></a>
@@ -204,13 +208,16 @@
     </div>
     <div class="ui-block-b scroll" id="playlisttracksdiv">
         <ul class="table" id="playlisttracks"></ul>
-        <!--                    <ul id="playlisttracks"></ul> -->
-        <!--                    <ul data-role="listview" data-theme="c" data-icon="false" id="playlisttracks" data-inset="true"></ul> -->
     </div>
 
 </div>
 <!--/playlistspane-->
 
+<div data-role="content" id="browsepane" class="pane">
+    <h3>Browse</h3>
+        <ul id="browselist" class="table"></ul>
+</div>
+<!--/browsepane-->
 
 <div id="nowPlayingpane" data-role="content" class="pane">
 

flatclient/js/controls.js

@@ -1,3 +1,43 @@
+/********************************************************
+ * play tracks from a browse list
+ *********************************************************/
+function playBrowsedTracks(addtoqueue, trackid) {
+    //stop directly, for user feedback
+    if (!addtoqueue) {
+        mopidy.playback.stop(true);
+        mopidy.tracklist.clear();
+    }
+    toast('Loading...');
+
+// first add track to be played, then the other tracks
+    mopidy.tracklist.add(trackid);
+//    mopidy.tracklist.add({ 'uri':trackid });
+    
+    console.log(trackid);
+    return false;
+
+    //wait 1.5 second before adding the rest to give server the time to start playing
+    setTimeout(function() {
+	mopidy.tracklist.add(tracks.slice(0, selected), 0);
+	if (selected < tracks.length) {
+	    mopidy.tracklist.add(tracks.slice(selected + 1) );
+	}
+    }, 1500);
+     
+
+//    mopidy.playback.changeTrack(tracks[selected]);
+
+    for (var i = 0; i <= selected; i++) {
+        mopidy.playback.next();
+    }
+
+    mopidy.playback.play(); //tracks[selected]);
+    //console.log(selected);
+    return false;
+
+}
+
+
 /********************************************************
  * play an uri from a tracklist
  *********************************************************/

flatclient/js/gui.js

@@ -248,6 +248,7 @@ function initSocketevents() {
         getCurrentPlaylist();
         updateStatusOfAll();
         getPlaylists();
+	getBrowseDir();
         showLoading(false);
         $(window).hashchange();
     });
@@ -421,6 +422,9 @@ function locationHashChanged() {
         case 'playlists':
             $('#navplaylists a').addClass('ui-state-active ui-state-persist ui-btn-active');
             break;
+        case 'browse':
+            $('#navbrowse a').addClass('ui-state-active ui-state-persist ui-btn-active');
+            break;
         case 'search':
             $('#navsearch a').addClass($.mobile.activeBtnClass);
             $("#searchinput").focus();
@@ -480,7 +484,7 @@ $(document).ready(function(event) {
 
     // Connect to server
     mopidy = new Mopidy();
-//    mopidy.on(console.log.bind(console));  // Log all events
+    mopidy.on(console.log.bind(console));  // Log all events
 
     //initialize events
     initSocketevents();

flatclient/js/library.js

@@ -147,7 +147,7 @@ function toggleSearch() {
 }
 
 /*********************************
- * Playlists
+ * Playlists & Browse
  *********************************/
 
 function getPlaylists() {
@@ -155,6 +155,13 @@ function getPlaylists() {
     mopidy.playlists.getPlaylists(false).then(processGetPlaylists, console.error);
 }
 
+function getBrowseDir(rootdir) {
+    //  get directory to browse
+    console.log('browse init: ' + rootdir);
+    showLoading(true);
+    mopidy.library.browse(rootdir).then(processBrowseDir, console.error);
+}
+
 function getCurrentPlaylist() {
     mopidy.tracklist.getTracks().then(processCurrentPlaylist, console.error);
 }

flatclient/js/process_ws.js

@@ -55,6 +55,73 @@ function processPlaystate(data) {
     }
 }
 
+/********************************************************
+ * process results of a browse list
+ *********************************************************/
+function processBrowseDir(resultArr) {
+    /*<p><ul><li>Donec id elit non mi porta</li><li>Gravida at eget metus. Fusce dapibus.</li><li>Tellus ac cursus commodo</li></p>
+     <p><a class="btn" href="#">More &raquo;</a></p>
+     */
+
+    if ((!resultArr) || (resultArr == '')) {
+        return;
+    }
+    console.log(resultArr);
+
+    if (resultArr.length == 0) {
+	return;
+    }
+
+    $('#browselist').empty();
+
+    var child = "", rooturi = "", uri = resultArr[0].uri;
+
+    //check root uri
+    //find last : or / (spltting the result)
+    //do it twice, since.
+    var colonindex = uri.lastIndexOf(':');
+    var slashindex = uri.lastIndexOf('/');
+
+    var lastindex = (colonindex > slashindex) ? colonindex : slashindex;
+    rooturi = uri.slice(0, lastindex);
+    if (resultArr[0].type == 'track' ) {
+        rooturi = rooturi.replace(":track:", ":directory:");
+    }
+
+    console.log(uri, lastindex, rooturi);
+
+    colonindex = rooturi.lastIndexOf(':');
+    slashindex = rooturi.lastIndexOf('/');
+
+    lastindex = (colonindex > slashindex) ? colonindex : slashindex;
+    rooturi = rooturi.slice(0, lastindex);
+    
+    console.log(rooturi);
+
+    if (rooturi.indexOf(':') == -1 ) {
+	rooturi = '';
+	child += '<li><a href="#" onclick="return getBrowseDir();">..</a></li>';
+    } else {
+	child += '<li><a href="#" onclick="return getBrowseDir(this.id);" id="' + rooturi + '">..</a></li>';
+    }
+
+    console.log('new:' + rooturi);
+
+
+    console.log('a1');
+    for (var i = 0; i < resultArr.length; i++) {
+	if(resultArr[i].type == 'track' ) {
+            child += '<li><a href="#" onclick="return playBrowsedTracks(0, this.id);" id="' + resultArr[i].uri + '"">' + resultArr[i].name + '</a></li>';
+	} else {
+            child += '<li><a href="#" onclick="return getBrowseDir(this.id);" id="' + resultArr[i].uri + '"">' + resultArr[i].name + '</a></li>';
+	}
+    };
+    console.log(child);
+    $('#browselist').html(child);
+//    scrollToTracklist();
+    showLoading(false);
+}
+
 /********************************************************
  * process results of list of playlists of the user
  *********************************************************/