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

Feat: browse and search database by more tags #43 #36

Browse Source
This commit is contained in:
jcorporation
2018-09-10 22:32:15 +02:00
parent 49d67c49c8
commit f2489601c1
5 changed files with 161 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
htdocs/index.html
View File

@@ -120,8 +120,8 @@
<button type="button" class="btn btn-secondary material-icons" data-href="{'cmd': 'sendAPI', 'options': [{'cmd':'MPD_API_QUEUE_CLEAR'}]}" title="Clear queue">clear_all</button>
<button id="clearQueueBtn" class="btn btn-secondary dropdown-toggle dropdown-toggle-split rounded-right" type="button" data-toggle="dropdown"></button>
<div class="dropdown-menu bg-dark dropdown-menu-right px-2" id="clearQueueDropdown">
<button type="button" class="btn btn-secondary btn-block" data-href="{'cmd': 'sendAPI', 'options': [{'cmd':'MPD_API_QUEUE_CLEAR'}]}" >Clear queue</button>
<button type="button" class="btn btn-secondary btn-block" data-href="{'cmd': 'sendAPI', 'options': [{'cmd':'MPD_API_QUEUE_CROP'}]}" >Crop queue</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-href="{'cmd': 'sendAPI', 'options': [{'cmd':'MPD_API_QUEUE_CLEAR'}]}" >Clear queue</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-href="{'cmd': 'sendAPI', 'options': [{'cmd':'MPD_API_QUEUE_CROP'}]}" >Crop queue</button>
</div>
</div>
</div>
@@ -135,12 +135,15 @@
</button>
<div class="dropdown-menu bg-dark dropdown-menu-right px-2" id="searchqueuetag">
<h6 class="dropdown-header text-light">Search in Tag</h6>
<button type="button" class="btn btn-secondary btn-block active" data-tag="any">Any Tag</button>
<button type="button" class="btn btn-secondary btn-block" data-tag="Title">Title</button>
<button type="button" class="btn btn-secondary btn-block" data-tag="Artist">Artist</button>
<button type="button" class="btn btn-secondary btn-block" data-tag="Album">Album</button>
<button type="button" class="btn btn-secondary btn-block" data-tag="Composer">Composer</button>
<button type="button" class="btn btn-secondary btn-block" data-tag="Performer">Performer</button>
<button type="button" class="btn btn-secondary btn-sm btn-block active" data-tag="any">Any Tag</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-tag="Title">Title</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-tag="Artist">Artist</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-tag="Album">Album</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-tag="AlbumArtist">AlbumArtist</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-tag="Composer">Composer</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-tag="Performer">Performer</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-tag="Date">Date</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-tag="Genre">Genre</button>
</div>
</div>
</div>
@@ -296,8 +299,20 @@
<div class="card-body hide" id="cardBrowseDatabase">
<div class="btn-toolbar card-toolbar" id="BrowseDatabaseButtons">
<div class="btn-group mr-2">
<button id="btnBrowseDatabaseByTag" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">AlbumArtist</button>
<div class="dropdown-menu bg-dark px-2" id="BrowseDatabaseByTagDropdown">
<button type="button" class="btn btn-secondary btn-sm btn-block" data-tag="AlbumArtist">AlbumArtist</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-tag="Artist">Artist</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-tag="Genre">Genre</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-tag="Album">Album</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-tag="Composer">Composer</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-tag="Performer">Performer</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-tag="Date">Date</button>
</div>
</div>
<div class="btn-group mr-2 hide">
<button data-href="{'cmd': 'appGoto', 'options': ['Browse','Database','Artist']}" id="btnBrowseDatabaseArtist" type="button" class="btn btn-secondary">&laquo; Artists</button>
<button data-href="{'cmd': 'gotoTagList', 'options': []}" id="btnBrowseDatabaseTag" type="button" class="btn btn-secondary">&laquo; Artists</button>
</div>
<div class="btn-group mr-2">
<button id="BrowseDatabaseFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button>
@@ -316,7 +331,7 @@
</div>
<div class="table-responsive-md">
<table id="BrowseDatabaseArtistList" class="table table-hover table-sm">
<table id="BrowseDatabaseTagList" class="table table-hover table-sm">
<col class="tblnum"/>
<col class="tbltitle"/>
<thead>
@@ -363,8 +378,8 @@
<button data-href="{'cmd': 'addAllFromBrowse', 'options': []}" id="BrowseFilesystemAddAllSongs" class="btn btn-secondary">Add all</button>
<button id="BrowseFilesystemAddAllSongsBtn" class="btn btn-secondary dropdown-toggle dropdown-toggle-split rounded-right" type="button" data-toggle="dropdown"></button>
<div class="dropdown-menu bg-dark dropdown-menu-right px-2" id="BrowseFilesystemAddAllSongsDropdown">
<button type="button" class="btn btn-secondary btn-block">Add all to queue</button>
<button type="button" class="btn btn-secondary btn-block">Add all to playlist</button>
<button type="button" class="btn btn-secondary btn-sm btn-block">Add all to queue</button>
<button type="button" class="btn btn-secondary btn-sm btn-block">Add all to playlist</button>
</div>
</div>
</div>
@@ -440,12 +455,15 @@
</button>
<div class="dropdown-menu bg-dark dropdown-menu-right px-2" id="searchtags">
<h6 class="dropdown-header text-light">Search in Tag</h6>
<button type="button" class="btn btn-secondary active btn-block" data-tag="any">Any Tag</button>
<button type="button" class="btn btn-secondary btn-block" data-tag="Title">Title</button>
<button type="button" class="btn btn-secondary btn-block" data-tag="Artist">Artist</button>
<button type="button" class="btn btn-secondary btn-block" data-tag="Album">Album</button>
<button type="button" class="btn btn-secondary btn-block" data-tag="Composer">Composer</button>
<button type="button" class="btn btn-secondary btn-block" data-tag="Performer">Performer</button>
<button type="button" class="btn btn-secondary btn-sm active btn-block" data-tag="any">Any Tag</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-tag="Title">Title</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-tag="Artist">Artist</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-tag="Album">Album</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-tag="AlbumArtist">AlbumArtist</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-tag="Composer">Composer</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-tag="Performer">Performer</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-tag="Date">Date</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-tag="Genre">Genre</button>
</div>
</div>
</div>

