vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

imp: remove innerHTML and put it in index.html

Browse source
This commit is contained in:
Julien Maille 2026-01-01 22:42:51 +01:00
parent 34dba30d6b
commit 6e265cfeda
2 changed files with 57 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
index.html
View file

@ -205,7 +205,7 @@
</section> </section>
<section class="content-section"> <section class="content-section">
<h2 class="section-title">Your Favorites</h2> <h2 class="section-title">Favorites</h2>
<div class="search-tabs"> <div class="search-tabs">
<button class="search-tab active" data-tab="tracks">Liked Tracks</button> <button class="search-tab active" data-tab="tracks">Liked Tracks</button>
<button class="search-tab" data-tab="albums">Albums</button> <button class="search-tab" data-tab="albums">Albums</button>
@ -259,6 +259,26 @@
</div> </div>
</header> </header>
<div class="track-list" id="album-detail-tracklist"></div> <div class="track-list" id="album-detail-tracklist"></div>
<section class="content-section" id="album-section-more-albums" style="display: none; margin-top: 3rem;">
<h2 class="section-title" id="album-title-more-albums">More from Artist</h2>
<div class="card-grid" id="album-detail-more-albums"></div>
</section>
<section class="content-section" id="album-section-eps" style="display: none; margin-top: 3rem;">
<h2 class="section-title" id="album-title-eps">EPs and Singles</h2>
<div class="card-grid" id="album-detail-eps"></div>
</section>
<section class="content-section" id="album-section-similar-artists" style="display: none; margin-top: 3rem;">
<h2 class="section-title">Similar Artists</h2>
<div class="card-grid" id="album-detail-similar-artists"></div>
</section>
<section class="content-section" id="album-section-similar-albums" style="display: none; margin-top: 3rem;">
<h2 class="section-title">Similar Albums</h2>
<div class="card-grid" id="album-detail-similar-albums"></div>
</section>
</div> </div>
<section id="page-playlist" class="page"> <section id="page-playlist" class="page">

94
js/ui.js
View file

