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

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

@ -140,11 +140,19 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
player.ready(() => { player.ready(() => {
console.log('Video.js player ready with source'); 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(() => { setTimeout(() => {
captureVideoThumbnail(player); 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) => { player.on('error', (error: any) => {
@ -192,16 +200,22 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
try { try {
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
const videoElement = player.tech().el();
if (videoElement && ctx) { // Get video element directly from player
canvas.width = videoElement.videoWidth || 640; const videoElement = player.el().querySelector('video');
canvas.height = videoElement.videoHeight || 360;
if (videoElement && ctx && videoElement.videoWidth > 0) {
canvas.width = videoElement.videoWidth;
canvas.height = videoElement.videoHeight;
ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height); ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
const thumbnailUrl = canvas.toDataURL('image/jpeg', 0.8); const thumbnailUrl = canvas.toDataURL('image/jpeg', 0.8);
setVideoThumbnail(thumbnailUrl); 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) { } catch (error) {
console.log('Failed to capture video thumbnail:', error); console.log('Failed to capture video thumbnail:', error);
@ -318,38 +332,38 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
)} )}
</div> </div>
<FacebookShareButton <div
url={getShareUrl()} onClick={() => {
hashtag="#video" console.log('Facebook share clicked:', getShareUrl());
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 /> <FacebookIcon size={20} round />
<span className="text-sm text-gray-900 dark:text-gray-100">Facebook</span> <span className="text-sm text-gray-900 dark:text-gray-100">Facebook</span>
</div> </div>
</FacebookShareButton>
<TwitterShareButton <div
url={getShareUrl()} onClick={() => {
title={`Watch: ${video.title}`} console.log('Twitter share clicked:', getShareUrl());
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 /> <TwitterIcon size={20} round />
<span className="text-sm text-gray-900 dark:text-gray-100">Twitter</span> <span className="text-sm text-gray-900 dark:text-gray-100">Twitter</span>
</div> </div>
</TwitterShareButton>
<WhatsappShareButton <div
url={getShareUrl()} onClick={() => {
title={`Watch: ${video.title}`} console.log('WhatsApp share clicked:', getShareUrl());
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 /> <WhatsappIcon size={20} round />
<span className="text-sm text-gray-900 dark:text-gray-100">WhatsApp</span> <span className="text-sm text-gray-900 dark:text-gray-100">WhatsApp</span>
</div> </div>
</WhatsappShareButton>
<button <button
onClick={copyToClipboard} 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 - ✅ **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 - ✅ **Error Handling**: Robust error handling with Video.js fallback mechanisms
- ✅ **Performance**: Optimized video loading with adaptive bitrate streaming and proper buffering - ✅ **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 - ✅ **Monetization Ready**: Professional advertising framework ready for revenue generation
- ✅ **Copy Link Feature**: Easy link copying with visual feedback notifications - ✅ **Copy Link Feature**: Easy link copying with visual feedback notifications