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

8
styles.css
View file

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