aheh/mirotalk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[mirotalk] - refactoring customize room

Browse Source
This commit is contained in:
Miroslav Pejic
2026-02-03 00:27:24 +01:00
parent e84721e3bd
commit 13a332ced0
14 changed files with 64 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.template
+1 -1
View File
@@ -1,5 +1,5 @@
# ====================================================
# MiroTalk P2P v.1.7.18 - Environment Configuration
# MiroTalk P2P v.1.7.19 - Environment Configuration
# ====================================================
# App environment
app/src/config.template.js
+2 -1
View File
@@ -2,7 +2,7 @@
/**
* ==============================================
* MiroTalk P2P v.1.7.18 - Configuration File
* MiroTalk P2P v.1.7.19 - Configuration File
* ==============================================
*
* Branding and customizations require a license:
@@ -22,6 +22,7 @@ module.exports = {
'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.',
joinDescription: 'Pick a room name.<br />How about this one?',
joinButtonLabel: 'JOIN ROOM',
customizeRoomButtonLabel: 'CUSTOMIZE ROOM',
joinLastLabel: 'Your recent room:',
},
og: {
app/src/server.js
+5 -5
View File
@@ -45,7 +45,7 @@ dependencies: {
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.7.18
* @version 1.7.19
*
*/
@@ -409,7 +409,7 @@ const views = {
notFound: path.join(__dirname, '../../', 'public/views/404.html'),
privacy: path.join(__dirname, '../../', 'public/views/privacy.html'),
activeRooms: path.join(__dirname, '../../', 'public/views/activeRooms.html'),
customRoom: path.join(__dirname, '../../', 'public/views/customRoom.html'),
customizeRoom: path.join(__dirname, '../../', 'public/views/customizeRoom.html'),
stunTurn: path.join(__dirname, '../../', 'public/views/testStunTurn.html'),
};
@@ -417,7 +417,7 @@ const views = {
const brandHtmlInjection = config?.brand?.htmlInjection ?? true;
// File to cache and inject custom HTML data like OG tags and any other elements.
const filesPath = [views.landing, views.newCall, views.client, views.login, views.activeRooms, views.customRoom];
const filesPath = [views.landing, views.newCall, views.client, views.login, views.activeRooms, views.customizeRoom];
const htmlInjector = new HtmlInjector(filesPath, config?.brand || null);
const channels = {}; // collect channels
@@ -584,8 +584,8 @@ app.get('/activeRooms', OIDCAuth, (req, res) => {
});
// Get Custom room
app.get('/customRoom', OIDCAuth, (req, res) => {
htmlInjector.injectHtml(views.customRoom, res);
app.get('/customizeRoom', OIDCAuth, (req, res) => {
htmlInjector.injectHtml(views.customizeRoom, res);
});
// Get stats endpoint
package-lock.json
Generated
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "mirotalk",
"version": "1.7.17",
"version": "1.7.19",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "mirotalk",
"version": "1.7.17",
"version": "1.7.19",
"license": "AGPL-3.0",
"dependencies": {
"@mattermost/client": "11.3.0",
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "mirotalk",
"version": "1.7.18",
"version": "1.7.19",
"description": "A free WebRTC browser-based video call",
"main": "server.js",
"scripts": {
public/css/customRoom.css → public/css/customizeRoom.css
View File
public/css/landing.css
+19
View File
@@ -971,6 +971,25 @@ strong {
border-color: #f9faff;
}
.button-custom-room {
background: linear-gradient(100deg, #232b3a 0%, #141b27 60%, #0d111a 100%);
border: none;
color: rgba(255, 255, 255, 0.88) !important;
border-radius: 6px;
transition:
background 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.12s ease,
filter 0.2s ease;
}
.button-custom-room:hover {
border-color: rgba(255, 255, 255, 0.3);
filter: brightness(1.03) saturate(1.05);
transform: translateY(-2px);
}
.button-custom {
border: 0;
color: #f9faff !important;
public/js/brand.js
+5 -1
View File
@@ -22,6 +22,7 @@ const appTitle = document.getElementById('appTitle');
const appDescription = document.getElementById('appDescription');
const appJoinDescription = document.getElementById('appJoinDescription');
const joinRoomBtn = document.getElementById('joinRoomButton');
const customizeRoomBtn = document.getElementById('customizeRoomButton');
const appJoinLastRoom = document.getElementById('appJoinLastRoom');
const topSponsors = document.getElementById('topSponsors');
@@ -47,6 +48,7 @@ let brand = {
'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.',
joinDescription: 'Pick a room name.<br />How about this one?',
joinButtonLabel: 'JOIN ROOM',
customizeRoomButtonLabel: 'CUSTOMIZE ROOM',
joinLastLabel: 'Your recent room:',
},
site: {
@@ -77,7 +79,7 @@ let brand = {
},
about: {
imageUrl: '../images/mirotalk-logo.gif',
title: 'WebRTC P2P v1.7.18',
title: 'WebRTC P2P v1.7.19',
html: `
<button
id="support-button"
@@ -235,6 +237,8 @@ function handleBrand() {
if (appDescription && brand.app?.description) appDescription.textContent = brand.app.description;
if (appJoinDescription && brand.app?.joinDescription) appJoinDescription.innerHTML = brand.app.joinDescription;
if (joinRoomBtn && brand.app?.joinButtonLabel) joinRoomBtn.innerText = brand.app.joinButtonLabel;
if (customizeRoomBtn && brand.app?.customizeRoomButtonLabel)
customizeRoomBtn.innerText = brand.app.customizeRoomButtonLabel;
if (appJoinLastRoom && brand.app?.joinLastLabel) appJoinLastRoom.innerText = brand.app.joinLastLabel;
// helper to toggle multiple elements
public/js/client.js
+2 -2
View File
@@ -15,7 +15,7 @@
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.7.18
* @version 1.7.19
*
*/
@@ -13570,7 +13570,7 @@ function showAbout() {
Swal.fire({
background: swBg,
position: 'center',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.7.18',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.7.19',
imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
customClass: { image: 'img-about' },
html: `
public/js/common.js
+7
View File
@@ -189,6 +189,7 @@ if (lastRoomContainer && lastRoom && lastRoomName) {
const genRoomButton = document.getElementById('genRoomButton');
const joinRoomButton = document.getElementById('joinRoomButton');
const customizeRoomButton = document.getElementById('customizeRoomButton');
const adultCnt = document.getElementById('adultCnt');
if (genRoomButton) {
@@ -203,6 +204,12 @@ if (joinRoomButton) {
};
}
if (customizeRoomButton) {
customizeRoomButton.onclick = (e) => {
window.location.href = '/customizeRoom';
};
}
if (adultCnt) {
adultCnt.onclick = (e) => {
adultContent();
public/js/customRoom.js → public/js/customizeRoom.js
+1 -1
View File
@@ -8,7 +8,7 @@
*/
document.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('customRoomForm');
const form = document.getElementById('customizeRoomForm');
const errorEl = document.getElementById('crError');
const statusEl = document.getElementById('crStatus');
const previewEl = document.getElementById('crPreviewUrl');
public/views/customRoom.html → public/views/customizeRoom.html
+3 -3
View File
@@ -18,7 +18,7 @@
<meta property="og:image" content="{{OG_IMAGE}}" />
<meta property="og:url" content="{{OG_URL}}" />
<link rel="stylesheet" type="text/css" href="../css/customRoom.css" />
<link rel="stylesheet" type="text/css" href="../css/customizeRoom.css" />
<!-- xss (provides filterXSS) -->
<script src="https://cdn.jsdelivr.net/npm/xss/dist/xss.min.js"></script>
@@ -28,7 +28,7 @@
<section class="cr-card" aria-label="Join a MiroTalk room">
<h1 class="cr-title">Join a MiroTalk Room</h1>
<form id="customRoomForm" class="cr-form" autocomplete="off">
<form id="customizeRoomForm" class="cr-form" autocomplete="off">
<div class="cr-field">
<label class="cr-label" for="room">Room</label>
<input
@@ -152,6 +152,6 @@
</section>
</main>
<script defer src="../js/customRoom.js"></script>
<script defer src="../js/customizeRoom.js"></script>
</body>
</html>
public/views/landing.html
+8
View File
@@ -154,6 +154,14 @@
Join Room
</button>
</div>
<div class="mt-8">
<button
id="customizeRoomButton"
class="button button-custom-room button-block br-6"
>
Customize Room
</button>
</div>
</div>
<div id="lastRoomContainer" class="last-room">
<span id="appJoinLastRoom">Your recent room:</span>
public/views/newcall.html
+8
View File
@@ -144,6 +144,14 @@
Join Room
</button>
</div>
<div class="mt-8">
<button
id="customizeRoomButton"
class="button button-custom-room button-block br-6"
>
Customize Room
</button>
</div>
</div>
<div id="lastRoomContainer" class="last-room">
<span id="appJoinLastRoom">Your recent room:</span>