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

Refine progress bar positioning and styling in VideoJSPlayer

Browse Source 
Enhanced the logic for moving and styling the progress bar relative to the control bar, including improved style resets and visibility transitions. Updated the default non-touch progress bar position from 'top' to 'bottom' in playerConfig.js for a more native touch style experience.
This commit is contained in:
Yiannis Christodoulou 2025-10-10 01:20:09 +03:00
parent 4acdec7474
commit 59f65bdd21
2 changed files with 88 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2546,11 +2546,18 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
// BEGIN: Move progress bar below control bar (native touch style) // BEGIN: Move progress bar below control bar (native touch style)
setTimeout(() => { setTimeout(() => {
if (actualPosition === 'bottom' || actualPosition === 'top') { if (
if (progressControl && progressControl.el() && controlBar && controlBar.el()) { (actualPosition === 'bottom' || actualPosition === 'top') &&
progressControl &&
progressControl.el() &&
controlBar &&
controlBar.el()
) {
const progressEl = progressControl.el(); const progressEl = progressControl.el();
const controlBarEl = controlBar.el(); const controlBarEl = controlBar.el();
controlBarEl.style.gap = 0; controlBarEl.style.gap = 0;
controlBarEl.style.background = 'none';
progressEl.style.background = 'none';
// Remove progress control from control bar // Remove progress control from control bar
controlBar.removeChild(progressControl); controlBar.removeChild(progressControl);
@ -2597,6 +2604,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
customComponents.current.controlsWrapper = wrapper; customComponents.current.controlsWrapper = wrapper;
// Hide/show progress bar with control bar based on user activity // Hide/show progress bar with control bar based on user activity
const syncProgressVisibility = () => { const syncProgressVisibility = () => {
const isControlBarVisible = const isControlBarVisible =
controlBar.hasClass('vjs-visible') || controlBar.hasClass('vjs-visible') ||
@ -2617,9 +2625,12 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
// Initial sync // Initial sync
syncProgressVisibility(); syncProgressVisibility();
if (isEmbedPlayer) {
// 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';
}
// Show when video starts // Show when video starts
const showOnPlay = () => { const showOnPlay = () => {
@ -2636,7 +2647,6 @@ 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

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

@ -12,7 +12,7 @@ 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: 'top', nonTouchPosition: 'bottom',
// 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