From c3041a81fd9582afd592d1616ffd402951450cb1 Mon Sep 17 00:00:00 2001 From: Julien Maille Date: Thu, 29 Jan 2026 23:02:41 +0100 Subject: [PATCH] FIX: add to queue option from three dot menu --- index.html | 13 +------------ js/app.js | 2 -- js/events.js | 2 ++ js/settings.js | 10 +--------- js/storage.js | 18 ------------------ js/ui.js | 50 ++++++++++---------------------------------------- styles.css | 37 ++----------------------------------- 7 files changed, 16 insertions(+), 116 deletions(-) diff --git a/index.html b/index.html index 7c06a05..7d098ce 100644 --- a/index.html +++ b/index.html @@ -2100,18 +2100,7 @@ -
-
- Track List Actions - Choose between a dropdown menu or inline buttons for track actions -
- -
+
Compact Artists diff --git a/js/app.js b/js/app.js index 891771e..d605a59 100644 --- a/js/app.js +++ b/js/app.js @@ -4,7 +4,6 @@ import { apiSettings, themeManager, nowPlayingSettings, - trackListSettings, downloadQualitySettings, } from './storage.js'; import { UIRenderer } from './ui.js'; @@ -318,7 +317,6 @@ document.addEventListener('DOMContentLoaded', async () => { const currentTheme = themeManager.getTheme(); themeManager.setTheme(currentTheme); - trackListSettings.getMode(); initializeSettings(scrobbler, player, api, ui); initializePlayerEvents(player, audioPlayer, scrobbler, ui); diff --git a/js/events.js b/js/events.js index a82166a..9bec0f4 100644 --- a/js/events.js +++ b/js/events.js @@ -1052,6 +1052,8 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen contextTrack = clickedTrack; if (contextTrack) { + contextMenu._contextTrack = contextTrack; + contextMenu._contextType = 'track'; await updateContextMenuLikeState(contextMenu, contextTrack); const rect = menuBtn.getBoundingClientRect(); positionMenu(contextMenu, rect.left, rect.bottom + 5, rect); diff --git a/js/settings.js b/js/settings.js index 1ce4ec4..9fd27e6 100644 --- a/js/settings.js +++ b/js/settings.js @@ -5,7 +5,6 @@ import { nowPlayingSettings, lyricsSettings, backgroundSettings, - trackListSettings, cardSettings, waveformSettings, replayGainSettings, @@ -335,14 +334,7 @@ export function initializeSettings(scrobbler, player, api, ui) { }); } - // Track List Actions Mode - const trackListActionsMode = document.getElementById('track-list-actions-mode'); - if (trackListActionsMode) { - trackListActionsMode.value = trackListSettings.getMode(); - trackListActionsMode.addEventListener('change', (e) => { - trackListSettings.setMode(e.target.value); - }); - } + // Compact Artist Toggle const compactArtistToggle = document.getElementById('compact-artist-toggle'); diff --git a/js/storage.js b/js/storage.js index beb95c3..c31ab7f 100644 --- a/js/storage.js +++ b/js/storage.js @@ -461,25 +461,7 @@ export const backgroundSettings = { }, }; -export const trackListSettings = { - STORAGE_KEY: 'track-list-actions-mode', - getMode() { - try { - let mode = localStorage.getItem(this.STORAGE_KEY) || 'dropdown'; - if (mode === 'inline') mode = 'dropdown'; - document.documentElement.setAttribute('data-track-actions-mode', mode); - return mode; - } catch { - return 'dropdown'; - } - }, - - setMode(mode) { - localStorage.setItem(this.STORAGE_KEY, mode); - document.documentElement.setAttribute('data-track-actions-mode', mode); - }, -}; export const cardSettings = { COMPACT_ARTIST_KEY: 'card-compact-artist', diff --git a/js/ui.js b/js/ui.js index 48c9932..04793b4 100644 --- a/js/ui.js +++ b/js/ui.js @@ -224,37 +224,6 @@ export class UIRenderer { const actionsHTML = isUnavailable ? '' : ` -
- - - - - -
@@ -558,21 +527,22 @@ export class UIRenderer { .map((track, i) => this.createTrackItemHTML(track, i, showCover, hasMultipleDiscs, useTrackNumber)) .join(''); + // Bind data to elements immediately using index, avoiding selector ambiguity + Array.from(tempDiv.children).forEach((element, index) => { + const track = tracks[index]; + if (element && track) { + trackDataStore.set(element, track); + // Async update for like button + this.updateLikeState(element, 'track', track.id); + } + }); + while (tempDiv.firstChild) { fragment.appendChild(tempDiv.firstChild); } if (!append) container.innerHTML = ''; container.appendChild(fragment); - - tracks.forEach((track) => { - const element = container.querySelector(`[data-track-id="${track.id}"]`); - if (element) { - trackDataStore.set(element, track); - // Async update for like button - this.updateLikeState(element, 'track', track.id); - } - }); } setPageBackground(imageUrl) { diff --git a/styles.css b/styles.css index 374679d..ae0d08a 100644 --- a/styles.css +++ b/styles.css @@ -1234,19 +1234,13 @@ input[type='search']::-webkit-search-cancel-button { padding: 0.5rem; border-radius: var(--radius); transition: all var(--transition); - display: none; - - /* Controlled by data-track-actions-mode */ + display: flex; align-items: center; justify-content: center; opacity: 0; z-index: 10; } -[data-track-actions-mode='dropdown'] .track-menu-btn { - display: flex; -} - .track-item:hover .track-menu-btn { opacity: 1; padding: 0.5rem; @@ -1258,34 +1252,10 @@ input[type='search']::-webkit-search-cancel-button { color: var(--foreground); } -.track-actions-inline { - display: none; - - /* Controlled by data-track-actions-mode */ - gap: 0.25rem; - opacity: 0.2; - transition: opacity var(--transition); -} - .track-action-btn.active { opacity: 1; } -[data-track-actions-mode='inline'] .track-actions-inline { - display: flex; -} - -:root[data-track-actions-mode='inline'] .track-list-header, -:root[data-track-actions-mode='inline'] .track-item, -:root[data-track-actions-mode='inline'] .skeleton-track, -:root[data-track-actions-mode='inline'] #playlist-detail-tracklist .track-list-header { - grid-template-columns: 40px 1fr 80px 220px; -} - -.track-item:hover .track-actions-inline { - opacity: 1; -} - .track-action-btn { background: transparent; border: none; @@ -1313,10 +1283,7 @@ input[type='search']::-webkit-search-cancel-button { grid-template-columns: 40px 1fr 80px 90px; } -:root[data-track-actions-mode='inline'] .is-editable .track-list-header, -:root[data-track-actions-mode='inline'] .is-editable .track-item { - grid-template-columns: 40px 1fr 80px 260px; -} + .detail-header { display: flex;