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

Fix Progress Bar Performance & Infinite Loop 

- Added debouncing to showControls() to prevent infinite loop
- Reduced console logging spam for progress updates
- Fixed thousands of rapid 'Showing controls...' messages
- Progress bar calculation working correctly (2.1% at 17s)
- Performance should be much better now
This commit is contained in:
dilgenfritz 2025-10-31 20:31:18 -05:00
parent 7bf1cd2007
commit 3649dd1eda
1 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,6 +27,8 @@ class BaseVideoPlayer {
this.volume = options.initialVolume || 0.7;
this.playbackRate = 1.0;
this.hideControlsTimeout = null;
this.showControlsDebounce = false;
this.lastLoggedTime = -1;
// Get container and initialize
this.container = document.querySelector(containerSelector);
@ -334,11 +336,16 @@ 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)`);
// Only log every 5 seconds to reduce console spam
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)`);
this.lastLoggedTime = Math.floor(this.videoElement.currentTime);
}
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');
}
@ -375,11 +382,17 @@ class BaseVideoPlayer {
// ===== CONTROL VISIBILITY =====
showControls() {
console.log('🎬 Showing controls...');
// Prevent rapid-fire calls with debouncing
if (this.showControlsDebounce) return;
this.showControlsDebounce = true;
setTimeout(() => {
this.showControlsDebounce = false;
}, 100);
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');
}