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

.021 added sidebar for chat and now playing, bug fixes

Browse source
This commit is contained in:
Trevor Squillario 2012-02-22 18:16:42 -05:00
parent 345c0da6e5
commit c55389a3ff
7 changed files with 223 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

1
README
View file

@ -20,6 +20,7 @@ External Subsonic Music Player
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 1/25/2012 .020 table layout for songs, bug fixes, display tweaks
2/22/2012 .021 added sidebar for chat and now playing, bug fixes
TO DO: (In no particular order...) TO DO: (In no particular order...)
- Jukebox Control - Jukebox Control

BIN
images/arrow_left_gl_12x12.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 213 B

BIN
images/arrow_right_gl_12x12.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 199 B

BIN
images/comment_stroke_gl_12x11.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 263 B

167
index.html
View file

@ -100,7 +100,7 @@
$('#AutoAlbumContainer li').removeClass('selected'); $('#AutoAlbumContainer li').removeClass('selected');
$('#ArtistContainer li').removeClass('selected'); $('#ArtistContainer li').removeClass('selected');
$(this).addClass('selected'); $(this).addClass('selected');
getAlbums($(this).attr("id"), '#AlbumRows'); 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();
@ -116,13 +116,13 @@
$('tr.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');
getSongs(albumid, artistid, 'autoplay', '#CurrentPlaylistContainer'); getAlbums(albumid, 'autoplay', '#CurrentPlaylistContainer');
return false; return false;
}); });
$('tr.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');
getSongs(albumid, artistid, 'add', '#CurrentPlaylistContainer'); getAlbums(albumid, 'add', '#CurrentPlaylistContainer');
return false; return false;
}); });
$('tr.album a.rate').live('click', function (event) { $('tr.album a.rate').live('click', function (event) {
@ -138,7 +138,7 @@
$('tr.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');
getSongs(albumid, artistid, '', '#AlbumRows'); getAlbums(albumid, '', '#AlbumRows');
return false; return false;
}); });
// Track - Click Events // Track - Click Events
@ -379,49 +379,37 @@
changeTrack(prev); changeTrack(prev);
return false; return false;
}); });
$('a#Chat').click(function () { $("a#coverartimage").fancybox({
var submenu = $('div#submenu_Chat'); 'hideOnContentClick': true,
if (submenu.is(":visible")) { 'type': 'image'
submenu.fadeOut();
updater.cancel();
} else {
//loadChatMessages();
updateChatMessages();
$('div#submenu_NowPlaying').fadeOut();
submenu.fadeIn(400);
}
$('input#ChatMsg').focus();
}); });
$('#action_AddChatMsg').click(function () {
var msg = $('#ChatMsg').val(); // Side Bar Click Events
if (msg != '') { $('#action_ToggleSideBar').live('click', function () {
addChatMessage(msg); if ($.cookie('sidebar')) {
$.cookie('sidebar', null);
$('#SideBar').hide();
stopUpdateChatMessages();
stopUpdateNowPlaying();
} else {
$.cookie('sidebar', true, { expires: 365 });
$('#SideBar').show();
updateChatMessages();
updateNowPlaying();
} }
$('#ChatMsg').val(""); resizeContent();
return false; return false;
}); });
$('input#ChatMsg').keydown(function (e) { $('input#ChatMsg').keydown(function (e) {
var unicode = e.charCode ? e.charCode : e.keyCode; var unicode = e.charCode ? e.charCode : e.keyCode;
if (unicode == 13) { if (unicode == 13) {
$('#action_AddChatMsg').click(); var msg = $('#ChatMsg').val();
if (msg != '') {
addChatMessage(msg);
} }
}); $('#ChatMsg').val("");
$('a#NowPlaying').click(function () {
var submenu = $('div#submenu_NowPlaying');
if (submenu.is(":visible")) {
submenu.fadeOut();
updaterNowPlaying.cancel();
} else {
//loadChatMessages();
updateNowPlaying();
$('div#submenu_Chat').fadeOut();
submenu.fadeIn(400);
} }
}); });
$("a#coverartimage").fancybox({
'hideOnContentClick': true,
'type': 'image'
});
// Preferences Click Events // Preferences Click Events
$('#SavePreferences').live('click', function () { $('#SavePreferences').live('click', function () {
@ -433,6 +421,14 @@
var AutoPlaylistSize = $('#AutoPlaylistSize').val(); var AutoPlaylistSize = $('#AutoPlaylistSize').val();
$.cookie('AutoAlbumSize', AutoAlbumSize, { expires: 365 }); $.cookie('AutoAlbumSize', AutoAlbumSize, { expires: 365 });
$.cookie('AutoPlaylistSize', AutoPlaylistSize, { expires: 365 }); $.cookie('AutoPlaylistSize', AutoPlaylistSize, { expires: 365 });
var subdirectory = $('#SubDirectory').val();
if (subdirectory != "") {
$.cookie('subdirectory', subdirectory, { expires: 365 });
}
var applicationname = $('#ApplicationName').val();
if (applicationname != "") {
$.cookie('applicationname', applicationname, { expires: 365 });
}
location.reload(true); location.reload(true);
}); });
$('input#Password').keydown(function (e) { $('input#Password').keydown(function (e) {
@ -446,14 +442,9 @@
$.cookie('password', null); $.cookie('password', null);
$.cookie('AutoAlbumSize', null); $.cookie('AutoAlbumSize', null);
$.cookie('AutoPlaylistSize', null); $.cookie('AutoPlaylistSize', null);
}); $.cookie('SubDirectory', null);
$('#SaveSubDirectory').live('click', function () { $.cookie('ApplicationName', null);
var subdirectory = $('#SubDirectory').val();
if (subdirectory != "") {
$.cookie('subdirectory', subdirectory, { expires: 365 });
location.reload(true); location.reload(true);
}
return false;
}); });
$('#StyleSwitcher').live('change', function () { $('#StyleSwitcher').live('change', function () {
var style = $(this).val(); var style = $(this).val();
@ -473,21 +464,40 @@
$('#AlbumContainer').css({ 'margin-left': ulwidth + 'px' }); $('#AlbumContainer').css({ 'margin-left': ulwidth + 'px' });
$('#TrackContainer').css({ 'margin-left': ulwidth + 'px' }); $('#TrackContainer').css({ 'margin-left': ulwidth + 'px' });
} }
if ($.cookie('sidebar') && $.cookie('username') && $.cookie('password')) {
$('#SideBar').show();
updateChatMessages();
updateNowPlaying();
}
resizeContent(); resizeContent();
}); });
$(window).resize(function () { $(window).resize(function () {
resizeContent(); resizeContent();
}); });
function resizeContent() { function resizeContent() {
var screenwidth = $(window).width();
$('.tabcontent').css({ 'height': (($(window).height() - 160)) + 'px' }); $('.tabcontent').css({ 'height': (($(window).height() - 160)) + 'px' });
$('.smsection').css({ 'height': (($(window).height() - 200)) + 'px' }); $('.smsection').css({ 'height': (($(window).height() - 200)) + 'px' });
var smheight = $('.smsection').height(); var smheight = $('.smsection').height();
var smwidth = $('.smsection').width(); var smwidth = $('.smsection').width();
$('#BottomContainer').css({ 'top': smheight + 75 + 'px' }); $('#BottomContainer').css({ 'top': smheight + 75 + 'px' });
var screenwidth = $(window).width(); if ($.cookie('sidebar')) {
$('#AlbumContainer').css({ 'width': (screenwidth - smwidth - 35) + 'px' }); var tabwidth = $(window).width() - 218;
$('#TrackContainer').css({ 'width': (screenwidth - smwidth - 35) + 'px' }); if (tabwidth >= 700) {
$('#CurrentPlaylistContainer').css({ 'width': (screenwidth - 35) + 'px' }); $('.tabcontent').css({ 'width': tabwidth + 'px' });
}
var sbheight = $(window).height() - 160;
$('#SideBar').css({ 'height': sbheight + 'px' });
$('#ChatMsgs').css({ 'height': (sbheight - 270) + 'px' });
} else {
var tabwidth = $(window).width() - 11;
if (tabwidth >= 700) {
$('.tabcontent').css({ 'width': tabwidth + 'px' });
}
}
var tabwidth = $('.tabcontent').width();
$('#AlbumContainer, #TrackContainer, #CurrentPlaylistContainer').css({ 'width': (tabwidth - smwidth - 30) + 'px' });
$('#CurrentPlaylistContainer').css({ 'width': (tabwidth - 30) + 'px' });
} }
function resizeSMSection(x) { function resizeSMSection(x) {
var smwidth = $('.smsection').width(); var smwidth = $('.smsection').width();
@ -644,31 +654,21 @@
$('#AutoAlbumSize').val($.cookie('AutoAlbumSize')); $('#AutoAlbumSize').val($.cookie('AutoAlbumSize'));
$('#AutoPlaylistSize').val($.cookie('AutoPlaylistSize')); $('#AutoPlaylistSize').val($.cookie('AutoPlaylistSize'));
$('#SubDirectory').val($.cookie('subdirectory')); $('#SubDirectory').val($.cookie('subdirectory'));
$('#ApplicationName').val($.cookie('applicationname'));
}); });
</script> </script>
<div class="actions floatleft"></div> <div class="actions floatleft">
<a href="#" class="button" id="ResetPreferences" title="Reset Preferences">Reset</a>
<a href="#" class="button" id="SavePreferences" title="Save Preferences">Save</a>
</div>
<div class="clear"></div> <div class="clear"></div>
<div class="nosection floatleft"> <div class="lgsection floatleft">
<div class="subsection floatleft"> <div class="subsection floatleft">
<label for="Username">Username</label><br /> <label for="Username">Username</label><br />
<input type="text" id="Username" name="Username" class="large"/><br /> <input type="text" id="Username" name="Username" class="large"/><br />
<label for="Password">Password</label><br /> <label for="Password">Password</label><br />
<input type="password" id="Password" name="Password" class="large"/><br /><br /> <input type="password" id="Password" name="Password" class="large"/><br /><br />
<label for="AutoAlbumSize">Auto Album Size (Default 15)</label><br />
<input type="text" id="AutoAlbumSize" name="AutoAlbumSize" class="large" title="Number of albums to get on the Music Library tab"/><br />
<label for="AutoPlaylistSize">Auto Playlist Size (Default 25)</label><br />
<input type="text" id="AutoPlaylistSize" name="AutoPlaylistSize" class="large" title="Number of songs to get on the Playlist tab"/><br />
<a href="#" class="button submit floatright" id="SavePreferences" title="Save">Save</a>
<a href="#" class="button submit floatright" id="ResetPreferences" title="Reset">Reset</a>
</div> </div>
<div class="clear"></div>
<div class="subsection floatleft">
<label for="SubDirectory">Subdirectory</label><br />
<small>*For custom installations</small><br />
<input type="text" id="SubDirectory" name="SubDirectory" class="large"/><br />
<a href="#" class="button submit floatright" id="SaveSubDirectory" title="Save">Save</a>
</div>
<div class="clear"></div>
<div class="subsection floatleft"> <div class="subsection floatleft">
<ul class="preferences"> <ul class="preferences">
<li class="title">Keyboard Shortcuts</li> <li class="title">Keyboard Shortcuts</li>
@ -679,10 +679,35 @@
<li><span></span></li> <li><span></span></li>
</ul> </ul>
</div> </div>
<div class="clear"></div>
<div class="subsection floatleft">
<label for="AutoAlbumSize">Auto Album Size (Default 15)</label><br />
<input type="text" id="AutoAlbumSize" name="AutoAlbumSize" class="large" title="Number of albums to get on the Music Library tab"/><br />
<label for="AutoPlaylistSize">Auto Playlist Size (Default 25)</label><br />
<input type="text" id="AutoPlaylistSize" name="AutoPlaylistSize" class="large" title="Number of songs to get on the Playlist tab"/><br />
</div>
<div class="subsection floatleft">
<label for="SubDirectory">Subdirectory</label><br />
<input type="text" id="SubDirectory" name="SubDirectory" class="large" title="Used for custom installations (Tomcat)"/><br />
<label for="ApplicationName">Application Name (Default MiniSub)</label><br />
<input type="text" id="ApplicationName" name="ApplicationName" class="large" title="Used for custom player name"/><br />
</div>
<div class="clear"></div>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div id="SideBar">
<div id="NowPlaying">
<div class="header"><img src="images/rss_12x12.png" /> Now Playing</div>
<div id="NowPlayingList"><span class="user">Loading...</span></div>
</div>
<div id="Chat">
<div class="header"><img src="images/chat_alt_stroke_12x12.png" /> Chat</div>
<div id="ChatMsgs"></div>
<div class="submit"><img src="images/comment_stroke_gl_12x11.png" /><input type="text" id="ChatMsg" class="chat" title="Hit [Enter] to Post" /></div>
</div>
</div>
<!-- Audio Player --> <!-- Audio Player -->
<div class="clear"></div> <div class="clear"></div>
<div id="player"> <div id="player">
@ -701,19 +726,7 @@
<div class="floatleft"><audio src="" preload="none" /></div> <div class="floatleft"><audio src="" preload="none" /></div>
</div> </div>
</div> </div>
<div id="submenu_Chat" class="submenu shadow" style="display: none;"> <div class="playeractionssmall floatright"><a href="#" class="button" id="action_ToggleSideBar" title="Toggle Side Bar"><img src="images/arrow_right_gl_12x12.png" /></a></div>
<div id="ChatMsgs"></div>
<input type="text" id="ChatMsg" class="medium" /><a href="#" class="button" id="action_AddChatMsg" title="Add Chat Message"><img src="images/comment_stroke_12x11.png" /></a>
</div>
<div id="submenu_NowPlaying" class="submenu shadow" style="display: none;">
<div id="NowPlayingList"><span class="user">Loading...</span></div>
</div>
<div class="playeractionssmall floatleft">
<a href="#" class="button" id="Chat" title="Chat"><img src="images/chat_alt_stroke_12x12.png" /> Chat</a>
<a href="#" class="button" id="NowPlaying" title="Now Playing"><img src="images/rss_12x12.png" /> Now Playing</a>
<span id="Notifications"></span>
</div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>