@ -884,24 +884,27 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
document.title = `${album.title} - ${album.artist.name} - Monochrome`; document.title = `${album.title} - ${album.artist.name} - Monochrome`;
// "More from Artist" Sections // "More from Artist" and Related Sections
const moreAlbumsSection = document.getElementById('album-section-more-albums');
const moreAlbumsContainer = document.getElementById('album-detail-more-albums');
const moreAlbumsTitle = document.getElementById('album-title-more-albums');
const epsSection = document.getElementById('album-section-eps');
const epsContainer = document.getElementById('album-detail-eps');
const epsTitle = document.getElementById('album-title-eps');
const similarArtistsSection = document.getElementById('album-section-similar-artists');
const similarArtistsContainer = document.getElementById('album-detail-similar-artists');
const similarAlbumsSection = document.getElementById('album-section-similar-albums');
const similarAlbumsContainer = document.getElementById('album-detail-similar-albums');
// Hide all initially
[moreAlbumsSection, epsSection, similarArtistsSection, similarAlbumsSection].forEach(el => {
if (el) el.style.display = 'none';
});
try { try {
// Remove any existing "More from" sections if re-rendering
document.querySelectorAll('.album-more-section').forEach(el => el.remove());
document.getElementById('album-more-from-artist')?.remove(); // Legacy cleanup
// Create placeholder section while loading
const placeholderSection = document.createElement('section');
placeholderSection.className = 'content-section album-more-section';
placeholderSection.style.marginTop = '3rem';
placeholderSection.innerHTML = `
<h2 class="section-title">More from ${album.artist.name}</h2>
<div class="card-grid">
${this.createSkeletonCards(6, false)}
</div>
`;
document.getElementById('page-album').appendChild(placeholderSection);
const artistData = await this.api.getArtist(album.artist.id); const artistData = await this.api.getArtist(album.artist.id);
// Add Mix/Radio Button to header // Add Mix/Radio Button to header
@ -910,11 +913,10 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
mixBtn.style.display = 'flex'; mixBtn.style.display = 'flex';
mixBtn.onclick = () => window.location.hash = `#mix/${artistData.mixes.ARTIST_MIX}?type=artist&name=${encodeURIComponent(artistData.name)}`; mixBtn.onclick = () => window.location.hash = `#mix/${artistData.mixes.ARTIST_MIX}?type=artist&name=${encodeURIComponent(artistData.name)}`;
} }
// Remove placeholder
placeholderSection.remove();
const renderSection = (title, items) => { const renderSection = (items, container, section, titleEl, titleText) => {
if (!container || !section) return;
const filtered = (items || []) const filtered = (items || [])
.filter(a => a.id != album.id) .filter(a => a.id != album.id)
.filter((a, index, self) => .filter((a, index, self) =>
@ -924,19 +926,12 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
if (filtered.length === 0) return; if (filtered.length === 0) return;
const section = document.createElement('section'); container.innerHTML = filtered.map(a => this.createAlbumCardHTML(a)).join('');
section.className = 'content-section album-more-section'; if (titleEl && titleText) titleEl.textContent = titleText;
section.style.marginTop = '3rem'; section.style.display = 'block';
section.innerHTML = `
<h2 class="section-title">${title}</h2>
<div class="card-grid">
${filtered.map(a => this.createAlbumCardHTML(a)).join('')}
</div>
`;
document.getElementById('page-album').appendChild(section);
filtered.forEach(a => { filtered.forEach(a => {
const el = section.querySelector(`[data-album-id="${a.id}"]`); const el = container.querySelector(`[data-album-id="${a.id}"]`);
if (el) { if (el) {
trackDataStore.set(el, a); trackDataStore.set(el, a);
this.updateLikeState(el, 'album', a.id); this.updateLikeState(el, 'album', a.id);
@ -944,41 +939,25 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
}); });
}; };
renderSection(`More albums from ${album.artist.name}`, artistData.albums); renderSection(artistData.albums, moreAlbumsContainer, moreAlbumsSection, moreAlbumsTitle, `More albums from ${album.artist.name}`);
renderSection(`EPs and Singles from ${album.artist.name}`, artistData.eps); renderSection(artistData.eps, epsContainer, epsSection, epsTitle, `EPs and Singles from ${album.artist.name}`);
// Similar Artists // Similar Artists
this.api.getSimilarArtists(album.artist.id).then(similar => { this.api.getSimilarArtists(album.artist.id).then(similar => {
if (similar && similar.length > 0) { if (similar && similar.length > 0 && similarArtistsContainer && similarArtistsSection) {
const section = document.createElement('section'); similarArtistsContainer.innerHTML = similar.map(a => this.createArtistCardHTML(a)).join('');
section.className = 'content-section album-more-section'; similarArtistsSection.style.display = 'block';
section.style.marginTop = '3rem';
section.innerHTML = `
<h2 class="section-title">Similar Artists</h2>
<div class="card-grid">
${similar.map(a => this.createArtistCardHTML(a)).join('')}
</div>
`;
document.getElementById('page-album').appendChild(section);
} }
}).catch(e => console.warn('Failed to load similar artists:', e)); }).catch(e => console.warn('Failed to load similar artists:', e));
// Similar Albums // Similar Albums
this.api.getSimilarAlbums(albumId).then(similar => { this.api.getSimilarAlbums(albumId).then(similar => {
if (similar && similar.length > 0) { if (similar && similar.length > 0 && similarAlbumsContainer && similarAlbumsSection) {
const section = document.createElement('section'); similarAlbumsContainer.innerHTML = similar.map(a => this.createAlbumCardHTML(a)).join('');
section.className = 'content-section album-more-section'; similarAlbumsSection.style.display = 'block';
section.style.marginTop = '3rem';
section.innerHTML = `
<h2 class="section-title">Similar Albums</h2>
<div class="card-grid">
${similar.map(a => this.createAlbumCardHTML(a)).join('')}
</div>
`;
document.getElementById('page-album').appendChild(section);
similar.forEach(a => { similar.forEach(a => {
const el = section.querySelector(`[data-album-id="${a.id}"]`); const el = similarAlbumsContainer.querySelector(`[data-album-id="${a.id}"]`);
if (el) { if (el) {
trackDataStore.set(el, a); trackDataStore.set(el, a);
this.updateLikeState(el, 'album', a.id); this.updateLikeState(el, 'album', a.id);
@ -989,7 +968,6 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
} catch (err) { } catch (err) {
console.warn('Failed to load "More from artist":', err); console.warn('Failed to load "More from artist":', err);
document.querySelectorAll('.album-more-section').forEach(el => el.remove());
} }
} catch (error) { } catch (error) {