From 7cd5a6013be92462eb3ceaeb76225af603eb7151 Mon Sep 17 00:00:00 2001 From: Niklas Fondberg Date: Wed, 12 Jun 2019 14:14:50 +0200 Subject: [PATCH] Release @maxenced change --- README.md | 5 ++- dist/spotify-card.cjs.js | 59 +++++++++++++++++++++++--------- dist/spotify-card.esm.js | 59 +++++++++++++++++++++++--------- dist/spotify-card.umd.js | 36 ++++++++++++-------- src/spotify-card.js | 72 +++++++++++++++++++++------------------- 5 files changed, 152 insertions(+), 79 deletions(-) diff --git a/README.md b/README.md index 428717f..1ca7648 100644 --- 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 index 82ead87..79e21c6 100644 --- 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` +
+ {}}>Spotify Connect devices + ${devices.map((device, idx) => html` + this.selectDevice(device)} style="margin-left: 15px">${device.name} + `)} + {}}>Chromecast devices + ${chromecastDevices.map(chromecastDevice => html` + this.selectChromecastDevice(chromecastDevice)} style="margin-left: 15px" + >${chromecastDevice.name + ' (' + chromecastDevice.cast_type + ')'} + `)} +
+ `; + 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`
@@ -88,16 +120,7 @@ class PlayerSelect extends preact.Component { ${this.state.selectedDevice}
-
- {}}>Spotify Connect devices - ${devices.map((device, idx) => html` - this.selectDevice(device)} style="margin-left: 15px">${device.name} - `)} - {}}>Chromecast devices - ${chromecastDevices.map(chromecastDevice => html` - this.selectChromecastDevice(chromecastDevice)} style="margin-left: 15px">${chromecastDevice.name + ' (' + chromecastDevice.cast_type + ')'} - `)} -
+ ${form}
`; } @@ -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 index e934e00..cea9c31 100644 --- 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` +
+ {}}>Spotify Connect devices + ${devices.map((device, idx) => html` + this.selectDevice(device)} style="margin-left: 15px">${device.name} + `)} + {}}>Chromecast devices + ${chromecastDevices.map(chromecastDevice => html` + this.selectChromecastDevice(chromecastDevice)} style="margin-left: 15px" + >${chromecastDevice.name + ' (' + chromecastDevice.cast_type + ')'} + `)} +
+ `; + 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`
@@ -84,16 +116,7 @@ class PlayerSelect extends Component { ${this.state.selectedDevice}
-
- {}}>Spotify Connect devices - ${devices.map((device, idx) => html` - this.selectDevice(device)} style="margin-left: 15px">${device.name} - `)} - {}}>Chromecast devices - ${chromecastDevices.map(chromecastDevice => html` - this.selectChromecastDevice(chromecastDevice)} style="margin-left: 15px">${chromecastDevice.name + ' (' + chromecastDevice.cast_type + ')'} - `)} -
+ ${form}
`; } @@ -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 index 7e33b8f..4e0fb4b 100644 --- a/dist/spotify-card.umd.js +++ b/dist/spotify-card.umd.js @@ -1,4 +1,17 @@ -!function(t){"function"==typeof define&&define.amd?define(t):t()}(function(){"use strict";var t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function n(t,n){return t(n={exports:{}},n.exports),n.exports}var e=n(function(t){var n=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)}),r={}.hasOwnProperty,i=function(t,n){return r.call(t,n)},o=function(t){try{return!!t()}catch(t){return!0}},a=!o(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a}),c=n(function(t){var n=t.exports={version:"2.6.5"};"number"==typeof __e&&(__e=n)}),u=(c.version,function(t){return"object"==typeof t?null!==t:"function"==typeof t}),s=function(t){if(!u(t))throw TypeError(t+" is not an object!");return t},l=e.document,f=u(l)&&u(l.createElement),h=function(t){return f?l.createElement(t):{}},p=!a&&!o(function(){return 7!=Object.defineProperty(h("div"),"a",{get:function(){return 7}}).a}),v=function(t,n){if(!u(t))return t;var e,r;if(n&&"function"==typeof(e=t.toString)&&!u(r=e.call(t)))return r;if("function"==typeof(e=t.valueOf)&&!u(r=e.call(t)))return r;if(!n&&"function"==typeof(e=t.toString)&&!u(r=e.call(t)))return r;throw TypeError("Can't convert object to primitive value")},d=Object.defineProperty,g={f:a?Object.defineProperty:function(t,n,e){if(s(t),n=v(n,!0),s(e),p)try{return d(t,n,e)}catch(t){}if("get"in e||"set"in e)throw TypeError("Accessors not supported!");return"value"in e&&(t[n]=e.value),t}},y=function(t,n){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:n}},m=a?function(t,n,e){return g.f(t,n,y(1,e))}:function(t,n,e){return t[n]=e,t},b=0,_=Math.random(),w=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++b+_).toString(36))},S=n(function(t){var n=e["__core-js_shared__"]||(e["__core-js_shared__"]={});(t.exports=function(t,e){return n[t]||(n[t]=void 0!==e?e:{})})("versions",[]).push({version:c.version,mode:"global",copyright:"© 2019 Denis Pushkarev (zloirock.ru)"})}),x=S("native-function-to-string",Function.toString),E=n(function(t){var n=w("src"),r=(""+x).split("toString");c.inspectSource=function(t){return x.call(t)},(t.exports=function(t,o,a,c){var u="function"==typeof a;u&&(i(a,"name")||m(a,"name",o)),t[o]!==a&&(u&&(i(a,n)||m(a,n,t[o]?""+t[o]:r.join(String(o)))),t===e?t[o]=a:c?t[o]?t[o]=a:m(t,o,a):(delete t[o],m(t,o,a)))})(Function.prototype,"toString",function(){return"function"==typeof this&&this[n]||x.call(this)})}),P=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t},O=function(t,n,e){if(P(t),void 0===n)return t;switch(e){case 1:return function(e){return t.call(n,e)};case 2:return function(e,r){return t.call(n,e,r)};case 3:return function(e,r,i){return t.call(n,e,r,i)}}return function(){return t.apply(n,arguments)}},F=function(t,n,r){var i,o,a,u,s=t&F.F,l=t&F.G,f=t&F.S,h=t&F.P,p=t&F.B,v=l?e:f?e[n]||(e[n]={}):(e[n]||{}).prototype,d=l?c:c[n]||(c[n]={}),g=d.prototype||(d.prototype={});for(i in l&&(r=n),r)a=((o=!s&&v&&void 0!==v[i])?v:r)[i],u=p&&o?O(a,e):h&&"function"==typeof a?O(Function.call,a):a,v&&E(v,i,a,t&F.U),d[i]!=a&&m(d,i,u),h&&g[i]!=a&&(g[i]=a)};e.core=c,F.F=1,F.G=2,F.S=4,F.P=8,F.B=16,F.W=32,F.U=64,F.R=128;var M=F,N=n(function(t){var n=w("meta"),e=g.f,r=0,a=Object.isExtensible||function(){return!0},c=!o(function(){return a(Object.preventExtensions({}))}),s=function(t){e(t,n,{value:{i:"O"+ ++r,w:{}}})},l=t.exports={KEY:n,NEED:!1,fastKey:function(t,e){if(!u(t))return"symbol"==typeof t?t:("string"==typeof t?"S":"P")+t;if(!i(t,n)){if(!a(t))return"F";if(!e)return"E";s(t)}return t[n].i},getWeak:function(t,e){if(!i(t,n)){if(!a(t))return!0;if(!e)return!1;s(t)}return t[n].w},onFreeze:function(t){return c&&l.NEED&&a(t)&&!i(t,n)&&s(t),t}}}),I=(N.KEY,N.NEED,N.fastKey,N.getWeak,N.onFreeze,n(function(t){var n=S("wks"),r=e.Symbol,i="function"==typeof r;(t.exports=function(t){return n[t]||(n[t]=i&&r[t]||(i?r:w)("Symbol."+t))}).store=n})),k=g.f,A=I("toStringTag"),j=function(t,n,e){t&&!i(t=e?t:t.prototype,A)&&k(t,A,{configurable:!0,value:n})},C={f:I},T=g.f,L=function(t){var n=c.Symbol||(c.Symbol=e.Symbol||{});"_"==t.charAt(0)||t in n||T(n,t,{value:C.f(t)})},R={}.toString,D=function(t){return R.call(t).slice(8,-1)},$=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==D(t)?t.split(""):Object(t)},W=function(t){if(null==t)throw TypeError("Can't call method on "+t);return t},B=function(t){return $(W(t))},U=Math.ceil,V=Math.floor,G=function(t){return isNaN(t=+t)?0:(t>0?V:U)(t)},z=Math.min,q=function(t){return t>0?z(G(t),9007199254740991):0},H=Math.max,Y=Math.min,K=function(t,n){return(t=G(t))<0?H(t+n,0):Y(t,n)},J=function(t){return function(n,e,r){var i,o=B(n),a=q(o.length),c=K(r,a);if(t&&e!=e){for(;a>c;)if((i=o[c++])!=i)return!0}else for(;a>c;c++)if((t||c in o)&&o[c]===e)return t||c||0;return!t&&-1}},X=S("keys"),Z=function(t){return X[t]||(X[t]=w(t))},Q=J(!1),tt=Z("IE_PROTO"),nt=function(t,n){var e,r=B(t),o=0,a=[];for(e in r)e!=tt&&i(r,e)&&a.push(e);for(;n.length>o;)i(r,e=n[o++])&&(~Q(a,e)||a.push(e));return a},et="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(","),rt=Object.keys||function(t){return nt(t,et)},it={f:Object.getOwnPropertySymbols},ot={f:{}.propertyIsEnumerable},at=Array.isArray||function(t){return"Array"==D(t)},ct=a?Object.defineProperties:function(t,n){s(t);for(var e,r=rt(n),i=r.length,o=0;i>o;)g.f(t,e=r[o++],n[e]);return t},ut=e.document,st=ut&&ut.documentElement,lt=Z("IE_PROTO"),ft=function(){},ht=function(){var t,n=h("iframe"),e=et.length;for(n.style.display="none",st.appendChild(n),n.src="javascript:",(t=n.contentWindow.document).open(),t.write("