Add progress bar to current playing display and auto update

lib/Radio.pm

@@ -76,7 +76,7 @@ sub ago {
 before_template sub {
   my $tokens = shift;
 
-  $tokens->{current} = $station->current; 
+  $tokens->{station} = $station; 
   $tokens->{ago} = \&ago;
   $tokens->{stream_uri} = setting('stream_uri');
 };
@@ -195,7 +195,10 @@ post '/songs/:album/:n' => sub {
 };
 
 get '/queue' => sub {
-  template 'queue', { queue => $station->queue };
+  my %override = ();
+  $override{layout} = undef if request->is_ajax;
+
+  template 'queue', { queue => $station->queue }, \%override;
 };
 
 post '/queue' => sub {
@@ -244,6 +247,10 @@ get '/logout' => sub {
   redirect '/';
 };
 
+get '/current' => sub {
+  template 'current', {}, { layout => undef };
+};
+
 # default route (404)
 any qr{.*} => sub { 
   status 'not_found'; 

public/jquery.periodicalupdater.js

@@ -0,0 +1,70 @@
+/**
+ * PeriodicalUpdater - jQuery plugin for timed, decaying ajax calls
+ *
+ * http://www.360innovate.co.uk
+ *
+ * Copyright (c) 2009 360innovate (http://www.360innovate.co.uk)
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ *
+ * Version: 1.0
+ */
+
+(function($) {
+    $.PeriodicalUpdater = function(options, callback){
+
+        settings = jQuery.extend({
+            url: '',                // URL of ajax request
+            method: 'get',          // method; get or post
+            sendData: '',           // array of values to be passed to the page - e.g. {name: "John", greeting: "hello"}
+            minTimeout: 1000,       // starting value for the timeout in milliseconds
+            maxTimeout: 8000,       // maximum length of time between requests
+            multiplier: 2,          // if set to 2, timerInterval will double each time the response hasn't changed (up to maxTimeout)
+            type: 'text'            // response type - text, xml, json etc - as with $.get or $.post
+        }, options);
+
+        // should we be GETting or POSTing the URL?
+        f = settings.method == 'post' || settings.method == 'POST' ? $.post : $.get;
+
+        // you really, really don't want multipliers of less than 1 - it will cause lots of strain on the server!
+        settings.multiplier = settings.multiplier < 1 ? 1:settings.multiplier;
+
+        // set some initial values, then begin
+        var prevContent;
+        var timerInterval = settings.minTimeout;
+        getdata();
+
+        function getdata()
+        {
+            f(settings.url, settings.sendData, function(d){
+                if(prevContent != d)
+                {
+                    // content has changed
+                    prevContent = d;
+                    if(callback)
+                    {
+                        callback(d);
+                    }
+
+                    // recursive call to getdata(). You can stop ajax requests from this plugin by calling clearTimeout(PeriodicalTimer);
+                    // (on a button click, for example)
+                    PeriodicalTimer = setTimeout(getdata, settings.minTimeout);
+                }else{
+                    // content hasn't changed - re-calculate timers and recursively call getdata() again
+                    if(timerInterval < settings.maxTimeout)
+                    {
+                        timerInterval = timerInterval * settings.multiplier;
+                    }
+
+                    if(timerInterval > settings.maxTimeout)
+                    {
+                        timerInterval = settings.maxTimeout;
+                    }
+
+                    PeriodicalTimer = setTimeout(getdata, timerInterval);
+                }
+            }, settings.type) 
+        }
+    };  
+})(jQuery);

public/style.css

@@ -220,8 +220,8 @@ input[readonly] {
   font-size: 0.7em;
   text-decoration: none;
   margin-bottom: 0.2em;
-  width: 40%;
-  height: 52px;
+  width: 350px;
+  height: 60px;
 }
 
 #playing img {
@@ -233,11 +233,22 @@ input[readonly] {
 }
 
 #playing p {
-  color: #000;
   text-align: right;
   white-space: nowrap;
   overflow: hidden;
-  margin-bottom: 0;
+  margin-bottom: 0.1em;
+}
+
+#playing p.time {
+  border: 1px solid #000;
+  padding: 0;
+  height: 8px;
+}
+
+#playing p.time span {
+  background: #000;
+  height: 100%;
+  display: block;
 }
 
 form dl {

views/current.tt

@@ -1,9 +1,12 @@
-<% if current %>
-  <a href="/songs/<% current.uri %>">
-    <img src="/songs/<% current.album.uri %>.png" alt="cover" />
-    <p><% current.title %></p>
-    <p><% current.artist %></p>
-    <p><% current.album.title %></p>
+<% if station.current %>
+  <a href="/songs/<% station.current.uri %>">
+    <img src="/songs/<% station.current.album.uri %>.png" alt="cover" />
   </a>
+  <p><% station.current.title %></p>
+  <p><% station.current.artist %></p>
+  <p><% station.current.album.title %></p>
+  <p class="time">
+    <span style="width: <% station.status.time.percent %>%">&nbsp;</span>
+  </p>
 <% end %>
 

views/layouts/main.tt

@@ -3,6 +3,17 @@
   <head>
     <title>Eat a Brick Radio</title>
     <link rel="stylesheet" href="/style.css" />
+    <script type="text/javascript" src="/jquery.min.js"></script>
+    <script type="text/javascript" src="/jquery.periodicalupdater.js"></script>
+    <script type="text/javascript">
+      $(document).ready(function() {
+        $.PeriodicalUpdater({ 
+          url: '/current',
+          minTimeout: 100,
+          maxTimeout: 1000,
+        }, function(data) { $('#playing').html(data) } )
+      });
+    </script>
   </head>
 
   <body>

views/queue.tt

@@ -14,7 +14,7 @@
 
 <% if queue.size > 0 %>
   <% for song in queue %>
-    <div class="queue <% if current.file == song.file %>current<% end %>">
+    <div class="queue <% if station.current.file == song.file %>current<% end %>">
       <img src="/songs/<% song.album.uri %>.png" alt="cover" />
       <p><a href="/songs/<% song.uri %>"><% song.title %></a></p>
       <p><% song.artist %></p>

views/songs.tt

@@ -1,6 +1,6 @@
 <% if songs.size > 0 %>
   <% for song in songs %>
-    <div class="queue <% if current.file == song.file %>current<% end %>">
+    <div class="queue <% if station.current.file == song.file %>current<% end %>">
       <img src="/songs/<% song.album.uri %>.png" alt="cover" />
       <p><a href="/songs/<% song.uri %>"><% song.title %></a></p>
       <p><% song.artist %></p>