From d5eb5a83e99e57b8923fd7ff6ad2ded081eaec42 Mon Sep 17 00:00:00 2001 From: Miroslav Pejic Date: Thu, 21 Mar 2024 14:56:00 +0100 Subject: [PATCH] [mirotalksfu] - add Brand Customizations, update dep --- app/src/Server.js | 7 +- app/src/config.template.js | 39 ++++++++ package.json | 4 +- public/js/Brand.js | 183 +++++++++++++++++++++++++++++++++++ public/js/Common.js | 37 ------- public/js/Room.js | 6 +- public/js/Umami.js | 2 +- public/views/404.html | 31 ++++-- public/views/50X.html | 31 ++++-- public/views/Room.html | 24 +++-- public/views/about.html | 19 ++-- public/views/landing.html | 33 ++++--- public/views/login.html | 22 +++-- public/views/newroom.html | 22 +++-- public/views/permission.html | 31 ++++-- public/views/privacy.html | 31 ++++-- 16 files changed, 393 insertions(+), 129 deletions(-) create mode 100644 public/js/Brand.js delete mode 100644 public/js/Common.js diff --git a/app/src/Server.js b/app/src/Server.js index 54a69cbe..2aab9bd8 100644 --- a/app/src/Server.js +++ b/app/src/Server.js @@ -41,7 +41,7 @@ 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.3.98 + * @version 1.4.0 * */ @@ -295,6 +295,11 @@ function startServer() { res.status(200).json({ message: config.ui ? config.ui.buttons : false }); }); + // Brand configuration + app.get('/brand', (req, res) => { + res.status(200).json({ message: config.ui ? config.ui.brand : false }); + }); + // main page app.get(['/'], (req, res) => { if (hostCfg.protected) { diff --git a/app/src/config.template.js b/app/src/config.template.js index df0c6068..64798587 100644 --- a/app/src/config.template.js +++ b/app/src/config.template.js @@ -110,6 +110,45 @@ module.exports = { join_first: true, // Set to true for traditional behavior, false to prioritize presenters }, ui: { + /* + Customize your MiroTalk instance + */ + brand: { + app: { + name: 'MiroTalk SFU', + title: 'MiroTalk SFU
Free browser based Real-time video calls.
Simple, Secure, Fast.', + description: + 'Start your next video call with a single click. No download, plug-in, or login is required. Just get straight to talking, messaging, and sharing your screen.', + }, + site: { + title: 'MiroTalk SFU, Free Video Calls, Messaging and Screen Sharing', + icon: '../images/logo.svg', + appleTouchIcon: '../images/logo.svg', + }, + meta: { + description: + 'MiroTalk SFU powered by WebRTC and mediasoup, Real-time Simple Secure Fast video calls, messaging and screen sharing capabilities in the browser.', + 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', + }, + html: { + features: true, + teams: true, // Please keep me always visible, thank you! + tryEasier: true, + poweredBy: true, + sponsors: true, + advertisers: true, + footer: true, + }, + //... + }, /* Toggle the visibility of specific HTML elements within the room */ diff --git a/package.json b/package.json index c2a84cb1..f5ec42c2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mirotalksfu", - "version": "1.3.98", + "version": "1.4.0", "description": "WebRTC SFU browser-based video calls", "main": "Server.js", "scripts": { @@ -46,7 +46,7 @@ "compression": "1.7.4", "cors": "2.8.5", "crypto-js": "4.2.0", - "express": "4.18.3", + "express": "4.19.1", "httpolyglot": "0.1.2", "jsonwebtoken": "^9.0.2", "mediasoup": "3.13.24", diff --git a/public/js/Brand.js b/public/js/Brand.js new file mode 100644 index 00000000..b48ce33b --- /dev/null +++ b/public/js/Brand.js @@ -0,0 +1,183 @@ +'use strict'; + +const brandDataKey = 'brandData'; +const brandData = window.sessionStorage.getItem(brandDataKey); + +const title = document.getElementById('title'); +const icon = document.getElementById('icon'); +const appleTouchIcon = document.getElementById('appleTouchIcon'); + +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 appTitle = document.getElementById('appTitle'); +const appDescription = document.getElementById('appDescription'); + +const features = document.getElementById('features'); +const teams = document.getElementById('teams'); +const tryEasier = document.getElementById('tryEasier'); +const poweredBy = document.getElementById('poweredBy'); +const sponsors = document.getElementById('sponsors'); +const advertisers = document.getElementById('advertisers'); +const footer = document.getElementById('footer'); +//... + +// app/src/config.js - ui.brand +let BRAND = { + app: { + name: 'MiroTalk SFU', + title: 'MiroTalk SFU
Free browser based Real-time video calls.
Simple, Secure, Fast.', + description: + 'Start your next video call with a single click. No download, plug-in, or login is required. Just get straight to talking, messaging, and sharing your screen.', + }, + site: { + title: 'MiroTalk SFU, Free Video Calls, Messaging and Screen Sharing', + icon: '../images/logo.svg', + appleTouchIcon: '../images/logo.svg', + }, + meta: { + description: + 'MiroTalk SFU powered by WebRTC and mediasoup, Real-time Simple Secure Fast video calls, messaging and screen sharing capabilities in the browser.', + 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', + }, + html: { + features: true, + teams: true, + tryEasier: true, + poweredBy: true, + sponsors: true, + advertisers: true, + footer: true, + }, + //... +}; + +async function initialize() { + await getBrand(); + + customizeSite(); + + customizeMetaTags(); + + customizeOpenGraph(); + + customizeApp(); + + checkBrand(); +} + +async function getBrand() { + if (brandData) { + setBrand(JSON.parse(brandData)); + } else { + try { + const response = await fetch('/brand', { timeout: 5000 }); + if (!response.ok) { + throw new Error('Network response was not ok'); + } + const data = await response.json(); + const serverBrand = data.message; + if (serverBrand) { + setBrand(serverBrand); + console.log('FETCH BRAND SETTINGS', { + serverBrand: serverBrand, + clientBrand: BRAND, + }); + window.sessionStorage.setItem(brandDataKey, JSON.stringify(serverBrand)); + } + } catch (error) { + console.error('FETCH GET BRAND ERROR', error.message); + } + } +} + +// BRAND configurations +function setBrand(data) { + BRAND = data; + console.log('Set Brand done'); +} + +// BRAND check +function checkBrand() { + !BRAND.html.features && elementDisplay(features, false); + !BRAND.html.teams && elementDisplay(teams, false); + !BRAND.html.tryEasier && elementDisplay(tryEasier, false); + !BRAND.html.poweredBy && elementDisplay(poweredBy, false); + !BRAND.html.sponsors && elementDisplay(sponsors, false); + !BRAND.html.advertisers && elementDisplay(advertisers, false); + !BRAND.html.footer && elementDisplay(footer, false); +} + +// ELEMENT display mode +function elementDisplay(element, display, mode = 'block') { + if (!element) return; + element.style.display = display ? mode : 'none'; +} + +// APP customize +function customizeApp() { + if (appTitle) { + appTitle.innerHTML = BRAND.app.title; + } + if (appDescription) { + appDescription.textContent = BRAND.app.description; + } +} + +// SITE metadata +function customizeSite() { + if (title) { + title.textContent = BRAND.site.title; + } + if (icon) { + icon.href = BRAND.site.icon; + } + if (appleTouchIcon) { + appleTouchIcon.href = BRAND.site.appleTouchIcon; + } +} + +// SEO metadata +function customizeMetaTags() { + if (description) { + description.content = BRAND.meta.description; + } + if (keywords) { + keywords.content = BRAND.meta.keywords; + } +} + +// SOCIAL MEDIA SHARING metadata +function customizeOpenGraph() { + if (ogType) { + ogType.content = BRAND.og.type; + } + if (ogSiteName) { + ogSiteName.content = BRAND.og.siteName; + } + if (ogTitle) { + ogTitle.content = BRAND.og.title; + } + if (ogDescription) { + ogDescription.content = BRAND.og.description; + } + if (ogImage) { + ogImage.content = BRAND.og.image; + } +} + +initialize(); diff --git a/public/js/Common.js b/public/js/Common.js deleted file mode 100644 index cc159e5f..00000000 --- a/public/js/Common.js +++ /dev/null @@ -1,37 +0,0 @@ -'use strict'; - -const features = document.getElementById('features'); -const teams = document.getElementById('teams'); -const tryEasier = document.getElementById('tryEasier'); -const poweredBy = document.getElementById('poweredBy'); -const sponsors = document.getElementById('sponsors'); -const advertisers = document.getElementById('advertisers'); -const footer = document.getElementById('footer'); -//... - -const config = { - html: { - features: true, - teams: true, // please keep me always true ;) - tryEasier: true, - poweredBy: true, - sponsors: true, - advertisers: true, - footer: true, - }, - //... -}; - -!config.html.features && elementDisplay(features, false); -!config.html.teams && elementDisplay(teams, false); -!config.html.tryEasier && elementDisplay(tryEasier, false); -!config.html.poweredBy && elementDisplay(poweredBy, false); -!config.html.sponsors && elementDisplay(sponsors, false); -!config.html.advertisers && elementDisplay(advertisers, false); -!config.html.footer && elementDisplay(footer, false); -//... - -function elementDisplay(element, display, mode = 'block') { - if (!element) return; - element.style.display = display ? mode : 'none'; -} diff --git a/public/js/Room.js b/public/js/Room.js index 1ef84531..627027ca 100644 --- 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.3.98 + * @version 1.4.0 * */ @@ -879,7 +879,7 @@ async function whoAreYou() { allowOutsideClick: false, allowEscapeKey: false, background: swalBackground, - title: 'MiroTalk SFU', + title: BRAND.app.name, input: 'text', inputPlaceholder: 'Enter your name', inputAttributes: { maxlength: 32 }, @@ -1116,7 +1116,7 @@ function shareRoomByEmail() { ? 'Password: ' + (room_password || rc.RoomPassword) + newLine : ''; const email = ''; - const emailSubject = `Please join our MiroTalk SFU Video Chat Meeting`; + const emailSubject = `Please join our ${BRAND.app.name} Video Chat Meeting`; const emailBody = `The meeting is scheduled at: ${newLine} DateTime: ${selectedDateTime} ${newLine}${roomPassword}Click to join: ${RoomURL} ${newLine}`; document.location = 'mailto:' + email + '?subject=' + emailSubject + '&body=' + emailBody; }, diff --git a/public/js/Umami.js b/public/js/Umami.js index 219a456b..5d7ec3ff 100644 --- a/public/js/Umami.js +++ b/public/js/Umami.js @@ -10,7 +10,7 @@ const apiUrl = window.location.origin + '/stats'; if (statsData) { setStats(JSON.parse(statsData)); } else { - fetch(apiUrl) + fetch(apiUrl, { timeout: 5000 }) .then((response) => { if (!response.ok) { throw new Error('Network response was not ok'); diff --git a/public/views/404.html b/public/views/404.html index dc334ffa..f1db00f1 100755 --- a/public/views/404.html +++ b/public/views/404.html @@ -3,9 +3,9 @@ - MiroTalk SFU - 404 Page not found. - - + MiroTalk SFU - 404 Page not found. + + @@ -13,16 +13,28 @@ + + + - - - + + + - + @@ -31,7 +43,9 @@ + + @@ -194,7 +208,6 @@ - diff --git a/public/views/50X.html b/public/views/50X.html index 5128da40..a4a85069 100755 --- a/public/views/50X.html +++ b/public/views/50X.html @@ -3,9 +3,9 @@ - MiroTalk SFU - 50X Under Maintenance. - - + MiroTalk SFU - 50X Under Maintenance. + + @@ -13,16 +13,28 @@ + + + - - - + + + - + @@ -31,7 +43,9 @@ + + @@ -186,7 +200,6 @@ - diff --git a/public/views/Room.html b/public/views/Room.html index ac757006..c955b2f6 100644 --- a/public/views/Room.html +++ b/public/views/Room.html @@ -3,36 +3,40 @@ - MiroTalk SFU - Room Video Calls, Messaging and Screen Sharing. - - + MiroTalk SFU - Room Video Calls, Messaging and Screen Sharing. + + + + - - - + + + - + - @@ -60,6 +64,8 @@ + + diff --git a/public/views/about.html b/public/views/about.html index 24882eff..983fdc03 100644 --- a/public/views/about.html +++ b/public/views/about.html @@ -3,9 +3,9 @@ - MiroTalk SFU - About. - - + MiroTalk SFU - About. + + @@ -14,24 +14,27 @@ - - - + + + - + @@ -40,7 +43,9 @@ + + diff --git a/public/views/landing.html b/public/views/landing.html index f4a7c2d9..cc2d308c 100644 --- a/public/views/landing.html +++ b/public/views/landing.html @@ -3,9 +3,9 @@ - MiroTalk SFU, Free Video Calls, Messaging and Screen Sharing - - + MiroTalk SFU, Free Video Calls, Messaging and Screen Sharing + + @@ -14,24 +14,27 @@ - - - + + + - + @@ -42,7 +45,9 @@ + + @@ -81,11 +86,11 @@
-

