feat(ui): add EPG source priority controls (#24)
Render active and inactive EPG priority lists, support move controls, and persist complete EPG source ordering from the settings UI. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
blomios
@ -9,6 +9,11 @@ class SourceManager {
|
||||
this.m3uList = document.getElementById('m3u-list');
|
||||
this.epgList = document.getElementById('epg-list');
|
||||
this.builtinEpgList = document.getElementById('builtin-epg-list');
|
||||
this.epgActiveList = document.getElementById('epg-active-list');
|
||||
this.epgInactiveList = document.getElementById('epg-inactive-list');
|
||||
this.epgOrderStatus = document.getElementById('epg-order-status');
|
||||
this.epgSources = [];
|
||||
this.isSavingEpgOrder = false;
|
||||
|
||||
// Content browser state
|
||||
this.contentType = 'channels'; // 'channels' or 'movies'
|
||||
@ -116,8 +121,7 @@ class SourceManager {
|
||||
this.renderSourceList(this.xtreamList, sources.filter(s => s.type === 'xtream'), 'xtream');
|
||||
this.renderSourceList(this.m3uList, sources.filter(s => s.type === 'm3u'), 'm3u');
|
||||
const epgSources = sources.filter(s => s.type === 'epg');
|
||||
this.renderBuiltinEpgSources(epgSources.filter(source => source.builtinKey));
|
||||
this.renderSourceList(this.epgList, epgSources.filter(source => !source.builtinKey), 'epg');
|
||||
this.renderEpgSources(epgSources);
|
||||
} catch (err) {
|
||||
console.error('Error loading sources:', err);
|
||||
}
|
||||
@ -192,6 +196,143 @@ class SourceManager {
|
||||
});
|
||||
}
|
||||
|
||||
escapeHtml(value) {
|
||||
return String(value ?? '')
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
renderEpgSources(sources, focusTarget = null) {
|
||||
if (!this.epgActiveList || !this.epgInactiveList) return;
|
||||
this.epgSources = sources.slice();
|
||||
const active = this.epgSources.filter(source => source.enabled);
|
||||
const inactive = this.epgSources.filter(source => !source.enabled);
|
||||
|
||||
if (!active.length) {
|
||||
this.epgActiveList.innerHTML = `<div class="empty-state epg-empty-state">
|
||||
<p>No active EPG sources</p>
|
||||
<p class="hint">Enable a source to load program information.</p>
|
||||
</div>`;
|
||||
} else {
|
||||
this.epgActiveList.innerHTML = active.map((source, index) => this.renderEpgSourceRow(source, {
|
||||
active: true,
|
||||
rank: index + 1,
|
||||
canMoveUp: index > 0,
|
||||
canMoveDown: index < active.length - 1
|
||||
})).join('');
|
||||
}
|
||||
|
||||
this.epgInactiveList.innerHTML = inactive.length
|
||||
? inactive.map(source => this.renderEpgSourceRow(source, { active: false })).join('')
|
||||
: '<p class="hint">No inactive EPG sources</p>';
|
||||
|
||||
this.attachEpgSourceListeners();
|
||||
if (focusTarget) {
|
||||
const selector = `[data-id="${focusTarget.id}"] [data-action="${focusTarget.action}"]`;
|
||||
const requested = this.epgActiveList.querySelector(selector) || this.epgInactiveList.querySelector(selector);
|
||||
const row = requested?.closest('.epg-source-item');
|
||||
const focusable = requested && !requested.disabled
|
||||
? requested
|
||||
: row?.querySelector('button:not(:disabled)');
|
||||
focusable?.focus();
|
||||
}
|
||||
}
|
||||
|
||||
renderEpgSourceRow(source, { active, rank = null, canMoveUp = false, canMoveDown = false }) {
|
||||
const name = this.escapeHtml(source.name);
|
||||
const coverage = [source.language?.toUpperCase(), source.country].filter(Boolean).join(' · ');
|
||||
const kind = source.builtinKey ? 'Built-in' : 'Custom';
|
||||
return `<div class="source-item epg-source-item ${active ? '' : 'disabled'}" data-id="${source.id}">
|
||||
${active ? `<div class="epg-priority-controls">
|
||||
<span class="epg-priority-rank" aria-label="Priority ${rank}"><strong>${rank}</strong><span>Priority ${rank}</span></span>
|
||||
<div class="epg-move-actions">
|
||||
<button class="btn btn-sm btn-secondary" data-action="move-up" aria-label="Move ${name} up" title="Move up" ${canMoveUp ? '' : 'disabled'}>↑</button>
|
||||
<button class="btn btn-sm btn-secondary" data-action="move-down" aria-label="Move ${name} down" title="Move down" ${canMoveDown ? '' : 'disabled'}>↓</button>
|
||||
</div>
|
||||
</div>` : ''}
|
||||
<span class="source-icon">${Icons.series}</span>
|
||||
<div class="source-info">
|
||||
<div class="source-name">${name} <span class="source-badge">${kind}</span></div>
|
||||
<div class="source-meta">${source.builtinKey ? 'Free EPG data' : 'Custom EPG source'}${coverage ? ` · ${this.escapeHtml(coverage)}` : ''} · ${active ? 'Active' : 'Inactive'}</div>
|
||||
</div>
|
||||
<div class="source-actions">
|
||||
<button class="btn btn-sm btn-secondary" data-action="refresh" title="Refresh Data" aria-label="Refresh ${name}">${Icons.refresh}</button>
|
||||
<button class="btn btn-sm btn-secondary" data-action="toggle" aria-pressed="${active}" aria-label="${active ? 'Disable' : 'Enable'} ${name}">${active ? 'Disable' : 'Enable'}</button>
|
||||
${source.builtinKey ? '' : `<button class="btn btn-sm btn-secondary" data-action="edit" aria-label="Edit ${name}" title="Edit">${Icons.settings}</button>
|
||||
<button class="btn btn-sm btn-danger" data-action="delete" aria-label="Delete ${name}" title="Delete">${Icons.close}</button>`}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
attachEpgSourceListeners() {
|
||||
[this.epgActiveList, this.epgInactiveList].forEach(container => {
|
||||
container.querySelectorAll('.epg-source-item').forEach(item => {
|
||||
const id = Number(item.dataset.id);
|
||||
item.querySelector('[data-action="move-up"]')?.addEventListener('click', () => this.moveEpgSource(id, -1, 'move-up'));
|
||||
item.querySelector('[data-action="move-down"]')?.addEventListener('click', () => this.moveEpgSource(id, 1, 'move-down'));
|
||||
item.querySelector('[data-action="refresh"]')?.addEventListener('click', () => this.refreshSource(id, 'epg'));
|
||||
item.querySelector('[data-action="toggle"]')?.addEventListener('click', () => this.toggleEpgSource(id));
|
||||
item.querySelector('[data-action="edit"]')?.addEventListener('click', () => this.showEditModal(id, 'epg'));
|
||||
item.querySelector('[data-action="delete"]')?.addEventListener('click', () => this.deleteSource(id));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
setEpgOrderStatus(message, state = '') {
|
||||
if (!this.epgOrderStatus) return;
|
||||
this.epgOrderStatus.textContent = message;
|
||||
this.epgOrderStatus.dataset.state = state;
|
||||
}
|
||||
|
||||
async moveEpgSource(id, direction, action) {
|
||||
if (this.isSavingEpgOrder) return;
|
||||
const previous = this.epgSources.slice();
|
||||
const active = previous.filter(source => source.enabled);
|
||||
const inactive = previous.filter(source => !source.enabled);
|
||||
const index = active.findIndex(source => source.id === id);
|
||||
const targetIndex = index + direction;
|
||||
if (index < 0 || targetIndex < 0 || targetIndex >= active.length) return;
|
||||
[active[index], active[targetIndex]] = [active[targetIndex], active[index]];
|
||||
const optimistic = [...active, ...inactive];
|
||||
this.isSavingEpgOrder = true;
|
||||
this.setEpgOrderStatus('Saving priority…', 'saving');
|
||||
this.renderEpgSources(optimistic, { id, action });
|
||||
try {
|
||||
const ordered = await API.sources.updateEpgOrder(optimistic.map(source => source.id));
|
||||
this.isSavingEpgOrder = false;
|
||||
this.renderEpgSources(ordered, { id, action });
|
||||
this.setEpgOrderStatus('EPG priority saved', 'success');
|
||||
} catch (err) {
|
||||
this.isSavingEpgOrder = false;
|
||||
this.renderEpgSources(previous, { id, action });
|
||||
this.setEpgOrderStatus('EPG priority couldn’t be saved. Try again.', 'error');
|
||||
console.error('Error saving EPG source priority:', err);
|
||||
}
|
||||
}
|
||||
|
||||
async toggleEpgSource(id) {
|
||||
try {
|
||||
await API.sources.toggle(id);
|
||||
const allSources = await API.sources.getAll();
|
||||
const epgSources = allSources.filter(source => source.type === 'epg');
|
||||
const active = epgSources.filter(source => source.enabled && source.id !== id);
|
||||
const toggled = epgSources.find(source => source.id === id);
|
||||
if (toggled?.enabled) active.push(toggled);
|
||||
const inactive = epgSources.filter(source => !source.enabled);
|
||||
const completeOrder = [...active, ...inactive];
|
||||
const ordered = await API.sources.updateEpgOrder(completeOrder.map(source => source.id));
|
||||
this.renderEpgSources(ordered, { id, action: 'toggle' });
|
||||
this.setEpgOrderStatus('EPG priority saved', 'success');
|
||||
} catch (err) {
|
||||
this.setEpgOrderStatus('EPG priority couldn’t be saved. Try again.', 'error');
|
||||
await this.loadSources();
|
||||
console.error('Error toggling EPG source:', err);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show add source modal
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user