localhots
/
oldhaven
1
0
Fork 0
Code Releases Activity

Active playlists artist and track titles, drag control, play from tracklist

This commit is contained in:
magnolia-fan 2011-06-29 02:10:57 +04:00
parent 655e30f995
commit 75f8d826a6
9 changed files with 67 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/coffeescripts/player.coffee
View File

@ -51,17 +51,22 @@ class Player
autoplay = false
initial_count = $('.playlist-tracks li').length
$('.playlist-tracks').append '
<li id="i' +Math.round(Math.random() * 999999)+ '" data-artist="' +artist.trim()+ '" data-album="' +album.trim()+ '" data-track="' +track.trim()+ '" data-length="' +length+ '">
<li id="i' +Math.round(Math.random() * 999999)+ '" data-id="" data-artist="' +artist.trim()+ '" data-album="' +album.trim()+ '" data-track="' +track.trim()+ '" data-length="' +length+ '">
<div class="item">
<div class="fade"></div>
<span class="title" title="' +artist.htmlsafe()+ " &mdash; " +track.htmlsafe()+ '">' +artist+ ' &mdash; ' +track+ '</span>
<div class="dragbox"></div>
<span class="title">
<span class="data artist" title="Open ' +artist.htmlsafe()+ '\'s page">' +artist+ '</span>
&mdash;
<span class="playtrack" title="Play ' +track.htmlsafe()+ ' by ' +artist.htmlsafe()+ '">' +track+ '</span>
</span>
<span class="duration">' +length+ '</span>
<div class="remove">remove</div>
</div>
</li>'
$('.playlist').html($('.playlist-tracks')).scrollbar()
$('.playlist-tracks').sortable()
$('.playlist').html($('.playlist-tracks')).scrollbar
$('.playlist-tracks').sortable axis: 'y', handle: '.dragbox'
if autoplay
_player.setTrack($('.playlist-tracks li').last().attr('id').split('i')[1])
@ -200,8 +205,8 @@ $('.playlist-tracks li .remove').live 'click', ->
$li.remove()
false
$('.playlist-tracks li').live 'dblclick', ->
_player.setTrack $(this).attr('id').split('i')[1]
$('.playlist-tracks li .title .playtrack').live 'click', ->
_player.setTrack $(this).parent().parent().parent().attr('id').split('i')[1]
false
# Adding To Playlist actions
@ -230,7 +235,7 @@ $('.tracklist li').live 'mouseover mouseout', (e) ->
$(this).find('.add-track').hide()
false
$('.tracklist li').live 'dblclick', (e) ->
$('.tracklist li').live 'click', (e) ->
artist = $('.artist-info .name').html()
album = $(this).parent().parent().parent().find('h2.name').text().replace /\s\([\d]{4}\)$/, ''
track_name = $(this).find('.trackname').html()

3
app/coffeescripts/search.coffee
View File

@ -58,3 +58,6 @@ $('#search_form').live 'submit', ->
$('.suggestions a').live 'click', ->
$('#search_field').val $(this).text()
false
$('.data.artist').live 'click', ->
_ajax.go('/artist/'+$(this).text().replace(' ', '+')+'/');
false;

BIN
public/images/drag.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 921 B

22
public/javascripts/coffee/player.js
View File

