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

Prepare for similar artists coming from tidal api

Browse source
This commit is contained in:
Julien Maille 2026-01-01 15:50:31 +01:00
parent d0cc9f03f1
commit 4ffac0ae0a
3 changed files with 59 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -310,6 +310,10 @@
<h2 class="section-title">EPs and Singles</h2>
<div class="card-grid" id="artist-detail-eps"></div>
</section>
<section class="content-section" id="artist-section-similar" style="display: none;">
<h2 class="section-title">Fans Also Like</h2>
<div class="card-grid" id="artist-detail-similar"></div>
</section>
</div>
<div id="page-settings" class="page">

21
js/api.js
View file

@ -575,6 +575,27 @@ export class LosslessAPI {
async getSimilarArtists(artistId) {
const cached = await this.cache.get('similar_artists', artistId);
if (cached) return cached;
try {
const response = await this.fetchWithRetry(`/artist/similar/?id=${artistId}`, { type: 'api' });
const data = await response.json();
// Handle various response structures
const items = data.artists || data.items || data.data || (Array.isArray(data) ? data : []);
const result = items.map(artist => this.prepareArtist(artist));
await this.cache.set('similar_artists', artistId, result);
return result;
} catch (e) {
console.warn('Failed to fetch similar artists:', e);
return [];
}
}
normalizeTrackResponse(apiResponse) {
if (!apiResponse || typeof apiResponse !== 'object') {
return apiResponse;

34
js/ui.js
View file

@ -938,6 +938,22 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
renderSection(`More albums from ${album.artist.name}`, artistData.albums);
renderSection(`EPs and Singles from ${album.artist.name}`, artistData.eps);
// Similar Artists
this.api.getSimilarArtists(album.artist.id).then(similar => {
if (similar && similar.length > 0) {
const section = document.createElement('section');
section.className = 'content-section album-more-section';
section.style.marginTop = '3rem';
section.innerHTML = `
<h2 class="section-title">Fans Also Like</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 (err) {
console.warn('Failed to load "More from artist":', err);
document.querySelectorAll('.album-more-section').forEach(el => el.remove());
@ -1099,6 +1115,8 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
const albumsContainer = document.getElementById('artist-detail-albums');
const epsContainer = document.getElementById('artist-detail-eps');
const epsSection = document.getElementById('artist-section-eps');
const similarContainer = document.getElementById('artist-detail-similar');
const similarSection = document.getElementById('artist-section-similar');
const dlBtn = document.getElementById('download-discography-btn');
if (dlBtn) dlBtn.innerHTML = `${SVG_DOWNLOAD}<span>Download Discography</span>`;
@ -1110,10 +1128,26 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
albumsContainer.innerHTML = this.createSkeletonCards(6, false);
if (epsContainer) epsContainer.innerHTML = this.createSkeletonCards(6, false);
if (epsSection) epsSection.style.display = 'none';
if (similarContainer) similarContainer.innerHTML = this.createSkeletonCards(6, true);
if (similarSection) similarSection.style.display = 'block';
try {
const artist = await this.api.getArtist(artistId);
// Similar Artists
if (similarContainer && similarSection) {
this.api.getSimilarArtists(artistId).then(similar => {
if (similar && similar.length > 0) {
similarContainer.innerHTML = similar.map(a => this.createArtistCardHTML(a)).join('');
similarSection.style.display = 'block';
} else {
similarSection.style.display = 'none';
}
}).catch(() => {
similarSection.style.display = 'none';
});
}
imageEl.src = this.api.getArtistPictureUrl(artist.picture, '750');
imageEl.style.backgroundColor = '';
nameEl.textContent = artist.name;