From 15c85c1c108de689356740dff2074e2cd67d029c Mon Sep 17 00:00:00 2001
From: Yiannis Christodoulou <yiannis@web357.com>
Date: Thu, 9 Oct 2025 16:34:19 +0300
Subject: [PATCH] Refactor progress bar positioning for touch and non-touch
 devices

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.
---
 .../components/video-player/VideoJSPlayer.jsx | 28 ++++++++++++-------
 .../video-js/src/config/playerConfig.js       | 14 +++++++---
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
index 24354132..c1bedfc1 100644
--- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
+++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
@@ -2516,8 +2516,21 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                     }, 100);
                     // 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)
-                    if (PlayerConfig.progressBar.position === 'bottom' || PlayerConfig.progressBar.position === 'top') {
+                    if (actualPosition === 'bottom' || actualPosition === 'top') {
                         setTimeout(() => {
                             if (progressControl && progressControl.el() && controlBar && controlBar.el()) {
                                 const progressEl = progressControl.el();
@@ -2539,13 +2552,13 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                                 // Insert wrapper before control bar
                                 controlBarEl.parentNode.insertBefore(wrapper, controlBarEl);
 
-                                // Position elements based on config
-                                if (PlayerConfig.progressBar.position === 'top') {
+                                // Position elements based on actual resolved position
+                                if (actualPosition === 'top') {
                                     // Progress bar above control bar
                                     wrapper.appendChild(progressEl);
                                     wrapper.appendChild(controlBarEl);
                                 } else {
-                                    // Progress bar below control bar (default/native style)
+                                    // Progress bar below control bar (bottom/native style)
                                     wrapper.appendChild(controlBarEl);
                                     wrapper.appendChild(progressEl);
                                 }
@@ -2797,12 +2810,7 @@ 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() &&
-                        (PlayerConfig.progressBar.position === 'top' || PlayerConfig.progressBar.position === 'bottom')
-                    ) {
+                    if (controlBar && customRemainingTime && customRemainingTime.el()) {
                         // Create spacer element
                         const spacer = document.createElement('div');
                         spacer.className = 'vjs-spacer-control vjs-control';
diff --git a/frontend-tools/video-js/src/config/playerConfig.js b/frontend-tools/video-js/src/config/playerConfig.js
index 9d86e3dc..699cbe21 100644
--- a/frontend-tools/video-js/src/config/playerConfig.js
+++ b/frontend-tools/video-js/src/config/playerConfig.js
@@ -4,14 +4,20 @@
  */
 
 const PlayerConfig = {
-    nativeControlsForTouch: true,
+    nativeControlsForTouch: false,
 
     // Progress bar configuration
     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
-        // 'bottom' - progress bar below control bar (default/native style)
-        position: 'default',
+        // 'bottom' - progress bar below control bar
+        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)
         color: '#019932',