134
js/app.js
View file

@ -6,6 +6,12 @@ if ($.cookie('subdirectory')) {
} else { } else {
baseURL = location.protocol + '//' + location.host + '/rest'; baseURL = location.protocol + '//' + location.host + '/rest';
} }
var applicationName;
if ($.cookie('applicationname')) {
applicationName = $.cookie('applicationname');
} else {
applicationName = 'MiniSub';
}
var username = $.cookie('username'); var username = $.cookie('username');
var password = $.cookie('password'); var password = $.cookie('password');
var auth = makeBaseAuth(username, password); var auth = makeBaseAuth(username, password);
@ -38,7 +44,7 @@ function loadArtists(refresh) {
if (content == "") { if (content == "") {
// Load Artist List // Load Artist List
$.ajax({ $.ajax({
url: baseURL + '/getIndexes.view?v=1.6.0&c=subweb&f=json', url: baseURL + '/getIndexes.view?v=1.6.0&c=' + applicationName + '&f=json',
method: 'GET', method: 'GET',
dataType: 'json', dataType: 'json',
beforeSend: function (req) { beforeSend: function (req) {
@ -86,58 +92,20 @@ function loadArtists(refresh) {
}); });
} }
} }
function getAlbums(id, appendto) { function getAlbums(id, action, 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=' + applicationName + '&f=json&id=' + id,
method: 'GET', method: 'GET',
dataType: 'json', dataType: 'json',
beforeSend: function (req) { beforeSend: function (req) {
req.setRequestHeader('Authorization', auth); req.setRequestHeader('Authorization', auth);
}, },
success: function (data) { success: function (data) {
$("#AlbumRows").empty(); if (action == '') {
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(); $('#AlbumRows').empty();
var header = generateSongHeaderHTML();
$("#AlbumHeader").html(header);
} }
if (action == 'autoplay') { if (action == 'autoplay') {
$('#CurrentPlaylistContainer').empty(); $('#CurrentPlaylistContainer tbody').empty();
} }
if (data["subsonic-response"].directory.child != undefined) { if (data["subsonic-response"].directory.child != undefined) {
// 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
@ -150,27 +118,31 @@ function getSongs(id, artistid, action, appendto) {
var rowcolor; var rowcolor;
var albumhtml; var albumhtml;
var isDir;
$.each(children, function (i, child) { $.each(children, function (i, child) {
if (i % 2 == 0) { if (i % 2 == 0) {
rowcolor = 'even'; rowcolor = 'even';
} else { } else {
rowcolor = 'odd'; rowcolor = 'odd';
} }
isDir = child.isDir;
if (isDir == true) {
albumhtml = generateAlbumHTML(rowcolor, child.id, child.parent, child.coverArt, child.title, child.artist, child.userRating);
} 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.coverArt, 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 == '#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 (appendto == '#AlbumRows' && isDir == true) {
var header = generateAlbumHeaderHTML();
}
if (appendto == '#AlbumRows' && isDir == false) {
var header = generateSongHeaderHTML();
}
$("#AlbumHeader").html(header);
if (action == 'autoplay') { if (action == 'autoplay') {
autoPlay(); autoPlay();
} }
@ -186,7 +158,7 @@ function getAlbumListBy(id) {
size = $.cookie('AutoAlbumSize'); size = $.cookie('AutoAlbumSize');
} }
$.ajax({ $.ajax({
url: baseURL + '/getAlbumList.view?v=1.6.0&c=subweb&f=json&size=' + size + '&type=' + id, url: baseURL + '/getAlbumList.view?v=1.6.0&c=' + applicationName + '&f=json&size=' + size + '&type=' + id,
method: 'GET', method: 'GET',
dataType: 'json', dataType: 'json',
beforeSend: function (req) { beforeSend: function (req) {
@ -234,7 +206,7 @@ function getRandomSongList(action, appendto) {
size = $.cookie('AutoPlaylistSize'); size = $.cookie('AutoPlaylistSize');
} }
$.ajax({ $.ajax({
url: baseURL + '/getRandomSongs.view?v=1.5.0&c=subweb&f=json&size=' + size, url: baseURL + '/getRandomSongs.view?v=1.6.0&c=' + applicationName + '&f=json&size=' + size,
method: 'GET', method: 'GET',
dataType: 'json', dataType: 'json',
beforeSend: function (req) { beforeSend: function (req) {
@ -295,7 +267,7 @@ function generateAlbumHTML(rowcolor, childid, parentid, coverart, title, artist,
html += '<a class=\"rate\" href=\"\" title=\"Add To Favorites\"></a>'; html += '<a class=\"rate\" href=\"\" title=\"Add To Favorites\"></a>';
} }
html += '</td>'; 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=\"albumart\"><img src=\"' + baseURL + '/getCoverArt.view?v=1.6.0&c=' + applicationName + '&f=json&size=50&id=' + coverart + '\" /></td>';
html += '<td class=\"album\">' + title + '</td>'; html += '<td class=\"album\">' + title + '</td>';
html += '<td class=\"artist\">' + artist + '</td>'; html += '<td class=\"artist\">' + artist + '</td>';
html += '</tr>'; html += '</tr>';
@ -321,7 +293,7 @@ function generateSongHTML(rowcolor, childid, parentid, track, title, artist, alb
html += '<td class=\"track\">' + track + '</td>'; html += '<td class=\"track\">' + track + '</td>';
html += '<td class=\"title\">' + title + '</td>'; html += '<td class=\"title\">' + title + '</td>';
html += '<td class=\"artist\">' + artist + '</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=\"album\">' + album + '<img src=\"' + baseURL + '/getCoverArt.view?v=1.6.0&c=' + applicationName + '&f=json&size=25&id=' + coverart + '\" /></td>';
html += '<td class=\"time\">' + m + ':' + s + '</td>'; html += '<td class=\"time\">' + m + ':' + s + '</td>';
html += '</tr>'; html += '</tr>';
return html; return html;
@ -342,7 +314,7 @@ function refreshRowColor() {
var scrobbled = false; var scrobbled = false;
function playSong(el, songid, albumid) { function playSong(el, songid, albumid) {
$.ajax({ $.ajax({
url: baseURL + '/getMusicDirectory.view?v=1.6.0&c=subweb&f=json&id=' + albumid, url: baseURL + '/getMusicDirectory.view?v=1.6.0&c=' + applicationName + '&f=json&id=' + albumid,
method: 'GET', method: 'GET',
dataType: 'json', dataType: 'json',
beforeSend: function (req) { beforeSend: function (req) {
@ -365,10 +337,9 @@ 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=' + applicationName + '&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=' + applicationName + '&f=json&size=56&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=' + applicationName + '&f=json&id=' + songid);
audio.load(baseURL + '/stream.view?v=1.6.0&c=subweb&f=json&id=' + songid);
audio.play(); audio.play();
$('table.songlist tr.song').removeClass('playing'); $('table.songlist tr.song').removeClass('playing');
$(el).addClass('playing'); $(el).addClass('playing');
@ -382,7 +353,7 @@ function playSong(el, songid, albumid) {
function scrobbleSong(submission) { function scrobbleSong(submission) {
var songid = $('#songdetails_song').attr('childid'); var songid = $('#songdetails_song').attr('childid');
$.ajax({ $.ajax({
url: baseURL + '/scrobble.view?v=1.6.0&c=subweb&f=json&id=' + songid + "&submission=" + submission, url: baseURL + '/scrobble.view?v=1.6.0&c=' + applicationName + '&f=json&id=' + songid + "&submission=" + submission,
method: 'GET', method: 'GET',
dataType: 'json', dataType: 'json',
beforeSend: function (req) { beforeSend: function (req) {
@ -397,7 +368,7 @@ function scrobbleSong(submission) {
} }
function rateSong(songid, rating) { function rateSong(songid, rating) {
$.ajax({ $.ajax({
url: baseURL + '/setRating.view?v=1.6.0&c=subweb&f=json&id=' + songid + "&rating=" + rating, url: baseURL + '/setRating.view?v=1.6.0&c=' + applicationName + '&f=json&id=' + songid + "&rating=" + rating,
method: 'GET', method: 'GET',
dataType: 'json', dataType: 'json',
beforeSend: function (req) { beforeSend: function (req) {
@ -452,7 +423,7 @@ function autoPlay() {
} }
function search(type, query) { function search(type, query) {
$.ajax({ $.ajax({
url: baseURL + '/search2.view?v=1.6.0&c=subweb&f=json&query=' + query, url: baseURL + '/search2.view?v=1.6.0&c=' + applicationName + '&f=json&query=' + query,
method: 'GET', method: 'GET',
dataType: 'json', dataType: 'json',
beforeSend: function (req) { beforeSend: function (req) {
@ -493,7 +464,7 @@ function search(type, query) {
var starttime; var starttime;
function loadChatMessages() { function loadChatMessages() {
$.ajax({ $.ajax({
url: baseURL + '/getChatMessages.view?v=1.6.0&c=subweb&f=json', url: baseURL + '/getChatMessages.view?v=1.6.0&c=' + applicationName + '&f=json',
method: 'GET', method: 'GET',
dataType: 'json', dataType: 'json',
beforeSend: function (req) { beforeSend: function (req) {
@ -520,10 +491,10 @@ function loadChatMessages() {
} }
var updater; var updater;
function updateChatMessages() { function updateChatMessages() {
updater = $.periodic({ period: 2000, decay: 1.5, max_period: 1800000 }, function () { updater = $.periodic({ period: 1000, decay: 1.5, max_period: 1800000 }, function () {
$.ajax({ $.ajax({
periodic: this, periodic: this,
url: baseURL + '/getChatMessages.view?v=1.6.0&c=subweb&f=json&since=' + starttime, url: baseURL + '/getChatMessages.view?v=1.6.0&c=' + applicationName + '&f=json&since=' + starttime,
method: 'GET', method: 'GET',
dataType: 'json', dataType: 'json',
beforeSend: function (req) { beforeSend: function (req) {
@ -554,16 +525,20 @@ function updateChatMessages() {
starttime = msg.time; starttime = msg.time;
} }
}); });
$("#ChatMsgs").attr({ scrollTop: $("#ChatMsgs").attr("scrollHeight") });
} }
} }
}); });
}); });
} }
function stopUpdateChatMessages() {
updater.cancel();
}
function addChatMessage(msg) { function addChatMessage(msg) {
$.ajax({ $.ajax({
type: 'POST', type: 'POST',
url: baseURL + '/addChatMessage.view', url: baseURL + '/addChatMessage.view',
data: { v: "1.5.0", c: "subweb", f: "json", message: msg }, data: { v: "1.6.0", c: applicationName, f: "json", message: msg },
beforeSend: function (req) { beforeSend: function (req) {
req.setRequestHeader('Authorization', auth); req.setRequestHeader('Authorization', auth);
}, },
@ -577,10 +552,10 @@ function addChatMessage(msg) {
var updaterNowPlaying; var updaterNowPlaying;
var updaterNowPlayingData; var updaterNowPlayingData;
function updateNowPlaying() { function updateNowPlaying() {
updaterNowPlaying = $.periodic({ period: 2000, decay: 1.5, max_period: 1800000 }, function () { updaterNowPlaying = $.periodic({ period: 4000, decay: 1.5, max_period: 1800000 }, function () {
$.ajax({ $.ajax({
periodic: this, periodic: this,
url: baseURL + '/getNowPlaying.view?v=1.6.0&c=subweb&f=json', url: baseURL + '/getNowPlaying.view?v=1.6.0&c=' + applicationName + '&f=json',
method: 'GET', method: 'GET',
dataType: 'json', dataType: 'json',
beforeSend: function (req) { beforeSend: function (req) {
@ -622,6 +597,9 @@ function updateNowPlaying() {
}); });
}); });
} }
function stopUpdateNowPlaying() {
updaterNowPlaying.cancel();
}
function loadPlaylists(refresh) { function loadPlaylists(refresh) {
if (refresh) { if (refresh) {
@ -631,7 +609,7 @@ function loadPlaylists(refresh) {
if (content == "") { if (content == "") {
// Load Playlists // Load Playlists
$.ajax({ $.ajax({
url: baseURL + '/getPlaylists.view?v=1.6.0&c=subweb&f=json', url: baseURL + '/getPlaylists.view?v=1.6.0&c=' + applicationName + '&f=json',
method: 'GET', method: 'GET',
dataType: 'json', dataType: 'json',
beforeSend: function (req) { beforeSend: function (req) {
@ -654,7 +632,7 @@ function loadPlaylists(refresh) {
function loadPlaylistsForMenu(menu) { function loadPlaylistsForMenu(menu) {
$('#' + menu).empty(); $('#' + menu).empty();
$.ajax({ $.ajax({
url: baseURL + '/getPlaylists.view?v=1.6.0&c=subweb&f=json', url: baseURL + '/getPlaylists.view?v=1.6.0&c=' + applicationName + '&f=json',
method: 'GET', method: 'GET',
dataType: 'json', dataType: 'json',
beforeSend: function (req) { beforeSend: function (req) {
@ -676,7 +654,7 @@ 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=' + applicationName + '&f=json&name=' + reply,
method: 'GET', method: 'GET',
dataType: 'json', dataType: 'json',
beforeSend: function (req) { beforeSend: function (req) {
@ -690,7 +668,7 @@ function newPlaylist() {
} }
function deletePlaylist(id) { function deletePlaylist(id) {
$.ajax({ $.ajax({
url: baseURL + '/deletePlaylist.view?v=1.6.0&c=subweb&f=json&id=' + id, url: baseURL + '/deletePlaylist.view?v=1.6.0&c=' + applicationName + '&f=json&id=' + id,
method: 'GET', method: 'GET',
dataType: 'json', dataType: 'json',
beforeSend: function (req) { beforeSend: function (req) {
@ -718,7 +696,7 @@ function addToPlaylist(playlistid, from) {
// Get songs from playlist // Get songs from playlist
var currentsongs = []; var currentsongs = [];
$.ajax({ $.ajax({
url: baseURL + '/getPlaylist.view?v=1.6.0&c=subweb&f=json&id=' + playlistid, url: baseURL + '/getPlaylist.view?v=1.6.0&c=' + applicationName + '&f=json&id=' + playlistid,
method: 'GET', method: 'GET',
dataType: 'json', dataType: 'json',
beforeSend: function (req) { beforeSend: function (req) {
@ -749,7 +727,7 @@ function addToPlaylist(playlistid, from) {
$.ajax({ $.ajax({
type: 'POST', type: 'POST',
url: baseURL + '/createPlaylist.view', url: baseURL + '/createPlaylist.view',
data: { v: "1.5.0", c: "subweb", f: "json", playlistId: playlistid, songId: currentsongs }, data: { v: "1.6.0", c: applicationName, f: "json", playlistId: playlistid, songId: currentsongs },
beforeSend: function (req) { beforeSend: function (req) {
req.setRequestHeader('Authorization', auth); req.setRequestHeader('Authorization', auth);
}, },
@ -768,7 +746,7 @@ function addToPlaylist(playlistid, from) {
$.ajax({ $.ajax({
type: 'POST', type: 'POST',
url: baseURL + '/createPlaylist.view', url: baseURL + '/createPlaylist.view',
data: { v: "1.5.0", c: "subweb", f: "json", name: 'New Playlist', songId: selected }, data: { v: "1.6.0", c: applicationName, f: "json", name: 'New Playlist', songId: selected },
beforeSend: function (req) { beforeSend: function (req) {
req.setRequestHeader('Authorization', auth); req.setRequestHeader('Authorization', auth);
}, },
@ -799,7 +777,7 @@ function savePlaylist(playlistid) {
$.ajax({ $.ajax({
type: 'POST', type: 'POST',
url: baseURL + '/createPlaylist.view', url: baseURL + '/createPlaylist.view',
data: { v: "1.5.0", c: "subweb", f: "json", playlistId: playlistid, songId: songs }, data: { v: "1.6.0", c: applicationName, f: "json", playlistId: playlistid, songId: songs },
beforeSend: function (req) { beforeSend: function (req) {
req.setRequestHeader('Authorization', auth); req.setRequestHeader('Authorization', auth);
}, },
@ -813,7 +791,7 @@ function savePlaylist(playlistid) {
} }
function getPlaylist(id, action, appendto) { function getPlaylist(id, action, appendto) {
$.ajax({ $.ajax({
url: baseURL + '/getPlaylist.view?v=1.6.0&c=subweb&f=json&id=' + id, url: baseURL + '/getPlaylist.view?v=1.6.0&c=' + applicationName + '&f=json&id=' + id,
method: 'GET', method: 'GET',
dataType: 'json', dataType: 'json',
beforeSend: function (req) { beforeSend: function (req) {

85
style/Style.css
View file

@ -89,11 +89,13 @@ img
} }
.tabcontent .tabcontent
{ {
min-height: 400px;
min-width: 700px;
} }
.smsection .smsection
{ {
width: 200px; width: 200px;
min-height: 200px; min-height: 360px;
padding: 0 0 40px 0; padding: 0 0 40px 0;
float: left; float: left;
overflow-y: auto; overflow-y: auto;
@ -108,7 +110,7 @@ img
{ {
height: 100%; height: 100%;
width: 100%; width: 100%;
min-height: 200px; min-height: 400px;
overflow: auto; overflow: auto;
background: #fff; background: #fff;
border: 1px solid #cbcbcb; border: 1px solid #cbcbcb;
@ -119,7 +121,7 @@ img
height: 100%; height: 100%;
width: 100%; width: 100%;
min-width: 450px; min-width: 450px;
min-height: 200px; min-height: 400px;
overflow: auto; overflow: auto;
background: #fff; background: #fff;
border: 1px solid #cbcbcb; border: 1px solid #cbcbcb;
@ -129,14 +131,9 @@ img
{ {
padding: 5px; padding: 5px;
} }
.nosection
{
height: 100%;
margin: 5px 5px 0 5px;
}
.subsection .subsection
{ {
margin: 5px 10px; margin: 15px 20px;
} }
.subsection small .subsection small
{ {
@ -311,7 +308,7 @@ table.songlist tr.album td.albumart img
{ {
margin: 5px 10px 0 10px; margin: 5px 10px 0 10px;
padding: 2px; padding: 2px;
border: 1px solid #F0F0F0; border: 1px solid #DEDEDE;
} }
table.songlist tr.album a.play table.songlist tr.album a.play
{ {
@ -395,7 +392,7 @@ table.songlist tr.song td.album
} }
table.songlist tr.song td.album img table.songlist tr.song td.album img
{ {
border: 1px solid #F0F0F0; border: 1px solid #DEDEDE;
display: block; display: block;
float: left; float: left;
margin: 0 5px; margin: 0 5px;
@ -458,14 +455,21 @@ table.songlist tr.song a.favorite
} }
table.songlist tr.playing table.songlist tr.playing
{ {
background: url('../images/play_alt_16x16.png') 6px 10px no-repeat #DEEBFA; background-color: #DEEBFA;
}
table.songlist tr.playing td:first-child
{
background: url('../images/play_alt_16x16.png') 6px 10px no-repeat;
} }
table.songlist tr.selected table.songlist tr.selected
{ {
color: #f2f2f2; color: #f2f2f2;
background: url('../images/check_8x7.png') 10px 16px no-repeat;
background-color: #4B95E5;
border-bottom: 1px solid #73ABE7; border-bottom: 1px solid #73ABE7;
background-color: #4B95E5;
}
table.songlist tr.selected td:first-child
{
background: url('../images/check_8x7.png') 10px 16px no-repeat;
} }
/* tablesorter style */ /* tablesorter style */
table.tablesorter { table.tablesorter {
@ -507,12 +511,17 @@ table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSo
background-color: #8dbdd8; background-color: #8dbdd8;
} }
#ArtistContainer
{
min-height: 360px;
}
#BottomContainer #BottomContainer
{ {
border-top: 1px solid #F2F2F2; border-top: 1px solid #F2F2F2;
background: #fff; background: #fff;
position: fixed; position: fixed;
height: 43px; height: 43px;
width: 184px;
} }
#BottomContainer ul #BottomContainer ul
{ {
@ -571,10 +580,33 @@ background-color: #8dbdd8;
width: 220px; width: 220px;
text-align: right; text-align: right;
} }
#ChatMsgs #SideBar
{
display: none;
width: 200px;
position: fixed;
top: 78px;
right: 4px;
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #CBCBCB;
min-height: 400px;
}
#SideBar .header
{ {
padding: 5px; padding: 5px;
font-size: 12px;
color: #545454;
font-variant: small-caps;
font-weight: bold;
}
#ChatMsgs
{
border-bottom: 1px solid #F2F2F2;
padding: 5px;
margin: 0 0 2px;
text-align: right; text-align: right;
overflow-y: auto;
overflow-x: hidden;
} }
#ChatMsgs .msg #ChatMsgs .msg
{ {
@ -594,6 +626,10 @@ background-color: #8dbdd8;
font-size: 9px; font-size: 9px;
color: #CAD0D7; color: #CAD0D7;
} }
#Chat .submit
{
padding: 0 2px;
}
#submenu_NowPlaying #submenu_NowPlaying
{ {
left: 605px; left: 605px;
@ -603,10 +639,18 @@ background-color: #8dbdd8;
width: 220px; width: 220px;
text-align: right; text-align: right;
} }
#NowPlaying
{
border-bottom: 1px solid #F2F2F2;
margin: 2px 0;
}
#NowPlayingList #NowPlayingList
{ {
height: 150px;
padding: 5px; padding: 5px;
text-align: right; text-align: right;
overflow-y: auto;
overflow-x: hidden;
} }
#NowPlayingList .msg #NowPlayingList .msg
{ {
@ -679,7 +723,7 @@ background-color: #8dbdd8;
margin: 2px 0 2px 0; margin: 2px 0 2px 0;
float: left; float: left;
padding: 2px; padding: 2px;
border: 1px solid #F0F0F0; border: 1px solid #DEDEDE;
} }
#songdetails #songdetails
{ {
@ -710,7 +754,7 @@ ul.preferences
{ {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
margin: 5px; margin: 0 5px;
} }
ul.preferences li ul.preferences li
{ {
@ -723,6 +767,7 @@ ul.preferences li.title
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
font-variant: small-caps; font-variant: small-caps;
padding: 0;
} }
ul.preferences li span ul.preferences li span
{ {
@ -800,6 +845,12 @@ input.large
width: 180px; width: 180px;
margin: 5px; margin: 5px;
} }
input.chat
{
border: 1px solid #ffffff;
width: 150px;
margin: 5px;
}
select select
{ {
font-family: Calibri, Arial, Verdana; font-family: Calibri, Arial, Verdana;