From 78b32f0549059f9a198a35ab537aa360124eeaa4 Mon Sep 17 00:00:00 2001
From: Johan Frick <johan.frick@gmail.com>
Date: Wed, 27 Sep 2023 19:17:47 +0200
Subject: [PATCH] feature: top favorites

---
 README.md                     |  4 ++++
 src/editor/advanced-editor.ts | 17 ++++++++++++++++-
 src/sections/media-browser.ts | 15 ++++++++++++++-
 src/types.ts                  |  1 +
 4 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 8b83e102..86be59e8 100644
--- a/README.md
+++ b/README.md
@@ -143,6 +143,10 @@ customThumbnailIfMissing:
 mediaBrowserTitlesToIgnore:
   - Local Media
   - My Bad Playlist
+topFavorites: # Show these favorites at the top of the list
+  - Legendary
+  - Country Rocks
+  - Kacey Musgraves Radio
 ```
 
 ## Using individual section cards
diff --git a/src/editor/advanced-editor.ts b/src/editor/advanced-editor.ts
index 306d9f66..13657c26 100644
--- a/src/editor/advanced-editor.ts
+++ b/src/editor/advanced-editor.ts
@@ -27,12 +27,18 @@ export const ADVANCED_SCHEMA = [
     name: 'mediaBrowserShowTitleForThumbnailIcons',
     selector: { boolean: {} },
   },
+  {
+    type: 'string',
+    name: 'topFavorites',
+  },
 ];
 
 class AdvancedEditor extends BaseEditor {
   protected render(): TemplateResult {
+    const topFavorites = this.store.config.topFavorites ?? [];
+    const data = { ...this.store.config, topFavorites: topFavorites.join(', ') };
     return html`
-      <sonos-card-editor-form .schema=${ADVANCED_SCHEMA} .store=${this.store}></sonos-card-editor-form>
+      <sonos-card-editor-form .schema=${ADVANCED_SCHEMA} .store=${this.store} .data=${data} .changed=${this.changed}></sonos-card-editor-form>
       <p>
         The following needs to be configured using code (YAML): 
         <ul>
@@ -44,6 +50,15 @@ class AdvancedEditor extends BaseEditor {
       </p>
     `;
   }
+  protected changed(ev: CustomEvent): void {
+    const changed = ev.detail.value;
+    this.config = {
+      ...this.config,
+      ...changed,
+      topFavorites: changed.topFavorites.split(/ *, */),
+    };
+    this.configChanged();
+  }
 }
 
 customElements.define('sonos-card-advanced-editor', AdvancedEditor);
diff --git a/src/sections/media-browser.ts b/src/sections/media-browser.ts
index fce5c6a6..26a7d5cf 100755
--- a/src/sections/media-browser.ts
+++ b/src/sections/media-browser.ts
@@ -139,7 +139,20 @@ export class MediaBrowser extends LitElement {
       this.mediaPlayers,
       this.config.mediaBrowserTitlesToIgnore,
     );
-    allFavorites = allFavorites.sort((a, b) => a.title.localeCompare(b.title, 'en', { sensitivity: 'base' }));
+    allFavorites = allFavorites.sort((a, b) => {
+      const topFavorites = this.config.topFavorites ?? [];
+      const aIndex = topFavorites.indexOf(a.title);
+      const bIndex = topFavorites.indexOf(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 [
       ...(this.config.customSources?.[this.activePlayer.id]?.map(MediaBrowser.createSource) || []),
       ...(this.config.customSources?.all?.map(MediaBrowser.createSource) || []),
diff --git a/src/types.ts b/src/types.ts
index 184f9205..9cb61e12 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -40,6 +40,7 @@ export interface CardConfig extends LovelaceCardConfig {
   mediaBrowserTitlesToIgnore?: string[];
   mediaBrowserItemsPerRow: number;
   mediaBrowserShowTitleForThumbnailIcons?: boolean;
+  topFavorites?: string[];
 }
 
 export interface MediaArtworkOverride {