Improve video ad integration and streamline video player initialization sequence

Initialize the Video.js player without sources, load ads plugin immediately, and then set the video source in `client/src/components/video-modal.tsx`, while attaching an image.

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/cKeR57s

client/src/components/video-modal.tsx

@@ -101,7 +101,7 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
       console.log('Loading video with Video.js:', videoUrl);
 
       try {
-        // Initialize Video.js player with simplified configuration
+        // Initialize Video.js player without sources first
         const player = videojs(videoElement, {
           controls: true,
           fluid: true,
@@ -113,47 +113,32 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
               smoothQualityChange: true,
               overrideNative: false
             }
-          },
+          }
-          sources: [{
+        });
-            src: videoUrl,
+
-            type: videoUrl.includes('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'
+        // Initialize ads plugin immediately after player creation
-          }]
+        if (typeof (player as any).ads === 'function') {
+          try {
+            (player as any).ads({
+              debug: false,
+              prerollTimeout: 3000,
+              postrollTimeout: 3000,
+              timeout: 5000
+            });
+            console.log('Ads plugin initialized');
+          } catch (error) {
+            console.log('Ads plugin initialization failed:', error);
+          }
+        }
+
+        // Set source after ads plugin is ready
+        player.src({
+          src: videoUrl,
+          type: videoUrl.includes('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'
         });
 
         player.ready(() => {
-          console.log('Video.js player ready');
+          console.log('Video.js player ready with source');
-          
-          // Initialize ads plugin first
-          if (typeof (player as any).ads === 'function') {
-            try {
-              (player as any).ads({
-                debug: true,
-                prerollTimeout: 3000,
-                postrollTimeout: 3000,
-                timeout: 5000
-              });
-              console.log('Ads plugin initialized');
-              
-              // Then initialize IMA plugin for VAST ads
-              if (typeof (player as any).ima === 'function') {
-                (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=' + Math.round(Math.random() * 100000000),
-                  debug: true,
-                  timeout: 5000,
-                  maxRedirects: 4,
-                  vpaidMode: 'ENABLED',
-                  vpaidAllowed: true,
-                  autoPlayAdBreaks: true,
-                  adLabel: 'Advertisement',
-                  showControlsForJSAds: true
-                });
-                console.log('IMA plugin initialized with VAST ads');
-              }
-            } catch (error) {
-              console.log('Ads plugin initialization failed:', error);
-            }
-          }
         });
 
         player.on('error', (error: any) => {
@@ -164,24 +149,16 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
           handleVideoPlay();
         });
 
-        // Ads event listeners
+        // Simple ads event listeners
-        player.on('ads-request', () => {
+        player.on('adstart', () => {
-          console.log('Ad request initiated');
-        });
-
-        player.on('ads-load', () => {
-          console.log('Ad loaded successfully');
-        });
-
-        player.on('ads-start', () => {
           console.log('Ad playback started');
         });
 
-        player.on('ads-end', () => {
+        player.on('adend', () => {
           console.log('Ad playback ended');
         });
 
-        player.on('ads-error', (error: any) => {
+        player.on('aderror', (error: any) => {
           console.log('Ad error:', error);
         });