GTA
/
training-academy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

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:
dilgenfritz 2025-10-31 20:35:37 -05:00
parent 3649dd1eda
commit ee3a7e701e
1 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/features/media/baseVideoPlayer.js
View File

@ -69,6 +69,15 @@ class BaseVideoPlayer {
currentTime: !!this.controls.currentTime, currentTime: !!this.controls.currentTime,
totalTime: !!this.controls.totalTime 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.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.volumePercentage = this.container.querySelector('#volume-percentage') || this.container.querySelector('.volume-percentage');
this.controls.mute = this.container.querySelector('#mute-btn') || this.container.querySelector('.mute-btn'); 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 && if (Math.floor(this.videoElement.currentTime) % 5 === 0 &&
Math.floor(this.videoElement.currentTime) !== this.lastLoggedTime) { 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 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); this.lastLoggedTime = Math.floor(this.videoElement.currentTime);
} }
if (this.controls.progressFilled) { if (this.controls.progressFilled) {
this.controls.progressFilled.style.width = progress + '%'; this.controls.progressFilled.style.width = progress + '%';
} else { } else {
console.warn('🎬 progressFilled element not found'); console.warn('🎬 progressFilled element not found during update');
} }
if (this.controls.currentTime) { if (this.controls.currentTime) {