Release @maxenced change

custom-cards · Jun 12, 2019 · 7cd5a60 · 7cd5a60
1 parent eae5848
commit 7cd5a60
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 79 deletions.
diff --git a/README.md b/README.md
@@ -15,6 +15,9 @@ The component uses the [Spotify Web API](https://developer.spotify.com/documenta
 The card can make use of [My Spotify Chromecast custom component](https://github.com/fondberg/spotcast) if it is installed, to initiate playback on idle chromecast devices. Please read that README for any limitations.
 This release also adds a limit configuration property to make the number of playlists retrieved configurable.
 
+***New from version 1.6***
+Add device as a parameter (thanks Maxence Dunnewind @maxenced).
+
 ![Screenshot](/spotify-card-highlight.png)
 
 ### Requirements
@@ -35,7 +38,7 @@ Add the resource in lovelace config:
 ```
   - type: module
     url: >-
-      https://cdn.jsdelivr.net/gh/custom-cards/spotify-card@1.5/dist/spotify-card.umd.js
+      https://cdn.jsdelivr.net/gh/custom-cards/spotify-card@1.6/dist/spotify-card.umd.js
 ```
 
 ##### master version:

diff --git a/dist/spotify-card.cjs.js b/dist/spotify-card.cjs.js
@@ -70,6 +70,38 @@ class PlayerSelect extends preact.Component {
     const {
       chromecastDevices
     } = this.state;
+    const choice_form = html`
+      <div class="dropdown-content">
+        <a onClick=${() => {}}><i>Spotify Connect devices</i></a>
+        ${devices.map((device, idx) => html`
+            <a onClick=${() => this.selectDevice(device)} style="margin-left: 15px">${device.name}</a>
+          `)}
+        <a onClick=${() => {}}><i>Chromecast devices</i></a>
+        ${chromecastDevices.map(chromecastDevice => html`
+            <a onClick=${() => this.selectChromecastDevice(chromecastDevice)} style="margin-left: 15px"
+              >${chromecastDevice.name + ' (' + chromecastDevice.cast_type + ')'}</a
+            >
+          `)}
+      </div>
+    `;
+    let form = '';
+
+    if (this.props.player && this.props.player == this.state.selectedDevice) {
+      form = ''; // We have selected the player already
+    } else if (this.props.player && this.props.player != this.state.selectedDevice) {
+      const selected = devices.filter(d => d.name == this.props.player);
+
+      if (selected.length == 1) {
+        form = '';
+        this.selectDevice(selected[0]);
+      } else {
+        // console.log(`Was not able to find player ${this.props.player} within ${JSON.stringify(devices)}`);
+        form = choice_form;
+      }
+    } else {
+      form = choice_form;
+    }
+
     return html`
       <div class="dropdown">
         <div class="mediaplayer_select">
@@ -88,16 +120,7 @@ class PlayerSelect extends preact.Component {
           </svg>
           ${this.state.selectedDevice}
         </div>
-        <div class="dropdown-content">
-          <a onClick=${() => {}}><i>Spotify Connect devices</i></a>
-          ${devices.map((device, idx) => html`
-              <a onClick=${() => this.selectDevice(device)} style="margin-left: 15px">${device.name}</a>
-            `)}
-          <a onClick=${() => {}}><i>Chromecast devices</i></a>
-          ${chromecastDevices.map(chromecastDevice => html`
-              <a onClick=${() => this.selectChromecastDevice(chromecastDevice)} style="margin-left: 15px">${chromecastDevice.name + ' (' + chromecastDevice.cast_type + ')'}</a>
-            `)}
-        </div>
+        ${form}
       </div>
     `;
   }
@@ -334,6 +357,7 @@ class SpotifyCard extends preact.Component {
             devices=${devices}
             selectedDevice=${selectedDevice}
             hass=${this.props.hass}
+            player=${this.props.player}
             onMediaplayerSelect=${device => this.onMediaPlayerSelect(device)}
             onChromecastDeviceSelect=${device => this.onChromecastDeviceSelect(device)}
           />
@@ -413,19 +437,19 @@ styleElement.textContent = `
       color:  ${styles.grey};
       width: 12px;
     }
-    
+
     .playlist__playicon {
       color: ${styles.white};
-      margin-left: 10px;    
+      margin-left: 10px;
     }
     .playlist__playicon:hover {
       color: rgb(216, 255, 229);
       text-shadow: 0 0 20px rgb(216, 255, 229);
-    } 
+    }
     .playing {
       color: ${styles.green}
     }
-    
+
     .playlist__title {
       margin-left: 30px;
       white-space: nowrap;
@@ -538,7 +562,12 @@ class SpotifyCardWebComponent extends HTMLElement {
     this.shadow.appendChild(styleElement);
     this.shadow.appendChild(mountPoint);
     preact.render(html`
-        <${SpotifyCard} clientId=${this.config.client_id} limit=${this.config.limit || 10} hass=${this.savedHass}/>
+        <${SpotifyCard}
+          clientId=${this.config.client_id}
+          limit=${this.config.limit || 10}
+          player=${this.config.device || '*'}
+          hass=${this.savedHass}
+        />
       `, mountPoint);
   }
 

diff --git a/dist/spotify-card.esm.js b/dist/spotify-card.esm.js
@@ -66,6 +66,38 @@ class PlayerSelect extends Component {
     const {
       chromecastDevices
     } = this.state;
+    const choice_form = html`
+      <div class="dropdown-content">
+        <a onClick=${() => {}}><i>Spotify Connect devices</i></a>
+        ${devices.map((device, idx) => html`
+            <a onClick=${() => this.selectDevice(device)} style="margin-left: 15px">${device.name}</a>
+          `)}
+        <a onClick=${() => {}}><i>Chromecast devices</i></a>
+        ${chromecastDevices.map(chromecastDevice => html`
+            <a onClick=${() => this.selectChromecastDevice(chromecastDevice)} style="margin-left: 15px"
+              >${chromecastDevice.name + ' (' + chromecastDevice.cast_type + ')'}</a
+            >
+          `)}
+      </div>
+    `;
+    let form = '';
+
+    if (this.props.player && this.props.player == this.state.selectedDevice) {
+      form = ''; // We have selected the player already
+    } else if (this.props.player && this.props.player != this.state.selectedDevice) {
+      const selected = devices.filter(d => d.name == this.props.player);
+
+      if (selected.length == 1) {
+        form = '';
+        this.selectDevice(selected[0]);
+      } else {
+        // console.log(`Was not able to find player ${this.props.player} within ${JSON.stringify(devices)}`);
+        form = choice_form;
+      }
+    } else {
+      form = choice_form;
+    }
+
     return html`
       <div class="dropdown">
         <div class="mediaplayer_select">
@@ -84,16 +116,7 @@ class PlayerSelect extends Component {
           </svg>
           ${this.state.selectedDevice}
         </div>
-        <div class="dropdown-content">
-          <a onClick=${() => {}}><i>Spotify Connect devices</i></a>
-          ${devices.map((device, idx) => html`
-              <a onClick=${() => this.selectDevice(device)} style="margin-left: 15px">${device.name}</a>
-            `)}
-          <a onClick=${() => {}}><i>Chromecast devices</i></a>
-          ${chromecastDevices.map(chromecastDevice => html`
-              <a onClick=${() => this.selectChromecastDevice(chromecastDevice)} style="margin-left: 15px">${chromecastDevice.name + ' (' + chromecastDevice.cast_type + ')'}</a>
-            `)}
-        </div>
+        ${form}
       </div>
     `;
   }
@@ -330,6 +353,7 @@ class SpotifyCard extends Component {
             devices=${devices}
             selectedDevice=${selectedDevice}
             hass=${this.props.hass}
+            player=${this.props.player}
             onMediaplayerSelect=${device => this.onMediaPlayerSelect(device)}
             onChromecastDeviceSelect=${device => this.onChromecastDeviceSelect(device)}
           />
@@ -409,19 +433,19 @@ styleElement.textContent = `
       color:  ${styles.grey};
       width: 12px;
     }
-    
+
     .playlist__playicon {
       color: ${styles.white};
-      margin-left: 10px;    
+      margin-left: 10px;
     }
     .playlist__playicon:hover {
       color: rgb(216, 255, 229);
       text-shadow: 0 0 20px rgb(216, 255, 229);
-    } 
+    }
     .playing {
       color: ${styles.green}
     }
-    
+
     .playlist__title {
       margin-left: 30px;
       white-space: nowrap;
@@ -534,7 +558,12 @@ class SpotifyCardWebComponent extends HTMLElement {
     this.shadow.appendChild(styleElement);
     this.shadow.appendChild(mountPoint);
     render(html`
-        <${SpotifyCard} clientId=${this.config.client_id} limit=${this.config.limit || 10} hass=${this.savedHass}/>
+        <${SpotifyCard}
+          clientId=${this.config.client_id}
+          limit=${this.config.limit || 10}
+          player=${this.config.device || '*'}
+          hass=${this.savedHass}
+        />
       `, mountPoint);
   }
 

diff --git a/dist/spotify-card.umd.js b/dist/spotify-card.umd.js
diff --git a/src/spotify-card.js b/src/spotify-card.js
@@ -21,7 +21,6 @@ import '@babel/polyfill';
 import { h, Component, render } from 'preact';
 import htm from 'htm';
 
-
 const html = htm.bind(h);
 
 class PlayerSelect extends Component {
@@ -42,7 +41,7 @@ class PlayerSelect extends Component {
       const chromecastSensor = props.hass.states['sensor.chromecast_devices'];
       if (chromecastSensor) {
         const chromecastDevices = JSON.parse(chromecastSensor.attributes.devices_json);
-        this.setState({chromecastDevices});
+        this.setState({ chromecastDevices });
       }
     }
   }
@@ -59,25 +58,29 @@ class PlayerSelect extends Component {
   render() {
     const { devices } = this.props;
     const { chromecastDevices } = this.state;
-    const choice_form = html`<div class="dropdown-content">
-          <a onClick=${() => {}}><i>Spotify Connect devices</i></a>
-          ${devices.map(
-            (device, idx) => html`
-              <a onClick=${() => this.selectDevice(device)} style="margin-left: 15px">${device.name}</a>
-            `
-          )}
-          <a onClick=${() => {}}><i>Chromecast devices</i></a>
-          ${chromecastDevices.map(
-            chromecastDevice => html`
-              <a onClick=${() => this.selectChromecastDevice(chromecastDevice)} style="margin-left: 15px">${chromecastDevice.name + ' (' + chromecastDevice.cast_type + ')'}</a>
-            `
-          )}
-        </div>`;
+    const choice_form = html`
+      <div class="dropdown-content">
+        <a onClick=${() => {}}><i>Spotify Connect devices</i></a>
+        ${devices.map(
+          (device, idx) => html`
+            <a onClick=${() => this.selectDevice(device)} style="margin-left: 15px">${device.name}</a>
+          `
+        )}
+        <a onClick=${() => {}}><i>Chromecast devices</i></a>
+        ${chromecastDevices.map(
+          chromecastDevice => html`
+            <a onClick=${() => this.selectChromecastDevice(chromecastDevice)} style="margin-left: 15px"
+              >${chromecastDevice.name + ' (' + chromecastDevice.cast_type + ')'}</a
+            >
+          `
+        )}
+      </div>
+    `;
 
     let form = '';
     if (this.props.player && this.props.player == this.state.selectedDevice) {
       form = ''; // We have selected the player already
-    } else  if (this.props.player && this.props.player != this.state.selectedDevice) {
+    } else if (this.props.player && this.props.player != this.state.selectedDevice) {
       const selected = devices.filter(d => d.name == this.props.player);
       if (selected.length == 1) {
         form = '';
@@ -125,13 +128,9 @@ class SpotifyCard extends Component {
       selectedPlaylist: null,
       selectedDevice: null,
       playingPlaylist: null,
-      authenticationRequired: true
+      authenticationRequired: true,
     };
-    this.scopes = [
-      'playlist-read-private',
-      'user-read-playback-state',
-      'user-modify-playback-state',
-    ];
+    this.scopes = ['playlist-read-private', 'user-read-playback-state', 'user-modify-playback-state'];
   }
 
   async componentDidMount() {
@@ -255,7 +254,7 @@ class SpotifyCard extends Component {
     // console.log('Starting:', playlist.uri, ' on ', device.name);
     this.props.hass.callService('spotcast', 'start', {
       device_name: device.name,
-      uri: playlist.uri
+      uri: playlist.uri,
     });
   }
 
@@ -288,13 +287,11 @@ class SpotifyCard extends Component {
       <div class="spotify_container">
         <${Header} />
         <div class="playlists">
-          ${playlists.map(
-            (playlist, idx) =>
-            {
-              const image = playlist.images[0]
-                ? playlist.images[0].url
-                : 'https://via.placeholder.com/150x150.png?text=No+image';
-              return html`
+          ${playlists.map((playlist, idx) => {
+            const image = playlist.images[0]
+              ? playlist.images[0].url
+              : 'https://via.placeholder.com/150x150.png?text=No+image';
+            return html`
               <div
                 class="${`playlist ${this.getHighlighted(playlist)}`}"
                 onClick=${event => this.onPlaylistSelect(playlist, idx, event, this)}
@@ -304,15 +301,15 @@ class SpotifyCard extends Component {
                 <div class="${`playlist__playicon ${this.getIsPlayingClass(playlist)}`}">►</div>
                 <div class="playlist__title">${playlist.name}</div>
               </div>
-            `}
-          )}
+            `;
+          })}
         </div>
         <div class="controls">
           <${PlayerSelect}
             devices=${devices}
             selectedDevice=${selectedDevice}
             hass=${this.props.hass}
-      player=${this.props.player}
+            player=${this.props.player}
             onMediaplayerSelect=${device => this.onMediaPlayerSelect(device)}
             onChromecastDeviceSelect=${device => this.onChromecastDeviceSelect(device)}
           />
@@ -514,7 +511,12 @@ class SpotifyCardWebComponent extends HTMLElement {
     this.shadow.appendChild(mountPoint);
     render(
       html`
-        <${SpotifyCard} clientId=${this.config.client_id} limit=${this.config.limit || 10} player=${this.config.device || '*'} hass=${this.savedHass}/>
+        <${SpotifyCard}
+          clientId=${this.config.client_id}
+          limit=${this.config.limit || 10}
+          player=${this.config.device || '*'}
+          hass=${this.savedHass}
+        />
       `,
       mountPoint
     );