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

Add a central play button for videos that initiates playback

Browse Source 
Update the video modal to include a central play button that, when clicked, attempts to initiate video playback via an iframe postMessage. This addresses an issue where the play button was not functioning in the center of the video.

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/LnCNXGk
This commit is contained in:
sebastjanartic 2025-08-28 20:42:59 +00:00
parent d6f440dfbc
commit 6dfb575232
1 changed files with 25 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { X, Share2, Edit3, ChevronLeft, ChevronRight } from "lucide-react"; import { X, Share2, Edit3, ChevronLeft, ChevronRight, Play } from "lucide-react";
import { type Video } from "@shared/schema"; import { type Video } from "@shared/schema";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { apiRequest } from "@/lib/queryClient"; import { apiRequest } from "@/lib/queryClient";
@ -55,6 +55,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
const [showShareMenu, setShowShareMenu] = useState(false); const [showShareMenu, setShowShareMenu] = useState(false);
const [showControls, setShowControls] = useState(false); const [showControls, setShowControls] = useState(false);
const [controlsTimeout, setControlsTimeout] = useState<NodeJS.Timeout | null>(null); const [controlsTimeout, setControlsTimeout] = useState<NodeJS.Timeout | null>(null);
const [showPlayButton, setShowPlayButton] = useState(true);
// Navigation functions // Navigation functions
const getCurrentVideoIndex = () => { const getCurrentVideoIndex = () => {
@ -94,6 +95,17 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
const handleVideoClick = (e: React.MouseEvent) => { const handleVideoClick = (e: React.MouseEvent) => {
e.stopPropagation(); e.stopPropagation();
showControlsTemporarily(); showControlsTemporarily();
setShowPlayButton(false); // Hide play button when clicked
};
const handlePlayButtonClick = (e: React.MouseEvent) => {
e.stopPropagation();
setShowPlayButton(false);
// Try to trigger video play via postMessage to iframe
const iframe = document.querySelector('iframe');
if (iframe && iframe.contentWindow) {
iframe.contentWindow.postMessage('{"method":"play"}', '*');
}
}; };
useEffect(() => { useEffect(() => {
@ -295,6 +307,17 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
</div> </div>
)} )}
{/* Central play button */}
{showPlayButton && (
<Button
onClick={handlePlayButtonClick}
className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black bg-opacity-60 hover:bg-opacity-80 text-white border-none p-4 rounded-full z-40 transition-all duration-300"
size="lg"
>
<Play className="w-8 h-8 fill-white" />
</Button>
)}
{/* Invisible overlay for controls interaction */} {/* Invisible overlay for controls interaction */}
<div <div
className="absolute inset-0 z-10 cursor-pointer" className="absolute inset-0 z-10 cursor-pointer"
@ -312,7 +335,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
const timeout = setTimeout(() => setShowControls(false), 1500); const timeout = setTimeout(() => setShowControls(false), 1500);
setControlsTimeout(timeout); setControlsTimeout(timeout);
}} }}
style={{ pointerEvents: showControls ? 'none' : 'auto' }} style={{ pointerEvents: (showControls || showPlayButton) ? 'none' : 'auto' }}
></div> ></div>
{/* Navigation buttons - show/hide with controls */} {/* Navigation buttons - show/hide with controls */}