diff --git a/index.html b/index.html index d069548..894a637 100644 --- a/index.html +++ b/index.html @@ -194,10 +194,9 @@ - - Playlist - - + + + @@ -224,7 +223,6 @@ - Artist diff --git a/js/app.js b/js/app.js index 2856fb5..527a44d 100644 --- a/js/app.js +++ b/js/app.js @@ -146,21 +146,6 @@ function initializeKeyboardShortcuts(player, audioPlayer, lyricsPanel) { }); } -function initializeMediaSessionHandlers(player) { - if (!('mediaSession' in navigator)) return; - - try { - navigator.mediaSession.setActionHandler('seekto', (details) => { - if (details.seekTime !== undefined && details.fastSeek !== undefined && details.fastSeek) { - player.audio.currentTime = details.seekTime; - player.updateMediaSessionPositionState(); - } - }); - } catch (error) { - console.log('seekto action not supported'); - } -} - function showOfflineNotification() { const notification = document.createElement('div'); notification.className = 'offline-notification'; @@ -209,7 +194,6 @@ document.addEventListener('DOMContentLoaded', async () => { initializeTrackInteractions(player, api, document.querySelector('.main-content'), document.getElementById('context-menu'), lyricsManager); initializeUIInteractions(player, api); initializeKeyboardShortcuts(player, audioPlayer, lyricsPanel); - initializeMediaSessionHandlers(player); const castBtn = document.getElementById('cast-btn'); initializeCasting(audioPlayer, castBtn); diff --git a/js/events.js b/js/events.js index 4a82f2a..60fe12a 100644 --- a/js/events.js +++ b/js/events.js @@ -54,7 +54,6 @@ export function initializePlayerEvents(player, audioPlayer, scrobbler) { const currentTimeEl = document.getElementById('current-time'); progressFill.style.width = `${(currentTime / duration) * 100}%`; currentTimeEl.textContent = formatTime(currentTime); - player.updateMediaSessionPositionState(); } }); diff --git a/js/ui-interactions.js b/js/ui-interactions.js index e85965e..88d235c 100644 --- a/js/ui-interactions.js +++ b/js/ui-interactions.js @@ -77,11 +77,10 @@ export function initializeUIInteractions(player, api) { ${formatTime(track.duration)} - - - - - + + + + @@ -94,7 +93,13 @@ export function initializeUIInteractions(player, api) { const index = parseInt(item.dataset.queueIndex); item.addEventListener('click', (e) => { - if (e.target.closest('.track-menu-btn')) return; + const removeBtn = e.target.closest('.queue-remove-btn'); + if (removeBtn) { + e.stopPropagation(); + player.removeFromQueue(index); + renderQueue(); + return; + } player.playAtIndex(index); renderQueue(); }); diff --git a/styles.css b/styles.css index 3972300..3507e0c 100644 --- a/styles.css +++ b/styles.css @@ -1137,7 +1137,6 @@ input:checked + .slider::before { height: 6px; background-color: var(--secondary); border-radius: 3px; - transition: height 0.2s ease; } .progress-bar:hover { @@ -1202,7 +1201,6 @@ input:checked + .slider::before { height: 4px; background-color: var(--secondary); border-radius: 2px; - transition: height 0.2s ease; } .volume-controls .volume-bar:hover { @@ -1515,21 +1513,40 @@ input:checked + .slider::before { cursor: grab; } -.queue-track-item .track-menu-btn { +.queue-track-item .queue-remove-btn { background: transparent; border: none; color: var(--muted-foreground); cursor: pointer; - padding: 4px; - border-radius: 4px; + padding: 0.5rem; + border-radius: var(--radius); transition: all var(--transition); display: flex; align-items: center; justify-content: center; + flex-shrink: 0; + opacity: 0.2; } -.queue-track-item .track-menu-btn:hover { - background-color: var(--muted); +.queue-track-item:hover .queue-remove-btn { + opacity: 1; +} + +@media (hover: none) { + .queue-track-item .queue-remove-btn { + opacity: 1; + } +} + +.queue-track-item .queue-remove-btn:hover { + background-color: var(--secondary); + color: var(--foreground); +} + +.queue-track-item .queue-remove-btn svg { + width: 20px; + height: 20px; +} color: var(--foreground); } @@ -2128,7 +2145,6 @@ input:checked + .slider::before { .main-header { grid-area: header; - padding: var(--spacing-md) var(--spacing-md) 0; margin-bottom: var(--spacing-md); } @@ -2373,7 +2389,7 @@ input:checked + .slider::before { } .queue-track-item { - grid-template-columns: 24px 1fr 40px 28px; + grid-template-columns: 24px 1fr 40px 36px; gap: var(--spacing-sm); padding: var(--spacing-sm); } @@ -2392,7 +2408,7 @@ input:checked + .slider::before { height: 36px; } - .queue-track-item .track-menu-btn { + .queue-track-item .queue-remove-btn { padding: 0.5rem; } @@ -2509,7 +2525,7 @@ input:checked + .slider::before { } .queue-track-item { - grid-template-columns: 20px 1fr 36px 24px; + grid-template-columns: 20px 1fr 36px 32px; gap: 0.375rem; padding: 0.5rem; } @@ -2604,14 +2620,11 @@ input:checked + .slider::before { } @supports (padding-top: env(safe-area-inset-top)) { - .main-header { - padding-top: max(var(--spacing-md), env(safe-area-inset-top)); - } - .now-playing-bar { padding-bottom: max(var(--spacing-md), env(safe-area-inset-bottom)); } + .main-content, .sidebar { padding-top: max(1.5rem, env(safe-area-inset-top)); } @@ -2892,19 +2905,6 @@ input:checked + .slider::before { opacity: 0.3; } -#page-playlist .detail-info { - flex: 1; - min-width: 0; -} - -#page-playlist .detail-info .type { - font-size: 0.875rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; - margin-bottom: 0.5rem; - color: var(--muted-foreground); -} #playlist-detail-title { font-size: 3rem;