[ 1.0.26 ] * Added playerBackgroundImageSize config option that specifies the size of the player background image. Defaults to "100% 100%"; More info can be found on the [wiki docs](https://github.com/thlucas1/spotifyplus_card/wiki/Configuration-Options#playerbackgroundimagesize).

Author: thlucas1

CHANGELOG.md

@@ -6,6 +6,10 @@ Change are listed in reverse chronological order (newest to oldest).
 
 <span class="changelog">
 
+###### [ 1.0.26 ] - 2024/12/24
+
+  * Added `playerBackgroundImageSize` config option that specifies the size of the player background image.  Defaults to "100% 100%"; More info can be found on the [wiki docs](https://github.com/thlucas1/spotifyplus_card/wiki/Configuration-Options#playerbackgroundimagesize).
+
 ###### [ 1.0.25 ] - 2024/12/23
 
   * Ability to play track favorites starting from selected favorite track, which will now automatically add the following tracks (up to 50) to the player queue.  Prior to this, only the selected track would play and then play would stop.  Note that the 50 track limitation is a Spotify Web API limit.

SpotifyPlusCard.njsproj

@@ -141,12 +141,9 @@
     <TypeScriptCompile Include="src\components\userpreset-actions.ts" />
     <TypeScriptCompile Include="src\editor\category-browser-editor.ts" />
     <TypeScriptCompile Include="src\editor\episode-fav-browser-editor.ts" />
-    <TypeScriptCompile Include="src\events\category-display.ts">
-      <SubType>Code</SubType>
-    </TypeScriptCompile>
-    <TypeScriptCompile Include="src\events\filter-section-media.ts">
-      <SubType>Code</SubType>
-    </TypeScriptCompile>
+    <TypeScriptCompile Include="src\editor\player-general-editor.ts" />
+    <TypeScriptCompile Include="src\events\category-display.ts" />
+    <TypeScriptCompile Include="src\events\filter-section-media.ts" />
     <TypeScriptCompile Include="src\events\search-media.ts" />
     <TypeScriptCompile Include="src\sections\category-browser.ts" />
     <TypeScriptCompile Include="src\sections\episode-fav-browser.ts" />

src/components/player-body-track.ts

@@ -429,6 +429,12 @@ export class PlayerBodyTrack extends PlayerBodyBase {
 
     try {
 
+      // if editing the card, then don't bother updating actions as we will not
+      // display the actions dialog.
+      if (this.isCardInEditPreview) {
+        return false;
+      }
+
       // process actions that don't require a progress indicator.
       if (action == Actions.AlbumCopyPresetToClipboard) {
 

src/constants.ts

@@ -1,7 +1,7 @@
 import { css } from 'lit';
 
 /** current version of the card. */
-export const CARD_VERSION = '1.0.25';
+export const CARD_VERSION = '1.0.26';
 
 /** SpotifyPlus integration domain identifier. */
 export const DOMAIN_SPOTIFYPLUS = 'spotifyplus';
@@ -49,6 +49,9 @@ export const PLAYER_CONTROLS_BACKGROUND_COLOR_DEFAULT = '#000000BB';
 /** default size of the icons in the Player controls area. */
 export const PLAYER_CONTROLS_ICON_SIZE_DEFAULT = '2.0rem';
 
+/** default size of the player background image. */
+export const PLAYER_BACKGROUND_IMAGE_SIZE_DEFAULT = "100% 100%";
+
 
 export const listStyle = css`
   .list {

src/editor/player-editor.ts

@@ -6,24 +6,26 @@ import { choose } from 'lit/directives/choose.js';
 // our imports.
 import { BaseEditor } from './base-editor';
 import './editor-form';
+import './player-general-editor';
 import './player-header-editor';
 import './player-controls-editor';
 import './player-volume-editor';
 
 /** Configuration area editor sections enum. */
 enum ConfigArea {
+  GENERAL = 'General',
   HEADER = 'Header',
   CONTROLS = 'Controls',
   VOLUME = 'Volume',
 }
 
 /** Configuration area editor section keys array. */
-const { HEADER, CONTROLS, VOLUME } = ConfigArea;
+const { GENERAL, HEADER, CONTROLS, VOLUME } = ConfigArea;
 
 
 class PlayerSettingsEditor extends BaseEditor {
 
-  @state() private configArea = HEADER;
+  @state() private configArea = GENERAL;
 
   /**
    * Invoked on each update to perform rendering tasks. 
@@ -41,7 +43,7 @@ class PlayerSettingsEditor extends BaseEditor {
         Settings that control the Player section look and feel
       </div>
       <ha-control-button-group>
-        ${[HEADER, CONTROLS, VOLUME].map(
+        ${[GENERAL, HEADER, CONTROLS, VOLUME].map(
           (configArea) => html`
             <ha-control-button
               selected=${this.configArea === configArea || nothing}
@@ -62,6 +64,10 @@ class PlayerSettingsEditor extends BaseEditor {
 
     // show the desired section editor.
     return choose(this.configArea, [
+      [
+        GENERAL,
+        () => html`<spc-player-general-editor .config=${this.config} .hass=${this.hass}></spc-player-general-editor>`,
+      ],
       [
         HEADER,
         () => html`<spc-player-header-editor .config=${this.config} .hass=${this.hass}></spc-player-header-editor>`,

src/editor/player-general-editor.ts

@@ -0,0 +1,66 @@
+// lovelace card imports.
+import { css, html, TemplateResult } from 'lit';
+
+// our imports.
+import { BaseEditor } from './base-editor';
+import { Section } from '../types/section';
+import { PLAYER_BACKGROUND_IMAGE_SIZE_DEFAULT } from '../constants';
+
+
+const CONFIG_SETTINGS_SCHEMA = [
+  {
+    name: 'playerBackgroundImageSize',
+    label: 'Size of the player background image',
+    help: 'default is "' + PLAYER_BACKGROUND_IMAGE_SIZE_DEFAULT + '"',
+    required: false,
+    type: 'string',
+  },
+];
+
+
+class PlayerGeneralSettingsEditor extends BaseEditor {
+
+  /**
+   * Invoked on each update to perform rendering tasks. 
+   * 
+   * This method may return any value renderable by lit-html's `ChildPart` (typically a `TemplateResult`). 
+   * Setting properties inside this method will *not* trigger the element to update.
+  */
+  protected render(): TemplateResult {
+
+    // ensure store is created.
+    super.createStore();
+
+    // render html.
+    return html`
+      <div class="schema-title">
+        Player General area settings
+      </div>
+      <spc-editor-form
+        .schema=${CONFIG_SETTINGS_SCHEMA}
+        .section=${Section.PLAYER}
+        .store=${this.store}
+        .config=${this.config}
+        .hass=${this.hass}
+      ></spc-editor-form>
+    `;
+  }
+
+
+  /**
+   * Style definitions used by this TemplateResult.
+   */
+  static get styles() {
+    return css`
+      .schema-title {
+        margin: 0.4rem 0;
+        text-align: left;
+        font-size: 1rem;
+        color: var(--secondary-text-color);
+      }
+      `;
+  }
+
+}
+
+customElements.define('spc-player-general-editor', PlayerGeneralSettingsEditor);

src/sections/player.ts

@@ -1,7 +1,7 @@
 // lovelace card imports.
 import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit';
 import { customElement, property, state } from "lit/decorators.js";
-import { styleMap } from 'lit-html/directives/style-map.js';
+import { styleMap, StyleInfo } from 'lit-html/directives/style-map.js';
 
 // ** IMPORTANT - Vibrant notes:
 // ensure that you have "compilerOptions"."lib": [ ... , "WebWorker" ] specified
@@ -125,6 +125,7 @@ export class Player extends LitElement implements playerAlerts {
    * style definitions used by this component.
    * */
   static get styles() {
+
     return css`
 
       .hoverable:focus,
@@ -148,7 +149,7 @@ export class Player extends LitElement implements playerAlerts {
         /*background-color: #000000;*/
         background-position: center;
         background-repeat: no-repeat;
-        background-size: var(--spc-player-background-size);
+        background-size: var(--spc-player-background-size, 100% 100%);  /* PLAYER_BACKGROUND_IMAGE_SIZE_DEFAULT */
         text-align: -webkit-center;
         height: 100%;
         width: 100%;
@@ -215,12 +216,16 @@ export class Player extends LitElement implements playerAlerts {
    */
   private styleBackgroundImage() {
 
-    // stretch the background cover art to fit the entire player.
-    //const backgroundSize = 'cover';
-    //const backgroundSize = 'contain';
-    let backgroundSize = '100% 100%';
-    if (this.config.width == 'fill') {
-      // if in fill mode, then do not stretch the image.
+    // get default player background size.
+    let backgroundSize: string | undefined;
+
+    // allow user configuration to override background size.
+    if (this.config.playerBackgroundImageSize) {
+      backgroundSize = this.config.playerBackgroundImageSize;
+    }
+
+    // if not configured AND in fill mode, then do not stretch the background image.
+    if ((!backgroundSize) && (this.config.width == 'fill')) {
       backgroundSize = 'contain';
     }
 
@@ -262,22 +267,25 @@ export class Player extends LitElement implements playerAlerts {
     // set player controls and volume controls icon size.
     const playerControlsIconSize = this.config.playerControlsIconSize || PLAYER_CONTROLS_ICON_SIZE_DEFAULT;
 
-    return styleMap({
-      'background-image': `url(${imageUrl})`,
-      '--spc-player-background-size': `${backgroundSize}`,
-      '--spc-player-header-bg-color': `${headerBackgroundColor}`,
-      '--spc-player-header-color': `#ffffff`,
-      '--spc-player-controls-bg-color': `${controlsBackgroundColor}`,
-      '--spc-player-controls-color': `#ffffff`,
-      '--spc-player-controls-icon-size': `${playerControlsIconSize}`,
-      '--spc-player-controls-icon-button-size': `var(--spc-player-controls-icon-size, ${PLAYER_CONTROLS_ICON_SIZE_DEFAULT}) + 0.75rem`,
-      '--spc-player-palette-vibrant': `${this._colorPaletteVibrant}`,
-      '--spc-player-palette-muted': `${this._colorPaletteMuted}`,
-      '--spc-player-palette-darkvibrant': `${this._colorPaletteDarkVibrant}`,
-      '--spc-player-palette-darkmuted': `${this._colorPaletteDarkMuted}`,
-      '--spc-player-palette-lightvibrant': `${this._colorPaletteLightVibrant}`,
-      '--spc-player-palette-lightmuted': `${this._colorPaletteLightMuted}`,
-    });
+    // build style info object.
+    const styleInfo: StyleInfo = <StyleInfo>{};
+    styleInfo['background-image'] = `url(${imageUrl})`;
+    if (backgroundSize)
+      styleInfo['--spc-player-background-size'] = `${backgroundSize}`;
+    styleInfo['--spc-player-header-bg-color'] = `${headerBackgroundColor}`;
+    styleInfo['--spc-player-header-color'] = `#ffffff`;
+    styleInfo['--spc-player-controls-bg-color'] = `${controlsBackgroundColor} `;
+    styleInfo['--spc-player-controls-color'] = `#ffffff`;
+    styleInfo['--spc-player-controls-icon-size'] = `${playerControlsIconSize}`;
+    styleInfo['--spc-player-controls-icon-button-size'] = `var(--spc-player-controls-icon-size, ${PLAYER_CONTROLS_ICON_SIZE_DEFAULT}) + 0.75rem`;
+    styleInfo['--spc-player-palette-vibrant'] = `${this._colorPaletteVibrant}`;
+    styleInfo['--spc-player-palette-muted'] = `${this._colorPaletteMuted}`;
+    styleInfo['--spc-player-palette-darkvibrant'] = `${this._colorPaletteDarkVibrant}`;
+    styleInfo['--spc-player-palette-darkmuted'] = `${this._colorPaletteDarkMuted}`;
+    styleInfo['--spc-player-palette-lightvibrant'] = `${this._colorPaletteLightVibrant}`;
+    styleInfo['--spc-player-palette-lightmuted'] = `${this._colorPaletteLightMuted}`;
+    return styleMap(styleInfo);
+
   }
 
 

src/types/card-config.ts

@@ -309,6 +309,16 @@ export interface CardConfig extends LovelaceCardConfig {
    */
   episodeFavBrowserItemsSortTitle?: boolean;
 
+  /**
+   * Size of the player background image.
+   * Suggested values:
+   * - "100% 100%" image size is 100%, stretching to fill available space.
+   * - "contain" image is contained in the boundaries without stretching.
+   * - "cover" image covers the entire background, stretching to fill available space.
+   * Default is "100% 100%".
+   */
+  playerBackgroundImageSize?: string;
+
   /**
    * Title displayed in the header area of the Player section form.
    * Omit this parameter to hide the title display area.