diff --git a/src/features/media/baseVideoPlayer.js b/src/features/media/baseVideoPlayer.js index 231afad..2c7062a 100644 --- a/src/features/media/baseVideoPlayer.js +++ b/src/features/media/baseVideoPlayer.js @@ -58,6 +58,15 @@ class BaseVideoPlayer { this.controls.progressThumb = this.container.querySelector('#progress-thumb') || this.container.querySelector('.progress-thumb'); this.controls.currentTime = this.container.querySelector('#current-time') || this.container.querySelector('.current-time'); this.controls.totalTime = this.container.querySelector('#total-time') || this.container.querySelector('.total-time'); + + // Debug progress bar elements + console.log('🎬 Progress bar elements found:', { + progressBar: !!this.controls.progressBar, + progressFilled: !!this.controls.progressFilled, + progressThumb: !!this.controls.progressThumb, + currentTime: !!this.controls.currentTime, + totalTime: !!this.controls.totalTime + }); this.controls.volume = this.container.querySelector('#volume-slider') || this.container.querySelector('.volume-slider'); this.controls.volumePercentage = this.container.querySelector('#volume-percentage') || this.container.querySelector('.volume-percentage'); this.controls.mute = this.container.querySelector('#mute-btn') || this.container.querySelector('.mute-btn'); @@ -155,6 +164,9 @@ class BaseVideoPlayer { } this.videoElement.load(); + + // Show controls when video loads + this.showControls(); if (autoPlay) { this.videoElement.addEventListener('loadeddata', () => this.play(), { once: true }); @@ -322,9 +334,13 @@ class BaseVideoPlayer { if (!this.videoElement || !this.videoElement.duration) return; const progress = (this.videoElement.currentTime / this.videoElement.duration) * 100; + console.log(`🎬 Progress update: ${progress.toFixed(1)}% (${this.videoElement.currentTime.toFixed(1)}s / ${this.videoElement.duration.toFixed(1)}s)`); if (this.controls.progressFilled) { this.controls.progressFilled.style.width = progress + '%'; + console.log('🎬 Updated progress bar width to:', progress + '%'); + } else { + console.warn('🎬 progressFilled element not found'); } if (this.controls.currentTime) { @@ -359,9 +375,13 @@ class BaseVideoPlayer { // ===== CONTROL VISIBILITY ===== showControls() { + console.log('🎬 Showing controls...'); if (this.controls.container) { this.controls.container.classList.add('visible'); this.container.classList.remove('hide-controls', 'auto-hide'); + console.log('🎬 Controls container classes updated'); + } else { + console.warn('🎬 No controls container found'); } // Clear existing timeout @@ -373,6 +393,7 @@ class BaseVideoPlayer { if (this.videoElement && !this.videoElement.paused && this.options.autoHide) { this.hideControlsTimeout = setTimeout(() => { this.container.classList.add('auto-hide'); + console.log('🎬 Auto-hiding controls after 3 seconds'); }, 3000); } }