Adds option to show album title in grid view (#130)

custom-cards · Jan 4, 2021 · 3279b57 · 3279b57
1 parent 4c7bef9
commit 3279b57
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 3 deletions.
diff --git a/src/editor.ts b/src/editor.ts
@@ -351,6 +351,15 @@ export class SpotifyCardEditor extends LitElement implements LovelaceCardEditor
             pin
           ></paper-slider>
         </div>
+        <div>
+          <ha-switch
+            .checked=${this.getValue(ConfigEntry.Grid_Show_Title)}
+            .configValue=${'grid_show_title'}
+            @change=${this.valueChanged}
+            .id=${'grid_show_title'}
+          ></ha-switch>
+          <label for=${'grid_show_title'}>${localize('settings.grid_show_title')}</label>
+        </div>
         <div>
           <ha-switch
             .checked=${this.getValue(ConfigEntry.Grid_Center_Covers)}

diff --git a/src/localize/languages/de.json b/src/localize/languages/de.json
@@ -21,11 +21,12 @@
     "always_play_random_song": "Spiele immer einen zufälligen Song beim Starten der Wiedergabe ab",
     "title": "Titel der Karte",
     "display_style": "Anzeige-Stil",
-    "grid_covers_per_row": "Number of covers per row",
+    "grid_covers_per_row": "Anzahl an Albenbildern pro Reihe",
+    "grid_show_title": "Zeige Albumtitel in Grid-View",
     "account": "Account",
-    "filter_out_cast_devices": "Filter out chromecast devices",
+    "filter_out_cast_devices": "Filter Chromecast Geräte aus",
     "spotify_entity": "Spotify media player entity",
-    "default_device": "Default device name",
+    "default_device": "Standart Gerätename",
     "filter_devices": "Verstecke Geräte (siehe Dokumentation unter 'Advanced usage')",
     "hide_top_header": "Verstecke Kopfzeile",
     "hide_currently_playing": "Verstecke die Anzeige des aktuellen Liedes",

diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json
@@ -25,6 +25,7 @@
     "display_style": "Display Style",
     "grid_covers_per_row": "Number of covers per row",
     "grid_center_covers": "Center Covers",
+    "grid_show_title": "Show album title in grid view",
     "account": "Account",
     "filter_out_cast_devices": "Filter out chromecast devices",
     "spotify_entity": "Spotify media player entity",

diff --git a/src/spotify-card.ts b/src/spotify-card.ts
@@ -621,6 +621,7 @@ export class SpotifyCard extends LitElement {
               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>
+          ${this.config.grid_show_title ? html`<div class="grid-item-album-title">${item.name}</div>` : null}
         </div>
       </div>`);
     }
@@ -983,5 +984,22 @@ export class SpotifyCard extends LitElement {
     .grid-item-album-image.playing {
       box-shadow: var(--primary-color) 0 0 0.2em 0.2em;
     }
+
+    .grid-item-album-title {
+      position: absolute;
+      bottom: 0;
+      width: calc(100% - 0.1em);
+      padding: 0em 0.1em;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      color: var(--text-primary-color);
+      background-image: linear-gradient(
+        transparent,
+        rgba(var(--rgb-primary-text-color), 0.35),
+        rgba(var(--rgb-primary-text-color), 0.45),
+        rgba(var(--rgb-primary-text-color), 0.6)
+      );
+    }
   `;
 }
diff --git a/src/types.ts b/src/types.ts
@@ -24,6 +24,7 @@ export enum ConfigEntry {
   Display_Style,
   Grid_Covers_Per_Row,
   Grid_Center_Covers,
+  Grid_Show_Title,
   Hide_Warning,
   Default_Device,
   Filter_Devices,
@@ -57,6 +58,8 @@ export interface SpotifyCardConfig extends LovelaceCardConfig {
   always_play_random_song?: boolean;
   //number of covers per row in grid
   grid_covers_per_row?: number;
+  //Show album title in grid
+  grid_show_title?: boolean;
   //preselected device
   default_device?: string;
   //filter the devices based on regex