This commit is contained in:
root
@@ -0,0 +1,931 @@
|
||||
/**
|
||||
* 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 - header is INSIDE scroll container for natural sync
|
||||
this.container.innerHTML = `
|
||||
<div class="epg-container" style="position: relative;">
|
||||
<div class="epg-scroll-container" style="overflow: auto; max-height: calc(100vh - 200px);">
|
||||
<div class="epg-time-header">
|
||||
<div class="epg-header-corner"></div>
|
||||
<div class="epg-time-slots">
|
||||
${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>
|
||||
<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 slots container for horizontal scroll sync
|
||||
this.timeSlotsContainer = this.container.querySelector('.epg-time-slots');
|
||||
|
||||
// Set up scroll handler for virtual scrolling (debounced for performance)
|
||||
this._scrollHandler = this.debounce(() => this.updateVisibleRows(), 16); // ~60fps
|
||||
this.scrollContainer.addEventListener('scroll', this._scrollHandler);
|
||||
|
||||
// No need for horizontal scroll sync anymore - header is inside scroll container
|
||||
|
||||
// Initial render of visible rows
|
||||
this.updateVisibleRows();
|
||||
|
||||
// Sync header corner width with actual sidebar width (handles CSS overrides)
|
||||
this.syncHeaderCornerWidth();
|
||||
|
||||
// Add now indicator and set up periodic refresh
|
||||
this.updateNowIndicator();
|
||||
// Clear any existing interval
|
||||
if (this._nowIndicatorInterval) {
|
||||
clearInterval(this._nowIndicatorInterval);
|
||||
}
|
||||
// Update indicator every 60 seconds
|
||||
this._nowIndicatorInterval = setInterval(() => this.updateNowIndicator(), 60000);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sync header corner width with actual sidebar width
|
||||
* This handles cases where CSS variables are overridden on mobile
|
||||
*/
|
||||
syncHeaderCornerWidth() {
|
||||
const sidebar = this.container.querySelector('.epg-channel-info');
|
||||
const headerCorner = this.container.querySelector('.epg-header-corner');
|
||||
if (sidebar && headerCorner) {
|
||||
const actualWidth = sidebar.offsetWidth;
|
||||
headerCorner.style.width = `${actualWidth}px`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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();
|
||||
// Place indicator inside the spacer so it scrolls with content
|
||||
const spacer = this.container.querySelector('.epg-spacer');
|
||||
if (!spacer) return;
|
||||
|
||||
// Remove existing indicator
|
||||
const existing = spacer.querySelector('.epg-now-line');
|
||||
if (existing) existing.remove();
|
||||
|
||||
// Calculate position relative to EPG start time
|
||||
const minutesFromStart = (now - this.startTime) / 60000;
|
||||
if (minutesFromStart < 0 || minutesFromStart > 1440) return; // Not in visible 24h range
|
||||
|
||||
// Get sidebar width to offset the indicator
|
||||
const sidebar = this.container.querySelector('.epg-channel-info');
|
||||
const sidebarWidth = sidebar ? sidebar.offsetWidth : 150;
|
||||
|
||||
// Position is sidebar + time offset
|
||||
const leftPos = sidebarWidth + (minutesFromStart * this.pixelsPerMinute);
|
||||
|
||||
const indicator = document.createElement('div');
|
||||
indicator.className = 'epg-now-line';
|
||||
indicator.style.left = `${leftPos}px`;
|
||||
spacer.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 live TV page
|
||||
document.querySelector('[data-page="live"]').click();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Export
|
||||
window.EpgGuide = EpgGuide;
|
||||
Reference in New Issue
Block a user