diff --git a/js/events.js b/js/events.js index 2ded01b..a04d056 100644 --- a/js/events.js +++ b/js/events.js @@ -591,6 +591,10 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen const card = e.target.closest('.card'); if (card) { + if (e.target.closest('.edit-playlist-btn') || e.target.closest('.delete-playlist-btn')) { + return; + } + const href = card.dataset.href; if (href) { // Allow native links inside card to work if any exist diff --git a/js/ui.js b/js/ui.js index 2c8911e..2f7f6e5 100644 --- a/js/ui.js +++ b/js/ui.js @@ -596,6 +596,12 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) { const myPlaylists = await db.getPlaylists(); if (myPlaylists.length) { myPlaylistsContainer.innerHTML = myPlaylists.map(p => this.createUserPlaylistCardHTML(p)).join(''); + myPlaylists.forEach(playlist => { + const el = myPlaylistsContainer.querySelector(`[data-playlist-id="${playlist.id}"]`); + if (el) { + trackDataStore.set(el, playlist); + } + }); } else { myPlaylistsContainer.innerHTML = createPlaceholder('No playlists yet. Create your first playlist!'); } diff --git a/styles.css b/styles.css index 14643e3..11ed53f 100644 --- a/styles.css +++ b/styles.css @@ -666,6 +666,53 @@ body.has-page-background .track-item:hover { color: #ef4444 !important; } +.edit-playlist-btn, +.delete-playlist-btn { + position: absolute; + top: 2%; + background: rgba(0, 0, 0, 0.5) !important; + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + border-radius: 50% !important; + width: 32px !important; + height: 32px !important; + padding: 0 !important; + display: flex !important; + align-items: center; + justify-content: center; + opacity: 0; + transform: scale(0.8); + transition: all 0.2s ease !important; + z-index: 10; + color: white !important; + border: none !important; + cursor: pointer; +} + +.edit-playlist-btn { + right: 2%; +} + +.delete-playlist-btn { + left: 2%; +} + +.card:hover .edit-playlist-btn, +.card:hover .delete-playlist-btn { + opacity: 1; + transform: scale(1); +} + +.edit-playlist-btn:hover, +.delete-playlist-btn:hover { + background: rgba(0, 0, 0, 0.8) !important; + transform: scale(1.1) !important; +} + +.delete-playlist-btn:hover { + color: #ef4444 !important; +} + .card-image { width: 100%; aspect-ratio: 1/1;