From 24e9fb4e40e6cfd2e37ba8e2a75e2b070d83c725 Mon Sep 17 00:00:00 2001
From: Yiannis Christodoulou <yiannis@web357.com>
Date: Sat, 11 Oct 2025 02:38:49 +0300
Subject: [PATCH] Keep progress bar always visible in VideoJSPlayer

Updated the logic to ensure the progress bar remains visible even when the control bar is hidden, except for embed players where it is hidden with controls. Also cleaned up hls_info mock data and improved initial progress bar visibility handling.
---
 .../components/video-player/VideoJSPlayer.jsx | 35 ++++++++++---------
 1 file changed, 19 insertions(+), 16 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 004a3fe5..5a4be54e 100644
--- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
+++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
@@ -1250,7 +1250,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                           media_type: 'video',
                           original_media_url:
                               '/media/original/user/markos/db52140de7204022a1e5f08e078b4ec6.UniversityofCopenhagenMærskTower.mp4',
-                          _hls_info: {
+                          hls_info: {
                               master_file: '/media/hls/5073e97457004961a163c5b504e2d7e8/master.m3u8',
                               '240_iframe': '/media/hls/5073e97457004961a163c5b504e2d7e8/media-1/iframes.m3u8',
                               '480_iframe': '/media/hls/5073e97457004961a163c5b504e2d7e8/media-2/iframes.m3u8',
@@ -1263,7 +1263,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                               '144_playlist': '/media/hls/5073e97457004961a163c5b504e2d7e8/media-4/stream.m3u8',
                               '360_playlist': '/media/hls/5073e97457004961a163c5b504e2d7e8/media-5/stream.m3u8',
                           },
-                          hls_info: {},
+                          // hls_info: {},
                           /* hls_info: {
                               master_file: '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/master.m3u8',
                               '240_iframe': '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/media-1/iframes.m3u8',
@@ -2731,19 +2731,26 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                             // Also store on player instance for sprite preview access
                             playerRef.current.customComponents = customComponents.current;
 
-                            // Hide/show progress bar with control bar based on user activity
-
+                            // Keep progress bar always visible like the control bar
                             const syncProgressVisibility = () => {
                                 const isControlBarVisible =
                                     controlBar.hasClass('vjs-visible') ||
                                     !playerRef.current.hasClass('vjs-user-inactive');
 
+                                // Always show progress bar when control bar is visible
                                 if (isControlBarVisible) {
                                     progressEl.style.opacity = '1';
                                     progressEl.style.visibility = 'visible';
                                 } else {
-                                    progressEl.style.opacity = '0';
-                                    progressEl.style.visibility = 'hidden';
+                                    // For embed players, hide with controls. For regular players, keep visible
+                                    if (isEmbedPlayer) {
+                                        progressEl.style.opacity = '0';
+                                        progressEl.style.visibility = 'hidden';
+                                    } else {
+                                        // Keep progress bar visible even when controls are hidden
+                                        progressEl.style.opacity = '1';
+                                        progressEl.style.visibility = 'visible';
+                                    }
                                 }
                             };
 
@@ -2751,18 +2758,14 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                             playerRef.current.on('useractive', syncProgressVisibility);
                             playerRef.current.on('userinactive', syncProgressVisibility);
 
-                            // Initial sync
-                            syncProgressVisibility();
+                            // Initial sync - show progress bar immediately
+                            progressEl.style.opacity = '1';
+                            progressEl.style.visibility = 'visible';
 
-                            // if (isEmbedPlayer) {
-                            // Initial sync - hide until video starts
-                            progressEl.style.opacity = '0';
-                            progressEl.style.visibility = 'hidden';
-                            // }
-
-                            // Show when video starts
+                            // Show when video starts (ensure it's always visible)
                             const showOnPlay = () => {
-                                syncProgressVisibility();
+                                progressEl.style.opacity = '1';
+                                progressEl.style.visibility = 'visible';
                                 playerRef.current.off('play', showOnPlay);
                                 playerRef.current.off('seeking', showOnPlay);
                             };