+ Added track time display to the Control Page.

lib/javascript.js

@@ -2,12 +2,40 @@
 	song_length = {$song_length};
 	song_position = {$song_position};
 	
+	song_min = {$initialmin};
+	song_sec = {$initialsec};
+	
 	mpd_state = '{$mpd_state}';
 		
 	{literal}
 	
+	update_int = null;
+	
+	function format_time(number) {
+		if (number < 10) {
+			return '0' + number.toString();
+		}
+		else {
+			return number.toString();
+		}
+	}
+	
 	function update_progress() {
 	
+		//set the interval if it hasn't been set already.
+		if (update_int == null) {
+			update_int = setInterval('update_progress()', 1000);
+		}
+
+		if (song_position < song_length) {
+			song_position = song_position + 1;
+			song_sec = song_sec + 1;
+			if (song_sec >= 60) {
+				song_sec = 0;
+				song_min = song_min + 1
+			}
+		}
+		
 		progressbar = document.getElementById('progressbar');
 		
 		new_margin = Math.round(200 - ((song_position / song_length) * 200));
@@ -15,17 +43,16 @@
 		new_margin_string = new_margin + 'px';
 		
 		progressbar.style.marginRight = new_margin_string;
+		document.getElementById('min').innerHTML = format_time(song_min);
+		document.getElementById('sec').innerHTML = format_time(song_sec);
 		
 		//alert(progressbar.style.marginRight + ' - ' + new_margin_string);
 		
-		if (song_position < song_length) {
-			song_position = song_position + 1;
-		}
-		
 	}
 	
 	if (mpd_state == 'play') {
-		update_int = setInterval('update_progress()', 1000);
+		//start off with a shorter interval. this should make the whole thing a little more accurate.
+		setTimeout('update_progress()', 750);
 	}
 	
 	{/literal}

lib/page.php

@@ -38,11 +38,15 @@
 				$smarty->assign('coversize', $_CONFIG['album_cover_size']);
 			}
 			
-			$time_left = (($mympd->current_track_length - $mympd->current_track_position) + 2) * 1000;
+			$time_left = (($mympd->current_track_length - $mympd->current_track_position) + 1) * 1000;
 			
 			$initialprogress = round(200 - (($mympd->current_track_position / $mympd->current_track_length) * 200));
 			
 			$smarty->assign('initialprogress', $initialprogress);
+			$smarty->assign('initialmin', date('i', $mympd->current_track_position));
+			$smarty->assign('initialsec', date('s', $mympd->current_track_position));
+			$smarty->assign('totalmin', date('i', $mympd->current_track_length));
+			$smarty->assign('totalsec', date('s', $mympd->current_track_length));
 			
 			//echo $time_left / 1000;
 			

templates/default/control.html

@@ -2,6 +2,8 @@
 		
 		<div id="song_display">{if $current_title}<span class="pos">{$current_track_no+1|string_format:"%02d"}.</span> <span class="title">{$current_title}</span><br /><span class="artist">{$current_artist}</span> {if $current_album}<!--<span class="album">({$current_album})</span>-->{/if}{elseif $current_file}{$current_file}{else}<br />[Nothing playing]{/if}</div>
 
+		{if $mpd_state == 'play' || $mpd_state == 'pause'}<div id="tracktime"><span id="min">{$initialmin}</span>:<span id="sec">{$initialsec}</span> <span id="total">({$totalmin}:{$totalsec})</span></div>{/if}
+
 		{if $mpd_state == 'play' || $mpd_state == 'pause'}<div id="progress"><div id="progressbar" style="margin-right: {$initialprogress}px;">&nbsp;</div></div>{/if}
 
 		{if $coverimage}<div id="cover_image"><img id="cover" title="{$current_album}" src="lib/image.php?file={$coverimage}&size={$coversize}" /></div>{/if}

templates/default/styles.css

@@ -157,5 +157,11 @@ img#cover {
 	border: 1px solid #666;
 	padding: 2px;
 }
+#tracktime {
+	font-weight: bold;
+}
+#tracktime #total {
+	color: #666;
+}
 
 {/literal}