[mirotalksfu] - improve init UI

app/src/Server.js

@@ -40,7 +40,7 @@ dependencies: {
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.3.47
+ * @version 1.3.48
  *
  */
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "mirotalksfu",
-    "version": "1.3.47",
+    "version": "1.3.48",
     "description": "WebRTC SFU browser-based video calls",
     "main": "Server.js",
     "scripts": {

public/css/Room.css

@@ -138,11 +138,41 @@ body {
 # Init User
 --------------------------------------------------------------*/
 
+.init-modal-size {
+    width: 1024px !important;
+    height: auto !important;
+}
+
 .init-user {
-    display: block;
+    display: flex;
     padding: 5px;
 }
 
+.init-video-container {
+    position: relative;
+    padding: 10px;
+    width: 100%;
+}
+
+.init-video-container video {
+    z-index: 0;
+    position: relative;
+    height: 240px;
+}
+
+.initComands {
+    width: 100%;
+}
+
+@media screen and (max-width: 1024px) {
+    .init-modal-size {
+        width: auto !important;
+    }
+    .init-user {
+        display: block;
+    }
+}
+
 .init-user select {
     width: 100%;
     margin-top: 15px;
@@ -156,9 +186,13 @@ body {
 }
 
 .init-user button {
+    width: 50px;
+    padding: 10px;
     margin-top: 20px;
     margin-bottom: 10px;
-    width: 50px;
+    font-size: 1.2rem;
+    border: var(--border);
+    border-radius: 5px;
     background-color: transparent;
 }
 
@@ -214,21 +248,6 @@ body {
     color: red;
 }
 
-/*--------------------------------------------------------------
-# Init Audio/Video buttons
---------------------------------------------------------------*/
-
-#initAudioButton,
-#initVideoButton,
-#initAudioVideoButton,
-#initStartScreenButton,
-#initStopScreenButton {
-    font-size: 1.2rem;
-    padding: 10px;
-    border: var(--border);
-    border-radius: 5px;
-}
-
 /*--------------------------------------------------------------
 # Room QR
 --------------------------------------------------------------*/

public/css/VideoGrid.css

@@ -172,15 +172,6 @@
     border-radius: '10px';
 }
 
-.init-container {
-    position: relative;
-}
-.init-container video {
-    z-index: 0;
-    position: relative;
-    height: 240px;
-}
-
 video {
     width: 100%;
     height: 100%;

public/js/Room.js

@@ -11,7 +11,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.3.47
+ * @version 1.3.48
  *
  */
 
@@ -735,6 +735,7 @@ async function whoAreYou() {
         elemDisplay('initAudioVideoButton', false);
         elemDisplay('initVideoSelect', false);
         elemDisplay('tabVideoDevicesBtn', false);
+        initVideoContainerShow(false);
     }
     if (!BUTTONS.main.startAudioButton) {
         isAudioAllowed = false;
@@ -761,6 +762,7 @@ async function whoAreYou() {
         inputValue: default_name,
         html: initUser, // Inject HTML
         confirmButtonText: `Join meeting`,
+        customClass: { popup: 'init-modal-size' },
         showClass: { popup: 'animate__animated animate__fadeInDown' },
         hideClass: { popup: 'animate__animated animate__fadeOutUp' },
         inputValidator: (name) => {
@@ -777,16 +779,16 @@ async function whoAreYou() {
     }).then(async () => {
         if (initStream && !joinRoomWithScreen) {
             await stopTracks(initStream);
-            // hide(initVideo);
             elemDisplay('initVideo', false);
+            initVideoContainerShow(false);
         }
         getPeerInfo();
         joinRoom(peer_name, room_id);
     });
 
     if (!isVideoAllowed) {
-        // hide(initVideo);
         elemDisplay('initVideo', false);
+        initVideoContainerShow(false);
         hide(initVideoSelect);
     }
     if (!isAudioAllowed) {
@@ -838,13 +840,16 @@ async function handleAudioVideo() {
 
 async function checkInitVideo(isVideoAllowed) {
     if (isVideoAllowed && BUTTONS.main.startVideoButton) {
-        if (initVideoSelect.value) await changeCamera(initVideoSelect.value);
+        if (initVideoSelect.value) {
+            initVideoContainerShow();
+            await changeCamera(initVideoSelect.value);
+        }
         sound('joined');
     } else {
         if (initStream) {
             stopTracks(initStream);
-            // hide(initVideo);
             elemDisplay('initVideo', false);
+            initVideoContainerShow(false);
             sound('left');
         }
     }
@@ -857,6 +862,11 @@ function checkInitAudio(isAudioAllowed) {
     isAudioAllowed ? sound('joined') : sound('left');
 }
 
+function initVideoContainerShow(show = true) {
+    initVideoContainer.style.padding = show ? '10px' : '0px';
+    initVideoContainer.style.width = show ? '100%' : 'auto';
+}
+
 function checkMedia() {
     let qs = new URLSearchParams(window.location.search);
     let audio = filterXSS(qs.get('audio'));
@@ -1612,8 +1622,8 @@ async function setSelectsInit() {
 async function changeCamera(deviceId) {
     if (initStream) {
         await stopTracks(initStream);
-        //show(initVideo);
         elemDisplay('initVideo', true);
+        initVideoContainerShow();
         if (!initVideo.classList.contains('mirror')) {
             initVideo.classList.toggle('mirror');
         }
@@ -1653,8 +1663,8 @@ async function changeCamera(deviceId) {
 async function toggleScreenSharing() {
     if (initStream) {
         await stopTracks(initStream);
-        //show(initVideo);
         elemDisplay('initVideo', true);
+        initVideoContainerShow();
     }
     joinRoomWithScreen = !joinRoomWithScreen;
     if (joinRoomWithScreen) {

public/js/RoomClient.js

@@ -9,7 +9,7 @@
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.3.47
+ * @version 1.3.48
  *
  */
 

public/views/Room.html

@@ -109,7 +109,7 @@ access to use this app.
         <section>
             <div id="initUser" class="init-user hidden">
                 <!-- <p>Please allow the camera & microphone access to use this app.</p> -->
-                <div class="init-container">
+                <div id="initVideoContainer" class="init-video-container">
                     <video
                         id="initVideo"
                         playsinline="true"
@@ -119,7 +119,7 @@ access to use this app.
                         style="object-fit: contain"
                     ></video>
                 </div>
-                <div>
+                <div class="initComands">
                     <button id="initVideoButton" class="fas fa-video" onclick="handleVideo(event)"></button>
                     <button id="initAudioButton" class="fas fa-microphone" onclick="handleAudio(event)"></button>
                     <button id="initAudioVideoButton" class="fas fa-eye" onclick="handleAudioVideo(event)"></button>
@@ -133,10 +133,10 @@ access to use this app.
                         class="fas fa-stop-circle hidden"
                         onclick="toggleScreenSharing()"
                     ></button>
+                    <select id="initVideoSelect" class="form-select text-light bg-dark"></select>
+                    <select id="initMicrophoneSelect" class="form-select text-light bg-dark"></select>
+                    <select id="initSpeakerSelect" class="form-select text-light bg-dark"></select>
                 </div>
-                <select id="initVideoSelect" class="form-select text-light bg-dark"></select>
-                <select id="initMicrophoneSelect" class="form-select text-light bg-dark"></select>
-                <select id="initSpeakerSelect" class="form-select text-light bg-dark"></select>
             </div>
         </section>