From d925bd0b5d1be101cf20bbb8b9969b2d02ee6866 Mon Sep 17 00:00:00 2001 From: Yiannis Christodoulou Date: Fri, 10 Oct 2025 00:26:01 +0300 Subject: [PATCH] Hide progress bar until video starts playing Updated VideoJSPlayer to initially hide the progress bar and only show it when the video starts playing or seeking. Also commented out fixed positioning for the control bar in embed.css, likely to adjust control bar behavior for embedded players. --- .../src/components/video-player/VideoJSPlayer.jsx | 14 ++++++++++++-- frontend-tools/video-js/src/styles/embed.css | 3 ++- 2 files changed, 14 insertions(+), 3 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 ffc80278..ace64416 100644 --- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx +++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx @@ -2619,8 +2619,18 @@ function VideoJSPlayer({ videoId = 'default-video' }) { playerRef.current.on('useractive', syncProgressVisibility); playerRef.current.on('userinactive', syncProgressVisibility); - // Initial sync - syncProgressVisibility(); + // Initial sync - hide until video starts + progressEl.style.opacity = '0'; + progressEl.style.visibility = 'hidden'; + + // Show when video starts + const showOnPlay = () => { + syncProgressVisibility(); + playerRef.current.off('play', showOnPlay); + playerRef.current.off('seeking', showOnPlay); + }; + playerRef.current.on('play', showOnPlay); + playerRef.current.on('seeking', showOnPlay); // Store cleanup function customComponents.current.cleanupProgressVisibility = () => { diff --git a/frontend-tools/video-js/src/styles/embed.css b/frontend-tools/video-js/src/styles/embed.css index b202c3b5..30a70118 100644 --- a/frontend-tools/video-js/src/styles/embed.css +++ b/frontend-tools/video-js/src/styles/embed.css @@ -76,9 +76,10 @@ /* ===== EMBED CONTROL BAR POSITIONING ===== */ /* Sticky controls for embed player - always at bottom of window */ -#page-embed .video-js-root-embed .video-js .vjs-control-bar { +/* #page-embed .video-js-root-embed .video-js .vjs-control-bar { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; } + */