localhots
/
oldhaven
1
0
Fork 0
Code Releases Activity

Adding entire album or artist to playlist, -add- icon. closes #35

This commit is contained in:
magnolia-fan 2011-04-13 02:14:06 +04:00
parent 74b4c1e04a
commit 78c759562e
4 changed files with 63 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/views/artist/view.rhtml
View File

@ -4,16 +4,24 @@
<%= link_to "Try again", main_path %> <%= link_to "Try again", main_path %>
</div> </div>
<% else %> <% else %>
<h1 class="artist"><%= @artist.name %></h1> <h1 class="artist">
<span>
<span><%= @artist.name %></span>
<span class="play"><img src="/images/player/add.svg" alt="play" /></span>
</span>
</h1>
<% @albums.each do |album| %> <% @albums.each do |album| %>
<div class="album"> <div class="album">
<div class="pic"><img src="<%= album[:object].cover(@artist.name) %>" width="250" height="250" alt=""/></div> <div class="pic"><img src="<%= album[:object].cover(@artist.name) %>" width="250" height="250" alt=""/></div>
<h3 class="name"><%= album[:object].name %> <%= (album[:object].year ? album[:object].year : '') %></h3> <h3 class="name">
<span><%= album[:object].name %> <%= (album[:object].year ? album[:object].year : '') %></span>
<span class="play"><img src="/images/player/add.svg" alt="play" /></span>
</h3>
<ul class="tracks"> <ul class="tracks">
<% album[:tracks].each do |track| %> <% album[:tracks].each do |track| %>
<li id="<%= track[:object].id %>"> <li id="<%= track[:object].id %>">
<span class="play<%= (track[:in_db].nil? ? '' : ' disabled') %>"> <span class="play<%= (track[:in_db].nil? ? '' : ' disabled') %>">
<img src="/images/player/play.svg" alt="play" /> <img src="/images/player/add.svg" alt="play" />
</span> </span>
<span class="track-name"><%= track[:object].name %></span> <span class="track-name"><%= track[:object].name %></span>
<% unless track[:object].length.nil? %> <% unless track[:object].length.nil? %>

5
public/images/player/add.svg Normal file
View File

@ -0,0 +1,5 @@
<?xml version="1.0" standalone="no"?>
<svg width="1000" height="1000" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="400" y="0" width="200" height="1000" style="fill:rgb(220,220,220);"/>
<rect x="0" y="400" width="1000" height="200" style="fill:rgb(220,220,220);"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 286 B

10
public/javascripts/player.js
View File

@ -28,12 +28,18 @@ $(function(){
}).disableTextSelect(); }).disableTextSelect();
$('.tracks .play').click(function(){ $('.tracks .play').click(function(){
addToPlaylist( addToPlaylist(
$('h1.artist').html(), $('h1.artist > span > span:first').html(),
$(this).parent().find('.track-name').html(), $(this).parent().find('.track-name').html(),
Math.round($(this).parent().find('.duration').attr('data-length') / 1000), Math.round($(this).parent().find('.duration').attr('data-length') / 1000),
$(this).parent().attr('id') $(this).parent().attr('id')
); );
}) })
$('.album > h3.name > span.play').click(function(){
$(this).parent().parent().find('ul > li > span.play').click();
})
$('h1.artist > span > span.play').click(function(){
$('.album > ul > li > span.play').click();
})
$('#player .prev').click(function(){ $('#player .prev').click(function(){
playPrev(); playPrev();
}).disableTextSelect(); }).disableTextSelect();
@ -104,7 +110,7 @@ function playNext(auto) {
} }
function addToPlaylist(artist, track, length, id) { function addToPlaylist(artist, track, length, id) {
$('#playlist ul.list').append($( $('#playlist ul.list').append($(
'<li data-id="'+ id +'">'+ '<li data-id="'+ id +'" title="Double-click To Play">'+
'<span class="artist">'+ artist +'</span> &mdash; '+ '<span class="artist">'+ artist +'</span> &mdash; '+
'<span class="track">'+ track +'</span>'+ '<span class="track">'+ track +'</span>'+
'<span class="length" data-seconds="'+ length +'">'+ formatTime(length) +'</span>'+ '<span class="length" data-seconds="'+ length +'">'+ formatTime(length) +'</span>'+

51
public/stylesheets/beathaven.css
View File

@ -24,6 +24,9 @@ h1.artist {
margin: 4em 0 0.5em 0; margin: 4em 0 0.5em 0;
font-size: 3em; font-size: 3em;
} }
h1.artist > span {
width: auto;
}
.album { .album {
width: 100%; width: 100%;
@ -46,6 +49,10 @@ h1.artist {
margin: 0 0 0.5em 0; margin: 0 0 0.5em 0;
/* background-color: yellowgreen;*/ /* background-color: yellowgreen;*/
} }
.album .name span{
float: left;
width: auto;
}
.album .tracks { .album .tracks {
display: block; display: block;
@ -69,27 +76,47 @@ h1.artist {
float: right; float: right;
} }
.album .tracks li .play { span.play {
display: block; display: block;
float: left; float: left;
width: 30px; width: 20px;
height: 30px; height: 20px;
border-radius: 30px; border-radius: 20px;
background-color: #05A; background-color: #081;
margin: 0 0.3em 0 0; margin: 0.4em 0.3em 0 0;
cursor: pointer; cursor: pointer;
line-height: 18px;
} }
.album .tracks li .play img { span.play img {
width: 12px; width: 10px;
height: 12px; height: 10px;
margin: 9px 0 0 10px; margin: 0 0 0 5px;
} }
.album .tracks li .play.disabled { span.play.disabled {
background-color: #CDF; background-color: #810;
} }
.album h3.name span.play {
display: block;
width: 20px;
line-height: 11px;
margin: 0.2em 0 0 0.2em;
background-color: #04A;
}
h1.artist > span > span.play {
display: inline-block;
float: none;
width: 28px;
height: 28px;
line-height: 20px;
margin: 0;
background-color: #04A;
}
h1.artist > span > span.play img {
margin: 10px 0 20px 0;
}
.search { .search {
width: 100%; width: 100%;