feat: Enhance media browser layout and functionality with new navigation features and button adjustments

Author: punxaphil

scripts/sync-upstream.sh

@@ -78,6 +78,15 @@ sed -i '' \
   -e "s/gap: '16px'/gap: '8px'/g" \
   "$UPSTREAM_DIR/ha-media-player-browse.ts"
 
+# Reduce play button size for smaller grid items
+echo "Reducing play button size..."
+sed -i '' \
+  -e 's/--mdc-icon-button-size: 70px/--mdc-icon-button-size: 40px/g' \
+  -e 's/--mdc-icon-size: 48px/--mdc-icon-size: 24px/g' \
+  -e 's/top: calc(50% - 40px)/top: calc(50% - 20px)/g' \
+  -e 's/right: calc(50% - 35px)/right: calc(50% - 20px)/g' \
+  "$UPSTREAM_DIR/ha-media-player-browse.ts"
+
 # Save version info
 echo "$RELEASE_TAG" > "$VERSION_FILE"
 echo "Synced: $(date -u +"%Y-%m-%d %H:%M:%S UTC")" >> "$VERSION_FILE"

src/components/favorites-header.ts

@@ -14,7 +14,7 @@ class FavoritesHeader extends LitElement {
     return html`
       <div class="title">${favoritesConfig.title ?? 'All Favorites'}</div>
       <ha-icon-button
-        hide=${favoritesConfig.hideBrowseMediaButton || nothing}
+        hide=${!favoritesConfig.showBrowseMediaButton || nothing}
         @click=${() => this.store.mediaBrowseService.showBrowseMedia(this.store.activePlayer, this)}
         .path=${mdiPlayBoxMultiple}
       ></ha-icon-button>

src/sections/media-browser.ts

@@ -1,40 +1,161 @@
-import { css, html, LitElement, nothing } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { mdiArrowLeft } from '@mdi/js';
+import {
+  mdiAlphaABoxOutline,
+  mdiArrowLeft,
+  mdiDotsVertical,
+  mdiGrid,
+  mdiHome,
+  mdiHomeImportOutline,
+  mdiListBoxOutline,
+} from '@mdi/js';
 import Store from '../model/store';
 import '../upstream/ha-media-player-browse';
 import { MEDIA_ITEM_SELECTED } from '../constants';
 import { customEvent } from '../utils/utils';
 import { MediaPlayerItem } from '../types';
 
+type LayoutType = 'auto' | 'grid' | 'list';
+
 interface NavigateId {
   media_content_id?: string;
   media_content_type?: string;
   title?: string;
 }
 
+const START_PATH_KEY = 'sonos-card-media-browser-start';
+const LAYOUT_KEY = 'sonos-card-media-browser-layout';
+
+// Module-level state to persist across section switches (resets on page reload)
+let currentPath: NavigateId[] | null = null;
+let currentPathTitle = '';
+
 export class MediaBrowser extends LitElement {
   @property({ attribute: false }) store!: Store;
-  @state() private navigateIds: NavigateId[] = [{ media_content_id: undefined, media_content_type: undefined }];
+  @state() private navigateIds: NavigateId[] = [];
   @state() private currentTitle = '';
+  @state() private isCurrentPathStart = false;
+  @state() private layout: LayoutType = 'auto';
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.initializeNavigateIds();
+    this.loadLayout();
+  }
+
+  private loadLayout() {
+    const savedLayout = localStorage.getItem(LAYOUT_KEY) as LayoutType | null;
+    if (savedLayout && ['auto', 'grid', 'list'].includes(savedLayout)) {
+      this.layout = savedLayout;
+    }
+  }
+
+  private setLayout(layout: LayoutType) {
+    this.layout = layout;
+    localStorage.setItem(LAYOUT_KEY, layout);
+  }
+
+  private handleMenuAction = (ev: CustomEvent<{ index: number }>) => {
+    const layouts: LayoutType[] = ['auto', 'grid', 'list'];
+    this.setLayout(layouts[ev.detail.index]);
+  };
+
+  private getStartPath(): NavigateId[] | null {
+    const startPath = localStorage.getItem(START_PATH_KEY);
+    if (startPath) {
+      try {
+        return JSON.parse(startPath);
+      } catch {
+        return null;
+      }
+    }
+    return null;
+  }
+
+  private initializeNavigateIds() {
+    // If we have a cached path from section switching, use it
+    if (currentPath) {
+      this.navigateIds = currentPath;
+      this.currentTitle = currentPathTitle;
+      this.updateIsCurrentPathStart();
+      return;
+    }
+
+    // On page reload: use saved start path if available, otherwise root
+    const startPath = this.getStartPath();
+    if (startPath?.length) {
+      this.navigateIds = startPath;
+      const lastItem = this.navigateIds[this.navigateIds.length - 1];
+      this.currentTitle = lastItem?.title || '';
+    } else {
+      this.navigateIds = [{ media_content_id: undefined, media_content_type: undefined }];
+    }
+    this.updateIsCurrentPathStart();
+  }
+
+  private saveCurrentPath() {
+    currentPath = this.navigateIds;
+    currentPathTitle = this.currentTitle;
+  }
+
+  private updateIsCurrentPathStart() {
+    const startPath = this.getStartPath();
+    this.isCurrentPathStart = JSON.stringify(this.navigateIds) === JSON.stringify(startPath);
+  }
+
+  private setAsStartPath = () => {
+    localStorage.setItem(START_PATH_KEY, JSON.stringify(this.navigateIds));
+    this.isCurrentPathStart = true;
+  };
 
   render() {
     const activePlayer = this.store.activePlayer;
     const canGoBack = this.navigateIds.length > 1;
 
     return html`
-      ${canGoBack
-        ? html`
-            <div class="header">
-              <ha-icon-button .path=${mdiArrowLeft} @click=${this.goBack}></ha-icon-button>
-              <span class="title">${this.currentTitle}</span>
-            </div>
-          `
-        : nothing}
+      <div class="header">
+        ${canGoBack
+        ? html`<ha-icon-button .path=${mdiArrowLeft} @click=${this.goBack}></ha-icon-button>`
+        : html`<div class="spacer"></div>`}
+        <span class="title">${this.currentTitle || 'Media Browser'}</span>
+        <ha-icon-button
+          .path=${this.isCurrentPathStart ? mdiHome : mdiHomeImportOutline}
+          @click=${this.setAsStartPath}
+          title="Set as start page"
+        ></ha-icon-button>
+        <ha-button-menu fixed corner="BOTTOM_END" @action=${this.handleMenuAction}>
+          <ha-icon-button slot="trigger" .path=${mdiDotsVertical}></ha-icon-button>
+          <ha-list-item graphic="icon">
+            Auto
+            <ha-svg-icon
+              class=${this.layout === 'auto' ? 'selected' : ''}
+              slot="graphic"
+              .path=${mdiAlphaABoxOutline}
+            ></ha-svg-icon>
+          </ha-list-item>
+          <ha-list-item graphic="icon">
+            Grid
+            <ha-svg-icon
+              class=${this.layout === 'grid' ? 'selected' : ''}
+              slot="graphic"
+              .path=${mdiGrid}
+            ></ha-svg-icon>
+          </ha-list-item>
+          <ha-list-item graphic="icon">
+            List
+            <ha-svg-icon
+              class=${this.layout === 'list' ? 'selected' : ''}
+              slot="graphic"
+              .path=${mdiListBoxOutline}
+            ></ha-svg-icon>
+          </ha-list-item>
+        </ha-button-menu>
+      </div>
       <sonos-ha-media-player-browse
         .hass=${this.store.hass}
         .entityId=${activePlayer.id}
         .navigateIds=${this.navigateIds}
+        .preferredLayout=${this.layout}
         .action=${'play'}
         @media-picked=${this.onMediaPicked}
         @media-browsed=${this.onMediaBrowsed}
@@ -47,6 +168,8 @@ export class MediaBrowser extends LitElement {
       this.navigateIds = this.navigateIds.slice(0, -1);
       const lastItem = this.navigateIds[this.navigateIds.length - 1];
       this.currentTitle = lastItem?.title || '';
+      this.saveCurrentPath();
+      this.updateIsCurrentPathStart();
     }
   };
 