+

MiroTalk SFU
Free browser based Real-time video calls.
Simple, Secure, Fast.

-

+

Start your next video call with a single click. No download, plug-in, or login is required. Just get straight to talking, messaging, and sharing your screen.

@@ -199,9 +204,8 @@ Unlimited number of conference rooms and users without call time limitation!

- MiroTalk with SFU integrated Server. We engineered a platform with maximum video quality - lowest latency that makes your calls crystal clear. Compatible with all browsers and - platforms! + With SFU integrated Server. We engineered a platform with maximum video quality lowest + latency that makes your calls crystal clear. Compatible with all browsers and platforms!

@@ -329,8 +333,8 @@

Total privacy

- Data stays between you and your participants. MiroTalk SFU doesn't collect - or share personal information. + Data stays between you and your participants. We doesn't collect or share + personal information.

@@ -608,7 +612,6 @@ - diff --git a/public/views/login.html b/public/views/login.html index 23ad9e7d..d2a98233 100644 --- a/public/views/login.html +++ b/public/views/login.html @@ -3,9 +3,9 @@ - MiroTalk SFU - Host Protected login required. - - + MiroTalk SFU - Host Protected login required. + + @@ -14,24 +14,27 @@ - - - + + + - + @@ -40,7 +43,9 @@ + + @@ -319,7 +324,6 @@ - diff --git a/public/views/newroom.html b/public/views/newroom.html index fbde0374..7285d208 100755 --- a/public/views/newroom.html +++ b/public/views/newroom.html @@ -3,9 +3,9 @@ - MiroTalk SFU - Create your Room name and start the new call. - - + MiroTalk SFU - Create your Room name and start the new call. + + @@ -14,24 +14,27 @@ - - - + + + - + @@ -41,7 +44,9 @@ + + @@ -287,7 +292,6 @@ - diff --git a/public/views/permission.html b/public/views/permission.html index 75d95264..2b1368a4 100755 --- a/public/views/permission.html +++ b/public/views/permission.html @@ -3,9 +3,9 @@ - MiroTalk SFU - Allow Video or Audio access to join in the Room. - - + MiroTalk SFU - Allow Video or Audio access to join in the Room. + + @@ -13,16 +13,28 @@ + + + - - - + + + - + @@ -31,7 +43,9 @@ + + @@ -209,7 +223,6 @@ - diff --git a/public/views/privacy.html b/public/views/privacy.html index 1dc9ee4b..db7a49a8 100755 --- a/public/views/privacy.html +++ b/public/views/privacy.html @@ -3,9 +3,9 @@ - MiroTalk SFU - privacy policy. - - + MiroTalk SFU - privacy policy. + + @@ -13,16 +13,28 @@ + + + - - - + + + - + @@ -31,7 +43,9 @@ + + @@ -202,7 +216,6 @@ -