From c4f46e87e583e25c77d70785adba8d7c179161cf Mon Sep 17 00:00:00 2001
From: Andrew Ruthven <andrew@etc.gen.nz>
Date: Wed, 12 Jun 2013 00:43:21 +1200
Subject: [PATCH] Increment the timer, fetchCurrent at end of song.

---
 lib/EtcX/Sounds.pm    |  4 +-
 views/index.tt        | 85 ++++++++++++++++++++++++++++++++++++++++---
 views/layouts/main.tt | 20 ----------
 3 files changed, 82 insertions(+), 27 deletions(-)

diff --git a/lib/EtcX/Sounds.pm b/lib/EtcX/Sounds.pm
index 7c46eee..e2d7a89 100644
--- a/lib/EtcX/Sounds.pm
+++ b/lib/EtcX/Sounds.pm
@@ -63,8 +63,8 @@ ajax '/current/' => sub {
             album  => $song->album,
             title  => $song->title,
             artist => $song->artist,
-            sofar  => $time->sofar,
-            total  => $time->total,
+            sofar  => $time->seconds_sofar * 1000,
+            total  => $time->seconds_total * 1000,
         }
     } else {
         return {
diff --git a/views/index.tt b/views/index.tt
index aab9170..948408a 100644
--- a/views/index.tt
+++ b/views/index.tt
@@ -8,7 +8,11 @@
   <div data-role="popup" id="notification"><p>[% msg %]</p></div>
   [% END %]
 
-    <div id="status" style="padding-left: 20px; padding-right: 20px;"></div>
+    <div id="status" style="padding-left: 20px; padding-right: 20px;">
+      <span id="title"></span><br />
+      <span id="artist"></span><br />
+      <smaller><span id="sofar">0:00</span> of <span id="total">0:00</span></smaller>
+    </div>
     <form method="post">
 [% FOR list IN playlist -%]
       <input type="submit" name="submit" value="[% list %]"[% IF list == current %] data-icon="check"[% END -%]>
@@ -17,14 +21,85 @@
   </div>
 
 <script type="text/javascript">
+var start = 0;
+var sofar = 0.0;
+var end = 0;
+var title = '';
+var artist = '';
+
+function displayTime(ms) {
+    var toDisplay = ms;
+
+    if (ms > end) {
+        toDisplay = end;
+    }
+
+    var mms = ms % 1000;
+    ms = (ms - mms) / 1000;
+    var ss = ms % 60;
+    ms = (ms - ss) / 60;
+    var mm = ms % 60;
+    var hh = (ms - mm) / 60;
+
+    var t = "";
+    if (hh > 0)  {
+        t  = hh+':';
+        mm = '0'+mm;
+    }
+    if (ss < 10) { ss = '0'+ss; }
+    return t+mm+':'+ss;
+}
+
+setInterval(function()
+{
+    var time = new Date().getTime() - start;
+    if(Math.round(time) == time) { time += '.0'; }
+
+    if (time >= end) {
+        $('#sofar').html(displayTime(end));
+        fetchCurrent();
+    }
+
+    if ($('#sofar').html() != time) {
+        $('#sofar').html(displayTime(time));
+        sofar = time;
+    }
+}, 100);
+
 function fetchCurrent() {
     $.getJSON( "/current/", {} )
         .done(function( json ) {
-            $('#status').empty();
-            if (json.status == 'none') {
-                $('#status').append(json.title);
+            if (json.title != title || json.artist != artist) {
+                if (json.status == 'none') {
+                    $('#title').html(json.title);
+                    title  = none;
+                    artist = '';
+
+                    start = 0;
+                    sofar = 0.0;
+                    end   = 0;
+
+                    $('#sofar').html(displayTime(0));
+                    $('#total').html(displayTime(total));
+                } else {
+                    title  = json.title;
+                    artist = json.artist;
+
+                    $('#title').html(title);
+                    $('#artist').html(artist);
+
+                    start = new Date().getTime() - json.sofar;
+                    sofar = json.sofar + '.0';
+                    end   = json.total;
+
+                    $('#sofar').html(displayTime(sofar));
+                    $('#total').html(displayTime(end));
+                }
             } else {
-                $('#status').append(json.title + '<br />' + json.artist + '<br /><smaller>' + json.sofar + ' of ' + json.total + '</smaller>');
+                if (json.sofar != sofar) {
+                    $('#sofar').html(displayTime(json.sofar));
+                    sofar = json.sofar;
+                }
             }
         })
         .fail(function( jqxhr, textStatus, error ) {
diff --git a/views/layouts/main.tt b/views/layouts/main.tt
index 95f689a..b1bbb53 100644
--- a/views/layouts/main.tt
+++ b/views/layouts/main.tt
@@ -70,26 +70,6 @@ function show_control_play() {
   $( '#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 () {
     $.ajax({
-- 
2.30.2