fix: itemsPerRow not working when browsing media

Author: punxaphil

scripts/sync-upstream.sh

@@ -75,14 +75,30 @@ sed -i '' 's/@customElement("ha-media-player-browse")/@customElement("sonos-ha-m
 
 # Apply Sonos Card customizations to grid layout
 echo "Applying Sonos Card grid customizations..."
-# Change grid item size from 175px to 100px for compact display (4 columns instead of 2)
+# Change grid item size heights and gap
 sed -i '' \
-  -e "s/width: '175px'/width: '100px'/g" \
   -e "s/height: '312px'/height: '180px'/g" \
   -e "s/height: '225px'/height: '150px'/g" \
   -e "s/gap: '16px'/gap: '8px'/g" \
   "$UPSTREAM_DIR/ha-media-player-browse.ts"
 
+# Replace the hardcoded itemSize with getGridItemSize function call
+echo "Updating grid to use getGridItemSize..."
+sed -i '' "s/itemSize: {[^}]*width: '175px'[^}]*}/itemSize: getGridItemSize(this.itemsPerRow, childrenMediaClass.thumbnail_ratio === 'portrait')/g" \
+  "$UPSTREAM_DIR/ha-media-player-browse.ts"
+
+# Add itemsPerRow property to the component
+echo "Adding itemsPerRow property..."
+sed -i '' '/public preferredLayout.*auto/a\
+\
+  @property({ type: Number }) public itemsPerRow?: number;
+' "$UPSTREAM_DIR/ha-media-player-browse.ts"
+
+# Remove type import of LitVirtualizer (causes duplicate registration)
+echo "Fixing LitVirtualizer import..."
+sed -i '' '/^import type { LitVirtualizer }/d' "$UPSTREAM_DIR/ha-media-player-browse.ts"
+sed -i '' 's/private _virtualizer?: LitVirtualizer/private _virtualizer?: any/g' "$UPSTREAM_DIR/ha-media-player-browse.ts"
+
 # Reduce play button size for smaller grid items
 echo "Reducing play button size..."
 sed -i '' \
@@ -92,13 +108,29 @@ sed -i '' \
   -e 's/right: calc(50% - 35px)/right: calc(50% - 20px)/g' \
   "$UPSTREAM_DIR/ha-media-player-browse.ts"
 
+# Update virtualizer.ts to conditionally register lit-virtualizer
+echo "Updating virtualizer.ts..."
+cat > "$UPSTREAM_DIR/resources/virtualizer.ts" << 'EOF'
+// @ts-nocheck
+import { LitVirtualizer } from '@lit-labs/virtualizer/LitVirtualizer.js';
+
+// Only register if not already defined (HA might have it already)
+if (!customElements.get('lit-virtualizer')) {
+    customElements.define('lit-virtualizer', LitVirtualizer);
+}
+
+export const loadVirtualizer = async (): Promise<void> => {
+    // Element is registered above via static import
+};
+EOF
+
 # Save version info
 echo "$RELEASE_TAG" > "$VERSION_FILE"
 echo "Synced: $(date -u +"%Y-%m-%d %H:%M:%S UTC")" >> "$VERSION_FILE"
 
-# Add filterOutIgnoredMediaSources import to ha-media-player-browse.ts
-echo "Adding filterOutIgnoredMediaSources import..."
-sed -i '' '1s/^/import { filterOutIgnoredMediaSources } from '\''..\/utils\/media-browse-utils'\'';\n/' \
+# Add custom imports to ha-media-player-browse.ts
+echo "Adding custom imports..."
+sed -i '' '1s/^/import { filterOutIgnoredMediaSources, getGridItemSize } from '\''..\/utils\/media-browse-utils'\'';\n/' \
   "$UPSTREAM_DIR/ha-media-player-browse.ts"
 
 # Add @ts-nocheck to all upstream TypeScript files
@@ -112,7 +144,8 @@ done
 echo ""
 echo "✅ Synced from HA frontend release: $RELEASE_TAG"
 echo "✅ Component renamed to 'sonos-ha-media-player-browse'"
-echo "✅ Grid customizations applied (100px items, 8px gap)"
+echo "✅ Grid customizations applied (dynamic itemsPerRow width, 8px gap)"
+echo "✅ itemsPerRow property added for configurable grid columns"
 echo "✅ Non-audio media sources filtered (TTS, camera, images)"
 echo "✅ @ts-nocheck added to all upstream files"
 echo "✅ Version saved to $VERSION_FILE"

src/sections/media-browser.ts

