feature: configurable artworkMinHeight

README.md

@@ -147,6 +147,7 @@ showAudioInputFormat: true # default is false. Will show the audio input format
 fallbackArtwork: https://cdn-icons-png.flaticon.com/512/651/651717.png # Override default fallback artwork image if artwork is missing for the currently selected media.
 entitiesToIgnoreVolumeLevelFor: # default is empty. Use this if you want to ignore volume level for certain players in the player section. Useful if you have a main device with fixed volume.
   - media_player.my_sonos_port_device
+artworkMinHeight: 10 # default is 5. Use this to change the minimum height of the artwork in the player section. Unit is in rem.
 
 # media browser specific
 mediaBrowserItemsPerRow: 1 # default is 4. Use this to show items as list.

src/editor/advanced-editor.ts

@@ -26,6 +26,14 @@ export const ADVANCED_SCHEMA = [
     valueMin: 1,
     valueMax: 100,
   },
+  {
+    type: 'integer',
+    name: 'artworkMinHeight',
+    help: 'Minimum height of the artwork in rem',
+    default: 5,
+    required: true,
+    valueMin: 0,
+  },
   {
     name: 'hideBrowseMediaButton',
     selector: { boolean: {} },

src/sections/player.ts

@@ -23,12 +23,17 @@ export class Player extends LitElement {
     return html`
       <div class="container">
         <sonos-player-header class="header" .store=${this.store}></sonos-player-header>
-        <div class="artwork" style=${this.getBackgroundImage()}></div>
+        <div class="artwork" style=${this.artworkStyle()}></div>
         <sonos-player-controls class="controls" .store=${this.store}></sonos-player-controls>
       </div>
     `;
   }
 
+  private artworkStyle() {
+    const minHeight = this.config.artworkMinHeight ?? 5;
+    return `${this.getBackgroundImage()}; min-height: ${minHeight}rem`;
+  }
+
   private getBackgroundImage() {
     const fallbackImage =
       this.config.fallbackArtwork ??
@@ -105,7 +110,7 @@ export class Player extends LitElement {
         flex-shrink: 0;
         width: 100%;
         height: 100%;
-        min-height: 10rem;
+        min-height: 5rem;
         background-position: center;
         background-repeat: no-repeat;
         background-size: contain;

src/types.ts

@@ -58,6 +58,7 @@ export interface CardConfig extends LovelaceCardConfig {
   hideVolumeCogwheel?: boolean;
   dynamicVolumeSliderThreshold?: number;
   dynamicVolumeSliderMax?: number;
+  artworkMinHeight?: number;
 }
 
 export interface MediaArtworkOverride {