diff --git a/index.html b/index.html
index b5f7fb23..0527da87 100755
--- a/index.html
+++ b/index.html
@@ -40,6 +40,7 @@
+
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;