2.0.9 Dark theme, track duration fix
This commit is contained in:
Trevor Squillario
parent
59ffcf7435
commit
3b6b240bce
8 changed files with 228 additions and 44 deletions
10
index.html
10
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>
|
||||
|
|
|
|||
|
|
@ -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++;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
//$("link").attr("href", $(this).attr('rel'));
|
||||
//$('link[data-name=main]').data('name');
|
||||
if (theme == 'dark') {
|
||||
$('link[data-name=main]').attr('href', 'style/Dark.css');
|
||||
switch (theme) {
|
||||
case 'dark':
|
||||
$('link[data-name=theme]').attr('href', 'style/Dark.css');
|
||||
break;
|
||||
case 'default':
|
||||
$('link[data-name=theme]').attr('href', '');
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
|
@ -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' });
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
199
style/Dark.css
199
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;
|
||||
border: 1px solid #4D4D4D;
|
||||
background: #2E2E2E;
|
||||
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;
|
||||
border: 1px solid #2E2E2E;
|
||||
border-right: 1px solid #4D4D4D;
|
||||
background: #272727;
|
||||
border: 1px solid #232323;
|
||||
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
|
||||
{
|
||||
color: #545454;
|
||||
border: 1px solid #1A1A1A;
|
||||
border: 1px solid #5A5A5A;
|
||||
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
|
||||
{
|
||||
color: #545454;
|
||||
border: 1px solid #1A1A1A;
|
||||
border: 1px solid #5A5A5A;
|
||||
border-right: 1px solid #232323;
|
||||
border-bottom: none;
|
||||
}
|
||||
#nav a.active
|
||||
{
|
||||
color: #545454;
|
||||
background: #1D1D1D;
|
||||
border: 1px solid #1A1A1A;
|
||||
background: #2E2E2E;
|
||||
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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue