Add ability to display video thumbnail images when sharing on social media

Implement video thumbnail capture and integration for social sharing using canvas and `toDataURL`.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 11420304-80a9-4ef2-adff-cbdaa418ffa8
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/11420304-80a9-4ef2-adff-cbdaa418ffa8/gJQZE4U

client/src/components/video-modal.tsx

@@ -61,6 +61,7 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
   const videoRef = useRef<HTMLVideoElement>(null);
   const playerRef = useRef<any>(null);
   const [showShareMenu, setShowShareMenu] = useState(false);
+  const [videoThumbnail, setVideoThumbnail] = useState<string | null>(null);
 
   useEffect(() => {
     const handleEscape = (e: KeyboardEvent) => {
@@ -139,6 +140,11 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
 
         player.ready(() => {
           console.log('Video.js player ready with source');
+          
+          // Capture video thumbnail when ready
+          setTimeout(() => {
+            captureVideoThumbnail(player);
+          }, 2000); // Wait 2 seconds for video to load
         });
 
         player.on('error', (error: any) => {
@@ -181,6 +187,27 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
     };
   }, [isOpen, video]);
 
+  // Function to capture video thumbnail
+  const captureVideoThumbnail = (player: any) => {
+    try {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      const videoElement = player.tech().el();
+      
+      if (videoElement && ctx) {
+        canvas.width = videoElement.videoWidth || 640;
+        canvas.height = videoElement.videoHeight || 360;
+        
+        ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
+        const thumbnailUrl = canvas.toDataURL('image/jpeg', 0.8);
+        setVideoThumbnail(thumbnailUrl);
+        console.log('Video thumbnail captured');
+      }
+    } catch (error) {
+      console.log('Failed to capture video thumbnail:', error);
+    }
+  };
+
 
 
   const handleVideoPlay = async () => {
@@ -279,11 +306,22 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
                   <div className="flex flex-col gap-2">
                     <div className="pb-2 border-b border-gray-200 dark:border-gray-600">
                       <span className="text-sm font-medium text-gray-900 dark:text-gray-100">Share Video</span>
+                      {videoThumbnail && (
+                        <div className="mt-2">
+                          <img 
+                            src={videoThumbnail} 
+                            alt="Video preview" 
+                            className="w-full h-20 object-cover rounded border"
+                          />
+                          <span className="text-xs text-gray-600 dark:text-gray-400 mt-1 block">Preview image for sharing</span>
+                        </div>
+                      )}
                     </div>
                     
                     <FacebookShareButton
                       url={getShareUrl()}
                       hashtag="#video"
+                      picture={videoThumbnail || undefined}
                     >
                       <div className="flex items-center gap-2 p-2 w-full hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer">
                         <FacebookIcon size={20} round />
@@ -294,6 +332,7 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
                     <TwitterShareButton
                       url={getShareUrl()}
                       title={`Watch: ${video.title}`}
+                      media={videoThumbnail || undefined}
                     >
                       <div className="flex items-center gap-2 p-2 w-full hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer">
                         <TwitterIcon size={20} round />

replit.md

@@ -13,7 +13,7 @@ VideoStream is a fully functional video streaming platform that integrates direc
 - ✅ **Bunny.net Integration**: Complete integration with private video library using signed URLs for secure access
 - ✅ **Error Handling**: Robust error handling with Video.js fallback mechanisms
 - ✅ **Performance**: Optimized video loading with adaptive bitrate streaming and proper buffering
-- ✅ **Social Media Sharing**: Implemented social sharing for Facebook, Twitter, WhatsApp with custom share menu
+- ✅ **Social Media Sharing**: Implemented social sharing for Facebook, Twitter, WhatsApp with custom share menu and automatic video thumbnail capture
 - ✅ **Monetization Ready**: Professional advertising framework ready for revenue generation
 - ✅ **Copy Link Feature**: Easy link copying with visual feedback notifications