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

Final Clean Progress Bar - Beautiful pink/purple gradient - Subtle white background track - 12px height with 16px hover - Full width with proper minimum dimensions - Clean code with no debug logging

This commit is contained in:
dilgenfritz 2025-10-31 20:50:20 -05:00
parent 22fc67f693
commit 245c9fc5d9
2 changed files with 9 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -337,35 +337,8 @@ class BaseVideoPlayer {
const progress = (this.videoElement.currentTime / this.videoElement.duration) * 100;
// 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)`);
console.log('🎬 Progress elements check:', {
progressFilled: !!this.controls.progressFilled,
hasStyle: this.controls.progressFilled ? 'width: ' + this.controls.progressFilled.style.width : 'N/A'
});
// DEBUG: Check actual rendered styles
if (this.controls.progressFilled) {
const computed = window.getComputedStyle(this.controls.progressFilled);
console.log('🎬 Computed styles:', {
width: computed.width,
height: computed.height,
background: computed.background,
display: computed.display,
visibility: computed.visibility,
opacity: computed.opacity
});
}
this.lastLoggedTime = Math.floor(this.videoElement.currentTime);
}
if (this.controls.progressFilled) {
this.controls.progressFilled.style.width = progress + '%';
} else {
console.warn('🎬 progressFilled element not found during update');
}
if (this.controls.currentTime) {

24
src/styles/porn-cinema.css
View File

@ -1115,39 +1115,33 @@ body.cinema-mode {
.progress-container {
margin-bottom: 15px;
background: lime !important; /* BRIGHT GREEN - should be unmissable */
padding: 10px !important;
border: 5px solid red !important;
width: 100% !important; /* Force full width */
min-width: 300px !important; /* Minimum width */
width: 100%;
min-width: 300px;
}
.progress-bar {
position: relative;
height: 20px !important; /* Even bigger */
background: blue !important; /* BRIGHT BLUE background */
height: 12px;
background: rgba(255, 255, 255, 0.3);
border-radius: 6px;
cursor: pointer;
margin-bottom: 8px;
transition: height 0.2s ease;
border: 2px solid orange !important;
width: 100% !important; /* Force full width */
min-width: 280px !important; /* Minimum width inside container */
width: 100%;
min-width: 280px;
}
.progress-bar:hover {
height: 24px !important;
height: 16px;
}
.progress-filled {
height: 100% !important;
background: magenta !important; /* BRIGHT MAGENTA fill */
height: 100%;
background: linear-gradient(90deg, #ff6b9d, #c471ed);
border-radius: 6px;
width: 0%;
transition: width 0.1s ease;
position: relative;
border: 1px solid yellow !important;
min-height: 18px !important; /* Force minimum height */
}
.progress-thumb {