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

Refactor progress bar positioning for touch and non-touch devices

Browse Source 
Updated VideoJSPlayer to determine progress bar position based on device type, using separate config options for touch and non-touch devices. PlayerConfig now has 'nonTouchPosition' and 'touchPosition' instead of a single 'position' property. Also set nativeControlsForTouch to false for consistent custom controls.
This commit is contained in:
Yiannis Christodoulou 2025-10-09 16:34:19 +03:00
parent 3031a04914
commit 15c85c1c10
2 changed files with 28 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2516,8 +2516,21 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
}, 100); }, 100);
// END: Apply control bar styling from config // END: Apply control bar styling from config
// Determine the actual position based on device type and config
const getActualPosition = () => {
if (isTouchDevice) {
// Touch devices: only 'top' or 'bottom' allowed
return PlayerConfig.progressBar.touchPosition;
} else {
// Non-touch devices: 'default', 'top', or 'bottom' allowed
return PlayerConfig.progressBar.nonTouchPosition;
}
};
const actualPosition = getActualPosition();
// BEGIN: Move progress bar below control bar (native touch style) // BEGIN: Move progress bar below control bar (native touch style)
if (PlayerConfig.progressBar.position === 'bottom' || PlayerConfig.progressBar.position === 'top') { if (actualPosition === 'bottom' || actualPosition === 'top') {
setTimeout(() => { setTimeout(() => {
if (progressControl && progressControl.el() && controlBar && controlBar.el()) { if (progressControl && progressControl.el() && controlBar && controlBar.el()) {
const progressEl = progressControl.el(); const progressEl = progressControl.el();
@ -2539,13 +2552,13 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
// Insert wrapper before control bar // Insert wrapper before control bar
controlBarEl.parentNode.insertBefore(wrapper, controlBarEl); controlBarEl.parentNode.insertBefore(wrapper, controlBarEl);
// Position elements based on config // Position elements based on actual resolved position
if (PlayerConfig.progressBar.position === 'top') { if (actualPosition === 'top') {
// Progress bar above control bar // Progress bar above control bar
wrapper.appendChild(progressEl); wrapper.appendChild(progressEl);
wrapper.appendChild(controlBarEl); wrapper.appendChild(controlBarEl);
} else { } else {
// Progress bar below control bar (default/native style) // Progress bar below control bar (bottom/native style)
wrapper.appendChild(controlBarEl); wrapper.appendChild(controlBarEl);
wrapper.appendChild(progressEl); wrapper.appendChild(progressEl);
} }
@ -2797,12 +2810,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
// END: Implement custom time display component // END: Implement custom time display component
// BEGIN: Add spacer to push right-side buttons to the right // BEGIN: Add spacer to push right-side buttons to the right
if ( if (controlBar && customRemainingTime && customRemainingTime.el()) {
controlBar &&
customRemainingTime &&
customRemainingTime.el() &&
(PlayerConfig.progressBar.position === 'top' || PlayerConfig.progressBar.position === 'bottom')
) {
// Create spacer element // Create spacer element
const spacer = document.createElement('div'); const spacer = document.createElement('div');
spacer.className = 'vjs-spacer-control vjs-control'; spacer.className = 'vjs-spacer-control vjs-control';

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

@ -4,14 +4,20 @@
*/ */
const PlayerConfig = { const PlayerConfig = {
nativeControlsForTouch: true, nativeControlsForTouch: false,
// Progress bar configuration // Progress bar configuration
progressBar: { progressBar: {
// Position: 'top' or 'bottom' // Position for non-touch devices: 'default', 'top', or 'bottom'
// '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 (default/native style) // 'bottom' - progress bar below control bar
position: 'default', nonTouchPosition: 'default',
// 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',
// Progress bar color (hex, rgb, or CSS color name) // Progress bar color (hex, rgb, or CSS color name)
color: '#019932', color: '#019932',