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

Keep progress bar always visible in VideoJSPlayer

Browse Source 
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.
This commit is contained in:
Yiannis Christodoulou 2025-10-11 02:38:49 +03:00
parent f787087531
commit 24e9fb4e40
1 changed files with 19 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1250,7 +1250,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
media_type: 'video', media_type: 'video',
original_media_url: original_media_url:
'/media/original/user/markos/db52140de7204022a1e5f08e078b4ec6.UniversityofCopenhagenMærskTower.mp4', '/media/original/user/markos/db52140de7204022a1e5f08e078b4ec6.UniversityofCopenhagenMærskTower.mp4',
_hls_info: { hls_info: {
master_file: '/media/hls/5073e97457004961a163c5b504e2d7e8/master.m3u8', master_file: '/media/hls/5073e97457004961a163c5b504e2d7e8/master.m3u8',
'240_iframe': '/media/hls/5073e97457004961a163c5b504e2d7e8/media-1/iframes.m3u8', '240_iframe': '/media/hls/5073e97457004961a163c5b504e2d7e8/media-1/iframes.m3u8',
'480_iframe': '/media/hls/5073e97457004961a163c5b504e2d7e8/media-2/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', '144_playlist': '/media/hls/5073e97457004961a163c5b504e2d7e8/media-4/stream.m3u8',
'360_playlist': '/media/hls/5073e97457004961a163c5b504e2d7e8/media-5/stream.m3u8', '360_playlist': '/media/hls/5073e97457004961a163c5b504e2d7e8/media-5/stream.m3u8',
}, },
hls_info: {}, // hls_info: {},
/* hls_info: { /* hls_info: {
master_file: '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/master.m3u8', master_file: '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/master.m3u8',
'240_iframe': '/media/hls/c1ab03cab3bb46b5854a5e217cfe3013/media-1/iframes.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 // Also store on player instance for sprite preview access
playerRef.current.customComponents = customComponents.current; 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 syncProgressVisibility = () => {
const isControlBarVisible = const isControlBarVisible =
controlBar.hasClass('vjs-visible') || controlBar.hasClass('vjs-visible') ||
!playerRef.current.hasClass('vjs-user-inactive'); !playerRef.current.hasClass('vjs-user-inactive');
// Always show progress bar when control bar is visible
if (isControlBarVisible) { if (isControlBarVisible) {
progressEl.style.opacity = '1'; progressEl.style.opacity = '1';
progressEl.style.visibility = 'visible'; progressEl.style.visibility = 'visible';
} else { } else {
progressEl.style.opacity = '0'; // For embed players, hide with controls. For regular players, keep visible
progressEl.style.visibility = 'hidden'; 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('useractive', syncProgressVisibility);
playerRef.current.on('userinactive', syncProgressVisibility); playerRef.current.on('userinactive', syncProgressVisibility);
// Initial sync // Initial sync - show progress bar immediately
syncProgressVisibility(); progressEl.style.opacity = '1';
progressEl.style.visibility = 'visible';
// if (isEmbedPlayer) { // Show when video starts (ensure it's always visible)
// Initial sync - hide until video starts
progressEl.style.opacity = '0';
progressEl.style.visibility = 'hidden';
// }
// Show when video starts
const showOnPlay = () => { const showOnPlay = () => {
syncProgressVisibility(); progressEl.style.opacity = '1';
progressEl.style.visibility = 'visible';
playerRef.current.off('play', showOnPlay); playerRef.current.off('play', showOnPlay);
playerRef.current.off('seeking', showOnPlay); playerRef.current.off('seeking', showOnPlay);
}; };