Playlist. close #27

app/controllers/track_controller.rb

@@ -9,5 +9,6 @@ class TrackController < ApplicationController
     
     url = Vkontakte.get(artist.name, track.name, (track.length / 1000).round)
     
+    redirect_to url
   end
 end

app/views/artist/view.rhtml

@@ -19,7 +19,7 @@
 				<li id="<%= track.id %>">
 					<span class="play<%= (track.inDb ? '' : ' disabled') %>"><img src="/images/player/play.svg" alt="play" /></span>
 					<span class="track-name"><%= track.name %></span>
-					<span class="duration"><%= track.length.toTime %></span>
+					<span class="duration" data-length="<%= track.length %>"><%= track.length.toTime %></span>
 				</li>
 			<% end %>
 			</ul>

app/views/layouts/application.html.erb

@@ -28,7 +28,13 @@
 				</div>
 				<div class="time-left">0:00</div>
 			</div>
+			<div id="playlist">
+				<div class="show-button"></div>
+				<ul style="display:none;">
+				</ul>
+			</div>
 			<%= yield %>
+			<a href="" onclick="addToPlaylist('Artist', 'Track', 123, 123);return(false);">add</a>
 		</div>
 	</div>
 </body>

public/javascripts/player.js

@@ -3,6 +3,7 @@ var utid;
 $(function(){
 	audio = document.getElementsByTagName('audio')[0];
 	$('#player .play').click(function(){
+		if (! audio.src) return;
 		audio.play();
 		utid = window.setTimeout(updatePlayer, 100);
 		$('#player .pause').show();
@@ -16,21 +17,32 @@ $(function(){
 	})
 	
 	$('.tracks .play').click(function(){
-		playTrack($('h1.artist').html(), $(this).parent().find('.track-name').html(), '/listen/'+ $(this).parent().attr('id') +'/');
+		addToPlaylist(
+			$('h1.artist').html(),
+			$(this).parent().find('.track-name').html(),
+			Math.round($(this).parent().find('.duration').attr('data-length') / 1000),
+			$(this).parent().attr('id')
+		);
+	})
+	$('#playlist .show-button').click(function(){
+		$('#playlist ul').toggle();
 	})
 })
 function updatePlayer() {
 	duration = audio.duration;
 	cur_time = audio.currentTime;
+	if (cur_time == duration) {
+		playNext();
+	}
 	loaded = 0;
 	if ((audio.buffered != undefined) && (audio.buffered.length != 0)) {
 	 	loaded = Math.round((audio.buffered.end(0) / audio.duration) * 730);
-	}
 		$('#player .time-played').html(formatTime(cur_time));
 		$('#player .time-left').html(formatTime(duration - cur_time));
 		progress = Math.round((cur_time / duration) * 730);
 		$('#player .progress-loaded').css('width', loaded +'px')
 		$('#player .progress-point').css('margin-left', progress +'px')
+	}
 	utid = window.setTimeout(updatePlayer, 100);
 }
 function formatTime(sec) {
@@ -39,12 +51,32 @@ function formatTime(sec) {
 	s = sec - (m * 60);
 	return m +':'+ (s < 10 ? '0' : '') +s;
 }
-function playTrack(artist, track, stream) {
+function playTrack(artist, track, id) {
-	$(audio).attr('src', stream);
+	$(audio).attr('src', '/listen/'+ id +'/');
 	$('#player .track-title').html(artist +' &mdash; '+ track);
 	$('#player .time-played').html('0:00');
 	$('#player .time-left').html('0:00');
 	$('#player .progress-loaded').css('width', 0 +'px')
 	$('#player .progress-point').css('margin-left', 0 +'px')
+	$('#playlist li').removeClass('now-playing');
+	$('#playlist li[data-id="'+ id +'"]').addClass('now-playing');
 	$('#player .play').trigger('click');
 }
+function playNext() {
+	$('#playlist ul li.now-playing').next().trigger('click');
+}
+function addToPlaylist(artist, track, length, id) {
+	$('#playlist ul').append($(
+		'<li data-id="'+ id +'">'+
+			'<span class="artist">'+ artist +'</span> &mdash; '+
+			'<span class="track">'+ track +'</span>'+
+			'<span class="length" data-seconds="'+ length +'">'+ formatTime(length) +'</span>'+
+		'</li>'
+	));
+	$('#playlist ul li[data-id="'+ id +'"]').click(function(){
+		playTrack(artist, track, id);
+	})
+	if ($('#playlist ul li').length == 1) {
+		playTrack(artist, track, id);
+	}
+}

public/stylesheets/beathaven.css

@@ -17,7 +17,7 @@ body {
 	margin: 2em;
 }
 
-.artist {
+h1.artist {
 	display: block;
 	width: 100%;
 	text-align: center;

public/stylesheets/player.css

@@ -100,3 +100,46 @@
 			border-radius: 6px;
 			cursor: pointer;
 		}
+#playlist {
+	position: fixed;
+	top: 50px;
+	left: 50%;
+	width: 1000px;
+	margin-left: -500px;
+	background-color: #000;
+	opacity: 60;
+	-moz-opacity: 60;
+	-khtml-opacity: 60;
+	-webkit-opacity: 60;
+}
+	#playlist .show-button {
+		width: 100%;
+		height: 10px;
+		background-color: #222;
+		cursor: pointer;
+	}
+	#playlist ul {
+		margin: 0.2em 0.3em;
+		padding: 0;
+		max-height: 10em;
+		overflow-y: scroll;
+	}
+		#playlist ul li {
+			margin: 0;
+			padding: 0.2em 0;
+			display: block;
+			width: 100%;
+			font-size: 0.8em;
+			color: #FFF;
+		}
+			#playlist ul li:hover {
+				background-color: #222;
+				cursor: pointer;
+			}
+			#playlist ul li.now-playing {
+				background-color: #013;
+			}
+			#playlist ul li .length {
+				margin: 0 0.5em;
+				color: #AAA;
+			}