Enable users to quickly share videos on social media platforms

Implements one-click social sharing feature via `<SocialShare>` component and URL parameters for video sharing.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: aa92e7e2-ec62-4c92-b21b-02ef78a664c2
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/aa92e7e2-ec62-4c92-b21b-02ef78a664c2/Xt4Awd6

client/src/pages/home.tsx

@@ -3,6 +3,7 @@ import { useQuery } from "@tanstack/react-query";
 import { type Video } from "@shared/schema";
 import SearchHeader from "@/components/search-header";
 import VideoGrid from "@/components/video-grid";
+import VideoModal from "@/components/video-modal";
 
 interface VideosResponse {
   videos: Video[];
@@ -15,6 +16,23 @@ export default function Home() {
   const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
   const [offset, setOffset] = useState(0);
   const [allVideos, setAllVideos] = useState<Video[]>([]);
+  const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
+  const [isVideoModalOpen, setIsVideoModalOpen] = useState(false);
+
+  // Check for shared video in URL and open modal when videos are loaded
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const videoId = urlParams.get('video');
+    if (videoId && allVideos.length > 0) {
+      const sharedVideo = allVideos.find(v => v.id === videoId);
+      if (sharedVideo) {
+        setSelectedVideo(sharedVideo);
+        setIsVideoModalOpen(true);
+        // Clean up URL after opening modal
+        window.history.replaceState({}, '', window.location.pathname);
+      }
+    }
+  }, [allVideos]);
 
   // Fetch videos
   const { data: videosResponse, isLoading, refetch } = useQuery<VideosResponse>({
@@ -68,6 +86,11 @@ export default function Home() {
     refetch();
   }, [searchQuery, offset, refetch]);
 
+  const handleCloseModal = () => {
+    setIsVideoModalOpen(false);
+    setSelectedVideo(null);
+  };
+
   return (
     <div className="min-h-screen bg-bunny-dark">
       <SearchHeader
@@ -86,6 +109,15 @@ export default function Home() {
         />
       </main>
 
+      {/* Shared video modal - handles deep links */}
+      {selectedVideo && isVideoModalOpen && (
+        <VideoModal
+          video={selectedVideo}
+          isOpen={isVideoModalOpen}
+          onClose={handleCloseModal}
+        />
+      )}
+
       {/* Footer */}
       <footer className="bg-bunny-gray/50 border-t border-gray-700 mt-16">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">