Fix overlay template cycling during match video playback

- Fixed overlay controller to check video phase before loading templates
- Prevented template rotation during match and result phases
- Fixed resultUpdate message handling in overlay-web-adapter.js
- Template rotation now only runs during idle/intro phases
- match_video template now correctly displays during match video
- results template now correctly displays during result video

mbetterclient/web_dashboard/static/js/overlay-web-adapter.js

@@ -357,6 +357,14 @@
                     }, 100);
                 }
             });
+        },
+        
+        // Get current overlay data - returns Promise (used by results template)
+        getCurrentData: function() {
+            return new Promise((resolve) => {
+                debugLog('getCurrentData called, returning overlayData');
+                resolve(JSON.stringify(overlayData));
+            });
         }
     };
     
@@ -472,8 +480,11 @@
                 break;
                 
             case 'resultUpdate':
-                debugLog('Result update received');
-                window.overlay.dataUpdated.emit({ result_update: message });
+                debugLog('Result update received:', message);
+                // Emit the result data directly (not wrapped) so templates can process it
+                // The message contains: outcome, result, under_over_result, match_id, etc.
+                overlayData = { ...overlayData, ...message };
+                window.overlay.dataUpdated.emit(message);
                 break;
                 
             case 'videoStateChanged':

web/overlay-controller.js

@@ -123,20 +123,42 @@ class WebOverlayController {
         // Initial scale calculation
         this.updateOverlayScale();
         
-        // Start real-time updates
-        this.startRealTimeUpdates();
+        // IMPORTANT: Load template configuration BEFORE starting real-time updates
+        // This ensures we know the template sequence before handling phase transitions
+        this.log('Loading template config...');
+        await this.loadTemplateConfig();
+        this.log('Template config loaded');
         
-        // Load default template
+        // IMPORTANT: Fetch initial overlay data to check video phase BEFORE loading default template
+        // This prevents loading the wrong template during match/result phases
+        this.log('Fetching initial overlay data to check video phase...');
+        await this.fetchOverlayData();
+        this.log(`Initial video phase: ${this.videoPhase}`);
+        
+        // Load appropriate template based on current video phase
+        if (this.videoPhase === 'match') {
+            this.log('In match phase - loading match_video template');
+            await this.loadTemplate('match_video');
+        } else if (this.videoPhase === 'result') {
+            this.log('In result phase - loading results template');
+            await this.loadTemplate('results');
+        } else {
+            // Load default template for idle/intro phases
             this.log('Loading default template...');
             await this.loadTemplate('default');
             this.log('Default template loaded');
             
+            // Start template rotation only if in idle/intro phase
+            if (this.videoPhase === 'idle' || this.videoPhase === 'intro') {
+                this.startTemplateRotation();
+            }
+        }
+        
         this.initialized = true;
-        this.log('Initialization complete, loading template config...');
+        this.log('Initialization complete');
         
-        // Load template configuration and start rotation
-        await this.loadTemplateConfig();
-        this.log('Template config loaded');
+        // Start real-time updates (polling for phase changes)
+        this.startRealTimeUpdates();
         
         // Emit initialized event
         this.emit('initialized');
@@ -168,8 +190,8 @@ class WebOverlayController {
                 this.log(`Loaded template config: ${this.templateSequence.length} templates, rotating every ${this.rotatingTime}s`);
                 this.log('Template sequence:', this.templateSequence.map(t => t.name).join(', '));
                 
-                // Start template rotation
-                this.startTemplateRotation();
+                // NOTE: Don't start template rotation here - it will be started
+                // conditionally in initialize() based on the current video phase
             } else {
                 this.log('No template sequence configured, using default template');
             }
@@ -182,6 +204,12 @@ class WebOverlayController {
      * Start template rotation timer
      */
     startTemplateRotation() {
+        // Don't start rotation if in match or result phase
+        if (this.videoPhase === 'match' || this.videoPhase === 'result') {
+            this.log(`Template rotation not started - in ${this.videoPhase} phase`);
+            return;
+        }
+        
         if (!this.templateSequence || this.templateSequence.length <= 1) {
             this.log('Template rotation disabled: need at least 2 templates');
             return;
@@ -190,7 +218,10 @@ class WebOverlayController {
         this.rotationEnabled = true;
         
         // Stop any existing rotation timer
-        this.stopTemplateRotation();
+        if (this.rotationTimer) {
+            clearInterval(this.rotationTimer);
+            this.rotationTimer = null;
+        }
         
         // Load first template immediately
         this.currentTemplateIndex = 0;
@@ -221,6 +252,12 @@ class WebOverlayController {
      * Rotate to the next template in the sequence
      */
     rotateTemplate() {
+        // Don't rotate if in match or result phase
+        if (this.videoPhase === 'match' || this.videoPhase === 'result') {
+            this.log(`Template rotation skipped - in ${this.videoPhase} phase`);
+            return;
+        }
+        
         if (!this.templateSequence || this.templateSequence.length === 0) {
             this.log('No template sequence available for rotation');
             return;
@@ -594,6 +631,7 @@ class WebOverlayController {
                 this.phaseVideoDuration = newPhaseVideoDuration;
                 
                 // Handle phase transitions with delay compensation
+                // Only trigger transition if phase actually changed
                 if (newPhase !== previousPhase) {
                     this.log(`Video phase changed: ${previousPhase} -> ${newPhase}`);
                     this.handlePhaseTransition(previousPhase, newPhase, response);
@@ -604,7 +642,8 @@ class WebOverlayController {
                 const isNowPlayingMatchVideo = response.is_playing_match_video;
                 
                 // Handle match video state changes (fallback for older API)
-                if (isNowPlayingMatchVideo && !wasPlayingMatchVideo && newPhase === 'match') {
+                // Only do this if we haven't already handled the phase transition
+                if (isNowPlayingMatchVideo && !wasPlayingMatchVideo && newPhase === 'match' && this.currentTemplate !== 'match_video') {
                     // Match video just started - stop rotation and load match_video template
                     this.log('Match video started - stopping template rotation');
                     this.stopTemplateRotation();
@@ -696,13 +735,20 @@ class WebOverlayController {
                 this.log('Result phase - stopping rotation, loading results template');
                 this.stopTemplateRotation();
                 // Send result data to template before loading
-                this.sendMessageToOverlay('resultData', {
+                // Use 'resultUpdate' message type which the web adapter handles
+                const resultData = {
                     outcome: data.outcome || data.result,
                     result: data.result,
+                    under_over_result: data.under_over_result,
                     match_id: data.match_id,
                     fixture_id: data.fixture_id,
-                    winningOutcomes: data.winningOutcomes || []
-                });
+                    winningOutcomes: data.winningOutcomes || [],
+                    match: data.match || null
+                };
+                this.log('Sending resultUpdate to overlay:', resultData);
+                this.sendMessageToOverlay('resultUpdate', resultData);
+                // Also send as dataUpdated for compatibility
+                this.sendMessageToOverlay('dataUpdated', resultData);
                 this.loadTemplate('results');
                 break;