From 980f7db4811fb77a407428681e56163b261a4998 Mon Sep 17 00:00:00 2001 From: Miroslav Pejic Date: Mon, 12 Feb 2024 22:42:21 +0100 Subject: [PATCH] [mirotalksfu] - add ui config, update dep --- app/src/Server.js | 9 +++- app/src/config.template.js | 87 ++++++++++++++++++++++++++++++++++++++ package.json | 4 +- public/css/Room.css | 4 +- public/js/Room.js | 81 ++++++++++++++++++++++++++--------- public/js/RoomClient.js | 25 ++++++----- public/js/Rules.js | 35 +++++++-------- public/views/Room.html | 8 ++-- 8 files changed, 195 insertions(+), 58 deletions(-) diff --git a/app/src/Server.js b/app/src/Server.js index 7cb8f2bf..7fe57cc4 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.66 + * @version 1.3.67 * */ @@ -255,6 +255,11 @@ function startServer() { } }); + // UI buttons configuration + app.get('/config', (req, res) => { + res.status(200).json({ message: config.ui ? config.ui.buttons : false }); + }); + // main page app.get(['/'], (req, res) => { if (hostCfg.protected) { @@ -553,6 +558,7 @@ function startServer() { slack_enabled: slackEnabled, stats_enabled: config.stats.enabled, chatGPT_enabled: config.chatGPT.enabled, + configUI: config.ui, }); } catch (err) { log.error('Ngrok Start error: ', err.body); @@ -601,6 +607,7 @@ function startServer() { slack_enabled: slackEnabled, stats_enabled: config.stats.enabled, chatGPT_enabled: config.chatGPT.enabled, + configUI: config.ui, }); }); diff --git a/app/src/config.template.js b/app/src/config.template.js index 8ca4311f..33dec05f 100644 --- a/app/src/config.template.js +++ b/app/src/config.template.js @@ -75,6 +75,93 @@ module.exports = { ], join_first: true, // Set to true for traditional behavior, false to prioritize presenters }, + ui: { + /* + Toggle the visibility of specific HTML elements within the room + */ + buttons: { + main: { + shareButton: true, + hideMeButton: true, + startAudioButton: true, + startVideoButton: true, + startScreenButton: true, + swapCameraButton: true, + chatButton: true, + raiseHandButton: true, + transcriptionButton: true, + whiteboardButton: true, + emojiRoomButton: true, + settingsButton: true, + aboutButton: true, // Please keep me always visible, thank you! + exitButton: true, + }, + settings: { + fileSharing: true, + lockRoomButton: true, // presenter + unlockRoomButton: true, // presenter + broadcastingButton: true, // presenter + lobbyButton: true, // presenter + micOptionsButton: true, // presenter + tabModerator: true, // presenter + tabRecording: true, + pushToTalk: true, + host_only_recording: true, // presenter + }, + producerVideo: { + videoPictureInPicture: true, + fullScreenButton: true, + snapShotButton: true, + muteAudioButton: true, + videoPrivacyButton: true, + }, + consumerVideo: { + videoPictureInPicture: true, + fullScreenButton: true, + snapShotButton: true, + sendMessageButton: true, + sendFileButton: true, + sendVideoButton: true, + muteVideoButton: true, + muteAudioButton: true, + audioVolumeInput: true, // Disabled for mobile + geolocationButton: true, // Presenter + banButton: true, // presenter + ejectButton: true, // presenter + }, + videoOff: { + sendMessageButton: true, + sendFileButton: true, + sendVideoButton: true, + muteAudioButton: true, + audioVolumeInput: true, // Disabled for mobile + geolocationButton: true, // Presenter + banButton: true, // presenter + ejectButton: true, // presenter + }, + chat: { + chatPinButton: true, + chatMaxButton: true, + chatSaveButton: true, + chatEmojiButton: true, + chatMarkdownButton: true, + chatSpeechStartButton: true, + }, + participantsList: { + saveInfoButton: true, // presenter + sendFileAllButton: true, // presenter + ejectAllButton: true, // presenter + sendFileButton: true, // presenter & guests + geoLocationButton: true, // presenter + banButton: true, // presenter + ejectButton: true, // presenter + }, + whiteboard: { + whiteboardLockButton: true, // presenter + }, + //... + }, + }, middleware: { /* Middleware: diff --git a/package.json b/package.json index 88956dd4..926bd8e3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mirotalksfu", - "version": "1.3.66", + "version": "1.3.67", "description": "WebRTC SFU browser-based video calls", "main": "Server.js", "scripts": { @@ -49,7 +49,7 @@ "express": "4.18.2", "httpolyglot": "0.1.2", "jsonwebtoken": "^9.0.2", - "mediasoup": "3.13.18", + "mediasoup": "3.13.19", "mediasoup-client": "3.7.2", "ngrok": "^4.3.3", "openai": "^4.27.0", diff --git a/public/css/Room.css b/public/css/Room.css index d95628fa..3b8e7c06 100644 --- a/public/css/Room.css +++ b/public/css/Room.css @@ -1098,10 +1098,10 @@ progress { } .whiteboard-header button { - padding: 10px; + /* padding: 10px; */ margin: 2px; border-radius: 5px; - border: var(--border); + /* border: var(--border); */ } .whiteboardColorPicker { diff --git a/public/js/Room.js b/public/js/Room.js index 59a58663..ca5429a0 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.66 + * @version 1.3.67 * */ @@ -414,9 +414,6 @@ function makeId(length) { // #################################################### async function initRoom() { - if (navigator.getDisplayMedia || navigator.mediaDevices.getDisplayMedia) { - BUTTONS.main.startScreenButton && show(initStartScreenButton); - } if (!isAudioAllowed && !isVideoAllowed && !joinRoomWithoutAudioVideo) { openURL(`/permission?room_id=${room_id}&message=Not allowed both Audio and Video`); } else { @@ -772,6 +769,26 @@ async function whoAreYou() { hide(loadingDiv); document.body.style.background = 'var(--body-bg)'; + try { + const response = await axios.get('/config', { + timeout: 5000, + }); + const serverButtons = response.data.message; + if (serverButtons) { + BUTTONS = serverButtons; + console.log('04 ----> AXIOS ROOM BUTTONS SETTINGS', { + serverButtons: serverButtons, + clientButtons: BUTTONS, + }); + } + } catch (error) { + console.error('04 ----> AXIOS GET CONFIG ERROR', error.message); + } + + if (navigator.getDisplayMedia || navigator.mediaDevices.getDisplayMedia) { + BUTTONS.main.startScreenButton && show(initStartScreenButton); + } + if (peer_name) { checkMedia(); getPeerInfo(); @@ -1167,7 +1184,7 @@ function roomIsReady() { BUTTONS.main.settingsButton && show(settingsButton); isAudioAllowed ? show(stopAudioButton) : BUTTONS.main.startAudioButton && show(startAudioButton); isVideoAllowed ? show(stopVideoButton) : BUTTONS.main.startVideoButton && show(startVideoButton); - show(fileShareButton); + BUTTONS.settings.fileSharing && show(fileShareButton); BUTTONS.settings.lockRoomButton && show(lockRoomButton); BUTTONS.settings.broadcastingButton && show(broadcastingButton); BUTTONS.settings.lobbyButton && show(lobbyButton); @@ -3265,11 +3282,19 @@ function getParticipantsList(peers) { - +
@@ -3335,13 +3360,25 @@ function getParticipantsList(peers) { - +
@@ -3399,9 +3436,13 @@ function getParticipantsList(peers) { -