localhots/oldhaven
1
0
Fork 0
Code Releases Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
public/images/drag.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 921 B

public/javascripts/coffee/player.js
+15 -7
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}\)$/, '');
public/javascripts/coffee/search.js
+4
View File
@@ -70,4 +70,8 @@ $('#search_form').live('submit', function() {
$('.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;
});
public/stylesheets/_sass/albums.scss
+1
View File
@@ -71,6 +71,7 @@
&:hover {
background-color: #FAFAFA;
cursor: pointer;
.track-container {
.fade {
public/stylesheets/_sass/player.scss
+17 -2
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 {
public/stylesheets/albums.css
+2 -1
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));
public/stylesheets/player.css
+13 -2
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;