Fix Jellyfin playlists tab: linked Spotify ID, track count, and user/library filters

This commit is contained in:
2026-02-03 15:13:29 -05:00
parent c7f6783fa2
commit 75c7acb745
2 changed files with 183 additions and 20 deletions

View File

@@ -565,8 +565,24 @@
</h2>
<p style="color: var(--text-secondary); margin-bottom: 16px;">
Link Jellyfin playlists to Spotify playlists to fill in missing tracks.
Playlists created by Spotify Import plugin will appear here.
Select a user and/or library to filter playlists.
</p>
<div style="display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap;">
<div class="form-group" style="margin: 0; flex: 1; min-width: 200px;">
<label style="display: block; margin-bottom: 4px; color: var(--text-secondary); font-size: 0.85rem;">User</label>
<select id="jellyfin-user-select" onchange="fetchJellyfinPlaylists()" style="width: 100%; padding: 8px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary);">
<option value="">All Users</option>
</select>
</div>
<div class="form-group" style="margin: 0; flex: 1; min-width: 200px;">
<label style="display: block; margin-bottom: 4px; color: var(--text-secondary); font-size: 0.85rem;">Library</label>
<select id="jellyfin-library-select" onchange="fetchJellyfinPlaylists()" style="width: 100%; padding: 8px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary);">
<option value="">All Libraries</option>
</select>
</div>
</div>
<table class="playlist-table">
<thead>
<tr>
@@ -1047,12 +1063,48 @@
}
}
async function fetchJellyfinUsers() {
try {
const res = await fetch('/api/admin/jellyfin/users');
if (!res.ok) return;
const data = await res.json();
const select = document.getElementById('jellyfin-user-select');
select.innerHTML = '<option value="">All Users</option>' +
data.users.map(u => `<option value="${u.id}">${escapeHtml(u.name)}</option>`).join('');
} catch (error) {
console.error('Failed to fetch users:', error);
}
}
async function fetchJellyfinLibraries() {
try {
const res = await fetch('/api/admin/jellyfin/libraries');
if (!res.ok) return;
const data = await res.json();
const select = document.getElementById('jellyfin-library-select');
select.innerHTML = '<option value="">All Libraries</option>' +
data.libraries.map(l => `<option value="${l.id}">${escapeHtml(l.name)}${l.collectionType ? ' (' + l.collectionType + ')' : ''}</option>`).join('');
} catch (error) {
console.error('Failed to fetch libraries:', error);
}
}
async function fetchJellyfinPlaylists() {
const tbody = document.getElementById('jellyfin-playlist-table-body');
tbody.innerHTML = '<tr><td colspan="5" class="loading"><span class="spinner"></span> Loading Jellyfin playlists...</td></tr>';
try {
const res = await fetch('/api/admin/jellyfin/playlists');
// Build URL with optional filters
const userId = document.getElementById('jellyfin-user-select').value;
const parentId = document.getElementById('jellyfin-library-select').value;
let url = '/api/admin/jellyfin/playlists';
const params = new URLSearchParams();
if (userId) params.append('userId', userId);
if (parentId) params.append('parentId', parentId);
if (params.toString()) url += '?' + params.toString();
const res = await fetch(url);
if (!res.ok) {
const errorData = await res.json();
@@ -1415,6 +1467,8 @@
// Initial load
fetchStatus();
fetchPlaylists();
fetchJellyfinUsers();
fetchJellyfinLibraries();
fetchJellyfinPlaylists();
fetchConfig();