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
This commit is contained in:
parent
3649dd1eda
commit
ee3a7e701e
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue