.011 added play button from album list

README

@@ -8,12 +8,13 @@ External Subsonic Music Player
 8/25/2011 .006 flexible layout, added buttons to player
 9/17/2011 .007 display tweaks for tablet, chat feature added
 9/17/2011 .008 pause/play button tweak
-9/30/2011 .009 now playing support, added back button to track list
+9/30/2011 .009 now playing support, added back button to track list, other tweaks
+10/1/2011 .010 fix for subdirectory custom installs
+10/2/2011 .011 added play button from album list
 
 TO DO: (In no particular order...)
 - Jukebox Control
 - Download Links
-- What Other Are Listening To support
 - Ratings
 - Chrome App???
 - Add notification when trial license has expired

index.html

@@ -121,6 +121,13 @@
                 }
                 lastChecked = this;
             });
+            // Albums
+            $('li.album a.play').live('click', function (e) {
+                var albumid = $(this).parent().parent().attr('childid');
+                var artistid = $(this).parent().parent().attr('parentid');
+                getAlbums(albumid, artistid, true);
+                return false;
+            });
 
             // Play Track - Global Click Event
             $('ul.songlist li.song').live('dblclick', function (e) {
@@ -292,13 +299,21 @@
                 $.cookie('username', null);
                 $.cookie('password', null);
             });
+            $('#SaveSubDirectory').live('click', function () {
+                var subdirectory = $('#SubDirectory').val();
+                if (subdirectory != "") {
+                    $.cookie('subdirectory', subdirectory, { expires: 365 });
+                    location.reload(true);
+                }
+                return false;
+            });
             $('#StyleSwitcher').live('change', function () {
                 var style = $(this).val();
                 $('link').attr('href', style);
                 $.cookie('css', style, { expires: 365, path: '/' });
                 location.reload(true);
             });
