- Added active and inactive borders in Play Context button.

- Added a fallback to the first non-speaker device if there are no active devices.

Author: ntanis-dev

com.ntanis.essentials-for-spotify.sdPlugin/manifest.json

@@ -1,6 +1,6 @@
 {
 	"Name": "Essentials for Spotify",
-	"Version": "1.1.0.1",
+	"Version": "1.1.0.2",
 	"Author": "Ntanis",
 	"Actions": [
 		{

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "essentials-for-spotify",
-	"version": "1.1.0.1",
+	"version": "1.1.0.2",
 	"description": "Effortlessly control your Spotify through your Elgato Stream Deck.",
 	"author": "https://github.com/ntanis-dev",
 	"license": "ISC",

src/actions/action.ts

@@ -100,8 +100,8 @@ export class Action extends SingletonAction {
 		return lines.join('\n')
 	}
 
-	processImage(iconDataUrl: string, heart: 'top-left' | 'center' | 'none', border: boolean = false): string {
-		if ((heart === 'none' && (!border)))
+	processImage(iconDataUrl: string, heart: 'top-left' | 'center' | 'none', borderColor: string | null = null): string {
+		if ((heart === 'none' && (!borderColor)))
 			return iconDataUrl
 
 		const iconSize = 120
@@ -113,12 +113,12 @@ export class Action extends SingletonAction {
 		const availableWidth = iconSize - (heartPadding * 2)
 		const availableHeight = iconSize - (heartPadding * 2)
 
-		const borderStrokeWidth = border ? 8 : 0
-		const borderInset = border ? borderStrokeWidth / 2 : 0
-		const glowRadius = border ? Math.max(4, Math.round(borderStrokeWidth * 1.25)) : 0
+		const borderStrokeWidth = borderColor ? 12 : 0
+		const borderInset = borderColor ? borderStrokeWidth / 2 : 0
+		const glowRadius = borderColor ? Math.max(4, Math.round(borderStrokeWidth * 1.25)) : 0
 
-		const borderRect = border ? `
-			<rect x="${borderInset}" y="${borderInset}" width="${iconSize - (borderInset * 2)}" height="${iconSize - (borderInset * 2)}" fill="none" stroke="#1db954" stroke-width="${borderStrokeWidth}" shape-rendering="geometricPrecision"/>
+		const borderRect = borderColor ? `
+			<rect x="${borderInset}" y="${borderInset}" width="${iconSize - (borderInset * 2)}" height="${iconSize - (borderInset * 2)}" fill="none" stroke="${borderColor}" stroke-width="${borderStrokeWidth}" shape-rendering="geometricPrecision"/>
 		` : ''
 
 		let scaleFactor = Math.min(availableWidth / originalWidth, availableHeight / originalHeight)
@@ -147,7 +147,7 @@ export class Action extends SingletonAction {
 				vector-effect="non-scaling-stroke"/>
 		` : ''
 
-		const innerGlowRect = border? `
+		const innerGlowRect = borderColor? `
 			<rect x="${borderInset}" y="${borderInset}" width="${iconSize - (borderInset * 2)}" height="${iconSize - (borderInset * 2)}" fill="white" filter="url(#innerGlow)"/>
 		` : ''
 
@@ -162,7 +162,7 @@ export class Action extends SingletonAction {
 				<filter id="innerGlow" x="-50%" y="-50%" width="200%" height="200%" color-interpolation-filters="sRGB">
 					<feGaussianBlur in="SourceAlpha" stdDeviation="${glowRadius}" result="blur"/>
 					<feComposite in="SourceAlpha" in2="blur" operator="out" result="innerEdge"/>
-					<feFlood flood-color="#1db954" flood-opacity="1" result="glowColor"/>
+					<feFlood flood-color="#${borderColor}" flood-opacity="1" result="glowColor"/>
 					<feComposite in="glowColor" in2="innerEdge" operator="in" result="coloredGlow"/>
 					<feComposite in="coloredGlow" in2="coloredGlow" operator="over"/>
 				</filter>

src/actions/play-context-button.ts

@@ -19,17 +19,30 @@ export default class PlayContextButton extends Button {
 		[context: string]: any
 	} = {}
 
+	#forcedActiveContexts: {
+		[context: string]: boolean
+	} = {}
+
 	constructor() {
 		super()
 		this.setStatelessImage('images/states/play-context-unknown')
+
+		wrapper.on('playbackContextChanged', () => {
+			for (const context of this.contexts)
+				if (wrapper.playbackContext?.uri === this.#cachedPlayContexts[context]?.uri)
+					delete this.#forcedActiveContexts[context]
+
+			for (const context of this.contexts)
+				this.#updatePlayContext(context, this.settings[context])
+		})
 	}
 
 	async #updatePlayContext(context: string, oldSettings: any = undefined) {
 		this.setUnpressable(context, true)
 
 		const badUrl = !/^https?:\/\/open\.spotify\.com\/(?:intl-[a-z]{2}\/)?(?:album|artist|playlist)\/[A-Za-z0-9]{22}(?:\/)?(?:\?.*)?$/.test(this.settings[context].spotify_url)
 
-		if ((!oldSettings) || badUrl || this.settings[context].spotify_url !== this.#cachedPlayContexts[context]?.url || (!(oldSettings.show || []).every((entry: string) => entry === 'border' || (this.settings[context].show || []).includes(entry))) || (!(this.settings[context].show || []).every((entry: string) => entry === 'border' || (oldSettings.show || []).includes(entry))))
+		if ((!oldSettings) || badUrl || this.settings[context].spotify_url !== this.#cachedPlayContexts[context]?.url || (!(oldSettings.show || []).every((entry: string) => entry === 'active_border' || entry === 'inactive_border' || (this.settings[context].show || []).includes(entry))) || (!(this.settings[context].show || []).every((entry: string) => entry === 'active_border' || entry === 'inactive_border' || (oldSettings.show || []).includes(entry))))
 			this.clearMarquee(context)
 
 		if (this.settings[context].spotify_url !== this.#cachedPlayContexts[context]?.url || badUrl) {
@@ -71,7 +84,7 @@ export default class PlayContextButton extends Button {
 				this.resumeMarquee(context)
 
 			if (image)
-				await this.setImage(context, this.processImage(`data:image/jpeg;base64,${image}`, 'none', this.settings[context].show.includes('border')))
+				await this.setImage(context, this.processImage(`data:image/jpeg;base64,${image}`, 'none', (this.settings[context].show.includes('active_border') && (wrapper.playbackContext?.uri === this.#cachedPlayContexts[context].uri || this.#forcedActiveContexts[context] === this.#cachedPlayContexts[context].uri)) ? (wrapper.playbackContext?.uri === this.#cachedPlayContexts[context].uri ? '#1db954' : '#dab824') : (this.settings[context].show.includes('inactive_border') ? '#888888' : null)))
 			else if (this.#cachedPlayContexts[context].type === 'local')
 				await this.setImage(context, 'images/states/local')
 			else
@@ -86,9 +99,15 @@ export default class PlayContextButton extends Button {
 		if (this.#cachedPlayContexts[context]) {
 			const response = await wrapper.playItem(this.#cachedPlayContexts[context])
 
-			if (response === constants.WRAPPER_RESPONSE_SUCCESS)
+			if (response === constants.WRAPPER_RESPONSE_SUCCESS) {
+				this.#forcedActiveContexts = {}
+				this.#forcedActiveContexts[context] = this.#cachedPlayContexts[context].uri
+
+				for (const ctx of this.contexts)
+					setImmediate(() => this.#updatePlayContext(ctx, this.settings[ctx]))
+
 				return constants.WRAPPER_RESPONSE_SUCCESS_INDICATIVE
-			else
+			} else
 				return response
 		} else
 			return constants.WRAPPER_RESPONSE_NOT_AVAILABLE
@@ -99,7 +118,7 @@ export default class PlayContextButton extends Button {
 
 		if (!this.settings[context].show)
 			await this.setSettings(context, {
-				show: ['title', 'extra', 'subtitle', 'border']
+				show: ['title', 'extra', 'subtitle', 'active_border', 'inactive_border']
 			})
 
 		if (this.#cachedPlayContexts[context]?.url !== this.settings[context].spotify_url || oldSettings.show?.length !== this.settings[context].show?.length || (oldSettings.show && this.settings[context].show && (!oldSettings.show.every((value: any, index: number) => value === this.settings[context].show[index]))))

src/library/wrapper.js

@@ -117,8 +117,15 @@ class Wrapper extends EventEmitter {
 	}
 
 	async #deviceCall(path, options, deviceId) {
-		if (!deviceId)
-			throw new constants.NoDeviceError('No device specified.')
+		if (!deviceId) {
+			if (this.#lastDevice)
+				throw new constants.NoDeviceError('No device specified.')
+
+			const activeDevices = this.#lastDevices || []
+
+			if (activeDevices.length > 0)
+				this.#setDevices(activeDevices.filter(device => device.type !== 'Speaker')[0], activeDevices)
+		}
 
 		path = `${path}${path.includes('?') ? '&' : '?'}`
 

src/ui/pi/play-context-button.html

@@ -18,7 +18,8 @@
             <option value="title">Name</option>
             <option value="subtitle">Artist(s) (Album / Track Context)</option>
             <option value="extra">Type</option>
-            <option value="border">Border</option>
+            <option value="active_border">Active Border</option>
+            <option value="inactive_border">Inactive Border</option>
         </sdpi-checkbox-list>
     </sdpi-item>
 </body>