mirrors/ympd
1
0
Fork 0
mirror of https://github.com/SuperBFG7/ympd synced 2024-11-17 19:14:49 +00:00
Code Issues Releases Wiki Activity

Optimize javascript

Browse Source
This commit is contained in:
jcorporation 2018-06-28 00:19:09 +01:00
parent 0555f26abf
commit fed98f8423
1 changed files with 147 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

263
htdocs/js/mpd.js
View File

@ -53,24 +53,35 @@ app.apps = { "Playback": { "state": "0/-/" },
app.current = { "app": "Playback", "tab": undefined, "view": undefined, "page": 0, "filter": "", "search": "" }; app.current = { "app": "Playback", "tab": undefined, "view": undefined, "page": 0, "filter": "", "search": "" };
app.last = { "app": undefined, "tab": undefined, "view": undefined }; app.last = { "app": undefined, "tab": undefined, "view": undefined };
var domCache = {};
domCache.navbarBottomBtns = document.getElementById('navbar-bottom').getElementsByTagName('div');
domCache.navbarBottomBtnsLen = domCache.navbarBottomBtns.length;
domCache.panelHeadingBrowse = document.getElementById('panel-heading-browse').getElementsByTagName('a');
domCache.panelHeadingBrowseLen = domCache.panelHeadingBrowse.length;
domCache.counter = document.getElementById('counter');
app.prepare=function() { app.prepare=function() {
if (app.current.app != app.last.app || app.current.tab != app.last.tab || app.current.view != app.last.view) { if (app.current.app != app.last.app || app.current.tab != app.last.tab || app.current.view != app.last.view) {
//Hide all cards + nav //Hide all cards + nav
$('#navbar-bottom > div').removeClass('active'); for ( var i = 0; i < domCache.navbarBottomBtnsLen; i ++) {
$('#cardPlayback').addClass('hide'); domCache.navbarBottomBtns[i].classList.remove('active');
$('#cardQueue').addClass('hide'); }
$('#cardBrowse').addClass('hide'); document.getElementById('cardPlayback').classList.add('hide');
$('#cardSearch').addClass('hide'); document.getElementById('cardQueue').classList.add('hide');
$('#panel-heading-browse > ul > li > a').removeClass('active'); document.getElementById('cardBrowse').classList.add('hide');
$('#cardBrowsePlaylists').addClass('hide'); document.getElementById('cardSearch').classList.add('hide');
$('#cardBrowseDatabase').addClass('hide'); for ( var i = 0; i < domCache.panelHeadingBrowseLen; i ++) {
$('#cardBrowseFilesystem').addClass('hide'); domCache.panelHeadingBrowse[i].classList.remove('active');
}
document.getElementById('cardBrowsePlaylists').classList.add('hide');
document.getElementById('cardBrowseDatabase').classList.add('hide');
document.getElementById('cardBrowseFilesystem').classList.add('hide');
//show active card + nav //show active card + nav
$('#card'+app.current.app).removeClass('hide'); document.getElementById('card' + app.current.app).classList.remove('hide');
$('#nav'+app.current.app).addClass('active'); document.getElementById('nav' + app.current.app).classList.add('active');
if (app.current.tab != undefined) { if (app.current.tab != undefined) {
$('#card'+app.current.app+app.current.tab).removeClass('hide'); document.getElementById('card' + app.current.app + app.current.tab).classList.remove('hide');
$('#card'+app.current.app+'Nav'+app.current.tab).addClass('active'); document.getElementById('card' + app.current.app + 'Nav' + app.current.tab).classList.add('active');
} }
} }
} }
@ -159,24 +170,26 @@ app.route=function() {
else else
document.getElementById('BrowseFilesystemAddAllSongs').setAttribute('disabled', 'disabled') document.getElementById('BrowseFilesystemAddAllSongs').setAttribute('disabled', 'disabled')
// Create breadcrumb // Create breadcrumb
var breadcrumbs=['<li class="breadcrumb-item"><a uri="">root</a></li>']; var breadcrumbs=['<li class="breadcrumb-item"><a data-uri="">root</a></li>'];
var path_array = app.current.search.split('/'); var pathArray = app.current.search.split('/');
var full_path = ''; var pathArrayLen = pathArray.length;
for (var index in path_array) { var fullPath = '';
if (path_array.length - 1 == index) { for (var i = 0; i < pathArrayLen; i ++) {
breadcrumbs.push('<li class="breadcrumb-item active">' + path_array[index] + '</li>'); if (pathArrayLen -1 == i) {
breadcrumbs.push('<li class="breadcrumb-item active">' + pathArray[i] + '</li>');
break; break;
} }
full_path = full_path + path_array[index]; fullPath += pathArray[i];
breadcrumbs.push('<li class="breadcrumb-item"><a uri="' + full_path + '">' + path_array[index] + '</a></li>'); breadcrumbs.push('<li class="breadcrumb-item"><a data-uri="' + fullPath + '">' + pathArray[i] + '</a></li>');
full_path += '/'; fullPath += '/';
} }
var elBrowseBreadcrumb=document.getElementById('BrowseBreadcrumb'); var elBrowseBreadcrumb=document.getElementById('BrowseBreadcrumb');
elBrowseBreadcrumb.innerHTML = breadcrumbs.join(''); elBrowseBreadcrumb.innerHTML = breadcrumbs.join('');
var breadcrumbItems = elBrowseBreadcrumb.getElementsByTagName('a'); var breadcrumbItems = elBrowseBreadcrumb.getElementsByTagName('a');
for (var i = 0; i < breadcrumbItems.length; i ++) { var breadcrumbItemsLen = breadcrumbItems.length;
breadcrumbItems[index].addEventListener('click',function() { for (var i = 0; i < breadcrumbItemsLen; i ++) {
app.goto('Browse', 'Filesystem', undefined, '0/'+app.current.filter+'/'+$(this).attr('uri')); breadcrumbItems[i].addEventListener('click', function() {
app.goto('Browse', 'Filesystem', undefined, '0/' + app.current.filter + '/' + this.getAttribute('data-uri'));
}, false); }, false);
} }
doSetFilterLetter('#BrowseFilesystemFilter'); doSetFilterLetter('#BrowseFilesystemFilter');
@ -201,7 +214,8 @@ app.route=function() {
} }
var btns = document.getElementById('searchtags2').getElementsByTagName('button'); var btns = document.getElementById('searchtags2').getElementsByTagName('button');
for (var i = 0; i < btns.length; i ++) { var btnsLen = btns.length;
for (var i = 0; i < btnsLen; i ++) {
btns[i].classList.remove('active'); btns[i].classList.remove('active');
if (btns[i].innerText == app.current.filter) { if (btns[i].innerText == app.current.filter) {
btns[i].classList.add('active'); btns[i].classList.add('active');
@ -213,9 +227,9 @@ app.route=function() {
app.goto("Playback"); app.goto("Playback");
} }
app.last.app=app.current.app; app.last.app = app.current.app;
app.last.tab=app.current.tab; app.last.tab = app.current.tab;
app.last.view=app.current.view; app.last.view = app.current.view;
}; };
$(document).ready(function(){ $(document).ready(function(){
@ -488,7 +502,7 @@ function parseSettings(obj) {
} }
function getSettings() { function getSettings() {
sendAPI({"cmd":"MPD_API_GET_SETTINGS"},parseSettings); sendAPI({"cmd":"MPD_API_GET_SETTINGS"}, parseSettings);
} }
function parseOutputnames(obj) { function parseOutputnames(obj) {
@ -527,16 +541,28 @@ function parseState(obj) {
var counterText = elapsed_minutes + ":" + var counterText = elapsed_minutes + ":" +
(elapsed_seconds < 10 ? '0' : '') + elapsed_seconds + " / " + (elapsed_seconds < 10 ? '0' : '') + elapsed_seconds + " / " +
total_minutes + ":" + (total_seconds < 10 ? '0' : '') + total_seconds; total_minutes + ":" + (total_seconds < 10 ? '0' : '') + total_seconds;
document.getElementById('counter').innerText = counterText; domCache.counter.innerText = counterText;
//Set playing track in queue view
if (last_state) { if (last_state) {
$('#QueueList > tbody > tr[data-trackid=' + last_state.data.currentsongid + '] > td').eq(4).text(last_state.data.totalTime); var tr = document.getElementById('queueTrackId' + last_state.data.currentsongid);
$('#QueueList > tbody > tr[data-trackid=' + last_state.data.currentsongid + '] > td').eq(0).removeClass('material-icons').text(last_state.data.songpos); if (tr) {
var trtds = tr.getElementsByTagName('td');
trtds[4].innerText = tr.getAttribute('data-duration');
trtds[0].classList.remove('material-icons');
trtds[0].innerText = tr.getAttribute('data-songpos');
tr.classList.remove('font-weight-bold');
}
}
var tr = document.getElementById('queueTrackId' + obj.data.currentsongid);
if (tr) {
var trtds = tr.getElementsByTagName('td');
trtds[4].innerText = counterText;
trtds[0].classList.add('material-icons');
trtds[0].innerText = 'play_arrow';
tr.classList.add('font-weight-bold');
} }
$('#QueueList > tbody > tr').removeClass('active').removeClass("font-weight-bold");
$('#QueueList > tbody > tr[data-trackid='+obj.data.currentsongid+'] > td').eq(4).text(counterText);
$('#QueueList > tbody > tr[data-trackid='+obj.data.currentsongid+'] > td').eq(0).addClass('material-icons').text('play_arrow');
$('#QueueList > tbody > tr[data-trackid='+obj.data.currentsongid+']').addClass('active').addClass("font-weight-bold");
//Get current song on queue change for http streams //Get current song on queue change for http streams
if (last_state == undefined || obj.data.queue_version != last_state.data.queue_version) if (last_state == undefined || obj.data.queue_version != last_state.data.queue_version)
@ -556,9 +582,9 @@ function parseState(obj) {
function getQueue() { function getQueue() {
if (app.current.search.length >= 2) if (app.current.search.length >= 2)
sendAPI({"cmd":"MPD_API_SEARCH_QUEUE", "data": {"mpdtag":app.current.filter, "offset":app.current.page,"searchstr": app.current.search}},parseQueue); sendAPI({"cmd":"MPD_API_SEARCH_QUEUE", "data": {"mpdtag":app.current.filter, "offset":app.current.page,"searchstr": app.current.search}}, parseQueue);
else else
sendAPI({"cmd":"MPD_API_GET_QUEUE", "data": {"offset": app.current.page}},parseQueue); sendAPI({"cmd":"MPD_API_GET_QUEUE", "data": {"offset": app.current.page}}, parseQueue);
} }
function parseQueue(obj) { function parseQueue(obj) {
@ -572,38 +598,41 @@ function parseQueue(obj) {
else else
document.getElementById('panel-heading-queue').innerText = ''; document.getElementById('panel-heading-queue').innerText = '';
var nrItems=0; var nrItems = obj.data.length;
var tbody = document.getElementById(app.current.app + 'List').getElementsByTagName('tbody')[0]; var tbody = document.getElementById(app.current.app + 'List').getElementsByTagName('tbody')[0];
var tr = tbody.getElementsByTagName('tr'); var tr = tbody.getElementsByTagName('tr');
for (var item in obj.data) { for (var i = 0; i < nrItems; i ++) {
nrItems++; if (tr[i])
if (tr[nrItems-1]) if (tr[i].getAttribute('data-trackid') == obj.data[i].id)
if (tr[nrItems-1].getAttribute('data-trackid') == obj.data[item].id)
continue; continue;
var minutes = Math.floor(obj.data[i].duration / 60);
var seconds = obj.data[i].duration - minutes * 60;
var duration = minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
var row = document.createElement('tr'); var row = document.createElement('tr');
row.setAttribute('data-trackid', obj.data[item].id);
var minutes = Math.floor(obj.data[item].duration / 60); row.setAttribute('data-trackid', obj.data[i].id);
var seconds = obj.data[item].duration - minutes * 60; row.setAttribute('id','queueTrackId' + obj.data[i].id);
row.setAttribute('data-songpos', (obj.data[i].pos + 1));
row.innerHTML = '<td>' + (obj.data[item].pos + 1) + '</td>' + row.setAttribute('data-duration', duration);
'<td>' + obj.data[item].title + '</td>' + row.innerHTML = '<td>' + (obj.data[i].pos + 1) + '</td>' +
'<td>' + obj.data[item].artist + '</td>' + '<td>' + obj.data[i].title + '</td>' +
'<td>' + obj.data[item].album + '</td>' + '<td>' + obj.data[i].artist + '</td>' +
'<td>' + minutes + ':' + (seconds < 10 ? '0' : '') + seconds + '<td>' + obj.data[i].album + '</td>' +
'</td><td><a href="#" tabindex="0" data-trigger="focus" class="material-icons">playlist_add</a></td></tr>'; '<td>' + duration + '</td>' +
if (nrItems <= tr.length) '<td><a href="#" tabindex="0" data-trigger="focus" class="material-icons">playlist_add</a></td></tr>';
tr[nrItems-1].replaceWith(row); if (i < tr.length)
tr[i].replaceWith(row);
else else
tbody.append(row); tbody.append(row);
tr[nrItems-1].getElementsByTagName('a')[0].addEventListener('click', function(event) { tr[i].getElementsByTagName('a')[0].addEventListener('click', function(event) {
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();
showMenu(this); showMenu(this);
},false); },false);
tr[nrItems-1].addEventListener('click', function() { tr[i].addEventListener('click', function() {
sendAPI({"cmd":"MPD_API_PLAY_TRACK","data": {"track":this.getAttribute('data-trackid')}}); sendAPI({"cmd":"MPD_API_PLAY_TRACK","data": {"track":this.getAttribute('data-trackid')}});
},false); },false);
} }
@ -638,54 +667,53 @@ function parseSearch(obj) {
function parseFilesystem(obj) { function parseFilesystem(obj) {
if (app.current.app !== 'Browse' && app.current.tab !== 'Filesystem' && app.current.app !== 'Search') if (app.current.app !== 'Browse' && app.current.tab !== 'Filesystem' && app.current.app !== 'Search')
return; return;
var nrItems = 0; var nrItems = obj.data.length;;
var tbody = document.getElementById(app.current.app + (app.current.tab==undefined ? '' : app.current.tab) + 'List').getElementsByTagName('tbody')[0]; var tbody = document.getElementById(app.current.app + (app.current.tab==undefined ? '' : app.current.tab) + 'List').getElementsByTagName('tbody')[0];
var tr = tbody.getElementsByTagName('tr'); var tr = tbody.getElementsByTagName('tr');
for (var item in obj.data) { for (var i = 0; i < nrItems; i ++) {
nrItems ++; var uri = encodeURI(obj.data[i].uri);
var uri = encodeURI(obj.data[item].uri); if (tr[i])
if (tr[nrItems-1]) if (tr[i].getAttribute('data-uri') == uri)
if (tr[nrItems-1].getAttribute('data-uri') == uri)
continue; continue;
var row = document.createElement('tr'); var row = document.createElement('tr');
row.setAttribute('data-type', obj.data[item].type); row.setAttribute('data-type', obj.data[i].type);
row.setAttribute('data-uri', uri); row.setAttribute('data-uri', uri);
row.setAttribute('data-name', obj.data[item].name); row.setAttribute('data-name', obj.data[i].name);
switch(obj.data[item].type) { switch(obj.data[i].type) {
case 'dir': case 'dir':
row.innerHTML = '<td><span class="material-icons">folder_open</span></td>' + row.innerHTML = '<td><span class="material-icons">folder_open</span></td>' +
'<td colspan="4">' + obj.data[item].name + '</td>' + '<td colspan="4">' + obj.data[i].name + '</td>' +
'<td><a href="#" tabindex="0" data-trigger="focus" class="material-icons">playlist_add</a></td>'; '<td><a href="#" tabindex="0" data-trigger="focus" class="material-icons">playlist_add</a></td>';
break; break;
case 'song': case 'song':
var minutes = Math.floor(obj.data[item].duration / 60); var minutes = Math.floor(obj.data[i].duration / 60);
var seconds = obj.data[item].duration - minutes * 60; var seconds = obj.data[i].duration - minutes * 60;
row.innerHTML = '<td><span class="material-icons">music_note</span></td>' + row.innerHTML = '<td><span class="material-icons">music_note</span></td>' +
'<td>' + obj.data[item].title + '</td>' + '<td>' + obj.data[i].title + '</td>' +
'<td>' + obj.data[item].artist + '</td>' + '<td>' + obj.data[i].artist + '</td>' +
'<td>' + obj.data[item].album + '</td>' + '<td>' + obj.data[i].album + '</td>' +
'<td>' + minutes + ':' + (seconds < 10 ? '0' : '') + seconds + '<td>' + minutes + ':' + (seconds < 10 ? '0' : '') + seconds +
'</td><td><a href="#" tabindex="0" data-trigger="focus" class="material-icons">playlist_add</a></td>'; '</td><td><a href="#" tabindex="0" data-trigger="focus" class="material-icons">playlist_add</a></td>';
break; break;
case 'plist': case 'plist':
row.innerHTML = '<td><span class="material-icons">list</span></td>' + row.innerHTML = '<td><span class="material-icons">list</span></td>' +
'<td colspan="4">' + obj.data[item].name + '</td>' + '<td colspan="4">' + obj.data[i].name + '</td>' +
'<td><a href="#" tabindex="0" data-trigger="focus" class="material-icons">playlist_add</a></td>'; '<td><a href="#" tabindex="0" data-trigger="focus" class="material-icons">playlist_add</a></td>';
break; break;
} }
if (nrItems <= tr.length) if (i < tr.length)
tr[nrItems-1].replaceWith(row); tr[i].replaceWith(row);
else else
tbody.append(row); tbody.append(row);
tr[nrItems-1].getElementsByTagName('a')[0].addEventListener('click', function(event) { tr[i].getElementsByTagName('a')[0].addEventListener('click', function(event) {
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();
showMenu(this); showMenu(this);
},false); },false);
tr[nrItems-1].addEventListener('click', function() { tr[i].addEventListener('click', function() {
switch(this.getAttribute('data-type')) { switch(this.getAttribute('data-type')) {
case 'dir': case 'dir':
app.goto('Browse', 'Filesystem', undefined, '0/' + app.current.filter +'/' + decodeURI(this.getAttribute("data-uri"))); app.goto('Browse', 'Filesystem', undefined, '0/' + app.current.filter +'/' + decodeURI(this.getAttribute("data-uri")));
@ -715,36 +743,36 @@ function parseFilesystem(obj) {
function parsePlaylists(obj) { function parsePlaylists(obj) {
if (app.current.app !== 'Browse' && app.current.tab !== 'Playlists') if (app.current.app !== 'Browse' && app.current.tab !== 'Playlists')
return; return;
var nrItems = 0;
var nrItems = obj.data.length;
var tbody = document.getElementById(app.current.app+app.current.tab+'List').getElementsByTagName('tbody')[0]; var tbody = document.getElementById(app.current.app+app.current.tab+'List').getElementsByTagName('tbody')[0];
var tr = tbody.getElementsByTagName('tr'); var tr = tbody.getElementsByTagName('tr');
for (var item in obj.data) { for (var i = 0; i < nrItems; i ++) {
nrItems++; var uri = encodeURI(obj.data[i].uri);
var uri = encodeURI(obj.data[item].uri); if (tr[i])
if (tr[nrItems-1]) if (tr[i].getAttribute('data-uri') == uri)
if (tr[nrItems-1].getAttribute('data-uri') == uri)
continue; continue;
var d = new Date(obj.data[item].last_modified * 1000); var d = new Date(obj.data[i].last_modified * 1000);
var row = document.createElement('tr'); var row = document.createElement('tr');
row.setAttribute('data-uri', uri); row.setAttribute('data-uri', uri);
row.setAttribute('data-type', 'plist'); row.setAttribute('data-type', 'plist');
row.setAttribute('data-name', obj.data[item].name); row.setAttribute('data-name', obj.data[i].name);
row.innerHTML = '<td><span class="material-icons">list</span></td>' + row.innerHTML = '<td><span class="material-icons">list</span></td>' +
'<td>' + obj.data[item].name + '</td>' + '<td>' + obj.data[i].name + '</td>' +
'<td>'+ d.toUTCString() + '</td>' + '<td>'+ d.toUTCString() + '</td>' +
'<td><a href="#" tabindex="0" data-trigger="focus" class="material-icons">playlist_add</a></td>'; '<td><a href="#" tabindex="0" data-trigger="focus" class="material-icons">playlist_add</a></td>';
if (nrItems <= tr.length) if (i < tr.length)
tr[nrItems-1].replaceWith(row); tr[i].replaceWith(row);
else else
tbody.append(row); tbody.append(row);
tr[nrItems-1].getElementsByTagName('a')[0].addEventListener('click', function(event) { tr[i].getElementsByTagName('a')[0].addEventListener('click', function(event) {
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();
showMenu(this); showMenu(this);
},false); },false);
tr[nrItems-1].addEventListener('click', function() { tr[i].addEventListener('click', function() {
appendQueue('plist', decodeURI(this.getAttribute("data-uri")), this.getAttribute("data-name")); appendQueue('plist', decodeURI(this.getAttribute("data-uri")), this.getAttribute("data-name"));
},false); },false);
} }
@ -768,34 +796,33 @@ function parseListDBtags(obj) {
$('#BrowseDatabaseAlbumCards').addClass('hide'); $('#BrowseDatabaseAlbumCards').addClass('hide');
$('#BrowseDatabaseArtistList').removeClass('hide'); $('#BrowseDatabaseArtistList').removeClass('hide');
$('#btnBrowseDatabaseArtist').addClass('hide'); $('#btnBrowseDatabaseArtist').addClass('hide');
var nrItems = 0; var nrItems = obj.data.length;
var tbody = document.getElementById(app.current.app+app.current.tab+app.current.view+'List').getElementsByTagName('tbody')[0]; var tbody = document.getElementById(app.current.app+app.current.tab+app.current.view+'List').getElementsByTagName('tbody')[0];
var tr = tbody.getElementsByTagName('tr'); var tr = tbody.getElementsByTagName('tr');
for (var item in obj.data) { for (var i = 0; i < nrItems; i ++) {
nrItems++; var uri = encodeURI(obj.data[i].value);
var uri = encodeURI(obj.data[item].value); if (tr[i])
if (tr[nrItems-1]) if (tr[i].getAttribute('data-uri') == uri)
if (tr[nrItems-1].getAttribute('data-uri') == uri)
continue; continue;
var row = document.createElement('tr'); var row = document.createElement('tr');
row.setAttribute('data-uri', uri); row.setAttribute('data-uri', uri);
row.innerHTML='<td><span class="material-icons">album</span></td>' + row.innerHTML='<td><span class="material-icons">album</span></td>' +
'<td>' + obj.data[item].value + '</td>' + '<td>' + obj.data[i].value + '</td>' +
'<!--<td><a href="#" tabindex="0" data-trigger="focus" class="material-icons">playlist_add</a></td>-->' + // '<td><a href="#" tabindex="0" data-trigger="focus" class="material-icons">playlist_add</a></td>' +
'</tr>'; '</tr>';
if (nrItems <= tr.length) if (i < tr.length)
tr[nrItems-1].replaceWith(row); tr[i].replaceWith(row);
else else
tbody.append(row); tbody.append(row);
/* /*
tr[nrItems-1].getElementsByTagName('a')[0].addEventListener('click', function(event) { tr[i].getElementsByTagName('a')[0].addEventListener('click', function(event) {
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();
showMenu(this); showMenu(this);
},false); },false);
*/ */
tr[nrItems-1].addEventListener('click', function() { tr[i].addEventListener('click', function() {
app.goto('Browse','Database','Album','0/-/'+this.getAttribute('data-uri')); app.goto('Browse','Database','Album','0/-/'+this.getAttribute('data-uri'));
},false); },false);
} }
@ -814,14 +841,13 @@ function parseListDBtags(obj) {
$('#BrowseDatabaseArtistList').addClass('hide'); $('#BrowseDatabaseArtistList').addClass('hide');
$('#BrowseDatabaseAlbumCards').removeClass('hide'); $('#BrowseDatabaseAlbumCards').removeClass('hide');
$('#btnBrowseDatabaseArtist').removeClass('hide'); $('#btnBrowseDatabaseArtist').removeClass('hide');
var nrItems=0; var nrItems = obj.data.length;
var cardContainer=document.getElementById('BrowseDatabaseAlbumCards') var cardContainer = document.getElementById('BrowseDatabaseAlbumCards')
var cards=cardContainer.querySelectorAll('.col-md'); var cards = cardContainer.querySelectorAll('.col-md');
for (var item in obj.data) { for (var i = 0; i < nrItems; i++) {
nrItems++; var id=genId(obj.data[i].value);
var id=genId(obj.data[item].value); if (cards[i])
if (cards[nrItems-1]) if (cards[i].getAttribute('id') == id)
if (cards[nrItems-1].getAttribute('id') == id)
continue; continue;
var card=document.createElement('div'); var card=document.createElement('div');
card.classList.add('col-md'); card.classList.add('col-md');
@ -831,17 +857,17 @@ function parseListDBtags(obj) {
' <img class="card-img-top" src="" tabindex="0" data-trigger="focus">' + ' <img class="card-img-top" src="" tabindex="0" data-trigger="focus">' +
' <div class="card-body">' + ' <div class="card-body">' +
' <h5 class="card-title">' + obj.searchstr + '</h5>' + ' <h5 class="card-title">' + obj.searchstr + '</h5>' +
' <h4 class="card-title">' + obj.data[item].value + '</h4>' + ' <h4 class="card-title">' + obj.data[i].value + '</h4>' +
' <table class="table table-sm table-hover" id="tbl' + id + '"><tbody></tbody></table'+ ' <table class="table table-sm table-hover" id="tbl' + id + '"><tbody></tbody></table'+
' </div>'+ ' </div>'+
'</div>'; '</div>';
if (nrItems <= cards.length) if (i < cards.length)
cards[nrItems-1].replaceWith(card); cards[i].replaceWith(card);
else else
cardContainer.append(card); cardContainer.append(card);
sendAPI({"cmd":"MPD_API_GET_ARTISTALBUMTITLES", "data": { "albumartist": obj.searchstr, "album": obj.data[item].value}}, parseListTitles); sendAPI({"cmd":"MPD_API_GET_ARTISTALBUMTITLES", "data": { "albumartist": obj.searchstr, "album": obj.data[i].value}}, parseListTitles);
} }
var cards_length=cards.length - 1; var cards_length=cards.length - 1;
for (var i = cards_length; i >= nrItems; i --) { for (var i = cards_length; i >= nrItems; i --) {
@ -865,9 +891,10 @@ function parseListTitles(obj) {
img.setAttribute('data-type', 'album'); img.setAttribute('data-type', 'album');
var titleList=new Array(); var titleList=new Array();
for (var item in obj.data) { var nrItems = obj.data.length;
titleList.push('<tr data-type="song" data-name="' + obj.data[item].title + '" data-uri="' + encodeURI(obj.data[item].uri) + '">' + for (var i = 0; i < nrItems; i ++) {
'<td>' + obj.data[item].track + '</td><td>' + obj.data[item].title + '</td>' + titleList.push('<tr data-type="song" data-name="' + obj.data[i].title + '" data-uri="' + encodeURI(obj.data[i].uri) + '">' +
'<td>' + obj.data[i].track + '</td><td>' + obj.data[i].title + '</td>' +
'<td><a href="#" tabindex="0" data-trigger="focus" class="material-icons">playlist_add</a></td>' + '<td><a href="#" tabindex="0" data-trigger="focus" class="material-icons">playlist_add</a></td>' +
'</tr>'); '</tr>');
} }