load more button and other device support

frontend/app.js

@@ -112,6 +112,7 @@ async function loadVideos() {
 
     try {
         isLoading = true;
+        updateLoadMoreState();
         const response = await fetch('/api/videos', {
             method: 'POST',
             headers: {
@@ -128,6 +129,7 @@ async function loadVideos() {
         console.error("Failed to load videos:", err);
     } finally {
         isLoading = false;
+        updateLoadMoreState();
     }
 }
 
@@ -179,6 +181,13 @@ async function initApp() {
         observer.observe(sentinel);
     }
 
+    const loadMoreBtn = document.getElementById('load-more-btn');
+    if (loadMoreBtn) {
+        loadMoreBtn.onclick = () => {
+            loadVideos();
+        };
+    }
+
     await loadVideos();
 }
 
@@ -263,6 +272,7 @@ function handleSearch(value) {
     renderedVideoIds.clear();
     const grid = document.getElementById('video-grid');
     if (grid) grid.innerHTML = "";
+    updateLoadMoreState();
     loadVideos();
 }
 
@@ -371,6 +381,7 @@ function resetAndReload() {
     renderedVideoIds.clear();
     const grid = document.getElementById('video-grid');
     if (grid) grid.innerHTML = "";
+    updateLoadMoreState();
     loadVideos();
 }
 
@@ -384,6 +395,13 @@ function ensureViewportFilled() {
     }
 }
 
+function updateLoadMoreState() {
+    const loadMoreBtn = document.getElementById('load-more-btn');
+    if (!loadMoreBtn) return;
+    loadMoreBtn.disabled = isLoading || !hasNextPage;
+    loadMoreBtn.style.display = hasNextPage ? 'flex' : 'none';
+}
+
 function renderMenu() {
     const session = getSession();
     const serverEntries = getServerEntries();