sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement video streaming and thumbnail features for enhanced user experience

Browse Source 
Integrate Bunny.net iframe embed for private video access, implement dynamic SVG thumbnails, and remove temporary thumbnail endpoint in `server/routes.ts`.

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/ziBt2Ne
This commit is contained in:
sebastjanartic
2025-08-04 19:41:36 +00:00
parent dae60951f4
commit 801309a47e
3 changed files with 18 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/routes.ts
+2 -58
View File
@@ -118,65 +118,9 @@ export async function registerRoutes(app: Express): Promise<Server> {
}
});
// Public thumbnail endpoint that generates SVG thumbnails
// Temporary placeholder - waiting for user preference on thumbnail style
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);
let title = "Video";
let duration = "0:00";
if (video) {
title = video.title.replace('.mp4', '').substring(0, 35);
const minutes = Math.floor(video.duration / 60);
const seconds = video.duration % 60;
duration = `${minutes}:${seconds.toString().padStart(2, '0')}`;
}
// Generate SVG thumbnail with video title and duration
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:#0f172a;stop-opacity:1" />
</linearGradient>
</defs>
<rect width="400" height="225" fill="url(#grad)"/>
<circle cx="200" cy="112.5" r="30" fill="rgba(255,255,255,0.8)"/>
<polygon points="190,98 190,127 215,112.5" fill="#000"/>
<text x="200" y="170" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-size="14" font-weight="bold">
${title.split(' ').map((word, i) => `<tspan x="200" dy="${i === 0 ? 0 : 18}">${word}</tspan>`).join('')}
</text>
<text x="350" y="20" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-size="12" font-weight="bold">
${duration}
</text>
</svg>
`;
res.setHeader('Content-Type', 'image/svg+xml');
res.setHeader('Cache-Control', 'public, max-age=86400');
res.send(svg);
} catch (error) {
console.error("Error generating thumbnail:", error);
// Fallback SVG
const fallbackSvg = `
<svg width="400" height="225" xmlns="http://www.w3.org/2000/svg">
<rect width="400" height="225" fill="#1a1a1a"/>
<circle cx="200" cy="112.5" r="30" fill="rgba(255,255,255,0.8)"/>
<polygon points="190,98 190,127 215,112.5" fill="#000"/>
<text x="200" y="170" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-size="16">Video Thumbnail</text>
</svg>
`;
res.setHeader('Content-Type', 'image/svg+xml');
res.send(fallbackSvg);
}
res.redirect(`https://images.unsplash.com/photo-1536240478700-b869070f9279?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=225`);
});
const httpServer = createServer(app);