blomios/Nodecast
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add settings option to hide Live TV categories (#11)

Browse Source 
Add a liveChannelListMode setting (default 'grouped') with a Settings
toggle to display the Live TV channel list flat, without category
group sections. When enabled, logical channels are listed directly
with their stream variants still grouped as in #9/#10. Cover the
setting default and flat-list behavior with tests.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
blomios
2026-10-02 09:57:20 +02:00
parent 451f11f21f
commit e06f4ec2c3
8 changed files with 153 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
public/index.html
View File

@ -454,6 +454,20 @@
<!-- Player Tab -->
<div id="tab-player" class="tab-content">
<div class="settings-section">
<h3>Live TV</h3>
<div class="setting-item">
<label class="setting-toggle">
<input type="checkbox" id="setting-group-live-channels" checked>
<span class="toggle-slider"></span>
</label>
<div class="setting-info">
<span class="setting-label">Group channels by category</span>
<span class="setting-hint">Turn off to show all channels in a single list. Stream variants remain grouped by channel.</span>
</div>
</div>
</div>
<div class="settings-section">
<h3>Keyboard Controls</h3>
<div class="setting-item">
@ -1124,10 +1138,10 @@
<!-- JavaScript -->
<script src="/js/icons.js"></script>
<script src="/js/api.js?v=2"></script>
<script src="/js/components/VideoPlayer.js?v=3"></script>
<script src="/js/components/VideoPlayer.js?v=4"></script>
<script src="/js/services/channelLanguageDetection.js?v=1"></script>
<script src="/js/services/channelVariantGrouping.js?v=2"></script>
<script src="/js/components/ChannelList.js?v=5"></script>
<script src="/js/services/channelVariantGrouping.js?v=3"></script>
<script src="/js/components/ChannelList.js?v=6"></script>
<script src="/js/components/SourceManager.js?v=2"></script>
<script src="/js/components/EpgGuide.js?v=2"></script>
<script src="/js/pages/HomePage.js?v=2"></script>
@ -1135,7 +1149,7 @@
<script src="/js/pages/Guide.js?v=2"></script>
<script src="/js/pages/MoviesPage.js?v=4"></script>
<script src="/js/pages/SeriesPage.js?v=1"></script>
<script src="/js/pages/Settings.js?v=2"></script>
<script src="/js/pages/Settings.js?v=3"></script>
<script src="/js/pages/WatchPage.js?v=1"></script>
<script src="/js/app.js?v=4"></script>
<script>

85
public/js/components/ChannelList.js
View File

@ -23,6 +23,7 @@ class ChannelList {
this.sources = [];
this.isLoading = false;
this.renderedChannels = [];
this.listMode = 'grouped';
this.logicalChannels = [];
this.selectedVariants = new Map();
this.expandedVariants = new Set();
@ -189,6 +190,10 @@ class ChannelList {
// Source filter handler
this.sourceSelect.addEventListener('change', () => this.loadChannels());
this.toggleGroupsBtn?.addEventListener('click', () => {
if (this.listMode === 'grouped') this.toggleAllGroups();
});
// Show hidden toggle
if (this.showHiddenCheckbox) {
this.showHiddenCheckbox.addEventListener('change', () => this.render());
@ -212,7 +217,8 @@ class ChannelList {
// Intersection Observer for lazy loading
this.observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
this.renderNextBatch();
if (this.listMode === 'flat') this.renderNextFlatBatch();
else this.renderNextBatch();
}
}, { rootMargin: '100px' });
@ -312,6 +318,16 @@ class ChannelList {
}
}
setListMode(mode) {
this.listMode = mode === 'flat' ? 'flat' : 'grouped';
if (this.toggleGroupsBtn) {
this.toggleGroupsBtn.hidden = this.listMode === 'flat';
this.toggleGroupsBtn.disabled = this.listMode === 'flat';
this.toggleGroupsBtn.classList.toggle('hidden', this.listMode === 'flat');
}
if (this.channels.length > 0) this.render();
}
escapeHtml(text) {
if (!text) return '';
return text
@ -328,6 +344,12 @@ class ChannelList {
render() {
const searchTerm = this.searchInput.value.toLowerCase();
const showHidden = this.showHiddenCheckbox ? this.showHiddenCheckbox.checked : false;
this.listMode = window.app?.player?.settings?.liveChannelListMode === 'flat' ? 'flat' : 'grouped';
if (this.toggleGroupsBtn) {
this.toggleGroupsBtn.hidden = this.listMode === 'flat';
this.toggleGroupsBtn.disabled = this.listMode === 'flat';
this.toggleGroupsBtn.classList.toggle('hidden', this.listMode === 'flat');
}
this.logicalChannels = ChannelVariantGrouping.groupChannels(this.channels, {
showHidden,
@ -359,6 +381,12 @@ class ChannelList {
let filteredChannels = this.filteredChannels;
this.showHidden = showHidden;
if (this.listMode === 'flat') {
this.renderFlatList(filteredChannels, searchTerm);
return;
}
// 2. Group
filteredChannels.forEach(ch => {
const groupKey = ch.groupTitle || 'Uncategorized';
@ -466,6 +494,57 @@ class ChannelList {
this.observer.observe(this.loader);
}
renderFlatList(channels, searchTerm) {
const orderedChannels = ChannelVariantGrouping.orderFlatChannels(channels);
this.renderedChannels = orderedChannels.map(channel => ({
...channel,
_renderId: `rid_${Date.now()}_${Math.random().toString(36).slice(2, 11)}`,
_renderGroup: 'flat'
}));
if (this.renderedChannels.length === 0) {
this.container.innerHTML = `
<div class="empty-state">
<p>${searchTerm ? 'No channels match your search' : 'No channels loaded'}</p>
<p class="hint">${searchTerm ? 'Try a different search term' : 'Add a source in Settings to get started'}</p>
</div>`;
return;
}
this.currentBatch = 0;
this.batchSize = 100;
this.listContainer = document.createElement('div');
this.listContainer.className = 'channel-list-content flat-channel-list';
this.container.appendChild(this.listContainer);
this.loader = document.createElement('div');
this.loader.className = 'batch-loader';
this.loader.innerHTML = '<div class="loading-spinner"></div>';
this.container.appendChild(this.loader);
this.renderNextFlatBatch();
this.observer.observe(this.loader);
}
renderNextFlatBatch() {
if (!this.loader || !this.listContainer) return;
const start = this.currentBatch * this.batchSize;
const channels = this.renderedChannels.slice(start, start + this.batchSize);
if (channels.length === 0) {
this.loader.style.display = 'none';
return;
}
const temp = document.createElement('div');
temp.innerHTML = channels.map(channel => this.renderLogicalChannel(
channel,
channel._renderId,
'flat',
this.currentChannel?.id === channel.id,
this.currentRenderId === channel._renderId
)).join('');
this.attachChannelListeners(temp);
while (temp.firstElementChild) this.listContainer.appendChild(temp.firstElementChild);
this.currentBatch++;
if (start + channels.length >= this.renderedChannels.length) this.loader.style.display = 'none';
}
/**
* Render next batch of groups
*/
@ -1002,6 +1081,8 @@ class ChannelList {
* Update Favorites group in DOM and data
*/
updateFavoritesGroup(channel, isAdded) {
if (!ChannelVariantGrouping.shouldUseFavoritesGroup(this.listMode) || !this.groupedChannels) return;
// 1. Update Data
if (!this.groupedChannels['Favorites']) {
this.groupedChannels['Favorites'] = [];
@ -1518,7 +1599,7 @@ class ChannelList {
* Get list of visible (non-hidden) channels in display order
*/
getVisibleChannels() {
return this.logicalChannels;
return this.listMode === 'flat' ? this.renderedChannels : this.logicalChannels;
}
}

2
public/js/components/VideoPlayer.js
View File

@ -57,6 +57,7 @@ class VideoPlayer {
rememberVolume: true,
lastVolume: 80,
autoPlayNextEpisode: false,
liveChannelListMode: 'grouped',
forceProxy: false,
forceTranscode: false,
forceRemux: false,
@ -94,6 +95,7 @@ class VideoPlayer {
const serverSettings = await API.settings.get();
this.settings = { ...this.getDefaultSettings(), ...serverSettings };
this.settingsLoaded = true;
window.app?.channelList?.setListMode(this.settings.liveChannelListMode);
console.log('[Player] Settings loaded from server');
} catch (err) {
console.warn('[Player] Failed to load settings from server, using defaults:', err.message);

11
public/js/pages/Settings.js
View File

@ -34,6 +34,7 @@ class SettingsPage {
const volumeValueDisplay = document.getElementById('volume-value');
const rememberVolumeToggle = document.getElementById('setting-remember-volume');
const autoPlayNextToggle = document.getElementById('setting-autoplay-next');
const groupLiveChannelsToggle = document.getElementById('setting-group-live-channels');
// Load current settings
if (this.app.player?.settings) {
@ -43,6 +44,7 @@ class SettingsPage {
volumeValueDisplay.textContent = this.app.player.settings.defaultVolume + '%';
rememberVolumeToggle.checked = this.app.player.settings.rememberVolume;
autoPlayNextToggle.checked = this.app.player.settings.autoPlayNextEpisode;
groupLiveChannelsToggle.checked = this.app.player.settings.liveChannelListMode !== 'flat';
}
// Arrow keys toggle
@ -77,6 +79,13 @@ class SettingsPage {
this.app.player.saveSettings();
});
groupLiveChannelsToggle.addEventListener('change', () => {
const mode = groupLiveChannelsToggle.checked ? 'grouped' : 'flat';
this.app.player.settings.liveChannelListMode = mode;
this.app.channelList.setListMode(mode);
this.app.player.saveSettings();
});
// EPG refresh interval
const epgRefreshSelect = document.getElementById('epg-refresh-interval');
if (epgRefreshSelect && this.app.player?.settings) {
@ -571,6 +580,7 @@ class SettingsPage {
const volumeValueDisplay = document.getElementById('volume-value');
const rememberVolumeToggle = document.getElementById('setting-remember-volume');
const autoPlayNextToggle = document.getElementById('setting-autoplay-next');
const groupLiveChannelsToggle = document.getElementById('setting-group-live-channels');
const forceProxyToggle = document.getElementById('setting-force-proxy');
const forceTranscodeToggle = document.getElementById('setting-force-transcode');
const forceRemuxToggle = document.getElementById('setting-force-remux');
@ -584,6 +594,7 @@ class SettingsPage {
if (volumeValueDisplay) volumeValueDisplay.textContent = s.defaultVolume + '%';
if (rememberVolumeToggle) rememberVolumeToggle.checked = s.rememberVolume;
if (autoPlayNextToggle) autoPlayNextToggle.checked = s.autoPlayNextEpisode;
if (groupLiveChannelsToggle) groupLiveChannelsToggle.checked = s.liveChannelListMode !== 'flat';
if (forceProxyToggle) forceProxyToggle.checked = s.forceProxy || false;
if (forceTranscodeToggle) forceTranscodeToggle.checked = s.forceTranscode || false;
if (forceRemuxToggle) forceRemuxToggle.checked = s.forceRemux || false;

15
public/js/services/channelVariantGrouping.js
View File

@ -152,11 +152,24 @@
}).filter(channel => showHidden || !channel.isHidden);
}
function orderFlatChannels(channels) {
return channels.map((channel, index) => ({ channel, index })).sort((a, b) => {
const favoriteDifference = Number(b.channel.isFavorite) - Number(a.channel.isFavorite);
return favoriteDifference || a.index - b.index;
}).map(entry => entry.channel);
}
function shouldUseFavoritesGroup(listMode) {
return listMode === 'grouped';
}
return {
normalizeChannelName,
displayNameForFingerprint,
getVariantKey,
getQuality,
groupChannels
groupChannels,
orderFlatChannels,
shouldUseFavoritesGroup
};
});