unified-video-framework 1.4.262 → 1.4.264

package/packages/web/dist/WebPlayer.js

@@ -94,9 +94,6 @@ export class WebPlayer extends BasePlayer {
         this.youtubePlayerReady = false;
         this.youtubeIframe = null;
         this.youtubeTimeTrackingInterval = null;
-        this.isYouTubeLive = false;
-        this.useYouTubeNativeControls = false;
-        this.currentYouTubeControlsState = null;
         this.clickToUnmuteHandler = null;
     }
     debugLog(message, ...args) {
@@ -118,11 +115,11 @@ export class WebPlayer extends BasePlayer {
         console.log('WebPlayer.initialize called with config:', config);
         if (config && config.customControls !== undefined) {
             this.useCustomControls = config.customControls;
-            console.log('Custom controls set via customControls to:', this.useCustomControls);
+            console.log('Custom controls set via customControls:', this.useCustomControls);
         }
         else if (config && config.controls !== undefined) {
             this.useCustomControls = config.controls;
-            console.log('Custom controls set via controls to:', this.useCustomControls);
+            console.log('Custom controls set via controls prop:', this.useCustomControls);
         }
         if (config && config.settings) {
             console.log('Settings config found:', config.settings);
@@ -202,6 +199,13 @@ export class WebPlayer extends BasePlayer {
         if (this.useCustomControls) {
             this.createCustomControls(videoContainer);
         }
+        else {
+            this.debugLog('Controls disabled - not creating custom controls UI');
+        }
+        if (!this.useCustomControls) {
+            wrapper.classList.add('controls-disabled');
+            this.debugLog('🚫 controls-disabled class applied to player wrapper');
+        }
         wrapper.appendChild(videoContainer);
         this.container.innerHTML = '';
         this.container.appendChild(wrapper);
@@ -856,13 +860,8 @@ export class WebPlayer extends BasePlayer {
             if (this.video && metadata.thumbnail) {
                 this.video.poster = metadata.thumbnail;
             }
-            this.updateMetadataUI();
             await this.createYouTubePlayer(videoId);
-            setTimeout(() => {
-                this.updateMetadataUI();
-            }, 1000);
             this.debugLog('✅ YouTube video loaded successfully');
-            this.debugLog('YouTube video title:', metadata.title);
         }
         catch (error) {
             this.debugError('Failed to load YouTube video:', error);
@@ -879,15 +878,13 @@ export class WebPlayer extends BasePlayer {
         }
         const iframeContainer = document.createElement('div');
         iframeContainer.id = `youtube-player-${videoId}`;
-        const useNativeControls = this.config.youtubeNativeControls === true;
         iframeContainer.style.cssText = `
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
-      z-index: ${useNativeControls ? '1' : '0'};
-      pointer-events: ${useNativeControls ? 'auto' : 'none'};
+      z-index: 1;
     `;
         const existingPlayer = container.querySelector(`#youtube-player-${videoId}`);
         if (existingPlayer) {
@@ -903,7 +900,7 @@ export class WebPlayer extends BasePlayer {
             width: '100%',
             height: '100%',
             playerVars: {
-                controls: this.config.youtubeNativeControls === true ? 1 : 0,
+                controls: 0,
                 disablekb: 0,
                 fs: 0,
                 iv_load_policy: 3,
@@ -920,8 +917,7 @@ export class WebPlayer extends BasePlayer {
                 onError: (event) => this.onYouTubePlayerError(event)
             }
         });
-        this.currentYouTubeControlsState = this.config.youtubeNativeControls === true;
-        this.debugLog('YouTube player created with controls:', this.currentYouTubeControlsState);
+        this.debugLog('YouTube player created');
     }
     async loadYouTubeAPI() {
         return new Promise((resolve) => {
@@ -961,13 +957,6 @@ export class WebPlayer extends BasePlayer {
             if (this.config.muted) {
                 this.youtubePlayer.mute();
             }
-            this.detectYouTubeLiveStatus();
-            this.getYouTubeVideoTitle();
-            setTimeout(() => {
-                this.updateMetadataUI();
-                this.updateControlsVisibility();
-                this.ensureUILayering();
-            }, 500);
         }
         this.startYouTubeTimeTracking();
         this.emit('onReady');
@@ -1004,10 +993,6 @@ export class WebPlayer extends BasePlayer {
             case window.YT.PlayerState.CUED:
                 this.state.duration = this.youtubePlayer.getDuration();
                 this.updateYouTubeUI('cued');
-                setTimeout(() => {
-                    this.detectYouTubeLiveStatus();
-                    this.updateControlsVisibility();
-                }, 500);
                 break;
         }
     }
@@ -1058,323 +1043,6 @@ export class WebPlayer extends BasePlayer {
             details: { errorCode }
         });
     }
-    getYouTubeVideoTitle() {
-        if (!this.youtubePlayer || !this.youtubePlayerReady)
-            return;
-        try {
-            const videoData = this.youtubePlayer.getVideoData();
-            if (videoData && videoData.title) {
-                this.debugLog('Got YouTube title from player API:', videoData.title);
-                if (this.source && this.source.metadata) {
-                    this.source.metadata.title = videoData.title;
-                }
-                this.updateMetadataUI();
-            }
-        }
-        catch (error) {
-            this.debugWarn('Could not get YouTube video title from API:', error);
-            this.getYouTubeVideoTitleFromOEmbed();
-        }
-    }
-    detectYouTubeLiveStatus() {
-        if (!this.youtubePlayer || !this.youtubePlayerReady)
-            return;
-        try {
-            const videoData = this.youtubePlayer.getVideoData();
-            this.isYouTubeLive = videoData?.isLive || false;
-            this.useYouTubeNativeControls = this.config.youtubeNativeControls === true;
-            this.debugLog('YouTube Live status:', {
-                isLive: this.isYouTubeLive,
-                useNativeControls: this.useYouTubeNativeControls,
-                videoId: videoData?.video_id
-            });
-        }
-        catch (error) {
-            this.debugWarn('Could not detect YouTube Live status:', error);
-            try {
-                const duration = this.youtubePlayer.getDuration();
-                this.isYouTubeLive = !duration || duration === 0;
-                this.useYouTubeNativeControls = this.config.youtubeNativeControls === true;
-                this.debugLog('YouTube Live detected via duration check:', {
-                    duration,
-                    isLive: this.isYouTubeLive,
-                    useNativeControls: this.useYouTubeNativeControls
-                });
-            }
-            catch (e) {
-                this.debugWarn('Could not check YouTube duration for Live detection:', e);
-            }
-        }
-    }
-    ensureUILayering() {
-        if (!this.youtubePlayer)
-            return;
-        const videoContainer = this.playerWrapper?.querySelector('.uvf-video-container');
-        if (!videoContainer)
-            return;
-        const uiElements = videoContainer.querySelectorAll('.uvf-top-gradient, .uvf-controls-gradient, .uvf-top-bar, .uvf-center-play-container, .uvf-shortcut-indicator, .uvf-controls-bar');
-        uiElements.forEach(el => {
-            const element = el;
-            element.style.zIndex = '2';
-            element.style.position = 'relative';
-        });
-        this.debugLog('UI layering ensured for YouTube player');
-    }
-    updateControlsVisibility() {
-        const controlsContainer = document.getElementById('uvf-controls');
-        if (!controlsContainer) {
-            this.debugWarn('Controls container not found, looking for .uvf-controls-bar');
-            const controlsBar = this.playerWrapper?.querySelector('.uvf-controls-bar');
-            if (!controlsBar) {
-                this.debugWarn('Controls bar not found either, cannot update controls visibility');
-                return;
-            }
-            const controlsContainerFallback = controlsBar;
-            if (this.youtubePlayer && this.useYouTubeNativeControls) {
-                controlsContainerFallback.style.display = 'none';
-                const videoId = this.source?.metadata?.videoId;
-                if (videoId) {
-                    const ytWrapper = this.playerWrapper?.querySelector(`#youtube-player-${videoId}`);
-                    if (ytWrapper) {
-                        ytWrapper.style.zIndex = '1';
-                        ytWrapper.style.pointerEvents = 'auto';
-                        ytWrapper.style.position = 'absolute';
-                    }
-                }
-                const videoContainer = this.playerWrapper?.querySelector('.uvf-video-container');
-                if (videoContainer) {
-                    const allControls = videoContainer.querySelectorAll('.uvf-top-gradient, .uvf-controls-gradient, .uvf-top-bar, .uvf-center-play-container, .uvf-shortcut-indicator');
-                    allControls.forEach(el => el.style.display = 'none');
-                }
-                if (this.currentYouTubeControlsState !== true) {
-                    this.recreateYouTubePlayerWithNativeControls();
-                    this.currentYouTubeControlsState = true;
-                }
-                this.debugLog('✅ YouTube native controls enabled', {
-                    isLive: this.isYouTubeLive,
-                    reason: this.config.youtubeNativeControls === true ? 'Explicitly enabled in config' : 'Live stream detected'
-                });
-            }
-            else {
-                controlsContainerFallback.style.display = 'flex';
-                controlsContainerFallback.style.zIndex = '2';
-                const videoId = this.source?.metadata?.videoId;
-                if (videoId) {
-                    const ytWrapper = this.playerWrapper?.querySelector(`#youtube-player-${videoId}`);
-                    if (ytWrapper) {
-                        ytWrapper.style.zIndex = '0';
-                        ytWrapper.style.pointerEvents = 'none';
-                        ytWrapper.style.position = 'absolute';
-                    }
-                }
-                const videoContainer = this.playerWrapper?.querySelector('.uvf-video-container');
-                if (videoContainer) {
-                    const allControls = videoContainer.querySelectorAll('.uvf-top-gradient, .uvf-controls-gradient, .uvf-top-bar, .uvf-center-play-container, .uvf-shortcut-indicator');
-                    allControls.forEach(el => {
-                        const elh = el;
-                        elh.style.display = '';
-                        elh.style.zIndex = '2';
-                        elh.style.position = 'relative';
-                    });
-                }
-                if (this.currentYouTubeControlsState !== false) {
-                    this.recreateYouTubePlayerWithoutNativeControls();
-                    this.currentYouTubeControlsState = false;
-                }
-                this.debugLog('✅ Custom controls enabled for YouTube video');
-            }
-            return;
-        }
-        if (this.youtubePlayer && this.useYouTubeNativeControls) {
-            controlsContainer.style.display = 'none';
-            const videoId = this.source?.metadata?.videoId;
-            if (videoId) {
-                const ytWrapper = this.playerWrapper?.querySelector(`#youtube-player-${videoId}`);
-                if (ytWrapper) {
-                    ytWrapper.style.zIndex = '1';
-                    ytWrapper.style.pointerEvents = 'auto';
-                    ytWrapper.style.position = 'absolute';
-                }
-            }
-            if (this.currentYouTubeControlsState !== true) {
-                this.recreateYouTubePlayerWithNativeControls();
-                this.currentYouTubeControlsState = true;
-            }
-            this.debugLog('✅ YouTube native controls enabled', {
-                isLive: this.isYouTubeLive,
-                reason: this.config.youtubeNativeControls === true ? 'Explicitly enabled in config' : 'Live stream detected'
-            });
-        }
-        else {
-            controlsContainer.style.display = 'flex';
-            controlsContainer.style.zIndex = '2';
-            controlsContainer.style.position = 'relative';
-            const videoId = this.source?.metadata?.videoId;
-            if (videoId) {
-                const ytWrapper = this.playerWrapper?.querySelector(`#youtube-player-${videoId}`);
-                if (ytWrapper) {
-                    ytWrapper.style.zIndex = '0';
-                    ytWrapper.style.pointerEvents = 'none';
-                    ytWrapper.style.position = 'absolute';
-                }
-            }
-            const videoContainer = this.playerWrapper?.querySelector('.uvf-video-container');
-            if (videoContainer) {
-                const allControls = videoContainer.querySelectorAll('.uvf-top-gradient, .uvf-controls-gradient, .uvf-top-bar, .uvf-center-play-container, .uvf-shortcut-indicator');
-                allControls.forEach(el => {
-                    const elh = el;
-                    elh.style.zIndex = '2';
-                    elh.style.position = 'relative';
-                });
-            }
-            if (this.currentYouTubeControlsState !== false) {
-                this.recreateYouTubePlayerWithoutNativeControls();
-                this.currentYouTubeControlsState = false;
-            }
-            this.debugLog('✅ Custom controls enabled for YouTube video');
-        }
-    }
-    recreateYouTubePlayerWithNativeControls() {
-        if (!this.source?.metadata?.videoId)
-            return;
-        const videoId = this.source.metadata.videoId;
-        const currentTime = this.youtubePlayer?.getCurrentTime() || 0;
-        const container = this.playerWrapper || this.video?.parentElement;
-        if (!container)
-            return;
-        if (this.youtubePlayer) {
-            this.youtubePlayer.destroy();
-        }
-        const existingContainer = container.querySelector(`#youtube-player-${videoId}`);
-        if (existingContainer) {
-            existingContainer.remove();
-        }
-        const iframeContainer = document.createElement('div');
-        iframeContainer.id = `youtube-player-${videoId}`;
-        iframeContainer.style.cssText = `
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 1;
-    `;
-        container.appendChild(iframeContainer);
-        this.youtubePlayer = new window.YT.Player(iframeContainer.id, {
-            videoId: videoId,
-            width: '100%',
-            height: '100%',
-            playerVars: {
-                autoplay: this.config.autoPlay ? 1 : 0,
-                controls: 1,
-                modestbranding: 1,
-                rel: 0,
-                showinfo: 0,
-                iv_load_policy: 3,
-                playsinline: 1,
-                start: Math.floor(currentTime)
-            },
-            events: {
-                onReady: () => {
-                    this.youtubePlayerReady = true;
-                    this.debugLog('YouTube player with native controls ready');
-                    this.emit('onReady');
-                },
-                onStateChange: (event) => this.onYouTubePlayerStateChange(event),
-                onError: (event) => this.onYouTubePlayerError(event)
-            }
-        });
-    }
-    recreateYouTubePlayerWithoutNativeControls() {
-        if (!this.source?.metadata?.videoId)
-            return;
-        const videoId = this.source.metadata.videoId;
-        const currentTime = this.youtubePlayer?.getCurrentTime() || 0;
-        const container = this.playerWrapper || this.video?.parentElement;
-        if (!container)
-            return;
-        if (this.youtubePlayer) {
-            this.youtubePlayer.destroy();
-        }
-        const existingContainer = container.querySelector(`#youtube-player-${videoId}`);
-        if (existingContainer) {
-            existingContainer.remove();
-        }
-        const iframeContainer = document.createElement('div');
-        iframeContainer.id = `youtube-player-${videoId}`;
-        iframeContainer.style.cssText = `
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 0;
-      pointer-events: none;
-    `;
-        container.appendChild(iframeContainer);
-        this.youtubePlayer = new window.YT.Player(iframeContainer.id, {
-            videoId: videoId,
-            width: '100%',
-            height: '100%',
-            playerVars: {
-                autoplay: this.config.autoPlay ? 1 : 0,
-                controls: 0,
-                disablekb: 0,
-                fs: 0,
-                iv_load_policy: 3,
-                modestbranding: 1,
-                rel: 0,
-                showinfo: 0,
-                playsinline: 1,
-                start: Math.floor(currentTime)
-            },
-            events: {
-                onReady: () => {
-                    this.youtubePlayerReady = true;
-                    this.debugLog('YouTube player without native controls ready');
-                    this.emit('onReady');
-                },
-                onStateChange: (event) => this.onYouTubePlayerStateChange(event),
-                onError: (event) => this.onYouTubePlayerError(event)
-            }
-        });
-    }
-    toggleYouTubeControls(useNative = !this.useYouTubeNativeControls) {
-        if (!this.youtubePlayer) {
-            this.debugWarn('Cannot toggle YouTube controls - no YouTube player active');
-            return;
-        }
-        this.useYouTubeNativeControls = useNative;
-        this.config.youtubeNativeControls = useNative;
-        this.updateControlsVisibility();
-        this.debugLog('YouTube controls toggled:', {
-            useNative: this.useYouTubeNativeControls,
-            isLive: this.isYouTubeLive
-        });
-        this.showNotification(`YouTube Controls: ${this.useYouTubeNativeControls ? 'Native' : 'Custom'}`);
-    }
-    async getYouTubeVideoTitleFromOEmbed() {
-        if (!this.source?.metadata?.videoId)
-            return;
-        try {
-            const videoId = this.source.metadata.videoId;
-            const oembedUrl = `https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${videoId}&format=json`;
-            const response = await fetch(oembedUrl);
-            if (response.ok) {
-                const data = await response.json();
-                if (data.title) {
-                    this.debugLog('Got YouTube title from oembed API:', data.title);
-                    if (this.source && this.source.metadata) {
-                        this.source.metadata.title = data.title;
-                    }
-                    this.updateMetadataUI();
-                }
-            }
-        }
-        catch (error) {
-            this.debugWarn('Could not get YouTube title from oembed API:', error);
-        }
-    }
     startYouTubeTimeTracking() {
         if (this.youtubeTimeTrackingInterval) {
             clearInterval(this.youtubeTimeTrackingInterval);
@@ -1408,18 +1076,12 @@ export class WebPlayer extends BasePlayer {
         const progressHandle = document.getElementById('uvf-progress-handle');
         if (progressHandle && !this.isDragging) {
             progressHandle.style.left = percent + '%';
-            progressHandle.classList.remove('dragging');
         }
         const progressBuffered = document.getElementById('uvf-progress-buffered');
         if (progressBuffered) {
             progressBuffered.style.width = buffered + '%';
         }
-        const timeDisplay = document.getElementById('uvf-time-display');
-        if (timeDisplay) {
-            const currentTimeStr = this.formatTime(currentTime);
-            const durationStr = this.formatTime(duration);
-            timeDisplay.textContent = `${currentTimeStr} / ${durationStr}`;
-        }
+        this.updateTimeDisplay();
     }
     loadScript(src) {
         return new Promise((resolve, reject) => {
@@ -1754,27 +1416,12 @@ export class WebPlayer extends BasePlayer {
     updateTimeTooltip(e) {
         const progressBar = document.getElementById('uvf-progress-bar');
         const tooltip = document.getElementById('uvf-time-tooltip');
-        if (!progressBar || !tooltip)
-            return;
-        let duration = 0;
-        if (this.youtubePlayer && this.youtubePlayerReady) {
-            try {
-                duration = this.youtubePlayer.getDuration() || 0;
-            }
-            catch (error) {
-                this.debugWarn('Error getting YouTube duration for tooltip:', error);
-                return;
-            }
-        }
-        else if (this.video) {
-            duration = this.video.duration || 0;
-        }
-        if (!duration || !isFinite(duration))
+        if (!progressBar || !tooltip || !this.video)
             return;
         const rect = progressBar.getBoundingClientRect();
         const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
         const percent = (x / rect.width);
-        const time = percent * duration;
+        const time = percent * this.video.duration;
         tooltip.textContent = this.formatTime(time);
         tooltip.style.left = `${x}px`;
         tooltip.classList.add('visible');
@@ -4183,29 +3830,7 @@ export class WebPlayer extends BasePlayer {
       }
       
       .uvf-accordion-item.expanded .uvf-accordion-content {
-        max-height: 350px;
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
-      }
-      
-      /* Special handling for quality accordion with many options */
-      .uvf-accordion-item.expanded .uvf-accordion-content[data-section="quality"] {
-        max-height: 400px;
-      }
-      
-      /* Scrollbar styling for accordion content */
-      .uvf-accordion-content::-webkit-scrollbar {
-        width: 4px;
-      }
-      .uvf-accordion-content::-webkit-scrollbar-track {
-        background: transparent;
-      }
-      .uvf-accordion-content::-webkit-scrollbar-thumb {
-        background: rgba(255,255,255,0.3);
-        border-radius: 2px;
-      }
-      .uvf-accordion-content::-webkit-scrollbar-thumb:hover {
-        background: rgba(255,255,255,0.5);
+        max-height: 250px;
       }
       
       /* Settings options within accordion */
@@ -5933,6 +5558,25 @@ export class WebPlayer extends BasePlayer {
         }
       }
       
+      /* Controls visibility */
+      .uvf-controls-bar {
+        display: flex !important;
+      }
+      
+      .uvf-top-bar {
+        display: flex !important;
+      }
+      
+      /* Hide all controls if controls prop is false */
+      .uvf-player-wrapper.controls-disabled .uvf-controls-bar,
+      .uvf-player-wrapper.controls-disabled .uvf-top-bar,
+      .uvf-player-wrapper.controls-disabled .uvf-top-gradient,
+      .uvf-player-wrapper.controls-disabled .uvf-controls-gradient {
+        display: none !important;
+        visibility: hidden !important;
+        pointer-events: none !important;
+      }
+      
       /* Hide YouTube UI elements */
       iframe[src*="youtube.com"] {
         pointer-events: auto !important;
@@ -6271,7 +5915,7 @@ export class WebPlayer extends BasePlayer {
         const qualityBadge = document.createElement('div');
         qualityBadge.className = 'uvf-quality-badge';
         qualityBadge.id = 'uvf-quality-badge';
-        qualityBadge.textContent = 'AUTO';
+        qualityBadge.textContent = 'HD';
         rightControls.appendChild(qualityBadge);
         this.debugLog('Settings config check:', this.settingsConfig);
         this.debugLog('Settings enabled:', this.settingsConfig.enabled);
@@ -7385,27 +7029,11 @@ export class WebPlayer extends BasePlayer {
         const progressBar = document.querySelector('.uvf-progress-bar');
         const progressFilled = document.getElementById('uvf-progress-filled');
         const progressHandle = document.getElementById('uvf-progress-handle');
-        if (!progressBar)
-            return;
-        let duration = 0;
-        if (this.youtubePlayer && this.youtubePlayerReady) {
-            try {
-                duration = this.youtubePlayer.getDuration() || 0;
-            }
-            catch (error) {
-                this.debugWarn('Error getting YouTube duration for seeking:', error);
-                return;
-            }
-        }
-        else if (this.video) {
-            duration = this.video.duration;
-        }
-        else {
-            this.debugWarn('No video source available for seeking');
+        if (!progressBar || !this.video)
             return;
-        }
+        const duration = this.video.duration;
         if (!isFinite(duration) || isNaN(duration) || duration <= 0) {
-            this.debugWarn('Invalid video duration, cannot seek via progress bar:', duration);
+            this.debugWarn('Invalid video duration, cannot seek via progress bar');
             return;
         }
         const rect = progressBar.getBoundingClientRect();
@@ -7416,18 +7044,19 @@ export class WebPlayer extends BasePlayer {
             this.debugWarn('Calculated seek time is invalid:', time);
             return;
         }
-        this.debugLog('Seeking to position:', time, 'seconds (', Math.round(percent), '%)');
-        if (progressFilled && !this.isDragging) {
+        if (progressFilled) {
             progressFilled.style.width = percent + '%';
         }
-        if (progressHandle && !this.isDragging) {
+        if (progressHandle) {
             progressHandle.style.left = percent + '%';
-            progressHandle.classList.add('dragging');
+            if (this.isDragging) {
+                progressHandle.classList.add('dragging');
+            }
+            else {
+                progressHandle.classList.remove('dragging');
+            }
         }
         this.seek(time);
-        if (this.youtubePlayer && this.youtubePlayerReady) {
-            this.emit('onSeeking');
-        }
     }
     formatTime(seconds) {
         if (!seconds || isNaN(seconds))