[mirotalksfu] - add buttons setting

public/js/Room.js

@@ -1,5 +1,17 @@
 'use strict';
 
+/**
+ * MiroTalk SFU - Room component
+ *
+ * @link    GitHub: https://github.com/miroslavpejic85/mirotalksfu
+ * @link    Live demo: https://sfu.mirotalk.com
+ * @license For open source use: AGPLv3
+ * @license For commercial or closed source, contact us at info.mirotalk@gmail.com
+ * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
+ * @version 1.0.0
+ *
+ */
+
 if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.href.substr(4, location.href.length - 4);
 
 const RoomURL = window.location.href;
@@ -25,6 +37,32 @@ const _PEER = {
     sendVideo: '<i class="fab fa-youtube"></i>',
 };
 
+const BUTTONS = {
+    main: {
+        shareButton: true,
+        startAudioButton: true,
+        startVideoButton: true,
+        startScreenButton: true,
+        swapCameraButton: true,
+        chatButton: true,
+        whiteboardButton: true,
+        settingsButton: true,
+        aboutButton: true,
+        exitButton: true,
+    },
+    consumerVideo: {
+        fullScreenButton: true,
+        snapShotButton: true,
+        sendMessageButton: true,
+        sendFileButton: true,
+        sendVideoButton: true,
+        muteVideoButton: true,
+        muteAudioButton: true,
+        ejectButton: true,
+    },
+    //...
+};
+
 const surveyActive = true;
 
 const userAgent = navigator.userAgent.toLowerCase();
