fix: Small player size optimization - 2 items horizontally for better title readability

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

@@ -53,42 +53,95 @@
     justify-content: center !important; /* Center the grid vertically */
 }
 
-/* Small embed height optimization - 2 items horizontally for better title readability */
+/* Small player size optimization - 2 items horizontally for better title readability */
-@media (max-height: 500px) {
+/* This applies to both embed and regular players when they're small */
-    #page-embed .video-js-root-embed .vjs-related-videos-grid {
+.vjs-end-screen-overlay.vjs-small-player .vjs-related-videos-grid {
     grid-template-columns: repeat(2, 1fr) !important;
     grid-template-rows: 1fr !important;
     gap: 20px !important;
     max-width: 600px; /* Limit width for better proportions */
 }
 
-    #page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay {
+.vjs-end-screen-overlay.vjs-small-player {
+    height: calc(100% - 60px) !important;
+    padding: 30px !important;
+}
+
+/* Hide items beyond the first 2 for small players */
+.vjs-end-screen-overlay.vjs-small-player .vjs-related-video-item:nth-child(n + 3) {
+    display: none !important;
+}
+
+/* Embed-specific adjustments for small sizes */
+#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay.vjs-small-player {
     height: calc(100vh - 60px) !important;
     padding: 80px 30px 30px 30px !important;
 }
 
-    /* Hide items beyond the first 2 */
+/* Fallback media query for cases where class detection might not work */
-    #page-embed .video-js-root-embed .vjs-related-video-item:nth-child(n + 3) {
+@media (max-height: 500px), (max-width: 600px) {
+    .vjs-related-videos-grid {
+        grid-template-columns: repeat(2, 1fr) !important;
+        grid-template-rows: 1fr !important;
+        gap: 20px !important;
+        max-width: 600px;
+    }
+
+    .vjs-end-screen-overlay {
+        height: calc(100% - 60px) !important;
+        padding: 30px !important;
+    }
+
+    .vjs-related-video-item:nth-child(n + 3) {
         display: none !important;
     }
+
+    #page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay {
+        height: calc(100vh - 60px) !important;
+        padding: 80px 30px 30px 30px !important;
+    }
 }
 
-/* Very small embed height - further optimize spacing */
+/* Very small player size - further optimize spacing (class-based detection) */
-@media (max-height: 400px) {
+.vjs-end-screen-overlay.vjs-very-small-player .vjs-related-videos-grid {
-    #page-embed .video-js-root-embed .vjs-related-videos-grid {
     gap: 15px !important;
-        max-width: 500px;
+    max-width: 500px !important;
+}
+
+.vjs-end-screen-overlay.vjs-very-small-player {
+    height: calc(100% - 50px) !important;
+    padding: 25px !important;
+}
+
+.vjs-end-screen-overlay.vjs-very-small-player .vjs-related-video-item {
+    min-height: 80px !important;
+}
+
+#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay.vjs-very-small-player {
+    height: calc(100vh - 50px) !important;
+    padding: 60px 25px 25px 25px !important;
+}
+
+/* Fallback media query for very small sizes */
+@media (max-height: 400px), (max-width: 400px) {
+    .vjs-related-videos-grid {
+        gap: 15px !important;
+        max-width: 500px !important;
+    }
+
+    .vjs-end-screen-overlay {
+        height: calc(100% - 50px) !important;
+        padding: 25px !important;
+    }
+
+    .vjs-related-video-item {
+        min-height: 80px !important;
     }
 
     #page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay {
         height: calc(100vh - 50px) !important;
         padding: 60px 25px 25px 25px !important;
     }
-
-    /* Ensure only 2 items and optimize their size */
-    #page-embed .video-js-root-embed .vjs-related-video-item {
-        min-height: 80px !important;
-    }
 }
 
 /* Ensure controls stay visible over the black background */

frontend-tools/video-js/src/components/overlays/EndScreenOverlay.js

@@ -25,8 +25,22 @@ class EndScreenOverlay extends Component {
         const maxVideos = this.getMaxVideosForScreen();
         const videosToShow = relatedVideos.slice(0, maxVideos);
 
+        // Determine if player is small and add appropriate class
+        const playerEl = this.player().el();
+        const playerWidth = playerEl ? playerEl.offsetWidth : window.innerWidth;
+        const playerHeight = playerEl ? playerEl.offsetHeight : window.innerHeight;
+        const isSmallPlayer = playerHeight <= 500 || playerWidth <= 600;
+        const isVerySmallPlayer = playerHeight <= 400 || playerWidth <= 400;
+
+        let overlayClasses = 'vjs-end-screen-overlay';
+        if (isVerySmallPlayer) {
+            overlayClasses += ' vjs-very-small-player vjs-small-player';
+        } else if (isSmallPlayer) {
+            overlayClasses += ' vjs-small-player';
+        }
+
         const overlay = super.createEl('div', {
-            className: 'vjs-end-screen-overlay',
+            className: overlayClasses,
         });
 
         // Create grid container
@@ -207,8 +221,10 @@ class EndScreenOverlay extends Component {
     }
 
     getMaxVideosForScreen() {
-        const width = window.innerWidth;
+        // Get actual player dimensions instead of window dimensions
-        const height = window.innerHeight;
+        const playerEl = this.player().el();
+        const playerWidth = playerEl ? playerEl.offsetWidth : window.innerWidth;
+        const playerHeight = playerEl ? playerEl.offsetHeight : window.innerHeight;
 
         // Check if this is an embed player
         const playerId = this.player().id() || this.player().options_.id;
@@ -217,19 +233,21 @@ class EndScreenOverlay extends Component {
             document.getElementById('page-embed') ||
             window.location.pathname.includes('embed');
 
-        // For embed players with small height, limit to 2 items for better readability
+        // For small player sizes, limit to 2 items for better readability
-        if (isEmbedPlayer && height <= 500) {
+        // This works for both embed and regular players when they're small
-            return 2; // 2x1 grid for small embed heights
+        if (playerHeight <= 500 || playerWidth <= 600) {
+            return 2; // 2x1 grid for small player sizes
         }
 
-        if (width >= 1200) {
+        // Use player width for responsive decisions
-            return 12; // 4x3 grid for large desktop
+        if (playerWidth >= 1200) {
-        } else if (width >= 1024) {
+            return 12; // 4x3 grid for large player
-            return 9; // 3x3 grid for desktop
+        } else if (playerWidth >= 1024) {
-        } else if (width >= 768) {
+            return 9; // 3x3 grid for desktop-sized player
-            return 6; // 3x2 grid for tablet
+        } else if (playerWidth >= 768) {
+            return 6; // 3x2 grid for tablet-sized player
         } else {
-            return 4; // 2x2 grid for mobile
+            return 4; // 2x2 grid for mobile-sized player
         }
     }