videofolxtv/server/routes.ts
sebastjanartic c5f44b85d0 Improve social sharing thumbnails for videos across the platform
Updates thumbnail generation to use a more reliable thumbnail proxy endpoint.

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/EB1kgAB
2025-08-04 19:36:02 +00:00

150 lines
5.2 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;
// Get video info for generating proper thumbnail
const video = await storage.getVideo(videoId);
if (video) {
// Clean up title for display
const title = video.title.replace('.mp4', '').substring(0, 45);
// Generate a high-quality video thumbnail using a more reliable service
// Use a video-themed background with proper social media dimensions
const thumbnailUrl = `https://dummyimage.com/1200x630/2d3748/ffffff.png&text=${encodeURIComponent(title)}`;
res.redirect(thumbnailUrl);
} else {
// Video not found - use generic placeholder
res.redirect(`https://dummyimage.com/1200x630/2d3748/ffffff.png&text=Video+Not+Found`);
}
} catch (error) {
console.error("Error serving thumbnail:", error);
res.redirect(`https://dummyimage.com/1200x630/2d3748/ffffff.png&text=Error+Loading+Video`);
}
});
const httpServer = createServer(app);
return httpServer;
}