Improve video sharing on social media with rich previews and descriptions

Adds meta tags and server-side rendering for enhanced social sharing of videos.

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/hUgv2Vz

server/routes.ts

@@ -60,6 +60,63 @@ export async function registerRoutes(app: Express): Promise<Server> {
     }
   });
 
+  // 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("/");
+    }
+  });
+
   const httpServer = createServer(app);
   return httpServer;
 }