js/css cleanup
This commit is contained in:
Julien Maille
parent
c4feb35c45
commit
06c649de7b
2 changed files with 115 additions and 132 deletions
229
js/app.js
229
js/app.js
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
//js/app.js
|
||||
import { LosslessAPI } from './api.js';
|
||||
import { apiSettings, themeManager, nowPlayingSettings, trackListSettings } from './storage.js';
|
||||
|
|
@ -319,142 +318,140 @@ document.addEventListener('DOMContentLoaded', async () => {
|
|||
}
|
||||
}
|
||||
if (e.target.closest('#download-playlist-btn')) {
|
||||
const btn = e.target.closest('#download-playlist-btn');
|
||||
if (btn.disabled) return;
|
||||
const btn = e.target.closest('#download-playlist-btn');
|
||||
if (btn.disabled) return;
|
||||
|
||||
const playlistId = window.location.hash.split('/')[1];
|
||||
if (!playlistId) return;
|
||||
const playlistId = window.location.hash.split('/')[1];
|
||||
if (!playlistId) return;
|
||||
|
||||
btn.disabled = true;
|
||||
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.disabled = true;
|
||||
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>';
|
||||
|
||||
try {
|
||||
let playlist, tracks;
|
||||
const userPlaylist = await db.getPlaylist(playlistId);
|
||||
|
||||
if (userPlaylist) {
|
||||
playlist = { ...userPlaylist, title: userPlaylist.name };
|
||||
tracks = userPlaylist.tracks || [];
|
||||
} else {
|
||||
const data = await api.getPlaylist(playlistId);
|
||||
playlist = data.playlist;
|
||||
tracks = data.tracks;
|
||||
try {
|
||||
let playlist, tracks;
|
||||
const userPlaylist = await db.getPlaylist(playlistId);
|
||||
|
||||
if (userPlaylist) {
|
||||
playlist = { ...userPlaylist, title: userPlaylist.name };
|
||||
tracks = userPlaylist.tracks || [];
|
||||
} else {
|
||||
const data = await api.getPlaylist(playlistId);
|
||||
playlist = data.playlist;
|
||||
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')) {
|
||||
const name = document.getElementById('playlist-name-input').value.trim();
|
||||
if (name) {
|
||||
if (e.target.closest('#create-playlist-btn')) {
|
||||
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');
|
||||
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')) {
|
||||
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();
|
||||
modal.style.display = 'none';
|
||||
delete modal.dataset.editingId;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Create
|
||||
db.createPlaylist(name, [], '').then(playlist => {
|
||||
syncManager.syncUserPlaylist(playlist, 'create');
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (e.target.closest('#playlist-modal-cancel')) {
|
||||
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();
|
||||
modal.style.display = 'none';
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (e.target.closest('#playlist-modal-cancel')) {
|
||||
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();
|
||||
if (e.target.closest('#edit-playlist-btn')) {
|
||||
const playlistId = window.location.hash.split('/')[1];
|
||||
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('#edit-playlist-btn')) {
|
||||
const playlistId = window.location.hash.split('/')[1];
|
||||
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 playlistId = window.location.hash.split('/')[1];
|
||||
if (confirm('Are you sure you want to delete this playlist?')) {
|
||||
db.deletePlaylist(playlistId).then(() => {
|
||||
window.location.hash = '#library';
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (e.target.closest('#delete-playlist-btn')) {
|
||||
const playlistId = window.location.hash.split('/')[1];
|
||||
if (confirm('Are you sure you want to delete this playlist?')) {
|
||||
db.deletePlaylist(playlistId).then(() => {
|
||||
window.location.hash = '#library';
|
||||
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('.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')) {
|
||||
const btn = e.target.closest('#play-playlist-btn');
|
||||
|
|
|
|||
18
styles.css
18
styles.css
|
|
@ -1125,20 +1125,6 @@ body.has-page-background .track-item:hover {
|
|||
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 {
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: var(--secondary);
|
||||
|
|
@ -2804,7 +2790,7 @@ input:checked + .slider::before {
|
|||
}
|
||||
|
||||
.track-item {
|
||||
grid-template-columns: 32px 1fr 40px 28px;
|
||||
grid-template-columns: 32px 1fr 40px auto;
|
||||
gap: 0.375rem;
|
||||
padding: var(--spacing-xs);
|
||||
}
|
||||
|
|
@ -2929,7 +2915,7 @@ input:checked + .slider::before {
|
|||
}
|
||||
|
||||
.track-item {
|
||||
grid-template-columns: 32px 1fr 40px 36px;
|
||||
grid-template-columns: 32px 1fr 32px auto;
|
||||
}
|
||||
|
||||
.player-controls .buttons button {
|
||||
|
|
|
|||
Loading…
Reference in a new issue