2.0.9 Dark theme, track duration fix

index.html

@@ -7,6 +7,7 @@
     <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" data-name="main" />
+    <link href="" rel="stylesheet" type="text/css" data-name="theme" />
     <link href="js/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
     <script src="js/plugins/jquery-1.7.2.min.js" type="text/javascript"></script>
     <script src="js/plugins/jquery-ui-1.8.20.min.js" type="text/javascript"></script>
@@ -195,6 +196,11 @@
                 <div class="clear"></div>
                 <div class="subsection floatleft">
                     <h3 class="title">Options</h3>
+                    <label for="Theme">Theme</label><br />
+                    <select id="Theme" name="Theme" class="large">
+                    <option value="default">Default</option>
+                    <option value="dark">Dark</option>
+                    </select><br />
                     <label for="AutoPlaylists">Genres</label><br />
                     <select id="Genres" name="Genres" class="large"></select><br />
                     <input type="text" id="AutoPlaylists" name="AutoPlaylists" class="large" title="Comma separated list of genres for Auto Playlists"/><br />
@@ -255,6 +261,10 @@
                         <span class="changes"></span>
                     </li>
                     -->
+                    <li class="log"><span class="version">9/30/2012 - 2.0.8</span>
+                        <span class="changes">Added Dark Theme</span>
+                        <span class="changes">Fixed issue with track duration display</span>
+                    </li>
                     <li class="log"><span class="version">9/29/2012 - 2.0.7</span>
                         <span class="changes">Updated to SoundManager2 v297a-20120916</span>
                         <span class="changes">Implemented <i>updatePlaylist</i> API method. Allows for larger playlists.</span>

js/libs/api.js

@@ -326,7 +326,7 @@ function getRandomSongList(action, appendto, genre, folder) {
                     var track;
                     if (item.track === undefined) { track = " "; } else { track = item.track; }
                     var time = secondsToTime(item.duration);
-                    html = generateSongHTML(rowcolor, item.id, item.parent, track, item.title, item.artist, item.album, item.coverArt, item.userRating, time['m'], time['s']);
+                    html = generateSongHTML(rowcolor, item.id, item.parent, track, item.title, item.artist, item.album, item.coverArt, item.userRating, time);
                     $(html).appendTo(appendto);
                 });
                 if (appendto === '#TrackContainer') {
@@ -451,7 +451,7 @@ function search(type, query) {
                         var track;
                         if (child.track === undefined) { track = " "; } else { track = child.track; }
                         var time = secondsToTime(child.duration);
-                        albumhtml = generateSongHTML(rowcolor, child.id, child.parent, track, child.title, child.artist, child.album, child.coverArt, child.userRating, time['m'], time['s']);
+                        albumhtml = generateSongHTML(rowcolor, child.id, child.parent, track, child.title, child.artist, child.album, child.coverArt, child.userRating, time);
                     }
                     $(albumhtml).appendTo("#AlbumRows");
                 });
@@ -780,7 +780,7 @@ function getPlaylist(id, action, appendto) {
                     var track;
                     if (child.track === undefined) { track = " "; } else { track = child.track; }
                     var time = secondsToTime(child.duration);
-                    html = generateSongHTML(rowcolor, child.id, child.parent, track, child.title, child.artist, child.album, child.coverArt, child.userRating, time['m'], time['s']);
+                    html = generateSongHTML(rowcolor, child.id, child.parent, track, child.title, child.artist, child.album, child.coverArt, child.userRating, time);
                     $(html).appendTo(appendto);
                 });
                 if (appendto === '#TrackContainer tbody') {
@@ -888,7 +888,7 @@ function getPodcast(id, action, appendto) {
                     description += child.description;
 
                     var time = secondsToTime(child.duration);
-                    html = generatePodcastHTML(rowcolor, child.streamId, child.parent, child.track, child.title, description, child.artist, child.album, child.coverArt, child.userRating, time['m'], time['s']);
+                    html = generatePodcastHTML(rowcolor, child.streamId, child.parent, child.track, child.title, description, child.artist, child.album, child.coverArt, child.userRating, time);
                     $(html).appendTo(appendto);
                     count++;
                 });

js/libs/generators.js

@@ -9,10 +9,9 @@ function generateRowHTML(child, appendto, rowcolor) {
         var track;
         if (child.track === undefined) { track = " "; } else { track = child.track; }
         var time = secondsToTime(child.duration);
-        albumhtml = generateSongHTML(rowcolor, child.id, child.parent, track, child.title, child.artist, child.album, child.coverArt, child.userRating, time['m'], time['s']);
+        albumhtml = generateSongHTML(rowcolor, child.id, child.parent, track, child.title, child.artist, child.album, child.coverArt, child.userRating, time);
     }
     return albumhtml;