@ -59,16 +59,24 @@ Player = (function() {
}
initial_count = $('.playlist-tracks li').length;
$('.playlist-tracks').append('\
<li id="i' + Math.round(Math.random() * 999999) + '" data-artist="' + artist.trim() + '" data-album="' + album.trim() + '" data-track="' + track.trim() + '" data-length="' + length + '">\
<li id="i' + Math.round(Math.random() * 999999) + '" data-id="" data-artist="' + artist.trim() + '" data-album="' + album.trim() + '" data-track="' + track.trim() + '" data-length="' + length + '">\
<div class="item">\
<div class="fade"></div>\
<span class="title" title="' + artist.htmlsafe() + " &mdash; " + track.htmlsafe() + '">' + artist + ' &mdash; ' + track + '</span>\
<div class="dragbox"></div>\
<span class="title">\
<span class="data artist" title="Open ' + artist.htmlsafe() + '\'s page">' + artist + '</span>\
&mdash;\
<span class="playtrack" title="Play ' + track.htmlsafe() + ' by ' + artist.htmlsafe() + '">' + track + '</span>\
</span>\
<span class="duration">' + length + '</span>\
<div class="remove">remove</div>\
</div>\
</li>');
$('.playlist').html($('.playlist-tracks')).scrollbar();
$('.playlist-tracks').sortable();
$('.playlist').html($('.playlist-tracks')).scrollbar;
$('.playlist-tracks').sortable({
axis: 'y',
handle: '.dragbox'
});
if (autoplay) {
return _player.setTrack($('.playlist-tracks li').last().attr('id').split('i')[1]);
} else if (initial_count === 0 && !_player.hasTrack()) {
@ -231,8 +239,8 @@ $('.playlist-tracks li .remove').live('click', function() {
$li.remove();
return false;
});
$('.playlist-tracks li').live('dblclick', function() {
_player.setTrack($(this).attr('id').split('i')[1]);
$('.playlist-tracks li .title .playtrack').live('click', function() {
_player.setTrack($(this).parent().parent().parent().attr('id').split('i')[1]);
return false;
});
$('.add-album').live('click', function() {
@ -265,7 +273,7 @@ $('.tracklist li').live('mouseover mouseout', function(e) {
}
return false;
});
$('.tracklist li').live('dblclick', function(e) {
$('.tracklist li').live('click', function(e) {
var album, artist, length, track_name;
artist = $('.artist-info .name').html();
album = $(this).parent().parent().parent().find('h2.name').text().replace(/\s\([\d]{4}\)$/, '');

4
public/javascripts/coffee/search.js
View File

@ -71,3 +71,7 @@ $('.suggestions a').live('click', function() {
$('#search_field').val($(this).text());
return false;
});
$('.data.artist').live('click', function() {
_ajax.go('/artist/' + $(this).text().replace(' ', '+') + '/');
return false;
});

1
public/stylesheets/_sass/albums.scss
View File

@ -71,6 +71,7 @@
&:hover {
background-color: #FAFAFA;
cursor: pointer;
.track-container {
.fade {

19
public/stylesheets/_sass/player.scss
View File

@ -98,17 +98,32 @@ $icons_dir: "/images/icns/";
}
}
.dragbox {
position: absolute;
top: 1px;
left: 2px;
width: 15px;
height: 26px;
background-image: url('/images/drag.png');
cursor: move;
}
.title {
position: absolute;
top: 0;
left: 5px;
left: 19px;
z-index: 10;
width: 330px;
width: 316px;
height: 26px;
line-height: 26px;
display: block;
float: left;
overflow: hidden;
.data.artist, .playtrack {
border-bottom: #555 1px dotted;
cursor: pointer;
}
}
.duration {

3
public/stylesheets/albums.css
View File

@ -44,7 +44,8 @@
position: relative;
padding-left: 25px; }
.albums .album .tracklist ul li:hover {
background-color: #FAFAFA; }
background-color: #FAFAFA;
cursor: pointer; }
.albums .album .tracklist ul li:hover .track-container .fade {
background: -moz-linear-gradient(left, rgba(250, 250, 250, 0) 0%, #fafafa 50%, #fafafa 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(250, 250, 250, 0)), color-stop(50%, #fafafa), color-stop(100%, #fafafa));

15
public/stylesheets/player.css
View File

@ -73,17 +73,28 @@
background: -ms-linear-gradient(left, rgba(64, 64, 64, 0) 0%, #404040 50%, #404040 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00404040', endColorstr='#404040', GradientType=1);
background: linear-gradient(left, rgba(64, 64, 64, 0) 0%, #404040 50%, #404040 100%); }
.player-container .playlist .playlist-tracks li .item .dragbox {
position: absolute;
top: 1px;
left: 2px;
width: 15px;
height: 26px;
background-image: url("/images/drag.png");
cursor: move; }
.player-container .playlist .playlist-tracks li .item .title {
position: absolute;
top: 0;
left: 5px;
left: 19px;
z-index: 10;
width: 330px;
width: 316px;
height: 26px;
line-height: 26px;
display: block;
float: left;
overflow: hidden; }
.player-container .playlist .playlist-tracks li .item .title .data.artist, .player-container .playlist .playlist-tracks li .item .title .playtrack {
border-bottom: #555 1px dotted;
cursor: pointer; }
.player-container .playlist .playlist-tracks li .item .duration {
display: block;
position: absolute;