From ee3a7e701e7316e75df0a6cb184e7928218ad515 Mon Sep 17 00:00:00 2001 From: dilgenfritz Date: Fri, 31 Oct 2025 20:35:37 -0500 Subject: [PATCH] Add Enhanced Progress Bar Debugging - Added DOM element detection logging - Enhanced progress update logging with style info - Check if elements exist in DOM vs found by selector - Will help identify if issue is element detection or CSS visibility --- src/features/media/baseVideoPlayer.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/features/media/baseVideoPlayer.js b/src/features/media/baseVideoPlayer.js index 253d21e..a893145 100644 --- a/src/features/media/baseVideoPlayer.js +++ b/src/features/media/baseVideoPlayer.js @@ -69,6 +69,15 @@ class BaseVideoPlayer { currentTime: !!this.controls.currentTime, totalTime: !!this.controls.totalTime }); + + // Additional debugging - check if elements exist in DOM + const domProgressBar = document.getElementById('progress-bar'); + const domProgressFilled = document.getElementById('progress-filled'); + console.log('🎬 DOM elements check:', { + 'progress-bar in DOM': !!domProgressBar, + 'progress-filled in DOM': !!domProgressFilled, + 'container has progress elements': this.container.querySelectorAll('.progress-bar, #progress-bar').length > 0 + }); 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'); @@ -341,13 +350,17 @@ class BaseVideoPlayer { if (Math.floor(this.videoElement.currentTime) % 5 === 0 && Math.floor(this.videoElement.currentTime) !== this.lastLoggedTime) { console.log(`🎬 Progress update: ${progress.toFixed(1)}% (${this.videoElement.currentTime.toFixed(1)}s / ${this.videoElement.duration.toFixed(1)}s)`); + console.log('🎬 Progress elements check:', { + progressFilled: !!this.controls.progressFilled, + hasStyle: this.controls.progressFilled ? 'width: ' + this.controls.progressFilled.style.width : 'N/A' + }); this.lastLoggedTime = Math.floor(this.videoElement.currentTime); } if (this.controls.progressFilled) { this.controls.progressFilled.style.width = progress + '%'; } else { - console.warn('🎬 progressFilled element not found'); + console.warn('🎬 progressFilled element not found during update'); } if (this.controls.currentTime) {