154
htdocs/js/mympd.js
View File

@@ -47,9 +47,14 @@ app.apps = { "Playback": { "state": "0/-/", "scrollPos": 0 },
}
},
"Database": {
"active": "Artist",
"views": { "Artist": { "state": "0/-/", "scrollPos": 0 },
"Album": { "state": "0/-/", "scrollPos": 0 }
"active": "AlbumArtist",
"views": { "AlbumArtist": { "state": "0/-/", "scrollPos": 0 },
"Genre": { "state": "0/-/", "scrollPos": 0 },
"Artist": { "state": "0/-/", "scrollPos": 0 },
"Composer": { "state": "0/-/", "scrollPos": 0 },
"Performer": { "state": "0/-/", "scrollPos": 0 },
"Date": { "state": "0/-/", "scrollPos": 0 },
"Album": { "state": "0/-/", "scrollPos": 0 },
}
}
}
@@ -212,13 +217,25 @@ function appRoute() {
sendAPI({"cmd": "MPD_API_PLAYLIST_CONTENT_LIST", "data": {"offset": app.current.page, "filter": app.current.filter, "uri": app.current.search}}, parsePlaylists);
doSetFilterLetter('BrowsePlaylistsFilter');
}
else if (app.current.app == 'Browse' && app.current.tab == 'Database' && app.current.view == 'Artist') {
sendAPI({"cmd": "MPD_API_DATABASE_ARTIST_LIST","data": {"offset": app.current.page, "filter": app.current.filter}}, parseListDBtags);
doSetFilterLetter('BrowseDatabaseFilter');
}
else if (app.current.app == 'Browse' && app.current.tab == 'Database' && app.current.view == 'Album') {
sendAPI({"cmd": "MPD_API_DATABASE_ARTISTALBUM_LIST", "data": {"offset": app.current.page, "filter": app.current.filter, "albumartist": app.current.search}}, parseListDBtags);
doSetFilterLetter('BrowseDatabaseFilter');
else if (app.current.app == 'Browse' && app.current.tab == 'Database') {
if (app.current.search != '') {
sendAPI({"cmd": "MPD_API_DATABASE_TAG_ALBUM_LIST", "data": {"offset": app.current.page, "filter": app.current.filter, "search": app.current.search, "tag": app.current.view}}, parseListDBtags);
doSetFilterLetter('BrowseDatabaseFilter');
}
else {
sendAPI({"cmd": "MPD_API_DATABASE_TAG_LIST","data": {"offset": app.current.page, "filter": app.current.filter, "tag": app.current.view}}, parseListDBtags);
doSetFilterLetter('BrowseDatabaseFilter');
var btns = document.getElementById('BrowseDatabaseByTagDropdown').getElementsByTagName('button');
var btnsLen = btns.length;
for (var i = 0; i < btnsLen; i++) {
btns[i].classList.remove('active');
if (btns[i].getAttribute('data-tag') == app.current.view) {
btns[i].classList.add('active');
document.getElementById('btnBrowseDatabaseByTag').innerText = btns[i].innerText;
}
}
}
}
else if (app.current.app == 'Browse' && app.current.tab == 'Filesystem') {
sendAPI({"cmd": "MPD_API_DATABASE_FILESYSTEM_LIST", "data": {"offset": app.current.page, "path": (app.current.search ? app.current.search : "/"), "filter": app.current.filter}}, parseFilesystem);
@@ -442,9 +459,9 @@ function appInit() {
}
}, false);
document.getElementById('BrowseDatabaseArtistList').addEventListener('click', function(event) {
document.getElementById('BrowseDatabaseTagList').addEventListener('click', function(event) {
if (event.target.nodeName == 'TD') {
appGoto('Browse', 'Database', 'Album', '0/-/' + event.target.parentNode.getAttribute('data-uri'));
appGoto('Browse', 'Database', app.current.view, '0/-/' + event.target.parentNode.getAttribute('data-uri'));
}
}, false);
@@ -505,6 +522,10 @@ function appInit() {
appGoto('Search', undefined, undefined, '0/' + app.current.filter + '/' + this.value);
}, false);
document.getElementById('BrowseDatabaseByTagDropdown').addEventListener('click', function(event) {
if (event.target.nodeName == 'BUTTON')
appGoto(app.current.app, app.current.tab, event.target.getAttribute('data-tag') , '0/' + app.current.filter + '/' + app.current.search);
}, false);
document.getElementsByTagName('body')[0].addEventListener('click', function(event) {
var oldPopover = document.getElementsByClassName('popover')[0];
@@ -1212,14 +1233,60 @@ function parsePlaylists(obj) {
}
function parseListDBtags(obj) {
if (app.current.app !== 'Browse' && app.current.tab !== 'Database' && app.current.view !== 'Artist') return;
if (obj.tagtype == 'AlbumArtist') {
document.getElementById('BrowseDatabaseAlbumList').classList.add('hide');
document.getElementById('BrowseDatabaseArtistList').classList.remove('hide');
document.getElementById('btnBrowseDatabaseArtist').parentNode.classList.add('hide');
// if (app.current.app !== 'Browse' && app.current.tab !== 'Database' && app.current.view !== 'AlbumArtist')
// return;
if (app.current.search != '') {
document.getElementById('BrowseDatabaseAlbumList').classList.remove('hide');
document.getElementById('BrowseDatabaseTagList').classList.add('hide');
document.getElementById('btnBrowseDatabaseByTag').parentNode.classList.add('hide');
document.getElementById('btnBrowseDatabaseTag').parentNode.classList.remove('hide');
document.getElementById('btnBrowseDatabaseTag').innerHTML = '&laquo; ' + app.current.view;
var nrItems = obj.data.length;
var tbody = document.getElementById(app.current.app + app.current.tab + app.current.view + 'List').getElementsByTagName('tbody')[0];
if (nrItems == 1 && obj.data[0].value == '')
nrItems = 0;
var cardContainer = document.getElementById('BrowseDatabaseAlbumList');
var cards = cardContainer.getElementsByClassName('col-md');
for (var i = 0; i < nrItems; i++) {
var id=genId(obj.data[i].value);
if (cards[i])
if (cards[i].getAttribute('id') == id)
continue;
var card=document.createElement('div');
card.classList.add('col-md');
card.classList.add('mr-0');
card.setAttribute('id', id);
card.innerHTML = '<div class="card mb-4" id="card' + id + '">' +
' <a href="#" class="card-img-top"><img class="card-img-top" src="" ></a>' +
' <div class="card-body">' +
' <h5 class="card-title">' + obj.searchstr + '</h5>' +
' <h4 class="card-title">' + obj.data[i].value + '</h4>' +
' <table class="table table-sm table-hover" id="tbl' + id + '"><tbody></tbody></table'+
' </div>'+
'</div>';
if (i < cards.length)
cards[i].replaceWith(card);
else
cardContainer.append(card);
sendAPI({"cmd": "MPD_API_DATABASE_TAG_ALBUM_TITLE_LIST", "data": { "album": obj.data[i].value, "search": app.current.search, "tag": app.current.view}}, parseListTitles);
}
var cardsLen = cards.length - 1;
for (var i = cardsLen; i >= nrItems; i --) {
cards[i].remove();
}
setPagination(obj.totalEntities);
document.getElementById('BrowseDatabaseAlbumList').classList.remove('opacity05');
}
else {
document.getElementById('BrowseDatabaseAlbumList').classList.add('hide');
document.getElementById('BrowseDatabaseTagList').classList.remove('hide');
document.getElementById('btnBrowseDatabaseByTag').parentNode.classList.remove('hide');
document.getElementById('btnBrowseDatabaseTag').parentNode.classList.add('hide');
var nrItems = obj.data.length;
if (nrItems == 1 && obj.data[0].value == '')
nrItems = 0;
var tbody = document.getElementById(app.current.app + app.current.tab + 'TagList').getElementsByTagName('tbody')[0];
var tr = tbody.getElementsByTagName('tr');
for (var i = 0; i < nrItems; i++) {
var uri = encodeURI(obj.data[i].value);
@@ -1247,52 +1314,13 @@ function parseListDBtags(obj) {
if (nrItems == 0)
tbody.innerHTML = '<tr><td><span class="material-icons">error_outline</span></td>' +
'<td>No entries found.</td></tr>';
document.getElementById('BrowseDatabaseArtistList').classList.remove('opacity05');
} else if (obj.tagtype == 'Album') {
document.getElementById('BrowseDatabaseAlbumList').classList.remove('hide');
document.getElementById('BrowseDatabaseArtistList').classList.add('hide');
document.getElementById('btnBrowseDatabaseArtist').parentNode.classList.remove('hide');
var nrItems = obj.data.length;
var cardContainer = document.getElementById('BrowseDatabaseAlbumList');
var cards = cardContainer.getElementsByClassName('col-md');
for (var i = 0; i < nrItems; i++) {
var id=genId(obj.data[i].value);
if (cards[i])
if (cards[i].getAttribute('id') == id)
continue;
var card=document.createElement('div');
card.classList.add('col-md');
card.classList.add('mr-0');
card.setAttribute('id', id);
card.innerHTML = '<div class="card mb-4" id="card' + id + '">' +
' <a href="#" class="card-img-top"><img class="card-img-top" src="" ></a>' +
' <div class="card-body">' +
' <h5 class="card-title">' + obj.searchstr + '</h5>' +
' <h4 class="card-title">' + obj.data[i].value + '</h4>' +
' <table class="table table-sm table-hover" id="tbl' + id + '"><tbody></tbody></table'+
' </div>'+
'</div>';
if (i < cards.length)
cards[i].replaceWith(card);
else
cardContainer.append(card);
sendAPI({"cmd": "MPD_API_DATABASE_ARTISTALBUMTITLE_LIST", "data": { "albumartist": obj.searchstr, "album": obj.data[i].value}}, parseListTitles);
}
var cardsLen = cards.length - 1;
for (var i = cardsLen; i >= nrItems; i --) {
cards[i].remove();
}
setPagination(obj.totalEntities);
document.getElementById('BrowseDatabaseAlbumList').classList.remove('opacity05');
document.getElementById('BrowseDatabaseTagList').classList.remove('opacity05');
}
}
function parseListTitles(obj) {
if (app.current.app !== 'Browse' && app.current.tab !== 'Database' && app.current.view !== 'Album')
return;
// if (app.current.app !== 'Browse' && app.current.tab !== 'Database' && app.current.view !== 'Album')
// return;
var id = genId(obj.album);
var card = document.getElementById('card' + id)
@@ -2114,6 +2142,10 @@ function addFilterLetter(x) {
}, false);
}
function gotoTagList() {
appGoto(app.current.app, app.current.tab, app.current.view, '0/-/');
}
function chVolume(increment) {
var newValue = parseInt(domCache.volumeBar.value) + increment;
if (newValue < 0)