[mirotalk] - add scan to join popup, update dep

Author: miroslavpejic85

app/src/server.js

@@ -45,7 +45,7 @@ dependencies: {
  * @license For commercial use or closed source, contact us at [email protected] or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - [email protected]
- * @version 1.4.97
+ * @version 1.4.98
  *
  */
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "mirotalk",
-    "version": "1.4.97",
+    "version": "1.4.98",
     "description": "A free WebRTC browser-based video call",
     "main": "server.js",
     "scripts": {
@@ -43,14 +43,14 @@
     "dependencies": {
         "@mattermost/client": "10.6.0",
         "@ngrok/ngrok": "1.4.1",
-        "@sentry/node": "^9.10.1",
+        "@sentry/node": "^9.11.0",
         "axios": "^1.8.4",
         "chokidar": "^4.0.3",
         "colors": "^1.4.0",
         "compression": "^1.8.0",
         "cors": "^2.8.5",
         "crypto-js": "^4.2.0",
-        "dompurify": "^3.2.4",
+        "dompurify": "^3.2.5",
         "dotenv": "^16.4.7",
         "express": "^5.1.0",
         "express-openid-connect": "^2.18.0",

public/css/client.css

@@ -952,6 +952,34 @@ button:hover {
     align-items: center;
 }
 
+#qrRoomPopupContainer {
+    z-index: 9999;
+    position: fixed;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 10px;
+    background: var(--body-bg);
+    border: var(--border);
+    border-radius: 10px;
+    box-shadow: var(--box-shadow);
+}
+
+#qrText {
+    margin-top: 10px;
+    color: #fff;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    width: 100%;
+}
+
+#qrRoomPopup {
+    width: 256px;
+    height: 256px;
+}
+
 /*--------------------------------------------------------------
 # My settings
 --------------------------------------------------------------*/
@@ -1858,6 +1886,13 @@ hr {
     display: block;
 }
 
+.top-center {
+    position: fixed;
+    top: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
 .center {
     position: fixed;
     top: 50%;

public/js/brand.js

@@ -73,7 +73,7 @@ let brand = {
     },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: 'WebRTC P2P v1.4.97',
+        title: 'WebRTC P2P v1.4.98',
         html: `
             <button 
                 id="support-button" 

public/js/client.js

@@ -15,7 +15,7 @@
  * @license For commercial use or closed source, contact us at [email protected] or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - [email protected]
- * @version 1.4.97
+ * @version 1.4.98
  *
  */
 
@@ -1968,6 +1968,7 @@ async function joinToChannel() {
         userAgent: userAgent,
     });
     handleBodyOnMouseMove(); // show/hide buttonsBar, bottomButtons ...
+    makeRoomPopupQR();
 }
 
 /**
@@ -4482,6 +4483,14 @@ function setShareRoomBtn() {
     shareRoomBtn.addEventListener('click', async (e) => {
         shareRoomUrl();
     });
+    shareRoomBtn.addEventListener('mouseenter', () => {
+        if (isMobileDevice) return;
+        elemDisplay(qrRoomPopupContainer, true);
+    });
+    shareRoomBtn.addEventListener('mouseleave', () => {
+        if (isMobileDevice) return;
+        elemDisplay(qrRoomPopupContainer, false);
+    });
 }
 
 /**
@@ -6324,7 +6333,7 @@ function shareRoomMeetingURL(checkScreen = false) {
  * https://github.com/neocotic/qrious
  */
 function makeRoomQR() {
-    let qr = new QRious({
+    const qr = new QRious({
         element: getId('qrRoom'),
         value: window.location.href,
     });
@@ -6333,6 +6342,19 @@ function makeRoomQR() {
     });
 }
 
+/**
+ * Make Room Popup QR
+ */
+function makeRoomPopupQR() {
+    const qr = new QRious({
+        element: document.getElementById('qrRoomPopup'),
+        value: window.location.href,
+    });
+    qr.set({
+        size: 256,
+    });
+}
+
 /**
  * Copy Room URL to clipboard
  */
@@ -11055,7 +11077,7 @@ function showAbout() {
     Swal.fire({
         background: swBg,
         position: 'center',
-        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.4.97',
+        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.4.98',
         imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
         customClass: { image: 'img-about' },
         html: `

public/views/client.html

@@ -94,6 +94,13 @@ <h1>Loading</h1>
             </pre>
         </div>
 
+        <!-- Scan to Join -->
+
+        <div id="qrRoomPopupContainer" class="top-center fadein">
+            <canvas id="qrRoomPopup"></canvas>
+            <div id="qrText">Scan to join the room</div>
+        </div>
+
         <!-- init user devices -->
 
         <div id="initUser" class="init-user hidden">