fix playermusic

This commit is contained in:
Filipinos 2025-07-15 09:51:33 +02:00
parent 2345183a6d
commit 09261a2978

View File

@ -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);