Start using some AJAX to avoid page reloads.

Show current song via AJAX, automatically refreshed, and implement song skip via AJAX too. Thanks to tadzik for suggesting this.
bigpresh · Nov 17, 2010 · 88d46ae · 88d46ae
1 parent b282558
commit 88d46ae
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 6 deletions.
diff --git a/lib/DancerJukebox.pm b/lib/DancerJukebox.pm
@@ -84,6 +84,15 @@ post '/admin/dequeue' => sub {
     redirect '/admin';
 };
 
+
+get '/ajax/currentsong' => sub { 
+    my $current = mpd->current;
+    to_json({
+        title => $current->title,
+        artist => $current->artist,
+    });
+};
+
 # Fetch the queued songs from the database.
 sub _get_queued_songs {
     my $sth = database->prepare('select * from queue where played is null');

diff --git a/views/index.tt b/views/index.tt
@@ -1,9 +1,4 @@
 
-<p>
-Current song: <b>[% current.title %]</b> by <b>[% current.artist %]</b>
-(<a href="/control/skip">Skip song</a>)
-</p>
-
 <div id="playlist">
 
 <h2>Current Playlist</h2>

diff --git a/views/layouts/main.tt b/views/layouts/main.tt
@@ -1,8 +1,30 @@
 <html>
 <head>
 <title>DancerJukebox</title>
-
+<script
+src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
 <link rel="stylesheet" href="/css/style.css" />
+
+<script>
+function update_current_song() {
+    $.getJSON('/ajax/currentsong', function(song) {
+            $('#currentsong').html(
+                "Now playing <b>" + song.title + "</b> by <b>" + song.artist
+                + "</b>"
+            );
+    });
+    window.setTimeout(update_current_song, 4000);
+}
+$(document).ready(function(){
+    update_current_song();
+    $('#skipnext').click(function(){
+        $.getJSON('/control/skip');
+        update_current_song();
+        alert("OK, skipping");
+        return false;
+    });
+});
+</script>
 </head>
 
 <body>
@@ -17,6 +39,11 @@
 </ul>
 <br clear="both" />
 
+<p>
+<span id="currentsong"></span>
+<a href="/control/skipnext" id="skipnext">(skip)</a>
+</p>
+
 [% content %]
 
 <br clear="both" />