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 = [
|
const navItems = [
|
||||||
{ label: "Start", href: "/" },
|
{ label: "Start", href: "/" },
|
||||||
{ label: "News", href: "/category/News" },
|
{ label: "News", href: "/category/News" },
|
||||||
|
{ label: "Video", href: "/videos" },
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function Header() {
|
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 multer from "multer";
|
||||||
import path from "path";
|
import path from "path";
|
||||||
import fs from "fs";
|
import fs from "fs";
|
||||||
|
import https from "https";
|
||||||
|
|
||||||
const uploadDir = path.join(process.cwd(), "client/public/uploads");
|
const uploadDir = path.join(process.cwd(), "client/public/uploads");
|
||||||
if (!fs.existsSync(uploadDir)) {
|
if (!fs.existsSync(uploadDir)) {
|
||||||
@ -106,5 +107,70 @@ export async function registerRoutes(
|
|||||||
res.json({ url });
|
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;
|
return httpServer;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user