more music sorting options

dashboard-ui/css/detailtable.css

@@ -50,3 +50,13 @@
 .userDataCell {
     width: 140px;
 }
+
+.tabletColumn {
+    display: none;
+}
+
+@media all and (min-width: 750px) {
+    .tabletColumn {
+        display: table-cell;
+    }
+}

dashboard-ui/css/search.css

@@ -8,8 +8,10 @@
     vertical-align: middle;
     font: 16px arial,sans-serif;
     height: 28px;
+    line-height: 28px;
     margin: 0 .15em 0 0;
     width: 150px;
+    padding: 0;
 }
 
 .btnSearch {
@@ -148,3 +150,91 @@
         width: 398px;
     }
 }
+
+.circle {
+    background-color: rgba(0,0,0,0);
+    border: 5px solid rgba(0,183,229,0.9);
+    opacity: .9;
+    border-right: 5px solid rgba(0,0,0,0);
+    border-left: 5px solid rgba(0,0,0,0);
+    border-radius: 50px;
+    box-shadow: 0 0 35px #2187e7;
+    width: 50px;
+    height: 50px;
+    margin: 0 auto;
+    -moz-animation: spinPulse 1s infinite ease-in-out;
+    -webkit-animation: spinPulse 1s infinite linear;
+}
+
+.circle1 {
+    background-color: rgba(0,0,0,0);
+    border: 5px solid rgba(0,183,229,0.9);
+    opacity: .9;
+    border-left: 5px solid rgba(0,0,0,0);
+    border-right: 5px solid rgba(0,0,0,0);
+    border-radius: 50px;
+    box-shadow: 0 0 15px #2187e7;
+    width: 30px;
+    height: 30px;
+    margin: 0 auto;
+    position: relative;
+    top: -50px;
+    -moz-animation: spinoffPulse 1s infinite linear;
+    -webkit-animation: spinoffPulse 1s infinite linear;
+}
+
+@-moz-keyframes spinPulse {
+    0% {
+        -moz-transform: rotate(160deg);
+        opacity: 0;
+        box-shadow: 0 0 1px #2187e7;
+    }
+
+    50% {
+        -moz-transform: rotate(145deg);
+        opacity: 1;
+    }
+
+    100% {
+        -moz-transform: rotate(-320deg);
+        opacity: 0;
+    }
+}
+
+@-moz-keyframes spinoffPulse {
+    0% {
+        -moz-transform: rotate(0deg);
+    }
+
+    100% {
+        -moz-transform: rotate(360deg);
+    }
+}
+
+@-webkit-keyframes spinPulse {
+    0% {
+        -webkit-transform: rotate(160deg);
+        opacity: 0;
+        box-shadow: 0 0 1px #2187e7;
+    }
+
+    50% {
+        -webkit-transform: rotate(145deg);
+        opacity: 1;
+    }
+
+    100% {
+        -webkit-transform: rotate(-320deg);
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes spinoffPulse {
+    0% {
+        -webkit-transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+    }
+}

dashboard-ui/scripts/librarybrowser.js

@@ -210,7 +210,7 @@
 
             html += '<th></th>';
 
-            html += '<th>Track</th>';
+            html += '<th class="tabletColumn">Track</th>';
 
             if (options.showAlbum) {
                 html += '<th>Album</th>';
@@ -219,9 +219,9 @@
                 html += '<th>Artist</th>';
             }
 
-            html += '<th>Duration</th>';
+            html += '<th class="tabletColumn">Duration</th>';
-            html += '<th>Play Count</th>';
+            html += '<th class="tabletColumn">Play Count</th>';
-            html += '<th class="userDataCell"></th>';
+            html += '<th class="tabletColumn userDataCell"></th>';
 
             html += '</tr>';
 
@@ -236,7 +236,7 @@
                 if (num && item.ParentIndexNumber) {
                     num = item.ParentIndexNumber + "." + num;
                 }
-                html += '<td>' + (num || "") + '</td>';
+                html += '<td class="tabletColumn">' + (num || "") + '</td>';
 
                 html += '<td><a href="' + LibraryBrowser.getHref(item, "music") + '">' + (item.Name || "") + '</a></td>';
 
@@ -262,11 +262,11 @@
 
                 var time = DashboardPage.getDisplayText(item.RunTimeTicks || 0);
 
-                html += '<td>' + time + '</td>';
+                html += '<td class="tabletColumn">' + time + '</td>';
 
-                html += '<td>' + (item.UserData ? item.UserData.PlayCount : 0) + '</td>';
+                html += '<td class="tabletColumn">' + (item.UserData ? item.UserData.PlayCount : 0) + '</td>';
 
-                html += '<td class="userDataCell">' + LibraryBrowser.getUserDataIconsHtml(item) + '</td>';
+                html += '<td class="tabletColumn userDataCell">' + LibraryBrowser.getUserDataIconsHtml(item) + '</td>';
 
                 html += '</tr>';
             }

dashboard-ui/scripts/search.js

@@ -216,7 +216,7 @@
 
             html += '</form>';
 
-            html += '<div id="searchHints" class="searchHints" style="display:none;"><div class="searchHintsContent"></div></div>';
+            html += '<div id="searchHints" class="searchHints" style="display:none;"><div class="searchHintsContent"><div class="circle"></div><div class="circle1"></div></div></div>';
 
             html += '</div>';
 

dashboard-ui/songs.html

@@ -33,8 +33,29 @@
                         <strong>Sort By:</strong>
                     </legend>
 
-                    <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioSortName" value="on" checked="checked" data-sortby="SortName" data-mini="true">
+                    <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioSortName" value="on" checked="checked" data-sortby="Artist,Album,SortName" data-mini="true">
                     <label for="radioSortName">Name</label>
+
+                    <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioAlbum" value="on" checked="checked" data-sortby="Album" data-mini="true">
+                    <label for="radioAlbum">Album</label>
+
+                    <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioArtist" value="on" checked="checked" data-sortby="Artist" data-mini="true">
+                    <label for="radioArtist">Artist</label>
+
+                    <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioDateCreated" value="off" data-sortby="DateCreated,Artist,Album,SortName" data-mini="true">
+                    <label for="radioDateCreated">Date Added</label>
+
+                    <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioDatePlayed" value="off" data-sortby="DatePlayed,Artist,Album,SortName" data-mini="true">
+                    <label for="radioDatePlayed">Date Played</label>
+
+                    <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioPremiereDate" value="off" data-sortby="PremiereDate,Artist,Album,SortName" data-mini="true">
+                    <label for="radioPremiereDate">Date Released</label>
+
+                    <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioPlayCount" value="off" data-sortby="PlayCount,Artist,Album,SortName" data-mini="true">
+                    <label for="radioPlayCount">Play Count</label>
+
+                    <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioRuntime" value="off" data-sortby="Runtime" data-mini="true">
+                    <label for="radioRuntime">Runtime</label>
                 </fieldset>
 
                 <fieldset data-role="controlgroup">