beta 1 release

webclient/css/webclient.css

@@ -13,7 +13,7 @@
  *    portr 48
  ****************************/
 
-@media all and (min-width: 40.1em) {
+@media all and (min-width: 961px) {
     /*header*/
     .header-breakpoint.ui-grid-b .ui-block-a {
         width: 30%;
@@ -40,6 +40,15 @@
     #playlisttracksdiv {
         margin-left: 10px;
     }
+    #playlisttracksback {
+        display:none;
+    }
+    #playlisttracksdiv {
+        display:block;
+    }
+    #playlistslistdiv {
+        display:block;
+    }
     /*search*/
     .srch-breakpoint.ui-grid-a .ui-block-b {
         margin-left: .5em;
@@ -47,41 +56,16 @@
     .srch-breakpoint.ui-grid-a .ui-block-a, .srch-breakpoint.ui-grid-a .ui-block-b {
         width: 49%;
     }
-    .scroll {
+/*    .scroll {
         overflow-y: auto;
         overflow-x: hidden;
     }
+*/
 }
 
-/* tablet etc */
-@media all and (min-width: 30.1em) and (max-width: 40em) {
-    /*header*/
-    .header-breakpoint.ui-grid-b .ui-block-a {
-        width: 45.95%;
-        clear: left;
-    }
-    .header-breakpoint.ui-grid-b .ui-block-b {
-        display: none;
-        width: 0;
-    }
-    .header-breakpoint.ui-grid-b .ui-block-c {
-        width: 40%;
-    }
-    /*search*/
-    .srch-breakpoint.ui-grid-a .ui-block-b {
-        margin-left: .2em;
-    }
-    .srch-breakpoint.ui-grid-a .ui-block-a, .srch-breakpoint.ui-grid-a .ui-block-b {
-        width: 49.5%;
-    }
-    .scroll {
-        overflow-y: scroll;
-        overflow-x: hidden;
-    }
-}
 
 /* phone landscape */
-@media all and (max-width: 30em) {
+@media all and (max-width: 960px) {
     /*header*/
     .header-breakpoint.ui-grid-b .ui-block-a {
         width: 35%;
@@ -101,24 +85,19 @@
     .srch-breakpoint.ui-grid-a .ui-block-a, .srch-breakpoint.ui-grid-a .ui-block-b {
         width: 100%;
     }
-    #playlistspane, .scroll {
+/*    .scroll {
-/*        overflow-y: auto;
-        overflow-x: hidden;
-*/
         width: 100%;
-        heigth: 90%;
+        heigth: 99%;
     }
-}
+*/
-
+    #playlisttracksback {
-/* phone portrait */
+        display:block;
-@media all and (max-width: 25em) {
+    }
-
+    #playlisttracksdiv {
-    #playlistspane, .scroll {
+        display:none;
-        overflow-y: auto;
+    }
-        overflow-x: hidden;
+    #playlistslistdiv {
-        width: auto;
+        display:block;
-        max-width: 100%;
-        heigth: 100%;
     }
 }
 

webclient/index.html

@@ -24,7 +24,10 @@
             new FastClick(document.body);
         }, false);
     </script>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <link rel="apple-touch-startup-image" href="images/startup.png">
+    <meta name="apple-mobile-web-app-title" content="MusicBox">
+    <meta name="mobile-web-app-capable" content="yes">
     <meta name="HandheldFriendly" content="True">
     <meta name="MobileOptimized" content="320">
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
@@ -96,7 +99,7 @@
                 <span class="navtxt"> Settings </span><i class="fa fa-cog"></i></a>
         </li>
         <li id="navshutdown" data-icon="false">
-            <a href="system.html" data-transition="pop">
+            <a href="system.html">
                 <span class="navtxt">System </span><i class="fa  fa-power-off"></i></a>
         </li>
         <li id="" data-icon="false">
@@ -210,11 +213,12 @@
 <!-- /header -->
 
 <div data-role="content" id="playlistspane" class="pane ui-grid-a pl-breakpoint">
-    <div class="ui-block-a scroll" id="playlistslistdiv">
+    <div class="ui-block-a" id="playlistslistdiv">
-        <ul id="playlistslist" class="table"></ul>
+        <ul id="playlistslist" data-filter="true" class="table"></ul>
     </div>
-    <div class="ui-block-b scroll" id="playlisttracksdiv">
+    <div class="ui-block-b" id="playlisttracksdiv">
-        <ul class="table" id="playlisttracks"></ul>
+        <div id="playlisttracksback" style="height: 30px; margin: 2px; padding-top: 2px; background-color: #aaa;"><a style="display:block; padding: 5px;" href="#" onclick="return togglePlaylists();"><i class="fa fa-arrow-circle-left"></i> Back</a></div>
+        <ul class="table" data-filter="true" id="playlisttracks"></ul>
     </div>
 
 </div>
@@ -316,7 +320,7 @@
 <div data-role="content" class="pane" id="radiopane">
     <h4>Radio</h4>
 
-    <div class="">
+    <div>
         <ul id="radiostationstable" class="table"></ul>
         <p>Add an url of a radio station stream that you want to listen to in the boxes below. The last 25 stations are saved locally (not
             on the server yet). To find stations, use the Browse function with extensions like Dirble or TuneIn, the right values will appear in these boxes automatically. Or use websites like <a href="http://www.listenlive.eu/" target="_blank">Listenlive</a> or <a

webclient/js/controls.js

@@ -590,7 +590,7 @@ function updateRadioStations() {
         var rs = radioStations[key];
         if (rs) {
             name = rs[0] || rs[1];
-            child = '<li><a href="#" onclick="return addRadioUri(\'' + rs[0] + '\', \'' + rs[1] + '\');">';
+            child = '<li data-icon="delete"> <a href="#" onclick="return addRadioUri(\'' + rs[0] + '\', \'' + rs[1] + '\');">';
             child += '<h1>' + name + '</h1></a></li>';
             tmp += child;
         }

webclient/js/functionsvars.js

@@ -171,7 +171,7 @@ function renderSongLi(song, liID, uri, playlistType){
 }
 
 function resultsToTables(results, target, uri) {
-console.log(results, target, uri);
+//console.log(results, target, uri);
     if (!results) { return }
     if (target == '#currenttable') {
         playlistType = 'playTrackQueueByUri';
@@ -278,7 +278,7 @@ console.log(results, target, uri);
 	  } //albums name
         }
     }
-  console.log(html);
+//  console.log(html);
     tableid = "#" + tableid;
     $(target).html(html);
     $(target).attr('data', uri);

webclient/js/gui.js

@@ -19,23 +19,38 @@ function resetSong() {
         setSongInfo(data);
     }
 }