-        });                                        // End document.ready
+        });       // End document.ready
 
         $(window).load(function () {
             // Set Default Height
@@ -369,7 +384,7 @@
                 <a href="#" class="button" id="action_RefreshArtists" title="Refresh Artist List"><img src="images/reload_9x11.png" /></a>
             </div>
             <div class="actions floatright">
-                <a href="#" class="button" id="action_AddToPlaylist" title="Add Selected To Playlist">+ Playlist <img src="images/arrow_down_8x8.png" /></a>
+                <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_SelectAll" title="Select All">All</a>
                 <a href="#" class="button" id="action_SelectNone" title="Select None">None</a>
@@ -416,6 +431,7 @@
             $(document).ready(function () {
                 $('#Username').val($.cookie('username'));
                 $('#Password').val($.cookie('password'));
+                $('#SubDirectory').val($.cookie('subdirectory'));
             });
         </script>
             <div class="fullsection floatleft">
@@ -428,6 +444,13 @@
                     <a href="#" class="button submit floatright" id="ResetPreferences" title="Reset">Reset</a>
                 </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">
                     <ul class="preferences">
                     <li class="title">Keyboard Shortcuts</li>

js/app.js

@@ -1,10 +1,14 @@
 // Global Variables
 var hostURL = location.href;
-var baseURL = location.protocol + '//' + location.host + '/rest';
+var baseURL;
+if ($.cookie('subdirectory')) {
+    baseURL = location.protocol + '//' + location.host + '/' + $.cookie('subdirectory') + '/rest';
+} else {
+    baseURL = location.protocol + '//' + location.host + '/rest';
+}
 var username = $.cookie('username');
 var password = $.cookie('password');
 var auth = makeBaseAuth(username, password);
-
 function loadTabContent(tab) {
     switch (tab) {
         case '#tabLibrary':
@@ -79,7 +83,7 @@ function loadArtists(refresh) {
         });
     }
 }
-function getAlbums(id, albumid) {
+function getAlbums(id, artistid, autoplay) {
     $.ajax({
         url: baseURL + '/getMusicDirectory.view?v=1.6.0&c=subweb&f=json&id=' + id,
         method: 'GET',
@@ -108,16 +112,17 @@ function getAlbums(id, albumid) {
                     }
 
                     if (child.isDir == true) {
-                        albumhtml = '<li class=\"album ' + rowcolor + '\">';
+                        albumhtml = '<li class=\"album ' + rowcolor + '\" childid=\"' + child.id + '\" parentid=\"' + child.parent + '\">';
+                        albumhtml += '<div class=\"albumplay\"><a class=\"play\" href=\"\" title=\"Play Album\"></a></div>';
                         albumhtml += '<div class=\"albumart\"><img class=\"floatleft\" src=\"' + baseURL + '/getCoverArt.view?v=1.6.0&c=subweb&f=json&size=50&id=' + child.coverArt + '\" /></div>';
-                        albumhtml += '<a href=\"#\" onclick=\"javascript:getAlbums(\'' + child.id + '\', \'' + child.parent + '\'); return false;\">' + child.title + '</a>';
+                        albumhtml += '<a href=\"#\" class=\"title\" onclick=\"javascript:getAlbums(\'' + child.id + '\', \'' + child.parent + '\'); return false;\">' + child.title + '</a>';
                         albumhtml += '</li>';
                         $(albumhtml).appendTo("#AlbumContainer");
                     } else {
                         var track;
                         if (child.track === undefined) { track = "&nbsp;"; } else { track = child.track; }
                         if (i == 0) {
-                            var backhtml = '<li class=\"back\"><a href=\"#\" onclick=\"javascript:getAlbums(\'' + albumid + '\'); return false;\">&laquo; Back</a></li>';
+                            var backhtml = '<li class=\"back\"><a href=\"#\" onclick=\"javascript:getAlbums(\'' + artistid + '\'); return false;\">&laquo; Back</a></li>';
                             $(backhtml).appendTo("#AlbumContainer");
                         }
                         var time = secondsToTime(child.duration);
@@ -130,6 +135,12 @@ function getAlbums(id, albumid) {
                         $(albumhtml).appendTo("#AlbumContainer");
                     }
                 });
+                if (autoplay) {
+                    var firstsong = $('ul.songlist li.song:first');
+                    var songid = $(firstsong).attr('childid');
+                    var albumid = $(firstsong).attr('parentid');
+                    playSong('', firstsong, songid, albumid);
+                }
             }
         }
     });

style/Style.css

@@ -124,6 +124,11 @@ img
 {
     margin: 5px 10px;
 }
+.subsection small
+{
+    font-size: 10px;
+    margin: 0 5px;
+}
 .indexlist
 {
     float: right;
@@ -223,10 +228,10 @@ ul.songlist li.album
     height: 50px;
     border-bottom: 1px solid #f0f0f0;
 }
-ul.songlist li.album a
+ul.songlist li.album a.title
 {
     display: block;
-    padding: 16px 60px;
+    padding: 16px 90px;
 }
 ul.songlist .albumart
 {
@@ -235,6 +240,22 @@ ul.songlist .albumart
     overflow: hidden;
     float: left;
 }
+ul.songlist .albumplay
+{
+    float: left;
+}
+ul.songlist li.album a.play
+{
+    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
+{
+    background: url('../images/play_6x8.png') no-repeat 6px center #DEECFB;
+}
 ul.songlist li.song
 {
     font-size: 13px;
@@ -334,16 +355,16 @@ ul.songlist li.selected
 {
     margin: 0 0 5px 0;
 }
-#ChatMsgs .msg span.msg
+#ChatMsgs span.msg
 {
     font-size: 12px;
 }
-#ChatMsgs .msg span.user
+#ChatMsgs span.user
 {
     font-size: 10px;
     color: #B3B8BE;
 }
-#ChatMsgs .msg span.time
+#ChatMsgs span.time
 {
     font-size: 9px;
     color: #CAD0D7;