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

Move share button below video information in modal

Browse Source 
Update the `BunnyVideoModal` component to relocate the share button and its associated social media sharing options below the video's informational details.

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
This commit is contained in:
sebastjanartic 2025-08-30 16:36:52 +00:00
parent 73571c8c75
commit 7461c29491
2 changed files with 53 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1756571758127.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

104
client/src/components/bunny-video-modal.tsx
View File

@ -189,57 +189,6 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
Bearbeiten Bearbeiten
</Button> </Button>
)} )}
<div className="relative">
<Button
variant="ghost"
size="sm"
onClick={() => setShowShareMenu(!showShareMenu)}
className="text-white hover:bg-gray-700"
data-testid="button-share-video"
>
<Share2 className="w-4 h-4" />
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>
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
@ -310,6 +259,59 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
<span data-testid="text-video-date">{formatDate(video.createdAt)}</span> <span data-testid="text-video-date">{formatDate(video.createdAt)}</span>
</div> </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 && ( {video.description && (
<div className="text-sm text-gray-300"> <div className="text-sm text-gray-300">
<p className="leading-relaxed whitespace-pre-wrap break-words" data-testid="text-video-description"> <p className="leading-relaxed whitespace-pre-wrap break-words" data-testid="text-video-description">