diff --git a/client/src/components/video-modal.tsx b/client/src/components/video-modal.tsx index e8587e8..9960923 100644 --- a/client/src/components/video-modal.tsx +++ b/client/src/components/video-modal.tsx @@ -61,6 +61,7 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps) const videoRef = useRef(null); const playerRef = useRef(null); const [showShareMenu, setShowShareMenu] = useState(false); + const [videoThumbnail, setVideoThumbnail] = useState(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)
Share Video + {videoThumbnail && ( +
+ Video preview + Preview image for sharing +
+ )}
@@ -294,6 +332,7 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
diff --git a/replit.md b/replit.md index 0a95cdb..c344d0b 100644 --- a/replit.md +++ b/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