better ui

2013-02-17 12:16:12 +01:00 · 2013-02-17 12:16:12 +01:00 · 751bdb530e
commit 751bdb530e
parent efa6d44d20
7 changed files with 94 additions and 81 deletions
--- 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,34 +18,46 @@
        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) {
@ -53,14 +65,16 @@
        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;
-}
-
--- a/webclient/images/start.jpg
+++ b/webclient/images/start.jpg
--- 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,25 +27,23 @@
        <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>
@ -51,6 +51,7 @@
                        <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 @@
                <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 @@
        </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>
--- 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);
+}
+
+
+
--- 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;
+
+
 /*******
 *
 */
--- 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,7 +256,7 @@ $(document).bind("pageinit", function() {
    if (window.navigator.standalone) {
        $("#btback").show();
    } else {
-        $("#btback").hide();
+//        $("#btback").hide();
    }

    //  $("#songinfo").resize(resizeSonginfo());
@ -299,10 +264,10 @@ $(document).bind("pageinit", function() {
    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;
-    }
+    }
--- a/webclient/js/library.js
+++ b/webclient/js/library.js
@ -40,7 +40,7 @@ function processSearchResults(resultArr) {
    $(SEARCH_ARTIST_TABLE).empty();
    $(SEARCH_ALBUM_TABLE).empty();
    //get the right result
-    // 0 = raspberry 1 = dev. 
+    // 0 = older raspberry 1 = dev. 
 //    var results = resultArr[0];
    var results = resultArr[1];
    var tracks = (results.tracks) ? results.tracks : '';