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

feat: add 'More from Artist' section to album page and refine header spacing

Browse source
This commit is contained in:
Julien Maille 2025-12-23 14:51:54 +01:00 committed by Julien Maille
parent 70c942e39b
commit 73edcc0f36
2 changed files with 46 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
js/ui.js
View file

@ -351,6 +351,46 @@ export class UIRenderer {
recentActivityManager.addAlbum(album);
document.title = `${album.title} - ${album.artist.name} - Monochrome`;
// "More from Artist" Section
try {
// Remove any existing "More from" section if re-rendering
const existingMoreSection = document.getElementById('album-more-from-artist');
if (existingMoreSection) existingMoreSection.remove();
const moreSection = document.createElement('section');
moreSection.id = 'album-more-from-artist';
moreSection.className = 'content-section';
moreSection.style.marginTop = '3rem';
moreSection.innerHTML = `
<h2 class="section-title">More from ${album.artist.name}</h2>
<div class="card-grid" id="album-more-albums">
${this.createSkeletonCards(6, false)}
</div>
`;
document.getElementById('page-album').appendChild(moreSection);
const artistData = await this.api.getArtist(album.artist.id);
// Filter out current album and duplicates
const otherAlbums = artistData.albums
.filter(a => a.id != album.id)
.filter((a, index, self) =>
index === self.findIndex((t) => t.title === a.title) // Dedup by title
)
.slice(0, 12); // Limit to 12
const moreContainer = document.getElementById('album-more-albums');
if (otherAlbums.length > 0) {
moreContainer.innerHTML = otherAlbums.map(a => this.createAlbumCardHTML(a)).join('');
} else {
moreSection.remove(); // Remove section if no other albums
}
} catch (err) {
console.warn('Failed to load "More from artist":', err);
document.getElementById('album-more-from-artist')?.remove();
}
} catch (error) {
console.error("Failed to load album:", error);
tracklistContainer.innerHTML = createPlaceholder(`Could not load album details. ${error.message}`);

11
styles.css
View file

@ -666,8 +666,8 @@ kbd {
display: flex;
align-items: flex-end;
gap: var(--spacing-xl);
margin-bottom: var(--spacing-2xl);
padding-bottom: var(--spacing-xl);
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-md);
}
.detail-header-image {
@ -2622,15 +2622,16 @@ input:checked + .slider::before {
.now-playing-bar .cover:hover::after {
opacity: 1;
}
#page-playlist .detail-header {
display: flex;
align-items: flex-end;
gap: var(--spacing-xl);
margin-bottom: var(--spacing-2xl);
padding-bottom: var(--spacing-xl);
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-md);
}
#playlist-detail-image {
#page-playlist .detail-cover {
width: 200px;
height: 200px;
flex-shrink: 0;