yetangitu/Jamstash
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

.020 table layout for songs, bug fixes, display tweaks

Browse source
This commit is contained in:
Trevor Squillario 2012-01-25 09:43:59 -05:00
parent 2973e888d0
commit 161e8ed51e
13 changed files with 505 additions and 220 deletions
Download patch file Download diff file Expand all files Collapse all files

1
README
View file

@ -19,6 +19,7 @@ External Subsonic Music Player
1/5/2012 .017 added FancyBox to CoverArt, improved current playlist functions 1/5/2012 .017 added FancyBox to CoverArt, improved current playlist functions
1/9/2012 .018 added media keyboard bindings from @itchy 1/9/2012 .018 added media keyboard bindings from @itchy
1/18/2012 .019 rating support, random playlist, new preferences added 1/18/2012 .019 rating support, random playlist, new preferences added
1/25/2012 .020 table layout for songs, bug fixes, display tweaks
TO DO: (In no particular order...) TO DO: (In no particular order...)
- Jukebox Control - Jukebox Control

BIN
images/albumdefault_56.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 993 B

BIN
images/asc.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 54 B

BIN
images/bg.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 64 B

BIN
images/desc.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 54 B

BIN
images/star_wo_12x12.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 394 B

BIN
images/star_y_12x12.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 240 B

BIN
images/star_yo_12x12.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 399 B

148
index.html
View file

