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

feat: change loading eagerness to make lcp faster

Browse source
This commit is contained in:
binimum 2026-04-05 14:44:40 +00:00 committed by GitHub
parent cffd97ff69
commit 014d1ef74e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 28 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
index.html
View file

@ -80,10 +80,23 @@
<link rel="apple-touch-icon" href="/assets/logo.svg" /> <link rel="apple-touch-icon" href="/assets/logo.svg" />
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<link rel="icon" href="/assets/logo.svg" type="image/svg+xml" /> <link rel="icon" href="/assets/logo.svg" type="image/svg+xml" />
<link
rel="preload"
as="style"
href="https://api.fonts.coollabs.io/css2?family=Inter:wght@400;500;600;700;800&display=swap"
/>
<link <link
href="https://api.fonts.coollabs.io/css2?family=Inter:wght@400;500;600;700;800&display=swap" href="https://api.fonts.coollabs.io/css2?family=Inter:wght@400;500;600;700;800&display=swap"
rel="stylesheet" rel="stylesheet"
media="print"
onload="this.media='all'"
/> />
<noscript>
<link
href="https://api.fonts.coollabs.io/css2?family=Inter:wght@400;500;600;700;800&display=swap"
rel="stylesheet"
/>
</noscript>
<link rel="stylesheet" href="/styles.css" /> <link rel="stylesheet" href="/styles.css" />
</head> </head>
@ -1751,7 +1764,7 @@
</p> </p>
</div> </div>
<section class="content-section" id="home-editors-picks-section-empty" style="margin-top: 0"> <section class="content-section" id="home-editors-picks-section-empty" style="margin-top: 0; display: none;">
<div <div
style=" style="
display: flex; display: flex;
@ -5530,7 +5543,7 @@
<footer class="now-playing-bar"> <footer class="now-playing-bar">
<div class="track-info"> <div class="track-info">
<img src="/assets/appicon.png" alt="Current Track Cover" class="cover" /> <img src="/assets/appicon.png" alt="Current Track Cover" class="cover" fetchpriority="high" />
<div class="details"> <div class="details">
<div class="title">Select a song</div> <div class="title">Select a song</div>
<div class="album"></div> <div class="album"></div>

4
js/app.js
View file

