added albums in artist-view and a little cleanup
This commit is contained in:
Wouter van Wijk
parent
bf085dcf7c
commit
dc78cbed85
@ -93,9 +93,17 @@ body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.resultrow:hover {
|
||||
background-color: #555 !important;
|
||||
.table tr:hover,
|
||||
.table th:hover,
|
||||
.table td:hover {
|
||||
background-color: #555 !important;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
@ -105,7 +105,7 @@
|
||||
<img src="img/loader.gif" id="playlistsloader" class="loader" />
|
||||
</div>
|
||||
<div class="span8" style="display: none" id="playlisttablediv">
|
||||
<table class="table table-striped">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- <th>#</th> -->
|
||||
@ -125,7 +125,7 @@
|
||||
|
||||
<div class="span11 content" id="currentpane">
|
||||
<h4>Current Playlist</h4>
|
||||
<table class="table table-striped">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- <th>#</th> -->
|
||||
@ -151,7 +151,7 @@
|
||||
</p>
|
||||
</div>
|
||||
</div><!--/row-->
|
||||
<table class="table table-striped">
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
@ -175,18 +175,8 @@
|
||||
</p>
|
||||
</div>
|
||||
</div><!--/row-->
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<th>Artist</th>
|
||||
<th>Album</th>
|
||||
<th>Length</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="artiststable"></tbody>
|
||||
</table>
|
||||
<img src="img/loader.gif" id="artistsloader" class= "loader" />
|
||||
<div id="artiststable"></div>
|
||||
<img src="img/loader.gif" id="artistsloader" class="loader" />
|
||||
</div>
|
||||
|
||||
<div class="content" id="searchpane">
|
||||
@ -199,13 +189,13 @@
|
||||
<div id="searchresults">
|
||||
<div class="span5" id="searchartists">
|
||||
<h4>Artists</h4>
|
||||
<table class="table table-striped">
|
||||
<table class="table table-bordered table-striped">
|
||||
<tbody id="artistresulttable"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="span5" id="searchalbums">
|
||||
<h4>Albums</h4>
|
||||
<table class="table table-striped">
|
||||
<table class="table table-bordered table-striped">
|
||||
<tbody id="albumresulttable"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
@ -214,7 +204,7 @@
|
||||
</div>
|
||||
<div class="span11" id="searchtracks">
|
||||
<h4>Tracks</h4>
|
||||
<table class="table table-striped">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
|
||||
@ -28,7 +28,7 @@ var artiststext = '';
|
||||
var songname = '';
|
||||
|
||||
//array of cached playlists (not only user-playlists, also search, artist, album-playlists)
|
||||
var playlists = new Object;
|
||||
var playlists = {};
|
||||
var currentplaylist;
|
||||
var customPlaylists = new Array();
|
||||
var customTracklists = new Array();
|
||||
@ -48,9 +48,9 @@ SEARCH_TRACK_TABLE = '#trackresulttable';
|
||||
//does not work wel with multiple artists of course
|
||||
function getArtist(pl) {
|
||||
for (var i = 0; i < pl.length; i++) {
|
||||
for (var j = 0; j < pl[i]["artists"].length; j++) {
|
||||
if (pl[i]["artists"][j]["name"] != '') {
|
||||
return pl[i]["artists"][j]["name"];
|
||||
for (var j = 0; j < pl[i].artists.length; j++) {
|
||||
if (pl[i].artists[j].name != '') {
|
||||
return pl[i].artists[j].name;
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -59,8 +59,8 @@ function getArtist(pl) {
|
||||
//A hack to find the first album of a playlist. this is not yet returned by mopidy
|
||||
function getAlbum(pl) {
|
||||
for (var i = 0; i < pl.length; i++) {
|
||||
if (pl[i]["album"]["name"] != '') {
|
||||
return pl[i]["album"]["name"];
|
||||
if (pl[i].album.name != '') {
|
||||
return pl[i].album.name;
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -76,17 +76,14 @@ function playlisttotable(pl, table, uri) {
|
||||
*/
|
||||
var tmp = '';
|
||||
$(table).empty();
|
||||
|
||||
// console.log(pl.length);
|
||||
//console.log(pl);
|
||||
for (var i = 0; i < pl.length; i++) {
|
||||
// console.log(pl[i]);
|
||||
var child = '<tr class="resultrow"><td><a href="#" class="name" id="' + pl[i]["uri"] + '">' + pl[i]["name"] + "</a></td><td>";
|
||||
for (var j = 0; j < pl[i]["artists"].length; j++) {
|
||||
// console.log(pl[i]);
|
||||
var child = '<tr class="resultrow"><td><a href="#" class="name" id="' + pl[i].uri + '">' + pl[i].name + "</a></td><td>";
|
||||
for (var j = 0; j < pl[i].artists.length; j++) {
|
||||
//console.log(j);
|
||||
child += '<a href="#" class="artist" id="' + pl[i]["artists"][j]["uri"] + '">' + pl[i]["artists"][j]["name"] + "</a>";
|
||||
child += '<a href="#" class="artist" id="' + pl[i].artists[j].uri + '">' + pl[i].artists[j].name + "</a>";
|
||||
}
|
||||
child += '</td><td><a href="#" class="album" id="' + pl[i]["album"]["uri"] + '">' + pl[i]["album"]["name"] + '</a></td><td><a href="#" class="time" id="' + pl[i]["uri"] + '">' + timeFromSeconds(pl[i]["length"] / 1000) + '</a></td></tr>';
|
||||
child += '</td><td><a href="#" class="album" id="' + pl[i].album.uri + '">' + pl[i].album.name + '</a></td><td><a href="#" class="time" id="' + pl[i].uri + '">' + timeFromSeconds(pl[i].length / 1000) + '</a></td></tr>';
|
||||
tmp += child;
|
||||
};
|
||||
$(table).html(tmp);
|
||||
@ -103,6 +100,28 @@ function playlisttotable(pl, table, uri) {
|
||||
});
|
||||
}
|
||||
|
||||
function albumtrackstotable(pl, table, uri) {
|
||||
/* <tr>
|
||||
<td>Title</td>
|
||||
<td>Length</td>
|
||||
</tr>
|
||||
*/
|
||||
var tmp = '';
|
||||
$(table).empty();
|
||||
for (var i = 0; i < pl.length; i++) {
|
||||
// console.log(pl[i]);
|
||||
var child = '<tr class="resultrow"><td><a href="#" class="name" id="' + pl[i].uri + '">' + pl[i].name + "</a></td><td>";
|
||||
child += '</td><td><a href="#" class="time" id="' + pl[i].uri + '">' + timeFromSeconds(pl[i].length / 1000) + '</a></td></tr>';
|
||||
tmp += child;
|
||||
};
|
||||
$(table).html(tmp);
|
||||
$(table).attr('data', uri);
|
||||
//set click handlers
|
||||
$(table + ' .name').click(function() {
|
||||
return playtrack(this.id, uri)
|
||||
});
|
||||
}
|
||||
|
||||
function getPlaylistFromUri(uri) {
|
||||
if (playlists[uri]) {
|
||||
return playlists[uri];
|
||||
|
||||
@ -9,7 +9,7 @@ function showartist(nwuri) {
|
||||
$(ARTIST_TABLE).empty();
|
||||
//fill from cache
|
||||
var pl = getTracksFromUri(nwuri);
|
||||
console.log(pl);
|
||||
//console.log(pl);
|
||||
if (pl) {
|
||||
playlisttotable(pl, ARTIST_TABLE, nwuri)
|
||||
$('#h_artistname').html(getArtist(pl));
|
||||
@ -50,10 +50,10 @@ function resetSong() {
|
||||
setPlayState(false);
|
||||
setPosition(0);
|
||||
var data = new Object;
|
||||
data["name"] = '';
|
||||
data["artists"] = '';
|
||||
data["length"] = 0;
|
||||
data["uri"] = '';
|
||||
data.name = '';
|
||||
data.artists = '';
|
||||
data.length = 0;
|
||||
data.uri = '';
|
||||
setSongInfo(data);
|
||||
}
|
||||
|
||||
@ -90,26 +90,26 @@ function setSongInfo(data) {
|
||||
|
||||
artistshtml = '';
|
||||
artiststext = '';
|
||||
songname = data["name"];
|
||||
songname = data.name;
|
||||
|
||||
for (var j = 0; j < data["artists"].length; j++) {
|
||||
artistshtml += '<a href="#" onclick="return showartist(\'' + data["artists"][j].uri + '\');">' + data["artists"][j].name + '</a>';
|
||||
artiststext += data["artists"][j].name;
|
||||
if (j != data["artists"].length - 1) {
|
||||
for (var j = 0; j < data.artists.length; j++) {
|
||||
artistshtml += '<a href="#" onclick="return showartist(\'' + data.artists[j].uri + '\');">' + data.artists[j].name + '</a>';
|
||||
artiststext += data.artists[j].name;
|
||||
if (j != data.artists.length - 1) {
|
||||
artistshtml += ', ';
|
||||
artiststext += ', ';
|
||||
}
|
||||
}
|
||||
|
||||
$("#trackslider").attr("max", data["length"]);
|
||||
$("#songlength").html(timeFromSeconds(data["length"] / 1000));
|
||||
$("#trackslider").attr("max", data.length);
|
||||
$("#songlength").html(timeFromSeconds(data.length / 1000));
|
||||
|
||||
resizeSonginfo();
|
||||
|
||||
$('#currenttable tr .name').each(function() {
|
||||
//console.log(this.className);
|
||||
this.className = "name";
|
||||
if (this.id == data["uri"]) {
|
||||
if (this.id == data.uri) {
|
||||
this.className += ' currenttrack';
|
||||
// this.parentNode.parentNode.style.marginLeft="20px";
|
||||
}
|
||||
@ -321,13 +321,13 @@ function updateStatusOfAll() {
|
||||
|
||||
function initSocketevents() {
|
||||
mopidy.on("state:online", function() {
|
||||
$(window).hashchange();
|
||||
$("#offlinemodal").modal('hide');
|
||||
$("#loadingmodal").modal('show');
|
||||
getCurrentPlaylist();
|
||||
updateStatusOfAll();
|
||||
getPlaylists();
|
||||
$("#loadingmodal").modal('show');
|
||||
$(window).hashchange();
|
||||
});
|
||||
|
||||
mopidy.on("state:offline", function() {
|
||||
@ -415,7 +415,7 @@ $(document).ready(function() {
|
||||
// Connect to server
|
||||
mopidy = new Mopidy();
|
||||
// Log all events
|
||||
mopidy.on(function () { console.log(arguments); });
|
||||
//mopidy.on(function () { console.log(arguments); });
|
||||
//initialize events
|
||||
initSocketevents();
|
||||
|
||||
@ -440,7 +440,7 @@ $(document).ready(function() {
|
||||
//remove #
|
||||
var divid = hash[0].substr(1);
|
||||
var uri = hash[1];
|
||||
|
||||
// console.log(divid + ': ' + uri);
|
||||
switch(divid) {
|
||||
case 'current':
|
||||
break;
|
||||
@ -477,7 +477,6 @@ $(document).ready(function() {
|
||||
$('#' + divid + 'pane').show();
|
||||
return false;
|
||||
});
|
||||
|
||||
if (location.hash.length < 2) {
|
||||
switchContent("playlists");
|
||||
}
|
||||
@ -492,7 +491,7 @@ $(document).ready(function() {
|
||||
keyboard: false
|
||||
})
|
||||
|
||||
|
||||
|
||||
// $("#songinfo").resize(resizeSonginfo());
|
||||
initgui = false;
|
||||
//update gui every x seconds from mopdidy
|
||||
|
||||
@ -94,7 +94,7 @@ function processGetPlaylists(resultArr) {
|
||||
}
|
||||
var tmp = '';
|
||||
for (var i = 0; i < resultArr.length; i++) {
|
||||
var child = '<li><a href="#" onclick="return showTracklist(this.id);" id="' + resultArr[i]["uri"] + '"">' + resultArr[i]["name"] + '</a></li>';
|
||||
var child = '<li><a href="#" onclick="return showTracklist(this.id);" id="' + resultArr[i].uri + '"">' + resultArr[i].name + '</a></li>';
|
||||
tmp += child;
|
||||
};
|
||||
$('#playlistslist').empty();
|
||||
@ -108,7 +108,7 @@ function processGetPlaylists(resultArr) {
|
||||
*********************************************************/
|
||||
function processGetTracklist(resultArr) {
|
||||
//cache result
|
||||
var newplaylisturi = resultArr["uri"];
|
||||
var newplaylisturi = resultArr.uri;
|
||||
playlists[newplaylisturi] = resultArr;
|
||||
console.log(playlists[newplaylisturi]);
|
||||
playlisttotable(playlists[newplaylisturi].tracks, PLAYLIST_TABLE, newplaylisturi);
|
||||
@ -130,7 +130,6 @@ function processCurrentPlaylist(resultArr) {
|
||||
* process results of a search
|
||||
*********************************************************/
|
||||
function processSearchResults(resultArr) {
|
||||
console.log(resultArr);
|
||||
$(SEARCH_TRACK_TABLE).empty();
|
||||
$(SEARCH_ARTIST_TABLE).empty();
|
||||
$(SEARCH_ALBUM_TABLE).empty();
|
||||
@ -148,7 +147,7 @@ function processSearchResults(resultArr) {
|
||||
if (i > 4) {
|
||||
child += " hidden";
|
||||
}
|
||||
child += '"><td><a href="#" onclick="return showartist(this.id, uri)" id="' + artists[i]["uri"] + '">' + artists[i]["name"] + "</a></td></tr>";
|
||||
child += '"><td><a href="#" onclick="return showartist(this.id)" id="' + artists[i].uri + '">' + artists[i].name + "</a></td></tr>";
|
||||
}
|
||||
$(SEARCH_ARTIST_TABLE).html(child);
|
||||
|
||||
@ -160,10 +159,10 @@ function processSearchResults(resultArr) {
|
||||
if (i > 4) {
|
||||
child += " hidden";
|
||||
}
|
||||
child += '"><td><a href="#" onclick="return showalbum(this.id, uri)" id="' + albums[i]["uri"] + '">' + albums[i]["name"] + "</a></td><td>";
|
||||
child += '"><td><a href="#" onclick="return showalbum(this.id)" id="' + albums[i].uri + '">' + albums[i].name + "</a></td><td>";
|
||||
for (var j = 0; j < albums[i].artists.length; j++) {
|
||||
//console.log(j);
|
||||
child += '<a href="#" onclick="return showartist(this.id, uri)" id="' + albums[i].artists[j]["uri"] + '">' + albums[i].artists[j]["name"] + "</a>";
|
||||
child += '<a href="#" onclick="return showartist(this.id)" id="' + albums[i].artists[j].uri + '">' + albums[i].artists[j].name + "</a>";
|
||||
}
|
||||
child += '</td></tr>';
|
||||
}
|
||||
@ -178,9 +177,35 @@ function processSearchResults(resultArr) {
|
||||
* process results of an artist lookup
|
||||
*********************************************************/
|
||||
function processArtistResults(resultArr) {
|
||||
console.log(resultArr.uri);
|
||||
customTracklists[resultArr["uri"]] = resultArr;
|
||||
playlisttotable(resultArr, ARTIST_TABLE, resultArr["uri"]);
|
||||
customTracklists[resultArr.uri] = resultArr;
|
||||
$(ARTIST_TABLE).html('');
|
||||
|
||||
//break into albums and put in tables
|
||||
var newalbum = [];
|
||||
var nexturi = '';
|
||||
for (var i = 0; i < resultArr.length; i++) {
|
||||
//console.log(i);
|
||||
newalbum.push(resultArr[i]);
|
||||
nexturi = '';
|
||||
if (i < resultArr.length - 1) {
|
||||
nexturi = resultArr[i + 1].album.uri;
|
||||
}
|
||||
if (resultArr[i].album.uri != nexturi) {
|
||||
var tableid = 'art' + i;
|
||||
var html = '<h4>' + resultArr[i].album.name + '</h4>';
|
||||
/* for (var j = 0; j < resultArr[i].album.artists.length; j++) {
|
||||
//console.log(j);
|
||||
html += '<a href="#" class="artist" id="' + resultArr[i].album.artists[j].uri + '">' + resultArr[i].album.artists[j].name + "</a>";
|
||||
}
|
||||
*/
|
||||
html += '<table class="table table-striped"><tbody id="' + tableid + '"></tbody></table>';
|
||||
|
||||
$(ARTIST_TABLE).append(html);
|
||||
albumtrackstotable(newalbum, "#" + tableid, resultArr[i].album.uri);
|
||||
customTracklists[resultArr[i].album.uri] = newalbum;
|
||||
newalbum = [];
|
||||
}
|
||||
}
|
||||
$('#h_artistname').html(getArtist(resultArr));
|
||||
$('#artistsloader').hide();
|
||||
}
|
||||
@ -189,9 +214,9 @@ function processArtistResults(resultArr) {
|
||||
* process results of an album lookup
|
||||
*********************************************************/
|
||||
function processAlbumResults(resultArr) {
|
||||
console.log(resultArr.uri);
|
||||
customTracklists[resultArr["uri"]] = resultArr;
|
||||
playlisttotable(resultArr, ALBUM_TABLE, resultArr["uri"]);
|
||||
console.log(resultArr);
|
||||
customTracklists[resultArr.uri] = resultArr;
|
||||
playlisttotable(resultArr, ALBUM_TABLE, resultArr.uri);
|
||||
$('#h_albumname').html(getAlbum(resultArr));
|
||||
$('#h_albumartist').html(getArtist(resultArr));
|
||||
$('#albumsloader').hide();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user