VICTORY! Progress Bar Fully Working & Beautiful Debugging revealed progress bar was working perfectly Issue was 6px height too small to see clearly Restored elegant pink/purple gradient styling 12px height with 16px hover - perfect visibility Smooth animations and professional appearance PORN CINEMA PLAYER IS NOW COMPLETE!

This commit is contained in:
dilgenfritz 2025-10-31 20:42:41 -05:00
parent a21123757c
commit 78182559ce
2 changed files with 5 additions and 33 deletions

View File

@ -69,32 +69,6 @@ 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');
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,14 +1115,12 @@ 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, 0, 0, 0.8); /* TEMPORARY: Bright red background for debugging */
height: 12px;
background: rgba(255, 255, 255, 0.3);
border-radius: 6px;
cursor: pointer;
margin-bottom: 8px;
@ -1130,13 +1128,13 @@ body.cinema-mode {
}
.progress-bar:hover {
height: 16px; /* Increased from 8px to 16px */
height: 16px;
}
.progress-filled {
height: 100%;
background: linear-gradient(90deg, #00ff00, #0000ff); /* TEMPORARY: Bright green-to-blue for debugging */
border-radius: 6px; /* Updated to match parent */
background: linear-gradient(90deg, #ff6b9d, #c471ed);
border-radius: 6px;
width: 0%;
transition: width 0.1s ease;
position: relative;