Loading animation an default device

- Animation for starting playback
- Fixed display default device if selected

src/__tests__/spotify-card-lib.test.ts

@@ -328,6 +328,28 @@ describe('SpotifyCardLib', () => {
     });
   });
 
+  describe('getDefaultDevice', () => {
+    beforeEach(() => {
+      spotify_card_lib.config = jest.genMockFromModule<SpotifyCardConfig>('../types');
+      const connect_device = jest.genMockFromModule<ConnectDevice>('../types');
+      connect_device.name = "connect_device";
+      const chromecast_device = jest.genMockFromModule<ChromecastDevice>('../types');
+      chromecast_device.friendly_name = "cast_device";
+      spotify_card_lib.getFilteredDevices = jest.fn().mockReturnValue([[connect_device], [chromecast_device]]);
+    });
+    test('no default_device set', () => {
+      expect(spotify_card_lib.getDefaultDevice()).toBeUndefined();
+    });
+    test('in connect devices', () => {
+      spotify_card_lib.config.default_device = "connect_device";
+      expect(spotify_card_lib.getDefaultDevice()).toBe("connect_device");
+    });
+    test('in cast devices', () => {
+      spotify_card_lib.config.default_device = "cast_device";
+      expect(spotify_card_lib.getDefaultDevice()).toBe("cast_device");
+    });
+  });
+
   describe('getFilteredDevices', () => {
     beforeEach(() => {
       spotify_card_lib.config = jest.genMockFromModule<SpotifyCardConfig>('../types');

src/editor-lib.ts

@@ -2,6 +2,16 @@ import { SpotifyCardEditor } from './editor';
 import { HomeAssistant, fireEvent } from 'custom-card-helpers';
 import { ChromecastDevice, ConfigEntry, ValueChangedEvent } from './types';
 
+export interface ISpotifyCardEditorLib {
+  hass: HomeAssistant;
+  accounts: Array<string>;
+  chromecast_devices: Array<string>;
+  connectedCallback(): Promise<void>;
+  getMediaPlayerEntities(): Array<string>;
+  valueChangedFunction(editor: SpotifyCardEditor, ev: ValueChangedEvent): void;
+  getValue(value: ConfigEntry): any;
+}
+
 export class SpotifyCardEditorLib {
   public hass!: HomeAssistant;
   public accounts: Array<string> = [];

src/spotify-card-lib.ts

@@ -39,10 +39,11 @@ export interface ISpotifyCardLib {
   connectedCallback(): void;
   disconnectedCallback(): void;
   doSubscribeEntities(): void;
+  getDefaultDevice(): string | undefined;
   getFilteredDevices(): [ConnectDevice[], ChromecastDevice[]];
   getPlaylists(): Playlist[];
   isThisPlaylistPlaying(item: Playlist): boolean;
-  playUri(uri: string): void;
+  playUri(elem: MouseEvent, uri: string): void;
   onShuffleSelect(): void;
   handlePlayPauseEvent(ev: Event, command: string): void;
   spotifyDeviceSelected(device: ConnectDevice): void;
@@ -201,6 +202,20 @@ export class SpotifyCardLib implements ISpotifyCardLib {
     return true;
   }
 
+  public getDefaultDevice(): string | undefined {
+    let [spotify_connect_devices, chromecast_devices] = this.getFilteredDevices();
+    spotify_connect_devices = spotify_connect_devices.filter((device) => {
+      return device.name == this.config.default_device;
+    });
+    chromecast_devices = chromecast_devices.filter((device) => {
+      return device.friendly_name == this.config.default_device;
+    });
+    if (spotify_connect_devices.length > 0 || chromecast_devices.length > 0) {
+      return this.config.default_device;
+    }
+    return;
+  }
+
   public getFilteredDevices(): [ConnectDevice[], ChromecastDevice[]] {
     const spotify_connect_devices = this._spotcast_connector.devices.filter(this.checkIfAllowedToShow, this);
     const chromecast_devices = this._spotcast_connector.chromecast_devices.filter(this.checkIfAllowedToShow, this);
@@ -215,7 +230,12 @@ export class SpotifyCardLib implements ISpotifyCardLib {
     return this.spotify_state?.attributes.media_playlist === item.name;
   }
 
-  public playUri(uri: string): void {
+  public playUri(elem: MouseEvent, uri: string): void {
+    const loading = 'loading';
+    const srcElement = elem.srcElement as any;
+    if (srcElement?.localName == 'div') srcElement.children[1].classList.add(loading);
+    else if (srcElement?.localName == 'svg') srcElement.parentElement.classList.add(loading);
+    else if (srcElement?.localName == 'path') srcElement.parentElement.parentElement.classList.add(loading);
     this._spotcast_connector.playUri(uri);
   }
 

src/spotify-card.ts

@@ -153,7 +153,9 @@ export class SpotifyCard extends LitElement {
                       stroke="null"
                     />
                   </svg>
-                  ${this.lib.getCurrentPlayer()?.name ?? localize('common.choose_player')}
+                  ${this.lib.getCurrentPlayer()?.name ??
+                  this.lib.getDefaultDevice() ??
+                  localize('common.choose_player')}
                 </div>
               </div>
             </div>
@@ -222,7 +224,7 @@ export class SpotifyCard extends LitElement {
     const playlists = this.lib.getPlaylists();
     for (let i = 0; i < playlists.length; i++) {
       const item = playlists[i];
-      result.push(html`<div class="list-item" @click=${() => this.lib.playUri(item.uri)}>
+      result.push(html`<div class="list-item" @click=${(elem) => this.lib.playUri(elem, item.uri)}>
         ${item.images.length > 0
           ? html`<img src=${item.images[item.images.length - 1].url} />`
           : html`<svg viewBox="0 0 168 168">
@@ -264,7 +266,7 @@ export class SpotifyCard extends LitElement {
     for (let i = 0; i < playlists.length; i++) {
       const item = playlists[i];
       this.lib.spotify_state?.attributes.media_playlist === item.name;
-      result.push(html`<div class="grid-item" @click=${() => this.lib.playUri(item.uri)}>
+      result.push(html`<div class="grid-item" @click=${(elem) => this.lib.playUri(elem, item.uri)}>
         ${item.images.length > 0
           ? html`<img
               class="grid-item-album-image ${this.lib.isThisPlaylistPlaying(item) ? 'playing' : ''}"
@@ -281,7 +283,7 @@ export class SpotifyCard extends LitElement {
           ${this.lib.isThisPlaylistPlaying(item)
             ? this.generateGridIconForCurrent()
             : html`
-                <svg width="24" height="24" @click=${() => this.lib.playUri(item.uri)}>
+                <svg width="24" height="24" @click=${(elem) => this.lib.playUri(elem, item.uri)}>
                   <path d="M0 0h24v24H0z" fill="none" />
                   <path d="M8 5v14l11-7z" />
                 </svg>
@@ -327,6 +329,13 @@ export class SpotifyCard extends LitElement {
       padding-right: 0.5em;
     }
 
+    hui-warning {
+      position: absolute;
+      right: 0;
+      left: 0;
+      text-align: center;
+    }
+
     #header {
       display: flex;
       height: var(--header-height);
@@ -461,6 +470,25 @@ export class SpotifyCard extends LitElement {
       --placeholder-padding: 4px;
     }
 
+    @keyframes loading {
+      0% {
+        opacity: 100%;
+      }
+      50% {
+        opacity: 0%;
+      }
+      100% {
+        opacity: 100%;
+      }
+    }
+
+    .loading {
+      animation-name: loading;
+      animation-duration: 1s;
+      animation-iteration-count: 5;
+      animation-timing-function: ease-in;
+    }
+
     .list-item {
       /* height: var(--list-item-height); */
       align-items: center;
@@ -489,6 +517,7 @@ export class SpotifyCard extends LitElement {
     }
 
     .list-item > .icon {
+      opacity: 100%;
       height: var(--list-item-height);
       width: var(--list-item-height);
       min-height: var(--list-item-height);