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
@ -1646,9 +1646,96 @@ video::cue {
|
||||
|
||||
.source-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.epg-sources-section h4 {
|
||||
margin: var(--space-lg) 0 var(--space-xs);
|
||||
}
|
||||
|
||||
.epg-sources-section .setting-hint + .setting-hint {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.epg-order-status {
|
||||
min-height: 1.25rem;
|
||||
margin: var(--space-sm) 0;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.epg-order-status[data-state="success"] {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.epg-order-status[data-state="error"] {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.epg-priority-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.epg-priority-rank {
|
||||
display: grid;
|
||||
min-width: 68px;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.6875rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.epg-priority-rank strong {
|
||||
color: var(--color-text-primary);
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.epg-move-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 44px);
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.epg-move-actions .btn,
|
||||
.epg-source-item .source-actions .btn {
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.epg-empty-state {
|
||||
padding: var(--space-lg);
|
||||
border: 1px dashed var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.inactive-sources-heading {
|
||||
margin-top: var(--space-xl) !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.epg-source-item {
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.epg-priority-controls {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.epg-source-item .source-info {
|
||||
min-width: calc(100% - 64px);
|
||||
}
|
||||
|
||||
.epg-source-item .source-actions {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hidden Items */
|
||||
.hidden-list {
|
||||
display: flex;
|
||||
|
||||
@ -421,20 +421,18 @@
|
||||
<div id="m3u-list" class="source-list"></div>
|
||||
</div>
|
||||
|
||||
<div class="source-section">
|
||||
<div class="source-section epg-sources-section">
|
||||
<div class="section-header">
|
||||
<h3>Built-in EPG sources</h3>
|
||||
</div>
|
||||
<p class="setting-hint">Built-in sources provide free EPG data. You can disable them, but they can’t be removed.</p>
|
||||
<div id="builtin-epg-list" class="source-list"></div>
|
||||
</div>
|
||||
|
||||
<div class="source-section">
|
||||
<div class="section-header">
|
||||
<h3>Custom EPG sources</h3>
|
||||
<h3>EPG Sources</h3>
|
||||
<button class="btn btn-primary" id="add-epg">+ Add EPG</button>
|
||||
</div>
|
||||
<div id="epg-list" class="source-list"></div>
|
||||
<h4>Active sources</h4>
|
||||
<p class="setting-hint">Sources are checked from top to bottom.</p>
|
||||
<p class="setting-hint">Higher sources take priority; lower sources fill missing program data.</p>
|
||||
<div id="epg-order-status" class="epg-order-status" role="status" aria-live="polite"></div>
|
||||
<div id="epg-active-list" class="source-list epg-priority-list"></div>
|
||||
<h4 class="inactive-sources-heading">Inactive sources</h4>
|
||||
<div id="epg-inactive-list" class="source-list"></div>
|
||||
</div>
|
||||
|
||||
<div class="source-section">
|
||||
@ -1210,7 +1208,7 @@
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="/js/icons.js"></script>
|
||||
<script src="/js/api.js?v=5"></script>
|
||||
<script src="/js/api.js?v=6"></script>
|
||||
<script src="/js/components/VideoPlayer.js?v=5"></script>
|
||||
<script src="/js/services/channelLanguageDetection.js?v=1"></script>
|
||||
<script src="/js/services/channelLanguageFusion.js?v=1"></script>
|
||||
@ -1219,7 +1217,7 @@
|
||||
<script src="/js/services/liveChannelProjection.js?v=2"></script>
|
||||
<script src="/js/services/channelVariantGrouping.js?v=7"></script>
|
||||
<script src="/js/components/ChannelList.js?v=12"></script>
|
||||
<script src="/js/components/SourceManager.js?v=3"></script>
|
||||
<script src="/js/components/SourceManager.js?v=4"></script>
|
||||
<script src="/js/components/EpgGuide.js?v=3"></script>
|
||||
<script src="/js/pages/HomePage.js?v=2"></script>
|
||||
<script src="/js/pages/LivePage.js?v=3"></script>
|
||||
|
||||
@ -59,6 +59,7 @@ const API = {
|
||||
toggle: (id) => API.request('POST', `/sources/${id}/toggle`),
|
||||
test: (id) => API.request('POST', `/sources/${id}/test`),
|
||||
sync: (id) => API.request('POST', `/sources/${id}/sync`), // Manual sync
|
||||
updateEpgOrder: (orderedIds) => API.request('PUT', '/sources/epg/order', { orderedIds }),
|
||||
getStatus: () => API.request('GET', '/sources/status'), // Get all statuses
|
||||
estimate: (id) => API.request('GET', `/sources/${id}/estimate`), // Estimate M3U size
|
||||
estimateByUrl: (url, type) => API.request('POST', '/sources/estimate', { url, type }), // Estimate by URL (before creation)
|
||||
|
||||
@ -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