From d782a732b2bcc67f7ecb669614b50bbc34309376 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 20:54:06 +0000
Subject: [PATCH] Update video player to use native HTML5 controls

Replace iframe-based video player with native HTML5 video element and update player controls logic.

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/ODcEkiW
---
 client/src/components/bunny-video-modal.tsx | 72 +++++----------------
 1 file changed, 15 insertions(+), 57 deletions(-)

diff --git a/client/src/components/bunny-video-modal.tsx b/client/src/components/bunny-video-modal.tsx
index b8c2f3f..5b4f7d5 100644
--- a/client/src/components/bunny-video-modal.tsx
+++ b/client/src/components/bunny-video-modal.tsx
@@ -53,9 +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 [showControls, setShowControls] = useState(false);
-  const [controlsTimeout, setControlsTimeout] = useState<NodeJS.Timeout | null>(null);
-  const [showPlayButton, setShowPlayButton] = useState(true);
 
   // Navigation functions
   const getCurrentVideoIndex = () => {
@@ -80,33 +77,6 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
     }
   };
 
-  // Controls visibility logic
-  const showControlsTemporarily = () => {
-    setShowControls(true);
-    if (controlsTimeout) {
-      clearTimeout(controlsTimeout);
-    }
-    const timeout = setTimeout(() => {
-      setShowControls(false);
-    }, 4000); // Hide after 4 seconds
-    setControlsTimeout(timeout);
-  };
-
-  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(() => {
     const handleEscape = (e: KeyboardEvent) => {
@@ -288,37 +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 h-0 pb-[56.25%] bg-black rounded-lg overflow-hidden"
-            >
-              {video.videoUrlIframe ? (
-                <iframe
-                  src={video.videoUrlIframe}
-                  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}
-                />
+            <div className="relative w-full aspect-video bg-black rounded-lg overflow-hidden">
+              {video.videoUrl ? (
+                <video
+                  className="w-full h-full object-contain"
+                  controls
+                  preload="metadata"
+                  poster={video.thumbnailUrl}
+                  onPlay={handleVideoPlay}
+                >
+                  <source src={video.videoUrl} type="video/mp4" />
+                  <source src={video.videoUrl.replace('.mp4', '.webm')} type="video/webm" />
+                  <source src={video.videoUrl.replace('.mp4', '.m3u8')} type="application/x-mpegURL" />
+                  Vaš brskalnik ne podpira video predvajanja.
+                </video>
               ) : (
                 <div className="absolute inset-0 flex items-center justify-center text-white">
                   <p>Video ni na voljo</p>
                 </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>
-              )}
-              
-              {/* Navigation buttons - show/hide with controls */}
+              {/* Navigation buttons - always visible */}
               {videos.length > 1 && (
                 <>
                   <Button
@@ -337,8 +297,6 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
                   >
                     <ChevronRight className="w-6 h-6" />
                   </Button>
-                  
-                  
                 </>
               )}
             </div>