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:
parent
a21123757c
commit
78182559ce
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue