TEMP: Force Progress Bar Visibility for Debugging - Added bright yellow container background - Added bright red progress bar background - Added bright green-blue filled progress - Force display/visibility/opacity to 1 - Should be IMPOSSIBLE to miss now!

This commit is contained in:
dilgenfritz 2025-10-31 20:40:45 -05:00
parent b7442d9d05
commit a21123757c
2 changed files with 21 additions and 2 deletions

View File

@ -73,11 +73,28 @@ class BaseVideoPlayer {
// Additional debugging - check if elements exist in DOM
const domProgressBar = document.getElementById('progress-bar');
const domProgressFilled = document.getElementById('progress-filled');
const domProgressContainer = document.querySelector('.progress-container');
console.log('🎬 DOM elements check:', {
'progress-bar in DOM': !!domProgressBar,
'progress-filled in DOM': !!domProgressFilled,
'progress-container in DOM': !!domProgressContainer,
'container has progress elements': this.container.querySelectorAll('.progress-bar, #progress-bar').length > 0
});
// TEMPORARY: Force elements to be visible for debugging
if (domProgressBar) {
domProgressBar.style.display = 'block';
domProgressBar.style.visibility = 'visible';
domProgressBar.style.opacity = '1';
console.log('🎬 Forced progress bar visibility');
}
if (domProgressContainer) {
domProgressContainer.style.display = 'block';
domProgressContainer.style.visibility = 'visible';
domProgressContainer.style.opacity = '1';
console.log('🎬 Forced progress container visibility');
}
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');

View File

@ -1115,12 +1115,14 @@ body.cinema-mode {
.progress-container {
margin-bottom: 15px;
background: yellow; /* TEMPORARY: Make container visible for debugging */
padding: 5px;
}
.progress-bar {
position: relative;
height: 12px; /* Increased from 6px to 12px for better visibility */
background: rgba(255, 255, 255, 0.5); /* Increased opacity from 0.3 to 0.5 */
background: rgba(255, 0, 0, 0.8); /* TEMPORARY: Bright red background for debugging */
border-radius: 6px;
cursor: pointer;
margin-bottom: 8px;
@ -1133,7 +1135,7 @@ body.cinema-mode {
.progress-filled {
height: 100%;
background: linear-gradient(90deg, #ff6b9d, #c471ed);
background: linear-gradient(90deg, #00ff00, #0000ff); /* TEMPORARY: Bright green-to-blue for debugging */
border-radius: 6px; /* Updated to match parent */
width: 0%;
transition: width 0.1s ease;