trying to make it works

mbetterclient/qt_player/player.py

@@ -2151,6 +2151,7 @@ class WebPlayerWindow(QMainWindow):
                     this.transport = transport;
                     this.objects = {};
                     this.execCallbacks = {};
+                    this.signalHandlers = {}; // Store signal handlers
 
                     // Setup transport
                     if (transport) {
@@ -2176,8 +2177,12 @@ class WebPlayerWindow(QMainWindow):
                             var signalName = data.signal;
                             var args = data.args;
 
-                            if (this.objects[objectName] && this.objects[objectName][signalName]) {
-                                this.objects[objectName][signalName].apply(this.objects[objectName], args);
+                            // Check if we have handlers for this signal
+                            var signalKey = objectName + '.' + signalName;
+                            if (this.signalHandlers[signalKey]) {
+                                for (var i = 0; i < this.signalHandlers[signalKey].length; i++) {
+                                    this.signalHandlers[signalKey][i].apply(null, args);
+                                }
                             }
                         }
                     } catch (e) {
@@ -2200,6 +2205,15 @@ class WebPlayerWindow(QMainWindow):
                     this.transport.postMessage(JSON.stringify(message));
                 };
 
+                // Add connect method for signal handling
+                QWebChannel.prototype.connect = function(objectName, signalName, callback) {
+                    var signalKey = objectName + '.' + signalName;
+                    if (!this.signalHandlers[signalKey]) {
+                        this.signalHandlers[signalKey] = [];
+                    }
+                    this.signalHandlers[signalKey].push(callback);
+                };
+
                 return QWebChannel;
             })();
 
