From acdf11d59740b1aca672df14236eba239862ae42 Mon Sep 17 00:00:00 2001
From: Yiannis Christodoulou <yiannis@web357.com>
Date: Thu, 9 Oct 2025 18:03:46 +0300
Subject: [PATCH] Refactor progress bar styling and update config

Progress bar color styling is now always applied, not just for custom positions, by moving the relevant code outside the position check. Updated playerConfig.js to set touchPosition to 'top' and fixed the control bar backgroundColor value.
---
 .../components/video-player/VideoJSPlayer.jsx | 54 +++++++++++--------
 .../video-js/src/config/playerConfig.js       |  4 +-
 2 files changed, 35 insertions(+), 23 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 c1bedfc1..9ce262e2 100644
--- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
+++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
@@ -2516,6 +2516,33 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                     }, 100);
                     // END: Apply control bar styling from config
 
+                    // BEGIN: Apply progress bar colors from config (always applied)
+                    setTimeout(() => {
+                        const progressControl = playerRef.current.getChild('controlBar')?.getChild('progressControl');
+                        const progressEl = progressControl?.el();
+
+                        if (progressEl) {
+                            // Style the progress holder and bars with config colors
+                            const progressHolder = progressEl.querySelector('.vjs-progress-holder');
+                            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);
+                    // END: Apply progress bar colors from config
+
                     // Determine the actual position based on device type and config
                     const getActualPosition = () => {
                         if (isTouchDevice) {
@@ -2577,26 +2604,6 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                                 controlBarEl.style.position = 'relative';
                                 controlBarEl.style.width = '100%';
 
-                                // Style the progress holder and bars with config colors
-                                const progressHolder = progressEl.querySelector('.vjs-progress-holder');
-                                if (progressHolder) {
-                                    progressHolder.style.height = '100%';
-                                    progressHolder.style.margin = '0';
-                                    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;
-                                }
-
                                 // Store reference for cleanup
                                 customComponents.current.movedProgressControl = progressControl;
                                 customComponents.current.controlsWrapper = wrapper;
@@ -2810,7 +2817,12 @@ 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()) {
+                    if (
+                        controlBar &&
+                        customRemainingTime &&
+                        customRemainingTime.el() &&
+                        PlayerConfig.progressBar.nonTouchPosition !== 'default'
+                    ) {
                         // 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 699cbe21..1d9eabfc 100644
--- a/frontend-tools/video-js/src/config/playerConfig.js
+++ b/frontend-tools/video-js/src/config/playerConfig.js
@@ -17,7 +17,7 @@ const PlayerConfig = {
         // 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',
+        touchPosition: 'top',
 
         // Progress bar color (hex, rgb, or CSS color name)
         color: '#019932',
@@ -32,7 +32,7 @@ const PlayerConfig = {
     // Control bar configuration
     controlBar: {
         // Background color
-        backgroundColor: '#FF00000', // 'rgba(0, 0, 0, 0.7)',
+        backgroundColor: 'rgba(0, 0, 0, 0.7)',
 
         // Height in em units
         height: 3,