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
This commit is contained in:
sebastjanartic
parent
9a22b9bd6a
commit
355f494d38
@ -7,6 +7,7 @@ import folxLogo from "@assets/folx_MT_poz_b_1772296729169.png";
|
||||
const navItems = [
|
||||
{ label: "Start", href: "/" },
|
||||
{ label: "News", href: "/category/News" },
|
||||
{ label: "Video", href: "/videos" },
|
||||
];
|
||||
|
||||
export default function Header() {
|
||||
|
||||
107
client/src/pages/videos.tsx
Normal file
107
client/src/pages/videos.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
@ -6,6 +6,7 @@ import { seedDatabase } from "./seed";
|
||||
import multer from "multer";
|
||||
import path from "path";
|
||||
import fs from "fs";
|
||||
import https from "https";
|
||||
|
||||
const uploadDir = path.join(process.cwd(), "client/public/uploads");
|
||||
if (!fs.existsSync(uploadDir)) {
|
||||
@ -106,5 +107,70 @@ export async function registerRoutes(
|
||||
res.json({ url });
|
||||
});
|
||||
|
||||
function bunnyFetch(path: string): Promise<any> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const options = {
|
||||
hostname: "video.bunnycdn.com",
|
||||
path,
|
||||
method: "GET",
|
||||
headers: { "AccessKey": process.env.BUNNY_API_KEY || "", "Accept": "application/json" },
|
||||
};
|
||||
const req = https.request(options, (res) => {
|
||||
let body = "";
|
||||
res.on("data", (c: string) => (body += c));
|
||||
res.on("end", () => {
|
||||
try { resolve(JSON.parse(body)); } catch { reject(new Error(body)); }
|
||||
});
|
||||
});
|
||||
req.on("error", reject);
|
||||
req.end();
|
||||
});
|
||||
}
|
||||
|
||||
const LIBRARY_ID = process.env.BUNNY_LIBRARY_ID || "476412";
|
||||
const CDN_HOST = process.env.BUNNY_CDN_HOST || "vz-7982dfc4-cc8.b-cdn.net";
|
||||
|
||||
app.get("/api/videos", async (req, res) => {
|
||||
try {
|
||||
const page = parseInt(req.query.page as string) || 1;
|
||||
const perPage = parseInt(req.query.perPage as string) || 20;
|
||||
const search = req.query.search as string || "";
|
||||
let path = `/library/${LIBRARY_ID}/videos?page=${page}&itemsPerPage=${perPage}&orderBy=date`;
|
||||
if (search) path += `&search=${encodeURIComponent(search)}`;
|
||||
const data = await bunnyFetch(path);
|
||||
const videos = (data.items || []).map((v: any) => ({
|
||||
guid: v.guid,
|
||||
title: (v.title || "").replace(/\.mp4$/i, ""),
|
||||
length: v.length,
|
||||
dateUploaded: v.dateUploaded,
|
||||
thumbnail: `https://${CDN_HOST}/${v.guid}/${v.thumbnailFileName || "thumbnail.jpg"}`,
|
||||
embedUrl: `https://player.mediadelivery.net/embed/${LIBRARY_ID}/${v.guid}`,
|
||||
hlsUrl: `https://${CDN_HOST}/${v.guid}/playlist.m3u8`,
|
||||
status: v.status,
|
||||
}));
|
||||
res.json({ items: videos, totalItems: data.totalItems, currentPage: data.currentPage });
|
||||
} catch (err: any) {
|
||||
res.status(500).json({ message: err.message });
|
||||
}
|
||||
});
|
||||
|
||||
app.get("/api/videos/:guid", async (req, res) => {
|
||||
try {
|
||||
const data = await bunnyFetch(`/library/${LIBRARY_ID}/videos/${req.params.guid}`);
|
||||
res.json({
|
||||
guid: data.guid,
|
||||
title: (data.title || "").replace(/\.mp4$/i, ""),
|
||||
length: data.length,
|
||||
dateUploaded: data.dateUploaded,
|
||||
thumbnail: `https://${CDN_HOST}/${data.guid}/${data.thumbnailFileName || "thumbnail.jpg"}`,
|
||||
embedUrl: `https://player.mediadelivery.net/embed/${LIBRARY_ID}/${data.guid}`,
|
||||
hlsUrl: `https://${CDN_HOST}/${data.guid}/playlist.m3u8`,
|
||||
status: data.status,
|
||||
});
|
||||
} catch (err: any) {
|
||||
res.status(500).json({ message: err.message });
|
||||
}
|
||||
});
|
||||
|
||||
return httpServer;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user