From 87ccf49a3d34cc115d5c6544fdd1fb4cdc97baaf Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordaneldredge@gmail.com>
Date: Fri, 14 Nov 2014 17:43:10 -0800
Subject: [PATCH] Add message while seeking

Also fix issue where the position slider would jump around if you seeked while playing.
---
 index.html |  1 +
 media.js   |  3 +++
 winamp.css |  8 ++++++++
 winamp.js  | 30 +++++++++++++++++++++++++++++-
 4 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index b5f7fb23..0527da87 100755
--- a/index.html
+++ b/index.html
@@ -40,6 +40,7 @@
                 <div id='song-title' class='text'></div>
                 <div id='volume-message' class='text'></div>
                 <div id='balance-message' class='text'></div>
+                <div id='position-message' class='text'></div>
                 <div id='kbps'></div>
                 <div id='khz'></div>
                 <div class='mono-stereo'>
diff --git a/media.js b/media.js
index 4916d2c7..f8cff8e3 100644
--- a/media.js
+++ b/media.js
@@ -3,6 +3,9 @@ function Media (audioId) {
     this.audio = document.getElementById(audioId);
 
     /* Properties */
+    this.duration = function() {
+        return this.audio.duration;
+    }
     this.timeElapsed = function() {
         return this.audio.currentTime;
     }
diff --git a/winamp.css b/winamp.css
index fd479dd5..bca79a17 100755
--- a/winamp.css
+++ b/winamp.css
@@ -214,11 +214,19 @@ a:focus { outline: none; }
 
 .setting-volume #song-title { display: none; }
 .setting-volume #balance-message { display: none; }
+.setting-volume #position-message { display: none; }
 .setting-volume #volume-message { display: block; }
+
 .setting-balance #song-title { display: none; }
 .setting-balance #volume-message { display: none; }
+.setting-balance #position-message { display: none; }
 .setting-balance #balance-message { display: block; }
 
+.setting-position #song-title { display: none; }
+.setting-position #volume-message { display: none; }
+.setting-position #balance-message { display: none; }
+.setting-position #position-message { display: block; }
+
 .media-info #kbps {
     position: absolute;
     left: 111px;
diff --git a/winamp.js b/winamp.js
index ecacfbad..f2e2c6fb 100755
--- a/winamp.js
+++ b/winamp.js
@@ -13,6 +13,7 @@ function Winamp () {
         'fileInput': document.getElementById('file-input'),
         'volumeMessage': document.getElementById('volume-message'),
         'balanceMessage': document.getElementById('balance-message'),
+        'positionMessage': document.getElementById('position-message'),
         'songTitle': document.getElementById('song-title'),
         'time': document.getElementById('time'),
         'shadeTime': document.getElementById('shade-time'),
@@ -103,7 +104,9 @@ function Winamp () {
     }
 
     this.media.addEventListener('timeupdate', function() {
-        self.nodes.position.value = self.media.percentComplete();
+        if(!self.nodes.winamp.classList.contains('setting-position')) {
+            self.nodes.position.value = self.media.percentComplete();
+        }
         self.updateTime();
     });
 
@@ -182,6 +185,26 @@ function Winamp () {
         self.setVolume(this.value);
     }
 
+    this.nodes.position.onmousedown = function() {
+        if(!self.nodes.winamp.classList.contains('stop')){
+            self.nodes.winamp.classList.add('setting-position');
+        }
+    }
+
+    this.nodes.position.onmouseup = function() {
+        // This should only even be needed when we are stopped, but better safe
+        // than sorry
+        self.nodes.winamp.classList.remove('setting-position');
+    }
+
+    this.nodes.position.oninput = function() {
+        var elapsed = self._timeString(self.media.timeElapsed());
+        var duration = self._timeString(self.media.duration());
+        var percentComplete = Math.round(self.media.percentComplete());
+        var message = "Seek to: " + elapsed + "/" + duration + " (" + percentComplete + "%)";
+        self.font.setNodeToString(self.nodes.positionMessage, message);
+    }
+
     this.nodes.position.onchange = function() {
         if(!self.nodes.winamp.classList.contains('stop')){
             self.media.seekToPercentComplete(this.value);
@@ -363,6 +386,11 @@ function Winamp () {
         ];
     }
 
+    this._timeString = function(time) {
+        var timeObject = self._timeObject(time);
+        return timeObject[0] + timeObject[1] + ':' + timeObject[2] + timeObject[3];
+    }
+
     // TODO: Move to font.js
     function digitHtml(digit) {
         horizontalOffset = digit * 9;