Make home more responsive depending on screen width

resources/js/responsive.js

@@ -0,0 +1,68 @@
+function updateGrid(grid) {
+    // Skip hidden grids
+    if (grid.offsetParent === null) {
+        return;
+    }
+
+    const items = [...grid.querySelectorAll('.episode-item')];
+
+    if (!items.length) {
+        return;
+    }
+
+    // Reset visibility first
+    items.forEach(item => {
+        item.style.display = '';
+    });
+
+    // Determine actual column count
+    const firstTop = items[0].offsetTop;
+
+    let columns = 0;
+
+    for (const item of items) {
+        if (item.offsetTop !== firstTop) {
+            break;
+        }
+
+        columns++;
+    }
+
+    const rows = parseInt(grid.dataset.rows || '2', 10);
+
+    const visibleItems = columns * rows;
+
+    items.forEach((item, index) => {
+        item.style.display = index < visibleItems
+            ? ''
+            : 'none';
+    });
+}
+
+function updateAllEpisodeGrids() {
+    document.querySelectorAll('.episode-grid').forEach(updateGrid);
+}
+
+const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            updateGrid(entry.target);
+        }
+    });
+});
+
+document.querySelectorAll('.episode-grid').forEach(grid => {
+    observer.observe(grid);
+});
+
+let resizeTimeout;
+
+window.addEventListener('resize', () => {
+    clearTimeout(resizeTimeout);
+
+    resizeTimeout = setTimeout(() => {
+        updateAllEpisodeGrids();
+    }, 100);
+});
+
+window.addEventListener('load', updateAllEpisodeGrids);