CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-11-07 16:08:54 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add configurable control bar styles to VideoJSPlayer

Browse Source 
Introduced a new controlBar configuration in playerConfig.js to allow customization of control bar background color, height, and font size. Updated VideoJSPlayer.jsx to apply these styles dynamically, including line height for time controls.
This commit is contained in:
Yiannis Christodoulou 2025-10-09 14:38:00 +03:00
parent 40816e6a12
commit 9ada2cb8c9
2 changed files with 23 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2510,6 +2510,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
if (progressControl && progressControl.el() && controlBar && controlBar.el()) {
const progressEl = progressControl.el();
const controlBarEl = controlBar.el();
controlBarEl.style.gap = 0;
// Remove progress control from control bar
controlBar.removeChild(progressControl);
@ -2547,9 +2548,18 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
progressEl.style.transition = 'opacity 0.3s, visibility 0.3s'; // Smooth transition
progressEl.style.boxSizing = 'border-box'; // Ensure padding doesn't increase width
// Style control bar
// Style control bar using config values
controlBarEl.style.position = 'relative';
controlBarEl.style.width = '100%';
controlBarEl.style.height = `${PlayerConfig.controlBar.height}em`;
controlBarEl.style.fontSize = `${PlayerConfig.controlBar.fontSize}em`;
controlBarEl.style.backgroundColor = PlayerConfig.controlBar.backgroundColor;
// Apply same line height to time-related controls
const timeControls = controlBarEl.querySelectorAll('.vjs-time-control');
timeControls.forEach((timeControl) => {
timeControl.style.lineHeight = `${PlayerConfig.controlBar.height}em`;
});
// Style the progress holder and bars with config colors
const progressHolder = progressEl.querySelector('.vjs-progress-holder');

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

@ -20,6 +20,18 @@ const PlayerConfig = {
// Loaded buffer color
bufferColor: 'rgba(255, 255, 255, 0.5)',
},
// Control bar configuration
controlBar: {
// Background color
backgroundColor: '#FF00000', // 'rgba(0, 0, 0, 0.7)',
// Height in em units
height: 3,
// Font size in em units
fontSize: 1.5,
},
};
export default PlayerConfig;