Repeat, shuffle, empty playlist. Closes #68

public/css/player.css

@@ -63,6 +63,54 @@
 		background-image: url('/images/icns/next.png');
 	}
 
+#player-container .additional-controls {
+	width: 350px;
+	height: 27px;
+	background-color: #333;
+	border-top: #444 1px solid;
+}
+	#player-container .additional-controls .item {
+		float: left;
+		margin-left: 10px;
+		font-size: 14px;
+		line-height: 26px;
+		color: #FFF;
+		-moz-opacity: 0.4;
+		-ms-filter:”alpha(opacity=40)”;
+		filter:alpha(opacity=40);
+		opacity: 0.4;
+		
+	}
+		#player-container .additional-controls .item:hover {
+			-moz-opacity: 1;
+			-ms-filter:”alpha(opacity=100)”;
+			filter:alpha(opacity=100);
+			opacity: 1;
+			cursor: pointer;
+		}
+		#player-container .additional-controls .item.active {
+			-moz-opacity: 0.9;
+			-ms-filter:”alpha(opacity=90)”;
+			filter:alpha(opacity=90);
+			opacity: 0.9;
+			cursor: pointer;
+		}
+		#player-container .additional-controls .item img {
+			float: left;
+			margin-top: 1px;
+		}
+		#player-container .additional-controls .item .annotation {
+			float: left;
+			margin-left: 2px;
+		}
+		#player-container .additional-controls .item#empty-playlist {
+			float: right;
+			margin-right: 10px;
+		}
+			#player-container .additional-controls .item#empty-playlist img {
+				margin-top: 3px;
+			}
+
 .playlist-tracks {
 	width: 343px;
 }

public/index.html

@@ -47,6 +47,17 @@
 			<div id="playlist" class="css-scrollbar">
 				<ul class="playlist-tracks"></ul>
 			</div>
+			<div class="additional-controls">
+				<div class="item active" id="repeat">
+					<img src="/images/icns/repeat.png" alt=""/><div class="annotation">Repeat</div>
+				</div>
+				<div class="item" id="shuffle">
+					<img src="/images/icns/shuffle.png" alt=""/><div class="annotation">Shuffle</div>
+				</div>
+				<div class="item" id="empty-playlist">
+					<img src="/images/icns/empty.png" alt=""/><div class="annotation">Empty Playlist</div>
+				</div>
+			</div>
 		</div>
 		<div id="header-container">
 			<div class="hello">

public/js/beathaven/layout.js

