CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-11-10 01:18:55 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor progress bar styling and update config

Browse Source 
Progress bar color styling is now always applied, not just for custom positions, by moving the relevant code outside the position check. Updated playerConfig.js to set touchPosition to 'top' and fixed the control bar backgroundColor value.
This commit is contained in:
Yiannis Christodoulou 2025-10-09 18:03:46 +03:00
parent bdfb218b75
commit acdf11d597
2 changed files with 35 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
View File

@ -2516,6 +2516,33 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
}, 100);
// END: Apply control bar styling from config
// BEGIN: Apply progress bar colors from config (always applied)
setTimeout(() => {
const progressControl = playerRef.current.getChild('controlBar')?.getChild('progressControl');
const progressEl = progressControl?.el();
if (progressEl) {
// Style the progress holder and bars with config colors
const progressHolder = progressEl.querySelector('.vjs-progress-holder');
if (progressHolder) {
progressHolder.style.backgroundColor = PlayerConfig.progressBar.trackColor;
}
// Style the play progress bar (the filled part)
const playProgress = progressEl.querySelector('.vjs-play-progress');
if (playProgress) {
playProgress.style.backgroundColor = PlayerConfig.progressBar.color;
}
// Style the load progress bar (buffered part)
const loadProgress = progressEl.querySelector('.vjs-load-progress');
if (loadProgress) {
loadProgress.style.backgroundColor = PlayerConfig.progressBar.bufferColor;
}
}
}, 150);
// END: Apply progress bar colors from config
// Determine the actual position based on device type and config
const getActualPosition = () => {
if (isTouchDevice) {
@ -2577,26 +2604,6 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
controlBarEl.style.position = 'relative';
controlBarEl.style.width = '100%';
// Style the progress holder and bars with config colors
const progressHolder = progressEl.querySelector('.vjs-progress-holder');
if (progressHolder) {
progressHolder.style.height = '100%';
progressHolder.style.margin = '0';
progressHolder.style.backgroundColor = PlayerConfig.progressBar.trackColor;
}
// Style the play progress bar (the filled part)
const playProgress = progressEl.querySelector('.vjs-play-progress');
if (playProgress) {
playProgress.style.backgroundColor = PlayerConfig.progressBar.color;
}
// Style the load progress bar (buffered part)
const loadProgress = progressEl.querySelector('.vjs-load-progress');
if (loadProgress) {
loadProgress.style.backgroundColor = PlayerConfig.progressBar.bufferColor;
}
// Store reference for cleanup
customComponents.current.movedProgressControl = progressControl;
customComponents.current.controlsWrapper = wrapper;
@ -2810,7 +2817,12 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
// END: Implement custom time display component
// BEGIN: Add spacer to push right-side buttons to the right
if (controlBar && customRemainingTime && customRemainingTime.el()) {
if (
controlBar &&
customRemainingTime &&
customRemainingTime.el() &&
PlayerConfig.progressBar.nonTouchPosition !== 'default'
) {
// Create spacer element
const spacer = document.createElement('div');
spacer.className = 'vjs-spacer-control vjs-control';

4
frontend-tools/video-js/src/config/playerConfig.js
View File

@ -17,7 +17,7 @@ const PlayerConfig = {
// Position for touch devices: 'top' or 'bottom' (no 'default' option)
// 'top' - progress bar above control bar
// 'bottom' - progress bar below control bar (native touch style)
touchPosition: 'bottom',
touchPosition: 'top',
// Progress bar color (hex, rgb, or CSS color name)
color: '#019932',
@ -32,7 +32,7 @@ const PlayerConfig = {
// Control bar configuration
controlBar: {
// Background color
backgroundColor: '#FF00000', // 'rgba(0, 0, 0, 0.7)',
backgroundColor: 'rgba(0, 0, 0, 0.7)',
// Height in em units
height: 3,