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

Improve video player controls and quality indicator display

Browse Source 
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 2025-08-07 10:56:49 +00:00
parent 8b956ff704
commit 330a069bcd
1 changed files with 81 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
client/src/components/video-modal.tsx
View File

@ -540,28 +540,30 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
</div> </div>
)} )}
{/* Quality Indicator */} {/* Quality Indicator - only show on hover */}
{hlsRef.current && ( {hlsRef.current && showControls && (
<QualityIndicator <QualityIndicator
hlsInstance={hlsRef.current} hlsInstance={hlsRef.current}
className="absolute top-4 left-4" className="absolute top-4 left-4 transition-opacity duration-300"
/> />
)} )}
{/* Video Controls and Share Menu */} {/* Video Controls - only show on hover */}
<div className="absolute top-4 right-4 flex gap-2"> {showControls && (
<div className="absolute top-4 right-4 flex gap-2 transition-opacity duration-300">
{/* Share Button */} {/* Share Button */}
<div className="relative"> <div className="relative">
<Button <Button
onClick={() => setShowShareMenu(!showShareMenu)} onClick={() => setShowShareMenu(!showShareMenu)}
variant="secondary" variant="secondary"
size="sm" size="sm"
className="bg-black/50 hover:bg-black/70 border-white/20"
data-testid="button-share" data-testid="button-share"
> >
<Share2 className="w-4 h-4" /> <Share2 className="w-4 h-4 text-white" />
</Button> </Button>
{/* Share Menu */} {/* Share Menu - moved to bottom */}
{showShareMenu && ( {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="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="flex flex-col gap-2">
@ -625,17 +627,8 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
</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>
)}
</div> </div>
{/* Video info - only show when not playing or when controls are visible */} {/* Video info - only show when not playing or when controls are visible */}