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

Fuck your album cover image on the search page

Browse source
This commit is contained in:
navtej968 2025-11-04 13:16:56 +05:30
parent b5cb97149f
commit 4ef5cd9b58
2 changed files with 18 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
js/ui.js
View file

@ -24,7 +24,9 @@ export class UIRenderer {
createTrackItemHTML(track, index, showCover = false) {
const playIconSmall = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>';
const trackNumberHTML = `<div class="track-number">${showCover ? playIconSmall : index + 1}</div>`;
// When showCover is true we put the album art into the leading column
const trackImageHTML = showCover ? `<img src="${this.api.getCoverUrl(track.album?.cover, '80')}" alt="Track Cover" class="track-item-cover" loading="lazy">` : '';
const trackNumberHTML = `<div class="track-number">${showCover ? trackImageHTML : index + 1}</div>`;
const explicitBadge = hasExplicitContent(track) ? this.createExplicitBadge() : '';
const trackArtists = getTrackArtists(track);
const trackTitle = getTrackTitle(track);
@ -33,7 +35,6 @@ export class UIRenderer {
<div class="track-item" data-track-id="${track.id}">
${trackNumberHTML}
<div class="track-item-info">
${showCover ? `<img src="${this.api.getCoverUrl(track.album?.cover, '80')}" alt="Track Cover" class="track-item-cover" loading="lazy">` : ''}
<div class="track-item-details">
<div class="title">
${trackTitle}
@ -82,9 +83,8 @@ export class UIRenderer {
createSkeletonTrack(showCover = false) {
return `
<div class="skeleton-track">
<div class="skeleton skeleton-track-number"></div>
${showCover ? '<div class="skeleton skeleton-track-cover"></div>' : '<div class="skeleton skeleton-track-number"></div>'}
<div class="skeleton-track-info">
${showCover ? '<div class="skeleton skeleton-track-cover"></div>' : ''}
<div class="skeleton-track-details">
<div class="skeleton skeleton-track-title"></div>
<div class="skeleton skeleton-track-artist"></div>
@ -150,6 +150,8 @@ export class UIRenderer {
}
}
//cats have 9 lives.
async renderHomePage() {
this.showPage('home');
const recents = recentActivityManager.getRecents();
@ -174,7 +176,7 @@ export class UIRenderer {
const artistsContainer = document.getElementById('search-artists-container');
const albumsContainer = document.getElementById('search-albums-container');
tracksContainer.innerHTML = this.createSkeletonTracks(8, false);
tracksContainer.innerHTML = this.createSkeletonTracks(8, true);
artistsContainer.innerHTML = this.createSkeletonCards(6, true);
albumsContainer.innerHTML = this.createSkeletonCards(6, false);
@ -217,7 +219,8 @@ export class UIRenderer {
}
if (finalTracks.length) {
this.renderListWithTracks(tracksContainer, finalTracks, false);
// Show album art next to each search result instead of a numeric index
this.renderListWithTracks(tracksContainer, finalTracks, true);
} else {
tracksContainer.innerHTML = createPlaceholder('No tracks found.');
}

9
styles.css
View file

@ -559,6 +559,15 @@ kbd {
justify-content: center;
}
/* ensure that album cover fit*/
.track-number .track-item-cover {
width: 40px;
height: 40px;
border-radius: 4px;
object-fit: cover;
display: block;
}
.track-item-info {
display: flex;
align-items: center;