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

UI: align duration header with track durations in tracklist

Browse source
This commit is contained in:
Julien Maille 2026-01-18 18:21:21 +01:00
parent c507891d46
commit 1caafdc673
2 changed files with 23 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
js/ui.js
View file

@ -493,7 +493,7 @@ export class UIRenderer {
.join('')}</div>`;
}
renderListWithTracks(container, tracks, showCover) {
renderListWithTracks(container, tracks, showCover, append = false) {
const fragment = document.createDocumentFragment();
const tempDiv = document.createElement('div');
@ -508,7 +508,7 @@ export class UIRenderer {
fragment.appendChild(tempDiv.firstChild);
}
container.innerHTML = '';
if (!append) container.innerHTML = '';
container.appendChild(fragment);
tracks.forEach((track) => {
@ -1233,6 +1233,7 @@ export class UIRenderer {
<span style="width: 40px; text-align: center;">#</span>
<span>Title</span>
<span class="duration-header">Duration</span>
<span></span>
</div>
${this.createSkeletonTracks(10, false)}
`;
@ -1286,6 +1287,7 @@ export class UIRenderer {
<span style="width: 40px; text-align: center;">#</span>
<span>Title</span>
<span class="duration-header">Duration</span>
<span></span>
</div>
`;
@ -1295,7 +1297,7 @@ export class UIRenderer {
if (discA !== discB) return discA - discB;
return a.trackNumber - b.trackNumber;
});
this.renderListWithTracks(tracklistContainer, tracks, false);
this.renderListWithTracks(tracklistContainer, tracks, false, true);
recentActivityManager.addAlbum(album);
@ -1459,12 +1461,12 @@ export class UIRenderer {
const tracklistContainer = document.getElementById('playlist-detail-tracklist');
if (tracklistContainer && updatedPlaylist.tracks) {
tracklistContainer.innerHTML = `
<div class="track-list-header">
<span style="width: 40px; text-align: center;">#</span>
<span>Title</span>
<span class="duration-header">Duration</span>
</div>
`;
<div class="track-list-header">
<span style="width: 40px; text-align: center;">#</span>
<span>Title</span>
<span class="duration-header">Duration</span>
<span></span>
</div> `;
this.renderListWithTracks(tracklistContainer, updatedPlaylist.tracks, true);
if (document.querySelector('.remove-from-playlist-btn')) {
@ -1534,6 +1536,7 @@ export class UIRenderer {
<span style="width: 40px; text-align: center;">#</span>
<span>Title</span>
<span class="duration-header">Duration</span>
<span></span>
</div>
${this.createSkeletonTracks(10, true)}
`;
@ -1585,10 +1588,11 @@ export class UIRenderer {
<span style="width: 40px; text-align: center;">#</span>
<span>Title</span>
<span class="duration-header">Duration</span>
<span></span>
</div>
`;
this.renderListWithTracks(tracklistContainer, tracks, true);
this.renderListWithTracks(tracklistContainer, tracks, true, true);
// Add remove buttons and enable reordering ONLY IF OWNED
if (ownedPlaylist) {
@ -1683,10 +1687,11 @@ export class UIRenderer {
<span style="width: 40px; text-align: center;">#</span>
<span>Title</span>
<span class="duration-header">Duration</span>
<span></span>
</div>
`;
this.renderListWithTracks(tracklistContainer, tracks, true);
this.renderListWithTracks(tracklistContainer, tracks, true, true);
// Update header like button
const playlistLikeBtn = document.getElementById('like-playlist-btn');
@ -1745,6 +1750,7 @@ export class UIRenderer {
<span style="width: 40px; text-align: center;">#</span>
<span>Title</span>
<span class="duration-header">Duration</span>
<span></span>
</div>
${this.createSkeletonTracks(10, true)}
`;
@ -1785,10 +1791,11 @@ export class UIRenderer {
<span style="width: 40px; text-align: center;">#</span>
<span>Title</span>
<span class="duration-header">Duration</span>
<span></span>
</div>
`;
this.renderListWithTracks(tracklistContainer, tracks, true);
this.renderListWithTracks(tracklistContainer, tracks, true, true);
// Set play button action
playBtn.onclick = () => {

8
styles.css
View file

@ -966,7 +966,7 @@ body.has-page-background .track-item:hover {
.track-list-header {
display: grid;
grid-template-columns: 40px 1fr auto;
grid-template-columns: 40px 1fr 80px 48px;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-sm);
@ -982,7 +982,7 @@ body.has-page-background .track-item:hover {
.track-item {
display: grid;
grid-template-columns: 40px 1fr auto auto;
grid-template-columns: 40px 1fr 80px 48px;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-sm);
@ -2096,7 +2096,7 @@ input:checked + .slider::before {
.skeleton-track {
display: grid;
grid-template-columns: 40px 1fr auto;
grid-template-columns: 40px 1fr 80px 48px;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-sm);
@ -2596,7 +2596,7 @@ input:checked + .slider::before {
#playlist-detail-tracklist .track-list-header {
display: grid;
grid-template-columns: 40px 1fr auto;
grid-template-columns: 40px 1fr 80px 48px;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-sm);