[mirotalksfu] - make whoAreYou page configurable

.env.template

@@ -248,6 +248,12 @@ SHOW_SPONSORS=true                                # Show sponsors (true|false)
 SHOW_ADVERTISERS=true                             # Show advertisers (true|false)
 SHOW_FOOTER=true                                  # Show footer (true|false)
 
+# Who Are You
+WHO_ARE_YOU_TITLE="Who are you?"                  # Title
+WHO_ARE_YOU_DESCRIPTION="If you're the presenter, please log in now.<br />Otherwise, kindly wait for the presenter to join." # Description
+WHO_ARE_YOU_BUTTON_LOGIN_LABEL="LOGIN"            # Login button label
+WHO_ARE_YOU_JOIN_LABEL="JOIN ROOM"                # Join button label
+
 # About
 ABOUT_IMAGE_URL=../images/mirotalk-logo.gif       # About section image
 SUPPORT_URL=https://codecanyon.net/user/miroslavpejic85 # Support link URL

app/src/config.template.js

@@ -1039,6 +1039,19 @@ module.exports = {
                 footer: process.env.SHOW_FOOTER !== 'false',
             },
 
+            /**
+             * Who Are You? Section
+             * ---------------------
+             * Prompts users to identify themselves before joining a room.
+             * Customizable text and button labels.
+             */
+            whoAreYou: {
+                title: process.env.WHO_ARE_YOU_TITLE || 'Who are you?',
+                description: process.env.WHO_ARE_YOU_DESCRIPTION || "If you\'re the presenter, please log in now.<br />Otherwise, kindly wait for the presenter to join.",
+                buttonLoginLabel: process.env.WHO_ARE_YOU_BUTTON_LOGIN_LABEL || 'LOGIN',
+                buttonJoinLabel: process.env.WHO_ARE_YOU_JOIN_LABEL || 'JOIN ROOM',
+            },
+
             /**
              * About/Credits Section
              * ---------------------

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "mirotalksfu",
-    "version": "1.8.83",
+    "version": "1.8.84",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "mirotalksfu",
-            "version": "1.8.83",
+            "version": "1.8.84",
             "license": "AGPL-3.0",
             "dependencies": {
                 "@aws-sdk/client-s3": "^3.842.0",
@@ -35,7 +35,7 @@
                 "jsonwebtoken": "^9.0.2",
                 "mediasoup": "3.16.5",
                 "mediasoup-client": "3.12.4",
-                "nodemailer": "^7.0.4",
+                "nodemailer": "^7.0.5",
                 "openai": "^5.8.2",
                 "qs": "6.14.0",
                 "sanitize-filename": "^1.6.3",
@@ -8306,9 +8306,9 @@
             "license": "MIT"
         },
         "node_modules/nodemailer": {
-            "version": "7.0.4",
+            "version": "7.0.5",
-            "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-7.0.4.tgz",
+            "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-7.0.5.tgz",
-            "integrity": "sha512-9O00Vh89/Ld2EcVCqJ/etd7u20UhME0f/NToPfArwPEe1Don1zy4mAIz6ariRr7mJ2RDxtaDzN0WJVdVXPtZaw==",
+            "integrity": "sha512-nsrh2lO3j4GkLLXoeEksAMgAOqxOv6QumNRVQTJwKH4nuiww6iC2y7GyANs9kRAxCexg3+lTWM3PZ91iLlVjfg==",
             "license": "MIT-0",
             "engines": {
                 "node": ">=6.0.0"

package.json

@@ -1,6 +1,6 @@
 {
     "name": "mirotalksfu",
-    "version": "1.8.83",
+    "version": "1.8.84",
     "description": "WebRTC SFU browser-based video calls",
     "main": "Server.js",
     "scripts": {
@@ -83,7 +83,7 @@
         "jsonwebtoken": "^9.0.2",
         "mediasoup": "3.16.5",
         "mediasoup-client": "3.12.4",
-        "nodemailer": "^7.0.4",
+        "nodemailer": "^7.0.5",
         "openai": "^5.8.2",
         "qs": "6.14.0",
         "sanitize-filename": "^1.6.3",

public/js/Brand.js

@@ -25,6 +25,11 @@ const poweredBy = document.getElementById('poweredBy');
 const sponsors = document.getElementById('sponsors');
 const advertisers = document.getElementById('advertisers');
 const footer = document.getElementById('footer');
+
+const whoAreYouTitle = document.getElementById('whoAreYouTitle');
+const whoAreYouDescription = document.getElementById('whoAreYouDescription');
+const presenterLoginButton = document.getElementById('presenterLoginButton');
+const guestJoinRoomButton = document.getElementById('guestJoinRoomButton');
 //...
 
 // app/src/config.js - ui.brand
@@ -62,9 +67,15 @@ let BRAND = {
         advertisers: true,
         footer: true,
     },
+    whoAreYou: {
+        title: 'Who are you?',
+        description: "If you\'re the presenter, please log in now.<br />Otherwise, kindly wait for the presenter to join.",
+        buttonLoginLabel: 'LOGIN',
+        buttonJoinLabel: 'JOIN ROOM',
+    },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: '<strong>WebRTC SFU v1.8.83</strong>',
+        title: '<strong>WebRTC SFU v1.8.84</strong>',
         html: `
             <button 
                 id="support-button" 
@@ -107,6 +118,8 @@ async function initialize() {
 
     customizeApp();
 
+    customizeWhoAreYou();
+
     checkBrand();
 }
 
@@ -206,4 +219,19 @@ function customizeMetaTags() {
     }
 }
 
+function customizeWhoAreYou() {
+    if (whoAreYouTitle && BRAND.whoAreYou?.title) {
+        whoAreYouTitle.textContent = BRAND.whoAreYou.title;
+    }
+    if (whoAreYouDescription && BRAND.whoAreYou?.description) {
+        whoAreYouDescription.innerHTML = BRAND.whoAreYou.description;
+    }
+    if (presenterLoginButton && BRAND.whoAreYou?.buttonLoginLabel) {
+        presenterLoginButton.textContent = BRAND.whoAreYou.buttonLoginLabel;
+    }
+    if (guestJoinRoomButton && BRAND.whoAreYou?.buttonJoinLabel) {
+        guestJoinRoomButton.textContent = BRAND.whoAreYou.buttonJoinLabel;
+    }
+}
+
 initialize();

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.8.83
+ * @version 1.8.84
  *
  */
 
@@ -5479,7 +5479,7 @@ function showAbout() {
         position: 'center',
         imageUrl: BRAND.about?.imageUrl && BRAND.about.imageUrl.trim() !== '' ? BRAND.about.imageUrl : image.about,
         customClass: { image: 'img-about' },
-        title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.8.83',
+        title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.8.84',
         html: `
             <br />
             <div id="about">

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.8.83
+ * @version 1.8.84
  *
  */
 

public/views/whoAreYou.html

@@ -66,8 +66,8 @@
                     <div class="container">
                         <div class="hero-inner">
                             <div class="hero-copy">
-                                <h1 class="hero-title mt-0 mb-16">Who are you?</h1>
+                                <h1 id="whoAreYouTitle" class="hero-title mt-0 mb-16">Who are you?</h1>
-                                <p class="hero-paragraph">
+                                <p id="whoAreYouDescription" class="hero-paragraph">
                                     If you're the presenter, please log in now.<br />
                                     Otherwise, kindly wait for the presenter to join.<br />
                                     <!-- You'll be redirected to the room when they arrive. -->