diff --git a/js/side-panel.js b/js/side-panel.js index f48106e..730a4f3 100644 --- a/js/side-panel.js +++ b/js/side-panel.js @@ -44,6 +44,19 @@ export class SidePanelManager { return this.currentView === view && this.panel.classList.contains('active'); } + refresh(view, renderControlsCallback, renderContentCallback) { + if (this.isActive(view)) { + if (renderControlsCallback) { + this.controlsElement.innerHTML = ''; + renderControlsCallback(this.controlsElement); + } + if (renderContentCallback) { + this.contentElement.innerHTML = ''; + renderContentCallback(this.contentElement); + } + } + } + updateContent(view, renderContentCallback) { if (this.isActive(view)) { this.contentElement.innerHTML = ''; diff --git a/js/ui-interactions.js b/js/ui-interactions.js index 397bf2a..f6fa90d 100644 --- a/js/ui-interactions.js +++ b/js/ui-interactions.js @@ -30,111 +30,115 @@ export function initializeUIInteractions(player, api) { }); // Queue panel - const openQueuePanel = () => { - const renderControls = (container) => { - const currentQueue = player.getCurrentQueue(); - const showClearBtn = currentQueue.length > 0; + const renderQueueControls = (container) => { + const currentQueue = player.getCurrentQueue(); + const showClearBtn = currentQueue.length > 0; - container.innerHTML = ` - - - `; + container.innerHTML = ` + + + `; - container.querySelector('#close-side-panel-btn').addEventListener('click', () => { - sidePanelManager.close(); + container.querySelector('#close-side-panel-btn').addEventListener('click', () => { + sidePanelManager.close(); + }); + + const clearBtn = container.querySelector('#clear-queue-btn'); + if (clearBtn) { + clearBtn.addEventListener('click', () => { + player.clearQueue(); + refreshQueuePanel(); }); + } + }; - const clearBtn = container.querySelector('#clear-queue-btn'); - if (clearBtn) { - clearBtn.addEventListener('click', () => { - player.clearQueue(); - openQueuePanel(); // Re-render to update state - }); - } - }; + const renderQueueContent = (container) => { + const currentQueue = player.getCurrentQueue(); - const renderContent = (container) => { - const currentQueue = player.getCurrentQueue(); + if (currentQueue.length === 0) { + container.innerHTML = '
Queue is empty.
'; + return; + } - if (currentQueue.length === 0) { - container.innerHTML = '
Queue is empty.
'; - return; - } + const html = currentQueue.map((track, index) => { + const isPlaying = index === player.currentQueueIndex; + const trackTitle = getTrackTitle(track); + const trackArtists = getTrackArtists(track, { fallback: "Unknown" }); - const html = currentQueue.map((track, index) => { - const isPlaying = index === player.currentQueueIndex; - const trackTitle = getTrackTitle(track); - const trackArtists = getTrackArtists(track, { fallback: "Unknown" }); - - return ` -
-
- - - - -
-
- -
-
${trackTitle}
-
${trackArtists}
-
-
-
${formatTime(track.duration)}
- + return ` +
+
+ + + +
- `; - }).join(''); +
+ +
+
${trackTitle}
+
${trackArtists}
+
+
+
${formatTime(track.duration)}
+ +
+ `; + }).join(''); - container.innerHTML = html; + container.innerHTML = html; - container.querySelectorAll('.queue-track-item').forEach((item) => { - const index = parseInt(item.dataset.queueIndex); + container.querySelectorAll('.queue-track-item').forEach((item) => { + const index = parseInt(item.dataset.queueIndex); - item.addEventListener('click', (e) => { - const removeBtn = e.target.closest('.queue-remove-btn'); - if (removeBtn) { - e.stopPropagation(); - player.removeFromQueue(index); - openQueuePanel(); // Re-render - return; - } - player.playAtIndex(index); - openQueuePanel(); // Re-render to update playing state - }); - - item.addEventListener('dragstart', (e) => { - draggedQueueIndex = index; - item.style.opacity = '0.5'; - }); - - item.addEventListener('dragend', () => { - item.style.opacity = '1'; - }); - - item.addEventListener('dragover', (e) => { - e.preventDefault(); - }); - - item.addEventListener('drop', (e) => { - e.preventDefault(); - if (draggedQueueIndex !== null && draggedQueueIndex !== index) { - player.moveInQueue(draggedQueueIndex, index); - openQueuePanel(); // Re-render - } - }); + item.addEventListener('click', (e) => { + const removeBtn = e.target.closest('.queue-remove-btn'); + if (removeBtn) { + e.stopPropagation(); + player.removeFromQueue(index); + refreshQueuePanel(); + return; + } + player.playAtIndex(index); + refreshQueuePanel(); }); - }; - sidePanelManager.open('queue', 'Queue', renderControls, renderContent); + item.addEventListener('dragstart', (e) => { + draggedQueueIndex = index; + item.style.opacity = '0.5'; + }); + + item.addEventListener('dragend', () => { + item.style.opacity = '1'; + }); + + item.addEventListener('dragover', (e) => { + e.preventDefault(); + }); + + item.addEventListener('drop', (e) => { + e.preventDefault(); + if (draggedQueueIndex !== null && draggedQueueIndex !== index) { + player.moveInQueue(draggedQueueIndex, index); + refreshQueuePanel(); + } + }); + }); + }; + + const refreshQueuePanel = () => { + sidePanelManager.refresh('queue', renderQueueControls, renderQueueContent); + }; + + const openQueuePanel = () => { + sidePanelManager.open('queue', 'Queue', renderQueueControls, renderQueueContent); }; queueBtn.addEventListener('click', openQueuePanel); @@ -142,7 +146,7 @@ export function initializeUIInteractions(player, api) { // Expose renderQueue for external updates (e.g. shuffle, add to queue) window.renderQueueFunction = () => { if (sidePanelManager.isActive('queue')) { - openQueuePanel(); // Re-open acts as update if active + refreshQueuePanel(); } };