From e274f6d7ac568a0ebedc82f1a7d3df1659e7502f Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Thu, 27 Jul 2023 09:22:11 +0200
Subject: [PATCH] [mirotalk] - fix init video

---
 public/css/videoGrid.css |  9 +++++++++
 public/js/client.js      |  3 +++
 public/views/client.html | 18 ++++++++++--------
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/public/css/videoGrid.css b/public/css/videoGrid.css
index b1120a78..de3f68bc 100644
--- a/public/css/videoGrid.css
+++ b/public/css/videoGrid.css
@@ -115,6 +115,15 @@
 # Video 
 --------------------------------------------------------------*/
 
+.container {
+    position: relative;
+}
+.container video {
+    z-index: 0;
+    position: relative;
+    height: 240px;
+}
+
 .videoCircle {
     position: absolute;
     width: var(--vmi-wh);
diff --git a/public/js/client.js b/public/js/client.js
index d8bb2a8b..222752b2 100644
--- a/public/js/client.js
+++ b/public/js/client.js
@@ -1368,6 +1368,9 @@ async function changeInitCamera(deviceId) {
     if (initStream) {
         stopTracks(initStream);
         initVideo.style.display = 'block';
+        if (!initVideo.classList.contains('mirror')) {
+            initVideo.classList.toggle('mirror');
+        }
     }
     // Get video constraints
     let videoConstraints = await getVideoConstraints('default');
diff --git a/public/views/client.html b/public/views/client.html
index d9edbf51..242169ae 100755
--- a/public/views/client.html
+++ b/public/views/client.html
@@ -76,14 +76,16 @@ access to use this app.
 
         <div id="initUser" class="init-user hidden">
             <!-- <p>Please allow the camera & microphone access to use this app.</p> -->
-            <video
-                id="initVideo"
-                playsinline="true"
-                autoplay=""
-                class="mirror"
-                poster="../images/loader.gif"
-                style="object-fit: var(--videoObjFit)"
-            ></video>
+            <div class="container">
+                <video
+                    id="initVideo"
+                    playsinline="true"
+                    autoplay=""
+                    class="mirror"
+                    poster="../images/loader.gif"
+                    style="object-fit: var(--videoObjFit)"
+                ></video>
+            </div>
             <button id="initVideoBtn" class="fas fa-video" onclick="handleVideo(event, true)"></button>
             <button id="initAudioBtn" class="fas fa-microphone" onclick="handleAudio(event, true)"></button>
             <button id="initScreenShareBtn" class="fas fa-desktop"></button>