unified-video-framework 1.4.66 → 1.4.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unified-video-framework",
-  "version": "1.4.66",
+  "version": "1.4.67",
   "description": "Cross-platform video player framework supporting iOS, Android, Web, Smart TVs (Samsung/LG), Roku, and more",
   "main": "packages/core/dist/index.js",
   "types": "packages/core/dist/index.d.ts",

package/packages/web/dist/WebPlayer.d.ts

@@ -39,9 +39,6 @@ export declare class WebPlayer extends BasePlayer {
     private selectedSubtitleKey;
     private _kiTo;
     private paywallController;
-    private epgData;
-    private epgOverlay;
-    private isEPGVisible;
     private _playPromise;
     private _deferredPause;
     private _lastToggleAt;
@@ -147,14 +144,6 @@ export declare class WebPlayer extends BasePlayer {
     hideEPGButton(): void;
     setEPGData(epgData: any): void;
     isEPGButtonVisible(): boolean;
-    private toggleEPG;
-    private showEPGOverlay;
-    private hideEPGOverlay;
-    private createEPGOverlay;
-    private populateEPGContent;
-    private renderChannelList;
-    private renderTimelineData;
-    private renderGenericObjectData;
     private cleanup;
     destroy(): Promise<void>;
 }

package/packages/web/dist/WebPlayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WebPlayer.d.ts","sourceRoot":"","sources":["../src/WebPlayer.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"WebPlayer.d.ts","sourceRoot":"","sources":["../src/WebPlayer.ts"],"names":[],"mappings":"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"}

package/packages/web/dist/WebPlayer.js

