[mirotalksfu] - make whoAreYou page configurable

2025-07-07 21:06:11 +02:00
--- a/.env.template
+++ b/.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
--- a/app/src/config.template.js
+++ b/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
             * ---------------------
--- a/package-lock.json
+++ b/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",
-            "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-7.0.4.tgz",
-            "integrity": "sha512-9O00Vh89/Ld2EcVCqJ/etd7u20UhME0f/NToPfArwPEe1Don1zy4mAIz6ariRr7mJ2RDxtaDzN0WJVdVXPtZaw==",
+            "version": "7.0.5",
+            "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-7.0.5.tgz",
+            "integrity": "sha512-nsrh2lO3j4GkLLXoeEksAMgAOqxOv6QumNRVQTJwKH4nuiww6iC2y7GyANs9kRAxCexg3+lTWM3PZ91iLlVjfg==",
            "license": "MIT-0",
            "engines": {
                "node": ">=6.0.0"
--- a/package.json
+++ b/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",
--- a/public/js/Brand.js
+++ b/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();
--- a/public/js/Room.js
+++ b/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">
--- a/public/js/RoomClient.js
+++ b/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
 *
 */

--- a/public/views/whoAreYou.html
+++ b/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>
-                                <p class="hero-paragraph">
+                                <h1 id="whoAreYouTitle" class="hero-title mt-0 mb-16">Who are you?</h1>
+                                <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. -->