[ 1.0.32 ] * Fixed issue with random track playing if shuffle mode wa…

…s on while selecting a track favorite. To fix, I had to disable shuffle prior to starting play of the track as the Spotify Web API would always play a shuffled track. The only other alternative was to just play 1 track, which would then end play when the song ended.

  * Fixed play button icon sizing when player is idle.

CHANGELOG.md

@@ -6,6 +6,11 @@ Change are listed in reverse chronological order (newest to oldest).
 
 <span class="changelog">
 
+###### [ 1.0.32 ] - 2025/01/17
+
+  * Fixed issue with random track playing if shuffle mode was on while selecting a track favorite.  To fix, I had to disable shuffle prior to starting play of the track as the Spotify Web API would always play a shuffled track.  The only other alternative was to just play 1 track, which would then end play when the song ended.
+  * Fixed play button icon sizing when player is idle.
+
 ###### [ 1.0.31 ] - 2025/01/14
 
   * Renamed theming variable `--spc-medialist-items-color` to `--spc-media-browser-items-color` to more closely align with new theme naming standards.

src/components/player-body-queue.ts

@@ -218,10 +218,22 @@ export class PlayerBodyQueue extends PlayerBodyBase {
 
         // build track uri list from media list.
         const { uris } = getMediaListTrackUrisRemaining(this.queueInfo?.queue as ITrack[], item);
-
-        // play media item.
-        this.spotifyPlusService.PlayerMediaPlayTracks(this.player.id, uris.join(","));
-        this.progressHide();
+
+        // if shuffle enabled then disable it, as we want to play the selected track first.
+        if (this.player.attributes.shuffle == true) {
+          await this.store.mediaControlService.shuffle_set(this.player, false);
+        }
+
+        // give the shuffle disable time to process.
+        setTimeout(() => {
+
+          // play the selected track, as well as the remaining tracks.
+          this.spotifyPlusService.PlayerMediaPlayTracks(this.player.id, uris.join(","));
+
+          // hide progress indicator.
+          this.progressHide();
+
+        }, 250);
 
       } else {
 

src/components/player-controls.ts

@@ -100,7 +100,7 @@ class PlayerControls extends LitElement {
               <ha-icon-button @click=${() => this.onClickAction(REPEAT_SET)}     hide=${this.hideFeature(REPEAT_SET)}     .path=${this.getRepeatIcon()} label="Repeat" style=${this.styleIcon(colorRepeat)} ></ha-icon-button>
               <ha-icon-button @click=${() => this.onClickAction(PLAY_QUEUE)}     hide=${this.hideFeature(PLAY_QUEUE)}     .path=${mdiPlaylistMusic} label="Play Queue Information" style=${this.styleIcon(colorQueueItems)} ></ha-icon-button>
           </div>
-          <div class="iconsIdle" hide=${idle}>
+          <div class="iconsPower" hide=${idle}>
               <ha-icon-button @click=${() => this.onClickAction(PLAY)}           hide=${this.hideFeature(PLAY)}           .path=${mdiPlay} label="Play" style=${this.styleIcon(true)}></ha-icon-button>
           </div>
           <spc-player-volume hide=${stopped} .store=${this.store} .player=${this.player} class="player-volume-container"></spc-player-volume>

src/constants.ts

@@ -1,7 +1,7 @@
 import { css } from 'lit';
 
 /** current version of the card. */
-export const CARD_VERSION = '1.0.31';
+export const CARD_VERSION = '1.0.32';
 
 /** SpotifyPlus integration domain identifier. */
 export const DOMAIN_SPOTIFYPLUS = 'spotifyplus';

src/sections/recent-browser.ts

@@ -127,11 +127,21 @@ export class RecentBrowser extends FavBrowserBase {
       // build track uri list from media list.
       const { uris } = getMediaListTrackUrisRemaining(this.mediaList || [], mediaItem);
 
-      // play media item.
-      this.spotifyPlusService.PlayerMediaPlayTracks(this.player.id, uris.join(","));
+      // if shuffle enabled then disable it, as we want to play the selected track first.
+      if (this.player.attributes.shuffle == true) {
+        this.store.mediaControlService.shuffle_set(this.player, false);
+      }
 
-      // show player section.
-      this.store.card.SetSection(Section.PLAYER);
+      // give the shuffle disable time to process.
+      setTimeout(() => {
+
+        // play the selected track, as well as the remaining tracks.
+        this.spotifyPlusService.PlayerMediaPlayTracks(this.player.id, uris.join(","));
+
+        // show player section.
+        this.store.card.SetSection(Section.PLAYER);
+
+      }, 250);
 
     }
     catch (error) {

src/sections/track-fav-browser.ts

@@ -125,11 +125,21 @@ export class TrackFavBrowser extends FavBrowserBase {
       // build track uri list from media list.
       const { uris } = getMediaListTrackUrisRemaining(this.mediaList || [], mediaItem);
 
-      // play media item.
-      this.spotifyPlusService.PlayerMediaPlayTracks(this.player.id, uris.join(","));
+      // if shuffle enabled then disable it, as we want to play the selected track first.
+      if (this.player.attributes.shuffle == true) {
+        this.store.mediaControlService.shuffle_set(this.player, false);
+      }
 
-      // show player section.
-      this.store.card.SetSection(Section.PLAYER);
+      // give the shuffle disable time to process.
+      setTimeout(() => {
+
+        // play the selected track, as well as the remaining tracks.
+        this.spotifyPlusService.PlayerMediaPlayTracks(this.player.id, uris.join(","));
+
+        // show player section.
+        this.store.card.SetSection(Section.PLAYER);
+
+      }, 250);
 
     }
     catch (error) {

src/sections/userpreset-browser.ts

@@ -218,12 +218,22 @@ export class UserPresetBrowser extends FavBrowserBase {
       this.alertInfo = "Playing recommended tracks ...";
       this.requestUpdate();
 
-      // play recommended tracks.
-      const device_id = this.player.attributes.source || null;
-      await this.spotifyPlusService.PlayerMediaPlayTracks(this.player.id, uris.join(","), null, device_id);
+      // if shuffle enabled then disable it, as we want to play the selected track first.
+      if (this.player.attributes.shuffle == true) {
+        await this.store.mediaControlService.shuffle_set(this.player, false);
+      }
 
-      // show player section.
-      this.store.card.SetSection(Section.PLAYER);
+      // give the shuffle disable time to process.
+      setTimeout(() => {
+
+        // play recommended tracks.
+        const device_id = this.player.attributes.source || null;
+        this.spotifyPlusService.PlayerMediaPlayTracks(this.player.id, uris.join(","), null, device_id);
+
+        // show player section.
+        this.store.card.SetSection(Section.PLAYER);
+
+      }, 250);
 
     }
     catch (error) {

src/utils/media-browser-utils.ts

@@ -360,7 +360,7 @@ export function getMediaListTrackUrisRemaining(
       // if not a dupllicate, then add item to return list.
       if (!isDuplicate) {
         uris.push(item.uri);
-        names.push(item.name);
+        names.push(item.name + " (id=" + item.id + ")");
         count += 1;
         if (count >= (maxItems || 50)) {
           break;