@@ -60,6 +183,8 @@ export class MediaBrowser extends LitElement {
     this.navigateIds = event.detail.ids;
     const lastItem = this.navigateIds[this.navigateIds.length - 1];
     this.currentTitle = lastItem?.title || event.detail.current?.title || '';
+    this.saveCurrentPath();
+    this.updateIsCurrentPathStart();
   };
 
   static get styles() {
@@ -73,17 +198,24 @@ export class MediaBrowser extends LitElement {
       .header {
         display: flex;
         align-items: center;
-        padding: 8px;
+        padding: 4px 8px;
         border-bottom: 1px solid var(--divider-color);
         background: var(--card-background-color);
       }
       .title {
+        flex: 1;
         font-weight: 500;
         font-size: 1.1em;
-        margin-left: 8px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        text-align: center;
+      }
+      .spacer {
+        width: 48px;
+      }
+      ha-svg-icon.selected {
+        color: var(--primary-color);
       }
       sonos-ha-media-player-browse {
         --mdc-icon-size: 24px;

src/types.ts

@@ -88,7 +88,7 @@ export interface FavoritesConfig {
   customFavorites?: CustomFavorites;
   customThumbnails?: CustomFavoriteThumbnails;
   customThumbnailsIfMissing?: CustomFavoriteThumbnails;
-  hideBrowseMediaButton?: boolean;
+  showBrowseMediaButton?: boolean;
   hideHeader?: boolean;
   hideTitleForThumbnailIcons?: boolean;
   iconBorder?: string;
@@ -104,6 +104,10 @@ export interface FavoritesConfig {
   topItems?: string[];
 }
 
+export interface MediaBrowserConfig {
+  title?: string;
+}
+
 export interface GroupsConfig {
   buttonWidth?: number;
   compact?: boolean;
@@ -181,6 +185,7 @@ export interface CardConfig extends LovelaceCardConfig {
   grouping?: GroupingConfig;
   volumes?: VolumesConfig;
   queue?: QueueConfig;
+  mediaBrowser?: MediaBrowserConfig;
 }
 
 export interface MediaArtworkOverride {

src/upstream/ha-media-player-browse.ts

@@ -1079,15 +1079,15 @@ export class HaMediaPlayerBrowse extends LitElement {
           position: absolute;
           transition: color 0.5s;
           border-radius: var(--ha-border-radius-circle);
-          top: calc(50% - 40px);
-          right: calc(50% - 35px);
+          top: calc(50% - 20px);
+          right: calc(50% - 20px);
           opacity: 0;
           transition: opacity 0.1s ease-out;
         }
 
         .child .play:not(.can_expand) {
-          --mdc-icon-button-size: 70px;
-          --mdc-icon-size: 48px;
+          --mdc-icon-button-size: 40px;
+          --mdc-icon-size: 24px;
           background-color: var(--primary-color);
           color: var(--text-primary-color);
         }