fixes an issue with playlists and makes them smoother on page scroll, also a bit more detailed install instructions

Author: ntanis-dev

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

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

package.json

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

src/actions/items-dial.ts

@@ -1,5 +1,6 @@
 import {
-	action
+	action,
+	WillDisappearEvent
 } from '@elgato/streamdeck'
 
 import {
@@ -17,7 +18,7 @@ export default class ItemsDial extends Dial {
 	#items: any = []
 	#lastTotal: number = 0
 
-	async #refreshItemss(context: string) {
+	async #refreshItems(context: string) {
 		if (this.#itemsPage[context] === undefined)
 			this.#itemsPage[context] = 1
 
@@ -67,20 +68,20 @@ export default class ItemsDial extends Dial {
 		this.setIcon(context, 'images/icons/pending.png')
 		this.#refreshCount(context)
 
-		const refreshItemss = await this.#refreshItemss(context)
+		const refreshItems = await this.#refreshItems(context)
 
-		if (refreshItemss) {
+		if (refreshItems) {
 			await this.#refreshLayout(true, context)
 			return false
 		}
 
 		return true
 	}
 
-	async #refreshLayout(refreshItemss = false, context: string) {
+	async #refreshLayout(refreshItems = false, context: string) {
 		const nameMarquee = this.getMarquee(context, 'name')
 
-		if (refreshItemss) {
+		if (refreshItems) {
 			this.resetFeedbackLayout(context, {
 				name: {
 					opacity: 1.0
@@ -105,7 +106,7 @@ export default class ItemsDial extends Dial {
 			this.#currentItems = {}
 			this.#items = {}
 
-			await this.#refreshItemss(context)
+			await this.#refreshItems(context)
 
 			if (this.#items.total === 0) {
 				this.setIcon(context, this.originalIcon)
@@ -118,11 +119,13 @@ export default class ItemsDial extends Dial {
 
 				return
 			}
-		} else if (this.#items.items[this.#currentItems[context]] && (!images.isItemCached(this.#items.items[this.#currentItems[context]])))
-			this.setIcon(context, 'images/icons/pending.png')
 
-		if (this.#currentItems[context] === undefined)
-			this.#currentItems[context] = 0
+			if (this.#currentItems[context] === undefined)
+				this.#currentItems[context] = 0
+		}
+
+		if (!images.isItemCached(this.#items.items[this.#currentItems[context]]))
+			this.setIcon(context, 'images/icons/pending.png')
 
 		this.setFeedback(context, {
 			name: {
@@ -146,7 +149,9 @@ export default class ItemsDial extends Dial {
 		this.#refreshCount(context)
 
 		if (nameMarquee) {
-			this.updateMarquee(context, 'name', this.#items.items[this.#currentItems[context]].name, this.#items.items[this.#currentItems[context]].name)
+			if (nameMarquee.original !== this.#items.items[this.#currentItems[context]].name)
+				this.updateMarquee(context, 'name', this.#items.items[this.#currentItems[context]].name, this.#items.items[this.#currentItems[context]].name)
+
 			this.resumeMarquee(context, 'name')
 		} else
 			this.marquee(context, 'name', this.#items.items[this.#currentItems[context]].name, this.#items.items[this.#currentItems[context]].name, 11, context)
@@ -185,9 +190,16 @@ export default class ItemsDial extends Dial {
 				else
 					this.#itemsPage[context] = 1
 
-				if (lastPage !== this.#itemsPage[context])
+				if (lastPage !== this.#itemsPage[context]) {
+					this.setFeedback(context, {
+						name: {
+							value: '?????'
+						}
+					})
+
 					if (!(await this.#refreshPage(context)))
 						return constants.WRAPPER_RESPONSE_API_ERROR
+				}
 			}
 
 			this.#refreshCount(context)
@@ -211,9 +223,16 @@ export default class ItemsDial extends Dial {
 					this.#currentItems[context] = this.#items.total - ((this.#itemsPage[context] - 1) * constants.WRAPPER_ITEMS_PER_PAGE) - 1
 				}
 
-				if (lastPage !== this.#itemsPage[context])
+				if (lastPage !== this.#itemsPage[context]) {
+					this.setFeedback(context, {
+						name: {
+							value: '?????'
+						}
+					})
+
 					if (!(await this.#refreshPage(context)))
 						return constants.WRAPPER_RESPONSE_API_ERROR
+				}
 			}
 
 			this.#refreshCount(context)
@@ -254,8 +273,14 @@ export default class ItemsDial extends Dial {
         throw new Error('The fetchItems method must be implemented in a subclass.')
 	}
 
+
+	async onWillDisappear(ev: WillDisappearEvent<any>): Promise<void> {
+		await super.onWillDisappear(ev)
+		this.pauseMarquee(ev.action.id, 'name')
+	}
+
 	updateFeedback(context: string): void {
 		super.updateFeedback(context)
-		this.#refreshLayout(true, context)
+		this.#refreshLayout(this.#lastTotal === 0, context)
 	}
 }

src/ui/setup/index.html

@@ -30,8 +30,9 @@ <h2>
 			</span>
 
 			<ol class="main">
+				<li>Login to <a href="https://developer.spotify.com" target="_blank" rel="noopener">Spotify for Developers</a> with your Spotify account.</li>
 				<li>Go to <a href="https://developer.spotify.com/dashboard/create" target="_blank" rel="noopener">Create app - Spotify for Developers</a>.</li>
-				<li>Set <code id="url">http://127.0.0.1:<span class="port"></span></code> as <b>"Redirect URI"</b>.</li>
+				<li>Set <code id="url">http://127.0.0.1:<span class="port"></span></code> as <b>"Redirect URI"</b> and click <b>Add</b>.</li>
 				<li>Check <b>"Web API"</b> in <b>"Which API/SDKs are you planning to use?"</b>.</li>
 				<li>Fill the rest of the form to your liking, <b>"Website"</b> field can be left empty.</li>
 				<li>Create the app and navigate to the app's dashboard.</li>
@@ -55,6 +56,10 @@ <h2>
 			<input type="text" id="clientId" name="clientId" placeholder="Client ID" required />
 			<input type="text" id="clientSecret" name="clientSecret" placeholder="Client Secret" required />
 			<input type="submit" value="Submit" />
+
+			<br />
+
+			<small>If you get "<b>INVALID_CLIENT: Invalid redirect URI</b>":<br />Make sure you have copied the <b>Redirect URL</b> exactly as is, without a trailing slash (/).</small>
 		</form>
 	</div>
 

src/ui/setup/style.css

@@ -16,6 +16,10 @@ body {
 	color: #1db954;
 }
 
+small {
+	text-align: left;
+}
+
 .form-container {
 	max-width: 600px;
 	margin: 50px auto;