[ 1.0.7 ] * Added an outline to the player progress bar.

  * Fixed background color of card title when player is turned off.

CHANGELOG.md

@@ -6,9 +6,14 @@ Change are listed in reverse chronological order (newest to oldest).
 
 <span class="changelog">
 
+###### [ 1.0.7 ] - 2024/10/25
+
+  * Added an outline to the player progress bar.
+  * Fixed background color of card title when player is turned off.
+
 ###### [ 1.0.6 ] - 2024/10/24
 
-  * Updated `fav-browser-base` to check for the existance of `search-input-outlined` and `ha-md-button-menu` controls in the `customElements` array, and force a load of the controls if they are not present.  These controls may not be loaded by default when a page refresh (F5) occurs, so they must be forced to load in order to render correctly on the page.
+  * Updated `fav-browser-base` to check for the existence of `search-input-outlined` and `ha-md-button-menu` controls in the `customElements` array, and force a load of the controls if they are not present.  These controls may not be loaded by default when a page refresh (F5) occurs, so they must be forced to load in order to render correctly on the page.
   * Updated README documentation.
   * Cleaned up documentation images, and re-organized the media files in the `images` folder.
 

src/card.ts

@@ -149,7 +149,7 @@ export class Card extends LitElement {
         <div class="spc-loader" ?hidden=${!this.showLoader}>
           <ha-circular-progress indeterminate></ha-circular-progress>
         </div>
-        ${title ? html`<div class="spc-card-header">${title}</div>` : html``}
+        ${title ? html`<div class="spc-card-header" style=${this.styleCardHeader()}>${title}</div>` : ""}
         <div class="spc-card-content-section">
           ${
               this.playerId
@@ -241,7 +241,7 @@ export class Card extends LitElement {
       }
 
       .spc-card-header {
-        margin: 0.2rem;
+        padding: 0.2rem;
         display: flex;
         align-self: flex-start;
         align-items: center;
@@ -1002,6 +1002,31 @@ export class Card extends LitElement {
   }
 
 
+  /**
+   * Style the card header element.
+   */
+  private styleCardHeader() {
+
+    // is player selected, and a title set?
+    if ((this.section == Section.PLAYER) && (this.footerBackgroundColor)) {
+
+      // yes - return vibrant background style.
+      return styleMap({
+        '--spc-player-footer-bg-color': `${this.footerBackgroundColor || 'transparent'}`,
+        'background-color': 'var(--spc-player-footer-bg-color)',
+        'background-image': 'linear-gradient(rgba(0, 0, 0, 1.6), rgba(0, 0, 0, 0.6))',
+      });
+
+    } else {
+
+      // no - just return an empty style to let it default to the card background.
+      return styleMap({
+      });
+
+    }
+  }
+
+
   /**
    * Style the <spc-card-background-container> element.
    */
@@ -1014,7 +1039,7 @@ export class Card extends LitElement {
       return styleMap({
         '--spc-player-footer-bg-color': `${this.footerBackgroundColor || 'transparent'}`,
         'background-color': 'var(--spc-player-footer-bg-color)',
-        'background-image': 'linear-gradient(rgba(0, 0, 0, 1.6), rgba(0, 0, 0, 0.6))',
+        'background-image': 'linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 1.6))',
       });
 
     } else {

src/components/player-progress.ts

@@ -164,12 +164,21 @@ class Progress extends LitElement {
         display: flex;
         flex-grow: 1;
         align-items: center;
-        padding: 5px;
+        align-self: center;
+        margin-left: 5px;
+        margin-right: 5px;
+        height: 14px;
         cursor: pointer;
+        background-clip: padding-box;
+        border: 1px solid rgba(255, 255, 255, 0.10);
+        border-radius: 0.25rem;
       }
 
       .progress-bar {
+        align-self: center;
         background-color: var(--dark-primary-color);
+        margin-left: 2px;
+        margin-right: 2px;
         height: 50%;
         transition: width 0.1s linear;
       }

src/constants.ts

@@ -1,7 +1,7 @@
 import { css } from 'lit';
 
 /** current version of the card. */
-export const CARD_VERSION = '1.0.6';
+export const CARD_VERSION = '1.0.7';
 
 /** SpotifyPlus integration domain identifier. */
 export const DOMAIN_SPOTIFYPLUS = 'spotifyplus';

src/sections/fav-browser-base.ts

@@ -275,15 +275,15 @@ export class FavBrowserBase extends LitElement {
       // if we already updated the media list, then don't do it again.
       if ((this.isCardInEditPreview) && (this.mediaType in Store.hasCardEditLoadedMediaList)) {
         if (debuglog.enabled) {
-          debuglog("%c firstUpdated - cache is empty, and we already called updateMediaList to retrieve media list; will not update again while editing card!",
+          debuglog("%c firstUpdated - we already called updateMediaList to retrieve media list; will not update again while editing card!",
             "color: yellow;",
           );
         }
         return;
       }
 
       if (debuglog.enabled) {
-        debuglog("%c firstUpdated - cache is empty; updating media list on first update",
+        debuglog("%c firstUpdated - updating media list on first update",
           "color: yellow;",
         );
       }

src/services/spotifyplus-service.ts

@@ -1731,7 +1731,7 @@ export class SpotifyPlusService {
       //this._GetJsonStringUserProfile(response);
 
       // set image_url property based on device type.
-      if ((responseObj != null) && (responseObj != null)) {
+      if ((responseObj != null) && (responseObj.Items != null)) {
         responseObj.Items.forEach(item => {
           // set image_url path using mdi icons for common sources.
           const sourceCompare = (item.Name || "").toLocaleLowerCase();

src/types/spotifyplus/zeroconf-get-info.ts

@@ -213,7 +213,7 @@ export interface IZeroconfGetInfo extends IZeroconfResponse {
 
 
   /** 
-   * Token type provided by the client:
+   * Authorization Token type provided by the client:
    * - "accesstoken"         Access token.
    * - "authorization_code"  OAuth Authorization Code token.
    * - "default"             Default access token.