vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

js/css cleanup

Browse source
This commit is contained in:
Julien Maille 2026-01-02 23:22:39 +01:00
parent c4feb35c45
commit 06c649de7b
2 changed files with 115 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

229
js/app.js
View file

@ -1,4 +1,3 @@
//js/app.js //js/app.js
import { LosslessAPI } from './api.js'; import { LosslessAPI } from './api.js';
import { apiSettings, themeManager, nowPlayingSettings, trackListSettings } from './storage.js'; import { apiSettings, themeManager, nowPlayingSettings, trackListSettings } from './storage.js';
@ -319,142 +318,140 @@ document.addEventListener('DOMContentLoaded', async () => {
} }
} }
if (e.target.closest('#download-playlist-btn')) { if (e.target.closest('#download-playlist-btn')) {
const btn = e.target.closest('#download-playlist-btn'); const btn = e.target.closest('#download-playlist-btn');
if (btn.disabled) return; if (btn.disabled) return;
const playlistId = window.location.hash.split('/')[1]; const playlistId = window.location.hash.split('/')[1];
if (!playlistId) return; if (!playlistId) return;
btn.disabled = true; btn.disabled = true;
const originalHTML = btn.innerHTML; const originalHTML = btn.innerHTML;
btn.innerHTML = '<svg class="animate-spin" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle></svg><span>Downloading...</span>'; btn.innerHTML = '<svg class="animate-spin" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle></svg><span>Downloading...</span>';
try { try {
let playlist, tracks; let playlist, tracks;
const userPlaylist = await db.getPlaylist(playlistId); const userPlaylist = await db.getPlaylist(playlistId);
if (userPlaylist) { if (userPlaylist) {
playlist = { ...userPlaylist, title: userPlaylist.name }; playlist = { ...userPlaylist, title: userPlaylist.name };
tracks = userPlaylist.tracks || []; tracks = userPlaylist.tracks || [];
} else { } else {
const data = await api.getPlaylist(playlistId); const data = await api.getPlaylist(playlistId);
playlist = data.playlist; playlist = data.playlist;
tracks = data.tracks; tracks = data.tracks;
}
await downloadPlaylistAsZip(playlist, tracks, api, player.quality, lyricsManager);
} catch (error) {
console.error('Playlist download failed:', error);
alert('Failed to download playlist: ' + error.message);
} finally {
btn.disabled = false;
btn.innerHTML = originalHTML;
} }
await downloadPlaylistAsZip(playlist, tracks, api, player.quality, lyricsManager);
} catch (error) {
console.error('Playlist download failed:', error);
alert('Failed to download playlist: ' + error.message);
} finally {
btn.disabled = false;
btn.innerHTML = originalHTML;
} }
}
if (e.target.closest('#create-playlist-btn')) {
const modal = document.getElementById('playlist-modal');
document.getElementById('playlist-modal-title').textContent = 'Create Playlist';
document.getElementById('playlist-name-input').value = '';
modal.style.display = 'flex';
document.getElementById('playlist-name-input').focus();
}
if (e.target.closest('#playlist-modal-save')) { if (e.target.closest('#create-playlist-btn')) {
const name = document.getElementById('playlist-name-input').value.trim();
if (name) {
const modal = document.getElementById('playlist-modal'); const modal = document.getElementById('playlist-modal');
const editingId = modal.dataset.editingId; document.getElementById('playlist-modal-title').textContent = 'Create Playlist';
if (editingId) { document.getElementById('playlist-name-input').value = '';
// Edit modal.style.display = 'flex';
db.getPlaylist(editingId).then(async (playlist) => { document.getElementById('playlist-name-input').focus();
if (playlist) { }
playlist.name = name;
await db.performTransaction('user_playlists', 'readwrite', (store) => store.put(playlist)); if (e.target.closest('#playlist-modal-save')) {
syncManager.syncUserPlaylist(playlist, 'update'); const name = document.getElementById('playlist-name-input').value.trim();
if (name) {
const modal = document.getElementById('playlist-modal');
const editingId = modal.dataset.editingId;
if (editingId) {
// Edit
db.getPlaylist(editingId).then(async (playlist) => {
if (playlist) {
playlist.name = name;
await db.performTransaction('user_playlists', 'readwrite', (store) => store.put(playlist));
syncManager.syncUserPlaylist(playlist, 'update');
ui.renderLibraryPage();
modal.style.display = 'none';
delete modal.dataset.editingId;
}
});
} else {
// Create
db.createPlaylist(name, [], '').then(playlist => {
syncManager.syncUserPlaylist(playlist, 'create');
ui.renderLibraryPage(); ui.renderLibraryPage();
modal.style.display = 'none'; modal.style.display = 'none';
delete modal.dataset.editingId; });
} }
}); }
} else { }
// Create
db.createPlaylist(name, [], '').then(playlist => { if (e.target.closest('#playlist-modal-cancel')) {
syncManager.syncUserPlaylist(playlist, 'create'); document.getElementById('playlist-modal').style.display = 'none';
}
if (e.target.closest('.edit-playlist-btn')) {
const card = e.target.closest('.user-playlist');
const playlistId = card.dataset.playlistId;
db.getPlaylist(playlistId).then(playlist => {
if (playlist) {
const modal = document.getElementById('playlist-modal');
document.getElementById('playlist-modal-title').textContent = 'Edit Playlist';
document.getElementById('playlist-name-input').value = playlist.name;
modal.dataset.editingId = playlistId;
modal.style.display = 'flex';
document.getElementById('playlist-name-input').focus();
}
});
}
if (e.target.closest('.delete-playlist-btn')) {
const card = e.target.closest('.user-playlist');
const playlistId = card.dataset.playlistId;
if (confirm('Are you sure you want to delete this playlist?')) {
db.deletePlaylist(playlistId).then(() => {
syncManager.syncUserPlaylist({ id: playlistId }, 'delete');
ui.renderLibraryPage(); ui.renderLibraryPage();
modal.style.display = 'none';
}); });
} }
} }
}
if (e.target.closest('#edit-playlist-btn')) {
if (e.target.closest('#playlist-modal-cancel')) { const playlistId = window.location.hash.split('/')[1];
document.getElementById('playlist-modal').style.display = 'none'; db.getPlaylist(playlistId).then(playlist => {
} if (playlist) {
const modal = document.getElementById('playlist-modal');
if (e.target.closest('.edit-playlist-btn')) { document.getElementById('playlist-modal-title').textContent = 'Edit Playlist';
const card = e.target.closest('.user-playlist'); document.getElementById('playlist-name-input').value = playlist.name;
const playlistId = card.dataset.playlistId; modal.dataset.editingId = playlistId;
db.getPlaylist(playlistId).then(playlist => { modal.style.display = 'flex';
if (playlist) { document.getElementById('playlist-name-input').focus();
const modal = document.getElementById('playlist-modal'); }
document.getElementById('playlist-modal-title').textContent = 'Edit Playlist';
document.getElementById('playlist-name-input').value = playlist.name;
modal.dataset.editingId = playlistId;
modal.style.display = 'flex';
document.getElementById('playlist-name-input').focus();
}
});
}
if (e.target.closest('.delete-playlist-btn')) {
const card = e.target.closest('.user-playlist');
const playlistId = card.dataset.playlistId;
if (confirm('Are you sure you want to delete this playlist?')) {
db.deletePlaylist(playlistId).then(() => {
syncManager.syncUserPlaylist({ id: playlistId }, 'delete');
ui.renderLibraryPage();
}); });
} }
}
if (e.target.closest('#edit-playlist-btn')) { if (e.target.closest('#delete-playlist-btn')) {
const playlistId = window.location.hash.split('/')[1]; const playlistId = window.location.hash.split('/')[1];
db.getPlaylist(playlistId).then(playlist => { if (confirm('Are you sure you want to delete this playlist?')) {
if (playlist) { db.deletePlaylist(playlistId).then(() => {
const modal = document.getElementById('playlist-modal'); window.location.hash = '#library';
document.getElementById('playlist-modal-title').textContent = 'Edit Playlist'; });
document.getElementById('playlist-name-input').value = playlist.name;
modal.dataset.editingId = playlistId;
modal.style.display = 'flex';
document.getElementById('playlist-name-input').focus();
} }
}); }
}
if (e.target.closest('#delete-playlist-btn')) { if (e.target.closest('.remove-from-playlist-btn')) {
const playlistId = window.location.hash.split('/')[1]; const btn = e.target.closest('.remove-from-playlist-btn');
if (confirm('Are you sure you want to delete this playlist?')) { const index = parseInt(btn.dataset.trackIndex);
db.deletePlaylist(playlistId).then(() => { const playlistId = window.location.hash.split('/')[1];
window.location.hash = '#library'; db.getPlaylist(playlistId).then(async (playlist) => {
if (playlist && playlist.tracks[index]) {
const trackId = playlist.tracks[index].id;
await db.removeTrackFromPlaylist(playlistId, trackId);
ui.renderPlaylistPage(playlistId);
}
}); });
} }
}
if (e.target.closest('.remove-from-playlist-btn')) {
const btn = e.target.closest('.remove-from-playlist-btn');
const index = parseInt(btn.dataset.trackIndex);
const playlistId = window.location.hash.split('/')[1];
db.getPlaylist(playlistId).then(async (playlist) => {
if (playlist && playlist.tracks[index]) {
const trackId = playlist.tracks[index].id;
await db.removeTrackFromPlaylist(playlistId, trackId);
ui.renderPlaylistPage(playlistId);
}
});
}
if (e.target.closest('#play-playlist-btn')) { if (e.target.closest('#play-playlist-btn')) {
const btn = e.target.closest('#play-playlist-btn'); const btn = e.target.closest('#play-playlist-btn');

18
styles.css
View file

@ -1125,20 +1125,6 @@ body.has-page-background .track-item:hover {
flex-shrink: 0; flex-shrink: 0;
} }
#like-album-btn,
#like-playlist-btn,
#like-artist-btn {
width: auto;
height: auto;
padding: 0.875rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
flex-shrink: 0;
aspect-ratio: 1/1;
}
.btn-secondary { .btn-secondary {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
background-color: var(--secondary); background-color: var(--secondary);
@ -2804,7 +2790,7 @@ input:checked + .slider::before {
} }
.track-item { .track-item {
grid-template-columns: 32px 1fr 40px 28px; grid-template-columns: 32px 1fr 40px auto;
gap: 0.375rem; gap: 0.375rem;
padding: var(--spacing-xs); padding: var(--spacing-xs);
} }
@ -2929,7 +2915,7 @@ input:checked + .slider::before {
} }
.track-item { .track-item {
grid-template-columns: 32px 1fr 40px 36px; grid-template-columns: 32px 1fr 32px auto;
} }
.player-controls .buttons button { .player-controls .buttons button {