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

Improve video player controls for better user interaction

Browse Source 
Update the video modal to conditionally display custom video controls and a play button based on user mouse events within the player, improving the user experience by keeping controls visible for longer and providing a clear play action.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/8NR8jTy
This commit is contained in:
sebastjanartic 2025-08-28 21:10:23 +00:00
parent 5893851508
commit 7515434e01
1 changed files with 26 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -53,6 +53,7 @@ function formatDate(date: Date | string): string {
export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos = [], onVideoChange }: BunnyVideoModalProps) { export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos = [], onVideoChange }: BunnyVideoModalProps) {
const [showShareMenu, setShowShareMenu] = useState(false); const [showShareMenu, setShowShareMenu] = useState(false);
const [showCustomControls, setShowCustomControls] = useState(true);
// Navigation functions // Navigation functions
const getCurrentVideoIndex = () => { const getCurrentVideoIndex = () => {
@ -260,25 +261,21 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
<div className="flex-1"> <div className="flex-1">
<div <div
className="relative w-full aspect-video bg-black rounded-lg overflow-hidden" className="relative w-full aspect-video bg-black rounded-lg overflow-hidden"
onMouseMove={() => { onMouseEnter={() => setShowCustomControls(true)}
const iframe = document.querySelector('iframe'); onMouseLeave={() => {
if (iframe) { setTimeout(() => setShowCustomControls(false), 3000);
iframe.style.pointerEvents = 'auto';
}
}} }}
onClick={() => setShowCustomControls(true)}
> >
{video.videoUrlIframe ? ( {video.videoUrlIframe ? (
<iframe <iframe
src={video.videoUrlIframe} src={video.videoUrlIframe}
className="absolute inset-0 w-full h-full hover:opacity-100" className="absolute inset-0 w-full h-full"
frameBorder="0" frameBorder="0"
allowFullScreen allowFullScreen
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
onLoad={handleVideoPlay} onLoad={handleVideoPlay}
title={video.title} title={video.title}
style={{
pointerEvents: 'auto'
}}
/> />
) : ( ) : (
<div className="absolute inset-0 flex items-center justify-center text-white"> <div className="absolute inset-0 flex items-center justify-center text-white">
@ -286,24 +283,26 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
</div> </div>
)} )}
{/* Invisible overlay to keep controls active longer */} {/* Custom Play Button - Always Visible on Center */}
<div <div
className="absolute inset-0 bg-transparent" className={`absolute inset-0 flex items-center justify-center transition-opacity duration-300 ${
style={{ pointerEvents: 'none' }} showCustomControls ? 'opacity-100' : 'opacity-0'
onMouseEnter={() => { }`}
const iframe = document.querySelector('iframe'); style={{ pointerEvents: showCustomControls ? 'auto' : 'none' }}
if (iframe && iframe.contentWindow) { >
// Trigger a mouse move event in the iframe to keep controls visible <Button
iframe.contentWindow.postMessage('{"method":"showControls"}', '*'); onClick={() => {
} const iframe = document.querySelector('iframe');
}} if (iframe && iframe.contentWindow) {
onMouseMove={() => { iframe.contentWindow.postMessage('{"method":"play"}', '*');
const iframe = document.querySelector('iframe'); }
if (iframe && iframe.contentWindow) { }}
iframe.contentWindow.postMessage('{"method":"showControls"}', '*'); className="bg-black bg-opacity-70 hover:bg-opacity-90 text-white border-none p-6 rounded-full z-30 backdrop-blur-sm"
} size="lg"
}} >
/> <Play className="w-12 h-12 fill-white" />
</Button>
</div>
{/* Navigation buttons - always visible */} {/* Navigation buttons - always visible */}
{videos.length > 1 && ( {videos.length > 1 && (