From e5237b5fab8ea71a83c93618096e780411a8d7f7 Mon Sep 17 00:00:00 2001
From: magnolia-fan <magnolia_fan@me.com>
Date: Fri, 15 Apr 2011 00:24:24 +0400
Subject: [PATCH] Progress bar click moves track position

---
 public/javascripts/player.js  | 42 ++++++++++++++++++++++++-----------
 public/stylesheets/player.css |  4 ++++
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/public/javascripts/player.js b/public/javascripts/player.js
index 0ba1029..a9007d6 100644
--- a/public/javascripts/player.js
+++ b/public/javascripts/player.js
@@ -46,7 +46,7 @@ $(function(){
 		playPrev();
 	}).disableTextSelect();
 	$('#player .next').click(function(){
-		playNext(false);
+		playNext();
 	}).disableTextSelect();
 	$('#player .shuffle, #player .repeat').click(function(){
 		$(this).toggleClass('on');
@@ -55,13 +55,19 @@ $(function(){
 		$('#playlist').toggle();
 		//$('#playlist').data('jsp').reinitialise();
 	})
+	$('#player .progress-bar').click(function(e){
+		if (typeof(audio) !== 'undefined' && typeof(audio.duration) !== 'undefined') {
+			desired_progress = Math.abs(e.pageX - $(this).offset().left) / $('#player .progress-bar').innerWidth();
+			audio.currentTime = Math.round(audio.duration * desired_progress);
+		}
+	})
 	$('#playlist').hide();
 })
 function updatePlayer() {
 	duration = audio.duration;
 	cur_time = audio.currentTime;
 	if (cur_time == duration) {
-		playNext(true);
+		playNext();
 	}
 	loaded = 0;
 	if ((audio.buffered != undefined) && (audio.buffered.length != 0)) {
@@ -73,7 +79,7 @@ function updatePlayer() {
 		$('#player .progress-point').css('margin-left', progress +'px')
 		
 		/* Starting buffering next track */
-		if (Math.round(cur_time / duration * 100) > 70) {
+		if (Math.round(cur_time / duration * 100) > 10) {
 			addAudio(next_audio);
 		}
 	}
@@ -87,6 +93,7 @@ function formatTime(sec) {
 }
 function playTrack(artist, track, id) {
 	switchAudio(id);
+	setNext();
 	$('#player .track-title').html(artist +' &mdash; '+ track);
 	$('#player .time-played').html('0:00');
 	$('#player .time-left').html('0:00');
@@ -94,27 +101,31 @@ function playTrack(artist, track, id) {
 	$('#player .progress-point').css('margin-left', 0 +'px')
 	$('#player .play').trigger('click');
 }
-function playPrev() {
+function setPrev() {
 	if ($('#playlist ul.list li').length == 0) return false;
-	if ($('#playlist ul.list li.now-playing').prev().length == 0) {
-		$('#playlist ul.list li:last').dblclick();
-	} else { 
-		$('#playlist ul.list li.now-playing').prev().dblclick();
+	if (!audio) {
+		prev_audio = $(audio).attr('data-id');
 	}
 }
-function playNext(auto) {
+function setNext() {
 	if ($('#playlist ul.list li').length == 0) return false;
 	if ($('#player .shuffle').hasClass('on')) {
-		$('#playlist ul.list li').rand().dblclick();
+		next_audio = $('#playlist ul.list li').rand().attr('data-id');
 	}
 	if ($('#playlist ul.list li.now-playing').next().length == 0) {
-		if ((auto && $('#player .repeat').hasClass('on')) || !auto) {
-			$('#playlist ul.list li:first').dblclick();
+		if ($('#player .repeat').hasClass('on')) {
+			next_audio = $('#playlist ul.list li:first').attr('data-id');
 		}
 	} else { 
-		$('#playlist ul.list li.now-playing').next().dblclick();
+		next_audio = $('#playlist ul.list li.now-playing').next().attr('data-id');
 	}
 }
+function playPrev() {
+	return false;
+}
+function playNext() {
+	$('#playlist ul.list li[data-id="'+ next_audio +'"]').dblclick();
+}
 function addToPlaylist(artist, track, length, id) {
 	$('#playlist ul.list').append($(
 		'<li data-id="'+ id +'" title="Double-click To Play">'+
@@ -136,6 +147,7 @@ function addToPlaylist(artist, track, length, id) {
 		$('#playlist').jScrollPane();
 	}
 	$('#player .playlist .count').html($('#playlist ul.list li').length);
+	setNext();
 }
 function addAudio(id) {
 	if ($('#audio_'+ id).length == 0) {
@@ -143,6 +155,10 @@ function addAudio(id) {
 	}
 }
 function switchAudio(id) {
+	if (audio) {
+		audio.pause();
+		audio.currentTime = 0;
+	}
 	if ($('#audio_'+ id).length == 0) {
 		addAudio(id);
 	}
diff --git a/public/stylesheets/player.css b/public/stylesheets/player.css
index 2afca94..ce8aa5d 100644
--- a/public/stylesheets/player.css
+++ b/public/stylesheets/player.css
@@ -90,6 +90,9 @@ audio {
 			width: 390px;
 			height: 3px;
 		}
+			#player .progress-bar:hover {
+				cursor: pointer;
+			}
 		#player .progress-loaded {
 			float: left;
 			width: 0;
@@ -185,6 +188,7 @@ audio {
 			}
 			#playlist ul li.now-playing {
 				background-color: #013;
+				font-weight: bold;
 			}
 			#playlist ul li .length {
 				margin: 0 0.5em;