From 0996a8a0cba067e0e0145a7a6ea8ef9e05a26e07 Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@gmail.com>
Date: Mon, 29 Dec 2025 13:00:15 +0100
Subject: [PATCH] new button to play album or playlist

---
 js/events.js | 26 +++++++++++++++++++++++++-
 js/ui.js     |  6 ++++++
 styles.css   | 34 ++++++++++++++++++++++++++++++++++
 3 files changed, 65 insertions(+), 1 deletion(-)

diff --git a/js/events.js b/js/events.js
index 44135a6..4831b8c 100644
--- a/js/events.js
+++ b/js/events.js
@@ -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();
diff --git a/js/ui.js b/js/ui.js
index 9e751f3..f032636 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -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>
diff --git a/styles.css b/styles.css
index a6af0c7..b4c566b 100644
--- a/styles.css
+++ b/styles.css
@@ -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);
+}
+
+