From 1530837f0082c3c91d5240500092c4536ef9f85e Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Mon, 4 Aug 2025 20:52:21 +0000
Subject: [PATCH] Improve how users share videos and copy links on social media
 platforms

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
---
 client/src/components/video-modal.tsx | 60 +++++++++++++++++++--------
 replit.md                             |  3 ++
 2 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/client/src/components/video-modal.tsx b/client/src/components/video-modal.tsx
index 9b2e4f6..f0eb639 100644
--- a/client/src/components/video-modal.tsx
+++ b/client/src/components/video-modal.tsx
@@ -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>
               )}
diff --git a/replit.md b/replit.md
index 3285a68..121bb08 100644
--- a/replit.md
+++ b/replit.md
@@ -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