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

Refactor control and progress bar styling logic

Browse Source 
Removed unnecessary setTimeouts for applying control bar and progress bar styles, applying them synchronously instead. Updated playerConfig to set nonTouchPosition to 'top' and touchPosition to 'bottom'. Added initial sync for progress bar visibility.
This commit is contained in:
Yiannis Christodoulou 2025-10-10 00:36:14 +03:00
parent 657bd190db
commit 9896eb0376
2 changed files with 41 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2491,48 +2491,44 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
const seekBar = progressControl?.getChild('seekBar'); const seekBar = progressControl?.getChild('seekBar');
// BEGIN: Apply control bar styling from config (always applied) // BEGIN: Apply control bar styling from config (always applied)
setTimeout(() => { const controlBarEl = controlBar?.el();
const controlBarEl = controlBar?.el(); if (controlBarEl) {
if (controlBarEl) { // Style control bar using config values
// Style control bar using config values controlBarEl.style.height = `${PlayerConfig.controlBar.height}em`;
controlBarEl.style.height = `${PlayerConfig.controlBar.height}em`; controlBarEl.style.fontSize = `${PlayerConfig.controlBar.fontSize}px`;
controlBarEl.style.fontSize = `${PlayerConfig.controlBar.fontSize}px`; controlBarEl.style.backgroundColor = PlayerConfig.controlBar.backgroundColor;
controlBarEl.style.backgroundColor = PlayerConfig.controlBar.backgroundColor;
// Apply same line height to time-related controls // Apply same line height to time-related controls
const timeControls = controlBarEl.querySelectorAll('.vjs-time-control'); const timeControls = controlBarEl.querySelectorAll('.vjs-time-control');
timeControls.forEach((timeControl) => { timeControls.forEach((timeControl) => {
timeControl.style.lineHeight = `${PlayerConfig.controlBar.height}em`; timeControl.style.lineHeight = `${PlayerConfig.controlBar.height}em`;
}); });
} }
}, 100);
// END: Apply control bar styling from config // END: Apply control bar styling from config
// BEGIN: Apply progress bar colors from config (always applied) // BEGIN: Apply progress bar colors from config (always applied)
setTimeout(() => { const progressEl = progressControl?.el();
const progressControl = playerRef.current.getChild('controlBar')?.getChild('progressControl'); console.log('progressEl', progressEl);
const progressEl = progressControl?.el(); if (progressEl) {
// Style the progress holder and bars with config colors
if (progressEl) { const progressHolder = progressEl.querySelector('.vjs-progress-holder');
// Style the progress holder and bars with config colors if (progressHolder) {
const progressHolder = progressEl.querySelector('.vjs-progress-holder'); progressHolder.style.backgroundColor = PlayerConfig.progressBar.trackColor;
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);
// Style the play progress bar (the filled part)
const playProgress = progressEl.querySelector('.vjs-play-progress');
if (playProgress) {
console.log('playProgress', 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;
}
}
// END: Apply progress bar colors from config // END: Apply progress bar colors from config
// Determine the actual position based on device type and config // Determine the actual position based on device type and config
@ -2549,8 +2545,8 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
const actualPosition = getActualPosition(); const actualPosition = getActualPosition();
// BEGIN: Move progress bar below control bar (native touch style) // BEGIN: Move progress bar below control bar (native touch style)
if (actualPosition === 'bottom' || actualPosition === 'top') { setTimeout(() => {
setTimeout(() => { if (actualPosition === 'bottom' || actualPosition === 'top') {
if (progressControl && progressControl.el() && controlBar && controlBar.el()) { if (progressControl && progressControl.el() && controlBar && controlBar.el()) {
const progressEl = progressControl.el(); const progressEl = progressControl.el();
const controlBarEl = controlBar.el(); const controlBarEl = controlBar.el();
@ -2619,6 +2615,8 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
playerRef.current.on('useractive', syncProgressVisibility); playerRef.current.on('useractive', syncProgressVisibility);
playerRef.current.on('userinactive', syncProgressVisibility); playerRef.current.on('userinactive', syncProgressVisibility);
// Initial sync
syncProgressVisibility();
// Initial sync - hide until video starts // Initial sync - hide until video starts
progressEl.style.opacity = '0'; progressEl.style.opacity = '0';
progressEl.style.visibility = 'hidden'; progressEl.style.visibility = 'hidden';
@ -2638,8 +2636,8 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
playerRef.current.off('userinactive', syncProgressVisibility); playerRef.current.off('userinactive', syncProgressVisibility);
}; };
} }
}, 100); }
} }, 100);
// END: Move progress bar below control bar // END: Move progress bar below control bar

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

@ -12,12 +12,12 @@ const PlayerConfig = {
// 'default' - use Video.js default positioning (inside control bar) // 'default' - use Video.js default positioning (inside control bar)
// 'top' - progress bar above control bar // 'top' - progress bar above control bar
// 'bottom' - progress bar below control bar // 'bottom' - progress bar below control bar
nonTouchPosition: 'default', nonTouchPosition: 'top',
// Position for touch devices: 'top' or 'bottom' (no 'default' option) // Position for touch devices: 'top' or 'bottom' (no 'default' option)
// 'top' - progress bar above control bar // 'top' - progress bar above control bar
// 'bottom' - progress bar below control bar (native touch style) // 'bottom' - progress bar below control bar (native touch style)
touchPosition: 'top', touchPosition: 'bottom',
// Progress bar color (hex, rgb, or CSS color name) // Progress bar color (hex, rgb, or CSS color name)
color: '#019932', color: '#019932',