Filipinos/CinePlex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

fix playermusic

Browse Source
This commit is contained in:
Filipinos 2025-07-15 09:51:33 +02:00
parent 2345183a6d
commit 09261a2978
1 changed files with 27 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
js/musicPlayer.js
View File

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