From f4f6a1941c487f660cb4fb4b3f5c74277e7f3588 Mon Sep 17 00:00:00 2001 From: Julien Maille Date: Wed, 24 Dec 2025 18:26:42 +0100 Subject: [PATCH 1/5] feat: add a library of liked song, artist, albums, playlists --- index.html | 49 ++++++++++++ js/app.js | 9 +++ js/db.js | 139 ++++++++++++++++++++++++++++++++++ js/events.js | 70 +++++++++++++++-- js/router.js | 3 + js/settings.js | 37 +++++++++ js/ui-interactions.js | 14 +++- js/ui.js | 169 ++++++++++++++++++++++++++++++++++++++++-- styles.css | 62 +++++++++++++++- 9 files changed, 531 insertions(+), 21 deletions(-) create mode 100644 js/db.js diff --git a/index.html b/index.html index 9a5b593..5e5aa5b 100644 --- a/index.html +++ b/index.html @@ -77,6 +77,12 @@ Home +
  • + + + Library + +
  • @@ -159,6 +165,28 @@ +
    +

    Your Library

    +
    + + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    @@ -173,6 +201,9 @@ +
    @@ -190,9 +221,13 @@ + + @@ -215,6 +250,9 @@ + @@ -370,6 +408,17 @@ +
    +
    + Backup & Restore + Export or import your library and playlists as JSON +
    +
    + + + +
    +
    diff --git a/js/app.js b/js/app.js index dfafd45..3a0dbc0 100644 --- a/js/app.js +++ b/js/app.js @@ -30,7 +30,16 @@ function initializeCasting(audioPlayer, castBtn) { }); castBtn.addEventListener('click', () => { + if (!audioPlayer.src) { + alert('Please play a track first to enable casting.'); + return; + } audioPlayer.remote.prompt().catch(err => { + if (err.name === 'NotAllowedError') return; + if (err.name === 'NotFoundError') { + alert('No remote playback devices (Chromecast/AirPlay) were found on your network.'); + return; + } console.log('Cast prompt error:', err); }); }); diff --git a/js/db.js b/js/db.js new file mode 100644 index 0000000..6e8133d --- /dev/null +++ b/js/db.js @@ -0,0 +1,139 @@ +export class MusicDatabase { + constructor() { + this.dbName = 'MonochromeDB'; + this.version = 2; + this.db = null; + } + + async open() { + if (this.db) return this.db; + + return new Promise((resolve, reject) => { + const request = indexedDB.open(this.dbName, this.version); + + request.onerror = (event) => { + console.error("Database error:", event.target.error); + reject(event.target.error); + }; + + request.onsuccess = (event) => { + this.db = event.target.result; + resolve(this.db); + }; + + request.onupgradeneeded = (event) => { + const db = event.target.result; + + // Favorites stores + if (!db.objectStoreNames.contains('favorites_tracks')) { + const store = db.createObjectStore('favorites_tracks', { keyPath: 'id' }); + store.createIndex('addedAt', 'addedAt', { unique: false }); + } + if (!db.objectStoreNames.contains('favorites_albums')) { + const store = db.createObjectStore('favorites_albums', { keyPath: 'id' }); + store.createIndex('addedAt', 'addedAt', { unique: false }); + } + if (!db.objectStoreNames.contains('favorites_artists')) { + const store = db.createObjectStore('favorites_artists', { keyPath: 'id' }); + store.createIndex('addedAt', 'addedAt', { unique: false }); + } + if (!db.objectStoreNames.contains('favorites_playlists')) { + const store = db.createObjectStore('favorites_playlists', { keyPath: 'uuid' }); + store.createIndex('addedAt', 'addedAt', { unique: false }); + } + }; + }); + } + + // Generic Helper + async performTransaction(storeName, mode, callback) { + const db = await this.open(); + return new Promise((resolve, reject) => { + const transaction = db.transaction(storeName, mode); + const store = transaction.objectStore(storeName); + const request = callback(store); + + transaction.oncomplete = () => { + resolve(request?.result); + }; + transaction.onerror = (event) => { + reject(event.target.error); + }; + }); + } + + // Favorites API + async toggleFavorite(type, item) { + const storeName = `favorites_${type}s`; // tracks, albums, artists + const key = type === 'playlist' ? item.uuid : item.id; + const exists = await this.isFavorite(type, key); + + if (exists) { + await this.performTransaction(storeName, 'readwrite', (store) => store.delete(key)); + return false; // Removed + } else { + const entry = { ...item, addedAt: Date.now() }; + await this.performTransaction(storeName, 'readwrite', (store) => store.put(entry)); + return true; // Added + } + } + + async isFavorite(type, id) { + const storeName = `favorites_${type}s`; + try { + const result = await this.performTransaction(storeName, 'readonly', (store) => store.get(id)); + return !!result; + } catch (e) { + return false; + } + } + + async getFavorites(type) { + const storeName = `favorites_${type}s`; + const db = await this.open(); + return new Promise((resolve, reject) => { + const transaction = db.transaction(storeName, 'readonly'); + const store = transaction.objectStore(storeName); + const index = store.index('addedAt'); + const request = index.getAll(); // Returns sorted by addedAt ascending + + request.onsuccess = () => { + // Reverse to show newest first + resolve(request.result.reverse()); + }; + request.onerror = () => reject(request.error); + }); + } + + async exportData() { + const data = { + favorites_tracks: await this.getFavorites('track'), + favorites_albums: await this.getFavorites('album'), + favorites_artists: await this.getFavorites('artist'), + favorites_playlists: await this.getFavorites('playlist') + }; + return data; + } + + async importData(data) { + // Clear existing? Or merge? Prompt says "Sync" or "Export/Import". + // Let's merge by put (replaces if ID exists). + const db = await this.open(); + + const importStore = async (storeName, items) => { + if (!items || !Array.isArray(items)) return; + const transaction = db.transaction(storeName, 'readwrite'); + const store = transaction.objectStore(storeName); + for (const item of items) { + store.put(item); + } + }; + + await importStore('favorites_tracks', data.favorites_tracks); + await importStore('favorites_albums', data.favorites_albums); + await importStore('favorites_artists', data.favorites_artists); + await importStore('favorites_playlists', data.favorites_playlists); + } +} + +export const db = new MusicDatabase(); diff --git a/js/events.js b/js/events.js index 102f4c0..5c325cf 100644 --- a/js/events.js +++ b/js/events.js @@ -1,9 +1,10 @@ //js/events.js -import { SVG_PLAY, SVG_PAUSE, SVG_VOLUME, SVG_MUTE, REPEAT_MODE, trackDataStore } from './utils.js'; +import { SVG_PLAY, SVG_PAUSE, SVG_VOLUME, SVG_MUTE, REPEAT_MODE, trackDataStore, RATE_LIMIT_ERROR_MESSAGE, buildTrackFilename, getTrackTitle } from './utils.js'; import { lastFMStorage } from './storage.js'; import { showNotification, downloadTrackWithMetadata } from './downloads.js'; import { lyricsSettings } from './storage.js'; import { updateTabTitle } from './router.js'; +import { db } from './db.js'; export function initializePlayerEvents(player, audioPlayer, scrobbler) { const playPauseBtn = document.querySelector('.play-pause-btn'); @@ -309,14 +310,67 @@ export async function handleTrackAction(action, track, player, api, lyricsManage export function initializeTrackInteractions(player, api, mainContent, contextMenu, lyricsManager) { let contextTrack = null; - mainContent.addEventListener('click', e => { - const actionBtn = e.target.closest('.track-action-btn'); - if (actionBtn) { + mainContent.addEventListener('click', async e => { + const actionBtn = e.target.closest('.track-action-btn, .like-btn'); + if (actionBtn && actionBtn.dataset.action) { + e.preventDefault(); // Prevent card navigation e.stopPropagation(); - const trackItem = actionBtn.closest('.track-item'); - if (trackItem) { - const track = trackDataStore.get(trackItem); - handleTrackAction(actionBtn.dataset.action, track, player, api, lyricsManager); + const itemElement = actionBtn.closest('.track-item, .card'); + const action = actionBtn.dataset.action; + const type = actionBtn.dataset.type || 'track'; + + let item = itemElement ? trackDataStore.get(itemElement) : null; + + // If no item from element (e.g. header buttons), try to get from hash + if (!item && action === 'toggle-like') { + const id = window.location.hash.split('/')[1]; + if (id) { + try { + if (type === 'album') { + const data = await api.getAlbum(id); + item = data.album; + } else if (type === 'artist') { + item = await api.getArtist(id); + } else if (type === 'playlist') { + const data = await api.getPlaylist(id); + item = data.playlist; + } + } catch (err) { console.error(err); } + } + } + + if (item) { + if (action === 'add-to-queue' && type === 'track') { + player.addToQueue(item); + renderQueue(player); + showNotification(`Added to queue: ${item.title}`); + } else if (action === 'toggle-like') { + db.toggleFavorite(type, item).then(added => { + const heartIcon = actionBtn.querySelector('svg'); + if (heartIcon) { + heartIcon.setAttribute('fill', added ? 'currentColor' : 'none'); + heartIcon.classList.toggle('filled', added); + } + actionBtn.classList.toggle('active', added); + actionBtn.title = added ? 'Remove from Library' : 'Add to Library'; + + if (!added && window.location.hash === '#library' && itemElement) { + itemElement.remove(); + const containerId = `library-${type}s-container`; + const container = document.getElementById(containerId); + if (container && container.children.length === 0) { + const msg = type === 'track' ? 'No liked songs yet.' : `No liked ${type}s yet.`; + container.innerHTML = `
    ${msg}
    `; + } + } + }); + } else if (action === 'play-next' && type === 'track') { + player.addNextToQueue(item); + renderQueue(player); + showNotification(`Playing next: ${item.title}`); + } else if (action === 'download' && type === 'track') { + handleDownload(item, player, api); + } } return; } diff --git a/js/router.js b/js/router.js index 5e7f05b..be65e62 100644 --- a/js/router.js +++ b/js/router.js @@ -17,6 +17,9 @@ export function createRouter(ui) { case 'playlist': ui.renderPlaylistPage(param); break; + case 'library': + ui.renderLibraryPage(); + break; case 'home': ui.renderHomePage(); break; diff --git a/js/settings.js b/js/settings.js index 6755f9a..8f82efd 100644 --- a/js/settings.js +++ b/js/settings.js @@ -1,5 +1,6 @@ //js/settings import { themeManager, lastFMStorage, nowPlayingSettings, lyricsSettings, backgroundSettings, trackListSettings } from './storage.js'; +import { db } from './db.js'; export function initializeSettings(scrobbler, player, api, ui) { const lastfmConnectBtn = document.getElementById('lastfm-connect-btn'); @@ -289,4 +290,40 @@ export function initializeSettings(scrobbler, player, api, ui) { }, 1500); } }); + + // Backup & Restore + document.getElementById('export-library-btn')?.addEventListener('click', async () => { + const data = await db.exportData(); + const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = `monochrome-library-${new Date().toISOString().split('T')[0]}.json`; + a.click(); + URL.revokeObjectURL(url); + }); + + const importInput = document.getElementById('import-library-input'); + document.getElementById('import-library-btn')?.addEventListener('click', () => { + importInput.click(); + }); + + importInput?.addEventListener('change', async (e) => { + const file = e.target.files[0]; + if (!file) return; + + const reader = new FileReader(); + reader.onload = async (event) => { + try { + const data = JSON.parse(event.target.result); + await db.importData(data); + alert('Library imported successfully!'); + window.location.reload(); // Simple way to refresh all state + } catch (err) { + console.error('Import failed:', err); + alert('Failed to import library. Please check the file format.'); + } + }; + reader.readAsText(file); + }); } diff --git a/js/ui-interactions.js b/js/ui-interactions.js index 5070aa8..82df0f5 100644 --- a/js/ui-interactions.js +++ b/js/ui-interactions.js @@ -128,14 +128,20 @@ export function initializeUIInteractions(player, api) { // Make renderQueue available globally for other modules window.renderQueueFunction = renderQueue; - // Search tabs + // Search and Library tabs document.querySelectorAll('.search-tab').forEach(tab => { tab.addEventListener('click', () => { - document.querySelectorAll('.search-tab').forEach(t => t.classList.remove('active')); - document.querySelectorAll('.search-tab-content').forEach(c => c.classList.remove('active')); + const page = tab.closest('.page'); + if (!page) return; + + page.querySelectorAll('.search-tab').forEach(t => t.classList.remove('active')); + page.querySelectorAll('.search-tab-content').forEach(c => c.classList.remove('active')); tab.classList.add('active'); - document.getElementById(`search-tab-${tab.dataset.tab}`).classList.add('active'); + + const prefix = page.id === 'page-library' ? 'library-tab-' : 'search-tab-'; + const contentId = `${prefix}${tab.dataset.tab}`; + document.getElementById(contentId)?.classList.add('active'); }); }); } diff --git a/js/ui.js b/js/ui.js index 5b8cf94..a83e735 100644 --- a/js/ui.js +++ b/js/ui.js @@ -1,6 +1,7 @@ //js/ui.js import { SVG_PLAY, SVG_DOWNLOAD, SVG_MENU, formatTime, createPlaceholder, trackDataStore, hasExplicitContent, getTrackArtists, getTrackTitle, calculateTotalDuration, formatDuration } from './utils.js'; import { recentActivityManager, backgroundSettings, trackListSettings } from './storage.js'; +import { db } from './db.js'; export class UIRenderer { constructor(api, player) { @@ -10,6 +11,25 @@ export class UIRenderer { this.searchAbortController = null; } + // Helper for Heart Icon + createHeartIcon(filled = false) { + return ` + + + + `; + } + + async updateLikeState(element, type, id) { + const isLiked = await db.isFavorite(type, id); + const btn = element.querySelector('.like-btn'); + if (btn) { + btn.innerHTML = this.createHeartIcon(isLiked); + btn.classList.toggle('active', isLiked); + btn.title = isLiked ? 'Remove from Library' : 'Add to Library'; + } + } + setCurrentTrack(track) { this.currentTrack = track; this.updateGlobalTheme(); @@ -86,6 +106,9 @@ export class UIRenderer { const actionsHTML = `
    +

    ${album.title} ${explicitBadge}

    ${album.artist?.name ?? ''}

    @@ -168,9 +194,12 @@ export class UIRenderer { createPlaylistCardHTML(playlist) { const imageId = playlist.squareImage || playlist.image || playlist.uuid; // Fallback or use a specific cover getter if needed return ` -     +
    ${playlist.title} +

    ${playlist.title}

    ${playlist.numberOfTracks || 0} tracks

    @@ -180,9 +209,12 @@ export class UIRenderer { createArtistCardHTML(artist) { return ` -     +
    ${artist.name} +

    ${artist.name}

     @@ -242,7 +274,11 @@ export class UIRenderer { tracks.forEach(track => { const element = container.querySelector(`[data-track-id="${track.id}"]`); - if (element) trackDataStore.set(element, track); + if (element) { + trackDataStore.set(element, track); + // Async update for like button + this.updateLikeState(element, 'track', track.id); + } }); } @@ -405,6 +441,65 @@ export class UIRenderer { } } + async renderLibraryPage() { + this.showPage('library'); + + const playlistsContainer = document.getElementById('library-playlists-container'); + const tracksContainer = document.getElementById('library-tracks-container'); + const albumsContainer = document.getElementById('library-albums-container'); + const artistsContainer = document.getElementById('library-artists-container'); + + // Render Favorites + const likedPlaylists = await db.getFavorites('playlist'); + if (likedPlaylists.length) { + playlistsContainer.innerHTML = likedPlaylists.map(p => this.createPlaylistCardHTML(p)).join(''); + likedPlaylists.forEach(playlist => { + const el = playlistsContainer.querySelector(`[data-playlist-id="${playlist.uuid}"]`); + if (el) { + trackDataStore.set(el, playlist); + this.updateLikeState(el, 'playlist', playlist.uuid); + } + }); + } else { + playlistsContainer.innerHTML = createPlaceholder('No liked playlists yet.'); + } + + const likedTracks = await db.getFavorites('track'); + if (likedTracks.length) { + this.renderListWithTracks(tracksContainer, likedTracks, true); + } else { + tracksContainer.innerHTML = createPlaceholder('No liked songs yet.'); + } + + const likedAlbums = await db.getFavorites('album'); + if (likedAlbums.length) { + albumsContainer.innerHTML = likedAlbums.map(a => this.createAlbumCardHTML(a)).join(''); + likedAlbums.forEach(album => { + const el = albumsContainer.querySelector(`[data-album-id="${album.id}"]`); + if (el) { + trackDataStore.set(el, album); + this.updateLikeState(el, 'album', album.id); + } + }); + } else { + albumsContainer.innerHTML = createPlaceholder('No liked albums yet.'); + } + + const likedArtists = await db.getFavorites('artist'); + if (likedArtists.length) { + artistsContainer.innerHTML = likedArtists.map(a => this.createArtistCardHTML(a)).join(''); + likedArtists.forEach(artist => { + const el = artistsContainer.querySelector(`[data-artist-id="${artist.id}"]`); + if (el) { + trackDataStore.set(el, artist); + this.updateLikeState(el, 'artist', artist.id); + } + }); + } else { + artistsContainer.innerHTML = createPlaceholder('No liked artists yet.'); + } + } + async renderHomePage() { this.showPage('home'); const recents = recentActivityManager.getRecents(); @@ -498,14 +593,38 @@ export class UIRenderer { ? finalArtists.map(artist => this.createArtistCardHTML(artist)).join('') : createPlaceholder('No artists found.'); + finalArtists.forEach(artist => { + const el = artistsContainer.querySelector(`[data-artist-id="${artist.id}"]`); + if (el) { + trackDataStore.set(el, artist); + this.updateLikeState(el, 'artist', artist.id); + } + }); + albumsContainer.innerHTML = finalAlbums.length ? finalAlbums.map(album => this.createAlbumCardHTML(album)).join('') : createPlaceholder('No albums found.'); + finalAlbums.forEach(album => { + const el = albumsContainer.querySelector(`[data-album-id="${album.id}"]`); + if (el) { + trackDataStore.set(el, album); + this.updateLikeState(el, 'album', album.id); + } + }); + playlistsContainer.innerHTML = finalPlaylists.length ? finalPlaylists.map(playlist => this.createPlaylistCardHTML(playlist)).join('') : createPlaceholder('No playlists found.'); + finalPlaylists.forEach(playlist => { + const el = playlistsContainer.querySelector(`[data-playlist-id="${playlist.uuid}"]`); + if (el) { + trackDataStore.set(el, playlist); + this.updateLikeState(el, 'playlist', playlist.uuid); + } + }); + } catch (error) { if (error.name === 'AbortError') return; console.error("Search failed:", error); @@ -603,6 +722,14 @@ export class UIRenderer { this.renderListWithTracks(tracklistContainer, tracks, false); recentActivityManager.addAlbum(album); + + // Update header like button + const albumLikeBtn = document.getElementById('like-album-btn'); + if (albumLikeBtn) { + const isLiked = await db.isFavorite('album', album.id); + albumLikeBtn.innerHTML = this.createHeartIcon(isLiked); + albumLikeBtn.classList.toggle('active', isLiked); + } document.title = `${album.title} - ${album.artist.name} - Monochrome`; @@ -667,7 +794,6 @@ export class UIRenderer { async renderPlaylistPage(playlistId) { this.showPage('playlist'); - const imageEl = document.getElementById('playlist-detail-image'); const titleEl = document.getElementById('playlist-detail-title'); const metaEl = document.getElementById('playlist-detail-meta'); @@ -696,7 +822,11 @@ export class UIRenderer { const { playlist, tracks } = await this.api.getPlaylist(playlistId); const imageId = playlist.squareImage || playlist.image; - imageEl.src = this.api.getCoverUrl(imageId, '1080'); + if (imageId) { + imageEl.src = this.api.getCoverUrl(imageId, '1080'); + } else { + imageEl.src = 'assets/appicon.png'; + } imageEl.style.backgroundColor = ''; titleEl.textContent = playlist.title; @@ -716,8 +846,22 @@ export class UIRenderer { `; this.renderListWithTracks(tracklistContainer, tracks, true); - recentActivityManager.addPlaylist(playlist); + // Update header like button + const playlistLikeBtn = document.getElementById('like-playlist-btn'); + if (playlistLikeBtn) { + const isLiked = await db.isFavorite('playlist', playlist.uuid); + playlistLikeBtn.innerHTML = this.createHeartIcon(isLiked); + playlistLikeBtn.classList.toggle('active', isLiked); + } + + // Show/hide Delete button + const deleteBtn = document.getElementById('delete-playlist-btn'); + if (deleteBtn) { + deleteBtn.style.display = 'none'; + } + + recentActivityManager.addPlaylist(playlist); document.title = `${playlist.title || 'Artist Mix'} - Monochrome`; } catch (error) { console.error("Failed to load playlist:", error); @@ -768,6 +912,17 @@ export class UIRenderer { this.renderListWithTracks(tracksContainer, artist.tracks, true); + // Update header like button + const artistLikeBtn = document.getElementById('like-artist-btn'); + if (artistLikeBtn) { + const isLiked = await db.isFavorite('artist', artist.id); + artistLikeBtn.innerHTML = this.createHeartIcon(isLiked); + artistLikeBtn.classList.toggle('active', isLiked); + } + + albumsContainer.innerHTML = artist.albums.map(album => + this.createAlbumCardHTML(album) + ).join(''); // Render Albums albumsContainer.innerHTML = artist.albums.length ? artist.albums.map(album => this.createAlbumCardHTML(album)).join('') diff --git a/styles.css b/styles.css index 03268b3..1d80de0 100644 --- a/styles.css +++ b/styles.css @@ -528,6 +528,43 @@ body.has-page-background .track-item:hover { margin-bottom: 1rem; } +.card-like-btn { + position: absolute; + top: 0.5rem; + right: 0.5rem; + 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: 1px solid rgba(255, 255, 255, 0.1) !important; +} + +.card:hover .card-like-btn, +.card-like-btn.active { + opacity: 1; + transform: scale(1); +} + +.card-like-btn:hover { + background: rgba(0, 0, 0, 0.7) !important; + transform: scale(1.1) !important; +} + +.card-like-btn.active { + color: #ef4444 !important; +} + .card-image { width: 100%; aspect-ratio: 1/1; @@ -562,6 +599,24 @@ body.has-page-background .track-item:hover { text-overflow: ellipsis; } +.heart-icon { + transition: transform 0.2s ease, color 0.2s ease; +} + +.heart-icon.filled { + color: #ef4444; + fill: #ef4444; +} + +.track-item:hover .like-btn { + opacity: 1; +} + +.like-btn.active .heart-icon { + color: #ef4444; + fill: #ef4444; +} + .explicit-badge { display: inline-flex; align-items: center; @@ -724,10 +779,14 @@ body.has-page-background .track-item:hover { .track-actions-inline { display: none; /* Controlled by data-track-actions-mode */ gap: 0.25rem; - opacity: 0.2; /* Barely visible instead of invisible */ + opacity: 0.5; transition: opacity var(--transition); } +.track-action-btn.active { + opacity: 1; +} + [data-track-actions-mode="inline"] .track-actions-inline { display: flex; } @@ -1562,7 +1621,6 @@ input:checked + .slider::before { .placeholder-text { padding: 2rem 1rem; color: var(--muted-foreground); - text-align: center; } .placeholder-text.loading { From cdffe88eba00e9ce7992a0646978ae2b4693de91 Mon Sep 17 00:00:00 2001 From: Julien Maille Date: Fri, 26 Dec 2025 11:23:38 +0100 Subject: [PATCH 2/5] Fix heart button interactions on cards and reorder library tabs - Fix: Card heart buttons didn't work because of button nested in anchor. Changed cards to div with data-href.\n- Fix: Home page and Artist page cards didn't have data bound or like state initialized.\n- Feature: Move Playlists to the last position in Library tabs. --- index.html | 15 +++-- js/app.js | 9 ++- js/events.js | 156 +++++++++++++++++++++++++++++++++++++-------------- js/ui.js | 95 ++++++++++++++++++++++++------- js/utils.js | 1 + styles.css | 6 +- 6 files changed, 209 insertions(+), 73 deletions(-) diff --git a/index.html b/index.html index 5e5aa5b..9fd29ac 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,7 @@
      +
    • Like
    • Play Next
    • Add to Queue
    • Download
      • @@ -168,15 +169,12 @@

      Your Library

      - - + +
      -
      -
      -
      -
      +
      @@ -185,6 +183,9 @@
      +
      +
      +
      @@ -515,6 +516,8 @@
      +
      `; } createPlaylistCardHTML(playlist) { const imageId = playlist.squareImage || playlist.image || playlist.uuid; // Fallback or use a specific cover getter if needed return ` - +
      ${playlist.title}

      ${playlist.title}

      ${playlist.numberOfTracks || 0} tracks

      -       +
      `; } createArtistCardHTML(artist) { return ` - +
      ${artist.name}

      ${artist.name}

      -       +
      `; } @@ -508,18 +518,45 @@ export class UIRenderer { const artistsContainer = document.getElementById('home-recent-artists'); const playlistsContainer = document.getElementById('home-recent-playlists'); - albumsContainer.innerHTML = recents.albums.length - ? recents.albums.map(album => this.createAlbumCardHTML(album)).join('') - : createPlaceholder("You haven't viewed any albums yet. Search for music to get started!"); + if (recents.albums.length) { + albumsContainer.innerHTML = recents.albums.map(album => this.createAlbumCardHTML(album)).join(''); + recents.albums.forEach(album => { + const el = albumsContainer.querySelector(`[data-album-id="${album.id}"]`); + if (el) { + trackDataStore.set(el, album); + this.updateLikeState(el, 'album', album.id); + } + }); + } else { + albumsContainer.innerHTML = createPlaceholder("You haven't viewed any albums yet. Search for music to get started!"); + } - artistsContainer.innerHTML = recents.artists.length - ? recents.artists.map(artist => this.createArtistCardHTML(artist)).join('') - : createPlaceholder("You haven't viewed any artists yet. Search for music to get started!"); + if (recents.artists.length) { + artistsContainer.innerHTML = recents.artists.map(artist => this.createArtistCardHTML(artist)).join(''); + recents.artists.forEach(artist => { + const el = artistsContainer.querySelector(`[data-artist-id="${artist.id}"]`); + if (el) { + trackDataStore.set(el, artist); + this.updateLikeState(el, 'artist', artist.id); + } + }); + } else { + artistsContainer.innerHTML = createPlaceholder("You haven't viewed any artists yet. Search for music to get started!"); + } if (playlistsContainer) { - playlistsContainer.innerHTML = recents.playlists && recents.playlists.length - ? recents.playlists.map(playlist => this.createPlaylistCardHTML(playlist)).join('') - : createPlaceholder("You haven't viewed any playlists yet. Search for music to get started!"); + if (recents.playlists && recents.playlists.length) { + playlistsContainer.innerHTML = recents.playlists.map(playlist => this.createPlaylistCardHTML(playlist)).join(''); + recents.playlists.forEach(playlist => { + const el = playlistsContainer.querySelector(`[data-playlist-id="${playlist.uuid}"]`); + if (el) { + trackDataStore.set(el, playlist); + this.updateLikeState(el, 'playlist', playlist.uuid); + } + }); + } else { + playlistsContainer.innerHTML = createPlaceholder("You haven't viewed any playlists yet. Search for music to get started!"); + } } } @@ -776,6 +813,14 @@ export class UIRenderer {
      `; document.getElementById('page-album').appendChild(section); + + filtered.forEach(a => { + const el = section.querySelector(`[data-album-id="${a.id}"]`); + if (el) { + trackDataStore.set(el, a); + this.updateLikeState(el, 'album', a.id); + } + }); }; renderSection(`More albums from ${album.artist.name}`, artistData.albums); @@ -938,6 +983,14 @@ export class UIRenderer { } } + artist.albums.forEach(album => { + const el = albumsContainer.querySelector(`[data-album-id="${album.id}"]`); + if (el) { + trackDataStore.set(el, album); + this.updateLikeState(el, 'album', album.id); + } + }); + recentActivityManager.addArtist(artist); document.title = `${artist.name} - Monochrome`; diff --git a/js/utils.js b/js/utils.js index 69c8b5b..dbd77cc 100644 --- a/js/utils.js +++ b/js/utils.js @@ -32,6 +32,7 @@ export const SVG_VOLUME = ' { diff --git a/styles.css b/styles.css index 1d80de0..f96fff3 100644 --- a/styles.css +++ b/styles.css @@ -532,7 +532,7 @@ body.has-page-background .track-item:hover { position: absolute; top: 0.5rem; right: 0.5rem; - background: rgba(0, 0, 0, 0.5) !important; + background: rgba(0, 0, 0, 0.25) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 50% !important; @@ -547,7 +547,7 @@ body.has-page-background .track-item:hover { transition: all 0.2s ease !important; z-index: 10; color: white !important; - border: 1px solid rgba(255, 255, 255, 0.1) !important; + border: none !important; } .card:hover .card-like-btn, @@ -779,7 +779,7 @@ body.has-page-background .track-item:hover { .track-actions-inline { display: none; /* Controlled by data-track-actions-mode */ gap: 0.25rem; - opacity: 0.5; + opacity: 0.2; transition: opacity var(--transition); } From d2966529951ef75aa877ebfcffac0044c964c76f Mon Sep 17 00:00:00 2001 From: Julien Maille Date: Fri, 26 Dec 2025 22:50:22 +0100 Subject: [PATCH 3/5] IMP: css --- styles.css | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/styles.css b/styles.css index f96fff3..108cf4b 100644 --- a/styles.css +++ b/styles.css @@ -1164,7 +1164,7 @@ input:checked + .slider::before { .player-controls .buttons button#repeat-btn.repeat-one::after { content: '1'; position: absolute; - font-size: 0.6rem; + font-size: 0.5rem; font-weight: bold; } @@ -1431,12 +1431,10 @@ input:checked + .slider::before { text-align: center; z-index: 1; max-width: 90%; - background: color-mix(in srgb, var(--card), transparent 25%); + background: color-mix(in srgb, var(--card), transparent 80%); padding: 1.5rem 2rem; border-radius: var(--radius); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - border: 1px solid color-mix(in srgb, var(--border), transparent 50%); + border: 1px solid color-mix(in srgb, var(--card), transparent 70%); } #fullscreen-track-title { @@ -1449,14 +1447,14 @@ input:checked + .slider::before { #fullscreen-track-artist { font-size: 1.25rem; - color: var(--muted-foreground); + color: var(--primary); font-weight: 500; } #fullscreen-next-track { margin-top: 1.5rem; font-size: 0.9rem; - color: var(--muted-foreground); + color: var(--primary); display: flex; flex-direction: column; gap: 0.2rem; From aeea0038f30cf3418cc06c71abff1cea6dacb994 Mon Sep 17 00:00:00 2001 From: Julien Maille Date: Fri, 26 Dec 2025 23:14:47 +0100 Subject: [PATCH 4/5] improvements --- index.html | 5 ++++- js/events.js | 9 +++++++-- js/player.js | 7 ++++++- js/ui-interactions.js | 16 ++++++++++++++-- js/utils.js | 1 + styles.css | 9 +++++++-- 6 files changed, 39 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 9fd29ac..e8976ab 100644 --- a/index.html +++ b/index.html @@ -32,7 +32,10 @@

      Queue

      - +
      + + +
      diff --git a/js/events.js b/js/events.js index 6206fc6..9f0c5a5 100644 --- a/js/events.js +++ b/js/events.js @@ -250,9 +250,14 @@ function initializeSmoothSliders(audioPlayer, player) { progressBar.addEventListener('click', e => { if (!isSeeking) { seek(progressBar, e, position => { - if (!isNaN(audioPlayer.duration)) { + if (!isNaN(audioPlayer.duration) && audioPlayer.duration > 0 && audioPlayer.duration !== Infinity) { audioPlayer.currentTime = position * audioPlayer.duration; player.updateMediaSessionPositionState(); + } else if (player.currentTrack && player.currentTrack.duration) { + const targetTime = position * player.currentTrack.duration; + const progressFill = document.querySelector('.progress-fill'); + if (progressFill) progressFill.style.width = `${position * 100}%`; + player.playTrackFromQueue(targetTime); } }); } @@ -310,7 +315,7 @@ export async function handleTrackAction(action, item, player, api, lyricsManager // Update all instances of this item's like button on the page const id = type === 'playlist' ? item.uuid : item.id; const selector = type === 'track' - ? `.track-item[data-track-id="${id}"] .like-btn` + ? `[data-track-id="${id}"] .like-btn` : `.card[data-${type}-id="${id}"] .like-btn, .card[data-playlist-id="${id}"] .like-btn`; // Also check header buttons diff --git a/js/player.js b/js/player.js index 932947b..7d41efe 100644 --- a/js/player.js +++ b/js/player.js @@ -52,6 +52,8 @@ export class Player { if (coverEl) coverEl.src = this.api.getCoverUrl(track.album?.cover, '1280'); if (titleEl) titleEl.textContent = trackTitle; if (artistEl) artistEl.textContent = trackArtists; + const totalDurationEl = document.getElementById('total-duration'); + if (totalDurationEl) totalDurationEl.textContent = formatTime(track.duration); document.title = `${trackTitle} • ${track.artist?.name || 'Unknown'}`; this.updatePlayingTrackIndicator(); @@ -154,7 +156,7 @@ export class Player { } } - async playTrackFromQueue() { + async playTrackFromQueue(startTime = 0) { const currentQueue = this.shuffleActive ? this.shuffledQueue : this.queue; if (this.currentQueueIndex < 0 || this.currentQueueIndex >= currentQueue.length) { return; @@ -193,6 +195,9 @@ export class Player { } this.audio.src = streamUrl; + if (startTime > 0) { + this.audio.currentTime = startTime; + } await this.audio.play(); this.updateMediaSessionPlaybackState(); diff --git a/js/ui-interactions.js b/js/ui-interactions.js index 82df0f5..fcc95fb 100644 --- a/js/ui-interactions.js +++ b/js/ui-interactions.js @@ -1,5 +1,5 @@ //js/ui-interactions.js -import { SVG_CLOSE, formatTime, trackDataStore, getTrackTitle, getTrackArtists } from './utils.js'; +import { SVG_CLOSE, SVG_BIN, formatTime, trackDataStore, getTrackTitle, getTrackArtists } from './utils.js'; export function initializeUIInteractions(player, api) { const sidebar = document.querySelector('.sidebar'); @@ -8,6 +8,7 @@ export function initializeUIInteractions(player, api) { const queueBtn = document.getElementById('queue-btn'); const queueModalOverlay = document.getElementById('queue-modal-overlay'); const closeQueueBtn = document.getElementById('close-queue-btn'); + const clearQueueBtn = document.getElementById('clear-queue-btn'); const queueList = document.getElementById('queue-list'); let draggedQueueIndex = null; @@ -40,6 +41,13 @@ export function initializeUIInteractions(player, api) { closeQueueBtn.addEventListener('click', () => { queueModalOverlay.style.display = 'none'; }); + + if (clearQueueBtn) { + clearQueueBtn.addEventListener('click', () => { + player.clearQueue(); + renderQueue(); + }); + } queueModalOverlay.addEventListener('click', e => { if (e.target === queueModalOverlay) { @@ -50,6 +58,10 @@ export function initializeUIInteractions(player, api) { function renderQueue() { const currentQueue = player.getCurrentQueue(); + if (clearQueueBtn) { + clearQueueBtn.style.display = currentQueue.length > 0 ? 'block' : 'none'; + } + if (currentQueue.length === 0) { queueList.innerHTML = '
      Queue is empty.
      '; return; @@ -78,7 +90,7 @@ export function initializeUIInteractions(player, api) {
    ${formatTime(track.duration)}
    `; diff --git a/js/utils.js b/js/utils.js index dbd77cc..b225985 100644 --- a/js/utils.js +++ b/js/utils.js @@ -34,6 +34,7 @@ export const SVG_DOWNLOAD = ' { if (isNaN(seconds)) return '0:00'; diff --git a/styles.css b/styles.css index 108cf4b..a93f018 100644 --- a/styles.css +++ b/styles.css @@ -1520,7 +1520,7 @@ input:checked + .slider::before { margin: 0; } -#queue-modal-header button { +#queue-modal-header #close-queue-btn { background: transparent; border: none; color: var(--muted-foreground); @@ -1535,7 +1535,12 @@ input:checked + .slider::before { transition: all var(--transition); } -#queue-modal-header button:hover { +#queue-modal-header #clear-queue-btn { + background-color: transparent; +} + +#queue-modal-header #clear-queue-btn:hover, +#queue-modal-header #close-queue-btn:hover { background-color: var(--secondary); color: var(--foreground); } From 9ffe81e38b8bb85f6111f11b8b5eafc1b919ac9a Mon Sep 17 00:00:00 2001 From: Julien Maille Date: Fri, 26 Dec 2025 23:15:09 +0100 Subject: [PATCH 5/5] improvements --- js/player.js | 39 +++++++++++++++++++++++++++------------ 1 file changed, 27 insertions(+), 12 deletions(-) diff --git a/js/player.js b/js/player.js index 7d41efe..7c2cf1e 100644 --- a/js/player.js +++ b/js/player.js @@ -353,22 +353,37 @@ export class Player { removeFromQueue(index) { const currentQueue = this.shuffleActive ? this.shuffledQueue : this.queue; - - if (index < 0 || index >= currentQueue.length) return; - - if (this.shuffleActive) { - this.shuffledQueue.splice(index, 1); - } else { - this.queue.splice(index, 1); + + // If removing current track + if (index === this.currentQueueIndex) { + // If playing, we might want to stop or just let it finish? + // For now, let's just remove it. + // If it's the last track, playback will stop naturally or we handle it? } - + if (index < this.currentQueueIndex) { this.currentQueueIndex--; - } else if (index === this.currentQueueIndex) { - if (currentQueue.length > 0) { - this.playTrackFromQueue(); - } } + + const removedTrack = currentQueue.splice(index, 1)[0]; + + if (this.shuffleActive) { + // Also remove from original queue + const originalIndex = this.originalQueueBeforeShuffle.findIndex(t => t.id === removedTrack.id); // Simple ID check + if (originalIndex !== -1) { + this.originalQueueBeforeShuffle.splice(originalIndex, 1); + } + } + + this.saveQueueState(); + this.preloadNextTracks(); + } + + clearQueue() { + this.queue = []; + this.shuffledQueue = []; + this.originalQueueBeforeShuffle = []; + this.currentQueueIndex = -1; this.saveQueueState(); }