738 lines
36 KiB
HTML
738 lines
36 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>Subsonic - MiniSub</title>
|
|
<link rel="icon" href="images/subsonic_48x48.png" sizes="48x48"/>
|
|
<link rel="icon" href="images/subsonic_32x32.png" sizes="32x32"/>
|
|
<link href="style/Style.css" rel="stylesheet" type="text/css" />
|
|
<link href="js/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
|
|
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
|
|
<script src="js/audiojs/audio.min.js" type="text/javascript"></script>
|
|
<script src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
|
|
<script src="js/jquery.disable.text.select.pack.js" type="text/javascript"></script>
|
|
<script src="js/jquery.cookie.js" type="text/javascript"></script>
|
|
<script src="js/jquery.base64.js" type="text/javascript"></script>
|
|
<script src="js/jquery.dateFormat-1.0.js" type="text/javascript"></script>
|
|
<script src="js/jquery.periodic.js" type="text/javascript"></script>
|
|
<script src="js/jquery.shuffle.js" type="text/javascript"></script>
|
|
<script src="js/fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
|
|
<script src="js/app.js" type="text/javascript"></script>
|
|
<script type="text/javascript">
|
|
$(document).ready(function () {
|
|
// Tabs
|
|
$(".tabcontent").hide(); //Hide all content
|
|
if ($.cookie('username') == null) {
|
|
$('ul.tabs li a').each(function () {
|
|
if ($(this).attr("href") == '#tabPreferences') {
|
|
$(this).addClass("active"); //Add "active" class to selected tab
|
|
}
|
|
});
|
|
$("#tabPreferences").show(); //Show first tab content
|
|
loadTabContent('#tabPreferences');
|
|
} else {
|
|
if (window.location.hash) {
|
|
var hash = window.location.hash;
|
|
$('ul.tabs li a').each(function () {
|
|
if ($(this).attr("href") == hash) {
|
|
$(this).addClass("active"); //Add "active" class to selected tab
|
|
}
|
|
});
|
|
$(hash).show(); //Fade in the active ID content
|
|
loadTabContent(hash);
|
|
} else {
|
|
$("ul.tabs li:first a").addClass("active").show(); //Activate first tab
|
|
$(".tabcontent:first").show(); //Show first tab content
|
|
var firstTab = $("ul.tabs li:first a").attr("href");
|
|
loadTabContent(firstTab);
|
|
}
|
|
}
|
|
|
|
// Tabs - Click Event
|
|
$("ul.tabs li a").click(function () {
|
|
$("ul.tabs li a").removeClass("active"); //Remove any "active" class
|
|
$(this).addClass("active"); //Add "active" class to selected tab
|
|
$(".tabcontent").hide(); //Hide all tab content
|
|
|
|
var activeTab = $(this).attr("href"); //Find the href attribute value to identify the active tab + content
|
|
$(activeTab).show(); //Fade in the active ID content
|
|
loadTabContent(activeTab);
|
|
});
|
|
|
|
// Ajax Loading Screen
|
|
$(".toploading").ajaxStart(function () {
|
|
$(this).show();
|
|
});
|
|
$(".toploading").ajaxStop(function () {
|
|
$(this).hide();
|
|
});
|
|
|
|
// Keyboard shortcuts
|
|
$(document).keydown(function (e) {
|
|
var source = e.target.id;
|
|
if (source != 'Search' && source != 'ChatMsg') {
|
|
var unicode = e.charCode ? e.charCode : e.keyCode;
|
|
// a-z
|
|
if (unicode >= 65 && unicode <= 90) {
|
|
var key = findKeyForCode(unicode);
|
|
var el = '#index_' + key.toUpperCase();
|
|
$('#Artists').stop().scrollTo(el, 400);
|
|
// right arrow
|
|
} else if (unicode == 39 || unicode == 176) {
|
|
var next = $('ul.songlist li.playing').next();
|
|
if (!next.length) next = $('ul.songlist li').first();
|
|
changeTrack(next);
|
|
// back arrow
|
|
} else if (unicode == 37 || unicode == 177) {
|
|
var prev = $('ul.songlist li.playing').prev();
|
|
if (!prev.length) prev = $('ul.songlist li').last();
|
|
changeTrack(prev);
|
|
// spacebar
|
|
} else if (unicode == 32 || unicode == 179 || unicode == 0179) {
|
|
playPauseSong();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Main Click Events
|
|
// Albums Click Event
|
|
$('#ArtistContainer li.item').live('click', function () {
|
|
$('#AutoAlbumContainer li').removeClass('selected');
|
|
$('#ArtistContainer li').removeClass('selected');
|
|
$(this).addClass('selected');
|
|
getAlbums($(this).attr("id"), '', '#AlbumRows');
|
|
});
|
|
$('#BottomIndex li a').live('click', function () {
|
|
var el = '#index_' + $(this).text();
|
|
$('#Artists').stop().scrollTo(el, 400);
|
|
return false;
|
|
});
|
|
$('#AutoAlbumContainer li.item').live('click', function () {
|
|
$('#AutoAlbumContainer li').removeClass('selected');
|
|
$('#ArtistContainer li').removeClass('selected');
|
|
$(this).addClass('selected');
|
|
getAlbumListBy($(this).attr("id"));
|
|
});
|
|
$('tr.album a.play').live('click', function (e) {
|
|
var albumid = $(this).parent().parent().attr('childid');
|
|
var artistid = $(this).parent().parent().attr('parentid');
|
|
getAlbums(albumid, 'autoplay', '#CurrentPlaylistContainer');
|
|
return false;
|
|
});
|
|
$('tr.album a.add').live('click', function (e) {
|
|
var albumid = $(this).parent().parent().attr('childid');
|
|
var artistid = $(this).parent().parent().attr('parentid');
|
|
getAlbums(albumid, 'add', '#CurrentPlaylistContainer');
|
|
return false;
|
|
});
|
|
$('tr.album a.rate').live('click', function (event) {
|
|
var itemid = $(this).parent().parent().attr('childid');
|
|
rateSong(itemid, 5);
|
|
return false;
|
|
});
|
|
$('tr.album a.favorite').live('click', function (event) {
|
|
var itemid = $(this).parent().parent().attr('childid');
|
|
rateSong(itemid, 0);
|
|
return false;
|
|
});
|
|
$('tr.album').live('click', function (e) {
|
|
var albumid = $(this).attr('childid');
|
|
var artistid = $(this).attr('parentid');
|
|
getAlbums(albumid, '', '#AlbumRows');
|
|
return false;
|
|
});
|
|
// Track - Click Events
|
|
// Multiple Select
|
|
$('.noselect').disableTextSelect();
|
|
var lastChecked = null;
|
|
$('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) {
|
|
$(checkboxclass).removeClass('selected');
|
|
}
|
|
if ($(this).hasClass('selected')) {
|
|
$(this).removeClass('selected');
|
|
} else {
|
|
$(this).addClass('selected');
|
|
}
|
|
if (!lastChecked) {
|
|
lastChecked = this;
|
|
return;
|
|
}
|
|
if (event.shiftKey) {
|
|
var start = $(checkboxclass).index(this);
|
|
var end = $(checkboxclass).index(lastChecked);
|
|
for (i = Math.min(start, end); i <= Math.max(start, end); i++) {
|
|
$(checkboxclass).eq(i).addClass('selected');
|
|
}
|
|
}
|
|
lastChecked = this;
|
|
});
|
|
// Double Click
|
|
$('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);
|
|
});
|
|
$('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;
|
|
});
|
|
$('table.songlist tr.song a.add').live('click', function (event) {
|
|
var track = $(this).parent().parent();
|
|
$(track).clone().appendTo('#CurrentPlaylistContainer');
|
|
return false;
|
|
});
|
|
$('table.songlist tr.song a.remove').live('click', function (event) {
|
|
var track = $(this).parent().parent();
|
|
$(track).remove();
|
|
refreshRowColor();
|
|
return false;
|
|
});
|
|
$('table.songlist tr.song a.rate').live('click', function (event) {
|
|
var songid = $(this).parent().parent().attr('childid');
|
|
rateSong(songid, 5);
|
|
return false;
|
|
});
|
|
$('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', 400);
|
|
return false;
|
|
});
|
|
|
|
// Music Library Click Events
|
|
$('a#action_AddToPlaylist').click(function () {
|
|
var submenu = $('div#submenu_AddToPlaylist');
|
|
if (submenu.is(":visible")) {
|
|
submenu.fadeOut();
|
|
} else {
|
|
loadPlaylistsForMenu('submenu_AddToPlaylist');
|
|
//get the position of the placeholder element
|
|
pos = $(this).offset();
|
|
width = $(this).width();
|
|
height = $(this).height();
|
|
//show the menu directly over the placeholder
|
|
submenu.css({ "left": (pos.left) + "px", "top": (pos.top + height + 14) + "px" }).fadeIn(400);
|
|
}
|
|
});
|
|
var submenu_active = false;
|
|
$('div.submenu').mouseenter(function () {
|
|
submenu_active = true;
|
|
});
|
|
$('div.submenu').mouseleave(function () {
|
|
submenu_active = false;
|
|
setTimeout(function () { if (submenu_active == false) $('div.submenu').fadeOut(); }, 400);
|
|
});
|
|
$('a#action_AddToCurrent').click(function () {
|
|
addToCurrent();
|
|
});
|
|
$('#action_RefreshArtists').click(function () {
|
|
loadArtists(true);
|
|
return false;
|
|
});
|
|
$('#action_IncreaseWidth').click(function () {
|
|
resizeSMSection(50);
|
|
return false;
|
|
});
|
|
$('#action_DecreaseWidth').click(function () {
|
|
resizeSMSection(-50);
|
|
return false;
|
|
});
|
|
$('#action_SelectAll').click(function () {
|
|
$('#Albums tr.song').each(function () {
|
|
$(this).addClass('selected');
|
|
});
|
|
return false;
|
|
});
|
|
$('#action_SelectNone').click(function () {
|
|
$('#Albums tr.song').each(function () {
|
|
$(this).removeClass('selected');
|
|
});
|
|
return false;
|
|
});
|
|
$('input#Search').keydown(function (e) {
|
|
var unicode = e.charCode ? e.charCode : e.keyCode;
|
|
if (unicode == 13) {
|
|
$('#action_Search').click();
|
|
}
|
|
});
|
|
$('#action_Search').click(function () {
|
|
var query = $('#Search').val();
|
|
search('song', query);
|
|
$('#Search').val("");
|
|
return false;
|
|
});
|
|
// Current Playlist Click Events
|
|
$('#action_Shuffle').live('click', function () {
|
|
$('#CurrentPlaylistContainer tr.song').shuffle();
|
|
refreshRowColor();
|
|
return false;
|
|
});
|
|
$('#action_Empty').live('click', function () {
|
|
$('#CurrentPlaylistContainer tbody').empty();
|
|
return false;
|
|
});
|
|
$('a#action_AddCurrentToPlaylist').click(function () {
|
|
var submenu = $('div#submenu_AddCurrentToPlaylist');
|
|
if (submenu.is(":visible")) {
|
|
submenu.fadeOut();
|
|
} else {
|
|
loadPlaylistsForMenu('submenu_AddCurrentToPlaylist');
|
|
//get the position of the placeholder element
|
|
pos = $(this).offset();
|
|
width = $(this).width();
|
|
height = $(this).height();
|
|
//show the menu directly over the placeholder
|
|
submenu.css({ "left": (pos.left) + "px", "top": (pos.top + height + 14) + "px" }).fadeIn(400);
|
|
}
|
|
});
|
|
$('#action_CurrentSelectAll').click(function () {
|
|
$('#CurrentPlaylist tr.song').each(function () {
|
|
$(this).addClass('selected');
|
|
});
|
|
return false;
|
|
});
|
|
$('#action_CurrentSelectNone').click(function () {
|
|
$('#CurrentPlaylist tr.song').each(function () {
|
|
$(this).removeClass('selected');
|
|
});
|
|
return false;
|
|
});
|
|
// Playlist Click Events
|
|
$('#AutoPlaylistContainer li.item').live('click', function () {
|
|
$('#AutoPlaylistContainer li').removeClass('selected');
|
|
$('#PlaylistContainer li').removeClass('selected');
|
|
$(this).addClass('selected');
|
|
getRandomSongList('', '#TrackContainer');
|
|
});
|
|
$('#AutoPlaylistContainer li.item a.play').live('click', function () {
|
|
getRandomSongList('autoplay', '#CurrentPlaylistContainer');
|
|
return false;
|
|
});
|
|
$('#AutoPlaylistContainer li.item a.add').live('click', function () {
|
|
getRandomSongList('', '#CurrentPlaylistContainer');
|
|
return false;
|
|
});
|
|
$('#PlaylistContainer li.item').live('click', function () {
|
|
$('#AutoPlaylistContainer li').removeClass('selected');
|
|
$('#PlaylistContainer li').removeClass('selected');
|
|
$(this).addClass('selected');
|
|
getPlaylist($(this).attr("id"), '', '#TrackContainer tbody');
|
|
});
|
|
$('#PlaylistContainer li.item a.play').live('click', function () {
|
|
getPlaylist($(this).parent().parent().attr("id"), 'autoplay', '#CurrentPlaylistContainer tbody');
|
|
return false;
|
|
});
|
|
$('#PlaylistContainer li.item a.add').live('click', function () {
|
|
getPlaylist($(this).parent().parent().attr("id"), '', '#CurrentPlaylistContainer tbody');
|
|
return false;
|
|
});
|
|
$('#action_DeletePlaylist').click(function () {
|
|
if ($('#PlaylistContainer li.selected').length > 0) {
|
|
if (confirmDelete()) {
|
|
$('#PlaylistContainer li.selected').each(function () {
|
|
deletePlaylist($(this).attr("id"));
|
|
});
|
|
}
|
|
}
|
|
return false;
|
|
});
|
|
$('#action_SavePlaylist').click(function () {
|
|
if ($('#PlaylistContainer li.selected').length > 0) {
|
|
$('#PlaylistContainer li.selected').each(function () {
|
|
savePlaylist($(this).attr("id"));
|
|
});
|
|
}
|
|
return false;
|
|
});
|
|
$('#action_RemoveSongs').click(function () {
|
|
if ($('#TrackContainer tr.selected').length > 0) {
|
|
$('#TrackContainer tr.selected').each(function () {
|
|
$(this).remove();
|
|
});
|
|
}
|
|
return false;
|
|
});
|
|
|
|
// Player Click Events
|
|
$('#PlayTrack').live('click', function () {
|
|
playPauseSong();
|
|
return false;
|
|
});
|
|
$('#NextTrack').live('click', function () {
|
|
var next = $('#CurrentPlaylistContainer tr.playing').next();
|
|
changeTrack(next);
|
|
return false;
|
|
});
|
|
$('#PreviousTrack').live('click', function () {
|
|
var prev = $('#CurrentPlaylistContainer tr.playing').prev();
|
|
changeTrack(prev);
|
|
return false;
|
|
});
|
|
$("a#coverartimage").fancybox({
|
|
'hideOnContentClick': true,
|
|
'type': 'image'
|
|
});
|
|
|
|
// Side Bar Click Events
|
|
$('#action_ToggleSideBar').live('click', function () {
|
|
if ($.cookie('sidebar')) {
|
|
$.cookie('sidebar', null);
|
|
$('#SideBar').hide();
|
|
stopUpdateChatMessages();
|
|
stopUpdateNowPlaying();
|
|
} else {
|
|
$.cookie('sidebar', true, { expires: 365 });
|
|
$('#SideBar').show();
|
|
updateChatMessages();
|
|
updateNowPlaying();
|
|
}
|
|
resizeContent();
|
|
return false;
|
|
});
|
|
$('input#ChatMsg').keydown(function (e) {
|
|
var unicode = e.charCode ? e.charCode : e.keyCode;
|
|
if (unicode == 13) {
|
|
var msg = $('#ChatMsg').val();
|
|
if (msg != '') {
|
|
addChatMessage(msg);
|
|
}
|
|
$('#ChatMsg').val("");
|
|
}
|
|
});
|
|
|
|
// Preferences Click Events
|
|
$('#SavePreferences').live('click', function () {
|
|
var username = $('#Username').val();
|
|
var password = $('#Password').val();
|
|
$.cookie('username', username, { expires: 365 });
|
|
$.cookie('password', password, { expires: 365 });
|
|
var AutoAlbumSize = $('#AutoAlbumSize').val();
|
|
var AutoPlaylistSize = $('#AutoPlaylistSize').val();
|
|
$.cookie('AutoAlbumSize', AutoAlbumSize, { 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);
|
|
});
|
|
$('input#Password').keydown(function (e) {
|
|
var unicode = e.charCode ? e.charCode : e.keyCode;
|
|
if (unicode == 13) {
|
|
$('#SavePreferences').click();
|
|
}
|
|
});
|
|
$('#ResetPreferences').live('click', function () {
|
|
$.cookie('username', null);
|
|
$.cookie('password', null);
|
|
$.cookie('AutoAlbumSize', null);
|
|
$.cookie('AutoPlaylistSize', null);
|
|
$.cookie('SubDirectory', null);
|
|
$.cookie('ApplicationName', null);
|
|
location.reload(true);
|
|
});
|
|
$('#StyleSwitcher').live('change', function () {
|
|
var style = $(this).val();
|
|
$('link').attr('href', style);
|
|
$.cookie('css', style, { expires: 365, path: '/' });
|
|
location.reload(true);
|
|
});
|
|
}); // 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' });
|
|
$('#TrackContainer').css({ 'margin-left': ulwidth + 'px' });
|
|
}
|
|
if ($.cookie('sidebar') && $.cookie('username') && $.cookie('password')) {
|
|
$('#SideBar').show();
|
|
updateChatMessages();
|
|
updateNowPlaying();
|
|
}
|
|
resizeContent();
|
|
});
|
|
$(window).resize(function () {
|
|
resizeContent();
|
|
});
|
|
function resizeContent() {
|
|
var screenwidth = $(window).width();
|
|
$('.tabcontent').css({ 'height': (($(window).height() - 160)) + 'px' });
|
|
$('.smsection').css({ 'height': (($(window).height() - 200)) + 'px' });
|
|
var smheight = $('.smsection').height();
|
|
var smwidth = $('.smsection').width();
|
|
$('#BottomContainer').css({ 'top': smheight + 75 + 'px' });
|
|
if ($.cookie('sidebar')) {
|
|
var tabwidth = $(window).width() - 218;
|
|
if (tabwidth >= 700) {
|
|
$('.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) {
|
|
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;
|
|
$('#AlbumContainer').css({ 'margin-left': ulwidth + 'px' });
|
|
$('#TrackContainer').css({ 'margin-left': ulwidth + 'px' });
|
|
}
|
|
}
|
|
|
|
var a;
|
|
var audio;
|
|
audiojs.events.ready(function () {
|
|
a = audiojs.createAll({
|
|
trackEnded: function () {
|
|
var next = $('#CurrentPlaylistContainer tr.playing').next();
|
|
changeTrack(next);
|
|
},
|
|
updatePlayhead: function (percent) {
|
|
var player = this.settings.createPlayer;
|
|
var scrubber = $(this.wrapper).find("." + player.scrubberClass);
|
|
var progress = $(this.wrapper).find("." + player.progressClass);
|
|
|
|
progress.css('width', (scrubber.get(0).offsetWidth * percent) + 'px');
|
|
|
|
var played = $(this.wrapper).find("." + player.playedClass);
|
|
var p = this.duration * percent,
|
|
m = Math.floor(p / 60),
|
|
s = Math.floor(p % 60);
|
|
played.html((m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s);
|
|
|
|
if (!scrobbled && p > 30 && (percent > 0.5 || p > 480)) {
|
|
scrobbleSong(true);
|
|
}
|
|
},
|
|
useFlash: (function() {
|
|
var a = document.createElement('audio'),
|
|
userAgent = navigator.userAgent.toLowerCase(),
|
|
version = parseFloat((userAgent.match( /.+(?:rv|it|ra|ie|me)[\/: ]([\d.]+)/ ) || [])[1]);
|
|
|
|
if (/chrome/.test(userAgent) && version < 10) return false;
|
|
return !(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
|
|
})()
|
|
});
|
|
// Load in the first track
|
|
audio = a[0];
|
|
});
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="container">
|
|
<div id="nav">
|
|
<ul class="tabs">
|
|
<li><a href="#tabLibrary">Music Library</a></li>
|
|
<li><a href="#tabCurrent">Current Playlist</a></li>
|
|
<li><a href="#tabPlaylists">Playlists</a></li>
|
|
<!--<li><a href="#tabCurrentPlaylist">Current Playlist</a></li>-->
|
|
<li><a href="#tabPreferences" class="last">Preferences</a></li>
|
|
</ul>
|
|
<div class="toploading"></div>
|
|
<div id="messages"></div>
|
|
</div>
|
|
<div id="content">
|
|
<div id="tabLibrary" class="tabcontent">
|
|
<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 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>
|
|
<a href="#" class="button" id="action_SelectAll" title="Select All">All</a>
|
|
<a href="#" class="button" id="action_SelectNone" title="Select None">None</a>
|
|
<input type="text" id="Search" class="medium" /><a href="#" class="button" id="action_Search" title="Search"><img src="images/magnifying_glass_alt_12x12.png" /></a>
|
|
</div>
|
|
<div id="Albums" class="lgsection floatleft noselect">
|
|
<div class="loading"></div>
|
|
<div id="Artists" class="smsection floatleft noselect" tabindex="0">
|
|
<div class="padder">
|
|
<ul id="AutoAlbumContainer" class="simplelist mainlist">
|
|
<li class="index" id="auto">Auto Albums</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>
|
|
<table id="AlbumContainer" class="simplelist songlist" cellspacing="1">
|
|
<thead id="AlbumHeader"></thead>
|
|
<tbody id="AlbumRows"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div id="tabCurrent" class="tabcontent">
|
|
<div class="actions floatleft">
|
|
<a href="#" class="button" id="action_Shuffle" title="Shuffle"><img src="images/fork_11x12.png" /></a>
|
|
<a href="#" class="button" id="action_Empty" title="Remove All">Empty</a>
|
|
<a href="#" class="button" id="action_CurrentSelectAll" title="Select All">All</a>
|
|
<a href="#" class="button" id="action_CurrentSelectNone" title="Select None">None</a>
|
|
<a href="#" class="button" id="action_AddCurrentToPlaylist" title="Add Selected To Playlist">+ Playlist</a>
|
|
<div id="submenu_AddCurrentToPlaylist" class="submenu shadow" style="display: none;"></div>
|
|
</div>
|
|
<div id="CurrentPlaylist" class="fullsection floatleft noselect">
|
|
<table id="CurrentPlaylistContainer" class="simplelist songlist" cellspacing="1">
|
|
<thead></thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div id="tabPlaylists" class="tabcontent">
|
|
<div class="actions floatleft">
|
|
<a href="#" class="button" id="action_NewPlaylist" onclick="newPlaylist(); return false;" title="New Playlist">+ New</a>
|
|
<a href="#" class="button" id="action_DeletePlaylist" title="Delete Playlist">Delete</a>
|
|
<a href="#" class="button" id="action_SavePlaylist" title="Save Playlist">Save</a>
|
|
<a href="#" class="button" id="action_RemoveSongs" title="Remove selected song(s) from playlist">Remove Song(s)</a>
|
|
</div>
|
|
<div class="clear"></div>
|
|
<div id="Tracks" class="lgsection floatleft noselect">
|
|
<div class="loading"></div>
|
|
<div id="Playlists" class="smsection floatleft noselect">
|
|
<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 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>
|
|
<table id="TrackContainer" class="simplelist songlist">
|
|
<thead></thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div id="tabPreferences" class="tabcontent">
|
|
<script type="text/javascript">
|
|
$(document).ready(function () {
|
|
$('#Username').val($.cookie('username'));
|
|
$('#Password').val($.cookie('password'));
|
|
$('#AutoAlbumSize').val($.cookie('AutoAlbumSize'));
|
|
$('#AutoPlaylistSize').val($.cookie('AutoPlaylistSize'));
|
|
$('#SubDirectory').val($.cookie('subdirectory'));
|
|
$('#ApplicationName').val($.cookie('applicationname'));
|
|
});
|
|
</script>
|
|
<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="lgsection floatleft">
|
|
<div class="subsection floatleft">
|
|
<label for="Username">Username</label><br />
|
|
<input type="text" id="Username" name="Username" class="large"/><br />
|
|
<label for="Password">Password</label><br />
|
|
<input type="password" id="Password" name="Password" class="large"/><br /><br />
|
|
</div>
|
|
<div class="subsection floatleft">
|
|
<ul class="preferences">
|
|
<li class="title">Keyboard Shortcuts</li>
|
|
<li><em>[a-z]</em> Click the Album list, use to quickly browse to an artist</li>
|
|
<li><em>Spacebar</em> Play/Pause</li>
|
|
<li><em>→</em> Next Track</li>
|
|
<li><em>←</em> Previous Track</li>
|
|
<li><span></span></li>
|
|
</ul>
|
|
</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 class="clear"></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 -->
|
|
<div class="clear"></div>
|
|
<div id="player">
|
|
<div class="playeractions floatleft">
|
|
<a href="#" class="button" id="PreviousTrack" title="Previous Track"><img src="images/first_24x24.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>
|
|
</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>
|
|
<li id="songdetails_artist"></li>
|
|
</ul>
|
|
<div id="audiocontainer" class="floatleft">
|
|
<div class="floatleft"><audio src="" preload="none" /></div>
|
|
</div>
|
|
</div>
|
|
<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 class="clear"></div>
|
|
</div>
|
|
|
|
<div class="clear"></div>
|
|
</div><!-- end #content -->
|
|
<!--<div class="floatright"><a href="#" title="Launch external player" onclick="popOut(); return false;"><img src="images/new_window_12x12.png" /></a></div>-->
|
|
</div><!-- end #container -->
|
|
</body>
|
|
</html>
|