@@ -2229,14 +2243,14 @@ class WebPlayerWindow(QMainWindow):
 
                         // Set up data update handler
                         if (window.updateOverlayData) {
-                            window.overlay.dataUpdated.connect(function(data) {
+                            channel.connect('overlay', 'dataUpdated', function(data) {
                                 window.updateOverlayData(data);
                             });
                         }
 
                         // Set up video play handler
                         if (window.playVideo) {
-                            window.overlay.playVideo.connect(function(filePath) {
+                            channel.connect('overlay', 'playVideo', function(filePath) {
                                 console.log('WebChannel playVideo signal received:', filePath);
                                 window.playVideo(filePath);
                             });
@@ -2244,7 +2258,7 @@ class WebPlayerWindow(QMainWindow):
 
                         // Set up overlay data update handler
                         if (window.updateOverlayData) {
-                            window.overlay.updateOverlayData.connect(function(data) {
+                            channel.connect('overlay', 'updateOverlayData', function(data) {
                                 console.log('WebChannel updateOverlayData signal received:', data);
                                 window.updateOverlayData(data);
                             });

mbetterclient/qt_player/web_player_assets/web_player.html

@@ -39,6 +39,11 @@
             background: black;
             visibility: visible !important; /* Ensure video is visible */
             opacity: 1 !important; /* Ensure video is not transparent */
+            display: block !important; /* Ensure video is displayed */
+            position: absolute !important; /* Ensure proper positioning */
+            top: 0 !important;
+            left: 0 !important;
+            z-index: 100 !important; /* Ensure video is above background */
         }
 
         /* Overlay container */
@@ -266,7 +271,7 @@
 <body>
     <!-- Video container -->
     <div class="video-container">
-        <video id="webVideoPlayer" controls playsinline muted>
+        <video id="webVideoPlayer" playsinline muted autoplay>
             <source src="" type="video/mp4">
             Your browser does not support the video tag.
         </video>

mbetterclient/qt_player/web_player_assets/web_player.js

@@ -164,6 +164,35 @@ class WebPlayerAPI {
         console.log('Playing video:', filePath);
         this.currentVideoPath = filePath;
 
+        // CRITICAL FIX: Ensure video element is always visible and properly configured
+        // This fixes the grey background issue
+        this.videoElement.style.display = 'block';
+        this.videoElement.style.visibility = 'visible';
+        this.videoElement.style.opacity = '1';
+        this.videoElement.style.width = '100%';
+        this.videoElement.style.height = '100%';
+        this.videoElement.style.objectFit = 'contain';
+        this.videoElement.style.backgroundColor = 'black';
+        this.videoElement.style.position = 'absolute';
+        this.videoElement.style.top = '0';
+        this.videoElement.style.left = '0';
+        this.videoElement.style.zIndex = '100';
+
+        // Force video container to be visible
+        const videoContainer = document.querySelector('.video-container');
+        if (videoContainer) {
+            videoContainer.style.display = 'block';
+            videoContainer.style.visibility = 'visible';
+            videoContainer.style.opacity = '1';
+            videoContainer.style.zIndex = '100';
+            videoContainer.style.backgroundColor = 'black';
+            videoContainer.style.position = 'absolute';
+            videoContainer.style.top = '0';
+            videoContainer.style.left = '0';
+            videoContainer.style.width = '100%';
+            videoContainer.style.height = '100%';
+        }
+
         // Set video source and load
         this.videoElement.src = filePath;
 
@@ -191,26 +220,6 @@ class WebPlayerAPI {
         console.log('Video readyState:', this.videoElement.readyState);
         console.log('Video networkState:', this.videoElement.networkState);
         console.log('Video error:', this.videoElement.error);
-
-        // For debug mode, ensure video is visible and properly sized
-        if (window.location.href.includes('debug') || window.location.href.includes('debug-player')) {
-            console.log('DEBUG MODE: Ensuring video visibility');
-            this.videoElement.style.display = 'block';
-            this.videoElement.style.visibility = 'visible';
-            this.videoElement.style.opacity = '1';
-            this.videoElement.style.width = '100%';
-            this.videoElement.style.height = '100%';
-            this.videoElement.style.objectFit = 'contain';
-
-            // Force video element to be visible in debug mode
-            const videoContainer = document.querySelector('.video-container');
-            if (videoContainer) {
-                videoContainer.style.display = 'block';
-                videoContainer.style.visibility = 'visible';
-                videoContainer.style.opacity = '1';
-                videoContainer.style.zIndex = '100';
-            }
-        }
     }
 
     // Attempt playback with autoplay policy handling
@@ -221,13 +230,13 @@ class WebPlayerAPI {
         if (this.videoElement.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
             console.log('Video ready, attempting playback...');
 
-            // For debug mode, ensure video is visible before attempting playback
-            if (window.location.href.includes('debug') || window.location.href.includes('debug-player')) {
-                console.log('DEBUG MODE: Ensuring video is visible before playback');
-                this.videoElement.style.display = 'block';
-                this.videoElement.style.visibility = 'visible';
-                this.videoElement.style.opacity = '1';
-            }
+            // CRITICAL FIX: Always ensure video is visible before playback
+            this.videoElement.style.display = 'block';
+            this.videoElement.style.visibility = 'visible';
+            this.videoElement.style.opacity = '1';
+
+            // CRITICAL FIX: Set muted to true to allow autoplay in modern browsers
+            this.videoElement.muted = true;
 
             // Try to play with autoplay policy handling
             this.videoElement.play().then(() => {
@@ -243,13 +252,10 @@ class WebPlayerAPI {
                 this.videoElement.controls = true;
                 this.videoElement.muted = true; // Muted videos can often autoplay
 
-                // For debug mode, ensure video is visible even if autoplay fails
-                if (window.location.href.includes('debug') || window.location.href.includes('debug-player')) {
-                    console.log('DEBUG MODE: Forcing video visibility despite autoplay block');
-                    this.videoElement.style.display = 'block';
-                    this.videoElement.style.visibility = 'visible';
-                    this.videoElement.style.opacity = '1';
-                }
+                // CRITICAL FIX: Always ensure video is visible even if autoplay fails
+                this.videoElement.style.display = 'block';
+                this.videoElement.style.visibility = 'visible';
+                this.videoElement.style.opacity = '1';
 
                 // Try again with muted
                 this.videoElement.play().catch(e2 => {
@@ -259,13 +265,11 @@ class WebPlayerAPI {
             });
         } else {
             console.log('Video not ready yet, waiting for more data...');
-            // For debug mode, ensure video is visible even while waiting
-            if (window.location.href.includes('debug') || window.location.href.includes('debug-player')) {
-                console.log('DEBUG MODE: Ensuring video is visible while waiting for data');
-                this.videoElement.style.display = 'block';
-                this.videoElement.style.visibility = 'visible';
-                this.videoElement.style.opacity = '1';
-            }
+
+            // CRITICAL FIX: Always ensure video is visible even while waiting
+            this.videoElement.style.display = 'block';
+            this.videoElement.style.visibility = 'visible';
+            this.videoElement.style.opacity = '1';
         }
     }