localhots/oldhaven
1
0
Fork 0
Code Releases Activity

Playlist. close #27

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
public/javascripts/player.js
+41 -9
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);
}
}
public/stylesheets/beathaven.css
+1 -1
View File
@@ -17,7 +17,7 @@ body {
margin: 2em;
}
.artist {
h1.artist {
display: block;
width: 100%;
text-align: center;
public/stylesheets/player.css
+44 -1
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;
}