From 6dfb57523239129a52ee5a75fc4f5fb416b43c75 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 20:42:59 +0000
Subject: [PATCH] Add a central play button for videos that initiates playback

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
---
 client/src/components/bunny-video-modal.tsx | 27 +++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/client/src/components/bunny-video-modal.tsx b/client/src/components/bunny-video-modal.tsx
index 037034f..2fa88b5 100644
--- a/client/src/components/bunny-video-modal.tsx
+++ b/client/src/components/bunny-video-modal.tsx
@@ -1,5 +1,5 @@
 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 { Button } from "@/components/ui/button";
 import { apiRequest } from "@/lib/queryClient";
@@ -55,6 +55,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
   const [showShareMenu, setShowShareMenu] = useState(false);
   const [showControls, setShowControls] = useState(false);
   const [controlsTimeout, setControlsTimeout] = useState<NodeJS.Timeout | null>(null);
+  const [showPlayButton, setShowPlayButton] = useState(true);
 
   // Navigation functions
   const getCurrentVideoIndex = () => {
@@ -94,6 +95,17 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
   const handleVideoClick = (e: React.MouseEvent) => {
     e.stopPropagation();
     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(() => {
@@ -295,6 +307,17 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
                 </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 */}
               <div 
                 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);
                   setControlsTimeout(timeout);
                 }}
-                style={{ pointerEvents: showControls ? 'none' : 'auto' }}
+                style={{ pointerEvents: (showControls || showPlayButton) ? 'none' : 'auto' }}
               ></div>
               
               {/* Navigation buttons - show/hide with controls */}