Initial commit

2025-12-27 14:16:40 -08:00
commit 4f9ec55874
30 changed files with 9148 additions and 0 deletions
@@ -0,0 +1,756 @@
+/**
+ * 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 = 3.5; // Width scaling
+        this.favorites = new Set(); // Set<"sourceId:channelId">
+        this.selectedGroup = 'Favorites'; // Default to Favorites
+
+        // Lazy loading properties
+        this.filteredChannels = [];
+        this.currentBatch = 0;
+        this.batchSize = 20; // Channels per batch
+        this.startTime = null;
+        this.endTime = null;
+        this.epgContainer = null;
+        this.epgLoader = null;
+        this.epgObserver = null;
+
+        this.init();
+    }
+
+    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();
+    }
+
+    /**
+     * Get EPG refresh interval from settings (in hours)
+     */
+    getRefreshInterval() {
+        const saved = localStorage.getItem('nodecast_tv_epg_refresh_interval');
+        return saved ? parseInt(saved) : 24; // Default 24 hours
+    }
+
+    /**
+     * Load EPG data (server-side caching)
+     */
+    async loadEpg(forceRefresh = false) {
+        try {
+            this.container.innerHTML = '<div class="loading"></div>';
+            await this.fetchEpgData(forceRefresh);
+            this.render();
+        } 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
+        const maxAge = this.getRefreshInterval();
+        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.channel_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,
+            desc: current.desc
+        } : 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)
+        const playableChannels = (channelList.channels || []).filter(ch => {
+            const isChannelHidden = channelList.isHidden('channel', ch.sourceId, ch.id);
+            const isGroupHidden = channelList.isHidden('group', ch.sourceId, ch.groupTitle);
+            return !isChannelHidden && !isGroupHidden;
+        });
+
+
+
+        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);
+
+        // Build initial HTML structure
+        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-channel-rows"></div>
+        <div class="epg-loader" style="height: 50px; display: flex; align-items: center; justify-content: center;">
+          <div class="loading-spinner"></div>
+        </div>
+      </div>
+    `;
+
+        // Get references for batch rendering
+        this.epgContainer = this.container.querySelector('.epg-channel-rows');
+        this.epgLoader = this.container.querySelector('.epg-loader');
+
+        // Reset batch state
+        this.currentBatch = 0;
+
+        // Set up IntersectionObserver for lazy loading
+        if (this.epgObserver) {
+            this.epgObserver.disconnect();
+        }
+        this.epgObserver = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting) {
+                this.renderNextEpgBatch();
+            }
+        }, { rootMargin: '200px' });
+
+        // Render initial batches (render enough to fill viewport)
+        for (let i = 0; i < 3; i++) {
+            this.renderNextEpgBatch();
+        }
+
+        // Start observing loader
+        this.epgObserver.observe(this.epgLoader);
+
+        // Add now indicator
+        this.updateNowIndicator();
+    }
+
+    /**
+     * Render next batch of EPG channel rows
+     */
+    renderNextEpgBatch() {
+        const start = this.currentBatch * this.batchSize;
+        const end = start + this.batchSize;
+        const batch = this.filteredChannels.slice(start, end);
+
+        if (batch.length === 0) {
+            this.epgLoader.style.display = 'none';
+            return;
+        }
+
+        let html = '';
+        for (const { epgChannel, sourceChannel } of batch) {
+            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 = sourceChannel.tvgLogo || (epgChannel && epgChannel.icon) || '/img/placeholder.png';
+            const name = sourceChannel.name || (epgChannel && epgChannel.name);
+
+            html += `
+        <div class="epg-channel-row" 
+             data-channel-id="${sourceChannel.id}" 
+             data-source-id="${sourceChannel.sourceId}">
+          <div class="epg-channel-info">
+            <button class="favorite-btn ${isFavorite ? 'active' : ''}" title="${isFavorite ? 'Remove from Favorites' : 'Add to Favorites'}">
+              ${isFavorite ? '❤️' : '♡'}
+            </button>
+            <img class="epg-channel-logo" src="${logo}" 
+                 alt="" onerror="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>
+        </div>
+      `;
+        }
+
+        // Append to container
+        const tempDiv = document.createElement('div');
+        tempDiv.innerHTML = html;
+        while (tempDiv.firstElementChild) {
+            const row = tempDiv.firstElementChild;
+            this.attachRowListeners(row);
+            this.epgContainer.appendChild(row);
+        }
+
+        this.currentBatch++;
+
+        // Hide loader if no more batches
+        if (end >= this.filteredChannels.length) {
+            this.epgLoader.style.display = 'none';
+        }
+    }
+
+    /**
+     * 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 = '❤️';
+                    btn.title = 'Remove from Favorites';
+                } else {
+                    btn.classList.remove('active');
+                    btn.innerHTML = '♡';
+                    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');
+            }
+        } 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 = '❤️';
+                        btn.title = 'Remove from Favorites';
+                    } else {
+                        btn.classList.remove('active');
+                        btn.innerHTML = '♡';
+                        btn.title = 'Add to Favorites';
+                    }
+                }
+            });
+
+            // Revert Channel List
+            if (window.app?.channelList) {
+                window.app.channelList.syncFavorite(sourceId, channelId, wasFavorite);
+            }
+        }
+    }
+
+    /**
+     * 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;