Commits

Adam Gomaa committed 6653c58

Fix elapsed/remaining/duration time display.

  • Participants
  • Parent commits 52da8b8

Comments (0)

Files changed (1)

webmusic/templates/music.js

     var get_template = function(selector){
         return _.template($(selector).html().replace(/&lt;/g, "<").replace(/&gt;/g, ">"));
     }
+    var format_time = function(duration){
+        var mins = Math.floor(duration / 60);
+        var secs = Math.floor(duration % 60);
+        if(secs<10){secs = "0" + secs}
+        return mins + ":" + secs;
+    }
 
     var Artist = Backbone.Model.extend({});
     var Album = Backbone.Model.extend({});
     var Song = Backbone.Model.extend({
         duration_display: function(){
-            var mins = Math.floor(this.get("duration") / 60);
-            var secs = Math.floor(this.get("duration") % 60);
-            if(secs<10){secs = "0" + secs}
-            return mins + ":" + secs;
+            return format_time(this.get("duration"));
         }
     });
 
         el: $(window.document),
         initialize: function(){
             this._inittime = new Date();
+            this._apptime = 0;
             _.bindAll(this, "initBody", "log", "initViews",
                       "onResize", "appTime", "loadSong",
                       "startPlayback", "seekRatio", "seekTime",
         },
         appTime: function(){
             /* seconds this has run */
-            return (new Date() - this._inittime) / 1000;
+            var s = (new Date() - this._inittime) / 1000;
+            var d = s - this._apptime;
+            this._apptime = s;
+            return "" + format_time(s) + "+" + format_time(d);
         },
         mkaudio: function(){
             $("body").find("audio").remove()
             this.audio = this.$audio[0];
 
             this.$audio.bind("canplaythrough", this.startPlayback);
-            this.$audio.bind("timeupdate", this.timeUpdate);
+            this.$audio.bind("timeupdate", _.throttle(this.timeUpdate, 500));
             this.audio.addEventListener("ended", this.audioEnded)
             //this.$audio.bind("ended", this.audioEnded);
         },
         },
         startPlayback: function(){
             this.audio.play();
+            this.controls.$duration.text(format_time(this.audio.duration));
         },
         seekRatio: function(ratio){
-            this.log("seeking to: " + ratio);
             this.seekTime(this.audio.duration * ratio);
         },
         seekTime: function(time){
             this.audio.currentTime = time;
-            this.log("seeking to: " + time);
+            this.log("seeking to: " + format_time(time));
         },
         timeUpdate: function(){
             var completion = this.audio.currentTime / this.audio.duration;
             this.controls.$slider.slider("value", completion * 500);
+            this.controls.$remaining.text(format_time(this.audio.duration - this.audio.currentTime));
+            this.controls.$elapsed.text(format_time(this.audio.currentTime));
         },
         audioEnded: function(){
             this.log("audio ended");
             this.$duration = this.$("#duration");
             this.$remaining = this.$("#remaining");
 
+            this.$elapsed.text("00:00")
+            this.$duration.text("00:00")
+            this.$remaining.text("00:00")
 
             this.$slider = this.$("#slider");
             this.$slider.slider({max: 500})