-//console.log('test');
 
 function resizeMb() {
     $("#infoname").html(songdata.name);
     $("#infoartist").html(artiststext);
 //    //set height of playlist scrollers
+//    togglePlaylists();
 
-    if ($(window).width() > 480) {
+    if ($(window).width() > 960) {
+        $('#playlisttracksdiv').show();
+        $('#playlistslistdiv').show();
+    } else {
+        if ( $('#playlisttracksdiv').is(':visible') == $('#playlistslistdiv').is(':visible')) {
+            $('#playlisttracksdiv').hide();
+            $('#playlistslistdiv').show();
+        }
+    }
+
+/*    if ($('#playlisttracksdiv').is(':visible') && !$('#playlisttracksback').is(':visible') ) {
         $('.scroll').height($(window).height() - 96);
         //jqm added something which it shouldnt (at least in this case) I guess
         //        $('#playlistspane').removeClass('height').height($(window).height() - 110);
         $('.scroll').removeClass('height').removeClass('width');
         $('#playlistspane').removeClass('height').removeClass('width');
+//        $('#playlisttracksdiv').show();
+//        $('#playlistslistdiv').show();
     } else {
         $('.scroll').addClass('height', '99%').addClass('width', '99%');
         $('#playlistspane').addClass('height', '99%').addClass('width', '99%');
+//        $('#playlisttracksdiv').show();
+//        $('#playlistslistdiv').show();
     }	
+*/
 /*
     if (isMobileWebkit && ($(window).width() > 480)) {
         playlistslistScroll.refresh();

webclient/js/lastfm.js

@@ -35,7 +35,7 @@ function getCover(nwartist, nwalbum, image, size) {
         }});
 }
 function getArtistImage(nwartist, image, size) {
-        $(image).attr('src', '../images/icons/user_24x32.png');
+        $(image).attr('src', '../images/user_24x32.png');
         lastfm.artist.getInfo({artist: nwartist}, {success: function(data){
             for (var i = 0; i < data.artist.image.length; i++) {
                 if ( data.artist.image[i]['size'] == size) {

webclient/js/library.js

@@ -27,10 +27,12 @@ function initSearch() {
         delete customTracklists['albumresultscache'];
         delete customTracklists['trackresultscache'];
         $("#searchresults").hide();
-
+//        var limit = new Object;
+        
         mopidy.library.search({
-            any : value
+            any: [value]
         }).then(processSearchResults, console.error);
+        console.log('search sent', value);
     }
 }
 
@@ -38,6 +40,7 @@ function initSearch() {
  * process results of a search
  *********************************************************/
 function processSearchResults(resultArr) {
+    console.log('srch', resultArr);
     $(SEARCH_TRACK_TABLE).empty();
     $(SEARCH_ARTIST_TABLE).empty();
     $(SEARCH_ALBUM_TABLE).empty();
@@ -46,7 +49,6 @@ function processSearchResults(resultArr) {
     var results = {'tracks': [], 'artists': [], 'albums': []};
     var emptyResult = true;
 
-//    console.log(resultArr, 'resultArr');
 
     for (var i = 0; i < resultArr.length; ++i) {
         for (var prop in results) {
@@ -174,10 +176,17 @@ function getCurrentPlaylist() {
 /********************************************************
  * Show tracks of playlist
  ********************************************************/
+function togglePlaylists() {
+    if ($(window).width() <= 960) {
+        $('#playlisttracksdiv').toggle();
+        $('#playlistslistdiv').toggle();
+    }
+    return true;
+}
+
 function showTracklist(uri) {
     $(PLAYLIST_TABLE).empty();
-    $('#playlisttracksdiv').show();
+    togglePlaylists();
-
     var pl = getPlaylistFromUri(uri);
     //load from cache
     if (pl) {
@@ -192,7 +201,7 @@ function showTracklist(uri) {
             $(this).addClass('playlistactive');
         }
     });
-    scrollToTracklist();
+//    scrollToTracklist();
     //lookup recent tracklist
     mopidy.playlists.lookup(uri).then(processGetTracklist, console.error);
     return false;

webclient/js/process_ws.js

@@ -97,7 +97,8 @@ function processBrowseDir(resultArr) {
     rooturi = rooturi.slice(0, lastindex);
 
     if (browseStack.length > 0) {
-	child += '<li><a href="#" onclick="return getBrowseDir();"><h1 class="trackname">..</h1></a></li>';
+//	child += '<li><a href="#" onclick="return getBrowseDir();"><h1 class="trackname">..</h1></a></li>';
+	child += '<li style="background-color:#ccc"><a href="#" onclick="return getBrowseDir();"><h1 class="trackname"><i class="fa fa-arrow-circle-left"></i> Back</h1></a></li>';
     }
 
     for (var i = 0; i < resultArr.length; i++) {
@@ -160,10 +161,10 @@ function processGetTracklist(resultArr) {
     setSongInfo();
     resultsToTables(playlists[newplaylisturi].tracks, PLAYLIST_TABLE, newplaylisturi);
     showLoading(false);
-    scrollToTracklist();
+//    scrollToTracklist();
-    if (isMobileWebkit) {
+//    if (isMobileWebkit) {
-        playlisttracksScroll.refresh();
+//        playlisttracksScroll.refresh();
-    }
+//    }
 }
 
 /********************************************************

webclient/mopidy

@@ -1 +1 @@
-/usr/share/mopidy/mopidy/http/data
+/usr/local/lib/python2.7/dist-packages/mopidy/http/data

webclient/settings/index.html

@@ -26,7 +26,6 @@
     <meta name="description" content="MusicBox">
     <meta name="author" content="Wouter van Wijk">
     <meta name="copyright" content="(c) 2012-2013 Wouter van Wijk"/>
-    <link href="../css/webclient.css" rel="stylesheet">
     <link rel="stylesheet" href="../css/font-awesome.min.css">
     <style>
         .ui-slider-input {
@@ -151,7 +150,7 @@ If the mount needs a username/password, also set it (leave empty for guest-acces
             <label for="network__mount_password">Password</label>
             <input type="password" name="network__mount_password" value="{{ network__mount_password }}" size="15" maxlength="40"/>
 
-            <label for="musicbox__resize_once">Resize filesystem (Restart Required)</label><br/>
+            <label for="musicbox__resize_once">Resize filesystem</label><br/>
             <p>Enable this to let MusicBox automatically resize the filesystem of your SD Card, so the system uses all the space of your card. Recommended because otherwise the card might fill up. This is beta, you can lose data on your card if you enable this!! (If so, you can put the original MusicBox image on it again and start over) </p>
             <div>
                 <select name="musicbox__resize_once" data-role="slider"><br/>
@@ -274,6 +273,38 @@ If the mount needs a username/password, also set it (leave empty for guest-acces
             <input type="password" name="scrobbler__password" value="{{ scrobbler__password }}" size="10" maxlength="40"/>
         </div>
 
+        <div data-role="collapsible" class="settingscoll">
+            <h2>The Internet Archive</h2>
+            <p>Play (old) sounds, music and speech from The Internet Archive</p>
+            <div>
+                <select name="internetarchive__enabled" data-role="slider"><br/>
+                    <option value="false"{% if internetarchive__enabled == "false" %} selected="true"{% endif
+  %}>Off</option>
+                    <option value="true"{% if internetarchive__enabled == "true" %} selected="true"{% endif
+  %}>On</option>
+                </select>
+            </div>
+        </div>
+        
+        <div data-role="collapsible" class="settingscoll">
+            <h2>Podcasts</h2>
+            <p>Play Podcasts from iTunes and Gpodder.net.</p>
+            <div>
+                <select name="podcast__enabled" data-role="slider"><br/>
+                    <option value="false"{% if podcast__enabled == "false" %} selected="true"{% endif
+  %}>Off</option>
+                    <option value="true"{% if podcast__enabled == "true" %} selected="true"{% endif
+  %}>On</option>
+                </select>
+            </div>
+<!-- does work yet            <label for="podcast__feed_urls">Feed urls</label>
+            <p>Give the links to podcast RSS feeds you want to use. Seperate with commas. E.g. http://www.npr.org/rss/podcast.php?id=510019, http://www.npr.org/rss/podcast.php?id=510253</p>
+            <div data-role="fieldcontain">
+                <textarea rows="8" cols="40" name="podcast__feed_urls">{{ podcast__feed_urls }}</textarea>
+            </div>
+-->
+        </div>
+
         <div data-role="collapsible" class="settingscoll">
             <h2>TuneIn</h2>
             <p>Select radiostations from TuneIn directory.</p>
@@ -310,23 +341,18 @@ If the mount needs a username/password, also set it (leave empty for guest-acces
         </div>
 
         <div data-role="collapsible" class="settingscoll">
-            <h2>Podcasts</h2>
+            <h2>Soma FM</h2>
-            <p>Play Podcasts from iTunes and Gpodder.net.</p>
+            <p>Play radiostations from Soma FM.</p>
             <div>
-                <select name="podcast__enabled" data-role="slider"><br/>
+                <select name="somafm__enabled" data-role="slider"><br/>
-                    <option value="false"{% if podcast__enabled == "false" %} selected="true"{% endif
+                    <option value="false"{% if somafm__enabled == "false" %} selected="true"{% endif
   %}>Off</option>
-                    <option value="true"{% if podcast__enabled == "true" %} selected="true"{% endif
+                    <option value="true"{% if somafm__enabled == "true" %} selected="true"{% endif
   %}>On</option>
                 </select>
             </div>
-<!-- does work yet            <label for="podcast__feed_urls">Feed urls</label>
-            <p>Give the links to podcast RSS feeds you want to use. Seperate with commas. E.g. http://www.npr.org/rss/podcast.php?id=510019, http://www.npr.org/rss/podcast.php?id=510253</p>
-            <div data-role="fieldcontain">
-                <textarea rows="8" cols="40" name="podcast__feed_urls">{{ podcast__feed_urls }}</textarea>
-            </div>
--->
         </div>
+        
         <div data-role="collapsible" class="settingscoll">
             <h2>Subsonic</h2>
             <p>Enable subsonic musicstreamer support.</p>
@@ -338,7 +364,7 @@ If the mount needs a username/password, also set it (leave empty for guest-acces
   %}>On</option>
                 </select>
             </div>
-            <label for="subsonic__hostname">Host url (e.g. music.pimusicbox.com )</label>
+            <label for="subsonic__hostname">Host url (e.g. music.myserver.org )</label>
             <input type="text" name="subsonic__hostname" value="{{ subsonic__hostname }}" size="15" maxlength="40"/>
             <label for="subsonic__port">Port (e.g. 445)</label>
             <input type="text" name="subsonic__port" value="{{ subsonic__port }}" size="6" maxlength="5"/>
@@ -356,7 +382,7 @@ If the mount needs a username/password, also set it (leave empty for guest-acces
                 </select> 
             </div>
         </div>
-        <input type="submit" value="Update settings" />
+        <input type="submit" value="Update settings (will restart the box)" />
       </form>
       <br/><br/>
     </div>

webclient/system.html

@@ -2,6 +2,10 @@
 <html>
 <head>
     <meta charset="utf-8">
+    <meta name="HandheldFriendly" content="True">
+    <meta name="MobileOptimized" content="320">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
     <script src="js/jquery-1.10.2.js"></script>
     <link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css"/>
@@ -10,6 +14,7 @@
     <script src="js/functionsvars.js"></script>
     <link href="css/webclient.css" rel="stylesheet">
     <link rel="stylesheet" href="css/font-awesome.min.css">
+
 </head>
 
 <body>