@@ -32,9 +32,6 @@ export class WebPlayer extends BasePlayer {
         this.selectedSubtitleKey = 'off';
         this._kiTo = null;
         this.paywallController = null;
-        this.epgData = null;
-        this.epgOverlay = null;
-        this.isEPGVisible = false;
         this._playPromise = null;
         this._deferredPause = false;
         this._lastToggleAt = 0;
@@ -2594,7 +2591,7 @@ export class WebPlayer extends BasePlayer {
         epgBtn?.addEventListener('click', (e) => {
             e.stopPropagation();
             this.debugLog('EPG button clicked');
-            this.toggleEPG();
+            this.emit('epgToggle', {});
         });
         const pipBtn = document.getElementById('uvf-pip-btn');
         pipBtn?.addEventListener('click', () => this.togglePiP());
@@ -2693,19 +2690,10 @@ export class WebPlayer extends BasePlayer {
                     shortcutText = 'Picture-in-Picture';
                     break;
                 case 'g':
-                    if (e.ctrlKey) {
-                        e.preventDefault();
-                        this.debugLog('Ctrl+G pressed - toggling EPG');
-                        this.toggleEPG();
-                        shortcutText = 'Toggle EPG';
-                    }
-                    break;
-                case 'Escape':
-                    if (this.isEPGVisible) {
-                        e.preventDefault();
-                        this.hideEPGOverlay();
-                        shortcutText = 'Close EPG';
-                    }
+                    e.preventDefault();
+                    this.debugLog('G key pressed - toggling EPG');
+                    this.emit('epgToggle', {});
+                    shortcutText = 'Toggle EPG';
                     break;
                 case '0':
                 case '1':
@@ -4078,7 +4066,6 @@ export class WebPlayer extends BasePlayer {
         }
     }
     setEPGData(epgData) {
-        this.epgData = epgData;
         if (epgData && Object.keys(epgData).length > 0) {
             this.showEPGButton();
             this.debugLog('EPG data set, button shown');
@@ -4093,476 +4080,6 @@ export class WebPlayer extends BasePlayer {
         const epgBtn = document.getElementById('uvf-epg-btn');
         return epgBtn ? epgBtn.style.display !== 'none' : false;
     }
-    toggleEPG() {
-        if (this.isEPGVisible) {
-            this.hideEPGOverlay();
-        }
-        else {
-            this.showEPGOverlay();
-        }
-    }
-    showEPGOverlay() {
-        if (!this.epgData) {
-            this.showNotification('No EPG data available');
-            return;
-        }
-        if (!this.epgOverlay) {
-            this.createEPGOverlay();
-        }
-        if (this.epgOverlay) {
-            this.epgOverlay.style.display = 'flex';
-            this.isEPGVisible = true;
-            this.debugLog('EPG overlay shown');
-            this.emit('epgToggle', { visible: true, data: this.epgData });
-        }
-    }
-    hideEPGOverlay() {
-        if (this.epgOverlay) {
-            this.epgOverlay.style.display = 'none';
-            this.isEPGVisible = false;
-            this.debugLog('EPG overlay hidden');
-            this.emit('epgToggle', { visible: false, data: this.epgData });
-        }
-    }
-    createEPGOverlay() {
-        if (!this.playerWrapper)
-            return;
-        this.epgOverlay = document.createElement('div');
-        this.epgOverlay.className = 'uvf-epg-overlay';
-        this.epgOverlay.style.cssText = `
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.95);
-      color: white;
-      z-index: 1000;
-      display: none;
-      flex-direction: column;
-      padding: 20px;
-      box-sizing: border-box;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    `;
-        const header = document.createElement('div');
-        header.style.cssText = `
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 20px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-      padding-bottom: 15px;
-    `;
-        const title = document.createElement('h2');
-        title.textContent = 'Electronic Program Guide';
-        title.style.cssText = `
-      margin: 0;
-      color: #ff6b35;
-      font-size: 24px;
-      font-weight: 600;
-    `;
-        const closeBtn = document.createElement('button');
-        closeBtn.innerHTML = '×';
-        closeBtn.style.cssText = `
-      background: none;
-      border: none;
-      color: white;
-      font-size: 32px;
-      cursor: pointer;
-      padding: 0;
-      width: 40px;
-      height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 50%;
-      transition: background-color 0.2s;
-    `;
-        closeBtn.addEventListener('click', () => this.hideEPGOverlay());
-        closeBtn.addEventListener('mouseenter', () => {
-            closeBtn.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
-        });
-        closeBtn.addEventListener('mouseleave', () => {
-            closeBtn.style.backgroundColor = 'transparent';
-        });
-        header.appendChild(title);
-        header.appendChild(closeBtn);
-        const content = document.createElement('div');
-        content.className = 'uvf-epg-content';
-        content.style.cssText = `
-      flex: 1;
-      overflow-y: auto;
-      padding-right: 10px;
-    `;
-        this.populateEPGContent(content);
-        const footer = document.createElement('div');
-        footer.style.cssText = `
-      margin-top: 20px;
-      padding-top: 15px;
-      border-top: 1px solid rgba(255, 255, 255, 0.2);
-      text-align: center;
-      color: rgba(255, 255, 255, 0.7);
-      font-size: 14px;
-    `;
-        footer.innerHTML = 'Press <strong>Esc</strong> or <strong>Ctrl+G</strong> to close • Click outside to close';
-        this.epgOverlay.appendChild(header);
-        this.epgOverlay.appendChild(content);
-        this.epgOverlay.appendChild(footer);
-        this.playerWrapper.appendChild(this.epgOverlay);
-        this.epgOverlay.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape') {
-                this.hideEPGOverlay();
-            }
-        });
-        this.epgOverlay.addEventListener('click', (e) => {
-            if (e.target === this.epgOverlay) {
-                this.hideEPGOverlay();
-            }
-        });
-        this.debugLog('EPG overlay created');
-    }
-    populateEPGContent(container) {
-        if (!this.epgData)
-            return;
-        container.innerHTML = '';
-        if (Array.isArray(this.epgData)) {
-            this.renderChannelList(container, this.epgData);
-        }
-        else if (this.epgData.channels) {
-            this.renderChannelList(container, this.epgData.channels);
-        }
-        else if (this.epgData.timeline) {
-            this.renderTimelineData(container, this.epgData);
-        }
-        else if (typeof this.epgData === 'object') {
-            this.renderGenericObjectData(container, this.epgData);
-        }
-        else {
-            container.innerHTML = `
-        <div style="font-family: monospace; font-size: 12px; color: rgba(255, 255, 255, 0.8);">
-          <pre>${JSON.stringify(this.epgData, null, 2)}</pre>
-        </div>
-      `;
-        }
-    }
-    renderChannelList(container, channels) {
-        if (!Array.isArray(channels) || channels.length === 0) {
-            container.innerHTML = '<div style="text-align: center; color: rgba(255, 255, 255, 0.7);">No channels available</div>';
-            return;
-        }
-        channels.forEach((channel, index) => {
-            const channelDiv = document.createElement('div');
-            channelDiv.style.cssText = `
-        margin-bottom: 20px;
-        padding: 15px;
-        background: rgba(255, 255, 255, 0.05);
-        border-radius: 8px;
-        border-left: 3px solid #ff6b35;
-      `;
-            const channelHeader = document.createElement('div');
-            channelHeader.style.cssText = `
-        display: flex;
-        align-items: center;
-        margin-bottom: 10px;
-      `;
-            const channelName = document.createElement('h3');
-            channelName.textContent = channel.name || channel.title || `Channel ${index + 1}`;
-            channelName.style.cssText = `
-        margin: 0;
-        color: #ff6b35;
-        font-size: 18px;
-        font-weight: 600;
-      `;
-            const channelNumber = document.createElement('span');
-            if (channel.number || channel.id) {
-                channelNumber.textContent = `Ch ${channel.number || channel.id}`;
-                channelNumber.style.cssText = `
-          margin-left: 10px;
-          padding: 2px 8px;
-          background: rgba(255, 107, 53, 0.2);
-          border-radius: 12px;
-          font-size: 12px;
-          color: rgba(255, 255, 255, 0.8);
-        `;
-            }
-            channelHeader.appendChild(channelName);
-            if (channelNumber.textContent) {
-                channelHeader.appendChild(channelNumber);
-            }
-            const programsList = document.createElement('div');
-            programsList.style.cssText = `
-        margin-left: 10px;
-      `;
-            if (channel.programs && Array.isArray(channel.programs)) {
-                channel.programs.slice(0, 5).forEach((program) => {
-                    const programDiv = document.createElement('div');
-                    programDiv.style.cssText = `
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 5px 0;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-          `;
-                    const programInfo = document.createElement('div');
-                    programInfo.style.flex = '1';
-                    const programTitle = document.createElement('div');
-                    programTitle.textContent = program.title || program.name || 'Untitled Program';
-                    programTitle.style.cssText = `
-            color: white;
-            font-weight: 500;
-            margin-bottom: 2px;
-          `;
-                    const programTime = document.createElement('div');
-                    const startTime = program.startTime ? new Date(program.startTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '';
-                    const endTime = program.endTime ? new Date(program.endTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '';
-                    programTime.textContent = startTime && endTime ? `${startTime} - ${endTime}` : 'Time TBA';
-                    programTime.style.cssText = `
-            color: rgba(255, 255, 255, 0.6);
-            font-size: 12px;
-          `;
-                    programInfo.appendChild(programTitle);
-                    programInfo.appendChild(programTime);
-                    programDiv.appendChild(programInfo);
-                    programsList.appendChild(programDiv);
-                });
-            }
-            else {
-                const noPrograms = document.createElement('div');
-                noPrograms.textContent = 'No programs available';
-                noPrograms.style.cssText = `
-          color: rgba(255, 255, 255, 0.6);
-          font-style: italic;
-          padding: 10px 0;
-        `;
-                programsList.appendChild(noPrograms);
-            }
-            channelDiv.appendChild(channelHeader);
-            channelDiv.appendChild(programsList);
-            container.appendChild(channelDiv);
-        });
-    }
-    renderTimelineData(container, data) {
-        const summaryDiv = document.createElement('div');
-        summaryDiv.style.cssText = `
-      margin-bottom: 20px;
-      padding: 15px;
-      background: rgba(255, 107, 53, 0.1);
-      border-radius: 8px;
-      border-left: 3px solid #ff6b35;
-    `;
-        const summaryTitle = document.createElement('h3');
-        summaryTitle.textContent = 'EPG Data Summary';
-        summaryTitle.style.cssText = `
-      margin: 0 0 10px 0;
-      color: #ff6b35;
-      font-size: 18px;
-      font-weight: 600;
-    `;
-        summaryDiv.appendChild(summaryTitle);
-        const info = document.createElement('div');
-        info.style.cssText = `
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 10px;
-      color: rgba(255, 255, 255, 0.9);
-    `;
-        if (data.timeline) {
-            const timelineInfo = document.createElement('div');
-            timelineInfo.innerHTML = `
-        <strong>Timeline:</strong><br>
-        <span style="color: rgba(255, 255, 255, 0.7); font-size: 14px;">
-          ${Array.isArray(data.timeline) ? `${data.timeline.length} entries` : 'Available'}
-        </span>
-      `;
-            info.appendChild(timelineInfo);
-        }
-        if (data.properties) {
-            const propsInfo = document.createElement('div');
-            const propCount = typeof data.properties === 'object' ? Object.keys(data.properties).length : 0;
-            propsInfo.innerHTML = `
-        <strong>Properties:</strong><br>
-        <span style="color: rgba(255, 255, 255, 0.7); font-size: 14px;">
-          ${propCount} properties
-        </span>
-      `;
-            info.appendChild(propsInfo);
-            if (data.properties.Channel_1) {
-                const channelInfo = document.createElement('div');
-                channelInfo.innerHTML = `
-          <strong>Channel 1:</strong><br>
-          <span style="color: rgba(255, 255, 255, 0.7); font-size: 14px;">
-            ${data.properties.Channel_1}
-          </span>
-        `;
-                info.appendChild(channelInfo);
-            }
-        }
-        summaryDiv.appendChild(info);
-        container.appendChild(summaryDiv);
-        if (data.timeline && Array.isArray(data.timeline)) {
-            const timelineDiv = document.createElement('div');
-            timelineDiv.style.cssText = `
-        margin-bottom: 20px;
-        padding: 15px;
-        background: rgba(255, 255, 255, 0.05);
-        border-radius: 8px;
-        border-left: 3px solid #ff6b35;
-      `;
-            const timelineTitle = document.createElement('h3');
-            timelineTitle.textContent = 'Timeline Events';
-            timelineTitle.style.cssText = `
-        margin: 0 0 15px 0;
-        color: #ff6b35;
-        font-size: 18px;
-        font-weight: 600;
-      `;
-            timelineDiv.appendChild(timelineTitle);
-            data.timeline.slice(0, 10).forEach((entry, index) => {
-                const entryDiv = document.createElement('div');
-                entryDiv.style.cssText = `
-          padding: 8px 0;
-          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-        `;
-                const entryInfo = document.createElement('div');
-                entryInfo.style.flex = '1';
-                const entryTitle = document.createElement('div');
-                entryTitle.textContent = entry.title || entry.name || `Event ${index + 1}`;
-                entryTitle.style.cssText = `
-          color: white;
-          font-weight: 500;
-          margin-bottom: 2px;
-        `;
-                const entryDetails = document.createElement('div');
-                let details = [];
-                if (entry.id)
-                    details.push(`ID: ${entry.id}`);
-                if (entry.title && entry.title !== entryTitle.textContent)
-                    details.push(entry.title);
-                if (entry.start)
-                    details.push(`Start: ${entry.start}`);
-                if (entry.end)
-                    details.push(`End: ${entry.end}`);
-                entryDetails.textContent = details.length > 0 ? details.join(' • ') : 'No details available';
-                entryDetails.style.cssText = `
-          color: rgba(255, 255, 255, 0.6);
-          font-size: 12px;
-        `;
-                entryInfo.appendChild(entryTitle);
-                entryInfo.appendChild(entryDetails);
-                entryDiv.appendChild(entryInfo);
-                timelineDiv.appendChild(entryDiv);
-            });
-            if (data.timeline.length > 10) {
-                const moreInfo = document.createElement('div');
-                moreInfo.textContent = `... and ${data.timeline.length - 10} more events`;
-                moreInfo.style.cssText = `
-          color: rgba(255, 255, 255, 0.6);
-          font-style: italic;
-          text-align: center;
-          padding: 10px 0;
-        `;
-                timelineDiv.appendChild(moreInfo);
-            }
-            container.appendChild(timelineDiv);
-        }
-    }
-    renderGenericObjectData(container, data) {
-        const keys = Object.keys(data);
-        const channelKeys = keys.filter(key => key.toLowerCase().includes('channel') ||
-            key.toLowerCase().includes('program') ||
-            key.toLowerCase().includes('guide'));
-        if (channelKeys.length > 0) {
-            channelKeys.forEach(key => {
-                const channelData = data[key];
-                const channelDiv = document.createElement('div');
-                channelDiv.style.cssText = `
-          margin-bottom: 20px;
-          padding: 15px;
-          background: rgba(255, 255, 255, 0.05);
-          border-radius: 8px;
-          border-left: 3px solid #ff6b35;
-        `;
-                const channelTitle = document.createElement('h3');
-                channelTitle.textContent = key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
-                channelTitle.style.cssText = `
-          margin: 0 0 10px 0;
-          color: #ff6b35;
-          font-size: 18px;
-          font-weight: 600;
-        `;
-                channelDiv.appendChild(channelTitle);
-                const channelContent = document.createElement('div');
-                if (typeof channelData === 'string') {
-                    channelContent.textContent = channelData;
-                    channelContent.style.cssText = `
-            color: rgba(255, 255, 255, 0.9);
-            line-height: 1.5;
-          `;
-                }
-                else if (Array.isArray(channelData)) {
-                    channelContent.innerHTML = `
-            <div style="color: rgba(255, 255, 255, 0.7);">
-              Array with ${channelData.length} items:
-            </div>
-          `;
-                    channelData.slice(0, 5).forEach((item, index) => {
-                        const itemDiv = document.createElement('div');
-                        itemDiv.style.cssText = `
-              margin: 5px 0;
-              padding: 5px 10px;
-              background: rgba(255, 255, 255, 0.05);
-              border-radius: 4px;
-            `;
-                        itemDiv.textContent = typeof item === 'object' ? JSON.stringify(item) : String(item);
-                        channelContent.appendChild(itemDiv);
-                    });
-                }
-                else {
-                    channelContent.innerHTML = `
-            <pre style="color: rgba(255, 255, 255, 0.8); font-size: 12px; margin: 0; white-space: pre-wrap;">${JSON.stringify(channelData, null, 2)}</pre>
-          `;
-                }
-                channelDiv.appendChild(channelContent);
-                container.appendChild(channelDiv);
-            });
-        }
-        else {
-            keys.forEach(key => {
-                const value = data[key];
-                const dataDiv = document.createElement('div');
-                dataDiv.style.cssText = `
-          margin-bottom: 15px;
-          padding: 10px;
-          background: rgba(255, 255, 255, 0.05);
-          border-radius: 6px;
-          border-left: 2px solid #ff6b35;
-        `;
-                const keyTitle = document.createElement('div');
-                keyTitle.textContent = key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
-                keyTitle.style.cssText = `
-          color: #ff6b35;
-          font-weight: 600;
-          margin-bottom: 5px;
-        `;
-                dataDiv.appendChild(keyTitle);
-                const valueDiv = document.createElement('div');
-                if (typeof value === 'string') {
-                    valueDiv.textContent = value;
-                    valueDiv.style.cssText = `color: rgba(255, 255, 255, 0.9);`;
-                }
-                else {
-                    valueDiv.innerHTML = `
-            <pre style="color: rgba(255, 255, 255, 0.7); font-size: 12px; margin: 0; white-space: pre-wrap;">${JSON.stringify(value, null, 2)}</pre>
-          `;
-                }
-                dataDiv.appendChild(valueDiv);
-                container.appendChild(dataDiv);
-            });
-        }
-    }
     async cleanup() {
         if (this.hls) {
             this.hls.destroy();