CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-11-07 07:58:53 -05:00
Code Issues Packages Projects Releases Wiki Activity

Hide progress bar until video starts playing

Browse Source 
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.
This commit is contained in:
Yiannis Christodoulou 2025-10-10 00:26:01 +03:00
parent bf27cbf559
commit d925bd0b5d
2 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2619,8 +2619,18 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
playerRef.current.on('useractive', syncProgressVisibility); playerRef.current.on('useractive', syncProgressVisibility);
playerRef.current.on('userinactive', syncProgressVisibility); playerRef.current.on('userinactive', syncProgressVisibility);
// Initial sync // Initial sync - hide until video starts
syncProgressVisibility(); 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 // Store cleanup function
customComponents.current.cleanupProgressVisibility = () => { customComponents.current.cleanupProgressVisibility = () => {

3
frontend-tools/video-js/src/styles/embed.css
View File

@ -76,9 +76,10 @@
/* ===== EMBED CONTROL BAR POSITIONING ===== */ /* ===== EMBED CONTROL BAR POSITIONING ===== */
/* Sticky controls for embed player - always at bottom of window */ /* 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; position: fixed !important;
bottom: 0 !important; bottom: 0 !important;
left: 0 !important; left: 0 !important;
right: 0 !important; right: 0 !important;
} }
*/