joshpatra/allstarr
1
0
Fork 0
mirror of https://github.com/SoPat712/allstarr.git synced 2026-02-09 23:55:10 -05:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Optimize UI: Update playlist status without refetching all playlists

Browse Source 
- After linking/unlinking, update UI state directly instead of refetching
- Avoids 7+ second delay from fetching track stats for all playlists
- Added data-playlist-id attribute to table rows for easy lookup
- Only refreshes Active Playlists tab (fast operation)
- Much better UX when linking multiple playlists
This commit is contained in:
Josh Patra
2026-02-03 17:40:47 -05:00
parent b3bfa16b93
commit ef0ee65160
1 changed files with 35 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
allstarr/wwwroot/index.html
View File

@@ -1182,7 +1182,7 @@
const externalAvail = p.externalAvailable || 0;
return `
<tr>
<tr data-playlist-id="${escapeHtml(p.id)}">
<td><strong>${escapeHtml(p.name)}</strong></td>
<td class="track-count">${localCount}</td>
<td class="track-count">${externalCount > 0 ? `${externalAvail}/${externalCount}` : '-'}</td>
@@ -1246,9 +1246,22 @@
showToast('Playlist linked!', 'success');
showRestartBanner();
closeModal('link-playlist-modal');
// Refresh both tabs to show updated status
fetchJellyfinPlaylists();
fetchPlaylists();
// Update UI state without refetching all playlists
const playlistsTable = document.getElementById('jellyfinPlaylistsTable');
if (playlistsTable) {
const rows = playlistsTable.querySelectorAll('tr');
rows.forEach(row => {
if (row.dataset.playlistId === jellyfinId) {
const actionCell = row.querySelector('td:last-child');
if (actionCell) {
actionCell.innerHTML = `<button class="danger" onclick="unlinkPlaylist('${escapeJs(name)}')">Unlink</button>`;
}
}
});
}
fetchPlaylists(); // Only refresh the Active Playlists tab
} else {
showToast(data.error || 'Failed to link playlist', 'error');
}
@@ -1270,8 +1283,24 @@
if (res.ok) {
showToast('Playlist unlinked.', 'success');
showRestartBanner();
fetchJellyfinPlaylists();
fetchPlaylists();
// Update UI state without refetching all playlists
const playlistsTable = document.getElementById('jellyfinPlaylistsTable');
if (playlistsTable) {
const rows = playlistsTable.querySelectorAll('tr');
rows.forEach(row => {
const nameCell = row.querySelector('td:first-child');
if (nameCell && nameCell.textContent === name) {
const actionCell = row.querySelector('td:last-child');
if (actionCell) {
const playlistId = row.dataset.playlistId;
actionCell.innerHTML = `<button class="primary" onclick="openLinkPlaylist('${escapeJs(playlistId)}', '${escapeJs(name)}')">Link to Spotify</button>`;
}
}
});
}
fetchPlaylists(); // Only refresh the Active Playlists tab
} else {
showToast(data.error || 'Failed to unlink playlist', 'error');
}