From ae6e5b7bc025da69184c184009bdb054ef1e53c5 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 16:37:47 +0000
Subject: [PATCH] Add video sharing functionality with social media options

Integrate social media sharing buttons (Facebook, Twitter, WhatsApp) and a copy-to-clipboard option for video links within the video modal.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/074b0e4c-6171-43bd-aa98-f9e04623ca14/Sy6XHzr
---
 client/src/components/bunny-video-modal.tsx | 116 ++++++++++----------
 1 file changed, 59 insertions(+), 57 deletions(-)

diff --git a/client/src/components/bunny-video-modal.tsx b/client/src/components/bunny-video-modal.tsx
index a5c00e6..74e4b3a 100644
--- a/client/src/components/bunny-video-modal.tsx
+++ b/client/src/components/bunny-video-modal.tsx
@@ -248,10 +248,65 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
           
           {/* Video info always below video */}
           <div className="w-full max-w-lg ml-8">
-            <div className="p-4 bg-gray-800 rounded-lg text-white">
-              <h3 className="font-bold text-xl mb-3 whitespace-normal break-words" data-testid="text-video-title">
-                {video.title}
-              </h3>
+            <div className="p-4 bg-gray-800 rounded-lg text-white relative">
+              <div className="flex justify-between items-start mb-3">
+                <h3 className="font-bold text-xl whitespace-normal break-words flex-1 pr-4" data-testid="text-video-title">
+                  {video.title}
+                </h3>
+                
+                {/* Share button next to title */}
+                <div className="relative">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setShowShareMenu(!showShareMenu)}
+                    className="text-white border-white/20 hover:bg-white/10"
+                    data-testid="button-share-video"
+                  >
+                    <Share2 className="w-4 h-4 mr-2" />
+                    Teilen
+                  </Button>
+                  
+                  {showShareMenu && (
+                    <div 
+                      className="absolute right-0 top-full mt-2 bg-gray-800 rounded-lg shadow-lg py-2 z-50 min-w-[200px]"
+                      style={{ backgroundColor: '#374151' }}
+                    >
+                      <button
+                        onClick={shareOnFacebook}
+                        className="w-full px-4 py-2 text-left text-white hover:bg-gray-700 flex items-center gap-2"
+                        data-testid="button-share-facebook"
+                      >
+                        <FacebookIcon size={16} round />
+                        Facebook
+                      </button>
+                      <button
+                        onClick={shareOnTwitter}
+                        className="w-full px-4 py-2 text-left text-white hover:bg-gray-700 flex items-center gap-2"
+                        data-testid="button-share-twitter"
+                      >
+                        <TwitterIcon size={16} round />
+                        Twitter
+                      </button>
+                      <button
+                        onClick={shareOnWhatsApp}
+                        className="w-full px-4 py-2 text-left text-white hover:bg-gray-700 flex items-center gap-2"
+                        data-testid="button-share-whatsapp"
+                      >
+                        <WhatsappIcon size={16} round />
+                        WhatsApp
+                      </button>
+                      <button
+                        onClick={copyToClipboard}
+                        className="w-full px-4 py-2 text-left text-white hover:bg-gray-700"
+                        data-testid="button-copy-link"
+                      >
+                        Link kopieren
+                      </button>
+                    </div>
+                  )}
+                </div>
+              </div>
               
               <div className="flex flex-wrap gap-4 text-sm text-gray-300 mb-3">
                 <span data-testid="text-video-views">{formatViews(video.views)}</span>
@@ -259,59 +314,6 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
                 <span data-testid="text-video-date">{formatDate(video.createdAt)}</span>
               </div>
 
-              {/* Share button below video info */}
-              <div className="relative mb-3">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => setShowShareMenu(!showShareMenu)}
-                  className="text-white border-white/20 hover:bg-white/10"
-                  data-testid="button-share-video"
-                >
-                  <Share2 className="w-4 h-4 mr-2" />
-                  Teilen
-                </Button>
-                
-                {showShareMenu && (
-                  <div 
-                    className="absolute left-0 top-full mt-2 bg-gray-800 rounded-lg shadow-lg py-2 z-50 min-w-[200px]"
-                    style={{ backgroundColor: '#374151' }}
-                  >
-                    <button
-                      onClick={shareOnFacebook}
-                      className="w-full px-4 py-2 text-left text-white hover:bg-gray-700 flex items-center gap-2"
-                      data-testid="button-share-facebook"
-                    >
-                      <FacebookIcon size={16} round />
-                      Facebook
-                    </button>
-                    <button
-                      onClick={shareOnTwitter}
-                      className="w-full px-4 py-2 text-left text-white hover:bg-gray-700 flex items-center gap-2"
-                      data-testid="button-share-twitter"
-                    >
-                      <TwitterIcon size={16} round />
-                      Twitter
-                    </button>
-                    <button
-                      onClick={shareOnWhatsApp}
-                      className="w-full px-4 py-2 text-left text-white hover:bg-gray-700 flex items-center gap-2"
-                      data-testid="button-share-whatsapp"
-                    >
-                      <WhatsappIcon size={16} round />
-                      WhatsApp
-                    </button>
-                    <button
-                      onClick={copyToClipboard}
-                      className="w-full px-4 py-2 text-left text-white hover:bg-gray-700"
-                      data-testid="button-copy-link"
-                    >
-                      Link kopieren
-                    </button>
-                  </div>
-                )}
-              </div>
-
               {video.description && (
                 <div className="text-sm text-gray-300">
                   <p className="leading-relaxed whitespace-pre-wrap break-words" data-testid="text-video-description">