From c096cf41226915ff18ce1b1f01bd7499ed1c8cd7 Mon Sep 17 00:00:00 2001 From: Miroslav Pejic Date: Sun, 7 Aug 2022 13:35:05 +0200 Subject: [PATCH] [mirotalksfu] - add buttons setting --- public/js/Room.js | 63 +++++++++--- public/js/RoomClient.js | 221 ++++++++++++++++++++++------------------ 2 files changed, 170 insertions(+), 114 deletions(-) diff --git a/public/js/Room.js b/public/js/Room.js index 940678d2..d1531842 100644 --- a/public/js/Room.js +++ b/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: '', }; +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); - show(shareButton); + BUTTONS.main.exitButton && show(exitButton); + 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); - show(settingsButton); + BUTTONS.main.whiteboardButton && show(whiteboardButton); + BUTTONS.main.settingsButton && show(settingsButton); show(raiseHandButton); - isAudioAllowed ? show(stopAudioButton) : show(startAudioButton); - isVideoAllowed ? show(stopVideoButton) : show(startVideoButton); + isAudioAllowed ? show(stopAudioButton) : BUTTONS.main.startAudioButton && show(startAudioButton); + 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', ' { - videoPlayer.style.pointerEvents = this.isVideoOnFullScreen ? 'auto' : 'none'; - this.toggleFullScreen(videoPlayer); - this.isVideoOnFullScreen = this.isVideoOnFullScreen ? false : true; - }); - videoPlayer.addEventListener('click', () => { - if (!videoPlayer.hasAttribute('controls')) { - if ((this.isMobileDevice && this.isVideoOnFullScreen) || !this.isMobileDevice) { - videoPlayer.style.pointerEvents = this.isVideoOnFullScreen ? 'auto' : 'none'; - this.toggleFullScreen(videoPlayer); - this.isVideoOnFullScreen = this.isVideoOnFullScreen ? false : true; + 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) { + videoPlayer.style.pointerEvents = this.isVideoOnFullScreen ? 'auto' : 'none'; + this.toggleFullScreen(videoPlayer); + this.isVideoOnFullScreen = this.isVideoOnFullScreen ? false : true; + } } - } - }); - videoPlayer.addEventListener('fullscreenchange', (e) => { - if (!document.fullscreenElement) { - videoPlayer.style.pointerEvents = 'auto'; - this.isVideoOnFullScreen = false; - } - }); - videoPlayer.addEventListener('webkitfullscreenchange', (e) => { - if (!document.webkitIsFullScreen) { - videoPlayer.style.pointerEvents = 'auto'; - this.isVideoOnFullScreen = false; - } - }); + }); + videoPlayer.addEventListener('fullscreenchange', (e) => { + if (!document.fullscreenElement) { + videoPlayer.style.pointerEvents = 'auto'; + this.isVideoOnFullScreen = false; + } + }); + videoPlayer.addEventListener('webkitfullscreenchange', (e) => { + if (!document.webkitIsFullScreen) { + videoPlayer.style.pointerEvents = 'auto'; + this.isVideoOnFullScreen = false; + } + }); + } } // #################################################### @@ -1769,20 +1772,22 @@ class RoomClient { handleTS(elemId, tsId) { let videoPlayer = this.getId(elemId); let btnTs = this.getId(tsId); - btnTs.addEventListener('click', () => { - this.sound('snapshot'); - let context, canvas, width, height, dataURL; - width = videoPlayer.videoWidth; - height = videoPlayer.videoHeight; - canvas = canvas || document.createElement('canvas'); - canvas.width = width; - canvas.height = height; - context = canvas.getContext('2d'); - context.drawImage(videoPlayer, 0, 0, width, height); - dataURL = canvas.toDataURL('image/png'); - console.log(dataURL); - saveDataToFile(dataURL, getDataTimeString() + '-SNAPSHOT.png'); - }); + if (btnTs && videoPlayer) { + btnTs.addEventListener('click', () => { + this.sound('snapshot'); + let context, canvas, width, height, dataURL; + width = videoPlayer.videoWidth; + height = videoPlayer.videoHeight; + canvas = canvas || document.createElement('canvas'); + canvas.width = width; + canvas.height = height; + context = canvas.getContext('2d'); + context.drawImage(videoPlayer, 0, 0, width, height); + dataURL = canvas.toDataURL('image/png'); + // console.log(dataURL); + saveDataToFile(dataURL, getDataTimeString() + '-SNAPSHOT.png'); + }); + } } // #################################################### @@ -1831,9 +1836,11 @@ class RoomClient { const words = uid.split('___'); let peer_id = words[1]; let btnSm = this.getId(uid); - btnSm.addEventListener('click', () => { - this.sendMessageTo(peer_id); - }); + if (btnSm) { + btnSm.addEventListener('click', () => { + this.sendMessageTo(peer_id); + }); + } } toggleChat() { @@ -2188,43 +2195,47 @@ class RoomClient { const words = uid.split('___'); let peer_id = words[1]; let btnSf = this.getId(uid); - btnSf.addEventListener('click', () => { - this.selectFileToShare(peer_id); - }); + if (btnSf) { + btnSf.addEventListener('click', () => { + this.selectFileToShare(peer_id); + }); + } } handleDD(uid, peer_id, itsMe = false) { let videoPlayer = this.getId(uid); - videoPlayer.addEventListener('dragover', function (e) { - e.preventDefault(); - }); - videoPlayer.addEventListener('drop', function (e) { - e.preventDefault(); - if (itsMe) { - userLog('warning', 'You cannot send files to yourself.', 'top-end'); - return; - } - if (this.sendInProgress) { - userLog('warning', 'Please wait for the previous file to be sent.', 'top-end'); - return; - } - if (e.dataTransfer.items && e.dataTransfer.items.length > 1) { - userLog('warning', 'Please drag and drop a single file.', 'top-end'); - return; - } - if (e.dataTransfer.items) { - let item = e.dataTransfer.items[0].webkitGetAsEntry(); - console.log('Drag and drop', item); - if (item.isDirectory) { - userLog('warning', 'Please drag and drop a single file not a folder.', 'top-end'); + if (videoPlayer) { + videoPlayer.addEventListener('dragover', function (e) { + e.preventDefault(); + }); + videoPlayer.addEventListener('drop', function (e) { + e.preventDefault(); + if (itsMe) { + userLog('warning', 'You cannot send files to yourself.', 'top-end'); return; } - var file = e.dataTransfer.items[0].getAsFile(); - rc.sendFileInformations(file, peer_id); - } else { - rc.sendFileInformations(e.dataTransfer.files[0], peer_id); - } - }); + if (this.sendInProgress) { + userLog('warning', 'Please wait for the previous file to be sent.', 'top-end'); + return; + } + if (e.dataTransfer.items && e.dataTransfer.items.length > 1) { + userLog('warning', 'Please drag and drop a single file.', 'top-end'); + return; + } + if (e.dataTransfer.items) { + let item = e.dataTransfer.items[0].webkitGetAsEntry(); + console.log('Drag and drop', item); + if (item.isDirectory) { + userLog('warning', 'Please drag and drop a single file not a folder.', 'top-end'); + return; + } + var file = e.dataTransfer.items[0].getAsFile(); + rc.sendFileInformations(file, peer_id); + } else { + rc.sendFileInformations(e.dataTransfer.files[0], peer_id); + } + }); + } } selectFileToShare(peer_id, broadcast = false) { @@ -2497,9 +2508,11 @@ class RoomClient { const words = uid.split('___'); let peer_id = words[1]; let btnSv = this.getId(uid); - btnSv.addEventListener('click', () => { - this.shareVideo(peer_id); - }); + if (btnSv) { + btnSv.addEventListener('click', () => { + this.shareVideo(peer_id); + }); + } } shareVideo(peer_id = 'all') { @@ -2847,9 +2860,11 @@ class RoomClient { const words = uid.split('___'); let peer_id = words[1] + '___pEject'; let btnKo = this.getId(uid); - btnKo.addEventListener('click', () => { - this.peerAction('me', peer_id, 'eject'); - }); + if (btnKo) { + btnKo.addEventListener('click', () => { + this.peerAction('me', peer_id, 'eject'); + }); + } } // #################################################### @@ -2860,9 +2875,11 @@ class RoomClient { const words = uid.split('___'); let peer_id = words[1] + '___pVideo'; let btnCm = this.getId(uid); - btnCm.addEventListener('click', () => { - this.peerAction('me', peer_id, 'hide'); - }); + if (btnCm) { + btnCm.addEventListener('click', () => { + this.peerAction('me', peer_id, 'hide'); + }); + } } // #################################################### @@ -2873,11 +2890,13 @@ class RoomClient { const words = uid.split('__'); let peer_id = words[0] + '___pAudio'; let btnAU = this.getId(uid); - btnAU.addEventListener('click', (e) => { - if (e.target.className === html.audioOn) { - this.peerAction('me', peer_id, 'mute'); - } - }); + if (btnAU) { + btnAU.addEventListener('click', (e) => { + if (e.target.className === html.audioOn) { + this.peerAction('me', peer_id, 'mute'); + } + }); + } } // ####################################################