.013 moved auto playlists, album display tweaks
This commit is contained in:
Trevor Squillario
parent
abc9393488
commit
0e07169aee
4 changed files with 77 additions and 87 deletions
1
README
1
README
|
|
@ -12,6 +12,7 @@ External Subsonic Music Player
|
|||
10/1/2011 .010 fix for subdirectory custom installs
|
||||
10/2/2011 .011 added play button from album list
|
||||
10/13/2011 .012 added Current Playlist, fixed some bugs
|
||||
10/14/2011 .013 moved auto playlists, album display tweaks
|
||||
|
||||
TO DO: (In no particular order...)
|
||||
- Jukebox Control
|
||||
|
|
|
|||
22
index.html
22
index.html
|
|
@ -105,9 +105,9 @@
|
|||
getAlbums(albumid, artistid, 'add', '#CurrentPlaylistContainer');
|
||||
return false;
|
||||
});
|
||||
$('li.album a.title').live('click', function (e) {
|
||||
var albumid = $(this).parent().attr('childid');
|
||||
var artistid = $(this).parent().attr('parentid');
|
||||
$('li.album').live('click', function (e) {
|
||||
var albumid = $(this).attr('childid');
|
||||
var artistid = $(this).attr('parentid');
|
||||
getAlbums(albumid, artistid, '', '#AlbumContainer');
|
||||
return false;
|
||||
});
|
||||
|
|
@ -438,6 +438,14 @@
|
|||
<li><a href="#" id="DecreaseWidth" title="Decrease Width"><img src="images/minus_8x2.png" /></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul id="AutoAlbumContainer" class="simplelist mainlist">
|
||||
<li class="index" id="auto">Auto Albums</li>
|
||||
<li class="item" id="random"><span>Random</span></li>
|
||||
<li class="item" id="recent"><span>Recently Played</span></li>
|
||||
<li class="item" id="newest"><span>Recently Added</span></li>
|
||||
<li class="item" id="highest"><span>Top Rated</span></li>
|
||||
<li class="item" id="frequent"><span>Most Played</span></li>
|
||||
</ul>
|
||||
<ul id="ArtistContainer" class="simplelist mainlist"></ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -467,14 +475,6 @@
|
|||
<div class="padder">
|
||||
<ul class="simplelist"><li class="index">Saved Playlists</li></ul>
|
||||
<ul id="PlaylistContainer" class="simplelist mainlist"></ul>
|
||||
<ul id="AutoPlaylistContainer" class="simplelist mainlist">
|
||||
<li class="index" id="auto">Auto Playlists</li>
|
||||
<li class="item" id="random"><span>5 Random Albums</span></li>
|
||||
<li class="item" id="recent"><span>5 Recent Albums</span></li>
|
||||
<li class="item" id="newest"><span>5 Latest Albums</span></li>
|
||||
<li class="item" id="highest"><span>5 Best Rated Albums</span></li>
|
||||
<li class="item" id="frequent"><span>5 Most Frequent Albums</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<ul id="TrackContainer" class="simplelist songlist"></ul>
|
||||
|
|
|
|||
130
js/app.js
130
js/app.js
|
|
@ -15,6 +15,7 @@ function loadTabContent(tab) {
|
|||
loadArtists();
|
||||
// Load Albums Click Event
|
||||
$('ul#ArtistContainer li.item').live('click', function () {
|
||||
$('ul#AutoAlbumContainer li').removeClass('selected');
|
||||
$('ul#ArtistContainer li').removeClass('selected');
|
||||
$(this).addClass('selected');
|
||||
getAlbums($(this).attr("id"), '', '', '#AlbumContainer');
|
||||
|
|
@ -24,6 +25,12 @@ function loadTabContent(tab) {
|
|||
$('#Artists').stop().scrollTo(el);
|
||||
return false;
|
||||
});
|
||||
$('ul#AutoAlbumContainer li.item').live('click', function () {
|
||||
$('ul#AutoAlbumContainer li').removeClass('selected');
|
||||
$('ul#ArtistContainer li').removeClass('selected');
|
||||
$(this).addClass('selected');
|
||||
getAlbumListBy($(this).attr("id"));
|
||||
});
|
||||
break;
|
||||
case '#tabPlaylists':
|
||||
loadPlaylists();
|
||||
|
|
@ -41,11 +48,6 @@ function loadTabContent(tab) {
|
|||
getPlaylist($(this).parent().parent().attr("id"), '', '#CurrentPlaylistContainer');
|
||||
return false;
|
||||
});
|
||||
$('ul#AutoPlaylistContainer li.item').live('click', function () {
|
||||
$('ul#AutoPlaylistContainer li').removeClass('selected');
|
||||
$(this).addClass('selected');
|
||||
getAlbumListBy($(this).attr("id"));
|
||||
});
|
||||
break;
|
||||
case '#tabPreferences':
|
||||
//loadPreferences();
|
||||
|
|
@ -122,14 +124,8 @@ function getAlbums(id, artistid, action, appendto) {
|
|||
} else {
|
||||
rowcolor = 'odd';
|
||||
}
|
||||
|
||||
if (child.isDir == true) {
|
||||
albumhtml = '<li class=\"album ' + rowcolor + '\" childid=\"' + child.id + '\" parentid=\"' + child.parent + '\">';
|
||||
albumhtml += '<div class=\"floatleft\"><a class=\"add\" href=\"\" title=\"Add\"></a></div>';
|
||||
albumhtml += '<div class=\"floatleft\"><a class=\"play\" href=\"\" title=\"Play\"></a></div>';
|
||||
albumhtml += '<div class=\"albumart\"><img class=\"floatleft\" src=\"' + baseURL + '/getCoverArt.view?v=1.6.0&c=subweb&f=json&size=50&id=' + child.coverArt + '\" /></div>';
|
||||
albumhtml += '<a href=\"#\" class=\"title\">' + child.title + '</a>';
|
||||
albumhtml += '</li>';
|
||||
albumhtml = generateAlbumHTML(rowcolor, child.id, child.parent, child.coverArt, child.title, child.artist);
|
||||
$(albumhtml).appendTo("#AlbumContainer");
|
||||
} else {
|
||||
var track;
|
||||
|
|
@ -138,7 +134,7 @@ function getAlbums(id, artistid, action, appendto) {
|
|||
albumhtml = generateSongHTML(rowcolor, child.id, child.parent, track, child.title, child.album, time['m'], time['s']);
|
||||
if (appendto == '#AlbumContainer') {
|
||||
if (i == 0) {
|
||||
var backhtml = '<li class=\"back\"><a href=\"#\" onclick=\"javascript:getAlbums(\'' + artistid + '\', \'\', \'\', \'#AlbumContainer\'); return false;\">« Back</a></li>';
|
||||
var backhtml = '<li class=\"back\"><a href=\"#\" onclick=\"javascript:getAlbums(\'' + artistid + '\', \'\', \'\', \'#AlbumContainer\'); return false;\">« Back to ' + child.artist + '</a></li>';
|
||||
$(backhtml).appendTo("#AlbumContainer");
|
||||
}
|
||||
}
|
||||
|
|
@ -152,6 +148,53 @@ function getAlbums(id, artistid, action, appendto) {
|
|||
}
|
||||
});
|
||||
}
|
||||
function getAlbumListBy(id) {
|
||||
$.ajax({
|
||||
url: baseURL + '/getAlbumList.view?v=1.6.0&c=subweb&f=json&size=10&type=' + id,
|
||||
method: 'GET',
|
||||
dataType: 'json',
|
||||
beforeSend: function (req) {
|
||||
req.setRequestHeader('Authorization', auth);
|
||||
},
|
||||
success: function (data) {
|
||||
if (data["subsonic-response"].albumList.album != undefined) {
|
||||
$("#AlbumContainer").empty();
|
||||
// There is a bug in the API that doesn't return a JSON array for one artist
|
||||
var albums = [];
|
||||
if (data["subsonic-response"].albumList.album.length > 0) {
|
||||
albums = data["subsonic-response"].albumList.album;
|
||||
} else {
|
||||
albums[0] = data["subsonic-response"].albumList.album;
|
||||
}
|
||||
|
||||
var rowcolor;
|
||||
var html;
|
||||
$.each(albums, function (i, album) {
|
||||
if (i % 2 == 0) {
|
||||
rowcolor = 'even';
|
||||
} else {
|
||||
rowcolor = 'odd';
|
||||
}
|
||||
albumhtml = generateAlbumHTML(rowcolor, album.id, album.parent, album.coverArt, album.title, album.artist);
|
||||
$(albumhtml).appendTo("#AlbumContainer")
|
||||
});
|
||||
} else {
|
||||
$('#AlbumContainer').empty();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
function generateAlbumHTML(rowcolor, childid, parentid, coverart, title, artist) {
|
||||
var html;
|
||||
html = '<li class=\"album ' + rowcolor + '\" childid=\"' + childid + '\" parentid=\"' + parentid + '\">';
|
||||
html += '<div class=\"floatleft\"><a class=\"add\" href=\"\" title=\"Add\"></a></div>';
|
||||
html += '<div class=\"floatleft\"><a class=\"play\" href=\"\" title=\"Play\"></a></div>';
|
||||
html += '<div class=\"albumart\"><img class=\"floatleft\" src=\"' + baseURL + '/getCoverArt.view?v=1.6.0&c=subweb&f=json&size=50&id=' + coverart + '\" /></div>';
|
||||
html += '<a href=\"#\" class=\"title\">' + title + '</a>';
|
||||
html += '<span class=\"artist\">' + artist + '</span>';
|
||||
html += '</li>';
|
||||
return html;
|
||||
}
|
||||
function generateSongHTML(rowcolor, childid, parentid, track, title, album, m, s) {
|
||||
var html;
|
||||
html = '<li class=\"song ' + rowcolor + '\" childid=\"' + childid + '\" parentid=\"' + parentid + '\">';
|
||||
|
|
@ -645,67 +688,6 @@ function getPlaylist(id, action, appendto) {
|
|||
}
|
||||
});
|
||||
}
|
||||
function getAlbumListBy(id) {
|
||||
$.ajax({
|
||||
url: baseURL + '/getAlbumList.view?v=1.6.0&c=subweb&f=json&type=' + id,
|
||||
method: 'GET',
|
||||
dataType: 'json',
|
||||
beforeSend: function (req) {
|
||||
req.setRequestHeader('Authorization', auth);
|
||||
},
|
||||
success: function (data) {
|
||||
if (data["subsonic-response"].albumList.album != undefined) {
|
||||
$("#TrackContainer").empty();
|
||||
// There is a bug in the API that doesn't return a JSON array for one artist
|
||||
var albums = [];
|
||||
if (data["subsonic-response"].albumList.album.length > 0) {
|
||||
albums = data["subsonic-response"].albumList.album;
|
||||
} else {
|
||||
albums[0] = data["subsonic-response"].albumList.album;
|
||||
}
|
||||
|
||||
var rowcolor;
|
||||
var html;
|
||||
$.each(albums, function (i, album) {
|
||||
$.ajax({
|
||||
url: baseURL + '/getMusicDirectory.view?v=1.6.0&c=subweb&f=json&size=5&id=' + album.id,
|
||||
method: 'GET',
|
||||
dataType: 'json',
|
||||
beforeSend: function (req) {
|
||||
req.setRequestHeader('Authorization', auth);
|
||||
},
|
||||
success: function (data) {
|
||||
var children = [];
|
||||
if (data["subsonic-response"].directory.child.length > 0) {
|
||||
children = data["subsonic-response"].directory.child;
|
||||
} else {
|
||||
children[0] = data["subsonic-response"].directory.child;
|
||||
}
|
||||
$.each(children, function (i, child) {
|
||||
if (i % 2 == 0) {
|
||||
rowcolor = 'even';
|
||||
} else {
|
||||
rowcolor = 'odd';
|
||||
}
|
||||
var track;
|
||||
if (child.track === undefined) { track = " "; } else { track = child.track; }
|
||||
var time = secondsToTime(child.duration);
|
||||
html = '<li class=\"song ' + rowcolor + '\" childid=\"' + child.id + '\" parentid=\"' + child.parent + '\">';
|
||||
html += '<span class=\"track\">' + track + '</span> ';
|
||||
html += child.title;
|
||||
html += ' <small>' + time['m'] + ':' + time['s'] + '</small>';
|
||||
html += '</li>';
|
||||
$(html).appendTo("#TrackContainer");
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
$('ul#TrackContainer').empty();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* Reusable Functions */
|
||||
function confirmDelete() {
|
||||
|
|
|
|||
|
|
@ -289,7 +289,14 @@ ul.songlist li.album
|
|||
ul.songlist li.album a.title
|
||||
{
|
||||
display: block;
|
||||
padding: 16px 115px;
|
||||
padding: 9px 115px 0px;
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
ul.songlist li.album span.artist
|
||||
{
|
||||
font-size: 11px;
|
||||
color: #78B0EC;
|
||||
padding-left: 15px;
|
||||
}
|
||||
ul.songlist .albumart
|
||||
{
|
||||
|
|
@ -402,7 +409,7 @@ ul.songlist li.selected
|
|||
background-color: #4B95E5;
|
||||
border-bottom: 1px solid #73ABE7;
|
||||
}
|
||||
#ArtistContainer
|
||||
#ArtistContainer, #AutoAlbumContainer
|
||||
{
|
||||
margin: 0 30px 0 0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue