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