update readme, search works with development version of mopidy

README.rst

@@ -2,18 +2,33 @@
 Mopidy Browser Client
 *********************
 
-Mopidy is a music server which can play music from `Spotify
-<http://www.spotify.com/>`_ or from your local hard drive. 
-
 This is a responsive html/js/css client for Mopidy. Responsive, so it works on desktop and mobile browsers.
 
-Note: this is under heavy development!
+`Mopidy <http://www.mopidy.com/>`_ is a music server which can play music from `Spotify <http://www.spotify.com/>`_ or from your local hard drive. 
+
+Development
+===========
+
+Note: this client under heavy development! At the moment, initial loading is extremely slow, especially on mobile devices. As Mopidy changes, this client changes as well. It tries to follow the development-branch of Mopidy for now, so update Mopidy as you update the client.
 
 Installation
+============
 
-To install Mopidy, check out
-`the installation docs <http://docs.mopidy.com/en/latest/installation/>`_ or `the settings docs <http://docs.mopidy.com/en/latest/settings/>`_. 
+To install Mopidy, check out `the installation docs <http://docs.mopidy.com/en/latest/installation/>`_, `the settings docs <http://docs.mopidy.com/en/latest/settings/>`_ and `even more detailed information <https://docs.mopidy.com/en/latest/modules/frontends/http/#http-frontend>`. 
 
 Quick install
+=============
 
 Drop the files from this client in a folder on your Mopidy-system. Then change the settings.py (in the root directory of the Mopidy code) to make it work. Add a line *mopidy.frontends.http.HttpFrontend* to the FRONTENDS section, and set the *HTTP_SERVER_STATIC_DIR* to point to the folder with the files from the web client.
+
+Security
+========
+
+As a simple security measure, the web server is by default only available
+    from localhost. To make it available from other computers, change
+    :attr:`mopidy.settings.HTTP_SERVER_HOSTNAME`. Before you do so, note that
+    the HTTP frontend does not feature any form of user authentication or
+    authorization. Anyone able to access the web server can use the full core
+    API of Mopidy. Thus, you probably only want to make the web server
+    available from your local network or place it behind a web proxy which
+    takes care or user authentication. You have been warned.

index.html

@@ -7,7 +7,7 @@
 		<meta name = "viewport" content = "width=device-width, initial-scale = 1.0, user-scalable = no" />
 		<!-- <meta name="viewport" content="width=device-width, user-scalable=no"> -->
 		<!--		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"> -->
-		<link rel="apple-touch-icon" href="img/icons/headphones_32x28.png" />
+		<link rel="apple-touch-icon" href="/mopidy/favicon.png" />
 		<script src="js/html5slider.js"></script>
 		<meta name="apple-mobile-web-app-capable" content="yes" />
 		<meta charset="utf-8">
@@ -16,6 +16,12 @@
 		<meta name="author" content="Wouter van Wijk">
 		<meta name="copyright" content="(c) 2012/2013 Wouter van Wijk" />
 		<!-- Styles -->
+		<!-- hide content because otherwise headers show up at the start, which is not pretty -->
+		<style>
+            .content {
+                display: none;
+            }
+		</style>		
 		<link href="css/bootstrap.min.css" rel="stylesheet">
 		<link href="css/bootstrap-responsive.css" rel="stylesheet">
 		<link href="css/ws.css" rel="stylesheet">

js/functionsvars.js

@@ -34,6 +34,7 @@ var customPlaylists = new Array();
 var customTracklists = new Array();
 
 //constants
+PROGRAM_NAME = 'Mopidy';
 ARTIST_TABLE = '#artiststable';
 ALBUM_TABLE = '#albumstable';
 PLAYLIST_TABLE = '#playlisttable';

js/gui.js

@@ -283,8 +283,6 @@ function triggerPos() {
 }
 
 function getPlaylists() {
-    //    d = new Date();
-    //    console.log('Getplaylists: ' +  d.getMilliseconds() );
     mopidy.playlists.getPlaylists().then(processGetplaylists, console.error);
 }
 
@@ -329,8 +327,8 @@ function initSocketevents() {
 
     mopidy.on("event:trackPlaybackStarted", function(data) {
         mopidy.playback.getTimePosition().then(processCurrentposition, console.error);
-        setSongInfo(data.tl_track.track);
         setPlayState(true);
+        setSongInfo(data.tl_track.track);
         initTimer();
     });
 
@@ -456,7 +454,7 @@ $(document).ready(function() {
         }
 
         // Set the page title based on the hash.
-        document.title = divid;
+        document.title = PROGRAM_NAME + ' - ' + divid;
 
         $('.content').hide();
         $('.nav li').removeClass('active');

js/ws.js

@@ -13,6 +13,7 @@ function playtrack(uri, playlisturi) {
     var track;
     switchContent('current', uri);
     tracks = getTracksFromUri(playlisturi);
+    console.log(tracks);
     if (tracks) {
         $(CURRENT_PLAYLIST_TABLE).empty();
         mopidy.tracklist.clear();
@@ -23,6 +24,7 @@ function playtrack(uri, playlisturi) {
     for (var i = 0; i < tracks.length; i++) {
         if (tracks[i].uri == uri) {
             track = i + 1;
+            break;
         }
     }
     console.log(track);
@@ -118,7 +120,7 @@ function processSinglePlaylist(resultArr) {
 function processCurrentPlaylist(resultArr) {
     currentplaylist = resultArr;
     playlisttotable(resultArr, CURRENT_PLAYLIST_TABLE);
-    mopidy.playback.getCurrentTrack().then(currentTrackResults, console.error);
+    mopidy.playback.getCurrentTrack().then(processCurrenttrack, console.error);
 }
 
 /********************************************************
@@ -129,13 +131,14 @@ function processSearchResults(resultArr) {
     $(SEARCH_ARTIST_TABLE).empty();
     $(SEARCH_ALBUM_TABLE).empty();
     $("#searchresults").show();
+    //get the right result
+    results = resultArr[0];
     
-    playlisttotable(resultArr[1].tracks, SEARCH_TRACK_TABLE, 'trackresultscache');
-    customTracklists['trackresultscache'] = resultArr[1].tracks;
 
-    var artists = resultArr[1].artists;
+    playlisttotable(results.tracks, SEARCH_TRACK_TABLE, 'trackresultscache');
+    customTracklists['trackresultscache'] = results.tracks;
+    var artists = results.artists;
     var child = '';
-
     for (var i = 0; i < artists.length; i++) {
         child += '<tr class="resultrow';
         if (i > 4) {
@@ -146,7 +149,7 @@ function processSearchResults(resultArr) {
     $(SEARCH_ARTIST_TABLE).html(child);
 
     child = '';
-    var albums = resultArr[1].albums;
+    var albums = results.albums;
 
     for (var i = 0; i < albums.length; i++) {
         child += '<tr class="resultrow';