1321038609
Improves thumbnail loading in VideoCard component with error handling and updates response headers in /thumbnail 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/WNLqOHv
191 lines
7.0 KiB
TypeScript
191 lines
7.0 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("/");
|
|
}
|
|
});
|
|
|
|
// Create SVG thumbnails with video title and play button
|
|
app.get("/thumbnail/:videoId", async (req, res) => {
|
|
try {
|
|
const { videoId } = req.params;
|
|
|
|
// Get video info
|
|
const video = await storage.getVideo(videoId);
|
|
if (!video) {
|
|
const fallbackSvg = `
|
|
<svg width="400" height="225" xmlns="http://www.w3.org/2000/svg">
|
|
<rect width="400" height="225" fill="#1a1a1a"/>
|
|
<text x="200" y="112" text-anchor="middle" fill="white" font-family="Arial" font-size="16">Video not found</text>
|
|
</svg>
|
|
`;
|
|
res.setHeader('Content-Type', 'image/svg+xml');
|
|
return res.send(fallbackSvg);
|
|
}
|
|
|
|
// Clean up title for display
|
|
const displayTitle = video.title.replace('.mp4', '').substring(0, 40);
|
|
const duration = video.duration ? Math.floor(video.duration / 60) + ':' + String(video.duration % 60).padStart(2, '0') : '';
|
|
|
|
// Create SVG thumbnail with play button
|
|
const svg = `
|
|
<svg width="400" height="225" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#1e40af;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#1e3a8a;stop-opacity:1" />
|
|
</linearGradient>
|
|
</defs>
|
|
<rect width="400" height="225" fill="url(#grad)" />
|
|
|
|
<!-- Play button circle -->
|
|
<circle cx="200" cy="112" r="35" fill="rgba(255,255,255,0.9)" />
|
|
<!-- Play button triangle -->
|
|
<polygon points="188,97 188,127 218,112" fill="#1e40af" />
|
|
|
|
<!-- Title background -->
|
|
<rect x="0" y="175" width="400" height="50" fill="rgba(0,0,0,0.7)" />
|
|
|
|
<!-- Title text -->
|
|
<text x="20" y="200" fill="white" font-family="Arial, sans-serif" font-size="14" font-weight="bold">${displayTitle}</text>
|
|
|
|
<!-- Duration -->
|
|
${duration ? `<text x="370" y="200" fill="white" font-family="Arial, sans-serif" font-size="12" text-anchor="end">${duration}</text>` : ''}
|
|
</svg>
|
|
`;
|
|
|
|
res.setHeader('Content-Type', 'image/svg+xml; charset=utf-8');
|
|
res.setHeader('Cache-Control', 'public, max-age=86400');
|
|
res.setHeader('Access-Control-Allow-Origin', '*');
|
|
res.send(svg);
|
|
|
|
} catch (error) {
|
|
console.error("Error creating thumbnail:", error);
|
|
const errorSvg = `
|
|
<svg width="400" height="225" xmlns="http://www.w3.org/2000/svg">
|
|
<rect width="400" height="225" fill="#dc2626"/>
|
|
<text x="200" y="112" text-anchor="middle" fill="white" font-family="Arial" font-size="16">Error loading thumbnail</text>
|
|
</svg>
|
|
`;
|
|
res.setHeader('Content-Type', 'image/svg+xml');
|
|
res.send(errorSvg);
|
|
}
|
|
});
|
|
|
|
const httpServer = createServer(app);
|
|
return httpServer;
|
|
}
|