feature: make it possible to limit the number of favorites to show

README.md

@@ -150,6 +150,7 @@ topFavorites: # Show these favorites at the top of the list
   - Legendary
   - Country Rocks
   - Kacey Musgraves Radio
+numberOfFavoritesToShow: 10 # Use this to limit the amount of favorites to show
 ```
 
 ## Using individual section cards

src/editor/advanced-editor.ts

@@ -31,6 +31,11 @@ export const ADVANCED_SCHEMA = [
     type: 'string',
     name: 'topFavorites',
   },
+  {
+    type: 'integer',
+    name: 'numberOfFavoritesToShow',
+    valueMin: 1,
+  },
 ];
 
 class AdvancedEditor extends BaseEditor {

src/sections/media-browser.ts

@@ -140,25 +140,31 @@ export class MediaBrowser extends LitElement {
       this.mediaPlayers,
       this.config.mediaBrowserTitlesToIgnore,
     );
-    allFavorites = allFavorites.sort((a, b) => {
-      const topFavorites = this.config.topFavorites ?? [];
-      const aIndex = indexOfWithoutSpecialChars(topFavorites, a.title);
-      const bIndex = indexOfWithoutSpecialChars(topFavorites, b.title);
-      if (aIndex > -1 && bIndex > -1) {
-        return aIndex - bIndex;
-      } else {
-        let result = bIndex - aIndex;
-        if (result === 0) {
-          result = a.title.localeCompare(b.title, 'en', { sensitivity: 'base' });
-        }
-        return result;
-      }
-    });
-    return [
+    allFavorites.sort((a, b) => this.sortOnTopFavoritesThenAlphabetically(a.title, b.title));
+    allFavorites = [
       ...(this.config.customSources?.[this.activePlayer.id]?.map(MediaBrowser.createSource) || []),
       ...(this.config.customSources?.all?.map(MediaBrowser.createSource) || []),
       ...allFavorites,
     ];
+    allFavorites = this.config.numberOfFavoritesToShow
+      ? allFavorites.slice(0, this.config.numberOfFavoritesToShow)
+      : allFavorites;
+    return allFavorites;
+  }
+
+  private sortOnTopFavoritesThenAlphabetically(a: string, b: string) {
+    const topFavorites = this.config.topFavorites ?? [];
+    const aIndex = indexOfWithoutSpecialChars(topFavorites, a);
+    const bIndex = indexOfWithoutSpecialChars(topFavorites, b);
+    if (aIndex > -1 && bIndex > -1) {
+      return aIndex - bIndex;
+    } else {
+      let result = bIndex - aIndex;
+      if (result === 0) {
+        result = a.localeCompare(b, 'en', { sensitivity: 'base' });
+      }
+      return result;
+    }
   }
 
   private static createSource(source: MediaPlayerItem) {

src/types.ts

@@ -42,6 +42,7 @@ export interface CardConfig extends LovelaceCardConfig {
   mediaBrowserItemsPerRow: number;
   mediaBrowserShowTitleForThumbnailIcons?: boolean;
   topFavorites?: string[];
+  numberOfFavoritesToShow?: number;
 }
 
 export interface MediaArtworkOverride {