Adds option to hide playback controls

custom-cards · Oct 10, 2020 · bf8d5f9 · bf8d5f9
1 parent fdac850
commit bf8d5f9
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 68 deletions.
diff --git a/dist/spotify-card.js b/dist/spotify-card.js
diff --git a/dist/spotify-card.js.map b/dist/spotify-card.js.map
diff --git a/src/editor.ts b/src/editor.ts
@@ -168,6 +168,8 @@ export class SpotifyCardEditor extends LitElement implements LovelaceCardEditor
         return this.config?.hide_top_header ?? false;
       case ConfigEntry.Hide_Currently_Playing:
         return this.config?.hide_currently_playing ?? false;
+      case ConfigEntry.Hide_Playback_Controls:
+        return this.config?.hide_playback_controls ?? false;
 
       default:
         break;
@@ -311,6 +313,15 @@ export class SpotifyCardEditor extends LitElement implements LovelaceCardEditor
           ></ha-switch>
           <label for=${'hide_currently_playing'}>${localize('settings.hide_currently_playing')}</label>
         </div>
+        <div>
+          <ha-switch
+            .checked=${this.getValue(ConfigEntry.Hide_Playback_Controls)}
+            .configValue=${'hide_playback_controls'}
+            @change=${this.valueChanged}
+            .id=${'hide_playback_controls'}
+          ></ha-switch>
+          <label for=${'hide_playback_controls'}>${localize('settings.hide_playback_controls')}</label>
+        </div>
         <div>
           <paper-dropdown-menu
             label=${localize('settings.display_style')}

diff --git a/src/localize/languages/de.json b/src/localize/languages/de.json
@@ -28,6 +28,7 @@
     "default_device": "Default device name",
     "filter_devices": "Verstecke Geräte (siehe Dokumentation unter 'Advanced usage')",
     "hide_top_header": "Verstecke Kopfzeile",
-    "hide_currently_playing": "Verstecke die Anzeige des aktuellen Liedes"
+    "hide_currently_playing": "Verstecke die Anzeige des aktuellen Liedes",
+    "hide_playback_controls": "Verstecke Wiedergabesteuerung"
   }
 }
diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json
@@ -31,6 +31,7 @@
     "default_device": "Default device name",
     "filter_devices": "Hide devices (see documentation under 'Advanced usage')",
     "hide_top_header": "Hide header",
-    "hide_currently_playing": "Hide currently playing"
+    "hide_currently_playing": "Hide currently playing",
+    "hide_playback_controls": "Hide playback controls"
   }
 }
diff --git a/src/spotify-card.ts b/src/spotify-card.ts
@@ -426,17 +426,17 @@ export class SpotifyCard extends LitElement {
       ${this.config.name ? html`<div id="header_name">${this.config.name}</div>` : null}
       <div></div>
     </div>`;
-
     return html`
       <ha-card tabindex="0" style="${this.config.height ? `height: ${this.config.height}px` : ''}"
         >${this.config.hide_warning ? '' : warning} ${!this.config.hide_top_header ? header : null}
-        ${
-          this._spotify_state && !this.config.hide_currently_playing
-            ? html` <p id="header-track">
-                ${this._spotify_state?.attributes.media_title} - ${this._spotify_state?.attributes.media_artist}
-              </p>`
-            : null
-        }
+        ${this._spotify_state &&
+        !this.config.hide_currently_playing &&
+        this._spotify_state?.attributes.media_title &&
+        this._spotify_state?.attributes.media_artist
+          ? html` <p id="header-track">
+              ${this._spotify_state?.attributes.media_title} - ${this._spotify_state?.attributes.media_artist}
+            </p>`
+          : null}
         <div id="content">${content}</div>
         <div id="footer">
           <div class="dropdown-wrapper">
@@ -462,10 +462,11 @@ export class SpotifyCard extends LitElement {
             <div class="dropdown-content dropdown">${this.generateDeviceList()}</div>
           </div>
           <div class="footer__right">
-            <div class="playback-controls">
-            ${
-              this.getCurrentPlayer()
-                ? html`
+            ${!this.config.hide_playback_controls
+              ? html`
+                  <div class="playback-controls">
+                    ${this.getCurrentPlayer()
+                      ? html`
               ${
                 this._spotify_state?.state == 'playing'
                   ? html`<div @click=${this.onPauseSelect}>
@@ -519,19 +520,19 @@ export class SpotifyCard extends LitElement {
                 ></paper-slider>
               </div>
             </div>`
-                : null
-            }
-            ${
-              this.config.hide_top_header
-                ? html`<div class="small-icon" onclick="window.open('https://www.spotify.com/')">
-                    <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>`
-                : null
-            }
+                      : null}
+                  </div>
+                `
+              : null}
+            ${this.config.hide_top_header
+              ? html`<div class="small-icon" onclick="window.open('https://www.spotify.com/')">
+                  <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>`
+              : null}
           </div>
         </div>
       </ha-card>

diff --git a/src/types.ts b/src/types.ts
@@ -27,7 +27,8 @@ export enum ConfigEntry {
   Default_Device,
   Filter_Devices,
   Hide_Top_Header,
-  Hide_Currently_Playing
+  Hide_Currently_Playing,
+  Hide_Playback_Controls,
 }
 
 export interface SpotifyCardConfig extends LovelaceCardConfig {
@@ -63,6 +64,8 @@ export interface SpotifyCardConfig extends LovelaceCardConfig {
   hide_top_header?: boolean;
   //hide the currently playing row
   hide_currently_playing?: boolean;
+  //hide the playback controls
+  hide_playback_controls?: boolean;
   // locale
 }
 
@@ -222,4 +225,4 @@ export interface Tracks {
 export interface ValueChangedEvent {
   target?: any;
   timeStamp: number;
-}
+}