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

Remove custom video player controls from modal

Browse Source 
Removes the state and JSX related to custom play button and hover effects for controls in `bunny-video-modal.tsx`.

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/AmbacT4
This commit is contained in:
sebastjanartic 2025-08-28 21:11:29 +00:00
parent 7515434e01
commit e612f2029d
1 changed files with 1 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -53,7 +53,6 @@ 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 = () => {
@ -259,14 +258,7 @@ 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"
onMouseEnter={() => setShowCustomControls(true)}
onMouseLeave={() => {
setTimeout(() => setShowCustomControls(false), 3000);
}}
onClick={() => setShowCustomControls(true)}
>
<div className="relative w-full aspect-video bg-black rounded-lg overflow-hidden">
{video.videoUrlIframe ? (
<iframe
src={video.videoUrlIframe}
@ -283,27 +275,6 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
</div>
)}
{/* 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 && (
<>