[mirotalksfu] - add Brand Customizations, update dep

هذا الالتزام موجود في:
Miroslav Pejic
2024-03-21 14:56:00 +01:00
الأصل 59903f8b68
التزام d5eb5a83e9
16 ملفات معدلة مع 393 إضافات و129 حذوفات

183
public/js/Brand.js Normal file
عرض الملف

@@ -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<br />Free browser based Real-time video calls.<br />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();

عرض الملف

@@ -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';
}

عرض الملف

@@ -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;
},

عرض الملف

@@ -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');