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 %>
</div>
<% 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| %>
<div class="album">
<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">
<% album[:tracks].each do |track| %>
<li id="<%= track[:object].id %>">
<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 class="track-name"><%= track[:object].name %></span>
<% 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();
$('.tracks .play').click(function(){
addToPlaylist(
$('h1.artist').html(),
$('h1.artist > span > span:first').html(),
$(this).parent().find('.track-name').html(),
Math.round($(this).parent().find('.duration').attr('data-length') / 1000),
$(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(){
playPrev();
}).disableTextSelect();
@ -104,7 +110,7 @@ function playNext(auto) {
}
function addToPlaylist(artist, track, length, id) {
$('#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="track">'+ track +'</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;
font-size: 3em;
}
h1.artist > span {
width: auto;
}
.album {
width: 100%;
@ -46,6 +49,10 @@ h1.artist {
margin: 0 0 0.5em 0;
/* background-color: yellowgreen;*/
}
.album .name span{
float: left;
width: auto;
}
.album .tracks {
display: block;
@ -69,27 +76,47 @@ h1.artist {
float: right;
}
.album .tracks li .play {
span.play {
display: block;
float: left;
width: 30px;
height: 30px;
border-radius: 30px;
background-color: #05A;
margin: 0 0.3em 0 0;
width: 20px;
height: 20px;
border-radius: 20px;
background-color: #081;
margin: 0.4em 0.3em 0 0;
cursor: pointer;
line-height: 18px;
}
.album .tracks li .play img {
width: 12px;
height: 12px;
margin: 9px 0 0 10px;
span.play img {
width: 10px;
height: 10px;
margin: 0 0 0 5px;
}
.album .tracks li .play.disabled {
background-color: #CDF;
span.play.disabled {
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 {
width: 100%;