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

Improve mobile/touch grid detection in EndScreenOverlay

Browse Source 
Enhanced mobile and touch device detection logic for grid configuration, ensuring swiper is always used on mobile or touch devices. Increased grid gap for better spacing and updated conditions to prioritize user experience on small screens and touch devices.
This commit is contained in:
Yiannis Christodoulou 2025-10-26 11:25:35 +02:00
parent 748e95da9b
commit 9c5e8f4bd7
1 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -190,7 +190,7 @@ class EndScreenOverlay extends Component {
page.style.display = 'grid'; page.style.display = 'grid';
page.style.gridTemplateColumns = `repeat(${columns}, 1fr)`; page.style.gridTemplateColumns = `repeat(${columns}, 1fr)`;
page.style.gridTemplateRows = `repeat(${gridRows}, 1fr)`; page.style.gridTemplateRows = `repeat(${gridRows}, 1fr)`;
page.style.gap = '8px'; page.style.gap = '12px'; // Increased gap for better spacing
page.style.scrollSnapAlign = 'start'; page.style.scrollSnapAlign = 'start';
page.style.boxSizing = 'border-box'; page.style.boxSizing = 'border-box';
page.style.alignContent = 'stretch'; page.style.alignContent = 'stretch';
@ -252,11 +252,16 @@ class EndScreenOverlay extends Component {
const isScreenLandscape = screenWidth > screenHeight; const isScreenLandscape = screenWidth > screenHeight;
const isLandscape = playerWidth > playerHeight; const isLandscape = playerWidth > playerHeight;
const isMobile = playerWidth < 700;
// Detect mobile/touch devices - should always show swiper
// Check both width and touch capability for better detection
const isTouchDevice = this.isTouchDevice;
const isSmallScreen = screenWidth < 700 || playerWidth < 700;
const isMobileOrTouch = isTouchDevice || isSmallScreen;
// For mobile, prioritize screen orientation over player dimensions // For mobile, prioritize screen orientation over player dimensions
// Only consider it landscape if BOTH screen and player are in landscape // Only consider it landscape if BOTH screen and player are in landscape
const isDefinitelyLandscape = isMobile ? isScreenLandscape && isLandscape : isLandscape; const isDefinitelyLandscape = isMobileOrTouch ? isScreenLandscape && isLandscape : isLandscape;
console.log('Grid Config:', { console.log('Grid Config:', {
screenWidth, screenWidth,
@ -268,16 +273,18 @@ class EndScreenOverlay extends Component {
maxRows, maxRows,
isLandscape, isLandscape,
isDefinitelyLandscape, isDefinitelyLandscape,
isMobile, isTouchDevice,
isSmallScreen,
isMobileOrTouch,
}); });
// Enhanced grid configuration to fill all available space // Enhanced grid configuration to fill all available space
// Check mobile conditions first to prevent being caught by desktop breakpoints // Check mobile/touch conditions first - swiper should ALWAYS be used on mobile/touch devices
if (isMobile && isDefinitelyLandscape) { if (isMobileOrTouch && isDefinitelyLandscape) {
// Mobile landscape: show 2x2 grid (4 items total) with swiper for pagination // Mobile/Touch landscape: show 2x2 grid (4 items total) with swiper for pagination
return { columns: 2, maxVideos: 12, useSwiper: true, itemsPerView: 4, gridRows: 2 }; return { columns: 2, maxVideos: 12, useSwiper: true, itemsPerView: 4, gridRows: 2 };
} else if (isMobile) { } else if (isMobileOrTouch) {
// Mobile portrait: show 2 items in single row swiper mode // Mobile/Touch portrait: show 2 items in single row swiper mode
return { columns: 2, maxVideos: 12, useSwiper: true, itemsPerView: 2, gridRows: 1 }; return { columns: 2, maxVideos: 12, useSwiper: true, itemsPerView: 2, gridRows: 1 };
} else if (playerWidth >= 1600) { } else if (playerWidth >= 1600) {
const columns = 5; const columns = 5;