sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve video thumbnail generation and enable direct social sharing

Browse Source 
Refactor thumbnail capture logic using loadeddata/canplay events and implements direct Facebook/Twitter share using popup windows.

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/9R9birG
This commit is contained in:
sebastjanartic 2025-08-05 06:21:01 +00:00
parent bc1b2e5221
commit 799d2c8bb1
2 changed files with 50 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
client/src/components/video-modal.tsx
View File

@ -140,11 +140,19 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
player.ready(() => {
console.log('Video.js player ready with source');
// Capture video thumbnail when ready
});
// Listen for loadeddata event to capture thumbnail
player.on('loadeddata', () => {
console.log('Video data loaded, capturing thumbnail');
setTimeout(() => {
captureVideoThumbnail(player);
}, 2000); // Wait 2 seconds for video to load
}, 500);
});
player.on('canplay', () => {
console.log('Video can play, attempting thumbnail capture');
captureVideoThumbnail(player);
});
player.on('error', (error: any) => {
@ -192,16 +200,22 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
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;
// Get video element directly from player
const videoElement = player.el().querySelector('video');
if (videoElement && ctx && videoElement.videoWidth > 0) {
canvas.width = videoElement.videoWidth;
canvas.height = videoElement.videoHeight;
ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
const thumbnailUrl = canvas.toDataURL('image/jpeg', 0.8);
setVideoThumbnail(thumbnailUrl);
console.log('Video thumbnail captured');
console.log('Video thumbnail captured successfully', canvas.width, 'x', canvas.height);
} else {
console.log('Video element not ready for thumbnail capture');
// Retry after a delay
setTimeout(() => captureVideoThumbnail(player), 1000);
}
} catch (error) {
console.log('Failed to capture video thumbnail:', error);
@ -318,38 +332,38 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
)}
</div>
<FacebookShareButton
url={getShareUrl()}
hashtag="#video"
onClick={() => console.log('Facebook share clicked:', getShareUrl())}
<div
onClick={() => {
console.log('Facebook share clicked:', getShareUrl());
window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(getShareUrl())}`, '_blank', 'width=600,height=400');
}}
className="flex items-center gap-2 p-2 w-full hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer"
>
<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 />
<span className="text-sm text-gray-900 dark:text-gray-100">Facebook</span>
</div>
</FacebookShareButton>
<FacebookIcon size={20} round />
<span className="text-sm text-gray-900 dark:text-gray-100">Facebook</span>
</div>
<TwitterShareButton
url={getShareUrl()}
title={`Watch: ${video.title}`}
onClick={() => console.log('Twitter share clicked:', getShareUrl())}
<div
onClick={() => {
console.log('Twitter share clicked:', getShareUrl());
window.open(`https://twitter.com/intent/tweet?url=${encodeURIComponent(getShareUrl())}&text=${encodeURIComponent(`Watch: ${video.title}`)}`, '_blank', 'width=600,height=400');
}}
className="flex items-center gap-2 p-2 w-full hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer"
>
<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 />
<span className="text-sm text-gray-900 dark:text-gray-100">Twitter</span>
</div>
</TwitterShareButton>
<TwitterIcon size={20} round />
<span className="text-sm text-gray-900 dark:text-gray-100">Twitter</span>
</div>
<WhatsappShareButton
url={getShareUrl()}
title={`Watch: ${video.title}`}
onClick={() => console.log('WhatsApp share clicked:', getShareUrl())}
<div
onClick={() => {
console.log('WhatsApp share clicked:', getShareUrl());
window.open(`https://wa.me/?text=${encodeURIComponent(`Watch: ${video.title} ${getShareUrl()}`)}`, '_blank');
}}
className="flex items-center gap-2 p-2 w-full hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer"
>
<div className="flex items-center gap-2 p-2 w-full hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer">
<WhatsappIcon size={20} round />
<span className="text-sm text-gray-900 dark:text-gray-100">WhatsApp</span>
</div>
</WhatsappShareButton>
<WhatsappIcon size={20} round />
<span className="text-sm text-gray-900 dark:text-gray-100">WhatsApp</span>
</div>
<button
onClick={copyToClipboard}

2
replit.md
View File

@ -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 and automatic video thumbnail capture
- ✅ **Social Media Sharing**: Implemented direct social sharing for Facebook, Twitter, WhatsApp with custom popup windows and automatic video thumbnail capture
- ✅ **Monetization Ready**: Professional advertising framework ready for revenue generation
- ✅ **Copy Link Feature**: Easy link copying with visual feedback notifications