Source: viewBrowseDatabase.js

  1. "use strict";
  2. // SPDX-License-Identifier: GPL-3.0-or-later
  3. // myMPD (c) 2018-2025 Juergen Mang <mail@jcgames.de>
  4. // https://github.com/jcorporation/mympd
  6. /** @module viewBrowseDatabase_js */
  8. /**
  9.  * BrowseDatabaseAlbumList handler
  10.  * @returns {void}
  11.  */
  12. function handleBrowseDatabaseAlbumList() {
  13.     handleSearchExpression('BrowseDatabaseAlbumList');
  15.     selectTag('BrowseDatabaseAlbumListTagDropdown', 'btnBrowseDatabaseAlbumListTagDesc', app.current.tag);
  16.     toggleBtnChkId('BrowseDatabaseAlbumListSortDesc', app.current.sort.desc);
  17.     selectTag('BrowseDatabaseAlbumListSortTags', undefined, app.current.sort.tag);
  19.     sendAPI("MYMPD_API_DATABASE_ALBUM_LIST", {
  20.         "offset": app.current.offset,
  21.         "limit": app.current.limit,
  22.         "expression": app.current.search,
  23.         "sort": app.current.sort.tag,
  24.         "sortdesc": app.current.sort.desc,
  25.         "fields": settings.viewBrowseDatabaseAlbumListFetch.fields
  26.     }, parseDatabaseAlbumList, true);
  27. }
  29. /**
  30.  * BrowseDatabaseTagList handler
  31.  * @returns {void}
  32.  */
  33. function handleBrowseDatabaseTagList() {
  34.     handleSearchSimple('BrowseDatabaseTag');
  35.     selectTag('BrowseDatabaseTagListTagDropdown', 'btnBrowseDatabaseTagListTagDesc', app.current.tag);
  36.     mirrorBtnId('BrowseDatabaseTagListSortDesc', app.current.sort.desc);
  37.     sendAPI("MYMPD_API_DATABASE_TAG_LIST", {
  38.         "offset": app.current.offset,
  39.         "limit": app.current.limit,
  40.         "searchstr": app.current.search,
  41.         "tag": app.current.tag,
  42.         "sortdesc": app.current.sort.desc
  43.     }, parseDatabaseTagList, true);
  44. }
  46. /**
  47.  * Handles BrowseDatabaseAlbumDetail
  48.  * @returns {void}
  49.  */
  50. function handleBrowseDatabaseAlbumDetail() {
  51.     sendAPI("MYMPD_API_DATABASE_ALBUM_DETAIL", {
  52.         "albumid": app.current.filter,
  53.         "fields": settings.viewBrowseDatabaseAlbumDetailFetch.fields
  54.     }, parseAlbumDetails, true);
  55. }
  57. /**
  58.  * Initializes the browse database elements
  59.  * @returns {void}
  60.  */
  61. function initViewBrowseDatabase() {
  62.     initSearchSimple('BrowseDatabaseTag');
  64.     elGetById('BrowseDatabaseTagListSortDesc').addEventListener('click', function(event) {
  65.         event.stopPropagation();
  66.         event.preventDefault();
  67.         app.current.sort.desc = app.current.sort.desc === true ? false : true;
  68.         appGoto(app.current.card, app.current.tab, app.current.view, 0, app.current.limit, app.current.filter, app.current.sort, app.current.tag, app.current.search);
  69.     }, false);
  71.     initSortBtns('BrowseDatabaseAlbumList');
  72.     initSearchExpression('BrowseDatabaseAlbumList');
  74.     setView('BrowseDatabaseAlbumList');
  75.     setView('BrowseDatabaseAlbumDetail');
  76.     setView('BrowseDatabaseTagList');
  77. }
  79. /**
  80.  * Click event handler for database tag list
  81.  * @param {MouseEvent} event click event
  82.  * @param {HTMLElement} target calculated target
  83.  * @returns {void}
  84.  */
  85. function viewBrowseDatabaseTagListListClickHandler(event, target) {
  86.     event.preventDefault();
  87.     event.stopPropagation();
  88.     app.current.search = '';
  89.     const tag = getData(target, 'tag');
  90.     if (settings.tagListAlbum.includes(tag)) {
  91.         elGetById('BrowseDatabaseTagSearchStr').value = '';
  92.         // clear album search input
  93.         elGetById('BrowseDatabaseAlbumListSearchStr').value = '';
  94.         gotoBrowse(event);
  95.     }
  96.     else {
  97.         elGetById('SearchSearchStr').value = '';
  98.         const value = getData(event.target.parentNode, 'name');
  99.         gotoSearch(tag, value);
  100.     }
  101. }
  103. /**
  104.  * Click event handler for database album list
  105.  * @param {MouseEvent} event click event
  106.  * @param {HTMLElement} target calculated target
  107.  * @returns {void}
  108.  */
  109. function viewBrowseDatabaseAlbumListListClickHandler(event, target) {
  110.     appGoto('Browse', 'Database', 'AlbumDetail', 0, undefined, getData(target, 'AlbumId'));
  111. }
  113. /**
  114.  * Click event handler for database album detail song list
  115.  * @param {MouseEvent} event click event
  116.  * @param {HTMLElement} target calculated target
  117.  * @returns {void}
  118.  */
  119. function viewBrowseDatabaseAlbumDetailListClickHandler(event, target) {
  120.     clickSong(getData(target, 'uri'), event);
  121. }
  123. /**
  124.  * Parses the MYMPD_API_DATABASE_ALBUM_LIST response
  125.  * @param {object} obj jsonrpc response object
  126.  * @returns {void}
  127.  */
  128. function parseDatabaseAlbumList(obj) {
  129.     const cardContainer = elGetById('BrowseDatabaseAlbumListList');
  130.     if (checkResult(obj, cardContainer, undefined) === false) {
  131.         return;
  132.     }
  133.     if (settings['view' + app.id].mode === 'table') {
  134.         const tfoot = cardContainer.querySelector('tfoot');
  135.         elClear(tfoot);
  136.         updateTable(obj, app.id, function(row, data) {
  137.             parseDatabaseAlbumListUpdate(row, data);
  138.         });
  139.         addTblFooter(tfoot,
  140.             elCreateTextTnNr('span', {}, 'Num entries', obj.result.totalEntities)
  141.         );
  142.         return;
  143.     }
  144.     if (settings['view' + app.id].mode === 'grid') {
  145.         updateGrid(obj, app.id, function(card, data) {
  146.             parseDatabaseAlbumListUpdate(card, data);
  147.         });
  148.         return;
  149.     }
  150.     updateList(obj, app.id, function(card, data) {
  151.         parseDatabaseAlbumListUpdate(card, data);
  152.     });
  153. }
  155. /**
  156.  * Callback function for row or card
  157.  * @param {HTMLElement} card Row or card
  158.  * @param {object} data Data object
  159.  * @returns {void}
  160.  */
  161. function parseDatabaseAlbumListUpdate(card, data) {
  162.     setData(card, 'uri', data.FirstSongUri.replace(/\/[^/]+$/, ''));
  163.     setData(card, 'type', 'album');
  164.     setData(card, 'name', data.Album);
  165.     setData(card, 'Album', data.Album);
  166.     setData(card, tagAlbumArtist, data[tagAlbumArtist]);
  167.     setData(card, 'AlbumId', data.AlbumId);
  168.     card.setAttribute('title', tn('Show album'));
  169. }
  171. /**
  172.  * Parsed the MYMPD_API_DATABASE_TAG_LIST response
  173.  * @param {object} obj jsonrpc response object
  174.  * @returns {void}
  175.  */
  176.  function parseDatabaseTagList(obj) {
  177.     const cardContainer = elGetById('BrowseDatabaseTagListList');
  178.     if (checkResult(obj, cardContainer, undefined) === false) {
  179.         return;
  180.     }
  181.     elGetById('BrowseDatabaseTagListTitle').textContent = tn(obj.result.tag);
  183.     if (settings['view' + app.id].mode === 'table') {
  184.         const tfoot = cardContainer.querySelector('tfoot');
  185.         const colspan = settings['view' + app.id].fields.length;
  186.         const smallWidth = uiSmallWidthTagRows();
  187.         const actionTd = elCreateEmpty('td', {"data-col": "Action"});
  188.         addActionLinks(actionTd, obj.result.tag);
  189.         elClear(tfoot);
  190.         updateTable(obj, app.id, function(row, data, result) {
  191.             parseDatabaseTagListUpdate(row, data, result);
  192.         }, function(row, data) {
  193.             tableRow(row, data, app.id, colspan, smallWidth, actionTd);
  194.         });
  195.         addTblFooter(tfoot,
  196.             elCreateTextTnNr('span', {}, 'Num entries', obj.result.totalEntities)
  197.         );
  198.         return;
  199.     }
  200.     if (settings['view' + app.id].mode === 'grid') {
  201.         updateGrid(obj, app.id, function(card, data, result) {
  202.             parseDatabaseTagListUpdate(card, data, result);
  203.         }, undefined, function(footer, data, result) {
  204.             addActionLinks(footer, result.tag);
  205.         });
  206.         return;
  207.     }
  208.     updateList(obj, app.id, function(card, data, result) {
  209.         parseDatabaseTagListUpdate(card, data, result);
  210.     }, undefined, function(footer, data, result) {
  211.         addActionLinks(footer, result.tag);
  212.     });
  213. }
  215. /**
  216.  * Callback function for row or card
  217.  * @param {HTMLElement} card Row or card
  218.  * @param {object} data Data object
  219.  * @param {object} result Jsonrpc result
  220.  * @returns {void}
  221.  */
  222. function parseDatabaseTagListUpdate(card, data, result) {
  223.     if (result.pics === true) {
  224.         data.Thumbnail = getImageUri('/tagart?tag=' + myEncodeURIComponent(result.tag) + '&value=' + myEncodeURIComponent(data.Value));
  225.     }
  226.     setData(card, 'tag', result.tag);
  227.     setData(card, 'name', data.Value);
  228.     const rowTitle = tn(settings.tagListAlbum.includes(result.tag) ? 'Show albums' : 'Show songs');
  229.     card.setAttribute('title', rowTitle);
  230.     card.classList.add('no-contextmenu');
  231. }
  233. /**
  234.  * Shows the edit sticker modal for the current album
  235.  * @param {Event} event triggering click event
  236.  * @returns {void}
  237.  */
  238. //eslint-disable-next-line no-unused-vars
  239. function showAlbumSticker(event) {
  240.     event.preventDefault();
  241.     const uri = getDataId('viewDatabaseAlbumDetailCover', 'AlbumId');
  242.     showStickerModal(uri, 'mympd_album');
  243. }
  245. /**
  246.  * Parses the MYMPD_API_DATABASE_ALBUM_DETAIL response
  247.  * @param {object} obj jsonrpc response object
  248.  * @returns {void}
  249.  */
  250. function parseAlbumDetails(obj) {
  251.     const table = elGetById('BrowseDatabaseAlbumDetailList');
  252.     const tfoot = table.querySelector('tfoot');
  253.     const colspan = settings.viewBrowseDatabaseAlbumDetail.fields.length;
  254.     const infoEl = elGetById('viewDatabaseAlbumDetailInfoTags');
  256.     if (checkResultId(obj, 'BrowseDatabaseAlbumDetailList', 'grid') === false) {
  257.         elClear(infoEl);
  258.         return;
  259.     }
  261.     const coverEl = elGetById('viewDatabaseAlbumDetailCover');
  262.     coverEl.style.backgroundImage = getCssImageUri('/albumart?offset=0&uri=' + myEncodeURIComponent(obj.result.data[0].uri));
  263.     setData(coverEl, 'images', obj.result.images);
  264.     setData(coverEl, 'embeddedImageCount', obj.result.embeddedImageCount);
  265.     setData(coverEl, 'uri', obj.result.data[0].uri);
  266.     setData(coverEl, 'AlbumId', obj.result.AlbumId);
  267.     if (features.featStickers === true) {
  268.         const feedbackGrp = elGetById('BrowseDatabaseAlbumDetailFeedback').firstElementChild;
  269.         setData(feedbackGrp, 'uri', obj.result.AlbumId);
  270.         setFeedback(feedbackGrp, obj.result.like, obj.result.rating);
  271.     }
  273.     elClear(infoEl);
  274.     infoEl.appendChild(
  275.         elCreateText('h1', {}, obj.result.Album)
  276.     );
  277.     for (const col of settings.viewBrowseDatabaseAlbumDetailInfo.fields) {
  278.         infoEl.appendChild(
  279.             elCreateNodes('div', {"class": ["col-xl-6"]}, [
  280.                 elCreateTextTn('small', {}, col),
  281.                 elCreateNode('p', {},
  282.                     printValue(col, obj.result[col])
  283.                 )
  284.             ])
  285.         );
  286.     }
  288.     if (obj.result.bookletPath !== '') {
  289.         infoEl.appendChild(
  290.             elCreateNodes('div', {"class": ["col-xl-6"]}, [
  291.                 elCreateText('span', {"class": ["mi", "me-2"]}, 'description'),
  292.                 elCreateTextTn('a', {"target": "_blank", "href": subdir + myEncodeURI(obj.result.bookletPath)}, 'Download booklet')
  293.             ])
  294.         );
  295.     }
  297.     if (obj.result.infoTxtPath !== '') {
  298.         const infoTxtEl = elCreateNodes('div', {"class": ["col-xl-6"]}, [
  299.             elCreateText('span', {"class": ["mi", "me-2"]}, 'article'),
  300.             elCreateTextTn('span', {"class": ["clickable"]}, 'Album info')
  301.         ]);
  302.         setData(infoTxtEl, 'uri', obj.result.infoTxtPath);
  303.         infoTxtEl.addEventListener('click', function(event) {
  304.             showInfoTxt(event.target);
  305.         }, false);
  306.         infoEl.appendChild(infoTxtEl);
  307.     }
  309.     const mbField = addMusicbrainzFields(obj.result, false);
  310.     if (mbField !== null) {
  311.         infoEl.appendChild(mbField);
  312.     }
  314.     if (obj.result.lastPlayedSong.uri !== '' &&
  315.         obj.result.lastPlayedSong.pos < obj.result.totalEntities - 1)
  316.     {
  317.         const resumeBtn = pEl.resumeBtn.cloneNode(true);
  318.         resumeBtn.classList.add('ms-3', 'dropdown');
  319.         resumeBtn.classList.remove('dropup');
  320.         setData(resumeBtn, 'pos', obj.result.lastPlayedSong.pos);
  321.         new BSN.Dropdown(resumeBtn.firstElementChild);
  322.         resumeBtn.lastElementChild.firstElementChild.addEventListener('click', function(event) {
  323.             clickResumeAlbum(event);
  324.         }, false);
  325.         infoEl.appendChild(
  326.             elCreateNodes('div', {"class": ["col-xl-6"]}, [
  327.                 elCreateTextTn('small', {}, 'Last played'),
  328.                 elCreateNodes('p', {}, [
  329.                     document.createTextNode(obj.result.lastPlayedSong.title),
  330.                     resumeBtn
  331.                 ])
  332.             ])
  333.         );
  334.     }
  336.     const rowTitle = tn(settingsWebuiFields.clickSong.validValues[settings.webuiSettings.clickSong]);
  337.     updateTable(obj, 'BrowseDatabaseAlbumDetail', function(row, data) {
  338.         setData(row, 'type', 'song');
  339.         setData(row, 'name', data.Title);
  340.         setData(row, 'uri', data.uri);
  341.         row.setAttribute('title', rowTitle);
  342.     });
  344.     elReplaceChild(tfoot,
  345.         elCreateNode('tr', {"class": ["not-clickable"]},
  346.             elCreateNode('td', {"colspan": colspan + 1},
  347.                 elCreateNodes('small', {}, [
  348.                     elCreateTextTnNr('span', {}, 'Num songs', obj.result.returnedEntities),
  349.                     elCreateText('span', {}, smallSpace + nDash + smallSpace + fmtDuration(obj.result.Duration))
  350.                 ])
  351.             )
  352.         )
  353.     );
  354. }
  356. /**
  357.  * Go's to the last browse database grid view
  358.  * @returns {void}
  359.  */
  360. //eslint-disable-next-line no-unused-vars
  361. function backToAlbumGrid() {
  362.     appGoto('Browse', 'Database', 'AlbumList');
  363. }
  365. /**
  366.  * Wrapper for add buttons in the album detail view
  367.  * @param {string} action action to perform
  368.  * @returns {void}
  369.  */
  370. //eslint-disable-next-line no-unused-vars
  371. function currentAlbumAdd(action) {
  372.     switch(action) {
  373.         case 'appendQueue':
  374.             appendQueue('album', [app.current.filter]);
  375.             break;
  376.         case 'appendPlayQueue':
  377.             appendPlayQueue('album', [app.current.filter]);
  378.             break;
  379.         case 'insertAfterCurrentQueue':
  380.             insertAfterCurrentQueue('album', [app.current.filter]);
  381.             break;
  382.         case 'replaceQueue':
  383.             replaceQueue('album', [app.current.filter]);
  384.             break;
  385.         case 'replacePlayQueue':
  386.             replacePlayQueue('album', [app.current.filter]);
  387.             break;
  388.         case 'addPlaylist':
  389.             showAddToPlaylist('album', [app.current.filter]);
  390.             break;
  391.         case 'addAlbumToHome': {
  392.             const name = document.querySelector('#viewDatabaseAlbumDetailInfoTags > h1').textContent;
  393.             const images = getDataId('viewDatabaseAlbumDetailCover', 'images');
  394.             addAlbumToHome(app.current.filter, name, (images.length > 0 ? images[0]: ''));
  395.             break;
  396.         }
  397.         default:
  398.             logError('Invalid action: ' + action);
  399.     }
  400. }