Improve video player controls and quality indicator display
Refactor VideoModal to show quality indicator and controls on hover, move share menu to the bottom, and update button styling for better visibility. Replit-Commit-Author: Agent Replit-Commit-Session-Id: d7424866-83d1-4486-a212-ac12b4c7becf Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/d7424866-83d1-4486-a212-ac12b4c7becf/IiM2U2D
This commit is contained in:
sebastjanartic
parent
8b956ff704
commit
330a069bcd
@ -540,102 +540,95 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Quality Indicator */}
|
||||
{hlsRef.current && (
|
||||
{/* Quality Indicator - only show on hover */}
|
||||
{hlsRef.current && showControls && (
|
||||
<QualityIndicator
|
||||
hlsInstance={hlsRef.current}
|
||||
className="absolute top-4 left-4"
|
||||
className="absolute top-4 left-4 transition-opacity duration-300"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Video Controls and Share Menu */}
|
||||
<div className="absolute top-4 right-4 flex gap-2">
|
||||
{/* Share Button */}
|
||||
<div className="relative">
|
||||
<Button
|
||||
onClick={() => setShowShareMenu(!showShareMenu)}
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
data-testid="button-share"
|
||||
>
|
||||
<Share2 className="w-4 h-4" />
|
||||
</Button>
|
||||
|
||||
{/* 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-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>
|
||||
{videoThumbnail && (
|
||||
<div className="mt-2">
|
||||
<img
|
||||
src={videoThumbnail}
|
||||
alt="Video preview"
|
||||
className="w-full h-20 object-cover rounded border"
|
||||
/>
|
||||
<span className="text-xs text-gray-600 dark:text-gray-400 mt-1 block">Preview image for sharing</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
onClick={() => {
|
||||
console.log('Facebook share clicked:', getShareUrl());
|
||||
window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(getShareUrl())}`, '_blank', 'width=600,height=400');
|
||||
}}
|
||||
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>
|
||||
|
||||
<div
|
||||
onClick={() => {
|
||||
console.log('Twitter share clicked:', getShareUrl());
|
||||
window.open(`https://twitter.com/intent/tweet?url=${encodeURIComponent(getShareUrl())}&text=${encodeURIComponent(`Watch "${video.title}" on g4.video`)}`, '_blank', 'width=600,height=400');
|
||||
}}
|
||||
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>
|
||||
|
||||
<div
|
||||
onClick={() => {
|
||||
console.log('WhatsApp share clicked:', getShareUrl());
|
||||
window.open(`https://wa.me/?text=${encodeURIComponent(`Watch "${video.title}" on g4.video: ${getShareUrl()}`)}`, '_blank');
|
||||
}}
|
||||
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>
|
||||
|
||||
<button
|
||||
onClick={copyToClipboard}
|
||||
className="flex items-center gap-2 p-2 w-full hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer text-left"
|
||||
>
|
||||
<div className="w-5 h-5 bg-gray-500 rounded-full flex items-center justify-center">
|
||||
<span className="text-white text-xs">📋</span>
|
||||
{/* Video Controls - only show on hover */}
|
||||
{showControls && (
|
||||
<div className="absolute top-4 right-4 flex gap-2 transition-opacity duration-300">
|
||||
{/* Share Button */}
|
||||
<div className="relative">
|
||||
<Button
|
||||
onClick={() => setShowShareMenu(!showShareMenu)}
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
className="bg-black/50 hover:bg-black/70 border-white/20"
|
||||
data-testid="button-share"
|
||||
>
|
||||
<Share2 className="w-4 h-4 text-white" />
|
||||
</Button>
|
||||
|
||||
{/* Share Menu - moved to bottom */}
|
||||
{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-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>
|
||||
{videoThumbnail && (
|
||||
<div className="mt-2">
|
||||
<img
|
||||
src={videoThumbnail}
|
||||
alt="Video preview"
|
||||
className="w-full h-20 object-cover rounded border"
|
||||
/>
|
||||
<span className="text-xs text-gray-600 dark:text-gray-400 mt-1 block">Preview image for sharing</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-sm text-gray-900 dark:text-gray-100">Copy Link</span>
|
||||
</button>
|
||||
|
||||
<div
|
||||
onClick={() => {
|
||||
console.log('Facebook share clicked:', getShareUrl());
|
||||
window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(getShareUrl())}`, '_blank', 'width=600,height=400');
|
||||
}}
|
||||
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>
|
||||
|
||||
<div
|
||||
onClick={() => {
|
||||
console.log('Twitter share clicked:', getShareUrl());
|
||||
window.open(`https://twitter.com/intent/tweet?url=${encodeURIComponent(getShareUrl())}&text=${encodeURIComponent(`Watch "${video.title}" on g4.video`)}`, '_blank', 'width=600,height=400');
|
||||
}}
|
||||
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>
|
||||
|
||||
<div
|
||||
onClick={() => {
|
||||
console.log('WhatsApp share clicked:', getShareUrl());
|
||||
window.open(`https://wa.me/?text=${encodeURIComponent(`Watch "${video.title}" on g4.video: ${getShareUrl()}`)}`, '_blank');
|
||||
}}
|
||||
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>
|
||||
|
||||
<button
|
||||
onClick={copyToClipboard}
|
||||
className="flex items-center gap-2 p-2 w-full hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer text-left"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Fallback button for iframe if HLS fails */}
|
||||
<Button
|
||||
onClick={() => video.videoUrlIframe && window.open(video.videoUrlIframe, '_blank')}
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
data-testid="button-iframe-fallback"
|
||||
>
|
||||
Open in Bunny Player
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Video info - only show when not playing or when controls are visible */}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user