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/9/2012 .018 added media keyboard bindings from @itchy
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...)
- 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

152
index.html
View file

@ -72,11 +72,11 @@
var source = e.target.id;
if (source != 'Search' && source != 'ChatMsg') {
var unicode = e.charCode ? e.charCode : e.keyCode;
// a-z
// a-z
if (unicode >= 65 && unicode <= 90) {
var key = findKeyForCode(unicode);
var el = '#index_' + key.toUpperCase();
$('#Artists').stop().scrollTo(el, 800);
$('#Artists').stop().scrollTo(el, 400);
// right arrow
} else if (unicode == 39 || unicode == 176) {
var next = $('ul.songlist li.playing').next();
@ -96,61 +96,61 @@
// Main Click Events
// Albums Click Event
$('ul#ArtistContainer li.item').live('click', function () {
$('ul#AutoAlbumContainer li').removeClass('selected');
$('ul#ArtistContainer li').removeClass('selected');
$('#ArtistContainer li.item').live('click', function () {
$('#AutoAlbumContainer li').removeClass('selected');
$('#ArtistContainer li').removeClass('selected');
$(this).addClass('selected');
getAlbums($(this).attr("id"), '', '', '#AlbumContainer');
getAlbums($(this).attr("id"), '#AlbumRows');
});
$('#BottomIndex li a').live('click', function () {
var el = '#index_' + $(this).text();
$('#Artists').stop().scrollTo(el, 800);
$('#Artists').stop().scrollTo(el, 400);
return false;
});
$('ul#AutoAlbumContainer li.item').live('click', function () {
$('ul#AutoAlbumContainer li').removeClass('selected');
$('ul#ArtistContainer li').removeClass('selected');
$('#AutoAlbumContainer li.item').live('click', function () {
$('#AutoAlbumContainer li').removeClass('selected');
$('#ArtistContainer li').removeClass('selected');
$(this).addClass('selected');
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 artistid = $(this).parent().parent().attr('parentid');
getAlbums(albumid, artistid, 'autoplay', '#CurrentPlaylistContainer');
getSongs(albumid, artistid, 'autoplay', '#CurrentPlaylistContainer');
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 artistid = $(this).parent().parent().attr('parentid');
getAlbums(albumid, artistid, 'add', '#CurrentPlaylistContainer');
getSongs(albumid, artistid, 'add', '#CurrentPlaylistContainer');
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');
rateSong(itemid, 5);
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');
rateSong(itemid, 0);
return false;
});
$('li.album').live('click', function (e) {
$('tr.album').live('click', function (e) {
var albumid = $(this).attr('childid');
var artistid = $(this).attr('parentid');
getAlbums(albumid, artistid, '', '#AlbumContainer');
getSongs(albumid, artistid, '', '#AlbumRows');
return false;
});
// Track - Click Events
// Multiple Select
$('.noselect').disableTextSelect();
var lastChecked = null;
$('ul.songlist li.song').live('click', function (event) {
var checkboxclass = 'ul.songlist li.song';
$('table.songlist tr.song').live('click', function (event) {
var checkboxclass = 'table.songlist tr.song';
var songid = $(this).attr('childid');
var albumid = $(this).attr('parentid');
if (!event.ctrlKey) {
$('ul.songlist li.song').removeClass('selected');
$(checkboxclass).removeClass('selected');
}
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
@ -171,42 +171,42 @@
lastChecked = this;
});
// Double Click
$('ul.songlist li.song').live('dblclick', function (e) {
$('table.songlist tr.song').live('dblclick', function (e) {
e.preventDefault();
//$(this).addClass('playing').siblings().removeClass('playing');
var songid = $(this).attr('childid');
var albumid = $(this).attr('parentid');
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 albumid = $(this).parent().parent().attr('parentid');
playSong($(this).parent().parent(), songid, albumid);
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();
$(track).clone().appendTo('ul#CurrentPlaylistContainer');
$(track).clone().appendTo('#CurrentPlaylistContainer');
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();
$(track).remove();
refreshRowColor();
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');
rateSong(songid, 5);
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');
rateSong(songid, 0);
return false;
});
$('li.index').live('click', function (e) {
$('#Artists').stop().scrollTo('#auto', 800);
$('#Artists').stop().scrollTo('#auto', 400);
return false;
});
@ -249,13 +249,13 @@
return false;
});
$('#action_SelectAll').click(function () {
$('#Albums li.song').each(function () {
$('#Albums tr.song').each(function () {
$(this).addClass('selected');
});
return false;
});
$('#action_SelectNone').click(function () {
$('#Albums li.song').each(function () {
$('#Albums tr.song').each(function () {
$(this).removeClass('selected');
});
return false;
@ -274,12 +274,12 @@
});
// Current Playlist Click Events
$('#action_Shuffle').live('click', function () {
$('#CurrentPlaylistContainer li.song').shuffle();
$('#CurrentPlaylistContainer tr.song').shuffle();
refreshRowColor();
return false;
});
$('#action_Empty').live('click', function () {
$('#CurrentPlaylistContainer').empty();
$('#CurrentPlaylistContainer tbody').empty();
return false;
});
$('a#action_AddCurrentToPlaylist').click(function () {
@ -297,48 +297,50 @@
}
});
$('#action_CurrentSelectAll').click(function () {
$('#CurrentPlaylist li.song').each(function () {
$('#CurrentPlaylist tr.song').each(function () {
$(this).addClass('selected');
});
return false;
});
$('#action_CurrentSelectNone').click(function () {
$('#CurrentPlaylist li.song').each(function () {
$('#CurrentPlaylist tr.song').each(function () {
$(this).removeClass('selected');
});
return false;
});
// Playlist Click Events
$('ul#AutoPlaylistContainer li.item').live('click', function () {
$('ul#AutoPlaylistContainer li').removeClass('selected');
$('#AutoPlaylistContainer li.item').live('click', function () {
$('#AutoPlaylistContainer li').removeClass('selected');
$('#PlaylistContainer li').removeClass('selected');
$(this).addClass('selected');
getRandomSongList('', '#TrackContainer');
});
$('ul#AutoPlaylistContainer li.item a.play').live('click', function () {
$('#AutoPlaylistContainer li.item a.play').live('click', function () {
getRandomSongList('autoplay', '#CurrentPlaylistContainer');
return false;
});
$('ul#AutoPlaylistContainer li.item a.add').live('click', function () {
$('#AutoPlaylistContainer li.item a.add').live('click', function () {
getRandomSongList('', '#CurrentPlaylistContainer');
return false;
});
$('ul#PlaylistContainer li.item').live('click', function () {
$('ul#PlaylistContainer li').removeClass('selected');
$('#PlaylistContainer li.item').live('click', function () {
$('#AutoPlaylistContainer li').removeClass('selected');
$('#PlaylistContainer li').removeClass('selected');
$(this).addClass('selected');
getPlaylist($(this).attr("id"), '', '#TrackContainer');
getPlaylist($(this).attr("id"), '', '#TrackContainer tbody');
});
$('ul#PlaylistContainer li.item a.play').live('click', function () {
getPlaylist($(this).parent().parent().attr("id"), 'autoplay', '#CurrentPlaylistContainer');
$('#PlaylistContainer li.item a.play').live('click', function () {
getPlaylist($(this).parent().parent().attr("id"), 'autoplay', '#CurrentPlaylistContainer tbody');
return false;
});
$('ul#PlaylistContainer li.item a.add').live('click', function () {
getPlaylist($(this).parent().parent().attr("id"), '', '#CurrentPlaylistContainer');
$('#PlaylistContainer li.item a.add').live('click', function () {
getPlaylist($(this).parent().parent().attr("id"), '', '#CurrentPlaylistContainer tbody');
return false;
});
$('#action_DeletePlaylist').click(function () {
if ($('ul#PlaylistContainer li.selected').length > 0) {
if ($('#PlaylistContainer li.selected').length > 0) {
if (confirmDelete()) {
$('ul#PlaylistContainer li.selected').each(function () {
$('#PlaylistContainer li.selected').each(function () {
deletePlaylist($(this).attr("id"));
});
}
@ -346,16 +348,16 @@
return false;
});
$('#action_SavePlaylist').click(function () {
if ($('ul#PlaylistContainer li.selected').length > 0) {
$('ul#PlaylistContainer li.selected').each(function () {
if ($('#PlaylistContainer li.selected').length > 0) {
$('#PlaylistContainer li.selected').each(function () {
savePlaylist($(this).attr("id"));
});
}
return false;
});
$('#action_RemoveSongs').click(function () {
if ($('ul#TrackContainer li.selected').length > 0) {
$('ul#TrackContainer li.selected').each(function () {
if ($('#TrackContainer tr.selected').length > 0) {
$('#TrackContainer tr.selected').each(function () {
$(this).remove();
});
}
@ -368,12 +370,12 @@
return false;
});
$('#NextTrack').live('click', function () {
var next = $('#CurrentPlaylistContainer li.playing').next();
var next = $('#CurrentPlaylistContainer tr.playing').next();
changeTrack(next);
return false;
});
$('#PreviousTrack').live('click', function () {
var prev = $('#CurrentPlaylistContainer li.playing').prev();
var prev = $('#CurrentPlaylistContainer tr.playing').prev();
changeTrack(prev);
return false;
});
@ -459,12 +461,13 @@
$.cookie('css', style, { expires: 365, path: '/' });
location.reload(true);
});
}); // End document.ready
}); // End document.ready
$(window).load(function () {
if ($.cookie('defaultsmwidth')) {
var width = $.cookie('defaultsmwidth');
$('.smsection').css({ 'width': width + 'px' });
$('#MainActions').css({ 'width': (width - 5) + 'px' });
$('#BottomContainer').css({ 'width': (width - 16) + 'px' });
var ulwidth = parseInt(width) + 6;
$('#AlbumContainer').css({ 'margin-left': ulwidth + 'px' });
@ -477,15 +480,21 @@
});
function resizeContent() {
$('.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();
$('#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) {
var smwidth = $('.smsection').width();
var newsmwidth = smwidth + x;
if (newsmwidth > 150 && newsmwidth < 500) {
$('.smsection').css({ 'width': (newsmwidth) + 'px' });
$('#MainActions').css({ 'width': (newsmwidth - 5) + 'px' });
$('#BottomContainer').css({ 'width': (newsmwidth - 16) + 'px' });
$.cookie('defaultsmwidth', newsmwidth, { expires: 365, path: '/' });
var ulwidth = newsmwidth + 6;
@ -499,7 +508,7 @@
audiojs.events.ready(function () {
a = audiojs.createAll({
trackEnded: function () {
var next = $('#CurrentPlaylistContainer li.playing').next();
var next = $('#CurrentPlaylistContainer tr.playing').next();
changeTrack(next);
},
updatePlayhead: function (percent) {
@ -550,12 +559,12 @@
</div>
<div id="content">
<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_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>
</div>
<div class="actions floatright">
<div class="actions floatleft">
<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>
<a href="#" class="button" id="action_AddToCurrent" title="Add Selected To Current Playlist">+ Current</a>
@ -569,17 +578,20 @@
<div class="padder">
<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="random"><span>Random</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>
</ul>
<ul id="ArtistContainer" class="simplelist mainlist"></ul>
</div>
<div id="BottomContainer"><ul id="BottomIndex"></ul></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 id="tabCurrent" class="tabcontent">
@ -592,7 +604,10 @@
<div id="submenu_AddCurrentToPlaylist" class="submenu shadow" style="display: none;"></div>
</div>
<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 id="tabPlaylists" class="tabcontent">
@ -609,13 +624,16 @@
<div class="padder">
<ul id="AutoPlaylistContainer" class="simplelist mainlist">
<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 class="simplelist"><li class="index">Saved Playlists</li></ul>
<ul id="PlaylistContainer" class="simplelist mainlist"></ul>
</div>
</div>
<ul id="TrackContainer" class="simplelist songlist"></ul>
<table id="TrackContainer" class="simplelist songlist">
<thead></thead>
<tbody></tbody>
</table>
</div>
</div>
<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="NextTrack" title="Next Track"><img src="images/last_24x24.png" /></a>
</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">
<ul>
<li id="songdetails_song"></li>

216
js/app.js
View file

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

230
style/Style.css
View file

@ -94,6 +94,7 @@ img
{
width: 200px;
min-height: 200px;
padding: 0 0 40px 0;
float: left;
overflow-y: auto;
overflow-x: hidden;
@ -232,7 +233,7 @@ ul.mainlist li.item a.add:hover
{
background: url('../images/plus_8x8.png') no-repeat 6px center #DEECFB;
}
#AlbumContainer
#AlbumContainer
{
margin: 5px 5px 5px 206px;
}
@ -240,202 +241,272 @@ ul.mainlist li.item a.add:hover
{
margin: 5px 5px 5px 206px;
}
#CurrentPlaylistContainer li.song a.add
#CurrentPlaylistContainer tr.song a.add
{
display: none;
}
#CurrentPlaylistContainer li.song a.remove
#CurrentPlaylistContainer tr.song a.remove
{
width: 20px;
height: 20px;
display: block;
float: left;
margin: 0;
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;
}
ul.songlist
#BreadCrumb a
{
color: #4B95E5;
font-size: 12px;
}
#BreadCrumb a:hover
{
text-decoration: underline;
}
table.songlist
{
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;
padding: 6px 4px;
height: 50px;
border-bottom: 1px solid #f0f0f0;
cursor: pointer;
}
ul.songlist li.album a.title
table.songlist tr.album td
{
display: block;
padding: 9px 140px 0px;
margin-bottom: -3px;
padding: 4px;
}
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;
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;
height: 50px;
display: block;
margin: 0 5px 0 0;
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;
}
ul.songlist li.album a.add
table.songlist tr.album a.add
{
float: left;
width: 20px;
height: 50px;
display: block;
margin: 0 5px 0 0;
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;
}
ul.songlist li.album a.remove
table.songlist tr.album a.remove
{
display: none;
}
ul.songlist li.album a.rate
table.songlist tr.album a.rate
{
float: left;
height: 50px;
width: 20px;
margin: 0 5px 0 0;
display: block;
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;
width: 20px;
margin: 0 5px 0 0;
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;
border-bottom: 1px solid #f0f0f0;
height: 19px;
}
ul.songlist li.song span
table.songlist tr.song td
{
display: block;
float: left;
padding: 0 10px 0 0;
text-align: right;
font-size: 13px;
padding: 9px 10px;
}
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;
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;
font-size: 10px;
padding: 2px 4px 0 0;
padding: 0;
line-height: 31px;
}
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;
height: 20px;
display: block;
margin: 0;
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;
}
ul.songlist li.song a.add
table.songlist tr.song a.add
{
float: left;
width: 20px;
height: 20px;
display: block;
margin: 0;
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;
}
ul.songlist li.song a.rate
table.songlist tr.song a.rate
{
float: left;
height: 20px;
width: 20px;
margin: 0;
display: block;
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;
width: 20px;
margin: 0;
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
{
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
table.songlist tr.playing
{
background: url('../images/play_alt_16x16.png') 6px 10px no-repeat #DEEBFA;
}
ul.songlist li.selected
table.songlist tr.selected
{
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;
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
{
border-top: 1px solid #F2F2F2;
@ -467,9 +538,9 @@ ul.songlist li.selected
}
.actions
{
margin: 4px 2px 0 2px;
padding: 0 5px;
height: 29px;
margin: 4px 0 0 0;
padding: 0 0 0 5px;
}
.submenu
{
@ -602,12 +673,13 @@ ul.songlist li.selected
}
#coverart
{
width: 60px;
height: 60px;
width: 56px;
height: 56px;
overflow: hidden;
margin: 2px 0 2px 0;
float: left;
padding: 2px;
border: 1px solid #F0F0F0;
}
#songdetails
{