From db5a31e7c1eacafd00764c47b913f92ddc306339 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 8 Aug 2025 20:19:25 +0000
Subject: [PATCH] Fix video player issues by restructuring component logic

Refactor VideoModal component to fix video player issues by moving VAST player logic and cleanup logic to ensure proper initialization and resource management.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7424866-83d1-4486-a212-ac12b4c7becf
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/d7424866-83d1-4486-a212-ac12b4c7becf/5h9ujRr
---
 client/src/components/video-modal.tsx | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/client/src/components/video-modal.tsx b/client/src/components/video-modal.tsx
index ccd4460..8d8d121 100644
--- a/client/src/components/video-modal.tsx
+++ b/client/src/components/video-modal.tsx
@@ -91,11 +91,6 @@ export default function VideoModal({ video, isOpen, onClose, enableAds = true }:
       document.body.style.overflow = "";
     };
   }, [isOpen, onClose]);
-  
-  // Switch to VAST player for monetization
-  if (isOpen && video && useVASTPlayer && enableAds) {
-    return <VASTPlayer video={video} onClose={onClose} enableAds={enableAds} />;
-  }
 
   // Initialize HLS when video is available
   useEffect(() => {
@@ -276,6 +271,20 @@ export default function VideoModal({ video, isOpen, onClose, enableAds = true }:
     };
   }, [isOpen, video]);
 
+  // Cleanup controls timeout - moved before any returns
+  useEffect(() => {
+    return () => {
+      if (controlsTimeout) {
+        clearTimeout(controlsTimeout);
+      }
+    };
+  }, [controlsTimeout]);
+
+  // Switch to VAST player for monetization - after all hooks
+  if (isOpen && video && useVASTPlayer && enableAds) {
+    return <VASTPlayer video={video} onClose={onClose} enableAds={enableAds} />;
+  }
+
   // Function to capture video thumbnail
   const captureVideoThumbnail = () => {
     try {
@@ -351,14 +360,6 @@ export default function VideoModal({ video, isOpen, onClose, enableAds = true }:
     setControlsTimeout(timeout);
   };
 
-  useEffect(() => {
-    return () => {
-      if (controlsTimeout) {
-        clearTimeout(controlsTimeout);
-      }
-    };
-  }, [controlsTimeout]);
-
   const getShareUrl = () => {
     if (!video?.id) return window.location.origin;
     return `${window.location.origin}?video=${video.id}`;