feature: make it possible to group favorites by type (folder)

README.md

@@ -231,6 +231,7 @@ numberOfFavoritesToShow: 10 # Use this to limit the amount of favorites to show
 hideBrowseMediaButton: true # default is false. Hides the button to open the media browser.
 replaceHttpWithHttpsForThumbnails: true # default is false. Use this if you  want to replace http with https for thumbnails. 
 mediaBrowserTitle: My favorites # default is 'All favorites'. Use this to change the title for the media browser/favorites section.
+sortFavoritesByType: true # default is false. Will group favorites by type (e.g. radio, playlist, album).
 
 # volumes specific
 hideVolumeCogwheel: true # default is false. Will hide the cogwheel for the volumes section.

src/components/media-browser-icons.ts

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import Store from '../model/store';
 import { CardConfig, MediaPlayerItem } from '../types';
@@ -15,22 +15,37 @@ export class MediaBrowserIcons extends LitElement {
   render() {
     this.config = this.store.config;
 
+    const items = itemsWithFallbacks(this.items, this.config);
+    let prevType: string | undefined = '';
+    this.sortItemsByFavoriteTypeIfConfigured(items);
     return html`
       <div class="icons">
-        ${itemsWithFallbacks(this.items, this.config).map(
-          (item) => html`
+        ${items.map((item) => {
+          const showFavoriteType = (this.config.sortFavoritesByType && item.favoriteType !== prevType) || nothing;
+          const toRender = html`
+            <div class="favorite-type" show=${showFavoriteType}>${item.favoriteType}</div>
             <ha-control-button
               style=${this.buttonStyle(this.config.favoritesItemsPerRow || 4)}
               @click=${() => this.dispatchEvent(customEvent(MEDIA_ITEM_SELECTED, item))}
             >
               ${renderMediaBrowserItem(item, !item.thumbnail || !this.config.favoritesHideTitleForThumbnailIcons)}
             </ha-control-button>
-          `,
-        )}
+          `;
+          prevType = item.favoriteType;
+          return toRender;
+        })}
       </div>
     `;
   }
 
+  private sortItemsByFavoriteTypeIfConfigured(items: MediaPlayerItem[]) {
+    if (this.config.sortFavoritesByType) {
+      items.sort((a, b) => {
+        return a.favoriteType?.localeCompare(b.favoriteType ?? '') || a.title.localeCompare(b.title);
+      });
+    }
+  }
+
   private buttonStyle(favoritesItemsPerRow: number) {
     const margin = '1%';
     const size = `calc(100% / ${favoritesItemsPerRow} - ${margin} * 2)`;
@@ -67,6 +82,18 @@ export class MediaBrowserIcons extends LitElement {
           bottom: 0;
           background-color: rgba(var(--rgb-card-background-color), 0.733);
         }
+
+        .favorite-type {
+          width: 100%;
+          border-bottom: 1px solid var(--secondary-background-color);
+          display: none;
+          margin-top: 0.2rem;
+          font-weight: bold;
+        }
+
+        .favorite-type[show] {
+          display: block;
+        }
       `,
     ];
   }

src/editor/advanced-editor.ts

@@ -161,6 +161,10 @@ export const ADVANCED_SCHEMA = [
     name: 'inverseGroupMuteState',
     selector: { boolean: {} },
   },
+  {
+    name: 'sortFavoritesByType',
+    selector: { boolean: {} },
+  },
 ];
 
 class AdvancedEditor extends BaseEditor {

src/services/media-browse-service.ts

@@ -59,7 +59,7 @@ export default class MediaBrowseService {
     );
     for (const child of dir.children ?? []) {
       if (child.can_play) {
-        favorites.push(child);
+        favorites.push({ ...child, favoriteType: dir.title });
       } else if (child.can_expand) {
         await this.browseDir(player, child, favorites);
       }

src/types.ts

@@ -101,6 +101,7 @@ export interface CardConfig extends LovelaceCardConfig {
   mediaTitleReplacement?: string;
   stopInsteadOfPause?: boolean;
   inverseGroupMuteState?: boolean;
+  sortFavoritesByType?: boolean;
 }
 
 export interface MediaArtworkOverride {
@@ -137,6 +138,7 @@ export interface MediaPlayerItem {
   media_class?: string;
   media_content_type?: string;
   media_content_id?: string;
+  favoriteType?: string;
 }
 
 export interface PredefinedGroup<T = PredefinedGroupPlayer> {

src/utils/media-browser-utils.ts

@@ -52,7 +52,7 @@ export function stringContainsAnyItemInArray(array: string[], str: string) {
   return !!array.find((value) => str.includes(value));
 }
 
-export function itemsWithFallbacks(mediaPlayerItems: MediaPlayerItem[], config: CardConfig) {
+export function itemsWithFallbacks(mediaPlayerItems: MediaPlayerItem[], config: CardConfig): MediaPlayerItem[] {
   const itemsWithImage = hasItemsWithImage(mediaPlayerItems);
   return mediaPlayerItems.map((item) => {
     const thumbnail = getThumbnail(item, config, itemsWithImage);