mirrors/ympd
1
0
Fork 0
mirror of https://github.com/SuperBFG7/ympd synced 2024-12-27 19:30:27 +00:00
Code Issues Releases Wiki Activity

Feat: use intersection observer api for album view

Browse Source
This commit is contained in:
jcorporation 2018-10-10 22:40:04 +01:00
parent dc8351da8d
commit c204318fc4
2 changed files with 57 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
htdocs/css/mympd.css
View File

@ -197,6 +197,9 @@ small {
a.card-img-top { a.card-img-top {
overflow: hidden; overflow: hidden;
display: block; display: block;
padding-top: 100%;
background-size: cover;
background-image: url(/assets/coverimage-loading.png);
} }
button.active { button.active {

68
htdocs/js/mympd.js
View File

@ -49,13 +49,7 @@ app.apps = { "Playback": { "state": "0/-/", "scrollPos": 0 },
}, },
"Database": { "Database": {
"active": "AlbumArtist", "active": "AlbumArtist",
"views": { "AlbumArtist": { "state": "0/-/", "scrollPos": 0 }, "views": {
"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 },
} }
} }
} }
@ -98,8 +92,6 @@ var modalAddToPlaylist = new Modal(document.getElementById('modalAddToPlaylist')
var modalRenamePlaylist = new Modal(document.getElementById('modalRenamePlaylist')); var modalRenamePlaylist = new Modal(document.getElementById('modalRenamePlaylist'));
var modalUpdateDB = new Modal(document.getElementById('modalUpdateDB')); var modalUpdateDB = new Modal(document.getElementById('modalUpdateDB'));
var modalSaveSmartPlaylist = new Modal(document.getElementById('modalSaveSmartPlaylist')); var modalSaveSmartPlaylist = new Modal(document.getElementById('modalSaveSmartPlaylist'));
//var mainMenu = new Dropdown(document.getElementById('mainMenu'));
//var volumeMenu = new Dropdown(document.getElementById('volumeIcon'));
function appPrepare(scrollPos) { function appPrepare(scrollPos) {
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) {
@ -551,9 +543,6 @@ function appInit() {
}, false); }, false);
document.getElementsByTagName('body')[0].addEventListener('click', function(event) { document.getElementsByTagName('body')[0].addEventListener('click', function(event) {
// var oldPopover = document.getElementsByClassName('popover');
// for (var i = 0; i < oldPopover.length; i++)
// oldPopover[i].remove();
hideMenu(); hideMenu();
}, false); }, false);
@ -935,6 +924,10 @@ function parseSettings(obj) {
addTagList('BrowseDatabaseByTagDropdown', false); addTagList('BrowseDatabaseByTagDropdown', false);
addTagList('searchqueuetag', true); addTagList('searchqueuetag', true);
addTagList('searchtags', true); addTagList('searchtags', true);
for (var i = 0; i < obj.data.tags.length; i++) {
app.apps.Browse.tabs.Database.views[obj.data.tags[i]] = { "state": "0/-/", "scrollPos": 0 };
}
} }
function getSettings() { function getSettings() {
@ -1071,10 +1064,9 @@ function parseState(obj) {
function getQueue() { function getQueue() {
if (app.current.search.length >= 2) if (app.current.search.length >= 2)
sendAPI({"cmd": "MPD_API_QUEUE_SEARCH", "data": {"filter": app.current.filter, "offset": app.current.page, "searchstr": app.current.search}}, parseQueue); sendAPI({"cmd": "MPD_API_QUEUE_SEARCH", "data": {"filter": app.current.filter, "offset": app.current.page, "searchstr": app.current.search}}, parseQueue);
else { else
sendAPI({"cmd": "MPD_API_QUEUE_LIST", "data": {"offset": app.current.page}}, parseQueue); sendAPI({"cmd": "MPD_API_QUEUE_LIST", "data": {"offset": app.current.page}}, parseQueue);
} }
}
function parseQueue(obj) { function parseQueue(obj) {
if (app.current.app !== 'Queue') if (app.current.app !== 'Queue')
@ -1305,8 +1297,7 @@ function parsePlaylists(obj) {
} }
function parseListDBtags(obj) { function parseListDBtags(obj) {
// if (app.current.app !== 'Browse' && app.current.tab !== 'Database' && app.current.view !== 'AlbumArtist') scrollTo(0);
// return;
if (app.current.search != '') { if (app.current.search != '') {
document.getElementById('BrowseDatabaseAlbumList').classList.remove('hide'); document.getElementById('BrowseDatabaseAlbumList').classList.remove('hide');
document.getElementById('BrowseDatabaseTagList').classList.add('hide'); document.getElementById('BrowseDatabaseTagList').classList.add('hide');
@ -1327,8 +1318,10 @@ function parseListDBtags(obj) {
card.classList.add('col-md'); card.classList.add('col-md');
card.classList.add('mr-0'); card.classList.add('mr-0');
card.setAttribute('id', id); card.setAttribute('id', id);
card.setAttribute('data-album', encodeURI(obj.data[i].value));
card.setAttribute('data-init', 'false');
card.innerHTML = '<div class="card mb-4" id="card' + id + '">' + card.innerHTML = '<div class="card mb-4" id="card' + id + '">' +
' <a href="#" class="card-img-top"><img class="card-img-top" src="" ></a>' + ' <a href="#" class="card-img-top"></a>' +
' <div class="card-body">' + ' <div class="card-body">' +
' <h5 class="card-title" id="albumartist' + id + '"></h5>' + ' <h5 class="card-title" id="albumartist' + id + '"></h5>' +
' <h4 class="card-title">' + obj.data[i].value + '</h4>' + ' <h4 class="card-title">' + obj.data[i].value + '</h4>' +
@ -1341,6 +1334,9 @@ function parseListDBtags(obj) {
else else
cardContainer.append(card); cardContainer.append(card);
if ('IntersectionObserver' in window)
createListTitleObserver(document.getElementById(id));
else
sendAPI({"cmd": "MPD_API_DATABASE_TAG_ALBUM_TITLE_LIST", "data": { "album": obj.data[i].value, "search": app.current.search, "tag": app.current.view}}, parseListTitles); 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; var cardsLen = cards.length - 1;
@ -1390,19 +1386,37 @@ function parseListDBtags(obj) {
} }
} }
function parseListTitles(obj) { function createListTitleObserver(ele) {
// if (app.current.app !== 'Browse' && app.current.tab !== 'Database' && app.current.view !== 'Album') var options = {
// return; root: null,
rootMargin: "0px",
};
var observer = new IntersectionObserver(getListTitles, options);
observer.observe(ele);
}
function getListTitles(changes, observer) {
changes.forEach(change => {
if (change.intersectionRatio > 0) {
if (change.target.getAttribute('data-init') == 'false') {
change.target.setAttribute('data-init', 'true');
var album = decodeURI(change.target.getAttribute('data-album'));
sendAPI({"cmd": "MPD_API_DATABASE_TAG_ALBUM_TITLE_LIST", "data": { "album": album, "search": app.current.search, "tag": app.current.view}}, parseListTitles);
}
}
});
}
function parseListTitles(obj) {
var id = genId(obj.album); var id = genId(obj.album);
var card = document.getElementById('card' + id) var card = document.getElementById('card' + id)
var tbody = card.getElementsByTagName('tbody')[0]; var tbody = card.getElementsByTagName('tbody')[0];
var img = card.getElementsByTagName('img')[0]; var img = card.getElementsByTagName('a')[0];
var imga = img.parentNode; img.style.backgroundImage = 'url("' + obj.cover + '")';
img.setAttribute('src', obj.cover); img.setAttribute('data-uri', encodeURI(obj.data[0].uri.replace(/\/[^\/]+$/, '')));
imga.setAttribute('data-uri', encodeURI(obj.data[0].uri.replace(/\/[^\/]+$/, ''))); img.setAttribute('data-name', obj.album);
imga.setAttribute('data-name', obj.album); img.setAttribute('data-type', 'dir');
imga.setAttribute('data-type', 'dir');
document.getElementById('albumartist' + id).innerText = obj.albumartist; document.getElementById('albumartist' + id).innerText = obj.albumartist;
var titleList = ''; var titleList = '';
@ -1415,7 +1429,7 @@ function parseListTitles(obj) {
} }
tbody.innerHTML = titleList; tbody.innerHTML = titleList;
imga.addEventListener('click', function(event) { img.addEventListener('click', function(event) {
showMenu(this, event); showMenu(this, event);
}, false); }, false);