Trevor Mears
913 lines
33 KiB
JavaScript
913 lines
33 KiB
JavaScript
/**
|
|
* EPG Guide Component
|
|
* Cable TV-style program guide grid
|
|
*/
|
|
|
|
class EpgGuide {
|
|
constructor() {
|
|
this.container = document.getElementById('epg-grid');
|
|
this.dateDisplay = document.getElementById('guide-date');
|
|
this.prevBtn = document.getElementById('guide-prev');
|
|
this.nextBtn = document.getElementById('guide-next');
|
|
this.nextBtn = document.getElementById('guide-next');
|
|
this.groupSelect = document.getElementById('epg-group-select');
|
|
this.searchInput = document.getElementById('epg-search');
|
|
|
|
this.channels = [];
|
|
this.programmes = [];
|
|
this.currentDate = new Date();
|
|
this.timeOffset = 0; // Hours offset from now
|
|
this.pixelsPerMinute = 6.67; // Width scaling (30min = 200px)
|
|
this.favorites = new Set(); // Set<"sourceId:channelId">
|
|
this.selectedGroup = 'Favorites'; // Default to Favorites
|
|
|
|
// Virtual scrolling properties
|
|
this.filteredChannels = [];
|
|
this.rowHeight = 60; // Height of each channel row in pixels
|
|
this.bufferRows = 5; // Extra rows to render above/below viewport
|
|
this.startTime = null;
|
|
this.endTime = null;
|
|
this.epgContainer = null;
|
|
this.epgSpacer = null;
|
|
this.scrollContainer = null;
|
|
this.visibleRows = new Map(); // Map<index, rowElement>
|
|
this._scrollHandler = null;
|
|
this._lastVisibleStart = -1;
|
|
this._lastVisibleEnd = -1;
|
|
|
|
this.init();
|
|
}
|
|
|
|
/**
|
|
* Get proxied image URL to avoid mixed content errors on HTTPS
|
|
* Only proxies HTTP URLs when on HTTPS page
|
|
*/
|
|
getProxiedImageUrl(url) {
|
|
if (!url || url.length === 0) return '/img/placeholder.png';
|
|
// Only proxy if we're on HTTPS and the image is HTTP
|
|
if (window.location.protocol === 'https:' && url.startsWith('http://')) {
|
|
return `/api/proxy/image?url=${encodeURIComponent(url)}`;
|
|
}
|
|
return url;
|
|
}
|
|
|
|
init() {
|
|
this.prevBtn.addEventListener('click', () => this.navigate(-2));
|
|
this.nextBtn.addEventListener('click', () => this.navigate(2));
|
|
|
|
// Group filter change
|
|
this.groupSelect?.addEventListener('change', () => {
|
|
this.selectedGroup = this.groupSelect.value;
|
|
this.render();
|
|
});
|
|
|
|
// Search input
|
|
if (this.searchInput) {
|
|
this.searchInput.addEventListener('input', this.debounce(() => {
|
|
this.render();
|
|
}, 300));
|
|
}
|
|
|
|
// Update current time indicator every minute
|
|
setInterval(() => this.updateNowIndicator(), 60000);
|
|
|
|
this.initResizer();
|
|
}
|
|
|
|
/**
|
|
* Initialize sidebar resizer
|
|
*/
|
|
initResizer() {
|
|
let isResizing = false;
|
|
let startX, startWidth;
|
|
|
|
document.addEventListener('mousedown', (e) => {
|
|
if (e.target.classList.contains('resize-handle')) {
|
|
isResizing = true;
|
|
startX = e.clientX;
|
|
const sidebar = document.querySelector('.epg-channel-info');
|
|
startWidth = sidebar.getBoundingClientRect().width;
|
|
e.target.classList.add('active');
|
|
document.body.style.cursor = 'col-resize';
|
|
e.preventDefault(); // Prevent text selection
|
|
}
|
|
});
|
|
|
|
document.addEventListener('mousemove', (e) => {
|
|
if (!isResizing) return;
|
|
|
|
const diff = e.clientX - startX;
|
|
const newWidth = Math.max(150, Math.min(500, startWidth + diff)); // Min 150px, Max 500px
|
|
|
|
document.documentElement.style.setProperty('--epg-sidebar-width', `${newWidth}px`);
|
|
this.updateNowIndicator(); // Update line position
|
|
});
|
|
|
|
document.addEventListener('mouseup', () => {
|
|
if (isResizing) {
|
|
isResizing = false;
|
|
document.querySelectorAll('.resize-handle').forEach(h => h.classList.remove('active'));
|
|
document.body.style.cursor = '';
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Navigate time
|
|
*/
|
|
navigate(hours) {
|
|
this.timeOffset += hours;
|
|
this.render();
|
|
}
|
|
|
|
/**
|
|
* Start background EPG display refresh timer
|
|
* This only refreshes the UI from cached server data.
|
|
* The actual sync runs on the server independently.
|
|
*/
|
|
startBackgroundRefresh() {
|
|
// Clear any existing timer
|
|
this.stopBackgroundRefresh();
|
|
|
|
// Refresh display from cache every 5 minutes to pick up server-side sync results
|
|
const refreshIntervalMs = 5 * 60 * 1000; // 5 minutes
|
|
|
|
console.log('[EPG] Starting display refresh timer: every 5 minutes');
|
|
|
|
this._backgroundRefreshTimer = setInterval(async () => {
|
|
console.log('[EPG] Refreshing EPG display from cache');
|
|
try {
|
|
await this.fetchEpgData(false); // Fetch cached data (no force refresh)
|
|
|
|
// Update channel list program info if visible
|
|
if (window.app?.channelList) {
|
|
window.app.channelList.clearProgramInfoCache();
|
|
window.app.channelList.updateVisibleEpgInfo?.();
|
|
}
|
|
} catch (err) {
|
|
console.error('[EPG] Display refresh failed:', err);
|
|
}
|
|
}, refreshIntervalMs);
|
|
}
|
|
|
|
/**
|
|
* Stop background EPG refresh timer
|
|
*/
|
|
stopBackgroundRefresh() {
|
|
if (this._backgroundRefreshTimer) {
|
|
clearInterval(this._backgroundRefreshTimer);
|
|
this._backgroundRefreshTimer = null;
|
|
console.log('[EPG] Background refresh timer stopped');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get last refresh time for display
|
|
*/
|
|
getLastRefreshTime() {
|
|
return this.lastRefreshTime || null;
|
|
}
|
|
|
|
/**
|
|
* Load EPG data (server-side caching)
|
|
*/
|
|
async loadEpg(forceRefresh = false) {
|
|
try {
|
|
this.container.innerHTML = '<div class="loading"></div>';
|
|
await this.fetchEpgData(forceRefresh);
|
|
this.lastRefreshTime = new Date();
|
|
this.render();
|
|
|
|
// Start background refresh timer after initial load
|
|
// This ensures EPG data stays fresh while the app is open
|
|
this.startBackgroundRefresh();
|
|
} catch (err) {
|
|
console.error('Error loading EPG:', err);
|
|
this.container.innerHTML = `
|
|
<div class="empty-state">
|
|
<p>Error loading EPG</p>
|
|
<p class="hint">${err.message}</p>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Fetch EPG data from sources
|
|
*/
|
|
async fetchEpgData(forceRefresh = false) {
|
|
// Get ALL sources and filter for EPG-capable types
|
|
const allSources = await API.sources.getAll();
|
|
const sources = allSources.filter(s => (s.type === 'epg' || s.type === 'xtream') && s.enabled);
|
|
|
|
if (sources.length === 0) {
|
|
throw new Error('No EPG sources or Xtream accounts configured');
|
|
}
|
|
|
|
// Build query params for server-side caching
|
|
// Sync interval is controlled by server, we just hint at max cache age
|
|
const maxAge = 24; // hours - server controls actual refresh
|
|
const queryParams = forceRefresh ? '?refresh=1' : `?maxAge=${maxAge}`;
|
|
|
|
// Load EPG from ALL sources in parallel
|
|
const fetchPromises = sources.map(async (source) => {
|
|
try {
|
|
const response = await fetch(`/api/proxy/epg/${source.id}${queryParams}`);
|
|
if (!response.ok) throw new Error(`Status ${response.status}`);
|
|
return await response.json();
|
|
} catch (e) {
|
|
console.warn(`Failed to load EPG for source ${source.name}:`, e);
|
|
return null;
|
|
}
|
|
});
|
|
|
|
const results = await Promise.all(fetchPromises);
|
|
|
|
// Merge results
|
|
this.channels = [];
|
|
this.programmes = [];
|
|
|
|
let hasData = false;
|
|
results.forEach(data => {
|
|
if (data) {
|
|
if (data.channels && data.channels.length > 0) {
|
|
this.channels = this.channels.concat(data.channels);
|
|
}
|
|
if (data.programmes && data.programmes.length > 0) {
|
|
this.programmes = this.programmes.concat(data.programmes);
|
|
}
|
|
if (data.channels || data.programmes) {
|
|
hasData = true;
|
|
}
|
|
}
|
|
});
|
|
|
|
if (!hasData) {
|
|
throw new Error('Failed to load EPG data from any source');
|
|
}
|
|
|
|
// Build secondary indexes for faster lookup
|
|
this.channelMap = new Map();
|
|
// Index by ID
|
|
this.channels.forEach(ch => {
|
|
this.channelMap.set(ch.id, ch);
|
|
// Also index by name (normalized) for fallback matching
|
|
if (ch.name) {
|
|
this.channelMap.set(ch.name.toLowerCase(), ch);
|
|
}
|
|
});
|
|
|
|
// Load favorites
|
|
const favs = await API.favorites.getAll();
|
|
this.favorites = new Set(favs.map(f => `${f.source_id}:${f.item_id}`));
|
|
}
|
|
|
|
/**
|
|
* Get current program for a channel
|
|
* @param {string} tvgId - The EPG channel ID (tvg-id)
|
|
* @param {string} channelName - The channel name (for fallback)
|
|
* @returns {object|null} Program object with title, start, stop
|
|
*/
|
|
getCurrentProgram(tvgId, channelName) {
|
|
if (!this.programmes || this.programmes.length === 0) return null;
|
|
|
|
// Find EPG channel using fast map lookup
|
|
let epgChannel = null;
|
|
if (tvgId && this.channelMap && this.channelMap.has(tvgId)) {
|
|
epgChannel = this.channelMap.get(tvgId);
|
|
} else if (channelName && this.channelMap) {
|
|
epgChannel = this.channelMap.get(channelName.toLowerCase());
|
|
} else {
|
|
// Fallback to slow search if map fails or not built yet
|
|
epgChannel = this.channels.find(epg =>
|
|
(tvgId && epg.id === tvgId) || epg.name === channelName
|
|
);
|
|
}
|
|
|
|
if (!epgChannel) return null;
|
|
|
|
const now = new Date();
|
|
const nowTime = now.getTime();
|
|
|
|
// Filter programs for this channel
|
|
const current = this.programmes.find(p => {
|
|
if (p.channelId !== epgChannel.id) return false;
|
|
const start = new Date(p.start).getTime();
|
|
const stop = new Date(p.stop).getTime();
|
|
return nowTime >= start && nowTime < stop;
|
|
});
|
|
|
|
return current ? {
|
|
title: current.title,
|
|
start: current.start,
|
|
stop: current.stop,
|
|
description: current.description
|
|
} : null;
|
|
}
|
|
|
|
/**
|
|
* Update filtered channels based on search or group
|
|
*/
|
|
updateFilteredChannels() {
|
|
const searchTerm = this.searchInput ? this.searchInput.value.toLowerCase().trim() : '';
|
|
|
|
// SEARCH MODE: Filter all channels by name
|
|
if (searchTerm) {
|
|
this.filteredChannels = this.allMatchedChannels.filter(ch => {
|
|
const name = (ch.sourceChannel?.name || '').toLowerCase();
|
|
return name.includes(searchTerm);
|
|
});
|
|
return;
|
|
}
|
|
|
|
// GROUP MODE (Default)
|
|
if (this.selectedGroup === 'Favorites') {
|
|
this.filteredChannels = this.allMatchedChannels.filter(m =>
|
|
this.favorites.has(`${m.sourceChannel.sourceId}:${m.sourceChannel.id}`)
|
|
);
|
|
return;
|
|
}
|
|
|
|
if (!this.selectedGroup || this.selectedGroup === 'All') {
|
|
this.filteredChannels = [...this.allMatchedChannels];
|
|
} else {
|
|
this.filteredChannels = this.allMatchedChannels.filter(m =>
|
|
(m.sourceChannel.groupTitle || 'Uncategorized') === this.selectedGroup
|
|
);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Render the EPG grid
|
|
*/
|
|
render() {
|
|
// Get channel list instance
|
|
const channelList = window.app?.channelList;
|
|
if (!channelList) return;
|
|
|
|
// Get channels and filter out hidden ones (always enforce hidden in EPG)
|
|
// Note: We only check individual channel visibility, not group visibility
|
|
// A group is implicitly visible if it has any visible children
|
|
const playableChannels = (channelList.channels || []).filter(ch => {
|
|
// Use streamId (raw ID) for hidden check since that's what SourceManager stores
|
|
const rawChannelId = ch.streamId || ch.id;
|
|
const isChannelHidden = channelList.isHidden('channel', ch.sourceId, rawChannelId);
|
|
return !isChannelHidden;
|
|
});
|
|
|
|
|
|
|
|
if (playableChannels.length === 0) {
|
|
this.container.innerHTML = `
|
|
<div class="empty-state">
|
|
<p>No visible channels available</p>
|
|
<p class="hint">Check your content settings or add a source</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
// Match ALL playable channels with optional EPG data
|
|
const allChannels = playableChannels.map(sourceChannel => {
|
|
// Try to find matching EPG channel by tvgId or name
|
|
const epgChannel = this.channels.find(epg =>
|
|
epg.id === sourceChannel.tvgId || epg.name === sourceChannel.name
|
|
);
|
|
return { epgChannel, sourceChannel };
|
|
});
|
|
|
|
// Collect unique groups from ALL playable channels
|
|
const groups = [...new Set(allChannels.map(m => m.sourceChannel.groupTitle || 'Uncategorized'))].sort();
|
|
|
|
// Add Favorites at the top if there are any
|
|
const hasFavorites = this.favorites.size > 0;
|
|
|
|
// Only rebuild dropdown if groups have changed (performance optimization)
|
|
const groupsKey = groups.join('|') + (hasFavorites ? '|FAV' : '');
|
|
if (this.groupSelect && this._lastGroupsKey !== groupsKey) {
|
|
this._lastGroupsKey = groupsKey;
|
|
const currentValue = this.selectedGroup;
|
|
let optionsHtml = '';
|
|
|
|
if (hasFavorites) {
|
|
optionsHtml += `<option value="Favorites" ${currentValue === 'Favorites' ? 'selected' : ''}>Favorites</option>`;
|
|
}
|
|
|
|
optionsHtml += `<option value="" ${currentValue === '' ? 'selected' : ''}>All Groups</option>`;
|
|
optionsHtml += groups.map(g => `<option value="${g}" ${g === currentValue ? 'selected' : ''}>${g}</option>`).join('');
|
|
|
|
this.groupSelect.innerHTML = optionsHtml;
|
|
} else if (this.groupSelect) {
|
|
// Just update the selected value without rebuilding
|
|
this.groupSelect.value = this.selectedGroup;
|
|
}
|
|
|
|
// Handle case where we defaulted to Favorites but user has none
|
|
if (this.selectedGroup === 'Favorites' && !hasFavorites) {
|
|
this.selectedGroup = ''; // Fallback to 'All Groups'
|
|
if (this.groupSelect) this.groupSelect.value = '';
|
|
}
|
|
|
|
// Store all channels (matched with EPG data) for filtering
|
|
this.allMatchedChannels = allChannels;
|
|
this.updateFilteredChannels();
|
|
|
|
// Calculate time range and store for batch rendering
|
|
this.startTime = new Date();
|
|
this.startTime.setHours(this.startTime.getHours() + this.timeOffset);
|
|
this.startTime.setMinutes(0, 0, 0);
|
|
|
|
this.endTime = new Date(this.startTime);
|
|
this.endTime.setHours(this.endTime.getHours() + 24); // Show 24 hours of programming
|
|
|
|
// Update date display
|
|
this.updateDateDisplay(this.startTime);
|
|
|
|
// Generate time slots
|
|
const timeSlots = this.generateTimeSlots(this.startTime, this.endTime);
|
|
|
|
// Calculate total height for virtual scrolling
|
|
const totalHeight = this.filteredChannels.length * this.rowHeight;
|
|
|
|
// Build HTML structure with virtual scroll container
|
|
this.container.innerHTML = `
|
|
<div class="epg-container" style="position: relative;">
|
|
<div class="epg-time-header">
|
|
${timeSlots.map(slot => `
|
|
<div class="epg-time-slot" style="width: ${30 * this.pixelsPerMinute}px;">
|
|
${slot.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
<div class="epg-scroll-container" style="overflow: auto; max-height: calc(100vh - 200px);">
|
|
<div class="epg-spacer" style="height: ${totalHeight}px; position: relative;">
|
|
<div class="epg-channel-rows" style="position: absolute; top: 0; left: 0; right: 0;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Get references for virtual scrolling
|
|
this.scrollContainer = this.container.querySelector('.epg-scroll-container');
|
|
this.epgSpacer = this.container.querySelector('.epg-spacer');
|
|
this.epgContainer = this.container.querySelector('.epg-channel-rows');
|
|
|
|
// Clear visible rows cache
|
|
this.visibleRows.clear();
|
|
this._lastVisibleStart = -1;
|
|
this._lastVisibleEnd = -1;
|
|
|
|
// Remove old scroll handler if exists
|
|
if (this._scrollHandler) {
|
|
this.scrollContainer?.removeEventListener('scroll', this._scrollHandler);
|
|
}
|
|
if (this._hScrollHandler) {
|
|
this.scrollContainer?.removeEventListener('scroll', this._hScrollHandler);
|
|
}
|
|
|
|
// Get reference to time header for horizontal scroll sync
|
|
this.timeHeader = this.container.querySelector('.epg-time-header');
|
|
|
|
// Set up scroll handler for virtual scrolling (debounced for performance)
|
|
this._scrollHandler = this.debounce(() => this.updateVisibleRows(), 16); // ~60fps
|
|
this.scrollContainer.addEventListener('scroll', this._scrollHandler);
|
|
|
|
// Set up horizontal scroll sync (instant, not debounced)
|
|
this._hScrollHandler = () => {
|
|
if (this.timeHeader && this.scrollContainer) {
|
|
this.timeHeader.style.transform = `translateX(-${this.scrollContainer.scrollLeft}px)`;
|
|
}
|
|
};
|
|
this.scrollContainer.addEventListener('scroll', this._hScrollHandler);
|
|
|
|
// Initial render of visible rows
|
|
this.updateVisibleRows();
|
|
|
|
// Add now indicator
|
|
this.updateNowIndicator();
|
|
}
|
|
|
|
/**
|
|
* Update visible rows based on scroll position (Virtual Scrolling)
|
|
*/
|
|
updateVisibleRows() {
|
|
if (!this.scrollContainer || !this.epgContainer) return;
|
|
|
|
const scrollTop = this.scrollContainer.scrollTop;
|
|
const viewportHeight = this.scrollContainer.clientHeight;
|
|
|
|
// Calculate visible range
|
|
const startIndex = Math.max(0, Math.floor(scrollTop / this.rowHeight) - this.bufferRows);
|
|
const endIndex = Math.min(
|
|
this.filteredChannels.length - 1,
|
|
Math.ceil((scrollTop + viewportHeight) / this.rowHeight) + this.bufferRows
|
|
);
|
|
|
|
// Skip if nothing changed
|
|
if (startIndex === this._lastVisibleStart && endIndex === this._lastVisibleEnd) {
|
|
return;
|
|
}
|
|
|
|
this._lastVisibleStart = startIndex;
|
|
this._lastVisibleEnd = endIndex;
|
|
|
|
// Determine which rows to add and remove
|
|
const newVisibleSet = new Set();
|
|
for (let i = startIndex; i <= endIndex; i++) {
|
|
newVisibleSet.add(i);
|
|
}
|
|
|
|
// Remove rows that are no longer visible
|
|
for (const [index, row] of this.visibleRows) {
|
|
if (!newVisibleSet.has(index)) {
|
|
row.remove();
|
|
this.visibleRows.delete(index);
|
|
}
|
|
}
|
|
|
|
// Add new visible rows
|
|
for (let i = startIndex; i <= endIndex; i++) {
|
|
if (!this.visibleRows.has(i) && i < this.filteredChannels.length) {
|
|
const row = this.createChannelRow(i);
|
|
this.visibleRows.set(i, row);
|
|
this.epgContainer.appendChild(row);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Create a channel row element for virtual scrolling
|
|
*/
|
|
createChannelRow(index) {
|
|
const { epgChannel, sourceChannel } = this.filteredChannels[index];
|
|
const isFavorite = this.favorites.has(`${sourceChannel.sourceId}:${sourceChannel.id}`);
|
|
|
|
// Get programs if EPG data exists
|
|
let channelProgrammes = [];
|
|
if (epgChannel) {
|
|
channelProgrammes = this.programmes
|
|
.filter(p => p.channelId === epgChannel.id)
|
|
.filter(p => {
|
|
const start = new Date(p.start);
|
|
const stop = new Date(p.stop);
|
|
return start < this.endTime && stop > this.startTime;
|
|
})
|
|
.sort((a, b) => new Date(a.start) - new Date(b.start));
|
|
}
|
|
|
|
// Fallback values if EPG channel is missing
|
|
const logo = this.getProxiedImageUrl(sourceChannel.tvgLogo || (epgChannel && epgChannel.icon));
|
|
const name = sourceChannel.name || (epgChannel && epgChannel.name);
|
|
|
|
const row = document.createElement('div');
|
|
row.className = 'epg-channel-row';
|
|
row.dataset.channelId = sourceChannel.id;
|
|
row.dataset.sourceId = sourceChannel.sourceId;
|
|
row.dataset.index = index;
|
|
// Position absolutely for virtual scrolling
|
|
row.style.position = 'absolute';
|
|
row.style.top = `${index * this.rowHeight}px`;
|
|
row.style.left = '0';
|
|
row.style.right = '0';
|
|
row.style.height = `${this.rowHeight}px`;
|
|
|
|
row.innerHTML = `
|
|
<div class="epg-channel-info">
|
|
<button class="favorite-btn ${isFavorite ? 'active' : ''}" title="${isFavorite ? 'Remove from Favorites' : 'Add to Favorites'}">
|
|
${isFavorite ? Icons.favorite : Icons.favoriteOutline}
|
|
</button>
|
|
<img class="epg-channel-logo" src="${logo}"
|
|
alt="" onerror="this.onerror=null;this.src='/img/placeholder.png'">
|
|
<span class="epg-channel-name">${name}</span>
|
|
<div class="resize-handle"></div>
|
|
</div>
|
|
<div class="epg-programs">
|
|
${this.renderProgrammes(channelProgrammes, this.startTime, this.endTime)}
|
|
</div>
|
|
`;
|
|
|
|
this.attachRowListeners(row);
|
|
return row;
|
|
}
|
|
|
|
/**
|
|
* Attach event listeners to an EPG row
|
|
*/
|
|
attachRowListeners(row) {
|
|
// Program click handlers
|
|
row.querySelectorAll('.epg-program').forEach(prog => {
|
|
prog.addEventListener('click', () => this.showProgramDetails(prog.dataset));
|
|
});
|
|
|
|
const info = row.querySelector('.epg-channel-info');
|
|
if (info) {
|
|
// Name/Logo click plays channel
|
|
info.querySelector('.epg-channel-name')?.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
this.playChannel(info.querySelector('.epg-channel-name').textContent);
|
|
});
|
|
info.querySelector('.epg-channel-logo')?.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
this.playChannel(info.querySelector('.epg-channel-name').textContent);
|
|
});
|
|
|
|
// Favorite click
|
|
const favBtn = info.querySelector('.favorite-btn');
|
|
if (favBtn) {
|
|
favBtn.addEventListener('click', async (e) => {
|
|
e.stopPropagation();
|
|
const sourceId = parseInt(row.dataset.sourceId);
|
|
const channelId = row.dataset.channelId;
|
|
await this.toggleFavorite(sourceId, channelId);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Toggle favorite
|
|
*/
|
|
async toggleFavorite(sourceId, channelId) {
|
|
const key = `${sourceId}:${channelId}`;
|
|
const wasFavorite = this.favorites.has(key);
|
|
const isNowFavorite = !wasFavorite;
|
|
|
|
// 1. Optimistic Update (EPG)
|
|
if (isNowFavorite) {
|
|
this.favorites.add(key);
|
|
} else {
|
|
this.favorites.delete(key);
|
|
}
|
|
|
|
// Update DOM (All matching buttons in EPG)
|
|
const rows = this.container.querySelectorAll(`.epg-channel-row[data-channel-id="${channelId}"][data-source-id="${sourceId}"]`);
|
|
rows.forEach(row => {
|
|
const btn = row.querySelector('.favorite-btn');
|
|
if (btn) {
|
|
if (isNowFavorite) {
|
|
btn.classList.add('active');
|
|
btn.innerHTML = Icons.favorite;
|
|
btn.title = 'Remove from Favorites';
|
|
} else {
|
|
btn.classList.remove('active');
|
|
btn.innerHTML = Icons.favoriteOutline;
|
|
btn.title = 'Add to Favorites';
|
|
}
|
|
}
|
|
});
|
|
|
|
// 2. Sync Channel List State (Optimistic)
|
|
if (window.app?.channelList) {
|
|
window.app.channelList.syncFavorite(sourceId, channelId, isNowFavorite);
|
|
}
|
|
|
|
try {
|
|
// 3. API Call
|
|
if (wasFavorite) {
|
|
await API.favorites.remove(sourceId, channelId, 'channel');
|
|
} else {
|
|
await API.favorites.add(sourceId, channelId, 'channel');
|
|
}
|
|
|
|
// 4. Re-render if viewing Favorites group (so new favorites appear immediately)
|
|
if (this.selectedGroup === 'Favorites') {
|
|
this.render();
|
|
}
|
|
} catch (err) {
|
|
console.error('Error toggling favorite in EPG:', err);
|
|
|
|
// Revert EPG
|
|
if (wasFavorite) {
|
|
this.favorites.add(key);
|
|
} else {
|
|
this.favorites.delete(key);
|
|
}
|
|
|
|
rows.forEach(row => {
|
|
const btn = row.querySelector('.favorite-btn');
|
|
if (btn) {
|
|
if (wasFavorite) {
|
|
btn.classList.add('active');
|
|
btn.innerHTML = Icons.favorite;
|
|
btn.title = 'Remove from Favorites';
|
|
} else {
|
|
btn.classList.remove('active');
|
|
btn.innerHTML = Icons.favoriteOutline;
|
|
btn.title = 'Add to Favorites';
|
|
}
|
|
}
|
|
});
|
|
|
|
// Revert Channel List
|
|
if (window.app?.channelList) {
|
|
window.app.channelList.syncFavorite(sourceId, channelId, wasFavorite);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Sync favorite status from external source (e.g. ChannelList) without API call
|
|
*/
|
|
syncFavorite(sourceId, channelId, isFavorite) {
|
|
// Ensure consistent string format for key
|
|
const key = `${String(sourceId)}:${String(channelId)}`;
|
|
const currentlyFav = this.favorites.has(key);
|
|
|
|
if (currentlyFav === isFavorite) return; // No change needed
|
|
|
|
// Update State
|
|
if (isFavorite) {
|
|
this.favorites.add(key);
|
|
} else {
|
|
this.favorites.delete(key);
|
|
}
|
|
|
|
// Update DOM (All instances in EPG)
|
|
const rows = this.container.querySelectorAll(`.epg-channel-row[data-channel-id="${channelId}"][data-source-id="${sourceId}"]`);
|
|
rows.forEach(row => {
|
|
const btn = row.querySelector('.favorite-btn');
|
|
if (btn) {
|
|
if (isFavorite) {
|
|
btn.classList.add('active');
|
|
btn.innerHTML = Icons.favorite;
|
|
btn.title = 'Remove from Favorites';
|
|
} else {
|
|
btn.classList.remove('active');
|
|
btn.innerHTML = Icons.favoriteOutline;
|
|
btn.title = 'Add to Favorites';
|
|
}
|
|
}
|
|
});
|
|
|
|
// Note: We don't call render() here - the favorites Set is updated
|
|
// and will be used when the user navigates to Guide or switches groups
|
|
}
|
|
|
|
/**
|
|
* Generate time slots
|
|
*/
|
|
generateTimeSlots(start, end) {
|
|
const slots = [];
|
|
const current = new Date(start);
|
|
|
|
while (current < end) {
|
|
slots.push(new Date(current));
|
|
current.setMinutes(current.getMinutes() + 30);
|
|
}
|
|
|
|
return slots;
|
|
}
|
|
|
|
/**
|
|
* Render programmes for a channel
|
|
*/
|
|
renderProgrammes(programmes, startTime, endTime) {
|
|
if (programmes.length === 0) {
|
|
const width = (endTime - startTime) / 60000 * this.pixelsPerMinute;
|
|
return `<div class="epg-program" style="width: ${width}px;"><span class="epg-program-title">No data</span></div>`;
|
|
}
|
|
|
|
const now = new Date();
|
|
let html = '';
|
|
let currentPos = startTime.getTime();
|
|
|
|
for (const prog of programmes) {
|
|
const progStart = Math.max(new Date(prog.start).getTime(), startTime.getTime());
|
|
const progEnd = Math.min(new Date(prog.stop).getTime(), endTime.getTime());
|
|
|
|
// Fill gap if needed
|
|
if (progStart > currentPos) {
|
|
const gapWidth = (progStart - currentPos) / 60000 * this.pixelsPerMinute;
|
|
html += `<div class="epg-program" style="width: ${gapWidth}px;"></div>`;
|
|
}
|
|
|
|
const width = (progEnd - progStart) / 60000 * this.pixelsPerMinute;
|
|
const isCurrent = new Date(prog.start) <= now && new Date(prog.stop) > now;
|
|
|
|
html += `
|
|
<div class="epg-program ${isCurrent ? 'current' : ''}"
|
|
style="width: ${width}px;"
|
|
data-title="${prog.title || ''}"
|
|
data-description="${prog.description || ''}"
|
|
data-start="${prog.start}"
|
|
data-stop="${prog.stop}">
|
|
<div class="epg-program-title">${prog.title || 'Unknown'}</div>
|
|
<div class="epg-program-time">
|
|
${new Date(prog.start).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
currentPos = progEnd;
|
|
}
|
|
|
|
return html;
|
|
}
|
|
|
|
/**
|
|
* Update date display
|
|
*/
|
|
updateDateDisplay(date) {
|
|
const today = new Date();
|
|
const tomorrow = new Date(today);
|
|
tomorrow.setDate(tomorrow.getDate() + 1);
|
|
|
|
if (date.toDateString() === today.toDateString()) {
|
|
this.dateDisplay.textContent = 'Today';
|
|
} else if (date.toDateString() === tomorrow.toDateString()) {
|
|
this.dateDisplay.textContent = 'Tomorrow';
|
|
} else {
|
|
this.dateDisplay.textContent = date.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' });
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Debounce utility
|
|
*/
|
|
debounce(func, wait) {
|
|
let timeout;
|
|
return function executedFunction(...args) {
|
|
const later = () => {
|
|
clearTimeout(timeout);
|
|
func(...args);
|
|
};
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(later, wait);
|
|
};
|
|
}
|
|
|
|
updateNowIndicator() {
|
|
const now = new Date();
|
|
const container = this.container.querySelector('.epg-container');
|
|
if (!container) return;
|
|
|
|
// Remove existing indicator
|
|
const existing = container.querySelector('.epg-now-line');
|
|
if (existing) existing.remove();
|
|
|
|
// Calculate position
|
|
const startTime = new Date();
|
|
startTime.setHours(startTime.getHours() + this.timeOffset);
|
|
startTime.setMinutes(0, 0, 0);
|
|
|
|
const minutesFromStart = (now - startTime) / 60000;
|
|
if (minutesFromStart < 0 || minutesFromStart > 240) return; // Not in visible range
|
|
|
|
// Get current sidebar width
|
|
const sidebarWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--epg-sidebar-width')) || 150;
|
|
const leftPos = sidebarWidth + (minutesFromStart * this.pixelsPerMinute);
|
|
|
|
const indicator = document.createElement('div');
|
|
indicator.className = 'epg-now-line';
|
|
indicator.style.left = `${leftPos}px`;
|
|
container.appendChild(indicator);
|
|
}
|
|
|
|
/**
|
|
* Show program details modal
|
|
*/
|
|
showProgramDetails(data) {
|
|
const modal = document.getElementById('modal');
|
|
const title = document.getElementById('modal-title');
|
|
const body = document.getElementById('modal-body');
|
|
const footer = document.getElementById('modal-footer');
|
|
|
|
title.textContent = data.title || 'Program Details';
|
|
|
|
const start = new Date(data.start);
|
|
const stop = new Date(data.stop);
|
|
|
|
body.innerHTML = `
|
|
<p><strong>Time:</strong> ${start.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} - ${stop.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</p>
|
|
<p><strong>Description:</strong></p>
|
|
<p>${data.description || 'No description available'}</p>
|
|
`;
|
|
|
|
footer.innerHTML = '<button class="btn btn-secondary" id="modal-close">Close</button>';
|
|
|
|
modal.classList.add('active');
|
|
document.getElementById('modal-close').onclick = () => modal.classList.remove('active');
|
|
modal.querySelector('.modal-close').onclick = () => modal.classList.remove('active');
|
|
}
|
|
|
|
/**
|
|
* Play channel from EPG
|
|
*/
|
|
async playChannel(channelName) {
|
|
// Find channel in channel list and play
|
|
if (window.app?.channelList) {
|
|
const channel = window.app.channelList.channels.find(c =>
|
|
c.name === channelName || c.tvgName === channelName
|
|
);
|
|
if (channel) {
|
|
await window.app.channelList.selectChannel({ channelId: channel.id });
|
|
// Switch to home page
|
|
document.querySelector('[data-page="home"]').click();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Export
|
|
window.EpgGuide = EpgGuide;
|