localhots/oldhaven
1
0
Fork 0
Code Releases Activity

Marks currently playin track in tracklist

Browse Source
This commit is contained in:
magnolia-fan
2011-06-29 03:30:27 +04:00
parent 75f8d826a6
commit 86863e4323
7 changed files with 142 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/javascripts/coffee/pages.js
+3 -3
View File
@@ -8,7 +8,7 @@ Pages = (function() {
<div class="pic">\
<img src="' + data.artist.pic + '" alt="' + data.artist.name + '" width="250" />\
</div>\
<h1 class="name">' + data.artist.name + '</h1>\
<h1 class="name" data-id="' + data.artist.id + '">' + data.artist.name + '</h1>\
<div class="info">\
' + data.artist.desc + '\
</div>\
@@ -19,7 +19,7 @@ Pages = (function() {
if (album.year != null) {
album_info = $('\
<div class="album">\
<h2 class="name">' + album.name + ' (' + album.year + ')</h2>\
<h2 class="name" data-id="' + album.id + '">' + album.name + ' (' + album.year + ')</h2>\
<div class="pic">\
<img src="' + (album.pic ? album.pic : '/images/kitteh.png') + '" alt="' + album.name + ' by ' + data.artist.name + '" width="250" height="250"/>\
<div class="add-album-button-container">\
@@ -32,7 +32,7 @@ Pages = (function() {
$.each(album.tracks.album, function(i, track) {
var track_info;
track_info = $('\
<li>\
<li data-id="' + track.id + '">\
<div class="add-track button gray">+</div>\
<div class="track-container">\
<div class="fade"></div>\
public/javascripts/coffee/player.js
+50 -33
View File
@@ -52,26 +52,29 @@ Player = (function() {
});
return false;
};
Player.prototype.addTrack = function(artist, album, track, length, autoplay) {
var initial_count;
Player.prototype.addTracks = function(tracks, autoplay) {
var initial_count, item, _i, _len;
if (!(autoplay != null)) {
autoplay = false;
}
initial_count = $('.playlist-tracks li').length;
$('.playlist-tracks').append('\
<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>\
<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>');
for (_i = 0, _len = tracks.length; _i < _len; _i++) {
item = tracks[_i];
$('.playlist-tracks').append('\
<li id="i' + Math.round(Math.random() * 999999) + '" data-id="' + item.id + '" data-artist="' + item.artist.trim() + '" data-album="' + item.album.trim() + '" data-track="' + item.name.trim() + '" data-length="' + item.length + '">\
<div class="item">\
<div class="fade"></div>\
<div class="dragbox"></div>\
<span class="title">\
<span class="data artist" title="Open ' + item.artist.htmlsafe() + '\'s page">' + item.artist + '</span>\
&mdash;\
<span class="playtrack" title="Play ' + item.name.htmlsafe() + ' by ' + item.artist.htmlsafe() + '">' + item.name + '</span>\
</span>\
<span class="duration">' + item.length + '</span>\
<div class="remove">remove</div>\
</div>\
</li>');
}
$('.playlist').html($('.playlist-tracks')).scrollbar;
$('.playlist-tracks').sortable({
axis: 'y',
@@ -83,14 +86,27 @@ Player = (function() {
return _player.setTrack($('.playlist-tracks li').first().attr('id').split('i')[1]);
}
};
Player.prototype.getDataFromLi = function(obj) {
var id, length, track_name;
id = $(obj).attr('data-id');
track_name = $(obj).find('.trackname').html();
length = $(obj).find('.length').html();
return {
id: id,
name: track_name,
length: length
};
};
Player.prototype.setTrack = function(id) {
var $obj, query;
$obj = $('#i' + id);
query = $obj.attr('data-artist') + ' &mdash; ' + $obj.attr('data-track');
$('.player .loaded, .player .played').width(0);
$('.player .now-playing').html(query + '<div class="fade"></div>');
$('.playlist-tracks li').removeClass('now');
$obj.addClass('now');
$('.player .loaded, .player .played').width(0);
$('.tracklist li').removeClass('now');
$('.tracklist li[data-id="' + $obj.attr('data-id') + '"]').addClass('now');
_vkontakte.loadTracksData($obj.attr('data-artist'), $obj.attr('data-track'), $obj.attr('data-length'), function(url) {
return _player.playSource(url);
});
@@ -244,25 +260,27 @@ $('.playlist-tracks li .title .playtrack').live('click', function() {
return false;
});
$('.add-album').live('click', function() {
var album, artist, item, length, track_name, _i, _len, _ref;
var album, artist, item, track, tracks, _i, _len, _ref;
artist = $('.artist-info .name').html();
album = $(this).parent().parent().parent().find('h2.name').text().replace(/\s\([\d]{4}\)$/, '');
tracks = [];
_ref = $(this).parent().parent().parent().find('.tracklist li');
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
item = _ref[_i];
track_name = $(item).find('.trackname').html();
length = $(item).find('.length').html();
_player.addTrack(artist, album, track_name, length);
track = _player.getDataFromLi(item);
track['artist'] = artist;
track['album'] = album;
tracks.push(track);
}
_player.addTracks(tracks);
return false;
});
$('.add-track').live('click', function() {
var album, artist, length, track_name;
artist = $('.artist-info .name').html();
album = $(this).parent().parent().parent().parent().find('h2.name').text().replace(/\s\([\d]{4}\)$/, '');
track_name = $(this).parent().find('.trackname').html();
length = $(this).parent().find('.length').html();
_player.addTrack(artist, album, track_name, length);
var track;
track = _player.getDataFromLi($(this).parent());
track['artist'] = $('.artist-info .name').html();
track['album'] = $(this).parent().parent().parent().parent().find('h2.name').text().replace(/\s\([\d]{4}\)$/, '');
_player.addTracks([track]);
return false;
});
$('.tracklist li').live('mouseover mouseout', function(e) {
@@ -274,11 +292,10 @@ $('.tracklist li').live('mouseover mouseout', function(e) {
return false;
});
$('.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}\)$/, '');
track_name = $(this).find('.trackname').html();
length = $(this).find('.length').html();
_player.addTrack(artist, album, track_name, length, true);
var track;
track = _player.getDataFromLi(this);
track['artist'] = $('.artist-info .name').html();
track['album'] = $(this).parent().parent().parent().find('h2.name').text().replace(/\s\([\d]{4}\)$/, '');
_player.addTracks([track], true);
return false;
});
public/stylesheets/_sass/albums.scss
+13 -4
View File
@@ -44,7 +44,7 @@
img {
width: 248px;
height: 248px;
border: #DDD 1px solid;
border: #d0d0d0 1px solid;
}
.add-album-button-container {
@@ -70,10 +70,10 @@
padding-left: 25px;
&:hover {
background-color: #FAFAFA;
cursor: pointer;
.track-container {
background-color: #fafafa;
.fade {
@include alpha_gradient(250, 250, 250, "fafafa");
}
@@ -84,6 +84,15 @@
border-top: none;
}
&.now {
.track-container {
background-color: #e0f0fa;
.fade {
@include alpha_gradient(224, 240, 250, "e0f0fa");
}
}
}
.add-track {
display: none;
float: left;
@@ -94,7 +103,7 @@
.track-container {
height: 20px;
padding: 5px 0 0 0;
border-top: #EEE 1px solid;
border-top: #e0e0e0 1px solid;
> * {
position: absolute;
@@ -116,7 +125,7 @@
width: 15px;
text-align: right;
font-size: 10px;
color: #555;
color: #505050;
}
.trackname {
public/stylesheets/albums.css
+23 -12
View File
@@ -28,7 +28,7 @@
.albums .album .pic img {
width: 248px;
height: 248px;
border: #DDD 1px solid; }
border: #d0d0d0 1px solid; }
.albums .album .pic .add-album-button-container {
position: relative;
margin: 10px -25px 0 0;
@@ -44,18 +44,29 @@
position: relative;
padding-left: 25px; }
.albums .album .tracklist ul li:hover {
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));
background: -webkit-linear-gradient(left, rgba(250, 250, 250, 0) 0%, #fafafa 50%, #fafafa 100%);
background: -o-linear-gradient(left, rgba(250, 250, 250, 0) 0%, #fafafa 50%, #fafafa 100%);
background: -ms-linear-gradient(left, rgba(250, 250, 250, 0) 0%, #fafafa 50%, #fafafa 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00fafafa', endColorstr='#fafafa', GradientType=1);
background: linear-gradient(left, rgba(250, 250, 250, 0) 0%, #fafafa 50%, #fafafa 100%); }
.albums .album .tracklist ul li:hover .track-container {
background-color: #fafafa; }
.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));
background: -webkit-linear-gradient(left, rgba(250, 250, 250, 0) 0%, #fafafa 50%, #fafafa 100%);
background: -o-linear-gradient(left, rgba(250, 250, 250, 0) 0%, #fafafa 50%, #fafafa 100%);
background: -ms-linear-gradient(left, rgba(250, 250, 250, 0) 0%, #fafafa 50%, #fafafa 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00fafafa', endColorstr='#fafafa', GradientType=1);
background: linear-gradient(left, rgba(250, 250, 250, 0) 0%, #fafafa 50%, #fafafa 100%); }
.albums .album .tracklist ul li:first-child {
border-top: none; }
.albums .album .tracklist ul li.now .track-container {
background-color: #e0f0fa; }
.albums .album .tracklist ul li.now .track-container .fade {
background: -moz-linear-gradient(left, rgba(224, 240, 250, 0) 0%, #e0f0fa 50%, #e0f0fa 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(224, 240, 250, 0)), color-stop(50%, #e0f0fa), color-stop(100%, #e0f0fa));
background: -webkit-linear-gradient(left, rgba(224, 240, 250, 0) 0%, #e0f0fa 50%, #e0f0fa 100%);
background: -o-linear-gradient(left, rgba(224, 240, 250, 0) 0%, #e0f0fa 50%, #e0f0fa 100%);
background: -ms-linear-gradient(left, rgba(224, 240, 250, 0) 0%, #e0f0fa 50%, #e0f0fa 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00e0f0fa', endColorstr='#e0f0fa', GradientType=1);
background: linear-gradient(left, rgba(224, 240, 250, 0) 0%, #e0f0fa 50%, #e0f0fa 100%); }
.albums .album .tracklist ul li .add-track {
display: none;
float: left;
@@ -64,7 +75,7 @@
.albums .album .tracklist ul li .track-container {
height: 20px;
padding: 5px 0 0 0;
border-top: #EEE 1px solid; }
border-top: #e0e0e0 1px solid; }
.albums .album .tracklist ul li .track-container > * {
position: absolute; }
.albums .album .tracklist ul li .track-container .fade {
@@ -87,7 +98,7 @@
width: 15px;
text-align: right;
font-size: 10px;
color: #555; }
color: #505050; }
.albums .album .tracklist ul li .track-container .trackname {
left: 40px;
top: 6px;