ghaymah_dev/codepill-sfu
2
0
نسخ 0
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

[mirotalksfu] - add ui config, update dep

تصفح المصدر
هذا الالتزام موجود في:
Miroslav Pejic
2024-02-12 22:42:21 +01:00
الأصل 416c9e71c4
التزام 980f7db481
8 ملفات معدلة مع 195 إضافات و58 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

9
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,
});
});

87
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:

4
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",

4
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 {

81
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) {
<!-- <i class="fas fa-bars"></i> -->
<i class="fas fa-ellipsis-vertical"></i>
</button>
<ul class="dropdown-menu text-start" aria-labelledby="${socket.id}-chatDropDownMenu">
<li><button class="btn-sm ml5" id="sendAllButton" onclick="rc.selectFileToShare('${socket.id}', true)">${_PEER.sendFile} Share file to all</button></li>
<li><button class="btn-sm ml5" id="sendVideoToAll" onclick="rc.shareVideo('all');">${_PEER.sendVideo} Share audio/video to all</button></li>
<li><button class="btn-sm ml5" id="ejectAllButton" onclick="rc.peerAction('me','${socket.id}','eject',true,true)">${_PEER.ejectPeer} Eject all participants</button></li>
</ul>
<ul class="dropdown-menu text-start" aria-labelledby="${socket.id}-chatDropDownMenu">`;
if (BUTTONS.participantsList.sendFileAllButton) {
li += `<li><button class="btn-sm ml5" id="sendAllButton" onclick="rc.selectFileToShare('${socket.id}', true)">${_PEER.sendFile} Share file to all</button></li>`;
}
li += `<li><button class="btn-sm ml5" id="sendVideoToAll" onclick="rc.shareVideo('all');">${_PEER.sendVideo} Share audio/video to all</button></li>`;
if (BUTTONS.participantsList.ejectAllButton) {
li += `<li><button class="btn-sm ml5" id="ejectAllButton" onclick="rc.peerAction('me','${socket.id}','eject',true,true)">${_PEER.ejectPeer} Eject all participants</button></li>`;
}
li += `</ul>
</div>
<br/>
@@ -3335,13 +3360,25 @@ function getParticipantsList(peers) {
<!-- <i class="fas fa-bars"></i> -->
<i class="fas fa-ellipsis-vertical"></i>
</button>
<ul class="dropdown-menu text-start" aria-labelledby="${peer_id}-chatDropDownMenu">
<li><button class="btn-sm ml5" id='${peer_id}___shareFile' onclick="rc.selectFileToShare('${peer_id}', false)">${peer_sendFile} Share file</button></li>
<li><button class="btn-sm ml5" id="${peer_id}___sendVideoTo" onclick="rc.shareVideo('${peer_id}');">${_PEER.sendVideo} Share audio/video</button></li>
<li><button class="btn-sm ml5" id='${peer_id}___geoLocation' onclick="rc.askPeerGeoLocation(this.id)">${peer_geoLocation} Get geolocation</button></li>
<li><button class="btn-sm ml5" id='${peer_id}___pBan' onclick="rc.peerAction('me',this.id,'ban')">${peer_ban} Ban participant</button></li>
<li><button class="btn-sm ml5" id='${peer_id}___pEject' onclick="rc.peerAction('me',this.id,'eject')">${peer_eject} Eject participant</button></li>
</ul>
<ul class="dropdown-menu text-start" aria-labelledby="${peer_id}-chatDropDownMenu">`;
if (BUTTONS.participantsList.sendFileButton) {
li += `<li><button class="btn-sm ml5" id='${peer_id}___shareFile' onclick="rc.selectFileToShare('${peer_id}', false)">${peer_sendFile} Share file</button></li>`;
}
li += `<li><button class="btn-sm ml5" id="${peer_id}___sendVideoTo" onclick="rc.shareVideo('${peer_id}');">${_PEER.sendVideo} Share audio/video</button></li>`;
if (BUTTONS.participantsList.geoLocationButton) {
li += `<li><button class="btn-sm ml5" id='${peer_id}___geoLocation' onclick="rc.askPeerGeoLocation(this.id)">${peer_geoLocation} Get geolocation</button></li>`;
}
if (BUTTONS.participantsList.banButton) {
li += `<li><button class="btn-sm ml5" id='${peer_id}___pBan' onclick="rc.peerAction('me',this.id,'ban')">${peer_ban} Ban participant</button></li>`;
}
if (BUTTONS.participantsList.ejectButton) {
li += `<li><button class="btn-sm ml5" id='${peer_id}___pEject' onclick="rc.peerAction('me',this.id,'eject')">${peer_eject} Eject participant</button></li>`;
}
li += `</ul>
</div>
<br/>
@@ -3399,9 +3436,13 @@ function getParticipantsList(peers) {
<!-- <i class="fas fa-bars"></i> -->
<i class="fas fa-ellipsis-vertical"></i>
</button>
<ul class="dropdown-menu text-start" aria-labelledby="${peer_id}-chatDropDownMenu">
<li><button class="btn-sm ml5" id='${peer_id}___shareFile' onclick="rc.selectFileToShare('${peer_id}', false)">${peer_sendFile} Share file</button></li>
<li><button class="btn-sm ml5" id="${peer_id}___sendVideoTo" onclick="rc.shareVideo('${peer_id}');">${_PEER.sendVideo} Share Audio/Video</button></li>
<ul class="dropdown-menu text-start" aria-labelledby="${peer_id}-chatDropDownMenu">`;
if (BUTTONS.participantsList.sendFileButton) {
li += `<li><button class="btn-sm ml5" id='${peer_id}___shareFile' onclick="rc.selectFileToShare('${peer_id}', false)">${peer_sendFile} Share file</button></li>`;
}
li += `<li><button class="btn-sm ml5" id="${peer_id}___sendVideoTo" onclick="rc.shareVideo('${peer_id}');">${_PEER.sendVideo} Share Audio/Video</button></li>
</ul>
</div>
`;

25
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.3.66
* @version 1.3.67
*
*/
@@ -427,10 +427,13 @@ class RoomClient {
isBroadcastingEnabled = isPresenter && !room.broadcasting ? isBroadcastingEnabled : room.broadcasting;
console.log('07.1 ----> ROOM BROADCASTING', isBroadcastingEnabled);
// ###################################################################################################
room.config.hostOnlyRecording
? (console.log('07.1 ----> WARNING Room Host only recording enabled'),
this.event(_EVENTS.hostOnlyRecordingOn))
: this.event(_EVENTS.hostOnlyRecordingOff);
if (BUTTONS.settings.tabRecording) {
room.config.hostOnlyRecording
? (console.log('07.1 ----> WARNING Room Host only recording enabled'),
this.event(_EVENTS.hostOnlyRecordingOn))
: this.event(_EVENTS.hostOnlyRecordingOff);
}
// Handle Room moderator rules
if (room.moderator && (!isRulesActive || !isPresenter)) {
@@ -1003,7 +1006,7 @@ class RoomClient {
console.log('09 ----> Audio is off');
setColor(startAudioButton, 'red');
this.setIsAudio(this.peer_id, false);
this.event(_EVENTS.stopAudio);
if (BUTTONS.main.startAudioButton) this.event(_EVENTS.stopAudio);
this.updatePeerInfo(this.peer_name, this.peer_id, 'audio', false);
}
if (this.isVideoAllowed && !this._moderator.video_start_hidden) {
@@ -1014,7 +1017,7 @@ class RoomClient {
setColor(startVideoButton, 'red');
this.setVideoOff(this.peer_info, false);
this.sendVideoOff();
this.event(_EVENTS.stopVideo);
if (BUTTONS.main.startVideoButton) this.event(_EVENTS.stopVideo);
this.updatePeerInfo(this.peer_name, this.peer_id, 'video', false);
}
if (this.joinRoomWithScreen && !this._moderator.screen_cant_share) {
@@ -3266,7 +3269,7 @@ class RoomClient {
await getRoomParticipants();
hide(chatMinButton);
if (!this.isMobileDevice) {
show(chatMaxButton);
BUTTONS.chat.chatMaxButton && show(chatMaxButton);
}
this.chatCenter();
this.sound('open');
@@ -3309,7 +3312,7 @@ class RoomClient {
chatMaximize() {
this.isChatMaximized = true;
hide(chatMaxButton);
show(chatMinButton);
BUTTONS.chat.chatMaxButton && show(chatMinButton);
this.chatCenter();
document.documentElement.style.setProperty('--msger-width', '100%');
document.documentElement.style.setProperty('--msger-height', '100%');
@@ -3319,7 +3322,7 @@ class RoomClient {
chatMinimize() {
this.isChatMaximized = false;
hide(chatMinButton);
show(chatMaxButton);
BUTTONS.chat.chatMaxButton && show(chatMaxButton);
if (this.isChatPinned) {
this.chatPin();
} else {
@@ -3356,7 +3359,7 @@ class RoomClient {
document.documentElement.style.setProperty('--msger-width', '800px');
document.documentElement.style.setProperty('--msger-height', '700px');
hide(chatMinButton);
show(chatMaxButton);
BUTTONS.chat.chatMaxButton && show(chatMaxButton);
this.chatCenter();
this.isChatPinned = false;
setColor(chatTogglePin, 'white');

35
public/js/Rules.js
عرض الملف

@@ -8,7 +8,12 @@ let isPresenter = false;
const isRulesActive = true;
const BUTTONS = {
/**
* WARNING!
* This will be replaced by the ui.buttons specified in the server configuration file located at app/src/config.js.
* Ensure that any changes made here are also reflected in the configuration file to maintain synchronization.
*/
let BUTTONS = {
main: {
shareButton: true,
hideMeButton: true,
@@ -26,6 +31,7 @@ const BUTTONS = {
exitButton: true,
},
settings: {
fileSharing: true,
lockRoomButton: true, // presenter
unlockRoomButton: true, // presenter
broadcastingButton: true, // presenter
@@ -77,9 +83,15 @@ const BUTTONS = {
},
participantsList: {
saveInfoButton: true, // presenter
sendFileAllButton: true, // presenter
ejectAllButton: true, // presenter
sendFileButton: false, // presenter & guests
geoLocationButton: true, // presenter
banButton: true, // presenter
ejectButton: true, // presenter
},
whiteboard: {
whiteboardLockButton: false, // presenter
whiteboardLockButton: true, // presenter
},
//...
};
@@ -113,23 +125,8 @@ function handleRules(isPresenter) {
// ##################################
// PRESENTER
// ##################################
BUTTONS.participantsList.saveInfoButton = true;
BUTTONS.settings.lockRoomButton = !isRoomLocked;
BUTTONS.settings.unlockRoomButton = isRoomLocked;
BUTTONS.settings.broadcastingButton = true;
BUTTONS.settings.lobbyButton = true;
BUTTONS.settings.micOptionsButton = true;
BUTTONS.settings.tabModerator = true;
BUTTONS.videoOff.muteAudioButton = true;
BUTTONS.videoOff.geolocationButton = true;
BUTTONS.videoOff.banButton = true;
BUTTONS.videoOff.ejectButton = true;
BUTTONS.consumerVideo.geolocationButton = true;
BUTTONS.consumerVideo.banButton = true;
BUTTONS.consumerVideo.ejectButton = true;
BUTTONS.consumerVideo.muteAudioButton = true;
BUTTONS.consumerVideo.muteVideoButton = true;
BUTTONS.whiteboard.whiteboardLockButton = true;
BUTTONS.settings.lockRoomButton = BUTTONS.settings.lockRoomButton && !isRoomLocked;
BUTTONS.settings.unlockRoomButton = BUTTONS.settings.lockRoomButton && isRoomLocked;
//...
// ##################################

8
public/views/Room.html
عرض الملف

@@ -55,12 +55,10 @@
<link rel="stylesheet" href="https://npmcdn.com/flatpickr/dist/themes/airbnb.css" />
<!-- pickr https://github.com/simonwep/pickr -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css" />
<!-- 'classic' theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/monolith.min.css" />
<!-- 'monolith' theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css" />
<!-- 'nano' theme -->
<!-- Modern or es5 bundle -->
<script defer src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
@@ -80,6 +78,10 @@
crossorigin="anonymous"
></script>
<!-- axios -->
<script async src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script async src="../js/Umami.js"></script>
<!-- Js scripts https://cdn.jsdelivr.net -->