[mirotalksfu] - make 'about' customizable

miroslavpejic85 · Jan 30, 2025 · 6bf0908 · 6bf0908
1 parent 0c8a7d6
commit 6bf0908
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 80 deletions.
diff --git a/app/src/Server.js b/app/src/Server.js
@@ -55,7 +55,7 @@ dev dependencies: {
  * @license For commercial or closed source, contact us at [email protected] or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - [email protected]
- * @version 1.7.18
+ * @version 1.7.19
  *
  */
 

diff --git a/app/src/config.template.js b/app/src/config.template.js
@@ -1,5 +1,7 @@
 'use strict';
 
+const packageJson = require('../../package.json');
+
 const os = require('os');
 
 // #############################
@@ -469,13 +471,46 @@ module.exports = {
             },
             html: {
                 features: true,
-                teams: true, // Please keep me always visible, thank you!
+                teams: true,
                 tryEasier: true,
                 poweredBy: true,
                 sponsors: true,
                 advertisers: true,
                 footer: true,
             },
+            about: {
+                imageUrl: '../images/mirotalk-logo.gif',
+                title: `WebRTC SFU v${packageJson.version}`,
+                html: `
+                    <button 
+                        id="support-button" 
+                        data-umami-event="Support button" 
+                        onclick="window.open('https://codecanyon.net/user/miroslavpejic85', '_blank')">
+                        <i class="fas fa-heart"></i> Support
+                    </button>
+                    <br /><br /><br />
+                    Author: 
+                    <a 
+                        id="linkedin-button" 
+                        data-umami-event="Linkedin button" 
+                        href="https://www.linkedin.com/in/miroslav-pejic-976a07101/" 
+                        target="_blank"> 
+                        Miroslav Pejic
+                    </a>
+                    <br /><br />
+                    Email: 
+                    <a 
+                        id="email-button" 
+                        data-umami-event="Email button" 
+                        href="mailto:[email protected]?subject=MiroTalk SFU info"> 
+                        [email protected]
+                    </a>
+                    <br /><br />
+                    <hr />
+                    <span>&copy; 2025 MiroTalk SFU, all rights reserved</span>
+                    <hr />
+                `,
+            },
             //...
         },
         /*
@@ -499,7 +534,7 @@ module.exports = {
                 snapshotRoomButton: true,
                 emojiRoomButton: true,
                 settingsButton: true,
-                aboutButton: true, // Please keep me always visible, thank you!
+                aboutButton: true,
                 exitButton: true,
             },
             settings: {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalksfu",
-    "version": "1.7.18",
+    "version": "1.7.19",
     "description": "WebRTC SFU browser-based video calls",
     "main": "Server.js",
     "scripts": {
@@ -58,14 +58,14 @@
     },
     "dependencies": {
         "@mattermost/client": "10.2.0",
-        "@sentry/node": "^8.52.0",
+        "@sentry/node": "^8.52.1",
         "axios": "^1.7.9",
         "colors": "1.4.0",
         "compression": "1.7.5",
         "cors": "2.8.5",
         "crypto-js": "4.2.0",
         "discord.js": "^14.17.3",
-        "dompurify": "^3.2.3",
+        "dompurify": "^3.2.4",
         "express": "4.21.2",
         "express-openid-connect": "^2.17.1",
         "fluent-ffmpeg": "^2.1.3",
@@ -78,7 +78,7 @@
         "mediasoup-client": "3.8.1",
         "ngrok": "^5.0.0-beta.2",
         "nodemailer": "^6.10.0",
-        "openai": "^4.80.1",
+        "openai": "^4.81.0",
         "qs": "6.14.0",
         "socket.io": "4.8.1",
         "swagger-ui-express": "5.0.1",

diff --git a/public/js/Brand.js b/public/js/Brand.js
@@ -12,13 +12,6 @@ const newRoomDescription = document.getElementById('newRoomDescription');
 const description = document.getElementById('description');
 const keywords = document.getElementById('keywords');
 
-const ogType = document.getElementById('ogType');
-const ogSiteName = document.getElementById('ogSiteName');
-const ogTitle = document.getElementById('ogTitle');
-const ogDescription = document.getElementById('ogDescription');
-const ogImage = document.getElementById('ogImage');
-const ogUrl = document.getElementById('ogUrl');
-
 const appTitle = document.getElementById('appTitle');
 const appDescription = document.getElementById('appDescription');
 const joinDescription = document.getElementById('joinDescription');
@@ -60,14 +53,6 @@ let BRAND = {
         keywords:
             'webrtc, miro, mediasoup, mediasoup-client, self hosted, voip, sip, real-time communications, chat, messaging, meet, webrtc stun, webrtc turn, webrtc p2p, webrtc sfu, video meeting, video chat, video conference, multi video chat, multi video conference, peer to peer, p2p, sfu, rtc, alternative to, zoom, microsoft teams, google meet, jitsi, meeting',
     },
-    og: {
-        type: 'app-webrtc',
-        siteName: 'MiroTalk SFU',
-        title: 'Click the link to make a call.',
-        description: 'MiroTalk SFU calling provides real-time video calls, messaging and screen sharing.',
-        image: 'https://sfu.mirotalk.com/images/mirotalksfu.png',
-        url: 'https://sfu.mirotalk.com',
-    },
     html: {
         features: true,
         teams: true,
@@ -77,6 +62,39 @@ let BRAND = {
         advertisers: true,
         footer: true,
     },
+    about: {
+        imageUrl: '../images/mirotalk-logo.gif',
+        title: '<strong>WebRTC SFU v1.7.19</strong>',
+        html: `
+            <button 
+                id="support-button" 
+                data-umami-event="Support button" 
+                onclick="window.open('https://codecanyon.net/user/miroslavpejic85', '_blank')">
+                <i class="fas fa-heart"></i> Support
+            </button>
+            <br /><br /><br />
+            Author: 
+            <a 
+                id="linkedin-button" 
+                data-umami-event="Linkedin button" 
+                href="https://www.linkedin.com/in/miroslav-pejic-976a07101/" 
+                target="_blank"> 
+                Miroslav Pejic
+            </a>
+            <br /><br />
+            Email: 
+            <a 
+                id="email-button" 
+                data-umami-event="Email button" 
+                href="mailto:[email protected]?subject=MiroTalk SFU info"> 
+                [email protected]
+            </a>
+            <br /><br />
+            <hr />
+            <span>&copy; 2025 MiroTalk SFU, all rights reserved</span>
+            <hr />
+        `,
+    },
     //...
 };
 
@@ -87,8 +105,6 @@ async function initialize() {
 
     customizeMetaTags();
 
-    customizeOpenGraph();
-
     customizeApp();
 
     checkBrand();
@@ -190,26 +206,4 @@ function customizeMetaTags() {
     }
 }
 
-// SOCIAL MEDIA SHARING metadata
-function customizeOpenGraph() {
-    if (ogType && BRAND.og?.type) {
-        ogType.content = BRAND.og.type;
-    }
-    if (ogSiteName && BRAND.og?.siteName) {
-        ogSiteName.content = BRAND.og.siteName;
-    }
-    if (ogTitle && BRAND.og?.title) {
-        ogTitle.content = BRAND.og.title;
-    }
-    if (ogDescription && BRAND.og?.description) {
-        ogDescription.content = BRAND.og.description;
-    }
-    if (ogImage && BRAND.og?.image) {
-        ogImage.content = BRAND.og.image;
-    }
-    if (ogUrl && BRAND.og?.url) {
-        ogUrl.content = BRAND.og.url;
-    }
-}
-
 initialize();
diff --git 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 [email protected] or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - [email protected]
- * @version 1.7.18
+ * @version 1.7.19
  *
  */
 
