Navbar now toggles between the play & pause button.

Ugly approach, but I could get it working by changing the <li></li>...

diff --git a/lib/EtcX/Sounds.pm b/lib/EtcX/Sounds.pm
index d8a89e3d1f86c07813b3d85994a16149af1bb1cc..7c46eeece13b0267555c3c1925290884330de8a9 100644 (file)
--- a/lib/EtcX/Sounds.pm
+++ b/lib/EtcX/Sounds.pm
@@ -68,7 +68,7 @@ ajax '/current/' => sub {
         }
     } else {
         return {
-            state  => 'none',
+            state  => $mpd->status->state(),
             title  => 'No song playing',
         }
     }

diff --git a/views/layouts/main.tt b/views/layouts/main.tt
index 1962be7a0f5f1580a55857f95a622c492a99dea2..95f689a8901d5d0e3396b2fe59b34c964fd1592c 100644 (file)
--- a/views/layouts/main.tt
+++ b/views/layouts/main.tt
@@ -18,12 +18,17 @@
 <div data-role="page">
 [% content %]
 <div data-role="footer" data-position="fixed">
-  <div data-role="navbar">
+  <div id="controls-pause" data-role="navbar">
     <ul id="controls">
       <li><a href="#" data-href="prev"  data-ajax="false" data-icon="arrow-l">Prev</a></li>
-      <li id="play-pause">
-          <a href="#" data-href="pause" data-ajax="false" data-icon="pause"  >Pause</a>
-      </li>
+      <li><a href="#" data-href="pause" data-ajax="false" data-icon="pause"  >Pause</a></li>
+      <li><a href="#" data-href="next"  data-ajax="false" data-icon="arrow-r">Next</a></li>
+    </ul>
+  </div>
+  <div id="controls-play" data-role="navbar" style="display: none">
+    <ul id="controls">
+      <li><a href="#" data-href="prev"  data-ajax="false" data-icon="arrow-l">Prev</a></li>
+      <li><a href="#" data-href="play"  data-ajax="false" data-icon="play"   >Play</a></li>
       <li><a href="#" data-href="next"  data-ajax="false" data-icon="arrow-r">Next</a></li>
     </ul>
   </div>
@@ -31,6 +36,9 @@
 </div>
 
 <script type="text/javascript">
+   var current_state = 'play';
+   $(document).bind( 'pageinit', fetchCurrent());
+
    $(document).bind( 'pageshow', function() {
 [% IF msg %] 
        $( "#notification" ).popup( "open", { y: 10 });
@@ -38,16 +46,49 @@
 [% END %]
    });
 
+function show_control(state) {
+    if (state == current_state) {
+        return;
+    }
+
+    if (state == 'pause') {
+        show_control_play();
+    } else {
+        show_control_pause();
+    }
+
+    current_state = state;
+}
+
 function show_control_pause() {
-  $( '#play-pause').html('<a href="#" data-href="pause"  data-ajax="false" data-icon="pause"   >Pause</a>');
-  $( '#controls' ).navbar();
+  $( '#controls-play' ).hide();
+  $( '#controls-pause').show();
 }
 
 function show_control_play() {
-  $( '#play-pause').html('<a href="#" data-href="play"  data-ajax="false" data-icon="play"   >Play</a>');
-  $( '#controls' ).navbar();
+  $( '#controls-pause').hide();
+  $( '#controls-play' ).show();
 }
 
+function fetchCurrent() {
+    $.getJSON( "/current/", {} )
+        .done(function( json ) {
+            $('#status').empty();
+            if (json.title == 'No song playing') {
+                $('#status').append(json.title);
+            } else {
+                $('#status').append(json.title + '<br />' + json.artist + '<br /><smaller>' + json.sofar + ' of ' + json.total + '</smaller>');
+            }
+
+            show_control(json.state);
+        })
+        .fail(function( jqxhr, textStatus, error ) {
+            var err = textStatus + ', ' + error;
+            console.log( "Request Failed: " + err);
+        })
+};
+
+setInterval(function(){fetchCurrent()}, 10000 );
 
 // For thr navbar, send ajax queries.
 $(document).delegate('#controls li > a', 'click', function () {
@@ -58,12 +99,8 @@ $(document).delegate('#controls li > a', 'click', function () {
         dataType: 'json',
         async: true,
         success: function(data) {
+            show_control(data.state);
             fetchCurrent();
-            if ( data.state == 'pause' ) {
-              show_control_play();
-            } else {
-              show_control_pause();
-            }
         },
     });