Published your App

Replit-Commit-Author: Deployment Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 9acaba5b-d1bd-445d-83cf-46e174f69cc1 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/igVW4lQ Replit-Commit-Deployment-Build-Id: d7d10bce-067c-481a-b090-e3d2518d7a39 Replit-Helium-Checkpoint-Created: true
2026-02-28 17:43:38 +00:00
parent 9a22b9bd6a
commit 355f494d38
3 changed files with 174 additions and 0 deletions
@@ -0,0 +1,107 @@
+import { useQuery } from "@tanstack/react-query";
+import { Link } from "wouter";
+import { format } from "date-fns";
+import { de } from "date-fns/locale";
+import { Play } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
+import Header from "@/components/header";
+import Footer from "@/components/footer";
+
+interface BunnyVideo {
+  guid: string;
+  title: string;
+  length: number;
+  dateUploaded: string;
+  thumbnail: string;
+  embedUrl: string;
+}
+
+interface VideoResponse {
+  items: BunnyVideo[];
+  totalItems: number;
+  currentPage: number;
+}
+
+function formatDuration(seconds: number): string {
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+
+function VideoCard({ video }: { video: BunnyVideo }) {
+  return (
+    <Link href={`/video/${video.guid}`}>
+      <article
+        className="group cursor-pointer bg-card rounded-md border border-card-border transition-all duration-300 h-full flex flex-col"
+        data-testid={`card-video-${video.guid}`}
+      >
+        <div className="relative rounded-t-md">
+          <div className="overflow-hidden rounded-t-md">
+            <img
+              src={video.thumbnail}
+              alt={video.title}
+              className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105"
+              loading="lazy"
+            />
+          </div>
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="w-12 h-12 rounded-full bg-primary/90 flex items-center justify-center group-hover:bg-primary transition-colors">
+              <Play className="w-5 h-5 text-white ml-0.5" fill="white" />
+            </div>
+          </div>
+          <div className="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-2 py-0.5 rounded">
+            {formatDuration(video.length)}
+          </div>
+        </div>
+        <div className="p-4 flex flex-col flex-1">
+          <h3 className="font-semibold text-card-foreground mb-1 line-clamp-2 group-hover:text-primary transition-colors text-sm leading-snug">
+            {video.title}
+          </h3>
+          <p className="text-xs text-muted-foreground mt-auto">
+            {format(new Date(video.dateUploaded), "d. MMMM yyyy", { locale: de })}
+          </p>
+        </div>
+      </article>
+    </Link>
+  );
+}
+
+function VideoCardSkeleton() {
+  return (
+    <div className="bg-card rounded-md border border-card-border">
+      <Skeleton className="w-full aspect-video rounded-t-md" />
+      <div className="p-4 space-y-2">
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-3 w-1/2" />
+      </div>
+    </div>
+  );
+}
+
+export default function VideosPage() {
+  const { data, isLoading } = useQuery<VideoResponse>({
+    queryKey: ["/api/videos"],
+  });
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {isLoading ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
+            {Array.from({ length: 8 }).map((_, i) => (
+              <VideoCardSkeleton key={i} />
+            ))}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
+            {(data?.items || []).map((video) => (
+              <VideoCard key={video.guid} video={video} />
+            ))}
+          </div>
+        )}
+      </main>
+      <Footer />
+    </div>
+  );
+}