.011 added play button from album list
This commit is contained in:
Trevor Squillario
parent
724443fd36
commit
f3dcac0804
5 changed files with 71 additions and 15 deletions
5
README
5
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
|
||||
BIN
images/play_gl_6x8.png
Normal file
BIN
images/play_gl_6x8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 165 B |
25
index.html
25
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,6 +299,14 @@
|
|||
$.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);
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
23
js/app.js
23
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 = " "; } else { track = child.track; }
|
||||
if (i == 0) {
|
||||
var backhtml = '<li class=\"back\"><a href=\"#\" onclick=\"javascript:getAlbums(\'' + albumid + '\'); return false;\">« Back</a></li>';
|
||||
var backhtml = '<li class=\"back\"><a href=\"#\" onclick=\"javascript:getAlbums(\'' + artistid + '\'); return false;\">« 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue