From fe0edc93bd999a71d64ec1419d8a847052a8ca9b Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Thu, 5 Feb 2026 23:37:38 +0100
Subject: [PATCH] [mirotalk] - fix mirrored video in fullscreen/privacy mode

---
 .env.template              |   2 +-
 app/src/config.template.js |   2 +-
 app/src/server.js          |   2 +-
 package-lock.json          |   4 +-
 package.json               |   2 +-
 public/css/videoGrid.css   |   6 +++
 public/js/brand.js         |   2 +-
 public/js/client.js        | 105 ++++++++++++++++++++-----------------
 8 files changed, 69 insertions(+), 56 deletions(-)

diff --git a/.env.template b/.env.template
index 4acd025f..f368e56e 100644
--- a/.env.template
+++ b/.env.template
@@ -1,5 +1,5 @@
 # ====================================================
-# MiroTalk P2P v.1.7.22 - Environment Configuration
+# MiroTalk P2P v.1.7.23 - Environment Configuration
 # ====================================================
 
 # App environment
diff --git a/app/src/config.template.js b/app/src/config.template.js
index 1302e421..4db417c1 100644
--- a/app/src/config.template.js
+++ b/app/src/config.template.js
@@ -2,7 +2,7 @@
 
 /**
  * ==============================================
- * MiroTalk P2P v.1.7.22 - Configuration File
+ * MiroTalk P2P v.1.7.23 - Configuration File
  * ==============================================
  *
  * Branding and customizations require a license:
diff --git a/app/src/server.js b/app/src/server.js
index 2fefa9c3..65408ab3 100755
--- a/app/src/server.js
+++ b/app/src/server.js
@@ -45,7 +45,7 @@ dependencies: {
  * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.7.22
+ * @version 1.7.23
  *
  */
 
diff --git a/package-lock.json b/package-lock.json
index 68f5f972..a73c5838 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "mirotalk",
-    "version": "1.7.22",
+    "version": "1.7.23",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "mirotalk",
-            "version": "1.7.22",
+            "version": "1.7.23",
             "license": "AGPL-3.0",
             "dependencies": {
                 "@mattermost/client": "11.3.0",
diff --git a/package.json b/package.json
index 0df372f2..27da1deb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalk",
-    "version": "1.7.22",
+    "version": "1.7.23",
     "description": "A free WebRTC browser-based video call",
     "main": "server.js",
     "scripts": {
diff --git a/public/css/videoGrid.css b/public/css/videoGrid.css
index 5967fe17..dadec213 100644
--- a/public/css/videoGrid.css
+++ b/public/css/videoGrid.css
@@ -326,6 +326,12 @@ video:fullscreen {
     transform: rotateY(180deg);
 }
 
+.videoCircle.mirror {
+    -webkit-transform: translate(-50%, -50%) rotateY(180deg) !important;
+    -moz-transform: translate(-50%, -50%) rotateY(180deg) !important;
+    transform: translate(-50%, -50%) rotateY(180deg) !important;
+}
+
 @keyframes show {
     0% {
         opacity: 0;
diff --git a/public/js/brand.js b/public/js/brand.js
index 9ee20f55..2f8c3a29 100644
--- a/public/js/brand.js
+++ b/public/js/brand.js
@@ -79,7 +79,7 @@ let brand = {
     },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: 'WebRTC P2P v1.7.22',
+        title: 'WebRTC P2P v1.7.23',
         html: `
             <button 
                 id="support-button" 
diff --git a/public/js/client.js b/public/js/client.js
index 85b3fc42..25f2cdd2 100644
--- a/public/js/client.js
+++ b/public/js/client.js
@@ -15,7 +15,7 @@
  * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.7.22
+ * @version 1.7.23
  *
  */
 
@@ -4887,29 +4887,53 @@ function handleVideoPlayerFs(videoId, videoFullScreenBtnId, peer_id = null) {
     const videoPlayer = getId(videoId);
     const videoFullScreenBtn = getId(videoFullScreenBtnId);
 
-    // handle Chrome Firefox Opera Microsoft Edge videoPlayer ESC
-    videoPlayer.addEventListener('fullscreenchange', (e) => {
-        // if Controls enabled, or document on FS do nothing
-        if (videoPlayer.controls || isDocumentOnFullScreen) return;
-        const fullscreenElement = document.fullscreenElement;
-        if (!fullscreenElement) {
-            videoPlayer.style.pointerEvents = 'auto';
-            isVideoOnFullScreen = false;
-            // console.log("Esc FS isVideoOnFullScreen", isVideoOnFullScreen);
-        }
-    });
+    if (!videoPlayer || !videoFullScreenBtn) return;
 
-    // handle Safari videoPlayer ESC
-    videoPlayer.addEventListener('webkitfullscreenchange', (e) => {
+    // Prefer fullscreen on the wrapper tile (.Camera) to avoid browser-specific fullscreen video behaviors
+    const videoWrap = videoPlayer.closest('.Camera') || videoPlayer.parentElement;
+    const fsTarget = videoWrap || videoPlayer;
+
+    const getFsElement = () =>
+        document.fullscreenElement ||
+        document.webkitFullscreenElement ||
+        document.mozFullScreenElement ||
+        document.msFullscreenElement ||
+        null;
+
+    const requestFs = (el) => {
+        if (!el) return;
+        if (el.requestFullscreen) return el.requestFullscreen();
+        if (el.webkitRequestFullscreen) return el.webkitRequestFullscreen();
+        if (el.mozRequestFullScreen) return el.mozRequestFullScreen();
+        if (el.msRequestFullscreen) return el.msRequestFullscreen();
+    };
+
+    const exitFs = () => {
+        if (document.exitFullscreen) return document.exitFullscreen();
+        if (document.webkitCancelFullScreen) return document.webkitCancelFullScreen();
+        if (document.mozCancelFullScreen) return document.mozCancelFullScreen();
+        if (document.msExitFullscreen) return document.msExitFullscreen();
+    };
+
+    const sync = () => {
         // if Controls enabled, or document on FS do nothing
         if (videoPlayer.controls || isDocumentOnFullScreen) return;
-        const webkitIsFullScreen = document.webkitIsFullScreen;
-        if (!webkitIsFullScreen) {
-            videoPlayer.style.pointerEvents = 'auto';
-            isVideoOnFullScreen = false;
-            // console.log("Esc FS isVideoOnFullScreen", isVideoOnFullScreen);
-        }
-    });
+
+        const fsEl = getFsElement();
+        isVideoOnFullScreen = !!fsEl;
+
+        const isThisTargetFullscreen = fsEl === fsTarget || fsEl === videoPlayer;
+        videoPlayer.style.pointerEvents = isThisTargetFullscreen ? 'none' : 'auto';
+    };
+
+    // Attach fullscreen sync listeners once per video element
+    if (!videoPlayer.dataset.fsSyncAttached) {
+        videoPlayer.dataset.fsSyncAttached = '1';
+        document.addEventListener('fullscreenchange', sync);
+        document.addEventListener('webkitfullscreenchange', sync);
+        document.addEventListener('mozfullscreenchange', sync);
+        document.addEventListener('MSFullscreenChange', sync);
+    }
 
     // on button click go on FS mobile/desktop
     videoFullScreenBtn.addEventListener('click', (e) => {
@@ -4917,6 +4941,7 @@ function handleVideoPlayerFs(videoId, videoFullScreenBtnId, peer_id = null) {
             return userLog('toast', 'Full Screen not allowed if video on privacy mode');
         }
         gotoFS();
+        setTimeout(sync, 0);
     });
 
     // on video click go on FS
@@ -4960,34 +4985,16 @@ function handleVideoPlayerFs(videoId, videoFullScreenBtnId, peer_id = null) {
         // if Controls enabled, or document on FS do nothing
         if (videoPlayer.controls || isDocumentOnFullScreen) return;
 
-        if (!isVideoOnFullScreen) {
-            if (videoPlayer.requestFullscreen) {
-                // Chrome Firefox Opera Microsoft Edge
-                videoPlayer.requestFullscreen();
-            } else if (videoPlayer.webkitRequestFullscreen) {
-                // Safari request full screen mode
-                videoPlayer.webkitRequestFullscreen();
-            } else if (videoPlayer.msRequestFullscreen) {
-                // IE11 request full screen mode
-                videoPlayer.msRequestFullscreen();
-            }
-            isVideoOnFullScreen = true;
-            videoPlayer.style.pointerEvents = 'none';
-            // console.log("Go on FS isVideoOnFullScreen", isVideoOnFullScreen);
+        const fsEl = getFsElement();
+        const isThisTargetFullscreen = fsEl === fsTarget || fsEl === videoPlayer;
+
+        if (!fsEl) {
+            requestFs(fsTarget);
+        } else if (isThisTargetFullscreen) {
+            exitFs();
         } else {
-            if (document.exitFullscreen) {
-                // Chrome Firefox Opera Microsoft Edge
-                document.exitFullscreen();
-            } else if (document.webkitCancelFullScreen) {
-                // Safari exit full screen mode ( Not work... )
-                document.webkitCancelFullScreen();
-            } else if (document.msExitFullscreen) {
-                // IE11 exit full screen mode
-                document.msExitFullscreen();
-            }
-            isVideoOnFullScreen = false;
-            videoPlayer.style.pointerEvents = 'auto';
-            // console.log("Esc FS isVideoOnFullScreen", isVideoOnFullScreen);
+            // Exit the current fullscreen first, then enter fullscreen for this target
+            Promise.resolve(exitFs()).finally(() => requestFs(fsTarget));
         }
     }
 }
@@ -13636,7 +13643,7 @@ function showAbout() {
     Swal.fire({
         background: swBg,
         position: 'center',
-        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.7.22',
+        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.7.23',
         imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
         customClass: { image: 'img-about' },
         html: `