[mirotalksfu] - add ui config, update dep

2024-02-12 22:42:21 +01:00
--- 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 {
--- 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) {
            <!-- <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>
                    `;
--- a/public/js/RoomClient.js
+++ b/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');
--- a/public/js/Rules.js
+++ b/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;
        //...

        // ##################################
--- a/public/views/Room.html
+++ b/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 -->