feature: make it possible to have artwork as background for the entir…

…e player section

README.md

@@ -144,6 +144,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
+artworkAsBackground: true # default is false. Will show the artwork as background for the player section.
 
 # media browser specific
 mediaBrowserItemsPerRow: 1 # default is 4. Use this to show items as list.

src/card.ts

@@ -174,6 +174,7 @@ export class Card extends LitElement {
       height: `${height}rem`,
       minWidth: `20rem`,
       maxWidth: `${width}rem`,
+      overflow: 'hidden',
     });
   }
 

src/components/player-controls.ts

@@ -57,8 +57,6 @@ class PlayerControls extends LitElement {
   static get styles() {
     return css`
       .main {
-        margin: 0.25rem;
-        padding: 0.5rem;
         overflow: hidden auto;
       }
       .icons {

src/components/player-header.ts

@@ -28,8 +28,6 @@ class PlayerHeader extends LitElement {
   static get styles() {
     return css`
       .info {
-        margin: 0.25rem;
-        padding: 0.5rem 3.5rem;
         text-align: center;
       }
 

src/editor/advanced-editor.ts

@@ -56,6 +56,10 @@ export const ADVANCED_SCHEMA = [
     name: 'skipApplyButtonWhenGrouping',
     selector: { boolean: {} },
   },
+  {
+    name: 'artworkAsBackground',
+    selector: { boolean: {} },
+  },
   {
     type: 'string',
     help: 'Override default fallback artwork image if artwork is missing for the currently selected media',

src/sections/player.ts

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../components/player-controls';
 import '../components/player-header';
@@ -20,11 +20,21 @@ export class Player extends LitElement {
     this.config = this.store.config;
     this.activePlayer = this.store.activePlayer;
 
+    const artworkAsBackground = this.config.artworkAsBackground;
+    const backgroundImage = this.getBackgroundImage();
     return html`
-      <div class="container">
-        <sonos-player-header class="header" .store=${this.store}></sonos-player-header>
-        <div class="artwork" style=${this.getBackgroundImage()}></div>
-        <sonos-player-controls class="controls" .store=${this.store}></sonos-player-controls>
+      <div class="container" style=${artworkAsBackground && backgroundImage}>
+        <sonos-player-header
+          class="header"
+          background=${artworkAsBackground || nothing}
+          .store=${this.store}
+        ></sonos-player-header>
+        <div class="artwork" hide=${artworkAsBackground || nothing} style=${backgroundImage}></div>
+        <sonos-player-controls
+          class="controls"
+          background=${artworkAsBackground || nothing}
+          .store=${this.store}
+        ></sonos-player-controls>
       </div>
     `;
   }
@@ -87,15 +97,22 @@ export class Player extends LitElement {
           'artwork'
           'controls';
         min-height: 100%;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
       }
 
       .header {
         grid-area: header;
+        margin: 0.75rem 3.25rem;
+        padding: 0.5rem;
       }
 
       .controls {
         grid-area: controls;
         overflow-y: auto;
+        margin: 0.25rem;
+        padding: 0.5rem;
       }
 
       .artwork {
@@ -109,6 +126,15 @@ export class Player extends LitElement {
         background-repeat: no-repeat;
         background-size: contain;
       }
+
+      *[hide] {
+        display: none;
+      }
+
+      *[background] {
+        background-color: rgba(var(--rgb-card-background-color), 0.65);
+        border-radius: 10px;
+      }
     `;
   }
 }

src/types.ts

@@ -55,6 +55,7 @@ export interface CardConfig extends LovelaceCardConfig {
   mediaBrowserTitle?: string;
   adjustVolumeRelativeToMainPlayer?: boolean;
   skipApplyButtonWhenGrouping?: boolean;
+  artworkAsBackground?: boolean;
 }
 
 export interface MediaArtworkOverride {