[mirotalksfu] - make 'about' customizable

2025-01-30 22:20:42 +01:00
--- 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 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.7.18
+ * @version 1.7.19
 *
 */

--- 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:miroslav.pejic.85@gmail.com?subject=MiroTalk SFU info"> 
+                        miroslav.pejic.85@gmail.com
+                    </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: {
--- 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",
--- 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:miroslav.pejic.85@gmail.com?subject=MiroTalk SFU info"> 
+                miroslav.pejic.85@gmail.com
+            </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();
--- 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.7.18
+ * @version 1.7.19
 *
 */

@@ -4902,39 +4902,51 @@ 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:miroslav.pejic.85@gmail.com?subject=MiroTalk SFU info"> 
-                miroslav.pejic.85@gmail.com
-            </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:miroslav.pejic.85@gmail.com?subject=MiroTalk SFU info"> 
+                                miroslav.pejic.85@gmail.com
+                            </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' },
--- 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.7.18
+ * @version 1.7.19
 *
 */