@@ -4902,41 +4902,53 @@ function showAbout() {
 
     Swal.fire({
         background: swalBackground,
-        imageUrl: image.about,
-        customClass: { image: 'img-about' },
         position: 'center',
-        title: 'WebRTC SFU v1.7.18',
+        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.7.19',
         html: `
-        <br />
-        <div id="about">
-            <button 
-                id="support-button" 
-                data-umami-event="Support button" 
-                onclick="window.open('https://codecanyon.net/user/miroslavpejic85')">
-                <i class="fas fa-heart"></i> 
-                Support
-            </button>
-            <br /><br /><br />
-            Author: <a 
-                id="linkedin-button" 
-                data-umami-event="Linkedin button" 
-                href="https://www.linkedin.com/in/miroslav-pejic-976a07101/" target="_blank"> 
-                Miroslav Pejic
-            </a>
-            <br /><br />
-            Email:<a 
-                id="email-button" 
-                data-umami-event="Email button" 
-                href="mailto:[email protected]?subject=MiroTalk SFU info"> 
-                [email protected]
-            </a>
-            <br /><br />
-            <hr />
-            <span>&copy; 2025 MiroTalk SFU, all rights reserved</span>
-            <hr />
-        </div>
+            <br />
+            <div id="about">
+                ${
+                    BRAND.about?.html && BRAND.about.html.trim() !== '' 
+                        ? BRAND.about.html 
+                        : `
+                            <button 
+                                id="support-button" 
+                                data-umami-event="Support button" 
+                                onclick="window.open('https://codecanyon.net/user/miroslavpejic85', '_blank')">
+                                <i class="fas fa-heart"></i> Support
+                            </button>
+                            <br /><br /><br />
+                            Author: 
+                            <a 
+                                id="linkedin-button" 
+                                data-umami-event="Linkedin button" 
+                                href="https://www.linkedin.com/in/miroslav-pejic-976a07101/" 
+                                target="_blank"> 
+                                Miroslav Pejic
+                            </a>
+                            <br /><br />
+                            Email: 
+                            <a 
+                                id="email-button" 
+                                data-umami-event="Email button" 
+                                href="mailto:[email protected]?subject=MiroTalk SFU info"> 
+                                [email protected]
+                            </a>
+                            <br /><br />
+                            <hr />
+                            <span>&copy; 2025 MiroTalk SFU, all rights reserved</span>
+                            <hr />
+                        `
+                }
+            </div>
         `,
         showClass: { popup: 'animate__animated animate__fadeInDown' },
         hideClass: { popup: 'animate__animated animate__fadeOutUp' },
     });
-}
+}
diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js
@@ -9,7 +9,7 @@
  * @license For commercial or closed source, contact us at [email protected] or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - [email protected]
- * @version 1.7.18
+ * @version 1.7.19
  *
  */