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

fix: Responsive grid adjustments for different screen sizes

Browse Source
This commit is contained in:
Yiannis Christodoulou 2025-09-30 10:54:42 +03:00
parent 5277476921
commit fa85e5768a
4 changed files with 197 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend-tools/video-js/src/components/controls/SeekIndicator.js
View File

@ -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;

198
frontend-tools/video-js/src/components/overlays/EndScreenOverlay.css
View File

@ -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;

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

@ -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,

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

@ -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;