sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve video display and pagination on the history page

Browse Source 
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 2025-09-01 20:53:21 +00:00
parent 1ef55beaa5
commit b838329174
1 changed files with 88 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
client/src/pages/GeschichteLiedPage.tsx
View File

@ -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>