From b8383291746f342352cdd314235234d5a4011ee2 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Mon, 1 Sep 2025 20:53:21 +0000
Subject: [PATCH] Improve video display and pagination on the history page

Refactor the `GeschichteLiedPage` component to display videos with descriptions and update pagination logic for better user experience.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 890577b1-c154-40a4-a177-a0c6d55320c3
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/890577b1-c154-40a4-a177-a0c6d55320c3/2xHHKQn
---
 client/src/pages/GeschichteLiedPage.tsx | 139 +++++++++++++++---------
 1 file changed, 88 insertions(+), 51 deletions(-)

diff --git a/client/src/pages/GeschichteLiedPage.tsx b/client/src/pages/GeschichteLiedPage.tsx
index 8ce503e..1d7d516 100644
--- a/client/src/pages/GeschichteLiedPage.tsx
+++ b/client/src/pages/GeschichteLiedPage.tsx
@@ -179,59 +179,96 @@ export default function GeschichteLiedPage() {
           </div>
         </div>
 
-        {geschichteVideos.length === 0 ? (
-          <div className="text-center py-12">
-            <div className="text-gray-400 text-xl mb-4">
-              Keine Videos in der Sammlung "Die Geschichte des Liedes" gefunden
-            </div>
-            <p className="text-gray-500">
-              Überprüfen Sie später, ob neue Inhalte hinzugefügt wurden.
-            </p>
-          </div>
-        ) : (
-          <>
-            {/* Video Grid */}
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-8">
-              {currentVideos.map((video) => (
-                <VideoCard
-                  key={video.id}
-                  video={video}
-                  onClick={() => handleVideoClick(video)}
-                />
-              ))}
-            </div>
-
-            {/* Pagination */}
-            {totalPages > 1 && (
-              <div className="flex justify-center items-center space-x-4">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
-                  disabled={currentPage === 1}
-                  className="bg-white/10 border-white/20 text-white hover:bg-white/20"
-                >
-                  <ChevronLeft className="w-4 h-4" />
-                  Zurück
-                </Button>
+        {/* Video List with Descriptions */}
+        <div className="space-y-6">
+          {currentVideos.map((video, index) => (
+            <div key={video.id} className="bg-black/20 backdrop-blur-sm rounded-lg p-4">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                {/* Video Card */}
+                <div className="md:col-span-1">
+                  <VideoCard
+                    video={video}
+                    onClick={handleVideoClick}
+                    className="w-full hover:scale-102 transition-all duration-300 rounded-lg overflow-hidden"
+                    hideOverlay={true}
+                  />
+                </div>
                 
-                <span className="text-sm text-gray-400">
-                  Seite {currentPage} von {totalPages}
-                </span>
-                
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
-                  disabled={currentPage === totalPages}
-                  className="bg-white/10 border-white/20 text-white hover:bg-white/20"
-                >
-                  Weiter
-                  <ChevronRight className="w-4 h-4" />
-                </Button>
+                {/* Video Description */}
+                <div className="md:col-span-2 space-y-3">
+                  <h3 className="text-xl font-bold text-white">{video.title}</h3>
+                  <p className="text-bunny-light text-sm leading-relaxed">
+                    {video.description || "Keine Beschreibung für diese Sendung verfügbar."}
+                  </p>
+                  <div className="flex items-center gap-4 text-xs text-bunny-muted">
+                    <span>{Math.floor(video.duration / 60)}:{(video.duration % 60).toString().padStart(2, '0')} min</span>
+                    <span>{video.views} Aufrufe</span>
+                  </div>
+                </div>
               </div>
-            )}
-          </>
+            </div>
+          ))}
+
+          {geschichteVideos.length === 0 && (
+            <div className="text-center py-16">
+              <p className="text-bunny-muted text-lg">Keine "Die Geschichte des Liedes" Videos gefunden</p>
+            </div>
+          )}
+        </div>
+
+        {/* Bottom Pagination */}
+        {totalPages > 1 && (
+          <div className="mt-8 flex justify-center gap-2">
+            <Button
+              variant="outline"
+              onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
+              disabled={currentPage === 1}
+              className="border-white/20 text-white hover:bg-white/10"
+            >
+              <ChevronLeft className="w-4 h-4" />
+              Vorherige
+            </Button>
+            
+            <div className="flex gap-1">
+              {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
+                let pageNum;
+                if (totalPages <= 5) {
+                  pageNum = i + 1;
+                } else if (currentPage <= 3) {
+                  pageNum = i + 1;
+                } else if (currentPage >= totalPages - 2) {
+                  pageNum = totalPages - 4 + i;
+                } else {
+                  pageNum = currentPage - 2 + i;
+                }
+                
+                return (
+                  <Button
+                    key={pageNum}
+                    variant={currentPage === pageNum ? "default" : "outline"}
+                    size="sm"
+                    onClick={() => setCurrentPage(pageNum)}
+                    className={currentPage === pageNum 
+                      ? "bg-white text-black hover:bg-white/90" 
+                      : "border-white/20 text-white hover:bg-white/10"
+                    }
+                  >
+                    {pageNum}
+                  </Button>
+                );
+              })}
+            </div>
+            
+            <Button
+              variant="outline"
+              onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
+              disabled={currentPage === totalPages}
+              className="border-white/20 text-white hover:bg-white/10"
+            >
+              Nächste
+              <ChevronRight className="w-4 h-4" />
+            </Button>
+          </div>
         )}
       </div>