[ 1.0.6 ] * 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 README documentation. * Cleaned up documentation images, and re-organized the media files in the `images` folder.
thlucas1 · Oct 24, 2024 · 9824bc1 · 9824bc1
1 parent 7088cd7
commit 9824bc1
Show file tree

Hide file tree

Showing 91 changed files with 131 additions and 32 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,12 @@ Change are listed in reverse chronological order (newest to oldest).
 
 <span class="changelog">
 
+###### [ 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 README documentation.
+  * Cleaned up documentation images, and re-organized the media files in the `images` folder.
+
 ###### [ 1.0.5 ] - 2024/10/23
 
   * Updated README.md with lastest form examples.

diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
 ![Project Maintenance][maintenance-shield] [![BuyMeCoffee][buymecoffee-shield]][buymecoffee]
 
 _Home Assistant UI card that supports features unique to the [SpotifyPlus](https://github.com/thlucas1/homeassistantcomponent_spotifyplus) custom integration._  
-Extended support for the SpotifyPlus product for use in Home Assistant.
+Extended support for the Spotify Service for use in Home Assistant.
 
 ## Features
 
@@ -24,42 +24,42 @@ and more!
 Here's a quick overview on what the card can look like.  The card is highly customizable when it comes to the information displayed.  Check out the [UI Dashboards wiki](https://github.com/thlucas1/spotifyplus_card/wiki/UI-Dashboards) page for more examples and YAML configuration.
 
 #### Media Player Control / Actions (Masonry Mode)  
-![masonry_player_track](./images/masonry_player_track.png?v20241023) 
-![masonry_player_track_actions](./images/masonry_player_track_actions.png?v20241023) 
-![masonry_player_audiobook](./images/masonry_player_audiobook.png?v20241023) 
-![masonry_player_audiobook_actions](./images/masonry_player_audiobook_actions.png?v20241023) 
-![masonry_player_show](./images/masonry_player_show.png?v20241023) 
-![masonry_player_show_actions](./images/masonry_player_show_actions.png?v20241023) 
+![masonry_player_track](./images/ui/masonry/player_track.png?v20241024) 
+![masonry_player_track_actions](./images/ui/masonry/player_track_actions.png?v20241024) 
+![masonry_player_audiobook](./images/ui/masonry/player_audiobook.png?v20241024) 
+![masonry_player_audiobook_actions](./images/ui/masonry/player_audiobook_actions.png?v20241024) 
+![masonry_player_show](./images/ui/masonry/player_show.png?v20241024) 
+![masonry_player_show_actions](./images/ui/masonry/player_show_actions.png?v20241024) 
 
 #### Media Favorites (Masonry Mode)  
-![masonry_playlist_favorites](./images/masonry_playlist_favorites.png?v20241023) 
-![masonry_album_favorites](./images/masonry_album_favorites.png?v20241023) 
-![masonry_artist_favorites](./images/masonry_artist_favorites.png?v20241023) 
-![masonry_track_favorites](./images/masonry_track_favorites.png?v20241023) 
-![masonry_audiobook_favorites](./images/masonry_audiobook_favorites.png?v20241023) 
-![masonry_show_favorites](./images/masonry_show_favorites.png?v20241023) 
-![masonry_episode_favorites](./images/masonry_episode_favorites.png?v20241023) 
-![masonry_recently_played](./images/masonry_recents.png?v20241023) 
-![masonry_userpresets](./images/masonry_userpresets.png?v20241023) 
+![masonry_playlist_favorites](./images/ui/masonry/playlist_favorites.png?v20241024) 
+![masonry_album_favorites](./images/ui/masonry/album_favorites.png?v20241024) 
+![masonry_artist_favorites](./images/ui/masonry/artist_favorites.png?v20241024) 
+![masonry_track_favorites](./images/ui/masonry/track_favorites.png?v20241024) 
+![masonry_audiobook_favorites](./images/ui/masonry/audiobook_favorites.png?v20241024) 
+![masonry_show_favorites](./images/ui/masonry/show_favorites.png?v20241024) 
+![masonry_episode_favorites](./images/ui/masonry/episode_favorites.png?v20241024) 
+![masonry_recently_played](./images/ui/masonry/recents.png?v20241024) 
+![masonry_userpresets](./images/ui/masonry/userpresets.png?v20241024) 
 
 #### Spotify Media Search (Masonry Mode)  
-![masonry_search_playlists](./images/masonry_search_playlists.png?v20241023) 
-![masonry_search_albums](./images/masonry_search_albums.png?v20241023) 
-![masonry_search_artists](./images/masonry_search_artists.png?v20241023) 
-![masonry_search_tracks](./images/masonry_search_tracks.png?v20241023) 
-![masonry_search_audiobooks](./images/masonry_search_audiobooks.png?v20241023) 
-![masonry_search_shows](./images/masonry_search_shows.png?v20241023) 
-![masonry_search_episodes](./images/masonry_search_episodes.png ?v20241023) 
+![masonry_search_playlists](./images/ui/masonry/search_playlists.png?v20241024) 
+![masonry_search_albums](./images/ui/masonry/search_albums.png?v20241024) 
+![masonry_search_artists](./images/ui/masonry/search_artists.png?v20241024) 
+![masonry_search_tracks](./images/ui/masonry/search_tracks.png?v20241024) 
+![masonry_search_audiobooks](./images/ui/masonry/search_audiobooks.png?v20241024) 
+![masonry_search_shows](./images/ui/masonry/search_shows.png?v20241024) 
+![masonry_search_episodes](./images/ui/masonry/search_episodes.png?v20241024) 
 
 #### Devices / Actions (Masonry Mode)  
-![masonry_devices](./images/masonry_devices.png?v20241023) 
-![masonry_devices_actions](./images/masonry_devices_actions.png?v20241023) 
+![masonry_devices](./images/ui/masonry/devices.png?v20241024) 
+![masonry_devices_actions](./images/ui/masonry/devices_actions.png?v20241024) 
 
 #### Editor UI  
-![config_editor_general](./images/config_editor_general.png) 
+![config_editor_general](./images/config/editor_general.png?v20241024) 
 
 #### Card Picker
-![config_cardpicker](./images/config_cardpicker.png?v20241023) 
+![config_cardpicker](./images/config/cardpicker.png?v20241024) 
 
 ## HACS Installation Instructions (recommended)
 
@@ -100,11 +100,11 @@ Check out the following links for more information:
 
 ## Reporting a Problem
 
-Submit a [Bug Report](https://github.com/thlucas1/spotifyplus_card/issues/new?assignees=&labels=Bug&projects=&template=bug.yml) to bring the issue to my attention. I receive a notification when a new issue is opened, and will do my best to address it in a prompt and professional manner.
+Submit a [Bug Report](https://github.com/thlucas1/spotifyplus_card/issues/new?assignees=&labels=bug&projects=&template=bug.yml) to bring the issue to my attention. I receive a notification when a new issue is opened, and will do my best to address it in a prompt and professional manner.
 
 ## Request a New Feature
 
-Do you have an idea for a new feature that could be added to the integration?  Submit a [Feature Request](https://github.com/thlucas1/spotifyplus_card/issues/new?assignees=&labels=Feature%2BRequest&projects=&template=feature_request.yml) to get your idea into the queue. I receive a notification when a new request is opened, and will do my best to turn your idea into the latest and greatest feature.
+Do you have an idea for a new feature that could be added to the integration?  Submit a [Feature Request](https://github.com/thlucas1/spotifyplus_card/issues/new?assignees=&labels=enhancement&projects=&template=feature_request.yml) to get your idea into the queue. I receive a notification when a new request is opened, and will do my best to turn your idea into the latest and greatest feature.
 
 ***
 

diff --git a/SpotifyPlusCard.njsproj b/SpotifyPlusCard.njsproj
@@ -6,7 +6,8 @@
     <ProjectGuid>{0777490A-BB48-44FB-941D-4758EA1310C6}</ProjectGuid>
     <ProjectHome>.</ProjectHome>
     <ProjectView>ProjectFiles</ProjectView>
-    <StartupFile>dist\spotifyplus-card.js</StartupFile>
+    <StartupFile>
+    </StartupFile>
     <WorkingDirectory>.</WorkingDirectory>
     <OutputPath>.</OutputPath>
     <ProjectTypeGuids>{3AF33F2E-1136-4D97-BBB7-1795711AC8B8};{349c5851-65df-11da-9384-00065b846f21};{9092AA53-FB77-4645-B42D-1CCCA6BD08BD}</ProjectTypeGuids>
@@ -34,6 +35,37 @@
     <Content Include=".prettierrc.js" />
     <Content Include=".vscode\launch.json" />
     <Content Include="CHANGELOG.md" />
+    <Content Include="dist\spotifyplus_card.js" />
+    <Content Include="dist\spotifyplus_card.js.map" />
+    <Content Include="images\config\cardpicker.png" />
+    <Content Include="images\config\editor_general.png" />
+    <Content Include="images\ui\masonry\album_favorites.png" />
+    <Content Include="images\ui\masonry\artist_favorites.png" />
+    <Content Include="images\ui\masonry\audiobook_favorites.png" />
+    <Content Include="images\ui\masonry\devices.png" />
+    <Content Include="images\ui\masonry\devices_actions.png" />
+    <Content Include="images\ui\masonry\episode_favorites.png" />
+    <Content Include="images\ui\masonry\player_audiobook.png" />
+    <Content Include="images\ui\masonry\player_audiobook_actions.png" />
+    <Content Include="images\ui\masonry\player_show.png" />
+    <Content Include="images\ui\masonry\player_show_actions.png" />
+    <Content Include="images\ui\masonry\player_track.png" />
+    <Content Include="images\ui\masonry\player_track_actions.png" />
+    <Content Include="images\ui\masonry\playlist_favorites.png" />
+    <Content Include="images\ui\masonry\recents.png" />
+    <Content Include="images\ui\masonry\search_albums.png" />
+    <Content Include="images\ui\masonry\search_artists.png" />
+    <Content Include="images\ui\masonry\search_audiobooks.png" />
+    <Content Include="images\ui\masonry\search_episodes.png" />
+    <Content Include="images\ui\masonry\search_playlists.png" />
+    <Content Include="images\ui\masonry\search_shows.png" />
+    <Content Include="images\ui\masonry\search_tracks.png" />
+    <Content Include="images\ui\masonry\show_favorites.png" />
+    <Content Include="images\ui\masonry\track_favorites.png" />
+    <Content Include="images\ui\masonry\userpresets.png" />
+    <Content Include="images\ui\player_controls.png" />
+    <Content Include="images\ui\player_header.png" />
+    <Content Include="images\ui\player_volume.png" />
     <Content Include="src\components\player-body-base.ts" />
     <Content Include="src\styles\shared-styles-fav-actions.js" />
     <Content Include="src\styles\shared-styles-fav-browser.js" />
@@ -68,6 +100,9 @@
     <Folder Include=".vscode\" />
     <Folder Include="dist" />
     <Folder Include="images\" />
+    <Folder Include="images\config\" />
+    <Folder Include="images\ui\" />
+    <Folder Include="images\ui\masonry\" />
     <Folder Include="src" />
     <Folder Include="src\components" />
     <Folder Include="src\editor" />

diff --git a/images/config/cardpicker.png b/images/config/cardpicker.png
diff --git a/images/config/editor_general.png b/images/config/editor_general.png
diff --git a/images/config_cardpicker.png b/images/config_cardpicker.png
diff --git a/images/config_editor_albums.png b/images/config_editor_albums.png
diff --git a/images/config_editor_artists.png b/images/config_editor_artists.png
diff --git a/images/config_editor_audiobooks.png b/images/config_editor_audiobooks.png
diff --git a/images/config_editor_devices.png b/images/config_editor_devices.png
diff --git a/images/config_editor_episodes.png b/images/config_editor_episodes.png
diff --git a/images/config_editor_general.png b/images/config_editor_general.png
diff --git a/images/config_editor_player_controls.png b/images/config_editor_player_controls.png
diff --git a/images/config_editor_player_header.png b/images/config_editor_player_header.png
diff --git a/images/config_editor_player_volume.png b/images/config_editor_player_volume.png
diff --git a/images/config_editor_playlists.png b/images/config_editor_playlists.png
diff --git a/images/config_editor_recents.png b/images/config_editor_recents.png
diff --git a/images/config_editor_search.png b/images/config_editor_search.png
diff --git a/images/config_editor_shows.png b/images/config_editor_shows.png
diff --git a/images/config_editor_tracks.png b/images/config_editor_tracks.png
diff --git a/images/config_editor_userpresets.png b/images/config_editor_userpresets.png
diff --git a/images/masonry_album_favorites.png b/images/masonry_album_favorites.png
diff --git a/images/masonry_album_favorites_actions.png b/images/masonry_album_favorites_actions.png
diff --git a/images/masonry_artist_favorites.png b/images/masonry_artist_favorites.png
diff --git a/images/masonry_artist_favorites_actions.png b/images/masonry_artist_favorites_actions.png
diff --git a/images/masonry_audiobook_favorites.png b/images/masonry_audiobook_favorites.png
diff --git a/images/masonry_audiobook_favorites_actions.png b/images/masonry_audiobook_favorites_actions.png
diff --git a/images/masonry_devices.png b/images/masonry_devices.png
diff --git a/images/masonry_devices_actions.png b/images/masonry_devices_actions.png
diff --git a/images/masonry_episode_favorites.png b/images/masonry_episode_favorites.png
diff --git a/images/masonry_episode_favorites_actions.png b/images/masonry_episode_favorites_actions.png
diff --git a/images/masonry_player_audiobook.png b/images/masonry_player_audiobook.png
diff --git a/images/masonry_player_audiobook_actions.png b/images/masonry_player_audiobook_actions.png
diff --git a/images/masonry_player_show.png b/images/masonry_player_show.png
diff --git a/images/masonry_player_show_actions.png b/images/masonry_player_show_actions.png
diff --git a/images/masonry_player_track.png b/images/masonry_player_track.png
diff --git a/images/masonry_player_track_actions.png b/images/masonry_player_track_actions.png
diff --git a/images/masonry_playlist_favorites.png b/images/masonry_playlist_favorites.png
diff --git a/images/masonry_playlist_favorites_actions.png b/images/masonry_playlist_favorites_actions.png
diff --git a/images/masonry_recents.png b/images/masonry_recents.png
diff --git a/images/masonry_recents_actions.png b/images/masonry_recents_actions.png
diff --git a/images/masonry_search_albums.png b/images/masonry_search_albums.png
diff --git a/images/masonry_search_albums_actions.png b/images/masonry_search_albums_actions.png
diff --git a/images/masonry_search_artists.png b/images/masonry_search_artists.png
diff --git a/images/masonry_search_artists_actions.png b/images/masonry_search_artists_actions.png
diff --git a/images/masonry_search_audiobooks.png b/images/masonry_search_audiobooks.png
diff --git a/images/masonry_search_audiobooks_actions.png b/images/masonry_search_audiobooks_actions.png
diff --git a/images/masonry_search_episodes.png b/images/masonry_search_episodes.png
diff --git a/images/masonry_search_episodes_actions.png b/images/masonry_search_episodes_actions.png
diff --git a/images/masonry_search_playlists.png b/images/masonry_search_playlists.png
diff --git a/images/masonry_search_playlists_actions.png b/images/masonry_search_playlists_actions.png
diff --git a/images/masonry_search_shows.png b/images/masonry_search_shows.png
diff --git a/images/masonry_search_shows_actions.png b/images/masonry_search_shows_actions.png
diff --git a/images/masonry_search_tracks.png b/images/masonry_search_tracks.png
diff --git a/images/masonry_search_tracks_actions.png b/images/masonry_search_tracks_actions.png
diff --git a/images/masonry_show_favorites.png b/images/masonry_show_favorites.png
diff --git a/images/masonry_show_favorites_actions.png b/images/masonry_show_favorites_actions.png
diff --git a/images/masonry_track_favorites.png b/images/masonry_track_favorites.png
diff --git a/images/masonry_track_favorites_actions.png b/images/masonry_track_favorites_actions.png
diff --git a/images/masonry_userpresets.png b/images/masonry_userpresets.png
diff --git a/images/masonry_userpresets_actions.png b/images/masonry_userpresets_actions.png
diff --git a/images/ui/masonry/album_favorites.png b/images/ui/masonry/album_favorites.png
diff --git a/images/ui/masonry/artist_favorites.png b/images/ui/masonry/artist_favorites.png
diff --git a/images/ui/masonry/audiobook_favorites.png b/images/ui/masonry/audiobook_favorites.png
diff --git a/images/ui/masonry/devices.png b/images/ui/masonry/devices.png
diff --git a/images/ui/masonry/devices_actions.png b/images/ui/masonry/devices_actions.png
diff --git a/images/ui/masonry/episode_favorites.png b/images/ui/masonry/episode_favorites.png
diff --git a/images/ui/masonry/player_audiobook.png b/images/ui/masonry/player_audiobook.png
diff --git a/images/ui/masonry/player_audiobook_actions.png b/images/ui/masonry/player_audiobook_actions.png
diff --git a/images/ui/masonry/player_show.png b/images/ui/masonry/player_show.png
diff --git a/images/ui/masonry/player_show_actions.png b/images/ui/masonry/player_show_actions.png
diff --git a/images/ui/masonry/player_track.png b/images/ui/masonry/player_track.png
diff --git a/images/ui/masonry/player_track_actions.png b/images/ui/masonry/player_track_actions.png
diff --git a/images/ui/masonry/playlist_favorites.png b/images/ui/masonry/playlist_favorites.png
diff --git a/images/ui/masonry/recents.png b/images/ui/masonry/recents.png
diff --git a/images/ui/masonry/search_albums.png b/images/ui/masonry/search_albums.png
diff --git a/images/ui/masonry/search_artists.png b/images/ui/masonry/search_artists.png
diff --git a/images/ui/masonry/search_audiobooks.png b/images/ui/masonry/search_audiobooks.png
diff --git a/images/ui/masonry/search_episodes.png b/images/ui/masonry/search_episodes.png
diff --git a/images/ui/masonry/search_playlists.png b/images/ui/masonry/search_playlists.png
diff --git a/images/ui/masonry/search_shows.png b/images/ui/masonry/search_shows.png
diff --git a/images/ui/masonry/search_tracks.png b/images/ui/masonry/search_tracks.png
diff --git a/images/ui/masonry/show_favorites.png b/images/ui/masonry/show_favorites.png
diff --git a/images/ui/masonry/track_favorites.png b/images/ui/masonry/track_favorites.png
diff --git a/images/ui/masonry/userpresets.png b/images/ui/masonry/userpresets.png
diff --git a/images/ui/player_controls.png b/images/ui/player_controls.png
diff --git a/images/ui/player_header.png b/images/ui/player_header.png
diff --git a/images/ui/player_volume.png b/images/ui/player_volume.png
diff --git a/src/constants.ts b/src/constants.ts
@@ -1,7 +1,7 @@
 import { css } from 'lit';
 
 /** current version of the card. */
-export const CARD_VERSION = '1.0.5';
+export const CARD_VERSION = '1.0.6';
 
 /** SpotifyPlus integration domain identifier. */
 export const DOMAIN_SPOTIFYPLUS = 'spotifyplus';

diff --git a/src/sections/fav-browser-base.ts b/src/sections/fav-browser-base.ts
@@ -15,7 +15,7 @@ import { MediaPlayer } from '../model/media-player';
 import { SpotifyPlusService } from '../services/spotifyplus-service';
 import { storageService } from '../decorators/storage';
 import { truncateMediaList } from '../utils/media-browser-utils';
-import { isCardInEditPreview } from '../utils/utils';
+import { isCardInEditPreview, loadHaFormLazyControls } from '../utils/utils';
 import { ProgressEndedEvent } from '../events/progress-ended';
 import { ProgressStartedEvent } from '../events/progress-started';
 import { DOMAIN_SPOTIFYPLUS } from '../constants';
@@ -255,6 +255,10 @@ export class FavBrowserBase extends LitElement {
     //  JSON.stringify(Array.from(changedProperties.keys())),
     //);
 
+    // ensure "<search-input-outlined>" and "<ha-md-button-menu>" HA customElements are
+    // loaded so that the controls are rendered properly.
+    (async () => await loadHaFormLazyControls())();
+
     // set storage cache key for the media player user.
     // the prefix will include our domain, the Spotify user name, and the storage key.
     // this allows us to maintain preferences for multiple Spotify accounts.

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -3,6 +3,12 @@ import { CardConfig } from '../types/card-config';
 import { ConfigArea } from '../types/config-area';
 import { Section } from '../types/section';
 
+// debug logging.
+import Debug from 'debug/src/browser.js';
+import { DEBUG_APP_NAME } from '../constants';
+const debuglog = Debug(DEBUG_APP_NAME + ":utils");
+
+
 export function cardDoesNotContainAllSections(config: CardConfig) {
   return config.sections && config.sections.length < Object.keys(Section).length;
 }
@@ -420,3 +426,51 @@ export function closestElement(selector: string, base: Element) {
 export function isTouchDevice(): boolean {
   return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
 }
+
+
+/**
+ * Determines if the following lazily-loaded controls are defined to customElements, and
+ * forces a page load to load the controls if not.  Controls checked for are:
+ * - <search-input-outlined>
+ * - <ha-md-button-menu>
+ * - <ha-alert>
+ * 
+ * This can happen when the user presses F5 to refresh the page, and the above controls
+ * are not loaded.  If they are used on the form, then they will not render correctly!
+ * 
+ * To find out what custom elements are available on a dashboard, bring up the console (in 
+ * Chrome) and run the following command:
+ * > Array.from(customElements.l.keys()).sort().join(", ");
+ */
+export const loadHaFormLazyControls = async () => {
+
+  // if specified customElements already exist then we are done.
+  if (customElements.get("search-input-outlined") && customElements.get("ha-md-button-menu") && customElements.get("ha-alert")) {
+    return;
+  }
+
+  if (debuglog.enabled) {
+    debuglog("loadHaFormLazyControls - loading lazy controls via partial-panel-resolver");
+  }
+
+  // create partial panel resolver element.
+  await customElements.whenDefined("partial-panel-resolver");
+  const ppr = document.createElement('partial-panel-resolver') as any;
+  ppr.hass = {
+    panels: [{
+      url_path: "tmp",
+      component_name: "config",
+    }]
+  };
+  ppr._updateRoutes();
+  await ppr.routerOptions.routes.tmp.load();
+
+  await customElements.whenDefined("ha-panel-config");
+  const cpr = document.createElement("ha-panel-config") as any;
+  await cpr.routerOptions.routes.automation.load();
+
+  if (debuglog.enabled) {
+    debuglog("loadHaFormLazyControls - done; lazy controls should now be loaded");
+  }
+
+}