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

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