@@ -421,7 +423,15 @@
+
+
-
+ EPG Sources
+Built-in EPG sources
+Built-in sources provide free EPG data. You can disable them, but they can’t be removed.
+ +
+
${channel.variants.length > 1 ? `
+
@@ -1200,19 +1210,19 @@
-
+
-
+
-
-
-
+
+
+
-
+
diff --git a/public/js/api.js b/public/js/api.js
index e7aa057..585461e 100644
--- a/public/js/api.js
+++ b/public/js/api.js
@@ -78,10 +78,12 @@ const API = {
},
live: {
- getChannels: ({ sourceId = null, includeHidden = false } = {}) => {
+ getChannels: ({ sourceId = null, includeHidden = false, q = '', languages = [] } = {}) => {
const params = new URLSearchParams();
if (sourceId) params.set('sourceId', sourceId);
params.set('includeHidden', String(Boolean(includeHidden)));
+ if (q) params.set('q', q);
+ if (languages.length) params.set('languages', languages.join(','));
return API.request('GET', `/live/channels?${params.toString()}`);
},
rebuildProjection: () => API.request('POST', '/live/projection/rebuild'),
diff --git a/public/js/components/ChannelList.js b/public/js/components/ChannelList.js
index a2962b7..5696985 100644
--- a/public/js/components/ChannelList.js
+++ b/public/js/components/ChannelList.js
@@ -11,6 +11,8 @@ class ChannelList {
this.showHiddenCheckbox = document.getElementById('show-hidden');
this.toggleGroupsBtn = document.getElementById('toggle-groups');
this.contextMenu = document.getElementById('context-menu');
+ this.languageFilter = document.getElementById('channel-language-filter');
+ this.listStatus = document.getElementById('channel-list-status');
this.channels = [];
this.groups = [];
@@ -25,6 +27,9 @@ class ChannelList {
this.renderedChannels = [];
this.listMode = 'grouped';
this.logicalChannels = [];
+ this.projectedLogicalChannels = null;
+ this.availableLanguages = [];
+ this.selectedLanguages = new Set();
this.selectedVariants = new Map();
this.expandedVariants = new Set();
this.preferredLanguageKey = 'nodecast_tv_preferred_language';
@@ -38,6 +43,7 @@ class ChannelList {
this.projectionNotice = '';
this.loadCollapsedState();
+ this.restoreLanguageSelection();
this.init();
}
@@ -188,12 +194,19 @@ class ChannelList {
this.searchInput.addEventListener('input', () => {
clearTimeout(searchTimeout);
searchTimeout = setTimeout(() => {
- this.render();
+ this.loadChannels({ refreshLanguages: false });
}, 300);
});
// Source filter handler
- this.sourceSelect.addEventListener('change', () => this.loadChannels());
+ this.sourceSelect.addEventListener('change', () => {
+ this.restoreLanguageSelection();
+ this.loadChannels();
+ });
+
+ document.addEventListener('keydown', event => {
+ if (event.key === 'Escape') this.closeLanguagePanel();
+ });
this.toggleGroupsBtn?.addEventListener('click', () => {
if (this.listMode === 'grouped') this.toggleAllGroups();
@@ -263,10 +276,9 @@ class ChannelList {
const channel = this.logicalChannels.find(c => c.fingerprint === item.dataset.logicalId);
if (channel) {
- const programInfo = this.getProgramInfo(channel);
const programElement = item.querySelector('.channel-program');
if (programElement) {
- programElement.textContent = programInfo || '';
+ programElement.textContent = this.getProgramStatusText(channel);
}
}
});
@@ -313,6 +325,14 @@ class ChannelList {
}
}
+ getProgramStatusText(channel) {
+ const title = this.getProgramInfo(channel);
+ if (title) return `Live: ${title}`;
+ return window.app?.epgGuide?.loadError
+ ? 'Program information unavailable'
+ : 'No program information';
+ }
+
/**
* Clear program info cache
* Useful when EPG data has been updated
@@ -430,7 +450,7 @@ class ChannelList {
this.toggleGroupsBtn.classList.toggle('hidden', this.listMode === 'flat');
}
- this.logicalChannels = ChannelVariantGrouping.groupChannels(this.channels, {
+ this.logicalChannels = this.projectedLogicalChannels || ChannelVariantGrouping.groupChannels(this.channels, {
showHidden,
selectedVariants: this.selectedVariants,
preferredLanguage: this.preferredLanguage,
@@ -477,7 +497,7 @@ class ChannelList {
// 1. Filter
this.filteredChannels = this.logicalChannels;
- if (searchTerm) {
+ if (searchTerm && !this.projectedLogicalChannels) {
this.filteredChannels = this.logicalChannels.filter(ch =>
String(ch.displayName ?? '').toLowerCase().includes(searchTerm) ||
ch.variants.some(variant => String(variant.name ?? '').toLowerCase().includes(searchTerm)) ||
@@ -487,6 +507,7 @@ class ChannelList {
}
let filteredChannels = this.filteredChannels;
+ if (this.listStatus) this.listStatus.textContent = `${filteredChannels.length} channel entries shown`;
this.showHidden = showHidden;
if (this.listMode === 'flat') {
@@ -819,15 +840,21 @@ class ChannelList {
${this.escapeHtml(variant.name)}
`;
}).join('');
+ const channelLanguage = channel.language || { code: 'und', short: 'UND', label: 'Unknown' };
+ const isUnknownLanguage = ['und', 'unknown'].includes(channelLanguage.code);
+ const languageBadge = isUnknownLanguage ? '?' : (channelLanguage.short || channelLanguage.code.toUpperCase());
+ const languageAccessibleName = isUnknownLanguage ? 'Unknown language' : channelLanguage.label;
+ const programLabel = this.getProgramStatusText(channel);
return `Custom EPG sources
- })
+
+ ${this.escapeHtml(languageBadge)}
- ${channel.variants.length > 1 ? `` : ''}
+
+ ${channel.variants.length > 1 ? `` : ''}
${this.escapeHtml(channel.displayName)}
- ${this.escapeHtml(this.getProgramInfo(channel) || '')}
${this.escapeHtml(programLabel)}
${variants}
` : ''}
@@ -1030,24 +1057,124 @@ class ChannelList {
async loadProjectedChannels(sourceId = null) {
try {
- const response = await API.live.getChannels({ sourceId, includeHidden: true });
+ let response = await API.live.getChannels({
+ sourceId,
+ includeHidden: true,
+ q: this.searchInput?.value?.trim() || '',
+ languages: [...this.selectedLanguages]
+ });
if (!LiveChannelProjection.canUse(response)) {
+ this.projectedLogicalChannels = null;
this.projectionNotice = 'Channel list is updating. Using the standard channel list for now.';
return false;
}
- const mapped = LiveChannelProjection.mapResponse(response, this.sources);
+ let mapped = LiveChannelProjection.mapResponse(response, this.sources);
this.channels = mapped.channels;
+ this.projectedLogicalChannels = mapped.logicalChannels;
+ this.availableLanguages = mapped.availableLanguages;
+ if (this.reconcileLanguageSelection()) {
+ response = await API.live.getChannels({
+ sourceId,
+ includeHidden: true,
+ q: this.searchInput?.value?.trim() || '',
+ languages: [...this.selectedLanguages]
+ });
+ mapped = LiveChannelProjection.mapResponse(response, this.sources);
+ this.channels = mapped.channels;
+ this.projectedLogicalChannels = mapped.logicalChannels;
+ this.availableLanguages = mapped.availableLanguages;
+ }
+ this.renderLanguageFilter();
this.visibleFavorites = mapped.favorites;
this.hiddenItems = mapped.hiddenItems;
this.projectionNotice = '';
return true;
} catch (err) {
+ this.projectedLogicalChannels = null;
console.warn('[ChannelList] Live projection unavailable; using legacy loading:', err.message);
this.projectionNotice = '';
return false;
}
}
+ languageStorageKey() {
+ return `nodecast_tv_live_languages:${this.sourceSelect?.value || 'all'}`;
+ }
+
+ restoreLanguageSelection() {
+ try {
+ this.selectedLanguages = new Set(JSON.parse(sessionStorage.getItem(this.languageStorageKey()) || '[]'));
+ } catch {
+ this.selectedLanguages = new Set();
+ }
+ }
+
+ reconcileLanguageSelection() {
+ const previous = [...this.selectedLanguages];
+ const available = new Set(this.availableLanguages.map(language => language.code));
+ this.selectedLanguages = new Set([...this.selectedLanguages].filter(code => available.has(code)));
+ try {
+ sessionStorage.setItem(this.languageStorageKey(), JSON.stringify([...this.selectedLanguages]));
+ } catch {}
+ return previous.length !== this.selectedLanguages.size;
+ }
+
+ setLanguageSelection(code) {
+ if (code === 'all') this.selectedLanguages.clear();
+ else if (this.selectedLanguages.has(code)) this.selectedLanguages.delete(code);
+ else this.selectedLanguages.add(code);
+ try {
+ sessionStorage.setItem(this.languageStorageKey(), JSON.stringify([...this.selectedLanguages]));
+ } catch {}
+ this.renderLanguageFilter();
+ this.loadChannels({ refreshLanguages: false });
+ }
+
+ closeLanguagePanel() {
+ const panel = this.languageFilter?.querySelector('.language-more-panel');
+ const toggle = this.languageFilter?.querySelector('.language-more-toggle');
+ const wasOpen = panel && !panel.hidden;
+ if (panel) panel.hidden = true;
+ toggle?.setAttribute('aria-expanded', 'false');
+ if (wasOpen) toggle?.focus();
+ }
+
+ renderLanguageFilter() {
+ if (!this.languageFilter) return;
+ const quick = this.availableLanguages.slice(0, 3);
+ const selected = this.selectedLanguages;
+ const button = language => {
+ const unknown = language.code === 'und';
+ const label = unknown ? 'Unknown' : language.label;
+ const text = unknown ? '?' : (language.short || language.code.toUpperCase());
+ return ``;
+ };
+ this.languageFilter.innerHTML = `
+ Languages
+
+ ${quick.map(button).join('')}
+ ${this.availableLanguages.length > 3 ? `
+
+
` : ''}`;
+ this.languageFilter.querySelectorAll('[data-language]').forEach(element => {
+ element.addEventListener('click', () => this.setLanguageSelection(element.dataset.language));
+ });
+ const toggle = this.languageFilter.querySelector('.language-more-toggle');
+ const panel = this.languageFilter.querySelector('.language-more-panel');
+ toggle?.addEventListener('click', () => {
+ panel.hidden = !panel.hidden;
+ toggle.setAttribute('aria-expanded', String(!panel.hidden));
+ if (!panel.hidden) panel.querySelector('input')?.focus();
+ });
+ panel?.querySelector('.language-search')?.addEventListener('input', event => {
+ const query = event.target.value.toLowerCase();
+ panel.querySelectorAll('[data-language]').forEach(element => {
+ const language = this.availableLanguages.find(item => item.code === element.dataset.language);
+ element.hidden = !`${language?.code} ${language?.label}`.toLowerCase().includes(query);
+ });
+ });
+ }
+
/**
* Load Xtream channels
*/
diff --git a/public/js/components/EpgGuide.js b/public/js/components/EpgGuide.js
index ce4a01d..11e0527 100644
--- a/public/js/components/EpgGuide.js
+++ b/public/js/components/EpgGuide.js
@@ -19,6 +19,7 @@ class EpgGuide {
this.timeOffset = 0; // Hours offset from now
this.pixelsPerMinute = 6.67; // Width scaling (30min = 200px)
this.favorites = new Set(); // Set<"sourceId:channelId">
+ this.loadError = null;
this.selectedGroup = 'Favorites'; // Default to Favorites
// Virtual scrolling properties
@@ -175,6 +176,7 @@ class EpgGuide {
try {
this.container.innerHTML = '';
await this.fetchEpgData(forceRefresh);
+ this.loadError = null;
this.lastRefreshTime = new Date();
this.render();
@@ -182,6 +184,7 @@ class EpgGuide {
// This ensures EPG data stays fresh while the app is open
this.startBackgroundRefresh();
} catch (err) {
+ this.loadError = err;
console.error('Error loading EPG:', err);
this.container.innerHTML = `
diff --git a/public/js/components/SourceManager.js b/public/js/components/SourceManager.js
index e5e00f9..29f236f 100644
--- a/public/js/components/SourceManager.js
+++ b/public/js/components/SourceManager.js
@@ -8,6 +8,7 @@ class SourceManager {
this.xtreamList = document.getElementById('xtream-list');
this.m3uList = document.getElementById('m3u-list');
this.epgList = document.getElementById('epg-list');
+ this.builtinEpgList = document.getElementById('builtin-epg-list');
// Content browser state
this.contentType = 'channels'; // 'channels' or 'movies'
@@ -114,7 +115,9 @@ class SourceManager {
this.renderSourceList(this.xtreamList, sources.filter(s => s.type === 'xtream'), 'xtream');
this.renderSourceList(this.m3uList, sources.filter(s => s.type === 'm3u'), 'm3u');
- this.renderSourceList(this.epgList, sources.filter(s => s.type === 'epg'), 'epg');
+ 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');
} catch (err) {
console.error('Error loading sources:', err);
}
@@ -162,6 +165,33 @@ class SourceManager {
});
}
+ renderBuiltinEpgSources(sources) {
+ if (!this.builtinEpgList) return;
+ if (!sources.length) {
+ this.builtinEpgList.innerHTML = '
No built-in EPG sources available
'; + return; + } + this.builtinEpgList.innerHTML = sources.map(source => { + const coverage = [source.language?.toUpperCase(), source.country].filter(Boolean).join(' · '); + return `
+
+
`;
+ }).join('');
+ this.builtinEpgList.querySelectorAll('.source-item').forEach(item => {
+ const id = Number(item.dataset.id);
+ item.querySelector('[data-action="refresh"]')?.addEventListener('click', () => this.refreshSource(id, 'epg'));
+ item.querySelector('[data-action="toggle"]')?.addEventListener('click', () => this.toggleSource(id));
+ });
+ }
+
/**
* Show add source modal
*/
diff --git a/public/js/pages/LivePage.js b/public/js/pages/LivePage.js
index b61238e..19e1934 100644
--- a/public/js/pages/LivePage.js
+++ b/public/js/pages/LivePage.js
@@ -23,6 +23,7 @@ class LivePage {
// Update program info in existing DOM elements without re-rendering
this.updateProgramInfo();
} catch (err) {
+ this.app.epgGuide.loadError = err;
console.warn('Background EPG fetch failed:', err);
}
}
@@ -52,8 +53,7 @@ class LivePage {
if (channel) {
const programDiv = item.querySelector('.channel-program');
if (programDiv) {
- const programTitle = this.app.channelList.getProgramInfo(channel);
- programDiv.textContent = programTitle || '';
+ programDiv.textContent = this.app.channelList.getProgramStatusText(channel);
}
}
}
diff --git a/public/js/services/liveChannelProjection.js b/public/js/services/liveChannelProjection.js
index a213a1b..62adb9b 100644
--- a/public/js/services/liveChannelProjection.js
+++ b/public/js/services/liveChannelProjection.js
@@ -12,9 +12,12 @@
const favorites = new Set();
const hiddenItems = new Set();
const channels = [];
+ const logicalChannels = [];
+ const hasLanguageViews = response.channels.every(channel => channel?.language && channel?.logicalChannelId);
response.channels.forEach(logicalChannel => {
if (!logicalChannel || !Array.isArray(logicalChannel.variants)) return;
+ const mappedVariants = [];
logicalChannel.variants.forEach(variant => {
const source = sourceById.get(String(variant.sourceId));
const id = String(variant.id);
@@ -32,14 +35,44 @@
sourceType: variant.sourceType ?? source?.type ?? 'xtream',
sourceName: variant.sourceName ?? source?.name ?? ''
};
+ if (variant.language || logicalChannel.language) {
+ mapped.language = variant.language || logicalChannel.language;
+ }
channels.push(mapped);
+ mappedVariants.push(mapped);
const key = `${mapped.sourceId}:${id}`;
if (variant.isFavorite) favorites.add(key);
if (variant.isHidden) hiddenItems.add(`channel:${mapped.sourceId}:${mapped.streamId || id}`);
});
+ if (!mappedVariants.length) return;
+ const preferredVariant = mappedVariants.find(variant =>
+ `${variant.sourceId}:${variant.id}` === String(logicalChannel.selectedVariantId)
+ ) || mappedVariants.find(variant => String(variant.id) === String(logicalChannel.preferredVariant?.id))
+ || mappedVariants[0];
+ const language = logicalChannel.language || preferredVariant.language;
+ if (hasLanguageViews) logicalChannels.push({
+ ...logicalChannel,
+ fingerprint: logicalChannel.id,
+ displayName: logicalChannel.displayName || logicalChannel.standardName || logicalChannel.name,
+ name: logicalChannel.displayName || logicalChannel.standardName || logicalChannel.name,
+ variants: mappedVariants,
+ visibleVariants: mappedVariants.filter(variant => !variant.isHidden),
+ preferredVariant,
+ language,
+ selectedVariantId: `${preferredVariant.sourceId}:${preferredVariant.id}`,
+ groupTitle: preferredVariant.groupTitle,
+ tvgLogo: preferredVariant.tvgLogo,
+ tvgId: logicalChannel.epg?.channelId || preferredVariant.tvgId,
+ isFavorite: mappedVariants.some(variant => variant.isFavorite),
+ isHidden: mappedVariants.every(variant => variant.isHidden)
+ });
});
- return { channels, favorites, hiddenItems, projection: response.projection || {} };
+ return {
+ channels, logicalChannels: hasLanguageViews ? logicalChannels : null, favorites, hiddenItems,
+ availableLanguages: response.filters?.availableLanguages || [],
+ projection: response.projection || {}
+ };
}
function canUse(response) {
diff --git a/test/t23Frontend.test.js b/test/t23Frontend.test.js
new file mode 100644
index 0000000..1ff606b
--- /dev/null
+++ b/test/t23Frontend.test.js
@@ -0,0 +1,71 @@
+const test = require('node:test');
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+const { JSDOM } = require('jsdom');
+
+const root = path.resolve(__dirname, '..');
+const projection = require('../public/js/services/liveChannelProjection.js');
+
+function script(relativePath) {
+ return fs.readFileSync(path.join(root, 'public', relativePath), 'utf8');
+}
+
+test('projection adapter preserves backend channel-language views and their variants', () => {
+ const mapped = projection.mapResponse({
+ projection: { stale: false },
+ filters: { availableLanguages: [{ code: 'fr', short: 'FR', label: 'French' }] },
+ channels: [{
+ id: 'logical-1:fr', logicalChannelId: 'logical-1', displayName: 'beIN Sports 1',
+ language: { code: 'fr', short: 'FR', label: 'French', confidence: 95 },
+ selectedVariantId: '7:hd', epg: { channelId: 'BeInSports1.fr', language: 'fr' },
+ variants: [
+ { id: 'sd', sourceId: 7, name: 'beIN 1 SD', categoryName: 'Sports', isHidden: false },
+ { id: 'hd', sourceId: 7, name: 'beIN 1 HD', categoryName: 'Sports', isHidden: false }
+ ]
+ }]
+ }, [{ id: 7, type: 'm3u', name: 'Provider' }]);
+
+ assert.equal(mapped.logicalChannels.length, 1);
+ assert.equal(mapped.logicalChannels[0].fingerprint, 'logical-1:fr');
+ assert.equal(mapped.logicalChannels[0].language.code, 'fr');
+ assert.equal(mapped.logicalChannels[0].preferredVariant.id, 'hd');
+ assert.equal(mapped.logicalChannels[0].variants.length, 2);
+ assert.equal(mapped.logicalChannels[0].tvgId, 'BeInSports1.fr');
+ assert.deepEqual(mapped.availableLanguages.map(language => language.code), ['fr']);
+});
+
+test('live API sends flexible search and selected language filters', async () => {
+ const dom = new JSDOM('', { url: 'http://nodecast.test/', runScripts: 'outside-only' });
+ let requestedUrl = '';
+ dom.window.fetch = async url => {
+ requestedUrl = url;
+ return { ok: true, headers: { get: () => 'application/json' }, json: async () => ({ channels: [] }) };
+ };
+ dom.window.eval(script('js/api.js'));
+ await dom.window.API.live.getChannels({ q: 'Bein Sport 1', languages: ['fr', 'en'] });
+ const params = new URL(requestedUrl, 'http://nodecast.test').searchParams;
+ assert.equal(params.get('q'), 'Bein Sport 1');
+ assert.equal(params.get('languages'), 'fr,en');
+});
+
+test('built-in EPG sources expose only refresh and enable controls', () => {
+ const dom = new JSDOM('', { runScripts: 'outside-only' });
+ dom.window.Icons = { series: '', refresh: '' };
+ dom.window.API = { sources: {} };
+ dom.window.eval(`${script('js/components/SourceManager.js')}\nwindow.SourceManager = SourceManager;`);
+ const manager = Object.create(dom.window.SourceManager.prototype);
+ manager.builtinEpgList = dom.window.document.getElementById('builtin-epg-list');
+ manager.refreshSource = () => {};
+ manager.toggleSource = () => {};
+ manager.renderBuiltinEpgSources([{
+ id: 4, name: 'EPG.PW France', builtinKey: 'epgpw-fr', enabled: false,
+ language: 'fr', country: 'FR', readonly: true, removable: false
+ }]);
+
+ assert.match(manager.builtinEpgList.textContent, /Built-in/);
+ assert.match(manager.builtinEpgList.textContent, /Free EPG data/);
+ assert.equal(manager.builtinEpgList.querySelector('[data-action="delete"]'), null);
+ assert.equal(manager.builtinEpgList.querySelector('[data-action="edit"]'), null);
+ assert.equal(manager.builtinEpgList.querySelector('[data-action="toggle"]').getAttribute('aria-pressed'), 'false');
+});
+
+ ${source.name} Built-in
+
+
+
+
+
+