e9c136a92a
Implements signed thumbnail URLs using Bunny.net and updates og:image meta tags in video.tsx and creates a /thumbnail/:videoId route. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 50814a1e-92e4-4968-856f-7bc7eedf5e8f Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/50814a1e-92e4-4968-856f-7bc7eedf5e8f/wwY5Klj
156 lines
5.6 KiB
TypeScript
156 lines
5.6 KiB
TypeScript
import type { Express } from "express";
|
|
import { createServer, type Server } from "http";
|
|
import { storage } from "./storage";
|
|
import { z } from "zod";
|
|
import { BunnyService } from "./bunny";
|
|
|
|
export async function registerRoutes(app: Express): Promise<Server> {
|
|
// Get videos with pagination and filtering
|
|
app.get("/api/videos", async (req, res) => {
|
|
try {
|
|
const limit = parseInt(req.query.limit as string) || 20;
|
|
const offset = parseInt(req.query.offset as string) || 0;
|
|
const search = req.query.search as string;
|
|
const category = req.query.category as string;
|
|
|
|
const videos = await storage.getVideos(limit, offset, search, category);
|
|
const total = await storage.getVideoCount(search, category);
|
|
|
|
res.json({
|
|
videos,
|
|
total,
|
|
hasMore: offset + limit < total
|
|
});
|
|
} catch (error) {
|
|
res.status(500).json({ message: "Failed to fetch videos" });
|
|
}
|
|
});
|
|
|
|
// Get single video by ID
|
|
app.get("/api/videos/:id", async (req, res) => {
|
|
try {
|
|
const video = await storage.getVideo(req.params.id);
|
|
if (!video) {
|
|
return res.status(404).json({ message: "Video not found" });
|
|
}
|
|
res.json(video);
|
|
} catch (error) {
|
|
res.status(500).json({ message: "Failed to fetch video" });
|
|
}
|
|
});
|
|
|
|
// Update video views
|
|
app.post("/api/videos/:id/view", async (req, res) => {
|
|
try {
|
|
await storage.updateVideoViews(req.params.id);
|
|
res.json({ success: true });
|
|
} catch (error) {
|
|
res.status(500).json({ message: "Failed to update views" });
|
|
}
|
|
});
|
|
|
|
// Get video categories
|
|
app.get("/api/categories", async (req, res) => {
|
|
try {
|
|
const videos = await storage.getVideos(1000);
|
|
const categories = Array.from(new Set(videos.map(v => v.category).filter(Boolean)));
|
|
res.json(categories);
|
|
} catch (error) {
|
|
console.error("Error fetching categories:", error);
|
|
res.status(500).json({ message: "Failed to fetch categories" });
|
|
}
|
|
});
|
|
|
|
// Serve video page with meta tags for social sharing
|
|
app.get("/video/:id", async (req, res) => {
|
|
try {
|
|
const video = await storage.getVideo(req.params.id);
|
|
if (!video) {
|
|
return res.redirect("/");
|
|
}
|
|
|
|
const shareUrl = `${req.protocol}://${req.get('host')}/video/${video.id}`;
|
|
const html = `
|
|
<!DOCTYPE html>
|
|
<html lang="sl">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
|
|
<title>${video.title} - VideoStream</title>
|
|
<meta name="description" content="${video.description || 'Oglej si ta video na VideoStream'}" />
|
|
|
|
<!-- Open Graph Meta Tags for Facebook -->
|
|
<meta property="og:title" content="${video.title}" />
|
|
<meta property="og:description" content="${video.description || 'Oglej si ta video na VideoStream'}" />
|
|
<meta property="og:type" content="video.other" />
|
|
<meta property="og:url" content="${shareUrl}" />
|
|
<meta property="og:image" content="${video.thumbnailUrl}" />
|
|
<meta property="og:image:width" content="1200" />
|
|
<meta property="og:image:height" content="630" />
|
|
<meta property="og:image:type" content="image/jpeg" />
|
|
<meta property="og:site_name" content="VideoStream" />
|
|
|
|
<!-- Twitter Card Meta Tags -->
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="${video.title}" />
|
|
<meta name="twitter:description" content="${video.description || 'Oglej si ta video na VideoStream'}" />
|
|
<meta name="twitter:image" content="${video.thumbnailUrl}" />
|
|
|
|
<script>
|
|
// Redirect to client-side app
|
|
window.location.href = '/';
|
|
setTimeout(() => {
|
|
window.location.href = '/video/${video.id}';
|
|
}, 100);
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
<script type="text/javascript" src="https://replit.com/public/js/replit-dev-banner.js"></script>
|
|
</body>
|
|
</html>`;
|
|
|
|
res.send(html);
|
|
} catch (error) {
|
|
console.error("Error serving video page:", error);
|
|
res.redirect("/");
|
|
}
|
|
});
|
|
|
|
// Public thumbnail endpoint for social media sharing
|
|
app.get("/thumbnail/:videoId", async (req, res) => {
|
|
try {
|
|
const { videoId } = req.params;
|
|
|
|
// Generate signed thumbnail URL using Bunny service
|
|
const bunnyService = new BunnyService();
|
|
const thumbnailPath = `/${videoId}/thumbnail.jpg`;
|
|
const signedThumbnailUrl = bunnyService.generatePublicSignedUrl(thumbnailPath, 24); // 24 hour expiry for sharing
|
|
|
|
// Fetch and proxy the thumbnail with proper headers for social media
|
|
const response = await fetch(signedThumbnailUrl);
|
|
if (response.ok) {
|
|
// Set appropriate headers for social media crawlers
|
|
res.set({
|
|
'Content-Type': 'image/jpeg',
|
|
'Cache-Control': 'public, max-age=86400', // Cache for 24 hours
|
|
'Access-Control-Allow-Origin': '*', // Allow cross-origin for social media
|
|
});
|
|
|
|
const buffer = await response.arrayBuffer();
|
|
res.send(Buffer.from(buffer));
|
|
} else {
|
|
// Fallback to a high-quality video placeholder
|
|
res.redirect(`https://images.unsplash.com/photo-1536240478700-b869070f9279?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&h=630`);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error proxying thumbnail:", error);
|
|
res.redirect(`https://images.unsplash.com/photo-1536240478700-b869070f9279?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&h=630`);
|
|
}
|
|
});
|
|
|
|
const httpServer = createServer(app);
|
|
return httpServer;
|
|
}
|