Fix playlist linking to save all playlists and add restart banner

- Read playlists from .env file instead of stale in-memory config
- This fixes issue where linking multiple playlists only saved the last one
- Add prominent restart banner at top when config changes
- Update UI immediately after linking/unlinking playlists
- Banner shows 'Restart Now' button and dismissible option
- All config changes now show the restart banner instead of toast messages
- GetJellyfinPlaylists now reads from .env for accurate linked status
This commit is contained in:
2026-02-03 17:00:23 -05:00
parent 1a3134083b
commit ff72ae2395
2 changed files with 133 additions and 9 deletions

View File

@@ -329,6 +329,40 @@
color: var(--text-secondary);
}
.restart-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
background: var(--warning);
color: var(--bg-primary);
padding: 12px 20px;
text-align: center;
font-weight: 500;
z-index: 9998;
display: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.restart-banner.active {
display: block;
}
.restart-banner button {
margin-left: 16px;
background: var(--bg-primary);
color: var(--text-primary);
border: none;
padding: 6px 16px;
border-radius: 4px;
cursor: pointer;
font-weight: 500;
}
.restart-banner button:hover {
background: var(--bg-secondary);
}
.modal {
display: none;
position: fixed;
@@ -478,6 +512,13 @@
</style>
</head>
<body>
<!-- Restart Required Banner -->
<div class="restart-banner" id="restart-banner">
⚠️ Configuration changed. Restart required to apply changes.
<button onclick="restartContainer()">Restart Now</button>
<button onclick="dismissRestartBanner()" style="background: transparent; border: 1px solid var(--bg-primary);">Dismiss</button>
</div>
<div class="container">
<header>
<h1>
@@ -851,6 +892,18 @@
// Track if we've already initialized the cookie date to prevent infinite loop
let cookieDateInitialized = false;
// Track if restart is required
let restartRequired = false;
function showRestartBanner() {
restartRequired = true;
document.getElementById('restart-banner').classList.add('active');
}
function dismissRestartBanner() {
document.getElementById('restart-banner').classList.remove('active');
}
// Tab switching
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', () => {
@@ -1190,8 +1243,10 @@
const data = await res.json();
if (res.ok) {
showToast('Playlist linked! Restart container to apply.', 'success');
showToast('Playlist linked!', 'success');
showRestartBanner();
closeModal('link-playlist-modal');
// Refresh both tabs to show updated status
fetchJellyfinPlaylists();
fetchPlaylists();
} else {
@@ -1213,7 +1268,8 @@
const data = await res.json();
if (res.ok) {
showToast('Playlist unlinked. Restart container to apply.', 'success');
showToast('Playlist unlinked.', 'success');
showRestartBanner();
fetchJellyfinPlaylists();
fetchPlaylists();
} else {
@@ -1288,6 +1344,7 @@
});
if (res.ok) {
document.getElementById('restart-status').textContent = 'Server is back! Reloading...';
dismissRestartBanner();
setTimeout(() => window.location.reload(), 500);
return;
}
@@ -1334,7 +1391,8 @@
const data = await res.json();
if (res.ok) {
showToast('Playlist added. Restart container to apply.', 'success');
showToast('Playlist added.', 'success');
showRestartBanner();
closeModal('add-playlist-modal');
} else {
showToast(data.error || 'Failed to add playlist', 'error');
@@ -1355,7 +1413,8 @@
const data = await res.json();
if (res.ok) {
showToast('Playlist removed. Restart container to apply.', 'success');
showToast('Playlist removed.', 'success');
showRestartBanner();
fetchPlaylists();
} else {
showToast(data.error || 'Failed to remove playlist', 'error');
@@ -1458,7 +1517,8 @@
const data = await res.json();
if (res.ok) {
showToast('Setting updated. Restart container to apply.', 'success');
showToast('Setting updated.', 'success');
showRestartBanner();
closeModal('edit-setting-modal');
fetchConfig();
fetchStatus();