From b6654c0ff92633f883d94ed467aa824a83c8f8e3 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Tue, 5 Aug 2025 06:09:04 +0000
Subject: [PATCH] Improve video playback stability and address issues with ad
 loading process

Adds try/catch blocks for player disposal and initialization to handle errors, and simplifies ad plugin loading in video-modal.tsx.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 11420304-80a9-4ef2-adff-cbdaa418ffa8
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/11420304-80a9-4ef2-adff-cbdaa418ffa8/jU7cNe4
---
 client/src/components/video-modal.tsx | 99 +++++++++++++++------------
 1 file changed, 54 insertions(+), 45 deletions(-)

diff --git a/client/src/components/video-modal.tsx b/client/src/components/video-modal.tsx
index 575444a..162e6cb 100644
--- a/client/src/components/video-modal.tsx
+++ b/client/src/components/video-modal.tsx
@@ -89,66 +89,76 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
       
       // Clean up previous Video.js instance
       if (playerRef.current) {
-        playerRef.current.dispose();
+        try {
+          playerRef.current.dispose();
+        } catch (e) {
+          console.log('Player cleanup error:', e);
+        }
         playerRef.current = null;
       }
 
       const videoUrl = video.videoUrl;
       console.log('Loading video with Video.js:', videoUrl);
 
-      // Initialize Video.js player with ads support
-      const player = videojs(videoElement, {
-        controls: true,
-        fluid: true,
-        responsive: true,
-        preload: 'metadata',
-        html5: {
-          hls: {
-            enableLowInitialPlaylist: true,
-            smoothQualityChange: true,
-            overrideNative: true
-          }
-        },
-        sources: [{
-          src: videoUrl,
-          type: videoUrl.includes('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'
-        }]
-      });
+      try {
+        // Initialize Video.js player with simplified configuration
+        const player = videojs(videoElement, {
+          controls: true,
+          fluid: true,
+          responsive: true,
+          preload: 'metadata',
+          html5: {
+            hls: {
+              enableLowInitialPlaylist: true,
+              smoothQualityChange: true,
+              overrideNative: false
+            }
+          },
+          sources: [{
+            src: videoUrl,
+            type: videoUrl.includes('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'
+          }]
+        });
 
-      // Initialize ads plugin
-      player.ready(() => {
-        try {
-          // Initialize ads plugin
-          (player as any).ads();
+        player.ready(() => {
+          console.log('Video.js player ready');
           
-          // Configure IMA plugin for VAST ads
-          if ((player as any).ima) {
-            (player as any).ima({
-              id: video.id,
-              adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=',
-              contribAdsSettings: {
-                prerollTimeout: 1000,
-                postrollTimeout: 1000,
-                debug: true
-              }
-            });
+          // Only initialize ads if plugins are properly loaded
+          if (typeof (player as any).ads === 'function') {
+            try {
+              (player as any).ads({
+                debug: false,
+                prerollTimeout: 1000
+              });
+              console.log('Ads plugin initialized');
+            } catch (error) {
+              console.log('Ads plugin initialization failed:', error);
+            }
           }
-        } catch (error) {
-          console.log('Ads plugin not available, continuing without ads:', error);
-        }
-      });
+        });
 
-      player.on('error', (error: any) => {
-        console.error('Video.js player error:', error);
-      });
+        player.on('error', (error: any) => {
+          console.error('Video.js player error:', error);
+        });
 
-      playerRef.current = player;
+        player.on('play', () => {
+          handleVideoPlay();
+        });
+
+        playerRef.current = player;
+      } catch (error) {
+        console.error('Failed to initialize Video.js player:', error);
+      }
     }
 
     // Cleanup when modal closes
     return () => {
       if (playerRef.current) {
-        playerRef.current.dispose();
+        try {
+          playerRef.current.dispose();
+        } catch (e) {
+          console.log('Player cleanup error:', e);
+        }
         playerRef.current = null;
       }
     };
@@ -229,7 +239,6 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
             ref={videoRef}
             className="video-js vjs-default-skin w-full h-auto max-h-[80vh]"
             data-setup="{}"
-            onPlay={handleVideoPlay}
             data-testid="video-player"
             crossOrigin="anonymous"
           />