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

Improve how users share videos and copy links on social media platforms

Browse Source 
Enhance video sharing with react-share, adds a custom share menu, and improves the copy link feature with visual feedback.

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/3TqKTBe
This commit is contained in:
sebastjanartic 2025-08-04 20:52:21 +00:00
parent d4703f6167
commit 1530837f00
2 changed files with 46 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -225,9 +225,26 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
const copyToClipboard = async () => {
try {
await navigator.clipboard.writeText(getShareUrl());
alert('Link copied to clipboard!');
// Simple notification instead of alert
const notification = document.createElement('div');
notification.textContent = 'Link copied!';
notification.className = 'fixed top-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg z-50 transition-opacity duration-300';
document.body.appendChild(notification);
setTimeout(() => {
notification.style.opacity = '0';
setTimeout(() => document.body.removeChild(notification), 300);
}, 2000);
setShowShareMenu(false);
} catch (error) {
console.error('Failed to copy link:', error);
// Fallback for older browsers
const textArea = document.createElement('textarea');
textArea.value = getShareUrl();
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
setShowShareMenu(false);
}
};
@ -288,41 +305,50 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
{/* Share Menu */}
{showShareMenu && (
<div className="absolute top-12 right-0 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 z-50 min-w-[200px]">
<div className="flex flex-col gap-3">
<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>
</div>
<FacebookShareButton
url={getShareUrl()}
className="flex items-center gap-2 p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
hashtag="#video"
>
<FacebookIcon size={24} round />
<span className="text-sm">Share on Facebook</span>
<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>
<TwitterShareButton
url={getShareUrl()}
title={`Watch: ${video.title}`}
className="flex items-center gap-2 p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
>
<TwitterIcon size={24} round />
<span className="text-sm">Share on Twitter</span>
<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>
<WhatsappShareButton
url={getShareUrl()}
title={`Watch: ${video.title}`}
className="flex items-center gap-2 p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
>
<WhatsappIcon size={24} round />
<span className="text-sm">Share on WhatsApp</span>
<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>
<Button
<button
onClick={copyToClipboard}
variant="ghost"
size="sm"
className="justify-start text-sm"
className="flex items-center gap-2 p-2 w-full hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer text-left"
>
Copy Link
</Button>
<div className="w-5 h-5 bg-gray-500 rounded-full flex items-center justify-center">
<span className="text-white text-xs">📋</span>
</div>
<span className="text-sm text-gray-900 dark:text-gray-100">Copy Link</span>
</button>
</div>
</div>
)}

3
replit.md
View File

@ -12,6 +12,9 @@ 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 HLS recovery and iframe fallback options
- ✅ **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
- ✅ **Google Ads Manager**: Added Google IMA SDK integration for video monetization support
- ✅ **Copy Link Feature**: Easy link copying with visual feedback notifications
## User Preferences