From 44f15d166b7ae3de07709afd56bb17c95743cca3 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sun, 11 Jan 2026 13:26:57 +0000
Subject: [PATCH] Improve social media sharing image quality and compatibility

Update video thumbnail generation to use regex for robust parameter replacement, ensuring optimal dimensions (1200x630) and JPG format for Facebook sharing, and add `og:image:secure_url` metadata.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 401e2ec0-e00d-4f10-9d0e-60f3d479f9a5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 2c2fdea5-83d6-40a8-8465-f0fdf2e8e76a
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/401e2ec0-e00d-4f10-9d0e-60f3d479f9a5/pRGdxi8
---
 server/routes.ts | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/server/routes.ts b/server/routes.ts
index 5fa6cfc..8d97105 100644
--- a/server/routes.ts
+++ b/server/routes.ts
@@ -138,9 +138,13 @@ export async function registerRoutes(app: Express): Promise<Server> {
       const videoUrl = `${baseUrl}/video/${video.id}`;
       
       // Get high-quality thumbnail for sharing (1200x630 is ideal for Facebook)
-      const thumbnailUrl = video.thumbnailUrl 
-        ? video.thumbnailUrl.replace('width=400&height=225', 'width=1200&height=630').replace('format=webp', 'format=jpg')
-        : `${baseUrl}/api/social-image`;
+      let thumbnailUrl = `${baseUrl}/api/social-image`;
+      if (video.thumbnailUrl) {
+        thumbnailUrl = video.thumbnailUrl
+          .replace(/width=\d+/gi, 'width=1200')
+          .replace(/height=\d+/gi, 'height=630')
+          .replace(/format=webp/gi, 'format=jpg');
+      }
       
       // Clean description for meta tags
       const description = video.description 
@@ -162,6 +166,7 @@ export async function registerRoutes(app: Express): Promise<Server> {
   <meta property="og:title" content="${title}">
   <meta property="og:description" content="${description}">
   <meta property="og:image" content="${thumbnailUrl}">
+  <meta property="og:image:secure_url" content="${thumbnailUrl}">
   <meta property="og:image:width" content="1200">
   <meta property="og:image:height" content="630">
   <meta property="og:image:type" content="image/jpeg">
@@ -1415,9 +1420,13 @@ export async function registerRoutes(app: Express): Promise<Server> {
       const videoUrl = `${baseUrl}/video/${video.id}`;
       
       // Get high-quality thumbnail for sharing (1200x630 is ideal for Facebook)
-      const thumbnailUrl = video.thumbnailUrl 
-        ? video.thumbnailUrl.replace('width=400&height=225', 'width=1200&height=630').replace('format=webp', 'format=jpg')
-        : `${baseUrl}/api/social-image`;
+      let thumbnailUrl = `${baseUrl}/api/social-image`;
+      if (video.thumbnailUrl) {
+        thumbnailUrl = video.thumbnailUrl
+          .replace(/width=\d+/gi, 'width=1200')
+          .replace(/height=\d+/gi, 'height=630')
+          .replace(/format=webp/gi, 'format=jpg');
+      }
       
       // Clean description for meta tags
       const description = video.description 
@@ -1439,6 +1448,7 @@ export async function registerRoutes(app: Express): Promise<Server> {
   <meta property="og:title" content="${title}">
   <meta property="og:description" content="${description}">
   <meta property="og:image" content="${thumbnailUrl}">
+  <meta property="og:image:secure_url" content="${thumbnailUrl}">
   <meta property="og:image:width" content="1200">
   <meta property="og:image:height" content="630">
   <meta property="og:image:type" content="image/jpeg">