Add song count filter to artists page (jellyfin#12912)

CONTRIBUTORS.md

@@ -93,6 +93,7 @@
 - [Connor Smith](https://github.com/ConnorS1110)
 - [iFraan](https://github.com/iFraan)
 - [Ali](https://github.com/bu3alwa)
+- [Thogsit](https://github.com/Thogsit)
 
 ## Emby Contributors
 

src/components/filterdialog/filterIndicator.js

@@ -22,6 +22,7 @@ function getFilterStatus(query) {
             || query.Years
             || query.OfficialRatings
             || query.IsUnaired
+            || (query.MinSongCount && query.MinSongCount > 0)
     );
 }
 

src/components/filterdialog/filterdialog.js

@@ -7,7 +7,7 @@ import '../../elements/emby-collapse/emby-collapse';
 import './style.scss';
 import ServerConnections from '../ServerConnections';
 import template from './filterdialog.template.html';
-import { stopMultiSelect } from '../../components/multiSelect/multiSelect';
+import { stopMultiSelect } from '../multiSelect/multiSelect';
 
 function renderOptions(context, selector, cssClass, items, isCheckedFn) {
     const elem = context.querySelector(selector);
@@ -82,6 +82,7 @@ function updateFilterControls(context, options) {
         const filterName = elem.getAttribute('data-filter');
         elem.checked = filters.includes(`,${filterName}`);
     }
+    context.querySelector('.numMinSongCountFilter').value = query.MinSongCount || '0';
     context.querySelector('.chk3DFilter').checked = query.Is3D === true;
     context.querySelector('.chkHDFilter').checked = query.IsHD === true;
     context.querySelector('.chk4KFilter').checked = query.Is4K === true;
@@ -136,6 +137,10 @@ function setVisibility(context, options) {
     if (options.mode === 'episodes') {
         showByClass(context, 'episodeFilter');
     }
+
+    if (options.mode === 'artists') {
+        showByClass(context, 'artistFilter');
+    }
 }
 
 function showByClass(context, className) {
@@ -172,6 +177,21 @@ class FilterDialog {
         triggerChange(this);
     }
 
+    /**
+         * @private
+         */
+    onMinSongCountChange(elem) {
+        const query = this.options.query;
+
+        // Make sure the value is a number
+        let val = Number(elem.value);
+        val = isNaN(val) ? 0 : val;
+
+        query.StartIndex = 0;
+        query.MinSongCount = val > 0 ? val : undefined;
+        triggerChange(this);
+    }
+
     /**
          * @private
          */
@@ -242,6 +262,9 @@ class FilterDialog {
             }
         }
 
+        for (const elem of context.querySelectorAll('.numMinSongCountFilter')) {
+            elem.addEventListener('change', () => this.onMinSongCountChange(elem));
+        }
         for (const elem of context.querySelectorAll('.chkVideoTypeFilter')) {
             elem.addEventListener('change', () => this.onVideoTypeFilterChange(elem));
         }

src/components/filterdialog/filterdialog.template.html

@@ -23,6 +23,10 @@
                         data-filter="IsFavorite" />
                     <span>${Favorites}</span>
                 </label>
+                <label class="artistFilter hide filterRow">
+                    <input type="number" is="emby-input" class="numMinSongCountFilter" min="0" />
+                    <span>${OptionMinSongCount}</span>
+                </label>
                 <label class="episodeFilter hide">
                     <input type="checkbox" is="emby-checkbox" id="chkSpecialEpisode" />
                     <span>${OptionSpecialEpisode}</span>

src/components/filterdialog/style.scss

@@ -10,6 +10,16 @@
     max-width: none !important;
 }
 
+.filterRow {
+    display: flex;
+    align-items: center;
+}
+
+.numMinSongCountFilter {
+    width: 33%;
+    margin-right: 1em;
+}
+
 @media all and (min-height: 600px) {
     .dynamicFilterDialog {
         top: 10% !important;

src/strings/en-us.json

@@ -1271,6 +1271,7 @@
     "OptionMax": "Max",
     "OptionMaxActiveSessions": "Set the maximum number of simultaneous user sessions.",
     "OptionMaxActiveSessionsHelp": "A value of 0 will disable the feature.",
+    "OptionMinSongCount": "Minimum Song Count",
     "OptionMissingEpisode": "Missing Episodes",
     "OptionNew": "New…",
     "OptionOnInterval": "On an interval",