Marks currently playin track in tracklist
This commit is contained in:
magnolia-fan
parent
75f8d826a6
commit
86863e4323
|
|
@ -6,7 +6,7 @@ class Pages
|
|||
<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>
|
||||
|
|
@ -17,7 +17,7 @@ class Pages
|
|||
if album.year?
|
||||
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="' +(if album.pic then album.pic else '/images/kitteh.png')+ '" alt="' +album.name+ ' by ' +data.artist.name+ '" width="250" height="250"/>
|
||||
<div class="add-album-button-container">
|
||||
|
|
@ -30,7 +30,7 @@ class Pages
|
|||
|
||||
$.each album.tracks.album, (i, track) ->
|
||||
track_info = $ '
|
||||
<li>
|
||||
<li data-id="'+track.id+'">
|
||||
<div class="add-track button gray">+</div>
|
||||
<div class="track-container">
|
||||
<div class="fade"></div>
|
||||
|
|
|
|||
|
|
@ -46,21 +46,22 @@ class Player
|
|||
self.setTrack next
|
||||
false
|
||||
|
||||
addTrack: (artist, album, track, length, autoplay) ->
|
||||
addTracks: (tracks, autoplay) ->
|
||||
if not autoplay?
|
||||
autoplay = false
|
||||
initial_count = $('.playlist-tracks li').length
|
||||
for item in tracks
|
||||
$('.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+ '">
|
||||
<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 ' +artist.htmlsafe()+ '\'s page">' +artist+ '</span>
|
||||
<span class="data artist" title="Open ' +item.artist.htmlsafe()+ '\'s page">' +item.artist+ '</span>
|
||||
—
|
||||
<span class="playtrack" title="Play ' +track.htmlsafe()+ ' by ' +artist.htmlsafe()+ '">' +track+ '</span>
|
||||
<span class="playtrack" title="Play ' +item.name.htmlsafe()+ ' by ' +item.artist.htmlsafe()+ '">' +item.name+ '</span>
|
||||
</span>
|
||||
<span class="duration">' +length+ '</span>
|
||||
<span class="duration">' +item.length+ '</span>
|
||||
<div class="remove">remove</div>
|
||||
</div>
|
||||
</li>'
|
||||
|
|
@ -72,19 +73,29 @@ class Player
|
|||
_player.setTrack($('.playlist-tracks li').last().attr('id').split('i')[1])
|
||||
else if initial_count == 0 and not _player.hasTrack()
|
||||
_player.setTrack($('.playlist-tracks li').first().attr('id').split('i')[1])
|
||||
false
|
||||
|
||||
getDataFromLi: (obj) ->
|
||||
id = $(obj).attr 'data-id'
|
||||
track_name = $(obj).find('.trackname').html()
|
||||
length = $(obj).find('.length').html()
|
||||
id: id, name: track_name, length: length
|
||||
|
||||
setTrack: (id) ->
|
||||
$obj = $('#i' +id)
|
||||
query = $obj.attr('data-artist')+ ' — ' +$obj.attr('data-track')
|
||||
|
||||
$('.player .now-playing').html query+ '<div class="fade"></div>'
|
||||
$('.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'), (url)->
|
||||
_vkontakte.loadTracksData $obj.attr('data-artist'), $obj.attr('data-track'), $obj.attr('data-length'), (url) ->
|
||||
_player.playSource url
|
||||
this.updateNowListening $obj.attr('data-artist'), $obj.attr('data-album'), $obj.attr('data-track')
|
||||
false
|
||||
|
||||
hasTrack: ->
|
||||
if $('#jplayer audio').length > 0
|
||||
|
|
@ -95,9 +106,10 @@ class Player
|
|||
false
|
||||
|
||||
playSource: (url) ->
|
||||
@scrobbled = false
|
||||
$('#jplayer').jPlayer 'setMedia', mp3: url
|
||||
$('#jplayer').jPlayer 'play'
|
||||
@scrobbled = false
|
||||
false
|
||||
|
||||
nextTrack: (manual) ->
|
||||
manual = manual?
|
||||
|
|
@ -146,10 +158,12 @@ class Player
|
|||
updateNowListening: (artist, album, track) ->
|
||||
if _session.getUser().lastfm_username
|
||||
_session.query '/lastfm/listening?r=' +Math.random(), artist: artist, album: album, track: track
|
||||
false
|
||||
|
||||
scrobble: (artist, album, track) ->
|
||||
if _session.getUser().lastfm_username
|
||||
_session.query '/lastfm/scrobble?r=' +Math.random(), artist: artist, album: album, track: track
|
||||
false
|
||||
|
||||
|
||||
# Player Controls
|
||||
|
|
@ -214,18 +228,20 @@ $('.playlist-tracks li .title .playtrack').live 'click', ->
|
|||
$('.add-album').live 'click', ->
|
||||
artist = $('.artist-info .name').html()
|
||||
album = $(this).parent().parent().parent().find('h2.name').text().replace /\s\([\d]{4}\)$/, ''
|
||||
tracks = []
|
||||
for item in $(this).parent().parent().parent().find('.tracklist li')
|
||||
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
|
||||
false
|
||||
|
||||
$('.add-track').live 'click', ->
|
||||
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
|
||||
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]
|
||||
false
|
||||
|
||||
$('.tracklist li').live 'mouseover mouseout', (e) ->
|
||||
|
|
@ -236,9 +252,8 @@ $('.tracklist li').live 'mouseover mouseout', (e) ->
|
|||
false
|
||||
|
||||
$('.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()
|
||||
length = $(this).find('.length').html()
|
||||
_player.addTrack artist, album, track_name, length, true
|
||||
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
|
||||
false
|
||||
|
|
|
|||
|
|
@ -42,16 +42,16 @@ class ArtistController < ApplicationController
|
|||
return
|
||||
end
|
||||
end
|
||||
data['artist'] = {name: artist.name, desc: ActionController::Base.helpers.strip_tags(artist.desc), pic: artist.pic_url}
|
||||
data['artist'] = {id: artist.id, name: artist.name, desc: ActionController::Base.helpers.strip_tags(artist.desc), pic: artist.pic_url}
|
||||
data['albums'] = []
|
||||
albums = artist.albums
|
||||
albums.each do |album|
|
||||
if @@default_album_types.include? album.album_type
|
||||
tmp_album = {name: album.name, year: album.year, pic: album.pic_url}
|
||||
tmp_album = {id: album.id, name: album.name, year: album.year, pic: album.pic_url}
|
||||
album_tracks = []
|
||||
bonus_tracks = []
|
||||
album.tracks.each do |track|
|
||||
tmp_track = {name: track.name, live: track.live, acoustic: track.acoustic}
|
||||
tmp_track = {id: track.id, name: track.name, live: track.live, acoustic: track.acoustic}
|
||||
if track.length
|
||||
time = (track.length / 1000).round
|
||||
time_m = (time / 60).floor
|
||||
|
|
|
|||
|
|
@ -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>\
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
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="" 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="' + 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 ' + artist.htmlsafe() + '\'s page">' + artist + '</span>\
|
||||
<span class="data artist" title="Open ' + item.artist.htmlsafe() + '\'s page">' + item.artist + '</span>\
|
||||
—\
|
||||
<span class="playtrack" title="Play ' + track.htmlsafe() + ' by ' + artist.htmlsafe() + '">' + track + '</span>\
|
||||
<span class="playtrack" title="Play ' + item.name.htmlsafe() + ' by ' + item.artist.htmlsafe() + '">' + item.name + '</span>\
|
||||
</span>\
|
||||
<span class="duration">' + length + '</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') + ' — ' + $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;
|
||||
});
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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,8 +44,9 @@
|
|||
position: relative;
|
||||
padding-left: 25px; }
|
||||
.albums .album .tracklist ul li:hover {
|
||||
background-color: #FAFAFA;
|
||||
cursor: pointer; }
|
||||
.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));
|
||||
|
|
@ -56,6 +57,16 @@
|
|||
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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue