[ 1.0.40 ] * Added title formatter option `{medialist.filteritemcount…

…}`; Number of filtered items in the media list.

CHANGELOG.md

@@ -6,6 +6,10 @@ Change are listed in reverse chronological order (newest to oldest).
 
 <span class="changelog">
 
+###### [ 1.0.40 ] - 2025/02/11
+
+  * Added title formatter option `{medialist.filteritemcount}`; Number of filtered items in the media list.
+
 ###### [ 1.0.39 ] - 2025/02/09
 
   * Added card configuration option `albumFavBrowserShuffleOnPlay`; True to enable shuffle prior to starting play of the context; otherwise, False to start the context with the current shuffle mode.  

README.md

@@ -82,8 +82,8 @@ Here's a quick overview on what the card can look like.  The card is highly cust
 - on your dashboard click on the icon at the right top corner then on Edit dashboard.
 - click again on that icon and then on Manage resources.
 - click on Add resource.
-- copy and paste this: `/local/spotifyplus_card.js?v=1`.
-- click on JavaScript Module then Create.
+- copy and paste this: `/local/spotifyplus_card.js?v=1.0.40` (change version number to match what was downloaded).
+- click on `JavaScript Module` then Create.
 - go back and refresh your page.
 - you can now click on Add card in the bottom right corner and search for "Custom: SpotifyPlus Card".
 - after any update of the file you will have to edit `/local/spotifyplus_card.js?v=1` and change the version (e.g. `v=1`) to any higher number (e.g. `v=1.2`).

src/card.ts

