From 9c439650e17ae782edae635704857cb4a53dcecf Mon Sep 17 00:00:00 2001
From: FL550 <max.fermor@gmail.com>
Date: Tue, 4 Aug 2020 20:17:21 +0200
Subject: [PATCH] Fixes chromecast devices not shown

---
 src/const.ts                   |  2 +-
 src/localize/languages/en.json |  2 +-
 src/spotify-card.ts            | 37 +++++++++++++++++++++-------------
 3 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/const.ts b/src/const.ts
index 01fb578..388af5b 100755
--- a/src/const.ts
+++ b/src/const.ts
@@ -1 +1 @@
-export const CARD_VERSION = '2.0.2';
+export const CARD_VERSION = '2.0.3';
diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json
index 07e73d6..33288c4 100755
--- a/src/localize/languages/en.json
+++ b/src/localize/languages/en.json
@@ -29,6 +29,6 @@
     "filter_out_cast_devices": "Filter out chromecast devices",
     "spotify_entity": "Spotify media player entity",
     "default_device": "Default device name",
-    "filter_devices": "Hide devices (see documentation under 'Advanced usage' for details)"
+    "filter_devices": "Hide devices (see documentation under 'Advanced usage')"
   }
 }
diff --git a/src/spotify-card.ts b/src/spotify-card.ts
index 9ae0fc7..8900308 100755
--- a/src/spotify-card.ts
+++ b/src/spotify-card.ts
@@ -323,18 +323,20 @@ export class SpotifyCard extends LitElement {
 
   // Generate device list
   private generateDeviceList(): TemplateResult {
-    const spotify_connect_devices= this.spotcast_connector.devices.filter(this.checkIfAllowedToShow, this);
+    const spotify_connect_devices = this.spotcast_connector.devices.filter(this.checkIfAllowedToShow, this);
     const chromecast_devices = this.spotcast_connector.chromecast_devices.filter(this.checkIfAllowedToShow, this);
     if (spotify_connect_devices.length == 0 && chromecast_devices.length == 0) {
       return html`<p>No devices found</p>`;
     }
     return html`
-        ${spotify_connect_devices.length > 0 ? html`<p>Spotify Connect devices</p>` : null}
-        ${spotify_connect_devices.map((device) => html` <a @click=${() => this.spotifyDeviceSelected(device)}>${device.name}</a> `)}
-        ${chromecast_devices.length > 0 ? html`<p>Chromecast devices</p>` : null}
-        ${chromecast_devices.map((device) => {
-          html`<a @click=${() => this.chromecastDeviceSelected(device)}>${device.friendly_name}</a>`;
-        })}
+      ${spotify_connect_devices.length > 0 ? html`<p>Spotify Connect devices</p>` : null}
+      ${spotify_connect_devices.map((device) => {
+        return html`<a @click=${() => this.spotifyDeviceSelected(device)}>${device.name}</a>`;
+      })}
+      ${chromecast_devices.length > 0 ? html`<p>Chromecast devices</p>` : null}
+      ${chromecast_devices.map((device) => {
+        return html`<a @click=${() => this.chromecastDeviceSelected(device)}>${device.friendly_name}</a>`;
+      })}
     `;
   }
 
@@ -411,13 +413,18 @@ export class SpotifyCard extends LitElement {
       const playing = this.spotify_state?.attributes.media_playlist === item.name;
       this.spotify_state?.attributes.media_playlist === item.name;
       result.push(html`<div class="grid-item" @click=${() => this.spotcast_connector.playUri(item.uri)}>
-      ${item.images.length > 0
-            ? html`<img class="grid-item-album-image ${playing ? 'playing' : ''}" src=${item.images[item.images.length - 1].url} />`
-            : html`<div class="grid-item-album-image ${playing ? 'playing' : ''}"><svg viewBox="0 0 168 168">
+        ${item.images.length > 0
+          ? html`<img
+              class="grid-item-album-image ${playing ? 'playing' : ''}"
+              src=${item.images[item.images.length - 1].url}
+            />`
+          : html`<div class="grid-item-album-image ${playing ? 'playing' : ''}">
+              <svg viewBox="0 0 168 168">
                 <path
                   d="M 83.996 0.277 C 37.747 0.277 0.253 37.77 0.253 84.019 C 0.253 130.27 37.747 167.76 83.996 167.76 C 130.25 167.76 167.74 130.27 167.74 84.019 C 167.74 37.773 130.25 0.281 83.995 0.281 L 83.996 0.277 L 83.996 0.277 Z M 122.4 121.057 C 120.9 123.517 117.68 124.297 115.22 122.787 C 95.558 110.777 70.806 108.057 41.656 114.717 C 38.847 115.357 36.047 113.597 35.407 110.787 C 34.764 107.977 36.517 105.177 39.333 104.537 C 71.233 97.249 98.596 100.387 120.67 113.877 C 123.13 115.387 123.91 118.597 122.4 121.057 L 122.4 121.057 Z M 132.65 98.255 C 130.76 101.327 126.74 102.297 123.67 100.407 C 101.16 86.571 66.847 82.564 40.222 90.646 C 36.769 91.689 33.122 89.743 32.074 86.296 C 31.034 82.843 32.981 79.203 36.428 78.153 C 66.841 68.925 104.65 73.395 130.5 89.28 C 133.57 91.17 134.54 95.19 132.65 98.256 L 132.65 98.255 Z M 133.53 74.511 C 106.54 58.48 62.01 57.006 36.241 64.827 C 32.103 66.082 27.727 63.746 26.473 59.608 C 25.219 55.468 27.553 51.095 31.694 49.837 C 61.275 40.857 110.45 42.592 141.524 61.039 C 145.254 63.248 146.474 68.055 144.264 71.772 C 142.064 75.494 137.244 76.721 133.534 74.511 L 133.53 74.511 Z"
                 />
-              </svg></div>`}
+              </svg>
+            </div>`}
         <div class="grid-item-overlay-icon">
           ${playing
             ? this.generateGridIconForCurrent()
@@ -591,7 +598,7 @@ export class SpotifyCard extends LitElement {
   static listStyles = css`
     ha-card {
       --list-item-height: 3em;
-      --spotify-color: #1db954;
+      --placeholder-padding: 4px;
     }
 
     .list-item {
@@ -610,13 +617,15 @@ export class SpotifyCard extends LitElement {
       border-bottom: 0;
     }
 
-    .list-item > img, .list-item > svg {
+    .list-item > img,
+    .list-item > svg {
       height: var(--list-item-height);
       object-fit: contain;
     }
 
     .list-item > svg {
-      height: calc( var(--list-item-height) - 4px);
+      height: calc(var(--list-item-height) - var(--placeholder-padding));
+      margin-right: var(--placeholder-padding);
     }
 
     .list-item > .icon {