1
0
Fork 0

Playlist. close #27

This commit is contained in:
magnolia-fan 2011-04-11 08:16:00 +04:00
parent 242c170a41
commit ffea37188c
6 changed files with 94 additions and 12 deletions

View File

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

View File

@ -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>

View File

@ -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>

View File

@ -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);
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')
}
$('#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) {
$(audio).attr('src', stream);
function playTrack(artist, track, id) {
$(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);
}
}

View File

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

View File

@ -99,4 +99,47 @@
border: #FFF 3px solid;
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;
}