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 autoplay = false
initial_count = $('.playlist-tracks li').length initial_count = $('.playlist-tracks li').length
$('.playlist-tracks').append ' $('.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="item">
<div class="fade"></div> <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> <span class="duration">' +length+ '</span>
<div class="remove">remove</div> <div class="remove">remove</div>
</div> </div>
</li>' </li>'
$('.playlist').html($('.playlist-tracks')).scrollbar() $('.playlist').html($('.playlist-tracks')).scrollbar
$('.playlist-tracks').sortable() $('.playlist-tracks').sortable axis: 'y', handle: '.dragbox'
if autoplay if autoplay
_player.setTrack($('.playlist-tracks li').last().attr('id').split('i')[1]) _player.setTrack($('.playlist-tracks li').last().attr('id').split('i')[1])
@ -200,8 +205,8 @@ $('.playlist-tracks li .remove').live 'click', ->
$li.remove() $li.remove()
false false
$('.playlist-tracks li').live 'dblclick', -> $('.playlist-tracks li .title .playtrack').live 'click', ->
_player.setTrack $(this).attr('id').split('i')[1] _player.setTrack $(this).parent().parent().parent().attr('id').split('i')[1]
false false
# Adding To Playlist actions # Adding To Playlist actions
@ -230,7 +235,7 @@ $('.tracklist li').live 'mouseover mouseout', (e) ->
$(this).find('.add-track').hide() $(this).find('.add-track').hide()
false false
$('.tracklist li').live 'dblclick', (e) -> $('.tracklist li').live 'click', (e) ->
artist = $('.artist-info .name').html() artist = $('.artist-info .name').html()
album = $(this).parent().parent().parent().find('h2.name').text().replace /\s\([\d]{4}\)$/, '' album = $(this).parent().parent().parent().find('h2.name').text().replace /\s\([\d]{4}\)$/, ''
track_name = $(this).find('.trackname').html() 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', -> $('.suggestions a').live 'click', ->
$('#search_field').val $(this).text() $('#search_field').val $(this).text()
false 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; initial_count = $('.playlist-tracks li').length;
$('.playlist-tracks').append('\ $('.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="item">\
<div class="fade"></div>\ <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>\ <span class="duration">' + length + '</span>\
<div class="remove">remove</div>\ <div class="remove">remove</div>\
</div>\ </div>\
</li>'); </li>');
$('.playlist').html($('.playlist-tracks')).scrollbar(); $('.playlist').html($('.playlist-tracks')).scrollbar;
$('.playlist-tracks').sortable(); $('.playlist-tracks').sortable({
axis: 'y',
handle: '.dragbox'
});
if (autoplay) { if (autoplay) {
return _player.setTrack($('.playlist-tracks li').last().attr('id').split('i')[1]); return _player.setTrack($('.playlist-tracks li').last().attr('id').split('i')[1]);
} else if (initial_count === 0 && !_player.hasTrack()) { } else if (initial_count === 0 && !_player.hasTrack()) {
@ -231,8 +239,8 @@ $('.playlist-tracks li .remove').live('click', function() {
$li.remove(); $li.remove();
return false; return false;
}); });
$('.playlist-tracks li').live('dblclick', function() { $('.playlist-tracks li .title .playtrack').live('click', function() {
_player.setTrack($(this).attr('id').split('i')[1]); _player.setTrack($(this).parent().parent().parent().attr('id').split('i')[1]);
return false; return false;
}); });
$('.add-album').live('click', function() { $('.add-album').live('click', function() {
@ -265,7 +273,7 @@ $('.tracklist li').live('mouseover mouseout', function(e) {
} }
return false; return false;
}); });
$('.tracklist li').live('dblclick', function(e) { $('.tracklist li').live('click', function(e) {
var album, artist, length, track_name; var album, artist, length, track_name;
artist = $('.artist-info .name').html(); artist = $('.artist-info .name').html();
album = $(this).parent().parent().parent().find('h2.name').text().replace(/\s\([\d]{4}\)$/, ''); album = $(this).parent().parent().parent().find('h2.name').text().replace(/\s\([\d]{4}\)$/, '');

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

@ -70,4 +70,8 @@ $('#search_form').live('submit', function() {
$('.suggestions a').live('click', function() { $('.suggestions a').live('click', function() {
$('#search_field').val($(this).text()); $('#search_field').val($(this).text());
return false; 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 { &:hover {
background-color: #FAFAFA; background-color: #FAFAFA;
cursor: pointer;
.track-container { .track-container {
.fade { .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 { .title {
position: absolute; position: absolute;
top: 0; top: 0;
left: 5px; left: 19px;
z-index: 10; z-index: 10;
width: 330px; width: 316px;
height: 26px; height: 26px;
line-height: 26px; line-height: 26px;
display: block; display: block;
float: left; float: left;
overflow: hidden; overflow: hidden;
.data.artist, .playtrack {
border-bottom: #555 1px dotted;
cursor: pointer;
}
} }
.duration { .duration {

3
public/stylesheets/albums.css
View File

@ -44,7 +44,8 @@
position: relative; position: relative;
padding-left: 25px; } padding-left: 25px; }
.albums .album .tracklist ul li:hover { .albums .album .tracklist ul li:hover {
background-color: #FAFAFA; } background-color: #FAFAFA;
cursor: pointer; }
.albums .album .tracklist ul li:hover .track-container .fade { .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: -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)); 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%); 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); 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%); } 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 { .player-container .playlist .playlist-tracks li .item .title {
position: absolute; position: absolute;
top: 0; top: 0;
left: 5px; left: 19px;
z-index: 10; z-index: 10;
width: 330px; width: 316px;
height: 26px; height: 26px;
line-height: 26px; line-height: 26px;
display: block; display: block;
float: left; float: left;
overflow: hidden; } 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 { .player-container .playlist .playlist-tracks li .item .duration {
display: block; display: block;
position: absolute; position: absolute;