fix: loading spinner not working

src/card.ts

@@ -15,15 +15,15 @@ import {
 } from './constants';
 import { when } from 'lit/directives/when.js';
 import { styleMap } from 'lit-html/directives/style-map.js';
-import { getHeight, getWidth } from './utils/utils';
+import { dispatch, getHeight, getWidth } from './utils/utils';
 
 const { GROUPING, GROUPS, MEDIA_BROWSER, PLAYER, VOLUMES } = Section;
 const TITLE_HEIGHT = 2;
 const FOOTER_HEIGHT = 5;
 
 export class Card extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
-  @property({attribute: false}) config!: CardConfig;
+  @property({ attribute: false }) config!: CardConfig;
   @state() section!: Section;
   @state() store!: Store;
   @state() showLoader!: boolean;
@@ -41,7 +41,8 @@ export class Card extends LitElement {
     return html`
       <ha-card style="${this.haCardStyle(height)}">
         <div class="loader" ?hidden="${!this.showLoader}">
-          <ha-circular-progress active="" progress="0"></ha-circular-progress>
+          <ha-circular-progress indeterminate></ha-circular-progress></div
+        >
         </div>
         ${title ? html`<div class="title">${title}</div>` : html``}
         <div class="content" style="${this.contentStyle(contentHeight)}">
@@ -64,9 +65,9 @@ export class Card extends LitElement {
   }
   private createStore() {
     if (this.activePlayerId) {
-      this.store = new Store(this.hass, this.config, this.activePlayerId);
+      this.store = new Store(this.hass, this.config, this.section, this.activePlayerId);
     } else {
-      this.store = new Store(this.hass, this.config);
+      this.store = new Store(this.hass, this.config, this.section);
       this.activePlayerId = this.store.activePlayer.id;
     }
   }
@@ -187,6 +188,9 @@ export class Card extends LitElement {
         --mdc-icon-button-size: 3rem;
         --mdc-icon-size: 2rem;
       }
+      ha-circular-progress {
+        --md-sys-color-primary: var(--accent-color);
+      }
       .loader {
         position: absolute;
         z-index: 1000;
@@ -208,8 +212,7 @@ export class Card extends LitElement {
 
 function listenForActivePlayer(listener: EventListener) {
   window.addEventListener(ACTIVE_PLAYER_EVENT, listener);
-  const event = new CustomEvent(REQUEST_PLAYER_EVENT, { bubbles: true, composed: true });
-  window.dispatchEvent(event);
+  dispatch(REQUEST_PLAYER_EVENT);
 }
 
 function stopListeningForActivePlayer(listener: EventListener) {

src/components/footer.ts

@@ -2,8 +2,9 @@ import { css, html, LitElement, nothing } from 'lit';
 
 import { property } from 'lit/decorators.js';
 import { CardConfig, Section } from '../types';
-import { dispatchShowSection } from '../utils/utils';
+import { dispatch } from '../utils/utils';
 import { mdiCastVariant, mdiHome, mdiSpeakerMultiple, mdiStarOutline, mdiTune } from '@mdi/js';
+import { SHOW_SECTION } from '../constants';
 
 const { GROUPING, GROUPS, MEDIA_BROWSER, PLAYER, VOLUMES } = Section;
 
@@ -16,31 +17,31 @@ class Footer extends LitElement {
       <ha-icon-button
         hide=${this.hide(PLAYER)}
         .path=${mdiHome}
-        @click="${() => dispatchShowSection(PLAYER)}"
+        @click="${() => dispatch(SHOW_SECTION, PLAYER)}"
         selected="${this.selected(PLAYER)}"
       ></ha-icon-button>
       <ha-icon-button
         hide=${this.hide(MEDIA_BROWSER)}
         .path=${mdiStarOutline}
-        @click="${() => dispatchShowSection(MEDIA_BROWSER)}"
+        @click="${() => dispatch(SHOW_SECTION, MEDIA_BROWSER)}"
         selected="${this.selected(MEDIA_BROWSER)}"
       ></ha-icon-button>
       <ha-icon-button
         hide=${this.hide(GROUPS)}
         .path=${mdiSpeakerMultiple}
-        @click="${() => dispatchShowSection(GROUPS)}"
+        @click="${() => dispatch(SHOW_SECTION, GROUPS)}"
         selected="${this.selected(GROUPS)}"
       ></ha-icon-button>
       <ha-icon-button
         hide=${this.hide(GROUPING)}
         .path=${mdiCastVariant}
-        @click="${() => dispatchShowSection(GROUPING)}"
+        @click="${() => dispatch(SHOW_SECTION, GROUPING)}"
         selected="${this.selected(GROUPING)}"
       ></ha-icon-button>
       <ha-icon-button
         hide=${this.hide(VOLUMES)}
         .path=${mdiTune}
-        @click="${() => dispatchShowSection(VOLUMES)}"
+        @click="${() => dispatch(SHOW_SECTION, VOLUMES)}"
         selected="${this.selected(VOLUMES)}"
       ></ha-icon-button>
     `;

src/components/group.ts

@@ -3,8 +3,8 @@ import { property } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 import Store from '../model/store';
 import { CardConfig, Section } from '../types';
-import { dispatchActivePlayerId, dispatchShowSection, getSpeakerList } from '../utils/utils';
-import { REQUEST_PLAYER_EVENT } from '../constants';
+import { dispatch, dispatchActivePlayerId, getSpeakerList } from '../utils/utils';
+import { REQUEST_PLAYER_EVENT, SHOW_SECTION } from '../constants';
 import { MediaPlayer } from '../model/media-player';
 
 class Group extends LitElement {
@@ -71,7 +71,7 @@ class Group extends LitElement {
       const newUrl = window.location.href.replace(/#.*/g, '');
       window.location.replace(`${newUrl}#${this.player.id}`);
       this.dispatchEntityIdEvent();
-      dispatchShowSection(Section.PLAYER);
+      dispatch(SHOW_SECTION, Section.PLAYER);
     }
   }
 

src/components/media-browser-icons.ts

@@ -2,8 +2,8 @@ import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import Store from '../model/store';
 import { CardConfig, MediaPlayerItem } from '../types';
-import { dispatchMediaItemSelected } from '../utils/utils';
-import { mediaBrowserTitleStyle } from '../constants';
+import { dispatch } from '../utils/utils';
+import { MEDIA_ITEM_SELECTED, mediaBrowserTitleStyle } from '../constants';
 import {
   itemsWithFallbacks,
   mediaItemBackgroundImageStyle,
@@ -28,7 +28,7 @@ export class MediaBrowserIcons extends LitElement {
         ${itemsWithFallbacks(this.items, this.config).map(
           (item, index) => html`
             ${mediaItemBackgroundImageStyle(item.thumbnail, index)}
-            <ha-control-button class="button" @click="${() => dispatchMediaItemSelected(item)}">
+            <ha-control-button class="button" @click="${() => dispatch(MEDIA_ITEM_SELECTED, item)}">
               ${renderMediaBrowserItem(item, !item.thumbnail || !!this.config.mediaBrowserShowTitleForThumbnailIcons)}
             </ha-control-button>
           `,

src/components/media-browser-list.ts

@@ -2,8 +2,8 @@ import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import Store from '../model/store';
 import { CardConfig, MediaPlayerItem } from '../types';
-import { dispatchMediaItemSelected } from '../utils/utils';
-import { listStyle, mediaBrowserTitleStyle } from '../constants';
+import { dispatch } from '../utils/utils';
+import { listStyle, MEDIA_ITEM_SELECTED, mediaBrowserTitleStyle } from '../constants';
 import {
   itemsWithFallbacks,
   mediaItemBackgroundImageStyle,
@@ -23,7 +23,7 @@ export class MediaBrowserList extends LitElement {
         ${itemsWithFallbacks(this.items, this.config).map((item, index) => {
           return html`
             ${mediaItemBackgroundImageStyle(item.thumbnail, index)}
-            <mwc-list-item class="button" @click="${() => dispatchMediaItemSelected(item)}">
+            <mwc-list-item class="button" @click="${() => dispatch(MEDIA_ITEM_SELECTED, item)}">
               <div class="row">${renderMediaBrowserItem(item)}</div>
             </mwc-list-item>
           `;

src/editor/base-editor.ts

@@ -3,11 +3,12 @@ import { fireEvent, HomeAssistant } from 'custom-card-helpers';
 import { property } from 'lit/decorators.js';
 import { CardConfig } from '../types';
 import Store from '../model/store';
+import { dispatch } from '../utils/utils';
 
 export abstract class BaseEditor extends LitElement {
-  @property({attribute: false}) config!: CardConfig;
-  @property({attribute: false}) hass!: HomeAssistant;
-  @property({attribute: false}) store!: Store;
+  @property({ attribute: false }) config!: CardConfig;
+  @property({ attribute: false }) hass!: HomeAssistant;
+  @property({ attribute: false }) store!: Store;
 
   setConfig(config: CardConfig) {
     this.config = JSON.parse(JSON.stringify(config));
@@ -34,6 +35,6 @@ export abstract class BaseEditor extends LitElement {
     this.requestUpdate();
   }
   protected dispatchClose() {
-    return this.dispatchEvent(new CustomEvent('closed'));
+    return dispatch('closed');
   }
 }

src/editor/editor.ts

@@ -19,10 +19,10 @@ class CardEditor extends BaseEditor {
   @state() private configArea = GENERAL;
 
   protected render(): TemplateResult {
-    this.store = new Store(this.hass, this.config);
     if (!this.config.sections || this.config.sections.length === 0) {
       this.config.sections = [Section.PLAYER, Section.VOLUMES, Section.GROUPS, Section.GROUPING, Section.MEDIA_BROWSER];
     }
+    this.store = new Store(this.hass, this.config, this.config.sections[0]);
 
     return html`
       <ha-control-button-group>

src/model/store.ts

@@ -8,6 +8,7 @@ import {
   ConfigPredefinedGroupPlayer,
   PredefinedGroup,
   PredefinedGroupPlayer,
+  Section,
 } from '../types';
 import { getGroupPlayerIds } from '../utils/utils';
 import { MediaPlayer } from './media-player';
@@ -24,7 +25,7 @@ export default class Store {
   public allMediaPlayers: MediaPlayer[];
   public predefinedGroups: PredefinedGroup[];
 
-  constructor(hass: HomeAssistant, config: CardConfig, activePlayerId?: string) {
+  constructor(hass: HomeAssistant, config: CardConfig, currentSection: Section, activePlayerId?: string) {
     this.hass = hass;
     this.config = config;
     const mediaPlayerHassEntities = this.getMediaPlayerHassEntities(this.hass);
@@ -36,8 +37,7 @@ export default class Store {
       )
       .sort((a, b) => a.name.localeCompare(b.name));
     this.activePlayer = this.determineActivePlayer(activePlayerId);
-    const section = this.config.sections?.[0];
-    this.hassService = new HassService(this.hass, section);
+    this.hassService = new HassService(this.hass, currentSection);
     this.mediaControlService = new MediaControlService(this.hassService);
     this.mediaBrowseService = new MediaBrowseService(this.hassService);
     this.predefinedGroups = this.createPredefinedGroups();

src/sections/grouping.ts

@@ -9,7 +9,7 @@ import { MediaPlayer } from '../model/media-player';
 import '../components/grouping-button';
 
 export class Grouping extends LitElement {
-  @property({attribute: false}) store!: Store;
+  @property({ attribute: false }) store!: Store;
   private activePlayer!: MediaPlayer;
   private mediaControlService!: MediaControlService;
   private allGroups!: MediaPlayer[];
@@ -31,7 +31,7 @@ export class Grouping extends LitElement {
             <mwc-list-item
               ?activated="${isSelected}"
               ?disabled="${isDisabled}"
-              @click="${() => this.itemClick(isSelected, isMain, player)}"
+              @click="${async () => await this.itemClick(isSelected, isMain, player)}"
             >
               <ha-icon .icon="mdi:checkbox-${icon}-outline"></ha-icon>
               <span class="item">${name}</span>

src/sections/media-browser.ts

@@ -6,8 +6,8 @@ import '../components/media-browser-header';
 import MediaControlService from '../services/media-control-service';
 import Store from '../model/store';
 import { CardConfig, MediaPlayerItem, Section } from '../types';
-import { dispatchShowSection } from '../utils/utils';
-import { MEDIA_ITEM_SELECTED } from '../constants';
+import { dispatch } from '../utils/utils';
+import { MEDIA_ITEM_SELECTED, SHOW_SECTION } from '../constants';
 import { MediaPlayer } from '../model/media-player';
 import { until } from 'lit-html/directives/until.js';
 import MediaBrowseService from '../services/media-browse-service';
@@ -55,7 +55,7 @@ export class MediaBrowser extends LitElement {
   private onMediaItemSelected = (event: Event) => {
     const mediaItem = (event as CustomEvent).detail;
     this.playItem(mediaItem);
-    setTimeout(() => dispatchShowSection(Section.PLAYER), 1000);
+    setTimeout(() => dispatch(SHOW_SECTION, Section.PLAYER), 1000);
   };
 
   private async playItem(mediaItem: MediaPlayerItem) {

src/services/hass-service.ts

@@ -4,34 +4,23 @@ import { ServiceCallRequest } from 'custom-card-helpers/dist/types';
 import { CALL_MEDIA_DONE, CALL_MEDIA_STARTED } from '../constants';
 import { MediaPlayer } from '../model/media-player';
 import { HassEntity } from 'home-assistant-js-websocket';
+import { dispatch } from '../utils/utils';
 
 export default class HassService {
   private readonly hass: HomeAssistant;
-  private readonly sectionOnCreate?: Section;
+  private readonly currentSection: Section;
 
-  constructor(hass: HomeAssistant, section?: Section) {
+  constructor(hass: HomeAssistant, section: Section) {
     this.hass = hass;
-    this.sectionOnCreate = section;
+    this.currentSection = section;
   }
 
   async callMediaService(service: string, inOptions: ServiceCallRequest['serviceData']) {
-    window.dispatchEvent(
-      new CustomEvent(CALL_MEDIA_STARTED, {
-        bubbles: true,
-        composed: true,
-        detail: { section: this.sectionOnCreate },
-      }),
-    );
-
+    dispatch(CALL_MEDIA_STARTED, { section: this.currentSection });
     try {
       await this.hass.callService('media_player', service, inOptions);
     } finally {
-      window.dispatchEvent(
-        new CustomEvent(CALL_MEDIA_DONE, {
-          bubbles: true,
-          composed: true,
-        }),
-      );
+      dispatch(CALL_MEDIA_DONE);
     }
   }
 

src/utils/utils.ts

@@ -1,12 +1,8 @@
 import { HassEntity } from 'home-assistant-js-websocket';
-import { CardConfig, MediaPlayerItem, PredefinedGroup, Section } from '../types';
-import { ACTIVE_PLAYER_EVENT, MEDIA_ITEM_SELECTED, SHOW_SECTION } from '../constants';
+import { CardConfig, PredefinedGroup } from '../types';
+import { ACTIVE_PLAYER_EVENT } from '../constants';
 import { MediaPlayer } from '../model/media-player';
 
-export function dispatchShowSection(section: Section) {
-  window.dispatchEvent(new CustomEvent(SHOW_SECTION, { detail: section }));
-}
-
 export function getSpeakerList(mainPlayer: MediaPlayer, predefinedGroups: PredefinedGroup[] = []) {
   const playerIds = [mainPlayer.id, ...mainPlayer.members.map((member) => member.id)].sort();
   if (predefinedGroups?.length) {
@@ -25,19 +21,14 @@ export function getSpeakerList(mainPlayer: MediaPlayer, predefinedGroups: Predef
 }
 
 export function dispatchActivePlayerId(playerId: string) {
-  const event = new CustomEvent(ACTIVE_PLAYER_EVENT, {
-    bubbles: true,
-    composed: true,
-    detail: { entityId: playerId },
-  });
-  window.dispatchEvent(event);
+  dispatch(ACTIVE_PLAYER_EVENT, { entityId: playerId });
 }
 
-export function dispatchMediaItemSelected(mediaItem: MediaPlayerItem) {
-  const event = new CustomEvent(MEDIA_ITEM_SELECTED, {
+export function dispatch(type: string, detail?: unknown) {
+  const event = new CustomEvent(type, {
     bubbles: true,
     composed: true,
-    detail: mediaItem,
+    detail,
   });
   window.dispatchEvent(event);
 }