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

Add video sharing functionality with social media options

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-08-30 16:37:47 +00:00
parent 7461c29491
commit ae6e5b7bc0
1 changed files with 59 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -248,19 +248,14 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
{/* Video info always below video */} {/* Video info always below video */}
<div className="w-full max-w-lg ml-8"> <div className="w-full max-w-lg ml-8">
<div className="p-4 bg-gray-800 rounded-lg text-white"> <div className="p-4 bg-gray-800 rounded-lg text-white relative">
<h3 className="font-bold text-xl mb-3 whitespace-normal break-words" data-testid="text-video-title"> <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} {video.title}
</h3> </h3>
<div className="flex flex-wrap gap-4 text-sm text-gray-300 mb-3"> {/* Share button next to title */}
<span data-testid="text-video-views">{formatViews(video.views)}</span> <div className="relative">
<span data-testid="text-video-duration">{formatDuration(video.duration)}</span>
<span data-testid="text-video-date">{formatDate(video.createdAt)}</span>
</div>
{/* Share button below video info */}
<div className="relative mb-3">
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
@ -274,7 +269,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
{showShareMenu && ( {showShareMenu && (
<div <div
className="absolute left-0 top-full mt-2 bg-gray-800 rounded-lg shadow-lg py-2 z-50 min-w-[200px]" 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' }} style={{ backgroundColor: '#374151' }}
> >
<button <button
@ -311,6 +306,13 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
</div> </div>
)} )}
</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>
<span data-testid="text-video-duration">{formatDuration(video.duration)}</span>
<span data-testid="text-video-date">{formatDate(video.createdAt)}</span>
</div>
{video.description && ( {video.description && (
<div className="text-sm text-gray-300"> <div className="text-sm text-gray-300">