@ -149,7 +149,7 @@ async function fetchcontributors() {
const userDIV = document.createElement('div'); const userDIV = document.createElement('div');
userDIV.innerHTML = ` userDIV.innerHTML = `
<a href="${user.html_url}" target="_blank"> <a href="${user.html_url}" target="_blank">
<img src="${user.avatar_url}" alt="${user.login}" width="50" style="border-radius: 50%;"> <img src="${user.avatar_url}&s=50" alt="${user.login}" width="50" height="50" style="border-radius: 50%;">
<span>${user.login}</span> <span>${user.login}</span>
<span class="contrib">Contributions: ${user.contributions}</span> <span class="contrib">Contributions: ${user.contributions}</span>
</a> </a>
@ -2894,7 +2894,7 @@ document.addEventListener('DOMContentLoaded', async () => {
if (user) { if (user) {
const data = await syncManager.getUserData(); const data = await syncManager.getUserData();
if (data && data.profile && data.profile.avatar_url) { if (data && data.profile && data.profile.avatar_url) {
headerAccountImg.src = data.profile.avatar_url; headerAccountImg.src = data.profile.avatar_url + '&s=100';
headerAccountImg.style.display = 'block'; headerAccountImg.style.display = 'block';
headerAccountIcon.style.display = 'none'; headerAccountIcon.style.display = 'none';
return; return;

4
js/tracker.js
View file

@ -304,7 +304,7 @@ export function createProjectCardHTML(era, _artist, sheetId, trackCount) {
${playBtnHTML} ${playBtnHTML}
</div> </div>
<div class="card-info"> <div class="card-info">
<h4 class="card-title">${escapeHtml(era.name)}</h4> <h3 class="card-title">${escapeHtml(era.name)}</h3>
<p class="card-subtitle">${era.timeline || 'Unreleased'} • ${trackCount} tracks</p> <p class="card-subtitle">${era.timeline || 'Unreleased'} • ${trackCount} tracks</p>
</div> </div>
</div> </div>
@ -784,7 +784,7 @@ export async function renderUnreleasedPage(container) {
<img class="card-image" src="${coverImage}" alt="${artist.name}" loading="lazy" onerror="this.src='assets/logo.svg'"> <img class="card-image" src="${coverImage}" alt="${artist.name}" loading="lazy" onerror="this.src='assets/logo.svg'">
</div> </div>
<div class="card-info"> <div class="card-info">
<h4 class="card-title">${artist.name}</h4> <h3 class="card-title">${artist.name}</h3>
<p class="card-subtitle">Unreleased Music</p> <p class="card-subtitle">Unreleased Music</p>
</div> </div>
`; `;

11
js/ui.js
View file

@ -577,7 +577,7 @@ export class UIRenderer {
const cardContent = ` const cardContent = `
<div class="card-info"> <div class="card-info">
<h4 class="card-title">${title}</h4> <h3 class="card-title">${title}</h3>
${subtitle ? `<p class="card-subtitle">${subtitle}</p>` : ''} ${subtitle ? `<p class="card-subtitle">${subtitle}</p>` : ''}
</div>`; </div>`;
@ -749,7 +749,7 @@ export class UIRenderer {
album.cover, album.cover,
escapeHtml(album.title), escapeHtml(album.title),
'card-image', 'card-image',
'lazy', album._lazy === false ? 'eager' : 'lazy',
album.videoCoverUrl album.videoCoverUrl
), ),
actionButtonsHTML: ` actionButtonsHTML: `
@ -821,7 +821,7 @@ export class UIRenderer {
href: `/artist/${artist.id}`, href: `/artist/${artist.id}`,
title: escapeHtml(artist.name), title: escapeHtml(artist.name),
subtitle: '', subtitle: '',
imageHTML: `<img src="${this.api.getArtistPictureUrl(artist.picture)}" alt="${escapeHtml(artist.name)}" class="card-image" loading="lazy">`, imageHTML: `<img src="${this.api.getArtistPictureUrl(artist.picture)}" alt="${escapeHtml(artist.name)}" class="card-image" loading="${artist._lazy === false ? 'eager' : 'lazy'}">`,
actionButtonsHTML: ` actionButtonsHTML: `
<button class="like-btn card-like-btn" data-action="toggle-like" data-type="artist" title="Add to Liked"> <button class="like-btn card-like-btn" data-action="toggle-like" data-type="artist" title="Add to Liked">
${this.createHeartIcon(false)} ${this.createHeartIcon(false)}
@ -2621,6 +2621,7 @@ export class UIRenderer {
audioQuality: item.audioQuality, audioQuality: item.audioQuality,
mediaMetadata: item.mediaMetadata, mediaMetadata: item.mediaMetadata,
type: 'ALBUM', type: 'ALBUM',
_lazy: cardsHTML.length >= 6
}; };
cardsHTML.push(this.createAlbumCardHTML(album)); cardsHTML.push(this.createAlbumCardHTML(album));
itemsToStore.push({ el: null, data: album, type: 'album' }); itemsToStore.push({ el: null, data: album, type: 'album' });
@ -2628,6 +2629,7 @@ export class UIRenderer {
// Fall back to API call for legacy format // Fall back to API call for legacy format
const result = await this.api.getAlbum(item.id); const result = await this.api.getAlbum(item.id);
if (result && result.album) { if (result && result.album) {
result.album._lazy = cardsHTML.length >= 6;
cardsHTML.push(this.createAlbumCardHTML(result.album)); cardsHTML.push(this.createAlbumCardHTML(result.album));
itemsToStore.push({ el: null, data: result.album, type: 'album' }); itemsToStore.push({ el: null, data: result.album, type: 'album' });
} }
@ -2650,6 +2652,7 @@ export class UIRenderer {
releaseDate: item.releaseDate, releaseDate: item.releaseDate,
type: 'ALBUM', type: 'ALBUM',
_href: `/userplaylist/${item.id}`, _href: `/userplaylist/${item.id}`,
_lazy: cardsHTML.length >= 6
}) })
); );
itemsToStore.push({ el: null, data: playlist, type: 'user-playlist' }); itemsToStore.push({ el: null, data: playlist, type: 'user-playlist' });
@ -2661,6 +2664,7 @@ export class UIRenderer {
id: item.id, id: item.id,
name: item.name, name: item.name,
picture: item.picture, picture: item.picture,
_lazy: cardsHTML.length >= 6
}; };
cardsHTML.push(this.createArtistCardHTML(artist)); cardsHTML.push(this.createArtistCardHTML(artist));
itemsToStore.push({ el: null, data: artist, type: 'artist' }); itemsToStore.push({ el: null, data: artist, type: 'artist' });
@ -2668,6 +2672,7 @@ export class UIRenderer {
// Fall back to API call // Fall back to API call
const artist = await this.api.getArtist(item.id); const artist = await this.api.getArtist(item.id);
if (artist) { if (artist) {
artist._lazy = cardsHTML.length >= 6;
cardsHTML.push(this.createArtistCardHTML(artist)); cardsHTML.push(this.createArtistCardHTML(artist));
itemsToStore.push({ el: null, data: artist, type: 'artist' }); itemsToStore.push({ el: null, data: artist, type: 'artist' });
} }

2
styles.css
View file

@ -3570,7 +3570,7 @@ input:checked + .slider::before {
} }
.player-controls .progress-container span { .player-controls .progress-container span {
min-width: 40px; min-width: 45px;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
flex-shrink: 0; flex-shrink: 0;
} }