-    //$(albumhtml).appendTo(appendto);
 }
 function generateAlbumHeaderHTML() {
     var html;
@@ -46,7 +45,7 @@ function generateSongHeaderHTML() {
     html = '<tr><th></th><th>Track</th><th>Title</th><th>Artist</th><th>Album</th><th class=\"alignright\">Time</th></tr>';
     return html;
 }
-function generateSongHTML(rowcolor, childid, parentid, track, title, artist, album, coverart, rating, m, s) {
+function generateSongHTML(rowcolor, childid, parentid, track, title, artist, album, coverart, rating, time) {
     var html;
     html = '<tr class=\"song ' + rowcolor + '\" childid=\"' + childid + '\" parentid=\"' + parentid + '\" userrating=\"' + rating + '\">';
     html += '<td class=\"itemactions\"><a class=\"add\" href=\"\" title=\"Add To Current Playlist\"></a>';
@@ -69,11 +68,11 @@ function generateSongHTML(rowcolor, childid, parentid, track, title, artist, alb
         coverartSrc = baseURL + '/getCoverArt.view?v=' + version + '&c=' + applicationName + '&f=jsonp&size=25&id=' + coverart;
     }
     html += '<td class=\"album\"><a href="javascript:getAlbums(\'' + parentid + '\',\'\',\'#AlbumRows\')"><img src=\"' + coverartSrc + '\" />' + album + '</a></td>';
-    html += '<td class=\"time\">' + m + ':' + s + '</td>';
+    html += '<td class=\"time\">' + time + '</td>';
     html += '</tr>';
     return html;
 }
-function generatePodcastHTML(rowcolor, childid, parentid, track, title, description, artist, album, coverart, rating, m, s) {
+function generatePodcastHTML(rowcolor, childid, parentid, track, title, description, artist, album, coverart, rating, time) {
     var html;
     html = '<tr class=\"song ' + rowcolor + '\" childid=\"' + childid + '\" parentid=\"' + parentid + '\" userrating=\"' + rating + '\">';
     html += '<td class=\"itemactions\"><a class=\"add\" href=\"\" title=\"Add To Current Playlist\"></a>';
@@ -96,7 +95,7 @@ function generatePodcastHTML(rowcolor, childid, parentid, track, title, descript
         coverartSrc = baseURL + '/getCoverArt.view?v=' + version + '&c=' + applicationName + '&f=jsonp&size=25&id=' + coverart;
     }
     html += '<td class=\"album\"><a href="javascript:getAlbums(\'' + parentid + '\',\'\',\'#AlbumRows\')"><img src=\"' + coverartSrc + '\" />' + album + '</a></td>';
-    html += '<td class=\"time\">' + m + ':' + s + '</td>';
+    html += '<td class=\"time\">' + time + '</td>';
     html += '</tr>';
     return html;
 }

js/libs/utils.js

@@ -62,7 +62,8 @@ function popOut()
 {
     window.open(hostURL, "External Player", "status = 1, height = 735, width = 840, resizable = 0");
 }
-function secondsToTime(secs) {
+function secondsToTime(d) {
+    /* Old way, does not calculate hours correctly
     var hours = Math.floor(secs / (60 * 60));
 
     var divisor_for_minutes = secs % (60 * 60);
@@ -80,6 +81,12 @@ function secondsToTime(secs) {
         "s": seconds
     };
     return obj;
+    */
+    d = Number(d);
+    var h = Math.floor(d / 3600);
+    var m = Math.floor(d % 3600 / 60);
+    var s = Math.floor(d % 3600 % 60);
+    return ((h > 0 ? h + ":" : "") + (m > 0 ? (h > 0 && m < 10 ? "0" : "") + m + ":" : "0:") + (s < 10 ? "0" : "") + s);
 }
 function updateMessage(msg) {
     $('#messages').text(msg);
@@ -213,10 +220,14 @@ function checkVersion(runningVersion, minimumVersion) {
     }
 }
 function switchTheme(theme) {
-    //var theme = $(this).data('genre');
+    switch (theme) {
-    //$("link").attr("href", $(this).attr('rel'));
+        case 'dark':
-    //$('link[data-name=main]').data('name');
+            $('link[data-name=theme]').attr('href', 'style/Dark.css');
-    if (theme == 'dark') {
+            break;
-        $('link[data-name=main]').attr('href', 'style/Dark.css');
+        case 'default':
+            $('link[data-name=theme]').attr('href', '');
+            break;
+        default:
+            break;
     }
 }

js/ui-load.js

@@ -59,7 +59,7 @@ function resizeSMSection(x) {
     if (smwidth != newsmwidth && newsmwidth > 150 && newsmwidth < 500) {
         $('.smsection').css({ 'width': (newsmwidth) + 'px' });
         $('.actions').css({ 'width': (newsmwidth - 5) + 'px' });
-        $('#BottomContainer').css({ 'width': (newsmwidth - 16) + 'px' });
+        $('#BottomContainer').css({ 'width': (newsmwidth - 23) + 'px' });
         $.cookie('defaultsmwidth', newwidth, { expires: 365, path: '/' });
         var ulwidth = newsmwidth + 6;
         $('#AlbumContainer, #TrackContainer, #PodcastContainer').css({ 'margin-left': ulwidth + 'px' });

js/ui-ready.js

@@ -9,6 +9,11 @@
     $('#ApplicationName').val($.cookie('ApplicationName'));
 
     // Set Preferences defaults
+    if ($.cookie('Theme')) {
+        $('#Theme').val($.cookie('Theme'));
+        var theme = $.cookie('Theme');
+        switchTheme(theme);
+    }
     if ($.cookie('HideAZ')) {
         $('#HideAZ').attr('checked', true);
     } else {
@@ -601,7 +606,7 @@
     $('#Theme').live('change', function () {
         var theme = $(this).val();
         switchTheme(theme);
-        //$.cookie('Theme', theme, { expires: 365 });
+        $.cookie('Theme', theme, { expires: 365 });
     });
     $('#Genres').live('change', function () {
         var genre = $(this).val();

style/Dark.css

@@ -1,64 +1,229 @@
 body 
 {
 	background: #222222;
-	color: #b2ae8b;
+	color: #d6d469;
 }
+a
+{
+    color: #ffffff;
+}
+a:hover
+{
+    color: #d6d469;
+}
+h3.title {
+    color: #f2f2f2;
+}
+
+.odd { background: none; }
+.even { background: #272727; }
+
 #content 
 {
     background: #222222;
 }
 .lgsection
 {
-    background: #313131;
+    background: #2E2E2E;
-    border: 1px solid #4D4D4D;
+    border: 1px solid #1D1D1D;
 }
 .fullsection
 {
-    background: #313131;
+    background: #2E2E2E;
+    border: 1px solid #1D1D1D;
+}
+.smsection
+{
+    background: none;
+    border-right: 1px solid #1D1D1D;
 }
 #nav a 
 {
     color: #7C7C7C;
-	background: #313131;
+	background: #272727;
-    border: 1px solid #2E2E2E;
+    border: 1px solid #232323;
-    border-right: 1px solid #4D4D4D;
     border-bottom: none;
 }
 #nav a:hover  
 {
     color: #545454; 
-    border: 1px solid #1A1A1A;
+    border: 1px solid #5A5A5A;
+    border-right: 1px solid #232323;
     border-bottom: none;
 }
 #nav a.first
 {
-    border-top: 1px solid #4D4D4D;
+    border-top: 1px solid #232323;
 }
-#nav a.first:hover  
+#nav a.first:hover
 {
-    color: #545454; 
+    border: 1px solid #5A5A5A;
-    border: 1px solid #1A1A1A;
+    border-right: 1px solid #232323;
     border-bottom: none;
 }
 #nav a.last
 {
-    border-bottom: 1px solid #4D4D4D;
+    border-bottom: 1px solid #232323;
 }
-#nav a.last:hover  
+#nav a.last:hover
 {
-    color: #545454; 
+    border: 1px solid #5A5A5A;
-    border: 1px solid #1A1A1A;
+    border-right: 1px solid #232323;
+    border-bottom: none;
 }
 #nav a.active  
 {
     color: #545454; 
-    background: #1D1D1D; 
+    background: #2E2E2E; 
-	border: 1px solid #1A1A1A;
+	border: 1px solid #1D1D1D;
 	border-right: none;
 }
 #nav a.active:hover  
 {
     color: #545454; 
-    border: 1px solid #CBCBCB;
+    border: 1px solid #5A5A5A;
 	border-right: none;
+    border-bottom: 1px solid #1D1D1D;
+}
+#SideBar
+{
+    background: #2e2e2e;
+    border: 1px solid #1d1d1d;
+}
+#NowPlaying, #ChatMsgs
+{
+    border-bottom: 1px solid #232323;
+}
+#messages
+{
+    color: #d6d469;
+    background: #2e2e2e;
+    border: solid 1px #5a5a5a;
+    border-top: none;
+}
+#player
+{
+    background: #2E2E2E;
+    border: 1px solid #1D1D1D;
+}
+#coverart 
+{
+    border: 1px solid #232323;
+}
+.vertshade {
+    background-image: -webkit-gradient( linear, left top, right top, from(rgba(46, 46, 46, 0)), to(rgba(46, 46, 46, 1)));
+}
+#songdetails ul {
+    color: #F2F2F2;
+}
+/* Button Style */
+a.button {
+    color: #6e6e6e;
+    -webkit-transition: border-color .218s;
+    -moz-transition: border .218s;
+    -o-transition: border-color .218s;
+    transition: border-color .218s;
+    background: #f3f3f3;
+    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#323232),to(#2e2e2e));
+    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#323232),to(#2e2e2e));
+    border: solid 1px #1d1d1d;
+}
+a.button:hover {
+    color: #939393;
+    -moz-box-shadow: 0 2px 0 rgba(242, 242, 242, 0.2) 
+    -webkit-box-shadow:0 2px 5px rgba(242, 242, 242, 0.2);
+    box-shadow: 0 1px 2px rgba(242, 242, 242, 0.15);
+    border: solid 1px #5a5a5a;
+}
+a.button:active {
+    color: #000;
+    border-color: #444;
+}
+ul.simplelist li
+{
+    border-bottom: 1px solid #272727;
+}
+ul.simplelist li a
+{
+    text-decoration: none;
+    color: #545454;
+}
+ul.simplelist li:hover
+{
+    background: #272727;
+}
+ul.simplelist li.index
+{
+    background: #232323;
+    border-bottom: 1px solid #171717;
+    color: #f2f2f2;
+}
+ul.simplelist li.index a
+{
+    color: #f2f2f2;
+}
+ul.simplelist li.selected
+{
+    background: #3A3A3A;
+}
+#BottomContainer
+{
+    border-top: 1px solid #F2F2F2;
+    background: #2a2a2a;
+}
+table.songlist th {
+    color: #F2F2F2;
+}
+table.songlist tr:hover
+{
+    background: #1d1d1d;
+}
+table.songlist tr.album 
+{
+    border-bottom: 1px solid #232323;
+}
+table.songlist tr.album td.albumart img
+{
+    border: 1px solid #232323;
+}
+table.songlist tr.song {
+    border-bottom: 1px solid #232323;
+}
+table.songlist tr.song td.album img
+{
+    border: 1px solid #232323;
+}
+table.songlist tr.song td.album a
+{
+    color: #f2f2f2;
+}
+table.songlist tr.song td.album a:hover
+{
+    color: #d6d469;
+    text-decoration: underline;    
+}
+table.songlist tr.selected 
+{
+    background: #3a3a3a;
+}
+table.songlist tr.playing {
+    background: #1d1d1d;
+}
+ul.preferences li em 
+{
+    background: none repeat scroll 0 0 #1d1d1d;
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+    color: #f2f2f2;
+}
+.inputwrap
+{
+    border: 1px solid #1d1d1d;
+}
+fieldset
+{
+    border: 1px solid #1d1d1d;
+}
+#donate {
+    background: #232323;
+    border: 1px solid #1D1D1D;
 }

style/Style.css

@@ -645,7 +645,7 @@ background-color: #8dbdd8;
     background: #fff;
     position: fixed;
     height: 43px;
-    width: 184px;
+    width: 182px;
 }
 #BottomContainer ul 
 {
@@ -876,14 +876,12 @@ background-color: #8dbdd8;
     line-height: 17px;
     padding: 0 5px;
     font-size: 11px;
-    color: #333333;
     text-shadow: none;
     height: 36px;
     margin: 0px 0px 0px 6px;
 }
 .audiojs .time em
 {
-    color: #333333;
     padding: 0px 2px 0px 0px;
     font-style: normal;
 }
@@ -990,7 +988,6 @@ ul.preferences
 }
 ul.preferences li
 {
-    color: #646464;
     font-size: 11px;
     padding: 8px 0;
 }
@@ -1017,7 +1014,6 @@ ul.preferences li.log
 }
 ul.preferences li span.version
 {
-    color: #646464;
     font-weight: bold;
     font-size: 11px;
     padding: 0;
@@ -1025,7 +1021,6 @@ ul.preferences li span.version
 }
 ul.preferences li.log span.changes
 {
-    color: #646464;
     font-size: 11px;
     padding: 0 0 0 5px;
     display: block;
@@ -1053,7 +1048,6 @@ a.button {
     padding: 6px 12px;
     position: relative;
     display: inline-block;
-    text-shadow: 0 1px 0 #fff;
     -webkit-transition: border-color .218s;
     -moz-transition: border .218s;
     -o-transition: border-color .218s;