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

Merge pull request #16 from Navtej968/main

Browse source 
Fuck your album cover image on the search page(Fixes : #15)
This commit is contained in:
Eduard Prigoana 2025-11-07 14:33:05 +02:00 committed by GitHub
commit bdc021ace4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
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) { 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 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 explicitBadge = hasExplicitContent(track) ? this.createExplicitBadge() : '';
const trackArtists = getTrackArtists(track); const trackArtists = getTrackArtists(track);
const trackTitle = getTrackTitle(track); const trackTitle = getTrackTitle(track);
@ -33,7 +35,6 @@ export class UIRenderer {
<div class="track-item" data-track-id="${track.id}"> <div class="track-item" data-track-id="${track.id}">
${trackNumberHTML} ${trackNumberHTML}
<div class="track-item-info"> <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="track-item-details">
<div class="title"> <div class="title">
${trackTitle} ${trackTitle}
@ -82,9 +83,8 @@ export class UIRenderer {
createSkeletonTrack(showCover = false) { createSkeletonTrack(showCover = false) {
return ` return `
<div class="skeleton-track"> <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"> <div class="skeleton-track-info">
${showCover ? '<div class="skeleton skeleton-track-cover"></div>' : ''}
<div class="skeleton-track-details"> <div class="skeleton-track-details">
<div class="skeleton skeleton-track-title"></div> <div class="skeleton skeleton-track-title"></div>
<div class="skeleton skeleton-track-artist"></div> <div class="skeleton skeleton-track-artist"></div>
@ -150,6 +150,8 @@ export class UIRenderer {
} }
} }
//cats have 9 lives.
async renderHomePage() { async renderHomePage() {
this.showPage('home'); this.showPage('home');
const recents = recentActivityManager.getRecents(); const recents = recentActivityManager.getRecents();
@ -174,7 +176,7 @@ export class UIRenderer {
const artistsContainer = document.getElementById('search-artists-container'); const artistsContainer = document.getElementById('search-artists-container');
const albumsContainer = document.getElementById('search-albums-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); artistsContainer.innerHTML = this.createSkeletonCards(6, true);
albumsContainer.innerHTML = this.createSkeletonCards(6, false); albumsContainer.innerHTML = this.createSkeletonCards(6, false);
@ -217,7 +219,8 @@ export class UIRenderer {
} }
if (finalTracks.length) { 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 { } else {
tracksContainer.innerHTML = createPlaceholder('No tracks found.'); tracksContainer.innerHTML = createPlaceholder('No tracks found.');
} }

9
styles.css
View file

@ -559,6 +559,15 @@ kbd {
justify-content: center; 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 { .track-item-info {
display: flex; display: flex;
align-items: center; align-items: center;