From 50ff3e85f34b8342385324acfc09a219aefade73 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 21:59:39 +0000
Subject: [PATCH] Add functionality to generate social media images for videos

Adds a new client-side JavaScript file, social-image-generator.js, which includes a function `createSocialImage`. This function utilizes the Canvas API to generate a base64 encoded PNG image suitable for social media sharing. The generated image features a gradient background, a logo placeholder with a play icon, and text including the platform name "go4.video" and a subtitle.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 051a65da-1176-4478-a61c-c662f2a15536
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/051a65da-1176-4478-a61c-c662f2a15536/9NQBiz8
---
 client/public/social-image-generator.js | 51 +++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 client/public/social-image-generator.js

diff --git a/client/public/social-image-generator.js b/client/public/social-image-generator.js
new file mode 100644
index 0000000..308ecfc
--- /dev/null
+++ b/client/public/social-image-generator.js
@@ -0,0 +1,51 @@
+// Social Image Generator - create the image as base64 data URL
+function createSocialImage() {
+    const canvas = document.createElement('canvas');
+    canvas.width = 1200;
+    canvas.height = 630;
+    const ctx = canvas.getContext('2d');
+    
+    // Background gradient
+    const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
+    gradient.addColorStop(0, 'hsl(250, 50%, 15%)');
+    gradient.addColorStop(1, 'hsl(240, 30%, 25%)');
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    
+    // Main logo area
+    const logoGradient = ctx.createLinearGradient(300, 250, 360, 310);
+    logoGradient.addColorStop(0, '#6366f1');
+    logoGradient.addColorStop(1, '#8b5cf6');
+    
+    ctx.fillStyle = logoGradient;
+    ctx.beginPath();
+    ctx.roundRect(300, 250, 60, 60, 15);
+    ctx.fill();
+    
+    // Play triangle
+    ctx.fillStyle = 'white';
+    ctx.beginPath();
+    ctx.moveTo(321, 265);
+    ctx.lineTo(321, 295);
+    ctx.lineTo(342, 280);
+    ctx.closePath();
+    ctx.fill();
+    
+    // Main title
+    ctx.fillStyle = 'white';
+    ctx.font = 'bold 72px Arial, sans-serif';
+    ctx.textAlign = 'left';
+    ctx.fillText('go4.video', 400, 330);
+    
+    // Subtitle
+    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+    ctx.font = '32px Arial, sans-serif';
+    ctx.fillText('Professional Video Streaming Platform', 400, 380);
+    
+    return canvas.toDataURL('image/png');
+}
+
+// Export for use
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { createSocialImage };
+}
\ No newline at end of file