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

new button to play album or playlist

Browse source
This commit is contained in:
Julien Maille 2025-12-29 13:00:15 +01:00
parent 7892bc53fc
commit 0996a8a0cb
3 changed files with 65 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
js/events.js
View file

@ -324,6 +324,30 @@ export async function handleTrackAction(action, item, player, api, lyricsManager
player.addNextToQueue(item);
renderQueue(player);
showNotification(`Playing next: ${item.title}`);
} else if (action === 'play-card') {
try {
let tracks = [];
if (type === 'album') {
const data = await api.getAlbum(item.id);
tracks = data.tracks;
} else if (type === 'playlist') {
const data = await api.getPlaylist(item.uuid);
tracks = data.tracks;
}
if (tracks.length > 0) {
player.setQueue(tracks, 0);
const shuffleBtn = document.getElementById('shuffle-btn');
if (shuffleBtn) shuffleBtn.classList.remove('active');
player.playAtIndex(0);
showNotification(`Playing ${type}: ${item.title}`);
} else {
showNotification(`No tracks found in this ${type}`);
}
} catch (error) {
console.error('Failed to play card:', error);
showNotification(`Failed to play ${type}`);
}
} else if (action === 'download') {
await downloadTrackWithMetadata(item, player.quality, api, lyricsManager);
} else if (action === 'toggle-like') {
@ -405,7 +429,7 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
let contextTrack = null;
mainContent.addEventListener('click', async e => {
const actionBtn = e.target.closest('.track-action-btn, .like-btn');
const actionBtn = e.target.closest('.track-action-btn, .like-btn, .play-btn');
if (actionBtn && actionBtn.dataset.action) {
e.preventDefault(); // Prevent card navigation
e.stopPropagation();

6
js/ui.js
View file

@ -187,6 +187,9 @@ export class UIRenderer {
<button class="like-btn card-like-btn" data-action="toggle-like" data-type="album" title="Add to Library">
${this.createHeartIcon(false)}
</button>
<button class="play-btn card-play-btn" data-action="play-card" data-type="album" data-id="${album.id}" title="Play">
${SVG_PLAY}
</button>
</div>
<h3 class="card-title">${album.title} ${explicitBadge}</h3>
<p class="card-subtitle">${album.artist?.name ?? ''}</p>
@ -204,6 +207,9 @@ export class UIRenderer {
<button class="like-btn card-like-btn" data-action="toggle-like" data-type="playlist" title="Add to Library">
${this.createHeartIcon(false)}
</button>
<button class="play-btn card-play-btn" data-action="play-card" data-type="playlist" data-id="${playlist.uuid}" title="Play">
${SVG_PLAY}
</button>
</div>
<h3 class="card-title">${playlist.title}</h3>
<p class="card-subtitle">${playlist.numberOfTracks || 0} tracks</p>

34
styles.css
View file

@ -3167,3 +3167,37 @@ img:not([src]), img[src=''] {
background-color: var(--muted);
}
/* Card Play Button */
.card-play-btn {
position: absolute;
bottom: 2%;
right: 2%;
background: var(--highlight) !important;
border-radius: 50% !important;
width: 42px !important;
height: 42px !important;
padding: 0 !important;
display: flex !important;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(10px);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
z-index: 20;
color: var(--background) !important;
border: none !important;
box-shadow: var(--shadow-md);
}
.card:hover .card-play-btn {
opacity: 1;
transform: translateY(0);
}
.card-play-btn:hover {
transform: scale(1.1) translateY(0) !important;
box-shadow: var(--shadow-lg);
filter: brightness(1.1);
}