@@ -387,6 +387,7 @@ export class MediaBrowser extends LitElement {
         .entityId=${activePlayer.id}
         .navigateIds=${this.navigateIds}
         .preferredLayout=${this.layout}
+        .itemsPerRow=${mediaBrowserConfig.itemsPerRow}
         .action=${'play'}
         @media-picked=${this.onMediaPicked}
         @media-browsed=${this.onMediaBrowsed}

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

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import type { LitVirtualizer } from '@lit-labs/virtualizer';
 import { grid } from '@lit-labs/virtualizer/layouts/grid.js';
 
 import { mdiArrowUpRight, mdiKeyboard, mdiPlay, mdiPlus } from '@mdi/js';
@@ -28,7 +27,7 @@ import { loadVirtualizer } from './resources/virtualizer';
 import type { HomeAssistant } from 'custom-card-helpers';
 import { brandsUrl, extractDomainFromBrandUrl, isBrandUrl } from './util/brands-url';
 import { documentationUrl } from './util/documentation-url';
-import { filterOutIgnoredMediaSources } from '../utils/media-browse-utils';
+import { filterOutIgnoredMediaSources, getGridItemSize } from '../utils/media-browse-utils';
 // HA components are available at runtime - no need to import
 import type { ManualMediaPickedEvent } from './ha-browse-media-manual';
 import type { TtsMediaPickedEvent } from './ha-browse-media-tts';
@@ -75,6 +74,8 @@ export class HaMediaPlayerBrowse extends LitElement {
   @property({ attribute: false })
   public preferredLayout: MediaPlayerLayoutType = 'auto';
 
+  @property({ type: Number }) public itemsPerRow?: number;
+
   @property({ type: Boolean }) public dialog = false;
 
   @property({ attribute: false }) public navigateIds: MediaPlayerItemId[] = [];
@@ -105,7 +106,7 @@ export class HaMediaPlayerBrowse extends LitElement {
 
   @query('.content') private _content?: HTMLDivElement;
 
-  @query('lit-virtualizer') private _virtualizer?: LitVirtualizer;
+  @query('lit-virtualizer') private _virtualizer?: any;
 
   private _observed = false;
 
@@ -474,10 +475,7 @@ export class HaMediaPlayerBrowse extends LitElement {
                             <lit-virtualizer
                               scroller
                               .layout=${grid({
-                  itemSize: {
-                    width: '100px',
-                    height: childrenMediaClass.thumbnail_ratio === 'portrait' ? '180px' : '150px',
-                  },
+                  itemSize: getGridItemSize(this.itemsPerRow, childrenMediaClass.thumbnail_ratio === 'portrait'),
                   gap: '8px',
                   flex: { preserve: 'aspect-ratio' },
                   justify: 'space-evenly',

src/upstream/resources/virtualizer.ts

@@ -1,4 +1,11 @@
 // @ts-nocheck
+import { LitVirtualizer } from '@lit-labs/virtualizer/LitVirtualizer.js';
+
+// Only register if not already defined (HA might have it already)
+if (!customElements.get('lit-virtualizer')) {
+    customElements.define('lit-virtualizer', LitVirtualizer);
+}
+
 export const loadVirtualizer = async (): Promise<void> => {
-    await import('@lit-labs/virtualizer');
+    // Element is registered above via static import
 };

src/utils/media-browse-utils.ts

@@ -65,6 +65,41 @@ export function filterOutIgnoredMediaSources<T extends { media_content_id?: stri
   return items.filter((item) => !IGNORED_MEDIA_SOURCES.some((src) => item.media_content_id?.startsWith(src)));
 }
 
+/**
+ * Calculate grid item size based on itemsPerRow setting.
+ * Used by media browser to support configurable grid columns.
+ */
+export function getGridItemSize(
+  itemsPerRow: number | undefined,
+  isPortrait: boolean,
+): { width: string; height: string } {
+  const defaultWidth = 100;
+  const defaultHeight = isPortrait ? 180 : 150;
+
+  if (!itemsPerRow || itemsPerRow === 4) {
+    return { width: `${defaultWidth}px`, height: `${defaultHeight}px` };
+  }
+
+  // Width map based on typical card width (~400px)
+  const widthMap: Record<number, number> = {
+    1: 380,
+    2: 180,
+    3: 120,
+    4: 100,
+    5: 75,
+    6: 60,
+    7: 50,
+    8: 42,
+  };
+
+  const width = widthMap[itemsPerRow] || defaultWidth;
+  // Scale height proportionally to maintain aspect ratio
+  const scale = width / defaultWidth;
+  const height = Math.round(defaultHeight * scale);
+
+  return { width: `${width}px`, height: `${height}px` };
+}
+
 export function itemsWithFallbacks(mediaPlayerItems: MediaPlayerItem[], config: CardConfig): MediaPlayerItem[] {
   const itemsWithImage = hasItemsWithImage(mediaPlayerItems);
   return mediaPlayerItems.map((item) => {