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
This commit is contained in:
sebastjanartic
parent
1ef55beaa5
commit
b838329174
@ -179,59 +179,96 @@ export default function GeschichteLiedPage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{geschichteVideos.length === 0 ? (
|
{/* Video List with Descriptions */}
|
||||||
<div className="text-center py-12">
|
<div className="space-y-6">
|
||||||
<div className="text-gray-400 text-xl mb-4">
|
{currentVideos.map((video, index) => (
|
||||||
Keine Videos in der Sammlung "Die Geschichte des Liedes" gefunden
|
<div key={video.id} className="bg-black/20 backdrop-blur-sm rounded-lg p-4">
|
||||||
</div>
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
<p className="text-gray-500">
|
{/* Video Card */}
|
||||||
Überprüfen Sie später, ob neue Inhalte hinzugefügt wurden.
|
<div className="md:col-span-1">
|
||||||
</p>
|
<VideoCard
|
||||||
</div>
|
video={video}
|
||||||
) : (
|
onClick={handleVideoClick}
|
||||||
<>
|
className="w-full hover:scale-102 transition-all duration-300 rounded-lg overflow-hidden"
|
||||||
{/* Video Grid */}
|
hideOverlay={true}
|
||||||
<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) => (
|
</div>
|
||||||
<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>
|
|
||||||
|
|
||||||
<span className="text-sm text-gray-400">
|
{/* Video Description */}
|
||||||
Seite {currentPage} von {totalPages}
|
<div className="md:col-span-2 space-y-3">
|
||||||
</span>
|
<h3 className="text-xl font-bold text-white">{video.title}</h3>
|
||||||
|
<p className="text-bunny-light text-sm leading-relaxed">
|
||||||
<Button
|
{video.description || "Keine Beschreibung für diese Sendung verfügbar."}
|
||||||
variant="outline"
|
</p>
|
||||||
size="sm"
|
<div className="flex items-center gap-4 text-xs text-bunny-muted">
|
||||||
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
|
<span>{Math.floor(video.duration / 60)}:{(video.duration % 60).toString().padStart(2, '0')} min</span>
|
||||||
disabled={currentPage === totalPages}
|
<span>{video.views} Aufrufe</span>
|
||||||
className="bg-white/10 border-white/20 text-white hover:bg-white/20"
|
</div>
|
||||||
>
|
</div>
|
||||||
Weiter
|
|
||||||
<ChevronRight className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user