From 79dc9dfe4dae93ced7767b98b0cd5f761f44f86a Mon Sep 17 00:00:00 2001 From: Miroslav Pejic Date: Tue, 30 Jul 2024 18:29:48 +0200 Subject: [PATCH] [mirotalksfu] - add feature video focus mode --- app/src/Server.js | 2 +- app/src/config.template.js | 1 + package.json | 2 +- public/js/Room.js | 9 +++++--- public/js/RoomClient.js | 43 +++++++++++++++++++++++++++++++++++--- public/js/Rules.js | 1 + public/js/VideoGrid.js | 3 +++ 7 files changed, 53 insertions(+), 8 deletions(-) diff --git a/app/src/Server.js b/app/src/Server.js index 1db34b3f..0ceba8df 100644 --- a/app/src/Server.js +++ b/app/src/Server.js @@ -44,7 +44,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.5.30 + * @version 1.5.31 * */ diff --git a/app/src/config.template.js b/app/src/config.template.js index bdb4f39f..e26ef578 100644 --- a/app/src/config.template.js +++ b/app/src/config.template.js @@ -389,6 +389,7 @@ module.exports = { videoPictureInPicture: true, fullScreenButton: true, snapShotButton: true, + focusVideoButton: true, sendMessageButton: true, sendFileButton: true, sendVideoButton: true, diff --git a/package.json b/package.json index d58ddc92..2ff19f81 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mirotalksfu", - "version": "1.5.30", + "version": "1.5.31", "description": "WebRTC SFU browser-based video calls", "main": "Server.js", "scripts": { diff --git a/public/js/Room.js b/public/js/Room.js index affd27a6..32701849 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.5.30 + * @version 1.5.31 * */ @@ -315,8 +315,8 @@ function initClient() { setTippy('whiteboardObjectBtn', 'Object mode', 'bottom'); setTippy('whiteboardUndoBtn', 'Undo', 'bottom'); setTippy('whiteboardRedoBtn', 'Redo', 'bottom'); - setTippy('whiteboardLockBtn', 'If Locked, participants cannot interact', 'right'); - setTippy('whiteboardUnlockBtn', 'If Locked, participants cannot interact', 'right'); + setTippy('whiteboardLockBtn', 'Toggle Lock whiteboard', 'right'); + setTippy('whiteboardUnlockBtn', 'Toggle Lock whiteboard', 'right'); setTippy('whiteboardCloseBtn', 'Close', 'right'); setTippy('chatCleanTextButton', 'Clean', 'top'); setTippy('chatPasteButton', 'Paste', 'top'); @@ -1496,6 +1496,9 @@ function handleButtons() { shareRoom(true); }; hideMeButton.onclick = (e) => { + if (isHideALLVideosActive) { + return userLog('warning', 'To use this feature, please toggle video focus mode', 'top-end', 6000); + } isHideMeActive = !isHideMeActive; rc.handleHideMe(); }; diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js index d28040dc..80aa0cf5 100644 --- 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.5.30 + * @version 1.5.31 * */ @@ -42,6 +42,7 @@ const html = { pin: 'fas fa-map-pin', videoPrivacy: 'far fa-circle', expand: 'fas fa-ellipsis-vertical', + hideALL: 'fas fa-eye', }; const icons = { @@ -2209,7 +2210,7 @@ class RoomClient { } async handleConsumer(id, type, stream, peer_name, peer_info) { - let elem, vb, d, p, i, cm, au, pip, fs, ts, sf, sm, sv, gl, ban, ko, pb, pm, pv, pn; + let elem, vb, d, p, i, cm, au, pip, fs, ts, sf, sm, sv, gl, ban, ko, pb, pm, pv, pn, ha; let eDiv, eBtn, eVc; // expand buttons @@ -2267,6 +2268,9 @@ class RoomClient { pn = document.createElement('button'); pn.id = id + '__pin'; pn.className = html.pin; + ha = document.createElement('button'); + ha.id = id + '__hideALL'; + ha.className = html.hideALL; sf = document.createElement('button'); sf.id = id + '___' + remotePeerId + '___sendFile'; sf.className = html.sendFile; @@ -2306,7 +2310,6 @@ class RoomClient { pb.className = 'bar'; pb.style.height = '1%'; pm.appendChild(pb); - BUTTONS.consumerVideo.sendMessageButton && eVc.appendChild(sm); BUTTONS.consumerVideo.sendFileButton && eVc.appendChild(sf); BUTTONS.consumerVideo.sendVideoButton && eVc.appendChild(sv); @@ -2325,6 +2328,7 @@ class RoomClient { this.isVideoPictureInPictureSupported && vb.appendChild(pip); BUTTONS.consumerVideo.fullScreenButton && this.isVideoFullScreenSupported && vb.appendChild(fs); + BUTTONS.consumerVideo.focusVideoButton && vb.appendChild(ha); if (!this.isMobileDevice) vb.appendChild(pn); d.appendChild(elem); d.appendChild(i); @@ -2338,6 +2342,7 @@ class RoomClient { this.handleDD(elem.id, remotePeerId); this.handleTS(elem.id, ts.id); this.handleSF(sf.id); + this.handleHA(ha.id, d.id); this.handleSM(sm.id, peer_name); this.handleSV(sv.id); BUTTONS.consumerVideo.muteVideoButton && this.handleCM(cm.id); @@ -2357,6 +2362,7 @@ class RoomClient { console.log('[addConsumer] Video-element-count', this.videoMediaContainer.childElementCount); if (!this.isMobileDevice) { this.setTippy(pn.id, 'Toggle Pin', 'bottom'); + this.setTippy(ha.id, 'Toggle Focus mode', 'bottom'); this.setTippy(pip.id, 'Toggle picture in picture', 'bottom'); this.setTippy(ts.id, 'Snapshot', 'bottom'); this.setTippy(sf.id, 'Send file', 'bottom'); @@ -6351,6 +6357,37 @@ class RoomClient { // HANDLE VIDEO // ################################################### + handleHA(uid, myVideoContainerId) { + let btnHa = this.getId(uid); + if (btnHa) { + btnHa.addEventListener('click', (e) => { + if (isHideMeActive) { + return this.userLog( + 'warning', + 'To use this feature, please toggle Hide self view before', + 'top-end', + 6000, + ); + } + isHideALLVideosActive = !isHideALLVideosActive; + e.target.style.color = isHideALLVideosActive ? 'lime' : 'white'; + if (isHideALLVideosActive) { + const myVideoContainer = this.getId(myVideoContainerId); + myVideoContainer.style.width = '100%'; + myVideoContainer.style.height = '100%'; + } else { + resizeVideoMedia(); + } + const children = this.videoMediaContainer.children; + for (let child of children) { + if (child.id != myVideoContainerId) { + child.style.display = isHideALLVideosActive ? 'none' : 'block'; + } + } + }); + } + } + handleCM(uid) { const words = uid.split('___'); let peer_id = words[1] + '___pVideo'; diff --git a/public/js/Rules.js b/public/js/Rules.js index 2302cc47..bf489e55 100644 --- a/public/js/Rules.js +++ b/public/js/Rules.js @@ -56,6 +56,7 @@ let BUTTONS = { videoPictureInPicture: true, fullScreenButton: true, snapShotButton: true, + focusVideoButton: true, sendMessageButton: true, sendFileButton: true, sendVideoButton: true, diff --git a/public/js/VideoGrid.js b/public/js/VideoGrid.js index 13632d29..0f7d7808 100644 --- a/public/js/VideoGrid.js +++ b/public/js/VideoGrid.js @@ -5,6 +5,7 @@ // #################################################### let customRatio = true; +let isHideALLVideosActive = false; // aspect 0 1 2 3 4 let ratios = ['0:0', '4:3', '16:9', '1:1', '1:2']; @@ -42,6 +43,8 @@ function Area(Increment, Count, Width, Height, Margin = 10) { } function resizeVideoMedia() { + if (isHideALLVideosActive) return; + let Margin = 5; let videoMediaContainer = document.getElementById('videoMediaContainer'); let Cameras = document.getElementsByClassName('Camera');