mirrors/ympd
1
0
Fork 0
mirror of https://github.com/SuperBFG7/ympd synced 2025-10-31 05:43:01 +00:00
Code Issues Releases Wiki Activity

Browse database view completed

Browse Source
This commit is contained in:
jcorporation
2018-06-03 21:35:16 +02:00
parent 7962a8ff54
commit a10be9b161
4 changed files with 65 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
htdocs/css/mpd.css
View File

@@ -184,3 +184,15 @@ main {
min-width:28px;
}
.col-md {
min-width:250px;
max-width:350px;
}
.card-img-top {
min-height:250px;
background-image:url('/assets/coverimage-notavailable.png');
background-repeat:no-repeat;
background-color:#d45500;
cursor:pointer;
}

13
htdocs/index.html
View File

@@ -30,7 +30,7 @@
</form>
<div class="dropdown-divider"></div>
<a id="nav-addstream" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#addstream">Add Stream</a>
<a id="nav-updatedb" class="dropdown-item text-light bg-dark" href="#" onclick="updateDB();">Update Database</a>
<a id="nav-updatedb" class="dropdown-item text-light bg-dark" href="#" onclick="updateDB(event);">Update Database</a>
<a id="nav-localplayer" class="dropdown-item text-light bg-dark" href="#" data-toggle="dropdown" onclick="window.open('/player.html','LocalPlayer');">Local Player</a>
<a id="nav-settings" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#settings">Settings</a>
<a id="nav-about" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#about">About</a>
@@ -266,16 +266,9 @@
<div class="card-body hide" id="cardBrowseDatabase">
<div class="btn-toolbar collapse show" id="browseDatabaseButtons" role="toolbar">
<!--
<div class="btn-group mr-2 pull-right">
<button id="browseDatabaseAddAllSongs" class="btn btn-secondary">Add all</button>
</div>
<div class="btn-group mr-2">
<button id="browseDatabaseFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button>
<div class="dropdown-menu bg-dark px-2" id="browseDatabaseFilterLetters">
</div>
<button id="btnBrowseDatabaseArtist" onclick="app.setLocation('#/browse/database/0/');" type="button" class="btn btn-secondary hide">&laquo; Artists</button>
</div>
-->
<div id="browseDatabasePaginationTop" class="btn-group mr-2">
<button onclick="gotoPage('prev',this,event)" id="browseDatabasePaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append">
@@ -304,7 +297,7 @@
</table>
</div>
<div id="browseDatabaseCards" class="card-columns"></div>
<div id="browseDatabaseCards" class="row"></div>
<div class="btn-toolbar" id="browseDatabaseButtonsBottom" role="toolbar">
<div class="btn-group mr-2">

42
htdocs/js/mpd.js
View File

@@ -442,6 +442,7 @@ function webSocketConnect() {
if (obj.tagtype == 'AlbumArtist') {
$('#browseDatabaseCards').addClass('hide');
$('#browseDatabaseList').removeClass('hide');
$('#btnBrowseDatabaseArtist').addClass('hide');
var nrItems=0;
var tr=document.getElementById(current_app+'List').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for (var item in obj.data) {
@@ -474,16 +475,17 @@ function webSocketConnect() {
$('#browseDatabaseList').addClass('hide');
$('#browseDatabaseCards').empty();
$('#browseDatabaseCards').removeClass('hide');
$('#btnBrowseDatabaseArtist').removeClass('hide');
var nrItems=0;
for (var item in obj.data) {
var card='<div class="card" style="width: 18rem;" uri="'+encodeURI(obj.data[item].value)+'">'+
' <img class="card-img-top" src="" alt="Coverimage">'+
var card='<div class="col-md"><div class="card mb-4" id="'+genId(obj.data[item].value)+'">'+
' <img class="card-img-top" src="" alt="">'+
' <div class="card-body">'+
' <h5 class="card-title">'+obj.searchstr+'</h5>'+
' <h4 class="card-title">'+obj.data[item].value+'</h4>'+
' <ul class="card-text"></ul>'+
' <table class="table table-sm table-hover" id="tbl'+genId(obj.data[item].value)+'"><tbody></tbody></table'+
' </div>'+
'</div>';
'</div></div>';
$('#browseDatabaseCards').append(card);
socket.send('MPD_API_GET_ARTISTALBUMTITLES,' + obj.searchstr + ','+obj.data[item].value);
}
@@ -491,13 +493,30 @@ function webSocketConnect() {
}
break;
case 'listTitles':
var album=$('div[uri="'+encodeURI(obj.album)+'"] > div > ul');
$('div[uri="'+encodeURI(obj.album)+'"] > img').attr('src','/library/'+obj.data[0].uri.replace(/\/[^\/]+$/,'\/'+coverImageFile));
var album=$('#'+genId(obj.album)+' > div > table > tbody');
$('#'+genId(obj.album)+' > img').attr('src','/library/'+obj.data[0].uri.replace(/\/[^\/]+$/,'\/')+coverImageFile);
$('#'+genId(obj.album)+' > img').attr('uri',obj.data[0].uri.replace(/\/[^\/]+$/,''));
$('#'+genId(obj.album)+' > img').attr('data-album',encodeURI(obj.album));
var titleList='';
for (var item in obj.data) {
titleList+='<li>'+obj.data[item].title+'</li>';
titleList+='<tr uri="' + encodeURI(obj.data[item].uri) + '" class="song">'+
'<td>'+obj.data[item].track+'</td><td>'+obj.data[item].title+'</td></tr>';
}
album.append(titleList);
$('#'+genId(obj.album)+' > img').on({
click: function() {
socket.send('MPD_API_ADD_TRACK,' + decodeURI($(this).attr('uri')));
showNotification('"'+decodeURI($(this).attr('data-album'))+'" added','','','success');
}
});
$('#tbl'+genId(obj.album)+' > tbody > tr').on({
click: function() {
socket.send('MPD_API_ADD_TRACK,' + decodeURI($(this).attr('uri')));
showNotification('"' + $('td:nth-last-child(1)', this).text() + '" added','','','success');
}
});
break;
case 'search':
$('#panel-heading-search').text(obj.totalEntities + ' Songs found');
@@ -597,7 +616,7 @@ function webSocketConnect() {
break;
case 'song':
socket.send("MPD_API_ADD_TRACK," + decodeURI($(this).attr("uri")));
showNotification('"' + $('td:nth-last-child(3)', this).text() + '" added','','','success');
showNotification('"' + $('td:nth-last-child(5)', this).text() + '" added','','','success');
break;
case 'plist':
socket.send("MPD_API_ADD_PLAYLIST," + decodeURI($(this).attr("uri")));
@@ -886,9 +905,10 @@ function updatePlayIcon(obj) {
}
}
function updateDB() {
function updateDB(event) {
socket.send('MPD_API_UPDATE_DB');
showNotification('Updating MPD Database...','','','success');
event.preventDefault();
}
function clickPlay() {
@@ -1292,4 +1312,8 @@ function beautifyDuration(x) {
return (days > 0 ? days + '\u2009d ' : '') +
(hours > 0 ? hours + '\u2009h ' + (minutes < 10 ? '0' : '') : '') +
minutes + '\u2009m ' + (seconds < 10 ? '0' : '') + seconds + '\u2009s';
}
function genId(x) {
return 'id'+x.replace(/[^\w]/g,'');
}