@ -76,7 +76,7 @@
if (unicode >= 65 && unicode <= 90) { if (unicode >= 65 && unicode <= 90) {
var key = findKeyForCode(unicode); var key = findKeyForCode(unicode);
var el = '#index_' + key.toUpperCase(); var el = '#index_' + key.toUpperCase();
$('#Artists').stop().scrollTo(el, 800); $('#Artists').stop().scrollTo(el, 400);
// right arrow // right arrow
} else if (unicode == 39 || unicode == 176) { } else if (unicode == 39 || unicode == 176) {
var next = $('ul.songlist li.playing').next(); var next = $('ul.songlist li.playing').next();
@ -96,61 +96,61 @@
// Main Click Events // Main Click Events
// Albums Click Event // Albums Click Event
$('ul#ArtistContainer li.item').live('click', function () { $('#ArtistContainer li.item').live('click', function () {
$('ul#AutoAlbumContainer li').removeClass('selected'); $('#AutoAlbumContainer li').removeClass('selected');
$('ul#ArtistContainer li').removeClass('selected'); $('#ArtistContainer li').removeClass('selected');
$(this).addClass('selected'); $(this).addClass('selected');
getAlbums($(this).attr("id"), '', '', '#AlbumContainer'); getAlbums($(this).attr("id"), '#AlbumRows');
}); });
$('#BottomIndex li a').live('click', function () { $('#BottomIndex li a').live('click', function () {
var el = '#index_' + $(this).text(); var el = '#index_' + $(this).text();
$('#Artists').stop().scrollTo(el, 800); $('#Artists').stop().scrollTo(el, 400);
return false; return false;
}); });
$('ul#AutoAlbumContainer li.item').live('click', function () { $('#AutoAlbumContainer li.item').live('click', function () {
$('ul#AutoAlbumContainer li').removeClass('selected'); $('#AutoAlbumContainer li').removeClass('selected');
$('ul#ArtistContainer li').removeClass('selected'); $('#ArtistContainer li').removeClass('selected');
$(this).addClass('selected'); $(this).addClass('selected');
getAlbumListBy($(this).attr("id")); getAlbumListBy($(this).attr("id"));
}); });
$('li.album a.play').live('click', function (e) { $('tr.album a.play').live('click', function (e) {
var albumid = $(this).parent().parent().attr('childid'); var albumid = $(this).parent().parent().attr('childid');
var artistid = $(this).parent().parent().attr('parentid'); var artistid = $(this).parent().parent().attr('parentid');
getAlbums(albumid, artistid, 'autoplay', '#CurrentPlaylistContainer'); getSongs(albumid, artistid, 'autoplay', '#CurrentPlaylistContainer');
return false; return false;
}); });
$('li.album a.add').live('click', function (e) { $('tr.album a.add').live('click', function (e) {
var albumid = $(this).parent().parent().attr('childid'); var albumid = $(this).parent().parent().attr('childid');
var artistid = $(this).parent().parent().attr('parentid'); var artistid = $(this).parent().parent().attr('parentid');
getAlbums(albumid, artistid, 'add', '#CurrentPlaylistContainer'); getSongs(albumid, artistid, 'add', '#CurrentPlaylistContainer');
return false; return false;
}); });
$('li.album a.rate').live('click', function (event) { $('tr.album a.rate').live('click', function (event) {
var itemid = $(this).parent().parent().attr('childid'); var itemid = $(this).parent().parent().attr('childid');
rateSong(itemid, 5); rateSong(itemid, 5);
return false; return false;
}); });
$('li.album a.favorite').live('click', function (event) { $('tr.album a.favorite').live('click', function (event) {
var itemid = $(this).parent().parent().attr('childid'); var itemid = $(this).parent().parent().attr('childid');
rateSong(itemid, 0); rateSong(itemid, 0);
return false; return false;
}); });
$('li.album').live('click', function (e) { $('tr.album').live('click', function (e) {
var albumid = $(this).attr('childid'); var albumid = $(this).attr('childid');
var artistid = $(this).attr('parentid'); var artistid = $(this).attr('parentid');
getAlbums(albumid, artistid, '', '#AlbumContainer'); getSongs(albumid, artistid, '', '#AlbumRows');
return false; return false;
}); });
// Track - Click Events // Track - Click Events
// Multiple Select // Multiple Select
$('.noselect').disableTextSelect(); $('.noselect').disableTextSelect();
var lastChecked = null; var lastChecked = null;
$('ul.songlist li.song').live('click', function (event) { $('table.songlist tr.song').live('click', function (event) {
var checkboxclass = 'ul.songlist li.song'; var checkboxclass = 'table.songlist tr.song';
var songid = $(this).attr('childid'); var songid = $(this).attr('childid');
var albumid = $(this).attr('parentid'); var albumid = $(this).attr('parentid');
if (!event.ctrlKey) { if (!event.ctrlKey) {
$('ul.songlist li.song').removeClass('selected'); $(checkboxclass).removeClass('selected');
} }
if ($(this).hasClass('selected')) { if ($(this).hasClass('selected')) {
$(this).removeClass('selected'); $(this).removeClass('selected');
@ -171,42 +171,42 @@
lastChecked = this; lastChecked = this;
}); });
// Double Click // Double Click
$('ul.songlist li.song').live('dblclick', function (e) { $('table.songlist tr.song').live('dblclick', function (e) {
e.preventDefault(); e.preventDefault();
//$(this).addClass('playing').siblings().removeClass('playing'); //$(this).addClass('playing').siblings().removeClass('playing');
var songid = $(this).attr('childid'); var songid = $(this).attr('childid');
var albumid = $(this).attr('parentid'); var albumid = $(this).attr('parentid');
playSong('', this, songid, albumid); playSong('', this, songid, albumid);
}); });
$('ul.songlist li.song a.play').live('click', function (event) { $('table.songlist tr.song a.play').live('click', function (event) {
var songid = $(this).parent().parent().attr('childid'); var songid = $(this).parent().parent().attr('childid');
var albumid = $(this).parent().parent().attr('parentid'); var albumid = $(this).parent().parent().attr('parentid');
playSong($(this).parent().parent(), songid, albumid); playSong($(this).parent().parent(), songid, albumid);
return false; return false;
}); });
$('ul.songlist li.song a.add').live('click', function (event) { $('table.songlist tr.song a.add').live('click', function (event) {
var track = $(this).parent().parent(); var track = $(this).parent().parent();
$(track).clone().appendTo('ul#CurrentPlaylistContainer'); $(track).clone().appendTo('#CurrentPlaylistContainer');
return false; return false;
}); });
$('ul.songlist li.song a.remove').live('click', function (event) { $('table.songlist tr.song a.remove').live('click', function (event) {
var track = $(this).parent().parent(); var track = $(this).parent().parent();
$(track).remove(); $(track).remove();
refreshRowColor(); refreshRowColor();
return false; return false;
}); });
$('ul.songlist li.song a.rate').live('click', function (event) { $('table.songlist tr.song a.rate').live('click', function (event) {
var songid = $(this).parent().parent().attr('childid'); var songid = $(this).parent().parent().attr('childid');
rateSong(songid, 5); rateSong(songid, 5);
return false; return false;
}); });
$('ul.songlist li.song a.favorite').live('click', function (event) { $('table.songlist tr.song a.favorite').live('click', function (event) {
var songid = $(this).parent().parent().attr('childid'); var songid = $(this).parent().parent().attr('childid');
rateSong(songid, 0); rateSong(songid, 0);
return false; return false;
}); });
$('li.index').live('click', function (e) { $('li.index').live('click', function (e) {
$('#Artists').stop().scrollTo('#auto', 800); $('#Artists').stop().scrollTo('#auto', 400);
return false; return false;
}); });
@ -249,13 +249,13 @@
return false; return false;
}); });
$('#action_SelectAll').click(function () { $('#action_SelectAll').click(function () {
$('#Albums li.song').each(function () { $('#Albums tr.song').each(function () {
$(this).addClass('selected'); $(this).addClass('selected');
}); });
return false; return false;
}); });
$('#action_SelectNone').click(function () { $('#action_SelectNone').click(function () {
$('#Albums li.song').each(function () { $('#Albums tr.song').each(function () {
$(this).removeClass('selected'); $(this).removeClass('selected');
}); });
return false; return false;
@ -274,12 +274,12 @@
}); });
// Current Playlist Click Events // Current Playlist Click Events
$('#action_Shuffle').live('click', function () { $('#action_Shuffle').live('click', function () {
$('#CurrentPlaylistContainer li.song').shuffle(); $('#CurrentPlaylistContainer tr.song').shuffle();
refreshRowColor(); refreshRowColor();
return false; return false;
}); });
$('#action_Empty').live('click', function () { $('#action_Empty').live('click', function () {
$('#CurrentPlaylistContainer').empty(); $('#CurrentPlaylistContainer tbody').empty();
return false; return false;
}); });
$('a#action_AddCurrentToPlaylist').click(function () { $('a#action_AddCurrentToPlaylist').click(function () {
@ -297,48 +297,50 @@
} }
}); });
$('#action_CurrentSelectAll').click(function () { $('#action_CurrentSelectAll').click(function () {
$('#CurrentPlaylist li.song').each(function () { $('#CurrentPlaylist tr.song').each(function () {
$(this).addClass('selected'); $(this).addClass('selected');
}); });
return false; return false;
}); });
$('#action_CurrentSelectNone').click(function () { $('#action_CurrentSelectNone').click(function () {
$('#CurrentPlaylist li.song').each(function () { $('#CurrentPlaylist tr.song').each(function () {
$(this).removeClass('selected'); $(this).removeClass('selected');
}); });
return false; return false;
}); });
// Playlist Click Events // Playlist Click Events
$('ul#AutoPlaylistContainer li.item').live('click', function () { $('#AutoPlaylistContainer li.item').live('click', function () {
$('ul#AutoPlaylistContainer li').removeClass('selected'); $('#AutoPlaylistContainer li').removeClass('selected');
$('#PlaylistContainer li').removeClass('selected');
$(this).addClass('selected'); $(this).addClass('selected');
getRandomSongList('', '#TrackContainer'); getRandomSongList('', '#TrackContainer');
}); });
$('ul#AutoPlaylistContainer li.item a.play').live('click', function () { $('#AutoPlaylistContainer li.item a.play').live('click', function () {
getRandomSongList('autoplay', '#CurrentPlaylistContainer'); getRandomSongList('autoplay', '#CurrentPlaylistContainer');
return false; return false;
}); });
$('ul#AutoPlaylistContainer li.item a.add').live('click', function () { $('#AutoPlaylistContainer li.item a.add').live('click', function () {
getRandomSongList('', '#CurrentPlaylistContainer'); getRandomSongList('', '#CurrentPlaylistContainer');
return false; return false;
}); });
$('ul#PlaylistContainer li.item').live('click', function () { $('#PlaylistContainer li.item').live('click', function () {
$('ul#PlaylistContainer li').removeClass('selected'); $('#AutoPlaylistContainer li').removeClass('selected');
$('#PlaylistContainer li').removeClass('selected');
$(this).addClass('selected'); $(this).addClass('selected');
getPlaylist($(this).attr("id"), '', '#TrackContainer'); getPlaylist($(this).attr("id"), '', '#TrackContainer tbody');
}); });
$('ul#PlaylistContainer li.item a.play').live('click', function () { $('#PlaylistContainer li.item a.play').live('click', function () {
getPlaylist($(this).parent().parent().attr("id"), 'autoplay', '#CurrentPlaylistContainer'); getPlaylist($(this).parent().parent().attr("id"), 'autoplay', '#CurrentPlaylistContainer tbody');
return false; return false;
}); });
$('ul#PlaylistContainer li.item a.add').live('click', function () { $('#PlaylistContainer li.item a.add').live('click', function () {
getPlaylist($(this).parent().parent().attr("id"), '', '#CurrentPlaylistContainer'); getPlaylist($(this).parent().parent().attr("id"), '', '#CurrentPlaylistContainer tbody');
return false; return false;
}); });
$('#action_DeletePlaylist').click(function () { $('#action_DeletePlaylist').click(function () {
if ($('ul#PlaylistContainer li.selected').length > 0) { if ($('#PlaylistContainer li.selected').length > 0) {
if (confirmDelete()) { if (confirmDelete()) {
$('ul#PlaylistContainer li.selected').each(function () { $('#PlaylistContainer li.selected').each(function () {
deletePlaylist($(this).attr("id")); deletePlaylist($(this).attr("id"));
}); });
} }
@ -346,16 +348,16 @@
return false; return false;
}); });
$('#action_SavePlaylist').click(function () { $('#action_SavePlaylist').click(function () {
if ($('ul#PlaylistContainer li.selected').length > 0) { if ($('#PlaylistContainer li.selected').length > 0) {
$('ul#PlaylistContainer li.selected').each(function () { $('#PlaylistContainer li.selected').each(function () {
savePlaylist($(this).attr("id")); savePlaylist($(this).attr("id"));
}); });
} }
return false; return false;
}); });
$('#action_RemoveSongs').click(function () { $('#action_RemoveSongs').click(function () {
if ($('ul#TrackContainer li.selected').length > 0) { if ($('#TrackContainer tr.selected').length > 0) {
$('ul#TrackContainer li.selected').each(function () { $('#TrackContainer tr.selected').each(function () {
$(this).remove(); $(this).remove();
}); });
} }
@ -368,12 +370,12 @@
return false; return false;
}); });
$('#NextTrack').live('click', function () { $('#NextTrack').live('click', function () {
var next = $('#CurrentPlaylistContainer li.playing').next(); var next = $('#CurrentPlaylistContainer tr.playing').next();
changeTrack(next); changeTrack(next);
return false; return false;
}); });
$('#PreviousTrack').live('click', function () { $('#PreviousTrack').live('click', function () {
var prev = $('#CurrentPlaylistContainer li.playing').prev(); var prev = $('#CurrentPlaylistContainer tr.playing').prev();
changeTrack(prev); changeTrack(prev);
return false; return false;
}); });
@ -465,6 +467,7 @@
if ($.cookie('defaultsmwidth')) { if ($.cookie('defaultsmwidth')) {
var width = $.cookie('defaultsmwidth'); var width = $.cookie('defaultsmwidth');
$('.smsection').css({ 'width': width + 'px' }); $('.smsection').css({ 'width': width + 'px' });
$('#MainActions').css({ 'width': (width - 5) + 'px' });
$('#BottomContainer').css({ 'width': (width - 16) + 'px' }); $('#BottomContainer').css({ 'width': (width - 16) + 'px' });
var ulwidth = parseInt(width) + 6; var ulwidth = parseInt(width) + 6;
$('#AlbumContainer').css({ 'margin-left': ulwidth + 'px' }); $('#AlbumContainer').css({ 'margin-left': ulwidth + 'px' });
@ -477,15 +480,21 @@
}); });
function resizeContent() { function resizeContent() {
$('.tabcontent').css({ 'height': (($(window).height() - 160)) + 'px' }); $('.tabcontent').css({ 'height': (($(window).height() - 160)) + 'px' });
$('.smsection').css({ 'height': (($(window).height() - 160)) + 'px' }); $('.smsection').css({ 'height': (($(window).height() - 200)) + 'px' });
var smheight = $('.smsection').height(); var smheight = $('.smsection').height();
$('#BottomContainer').css({ 'top': smheight + 35 + 'px' }); var smwidth = $('.smsection').width();
$('#BottomContainer').css({ 'top': smheight + 75 + 'px' });
var screenwidth = $(window).width();
$('#AlbumContainer').css({ 'width': (screenwidth - smwidth - 35) + 'px' });
$('#TrackContainer').css({ 'width': (screenwidth - smwidth - 35) + 'px' });
$('#CurrentPlaylistContainer').css({ 'width': (screenwidth - 35) + 'px' });
} }
function resizeSMSection(x) { function resizeSMSection(x) {
var smwidth = $('.smsection').width(); var smwidth = $('.smsection').width();
var newsmwidth = smwidth + x; var newsmwidth = smwidth + x;
if (newsmwidth > 150 && newsmwidth < 500) { if (newsmwidth > 150 && newsmwidth < 500) {
$('.smsection').css({ 'width': (newsmwidth) + 'px' }); $('.smsection').css({ 'width': (newsmwidth) + 'px' });
$('#MainActions').css({ 'width': (newsmwidth - 5) + 'px' });
$('#BottomContainer').css({ 'width': (newsmwidth - 16) + 'px' }); $('#BottomContainer').css({ 'width': (newsmwidth - 16) + 'px' });
$.cookie('defaultsmwidth', newsmwidth, { expires: 365, path: '/' }); $.cookie('defaultsmwidth', newsmwidth, { expires: 365, path: '/' });
var ulwidth = newsmwidth + 6; var ulwidth = newsmwidth + 6;
@ -499,7 +508,7 @@
audiojs.events.ready(function () { audiojs.events.ready(function () {
a = audiojs.createAll({ a = audiojs.createAll({
trackEnded: function () { trackEnded: function () {
var next = $('#CurrentPlaylistContainer li.playing').next(); var next = $('#CurrentPlaylistContainer tr.playing').next();
changeTrack(next); changeTrack(next);
}, },
updatePlayhead: function (percent) { updatePlayhead: function (percent) {
@ -550,12 +559,12 @@
</div> </div>
<div id="content"> <div id="content">
<div id="tabLibrary" class="tabcontent"> <div id="tabLibrary" class="tabcontent">
<div class="actions floatleft"> <div id="MainActions" class="actions floatleft">
<a href="#" class="button" id="action_RefreshArtists" title="Refresh Artist List"><img src="images/reload_9x11.png" /></a> <a href="#" class="button" id="action_RefreshArtists" title="Refresh Artist List"><img src="images/reload_9x11.png" /></a>
<a href="#" class="button" id="action_DecreaseWidth" title="Decrease Width"><img src="images/minus_8x2.png" /></a></li> <a href="#" class="button" id="action_DecreaseWidth" title="Decrease Width"><img src="images/minus_8x2.png" /></a></li>
<a href="#" class="button" id="action_IncreaseWidth" title="Increase Width"><img src="images/plus_8x8.png" /></a></li> <a href="#" class="button" id="action_IncreaseWidth" title="Increase Width"><img src="images/plus_8x8.png" /></a></li>
</div> </div>
<div class="actions floatright"> <div class="actions floatleft">
<a href="#" class="button" id="action_AddToPlaylist" title="Add Selected To Playlist">+ Playlist</a> <a href="#" class="button" id="action_AddToPlaylist" title="Add Selected To Playlist">+ Playlist</a>
<div id="submenu_AddToPlaylist" class="submenu shadow" style="display: none;"></div> <div id="submenu_AddToPlaylist" class="submenu shadow" style="display: none;"></div>
<a href="#" class="button" id="action_AddToCurrent" title="Add Selected To Current Playlist">+ Current</a> <a href="#" class="button" id="action_AddToCurrent" title="Add Selected To Current Playlist">+ Current</a>
@ -569,17 +578,20 @@
<div class="padder"> <div class="padder">
<ul id="AutoAlbumContainer" class="simplelist mainlist"> <ul id="AutoAlbumContainer" class="simplelist mainlist">
<li class="index" id="auto">Auto Albums</li> <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="newest"><span>Recently Added</span></li>
<li class="item" id="random"><span>Random</span></li>
<li class="item" id="highest"><span>Top Rated</span></li> <li class="item" id="highest"><span>Top Rated</span></li>
<li class="item" id="recent"><span>Recently Played</span></li>
<li class="item" id="frequent"><span>Most Played</span></li> <li class="item" id="frequent"><span>Most Played</span></li>
</ul> </ul>
<ul id="ArtistContainer" class="simplelist mainlist"></ul> <ul id="ArtistContainer" class="simplelist mainlist"></ul>
</div> </div>
<div id="BottomContainer"><ul id="BottomIndex"></ul></div> <div id="BottomContainer"><ul id="BottomIndex"></ul></div>
</div> </div>
<ul id="AlbumContainer" class="simplelist songlist"></ul> <table id="AlbumContainer" class="simplelist songlist" cellspacing="1">
<thead id="AlbumHeader"></thead>
<tbody id="AlbumRows"></tbody>
</table>
</div> </div>
</div> </div>
<div id="tabCurrent" class="tabcontent"> <div id="tabCurrent" class="tabcontent">
@ -592,7 +604,10 @@
<div id="submenu_AddCurrentToPlaylist" class="submenu shadow" style="display: none;"></div> <div id="submenu_AddCurrentToPlaylist" class="submenu shadow" style="display: none;"></div>
</div> </div>
<div id="CurrentPlaylist" class="fullsection floatleft noselect"> <div id="CurrentPlaylist" class="fullsection floatleft noselect">
<ul id="CurrentPlaylistContainer" class="simplelist songlist"></ul> <table id="CurrentPlaylistContainer" class="simplelist songlist" cellspacing="1">
<thead></thead>
<tbody></tbody>
</table>
</div> </div>
</div> </div>
<div id="tabPlaylists" class="tabcontent"> <div id="tabPlaylists" class="tabcontent">
@ -609,13 +624,16 @@
<div class="padder"> <div class="padder">
<ul id="AutoPlaylistContainer" class="simplelist mainlist"> <ul id="AutoPlaylistContainer" class="simplelist mainlist">
<li class="index" id="autoplaylist">Auto Playlists</li> <li class="index" id="autoplaylist">Auto Playlists</li>
<li class="item"><span>Random</span><div class="floatright"><a class="play" title="Play" href=""></a></div><div class="floatright"><a class="add" title="Add" href=""></a></div></li> <li class="item"><span>Random</span><div class="floatright"><a class="play" title="Play" href=""></a></div><div class="floatright"><a class="add" title="Add To Current Playlist" href=""></a></div></li>
</ul> </ul>
<ul class="simplelist"><li class="index">Saved Playlists</li></ul> <ul class="simplelist"><li class="index">Saved Playlists</li></ul>
<ul id="PlaylistContainer" class="simplelist mainlist"></ul> <ul id="PlaylistContainer" class="simplelist mainlist"></ul>
</div> </div>
</div> </div>
<ul id="TrackContainer" class="simplelist songlist"></ul> <table id="TrackContainer" class="simplelist songlist">
<thead></thead>
<tbody></tbody>
</table>
</div> </div>
</div> </div>
<div id="tabPreferences" class="tabcontent"> <div id="tabPreferences" class="tabcontent">
@ -673,7 +691,7 @@
<a href="#" class="button" id="PlayTrack" title="Play/Pause"><img src="images/play_24x32.png" /></a> <a href="#" class="button" id="PlayTrack" title="Play/Pause"><img src="images/play_24x32.png" /></a>
<a href="#" class="button" id="NextTrack" title="Next Track"><img src="images/last_24x24.png" /></a> <a href="#" class="button" id="NextTrack" title="Next Track"><img src="images/last_24x24.png" /></a>
</div> </div>
<div id="coverart"><a id="coverartimage" href="images/albumdefault_120.jpg"><img src="images/albumdefault_60.jpg" alt=""/></a></div> <div id="coverart"><a id="coverartimage" href="images/albumdefault_120.jpg"><img src="images/albumdefault_56.jpg" alt=""/></a></div>
<div id="songdetails" class="floatleft"> <div id="songdetails" class="floatleft">
<ul> <ul>
<li id="songdetails_song"></li> <li id="songdetails_song"></li>

206
js/app.js
View file

@ -14,6 +14,10 @@ function loadTabContent(tab) {
case '#tabLibrary': case '#tabLibrary':
loadArtists(); loadArtists();
break; break;
case '#tabCurrent':
var header = generateSongHeaderHTML();
$("#CurrentPlaylistContainer thead").html(header);
break;
case '#tabPlaylists': case '#tabPlaylists':
loadPlaylists(); loadPlaylists();
break; break;
@ -42,10 +46,15 @@ function loadArtists(refresh) {
}, },
success: function (data) { success: function (data) {
if (data["subsonic-response"].status == 'ok') { if (data["subsonic-response"].status == 'ok') {
var indexlist; var indexlist, indexname;
$.each(data["subsonic-response"].indexes.index, function (i, index) { $.each(data["subsonic-response"].indexes.index, function (i, index) {
$('<li class=\"index\" id=\"index_' + index.name + '\" title=\"Scroll to Top\">' + index.name + '<span class=\"floatright\">&uarr;</span></li>').appendTo("#ArtistContainer"); if (index.name == '#') {
indexlist += '<li><a href=\"#\">' + index.name + '</a></li>'; indexname = '0-9';
} else {
indexname = index.name;
}
$('<li class=\"index\" id=\"index_' + indexname + '\" title=\"Scroll to Top\">' + indexname + '<span class=\"floatright\">&uarr;</span></li>').appendTo("#ArtistContainer");
indexlist += '<li><a href=\"#\">' + indexname + '</a></li>';
var artists = []; var artists = [];
if (index.artist.length > 0) { if (index.artist.length > 0) {
artists = index.artist; artists = index.artist;
@ -63,6 +72,7 @@ function loadArtists(refresh) {
}); });
}); });
//$(indexlist).appendTo("#IndexList"); //$(indexlist).appendTo("#IndexList");
$("#BottomIndex").empty();
$(indexlist).appendTo("#BottomIndex"); $(indexlist).appendTo("#BottomIndex");
} else { } else {
var error = data["subsonic-response"].status; var error = data["subsonic-response"].status;
@ -76,7 +86,7 @@ function loadArtists(refresh) {
}); });
} }
} }
function getAlbums(id, artistid, action, appendto) { function getAlbums(id, appendto) {
$.ajax({ $.ajax({
url: baseURL + '/getMusicDirectory.view?v=1.6.0&c=subweb&f=json&id=' + id, url: baseURL + '/getMusicDirectory.view?v=1.6.0&c=subweb&f=json&id=' + id,
method: 'GET', method: 'GET',
@ -85,8 +95,46 @@ function getAlbums(id, artistid, action, appendto) {
req.setRequestHeader('Authorization', auth); req.setRequestHeader('Authorization', auth);
}, },
success: function (data) { success: function (data) {
if (appendto == '#AlbumContainer' && action == '') { $("#AlbumRows").empty();
$('#AlbumContainer').empty(); if (data["subsonic-response"].directory.child != undefined) {
// There is a bug in the API that doesn't return a JSON array for one artist
var children = [];
if (data["subsonic-response"].directory.child.length > 0) {
children = data["subsonic-response"].directory.child;
} else {
children[0] = data["subsonic-response"].directory.child;
}
var rowcolor;
var albumhtml;
$.each(children, function (i, child) {
if (i % 2 == 0) {
rowcolor = 'even';
} else {
rowcolor = 'odd';
}
albumhtml = generateAlbumHTML(rowcolor, child.id, child.parent, child.coverArt, child.title, child.artist, child.userRating);
$(albumhtml).appendTo("#AlbumRows");
});
var header = generateAlbumHeaderHTML();
$("#AlbumHeader").html(header);
}
}
});
}
function getSongs(id, artistid, action, appendto) {
$.ajax({
url: baseURL + '/getMusicDirectory.view?v=1.6.0&c=subweb&f=json&id=' + id,
method: 'GET',
dataType: 'json',
beforeSend: function (req) {
req.setRequestHeader('Authorization', auth);
},
success: function (data) {
if (appendto == '#AlbumRows' && action == '') {
$('#AlbumRows').empty();
var header = generateSongHeaderHTML();
$("#AlbumHeader").html(header);
} }
if (action == 'autoplay') { if (action == 'autoplay') {
$('#CurrentPlaylistContainer').empty(); $('#CurrentPlaylistContainer').empty();
@ -108,22 +156,20 @@ function getAlbums(id, artistid, action, appendto) {
} else { } else {
rowcolor = 'odd'; rowcolor = 'odd';
} }
if (child.isDir == true) {
albumhtml = generateAlbumHTML(rowcolor, child.id, child.parent, child.coverArt, child.title, child.artist, child.userRating);
$(albumhtml).appendTo("#AlbumContainer");
} else {
var track; var track;
if (child.track === undefined) { track = "&nbsp;"; } else { track = child.track; } if (child.track === undefined) { track = "&nbsp;"; } else { track = child.track; }
var time = secondsToTime(child.duration); var time = secondsToTime(child.duration);
albumhtml = generateSongHTML(rowcolor, child.id, child.parent, track, child.title, child.artist, child.album, child.userRating, time['m'], time['s']); albumhtml = generateSongHTML(rowcolor, child.id, child.parent, track, child.title, child.artist, child.album, child.coverArt, child.userRating, time['m'], time['s']);
if (appendto == '#AlbumContainer') { /*
if (appendto == '#AlbumRows') {
if (i == 0) { if (i == 0) {
var backhtml = '<li class=\"back\"><a href=\"#\" onclick=\"javascript:getAlbums(\'' + artistid + '\', \'\', \'\', \'#AlbumContainer\'); return false;\">&laquo; Back to ' + child.artist + '</a></li>'; //var backhtml = '<tr class=\"back\"><td colspan=\"6\"><a href=\"#\" onclick=\"javascript:getAlbums(\'' + artistid + '\', \'\', \'\', \'#AlbumRows\'); return false;\">&laquo; Back to ' + child.artist + '</a></td></tr>';
$(backhtml).appendTo("#AlbumContainer"); var backhtml = '<a href=\"#\" onclick=\"javascript:getAlbums(\'' + artistid + '\', \'\', \'\', \'#AlbumRows\'); return false;\">' + child.artist + '</a>';
$("#BreadCrumb").html($(backhtml));
} }
} }
*/
$(albumhtml).appendTo(appendto); $(albumhtml).appendTo(appendto);
}
}); });
if (action == 'autoplay') { if (action == 'autoplay') {
autoPlay(); autoPlay();
@ -148,7 +194,9 @@ function getAlbumListBy(id) {
}, },
success: function (data) { success: function (data) {
if (data["subsonic-response"].albumList.album != undefined) { if (data["subsonic-response"].albumList.album != undefined) {
$("#AlbumContainer").empty(); $("#AlbumRows").empty();
var header = generateAlbumHeaderHTML();
$("#AlbumHeader").html(header);
// There is a bug in the API that doesn't return a JSON array for one artist // There is a bug in the API that doesn't return a JSON array for one artist
var albums = []; var albums = [];
if (data["subsonic-response"].albumList.album.length > 0) { if (data["subsonic-response"].albumList.album.length > 0) {
@ -170,10 +218,10 @@ function getAlbumListBy(id) {
if (album.isDir == true) { if (album.isDir == true) {
albumhtml = generateAlbumHTML(rowcolor, album.id, album.parent, album.coverArt, album.title, album.artist, album.userRating); albumhtml = generateAlbumHTML(rowcolor, album.id, album.parent, album.coverArt, album.title, album.artist, album.userRating);
} }
$(albumhtml).appendTo("#AlbumContainer") $(albumhtml).appendTo("#AlbumRows")
}); });
} else { } else {
$('#AlbumContainer').empty(); $('#AlbumRows').empty();
} }
} }
}); });
@ -219,7 +267,7 @@ function getRandomSongList(action, appendto) {
var track; var track;
if (item.track === undefined) { track = "&nbsp;"; } else { track = item.track; } if (item.track === undefined) { track = "&nbsp;"; } else { track = item.track; }
var time = secondsToTime(item.duration); var time = secondsToTime(item.duration);
html = generateSongHTML(rowcolor, item.id, item.parent, track, item.title, item.artist, item.album, item.userRating, time['m'], time['s']); html = generateSongHTML(rowcolor, item.id, item.parent, track, item.title, item.artist, item.album, item.coverArt, item.userRating, time['m'], time['s']);
$(html).appendTo(appendto); $(html).appendTo(appendto);
}); });
if (action == 'autoplay') { if (action == 'autoplay') {
@ -231,43 +279,56 @@ function getRandomSongList(action, appendto) {
} }
}); });
} }
function generateAlbumHeaderHTML() {
var html;
html = '<tr><th></th><th></th><th>Album</th><th>Artist</th></tr>';
return html;
}
function generateAlbumHTML(rowcolor, childid, parentid, coverart, title, artist, rating) { function generateAlbumHTML(rowcolor, childid, parentid, coverart, title, artist, rating) {
var html; var html;
html = '<li class=\"album ' + rowcolor + '\" childid=\"' + childid + '\" parentid=\"' + parentid + '\" userrating=\"' + rating + '\">'; html = '<tr class=\"album ' + rowcolor + '\" childid=\"' + childid + '\" parentid=\"' + parentid + '\" userrating=\"' + rating + '\">';
html += '<div class=\"floatleft\"><a class=\"add\" href=\"\" title=\"Add\"></a></div>'; html += '<td class=\"itemactions\"><a class=\"add\" href=\"\" title=\"Add To Current Playlist\"></a>';
html += '<div class=\"floatleft\"><a class=\"play\" href=\"\" title=\"Play\"></a></div>'; html += '<a class=\"play\" href=\"\" title=\"Play\"></a>';
if (rating == 5) { if (rating == 5) {
html += '<div class=\"floatleft\"><a class=\"favorite\" href=\"\" title=\"Favorite\"></a></div>'; html += '<a class=\"favorite\" href=\"\" title=\"Favorite\"></a>';
} else { } else {
html += '<div class=\"floatleft\"><a class=\"rate\" href=\"\" title=\"Add To Favorites\"></a></div>'; html += '<a class=\"rate\" href=\"\" title=\"Add To Favorites\"></a>';
} }
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 += '</td>';
html += '<a href=\"#\" class=\"title\">' + title + '</a>'; html += '<td class=\"albumart\"><img src=\"' + baseURL + '/getCoverArt.view?v=1.6.0&c=subweb&f=json&size=50&id=' + coverart + '\" /></td>';
html += '<span class=\"artist\">' + artist + '</span>'; html += '<td class=\"album\">' + title + '</td>';
html += '</li>'; html += '<td class=\"artist\">' + artist + '</td>';
html += '</tr>';
return html; return html;
} }
function generateSongHTML(rowcolor, childid, parentid, track, title, artist, album, rating, m, s) { function generateSongHeaderHTML() {
var html; var html;
html = '<li class=\"song ' + rowcolor + '\" childid=\"' + childid + '\" parentid=\"' + parentid + '\" userrating=\"' + rating + '\">'; html = '<tr><th></th><th>Track</th><th>Title</th><th>Artist</th><th>Album</th><th class=\"alignright\">Time</th></tr>';
html += '<div class=\"floatleft\"><a class=\"add\" href=\"\" title=\"Add\"></a></div>';
html += '<div class=\"floatleft\"><a class=\"remove\" href=\"\" title=\"Remove\"></a></div>';
html += '<div class=\"floatleft\"><a class=\"play\" href=\"\" title=\"Play\"></a></div>';
if (rating == 5) {
html += '<div class=\"floatleft\"><a class=\"favorite\" href=\"\" title=\"Favorite\"></a></div>';
} else {
html += '<div class=\"floatleft\"><a class=\"rate\" href=\"\" title=\"Add To Favorites\"></a></div>';
}
html += '<span class=\"track\">' + track + '</span> ';
html += '<span class=\"title\">' + title + '</span> ';
html += '<span class=\"artist\">' + artist + ':</span> ';
html += '<span class=\"album\">' + album + '</span> ';
html += ' <small>' + m + ':' + s + '</small>';
html += '</li>';
return html; return html;
} }
function generateSongHTML(rowcolor, childid, parentid, track, title, artist, album, coverart, rating, m, s) {
var html;
html = '<tr class=\"song ' + rowcolor + '\" childid=\"' + childid + '\" parentid=\"' + parentid + '\" userrating=\"' + rating + '\">';
html += '<td class=\"itemactions\"><a class=\"add\" href=\"\" title=\"Add To Current Playlist\"></a>';
html += '<a class=\"remove\" href=\"\" title=\"Remove\"></a>';
html += '<a class=\"play\" href=\"\" title=\"Play\"></a>';
if (rating == 5) {
html += '<a class=\"favorite\" href=\"\" title=\"Favorite\"></a>';
} else {
html += '<a class=\"rate\" href=\"\" title=\"Add To Favorites\"></a>';
}
html += '</td>';
html += '<td class=\"track\">' + track + '</td>';
html += '<td class=\"title\">' + title + '</td>';
html += '<td class=\"artist\">' + artist + '</td>';
html += '<td class=\"album\">' + album + '<img src=\"' + baseURL + '/getCoverArt.view?v=1.6.0&c=subweb&f=json&size=25&id=' + coverart + '\" /></td>';
html += '<td class=\"time\">' + m + ':' + s + '</td>';
html += '</tr>';
return html;
}
function refreshRowColor() { function refreshRowColor() {
$.each($('ul.songlist li.song'), function (i) { $.each($('table.songlist tr.song'), function (i) {
$(this).removeClass('even odd'); $(this).removeClass('even odd');
var rowcolor; var rowcolor;
if (i % 2 == 0) { if (i % 2 == 0) {
@ -304,11 +365,12 @@ function playSong(el, songid, albumid) {
$('#songdetails_song').attr('parentid', albumid); $('#songdetails_song').attr('parentid', albumid);
$('#songdetails_song').attr('childid', songid); $('#songdetails_song').attr('childid', songid);
$('#songdetails_artist').html(artist + ' - ' + album); $('#songdetails_artist').html(artist + ' - ' + album);
//$('#songdetails_artist').html('<a href=\"#\" onclick=\"javascript:getAlbums(\'' + artistid + '\', \'\', \'\', \'#AlbumRows\'); return false;\">&laquo; Back to ' + artist + '</a>');
$('#coverartimage').attr('href', baseURL + '/getCoverArt.view?v=1.6.0&c=subweb&f=json&id=' + songid); $('#coverartimage').attr('href', baseURL + '/getCoverArt.view?v=1.6.0&c=subweb&f=json&id=' + songid);
$('#coverartimage img').attr('src', baseURL + '/getCoverArt.view?v=1.6.0&c=subweb&f=json&size=60&id=' + songid); $('#coverartimage img').attr('src', baseURL + '/getCoverArt.view?v=1.6.0&c=subweb&f=json&size=56&id=' + songid);
audio.load(baseURL + '/stream.view?v=1.6.0&c=subweb&f=json&id=' + songid); audio.load(baseURL + '/stream.view?v=1.6.0&c=subweb&f=json&id=' + songid);
audio.play(); audio.play();
$('ul.songlist li.song').removeClass('playing'); $('table.songlist tr.song').removeClass('playing');
$(el).addClass('playing'); $(el).addClass('playing');
$('#PlayTrack').find('img').attr('src', 'images/pause_24x32.png'); $('#PlayTrack').find('img').attr('src', 'images/pause_24x32.png');
$('#PlayTrack').addClass('playing'); $('#PlayTrack').addClass('playing');
@ -360,12 +422,12 @@ function playPauseSong() {
audio.playPause(); audio.playPause();
} else { } else {
// Start playing song // Start playing song
var play = $('#CurrentPlaylistContainer li.selected'); var play = $('#CurrentPlaylistContainer tr.selected').first();
if (changeTrack(play)) { if (changeTrack(play)) {
$(el).find('img').attr('src', 'images/pause_24x32.png'); $(el).find('img').attr('src', 'images/pause_24x32.png');
$(el).addClass('playing'); $(el).addClass('playing');
} else { } else {
var first = $('#CurrentPlaylistContainer li').first(); var first = $('#CurrentPlaylistContainer tr').first();
changeTrack(first); changeTrack(first);
} }
} }
@ -373,7 +435,7 @@ function playPauseSong() {
function changeTrack(next) { function changeTrack(next) {
var songid = $(next).attr('childid'); var songid = $(next).attr('childid');
if (songid != undefined) { if (songid != undefined) {
if (!next.length) next = $('#CurrentPlaylistContainer li').first(); if (!next.length) next = $('#CurrentPlaylistContainer tr').first();
//next.addClass('playing').siblings().removeClass('playing'); //next.addClass('playing').siblings().removeClass('playing');
var albumid = $(next).attr('parentid'); var albumid = $(next).attr('parentid');
playSong(next, songid, albumid); playSong(next, songid, albumid);
@ -383,7 +445,7 @@ function changeTrack(next) {
} }
} }
function autoPlay() { function autoPlay() {
var firstsong = $('#CurrentPlaylistContainer li.song:first'); var firstsong = $('#CurrentPlaylistContainer tr.song:first');
var songid = $(firstsong).attr('childid'); var songid = $(firstsong).attr('childid');
var albumid = $(firstsong).attr('parentid'); var albumid = $(firstsong).attr('parentid');
playSong(firstsong, songid, albumid); playSong(firstsong, songid, albumid);
@ -398,7 +460,9 @@ function search(type, query) {
}, },
success: function (data) { success: function (data) {
if (data["subsonic-response"].searchResult2 != "") { if (data["subsonic-response"].searchResult2 != "") {
$("#AlbumContainer").empty(); $("#AlbumRows").empty();
var header = generateSongHeaderHTML();
$("#AlbumHeader").html(header);
// There is a bug in the API that doesn't return a JSON array for one artist // There is a bug in the API that doesn't return a JSON array for one artist
var children = []; var children = [];
if (data["subsonic-response"].searchResult2.song.length > 0) { if (data["subsonic-response"].searchResult2.song.length > 0) {
@ -419,8 +483,8 @@ function search(type, query) {
var track; var track;
if (child.track === undefined) { track = "&nbsp;"; } else { track = child.track; } if (child.track === undefined) { track = "&nbsp;"; } else { track = child.track; }
var time = secondsToTime(child.duration); var time = secondsToTime(child.duration);
albumhtml = generateSongHTML(rowcolor, child.id, child.parent, track, child.title, child.artist, child.album, child.userRating, time['m'], time['s']); albumhtml = generateSongHTML(rowcolor, child.id, child.parent, track, child.title, child.artist, child.album, child.coverArt, child.userRating, time['m'], time['s']);
$(albumhtml).appendTo("#AlbumContainer"); $(albumhtml).appendTo("#AlbumRows");
}); });
} }
} }
@ -579,7 +643,7 @@ function loadPlaylists(refresh) {
html += '<li id=\"' + playlist.id + '\" class=\"item\">'; html += '<li id=\"' + playlist.id + '\" class=\"item\">';
html += '<span>' + playlist.name + '</span>'; html += '<span>' + playlist.name + '</span>';
html += '<div class=\"floatright\"><a class=\"play\" href=\"\" title=\"Play\"></a></div>'; html += '<div class=\"floatright\"><a class=\"play\" href=\"\" title=\"Play\"></a></div>';
html += '<div class=\"floatright\"><a class=\"add\" href=\"\" title=\"Add\"></a></div>'; html += '<div class=\"floatright\"><a class=\"add\" href=\"\" title=\"Add To Current Playlist\"></a></div>';
html += '</li>'; html += '</li>';
$(html).appendTo("#PlaylistContainer"); $(html).appendTo("#PlaylistContainer");
}); });
@ -610,7 +674,7 @@ function loadPlaylistsForMenu(menu) {
} }
function newPlaylist() { function newPlaylist() {
var reply = prompt("Choose a name for your new playlist.", ""); var reply = prompt("Choose a name for your new playlist.", "");
if (reply != "") { if (reply) {
$.ajax({ $.ajax({
url: baseURL + '/createPlaylist.view?v=1.6.0&c=subweb&f=json&name=' + reply, url: baseURL + '/createPlaylist.view?v=1.6.0&c=subweb&f=json&name=' + reply,
method: 'GET', method: 'GET',
@ -634,7 +698,7 @@ function deletePlaylist(id) {
}, },
success: function (data) { success: function (data) {
loadPlaylists(true); loadPlaylists(true);
$('ul#TrackContainer').empty(); $('#TrackContainer tbody').empty();
} }
}); });
} }
@ -642,9 +706,9 @@ function addToPlaylist(playlistid, from) {
var selected = []; var selected = [];
var el; var el;
if (from == 'current') { if (from == 'current') {
el = $('#CurrentPlaylist ul.songlist li.selected'); el = $('#CurrentPlaylist table.songlist tr.selected');
} else { } else {
el = $('#Albums ul.songlist li.selected'); el = $('#Albums table.songlist tr.selected');
} }
el.each(function (index) { el.each(function (index) {
selected.push($(this).attr('childid')); selected.push($(this).attr('childid'));
@ -690,7 +754,7 @@ function addToPlaylist(playlistid, from) {
req.setRequestHeader('Authorization', auth); req.setRequestHeader('Authorization', auth);
}, },
success: function () { success: function () {
$('ul.songlist li.song').each(function () { $('table.songlist tr.song').each(function () {
$(this).removeClass('selected'); $(this).removeClass('selected');
}); });
updateMessage('Playlist Updated!'); updateMessage('Playlist Updated!');
@ -709,7 +773,7 @@ function addToPlaylist(playlistid, from) {
req.setRequestHeader('Authorization', auth); req.setRequestHeader('Authorization', auth);
}, },
success: function () { success: function () {
$('ul.songlist li.song').each(function () { $('table.songlist tr.song').each(function () {
$(this).removeClass('selected'); $(this).removeClass('selected');
}); });
updateMessage('Playlist Created!'); updateMessage('Playlist Created!');
@ -720,15 +784,15 @@ function addToPlaylist(playlistid, from) {
} }
} }
function addToCurrent() { function addToCurrent() {
var count = $('ul.songlist li.selected').length; var count = $('table.songlist tr.selected').length;
$('ul.songlist li.selected').each(function (index) { $('table.songlist tr.selected').each(function (index) {
$(this).clone().appendTo('ul#CurrentPlaylistContainer'); $(this).clone().appendTo('#CurrentPlaylistContainer tbody');
updateMessage(count + ' Song(s) Added'); updateMessage(count + ' Song(s) Added');
}); });
} }
function savePlaylist(playlistid) { function savePlaylist(playlistid) {
var songs = []; var songs = [];
$('ul#TrackContainer li.song').each(function (index) { $('#TrackContainer tr.song').each(function (index) {
songs.push($(this).attr('childid')); songs.push($(this).attr('childid'));
}); });
if (songs.length > 0) { if (songs.length > 0) {
@ -757,8 +821,10 @@ function getPlaylist(id, action, appendto) {
}, },
success: function (data) { success: function (data) {
if (data["subsonic-response"].playlist.entry != undefined) { if (data["subsonic-response"].playlist.entry != undefined) {
if (appendto == '#TrackContainer') { if (appendto == '#TrackContainer tbody') {
$("#TrackContainer").empty(); $(appendto).empty();
var header = generateSongHeaderHTML();
$("#TrackContainer thead").html(header);
} }
if (action == 'autoplay') { if (action == 'autoplay') {
$(appendto).empty(); $(appendto).empty();
@ -782,14 +848,16 @@ function getPlaylist(id, action, appendto) {
var track; var track;
if (child.track === undefined) { track = "&nbsp;"; } else { track = child.track; } if (child.track === undefined) { track = "&nbsp;"; } else { track = child.track; }
var time = secondsToTime(child.duration); var time = secondsToTime(child.duration);
html = generateSongHTML(rowcolor, child.id, child.parent, track, child.title, child.artist, child.album, child.userRating, time['m'], time['s']); html = generateSongHTML(rowcolor, child.id, child.parent, track, child.title, child.artist, child.album, child.coverArt, child.userRating, time['m'], time['s']);
$(html).appendTo(appendto); $(html).appendTo(appendto);
}); });
if (action == 'autoplay') { if (action == 'autoplay') {
autoPlay(); autoPlay();
} }
} else { } else {
//$(appentTo).empty(); if (appendto == '#TrackContainer tbody') {
$(appendto).empty();
}
} }
} }
}); });

122
js/jquery.metadata.js Normal file
View file

@ -0,0 +1,122 @@
/*
* Metadata - jQuery plugin for parsing metadata from elements
*
* Copyright (c) 2006 John Resig, Yehuda Katz, J<EFBFBD>örn Zaefferer, Paul McLanahan
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Revision: $Id$
*
*/
/**
* Sets the type of metadata to use. Metadata is encoded in JSON, and each property
* in the JSON will become a property of the element itself.
*
* There are three supported types of metadata storage:
*
* attr: Inside an attribute. The name parameter indicates *which* attribute.
*
* class: Inside the class attribute, wrapped in curly braces: { }
*
* elem: Inside a child element (e.g. a script tag). The
* name parameter indicates *which* element.
*
* The metadata for an element is loaded the first time the element is accessed via jQuery.
*
* As a result, you can define the metadata type, use $(expr) to load the metadata into the elements
* matched by expr, then redefine the metadata type and run another $(expr) for other elements.
*
* @name $.metadata.setType
*
* @example <p id="one" class="some_class {item_id: 1, item_label: 'Label'}">This is a p</p>
* @before $.metadata.setType("class")
* @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
* @desc Reads metadata from the class attribute
*
* @example <p id="one" class="some_class" data="{item_id: 1, item_label: 'Label'}">This is a p</p>
* @before $.metadata.setType("attr", "data")
* @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
* @desc Reads metadata from a "data" attribute
*
* @example <p id="one" class="some_class"><script>{item_id: 1, item_label: 'Label'}</script>This is a p</p>
* @before $.metadata.setType("elem", "script")
* @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
* @desc Reads metadata from a nested script element
*
* @param String type The encoding type
* @param String name The name of the attribute to be used to get metadata (optional)
* @cat Plugins/Metadata
* @descr Sets the type of encoding to be used when loading metadata for the first time
* @type undefined
* @see metadata()
*/
(function($) {
$.extend({
metadata : {
defaults : {
type: 'class',
name: 'metadata',
cre: /({.*})/,
single: 'metadata'
},
setType: function( type, name ){
this.defaults.type = type;
this.defaults.name = name;
},
get: function( elem, opts ){
var settings = $.extend({},this.defaults,opts);
// check for empty string in single property
if ( !settings.single.length ) settings.single = 'metadata';
var data = $.data(elem, settings.single);
// returned cached data if it already exists
if ( data ) return data;
data = "{}";
if ( settings.type == "class" ) {
var m = settings.cre.exec( elem.className );
if ( m )
data = m[1];
} else if ( settings.type == "elem" ) {
if( !elem.getElementsByTagName )
return undefined;
var e = elem.getElementsByTagName(settings.name);
if ( e.length )
data = $.trim(e[0].innerHTML);
} else if ( elem.getAttribute != undefined ) {
var attr = elem.getAttribute( settings.name );
if ( attr )
data = attr;
}
if ( data.indexOf( '{' ) <0 )
data = "{" + data + "}";
data = eval("(" + data + ")");
$.data( elem, settings.single, data );
return data;
}
}
});
/**
* Returns the metadata object for the first member of the jQuery object.
*
* @name metadata
* @descr Returns element's metadata object
* @param Object opts An object contianing settings to override the defaults
* @type jQuery
* @cat Plugins/Metadata
*/
$.fn.metadata = function( opts ){
return $.metadata.get( this[0], opts );
};
})(jQuery);

4
js/jquery.tablesorter.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

228
style/Style.css
View file

@ -94,6 +94,7 @@ img
{ {
width: 200px; width: 200px;
min-height: 200px; min-height: 200px;
padding: 0 0 40px 0;
float: left; float: left;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
@ -240,202 +241,272 @@ ul.mainlist li.item a.add:hover
{ {
margin: 5px 5px 5px 206px; margin: 5px 5px 5px 206px;
} }
#CurrentPlaylistContainer li.song a.add #CurrentPlaylistContainer tr.song a.add
{ {
display: none; display: none;
} }
#CurrentPlaylistContainer li.song a.remove #CurrentPlaylistContainer tr.song a.remove
{ {
width: 20px; width: 20px;
height: 20px; height: 20px;
display: block; display: block;
float: left;
margin: 0; margin: 0;
background: url('../images/minus_gl_8x2.png') no-repeat 6px center; background: url('../images/minus_gl_8x2.png') no-repeat 6px center;
} }
#CurrentPlaylistContainer li.song a.remove:hover #CurrentPlaylistContainer tr.song a.remove:hover
{ {
background: url('../images/minus_8x2.png') no-repeat 6px center #DEECFB; background: url('../images/minus_8x2.png') no-repeat 6px center #DEECFB;
} }
ul.songlist #BreadCrumb a
{
color: #4B95E5;
font-size: 12px;
}
#BreadCrumb a:hover
{
text-decoration: underline;
}
table.songlist
{ {
margin: 5px; margin: 5px;
border-collapse: collapse;
} }
ul.songlist li.album table.songlist th
{
font-size: 14px;
font-variant: small-caps;
padding: 5px 4px;
}
table.songlist tr:hover
{
background: #EEF5FD;
}
table.songlist tr.album
{ {
font-size: 13px; font-size: 13px;
padding: 6px 4px;
height: 50px;
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
cursor: pointer;
} }
ul.songlist li.album a.title table.songlist tr.album td
{ {
display: block; padding: 4px;
padding: 9px 140px 0px;
margin-bottom: -3px;
} }
ul.songlist li.album span.artist table.songlist tr.album td.title
{ {
font-size: 11px;
color: #78B0EC;
padding-left: 15px;
} }
ul.songlist .albumart table.songlist tr.album td.artist
{ {
}
table.songlist tr.album td.itemactions
{
width: 80px;
}
table.songlist tr.album td.albumart
{
padding: 0;
width: 50px; width: 50px;
height: 50px;
overflow: hidden;
float: left;
} }
ul.songlist li.album a.play table.songlist tr.album td.albumart img
{ {
margin: 5px 10px 0 10px;
padding: 2px;
border: 1px solid #F0F0F0;
}
table.songlist tr.album a.play
{
float: left;
width: 20px; width: 20px;
height: 50px; height: 50px;
display: block; display: block;
margin: 0 5px 0 0; margin: 0 5px 0 0;
background: url('../images/play_gl_6x8.png') no-repeat 6px center; background: url('../images/play_gl_6x8.png') no-repeat 6px center;
} }
ul.songlist li.album a.play:hover table.songlist tr.album a.play:hover
{ {
background: url('../images/play_6x8.png') no-repeat 6px center #DEECFB; background: url('../images/play_6x8.png') no-repeat 6px center #DEECFB;
} }
ul.songlist li.album a.add table.songlist tr.album a.add
{ {
float: left;
width: 20px; width: 20px;
height: 50px; height: 50px;
display: block; display: block;
margin: 0 5px 0 0; margin: 0 5px 0 0;
background: url('../images/plus_gl_8x8.png') no-repeat 6px center; background: url('../images/plus_gl_8x8.png') no-repeat 6px center;
} }
ul.songlist li.album a.add:hover table.songlist tr.album a.add:hover
{ {
background: url('../images/plus_8x8.png') no-repeat 6px center #DEECFB; background: url('../images/plus_8x8.png') no-repeat 6px center #DEECFB;
} }
ul.songlist li.album a.remove table.songlist tr.album a.remove
{ {
display: none; display: none;
} }
ul.songlist li.album a.rate table.songlist tr.album a.rate
{ {
float: left;
height: 50px; height: 50px;
width: 20px; width: 20px;
margin: 0 5px 0 0; margin: 0 5px 0 0;
display: block; display: block;
background: url('../images/star_w_12x12.png') 2px center no-repeat; background: url('../images/star_w_12x12.png') 2px center no-repeat;
} }
ul.songlist li.album a.rate:hover table.songlist tr.album a.rate:hover
{ {
background: url('../images/star_lg_12x12.png') 2px center no-repeat; background: url('../images/star_wo_12x12.png') 2px center no-repeat;
} }
ul.songlist li.album a.favorite table.songlist tr.album a.favorite
{ {
float: left;
height: 50px; height: 50px;
width: 20px; width: 20px;
margin: 0 5px 0 0; margin: 0 5px 0 0;
display: block; display: block;
background: url('../images/star_lg_12x12.png') 2px center no-repeat; background: url('../images/star_yo_12x12.png') 2px center no-repeat;
} }
ul.songlist li.song table.songlist tr.song
{ {
font-size: 13px;
padding: 8px 30px;
cursor: pointer; cursor: pointer;
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
height: 19px;
} }
ul.songlist li.song span table.songlist tr.song td
{ {
display: block; font-size: 13px;
float: left; padding: 9px 10px;
padding: 0 10px 0 0;
text-align: right;
} }
ul.songlist li.song span.track table.songlist tr.song td.itemactions
{
width: 80px;
padding-left: 25px;
}
table.songlist tr.song td.track
{ {
width: 40px; width: 40px;
text-align: right; text-align: right;
} }
ul.songlist li.song span.album table.songlist tr.song td.title
{ {
color: #B3B8BE;
font-size: 10px;
padding: 2px 0 0 0;
} }
ul.songlist li.song span.artist table.songlist tr.song td.album
{ {
color: #B3B8BE; padding: 0;
font-size: 10px; line-height: 31px;
padding: 2px 4px 0 0;
} }
ul.songlist li.song a.play table.songlist tr.song td.album img
{ {
border: 1px solid #F0F0F0;
display: block;
float: left;
margin: 0 5px;
padding: 2px;
}
table.songlist tr.song td.artist
{
}
table.songlist tr.song td.time
{
text-align: right;
}
table.songlist tr.song a.play
{
float: left;
width: 20px; width: 20px;
height: 20px; height: 20px;
display: block; display: block;
margin: 0; margin: 0;
background: url('../images/play_gl_6x8.png') no-repeat 6px center; background: url('../images/play_gl_6x8.png') no-repeat 6px center;
} }
ul.songlist li.song a.play:hover table.songlist tr.song a.play:hover
{ {
background: url('../images/play_6x8.png') no-repeat 6px center #DEECFB; background: url('../images/play_6x8.png') no-repeat 6px center #DEECFB;
} }
ul.songlist li.song a.add table.songlist tr.song a.add
{ {
float: left;
width: 20px; width: 20px;
height: 20px; height: 20px;
display: block; display: block;
margin: 0; margin: 0;
background: url('../images/plus_gl_8x8.png') no-repeat 6px center; background: url('../images/plus_gl_8x8.png') no-repeat 6px center;
} }
ul.songlist li.song a.add:hover table.songlist tr.song a.add:hover
{ {
background: url('../images/plus_8x8.png') no-repeat 6px center #DEECFB; background: url('../images/plus_8x8.png') no-repeat 6px center #DEECFB;
} }
ul.songlist li.song a.rate table.songlist tr.song a.rate
{ {
float: left;
height: 20px; height: 20px;
width: 20px; width: 20px;
margin: 0; margin: 0;
display: block; display: block;
background: url('../images/star_w_12x12.png') center 3px no-repeat; background: url('../images/star_w_12x12.png') center 3px no-repeat;
} }
ul.songlist li.song a.rate:hover table.songlist tr.song a.rate:hover
{ {
background: url('../images/star_lg_12x12.png') center 3px no-repeat; background: url('../images/star_wo_12x12.png') center 3px no-repeat;
} }
ul.songlist li.song a.favorite table.songlist tr.song a.favorite
{ {
float: left;
height: 20px; height: 20px;
width: 20px; width: 20px;
margin: 0; margin: 0;
display: block; display: block;
background: url('../images/star_lg_12x12.png') center 3px no-repeat; background: url('../images/star_yo_12x12.png') center 3px no-repeat;
} }
ul.songlist li.back a table.songlist tr.playing
{
color: #4B95E5;
}
ul.songlist li.back a:hover
{
text-decoration: underline;
}
ul.songlist li small
{
color: #B6B6B6;
font-size: 10px;
margin: 1px 0 0;
float: right;
}
ul.songlist li.playing
{ {
background: url('../images/play_alt_16x16.png') 6px 10px no-repeat #DEEBFA; background: url('../images/play_alt_16x16.png') 6px 10px no-repeat #DEEBFA;
} }
ul.songlist li.selected table.songlist tr.selected
{ {
color: #f2f2f2; color: #f2f2f2;
background: url('../images/check_8x7.png') 10px 15px no-repeat; background: url('../images/check_8x7.png') 10px 16px no-repeat;
background-color: #4B95E5; background-color: #4B95E5;
border-bottom: 1px solid #73ABE7; border-bottom: 1px solid #73ABE7;
} }
/* tablesorter style */
table.tablesorter {
font-family:arial;
background-color: #CDCDCD;
margin:10px 0pt 15px;
font-size: 8pt;
width: 100%;
text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #e6EEEE;
border: 1px solid #FFF;
font-size: 8pt;
padding: 4px;
}
table.tablesorter thead tr .header {
background-image: url(../images/bg.gif);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter tbody td {
color: #3D3D3D;
padding: 4px;
background-color: #FFF;
vertical-align: top;
}
table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
background-image: url(../images/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
background-image: url(../images/desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}
#BottomContainer #BottomContainer
{ {
border-top: 1px solid #F2F2F2; border-top: 1px solid #F2F2F2;
@ -467,9 +538,9 @@ ul.songlist li.selected
} }
.actions .actions
{ {
margin: 4px 2px 0 2px;
padding: 0 5px;
height: 29px; height: 29px;
margin: 4px 0 0 0;
padding: 0 0 0 5px;
} }
.submenu .submenu
{ {
@ -602,12 +673,13 @@ ul.songlist li.selected
} }
#coverart #coverart
{ {
width: 60px; width: 56px;
height: 60px; height: 56px;
overflow: hidden; overflow: hidden;
margin: 2px 0 2px 0; margin: 2px 0 2px 0;
float: left; float: left;
padding: 2px; padding: 2px;
border: 1px solid #F0F0F0;
} }
#songdetails #songdetails
{ {