better ui

pimusicbox · Feb 17, 2013 · 751bdb5 · 751bdb5
1 parent efa6d44
commit 751bdb5
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 81 deletions.
diff --git a/webclient/css/ws.css b/webclient/css/ws.css
@@ -7,7 +7,7 @@
  *  Responsive stuff 
  ****************************/
 
-@media all and (min-width: 35.1em) {
+@media all and (min-width: 50.1em){
     .pl-breakpoint.ui-grid-a .ui-block-a {
         width: 32.95%;
     }
@@ -18,49 +18,63 @@
         clear: left;
     }
     .header-breakpoint.ui-grid-b .ui-block-a {
-        width: 19.95%;
+        width: 21.95%;
     }
     .header-breakpoint.ui-grid-b .ui-block-b {
-        width: 39.92%;
+        width: 37.92%;
         display: block;
     }
     .header-breakpoint.ui-grid-b .ui-block-c {
-        width: 39.92%;
+        width: 37.1%;
         display: block;
     }
     .pl-breakpoint.ui-grid-a .ui-block-a {
         clear: left;
     }
+    .srch-breakpoint.ui-grid-a .ui-block-b {
+        margin-left: 5px;
+    }
+    .srch-breakpoint.ui-grid-a .ui-block-a, .srch-breakpoint.ui-grid-a .ui-block-b {
+        width: 49.5%;
+    }
     #playlisttablediv {
         margin-left: 10px;
     }
+    #header {
+        height: 50px !important;
+    }
 }
 
 @media all and (max-width: 50em) {
     .header-breakpoint.ui-grid-b .ui-block-a {
         width: 39.95%;
     }
-    .header-breakpoint.ui-grid-b .ui-block-b {
-        width: 59.92%;
-    }
     .header-breakpoint.ui-grid-b .ui-block-c {
+        width: 59%;
+    }
+    .header-breakpoint.ui-grid-b .ui-block-b {
         display: none;
     }
+    #header {
+        height: 50px !important;
+    }
 }
 
 @media all and (max-width: 35em) {
     .pl-breakpoint .ui-block-a, .pl-breakpoint .ui-block-b {
         width: 100%;
         float:inherit;
     }
-    .header-breakpoint .ui-block-a {
-        float:inherit;
+    .header-breakpoint .ui-block-c, .header-breakpoint .ui-block-a {
         width: 100%;
     }
-    .header-breakpoint .ui-block-c, .header-breakpoint .ui-block-b {
+    .header-breakpoint .ui-block-b {
         display: none;
         width: 0;
     }
+    #header {
+        height: 75px !important;
+    }
 }
 /************************
  *  Volume Slider 
@@ -107,7 +121,7 @@
  * *********************************/
 #controldiv {
     height: 30px;
-    width: 210px;
+    width: 230px;
     margin-left: -5px;
     display: inline;
 }
@@ -159,14 +173,6 @@
 }
 
 /* div */
-body {
-    /*   padding-top: 80px;
-     /*    background-image:url('../iages/Chrisdesign_LP_Guitar_black.web.png');
-     background-attachment: fixed;
-     background-repeat:no-repeat;
-     background-position:right;
-     */
-}
 
 .nobreak, .btsquare {
     display: inline !important;
@@ -218,7 +224,3 @@ body {
     font-style: oblique;
 }
 
-#header {
-    height: 50px !important;
-}
-
diff --git a/webclient/images/start.jpg b/webclient/images/start.jpg
diff --git a/webclient/index.html b/webclient/index.html
@@ -5,6 +5,8 @@
         <link rel="stylesheet" href="css/jquery.mobile-1.3.0-rc.1.css" />
         <script src="js/jquery-1.8.3.js"></script>
         <script type='application/javascript' src='js/fastclick.js'></script>
+        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <link rel="apple-touch-startup-image" href="imgages/start.jpg" />
         <script type="text/javascript">
             $(document).bind("mobileinit", function() {
                 $.extend($.mobile, {
@@ -25,32 +27,31 @@
         <link rel="apple-touch-icon" href="/mopidy/favicon.png" />
         <meta name="apple-mobile-web-app-capable" content="yes" />
         <meta charset="utf-8">
-        <title>Mopidy</title>
         <meta name="description" content="">
         <meta name="author" content="Wouter van Wijk">
         <meta name="copyright" content="(c) 2012-2013 Wouter van Wijk" />
         <link href="css/ws.css" rel="stylesheet">
         <script type="text/javascript" src="/mopidy/mopidy.js"></script>
         <link rel="stylesheet" href="css/add2home.css">
-        <script type="text/javascript" src="js/add2home.js" charset="utf-8"></script>
     </head>
 
     <body>
         <div data-role="page" data-theme="c" id="page">
 
-            <div id="controlsmodal" data-role="popup" data-theme="c" style="min-width:300px;">
+            <div id="controlsmodal" data-role="popup" data-theme="c" style="min-width:325px;">
                 <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
                 <h3 id="modalname"></h3>
                 <h4 id="modalartist"></h4>
                 <h4 id="modalalbum"></h4>
-                <div id="slidercontainer2">
+<!--                <div id="slidercontainer2">
                     <p>
                         <span id="songelapsed2" class="pull-left"> 0:00 </span>
                         <span id="songlength2" class="pull-right"> 0:00 </span>
                         <label for="trackslider2"  class="ui-hidden-accessible">Position</label>
                         <input id="trackslider2" name="trackslider2" data-mini="true" type="range" onmousedown="pauseTimer();" onchange="doSeekPos(this.value);" class="nobreak" />
                     </p>
                 </div>
+    -->
                 <p class="">
                     <a href="#" onclick="doRandom(); return false"><img src="images/icons/loop_alt2_16x14.png" alt="" id="randombt" /></a>
                     &nbsp; <a href="#" onclick="doRepeat(); return false"><img src="images/icons/reload_12x14.png" id="repeatbt" alt="" /></a>
@@ -157,7 +158,7 @@ <h3 id="h_artistname"></h3>
                 <img src="images/loader.gif" id="allresultloader" class= "loader" />
 
                 <div id="searchresults">
-                    <div class="ui-grid-a ui-responsive">
+                    <div class="ui-grid-a srch-breakpoint">
                         <div class="ui-block-a" id="searchartists">
                             <h4>Artists</h4>
                             <ul class="" data-icon="false" data-role="listview" data-inset="true" id="artistresulttable"></ul>
@@ -200,7 +201,7 @@ <h4>Tracks</h4>
         </div><!-- /page one -->
 
         <script src="js/jquery.truncate.min.js"></script>
-
+        <script type="text/javascript" src="js/add2home.js" charset="utf-8"></script>
         <script src="js/controls.js"></script>
         <script src="js/library.js"></script>
         <script src="js/functionsvars.js"></script>

diff --git a/webclient/js/controls.js b/webclient/js/controls.js
@@ -37,6 +37,8 @@ function playTrack() {
     return false;
 }
 
+
+
 /**********************
  * Buttons
  */
@@ -151,6 +153,10 @@ function triggerPos() {
 
 function setPosition(pos) {
     var oldval = initgui;
+    if (pos > songlength) {
+        pos = songlength;
+        pauseTimer();
+    }
     currentposition = pos;
     initgui = true;
     $("#trackslider").val(currentposition).slider('refresh');
@@ -172,7 +178,7 @@ function setVolume(value) {
 function doVolume(value) {
     if (!initgui) {
         console.log('volume: ' + value);
-        mopidy.playback.setVolume(value);
+        mopidy.playback.setVolume(parseInt(value));
     }
 }
 
@@ -188,4 +194,32 @@ function doMute() {
         muteVolume = -1;
     }
 
-}
+}
+/*******
+ * Track timer 
+ */
+
+//timer function to update interface
+function updateTimer() {
+    currentposition += TRACK_TIMER;
+    setPosition(currentposition);
+    //    $("#songelapsed").html(timeFromSeconds(currentposition / 1000));
+}
+
+function resumeTimer() {
+    pauseTimer();
+    posTimer = setInterval(updateTimer, TRACK_TIMER);
+}
+
+function initTimer() {
+    pauseTimer();
+   // setPosition(0);
+    resumeTimer();
+}
+
+function pauseTimer() {
+    clearInterval(posTimer);
+}
+
+
+
diff --git a/webclient/js/functionsvars.js b/webclient/js/functionsvars.js
@@ -23,6 +23,7 @@ var seekTimer;
 var initgui = true;
 var currentpos = 0;
 var popupData = {};
+var songlength = 0;
 
 var artistshtml = '';
 var artiststext = '';
@@ -36,7 +37,8 @@ var customPlaylists = [];
 var customTracklists = [];
 
 //constants
-PROGRAM_NAME = 'Mopidy';
+PROGRAM_NAME = 'MusicBox';
+//PROGRAM_NAME = 'Mopidy';
 ARTIST_TABLE = '#artiststable';
 ALBUM_TABLE = '#albumstable';
 PLAYLIST_TABLE = '#playlisttable';
@@ -45,9 +47,14 @@ SEARCH_ALL_TABLE = '#allresulttable';
 SEARCH_ALBUM_TABLE = '#albumresulttable';
 SEARCH_ARTIST_TABLE = '#artistresulttable';
 SEARCH_TRACK_TABLE = '#trackresulttable';
-//update track timer, milliseconds
+
+//update track slider timer, milliseconds
 TRACK_TIMER = 1000;
 
+//check status timer, every 5 or 10 sec
+STATUS_TIMER = 10000;
+
+
 /*******
  *
  */

diff --git a/webclient/js/gui.js b/webclient/js/gui.js
@@ -74,6 +74,7 @@ function setSongInfo(data) {
     $("#modalartist").html(arttmp + ': ' + artistshtml);
 
     $("#trackslider").attr("min", 0);
+    songlength = data.length;
     $("#trackslider").attr("max", data.length);
     $("#songlength").html(timeFromSeconds(data.length / 1000));
 
@@ -232,39 +233,11 @@ function initSocketevents() {
     });
 }
 
-/*******
- * Track timer 
- */
-
-//timer function to update interface
-function updateTimer() {
-    currentposition += TRACK_TIMER;
-    setPosition(currentposition);
-    //    $("#songelapsed").html(timeFromSeconds(currentposition / 1000));
-}
-
-function resumeTimer() {
-    pauseTimer();
-    posTimer = setInterval(updateTimer, TRACK_TIMER);
-}
-
-function initTimer() {
-    pauseTimer();
-   // setPosition(0);
-    resumeTimer();
-}
-
-function pauseTimer() {
-    clearInterval(posTimer);
-}
-
-
-
 /**********************
  * initialize software
  **********************/
-//$(document).ready(function() {
-$(document).bind("pageinit", function() {
+$(document).ready(function() {
+//$(document).bind("pageinit", function() {
 
     $(window).hashchange();
 
@@ -273,14 +246,6 @@ $(document).bind("pageinit", function() {
     //initialize events
     initSocketevents();
 
-    $('.pane').hide();
-    $('.sidebar-nav a').bind('click', function(e) {
-        var divid = $(e.target).attr('href').substr(1);
-        var uri = $(divid + "table").attr('data');
-
-        switchContent(divid, uri);
-    });
-
     resetSong();
 
     if (location.hash.length < 2) {
@@ -291,18 +256,18 @@ $(document).bind("pageinit", function() {
     if (window.navigator.standalone) {
         $("#btback").show();
     } else {
-        $("#btback").hide();
+//        $("#btback").hide();
     }
 
     //  $("#songinfo").resize(resizeSonginfo());
     initgui = false;
     window.onhashchange = locationHashChanged;
     // Log all events
     mopidy.on(function() {
-        //        console.log(arguments);
+    //    console.log(arguments);
     });
-    //update gui every x seconds from mopdidy
-    setInterval(updateStatusOfAll, 5000);
+    //update gui status every x seconds from mopdidy
+    setInterval(updateTimer, STATUS_TIMER);
 });
 
 /************************
@@ -317,6 +282,13 @@ function switchContent(divid, uri) {
     location.hash = "#" + hash;
 }
 
+//update timer
+function updateStatusOfAll() {
+    mopidy.playback.getCurrentTrack().then(processCurrenttrack, console.error);
+    mopidy.playback.getTimePosition().then(processCurrentposition, console.error);
+//TODO check offline?
+}
+
 //update everything as if reloaded
 function updateStatusOfAll() {
     mopidy.playback.getCurrentTrack().then(processCurrenttrack, console.error);
@@ -327,8 +299,6 @@ function updateStatusOfAll() {
     mopidy.playback.getRandom().then(processRandom, console.error);
 
     mopidy.playback.getVolume().then(processVolume, console.error);
-
-    //TODO check offline?
 }
 
 function locationHashChanged() {
@@ -365,10 +335,9 @@ function locationHashChanged() {
                 }
                 break;
         }
-        showLoading(false);
         // Set the page title based on the hash.
-        //document.title = PROGRAM_NAME;
+        document.title = PROGRAM_NAME;
         $('.pane').hide();
         $('#' + divid + 'pane').show();
         return false;
-    }
+    }