From ccfe93a0f497e2bb679e112c3ec8177d74aa8573 Mon Sep 17 00:00:00 2001 From: Yiannis Christodoulou Date: Thu, 2 Oct 2025 14:47:56 +0300 Subject: [PATCH] Hide HLS buffer segment boundaries and update dev mode --- frontend-tools/video-js/src/VideoJS.css | 8 ++++++++ .../src/components/video-player/VideoJSPlayer.jsx | 14 +++++++------- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/frontend-tools/video-js/src/VideoJS.css b/frontend-tools/video-js/src/VideoJS.css index 5ec146dc..6a5c23ce 100644 --- a/frontend-tools/video-js/src/VideoJS.css +++ b/frontend-tools/video-js/src/VideoJS.css @@ -524,6 +524,14 @@ html { background: rgba(255, 255, 255, 0.5) !important; } +/* Hide HLS buffer segment boundaries while keeping overall load progress */ +/* Target only the HLS buffer segment divs (they have data-start and data-end attributes) */ +.vjs-load-progress > div[data-start][data-end] { + background: transparent !important; + border: none !important; + box-shadow: none !important; +} + .video-js .vjs-progress-control { position: absolute !important; bottom: 42px !important; /* Moved up to prevent overlap with controls */ 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 8b687749..14542020 100644 --- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx +++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx @@ -34,7 +34,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) { }, []); // Environment-based development mode configuration - const isDevMode = false; // import.meta.env.VITE_DEV_MODE === 'true' || window.location.hostname.includes('vercel.app'); + const isDevMode = import.meta.env.VITE_DEV_MODE === 'true' || window.location.hostname.includes('vercel.app'); // Safely access window.MEDIA_DATA with fallback using useMemo const mediaData = useMemo( () => @@ -50,17 +50,17 @@ function VideoJSPlayer({ videoId = 'default-video' }) { url: 'https://videojs.mediacms.io/view?m=meivs1H3R', poster_url: '/media/original/thumbnails/user/markos/d6ae9093cb1648529432f38ee1198200_6BfyhyM.video.mp4.jpg', - chapter_data: [], - __chapter_data: [ + + chapter_data: [ { startTime: '00:00:00.000', - endTime: '00:00:08.295', + endTime: '00:00:02.295', chapterTitle: 'A1 Lorem ipsum dolor sit amet consectetur adipisicing elit.', }, - { startTime: '00:00:08.295', endTime: '00:00:15.590', chapterTitle: 'A2 of Marine Life' }, + { startTime: '00:00:02.295', endTime: '00:00:04.590', chapterTitle: 'A2 of Marine Life' }, { - startTime: '00:00:15.590', - endTime: '00:00:22.885', + startTime: '00:00:04.590', + endTime: '00:00:06.885', chapterTitle: 'A3 Reef Ecosystems', }, ],