From 86863e43236b40ba12b2a27072735fd1ea3439f2 Mon Sep 17 00:00:00 2001 From: magnolia-fan Date: Wed, 29 Jun 2011 03:30:27 +0400 Subject: [PATCH] Marks currently playin track in tracklist --- app/coffeescripts/pages.coffee | 6 +- app/coffeescripts/player.coffee | 79 +++++++++++++++----------- app/controllers/artist_controller.rb | 6 +- public/javascripts/coffee/pages.js | 6 +- public/javascripts/coffee/player.js | 83 +++++++++++++++++----------- public/stylesheets/_sass/albums.scss | 17 ++++-- public/stylesheets/albums.css | 35 ++++++++---- 7 files changed, 142 insertions(+), 90 deletions(-) diff --git a/app/coffeescripts/pages.coffee b/app/coffeescripts/pages.coffee index b69f78b..5a37855 100644 --- a/app/coffeescripts/pages.coffee +++ b/app/coffeescripts/pages.coffee @@ -6,7 +6,7 @@ class Pages
' +data.artist.name+ '
-

' +data.artist.name+ '

+

' +data.artist.name+ '

' +data.artist.desc+ '
@@ -17,7 +17,7 @@ class Pages if album.year? album_info = $ '
-

' +album.name+ ' (' +album.year+ ')

+

' +album.name+ ' (' +album.year+ ')

' +album.name+ ' by ' +data.artist.name+ '
@@ -30,7 +30,7 @@ class Pages $.each album.tracks.album, (i, track) -> track_info = $ ' -
  • +
  • +
    diff --git a/app/coffeescripts/player.coffee b/app/coffeescripts/player.coffee index ff3a4f9..e3c144d 100644 --- a/app/coffeescripts/player.coffee +++ b/app/coffeescripts/player.coffee @@ -46,24 +46,25 @@ 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 - $('.playlist-tracks').append ' -
  • -
    -
    -
    - - ' +artist+ ' - — - ' +track+ ' - - ' +length+ ' -
    remove
    -
    -
    • ' + for item in tracks + $('.playlist-tracks').append ' +
  • +
    +
    +
    + + ' +item.artist+ ' + — + ' +item.name+ ' + + ' +item.length+ ' +
    remove
    +
    +
    • ' $('.playlist').html($('.playlist-tracks')).scrollbar $('.playlist-tracks').sortable axis: 'y', handle: '.dragbox' @@ -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+ '
    ' + $('.player .loaded, .player .played').width 0 + $('.player .now-playing').html query+'
    ' $('.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 diff --git a/app/controllers/artist_controller.rb b/app/controllers/artist_controller.rb index 2a8a50f..0c5b5c6 100644 --- a/app/controllers/artist_controller.rb +++ b/app/controllers/artist_controller.rb @@ -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 diff --git a/public/javascripts/coffee/pages.js b/public/javascripts/coffee/pages.js index f40abde..67b47bc 100644 --- a/public/javascripts/coffee/pages.js +++ b/public/javascripts/coffee/pages.js @@ -8,7 +8,7 @@ Pages = (function() {
    \ ' + data.artist.name + '\
    \ -

    ' + data.artist.name + '

    \ +

    ' + data.artist.name + '

    \
    \ ' + data.artist.desc + '\
    \ @@ -19,7 +19,7 @@ Pages = (function() { if (album.year != null) { album_info = $('\
    \ -

    ' + album.name + ' (' + album.year + ')

    \ +

    ' + album.name + ' (' + album.year + ')

    \
    \ ' + album.name + ' by ' + data.artist.name + '\
    \ @@ -32,7 +32,7 @@ Pages = (function() { $.each(album.tracks.album, function(i, track) { var track_info; track_info = $('\ -
  • \ +
  • \
    +
    \
    \
    \ diff --git a/public/javascripts/coffee/player.js b/public/javascripts/coffee/player.js index 025e8db..f94bfd2 100644 --- a/public/javascripts/coffee/player.js +++ b/public/javascripts/coffee/player.js @@ -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('\ -
  • \ -
    \ -
    \ -
    \ - \ - ' + artist + '\ - —\ - ' + track + '\ - \ - ' + length + '\ -
    remove
    \ -
    \ -
    • '); + for (_i = 0, _len = tracks.length; _i < _len; _i++) { + item = tracks[_i]; + $('.playlist-tracks').append('\ +
  • \ +
    \ +
    \ +
    \ + \ + ' + item.artist + '\ + —\ + ' + item.name + '\ + \ + ' + item.length + '\ +
    remove
    \ +
    \ +
    • '); + } $('.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 + '
    '); $('.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; }); \ No newline at end of file diff --git a/public/stylesheets/_sass/albums.scss b/public/stylesheets/_sass/albums.scss index fc70e96..370678b 100644 --- a/public/stylesheets/_sass/albums.scss +++ b/public/stylesheets/_sass/albums.scss @@ -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 { diff --git a/public/stylesheets/albums.css b/public/stylesheets/albums.css index 53bd8ab..da37c73 100644 --- a/public/stylesheets/albums.css +++ b/public/stylesheets/albums.css @@ -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;