feature: top favorites

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

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);

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) || []),

src/types.ts

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