[ 1.0.1 ] * Removed console.log messages that were being used for t…

…esting.

CHANGELOG.md

@@ -6,6 +6,10 @@ Change are listed in reverse chronological order (newest to oldest).
 
 <span class="changelog">
 
+###### [ 1.0.1 ] - 2024/05/12
+
+  * Removed `console.log` messages that were being used for testing.
+
 ###### [ 1.0.0 ] - 2024/05/10
 
   * Version 1 initial release.

README.md

@@ -22,24 +22,27 @@ Check out the [Configuration Guide wiki](https://github.com/thlucas1/homeassista
 Here's a quick look on what the card looks like.
 
 _Pandora Stations, Panel Mode_
-<img src="images/pandora_card_panel.jpg?v01_20240509">   
+<img src="https://raw.githubusercontent.com/wiki/thlucas1/homeassistantcomponent_soundtouchplus_card/images/UIDashboards/panel_pandora.png?v01_20240509">   
 
 _SoundTouch Presets, Panel Mode_
-<img src="images/presets_card_panel.jpg?v01_20240509">   
+<img src="https://raw.githubusercontent.com/wiki/thlucas1/homeassistantcomponent_soundtouchplus_card/images/UIDashboards/panel_presets.png?v01_20240509">   
 
-_Editor UI, SoundTouch Presets_
-<img src="images/presets_editor_ui.jpg?v01_20240509">   
+_SoundTouch Recently Played, Panel Mode_
+<img src="https://raw.githubusercontent.com/wiki/thlucas1/homeassistantcomponent_soundtouchplus_card/images/UIDashboards/panel_recently_played.png?v01_20240509">   
+
+_Editor UI, General Options_
+<img src="https://raw.githubusercontent.com/wiki/thlucas1/homeassistantcomponent_soundtouchplus_card/images/ConfigurationOptions/general_options.png?v01_20240509">   
 
 ## HACS Installation Instructions (recommended)
 
-- on your sidebar go to HACS > Frontend
-- click on the 3-dot overflow menu in the upper right, and select `custom repositories` item.
-- copy / paste `https://github.com/thlucas1/homeassistantcomponent_soundtouchplus_card` in the Repository textbox and select `Lovelace` for the category entry.
-- click on `Add` to add the custom repository.
-- you can then click on the `SoundTouchPlus Card` repository entry (you may need to filter your list first to find the new entry).
-- click on `download` to start the download. It will install the card to your config/custom_components directory.
-- go back on your dashboard and click on the icon at the right top corner then on Edit dashboard.
-- you can now click on Add card in the bottom right corner and search for "Custom: SoundTouchPlus Card".
+- On your Home Assistant sidebar menu, go to HACS > Frontend
+- Click on the 3-dot overflow menu in the upper right, and select `custom repositories` item.
+- Copy / paste `https://github.com/thlucas1/homeassistantcomponent_soundtouchplus_card` in the Repository textbox and select `Lovelace` for the category entry.
+- Click on `Add` to add the custom repository.
+- You can then click on the `SoundTouchPlus Card` repository entry (you may need to filter your list first to find the new entry).
+- Click on `download` to start the download. It will install the card to your `/config/www/community/homeassistantcomponent_soundtouchplus_card` directory.
+- Go back on your dashboard and click on the icon at the right top corner then on Edit dashboard.
+- You can now click on Add card in the bottom right corner and search for "Custom: SoundTouchPlus Card".
 
 ## Manual Installation
 

SoundTouchPlusCard.njsproj

@@ -5,7 +5,7 @@
     <SchemaVersion>2.0</SchemaVersion>
     <ProjectGuid>{19dfee94-5cae-417c-ac13-38b165e4121e}</ProjectGuid>
     <ProjectHome>.</ProjectHome>
-    <ProjectView>ShowAllFiles</ProjectView>
+    <ProjectView>ProjectFiles</ProjectView>
     <StartupFile>dist\soundtouchplus-card.js</StartupFile>
     <WorkingDirectory>.</WorkingDirectory>
     <OutputPath>.</OutputPath>

src/card.ts

@@ -14,7 +14,7 @@ import { Section } from './types/section'
 import './components/footer';
 import './editor/editor';
 import { PROGRESS_DONE, PROGRESS_STARTED, SECTION_SELECTED } from './constants';
-import { formatPlayerInfo, removeSpecialChars } from './utils/media-browser-utils';
+import { formatTitleInfo, removeSpecialChars } from './utils/media-browser-utils';
 import { isNumber } from './utils/utils';
 
 //const LOGPFX = "STPC - card."
@@ -94,11 +94,13 @@ export class Card extends LitElement {
     // has not been set set.
     this.createStore();
 
+    // TODO - add a check to see if the player is of integration type 'soundtouchplus'.
+
     // calculate height of the card, accounting for any extra
     // titles that are shown, footer, etc.
     const sections = this.config.sections;
     const showFooter = !sections || sections.length > 1;
-    const title = formatPlayerInfo(this.store.player, this.config.title);
+    const title = formatTitleInfo(this.config.title, this.config, this.store.player);
 
     //console.log(LOGPFX + "render():\n this.section=%s", JSON.stringify(this.section))
 

src/editor/base-editor.ts

@@ -99,7 +99,7 @@ export abstract class BaseEditor extends LitElement {
 
   //  // is this the first render?  if so, then refresh the list.
   //  if (this.sourceListLastUpdatedOn == 1) {
-  //    console.log("base-editor.createStore() calling updateSourceList()");
+  //    //console.log("base-editor.createStore() calling updateSourceList()");
   //    this.updateSourceList(this.player);
   //  }
   }
@@ -144,7 +144,7 @@ export abstract class BaseEditor extends LitElement {
 
 
   //protected configChanged() {
-  //  console.log("base-editor.configChanged() - configuration has changed");
+  //  //console.log("base-editor.configChanged() - configuration has changed");
   //  fireEvent(this, 'config-changed', { config: this.config });
   //  this.requestUpdate();
   //}
@@ -162,7 +162,7 @@ export abstract class BaseEditor extends LitElement {
   // */
   //private updateSourceList(player: MediaPlayer): void {
 
-  //  console.log("base-editor.updateSourceList() - player object:\n%s", JSON.stringify(player,null,2));
+  //  //console.log("base-editor.updateSourceList() - player object:\n%s", JSON.stringify(player,null,2));
 
   //  // update the media list; we will force the `sourceListLastUpdatedOn` attribute 
   //  // with the current epoch date (in seconds) so that the refresh is only triggered once.
@@ -173,7 +173,7 @@ export abstract class BaseEditor extends LitElement {
   //    .then(result => {
   //      this.sourceList = result;
   //      this.sourceListLastUpdatedOn = Date.now() / 1000;
-  //      console.log("%c base-editor.render - updateSourceList AFTER update:\n %s=sourceListLastUpdatedOn", "color: green;", JSON.stringify(this.sourceListLastUpdatedOn));
+  //      //console.log("%c base-editor.render - updateSourceList AFTER update:\n %s=sourceListLastUpdatedOn", "color: green;", JSON.stringify(this.sourceListLastUpdatedOn));
   //      this.requestUpdate();
   //    });
   //}

src/editor/general-editor.ts

@@ -58,12 +58,12 @@ const CONFIG_SETTINGS_SCHEMA = [
     type: 'string',
     default: 35.15,
   },
-  {
-    name: 'replaceHttpWithHttpsForThumbnails',
-    label: "Replace HTTP with HTTPS for image url's",
-    required: false,
-    selector: { boolean: {} },
-  },
+//  {
+//    name: 'imageUrlsReplaceHttpWithHttps',
+//    label: "Replace HTTP with HTTPS for image url's",
+//    required: false,
+//    selector: { boolean: {} },
+//  },
 ];
 
 

src/editor/pandora-browser-editor.ts

@@ -85,11 +85,11 @@ class PandoraSettingsEditor extends BaseEditor {
         //  // if it has not been set, and fire the config-changed event to indicate
         //  // the configuration has changed.
         //  if ((!this.config.pandoraSourceAccount) && (result.length == 1)) {
-        //    console.log("pandora-browser-editor.getSourceAccountsPandora() 1 account match; defaulting to account: %s", result[0]);
+        //    //console.log("pandora-browser-editor.getSourceAccountsPandora() 1 account match; defaulting to account: %s", result[0]);
         //    this.config.pandoraSourceAccount = result[0];
-        //    console.log("pandora-browser-editor.getSourceAccountsPandora() calling configChanged");
+        //    //console.log("pandora-browser-editor.getSourceAccountsPandora() calling configChanged");
         //    this.configChanged();
-        //    console.log("pandora-browser-editor.getSourceAccountsPandora() dispatching media-browser-refresh event");
+        //    //console.log("pandora-browser-editor.getSourceAccountsPandora() dispatching media-browser-refresh event");
         //    this.dispatchEvent(customEvent(MEDIA_BROWSER_REFRESH, 'PANDORA'));
         //  }
         }

src/main.ts

@@ -19,7 +19,7 @@ console.groupCollapsed(
 );
 console.log(
   "Wiki Docs:",
-  "https://github.com/thlucas1/homeassistantcomponent_soundtouchplus/wiki"
+  "https://github.com/thlucas1/homeassistantcomponent_soundtouchplus_card/wiki/Configuration-Options"
 );
 console.groupEnd();
 
@@ -31,7 +31,7 @@ window.customCards.push({
   type: 'soundtouchplus-card',
   name: 'SoundTouchPlus Card',
   description: 'Home Assistant UI card that supports features unique to the SoundTouchPlus custom integration',
-  //documentationURL: 'https://github.com/thlucas1/homeassistantcomponent_soundtouchplus/wiki',
+  //documentationURL: 'https://github.com/thlucas1/homeassistantcomponent_soundtouchplus_card/wiki/Configuration-Options',
   preview: true,
 });
 

src/model/store.ts

@@ -51,7 +51,7 @@ export class Store {
     // initialize storage.
     this.hass = hass;
     this.config = config;
-    this.hassService = new HassService(hass, config, card, section);
+    this.hassService = new HassService(hass, card, section);
     this.soundTouchPlusService = new SoundTouchPlusService(hass, card, section);
     this.player = this.getMediaPlayerObject(playerId);
     this.section = section;

src/sections/pandora-browser.ts

@@ -9,7 +9,7 @@ import '../components/media-browser-icons';
 import { Store } from '../model/store';
 import { MediaPlayer } from '../model/media-player';
 import { customEvent } from '../utils/utils';
-import { formatPlayerInfo } from '../utils/media-browser-utils';
+import { formatTitleInfo } from '../utils/media-browser-utils';
 import { ITEM_SELECTED, PANDORA_BROWSER_REFRESH } from '../constants';
 import { SoundTouchPlusService } from '../services/soundtouchplus-service';
 import { CardConfig } from '../types/cardconfig'
@@ -85,8 +85,8 @@ export class PandoraBrowser extends LitElement {
       //console.log(LOGPFX + "render()\n this.mediaList='%s'", JSON.stringify(this.mediaList));
 
       // format title and sub-title details.
-      const title = formatPlayerInfo(this.player, this.config.pandoraBrowserTitle, this.medialistLastUpdatedOn);
-      const subtitle = formatPlayerInfo(this.player, this.config.pandoraBrowserSubTitle, this.medialistLastUpdatedOn);
+      const title = formatTitleInfo(this.config.pandoraBrowserTitle, this.config, this.player, this.medialistLastUpdatedOn);
+      const subtitle = formatTitleInfo(this.config.pandoraBrowserSubTitle, this.config, this.player, this.medialistLastUpdatedOn);
 
       return html`
         ${title ? html`<div class="title">${title}</div>` : html``}
@@ -128,7 +128,7 @@ export class PandoraBrowser extends LitElement {
 
     //  // log exceptions.
     //  const exObj = (ex as Error);
-    //  console.log("STPC - Error rendering pandora browser html\n Name = '%s'\nMessage = %s", exObj.name, exObj.message);
+    //  //console.log("STPC - Error rendering pandora browser html\n Name = '%s'\nMessage = %s", exObj.name, exObj.message);
     //  return html`Could not render card - check console log`;
 
     } finally {
@@ -243,7 +243,7 @@ export class PandoraBrowser extends LitElement {
       .then(result => {
         this.mediaList = result;
         this.medialistLastUpdatedOn = result.LastUpdatedOn || 0;
-        console.log("%c pandora-browser render - updateMediaList check info AFTER update:\n %s=medialistLastUpdatedOn", "color: green;", JSON.stringify(this.medialistLastUpdatedOn));
+        //console.log("%c pandora-browser render - updateMediaList check info AFTER update:\n %s=medialistLastUpdatedOn", "color: green;", JSON.stringify(this.medialistLastUpdatedOn));
         this.requestUpdate();
       });
   }

src/sections/preset-browser.ts

@@ -8,7 +8,7 @@ import '../components/media-browser-list';
 import '../components/media-browser-icons';
 import { Store } from '../model/store';
 import { customEvent } from '../utils/utils';
-import { formatPlayerInfo } from '../utils/media-browser-utils';
+import { formatTitleInfo } from '../utils/media-browser-utils';
 import { MediaPlayer } from '../model/media-player';
 import { ITEM_SELECTED, ITEM_SELECTED_WITH_HOLD } from '../constants';
 import { SoundTouchPlusService } from '../services/soundtouchplus-service';
@@ -81,16 +81,16 @@ export class PresetBrowser extends LitElement {
 
       // was the media player preset list updated?
       const playerLastUpdatedOn = (this.player.attributes.soundtouchplus_presets_lastupdated || 0);
-      console.log("%c preset-browser render - updateMediaList check info BEFORE update:\n %s=playerLastUpdatedOn\n %s=medialistLastUpdatedOn", "color: green;", JSON.stringify(playerLastUpdatedOn), JSON.stringify(this.medialistLastUpdatedOn));
+      //console.log("%c preset-browser render - updateMediaList check info BEFORE update:\n %s=playerLastUpdatedOn\n %s=medialistLastUpdatedOn", "color: green;", JSON.stringify(playerLastUpdatedOn), JSON.stringify(this.medialistLastUpdatedOn));
       if ((playerLastUpdatedOn != this.medialistLastUpdatedOn) && (this.medialistLastUpdatedOn > 0))
         this.updateMediaList(this.player);
 
       //console.log(LOGPFX + "render()\n PresetList.LastUpdatedOn=%s", this.mediaList ? this.mediaList.LastUpdatedOn : "unknown");
       //console.log(LOGPFX + "render()\n this.mediaList='%s'", JSON.stringify(this.mediaList));
 
       // format title and sub-title details.
-      const title = formatPlayerInfo(this.player, this.config.presetBrowserTitle);
-      const subtitle = formatPlayerInfo(this.player, this.config.presetBrowserSubTitle);
+      const title = formatTitleInfo(this.config.presetBrowserTitle, this.config, this.player);
+      const subtitle = formatTitleInfo(this.config.presetBrowserSubTitle, this.config, this.player);
 
       return html`
         ${title ? html`<div class="title">${title}</div>` : html``}
@@ -133,7 +133,7 @@ export class PresetBrowser extends LitElement {
 
     //  // log exceptions.
     //  const exObj = (ex as Error);
-    //  console.log("STPC - Error rendering preset browser html\n Name = '%s'\nMessage = %s", exObj.name, exObj.message);
+    //  //console.log("STPC - Error rendering preset browser html\n Name = '%s'\nMessage = %s", exObj.name, exObj.message);
     //  return html`Could not render card - check console log`;
 
     } finally {
@@ -212,14 +212,10 @@ export class PresetBrowser extends LitElement {
     // call the service to retrieve the media list.
     this.soundTouchPlusService.PresetList(player.id, true)
       .then(result => {
-        //if (player.attributes.media_title == 'I Need You') {   // TEST TODO test for invalid lastupdatedon
-        //  console.log("updateMediaList() - resetting result.LastUpdatedOn to undefined TEST TODO REMOVE ME");
-        //  result.LastUpdatedOn = undefined;                   // TEST TODO
-        //}                                                     // TEST TODO
         this.mediaList = result;
         this.medialistLastUpdatedOn = result.LastUpdatedOn || 0;
-        const playerLastUpdatedOn = (this.player.attributes.soundtouchplus_presets_lastupdated || 0);
-        console.log("%c preset-browser render - updateMediaList check info AFTER update:\n %s=playerLastUpdatedOn\n %s=medialistLastUpdatedOn", "color: green;", JSON.stringify(playerLastUpdatedOn), JSON.stringify(this.medialistLastUpdatedOn));
+        //const playerLastUpdatedOn = (this.player.attributes.soundtouchplus_presets_lastupdated || 0);
+        //console.log("%c preset-browser render - updateMediaList check info AFTER update:\n %s=playerLastUpdatedOn\n %s=medialistLastUpdatedOn", "color: green;", JSON.stringify(playerLastUpdatedOn), JSON.stringify(this.medialistLastUpdatedOn));
         this.requestUpdate();
       });
   }

src/sections/recent-browser.ts

@@ -8,7 +8,7 @@ import '../components/media-browser-list';
 import '../components/media-browser-icons';
 import { Store } from '../model/store';
 import { customEvent } from '../utils/utils';
-import { formatPlayerInfo } from '../utils/media-browser-utils';
+import { formatTitleInfo } from '../utils/media-browser-utils';
 import { MediaPlayer } from '../model/media-player';
 import { ITEM_SELECTED } from '../constants';
 import { SoundTouchPlusService } from '../services/soundtouchplus-service';
@@ -78,16 +78,16 @@ export class RecentBrowser extends LitElement {
 
       // was the media player recent list updated?
       const playerLastUpdatedOn = (this.player.attributes.soundtouchplus_recents_lastupdated || 0);
-      console.log("%c recent-browser render - updateMediaList check info BEFORE update:\n %s=playerLastUpdatedOn\n %s=medialistLastUpdatedOn", "color: green;", JSON.stringify(playerLastUpdatedOn), JSON.stringify(this.medialistLastUpdatedOn));
+      //console.log("%c recent-browser render - updateMediaList check info BEFORE update:\n %s=playerLastUpdatedOn\n %s=medialistLastUpdatedOn", "color: green;", JSON.stringify(playerLastUpdatedOn), JSON.stringify(this.medialistLastUpdatedOn));
       if ((playerLastUpdatedOn != this.medialistLastUpdatedOn) && (this.medialistLastUpdatedOn > 0))
         this.updateMediaList(this.player);
 
       //console.log(LOGPFX + "render()\n RecentList.LastUpdatedOn=%s", this.recentList ? this.recentList.LastUpdatedOn : "unknown");
       //console.log(LOGPFX + "render()\n this.recentList='%s'", JSON.stringify(this.recentList));
 
       // format title and sub-title details.
-      const title = formatPlayerInfo(this.player, this.config.recentBrowserTitle);
-      const subtitle = formatPlayerInfo(this.player, this.config.recentBrowserSubTitle);
+      const title = formatTitleInfo(this.config.recentBrowserTitle, this.config, this.player);
+      const subtitle = formatTitleInfo(this.config.recentBrowserSubTitle, this.config, this.player);
 
       return html`
         ${title ? html`<div class="title">${title}</div>` : html``}
@@ -128,7 +128,7 @@ export class RecentBrowser extends LitElement {
 
     //  // log exceptions.
     //  const exObj = (ex as Error);
-    //  console.log("STPC - Error rendering recent browser html\n Name = '%s'\nMessage = %s", exObj.name, exObj.message);
+    //  //console.log("STPC - Error rendering recent browser html\n Name = '%s'\nMessage = %s", exObj.name, exObj.message);
     //  return html`Could not render card - check console log`;
 
     } finally {
@@ -180,8 +180,8 @@ export class RecentBrowser extends LitElement {
       .then(result => {
         this.recentList = result;
         this.medialistLastUpdatedOn = result.LastUpdatedOn || 0;
-        const playerLastUpdatedOn = (this.player.attributes.soundtouchplus_recents_lastupdated || 0);
-        console.log("%c recent-browser render - updateMediaList check info AFTER update:\n %s=playerLastUpdatedOn\n %s=medialistLastUpdatedOn", "color: green;", JSON.stringify(playerLastUpdatedOn), JSON.stringify(this.medialistLastUpdatedOn));
+        //const playerLastUpdatedOn = (this.player.attributes.soundtouchplus_recents_lastupdated || 0);
+        //console.log("%c recent-browser render - updateMediaList check info AFTER update:\n %s=playerLastUpdatedOn\n %s=medialistLastUpdatedOn", "color: green;", JSON.stringify(playerLastUpdatedOn), JSON.stringify(this.medialistLastUpdatedOn));
         this.requestUpdate();
       });
   }