playlist fixes, added auto playlists v.005

This commit is contained in:
Trevor Squillario 2011-08-24 09:57:04 -04:00
parent 4ddf7e6038
commit 197ba4a508
4 changed files with 148 additions and 58 deletions

7
README
View file

@ -1,5 +1,6 @@
Hello World! MiniSub
External Subsonic Music Player
8/15/2011 .001 Initial Release 8/15/2011 .001 Initial Release
8/15/2011 .003 Fixed song details on player
.003 Fixed song details on player 8/17/2011 .004 https fix, audio player tweaks

View file

@ -143,12 +143,14 @@ ul.simplelist li:hover
{ {
background: #F7FBFF; background: #F7FBFF;
} }
ul.mainlist li.index ul.simplelist li.index
{ {
background: #EDEDED; background: #EDEDED;
border-bottom: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD;
color: #A1A1A1; color: #A1A1A1;
font-size: 11px; font-size: 11px;
margin: 2px 0;
padding: 0 4px;
} }
ul.mainlist li.selected ul.mainlist li.selected
{ {

View file

@ -87,15 +87,19 @@
} }
}); });
// Main Click Events
// Multiple Select // Multiple Select
$('.noselect').disableTextSelect(); $('.noselect').disableTextSelect();
var lastChecked = null; var lastChecked = null;
$('ul.songlist li.song').live('click', function (event) { $('ul.songlist li.song').live('click', function (event) {
var checkboxclass = 'ul.songlist li.song'; var checkboxclass = 'ul.songlist li.song';
var songid = $(this).attr('childid');
var albumid = $(this).attr('parentid');
if ($(this).hasClass('selected')) { if ($(this).hasClass('selected')) {
$(this).removeClass('selected'); $(this).removeClass('selected');
} else { } else {
$(this).addClass('selected'); $(this).addClass('selected');
playSong('selected', this, songid, albumid);
} }
if (!lastChecked) { if (!lastChecked) {
lastChecked = this; lastChecked = this;
@ -111,14 +115,13 @@
lastChecked = this; lastChecked = this;
}); });
// Main Click Events // Play Track - Global Click Event
// Load in a track on click
$('ul.songlist li.song').live('dblclick', function (e) { $('ul.songlist li.song').live('dblclick', function (e) {
e.preventDefault(); e.preventDefault();
$(this).addClass('playing').siblings().removeClass('playing'); //$(this).addClass('playing').siblings().removeClass('playing');
var songid = $(this).attr('childid'); var songid = $(this).attr('childid');
var albumid = $(this).attr('parentid'); var albumid = $(this).attr('parentid');
playSong(songid, albumid); playSong('', this, songid, albumid);
}); });
// Action Menu Click Events // Action Menu Click Events
@ -236,10 +239,10 @@
function changeTrack(next) { function changeTrack(next) {
if (!next.length) next = $('ul.songlist li').first(); if (!next.length) next = $('ul.songlist li').first();
next.addClass('playing').siblings().removeClass('playing'); //next.addClass('playing').siblings().removeClass('playing');
var songid = $(next).attr('childid'); var songid = $(next).attr('childid');
var albumid = $(next).attr('parentid'); var albumid = $(next).attr('parentid');
playSong(songid, albumid); playSong('', next, songid, albumid);
} }
</script> </script>
@ -286,7 +289,16 @@
</div> </div>
<div class="clear"></div> <div class="clear"></div>
<div id="Playlists" class="smsection floatleft noselect"> <div id="Playlists" class="smsection floatleft noselect">
<ul class="simplelist"><li class="index">Saved Playlists</li></ul>
<ul id="PlaylistContainer" class="simplelist mainlist"></ul> <ul id="PlaylistContainer" class="simplelist mainlist"></ul>
<ul id="AutoPlaylistContainer" class="simplelist mainlist">
<li class="index" id="auto">Auto Playlists</li>
<li class="item" id="random"><span>5 Random Albums</span></li>
<li class="item" id="recent"><span>5 Recent Albums</span></li>
<li class="item" id="newest"><span>5 Latest Albums</span></li>
<li class="item" id="highest"><span>5 Best Rated Albums</span></li>
<li class="item" id="frequent"><span>5 Most Frequent Albums</span></li>
</ul>
</div> </div>
<div id="Tracks" class="lgsection floatleft noselect"> <div id="Tracks" class="lgsection floatleft noselect">
<div class="loading"></div> <div class="loading"></div>

View file

@ -24,6 +24,11 @@ function loadTabContent(tab) {
$(this).addClass('selected'); $(this).addClass('selected');
getPlaylist($(this).attr("id")); getPlaylist($(this).attr("id"));
}); });
$('ul#AutoPlaylistContainer li.item').live('click', function () {
$('ul#AutoPlaylistContainer li').removeClass('selected');
$(this).addClass('selected');
getAlbumListBy($(this).attr("id"));
});
break; break;
case '#tabPreferences': case '#tabPreferences':
//loadPreferences(); //loadPreferences();
@ -75,6 +80,7 @@ function getAlbums(id) {
}, },
success: function (data) { success: function (data) {
$("#AlbumContainer").empty(); $("#AlbumContainer").empty();
if (data["subsonic-response"].directory.child != undefined) {
// There is a bug in the API that doesn't return a JSON array for one artist // There is a bug in the API that doesn't return a JSON array for one artist
var children = []; var children = [];
if (data["subsonic-response"].directory.child.length > 0) { if (data["subsonic-response"].directory.child.length > 0) {
@ -111,9 +117,10 @@ function getAlbums(id) {
} }
}); });
} }
}
}); });
} }
function playSong(songid, albumid) { function playSong(action, el, songid, albumid) {
$.ajax({ $.ajax({
url: baseURL + '/getMusicDirectory.view?v=1.5.0&c=subweb&f=json&id=' + albumid, url: baseURL + '/getMusicDirectory.view?v=1.5.0&c=subweb&f=json&id=' + albumid,
method: 'GET', method: 'GET',
@ -122,20 +129,28 @@ function playSong(songid, albumid) {
req.setRequestHeader('Authorization', auth); req.setRequestHeader('Authorization', auth);
}, },
success: function (data) { success: function (data) {
var title, artist, album;
if (data["subsonic-response"].directory != undefined) {
if (data["subsonic-response"].directory.child.length > 0) { if (data["subsonic-response"].directory.child.length > 0) {
$.each(data["subsonic-response"].directory.child, function (i, child) { $.each(data["subsonic-response"].directory.child, function (i, child) {
if (child.id == songid) { if (child.id == songid) {
$('#songdetails_song').html(child.title); title = child.title;
$('#songdetails_artist').html(child.artist); artist = child.artist;
$('#songdetails_album').html(child.album); album = child.album;
} }
}); });
} else {
} }
}
$('#songdetails_song').html(title);
$('#songdetails_artist').html(artist);
$('#songdetails_album').html(album);
$('#coverartimage').attr('src', baseURL + '/getCoverArt.view?v=1.5.0&c=subweb&f=json&size=120&id=' + songid);
if (action != 'selected') {
audio.load(baseURL + '/stream.view?v=1.5.0&c=subweb&f=json&id=' + songid); audio.load(baseURL + '/stream.view?v=1.5.0&c=subweb&f=json&id=' + songid);
audio.play(); audio.play();
$('#coverartimage').attr('src', baseURL + '/getCoverArt.view?v=1.5.0&c=subweb&f=json&size=120&id=' + songid); $('ul.songlist li.song').removeClass('playing');
$(el).addClass('playing');
}
} }
}); });
} }
@ -393,7 +408,67 @@ function getPlaylist(id) {
} }
}); });
} }
function getAlbumListBy(id) {
$.ajax({
url: baseURL + '/getAlbumList.view?v=1.5.0&c=subweb&f=json&type=' + id,
method: 'GET',
dataType: 'json',
beforeSend: function (req) {
req.setRequestHeader('Authorization', auth);
},
success: function (data) {
if (data["subsonic-response"].albumList.album != undefined) {
$("#TrackContainer").empty();
// There is a bug in the API that doesn't return a JSON array for one artist
var albums = [];
if (data["subsonic-response"].albumList.album.length > 0) {
albums = data["subsonic-response"].albumList.album;
} else {
albums[0] = data["subsonic-response"].albumList.album;
}
var rowcolor;
var html;
$.each(albums, function (i, album) {
$.ajax({
url: baseURL + '/getMusicDirectory.view?v=1.5.0&c=subweb&f=json&size=5&id=' + album.id,
method: 'GET',
dataType: 'json',
beforeSend: function (req) {
req.setRequestHeader('Authorization', auth);
},
success: function (data) {
var children = [];
if (data["subsonic-response"].directory.child.length > 0) {
children = data["subsonic-response"].directory.child;
} else {
children[0] = data["subsonic-response"].directory.child;
}
$.each(children, function (i, child) {
if (i % 2 == 0) {
rowcolor = 'even';
} else {
rowcolor = 'odd';
}
var track;
if (child.track === undefined) { track = "&nbsp;"; } else { track = child.track; }
var time = secondsToTime(child.duration);
html = '<li class=\"song ' + rowcolor + '\" childid=\"' + child.id + '\" parentid=\"' + child.parent + '\">';
html += '<span class=\"track\">' + track + '</span> ';
html += child.title;
html += ' <small>' + time['m'] + ':' + time['s'] + '</small>';
html += '</li>';
$(html).appendTo("#TrackContainer");
});
}
});
});
} else {
$('ul#TrackContainer').empty();
}
}
});
}
/* Reusable Functions */ /* Reusable Functions */
function confirmDelete() { function confirmDelete() {