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

Debug Progress Bar Visibility Issues 

PROGRESS BAR DEBUGGING:
- Added comprehensive logging for progress bar element detection
- Enhanced updateProgress() with detailed progress percentage logging
- Added debugging to showControls() method to track visibility state
- Automatically show controls when video loads to ensure visibility

ELEMENT DETECTION LOGGING:
- Console output shows if progressBar, progressFilled, progressThumb elements found
- Logs progress updates with percentage and time values
- Tracks control container visibility and class changes

CONTROL VISIBILITY FIXES:
- Explicitly call showControls() when loading videos
- Added logging to identify if controls container exists
- Enhanced auto-hide behavior debugging

This will help identify if progress bar elements are found correctly
and if the progress updates are being calculated and applied properly.
This commit is contained in:
dilgenfritz 2025-10-31 20:25:24 -05:00
parent d7c105018f
commit 7bf1cd2007
1 changed files with 21 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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');
@ -156,6 +165,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);
}
}