fix playermusic
This commit is contained in:
parent
2345183a6d
commit
09261a2978
@ -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);
|
||||
|
Loading…
x
Reference in New Issue
Block a user