Restored to '3905f52571b4fa7e048e16d7a3b94ee66307d072'

Replit-Restored-To: 3905f52571

client/src/pages/videos.tsx

@@ -1,13 +1,24 @@
 import { useQuery } from "@tanstack/react-query";
-import { Link } from "wouter";
+import { Link, useLocation, useSearch } from "wouter";
 import { type Article } from "@shared/schema";
 import { format } from "date-fns";
 import { de } from "date-fns/locale";
-import { Play, ArrowLeft } from "lucide-react";
+import { usePageMeta } from "@/hooks/use-page-meta";
+import { Play, ArrowLeft, ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import Header from "@/components/header";
 import Footer from "@/components/footer";
 import { ArticleCardAd } from "@/components/adsense";
+import { useEffect } from "react";
+
+interface PaginatedResponse {
+  articles: Article[];
+  total: number;
+  page: number;
+  totalPages: number;
+  hasMore: boolean;
+}
 
 function VideoCard({ article }: { article: Article }) {
   const thumbSrc = article.coverImage
@@ -61,10 +72,49 @@ function VideoCardSkeleton() {
 }
 
 export default function VideosPage() {
-  const { data: articles, isLoading } = useQuery<Article[]>({
-    queryKey: ["/api/articles/category/Video"],
+  usePageMeta("Volksmusik & Schlager Videos", "Musikvideos und Live-Auftritte aus der Volksmusik- und Schlagerszene bei FOLX TV.");
+
+  const searchString = useSearch();
+  const [, setLocation] = useLocation();
+  const params = new URLSearchParams(searchString);
+  const currentPage = Math.max(1, parseInt(params.get("page") || "1"));
+  const limit = 12;
+
+  const { data, isLoading } = useQuery<PaginatedResponse>({
+    queryKey: [`/api/articles/category/Video?page=${currentPage}&limit=${limit}`],
   });
 
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  }, [currentPage]);
+
+  const goToPage = (page: number) => {
+    if (page === 1) {
+      setLocation("/videos");
+    } else {
+      setLocation(`/videos?page=${page}`);
+    }
+  };
+
+  const totalPages = data?.totalPages || 1;
+  const articles = data?.articles || [];
+
+  const getPageNumbers = () => {
+    const pages: (number | "...")[] = [];
+    if (totalPages <= 7) {
+      for (let i = 1; i <= totalPages; i++) pages.push(i);
+    } else {
+      pages.push(1);
+      if (currentPage > 3) pages.push("...");
+      const start = Math.max(2, currentPage - 1);
+      const end = Math.min(totalPages - 1, currentPage + 1);
+      for (let i = start; i <= end; i++) pages.push(i);
+      if (currentPage < totalPages - 2) pages.push("...");
+      pages.push(totalPages);
+    }
+    return pages;
+  };
+
   return (
     <div className="min-h-screen bg-background">
       <Header />
@@ -76,24 +126,70 @@ export default function VideosPage() {
           </button>
         </Link>
 
+        <h1 className="text-2xl font-bold text-foreground mb-6" data-testid="text-videos-title">
+          Videos
+        </h1>
+
         {isLoading ? (
           <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
-            {Array.from({ length: 4 }).map((_, i) => (
+            {Array.from({ length: 8 }).map((_, i) => (
               <VideoCardSkeleton key={i} />
             ))}
           </div>
-        ) : articles && articles.length > 0 ? (
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
-            {articles.flatMap((article, index) => {
-              const items = [
-                <VideoCard key={article.id} article={article} />,
-              ];
-              if (index === 2) {
-                items.push(<ArticleCardAd key="ad-video-1" />);
-              }
-              return items;
-            })}
-          </div>
+        ) : articles.length > 0 ? (
+          <>
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
+              {articles.flatMap((article, index) => {
+                const items: JSX.Element[] = [
+                  <VideoCard key={article.id} article={article} />,
+                ];
+                if ((index + 1) % 3 === 0) {
+                  items.push(<ArticleCardAd key={`ad-video-${index}`} />);
+                }
+                return items;
+              })}
+            </div>
+
+            {totalPages > 1 && (
+              <nav className="flex items-center justify-center gap-1 mt-10" data-testid="pagination-videos">
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={() => goToPage(currentPage - 1)}
+                  disabled={currentPage <= 1}
+                  data-testid="button-prev-page"
+                >
+                  <ChevronLeft className="w-4 h-4" />
+                </Button>
+
+                {getPageNumbers().map((p, i) =>
+                  p === "..." ? (
+                    <span key={`ellipsis-${i}`} className="px-2 text-muted-foreground">...</span>
+                  ) : (
+                    <Button
+                      key={p}
+                      variant={p === currentPage ? "default" : "outline"}
+                      size="sm"
+                      onClick={() => goToPage(p as number)}
+                      data-testid={`button-page-${p}`}
+                    >
+                      {p}
+                    </Button>
+                  )
+                )}
+
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={() => goToPage(currentPage + 1)}
+                  disabled={currentPage >= totalPages}
+                  data-testid="button-next-page"
+                >
+                  <ChevronRight className="w-4 h-4" />
+                </Button>
+              </nav>
+            )}
+          </>
         ) : (
           <div className="text-center py-16">
             <p className="text-muted-foreground">Noch keine Videos vorhanden.</p>