From 09261a297843dad48541a4365f63303d3b3ca80f Mon Sep 17 00:00:00 2001
From: Filipinos <drmplayer@imap.fi>
Date: Tue, 15 Jul 2025 09:51:33 +0200
Subject: [PATCH] fix playermusic

---
 js/musicPlayer.js | 51 +++++++++++++++++++++++++----------------------
 1 file changed, 27 insertions(+), 24 deletions(-)

diff --git a/js/musicPlayer.js b/js/musicPlayer.js
index 20698d1..db29e59 100644
--- a/js/musicPlayer.js
+++ b/js/musicPlayer.js
@@ -5,6 +5,7 @@ import { getMusicUrlsFromPlex } from './api.js';
 export class MusicPlayer {
     constructor() {
         this.cancionesActuales = [];
+        this.displayedSongs = [];
         this.indiceActual = -1;
         this.isPlaying = false;
         this.audioPlayer = document.getElementById("audioPlayer");
@@ -131,8 +132,15 @@ export class MusicPlayer {
             const item = event.target.closest('.song-item');
             if(item) {
                 const index = parseInt(item.dataset.index, 10);
-                if (!isNaN(index) && this.cancionesActuales[index]) {
-                    this.playSong(this.cancionesActuales[index], index);
+                if (!isNaN(index) && this.displayedSongs[index]) {
+                    this.cancionesActuales = [...this.displayedSongs];
+                    if (this.shuffleMode) {
+                        this.shuffleArray(this.cancionesActuales);
+                        const newIndex = this.cancionesActuales.findIndex(s => s.id === this.displayedSongs[index].id);
+                        this.playSong(this.cancionesActuales[newIndex], newIndex);
+                    } else {
+                        this.playSong(this.cancionesActuales[index], index);
+                    }
                 }
             }
         });
@@ -456,24 +464,18 @@ export class MusicPlayer {
         if (!this.isReady) return;
         if (!Array.isArray(canciones)) canciones = [];
         
-        if (canciones.length > 0) {
-            if (!this.shuffleMode) {
-                canciones.sort((a, b) => {
-                    const albumCompare = (a.album || '').localeCompare(b.album || '');
-                    if (albumCompare !== 0) return albumCompare;
-                    const trackIndexA = a.trackIndex !== undefined ? a.trackIndex : (a.title || '');
-                    const trackIndexB = b.trackIndex !== undefined ? b.trackIndex : (b.title || '');
-                    return trackIndexA - trackIndexB;
-                });
-            } else {
-                this.shuffleArray(canciones);
-            }
-        }
-        this.cancionesActuales = canciones;
+        canciones.sort((a, b) => {
+            const albumCompare = (a.album || '').localeCompare(b.album || '');
+            if (albumCompare !== 0) return albumCompare;
+            const trackIndexA = a.trackIndex !== undefined ? a.trackIndex : (a.title || '');
+            const trackIndexB = b.trackIndex !== undefined ? b.trackIndex : (b.title || '');
+            return trackIndexA - trackIndexB;
+        });
+
+        this.displayedSongs = canciones;
         this.currentAlbumId = artistId;
-        this.displaySongList(canciones);
+        this.displaySongList(this.displayedSongs);
         this.markCurrentSong();
-        this.markCurrentArtist(artistId);
     }
 
     shuffleArray(array) {
@@ -483,16 +485,16 @@ export class MusicPlayer {
         }
     }
 
-    displaySongList(canciones) {
+    displaySongList(songsToDisplay) {
         if (!this.isReady) return;
         const lista = document.getElementById("listaCanciones");
         lista.innerHTML = '';
-        if (!Array.isArray(canciones) || canciones.length === 0) {
+        if (!Array.isArray(songsToDisplay) || songsToDisplay.length === 0) {
             lista.innerHTML = `<div class="list-item-empty">${_('noSongsFound')}</div>`;
             return;
         }
 
-        const albums = canciones.reduce((acc, cancion) => {
+        const albums = songsToDisplay.reduce((acc, cancion) => {
             const albumTitle = cancion.album || 'Otras Canciones';
             if (!acc[albumTitle]) acc[albumTitle] = [];
             acc[albumTitle].push(cancion);
@@ -500,6 +502,7 @@ export class MusicPlayer {
         }, {});
 
         const fragment = document.createDocumentFragment();
+        let songCounter = 0;
         for (const albumTitle in albums) {
             const albumWrapper = document.createElement('div');
             albumWrapper.className = 'album-group';
@@ -509,22 +512,22 @@ export class MusicPlayer {
             albumWrapper.appendChild(albumHeader);
 
             albums[albumTitle].forEach(cancion => {
-                const originalIndex = this.cancionesActuales.findIndex(c => c.id === cancion.id);
                 if (cancion && cancion.titulo) {
                     const item = document.createElement('div');
                     item.className = 'song-item';
                     item.innerHTML = `
-                        <span class="song-number">${cancion.index || originalIndex + 1}</span>
+                        <span class="song-number">${cancion.index || songCounter + 1}</span>
                         <div class="song-details">
                             <div class="item-title">${cancion.titulo}</div>
                         </div>
                         <i class="fas fa-play play-icon"></i>
                     `;
-                    item.dataset.index = originalIndex;
+                    item.dataset.index = songCounter;
                     item.dataset.id = cancion.id;
                     item.dataset.artistId = cancion.artistId;
                     item.title = `${cancion.titulo} - ${cancion.album}`;
                     albumWrapper.appendChild(item);
+                    songCounter++;
                 }
             });
             fragment.appendChild(albumWrapper);