@@ -574,17 +612,17 @@ function joinRoom(peer_name, room_id) {
 
 function roomIsReady() {
     setTheme('dark');
-    show(exitButton);
+    BUTTONS.main.exitButton && show(exitButton);
-    show(shareButton);
+    BUTTONS.main.shareButton && show(shareButton);
     show(startRecButton);
-    show(chatButton);
+    BUTTONS.main.chatButton && show(chatButton);
     show(chatSendButton);
     show(chatEmojiButton);
     show(chatShareFileButton);
     if (isWebkitSpeechRecognitionSupported) {
         show(chatSpeechStartButton);
     }
-    if (DetectRTC.isMobileDevice) {
+    if (DetectRTC.isMobileDevice && BUTTONS.main.swapCameraButton) {
         show(swapCameraButton);
         setChatSize();
     } else {
@@ -604,15 +642,15 @@ function roomIsReady() {
         };
         show(fullScreenButton);
     }
-    show(whiteboardButton);
+    BUTTONS.main.whiteboardButton && show(whiteboardButton);
-    show(settingsButton);
+    BUTTONS.main.settingsButton && show(settingsButton);
     show(raiseHandButton);
-    isAudioAllowed ? show(stopAudioButton) : show(startAudioButton);
+    isAudioAllowed ? show(stopAudioButton) : BUTTONS.main.startAudioButton && show(startAudioButton);
-    isVideoAllowed ? show(stopVideoButton) : show(startVideoButton);
+    isVideoAllowed ? show(stopVideoButton) : BUTTONS.main.startVideoButton && show(startVideoButton);
     show(fileShareButton);
     show(participantsButton);
     show(lockRoomButton);
-    show(aboutButton);
+    BUTTONS.main.aboutButton && show(aboutButton);
     handleButtons();
     handleSelects();
     handleInputs();
@@ -626,11 +664,11 @@ function roomIsReady() {
 }
 
 function hide(elem) {
-    elem.classList.add('hidden');
+    elem.className = 'hidden';
 }
 
 function show(elem) {
-    elem.classList.remove('hidden');
+    elem.className = '';
 }
 
 function setColor(elem, color) {
@@ -961,7 +999,7 @@ function handleInputs() {
         }
     };
     chatMessage.oninput = function () {
-        let chatInputEmoji = {
+        const chatInputEmoji = {
             '<3': '\u2764\uFE0F',
             '</3': '\uD83D\uDC94',
             ':D': '\uD83D\uDE00',
@@ -973,7 +1011,6 @@ function handleInputs() {
             ":'(": '\uD83D\uDE22',
             ':+1:': '\uD83D\uDC4D',
         };
-
         for (let i in chatInputEmoji) {
             let regex = new RegExp(i.replace(/([()[{*+.$^\\|?])/g, '\\$1'), 'gim');
             this.value = this.value.replace(regex, chatInputEmoji[i]);

public/js/RoomClient.js

@@ -1196,14 +1196,14 @@ class RoomClient {
                 pb.className = 'bar';
                 pb.style.height = '1%';
                 pm.appendChild(pb);
-                vb.appendChild(ko);
+                BUTTONS.consumerVideo.ejectButton && vb.appendChild(ko);
-                vb.appendChild(au);
+                BUTTONS.consumerVideo.muteAudioButton && vb.appendChild(au);
-                vb.appendChild(cm);
+                BUTTONS.consumerVideo.muteVideoButton && vb.appendChild(cm);
-                vb.appendChild(sv);
+                BUTTONS.consumerVideo.sendVideoButton && vb.appendChild(sv);
-                vb.appendChild(sf);
+                BUTTONS.consumerVideo.sendFileButton && vb.appendChild(sf);
-                vb.appendChild(sm);
+                BUTTONS.consumerVideo.sendMessageButton && vb.appendChild(sm);
-                vb.appendChild(ts);
+                BUTTONS.consumerVideo.snapShotButton && vb.appendChild(ts);
-                vb.appendChild(fs);
+                BUTTONS.consumerVideo.fullScreenButton && vb.appendChild(fs);
                 d.appendChild(elem);
                 d.appendChild(i);
                 d.appendChild(p);
@@ -1324,10 +1324,10 @@ class RoomClient {
         pb.style.height = '1%';
         pm.appendChild(pb);
         if (remotePeer) {
-            vb.appendChild(ko);
+            BUTTONS.consumerVideo.ejectButton && vb.appendChild(ko);
-            vb.appendChild(sv);
+            BUTTONS.consumerVideo.sendVideoButton && vb.appendChild(sv);
-            vb.appendChild(sf);
+            BUTTONS.consumerVideo.sendFileButton && vb.appendChild(sf);
-            vb.appendChild(sm);
+            BUTTONS.consumerVideo.sendMessageButton && vb.appendChild(sm);
         }
         vb.appendChild(au);
         d.appendChild(i);
@@ -1712,13 +1712,15 @@ class RoomClient {
     handleFS(elemId, fsId) {
         let videoPlayer = this.getId(elemId);
         let btnFs = this.getId(fsId);
+        if (btnFs) {
             this.setTippy(fsId, 'Full screen', 'top');
-
             btnFs.addEventListener('click', () => {
                 videoPlayer.style.pointerEvents = this.isVideoOnFullScreen ? 'auto' : 'none';
                 this.toggleFullScreen(videoPlayer);
                 this.isVideoOnFullScreen = this.isVideoOnFullScreen ? false : true;
             });
+        }
+        if (videoPlayer) {
             videoPlayer.addEventListener('click', () => {
                 if (!videoPlayer.hasAttribute('controls')) {
                     if ((this.isMobileDevice && this.isVideoOnFullScreen) || !this.isMobileDevice) {
@@ -1741,6 +1743,7 @@ class RoomClient {
                 }
             });
         }
+    }
 
     // ####################################################
     // HANDLE VIDEO | OBJ FIT | CONTROLS |
@@ -1769,6 +1772,7 @@ class RoomClient {
     handleTS(elemId, tsId) {
         let videoPlayer = this.getId(elemId);
         let btnTs = this.getId(tsId);
+        if (btnTs && videoPlayer) {
             btnTs.addEventListener('click', () => {
                 this.sound('snapshot');
                 let context, canvas, width, height, dataURL;
@@ -1780,10 +1784,11 @@ class RoomClient {
                 context = canvas.getContext('2d');
                 context.drawImage(videoPlayer, 0, 0, width, height);
                 dataURL = canvas.toDataURL('image/png');
-            console.log(dataURL);
+                // console.log(dataURL);
                 saveDataToFile(dataURL, getDataTimeString() + '-SNAPSHOT.png');
             });
         }
+    }
 
     // ####################################################
     // DRAGGABLE
@@ -1831,10 +1836,12 @@ class RoomClient {
         const words = uid.split('___');
         let peer_id = words[1];
         let btnSm = this.getId(uid);
+        if (btnSm) {
             btnSm.addEventListener('click', () => {
                 this.sendMessageTo(peer_id);
             });
         }
+    }
 
     toggleChat() {
         let chatRoom = this.getId('chatRoom');
@@ -2188,13 +2195,16 @@ class RoomClient {
         const words = uid.split('___');
         let peer_id = words[1];
         let btnSf = this.getId(uid);
+        if (btnSf) {
             btnSf.addEventListener('click', () => {
                 this.selectFileToShare(peer_id);
             });
         }
+    }
 
     handleDD(uid, peer_id, itsMe = false) {
         let videoPlayer = this.getId(uid);
+        if (videoPlayer) {
             videoPlayer.addEventListener('dragover', function (e) {
                 e.preventDefault();
             });
@@ -2226,6 +2236,7 @@ class RoomClient {
                 }
             });
         }
+    }
 
     selectFileToShare(peer_id, broadcast = false) {
         this.sound('open');
@@ -2497,10 +2508,12 @@ class RoomClient {
         const words = uid.split('___');
         let peer_id = words[1];
         let btnSv = this.getId(uid);
+        if (btnSv) {
             btnSv.addEventListener('click', () => {
                 this.shareVideo(peer_id);
             });
         }
+    }
 
     shareVideo(peer_id = 'all') {
         this.sound('open');
@@ -2847,10 +2860,12 @@ class RoomClient {
         const words = uid.split('___');
         let peer_id = words[1] + '___pEject';
         let btnKo = this.getId(uid);
+        if (btnKo) {
             btnKo.addEventListener('click', () => {
                 this.peerAction('me', peer_id, 'eject');
             });
         }
+    }
 
     // ####################################################
     // HANDLE VIDEO
@@ -2860,10 +2875,12 @@ class RoomClient {
         const words = uid.split('___');
         let peer_id = words[1] + '___pVideo';
         let btnCm = this.getId(uid);
+        if (btnCm) {
             btnCm.addEventListener('click', () => {
                 this.peerAction('me', peer_id, 'hide');
             });
         }
+    }
 
     // ####################################################
     // HANDLE AUDIO
@@ -2873,12 +2890,14 @@ class RoomClient {
         const words = uid.split('__');
         let peer_id = words[0] + '___pAudio';
         let btnAU = this.getId(uid);
+        if (btnAU) {
             btnAU.addEventListener('click', (e) => {
                 if (e.target.className === html.audioOn) {
                     this.peerAction('me', peer_id, 'mute');
                 }
             });
         }
+    }
 
     // ####################################################
     // PEER ACTION