@@ -23,7 +23,9 @@ var beathaven = {
 		$('#data-container').height($(window).height() - $('#header-container').height());
 		$('#data-container').width($(window).width() - $('#player').width()).scrollbar();
 		$('#player-container').height($(window).height());
-		$('#playlist').height($(window).height() - $('#player').height()).scrollbar();
+		$('#playlist').height($(window).height() - $('#player').height() - $('#player-container .additional-controls').height());
+		
+		$('#playlist').scrollbar();
 	},
 	
 	checkRedrawScrollbar: function() {
@@ -47,4 +49,18 @@ var beathaven = {
 		$('#data-container').html($('#data-container').find('.inner').first());
 		$('#data-container').scrollbar();
 	}
+}
+
+String.prototype.htmlsafe = function() {
+	var replaces = [
+		["\\", "\\\\"],
+		["\"", """],
+		["<", "&lt;"],
+		[">", "&gt;"]
+	];
+	var str = this;
+	for (var i = 0; i < replaces.length; i++) {
+		str = str.replace(replaces[i][0], replaces[i][1]);
+	}
+	return str;
 }

public/js/beathaven/pages.js

@@ -40,7 +40,7 @@ var Pages = {
 						<div class="track-container">\
 							<div class="fade"></div>\
 							<span class="index">'+ (i+1) +'</span>\
-							<div class="trackname">'+ track.name +'</div>\
+							<div class="trackname" title="'+ track.name.htmlsafe() +'">'+ track.name +'</div>\
 							<div class="length">'+ track.duration +'</div>\
 						</div>\
 					</li>\

public/js/beathaven/player.js

@@ -36,7 +36,15 @@ var Player = {
 			$('#player .progress .played').width(data.currentPercentAbsolute * Player.bar_width / 100);
 		});
 		this.jp.bind($.jPlayer.event.ended, function(e){
-			Player.setTrack(Player.nextTrack());
+			var next = Player.nextTrack();
+			if (next === false) {
+				$('#jplayer').jPlayer('clearMedia');
+				$('#player .now-playing').html('Nothing left to <strike>lose</strike> play');
+				$('#player .loaded, #player .played').width(0);
+				$('.playlist-tracks li').removeClass('now');
+			} else {
+				Player.setTrack(next);
+			}
 		});
 	},
 	
@@ -49,7 +57,7 @@ var Player = {
 		<li id="i'+ Math.round(Math.random() * 999999) +'" data-artist="'+ artist +'" data-album="'+ album +'" data-track="'+ track +'" data-length="'+ length +'">\
 			<div class="item">\
 				<div class="fade"></div>\
-				<span class="title">'+ artist +' &mdash; '+ track +'</span>\
+				<span class="title" title="'+ artist.htmlsafe() +' &mdash; '+ track.htmlsafe() +'">'+ artist +' &mdash; '+ track +'</span>\
 				<span class="duration">'+ length +'</span>\
 				<div class="remove">remove</div>\
 			</div>\
@@ -94,26 +102,61 @@ var Player = {
 		Player.scrobbled = false;
 	},
 	
-	nextTrack: function() {
-		if (true) {															// Shuffle off
-			if ($('.playlist-tracks .now').next().length == 0 && true) {	// Last track in the playlist and repeat is on
-				return $('.playlist-tracks li').first().attr('id').split('i')[1];
+	nextTrack: function(manual) {
+		var manual = typeof manual !== 'undefined'
+		var cnt = $('.playlist-tracks li').length;
+		if (!Player.onShuffle()) {														// Shuffle off
+			if ($('.playlist-tracks .now').next().length == 0 && true) {
+				if (Player.onRepeat() || manual) {										// Last track and repeat is on
+					return $('.playlist-tracks li').first().attr('id').split('i')[1];
+				} else {
+					return false;
+				}
 			} else {
 				return $('.playlist-tracks .now').next().attr('id').split('i')[1];
 			}
+		} else if (cnt === 1) {															// Single track in the playlist
+			return $('.playlist-tracks li').first().attr('id').split('i')[1];
+		} else {																		// Shuffle on
+			while (1) {
+				var rnd = Math.floor(Math.random() * (cnt + .999));
+				var $li = $('.playlist-tracks li').eq(rnd);
+				if ($li.length > 0 && !$li.hasClass('now')) {
+					return $li.attr('id').split('i')[1];
+				}
+			}
 		}
 	},
 	
 	prevTrack: function() {
-		if (true) {															// Shuffle off
-			if ($('.playlist-tracks .now').prev().length == 0 && true) {	// First track in the playlist
+		var cnt = $('.playlist-tracks li').length;
+		if (!Player.onShuffle()) {														// Shuffle off
+			if ($('.playlist-tracks .now').prev().length == 0 && true) {				// First track in the playlist
 				return $('.playlist-tracks li').last().attr('id').split('i')[1];
 			} else {
 				return $('.playlist-tracks .now').prev().attr('id').split('i')[1];
 			}
+		} else if (cnt === 1) {															// Single track in the playlist
+			return $('.playlist-tracks li').first().attr('id').split('i')[1];
+		} else {																		// Shuffle on
+			while (1) {
+				var rnd = Math.floor(Math.random() * (cnt + .999));
+				var $li = $('.playlist-tracks li').eq(rnd);
+				if ($li.length > 0 && !$li.hasClass('now')) {
+					return $li.attr('id').split('i')[1];
+				}
+			}
 		}
 	},
 	
+	onShuffle: function() {
+		return $('#shuffle').hasClass('active');
+	},
+	
+	onRepeat: function() {
+		return $('#repeat').hasClass('active');
+	},
+	
 	updateNowListening: function(artist, album, track) {
 		Session.query('/lastfm/listening?r='+ Math.random(), {'artist': artist, 'album': album, 'track': track})
 	},
@@ -132,7 +175,7 @@ $('#player .controls .prev').live('click', function(){
 });
 
 $('#player .controls .next').live('click', function(){
-	Player.setTrack(Player.nextTrack());
+	Player.setTrack(Player.nextTrack(true));
 });
 
 $('.add-album').live('click', function() {
@@ -196,4 +239,25 @@ $('.playlist-tracks li').live('dblclick', function(){
 
 $('#player .progress').live('click', function(e){
 	$('#jplayer').jPlayer('playHead', Math.round((e.offsetX / Player.bar_width) * 100));
-});
+});
+
+$('#repeat, #shuffle').live('click', function(){
+	$(this).toggleClass('active');
+});
+
+$('#empty-playlist').live('click', function(){
+	if (confirm('Are you sure?')) {
+		$('.playlist-tracks li').remove();
+		$('#jplayer').jPlayer('clearMedia');
+		$('#player .now-playing').text('Add some music to playlist');
+		$('#player .loaded, #player .played').width(0);
+	}
+});
+
+
+
+
+
+
+
+