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

Improve video player controls for a better viewing experience

Browse Source 
Update iframe styling and add mouse event listeners to ensure video player controls remain visible and interactive for longer periods, enhancing user experience.

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/YyBJOrR
This commit is contained in:
sebastjanartic 2025-08-28 21:08:53 +00:00
parent 416b0df222
commit 5893851508
2 changed files with 50 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
client/index.html
View File

@ -25,6 +25,23 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="theme-color" content="#3b82f6" />
<style>
/* Force video controls to stay visible longer and be more accessible */
iframe {
pointer-events: auto !important;
cursor: pointer !important;
}
iframe:hover {
opacity: 1 !important;
}
/* Ensure iframe controls area is always interactive */
iframe[src*="iframe"] {
z-index: 10 !important;
}
</style>
</head>
<body>
<div id="root"></div>

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

@ -258,16 +258,27 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
<div className="flex-1 flex flex-col lg:flex-row gap-4 min-h-0">
{/* Main video player */}
<div className="flex-1">
<div className="relative w-full aspect-video bg-black rounded-lg overflow-hidden">
<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';
}
}}
>
{video.videoUrlIframe ? (
<iframe
src={`${video.videoUrlIframe}&controls=1&controlsTimeout=8000`}
className="absolute inset-0 w-full h-full"
src={video.videoUrlIframe}
className="absolute inset-0 w-full h-full hover:opacity-100"
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">
@ -275,6 +286,25 @@ 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"}', '*');
}
}}
/>
{/* Navigation buttons - always visible */}
{videos.length > 1 && (
<>