@@ -1033,61 +1033,61 @@ export class Card extends LitElement {
       playerHeaderAlbum: "{player.media_album_name} {player.sp_playlist_name_title}",
       playerHeaderNoMediaPlayingText: "\"{player.name}\" state is \"{player.state}\"",
 
-      albumFavBrowserTitle: "Album Favorites for {player.sp_user_display_name} ({medialist.itemcount} items)",
+      albumFavBrowserTitle: "Album Favorites for {player.sp_user_display_name} ({medialist.filteritemcount} items)",
       albumFavBrowserSubTitle: "click a tile item to play the content; click-hold for actions",
       albumFavBrowserItemsPerRow: 4,
       albumFavBrowserItemsHideTitle: false,
       albumFavBrowserItemsHideSubTitle: false,
       albumFavBrowserItemsSortTitle: true,
 
-      artistFavBrowserTitle: "Artist Favorites for {player.sp_user_display_name} ({medialist.itemcount} items)",
+      artistFavBrowserTitle: "Artist Favorites for {player.sp_user_display_name} ({medialist.filteritemcount} items)",
       artistFavBrowserSubTitle: "click a tile item to play the content; click-hold for actions",
       artistFavBrowserItemsPerRow: 4,
       artistFavBrowserItemsHideTitle: false,
       artistFavBrowserItemsHideSubTitle: true,
       artistFavBrowserItemsSortTitle: true,
 
-      audiobookFavBrowserTitle: "Audiobook Favorites for {player.sp_user_display_name} ({medialist.itemcount} items)",
+      audiobookFavBrowserTitle: "Audiobook Favorites for {player.sp_user_display_name} ({medialist.filteritemcount} items)",
       audiobookFavBrowserSubTitle: "click a tile item to play the content; click-hold for actions",
       audiobookFavBrowserItemsPerRow: 4,
       audiobookFavBrowserItemsHideTitle: false,
       audiobookFavBrowserItemsHideSubTitle: false,
       audiobookFavBrowserItemsSortTitle: true,
 
-      categoryBrowserTitle: "Categorys for {player.sp_user_display_name} ({medialist.itemcount} items)",
+      categoryBrowserTitle: "Categorys for {player.sp_user_display_name} ({medialist.filteritemcount} items)",
       categoryBrowserSubTitle: "click a tile item to view the content; click-hold for actions",
       categoryBrowserItemsPerRow: 4,
       categoryBrowserItemsHideTitle: false,
       categoryBrowserItemsHideSubTitle: true,
       categoryBrowserItemsSortTitle: true,
 
-      deviceBrowserTitle: "Spotify Connect Devices ({medialist.itemcount} items)",
+      deviceBrowserTitle: "Spotify Connect Devices ({medialist.filteritemcount} items)",
       deviceBrowserSubTitle: "click an item to select the device; click-hold for device info",
       deviceBrowserItemsPerRow: 1,
       deviceBrowserItemsHideTitle: false,
       deviceBrowserItemsHideSubTitle: true,
 
-      episodeFavBrowserTitle: "Episode Favorites for {player.sp_user_display_name} ({medialist.itemcount} items)",
+      episodeFavBrowserTitle: "Episode Favorites for {player.sp_user_display_name} ({medialist.filteritemcount} items)",
       episodeFavBrowserSubTitle: "click a tile item to play the content; click-hold for actions",
       episodeFavBrowserItemsPerRow: 4,
       episodeFavBrowserItemsHideTitle: false,
       episodeFavBrowserItemsHideSubTitle: false,
       episodeFavBrowserItemsSortTitle: true,
 
-      playlistFavBrowserTitle: "Playlist Favorites for {player.sp_user_display_name} ({medialist.itemcount} items)",
+      playlistFavBrowserTitle: "Playlist Favorites for {player.sp_user_display_name} ({medialist.filteritemcount} items)",
       playlistFavBrowserSubTitle: "click a tile item to play the content; click-hold for actions",
       playlistFavBrowserItemsPerRow: 4,
       playlistFavBrowserItemsHideTitle: false,
       playlistFavBrowserItemsHideSubTitle: false,
       playlistFavBrowserItemsSortTitle: true,
 
-      recentBrowserTitle: "Recently Played by {player.sp_user_display_name} ({medialist.itemcount} items)",
+      recentBrowserTitle: "Recently Played by {player.sp_user_display_name} ({medialist.filteritemcount} items)",
       recentBrowserSubTitle: "click a tile item to play the content; click-hold for actions",
       recentBrowserItemsPerRow: 4,
       recentBrowserItemsHideTitle: false,
       recentBrowserItemsHideSubTitle: false,
 
-      searchMediaBrowserTitle: "Search Media for {player.sp_user_display_name} ({medialist.itemcount} items)",
+      searchMediaBrowserTitle: "Search Media for {player.sp_user_display_name} ({medialist.filteritemcount} items)",
       searchMediaBrowserSubTitle: "click a tile item to play the content; click-hold for actions",
       searchMediaBrowserUseDisplaySettings: false,
       searchMediaBrowserItemsPerRow: 4,
@@ -1098,21 +1098,21 @@ export class Card extends LitElement {
       searchMediaBrowserSearchTypes: [SearchMediaTypes.ALBUMS, SearchMediaTypes.ARTISTS, SearchMediaTypes.PLAYLISTS,
       SearchMediaTypes.TRACKS, SearchMediaTypes.AUDIOBOOKS, SearchMediaTypes.SHOWS, SearchMediaTypes.EPISODES],
 
-      showFavBrowserTitle: "Show Favorites for {player.sp_user_display_name} ({medialist.itemcount} items)",
+      showFavBrowserTitle: "Show Favorites for {player.sp_user_display_name} ({medialist.filteritemcount} items)",
       showFavBrowserSubTitle: "click a tile item to play the content; click-hold for actions",
       showFavBrowserItemsPerRow: 4,
       showFavBrowserItemsHideTitle: false,
       showFavBrowserItemsHideSubTitle: true,
       showFavBrowserItemsSortTitle: true,
 
-      trackFavBrowserTitle: "Track Favorites for {player.sp_user_display_name} ({medialist.itemcount} items)",
+      trackFavBrowserTitle: "Track Favorites for {player.sp_user_display_name} ({medialist.filteritemcount} items)",
       trackFavBrowserSubTitle: "click a tile item to play the content; click-hold for actions",
       trackFavBrowserItemsPerRow: 4,
       trackFavBrowserItemsHideTitle: false,
       trackFavBrowserItemsHideSubTitle: false,
       trackFavBrowserItemsSortTitle: false,
 
-      userPresetBrowserTitle: "User Presets for {player.sp_user_display_name} ({medialist.itemcount} items)",
+      userPresetBrowserTitle: "User Presets for {player.sp_user_display_name} ({medialist.filteritemcount} items)",
       userPresetBrowserSubTitle: "click a tile item to play the content; click-hold for actions",
       userPresetBrowserItemsPerRow: 4,
       userPresetBrowserItemsHideTitle: false,

src/components/player-progress.ts

@@ -79,7 +79,7 @@ class Progress extends LitElement {
    *
    * An element may be re-connected after being disconnected.
    */
-  disconnectedCallback() {
+  public disconnectedCallback() {
 
     // are we currently tracking progress?  if so, then stop tracking and
     // indicate we are no longer tracking.

src/constants.ts

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

src/editor/editor.ts

@@ -253,7 +253,7 @@ class CardEditor extends BaseEditor {
    * Typically, anything done in `connectedCallback()` should be undone when the
    * element is disconnected, in `disconnectedCallback()`.
    */
-  connectedCallback() {
+  public connectedCallback() {
 
     // invoke base class method.
     super.connectedCallback();
@@ -273,7 +273,7 @@ class CardEditor extends BaseEditor {
    *
    * An element may be re-connected after being disconnected.
    */
-  disconnectedCallback() {
+  public disconnectedCallback() {
 
     // remove window level event listeners.
     window.removeEventListener(SHOW_SECTION, this.onFooterShowSection);

src/sections/album-fav-browser.ts

@@ -44,9 +44,17 @@ export class AlbumFavBrowser extends FavBrowserBase {
     // invoke base class method.
     super.render();
 
+    // filter items (if actions are not visible).
+    let filteredItems: Array<IAlbum> | undefined;
+    if (!this.isActionsVisible) {
+      const filterName = (this.filterCriteria || "").toLocaleLowerCase();
+      filteredItems = this.mediaList?.filter((item: IAlbum) => (item.name.toLocaleLowerCase().indexOf(filterName) !== -1) || (item.artists[0].name.toLocaleLowerCase().indexOf(filterName) !== -1));
+      this.filterItemCount = filteredItems?.length;
+    }
+
     // format title and sub-title details.
-    const title = formatTitleInfo(this.config.albumFavBrowserTitle, this.config, this.player, this.mediaListLastUpdatedOn, this.mediaList);
-    const subtitle = formatTitleInfo(this.config.albumFavBrowserSubTitle, this.config, this.player, this.mediaListLastUpdatedOn, this.mediaList);
+    const title = formatTitleInfo(this.config.albumFavBrowserTitle, this.config, this.player, this.mediaListLastUpdatedOn, this.mediaList, filteredItems);
+    const subtitle = formatTitleInfo(this.config.albumFavBrowserSubTitle, this.config, this.player, this.mediaListLastUpdatedOn, this.mediaList, filteredItems);
 
     // set auto-shuffle based on configuration option.
     this.shuffleOnPlay = this.config.albumFavBrowserShuffleOnPlay || false;
@@ -66,12 +74,11 @@ export class AlbumFavBrowser extends FavBrowserBase {
           ${(() => {
             // if actions are not visbile, then render the media list.
             if (!this.isActionsVisible) {
-              const filterName = (this.filterCriteria || "").toLocaleLowerCase();
               if (this.config.albumFavBrowserItemsPerRow === 1) {
                 return (
                   html`<spc-media-browser-list 
                         class="media-browser-list"
-                        .items=${this.mediaList?.filter((item: IAlbum) => (item.name.toLocaleLowerCase().indexOf(filterName) !== -1) || (item.artists[0].name.toLocaleLowerCase().indexOf(filterName) !== -1))}
+                        .items=${filteredItems}
                         .store=${this.store}
                         @item-selected=${this.onItemSelected}
                         @item-selected-with-hold=${this.onItemSelectedWithHold}
@@ -81,7 +88,7 @@ export class AlbumFavBrowser extends FavBrowserBase {
                 return (
                   html`<spc-media-browser-icons 
                         class="media-browser-list"
-                        .items=${this.mediaList?.filter((item: IAlbum) => (item.name.toLocaleLowerCase().indexOf(filterName) !== -1) || (item.artists[0].name.toLocaleLowerCase().indexOf(filterName) !== -1))}
+                        .items=${filteredItems}
                         .store=${this.store}
                         @item-selected=${this.onItemSelected}
                         @item-selected-with-hold=${this.onItemSelectedWithHold}

src/sections/artist-fav-browser.ts

@@ -43,9 +43,17 @@ export class ArtistFavBrowser extends FavBrowserBase {
     // invoke base class method.
     super.render();
 
+    // filter items (if actions are not visible).
+    let filteredItems: Array<IArtist> | undefined;
+    if (!this.isActionsVisible) {
+      const filterName = (this.filterCriteria || "").toLocaleLowerCase();
+      filteredItems = this.mediaList?.filter((item: IArtist) => (item.name.toLocaleLowerCase().indexOf(filterName) !== -1));
+      this.filterItemCount = filteredItems?.length;
+    }
+
     // format title and sub-title details.
-    const title = formatTitleInfo(this.config.artistFavBrowserTitle, this.config, this.player, this.mediaListLastUpdatedOn, this.mediaList);
-    const subtitle = formatTitleInfo(this.config.artistFavBrowserSubTitle, this.config, this.player, this.mediaListLastUpdatedOn, this.mediaList);
+    const title = formatTitleInfo(this.config.artistFavBrowserTitle, this.config, this.player, this.mediaListLastUpdatedOn, this.mediaList, filteredItems);
+    const subtitle = formatTitleInfo(this.config.artistFavBrowserSubTitle, this.config, this.player, this.mediaListLastUpdatedOn, this.mediaList, filteredItems);
 
     // set auto-shuffle based on configuration option.
     this.shuffleOnPlay = this.config.artistFavBrowserShuffleOnPlay || false;
@@ -65,12 +73,11 @@ export class ArtistFavBrowser extends FavBrowserBase {
           ${(() => {
             // if actions are not visbile, then render the media list.
             if (!this.isActionsVisible) {
-              const filterName = (this.filterCriteria || "").toLocaleLowerCase();
               if (this.config.artistFavBrowserItemsPerRow === 1) {
                 return (
                   html`<spc-media-browser-list 
                         class="media-browser-list"
-                        .items=${this.mediaList?.filter((item: IArtist) => (item.name.toLocaleLowerCase().indexOf(filterName) !== -1))}
+                        .items=${filteredItems}
                         .store=${this.store}
                         @item-selected=${this.onItemSelected}
                         @item-selected-with-hold=${this.onItemSelectedWithHold}
@@ -80,7 +87,7 @@ export class ArtistFavBrowser extends FavBrowserBase {
                 return (
                   html`<spc-media-browser-icons 
                         class="media-browser-list"
-                        .items=${this.mediaList?.filter((item: IArtist) => (item.name.toLocaleLowerCase().indexOf(filterName) !== -1))}
+                        .items=${filteredItems}
                         .store=${this.store}
                         @item-selected=${this.onItemSelected}
                         @item-selected-with-hold=${this.onItemSelectedWithHold}

src/sections/audiobook-fav-browser.ts

@@ -43,9 +43,17 @@ export class AudiobookFavBrowser extends FavBrowserBase {
     // invoke base class method.
     super.render();
 
+    // filter items (if actions are not visible).
+    let filteredItems: Array<IAudiobookSimplified> | undefined;
+    if (!this.isActionsVisible) {
+      const filterName = (this.filterCriteria || "").toLocaleLowerCase();
+      filteredItems = this.mediaList?.filter((item: IAudiobookSimplified) => (item.name.toLocaleLowerCase().indexOf(filterName) !== -1) || (item.authors[0].name.toLocaleLowerCase().indexOf(filterName) !== -1));
+      this.filterItemCount = filteredItems?.length;
+    }
+
     // format title and sub-title details.
-    const title = formatTitleInfo(this.config.audiobookFavBrowserTitle, this.config, this.player, this.mediaListLastUpdatedOn, this.mediaList);
-    const subtitle = formatTitleInfo(this.config.audiobookFavBrowserSubTitle, this.config, this.player, this.mediaListLastUpdatedOn, this.mediaList);
+    const title = formatTitleInfo(this.config.audiobookFavBrowserTitle, this.config, this.player, this.mediaListLastUpdatedOn, this.mediaList, filteredItems);
+    const subtitle = formatTitleInfo(this.config.audiobookFavBrowserSubTitle, this.config, this.player, this.mediaListLastUpdatedOn, this.mediaList, filteredItems);
 
     // render html.
     return html`
@@ -62,12 +70,11 @@ export class AudiobookFavBrowser extends FavBrowserBase {
           ${(() => {
             // if actions are not visbile, then render the media list.
             if (!this.isActionsVisible) {
-              const filterName = (this.filterCriteria || "").toLocaleLowerCase();
               if (this.config.audiobookFavBrowserItemsPerRow === 1) {
                 return (
                   html`<spc-media-browser-list 
                         class="media-browser-list"
-                        .items=${this.mediaList?.filter((item: IAudiobookSimplified) => (item.name.toLocaleLowerCase().indexOf(filterName) !== -1) || (item.authors[0].name.toLocaleLowerCase().indexOf(filterName) !== -1))}
+                        .items=${filteredItems}
                         .store=${this.store}
                         @item-selected=${this.onItemSelected}
                         @item-selected-with-hold=${this.onItemSelectedWithHold}
@@ -77,7 +84,7 @@ export class AudiobookFavBrowser extends FavBrowserBase {
                 return (
                   html`<spc-media-browser-icons 
                         class="media-browser-list"
-                        .items=${this.mediaList?.filter((item: IAudiobookSimplified) => (item.name.toLocaleLowerCase().indexOf(filterName) !== -1) || (item.authors[0].name.toLocaleLowerCase().indexOf(filterName) !== -1))}
+                        .items=${filteredItems}
                         .store=${this.store}
                         @item-selected=${this.onItemSelected}
                         @item-selected-with-hold=${this.onItemSelectedWithHold}