Progress bar found but too small - User identified thin line at bottom of green container - Should be 80% filled at 12s/15s but barely visible - Need to investigate element height/sizing

This commit is contained in:
dilgenfritz 2025-10-31 20:47:29 -05:00
parent 78182559ce
commit 92adb37725
2 changed files with 24 additions and 5 deletions

View File

@ -345,6 +345,20 @@ class BaseVideoPlayer {
progressFilled: !!this.controls.progressFilled, progressFilled: !!this.controls.progressFilled,
hasStyle: this.controls.progressFilled ? 'width: ' + this.controls.progressFilled.style.width : 'N/A' 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); this.lastLoggedTime = Math.floor(this.videoElement.currentTime);
} }

View File

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