playlist fixes, added auto playlists v.005

README

@@ -1,5 +1,6 @@
-Hello World!
+MiniSub
+External Subsonic Music Player
 
 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

Style.css

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

index.html

@@ -87,15 +87,19 @@
                 }
             });
 
+            // Main Click Events
             // Multiple Select
             $('.noselect').disableTextSelect();
             var lastChecked = null;
             $('ul.songlist li.song').live('click', function (event) {
                 var checkboxclass = 'ul.songlist li.song';
+                var songid = $(this).attr('childid');
+                var albumid = $(this).attr('parentid');
                 if ($(this).hasClass('selected')) {
                     $(this).removeClass('selected');
                 } else {
                     $(this).addClass('selected');
+                    playSong('selected', this, songid, albumid);
                 }
                 if (!lastChecked) {
                     lastChecked = this;
@@ -111,14 +115,13 @@
                 lastChecked = this;
             });
 
-            // Main Click Events
+            // Play Track - Global Click Event
-            // Load in a track on click
             $('ul.songlist li.song').live('dblclick', function (e) {
                 e.preventDefault();
-                $(this).addClass('playing').siblings().removeClass('playing');
+                //$(this).addClass('playing').siblings().removeClass('playing');
                 var songid = $(this).attr('childid');
                 var albumid = $(this).attr('parentid');
-                playSong(songid, albumid);
+                playSong('', this, songid, albumid);
             });
 
             // Action Menu Click Events
@@ -219,7 +222,7 @@
                 $.cookie('password', null);
             });
 
-        });          // End document.ready
+        });            // End document.ready
 
         var a;
         var audio;
@@ -236,10 +239,10 @@
 
         function changeTrack(next) {
             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 albumid = $(next).attr('parentid');
-            playSong(songid, albumid);
+            playSong('', next, songid, albumid);
         }
 
 	</script>
@@ -286,7 +289,16 @@
             </div>
             <div class="clear"></div>
             <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="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 id="Tracks" class="lgsection floatleft noselect">
                 <div class="loading"></div>

js/app.js

@@ -24,6 +24,11 @@ function loadTabContent(tab) {
                 $(this).addClass('selected');
                 getPlaylist($(this).attr("id"));
             });
+            $('ul#AutoPlaylistContainer li.item').live('click', function () {
+                $('ul#AutoPlaylistContainer li').removeClass('selected');
+                $(this).addClass('selected');
+                getAlbumListBy($(this).attr("id"));
+            });
             break;
         case '#tabPreferences':
             //loadPreferences();
@@ -75,45 +80,47 @@ function getAlbums(id) {
         },
         success: function (data) {
             $("#AlbumContainer").empty();
-            // There is a bug in the API that doesn't return a JSON array for one artist
+            if (data["subsonic-response"].directory.child != undefined) {
-            var children = [];
+                // There is a bug in the API that doesn't return a JSON array for one artist
-            if (data["subsonic-response"].directory.child.length > 0) {
+                var children = [];
-                children = data["subsonic-response"].directory.child;
+                if (data["subsonic-response"].directory.child.length > 0) {
-            } else {
+                    children = data["subsonic-response"].directory.child;
-                children[0] = 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';
+                    }
+
+                    if (child.isDir == true) {
+                        albumhtml = '<li class=\"album ' + rowcolor + '\">';
+                        albumhtml += '<div class=\"albumart\"><img class=\"floatleft\" src=\"' + baseURL + '/getCoverArt.view?v=1.5.0&c=subweb&f=json&size=50&id=' + child.coverArt + '\" /></div>';
+                        albumhtml += '<a href=\"#\" onclick=\"javascript:getAlbums(\'' + child.id + '\'); return false;\">' + child.title + '</a>';
+                        albumhtml += '</li>';
+                        $(albumhtml).appendTo("#AlbumContainer");
+                    } else {
+                        var track;
+                        if (child.track === undefined) { track = "&nbsp;"; } else { track = child.track; }
+                        var time = secondsToTime(child.duration);
+                        albumhtml = '<li class=\"song ' + rowcolor + '\" childid=\"' + child.id + '\" parentid=\"' + child.parent + '\">';
+                        albumhtml += '<span class=\"track\">' + track + '</span> ';
+                        albumhtml += child.title;
+                        albumhtml += ' <small>' + time['m'] + ':' + time['s'] + '</small>';
+                        albumhtml += '</li>';
+                        $(albumhtml).appendTo("#AlbumContainer");
+                    }
+                });
             }
-
-            var rowcolor;
-            var albumhtml;
-            $.each(children, function (i, child) {
-                if (i % 2 == 0) {
-                    rowcolor = 'even';
-                } else {
-                    rowcolor = 'odd';
-                }
-
-                if (child.isDir == true) {
-                    albumhtml = '<li class=\"album ' + rowcolor + '\">';
-                    albumhtml += '<div class=\"albumart\"><img class=\"floatleft\" src=\"' + baseURL + '/getCoverArt.view?v=1.5.0&c=subweb&f=json&size=50&id=' + child.coverArt + '\" /></div>';
-                    albumhtml += '<a href=\"#\" onclick=\"javascript:getAlbums(\'' + child.id + '\'); return false;\">' + child.title + '</a>';
-                    albumhtml += '</li>';
-                    $(albumhtml).appendTo("#AlbumContainer");
-                } else {
-                    var track;
-                    if (child.track === undefined) { track = "&nbsp;"; } else { track = child.track; }
-                    var time = secondsToTime(child.duration);
-                    albumhtml = '<li class=\"song ' + rowcolor + '\" childid=\"' + child.id + '\" parentid=\"' + child.parent + '\">';
-                    albumhtml += '<span class=\"track\">' + track + '</span> ';
-                    albumhtml += child.title;
-                    albumhtml += ' <small>' + time['m'] + ':' + time['s'] + '</small>';
-                    albumhtml += '</li>';
-                    $(albumhtml).appendTo("#AlbumContainer");
-                }
-            });
         }
     });
 }
-function playSong(songid, albumid) {
+function playSong(action, el, songid, albumid) {
     $.ajax({
         url: baseURL + '/getMusicDirectory.view?v=1.5.0&c=subweb&f=json&id=' + albumid,
         method: 'GET',
@@ -122,20 +129,28 @@ function playSong(songid, albumid) {
             req.setRequestHeader('Authorization', auth);
         },
         success: function (data) {
-            if (data["subsonic-response"].directory.child.length > 0) {
+            var title, artist, album;
-                $.each(data["subsonic-response"].directory.child, function (i, child) {
+            if (data["subsonic-response"].directory != undefined) {
-                    if (child.id == songid) {
+                if (data["subsonic-response"].directory.child.length > 0) {
-                        $('#songdetails_song').html(child.title);
+                    $.each(data["subsonic-response"].directory.child, function (i, child) {
-                        $('#songdetails_artist').html(child.artist);
+                        if (child.id == songid) {
-                        $('#songdetails_album').html(child.album);
+                            title = child.title;
-                    }
+                            artist = child.artist;
-                });
+                            album = child.album;
-            } else {
+                        }
-
+                    });
+                }
             }
-            audio.load(baseURL + '/stream.view?v=1.5.0&c=subweb&f=json&id=' + songid);
+            $('#songdetails_song').html(title);
-            audio.play();
+            $('#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.play();
+                $('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 */
 function confirmDelete() {