From fa85e5768a102896431c3f0256af7ea022bf164c Mon Sep 17 00:00:00 2001 From: Yiannis Christodoulou Date: Tue, 30 Sep 2025 10:54:42 +0300 Subject: [PATCH] fix: Responsive grid adjustments for different screen sizes --- .../src/components/controls/SeekIndicator.js | 8 +- .../components/overlays/EndScreenOverlay.css | 198 +++++++++++++++++- .../components/video-player/VideoJSPlayer.jsx | 1 + frontend-tools/video-js/src/styles/embed.css | 6 +- 4 files changed, 197 insertions(+), 16 deletions(-) diff --git a/frontend-tools/video-js/src/components/controls/SeekIndicator.js b/frontend-tools/video-js/src/components/controls/SeekIndicator.js index f9b4f18f..b9d2e3c5 100644 --- a/frontend-tools/video-js/src/components/controls/SeekIndicator.js +++ b/frontend-tools/video-js/src/components/controls/SeekIndicator.js @@ -174,11 +174,11 @@ class SeekIndicator extends Component { // Clear any text content in the text element textEl.textContent = ''; - // Use fixed positioning relative to viewport + // Position relative to video player container, not viewport el.style.cssText = ` - position: fixed !important; - top: 50vh !important; - left: 50vw !important; + position: absolute !important; + top: 50% !important; + left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 10000 !important; display: flex !important; diff --git a/frontend-tools/video-js/src/components/overlays/EndScreenOverlay.css b/frontend-tools/video-js/src/components/overlays/EndScreenOverlay.css index 7bf04727..11ac7b2a 100644 --- a/frontend-tools/video-js/src/components/overlays/EndScreenOverlay.css +++ b/frontend-tools/video-js/src/components/overlays/EndScreenOverlay.css @@ -5,15 +5,16 @@ top: 0; left: 0; width: 100%; - height: calc(100% - 46px); + height: 100%; background: #000000; display: none; flex-direction: column; justify-content: center; align-items: center; - padding: 20px; + padding: 20px 20px 95px 20px; /* Bottom padding to avoid seekbar and controls */ box-sizing: border-box; - z-index: 4; + z-index: 9999; /* Maximum z-index to cover absolutely everything */ + overflow: hidden; /* No scrollbar, fit content within available space */ } /* Hide poster image when video ends and end screen is shown */ @@ -21,6 +22,106 @@ display: none !important; opacity: 0 !important; visibility: hidden !important; + z-index: -1 !important; + width: 0 !important; + height: 0 !important; +} + +/* Hide video element completely when ended */ +.video-js.vjs-ended video { + display: none !important; + opacity: 0 !important; + visibility: hidden !important; +} + +/* Ensure the overlay covers everything with maximum z-index */ +.video-js.vjs-ended .vjs-end-screen-overlay { + z-index: 99999 !important; + display: flex !important; +} + +/* Embed-specific full page overlay */ +#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay { + position: fixed !important; + top: 0 !important; + left: 0 !important; + width: 100vw !important; + height: 100vh !important; + z-index: 99999 !important; + display: flex !important; + padding-top: 80px !important; /* Add top padding to avoid covering title/avatar */ +} + +/* Ensure controls stay visible over the black background */ +.video-js.vjs-ended .vjs-control-bar { + z-index: 100000 !important; + position: absolute !important; + bottom: 0 !important; + left: 0 !important; + right: 0 !important; + width: 100% !important; + display: flex !important; + opacity: 1 !important; + visibility: visible !important; +} + +.video-js.vjs-ended .vjs-progress-control { + z-index: 100000 !important; + position: absolute !important; + bottom: 48px !important; + left: 0 !important; + right: 0 !important; + width: 100% !important; + display: block !important; + opacity: 1 !important; + visibility: visible !important; +} + +/* Embed-specific controls handling when ended */ +#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-control-bar { + position: fixed !important; + bottom: 0 !important; + left: 0 !important; + right: 0 !important; + width: 100vw !important; + z-index: 100000 !important; + display: flex !important; + opacity: 1 !important; + visibility: visible !important; +} + +#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-progress-control { + position: fixed !important; + bottom: 48px !important; + left: 0 !important; + right: 0 !important; + width: 100vw !important; + z-index: 100000 !important; + display: block !important; + opacity: 1 !important; + visibility: visible !important; +} + +/* Ensure embed info overlay (title/avatar) stays visible when ended */ +#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-embed-info-overlay { + z-index: 100001 !important; + display: flex !important; + opacity: 1 !important; + visibility: visible !important; +} + +/* Hide big play button when end screen is active */ +.video-js.vjs-ended .vjs-big-play-button { + display: none !important; + opacity: 0 !important; + visibility: hidden !important; +} + +/* Hide seek indicator (play icon) when end screen is active */ +.video-js.vjs-ended .vjs-seek-indicator { + display: none !important; + opacity: 0 !important; + visibility: hidden !important; } /* Make control bar and seekbar background black when video ends */ @@ -37,7 +138,34 @@ /* Also ensure the gradient overlay is black when ended */ .video-js.vjs-ended::after { - background: linear-gradient(transparent, #000000) !important; + background: #000000 !important; + background-image: none !important; +} + +/* Remove any white elements or gradients */ +.video-js.vjs-ended::before { + background: #000000 !important; + background-image: none !important; +} + +/* Ensure all VideoJS overlays are black but preserve seekbar colors */ +.video-js.vjs-ended .vjs-loading-spinner, +.video-js.vjs-ended .vjs-mouse-display { + background: #000000 !important; + background-image: none !important; +} + +/* Only change the background holder, preserve progress colors */ +.video-js.vjs-ended .vjs-progress-holder { + background: rgba(255, 255, 255, 0.3) !important; /* Keep original transparent background */ +} + +/* Hide any remaining VideoJS elements that might show white */ +.video-js.vjs-ended .vjs-tech, +.video-js.vjs-ended .vjs-poster-overlay { + display: none !important; + opacity: 0 !important; + visibility: hidden !important; } .vjs-related-videos-title { @@ -53,8 +181,8 @@ .vjs-related-videos-grid { display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 20px; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 15px; width: 100%; max-width: 100%; margin: 0; @@ -62,10 +190,10 @@ justify-items: stretch; align-items: stretch; justify-content: center; - align-content: center; + align-content: start; overflow: hidden; - height: auto; - grid-gap: 20px; /* Fallback for older browsers */ + height: 100%; + flex: 1; /* Fill available space */ } .vjs-related-video-item { @@ -79,6 +207,7 @@ border: 1px solid #333; aspect-ratio: 16/9; width: 100%; + min-height: 100px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } @@ -205,6 +334,57 @@ opacity: 1 !important; } +/* Responsive grid adjustments for different screen sizes */ +@media (max-width: 1200px) { + .vjs-related-videos-grid { + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 12px; + } + + .vjs-end-screen-overlay { + padding: 15px 15px 8px 15px; + } +} + +@media (max-width: 900px) { + .vjs-related-videos-grid { + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + gap: 10px; + } + + .vjs-end-screen-overlay { + padding: 10px 10px 5px 10px; + height: calc(100% - 85px); + } +} + +@media (max-width: 600px) { + .vjs-related-videos-grid { + grid-template-columns: repeat(2, 1fr); + gap: 8px; + } + + .vjs-end-screen-overlay { + padding: 8px; + height: calc(100% - 75px); + } + + .vjs-related-video-item { + min-height: 80px; + } +} + +@media (max-width: 400px) { + .vjs-related-videos-grid { + grid-template-columns: 1fr; + gap: 8px; + } + + .vjs-related-video-item { + min-height: 60px; + } +} + .video-js.vjs-ended .vjs-play-control { opacity: 1 !important; pointer-events: auto !important; 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 7e0454d8..f9d181c3 100644 --- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx +++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx @@ -1726,6 +1726,7 @@ function VideoJSPlayer({ videoId = 'default-video' }) { userActions: { // Enable/disable or customize click behavior click: true, + tap: true, // Enable/disable or customize double-click behavior (fullscreen toggle) doubleClick: true, diff --git a/frontend-tools/video-js/src/styles/embed.css b/frontend-tools/video-js/src/styles/embed.css index d43174d6..f699c96e 100644 --- a/frontend-tools/video-js/src/styles/embed.css +++ b/frontend-tools/video-js/src/styles/embed.css @@ -167,9 +167,9 @@ /* ===== EMBED-SPECIFIC BIG PLAY BUTTON POSITIONING ===== */ /* Ensure big play button stays centered in embed view regardless of window size */ #page-embed .video-js-root-embed .video-js .vjs-big-play-button { - position: fixed !important; - top: 50vh !important; - left: 50vw !important; + position: absolute !important; + top: 50% !important; + left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 1000 !important; pointer-events: auto !important;